@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;min-width:0;max-width:100%}
html{overflow-x:hidden;max-width:100%}
:root{
  /* ── ECTS Brand Palette ── */
  --navy:#0B2545;--navy-mid:#163A6B;--navy-light:#1E4E8C;
  --blue:#1A6FD4;--blue-mid:#2484E8;--blue-light:#5AAFF7;--blue-glow:rgba(26,111,212,.18);
  --green:#0DBF7E;--green-mid:#0EA56C;--green-dark:#098055;--green-glow:rgba(13,191,126,.18);
  --teal:#0ABECC;
  /* Semantic */
  --primary:var(--blue);--primary-dark:var(--navy-mid);--primary-light:#EBF4FF;
  --accent:var(--green);--success:var(--green-mid);
  --warning:#F59E0B;--danger:#EF4444;
  /* Surface (light) */
  --bg:#F0F4FA;--surface:#FFFFFF;--surface-2:#F7FAFD;--surface-3:#EDF2F9;
  --border:#DDE6F0;--border-strong:#B8CCE0;
  /* Text */
  --text:#0B1D35;--text-2:#2C4162;--text-3:#5C7A9A;--text-4:#9AB0C8;--white:#FFFFFF;
  /* Gradients */
  --grad-brand:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 50%,var(--blue) 100%);
  --grad-accent:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%);
  --grad-hero:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,var(--blue-mid) 100%);
  --grad-card:linear-gradient(135deg,var(--blue-glow),var(--green-glow));
  /* Shadows */
  --shadow-xs:0 1px 2px rgba(11,37,69,.06);
  --shadow-sm:0 2px 6px rgba(11,37,69,.08),0 1px 2px rgba(11,37,69,.05);
  --shadow:0 4px 16px rgba(11,37,69,.10),0 2px 4px rgba(11,37,69,.06);
  --shadow-md:0 8px 28px rgba(11,37,69,.12),0 4px 8px rgba(11,37,69,.07);
  --shadow-lg:0 20px 50px rgba(11,37,69,.18),0 8px 16px rgba(11,37,69,.10);
  --shadow-glow-blue:0 0 0 3px var(--blue-glow);
  --shadow-glow-green:0 0 0 3px var(--green-glow);
  /* Radius */
  --r-sm:6px;--r:8px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-full:999px;
  /* Nav */
  --nav-height:58px;--strip-height:48px;
}
html.dark{
  --bg:#060F1E;--surface:#0D1B2E;--surface-2:#060F1E;--surface-3:#111F33;
  --border:#1A2E45;--border-strong:#243D58;
  --text:#F8FAFC;--text-2:#CBD5E1;--text-3:#94A3B8;--text-4:#64748B;
  --hover:rgba(255,255,255,.05);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4);
  --primary-light:rgba(26,111,212,.14);
  --blue-glow:rgba(26,111,212,.25);--green-glow:rgba(13,191,126,.2);
}
html.dark-cool{
  --bg:#0f1117;--surface:#1a1f2e;--surface-2:#1e293b;--surface-3:#2d3748;
  --border:#2d3748;--border-strong:#3d4f66;
  --text:#f1f5f9;--text-2:#94a3b8;--text-3:#64748b;--text-4:#475569;
  --navy:#1e3a5f;--blue:#3b82f6;--green:#10b981;
  --hover:rgba(255,255,255,.05);
  --primary-light:rgba(59,130,246,.14);
  --blue-glow:rgba(59,130,246,.25);--green-glow:rgba(16,185,129,.2);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4);
}
html.dark-warm{
  --bg:#121110;--surface:#1c1917;--surface-2:#292524;--surface-3:#3c3835;
  --border:#292524;--border-strong:#3c3835;
  --text:#fafaf9;--text-2:#a8a29e;--text-3:#78716c;--text-4:#57534e;
  --navy:#292524;--blue:#60a5fa;--green:#34d399;
  --hover:rgba(255,255,255,.05);
  --primary-light:rgba(96,165,250,.14);
  --blue-glow:rgba(96,165,250,.25);--green-glow:rgba(52,211,153,.2);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4);
}
body{font-family:-apple-system,'Segoe UI',system-ui,sans-serif;background:linear-gradient(180deg,#F4F6FB 0%,#E9EDF4 100%);color:var(--text);min-height:100vh;font-size:13px;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
html.dark body,html.dark-cool body{background:linear-gradient(180deg,#0F172A 0%,#1E293B 100%)}
html.dark-warm body{background:linear-gradient(180deg,#121110 0%,#1c1917 100%)}

/* ====== AUTH ====== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--grad-hero);padding:20px;position:relative;overflow:hidden}
.auth-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 100%,rgba(13,191,126,.2),transparent),radial-gradient(ellipse 60% 60% at 70% 0%,rgba(26,111,212,.25),transparent);pointer-events:none}
.auth-card{background:var(--surface);padding:44px 40px;border-radius:24px;box-shadow:0 40px 80px rgba(6,15,30,.6),0 0 0 1px rgba(255,255,255,.07),0 0 60px rgba(13,191,126,.08);max-width:420px;width:100%;position:relative;z-index:1}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo h1{font-size:26px;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:10px;letter-spacing:-.5px}
.auth-logo .icon{font-size:52px;filter:drop-shadow(0 4px 20px rgba(13,191,126,.6));display:block}
.auth-logo .tagline{font-size:12px;color:var(--text-3);margin-top:6px}
.auth-btn-group{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.auth-type-btn{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:.2s;text-align:left}
.auth-type-btn:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-1px);box-shadow:var(--shadow)}
.auth-type-btn .icon{font-size:22px}
.auth-type-btn strong{display:block;font-size:13px;color:var(--text)}
.auth-type-btn span{font-size:11px;color:var(--text-3)}

/* ====== NAVBAR ====== */
#globalNav{display:none;position:fixed;top:0;left:0;right:0;z-index:1100;height:var(--nav-height)}
body.is-employee #globalNav,body.is-client #globalNav{display:block}
/* The navbar spans the full width; the recent-accounts sidebar starts below the navbar
   (see #recentAcctsSidebar top:var(--nav-height)), so no left indent is needed. */
/* Push each visible page below the fixed navbar (body padding would break the auth screen layout) */
body.is-employee .page-wrap.active,body.is-client .page-wrap.active{padding-top:var(--nav-height)}
.navbar{background:linear-gradient(135deg,#0f1f3d 0%,#1a3a6e 50%,#2563eb 100%);color:white;padding:0 16px;height:var(--nav-height);display:flex;align-items:center;gap:8px;overflow:hidden;max-width:100%}
.navbar-brand{font-size:16px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px;letter-spacing:-.2px;flex-shrink:0}
.nav-list{display:flex;gap:2px;list-style:none;flex:1;margin-left:4px;overflow:hidden;min-width:0}
.nav-list a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:600;padding:6px 16px;border-radius:999px;transition:.18s;cursor:pointer;font-size:12px;letter-spacing:.1px}
.nav-list a:hover{background:rgba(255,255,255,.12);color:white;border-radius:999px}.nav-list a.active{background:linear-gradient(135deg,rgba(13,191,126,.3),rgba(26,111,212,.2));color:white;border:1px solid rgba(13,191,126,.3);border-radius:999px}
.user-pill{background:rgba(255,255,255,.12);padding:5px 12px;border-radius:var(--r-full);font-size:11px;white-space:nowrap;border:1px solid rgba(255,255,255,.2);font-weight:500;cursor:pointer;color:inherit;font-family:inherit;transition:.15s}
.user-pill:hover{background:rgba(255,255,255,.22)}
.user-dropdown{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);min-width:170px;z-index:2000;overflow:hidden;display:none}
.user-dropdown.open{display:block}
.user-dropdown-item{display:block;width:100%;padding:10px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:13px;color:var(--text);font-family:inherit;line-height:1.4}
.user-dropdown-item:hover{background:var(--surface-3)}
.dark-toggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:white;padding:5px 9px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;transition:.2s;display:flex;align-items:center}
.dark-toggle:hover{background:rgba(255,255,255,.2)}

/* ====== ACCOUNT STRIP ====== */
.acct-strip{background:var(--surface);border-bottom:0;padding:0 16px;display:none;align-items:center;min-height:var(--strip-height);gap:0;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;scrollbar-width:none;box-sizing:border-box}
.acct-strip::-webkit-scrollbar{display:none}
.page-sticky-header{position:sticky;top:var(--nav-height);z-index:1000;box-shadow:0 2px 12px rgba(6,15,30,.25);background:var(--surface);width:100%}
.acct-strip.visible{display:flex}
.acct-strip-back{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:5px;padding:0 14px 0 0;border-right:1px solid var(--border);border-bottom:3px solid transparent;margin-right:8px;cursor:pointer;color:var(--green-dark);font-weight:700;font-size:12px;white-space:nowrap;text-decoration:none;transition:.18s;height:var(--strip-height)}
.acct-strip-back:hover{color:var(--primary-dark)}
.acct-strip-name{font-size:12px;font-weight:700;color:var(--text-2);padding:0 12px 0 4px;border-right:1px solid var(--border);border-bottom:3px solid transparent;margin-right:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:var(--strip-height);display:flex;align-items:center}
.acct-strip-tabs{display:flex;gap:0;flex:1}
.acct-strip-tab{background:none;border:none;padding:0 15px;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;border-bottom:3px solid transparent;transition:.18s;white-space:nowrap;height:var(--strip-height);display:flex;align-items:center}
.acct-strip-tab:hover{color:var(--primary);background:var(--primary-light)}
.acct-strip-tab.active{color:var(--blue);border-bottom-color:var(--green);font-weight:800;background:rgba(13,191,126,.08);box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.05)}
.acct-strip-sub{font-size:11px;color:var(--text-3);padding:0 12px;font-style:italic;height:var(--strip-height);display:flex;align-items:center}

/* ====== LAYOUT ====== */
.page-wrap{display:none}
.page-wrap.active{display:block}
.container{max-width:100%;margin:0 auto;padding:14px 8px;width:100%;overflow-x:visible}

/* ====== RECENT ACCOUNTS SIDEBAR (all employee pages) ====== */
#recentAcctsSidebar{display:none;position:fixed;left:0;top:var(--nav-height);bottom:0;width:200px;background:var(--surface-2);border-right:1px solid var(--border);padding:14px 10px;overflow-y:auto;z-index:1200}
body.is-employee #recentAcctsSidebar{display:block}
/* Deep pages add a sticky acct-strip below the navbar — push the sidebar content below the strip (top already accounts for the navbar) */
/* No deep-page override needed — sidebar z-index:1200 > acct-strip z-index:1000, content is always visible */
.ra-sidebar-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-top:6px;margin-bottom:10px;padding:0 4px}
.ra-sidebar-list{display:flex;flex-direction:column;gap:4px}
.ra-sidebar-item{display:block;padding:8px 10px;border-radius:6px;font-size:12px;color:var(--text);cursor:pointer;border:1px solid transparent;line-height:1.3}
.ra-sidebar-item:hover{background:var(--surface-3);border-color:var(--border)}
.ra-sidebar-item .ra-name{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-sidebar-item .ra-am{font-size:10px;color:var(--text-3);display:block;margin-top:2px}
.ra-sidebar-empty{font-size:11px;color:var(--text-3);font-style:italic;padding:8px 4px;line-height:1.4}

/* ====== HOME UNIFIED SEARCH DROPDOWN ====== */
.home-search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 24px rgba(15,31,61,.12);max-height:420px;overflow-y:auto;z-index:60}
.home-search-section-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:8px 12px 4px;background:var(--surface-2)}
.home-search-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:12px;line-height:1.35}
.home-search-item:last-child{border-bottom:none}
.home-search-item:hover{background:var(--primary-light)}
.home-search-item .hs-title{font-weight:600;color:var(--text)}
.home-search-item .hs-sub{font-size:11px;color:var(--text-3);margin-top:1px}
.home-search-empty{padding:12px;font-size:12px;color:var(--text-3);font-style:italic;text-align:center}

/* ====== FUNDING TABLE — 471 line items drawer ====== */
tr.funding-row:hover{background:var(--surface-2)}
tr.funding-li-drawer>td{background:var(--surface-2);border-top:none;padding:0}
.funding-li-body{padding:8px 12px 14px;display:inline-block;width:100%;overflow-x:auto;box-sizing:border-box}
.funding-li-table{width:auto;min-width:400px;border-collapse:collapse;font-size:11px;background:var(--surface);border:1px solid var(--border);border-radius:6px}
.funding-li-table thead th{background:var(--surface-3);color:var(--text-2);font-size:10px;font-weight:700;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.3px}
.funding-li-table tbody td{padding:5px 8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text)}
.funding-li-table tbody tr:last-child td{border-bottom:none}

/* ====== TO-DO STRIP ====== */
.todo-section{padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:12px}
.todo-section-hdr{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12px;color:var(--text-2);margin-bottom:8px}
.todo-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:700}
.todo-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.todo-pill{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:.15s}
.todo-pill:hover{filter:brightness(1.04);border-color:rgba(15,31,61,.18)}
.todo-pill-overdue{border-left:4px solid #DC2626;border-radius:0 999px 999px 0;padding-left:10px}
/* Push every employee page right to make room for the sidebar */
body.is-employee .container{padding-left:218px}
body.is-employee .page-sticky-header{padding-left:200px}
@media(max-width:900px){
  body.is-employee #recentAcctsSidebar,
  body.is-employee:has(#acctDetail.active,#frnPage.active,#soPage.active,#f470Page.active,#f470DetailPage.active,#rsPage.active,#leadDetail.active) #recentAcctsSidebar{position:static;width:auto;border-right:none;border-bottom:1px solid var(--border);max-height:120px;padding:8px 12px;top:auto;z-index:auto}
  body.is-employee .container{padding-left:18px}
  body.is-employee .page-sticky-header{padding-left:0}
  body.is-employee #globalNav .navbar{padding-left:16px}
  .ra-sidebar-list{flex-direction:row;overflow-x:auto;gap:8px}
  .ra-sidebar-item{flex-shrink:0;min-width:160px}
}
.page-header{margin-bottom:20px}
.page-header h1{font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.page-header p{color:var(--text-3);margin-top:4px;font-size:12px}
.home-welcome-bar{background:var(--surface);border-radius:10px;padding:14px 18px;margin-bottom:12px;border:0.5px solid #d1dae8}
html.dark .home-welcome-bar{border-color:var(--border)}
html.dark .home-welcome-bar h1,
html.dark-cool .home-welcome-bar h1,
html.dark-warm .home-welcome-bar h1{color:#FFFFFF!important}
html.dark .home-welcome-bar p,
html.dark-cool .home-welcome-bar p,
html.dark-warm .home-welcome-bar p{color:#CBD5E1!important}

/* ====== TABS ====== */
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;background:var(--surface);border-radius:var(--r-md) var(--r-md) 0 0;overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow-xs);scrollbar-width:none;max-width:100%}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{background:none;border:none;padding:12px 18px;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;border-bottom:3px solid transparent;transition:.18s;white-space:nowrap;margin-bottom:-2px}
.tab-btn:hover{color:var(--primary);background:var(--primary-light)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--green);background:var(--surface)}
.tab-pane{display:none;width:100%;box-sizing:border-box}
.tab-pane.active{display:block;width:100%;box-sizing:border-box}
.report-section{width:100%;box-sizing:border-box}

/* ====== STAT CARDS ====== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.stat-card{background:var(--surface);padding:14px 18px;border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--border);position:relative;overflow:hidden;transition:.2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .val{font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:6px 0;line-height:1}
.stat-card .lbl{font-size:10px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.stat-card .sub{font-size:11px;color:var(--text-3);margin-top:8px}
.stat-accent-navy{border-left:3px solid #0f1f3d}
.stat-accent-blue{border-left:3px solid #2563eb}
.stat-accent-green{border-left:3px solid #0f6e56}
.stat-accent-amber{border-left:3px solid #ba7517}
.prog-bar{height:3px;background:var(--border);border-radius:var(--r-full);margin-top:10px;overflow:hidden}
.prog-fill{height:100%;background:#2563eb;border-radius:var(--r-full);transition:.5s ease}

/* ====== CLIENT PORTAL HOME ====== */
.client-home{display:flex;flex-direction:column;align-items:center;padding:40px 24px}
.client-welcome{text-align:center;margin-bottom:40px}
.client-welcome h1{font-size:28px;font-weight:800;letter-spacing:-.5px}
.client-welcome p{color:var(--text-3);margin-top:8px;font-size:14px}
.client-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;width:100%;max-width:900px}
.client-action-card{background:var(--surface);padding:36px 28px;border-radius:var(--r-xl);box-shadow:var(--shadow-md);border:1px solid var(--border);text-align:center;cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.client-action-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--blue),var(--green));opacity:0;transition:.25s;border-radius:var(--r-xl)}
.client-action-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.client-action-card:hover::after{opacity:.04}
.client-action-card .ca-icon{font-size:40px;margin-bottom:16px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}
.client-action-card h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text)}
.client-action-card p{font-size:12px;color:var(--text-3)}

/* ====== ACCOUNT CARDS ====== */
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.acct-card{background:var(--surface);padding:12px 16px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;align-items:flex-start;transition:.22s;border:1px solid var(--border);cursor:pointer}
.acct-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md),0 0 0 2px rgba(13,191,126,.25);border-color:var(--green)}
.acct-info h3{font-size:13px;font-weight:700;margin-bottom:4px;color:var(--text)}
.acct-info p{font-size:11px;color:var(--text-3);margin-bottom:2px}
.acct-status{width:8px;height:8px;border-radius:var(--r-full);margin-top:4px;flex-shrink:0}
.acct-status.complete{background:var(--success)}
.acct-status.pending{background:var(--warning)}

/* ====== FORMS ====== */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.form-control{padding:8px 10px;min-height:36px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:12px;font-family:inherit;transition:.18s;background:var(--surface);color:var(--text);width:100%;box-sizing:border-box}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:var(--shadow-glow-blue)}
.form-control:hover:not(:focus):not([readonly]){border-color:var(--border-strong)}
.form-control[readonly]{background:var(--surface-3);color:var(--text-3)}
textarea.form-control{min-height:60px;resize:vertical;line-height:1.5}
select.form-control{cursor:pointer}

/* ====== BUTTONS ====== */
.btn{padding:7px 15px;border:none;border-radius:var(--r-sm);font-weight:600;font-size:12px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;letter-spacing:.1px}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn:active{transform:translateY(0);opacity:1}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--navy-mid));color:white;box-shadow:0 2px 10px rgba(11,37,69,.25)}
.btn-primary:hover{box-shadow:0 4px 20px rgba(26,111,212,.4)}
.btn-secondary{background:var(--surface);color:var(--text-2);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn-danger{background:linear-gradient(135deg,#DC2626,#B91C1C);color:white;box-shadow:0 2px 8px rgba(220,38,38,.2)}
.btn-success{background:linear-gradient(135deg,var(--green),var(--green-dark));color:white;box-shadow:0 2px 10px rgba(13,191,126,.25)}
.btn-warning{background:linear-gradient(135deg,#D97706,#B45309);color:white}
.btn-ghost{background:transparent;color:var(--blue);padding:4px 8px;font-weight:600}
.btn-ghost:hover{background:var(--blue-glow)}
.btn-outline{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue-glow)}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-xs{padding:3px 7px;font-size:10px;border-radius:4px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}

/* ====== TABLES ====== */
.table-wrap{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:20px;border:1px solid var(--border);width:100%;max-width:100%}
.table-wrap.overflow{display:block;width:100%;overflow-x:auto !important;overflow-y:visible;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:0;max-width:none;table-layout:auto}
thead th{padding:11px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;background:var(--surface-3);border-bottom:2px solid var(--border);white-space:nowrap;overflow:hidden}
tbody td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle;color:var(--text);white-space:nowrap;overflow:hidden}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--primary-light)}
td input.form-control,td select.form-control{padding:8px 10px;min-height:36px;font-size:11px;min-width:0;width:100%;box-sizing:border-box}
.greyed td{opacity:.4;background:var(--surface-3)!important}
.add-row-cell{color:var(--primary);cursor:pointer;font-weight:600;font-size:11px;padding:10px 14px;border-bottom:none}

/* ====== FUNDING / REPORTS DATA TABLES ====== */
/* Compact, no-wrap tables for multi-column financial data */
.data-table thead th{font-size:11px;padding:4px 6px;letter-spacing:0;white-space:nowrap}
.data-table tbody td{font-size:11px;padding:4px 6px;white-space:nowrap}
/* Long text columns: truncate with ellipsis */
.data-table .col-text{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FRN link must not wrap */
.data-table .frn-link{white-space:nowrap}

/* ====== BADGES ====== */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.badge-success{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100)}
.badge-warning{background:#FFFBEB;color:#B45309;border:1px solid #FDE68A}
.badge-danger{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.badge-info{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100)}
.badge-canceled{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.badge-gray{background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}
html.dark .badge-success,html.dark-cool .badge-success,html.dark-warm .badge-success{background:rgba(16,185,129,.1);color:#34D399;border-color:rgba(16,185,129,.2)}
html.dark .badge-warning,html.dark-cool .badge-warning,html.dark-warm .badge-warning{background:rgba(245,158,11,.1);color:#FCD34D;border-color:rgba(245,158,11,.2)}
html.dark .badge-danger,html.dark-cool .badge-danger,html.dark-warm .badge-danger{background:rgba(239,68,68,.1);color:#FCA5A5;border-color:rgba(239,68,68,.2)}
html.dark .badge-info,html.dark-cool .badge-info,html.dark-warm .badge-info{background:rgba(59,130,246,.1);color:#93C5FD;border-color:rgba(59,130,246,.2)}
html.dark .badge-canceled,html.dark-cool .badge-canceled,html.dark-warm .badge-canceled{background:rgba(249,115,22,.1);color:#fb923c;border-color:rgba(249,115,22,.2)}
/* System Code — permanent record identifier, shown as a monospace chip */
.sys-code-badge{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;width:fit-content}
html.dark .sys-code-badge{color:#93C5FD;background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.2)}

/* ====== ALPHA FILTER ====== */
.alpha-filter{background:var(--surface);padding:10px 14px;border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:3px;border:1px solid var(--border)}
.alpha-btn{padding:4px 8px;border:1px solid var(--border);background:var(--surface);border-radius:4px;cursor:pointer;font-weight:600;font-size:11px;transition:.15s;min-width:26px;text-align:center;color:var(--text-2)}
.alpha-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.alpha-btn.active{background:linear-gradient(135deg,var(--blue),var(--navy-mid));color:white;border-color:var(--blue)}

/* ====== FORM LINKS (Forms Tab) ====== */
.form-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.form-links-section h3{font-size:13px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--border);color:var(--text-2)}
.form-link-item{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px;transition:.2s;cursor:pointer;text-decoration:none}
.form-link-item:hover{border-color:var(--green);background:linear-gradient(135deg,rgba(13,191,126,.05),rgba(26,111,212,.05));transform:translateX(4px);box-shadow:var(--shadow)}
.form-link-item .fli-icon{font-size:22px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.form-link-item .fli-text{flex:1}
.form-link-item .fli-text strong{display:block;color:var(--primary);font-size:13px;font-weight:700}
.form-link-item .fli-text span{display:block;color:var(--text-3);font-size:11px;margin-top:2px}
.form-link-item .fli-arrow{color:var(--text-4);font-size:16px;font-weight:700}
.form-link-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ====== SECTION BLOCKS (Accounting) ====== */
.section-block{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:10px;overflow:hidden}
.section-block-hdr{padding:14px 18px;background:var(--surface-3);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;transition:.18s;flex-wrap:wrap;gap:8px}
.section-block-hdr:hover{background:var(--primary-light)}
.section-block-hdr h3{font-size:13px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;color:var(--text)}
.section-block-hdr .arrow{transition:.3s;display:inline-block;font-size:10px;color:var(--text-3)}
.section-block-hdr.open .arrow{transform:rotate(180deg)}
.section-block-body{display:none;padding:18px}
.section-block-body.open{display:block}

/* ====== MODAL ====== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:2000;display:none;align-items:center;justify-content:center;padding:16px;overflow-x:hidden}
.modal-bg.open{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--surface);border-radius:var(--r-xl);padding:24px;width:100%;max-width:min(var(--mw,680px),calc(100vw - 32px));max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 32px 80px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);position:relative;animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-box.sm{--mw:480px}
.modal-box.md{--mw:680px}
.modal-box.lg{--mw:960px}
.modal-box.xl{--mw:1200px}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.modal-hdr h2{font-size:17px;font-weight:800;margin:0;letter-spacing:-.2px;color:var(--text)}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-3);padding:4px 6px;border-radius:var(--r-sm);transition:.18s;line-height:1}
.modal-close:hover{background:var(--surface-3);color:var(--danger)}
.modal-footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ====== SECTION TITLE ====== */

.tab-pane > .section-title:first-child,.tab-pane > .section-title:first-of-type{margin-top:0}
.section-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;margin-top:28px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.year-bar{display:flex;align-items:center;gap:12px;background:var(--surface);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow-sm);margin-bottom:12px;border:0.5px solid #d1dae8;flex-wrap:wrap}
html.dark .year-bar{border-color:var(--border)}
.year-bar label{font-size:11px;font-weight:700;color:var(--text-2);white-space:nowrap;margin:0}
.year-bar select{width:auto;padding:5px 10px}
.search-bar{background:var(--surface);padding:10px 12px;border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-bottom:16px;border:1px solid var(--border)}
.info-box{background:linear-gradient(135deg,rgba(26,111,212,.05),rgba(13,191,126,.05));border:1px solid rgba(13,191,126,.2);border-radius:var(--r-md);padding:12px 16px;margin-bottom:16px;font-size:12px;color:var(--green-dark);display:flex;align-items:center;gap:8px}
html.dark .info-box{background:rgba(13,191,126,.08);color:#34D399;border-color:rgba(13,191,126,.2)}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-3)}
.empty-state .es-icon{font-size:40px;margin-bottom:14px;filter:grayscale(.5);display:block}
.empty-state p{font-size:13px;font-weight:500}
.empty-state .es-sub{font-size:12px;color:var(--text-4);margin-top:6px}
.row-actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.hidden{display:none!important}
.emp-only{display:none!important}
.emp-only.show{display:block!important}
.emp-only-flex{display:none!important}
.emp-only-flex.show{display:flex!important}
.emp-only-inline{display:none!important}
.emp-only-inline.show{display:inline-flex!important}
.divider{border:none;border-top:2px solid var(--border);margin:24px 0}
.text-muted{color:var(--text-3);font-size:11px}
.text-link{color:var(--blue);cursor:pointer;text-decoration:none;font-weight:600;transition:.15s}
.text-link:hover{color:var(--primary-dark);text-decoration:underline}

/* ====== FRN COLUMNS ====== */
.frn-wrap{overflow-x:auto;overflow-y:visible;padding-bottom:16px;width:100%;max-width:100%;-webkit-overflow-scrolling:touch}
.frn-cols{display:flex;flex-direction:column;gap:14px;width:100%}
.frn-col{width:100%;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--border);overflow:visible}
.frn-col-hdr{background:linear-gradient(135deg,var(--navy-mid),var(--blue));color:white;padding:11px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:var(--r-lg) var(--r-lg) 0 0;cursor:pointer;user-select:none}
.frn-col-hdr.collapsed{border-radius:var(--r-lg)}
.frn-col-hdr .col-title{flex:1;min-width:0;word-break:break-word}
.frn-col-hdr .col-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.frn-col-hdr .col-btns button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);color:white;padding:3px 8px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;transition:.15s}
.frn-col-hdr .col-btns button:hover{background:rgba(255,255,255,.3)}
.frn-col-hdr .col-chev{font-size:14px;opacity:.85;transition:transform .2s}
.frn-col-hdr.collapsed .col-chev{transform:rotate(-90deg)}
.frn-col-body{padding:12px}
.frn-col-body.collapsed{display:none}
.frn-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.frn-field{padding:0}
.frn-field .fl{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:block}
.frn-field .fv{font-size:11px;color:var(--text)}
.frn-field input,.frn-field select{font-size:12px;padding:8px 10px;min-height:36px;width:100%;border:1.5px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);box-sizing:border-box}
.frn-field.readonly input,.frn-field.readonly select{background:var(--surface-3);pointer-events:none;color:var(--text-3)}
.frn-line-items{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.frn-line-items-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:700;color:var(--text-2);padding:6px 4px;user-select:none}
.frn-line-items-hdr .li-chev{transition:transform .2s}
.frn-line-items-hdr.collapsed .li-chev{transform:rotate(-90deg)}
.frn-line-items-body{margin-top:8px}
.frn-line-items-body.collapsed{display:none}
.frn-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-3);font-size:13px;font-style:italic;padding:48px;flex-direction:column;gap:12px}

/* ====== BREADCRUMB ====== */
.breadcrumb{padding:8px 24px;background:var(--surface-3);border-bottom:1px solid var(--border);font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--primary);cursor:pointer;text-decoration:none;font-weight:500}
.breadcrumb a:hover{text-decoration:underline}

/* ====== TOAST ====== */
.toast{position:fixed;bottom:24px;right:24px;background:var(--text);color:var(--surface);padding:12px 20px;border-radius:var(--r-md);font-size:12px;font-weight:600;z-index:9999;box-shadow:var(--shadow-lg);transition:.3s;opacity:0;transform:translateY(8px)}
.toast.show{opacity:1;transform:translateY(0)}

/* ====== SITES & ENROLLMENT ====== */
.cat2-budget-box{background:linear-gradient(135deg,rgba(26,111,212,.07),rgba(13,191,126,.07));border:1.5px solid rgba(13,191,126,.3);border-radius:var(--r-lg);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);flex-wrap:wrap;gap:12px}
html.dark .cat2-budget-box{background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(5,150,105,.1));border-color:rgba(37,99,235,.2)}
.cat2-budget-box .cb-label{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.cat2-budget-box .cb-amount{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}
.cat2-budget-box .cb-sub{font-size:11px;color:var(--text-3);margin-top:2px}

/* ====== DISCOUNT CALCULATOR PANEL ====== */
.discount-calc-panel{margin-top:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.discount-calc-hdr{padding:12px 18px;font-size:13px;font-weight:800;color:var(--text);background:var(--surface-3);border-bottom:1px solid var(--border)}
.discount-calc-body{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.discount-stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.discount-stat:nth-last-child(-n+2){border-bottom:none}
.discount-stat-hl{background:rgba(13,191,126,.05);margin:0 -10px;padding:6px 10px;border-radius:var(--r-sm)}
.discount-stat-lbl{font-size:11px;color:var(--text-3);white-space:nowrap}
.discount-stat-val{font-size:13px;color:var(--text);font-weight:700}
.discount-stat-green{color:var(--green-dark);font-size:18px}
@media(max-width:600px){.discount-calc-body{grid-template-columns:1fr}}

/* ====== USAC HISTORY ====== */
.usac-section{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:24px;width:100%}
.usac-section-hdr{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface-3);flex-wrap:wrap}
.usac-section-hdr h3{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;white-space:nowrap}
.usac-body{padding:12px 16px}
/* Stacked vertical layout — table full-width on top, bottom row below */
.usac-body-split{display:flex;flex-direction:column;gap:12px;padding:12px 16px}
.usac-summary-table{width:100%;overflow-x:hidden}
/* Bottom 3-column row: bar chart ~50%, donut ~25%, stats ~25% */
.usac-bottom-row{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
.usac-bar-panel{flex:2;min-width:0}
.usac-donut-panel{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px}
.usac-panel-title{font-size:11px;font-weight:700;color:var(--text-3);text-align:center;white-space:nowrap}
.usac-donut-legend{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 4px}
.usac-donut-legend-item{display:flex;align-items:center;gap:5px;font-size:10px}
.usac-donut-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.usac-donut-lbl{color:var(--text-3);font-weight:600;min-width:30px}
.usac-donut-val{color:var(--text);font-weight:700;font-size:10px;white-space:nowrap}
/* Summary stats panel */
.usac-stats-panel{flex:1;min-width:0;padding:10px 12px;background:var(--surface-3);border-radius:var(--r-md);border:1px solid var(--border)}
.usac-stats-title{font-size:11px;font-weight:800;color:var(--text-3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);text-align:center}
.usac-stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border);gap:6px}
.usac-stat-row:last-child{border-bottom:none}
.usac-stat-lbl{font-size:10px;color:var(--text-3);white-space:nowrap}
.usac-stat-val{font-size:11px;color:var(--text);font-weight:700;white-space:nowrap}
.usac-stat-highlight .usac-stat-val{color:var(--green-dark)}
.year-slider-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.year-slider-wrap label{font-size:11px;font-weight:700;color:var(--text-3);white-space:nowrap}
.year-range-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--green));outline:none;cursor:pointer;flex:1;min-width:120px;max-width:200px}
.year-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:var(--r-full);background:white;border:3px solid var(--primary);cursor:pointer;box-shadow:var(--shadow)}
.year-range-display{font-size:12px;font-weight:700;color:var(--green-dark);padding:4px 12px;background:rgba(13,191,126,.1);border-radius:var(--r-full);border:1px solid rgba(13,191,126,.3);white-space:nowrap}
/* usac-chart height/canvas defined in later override block */

/* ====== SETTINGS VARIABLES TAB ====== */
.settings-variable-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.settings-variable-row:last-child{border-bottom:none}
.settings-variable-info{flex:1;min-width:0}
.settings-variable-label{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.settings-variable-desc{font-size:11px;color:var(--text-3);line-height:1.4}
.settings-variable-ctrl{display:flex;align-items:center;gap:8px;flex-shrink:0}
.settings-perm-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-perm-row:last-child{border-bottom:none}
.settings-perm-label{font-size:13px;font-weight:600;color:var(--text)}

/* ====== TASKS ====== */
.task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow-xs);display:flex;align-items:flex-start;gap:14px;transition:.18s}
.task-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.task-card.completed{opacity:.6}
.task-card.completed .task-title{text-decoration:line-through;color:var(--text-3)}
.task-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;margin-top:2px;accent-color:var(--primary)}
.task-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4}
.task-desc{font-size:11px;color:var(--text-3);margin-top:3px}
.task-meta{font-size:10px;color:var(--text-4);margin-top:6px;display:flex;gap:10px}
.task-due{color:var(--warning);font-weight:600}
.task-due.overdue{color:var(--danger)}

/* ====== DOCUMENTS ====== */
.doc-upload-zone{border:2px dashed var(--border);border-radius:var(--r-lg);padding:40px;text-align:center;cursor:pointer;transition:.2s;background:var(--surface-3);margin-bottom:16px}
.doc-upload-zone:hover{border-color:var(--primary);background:var(--primary-light)}
.doc-upload-zone .duz-icon{font-size:36px;display:block;margin-bottom:10px}
.doc-upload-zone p{font-size:13px;color:var(--text-3);font-weight:500}
.doc-upload-zone small{font-size:11px;color:var(--text-4)}

/* ====== EMAIL COMPOSER ====== */
.email-recipient-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:6px;background:var(--surface-3);transition:.15s}
.email-recipient-row:hover{border-color:var(--border-strong)}
.email-recipient-row label{font-size:12px;font-weight:500;flex:1;cursor:pointer}
.email-type-select{font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:none}
.email-recipient-row input:checked~label~.email-type-select{display:block}
.to-pills{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1.5px solid var(--border);border-radius:var(--r-sm);min-height:38px;background:var(--surface)}
.to-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:600}
.to-pill.to{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-200)}
.to-pill.cc{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100)}
.to-pill.bcc{background:#FEF3C7;color:#B45309;border:1px solid #FDE68A}
html.dark .to-pill.to{background:rgba(37,99,235,.15);color:#93C5FD;border-color:rgba(37,99,235,.3)}
html.dark .to-pill.cc{background:rgba(16,185,129,.15);color:#34D399;border-color:rgba(16,185,129,.3)}
html.dark .to-pill.bcc{background:rgba(245,158,11,.15);color:#FCD34D;border-color:rgba(245,158,11,.3)}
/* ====== EMAIL ATTACHMENTS / COMPOSE ====== */
.email-attach-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.email-attach-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-full);font-size:11px;font-weight:600;background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100);max-width:280px}
.email-attach-chip.library{background:var(--green-50);color:var(--green-700);border-color:var(--green-100)}
.email-attach-chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-attach-chip .chip-size{font-weight:400;opacity:.75;flex-shrink:0}
.email-attach-chip .chip-remove{cursor:pointer;border:none;background:transparent;color:inherit;font-size:13px;line-height:1;padding:0;font-weight:700;flex-shrink:0}
.email-attach-chip .chip-remove:hover{opacity:.6}
html.dark .email-attach-chip{background:rgba(37,99,235,.15);color:#93C5FD;border-color:rgba(37,99,235,.3)}
html.dark .email-attach-chip.library{background:rgba(16,185,129,.15);color:#34D399;border-color:rgba(16,185,129,.3)}
.email-doc-picker{margin-top:10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);max-height:200px;overflow-y:auto}
.email-doc-picker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text)}
.email-doc-picker-row:last-child{border-bottom:none}
.email-resend-banner{background:#FEF3C7;color:#92400E;border:1px solid #FDE68A;border-radius:var(--r-sm);padding:10px 12px;font-size:12px;font-weight:600;margin-bottom:14px}
html.dark .email-resend-banner{background:rgba(245,158,11,.15);color:#FCD34D;border-color:rgba(245,158,11,.3)}
/* Hidden email print frame — only visible when printing an email PDF */
#emailPrintFrame{display:none}
/* ====== FUNDING TABLE: column visibility toggle + resizable columns ====== */
#fundingTable{table-layout:fixed;width:max-content;min-width:100%}
#fundingTable th[data-col]{position:relative;overflow:hidden;text-overflow:ellipsis}
#fundingTable td[data-col]{overflow:hidden;text-overflow:ellipsis}
#fundingTable .fundcol-hidden{display:none!important}
.fund-col-resize{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;user-select:none;z-index:2}
.fund-col-resize:hover{background:var(--blue)}
.fund-col-menu-wrap{position:relative;display:inline-block}
.fund-col-menu{position:absolute;right:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-md);padding:8px;z-index:60;max-height:340px;overflow-y:auto;min-width:210px}
.fund-col-menu .fund-col-menu-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:2px 6px 6px}
.fund-col-menu label{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap;border-radius:4px}
.fund-col-menu label:hover{background:var(--surface-2)}
.fund-col-menu input{width:14px;height:14px;flex-shrink:0}

/* ====== ACTIVITY HISTORY ====== */
.activity-timeline{margin-top:8px}
.activity-item{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:32px;height:32px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.activity-content{flex:1;min-width:0}
.activity-subject{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px}
.activity-meta{font-size:11px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap}

/* ====== MISC COMPONENTS ====== */
.section-info{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;margin-bottom:12px}
.section-info span{color:var(--text-2)}
.section-info strong{color:var(--text)}
.page-title-bar{padding:16px 20px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-title-bar h1{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.page-title-bar .sub{font-size:12px;color:var(--text-3);margin-top:2px}


/* ── ECTS Extra Polish ── */
body{font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif}

/* Animated gradient bg dots */
.auth-wrap::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(13,191,126,.12) 0,transparent 40%),radial-gradient(circle at 80% 20%,rgba(26,111,212,.15) 0,transparent 40%);pointer-events:none}

/* ECTS logo glow pulse */
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 4px 20px rgba(13,191,126,.5))}50%{filter:drop-shadow(0 4px 30px rgba(13,191,126,.9))}}
.auth-logo .icon{animation:glowPulse 3s ease-in-out infinite}

/* Navbar logo accent — disabled (globe icon replaces gradient text) */

/* Acct strip gradient line at bottom */


/* Acct strip shimmer line */
.acct-strip{position:sticky} /* ensure sticky, not overridden */
.acct-strip::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy),var(--blue),var(--green),var(--teal),var(--green),var(--blue),var(--navy));background-size:200% 100%;animation:shimmer 4s linear infinite;pointer-events:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Card hover glow */
.stat-card:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(13,191,126,.15)}
.acct-card::before{content:'';position:absolute;inset:0;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(26,111,212,.04),rgba(13,191,126,.04));opacity:0;transition:.25s;pointer-events:none}
.acct-card:hover::before{opacity:1}
.acct-card{position:relative;overflow:hidden}

/* Table header gradient */
thead th{background:linear-gradient(180deg,var(--surface-3) 0%,#EBF2FA 100%);color:var(--text-2);font-weight:700;font-size:10px;letter-spacing:.7px}
html.dark thead th{background:linear-gradient(180deg,var(--surface-3) 0%,var(--surface) 100%)}

/* Badge polish */
.badge{font-weight:700;letter-spacing:.4px}

/* Section block header */
.section-block-hdr:hover{background:linear-gradient(135deg,rgba(26,111,212,.04),rgba(13,191,126,.04))}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--green));border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--navy-mid),var(--blue))}

/* Modal */
.modal-hdr h2{background:linear-gradient(135deg,var(--navy-mid),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.modal-box{border:1px solid rgba(26,111,212,.12)}

/* Year range display */
.year-range-display{background:linear-gradient(135deg,rgba(26,111,212,.1),rgba(13,191,126,.1));border:1px solid rgba(13,191,126,.3)}

/* Dark mode navbar */
html.dark .navbar,html.dark-cool .navbar{background:linear-gradient(135deg,#060F1E 0%,#0B1A2E 60%,#0D2040 100%);border-bottom:1px solid rgba(26,111,212,.2)}
html.dark-warm .navbar{background:linear-gradient(135deg,#121110 0%,#1c1917 60%,#292524 100%);border-bottom:1px solid rgba(96,165,250,.2)}

/* Form link icon glow */
.form-link-item .fli-icon{transition:.2s}
.form-link-item:hover .fli-icon{filter:drop-shadow(0 2px 8px rgba(13,191,126,.4))}

/* Btn shine effect */
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-20deg);transition:.5s}
.btn-primary:hover::after{left:150%}
.btn-primary{position:relative;overflow:hidden}

/* Empty state icon */
.empty-state .es-icon{background:linear-gradient(135deg,var(--blue-glow),var(--green-glow));width:72px;height:72px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;border:1px solid rgba(13,191,126,.2)}

/* Task card border-left accent */
.task-card{border-left:3px solid var(--border)}
.task-card:hover{border-left-color:var(--green)}
.task-card.completed{border-left-color:var(--green)}

/* Client action card icon bg */
.client-action-card .ca-icon{background:linear-gradient(135deg,rgba(26,111,212,.08),rgba(13,191,126,.08));width:72px;height:72px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:1px solid rgba(13,191,126,.15);transition:.25s}
.client-action-card:hover .ca-icon{background:linear-gradient(135deg,rgba(26,111,212,.15),rgba(13,191,126,.15));border-color:rgba(13,191,126,.3);transform:scale(1.08)}


/* ── SPIN Search Autocomplete ── */
.spin-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:9999;max-height:260px;overflow-y:auto}
.spin-option{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:12px;transition:.12s;display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center}
.spin-option:last-child{border-bottom:none}
.spin-option:hover,.spin-option.focused{background:linear-gradient(135deg,rgba(26,111,212,.06),rgba(13,191,126,.06))}
.spin-option .sp-spin{font-size:10px;font-weight:700;color:var(--blue);background:var(--primary-light);padding:2px 6px;border-radius:var(--r-full);white-space:nowrap;font-family:monospace}
.spin-option .sp-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin-option .sp-type{font-size:10px;color:var(--text-3)}
.spin-loading{padding:12px;text-align:center;color:var(--text-3);font-size:12px}
.spin-search-wrap{position:relative}

/* FRN detail link */
.frn-link{color:var(--blue);text-decoration:none;font-weight:600;cursor:pointer}
.frn-link:hover{text-decoration:underline}

/* FRN detail modal sections */
.frn-detail-section{margin-bottom:18px}
.frn-detail-section h4{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
html.dark .frn-detail-section h4,html.dark-cool .frn-detail-section h4,html.dark-warm .frn-detail-section h4{color:var(--blue-light)}
.frn-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.frn-detail-grid.three-col{grid-template-columns:1fr 1fr 1fr}
.frn-detail-item{font-size:12px}
.frn-detail-item .frn-label{color:var(--text-3);font-weight:500;margin-bottom:1px}
.frn-detail-item .frn-value{color:var(--text);font-weight:600}
.frn-fcdl-scroll{max-height:100px;overflow-y:auto;font-size:11px;color:var(--text-2);line-height:1.5;padding:8px;background:var(--surface-2);border-radius:6px;border:1px solid var(--border)}
.frn-cost-table{width:100%;border-collapse:collapse;font-size:12px}
.frn-cost-table th{text-align:left;font-weight:600;color:var(--text-3);padding:4px 8px;border-bottom:1px solid var(--border)}
.frn-cost-table td{padding:4px 8px;color:var(--text)}
.frn-cost-table tr:nth-child(even){background:var(--surface-2)}
.frn-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px}
.frn-spinner .spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Funding table — hidden row state */
.funding-row-hidden td{opacity:.35;text-decoration:line-through}
.funding-row-hidden .no-print{opacity:1;text-decoration:none}

/* Funding table — note cell in table row */
.funding-note-cell{display:flex;align-items:center;gap:5px;max-width:180px}
.funding-note-preview{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;cursor:pointer}
.funding-note-preview:hover{color:var(--blue)}
.funding-note-preview.has-note{color:var(--text-2);font-style:italic}
.funding-note-add{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--surface-3);color:var(--text-3);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.funding-note-add:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.funding-desc-text{flex:1}
.funding-desc-edit-btn{opacity:0;transition:opacity .15s;margin-left:5px;flex-shrink:0}
td:hover .funding-desc-edit-btn{opacity:1}

/* Funding table — notes modal */
.funding-notes-list{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:0;background:var(--surface-2);margin-bottom:12px}
.fn-year-group{padding:0}
.fn-year-hdr{font-size:12px;font-weight:800;color:var(--blue);padding:8px 12px 4px;border-bottom:1px solid var(--border);background:var(--surface-3);position:sticky;top:0}
.fn-month-hdr{font-size:11px;font-weight:700;color:var(--text-3);padding:6px 12px 2px;text-transform:uppercase;letter-spacing:.5px}
.funding-note-entry{font-size:12px;color:var(--text-2);padding:5px 12px;border-bottom:1px solid var(--border);line-height:1.5}
.funding-note-entry:last-child{border-bottom:none}
.fn-ts{color:var(--text-3);font-weight:600;font-size:11px}

/* Funding table — loading shimmer for USAC cells */
.fd-loading{color:var(--text-4);font-size:11px}

/* Print — hide interactive columns */
@media print{
  .no-print{display:none!important}
  .funding-row-hidden{display:none!important}
  .funding-li-drawer{display:none!important}
  .navbar,.acct-strip,.page-sticky-header,#clientTabBar,.btn,.section-title .btn,
  .doc-upload-zone,.year-bar select,.modal-backdrop,.modal{display:none!important}
  #clientPortalFundingInfo{display:block!important;font-size:14px!important;color:#000!important;margin-bottom:16px!important;font-weight:700}
  #clientPortalFundingWrap{overflow:visible!important}
  #clientPortalFundingWrap table{font-size:10px}
  body{background:#fff!important;color:#000!important}
  .badge{border:1px solid #999;background:#eee!important;color:#000!important}
}
/* When exporting an email PDF, hide the whole app and show only the print frame */
@media print{
  body.print-email-mode>*{display:none!important}
  body.print-email-mode #emailPrintFrame{display:block!important}
}

/* ====== ACCOUNTING WORKSHEET TABLE ====== */
/* Override global table-layout:fixed so columns size naturally */
.ws-table{table-layout:auto}
.ws-table thead th{font-size:10px;padding:8px 8px;white-space:nowrap;overflow:visible;word-break:normal}
.ws-table tbody td{font-size:11px;padding:6px 8px}
.ws-table td input.form-control,.ws-table td select.form-control{font-size:11px;padding:4px 6px}

/* ====== RESPONSIVE — prevent all horizontal overflow ====== */

/* Ensure every flex/grid child can shrink */
.page-wrap,.page-wrap.active{overflow-x:visible;max-width:100%}
.tab-pane,.tab-pane.active{overflow-x:visible;max-width:100%;min-width:0}

/* Breadcrumb wraps on narrow */
.breadcrumb{flex-wrap:wrap;padding:8px 16px}

/* Acct strip name tighter on small screens */
@media(max-width:900px){
  .acct-strip-name{max-width:120px}
  .acct-strip-tab{padding:0 10px;font-size:11px}
  .navbar{padding:0 12px}
  .container{padding:14px}
  .page-title-bar{padding:12px 14px 0}
  .modal-box{padding:18px}
}

/* Stat cards — single column on very small viewports */
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .accounts-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .frn-detail-grid{grid-template-columns:1fr}
  .frn-detail-grid.three-col{grid-template-columns:1fr}
}

/* ====== REPORT CARDS ====== */
.rpt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:8px}
.rpt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;display:flex;gap:20px;align-items:flex-start;box-shadow:var(--shadow-sm);transition:.2s}
.rpt-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-light);transform:translateY(-1px)}
.rpt-card-icon{font-size:36px;flex-shrink:0;line-height:1;filter:drop-shadow(0 2px 6px rgba(26,111,212,.2))}
.rpt-card-body{flex:1;min-width:0}
.rpt-card-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.rpt-card-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.2px}
.rpt-card-desc{font-size:13px;color:var(--text-3);margin-bottom:18px;line-height:1.5}
.rpt-card-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Prevent any element from overflowing its parent */
img,canvas,video,svg{max-width:100%;height:auto}
canvas{display:block}

/* USAC chart — full width, taller for breathing room */
.usac-chart{height:220px;position:relative;padding:0}
.usac-chart canvas{max-width:100%!important;width:100%!important;height:220px!important}
/* Donut canvas */
#usacDonutChart{max-width:150px;max-height:150px}
/* Responsive: stack bottom row on small screens */
@media(max-width:700px){.usac-bottom-row{flex-direction:column}}

/* USAC history table — fixed layout so columns compress to fit, no scrollbar */
.usac-summary-table .table-wrap{overflow-x:hidden}
.usac-summary-table table{font-size:11px;width:100%;table-layout:fixed;border-collapse:collapse}
.usac-summary-table thead th{font-size:11px;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usac-summary-table tbody td{font-size:11px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis}

/* ====================================================
   HAMBURGER / MOBILE NAV
   ==================================================== */
.hamburger{
  display:none;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:white;
  font-size:20px;
  line-height:1;
  padding:6px 10px;
  border-radius:var(--r-sm);
  cursor:pointer;
  flex-shrink:0;
  order:-1;
  transition:.18s;
}
.hamburger:hover{background:rgba(255,255,255,.2)}
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:799;
}

/* ====================================================
   RESPONSIVE — 1024px: hamburger triggers overlay nav
   ==================================================== */
@media(max-width:1024px){
  .hamburger{display:flex;align-items:center;}
  .nav-list{
    display:none;
    position:fixed;
    top:0;left:0;
    width:260px;height:100vh;
    background:var(--grad-brand);
    flex-direction:column;
    gap:0;
    padding:72px 0 24px;
    z-index:800;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  .nav-list li{width:100%;}
  .nav-list a{
    display:block;
    padding:14px 24px;
    font-size:14px;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body.nav-open .nav-list{display:flex;transform:translateX(0);}
  body.nav-open .nav-backdrop{display:block;}
  .container{padding:14px;}
  .page-header{margin-bottom:14px;}
}

/* ====================================================
   RESPONSIVE — 768px: single-column grids, table scroll
   ==================================================== */
@media(max-width:768px){
  /* Grid layouts collapse to single column */
  .form-grid{grid-template-columns:1fr!important;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .accounts-grid{grid-template-columns:1fr!important;}
  /* Calendar grid */
  #tabCalendar>div,
  #homeCalendarGrid{grid-template-columns:1fr!important;}
  /* Service types two-col collapses */
  #settingsServices>div{grid-template-columns:1fr!important;}
  /* Tables: all table wrappers scroll */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:500px;}
  /* Stat cards vertical on small */
  .stat-card{padding:14px;}
  /* Buttons min tap target */
  .btn,.tab-btn,.acct-strip-tab,.alpha-btn{min-height:44px;}
  .btn-xs,.btn-sm{min-height:36px;}
  /* Table font scaling */
  td,th{font-size:11px;padding:6px 8px;}
  /* Modals near full-width */
  .modal-box{width:95vw!important;max-width:95vw!important;margin:5vh auto;}
  .modal-box.lg{width:95vw!important;max-width:95vw!important;}
  .modal-box.xl{width:95vw!important;max-width:95vw!important;}
  /* Account cards stack */
  .acct-card{flex-direction:column;align-items:flex-start;gap:10px;}
  .acct-card>div:last-child{flex-shrink:0;}
  /* Navbar compress */
  .navbar{padding:0 10px;gap:6px;}
  .user-pill{display:none;}
  .navbar-brand{font-size:14px;}
  /* Form links grid */
  .form-links-grid{grid-template-columns:1fr!important;}
  /* FRN columns wrap */
  .frn-cols{flex-direction:column;}
  .frn-col{min-width:0;width:100%;}
  .frn-field-grid{grid-template-columns:1fr;}
  /* Section blocks */
  .section-block{padding:0;}
}

/* ====================================================
   RESPONSIVE — 480px: auth full-width, tab scroll
   ==================================================== */
@media(max-width:480px){
  /* Auth screen */
  .auth-card{padding:28px 20px;border-radius:16px;}
  .auth-card .form-control,
  .auth-card .btn{width:100%;}
  /* Acct strip tab bar: horizontal scroll */
  .acct-strip-tabs{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;}
  .acct-strip-tabs::-webkit-scrollbar{display:none;}
  #clientTabBar{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;}
  /* Account detail breadcrumb */
  .acct-strip{flex-wrap:nowrap;}
  .acct-strip-name{max-width:80px;}
  /* Stats: single column */
  .stats-grid{grid-template-columns:1fr;}
  /* Hide low-priority table columns */
  .hide-mobile{display:none!important;}
  /* Compact container */
  .container{padding:10px;}
  /* Alpha filter wraps */
  .alpha-filter{flex-wrap:wrap;gap:2px;}
  .alpha-btn{padding:4px 6px;font-size:10px;min-height:32px;}
  /* Page header smaller */
  .page-header h1{font-size:18px;}
  /* Tab bar text smaller */
  .tab-btn{padding:10px 12px;font-size:11px;}
}
.avatar-circle{width:32px;height:32px;border-radius:50%;background-color:var(--blue);background-size:cover;background-position:center;color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;user-select:none;border:none}
.avatar-circle.avatar-lg{width:64px;height:64px;font-size:24px}
/* ====== THEME: dark-cool (cool blue-tinted dark) ====== */
html.dark-cool{
  --bg:#0f1117;
  --surface:#1a1f2e;
  --surface-2:#1e293b;
  --surface-3:#2d3748;
  --border:#2d3748;
  --border-strong:#3d4f6b;
  --text:#F8FAFC;
  --text-2:#CBD5E1;
  --text-3:#94A3B8;
  --text-4:#64748B;
  --navy:#1e3a5f;
  --blue:#3b82f6;
  --blue-light:#93C5FD;
  --green:#10b981;
  --hover:rgba(255,255,255,0.05);
  --primary-light:rgba(59,130,246,.14);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5);
  --shadow:0 4px 16px rgba(0,0,0,.5);
  --shadow-md:0 8px 28px rgba(0,0,0,.6);
}
html.dark-cool body{background:linear-gradient(180deg,#0f1117 0%,#1a1f2e 100%)}
html.dark-cool .navbar{background:linear-gradient(135deg,#0a0e1a 0%,#111827 60%,#1a1f2e 100%);border-bottom:1px solid rgba(59,130,246,.2)}
html.dark-cool .badge-success{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:rgba(16,185,129,.25)}
html.dark-cool .badge-warning{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.25)}
html.dark-cool .badge-danger{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.25)}
html.dark-cool .badge-info{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.25)}
html.dark-cool thead th{background:var(--surface-3)}
html.dark-cool .info-box{background:rgba(16,185,129,.08);color:#6ee7b7;border-color:rgba(16,185,129,.2)}
/* ====== THEME: dark-warm (warm neutral-tinted dark) ====== */
html.dark-warm{
  --bg:#121110;
  --surface:#1c1917;
  --surface-2:#292524;
  --surface-3:#3c3835;
  --border:#292524;
  --border-strong:#44403c;
  --text:#FAFAF9;
  --text-2:#D6D3D1;
  --text-3:#A8A29E;
  --text-4:#78716C;
  --navy:#292524;
  --blue:#60a5fa;
  --blue-light:#93C5FD;
  --green:#34d399;
  --hover:rgba(255,255,255,0.05);
  --primary-light:rgba(96,165,250,.14);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5);
  --shadow:0 4px 16px rgba(0,0,0,.5);
  --shadow-md:0 8px 28px rgba(0,0,0,.6);
}
html.dark-warm body{background:linear-gradient(180deg,#121110 0%,#1c1917 100%)}
html.dark-warm .navbar{background:linear-gradient(135deg,#0c0a09 0%,#1c1917 60%,#292524 100%);border-bottom:1px solid rgba(168,162,158,.15)}
html.dark-warm .badge-success{background:rgba(52,211,153,.12);color:#6ee7b7;border-color:rgba(52,211,153,.25)}
html.dark-warm .badge-warning{background:rgba(251,191,36,.12);color:#fde68a;border-color:rgba(251,191,36,.25)}
html.dark-warm .badge-danger{background:rgba(252,165,165,.12);color:#fca5a5;border-color:rgba(252,165,165,.25)}
html.dark-warm .badge-info{background:rgba(96,165,250,.12);color:#93c5fd;border-color:rgba(96,165,250,.25)}
html.dark-warm thead th{background:var(--surface-3)}
html.dark-warm .info-box{background:rgba(52,211,153,.08);color:#6ee7b7;border-color:rgba(52,211,153,.2)}
/* ====== DARK MODE TEXT READABILITY FIXES (all themes) ====== */
html.dark .section-block-hdr h3,
html.dark-cool .section-block-hdr h3,
html.dark-warm .section-block-hdr h3{color:#FFFFFF!important}
html.dark .section-block-hdr .arrow,
html.dark-cool .section-block-hdr .arrow,
html.dark-warm .section-block-hdr .arrow{color:#94A3B8!important}
html.dark .ra-sidebar-item .ra-name,
html.dark-cool .ra-sidebar-item .ra-name,
html.dark-warm .ra-sidebar-item .ra-name{color:#F1F5F9!important}
html.dark .ra-sidebar-item .ra-am,
html.dark-cool .ra-sidebar-item .ra-am,
html.dark-warm .ra-sidebar-item .ra-am{color:#94A3B8!important}
html.dark .ra-sidebar-hdr,
html.dark-cool .ra-sidebar-hdr,
html.dark-warm .ra-sidebar-hdr{color:#64748B!important}
html.dark .stat-card .lbl,
html.dark-cool .stat-card .lbl,
html.dark-warm .stat-card .lbl{color:#CBD5E1!important}
html.dark .stat-card .sub,
html.dark-cool .stat-card .sub,
html.dark-warm .stat-card .sub{color:#CBD5E1!important}
html.dark .todo-section-hdr,
html.dark-cool .todo-section-hdr,
html.dark-warm .todo-section-hdr{color:#F1F5F9!important}
html.dark .home-welcome-bar h1,
html.dark-cool .home-welcome-bar h1,
html.dark-warm .home-welcome-bar h1{color:#FFFFFF!important}
html.dark .home-welcome-bar p,
html.dark-cool .home-welcome-bar p,
html.dark-warm .home-welcome-bar p{color:#CBD5E1!important}
html.dark-cool .stat-card{background:#1e293b}
html.dark-warm .stat-card{background:#292524}