/*
* Trailing Paper — Visual Refresh (chrome pass)
* Light Stripe/Check direction. Loaded LAST, globally, after tp-design-tokens.css.
* Reversible: remove the single in partials/head-css.php to roll back.
* Pass 1 scope: tokens, font, sidebar, topbar chrome, primary buttons, content centering.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
/* Flip the TEMPLATE primary (was #FF8B1E orange skin) -> azure, everywhere.
!important on a custom-property declaration wins across specificity, so this
beats the skin-scoped [data-skin]{--primary:...} redefinitions in style.css
and re-colors buttons, tab underlines, links, and active states at once. */
--primary:#0C8CE9!important;
--primary-hover:#0A6FBF!important;
--primary-transparent:#EAF6FE!important;
--bs-primary:#0C8CE9!important;
--bs-primary-rgb:12,140,233!important;
/* Re-skin the shared token system to cool slate + azure */
--tp-surface-0:#F6F8FB;
--tp-surface-1:#FFFFFF;
--tp-surface-2:#F1F5F9;
--tp-surface-divider:#E7EDF3;
--tp-text-primary:#12233A;
--tp-text-secondary:#425466;
--tp-text-muted:#7A8798;
--tp-accent-500:#0C8CE9;
--tp-accent-600:#0A6FBF;
--tp-accent-50:#EAF6FE;
/* Refresh-local tokens */
--tpr-ground:#F6F8FB;
--tpr-surface:#FFFFFF;
--tpr-ink:#12233A;
--tpr-body:#425466;
--tpr-muted:#7A8798;
--tpr-faint:#98A4B4;
--tpr-line:#E7EDF3;
--tpr-line-soft:#EEF2F7;
--tpr-accent:#0C8CE9;
--tpr-accent-ink:#0A6FBF;
--tpr-accent-tint:#EAF6FE;
--tpr-grad:linear-gradient(140deg,#0CAEE9 0%,#0287E8 100%);
--tpr-pill:#F1F5F9;
--tpr-r-card:12px;
--tpr-r-input:9px;
--tpr-r-pill:999px;
--tpr-font:"Inter",-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* ---------- Base typography + ground ---------- */
body{
font-family:var(--tpr-font)!important;
background:var(--tpr-ground)!important;
color:var(--tpr-ink);
-webkit-font-smoothing:antialiased;
letter-spacing:-.005em;
}
/* Force Inter across text-bearing elements. Icons are safe: .isax/.feather/.fa
set font-family with !important at CLASS level, which outranks these element
selectors — so glyphs keep their icon font, everything else becomes Inter. */
body,button,input,select,textarea,optgroup,
table,thead,tbody,tr,td,th,
h1,h2,h3,h4,h5,h6,p,a,span,div,label,li,ul,ol,small,strong,em,b{
font-family:var(--tpr-font)!important}
.page-wrapper{background:var(--tpr-ground)!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{font-family:var(--tpr-font);color:var(--tpr-ink);letter-spacing:-.02em}
a{color:var(--tpr-accent)}
a:hover{color:var(--tpr-accent-ink)}
/* ---------- Content centering (Stripe-style rails) ----------
1520px fits the app's densest content (dashboard 4-card rows, 9-column
tables) so nothing overflows the rail, while big monitors still get side
rails. On narrower screens the cap is a no-op and content fills the width. */
.page-wrapper .content{max-width:1520px;margin-left:auto;margin-right:auto;width:100%}
/* ---------- Sidebar: heavy dark rail -> light rail + azure active pill ---------- */
.sidebar,.two-col-sidebar .sidebar{background:var(--tpr-surface)!important;border-right:1px solid var(--tpr-line)!important;box-shadow:none!important}
.sidebar .sidebar-logo{border-bottom:1px solid var(--tpr-line)!important;background:var(--tpr-surface)!important}
.sidebar-menu > ul > li.menu-title span,.sidebar-menu .menu-title span{color:var(--tpr-faint)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.sidebar-menu ul li a{color:var(--tpr-body)!important;font-weight:500!important;border-radius:9px!important;font-size:13.5px!important}
.sidebar-menu ul li a:hover{background:var(--tpr-line-soft)!important;color:var(--tpr-ink)!important}
.sidebar-menu ul li a i,.sidebar-menu ul li a .isax{color:var(--tpr-muted)!important}
.sidebar-menu ul li a.active,.sidebar-menu ul li.active > a,.sidebar-menu ul li a.subdrop,
.sidebar .sidebar-menu > ul > li > a.active{
background:var(--tpr-accent-tint)!important;color:var(--tpr-accent-ink)!important;font-weight:650!important;
box-shadow:none!important;border-left:0!important}
.sidebar-menu ul li a.active i,.sidebar-menu ul li.active > a i,.sidebar-menu ul li a.active .isax{color:var(--tpr-accent)!important}
/* template paints active label + arrow orange (#FE9F43) at high specificity — override */
.sidebar .sidebar-menu > ul > li > a.active span{color:var(--tpr-accent-ink)!important}
.sidebar .sidebar-menu > ul > li > a.active .menu-arrow{background:transparent!important}
/* ---------- Kill orange accent leaks (tabs, links, underlines) ---------- */
.nav-tabs .nav-link.active,.nav-tabs.nav-bordered .nav-item .nav-link.active,
.nav-tabs.nav-bordered-primary .nav-item .nav-link.active{
color:var(--tpr-accent-ink)!important;border-bottom-color:var(--tpr-accent)!important}
.nav-pills .nav-link.active{background:var(--tpr-accent)!important;color:#fff!important}
.text-primary,a.text-primary{color:var(--tpr-accent)!important}
/* ---------- Replace Stripe "blurple" / indigo-purple with our azure ---------- */
/* Document (invoice/estimate detail) primary action button, was #635BFF/#4f46e5 */
.tp-action-btn.primary{background:var(--tpr-accent)!important;border-color:var(--tpr-accent)!important;color:#fff!important}
.tp-action-btn.primary:hover{background:var(--tpr-accent-ink)!important;border-color:var(--tpr-accent-ink)!important;color:#fff!important}
.btn-pay{background:var(--tpr-accent)!important}
.btn-pay:hover{background:var(--tpr-accent-ink)!important}
/* Indigo/purple utility classes -> azure */
.btn-indigo,.btn-purple{background:var(--tpr-accent)!important;border-color:var(--tpr-accent)!important;color:#fff!important}
.btn-indigo:hover,.btn-purple:hover{background:var(--tpr-accent-ink)!important;border-color:var(--tpr-accent-ink)!important;color:#fff!important}
.bg-indigo,.bg-purple{background-color:var(--tpr-accent)!important}
.bg-indigo-subtle,.bg-purple-subtle{background-color:var(--tpr-accent-tint)!important}
.text-indigo,.text-purple,.text-indigo-emphasis,.text-purple-emphasis{color:var(--tpr-accent)!important}
/* Template primary gradient (was violet #4c00fb->#7539ff) — used on the auth/sign-in
page buttons (login, register, forgot/reset password, two-factor) and elsewhere */
.bg-primary-gradient{background-image:var(--tpr-grad)!important}
/* Filter tabs (.nav-tabs.nav-bordered) -> segmented pills like the preview */
.content .nav-tabs.nav-bordered,.nav-tabs.nav-bordered{border-bottom:0!important;display:flex;flex-wrap:wrap;gap:6px}
.nav-tabs.nav-bordered .nav-item .nav-link{
border:1px solid var(--tpr-line)!important;border-radius:var(--tpr-r-pill)!important;
padding:6px 14px!important;margin:0!important;color:var(--tpr-body)!important;
background:var(--tpr-surface)!important;font-weight:600!important;font-size:13px!important}
.nav-tabs.nav-bordered .nav-item .nav-link:hover{border-color:#D3DEEA!important;color:var(--tpr-ink)!important}
.nav-tabs.nav-bordered .nav-item .nav-link.active{
background:var(--tpr-ink)!important;color:#fff!important;border-color:var(--tpr-ink)!important}
.sidebar .sidebar-search .form-control,.sidebar-search input{border-radius:var(--tpr-r-pill)!important;border-color:var(--tpr-line)!important;background:var(--tpr-surface)!important}
/* Remove the small settings icon pinned at the bottom of the sidebar */
.sidebar .sidebar-footer{display:none!important}
/* Bottom rest so the last menu item can scroll fully into view */
.sidebar #sidebar-menu{padding-bottom:36px!important}
.sidebar .sidebar-inner{padding-bottom:8px!important}
/* ---------- Topbar / header ---------- */
.header,.page-header,.admin-topbar{background:rgba(246,248,251,.85)!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--tpr-line)!important;box-shadow:none!important}
/* ---------- Primary buttons -> azure gradient pill ---------- */
.btn-primary,.btn.btn-primary{
background:var(--tpr-grad)!important;border:0!important;border-radius:var(--tpr-r-pill)!important;
font-weight:600!important;box-shadow:0 1px 2px rgba(2,135,232,.35),0 2px 8px rgba(2,135,232,.16)!important;
color:#fff!important}
.btn-primary:hover,.btn.btn-primary:hover{filter:brightness(1.03);box-shadow:0 2px 10px rgba(2,135,232,.28)!important}
.btn{border-radius:var(--tpr-r-pill)!important;font-weight:600}
.btn-outline-white,.btn-outline-secondary,.btn-outline-primary{
border-radius:var(--tpr-r-pill)!important;border:1px solid var(--tpr-line)!important;
background:var(--tpr-surface)!important;color:var(--tpr-body)!important;font-weight:600}
.btn-outline-white:hover,.btn-outline-secondary:hover{border-color:#D3DEEA!important;color:var(--tpr-ink)!important;background:var(--tpr-surface)!important}
/* ---------- Kill decorative template junk ---------- */
/* Colored corner-ribbon SVGs on cards (assets/img/bg/card-bg-*.svg, z-n1) */
img[src*="/img/bg/"],img[src*="card-bg"]{display:none!important}
/* Dashboard "Welcome back" hero: drop the gradient + decorative blobs -> flat card */
.tp-welcome-hero{background:var(--tpr-surface)!important;border:1px solid var(--tpr-line)!important;box-shadow:none!important}
.tp-welcome-hero::before,.tp-welcome-hero::after{content:none!important;display:none!important;background:none!important}
/* ---------- Sidebar: remove group dividers (scoped to sidebar only) ----------
The real divider is border-bottom on the nested per-section
(.sidebar-menu > ul > li ul), NOT on the outer ul or the - s. */
.sidebar .sidebar-menu > ul > li ul{border-bottom:0!important;padding-bottom:0!important;margin-bottom:8px!important}
.sidebar-menu li.menu-title,.sidebar-menu > ul,.sidebar-menu > ul > li,.sidebar-menu li{
border-top:0!important;border-bottom:0!important;box-shadow:none!important}
.sidebar hr,.sidebar-menu hr{display:none!important}
/* ---------- Seamless content: one flat ground, no panel/seam ---------- */
body,.page-wrapper,.page-wrapper .content{background:var(--tpr-ground)!important}
.page-wrapper .content{background:transparent!important}
/* ---------- Pass 2: KPI stat cards -> plain metric cards, matching preview ----------
Layout target: label (top) -> big value -> trend pill (bottom), no colored icon.
tp-stat-panel.css loads after this sheet, so !important is required. */
.tp-stat-card,
.tp-stat-card--total,.tp-stat-card--paid,.tp-stat-card--pending,.tp-stat-card--overdue{
background:var(--tpr-surface)!important;border:1px solid var(--tpr-line)!important;
box-shadow:none!important;border-radius:var(--tpr-r-card)!important;
display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;
padding:18px 20px!important}
.tp-stat-card:hover{transform:none!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important}
.tp-stat-card__icon{display:none!important} /* kill the colored icon badge */
.tp-stat-card__label{order:1;margin:0 0 2px 0!important;color:var(--tpr-muted)!important;font-weight:500!important}
.tp-stat-card__value{order:2;margin:0!important;color:var(--tpr-ink)!important;font-weight:700!important}
.tp-stat-card__top{order:3;width:100%;margin:8px 0 0 0!important;padding:0!important;justify-content:flex-start!important}
.tp-stat-card__pill{font-weight:600!important}
/* ---------- Pass 2: table restyle to match preview ---------- */
/* Neutral avatars (was solid teal/azure fill) -> soft azure tint + ink initials */
.tp-customer-avatar{background:var(--tpr-accent-tint)!important;color:var(--tpr-accent-ink)!important}
/* Status badges -> soft pills with a leading dot, palette-matched (all list tables) */
.tp-table-card .badge{border-radius:var(--tpr-r-pill)!important;font-weight:600!important;
padding:4px 10px!important;font-size:12px!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
.tp-table-card .badge[class*="badge-soft"] i{display:none!important}
.tp-table-card .badge[class*="badge-soft"]::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-soft-success{background:var(--tpr-ok-bg,#E6F6EF)!important;color:var(--tpr-ok,#0E9F6E)!important}
.badge-soft-danger{background:var(--tpr-due-bg,#FBEAE5)!important;color:var(--tpr-due,#C0492E)!important}
.badge-soft-warning{background:var(--tpr-warn-bg,#FBF1DC)!important;color:var(--tpr-warn,#B47818)!important}
.badge-soft-info{background:var(--tpr-accent-tint)!important;color:var(--tpr-accent-ink)!important}
.badge-soft-secondary{background:var(--tpr-pill)!important;color:var(--tpr-muted)!important}
/* Radius on the
ELEMENT itself — no wrapping card, no rounded scroll slab.
border-collapse:separate lets the table round; the four corner cells carry the
radii; every wrapper stays transparent so there is no card behind and no empty
gutter on horizontal scroll, and row dropdowns still escape (no overflow clip). */
.tp-table-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.tp-table-card .table-responsive{border:0!important;border-radius:0!important;background:transparent!important}
.tp-table-card table.table{border-collapse:separate!important;border-spacing:0!important;
border:1px solid var(--tpr-line)!important;border-radius:16px!important;background:var(--tpr-surface)!important}
.tp-table-card table.table thead th:first-child{border-top-left-radius:15px!important}
.tp-table-card table.table thead th:last-child{border-top-right-radius:15px!important}
.tp-table-card table.table tbody tr:last-child td:first-child{border-bottom-left-radius:15px!important}
.tp-table-card table.table tbody tr:last-child td:last-child{border-bottom-right-radius:15px!important}
/* Airy rows + uppercase gray headers */
.tp-table-card thead th{text-transform:uppercase!important;font-size:11px!important;letter-spacing:.05em!important;
color:var(--tpr-faint)!important;font-weight:600!important;background:transparent!important;
border-bottom:1px solid var(--tpr-line)!important;padding:12px 14px!important}
.tp-table-card tbody td{padding:14px!important;border-bottom:1px solid var(--tpr-line-soft)!important}
.tp-table-card tbody tr:hover{background:var(--tpr-line-soft)!important}
/* Width-capped cells that scroll horizontally within themselves to reveal the
full value (per-cell overflow-x, no truncation of the underlying text). */
.tp-cell-trim{display:inline-block;max-width:180px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;vertical-align:middle;scrollbar-width:thin}
.tp-cell-trim-xs{display:inline-block;max-width:110px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;vertical-align:middle;scrollbar-width:thin}
.tp-cell-trim::-webkit-scrollbar,.tp-cell-trim-xs::-webkit-scrollbar{height:5px}
.tp-cell-trim::-webkit-scrollbar-thumb,.tp-cell-trim-xs::-webkit-scrollbar-thumb{background:var(--tpr-line);border-radius:999px}
/* Drop DataTables sort-arrow glyphs (keeps click-to-sort, matches clean preview) */
table.dataTable > thead .sorting:before,table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,table.dataTable > thead .sorting_desc:after{display:none!important}
/* ---------- Links & focus ---------- */
:focus-visible{outline:2px solid var(--tpr-accent);outline-offset:2px}