/* ============================================================
   Levari design system — Linear / Notion / Vercel-inspired
   Restrained palette: neutrals dominate; navy = brand, red = action only.
   All class names existing templates use are preserved.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand */
  --navy:      #0a1728;
  --navy-2:    #102541;
  --navy-3:    #1a3c68;
  --blue:      #2563eb;     /* quiet link blue */
  --red:       #c80032;     /* primary action / brand accent — used sparingly */
  --red-dark:  #aa052d;
  --red-deep:  #800020;

  /* Neutral surface system (the workhorse colours) */
  --bg:         #fafafb;     /* page background — slightly cooler than white */
  --bg-subtle:  #f4f5f7;     /* secondary surfaces (sidebars-of-content, hover states) */
  --card:       #ffffff;
  --line:       #ececef;     /* default border — much lighter than before */
  --line-strong:#d8d9de;     /* used on focused / important separators */

  /* Text */
  --text:       #18181b;     /* near-black, warm */
  --text-2:     #3f3f46;
  --muted:      #71717a;     /* secondary text */
  --muted-2:    #a1a1aa;     /* tertiary */

  /* Semantic colours — used as accents, never as primary surfaces */
  --green:    #15803d;
  --green-bg: #f0fdf4;
  --amber:    #b45309;
  --amber-bg: #fffbeb;
  --red-bg:   #fef2f2;
  --blue-bg:  #eff6ff;

  /* Spacing scale (4pt) — not used directly here but documents intent */
  /* 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 */

  --r-sm:  4px;
  --r:     6px;
  --r-md:  8px;
  --r-lg:  12px;

  --shadow-sm: 0 1px 2px rgba(15,15,20,.04);
  --shadow:    0 2px 6px rgba(15,15,20,.06);
  --shadow-lg: 0 12px 28px rgba(15,15,20,.10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.011em; }
h1 { font-size: 22px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
       font-size: 12px; background: var(--bg-subtle);
       padding: 1px 5px; border-radius: 4px; }

::selection { background: rgba(37, 99, 235, .18); }

/* ============================================================
   Layout
   ============================================================ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--navy);
  color: #c7ccd5;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sub {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.36); margin-top: 8px; font-weight: 500;
}

.nav { padding: 10px 10px; flex: 1; overflow-y: auto; }
.nav-section { margin-top: 8px; }
.nav-section:first-of-type { margin-top: 4px; }
.nav-group {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: transparent;
  font-family: inherit; cursor: pointer;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.40); font-weight: 600;
  padding: 8px 12px 4px;
  transition: color .12s;
}
.nav-group:hover { color: rgba(255,255,255,.65); }
.nav-chev {
  font-size: 9px; opacity: .5;
  transition: transform .15s;
  display: inline-block;
}
.nav-section.is-collapsed .nav-chev { transform: rotate(-90deg); }
.nav-section.is-collapsed .nav-items { display: none; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  color: #c7ccd5; padding: 6px 12px;
  border-radius: var(--r); margin-bottom: 1px;
  font-weight: 500; font-size: 13px;
  transition: background .12s, color .12s;
}
.nav a:hover {
  background: rgba(255,255,255,.05); color: #fff;
  text-decoration: none;
}
.nav a.active {
  background: rgba(255,255,255,.08); color: #fff;
  box-shadow: none;
}
.nav .ic {
  width: 16px; text-align: center; opacity: .65;
  font-size: 13px;
}
.nav a.active .ic, .nav a:hover .ic { opacity: 1; }

.sidebar-foot {
  padding: 12px 20px;
  font-size: 11px;
  color: rgba(255,255,255,.34);
  border-top: 1px solid rgba(255,255,255,.06);
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.crumbs { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
.crumbs small { color: var(--muted); font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.actions { display: flex; gap: 8px; }

.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; max-width: 140px; }
.user-meta strong { font-size: 12px; font-weight: 600; color: var(--text); }
.user-meta small { font-size: 11px; color: var(--muted); }
.signout {
  font-size: 12px; margin-left: 4px; color: var(--muted);
  padding: 4px 8px; border-radius: var(--r);
}
.signout:hover { background: var(--bg-subtle); text-decoration: none; }

.content { padding: 24px 28px; flex: 1; max-width: 1400px; width: 100%; }

/* ============================================================
   Flash messages — calmer
   ============================================================ */
.flash {
  padding: 10px 14px; border-radius: var(--r); margin-bottom: 14px;
  font-size: 13px; font-weight: 500;
  border: 1px solid;
}
.flash-success { background: var(--green-bg); color: var(--green); border-color: #bbf7d0; }
.flash-danger  { background: var(--red-bg); color: var(--red-deep); border-color: #fecaca; }
.flash-warning { background: var(--amber-bg); color: var(--amber); border-color: #fde68a; }
.flash-info    { background: #eef3fb; color: #1d4f91; border-color: #c7d9f2; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card); color: var(--text);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-subtle); border-color: var(--line-strong); text-decoration: none; }
.btn:active { background: var(--line); }
.btn:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px;
}

.btn-primary {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }

.btn-accent {
  background: var(--red); color: #fff; border-color: var(--red);
}
.btn-accent:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn-danger {
  background: #fff; color: var(--red); border-color: #fecaca;
}
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; justify-content: center; padding: 10px; }
.btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   Cards / panels
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.card-head {
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 13px; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.card-head small { font-weight: 400; color: var(--muted); }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* ============================================================
   Stat tiles — quieter
   ============================================================ */
.stat-grid {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
}
.stat .label {
  font-size: 12px; color: var(--muted);
  font-weight: 500; letter-spacing: 0;
  text-transform: none;
}
.stat .value {
  font-size: 22px; font-weight: 600; margin-top: 4px;
  color: var(--text); letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
/* The colour variants now just hint the value, not the border */
.stat.accent .value { color: var(--red-deep); }
.stat.green  .value { color: var(--green); }
.stat.amber  .value { color: var(--amber); }
.stat.blue   .value { color: var(--blue); }

/* ============================================================
   Tables — lighter, calmer
   ============================================================ */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: 0;
  background: var(--bg);
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: top;
}
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: var(--bg-subtle); }
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .right { text-align: right; }
.row-link { cursor: pointer; }

.empty {
  padding: 40px 20px; text-align: center; color: var(--muted);
  font-size: 13px;
}
.empty .big { font-size: 28px; opacity: .25; margin-bottom: 8px; }

/* ============================================================
   Badges — flatter, calmer
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  border: 1px solid transparent;
  line-height: 1.55;
}
.badge-open    { background: var(--blue-bg);  color: var(--blue);    border-color: #dbeafe; }
.badge-pending { background: var(--amber-bg); color: var(--amber);   border-color: #fde68a; }
.badge-closed  { background: var(--bg-subtle); color: var(--muted);  border-color: var(--line); }
.badge-draft   { background: var(--bg-subtle); color: var(--muted);  border-color: var(--line); }
.badge-sent    { background: var(--blue-bg);  color: var(--blue);    border-color: #dbeafe; }
.badge-paid    { background: var(--green-bg); color: var(--green);   border-color: #bbf7d0; }
.badge-overdue { background: var(--red-bg);   color: var(--red-deep); border-color: #fecaca; }
.badge-soft    { background: var(--bg-subtle); color: var(--text-2); border-color: var(--line); }
.badge-muted   { background: var(--bg-subtle); color: var(--muted);  border-color: var(--line); }
.badge-partially_paid { background: var(--amber-bg); color: var(--amber); border-color: #fde68a; }
.badge-void    { background: var(--bg-subtle); color: var(--muted);  border-color: var(--line);
                 text-decoration: line-through; }
.chip-danger   { color: var(--red-deep); border-color: #fecaca; }

/* ============================================================
   Forms
   ============================================================ */
.form-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
.form-grid .full { grid-column: 1 / -1; }

label.field {
  display: flex; flex-direction: column; gap: 5px;
  font-weight: 500; font-size: 12px;
  color: var(--text-2);
}
label.field small { color: var(--muted); font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=url], input[type=search],
select, textarea {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14px; font-family: inherit;
  background: #fff; color: var(--text);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }

textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.check { flex-direction: row !important; align-items: center; gap: 8px; }
.check input { width: 16px; height: 16px; accent-color: var(--navy); }

/* ============================================================
   Detail layout
   ============================================================ */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.field-pairs { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 13px; }
.field-pairs dt { color: var(--muted); }
.field-pairs dd { color: var(--text); }
.page-title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.page-title-row h2 { color: var(--text); }

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin: 18px 0 10px;
}

/* ============================================================
   Filter toolbar
   ============================================================ */
.toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap;
}
.toolbar form { display: flex; gap: 8px; align-items: center; }
.toolbar input[type=text] { min-width: 220px; }

.chip {
  padding: 5px 12px; border-radius: 18px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip.active {
  background: var(--text); color: #fff; border-color: var(--text);
}
.spacer { flex: 1; }

/* ============================================================
   Auth pages
   ============================================================ */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
  padding: 20px;
}
.auth-card {
  background: #fff; border-radius: var(--r-lg); padding: 36px;
  width: 100%; max-width: 390px;
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-logo { width: 200px; max-width: 78%; height: auto; margin: 0 auto 14px; display: block; }
.auth-brand p { color: var(--muted); font-size: 13px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: 13px; }
.auth-hint {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12px; color: var(--muted);
}

/* ============================================================
   Misc utilities
   ============================================================ */
.invoice-totals { margin-left: auto; width: 280px; }
.invoice-totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.invoice-totals .grand {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px;
  font-size: 16px; font-weight: 600; color: var(--text);
}

.muted { color: var(--muted); }
.muted.small { font-size: 12px; }
.small { font-size: 12px; }
.inline-form { display: inline; }

/* ── SVG icons (sprite-based) ── */
svg.ic {
  width: 15px; height: 15px; flex-shrink: 0;
  vertical-align: -2px; stroke: currentColor;
}
.nav a svg.ic { opacity: .75; }
.nav a.active svg.ic, .nav a:hover svg.ic { opacity: 1; }

/* ── Invoice form: Advanced fold ── */
.adv-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--line);
  border-radius: 8px; padding: 6px 12px; margin: 10px 0;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.adv-toggle:hover { color: var(--navy); border-color: var(--navy); }

/* ── Ctrl+K command palette ── */
.palette-overlay {
  position: fixed; inset: 0; background: rgba(10, 23, 40, .35);
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 95;
}
.palette-overlay.is-open { opacity: 1; pointer-events: auto; }
.palette {
  position: fixed; top: 14vh; left: 50%; transform: translateX(-50%) scale(.98);
  width: 560px; max-width: 92vw; background: #fff; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(10, 23, 40, .3); z-index: 96;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.palette.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.palette input {
  border: none; outline: none; padding: 16px 18px; font-size: 15px;
  border-bottom: 1px solid var(--line); width: 100%;
}
.palette-results { max-height: 46vh; overflow-y: auto; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  text-decoration: none; color: inherit; font-size: 13px;
}
.palette-item:hover, .palette-item.sel { background: #eef0fb; }
.palette-ic { width: 22px; text-align: center; color: var(--muted); flex-shrink: 0; }
.palette-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.palette-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-sub { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--line); border-radius: 8px;
  padding: 2px 7px; flex-shrink: 0;
}
.palette-empty { padding: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.palette-foot { padding: 8px 16px; border-top: 1px solid var(--line); }
.kbd-hint {
  font-size: 10px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap;
}

/* ── Matter detail tabs ── */
.mtabs {
  display: flex; gap: 2px; border-bottom: 2px solid var(--line);
  margin-bottom: 18px; overflow-x: auto; white-space: nowrap;
}
.mtab {
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.mtab:hover { color: var(--navy); }
.mtab.active {
  color: var(--navy); font-weight: 600;
  border-bottom-color: var(--navy);
}
.mtab-n {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  border-radius: 9px; background: var(--line); color: var(--navy);
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
.mtab.active .mtab-n { background: var(--navy); color: #fff; }
/* Panels: hidden only when JS confirmed working (body.mtabs-ready);
   without JS the page falls back to the stacked layout. */
.mtabs-ready .mtab-panel { display: none; }
.mtabs-ready .mtab-panel.is-active { display: block; }

/* ── Global "+ New" quick-create menu ── */
.newmenu { position: relative; }
.newmenu summary { list-style: none; }
.newmenu summary::-webkit-details-marker { display: none; }
.newmenu-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 13px; border-radius: 16px; font-size: 13px; font-weight: 600;
  background: var(--navy); color: #fff; cursor: pointer; user-select: none;
  white-space: nowrap;
}
.newmenu-btn:hover { opacity: .9; }
.newmenu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 23, 40, .12);
  min-width: 200px; padding: 6px; display: flex; flex-direction: column;
}
.newmenu-pop a {
  padding: 8px 12px; border-radius: 6px; text-decoration: none;
  color: inherit; font-size: 13px;
}
.newmenu-pop a:hover { background: #eef0fb; }

/* ── AI assistant launcher + drawer ── */
.assistant-launch {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border: 1px solid var(--accent, #5b53d6);
  color: var(--accent, #5b53d6); background: transparent;
  border-radius: 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.assistant-launch:hover { background: var(--accent, #5b53d6); color: #fff; }
.assistant-overlay {
  position: fixed; inset: 0; background: rgba(10, 23, 40, .3);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 90;
}
.assistant-overlay.is-open { opacity: 1; pointer-events: auto; }
.assistant-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px;
  max-width: 92vw; background: #fff; z-index: 91;
  box-shadow: -8px 0 30px rgba(10, 23, 40, .16);
  transform: translateX(100%); transition: transform .2s ease;
  display: flex; flex-direction: column;
}
.assistant-drawer.is-open { transform: translateX(0); }
.assistant-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.assistant-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; background: #fafafb;
}
.assistant-msg {
  max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  line-height: 1.5; white-space: normal; word-wrap: break-word;
}
.assistant-msg.user {
  align-self: flex-end; background: var(--accent, #5b53d6); color: #fff;
  border-bottom-right-radius: 3px;
}
.assistant-msg.assistant {
  align-self: flex-start; background: #fff; border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
.assistant-pre {
  background: #0a1728; color: #e6e9f0; padding: 10px; border-radius: 6px;
  font-size: 12px; white-space: pre-wrap; margin: 6px 0; overflow-x: auto;
}
.assistant-proposal {
  align-self: stretch; background: #fff; border: 1px solid var(--accent, #5b53d6);
  border-radius: 10px; padding: 10px 12px;
}
.assistant-proposal.done { border-color: var(--green); opacity: .8; }
.prop-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent, #5b53d6); font-weight: 700; }
.prop-summary { font-size: 13px; margin: 4px 0 8px; }
.prop-actions { display: flex; gap: 6px; }
.prop-confirmed { color: var(--green-deep); font-weight: 600; font-size: 13px; }
.assistant-foot { padding: 12px 16px; border-top: 1px solid var(--line); }
.assistant-foot form { display: flex; gap: 8px; }
.assistant-foot input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px;
}
.assistant-hints {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.assistant-hints button {
  background: #eef0fb; border: none; border-radius: 12px; padding: 4px 10px;
  font-size: 11px; color: #384; color: var(--accent, #5b53d6); cursor: pointer;
}
.assistant-hints button:hover { background: #e0e3f7; }

/* ── One-click timer (topbar) ── */
.timer-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 16px;
  font-size: 13px; cursor: pointer; user-select: none;
  background: var(--bg); white-space: nowrap;
}
.timer-chip.running {
  border-color: var(--green); background: #eef7ee; cursor: default;
}
.timer-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: timer-pulse 1.6s ease infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}
#timer-elapsed { font-weight: 700; font-variant-numeric: tabular-nums; }
.timer-ref { color: var(--muted); font-size: 12px; }
.timer-btn {
  background: transparent; border: 1px solid var(--line); border-radius: 4px;
  width: 22px; height: 22px; line-height: 20px; padding: 0; cursor: pointer;
  font-size: 11px; color: var(--muted);
}
.timer-btn:hover { border-color: var(--navy); color: var(--navy); }
.timer-btn.stop { border-color: var(--red); color: var(--red-deep); }
.timer-start { position: relative; }
.timer-start summary { list-style: none; }
.timer-start summary::-webkit-details-marker { display: none; }
.timer-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 23, 40, .12);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  min-width: 280px;
}
.timer-pop select, .timer-pop input {
  padding: 6px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 6px; width: 100%;
}

/* Matter-task checkbox button */
.task-check {
  background: transparent; border: 1px solid var(--line);
  border-radius: 4px; width: 24px; height: 24px;
  font-size: 14px; line-height: 22px; padding: 0;
  cursor: pointer; color: var(--muted);
  transition: all .12s ease;
}
.task-check:hover { border-color: var(--accent); color: var(--accent); }
.tasks-table .task-done .task-check { color: var(--green); border-color: var(--green); }
.tasks-table tr.task-overdue td:nth-child(2) { border-left: 2px solid var(--red); }
.task-status-select {
  font-size: 12px; padding: 2px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--ink);
  margin-right: 4px;
}
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-danger { color: var(--red-deep); }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }

hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* ============================================================
   Calendar grid
   ============================================================ */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th {
  font-size: 11px; font-weight: 600;
  color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: 0;
}
.cal td {
  border: 1px solid var(--line); vertical-align: top;
  height: 92px; padding: 6px; width: 14.28%;
}
.cal-out { background: var(--bg); }
.cal-out .cal-day { color: var(--muted-2); }
.cal-today { background: var(--blue-bg); }
.cal-today .cal-day {
  background: var(--navy); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.cal-day { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.cal-ev {
  display: block; font-size: 11px; padding: 2px 5px; margin-bottom: 2px;
  background: var(--blue-bg); color: var(--blue); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev:hover { text-decoration: none; filter: brightness(.96); }
.cal-ev-over { background: var(--red-bg); color: var(--red-deep); }
.cal-ev-done { background: var(--bg-subtle); color: var(--muted); text-decoration: line-through; }

/* ============================================================
   Bar charts
   ============================================================ */
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-label { width: 100px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.bar-track { flex: 1; background: var(--bg-subtle); border-radius: 4px; height: 8px; }
.bar-fill {
  display: block; height: 8px; border-radius: 4px;
  background: var(--navy-3); min-width: 2px;
}
.bar-fill.accent { background: var(--red); }
.bar-value { width: 90px; text-align: right; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; flex-shrink: 0; color: var(--text); }

/* ============================================================
   Client portal
   ============================================================ */
.portal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.portal-top {
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px;
}
.portal-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.portal-brand:hover { text-decoration: none; }
.portal-logo { height: 26px; width: auto; display: block; }
.portal-tag {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.55); border-left: 1px solid rgba(255,255,255,.2);
  padding-left: 12px;
}
.portal-top .user-meta strong, .portal-top .user-meta small { color: #fff; }
.portal-top .signout { color: rgba(255,255,255,.85); }
.portal-content { max-width: 1000px; margin: 0 auto; width: 100%; padding: 26px; flex: 1; }
.portal-content h2 { color: var(--text); }
.portal-foot { text-align: center; padding: 18px; color: var(--muted); font-size: 12px; }

/* ============================================================
   Topbar search
   ============================================================ */
.topbar-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-subtle); border: 1px solid transparent;
  border-radius: var(--r); padding: 0 10px;
  transition: background .12s, border-color .12s;
}
.topbar-search:focus-within { background: #fff; border-color: var(--line-strong); }
.topbar-search-ic { color: var(--muted); font-size: 13px; }
.topbar-search input[type=text] {
  border: none; background: transparent; padding: 6px 2px;
  font-size: 13px; min-width: 220px; color: var(--text); width: auto;
}
.topbar-search input[type=text]:focus { outline: none; box-shadow: none; }

/* ============================================================
   Office switcher
   ============================================================ */
.office-switch {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-subtle); border: 1px solid transparent;
  border-radius: var(--r); padding: 2px 10px;
}
.office-switch:hover { background: #fff; border-color: var(--line); }
.office-switch-ic { color: var(--muted); font-size: 12px; }
.office-switch select {
  border: none; background: transparent; font-size: 13px;
  font-weight: 500; color: var(--text); cursor: pointer; padding: 4px 0;
  width: auto;
}
.office-switch select:focus { outline: none; box-shadow: none; }

.office-checks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px; margin: 6px 0;
}
.office-checks .check {
  flex-direction: row !important; align-items: center; gap: 7px;
  font-weight: 400; font-size: 13px;
}

/* ============================================================
   BD pipeline (kanban)
   ============================================================ */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col {
  flex: 1 1 0; min-width: 220px;
  background: var(--bg-subtle); border-radius: var(--r-md); padding: 10px;
}
.kanban-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600;
  padding: 4px 8px 9px; color: var(--text);
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.kanban-sum { color: var(--muted); font-weight: 500; }
.opp-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.opp-card:hover {
  text-decoration: none; border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.opp-title { font-weight: 500; color: var(--text); font-size: 13px; line-height: 1.4; }
.opp-meta { color: var(--muted); font-size: 12px; margin: 3px 0 7px; }
.opp-row { display: flex; justify-content: space-between; align-items: center; }
.opp-next { font-size: 11px; color: var(--muted); margin-top: 6px; }
.kanban-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 14px 0; }

/* ============================================================
   Accounting sub-nav
   ============================================================ */
.subnav {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.subnav a {
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.active { color: var(--text); border-bottom-color: var(--navy); font-weight: 600; }
.subnav-group {
  padding: 9px 4px 9px 14px; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; margin-top: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13px;
}
.pagination-controls { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   Public pages (e-sign sign / signed / voided / expired)
   ============================================================ */
body.public-page {
  background: var(--bg-subtle);
  min-height: 100vh;
}
.public-wrap {
  max-width: 720px; margin: 48px auto; padding: 0 16px;
}
.public-hero { text-align: center; margin-bottom: 28px; }
.public-hero .brand-logo { height: 30px; margin-bottom: 14px; }
.public-hero h1 {
  color: var(--text); margin-bottom: 6px; font-size: 24px; font-weight: 600;
}
.public-foot { text-align: center; margin-top: 30px; padding-bottom: 30px; }

/* ============================================================
   KYC status bar
   ============================================================ */
.kyc-status-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 14px;
  border: 1px solid var(--line); background: #fff; gap: 12px;
  flex-wrap: wrap;
}
.kyc-status-bar.kyc-cleared    { border-left: 3px solid var(--green); }
.kyc-status-bar.kyc-in_progress { border-left: 3px solid var(--amber); }
.kyc-status-bar.kyc-none       { border-left: 3px solid var(--muted-2); }
.kyc-status-bar.kyc-expired    { border-left: 3px solid var(--red); }
.kyc-status-bar.kyc-blocked    { border-left: 3px solid var(--red); background: var(--red-bg); }
.kyc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kyc-badge-cleared    { background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0; }
.kyc-badge-in_progress { background: var(--amber-bg); color: var(--amber); border: 1px solid #fde68a; }
.kyc-badge-none       { background: var(--bg-subtle); color: var(--muted); border: 1px solid var(--line); }
.kyc-badge-expired    { background: var(--red-bg); color: var(--red-deep); border: 1px solid #fecaca; }
.kyc-badge-blocked    { background: var(--red); color: #fff; border: 1px solid var(--red); }

/* ============================================================
   AI budget bar
   ============================================================ */
.budget-bar {
  height: 6px; background: var(--bg-subtle); border-radius: 3px;
  overflow: hidden; margin: 8px 0;
}
.budget-fill { height: 100%; background: var(--navy-3); transition: width .2s; }
.budget-bar.is-warn .budget-fill { background: var(--amber); }
.budget-bar.is-over .budget-fill { background: var(--red); }

/* ============================================================
   AI safety / info banners — calmer
   ============================================================ */
.ai-warning {
  background: var(--amber-bg);
  border: 1px solid #fde68a;
  border-left: 3px solid var(--amber);
  color: #78350f;
  padding: 11px 14px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
}
.ai-warning strong { color: #78350f; }

/* ============================================================
   Legal Work workspace
   ============================================================ */
.lw-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13px;
}
.lw-counters { display: flex; gap: 16px; color: var(--muted); font-size: 13px; }
.lw-counters span { white-space: nowrap; }

.lw-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 14px;
  min-height: 70vh;
}
.lw-chat, .lw-side {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.lw-chat > .card-head, .lw-side > .card-head, .lw-tabs {
  flex-shrink: 0;
}
.lw-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  background: var(--bg); min-height: 420px; max-height: 65vh;
}
.lw-msg {
  margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff;
}
.lw-msg-user { background: var(--blue-bg); border-color: #dbeafe; }
.lw-msg-assistant { background: #fff; border-left: 3px solid var(--navy); }
.lw-msg-system { background: var(--amber-bg); border-color: #fde68a; font-size: 12px; }
.lw-msg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px; font-size: 12px;
}
.lw-msg-body {
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
  font-size: 13.5px;
}
.lw-msg-actions {
  display: flex; gap: 6px; margin-top: 10px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 8px;
}

.lw-composer {
  padding: 12px 14px; border-top: 1px solid var(--line); background: var(--card);
}
.lw-composer textarea {
  width: 100%; padding: 10px;
}
.lw-composer-row {
  display: flex; gap: 8px; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.model-pick { padding: 5px 8px; font-size: 12px; max-width: 260px; }
.mini-select { padding: 4px 6px; font-size: 12px; width: auto; }

.lw-tabs {
  display: flex; border-bottom: 1px solid var(--line); background: var(--card);
}
.lw-tabs a {
  flex: 1; text-align: center; padding: 10px 8px; text-decoration: none;
  color: var(--muted); font-size: 12px; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.lw-tabs a.active {
  color: var(--text); border-bottom-color: var(--navy);
  background: var(--bg);
}
.lw-pane { padding: 14px; flex: 1; overflow-y: auto; max-height: 65vh; }

/* Laptop widths — the topbar carries many controls; compress gracefully
   BEFORE anything gets pushed off-screen, then allow a two-row wrap. */
@media (max-width: 1560px) {
  .topbar-right { gap: 8px; }
  .topbar-search input[type=text] { min-width: 120px; }
  .ws-label, .assistant-label { display: none; }   /* icon-only buttons */
  .ws-btn, .assistant-launch { padding-left: 9px; padding-right: 9px; }
  .timer-ref { display: none; }                    /* keep the ticking clock */
}
@media (max-width: 1280px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 52px;
            padding: 6px 16px; row-gap: 4px; }
  .topbar-right { flex-wrap: wrap; }
  .actions { flex-wrap: wrap; }
  .topbar-search input[type=text] { min-width: 80px; }
}

@media (max-width: 980px) {
  .lw-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   AI fee estimate cards — softer
   ============================================================ */
.ai-result-grid {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px;
  margin-bottom: 20px;
}
.ai-fee {
  padding: 22px 24px; border-radius: var(--r-md); color: #fff;
  background: var(--navy);
}
.ai-fee-avg { background: var(--red); transform: scale(1.02); }
.ai-fee-min { background: var(--navy-3); }
.ai-fee-max { background: var(--navy); }
.ai-fee-label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 6px; font-weight: 500;
}
.ai-fee-value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.ai-fee-sub { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 6px; }
@media (max-width: 720px) {
  .ai-result-grid { grid-template-columns: 1fr; }
  .ai-fee-avg { transform: none; }
}

/* ============================================================
   Segmented toggle
   ============================================================ */
.seg-toggle {
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--bg-subtle); border-radius: var(--r); border: 1px solid var(--line);
}
.seg-toggle label {
  display: inline-block; padding: 6px 14px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted); border-radius: 4px;
}
.seg-toggle input[type=radio] { display: none; }
.seg-toggle label:has(input:checked) {
  background: #fff; color: var(--text);
  box-shadow: var(--shadow-sm);
}

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: 4px 0; }

/* ============================================================
   Workspace switcher (topbar)
   ============================================================ */
.workspace-switch {
  display: flex; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--card);
}
.workspace-switch .ws-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  color: var(--muted); background: var(--card); text-decoration: none;
  letter-spacing: 0; border-right: 1px solid var(--line);
  transition: background .12s, color .12s;
}
.workspace-switch .ws-btn:last-child { border-right: none; }
.workspace-switch .ws-btn:hover { background: var(--bg-subtle); color: var(--text); }
.workspace-switch .ws-btn.active { background: var(--text); color: #fff; }

/* ============================================================
   Workspace chooser (landing page)
   ============================================================ */
.workspace-chooser { max-width: 880px; margin: 40px auto; }
.workspace-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.workspace-card {
  display: flex; gap: 16px; padding: 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text); text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.workspace-card:hover {
  transform: translateY(-1px); text-decoration: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.workspace-card-ic {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 600; flex-shrink: 0;
}
.workspace-card-body h3 {
  color: var(--text); margin-bottom: 4px; font-size: 16px;
}
.workspace-card-cta {
  display: inline-block; margin-top: 12px; color: var(--blue);
  font-weight: 500; font-size: 13px;
}
@media (max-width: 720px) {
  .workspace-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Tabular Review grid
   ============================================================ */
.tabular-grid { table-layout: auto; }
.tabular-grid th, .tabular-grid td { white-space: normal; vertical-align: top; }
.tabular-grid th {
  background: var(--bg);
  font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--text);
}
.tabular-grid .tab-cell {
  cursor: pointer; min-width: 180px; max-width: 260px;
  transition: background .08s;
  border-left: 2px solid transparent;
}
.tabular-grid .tab-cell:hover { background: var(--blue-bg); }
.tabular-grid .tab-conf-high { border-left-color: var(--green); }
.tabular-grid .tab-conf-medium { border-left-color: var(--amber); }
.tabular-grid .tab-conf-low { border-left-color: var(--muted-2); }
.tab-cell-value { font-size: 13px; line-height: 1.45; }
.tab-cell-conf { font-size: 10px; color: var(--muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .04em; }

dialog::backdrop { background: rgba(15,15,20,.4); }

/* ============================================================
   OSINT report block
   ============================================================ */
.osint-report details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--bg);
}
.osint-report details summary {
  cursor: pointer; font-size: 13px;
}
.osint-report details[open] summary { margin-bottom: 8px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .sidebar { width: 188px; }
  .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .topbar-search input[type=text] { min-width: 140px; }
  .content { padding: 18px 20px; }
}

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; height: auto;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
  }
  .sidebar .brand { border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
  .sidebar .brand-logo { height: 22px; }
  .brand-sub, .sidebar-foot { display: none; }
  .nav { display: flex; padding: 6px; flex: 0 0 auto; }
  .nav a { padding: 7px 10px; margin: 0 2px; white-space: nowrap; }
  .nav-group { display: none; }   /* labels noisy on the mobile strip */
  /* On mobile, ignore the collapse — show every link as a flat strip. */
  .nav-section, .nav-section.is-collapsed .nav-items { display: contents; }
  .topbar { padding: 0 14px; flex-wrap: wrap; height: auto; gap: 8px; }
  .topbar-right { gap: 8px; flex-wrap: wrap; }
  .topbar-search { display: none; }
  .user-meta { display: none; }
  .content { padding: 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .subnav { overflow-x: auto; flex-wrap: nowrap; }
  .invoice-totals { width: 100%; }
}

/* ───────────────────────── Print stylesheet ─────────────────────────
   Ctrl+P on any report prints just the numbers: chrome (sidebar, topbar,
   filter toolbars, buttons, assistant) disappears, cards flatten to
   bordered tables, and rows avoid splitting across pages. */
@media print {
  .sidebar, .topbar, .toolbar, .chip-row, .flash,
  .assistant-drawer, .assistant-overlay, .assistant-launch,
  .palette, .palette-overlay, .palette-foot,
  .btn, button, .form-actions, .pagination, .empty .big,
  details, .inline-form { display: none !important; }

  body { background: #fff !important; color: #000; font-size: 12px; }
  .layout { display: block !important; }
  .content { display: block !important; padding: 0 !important;
             margin: 0 !important; max-width: none !important;
             overflow: visible !important; }

  .card, .report-sheet { box-shadow: none !important;
    border: 1px solid #bbb !important; max-width: none !important;
    break-inside: auto; margin: 0 0 14px 0 !important; }
  .card-head { border-bottom: 1.5px solid #000 !important;
               background: none !important; }

  table { width: 100% !important; border-collapse: collapse; }
  th, td { border-bottom: 0.5px solid #ccc; }
  tr, .stat { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }   /* repeat headers per page */

  a { color: inherit !important; text-decoration: none !important; }
  .stat-grid { break-inside: avoid; }
  .badge { border: 0.5px solid #999; }
}

/* ───────────────────── Notification centre (topbar bell) ───────────────── */
.notif-wrap { position: relative; }
.notif-bell {
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 10px; cursor: pointer; font-size: 14px; position: relative;
}
.notif-bell:hover { background: var(--hover, #f3f4f8); }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--red, #c80032); color: #fff;
  border-radius: 999px; min-width: 18px; height: 18px;
  font-size: 11px; font-weight: 700; line-height: 18px;
  align-items: center; justify-content: center; padding: 0 4px;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  width: 380px; max-width: 92vw; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(10, 23, 40, .18);
}
.notif-head {
  padding: 10px 14px; font-weight: 700; color: var(--navy);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.notif-group {
  padding: 8px 14px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: #8a8f9e;
}
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 14px; font-size: 13px; color: var(--text, #1f2937);
  text-decoration: none; border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--hover, #f3f4f8); }
.notif-item.sev-danger  { border-left-color: var(--red, #c80032); }
.notif-item.sev-warning { border-left-color: #e8a13c; }
.notif-ic { flex: 0 0 auto; }
.notif-empty { padding: 18px 14px; font-size: 13px; color: #3d9a50; }
@media (max-width: 720px) { .notif-panel { width: 94vw; right: -40px; } }