/* ImConvey design system — tokens only via custom properties. Teal/slate "fatigue-free" palette. */
:root {
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 82%, #000);

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f6;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1e293b;
  --text-2: #475569;
  --muted: #64748b;

  --success: #15803d; --success-soft: #dcfce7;
  --warning: #b45309; --warning-soft: #fef3c7;
  --danger:  #b91c1c; --danger-soft:  #fee2e2;
  --info:    #1d4ed8; --info-soft:    #dbeafe;

  --chart-1: var(--accent); --chart-2: #6366f1; --chart-3: #f59e0b; --chart-4: #ec4899; --chart-5: #0ea5e9; --chart-6: #84cc16;

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .04);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .18);
  --sidebar-w: 248px;
  --topbar-h: 58px;
}
[data-theme="dark"] {
  --accent-ink: #04201d;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 70%, #fff);
  --bg: #0b1220;
  --surface: #111a2b;
  --surface-2: #152036;
  --surface-3: #1b2740;
  --border: #243149;
  --border-strong: #33425f;
  --text: #e2e8f0;
  --text-2: #b6c2d3;
  --muted: #8a99b0;
  --success: #4ade80; --success-soft: rgba(74, 222, 128, .14);
  --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, .14);
  --danger:  #f87171; --danger-soft:  rgba(248, 113, 113, .14);
  --info:    #60a5fa; --info-soft:    rgba(96, 165, 250, .14);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font: 14px/1.55 var(--font-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 .5em; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
p { margin: 0 0 .75em; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
code, pre { font-family: var(--font-mono); font-size: .9em; }
pre { background: var(--surface-3); padding: .75rem; border-radius: var(--radius-sm); overflow-x: auto; }
.muted { color: var(--muted); }
.small, small { font-size: .85em; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.inline { display: inline; }
.hidden, [hidden] { display: none !important; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: var(--surface); padding: .5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: .75rem .6rem 2rem; }
.brand { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem .9rem; color: var(--text); font-family: var(--font-display); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 800; flex-shrink: 0; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-section { margin-bottom: .35rem; }
.nav-heading { list-style: none; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .55rem .6rem .3rem; }
.nav-heading::-webkit-details-marker { display: none; }
.nav-link { display: flex; align-items: center; gap: .55rem; padding: .38rem .6rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; }
.nav-link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-link.active { font-weight: 600; }
/* Multicolour nav icons (palette cycles per section; the SVG uses currentColor). */
:root { --ic-1:#3a8ef6; --ic-2:#2eb87a; --ic-3:#d4952a; --ic-4:#a855f7; --ic-5:#ec4899; --ic-6:#06b6d4; --ic-7:#f2542d; --ic-8:#6366f1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-1:#6aa9ff; --ic-2:#4fd49a; --ic-3:#f0b54d; --ic-4:#c08bff; --ic-5:#f472b6; --ic-6:#22d3ee; --ic-7:#ff7a55; --ic-8:#8b8ff8; } }
:root[data-theme="dark"] { --ic-1:#6aa9ff; --ic-2:#4fd49a; --ic-3:#f0b54d; --ic-4:#c08bff; --ic-5:#f472b6; --ic-6:#22d3ee; --ic-7:#ff7a55; --ic-8:#8b8ff8; }
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; transition: transform .15s ease; }
.nav-link:hover .nav-icon { transform: scale(1.1); }
.nav-link:nth-of-type(8n+1) .nav-icon { color: var(--ic-1); }
.nav-link:nth-of-type(8n+2) .nav-icon { color: var(--ic-2); }
.nav-link:nth-of-type(8n+3) .nav-icon { color: var(--ic-3); }
.nav-link:nth-of-type(8n+4) .nav-icon { color: var(--ic-4); }
.nav-link:nth-of-type(8n+5) .nav-icon { color: var(--ic-5); }
.nav-link:nth-of-type(8n+6) .nav-icon { color: var(--ic-6); }
.nav-link:nth-of-type(8n+7) .nav-icon { color: var(--ic-7); }
.nav-link:nth-of-type(8n+8) .nav-icon { color: var(--ic-8); }
.nav-link.active { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px var(--accent); }
.nav-link.active .nav-icon { color: #fff; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar-title { font-family: var(--font-display); }
.topbar-search { flex: 1; max-width: 520px; }
.topbar-search input { width: 100%; background: var(--surface-2); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; font-size: 1rem; }
.icon-btn:hover { background: var(--surface-3); text-decoration: none; }
.dot-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; }
.user-chip { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .25rem .5rem; border-radius: 999px; }
.user-chip::-webkit-details-marker { display: none; }
.user-chip:hover { background: var(--surface-3); }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .85rem; }
.content { padding: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.only-mobile { display: none; }
.sidebar-backdrop { display: none; }
.impersonation-bar { background: var(--warning-soft); color: var(--warning); padding: .5rem 1rem; text-align: center; font-weight: 600; display: flex; gap: 1rem; justify-content: center; align-items: center; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
  .only-mobile { display: inline-grid; }
  .hide-mobile { display: none; }
  .content { padding: 1rem; }
}

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem; z-index: 60; }
.dropdown-menu a, .dropdown-menu .linklike { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--text); }
.dropdown-menu a:hover, .dropdown-menu .linklike:hover { background: var(--surface-3); text-decoration: none; }
.dropdown-head { padding: .45rem .6rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; display: flex; flex-direction: column; }
.linklike { background: none; border: 0; font: inherit; color: var(--accent-strong); cursor: pointer; padding: 0; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu form { margin: 0; }
.dropdown-menu .linklike { font-weight: 500; }
/* Destructive actions live quietly in a menu rather than in a red box on the page. */
.dropdown-menu .menu-danger { color: var(--danger); }
.dropdown-menu .menu-danger:hover { background: var(--danger-soft); }
details.disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
details.disclosure[open] > summary::before { transform: rotate(90deg); }
details.disclosure[open] > summary { margin-bottom: .85rem; }

/* ---------- Page structure ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-header h1 { margin-bottom: .15rem; }
.page-header p { margin: 0; color: var(--muted); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-sidebar { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: .85rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.15rem 1.25rem; }
.card + .card { margin-top: 1rem; }
.grid > .card + .card { margin-top: 0; }
/* Cards laid out by a grid or flex parent are spaced by its gap: the stacking margin
   above would push every card after the first out of line. */
:is(.cl-stats, .cl-matters, .kanban, .launcher-grid, .stats-grid, .mc-stat-row, .split, .row, .actions,
    .form-grid, .filters, .chips, .main-col, .inc-grid, .comply-grid, .plans, .pillars,
    [style*="display:grid"], [style*="display: grid"], [style*="display:flex"], [style*="display: flex"]) > .card + .card { margin-top: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: -.15rem 0 .85rem; }
.card-header h2, .card-header h3 { margin: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-header { padding: 1rem 1.25rem 0; }
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.stat-sub { font-size: .8rem; color: var(--muted); }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty h3 { color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 .875rem/1.2 var(--font-body); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.92); background: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .55; pointer-events: none; }

/* ---------- Forms ---------- */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=tel], input[type=url], input[type=color], select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 400 .9rem/1.4 var(--font-body);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
textarea { min-height: 90px; resize: vertical; }
input[type=file] { font: inherit; color: var(--text-2); }
input[type=file]::file-selector-button { margin-right: .6rem; padding: .4rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
.field { display: flex; flex-direction: column; gap: .3rem; }
/* Forms written as <label>Text <input></label> (without class="field") must still stack
   label above control, full width — otherwise the input sits inline, shrunk to content. */
form label:not(.check):not(.chip):not(.seg label):has(> input:not([type=checkbox]):not([type=radio]):not([type=hidden])),
form label:not(.check):not(.chip):has(> select),
form label:not(.check):not(.chip):has(> textarea) {
  display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--text-2);
}
form label:has(> input[type=checkbox]), form label:has(> input[type=radio]) {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer;
}
/* Stacked bare labels inside a form get breathing room when they are not in a grid. */
form > label + label, form > label + .field, form > .field + label { margin-top: .85rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
.field > span, .field > label, .label { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: .78rem; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.form-grid { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters input, .filters select { width: auto; min-width: 150px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .35rem; font-family: var(--font-display); }

/* ---------- Segmented control & chips ---------- */
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label, .seg a, .seg button { padding: .32rem .75rem; border-radius: 5px; font-weight: 600; font-size: .82rem; color: var(--text-2); cursor: pointer; border: 0; background: none; }
.seg input:checked + label, .seg a.active, .seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); text-decoration: none; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--text-2); cursor: pointer; }
.chip.active, .chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.chip input { display: none; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge-open, .badge-active, .badge-paid, .badge-done, .badge-completed, .badge-verified, .badge-approved, .badge-ok, .badge-published, .badge-confirmed, .badge-success { background: var(--success-soft); color: var(--success); }
.badge-in_progress, .badge-sent, .badge-pending, .badge-part_paid, .badge-todo, .badge-scheduled, .badge-info, .badge-running, .badge-queued { background: var(--info-soft); color: var(--info); }
.badge-on_hold, .badge-waiting, .badge-draft, .badge-warning, .badge-high, .badge-review { background: var(--warning-soft); color: var(--warning); }
.badge-overdue, .badge-failed, .badge-rejected, .badge-urgent, .badge-suspended, .badge-danger, .badge-cancelled, .badge-void { background: var(--danger-soft); color: var(--danger); }
.badge-closed, .badge-na, .badge-skipped, .badge-archived, .badge-low { background: var(--surface-3); color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: .6rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.data-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table a.row-link { color: var(--text); font-weight: 600; }
.pagination { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; padding: .75rem; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem; overflow-x: auto; scrollbar-width: thin; }
.tab { padding: .6rem .85rem; font-weight: 600; font-size: .875rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active, .tab[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.tab-count { margin-left: .3rem; font-size: .72rem; background: var(--surface-3); padding: .05rem .4rem; border-radius: 999px; }

/* ---------- Flash ---------- */
.flash { position: relative; padding: .7rem 2.3rem .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-weight: 500; border: 1px solid transparent; }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash-info { background: var(--info-soft); color: var(--info); }
.flash-warning { background: var(--warning-soft); color: var(--warning); }
.flash-close { position: absolute; right: .5rem; top: .45rem; border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }
.callout { padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface-2); border-left: 3px solid var(--accent); }
.callout-warning { border-left-color: var(--warning); background: var(--warning-soft); }
.callout-danger { border-left-color: var(--danger); background: var(--danger-soft); }

/* ---------- Modal (<dialog>) with sticky footer ---------- */
dialog.modal { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.modal-lg { width: min(960px, calc(100vw - 2rem)); }
dialog.modal-xl { width: min(1280px, calc(100vw - 2rem)); height: calc(100vh - 3rem); }
dialog.modal::backdrop { background: rgba(15, 23, 42, .5); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); height: 100%; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 1.1rem; }
.modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer { position: sticky; bottom: 0; display: flex; gap: .5rem; justify-content: flex-end; padding: .85rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface); }

/* ---------- Floating action cluster ---------- */
.fab-cluster { position: fixed; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 30; }
.fab { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: var(--shadow-lg); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }

/* ---------- Charts ---------- */
.chart-box { position: relative; height: 260px; width: 100%; }
.chart-box.sm { height: 180px; } .chart-box.lg { height: 340px; }
.chart-box svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.chart-tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font-size: .75rem; padding: .25rem .5rem; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -120%); }
.progress { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ---------- Lists, timeline, kanban ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.list > li:last-child { border-bottom: 0; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--border); }
.timeline > li { position: relative; padding: 0 0 1rem .75rem; }
.timeline > li::before { content: ""; position: absolute; left: -1.43rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.timeline > li.done::before { background: var(--accent); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; min-height: 300px; }
.kanban-col.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.kanban-col h3 { font-size: .85rem; display: flex; justify-content: space-between; padding: .2rem .3rem .6rem; }
.kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .7rem; margin-bottom: .5rem; box-shadow: var(--shadow-sm); cursor: grab; }
.kanban-card.dragging { opacity: .5; }
.launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.launcher-item { display: block; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.launcher-item:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.launcher-item strong { display: block; margin-bottom: .15rem; }
.launcher-item span { font-size: .82rem; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-grid > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 105px; padding: .3rem; font-size: .78rem; background: var(--surface); }
.cal-grid .cal-head { min-height: 0; background: var(--surface-2); font-weight: 700; text-align: center; color: var(--muted); }
.cal-grid .cal-out { background: var(--surface-2); color: var(--muted); }
.cal-grid .cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-event { display: block; padding: .1rem .35rem; margin-top: .2rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* ---------- Auth & errors ---------- */
.auth-body { background: radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 50%), var(--bg); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: min(420px, 100%); padding: 2rem; }
.auth-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; margin-bottom: 1.25rem; }
.auth-title { font-size: 1.4rem; margin-bottom: .2rem; }
.auth-links { margin-top: 1rem; font-size: .85rem; text-align: center; }
.auth-foot { margin-top: 1rem; font-size: .8rem; }
.error-card { width: min(640px, 100%); text-align: center; padding: 2.5rem 2rem; }
.error-code { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--accent); margin: 0; }
.debug { text-align: left; font-size: .75rem; max-height: 50vh; white-space: pre-wrap; }

/* ---------- Public site baseline ---------- */
.public-body { background: var(--surface); }

@media print { .sidebar, .topbar, .fab-cluster, .flash-close { display: none !important; } .content { padding: 0; } }

/* ======================================================================
   Component layer for class names used by module views.
   Several modules were written against these names without styles existing,
   which left controls, the document viewer and editors unstyled.
   ====================================================================== */

/* A control that carries .field itself (rather than a wrapping label). */
input.field, select.field, textarea.field { display: block; width: 100%; }
.field-wrap, .field-label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.field-wrap:has(> input[type=checkbox]), .field-label:has(> input[type=checkbox]),
.field-wrap:has(> input[type=radio]), .field-label:has(> input[type=radio]) { flex-direction: row; align-items: center; gap: .45rem; font-weight: 500; }
.field-wrap.span-2, .field-label.span-2 { grid-column: 1 / -1; }
.form-grid > .field-wrap, .form-grid > .field-label { min-width: 0; }
.inline-checkbox { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty-state h3 { color: var(--text-2); }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.list-plain > li:last-child { border-bottom: 0; }
.list-item { transition: background .12s; }
.list-item:hover { background: var(--surface-2); }
.list-item.active, .list-item[aria-current="true"] { background: var(--accent-soft); }
.side-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.side-col > .card + .card { margin-top: 0; }

/* ---------- In-browser document viewer ---------- */
.doc-viewer { display: flex; flex-direction: column; height: min(80vh, 960px); min-height: 440px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
dialog .doc-viewer { height: calc(100vh - 9rem); border: 0; border-radius: 0; }
.doc-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.doc-viewer-toolbar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-viewer-body { flex: 1; min-height: 0; overflow: auto; background: var(--surface-3); }
.doc-viewer-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.doc-viewer-body > .empty { margin: 3rem auto; max-width: 520px; }
/* Word documents render as a page of paper, in both themes. */
.doc-viewer-docx { max-width: 860px; margin: 1.5rem auto; padding: 3rem 3.5rem; background: #fff; color: #1e293b; box-shadow: var(--shadow); border-radius: 4px; line-height: 1.6; font-family: Georgia, "Times New Roman", serif; }
.doc-viewer-docx h1, .doc-viewer-docx h2, .doc-viewer-docx h3 { color: #0f172a; }
.doc-viewer-docx table { border-collapse: collapse; width: 100%; margin: .75rem 0; }
.doc-viewer-docx td, .doc-viewer-docx th { border: 1px solid #cbd5e1; padding: .35rem .5rem; vertical-align: top; }
.doc-viewer-docx img { max-width: 100%; }
.doc-viewer-text, .doc-viewer-pre { margin: 0; }
.doc-viewer-text pre, .doc-viewer-pre { padding: 1rem 1.25rem; background: transparent; white-space: pre-wrap; word-break: break-word; min-height: 100%; color: var(--text); }
@media (max-width: 700px) { .doc-viewer-docx { padding: 1.5rem 1.25rem; margin: .75rem; } }

/* ---------- Rich-text editor (document templates) ---------- */
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); }
.rte-toolbar button, .rte-toolbar select { font: 600 .82rem/1 var(--font-body); padding: .38rem .6rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-2); cursor: pointer; }
.rte-toolbar select { width: auto; border-color: var(--border); background-color: var(--surface); padding-right: 1.75rem; }
.rte-toolbar button:hover { background: var(--surface-3); color: var(--text); }
.rte-toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rte-toolbar .rte-sep { width: 1px; align-self: stretch; margin: .15rem .2rem; background: var(--border); }
.rte-toolbar + .rte-editor { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-color: var(--border-strong) !important; }
.rte-editor { color: var(--text); font-weight: 400; font-size: .92rem; line-height: 1.65; overflow-wrap: anywhere; }
.rte-editor:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }
.rte-editor p { margin: 0 0 .75em; }
.rte-editor ul, .rte-editor ol { padding-left: 1.4rem; }
.rte-editor .merge-tag, .rte-editor code { background: var(--accent-soft); color: var(--accent-strong); padding: 0 .25rem; border-radius: 3px; font-size: .88em; }

/* ---------- Form builder toolbox ---------- */
.toolbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.toolbox > * { justify-content: flex-start; text-align: left; font-weight: 500; font-size: .82rem; padding: .45rem .6rem; }

/* ---------- Public form & signature pad ---------- */
.public-form-wrap .card { padding: 1.75rem 2rem; }
.public-form-wrap h1 { font-size: 1.5rem; }
.sig-pad-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.sig-pad { display: block; cursor: crosshair; }
@media (max-width: 600px) { .public-form-wrap .card { padding: 1.25rem; } }

/* ---------- Narrow-screen integrity ----------
   Grid/flex children default to min-width:auto (their content's size), which lets a wide input,
   table or long word stretch a column past the screen. Let them shrink, and let rows wrap. */
.grid > *, .form-grid > *, .grid-sidebar > *, .card, .card-header > *, .page-header > * { min-width: 0; }
.card-header { flex-wrap: wrap; row-gap: .5rem; }
.chips, .filters, .actions, .row, .topbar-actions { flex-wrap: wrap; }
/* break-word, not anywhere: "anywhere" also shrinks min-content to one character, which let
   flex items and table columns inside cards collapse letter-by-letter on narrow screens. */
.callout, .card, .empty, td, dd { overflow-wrap: break-word; }
@media (max-width: 600px) {
  .card { padding: 1rem; }
  .page-header h1 { font-size: 1.35rem; }
  .page-header { gap: .75rem; }
  .filters input, .filters select { min-width: 0; flex: 1 1 140px; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { flex: 1 1 auto; }
}
/* Month grid: events sit inside narrow day cells, so they truncate rather than widen the grid. */
.cal-grid > div { min-width: 0; overflow: hidden; }
.cal-grid .chip, .cal-grid a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .cal-grid > div { min-height: 64px; padding: .2rem; font-size: .7rem; } }

/* Per-matter colour (--mc set inline from matter_colour(), or by app.js on matter links). */
.mc-stripe { border-left: 4px solid var(--mc, var(--border)) !important; }
.m-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mc, var(--muted));
  margin-right: .4rem; vertical-align: .05em; flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc, transparent) 22%, transparent); }
.cal-grid a.m-tinted, .kanban-card.m-tinted { border-left: 3px solid var(--mc); }
.mc-colour-pick { display: flex; align-items: center; gap: .6rem; }
.mc-colour-pick input[type=color] { width: 2.6rem; height: 2rem; padding: 2px; border-radius: var(--radius-sm); cursor: pointer; }

/* =====================================================================
   Polish layer: modern, consistent components across every page.
   Appended last so it refines the base rules above without rewriting them.
   ===================================================================== */
:root { --radius-lg: 16px; --radius: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px -6px rgba(15, 23, 42, .10);
  --ease: cubic-bezier(.2, .7, .2, 1); }
[data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .55); }

/* Cards */
.card { padding: 1.25rem 1.4rem; border-color: color-mix(in srgb, var(--border) 85%, transparent); box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
a.card:hover, .card.is-link:hover { box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; }
.card-header { margin-bottom: 1rem; }
.card-header h2, .card-header h3 { font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.card-flush .card-header { padding: 1.1rem 1.4rem 0; }

/* Page header */
.page-header { margin-bottom: 1.4rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .2rem; }
.page-header p { color: var(--muted); margin: 0; }

/* Buttons */
.btn { min-height: 38px; padding: .5rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 32px; padding: .3rem .75rem; font-size: .8rem; }
.btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-strong); }
.btn-icon { min-width: 32px; padding-left: .5rem; padding-right: .5rem; font-size: 1rem; line-height: 1; }
.btn-icon.is-on { color: #d99a06; border-color: color-mix(in srgb, #d99a06 45%, var(--border-strong)); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-row form { margin: 0; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* Inputs */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=tel], input[type=url], select {
  min-height: 38px; border-radius: var(--radius-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
textarea { border-radius: var(--radius-sm); }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.filters { gap: .6rem; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.filters label:has(> input[type=checkbox]) { padding: 0 .35rem; color: var(--text-2); font-size: .85rem; }

/* Badges: soft pill with a hairline edge in the same hue */
.badge { padding: .16rem .6rem; font-size: .72rem; font-weight: 650; letter-spacing: .01em; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }

/* Tables */
.data-table th { font-size: .7rem; letter-spacing: .06em; padding: .7rem .9rem; }
.data-table td { padding: .75rem .9rem; }
.data-table tbody tr { transition: background .12s var(--ease); }

/* Tabs */
.tabs { gap: .25rem; }
.tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color .15s var(--ease), background .15s var(--ease); }
.tab:hover { background: var(--surface-2); }

/* Empty states */
.empty, .empty-state { padding: 2.25rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); text-align: center; }
.empty-state p, .empty p { margin: 0; }
p.empty { margin: 0; }

/* Status pill with a dot, for states that read as a phrase ("Portal active") */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 650;
  background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); white-space: nowrap; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--success-soft); color: var(--success); }
.pill-warn { background: var(--warning-soft); color: var(--warning); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-bad { background: var(--danger-soft); color: var(--danger); }
.pill-off { background: var(--surface-3); color: var(--muted); }
.pill-star { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b7791f; }
.count-chip { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); font-size: .72rem; font-weight: 700; font-family: var(--font-body); }

/* KPI tiles: coloured icon chip + value + label, equal heights */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.kpi-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--kpi, var(--accent)) 14%, transparent); color: var(--kpi, var(--accent)); }
.kpi-ic svg { width: 22px; height: 22px; }
.kpi > div { min-width: 0; }
.kpi-value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-label { font-size: .78rem; color: var(--muted); font-weight: 600; margin-top: .1rem; }

/* Key/value lists: every <dl> variant in the app */
dl { margin: 0; }
dl.kv, .card dl:not([class]) { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; column-gap: 1rem; }
dl.kv > dt, .card dl:not([class]) > dt { color: var(--muted); font-size: .82rem; font-weight: 600; padding: .55rem 0; border-bottom: 1px solid var(--border); }
dl.kv > dd, .card dl:not([class]) > dd { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
dl.kv > dt:last-of-type, dl.kv > dd:last-of-type, .card dl:not([class]) > dt:last-of-type, .card dl:not([class]) > dd:last-of-type { border-bottom: 0; }
.def-list > div { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.def-list > div:last-child { border-bottom: 0; }
.def-list dt { color: var(--muted); font-size: .82rem; font-weight: 600; }
.def-list dd { margin: 0; overflow-wrap: break-word; }
dl.list > dt { color: var(--muted); font-size: .82rem; font-weight: 600; margin-top: .6rem; }
dl.list > dd { margin: .1rem 0 0; }

/* Checklists (VOI, compliance, onboarding) */
.check-list { list-style: none; margin: .75rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
form .check-list > label.check-item, .check-list > .check-item { display: flex; flex-direction: row; align-items: center; gap: .65rem; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 500; font-size: .88rem; color: var(--text);
  cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease); }
.check-list > .check-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.check-list > .check-item:has(input:checked), .check-list > .check-item.is-done { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
li.check-item.is-done::before { content: "\2713"; color: var(--success); font-weight: 800; }

/* A module tab that renders its own card inside a tab panel: drop the second frame. */
[data-tab-panel] > .card:only-child, .cl-tab-panel > .card:only-child, [data-tab-content] > .card:only-child { border: 0; box-shadow: none; padding: 0; background: none; }
[data-tab-panel] > .card:only-child > .card-header:first-child h3, .cl-tab-panel > .card:only-child > .card-header:first-child h3 { font-size: .95rem; color: var(--text-2); }
[data-tab-panel] > .card:only-child > .card-header:first-child:has(> h3:only-child), .cl-tab-panel > .card:only-child > .card-header:first-child:has(> h3:only-child) { display: none; }
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .kpi { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .9rem; }
  .kpi-ic { width: 36px; height: 36px; border-radius: 10px; } .kpi-ic svg { width: 18px; height: 18px; }
  .kpi-value { font-size: 1.1rem; }
  .cl-hero { padding: 1.2rem; } .cl-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 1.2rem; } .cl-hero h1 { font-size: 1.4rem; }
}

/* Chat: conversation list beside the thread; stacked on narrow screens. */
.chat-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 60vh; }
.chat-app > * { min-width: 0; }
@media (max-width: 760px) { .chat-app { grid-template-columns: 1fr; } .chat-app > :first-child { border-bottom: 1px solid var(--border); max-height: 40vh; overflow-y: auto; } }
a.kpi-link { color: var(--text); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
a.kpi-link:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: color-mix(in srgb, var(--kpi) 40%, var(--border)); text-decoration: none; }
.dash-grid { align-items: start; }
/* Checkboxes in filter bars must not inherit the 150px min-width meant for text inputs. */
.filters input[type=checkbox], .filters input[type=radio] { min-width: 0; width: 16px; }
.filter-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 500; color: var(--text-2); padding: 0 .35rem; cursor: pointer; }
.filters-end { margin-left: auto; }
/* Vertical rhythm between stacked blocks (cards, grids, KPI rows). */
.card + .grid, .grid + .card, .grid + .grid, .kpi-row + .card, .filters + .grid, .card + .kpi-row, .grid + .table-wrap { margin-top: 1.25rem; }
/* Colour inputs: show the swatch, not a squashed line. */
input[type=color] { width: 56px; min-width: 56px; height: 38px; padding: 3px; cursor: pointer; background: var(--surface); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 5px; }
.grid + .filters, .kpi-row + .filters, .card + .filters, .filters + .card, .filters + .table-wrap, .page-header + .card { margin-top: 1.25rem; }
.grid + .filters, .kpi-row + .filters { margin-bottom: 1.25rem; }
.cal-more { display: block; width: 100%; margin-top: .2rem; padding: .15rem .35rem; border: 0; border-radius: 6px; background: var(--surface-3); color: var(--accent-strong); font: 600 .72rem/1.4 var(--font-body); cursor: pointer; text-align: left; }
.cal-more:hover { background: var(--accent-soft); }
.data-table a[href^="/matters/"], .data-table td:has(> a[href^="/matters/"]) { white-space: nowrap; }
/* Kanban cards are often links: make them real blocks so their contents stay inside. */
a.kanban-card { display: block; color: var(--text); text-decoration: none; }
a.kanban-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.kanban-card strong { display: block; margin-bottom: .2rem; }
.kanban-card .sm, .kanban-card .small { font-size: .8rem; }
/* Inputs that carry the form-field class inside a filter bar stay inline. */
.filters > input.field, .filters > select.field, .filters > input, .filters > select { width: auto; flex: 0 1 230px; }
.filters > input[type=search] { flex-basis: 260px; }
/* Destructive actions repeated on every row stay quiet until hovered. */
.data-table .btn-danger, .card .btn-danger.btn-sm { background: transparent; border-color: transparent; color: var(--danger); box-shadow: none; }
.data-table .btn-danger:hover, .card .btn-danger.btn-sm:hover { background: var(--danger-soft); filter: none; }
/* Matter tasks tab: stage groups share one column layout; due dates are chips inside the cell. */
.stage-group { padding: 0 1.4rem 1.1rem; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .9rem 0 .4rem; }
.stage-head strong { font-size: .92rem; }
.stage-progress { height: 5px; margin-bottom: .6rem; }
.task-stage-table { table-layout: fixed; }
.task-stage-table td:first-child a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-stage-table td:last-child { text-align: right; }
.due-chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2); }
.due-chip.is-overdue { background: var(--danger-soft); color: var(--danger); }
.due-chip.is-soon { background: var(--warning-soft); color: var(--warning); }
.task-done-btn { color: var(--success); }
.task-done-btn:hover { background: var(--success-soft); color: var(--success); }
/* Inline document upload on the matter Documents tab. */
.doc-drop { margin: 0 1.4rem 1.1rem; }
.doc-drop-zone { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.25rem 1rem; border: 2px dashed var(--border-strong);
  border-radius: var(--radius); background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .15s var(--ease), background .15s var(--ease); }
.doc-drop-zone:hover, .doc-drop.is-over .doc-drop-zone { border-color: var(--accent); background: var(--accent-soft); }
.doc-drop-zone svg { width: 28px; height: 28px; color: var(--accent); }
.doc-drop-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.doc-drop-title { font-weight: 600; color: var(--text); }
.doc-drop-title u { color: var(--accent-strong); }
.doc-drop-options { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.doc-drop-options input[type=text] { width: auto; flex: 1 1 180px; }
.doc-drop-options .btn { margin-left: auto; }
.doc-drop + .table-wrap, .doc-drop + .empty { margin: 0 1.4rem 1.1rem; }
.doc-drop-zone { position: relative; }
/* Form page with a helper column. */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.form-layout > .card { margin: 0; }
.form-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.form-aside > .card + .card { margin-top: 0; }
@media (max-width: 1000px) { .form-layout { grid-template-columns: 1fr; } }
.field .hint { font-weight: 500; }
.preset-area { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 .45rem; }
.tip-list { margin: 0; padding-left: 1.1rem; color: var(--text-2); font-size: .88rem; }
.tip-list li + li { margin-top: .4rem; }

/* ---------- Dashboard ---------- */
.dash-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.6rem 1.75rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ic-8) 55%, transparent) 0%, transparent 55%),
              linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #0b1220) 100%);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .07); pointer-events: none; }
.dash-hero h1 { color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin: .1rem 0 .3rem; }
.dash-date { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.dash-summary { margin: 0; opacity: .92; font-size: .95rem; }
.dash-quick { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.dash-quick-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 10px; font-weight: 600; font-size: .84rem;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); text-decoration: none;
  transition: background .15s var(--ease), transform .15s var(--ease); }
.dash-quick-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); text-decoration: none; color: #fff; }
.dash-quick-btn.is-primary { background: #fff; color: var(--accent-strong); border-color: #fff; }
.dash-quick-btn.is-primary:hover { color: var(--accent-strong); }
.dash-quick-btn svg { width: 16px; height: 16px; }
[data-theme="dark"] .dash-quick-btn.is-primary { color: #0b1220; }

.dash-masonry { columns: 3 340px; column-gap: 1.25rem; }
.dash-masonry > .dash-widget { break-inside: avoid; margin: 0 0 1.25rem; display: block; width: 100%; }
.dash-masonry > .card + .card { margin-top: 0; }
.dash-widget { padding: 1.1rem 1.25rem; }
.dash-widget-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.dash-widget-head h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.dash-widget-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--w) 14%, transparent); color: var(--w); }
.dash-widget-ic svg { width: 16px; height: 16px; }
.dash-widget-body .card { border: 0; box-shadow: none; padding: 0; background: none; }
.dash-widget-body .empty, .dash-widget-body .empty-state { padding: 1rem; }
.dash-widget-body .list > li { padding: .5rem 0; }
.dash-widget-body .stat-value { font-size: 1.5rem; }

.dash-clear { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .85rem 1rem; border: 1px dashed var(--border-strong);
  border-radius: var(--radius); background: var(--surface); }
.dash-clear-label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .85rem; color: var(--success); margin-right: .35rem; }
.dash-clear-label svg { width: 16px; height: 16px; }
.dash-clear-item { font-size: .78rem; padding: .18rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
@media (max-width: 640px) { .dash-hero { padding: 1.25rem; } .dash-hero h1 { font-size: 1.45rem; } .dash-quick-btn span { display: none; } .dash-quick-btn { padding: .55rem; } }
/* Stat tiles that are also links: keep label / value / note stacked. */
.stat.launcher-item { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-decoration: none; min-width: 0; }
.stat.launcher-item:hover { border-color: var(--border-strong); background: var(--surface); text-decoration: none; }
.stat.launcher-item .stat-value { white-space: nowrap; font-size: 1.35rem; line-height: 1.2; }
.stat.launcher-item .stat-label { font-size: .7rem; }
.dash-widget-body .grid { gap: .75rem; }
.task-stage-table td:first-child a { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.task-stage-table td, .task-stage-table th { padding-left: .6rem; padding-right: .6rem; }
.task-stage-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [GROUP-D] portal/platform/auth pass additions */
.chip-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* [GROUP-P] Portal: stack data-tables into cards on narrow phones */
@media (max-width: 640px) {
  .data-table.stack thead { display: none; }
  .data-table.stack, .data-table.stack tbody, .data-table.stack tr { display: block; width: 100%; }
  .data-table.stack tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: .75rem; padding: .15rem .9rem; background: var(--surface); box-shadow: var(--shadow-sm, none); }
  .data-table.stack tr:last-child { margin-bottom: 0; }
  .data-table.stack td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px dashed var(--border); padding: .6rem 0; text-align: right; white-space: normal; }
  .data-table.stack td:last-child { border-bottom: 0; }
  .data-table.stack td:empty { display: none; }
  .data-table.stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
  .data-table.stack td[data-label=""]::before { display: none; }
  .data-table.stack td.num { text-align: right; }
  .data-table.stack tfoot, .data-table.stack tfoot tr, .data-table.stack tfoot td { display: block; width: 100%; }
}

/* [GROUP-S] Settings tab bar wraps instead of scrolling when many module sections are registered */
.tabs.tabs-wrap { flex-wrap: wrap; overflow-x: visible; row-gap: .25rem; }

/* [GROUP-F] Forms module: builder two-pane layout, field rows, public/portal questionnaire */
.fb-details-card summary { list-style: none; display: flex; align-items: baseline; gap: .6rem; }
.fb-details-card summary::-webkit-details-marker { display: none; }
.fb-details-card[open] summary { margin-bottom: 0; }
.fb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; margin-top: 1rem; }
.fb-settings-pane { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.fb-toolbox-card .toolbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-settings-card .empty { padding: 1.25rem .25rem; }
.fb-field-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.fb-field-row { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.fb-field-row:hover { border-color: var(--border-strong); }
.fb-field-row.active { border-color: var(--accent); background: var(--accent-soft); }
.fb-field-handle { color: var(--muted); cursor: grab; line-height: 1; }
.fb-field-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: .88rem; }
.fb-logic { border-top: 1px dashed var(--border); padding-top: .6rem; margin-top: .4rem; }
.fb-logic-row { display: flex; gap: .5rem; margin-top: .5rem; }
.fb-logic-row select, .fb-logic-row input { margin: 0; }
@media (max-width: 900px) { .fb-layout { grid-template-columns: 1fr; } .fb-settings-pane { position: static; } }

.fq-section-title { font-size: 1.05rem; margin: 1.5rem 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.fq-section-title:first-child { margin-top: .25rem; }
.fq-progress { height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 1.5rem; }
.fq-progress > span { display: block; height: 100%; background: var(--accent); }

/* [GROUP-CS] ClientServices/Mail/Pexa modernisation: chat bubbles, avatars, card lists */
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .85rem; flex: none; }
.chat-conv-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.chat-conv-item:hover { background: var(--surface-2); }
.chat-conv-item.active { background: var(--accent-soft); }
.chat-conv-item .cc-body { min-width: 0; flex: 1; }
.chat-conv-item .cc-body strong { display: block; font-size: .9rem; }
.chat-conv-item .cc-body .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chat-thread-head { display: flex; align-items: center; gap: .6rem; }
.chat-msg-row { display: flex; gap: .5rem; margin-bottom: .9rem; align-items: flex-end; }
.chat-msg-row.me { flex-direction: row-reverse; }
.chat-msg { margin-bottom: 0; max-width: 72%; padding: .55rem .8rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.chat-msg.me { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-msg.flagged { border-color: var(--danger); }
.chat-msg .chat-meta { display: flex; gap: .4rem; align-items: center; font-size: .74rem; opacity: .8; margin-bottom: .15rem; }
.chat-msg.me .chat-meta { color: rgba(255,255,255,.85); }
.chat-msg p { margin: 0; white-space: pre-wrap; }

.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card-list .card { margin: 0; }
.card-list .cl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; }
.card-list .cl-price { text-align: right; white-space: nowrap; font-weight: 700; }
.card-list .cl-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .82rem; color: var(--muted); margin: .4rem 0; }
.card-list .cl-actions { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }

.sla-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 650; background: var(--surface-3); color: var(--text-2); }
.sla-chip.breached { background: var(--danger-soft); color: var(--danger); }

.mail-row { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.mail-row:hover { background: var(--surface-2); }
.mail-row .mr-body { min-width: 0; flex: 1; }
.mail-row .mr-from { font-weight: 600; }
.mail-row.mail-unread .mr-from, .mail-row.mail-unread .mr-subject { font-weight: 700; }
.mail-row .mr-subject { color: var(--text-2); }
.mail-row .mr-date { white-space: nowrap; font-size: .8rem; color: var(--muted); }
.attach-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; text-decoration: none; color: inherit; }

/* ---------- Checklist task rows (matter Tasks tab) ---------- */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-row { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .25rem; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-2); }
.task-check-form { margin: 0; display: flex; }
.task-check { width: 20px; height: 20px; margin-top: .1rem; flex-shrink: 0; cursor: pointer; accent-color: var(--success); }
.task-check:disabled { cursor: not-allowed; opacity: .55; }
.task-main { flex: 1; min-width: 0; }
.task-title-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.task-title { color: var(--text); font-weight: 600; font-size: .92rem; text-decoration: none; }
.task-title:hover { color: var(--accent-strong); text-decoration: underline; }
.task-row.is-done .task-title, .task-row.is-na .task-title { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.task-row.is-na { opacity: .75; }
.task-row.is-blocked .task-title { color: var(--text-2); }
.task-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .2rem; font-size: .78rem; color: var(--muted); }
.task-due { display: inline-flex; align-items: center; gap: .3rem; }
.task-due svg { width: 13px; height: 13px; }
.task-due.is-overdue { color: var(--danger); font-weight: 600; }
.task-due.is-soon { color: var(--warning); font-weight: 600; }
.task-assignee { display: inline-flex; align-items: center; gap: .35rem; }
.task-avatar { width: 20px; height: 20px; font-size: .6rem; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.task-note { font-style: italic; }
.task-menu { flex-shrink: 0; }
.task-menu > summary { list-style: none; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.task-menu > summary::-webkit-details-marker { display: none; }
.task-menu .dropdown-menu { min-width: 240px; }
.task-menu hr { margin: .4rem 0; }
.task-dep-form { padding: .2rem .25rem .1rem; display: flex; flex-direction: column; gap: .45rem; }
.task-dep-form select { width: 100%; font-size: .82rem; }
.task-dep-form .btn { align-self: flex-start; }
@media (max-width: 640px) { .task-meta { gap: .5rem; } .task-row { padding: .8rem .25rem; } }

/* [POPUP+CARDS] Responsive dialogs and entity cards -------------------------------- */
dialog.modal { margin: auto; }
.modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.modal-header [data-modal-close] { border: 0; background: transparent; color: var(--muted); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: .1rem .35rem; border-radius: var(--radius-sm); }
.modal-header [data-modal-close]:hover { background: var(--surface-2); color: var(--text); }
.modal-body > .form-grid { margin: 0; }
.modal-hint { margin: .85rem 0 0; font-size: .84rem; color: var(--muted); }
.modal-footer .btn-ghost { margin-right: auto; }
.field-check { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-size: .88rem; }
.field-check input[type=checkbox] { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }

/* Phones: dialogs become a full-width bottom sheet that can never overflow the viewport. */
@media (max-width: 560px) {
  dialog.modal, dialog.modal-lg, dialog.modal-xl {
    width: 100%; max-width: 100%; height: auto; max-height: 92dvh;
    margin: auto auto 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-inner { max-height: 92dvh; }
  .modal-body { padding: 1rem; }
  .modal-body .form-grid { grid-template-columns: 1fr; }
  .modal-body .form-grid .span-2 { grid-column: auto; }
  .modal-footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}

/* Entity cards (clients list) — same family as the matter cards. */
.entity-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.entity-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .85rem; align-items: start;
  padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.entity-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--accent); text-decoration: none; }
.entity-card-avatar { grid-row: span 2; }
.entity-card-name { font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.entity-card-sub { font-size: .84rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-meta { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  padding-top: .7rem; margin-top: .3rem; border-top: 1px dashed var(--border); font-size: .8rem; color: var(--muted); }

/* Avatars that may carry a photo. */
.avatar-photo { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar-photo > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-upload { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.avatar-upload .avatar-preview { width: 64px; height: 64px; border-radius: 18px; flex: 0 0 auto; display: grid; place-items: center;
  overflow: hidden; background: var(--accent-soft); color: var(--accent-strong); font: 800 1.2rem/1 var(--font-display); }
.avatar-upload .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-fields { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }

/* [REVIEW-FIX] Narrow screens: never crush table cells or checkbox labels ---------------- */
/* "anywhere" lets a cell's minimum width collapse to one character, so tables squeezed their
   columns letter-by-letter instead of scrolling inside .table-wrap. "break-word" keeps whole
   words as the minimum width while still breaking a genuinely unbreakable long string. */
td, .data-table td { overflow-wrap: break-word; }
.data-table td { min-width: 3.5rem; }
.data-table td.num, .data-table th.num { white-space: nowrap; }
/* Checkboxes inside filter rows keep their natural size, and their label stays on one line. */
.filters label:has(> input[type=checkbox]), .filters label:has(> input[type=radio]) {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; flex: 0 0 auto; }
.filters label > input[type=checkbox], .filters label > input[type=radio] { flex: 0 0 auto; width: 16px; min-width: 16px; }
/* Phones zoom the page into any field whose text is under 16px; keep fields at 16px there. */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px; }
}
.chat-msg .chat-meta [data-report] { margin-left: auto; padding: .1rem .45rem; min-height: 0; font-size: .72rem; }
/* A .field whose control is a checkbox/radio is an inline "[x] Label" row, not a stacked field:
   in the column layout the box was stretched and centred on a line of its own. */
.field:has(> input[type=checkbox]), .field:has(> input[type=radio]) {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: .55rem;
  font-size: .9rem; color: var(--text); align-self: end; min-height: 38px; }
.field > input[type=checkbox], .field > input[type=radio] {
  order: -1; flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; margin: 0; }
.field:has(> input[type=checkbox]) > span, .field:has(> input[type=radio]) > span {
  font-size: .9rem; font-weight: 500; color: var(--text); }
/* Help centre: title above its description (side by side squeezed titles into narrow stacks). */
.help-list > li { display: block; padding: .7rem 0; }
.help-list > li p { margin: .2rem 0 0; }
/* Phones: give text cells a readable minimum so wide tables scroll inside .table-wrap instead of
   stacking every word on its own line. Card-style tables (.stack) lay out differently and are excluded. */
@media (max-width: 760px) {
  .table-wrap > .data-table:not(.stack) td:not(.num):not(:empty) { min-width: 7.5rem; }
  .table-wrap > .data-table:not(.stack) td:has(> input[type=checkbox]:only-child) { min-width: 0; }
}
/* Compliance checklist "add item" row: wraps cleanly instead of overflowing the card on phones. */
.cl-add-item { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.cl-add-item > input[name=title] { flex: 1 1 220px; min-width: 0; }
.cl-add-item > input[type=number] { flex: 0 1 130px; min-width: 0; }
.cl-add-item > label { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; white-space: nowrap; }
.cl-add-item > label > input { width: 16px; min-width: 16px; margin: 0; }
/* Form builder on narrow screens: panes may shrink below their content's width (grid items default
   to min-width:auto, which pushed both panes ~450px past a phone screen); section rows wrap. */
@media (max-width: 900px) {
  .fb-layout { grid-template-columns: minmax(0, 1fr); }
  .fb-layout > * { min-width: 0; }
  .fb-fields-pane .card-header { flex-wrap: wrap; gap: .5rem; }
  .fb-fields-pane .card-header > div:first-child { flex: 1 1 180px; min-width: 0; }
}
/* A KPI value that is text (e.g. a date range) may wrap onto two lines rather than overflow its tile. */
.kpi-value { overflow-wrap: break-word; }
.kpi { min-width: 0; }
@media (max-width: 760px) { .kpi-value { white-space: normal; } }

/* [SPACING] A submit button directly after a field in a simple stacked form sat flush against it
   (e.g. "Record disclosure" under Method). Row-layout forms (filters, inline add rows) are excluded. */
form:not(.filters):not(.cl-add-item):not(.inline-form):not(.task-check-form):not([style*="flex"]):not([style*="inline"]) > :is(label, .field, .field-wrap, select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .form-grid, .check-list, .rte-editor, .doc-drop-zone)
  + :is(button, .btn, input[type=submit], .form-actions, .btn-row) { margin-top: .85rem; }
/* Same when the button sits in a card straight after a block of fields. */
.card > :is(label, .field) + :is(button, .btn) { margin-top: .85rem; }
/* A "[x] Label" checkbox directly inside a simple form gets its own line (it used to sit inline
   and drag the submit button up beside it). */
form:not(.filters):not(.cl-add-item) > label:has(> input[type=checkbox]:first-child),
form:not(.filters):not(.cl-add-item) > label:has(> input[type=radio]:first-child) {
  display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .88rem; }
form > label:has(> input[type=checkbox]:first-child) > input { width: 16px; min-width: 16px; margin: 0; }
/* Row-layout forms (message composer and similar) keep their button level with the input. */
.chat-compose > button, form[style*="flex"] > button, form[style*="flex"] > .btn { margin-top: 0; }

/* [QUICK] Floating quick actions — schedule a meeting, chat, assistant (QuickLayer + quick.js) ------------ */
.qa-stack { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; display: flex; flex-direction: column; gap: .7rem; }
.qa-fab { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  color: #fff; background: var(--qa, var(--accent)); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--qa, var(--accent)) 90%, transparent), 0 2px 6px rgba(15, 23, 42, .18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.qa-fab:hover { transform: translateY(-2px) scale(1.04); }
.qa-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--qa, var(--accent)) 45%, transparent); outline-offset: 3px; }
.qa-fab svg { width: 23px; height: 23px; }
.qa-fab[aria-expanded="true"] { transform: scale(.94); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45); }
.qa-meet { --qa: #0d9488; }
.qa-chat { --qa: #d97706; }
.qa-ai { --qa: #ea580c; }
.qa-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.qa-badge[hidden] { display: none; }

.qa-panel { position: fixed; z-index: 70; right: 1.4rem; bottom: 1.4rem; width: min(400px, calc(100vw - 2rem)); height: min(620px, calc(100vh - 6rem));
  display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: qa-in .18s var(--ease); }
.qa-panel[hidden] { display: none; }
@keyframes qa-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
body.qa-panel-open .qa-stack { right: calc(1.4rem + min(400px, calc(100vw - 2rem)) + .8rem); }
.qa-head { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.qa-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-head-actions { display: flex; gap: .15rem; }
.qa-icon-btn { border: 0; background: transparent; color: var(--text-2); width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1; text-decoration: none; }
.qa-icon-btn:hover { background: var(--surface-3, var(--border)); color: var(--text); text-decoration: none; }
.qa-icon-btn[hidden] { display: none; }
.qa-body { flex: 1; overflow-y: auto; padding: .75rem; }
.qa-body[hidden], .qa-compose[hidden] { display: none; }
.qa-empty, .qa-hint { color: var(--muted); font-size: .86rem; margin: .5rem .25rem; }
.qa-conv { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: .7rem .75rem; border-radius: var(--radius-sm); }
.qa-conv:hover { background: var(--surface-2); }
.qa-conv-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.qa-conv-last { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-dir, .qa-checks { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; max-height: 220px; overflow-y: auto; }
.qa-checks { max-height: 140px; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.qa-check { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem; font-size: .9rem; cursor: pointer; }
.qa-check input { width: 16px; min-width: 16px; margin: 0; }
.qa-thread { display: flex; flex-direction: column; gap: .55rem; }
.qa-msg { max-width: 88%; padding: .55rem .75rem; border-radius: 14px; font-size: .9rem; }
.qa-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.qa-them, .qa-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.qa-me { align-self: flex-end; background: var(--accent); color: #fff; }
.qa-author { display: block; font-size: .72rem; font-weight: 700; color: var(--text-2); margin-bottom: .15rem; }
.qa-time { display: block; font-size: .68rem; opacity: .7; margin-top: .2rem; }
.qa-bot { max-width: 100%; }
.qa-bot .chips { margin-top: .6rem; }
.qa-bot .table-wrap { margin-top: .5rem; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.qa-table { font-size: .78rem; }
.qa-table th, .qa-table td { padding: .35rem .5rem; }
.qa-links { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.qa-links li { display: flex; flex-direction: column; padding: .45rem .55rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.qa-links a { font-weight: 600; }
.qa-links span { font-size: .78rem; color: var(--muted); }
.qa-typing { color: var(--muted); }
.qa-compose { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border); background: var(--surface); }
.qa-compose input { flex: 1; min-width: 0; }
.qa-compose > button { margin-top: 0; }
@media (max-width: 760px) {
  .qa-stack { right: 1rem; bottom: 1rem; gap: .6rem; }
  .qa-fab { width: 48px; height: 48px; }
  .qa-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  body.qa-panel-open .qa-stack { display: none; }
}
@media print { .qa-stack, .qa-panel { display: none !important; } }
/* Keep page content clear of the buttons: the last card/table can scroll above them. */
.content { padding-bottom: 5.5rem; }
@media print { .content { padding-bottom: 0; } }

/* [MEETING VIDEO] video link picker and invite option in every scheduling form */
.video-field .seg{margin:.35rem 0 .5rem;flex-wrap:wrap}
.video-field .seg button{border:0;background:transparent;color:inherit;font:inherit;padding:.4rem .8rem;border-radius:inherit;cursor:pointer}
.video-field .seg button.active{background:var(--surface);box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08));font-weight:600}
.video-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.video-row input{flex:1 1 220px;min-width:0}
.video-status{margin:.35rem 0 0;min-height:1em}
.video-status.video-error{color:var(--danger, #b91c1c)}
.invite-field .qa-check{display:flex;gap:.5rem;align-items:flex-start;font-weight:400}
.invite-field .qa-check input{margin-top:.2rem;flex:none}

/* [WORKSPACE] everyday menu, shortcuts, All tools, practice profile */
.sidebar { display: flex; flex-direction: column; }
.sidebar .nav { flex: 1 0 auto; }
.nav-simple .nav-link { font-size: .95rem; padding: .48rem .65rem; }
.nav-heading-static { cursor: default; margin-top: .6rem; }
.nav-hint { font-size: .8rem; color: var(--muted); margin: .1rem .6rem .5rem; line-height: 1.4; }
.nav-foot { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .5rem; }
.nav-mode { margin: .35rem .6rem 0; }
.nav-mode .linklike { font-size: .8rem; color: var(--muted); padding: 0; }
.nav-mode .linklike:hover { color: var(--accent); }
.launcher-search-card input { width: 100%; font-size: 1rem; padding: .7rem .85rem; }
.launcher-item { display: flex; gap: .5rem; align-items: flex-start; padding: 0; }
.launcher-link { display: flex; gap: .7rem; align-items: flex-start; flex: 1; min-width: 0; padding: .85rem 0 .85rem 1rem; color: var(--text); }
.launcher-link:hover { text-decoration: none; }
.launcher-link > svg { flex: none; margin-top: .1rem; }
.launcher-link > span { min-width: 0; }
.launcher-item form { margin: 0; }
.launcher-pin { border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; padding: .8rem .85rem; cursor: pointer; border-radius: var(--radius-sm); }
.launcher-pin:hover { color: #d97706; }
.launcher-pin.is-pinned, .launcher-pin.is-core { color: #d97706; }
.launcher-pin.is-core { cursor: default; opacity: .55; }
.launcher-item[hidden], .launcher-section[hidden] { display: none; }
.choice-group { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.choice-group legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.choice-card { display: flex; gap: .65rem; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; cursor: pointer; background: var(--surface); font-weight: 400; }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice-card input { margin-top: .25rem; flex: none; }
.choice-card strong { display: block; }
.choice-card small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; margin-top: .15rem; }
.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; }

/* [PAY] public pay page */
.pay-card { max-width: 640px; margin: 32px auto; width: 100%; }
.pay-firm { margin: 0; font-size: 1.3rem; }
.pay-due { display: flex; justify-content: space-between; align-items: baseline; background: var(--surface-2); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1rem 0; }
.pay-due strong { font-size: 1.6rem; }
.pay-items > summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.pay-discount-row td { color: var(--success, #047857); }
.pay-pending { margin: 1rem 0; }
.pay-pending ul { margin: .35rem 0; padding-left: 1.1rem; }
.pay-extras { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.pay-credit { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px dashed var(--accent); border-radius: var(--radius); padding: .7rem .9rem; margin: 0; }
.pay-voucher > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pay-voucher form { margin-top: .5rem; }
.pay-h { font-size: 1.05rem; margin: 1.25rem 0 .6rem; }
.pay-methods { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pay-method { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: .5rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.pay-method.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pay-panel form { margin: 0 0 .6rem; }
.pay-go { width: 100%; justify-content: center; padding: .8rem 1rem; font-size: 1rem; }
.pay-amount { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.pay-radio { display: flex; gap: .5rem; align-items: center; font-weight: 400; cursor: pointer; }
.pay-money { display: flex; align-items: center; gap: .35rem; }
.pay-money input { flex: 1; min-width: 0; }
.pay-bank { display: grid; gap: .45rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .75rem; }
.pay-bank > div { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pay-bank span { color: var(--muted); min-width: 120px; font-size: .88rem; }
.pay-offline > summary { list-style: none; width: 100%; justify-content: center; }
.pay-offline > summary::-webkit-details-marker { display: none; }
.pay-offline[open] > summary { display: none; }
.pay-offline form { margin-top: .5rem; }

/* [AGENT] assistant chat: steps, action cards, typing dots, history */
#qa-panel-ai.qa-panel { width: min(460px, 100vw); }
.qa-compose-ai { align-items: flex-end; }
.qa-compose-ai textarea { flex: 1; resize: none; min-height: 2.4rem; max-height: 160px; font: inherit; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.qa-bot ul, .qa-bot ol { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.qa-bot li { margin: .15rem 0; }
.qa-step { font-size: .8rem; color: var(--muted); padding: .2rem 0; }
.qa-step a { margin-left: .35rem; }
.qa-step-ok { color: var(--success, #047857); font-weight: 600; }
.qa-step-bad { color: var(--danger, #b91c1c); }
.qa-step-off { text-decoration: line-through; }
.qa-action { border: 1px solid var(--accent); border-radius: var(--radius); padding: .65rem .75rem; margin: .4rem 0; background: var(--surface); }
.qa-action-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.qa-action-what { font-weight: 600; margin: .25rem 0 .55rem; }
.qa-action-btns { display: flex; gap: .5rem; }
.qa-typing { display: flex; gap: .3rem; align-items: center; min-height: 1.2rem; }
.qa-typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); animation: qa-dot 1s infinite ease-in-out; }
.qa-typing span:nth-child(2) { animation-delay: .15s; } .qa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes qa-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .qa-typing span { animation: none; } }
.qa-hist-box { max-height: 45%; overflow-y: auto; border-bottom: 1px solid var(--border); }
.qa-hist { list-style: none; margin: 0; padding: 0; }
.qa-hist button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: .5rem .6rem; border-radius: 6px; cursor: pointer; font: inherit; }
.qa-hist button:hover { background: var(--surface-2); }
.qa-hist span { font-size: .75rem; color: var(--muted); }

/* Calendar subscription */
.feed-row { display: flex; flex-direction: column; gap: .4rem; padding: .75rem 0; border-top: 1px solid var(--border); }
.feed-row .pay-link-row { display: flex; gap: .5rem; }
.feed-row .pay-link-row input { flex: 1; min-width: 0; font-size: .8rem; }
.feed-help { margin-top: .75rem; }
.feed-help summary { cursor: pointer; font-weight: 600; }
.feed-help ul { padding-left: 1.1rem; }

/* [SIGN] public signing page */
.sign-card { max-width: 680px; margin: 32px auto; width: 100%; }
.sign-title { margin: .5rem 0 0; font-size: 1.25rem; }
.sign-msg { background: var(--surface-2); border-radius: var(--radius); padding: .75rem 1rem; }
.sign-form { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.sign-mode { margin: .35rem 0 .5rem; }
.sign-mode button { border: 0; background: transparent; font: inherit; padding: .4rem .9rem; border-radius: inherit; cursor: pointer; color: inherit; }
.sign-mode button.active { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sign-pad { width: 100%; height: auto; aspect-ratio: 10 / 3; max-width: 100%; border: 2px dashed var(--border); border-radius: var(--radius); background: #fff; touch-action: none; cursor: crosshair; }
.sign-pad-actions { display: flex; gap: .75rem; align-items: center; margin-top: .35rem; }
.sign-error { color: var(--danger, #b91c1c); font-weight: 600; }
.sign-consent { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.sign-consent input { margin-top: .25rem; flex: none; }
.sign-decline { margin-top: 1rem; }
.sign-decline summary { cursor: pointer; color: var(--muted); }
.sign-status { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.sign-status li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.setup-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.setup-steps .pay-link-row { display: flex; gap: .5rem; margin: .35rem 0; }
.setup-steps .pay-link-row input { flex: 1; min-width: 0; font-size: .82rem; }
.callout .pay-link-row { display: flex; gap: .5rem; margin-top: .35rem; }
.callout .pay-link-row input { flex: 1; min-width: 0; }