/* Practice IQ — Shared styles
   Used by every authenticated page (dashboard, bill-review, admin,
   activity-report). Each page keeps its own smaller <style> block for
   anything genuinely page-specific (KPI cards, filter-bar variants,
   admin's grid layout, etc.) — this file only contains what's truly
   identical across pages, confirmed by diffing each page's CSS before
   anything was moved here.

   --navy is aliased to --navy-950 so admin.html's not-yet-migrated
   rules (which still reference --navy) keep working unchanged. */

:root {
  --paper: #F2F1EC; --panel: #FFFFFF;
  --navy-950: #101B2D; --navy-800: #1C2E4A;
  --navy: var(--navy-950);
  --ink: #1A2233; --ink-soft: #5B6470;
  --line: #DAD5C7; --line-strong: #C7C0AC;
  --gold: #A97A2E;
  --good: #2E6B48; --good-bg: #E7F0E9;
  --warn: #B4741A; --warn-bg: #F6EADA;
  --closed: #8B8578; --closed-bg: #EDEBE3;
  --hourly-bg: #E4E8EF; --hourly-fg: #2C3E60;
  --flat-bg: #F3E9D6; --flat-fg: #8C6423;
  --radius: 10px;
}

*{box-sizing:border-box;}
html{overflow-x:clip;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;}
.app{max-width:1340px;margin:0 auto;padding:24px 24px 60px;min-width:0;}
#page-content{transition:opacity .15s ease;}

/* Header / nav / account area — identical across every authenticated page */
header.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;margin:-24px -24px 22px;background:#fff;border-bottom:2px solid var(--navy-950);flex-wrap:wrap;gap:12px;}
a.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;}
a.brand-link:hover .brand-logo{opacity:.8;}
.brand-logo{height:34px;width:auto;display:block;transition:opacity .15s;}

/* Nav — a horizontal bar of links and dropdown groups on desktop, a
   hamburger + slide-in drawer at or below 900px. Both are rendered from
   the same NAV_ITEMS list by renderNav.js. */
nav.main-nav{display:flex;align-items:center;gap:4px;}
.nav-desktop{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
/* Links and group toggles share one box definition — same font, padding,
   line-height and min-height — so an <a> and a <button> sitting next to
   each other in the bar are exactly the same height and can't drift out
   of alignment. The 36px matches admin.html's own local nav override. */
nav.main-nav a,.nav-group-toggle{display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink-soft);text-decoration:none;padding:7px 12px;border-radius:20px;transition:background .15s,color .15s;}
nav.main-nav a:hover,.nav-group-toggle:hover{color:var(--navy-950);background:#F2F1EC;}
nav.main-nav a.active{color:var(--navy-950);background:#F3E9D6;}

/* display:flex on the wrapper stops the button being treated as an
   inline box sitting on a text baseline, which is what left the two
   dropdowns riding lower than the plain links. */
.nav-group{position:relative;display:flex;align-items:center;}
/* margin:0 is load-bearing — admin.html's local style block has a bare
   `button{margin-top:18px;...}` rule that otherwise leaks in and pushes
   these down out of line with the plain links. Same reason button.logout
   below carries margin-top:0. */
.nav-group-toggle{gap:6px;margin:0;background:none;border:none;cursor:pointer;font-family:inherit;}
.nav-group.has-active > .nav-group-toggle{color:var(--navy-950);background:#F3E9D6;}
.nav-group-toggle[aria-expanded="true"]{color:var(--navy-950);background:#F2F1EC;}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .15s;}
.nav-group-toggle[aria-expanded="true"] .caret{transform:rotate(180deg);}
.nav-group-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:206px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 10px 28px rgba(16,27,45,.14);z-index:60;}
.nav-group-menu[hidden]{display:none;}
.nav-group-menu a{border-radius:7px;padding:9px 12px;white-space:nowrap;}

.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;background:#fff;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;}
.nav-toggle:hover{background:#F7F5EF;}
.nav-toggle-bars{display:flex;flex-direction:column;gap:4px;width:18px;}
.nav-toggle-bars span{display:block;height:2px;background:var(--navy-950);border-radius:2px;}

/* Drawer is appended to <body> by renderNav.js, not nested in the
   sticky header — keeps it clear of the header's stacking context and
   of the overflow-x:clip on html/body. */
.nav-drawer-backdrop{position:fixed;inset:0;background:rgba(16,27,45,.45);z-index:200;}
.nav-drawer-backdrop[hidden]{display:none;}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line-strong);box-shadow:-14px 0 34px rgba(16,27,45,.18);z-index:201;}
.nav-drawer[hidden]{display:none;}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--line);}
.nav-drawer-title{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-drawer-close{width:34px;height:34px;margin:0;font-size:20px;line-height:1;background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);cursor:pointer;}
.nav-drawer-close:hover{background:#F7F5EF;}
.nav-drawer-body{flex:1;padding:10px 12px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-drawer a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;}
.nav-drawer a:hover{background:#F7F5EF;color:var(--navy-950);}
.nav-drawer a.active{background:#F3E9D6;color:var(--navy-950);}
.drawer-section{margin-top:14px;}
.drawer-section-label{display:block;padding:0 12px 4px;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
body.nav-drawer-open{overflow:hidden;}

.account-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px;}
.client-logo-header{height:36px;width:auto;padding-right:16px;margin-right:4px;border-right:1px solid var(--line-strong);}
.user-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);background:#F7F5EF;border:1px solid var(--line-strong);padding:5px 6px 5px 12px;border-radius:20px;}
.user-chip .user-name{font-weight:600;color:var(--navy-950);white-space:nowrap;}
.role-pill{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 9px;border-radius:14px;white-space:nowrap;}
.role-pill.role-super_admin{background:#F3E9D6;color:#8C6423;}
.role-pill.role-management{background:#E4E8EF;color:#2C3E60;}
.role-pill.role-attorney{background:#E7F0E9;color:#2E6B48;}
button.logout{margin-top:0;background:none;border:1px solid var(--line-strong);border-radius:20px;padding:6px 14px;font-size:12px;cursor:pointer;color:var(--ink);font-weight:600;}
button.logout:hover{background:#F7F5EF;}

/* Back links + section headers */
.back-link{display:inline-block;margin-bottom:14px;color:var(--ink-soft);font-size:13px;text-decoration:none;}
.back-link:hover{color:var(--navy-950);}
.eyebrow{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:2px;display:block;}

/* Tables / ledgers — shared base look across every table in the app */
.ledger{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px;max-width:100%;}
.ledger table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:720px;}
thead th{text-align:left;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;padding:10px 12px;background:var(--navy-950);color:#C9D2E0;white-space:nowrap;}
thead th.sorted{color:#fff;}
tbody td, tfoot td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums;white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAF9F5;}
tfoot td{background:#F7F5EF;border-top:2px solid var(--navy-950);font-weight:700;color:var(--navy-950);}
.name-cell{font-weight:600;color:var(--navy-950);}
.drill{cursor:pointer;}
.clio-link{color:var(--gold);text-decoration:none;font-weight:700;}
.clio-link:hover{text-decoration:underline;}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.pill.good{background:var(--good-bg);color:var(--good);}
.pill.flat-pill{background:var(--closed-bg);color:var(--closed);}
.chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:9px;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;}
.chip.hourly{background:var(--hourly-bg);color:var(--hourly-fg);}
.chip.flat{background:var(--flat-bg);color:var(--flat-fg);}
.chip:hover{filter:brightness(0.95);}

/* Pagination — identical across every paginated table */
.pagination-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 2px 24px;}
.pagination-info{font-size:12px;color:var(--ink-soft);}
.pagination-controls{display:flex;align-items:center;gap:10px;}
.pagination-page{font-size:12px;color:var(--ink-soft);font-weight:600;}

/* Loading / error / note states */
.loading, .error-msg{padding:30px;text-align:center;color:var(--ink-soft);font-size:13px;}
.error-msg{color:#A3402F;}
.note{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:24px;overflow-wrap:anywhere;}

/* Responsive — the parts of each page's responsive behavior that are
   identical everywhere (header stacking, nav sizing, logo shrink) */
@media (max-width:900px){
  .app{padding:18px 16px 48px;}
  .nav-desktop{display:none;}
  .nav-toggle{display:inline-flex;}
}
@media (max-width:768px){
  /* Brand + hamburger share the first row, account area wraps below it.
     Previously the whole header stacked into a column, which — with the
     old nav wrapping onto two or three rows of its own — made the sticky
     header tall enough to eat a real chunk of a phone viewport. */
  header.topbar{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .account-area{flex-basis:100%;justify-content:flex-start;}
}
@media (max-width:640px){
  .account-area{gap:10px;}
  button.logout{min-height:36px;padding-top:8px;padding-bottom:8px;}
}
@media (max-width:428px){
  .app{padding:14px 12px 40px;}
  .brand-logo{height:28px;}
  .client-logo-header{height:28px;padding-right:12px;}
}