/* =============================================================================
   MAWATHEQ — Enterprise UI layer (Phase 4)
   -----------------------------------------------------------------------------
   One design system for the client portal, the lawyer workspace and the public
   site. It reuses the brand tokens already defined in style.css (navy / teal /
   gold) and only standardises how existing classes look and behave — no page
   markup is required to change for the base look to apply.

   Load order: style.css → app.css → enterprise.css
   Everything is namespaced or additive, so pages that never opt in keep working.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens ---- */
:root{
  /* Brand (kept identical to style.css so the identity does not shift) */
  --navy:#1E3A5F; --navy-dark:#0F1F33; --teal:#2BA8C4; --gold:#F5A623;

  /* Surfaces */
  --bg:#F6F8FA; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#F1F5F9;
  --border:#E3E9EF; --border-strong:#CBD5E1;

  /* Text */
  --text:#16232F; --text-muted:#5C6B7A; --text-subtle:#8296A6;

  /* Semantic */
  --success:#1E8E5A; --success-bg:#E6F4ED;
  /* #B4780F measured 3.73:1 on --warning-bg, under the 4.5:1 WCAG AA needs at
     this token's 12px badge size. #7A5409 is the same amber, four steps darker,
     at 6.16:1 — and it is already the colour .form-alert.warning uses, so the two
     warning surfaces now agree instead of disagreeing by a shade. */
  --warning:#7A5409; --warning-bg:#FDF3E1;
  --danger:#C7492A;  --danger-bg:#FBEAE5;
  --info:#2BA8C4;    --info-bg:#EAF6F9;

  /* Geometry — one scale, used everywhere */
  --r-xs:6px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* Spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;

  /* Elevation */
  --sh-xs:0 1px 2px rgba(15,31,51,.05);
  --sh-sm:0 2px 8px rgba(15,31,51,.05);
  --sh-md:0 6px 20px rgba(15,31,51,.07);
  --sh-lg:0 24px 60px rgba(15,31,51,.20);

  /* Layout */
  --sidebar-w:264px; --sidebar-w-collapsed:76px; --topbar-h:64px; --bottomnav-h:60px;

  /* Typography scale (minimum readable body size on every device) */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px;
  --fs-h3:19px; --fs-h2:23px; --fs-h1:28px;

  --focus-ring:0 0 0 3px rgba(43,168,196,.35);
}

/* The public site keeps its large marketing headings; the app shells use the
   compact enterprise scale. Scope the app scale so the landing page is intact. */
.app-body{ font-size:var(--fs-base); line-height:1.6; }
.app-content{ font-size:var(--fs-base); }

/* ---------------------------------------------------------- icon baseline ---- */
/* ui_icon() emits <svg class="i" viewBox="0 0 24 24"> with no width/height. With no
   baseline, a bare icon inherits the SVG default box (300x150) and wrecks the layout
   wherever no contextual `.x svg` rule happens to apply — the sidebar logout glyph was
   rendering at 176px. This is the lowest-specificity fallback, so every existing
   contextual rule (nav-ico, kpi-ico, bottomnav, admin-ui's svg.i, …) still wins; it
   only fills the gaps that were previously unsized. */
svg.i{
  width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------------------------------------- a11y base ---- */
/* Visible, consistent keyboard focus everywhere (mouse users never see it). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px; border-radius:var(--r-xs);
}
/* The language switch is a real control, not decoration: give it a 44px target
   on every breakpoint (style.css renders it at 35px). */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s-4); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700;
}
/* Skip link: hidden until focused, then a real, visible control. */
.skip-link{
  position:fixed; inset-block-start:var(--s-2); inset-inline-start:var(--s-2); z-index:2000;
  transform:translateY(-200%); transition:transform .15s ease;
  background:var(--navy-dark); color:#fff; font-weight:700; font-size:var(--fs-sm);
  padding:10px 16px; border-radius:var(--r-sm); box-shadow:var(--sh-md);
}
.skip-link:focus{ transform:none; }
/* Screen-reader-only text (icons that need a label, headings that are visual). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------ shell + sidebar ---- */
.app-shell{ display:flex; min-height:100vh; align-items:stretch; }
.app-sidebar{
  width:var(--sidebar-w); flex:none; background:linear-gradient(180deg,var(--navy-dark),#132a45);
  color:#C7D2E4; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60;
  padding:var(--s-4) 0; overflow:hidden;
}
.app-sidebar .brand{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 var(--s-5); margin-bottom:var(--s-5);
  color:#fff; font-size:1rem; font-weight:800; font-family:var(--serif); text-decoration:none;
}
.app-sidebar .brand img{ height:30px; width:auto; border-radius:var(--r-sm); background:#fff; padding:2px; }

.app-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; min-height:0; padding:0 var(--s-2); }
.app-nav-group{ margin-top:var(--s-3); }
.app-nav-title{
  padding:0 var(--s-3) 6px; font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#7F92B0; white-space:nowrap;
}
.app-nav a{
  display:flex; align-items:center; gap:11px; min-height:44px; padding:9px var(--s-3);
  color:#C7D2E4; font-weight:600; font-size:var(--fs-sm); border-radius:var(--r-md);
  text-decoration:none; position:relative; transition:background .15s ease,color .15s ease;
}
.app-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.app-nav a.active{ background:rgba(245,166,35,.14); color:#fff; font-weight:700; }
.app-nav a.active::before{
  content:""; position:absolute; inset-block:9px; inset-inline-start:-8px; width:3px;
  border-radius:var(--r-pill); background:var(--gold);
}
.app-nav a .nav-ico{ display:inline-flex; width:20px; height:20px; flex:none; align-items:center; justify-content:center; }
.app-nav a .nav-ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.app-nav a .nav-badge{
  margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill);
  background:var(--gold); color:#1B1405; font-size:var(--fs-xs); font-weight:800; display:grid; place-items:center;
}
.app-sidebar-foot{ margin-top:auto; padding:var(--s-3) var(--s-3) 0; }
.logout-form{ margin:0; }
button.app-logout{
  width:100%; display:flex; align-items:center; gap:10px; min-height:44px; padding:9px var(--s-3);
  border:0; border-radius:var(--r-md); background:rgba(255,255,255,.05); color:#C7D2E4;
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; text-align:start;
}
button.app-logout:hover{ background:rgba(199,73,42,.22); color:#fff; }

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
  position:sticky; top:0; z-index:50; min-height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-6);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.app-topbar .app-topbar-title{ font-weight:800; font-size:var(--fs-md); color:var(--navy-dark); min-width:0; }
.app-topbar .app-topbar-spacer{ flex:1; }
.app-topbar .app-topbar-user{ font-weight:600; font-size:var(--fs-sm); color:var(--text-muted); white-space:nowrap; }
.app-topbar-actions{ display:flex; align-items:center; gap:var(--s-3); }
.app-content{ padding:var(--s-6); width:100%; max-width:1280px; margin:0 auto; }

/* Hamburger — only meaningful below the tablet breakpoint. */
.app-navtoggle{
  display:none; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  color:var(--navy-dark); cursor:pointer;
}
.app-navtoggle svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
.app-scrim{ display:none; }

/* ----------------------------------------------- breadcrumbs + page head ---- */
.breadcrumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 var(--s-3); padding:0; list-style:none; font-size:var(--fs-xs); color:var(--text-subtle); }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; min-width:0; }
/* Breadcrumb links are a touch trail, not inline prose: give them a real
   target instead of a 19px text box. */
.breadcrumbs a{ color:var(--text-muted); font-weight:600; display:inline-flex; align-items:center; min-height:44px; }
.breadcrumbs a:hover{ color:var(--teal); }
.breadcrumbs .sep{ color:var(--border-strong); }
.breadcrumbs [aria-current=page]{ color:var(--navy-dark); font-weight:700; }

.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
.page-head h1,.page-head h2{ margin:0; font-size:var(--fs-h2); color:var(--navy-dark); line-height:1.3; }
.page-head .page-sub{ margin:6px 0 0; color:var(--text-muted); font-size:var(--fs-sm); max-width:70ch; }
.page-head-actions{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }

/* ------------------------------------------------------------------ cards --- */
.dash-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-5); margin-bottom:var(--s-4); box-shadow:var(--sh-sm);
}
.dash-card h3{ margin:0 0 var(--s-2); font-size:var(--fs-lg); color:var(--navy-dark); }
.dash-card > :last-child{ margin-bottom:0; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3); }
.card-head h3{ margin:0; }

/* --------------------------------------------------------------- buttons ---- */
.btn, .app-content .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 var(--s-5); border-radius:var(--r-md); border:1.5px solid transparent;
  font-family:inherit; font-size:var(--fs-sm); font-weight:700; line-height:1; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled=true]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover:not([disabled]){ background:var(--navy-dark); }
.btn-gold{ background:var(--gold); color:#20130A; }
.btn-gold:hover:not([disabled]){ background:#E0941B; }
.btn-outline{ background:var(--surface); border-color:var(--border-strong); color:var(--navy-dark); }
.btn-outline:hover:not([disabled]){ border-color:var(--navy); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover:not([disabled]){ background:#A93A1F; }
.btn-ghost{ background:transparent; color:var(--text-muted); border-color:transparent; }
.btn-ghost:hover:not([disabled]){ background:var(--surface-3); color:var(--navy-dark); }
.btn-sm{ min-height:34px; padding:0 var(--s-3); font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn-lg{ min-height:50px; font-size:var(--fs-md); }
.btn-block{ width:100%; }

/* An icon inside a button/action sits on the text baseline as a label glyph, not as a
   block: keep it from stretching the control and let flex centring do the work. */
.btn svg.i, .icon-btn svg.i, button.app-logout svg.i{ flex:none; align-self:center; }

/* Loading state for submits — set by enterprise.js on form submit. */
.btn.is-loading{ color:transparent !important; position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:#fff; animation:ui-spin .6s linear infinite;
}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after{ color:var(--navy); }
@keyframes ui-spin{ to{ transform:rotate(360deg); } }

/* Icon-only control (bell, hamburger, close). 42px keeps the touch target legal. */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  color:var(--text-muted); cursor:pointer; text-decoration:none;
}
.icon-btn:hover{ border-color:var(--teal); color:var(--navy-dark); }
.icon-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------------- forms ----- */
.field{ margin-bottom:var(--s-4); }
.field > label, .field > .field-label{ display:block; margin:0 0 6px; font-size:var(--fs-xs); font-weight:700; color:var(--text); }
.field .req{ color:var(--danger); margin-inline-start:3px; }
.field input, .field select, .field textarea, .pro-input, .pro-select{
  width:100%; min-height:44px; padding:10px 13px; border:1.5px solid var(--border);
  border-radius:var(--r-md); background:var(--surface); color:var(--text);
  font-family:inherit; font-size:var(--fs-base); outline:none; transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus, .pro-input:focus, .pro-select:focus{
  border-color:var(--teal); box-shadow:var(--focus-ring);
}
.field input[disabled], .field select[disabled], .field textarea[disabled]{ background:var(--surface-3); color:var(--text-muted); cursor:not-allowed; }
.field input[aria-invalid=true], .field select[aria-invalid=true], .field textarea[aria-invalid=true]{ border-color:var(--danger); }
.field-hint{ margin:5px 0 0; font-size:var(--fs-xs); color:var(--text-subtle); }
.field-error{ margin:5px 0 0; font-size:var(--fs-xs); font-weight:600; color:var(--danger); }
.field-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--s-3); }
.field-check input[type=checkbox], .field-check input[type=radio]{ width:20px; height:20px; min-height:20px; flex:none; margin:2px 0 0; accent-color:var(--navy); }
.field-check label{ font-size:var(--fs-sm); font-weight:600; color:var(--text); cursor:pointer; }
/* A checkbox/radio that is its own touch target (e.g. availability grid). */
input[type=checkbox].lg, input[type=radio].lg{ width:22px; height:22px; min-height:22px; accent-color:var(--navy); }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); }
.form-section-title{
  display:flex; align-items:center; gap:8px; margin:var(--s-6) 0 var(--s-3);
  font-size:var(--fs-sm); font-weight:800; color:var(--navy-dark);
}
.form-section-title::before{ content:""; width:3px; height:15px; border-radius:var(--r-pill); background:var(--teal); }
.select-wrap{ position:relative; }
.password-input{ display:flex; align-items:stretch; gap:8px; }
.password-input input{ flex:1; min-width:0; }
.password-toggle{
  flex:none; min-height:44px; padding:0 14px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--navy); font:inherit; font-size:var(--fs-xs); font-weight:700; cursor:pointer;
}

/* --------------------------------------------------------------- alerts ----- */
.form-alert, .alert{
  display:flex; align-items:flex-start; gap:10px; padding:12px 15px; margin-bottom:var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:var(--fs-sm);
  font-weight:600; line-height:1.7; background:var(--surface-2); color:var(--text);
}
.form-alert.error, .alert-error{ background:var(--danger-bg); border-color:#F3C9BC; color:#8E3218; }
.form-alert.success, .alert-success{ background:var(--success-bg); border-color:#BFE3D0; color:#136B43; }
.form-alert.warning, .alert-warning{ background:var(--warning-bg); border-color:#F0DCAE; color:#7A5409; }
.form-alert.info, .alert-info{ background:var(--info-bg); border-color:#BEE3EC; color:#175E6E; }

/* --------------------------------------------------------------- badges ----- */
.status-pill, .badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; white-space:nowrap; background:var(--surface-3); color:var(--text-muted);
}
.status-pill::before, .badge-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.status-confirmed, .status-active, .status-approved, .status-completed, .status-paid, .status-closed_won, .status-success, .badge-success{ background:var(--success-bg); color:var(--success); }
.status-pending, .status-processing, .status-unpaid, .status-in_review, .status-draft, .badge-warning{ background:var(--warning-bg); color:var(--warning); }
.status-cancelled, .status-suspended, .status-failed, .status-overdue, .status-closed_lost, .badge-danger{ background:var(--danger-bg); color:var(--danger); }
.status-partially_paid, .badge-info{ background:var(--info-bg); color:var(--info); }
.badge-neutral{ background:var(--surface-3); color:var(--text-muted); }
.count-badge{
  display:inline-flex; min-width:26px; height:24px; padding:0 9px; align-items:center; justify-content:center;
  margin-inline-start:8px; border-radius:var(--r-pill); background:var(--info-bg); color:#175E6E;
  font-size:var(--fs-xs); font-weight:800; vertical-align:middle;
}

/* --------------------------------------------------------------- tables ----- */
/* Wrapper gives horizontal scrolling instead of breaking the page layout. */
.table-wrap{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  margin:var(--s-4) 0 var(--s-6); box-shadow:var(--sh-sm);
}
.table-wrap > table{ margin:0; border:0; }
.admin-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); font-size:var(--fs-sm); }
.admin-table th{
  padding:13px 16px; background:var(--surface-2); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:800; text-align:start; white-space:nowrap; border-bottom:1px solid var(--border);
}
.admin-table td{ padding:13px 16px; border-bottom:1px solid #EDF1F4; vertical-align:middle; color:var(--text); line-height:1.6; }
.admin-table tbody tr:last-child td{ border-bottom:0; }
.admin-table tbody tr:hover td{ background:#FBFCFD; }
.admin-table td.num, .admin-table th.num{ font-variant-numeric:tabular-nums; }
/* Dates, invoice numbers and case numbers are Latin/numeric: keep them LTR
   even inside an RTL page so they read correctly. */
.admin-table td.ltr, .ltr, .num-ltr{ direction:ltr; unicode-bidi:isolate; text-align:start; }
.admin-table .row-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.admin-table .row-actions form{ display:inline-flex; gap:6px; align-items:center; margin:0; }
/* A lone link in a table cell is its own hit target, so it must clear 24px
   (WCAG 2.5.8); links inside running text are exempt. */
.admin-table td > a{ display:inline-flex; align-items:center; min-height:24px; }

/* Below the tablet breakpoint a 10-column table cannot be read, so each row
   becomes a stacked card. Markup contract: cells carry data-label="Column". */
@media (max-width:820px){
  .table-wrap.table-cards{ border:0; box-shadow:none; background:transparent; overflow:visible; margin:var(--s-4) 0; }
  /* app.css pins tables to min-width:760px (680px on small screens) so that
     wide tables scroll instead of squashing. In card mode the table is a stack
     of blocks, so that floor has to go or it forces the page sideways. */
  .table-cards .admin-table, .table-cards .admin-table tbody, .table-cards .admin-table tr, .table-cards .admin-table td{ display:block; width:100%; min-width:0; }
  .table-cards .admin-table thead{ display:none; }
  /* app.css also forces nowrap on the last cell; in card mode the value must
     be free to wrap under its label. */
  .app-content .table-cards .admin-table td:last-child{ white-space:normal; }
  .table-cards .admin-table tr{
    border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
    padding:var(--s-3); margin-bottom:var(--s-3); box-shadow:var(--sh-sm);
  }
  .table-cards .admin-table td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
    padding:8px 4px; border-bottom:1px dashed #EDF1F4; text-align:end;
  }
  .table-cards .admin-table tr td:last-child{ border-bottom:0; }
  .table-cards .admin-table td::before{
    content:attr(data-label); flex:none; font-size:var(--fs-xs); font-weight:800;
    color:var(--text-muted); text-align:start; padding-inline-end:var(--s-2);
  }
  .table-cards .admin-table td[data-label=""]::before,
  .table-cards .admin-table td:not([data-label])::before{ display:none; }
  .table-cards .admin-table td .row-actions{ justify-content:flex-end; }
}

/* --------------------------------------------------------------- modals ----- */
.modal-backdrop{
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  padding:var(--s-5); background:rgba(15,31,51,.55); backdrop-filter:blur(4px); overflow-y:auto;
}
.modal-backdrop.is-open{ display:flex; }
.modal-form{
  position:relative; width:min(680px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--s-6); box-shadow:var(--sh-lg); animation:ui-modal-in .18s ease;
}
.modal-form h3{ margin:0 0 var(--s-4); font-size:var(--fs-lg); color:var(--navy-dark); padding-inline-end:44px; }
.modal-close{
  position:absolute; top:14px; inset-inline-end:14px; width:38px; height:38px; flex:none;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2);
  color:var(--text-muted); font-size:18px; line-height:1; cursor:pointer;
}
.modal-close:hover{ background:var(--surface-3); color:var(--navy-dark); }
.modal-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-5); }
@keyframes ui-modal-in{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } }
/* On a phone a modal becomes a full-screen sheet — easier to fill in and close. */
@media (max-width:640px){
  .modal-backdrop{ padding:0; align-items:flex-end; }
  .modal-form{ width:100%; max-height:92vh; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--s-5); }
  .modal-actions .btn{ flex:1 1 auto; }
}

/* ------------------------------------------------- tabs / pills / chips ----- */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--s-5); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabs button, .tabs a{
  padding:11px 16px; border:0; background:none; color:var(--text-muted); font:inherit;
  font-weight:700; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:7px; min-height:44px;
}
.tabs button.on, .tabs a.on, .tabs button[aria-selected=true]{ color:var(--navy); border-bottom-color:var(--navy); }
.tab-pane{ display:none; }
.tab-pane.on{ display:block; }

.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px;
  border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface);
  color:var(--text-muted); font-size:var(--fs-xs); font-weight:700; cursor:pointer; text-decoration:none;
}
.chip:hover{ border-color:var(--teal); color:var(--navy-dark); }
.chip.on, .chip[aria-pressed=true]{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* -------------------------------------------------------- empty / loading --- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:var(--s-3); padding:var(--s-10) var(--s-5); border:1px dashed var(--border-strong);
  border-radius:var(--r-lg); background:var(--surface-2); color:var(--text-muted);
}
.empty-state .empty-icon{
  width:52px; height:52px; border-radius:var(--r-lg); display:grid; place-items:center;
  background:var(--surface-3); color:var(--text-subtle);
}
.empty-state .empty-icon svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.empty-state h3{ margin:0; font-size:var(--fs-lg); color:var(--navy-dark); }
.empty-state p{ margin:0; font-size:var(--fs-sm); max-width:52ch; color:var(--text-muted); }
.empty-state .empty-actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; justify-content:center; margin-top:var(--s-1); }

/* Skeleton placeholder — used while a slow panel is still loading. */
.skeleton{
  border-radius:var(--r-sm); background:linear-gradient(90deg,var(--surface-3) 25%,#E9EEF3 37%,var(--surface-3) 63%);
  background-size:400% 100%; animation:ui-skel 1.4s ease infinite;
}
.skeleton-line{ height:12px; margin-bottom:8px; }
.skeleton-card{ height:92px; border-radius:var(--r-lg); }
@keyframes ui-skel{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* --------------------------------------------------------------- stats ------ */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s-3); margin-bottom:var(--s-5); }
.stat-card, .stat-tile{
  display:flex; align-items:center; gap:var(--s-3); min-height:92px; padding:var(--s-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.stat-tile{ border-inline-start:4px solid var(--teal); }
.stat-card .num, .stat-tile .num{
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:800; color:var(--navy-dark);
  line-height:1.15; font-variant-numeric:tabular-nums;
}
.stat-card .label, .stat-tile .label{ margin-top:3px; color:var(--text-muted); font-size:var(--fs-xs); font-weight:600; }
.stat-tile-icon{
  width:46px; height:46px; flex:none; border-radius:var(--r-md); display:grid; place-items:center;
  font-size:1.4rem; background:var(--info-bg);
}
.stat-tile-navy{ border-inline-start-color:var(--navy); } .stat-tile-navy .stat-tile-icon{ background:#EAEFF6; }
.stat-tile-gold{ border-inline-start-color:var(--gold); } .stat-tile-gold .stat-tile-icon{ background:#FBF3E3; }
.stat-tile-success{ border-inline-start-color:var(--success); } .stat-tile-success .stat-tile-icon{ background:var(--success-bg); }

/* ------------------------------------------------------------ hero banner --- */
.lawyer-hero, .app-hero{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy)); color:#fff;
  border-radius:var(--r-xl); padding:var(--s-6); margin-bottom:var(--s-5);
}
.lawyer-hero h2, .app-hero h2{ color:#fff; margin:0 0 4px; font-size:var(--fs-h2); }
.lawyer-hero p, .app-hero p{ margin:0; color:#B9C7D6; font-size:var(--fs-sm); }
.lawyer-hero-actions, .app-hero-actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.lawyer-hero .btn-outline, .app-hero .btn-outline{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.35); color:#fff; }
.lawyer-hero .btn-outline:hover, .app-hero .btn-outline:hover{ background:rgba(255,255,255,.20); border-color:#fff; }

/* ------------------------------------------------------- notifications ------ */
.notif-bell-wrap{ position:relative; }
.notif-bell-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text-muted); cursor:pointer;
}
.notif-bell-btn:hover{ border-color:var(--teal); color:var(--navy-dark); }
.notif-bell-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notif-count{
  position:absolute; top:-5px; inset-inline-end:-5px; min-width:18px; height:18px; padding:0 4px;
  background:var(--danger); color:#fff; font-size:var(--fs-xs); font-weight:800; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; border:2px solid var(--surface);
}
.notif-dropdown{
  display:none; position:absolute; top:calc(100% + 10px); inset-inline-end:0;
  width:340px; max-width:min(340px,92vw); max-height:min(440px,70vh); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); z-index:500;
}
.notif-dropdown.is-open{ display:block; }
.notif-dropdown-head{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-3);
  padding:13px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface);
}
.notif-dropdown-head strong{ font-size:var(--fs-sm); color:var(--navy-dark); }
.notif-item{ display:block; padding:12px 16px; border-bottom:1px solid #F3F5F7; text-decoration:none; color:inherit; }
.notif-item:hover{ background:var(--surface-2); }
.notif-item.is-unread{ background:var(--info-bg); }
.notif-item strong{ display:block; font-size:var(--fs-sm); color:var(--navy-dark); }
.notif-item p{ margin:3px 0 0; font-size:var(--fs-xs); color:var(--text-muted); }
.notif-item span{ display:block; margin-top:5px; font-size:var(--fs-xs); color:var(--text-subtle); }

/* ------------------------------------------------------------ pagination ---- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:var(--s-5) 0; }
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  padding:0 12px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text-muted); font-size:var(--fs-sm); font-weight:700; text-decoration:none;
}
.pagination a:hover{ border-color:var(--teal); color:var(--navy-dark); }
.pagination [aria-current=page]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pagination .is-disabled{ opacity:.45; pointer-events:none; }

/* ----------------------------------------------------------- toolbars ------- */
.toolbar, .app-content .toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap; margin:0 0 var(--s-5);
}
.toolbar h1, .toolbar h2, .toolbar h3{ margin:0; color:var(--navy-dark); font-size:var(--fs-h2); }
.filters, .app-content .filters{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-4); }
.filters input, .filters select{
  min-height:44px; padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-sm);
}
.filters input{ flex:1 1 240px; min-width:0; }

/* ------------------------------------------------ mobile nav (bottom) ------- */
.app-bottomnav{
  display:none; position:fixed; inset-block-end:0; inset-inline:0; z-index:70;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
}
.app-bottomnav ul{ display:flex; list-style:none; margin:0; padding:0; }
.app-bottomnav li{ flex:1; min-width:0; }
.app-bottomnav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:52px; padding:6px 2px; color:var(--text-muted); font-size:var(--fs-xs); font-weight:700;
  text-decoration:none; border-radius:var(--r-sm); text-align:center;
}
.app-bottomnav a svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-bottomnav a.active{ color:var(--navy); }
.app-bottomnav a.active svg{ color:var(--teal); }
.app-bottomnav .bn-badge{
  position:absolute; transform:translate(14px,-10px); min-width:16px; height:16px; padding:0 4px;
  background:var(--danger); color:#fff; font-size:var(--fs-xs); font-weight:800; border-radius:var(--r-pill);
  display:grid; place-items:center;
}
.app-bottomnav a{ position:relative; }

/* ------------------------------------------------------ touch targets ----- */
/* Checkbox and radio boxes are a target in their own right: 24px is the WCAG
   2.5.8 minimum and several pages pin them to 13px via legacy styles. The
   wrapping label is the real hit area, so it clears 44x44 everywhere. */
.app-content input[type=checkbox], .app-content input[type=radio],
.adm-content input[type=checkbox], .adm-content input[type=radio]{
  width:24px; height:24px; min-height:24px; flex:none; accent-color:var(--navy);
}
.app-content label:has(input[type=checkbox]), .app-content label:has(input[type=radio]),
.adm-content label:has(input[type=checkbox]), .adm-content label:has(input[type=radio]){
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  min-height:44px; min-width:44px; cursor:pointer;
}

/* The design system specifies 44px controls, but inputs that do not carry a
   .field wrapper fall back to the ~21px browser default. Normalise every text
   control so toolbars and table cells match the rest of the console. */
.app-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range]),
.app-content select,
.app-content textarea,
.adm-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range]),
.adm-content select,
.adm-content textarea{ min-height:40px; }

/* Bare controls (toolbars, table cells) also need the design-system skin, not
   just the height, or they read as unstyled browser widgets next to the rest. */
.app-content .toolbar input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.app-content .toolbar select,
.app-content .admin-table td input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.app-content .admin-table td select,
.adm-content .toolbar input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.adm-content .toolbar select,
.adm-content .admin-table td input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.adm-content .admin-table td select{
  padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:var(--fs-sm);
}
.app-content .toolbar input:focus, .app-content .toolbar select:focus,
.app-content .admin-table td input:focus, .app-content .admin-table td select:focus,
.adm-content .toolbar input:focus, .adm-content .toolbar select:focus,
.adm-content .admin-table td input:focus, .adm-content .admin-table td select:focus{
  border-color:var(--teal); box-shadow:var(--focus-ring); outline:none;
}

/* Touch-sized viewports get the full 44px target instead. */
@media (max-width:1024px){
  .app-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range]),
  .app-content select,
  .app-content textarea,
  .adm-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]):not([type=range]),
  .adm-content select,
  .adm-content textarea{ min-height:44px; }
  .table-cards .admin-table td input,
  .table-cards .admin-table td select,
  .table-cards .admin-table td textarea{ max-width:100%; }
}

/* ------------------------------------------------------------ responsive ---- */
/* Tablet and below: sidebar becomes an off-canvas drawer, bottom nav appears. */
@media (max-width:1024px){
  /* The closed drawer is parked outside the inline edge, which would otherwise
     give the page a horizontal scrollbar; clip it at the root without turning
     the root into a scroll container (overflow:hidden would break sticky). */
  html, body{ overflow-x:clip; }
  .app-shell{ display:block; }
  .app-sidebar{
    position:fixed; inset-block:0; inset-inline-start:0; width:min(288px,86vw); height:100vh;
    transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--sh-lg); z-index:90;
  }
  html[dir=ltr] .app-sidebar{ transform:translateX(-100%); }
  body.app-nav-open .app-sidebar{ transform:none; }
  body.app-nav-open .app-scrim{ display:block; position:fixed; inset:0; background:rgba(15,31,51,.5); z-index:80; }
  .app-navtoggle{ display:inline-flex; }
  .app-topbar{ padding:var(--s-3) var(--s-4); }
  .app-content{ padding:var(--s-4); padding-bottom:calc(var(--bottomnav-h) + var(--s-8)); }
  .app-bottomnav{ display:block; }
  .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .app-content{ padding:var(--s-3); padding-bottom:calc(var(--bottomnav-h) + var(--s-8)); }
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head-actions .btn{ flex:1 1 auto; }
  .stat-grid, .grid-2, .grid-3{ grid-template-columns:minmax(0,1fr); }
  .stat-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar .btn, .toolbar .btn-primary{ width:100%; }
  .lawyer-hero, .app-hero{ flex-direction:column; align-items:flex-start; padding:var(--s-5); }
  .filters{ flex-direction:column; align-items:stretch; }
  .filters input, .filters select{ width:100%; }
  .notif-dropdown{ position:fixed; inset-inline:8px; width:auto; max-width:none; top:auto; }
  .dash-card{ padding:var(--s-4); }
  .app-topbar .app-topbar-user{ display:none; }
  /* The topbar already carries bell + language + plan + avatar on a phone; the public
     site link is the least-used of them, so it yields space instead of forcing overflow. */
  .app-topbar .site-link{ display:none; }
}
@media (max-width:380px){
  .app-nav-title{ font-size:var(--fs-xs); }
  .app-bottomnav a{ font-size:var(--fs-xs); }
}

/* --------------------------------------------------- AI privacy indicator --- */
/* Shows the *actual* backend policy for the current tenant. */
.ai-privacy{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:800; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
}
.ai-privacy .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.ai-privacy.is-local{ background:var(--success-bg); border-color:#BFE3D0; color:#136B43; }
.ai-privacy.is-disabled{ background:var(--warning-bg); border-color:#F0DCAE; color:#7A5409; }
.ai-privacy.is-external{ background:var(--info-bg); border-color:#BEE3EC; color:#175E6E; }
.ai-privacy-note{ font-size:var(--fs-xs); color:var(--text-muted); margin:6px 0 0; }

/* --------------------------------------------------------------- misc ------- */
.case-row{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); text-decoration:none; transition:box-shadow .15s ease,transform .15s ease; }
.case-row:hover{ box-shadow:var(--sh-md); transform:translateY(-1px); }
.muted{ color:var(--text-muted); }
.muted-sm{ color:var(--text-muted); font-size:var(--fs-xs); }
.stack{ display:flex; flex-direction:column; gap:var(--s-3); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.inline-actions{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.divider{ height:1px; background:var(--border); border:0; margin:var(--s-4) 0; }
.slot-grid{ display:flex; flex-wrap:wrap; gap:8px; min-height:44px; }
.slot-btn{
  border:1.5px solid var(--border); background:var(--surface); color:var(--navy-dark); font-weight:700;
  padding:10px 16px; min-height:44px; border-radius:var(--r-md); cursor:pointer; font-size:var(--fs-sm);
}
.slot-btn:hover{ border-color:var(--teal); }
.slot-btn.selected{ background:var(--navy); border-color:var(--navy); color:#fff; }
.risk-item{ border-inline-start:3px solid var(--danger); padding:10px 14px; margin-bottom:8px; background:var(--danger-bg); border-radius:var(--r-sm); font-size:var(--fs-sm); }
.rec-item{ border-inline-start:3px solid var(--success); padding:10px 14px; margin-bottom:8px; background:var(--success-bg); border-radius:var(--r-sm); font-size:var(--fs-sm); }
.upload-box{ border:2px dashed var(--border-strong); border-radius:var(--r-lg); padding:var(--s-10) var(--s-5); text-align:center; cursor:pointer; background:var(--surface); }
.upload-box:hover{ border-color:var(--teal); }
.lawyer-card{ display:flex; gap:var(--s-4); align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); margin-bottom:var(--s-3); }
.lawyer-avatar{ width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.1rem; flex:none; }

/* ------------------------------------------------------------ public site --- */
/* Mobile navigation for the marketing header (the desktop nav is unchanged).
   The breakpoint must match the one in style.css: eight nowrap labels plus the
   brand and the two call-to-action buttons need ~1080px, so the panel takes over
   below that rather than letting the row compress. */
.nav-toggle{ display:none; }
@media (max-width:1080px){
  .site-header .container{ height:68px; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
    border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--navy-dark); cursor:pointer;
  }
  .nav-toggle svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
  .main-nav{
    display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--sh-md); padding:var(--s-2);
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding:14px var(--s-4); border-radius:var(--r-md); min-height:48px; display:flex; align-items:center; border-bottom:0; }
  .main-nav a:hover{ background:var(--surface-2); }
  .main-nav a[aria-current="page"], .main-nav a.is-active{ background:var(--surface-2); }
  .header-actions .btn-outline{ display:none; }
}
@media (max-width:480px){
  .site-header .container{ gap:10px; }
  .header-actions{ gap:8px; }
  .brand span{ font-size:1rem; }
  .hero-actions .btn{ width:100%; }
  .auth-card-pro{ padding:var(--s-5); }
  .footer-grid{ gap:var(--s-5); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .wa-float{ width:50px; height:50px; bottom:16px; inset-inline-end:16px; }
}

/* --------------------------------------------------- chat / consultation ---- */
.chat-window{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; height:70vh; min-height:420px; }
.chat-messages{ flex:1; overflow-y:auto; padding:var(--s-5); }
.chat-input-row{ display:flex; gap:var(--s-2); padding:var(--s-3); border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; min-width:0; border:1.5px solid var(--border); border-radius:var(--r-pill); padding:12px 18px; font:inherit; font-size:var(--fs-base); min-height:46px; }
.chat-input-row button{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--navy); color:#fff; border:0; cursor:pointer; }
.suggestion-chip{ display:inline-flex; align-items:center; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 16px; font-size:var(--fs-xs); margin:4px; cursor:pointer; min-height:38px; }
.suggestion-chip:hover{ border-color:var(--teal); }
@media (max-width:640px){ .chat-window{ height:calc(100vh - 220px); } }