/* Work Permit e-Sign — design system
   Semantic, brand-driven CSS variables. Colors are injected per-request from
   branding config into :root (see layout head). Mobile-first, responsive. */

:root {
    --c-primary: #1d4ed8;
    --c-primary-ink: #ffffff;
    --c-accent: #0891b2;
    --c-bg: var(--c-surface-2);
    --c-surface: #ffffff;
    --c-text: #0f172a;
    --c-muted: #64748b;
    --c-border: #e2e8f0;
    --c-surface-2: #f8fafc;   /* subtle raised surface: table headers, row hovers, tracks, chips */
    --c-input-bg: #ffffff;    /* form-control background */

    /* semantic status colors (permit lifecycle) */
    --c-success: #15803d;
    --c-warning: #b45309;
    --c-danger: #b91c1c;
    --c-info: #0369a1;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
    --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .28);
    --space: 16px;
    --sidebar-w: 264px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
img { max-width: 100%; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: var(--space); }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.grid { display: grid; gap: 18px; }
.muted { color: var(--c-muted); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; font-size: 15px;
    padding: 11px 18px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
    min-height: 44px; /* touch target */
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: var(--c-primary-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { text-decoration: none; filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-surface-2); text-decoration: none; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); text-decoration: none; }
.btn-sm { padding: 7px 12px; font-size: 13px; min-height: 36px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 22px;
}
.card-pad-lg { padding: 30px; }
.card h2 { font-size: 18px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.input, input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--c-text);
    padding: 11px 13px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-input-bg); transition: border-color .15s, box-shadow .15s; min-height: 44px;
}
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #94a3b8; }
/* Consistent custom chevron for selects across browsers. */
select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--c-focus, var(--c-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus, var(--c-primary)) 25%, transparent);
}
/* Keyboard-only focus ring for interactive controls (accessibility). */
.btn:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--c-focus, var(--c-primary)); outline-offset: 2px; border-radius: var(--radius-sm);
}
input[type=color] { min-height: 44px; padding: 4px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--c-primary); }
.field + .field { margin-top: 16px; }
/* A card fills its page column; a CONTROL inside it does not. 1500px of text input is not
   more usable than 820 -- the CARD is what lines up with the rest of the page, the reading
   column lives inside it. This is a MAXIMUM, not a width, so a field already sitting in a
   narrow column or one side of a two-column grid is untouched. Mirrors the rule
   signmydoc.io already applies platform-wide, so the two code lines agree. */
.card .field > input,
.card .field > select,
.card .field > textarea,
.card .field > .input { max-width: 820px; }
.field-hint { font-size: 12.5px; color: var(--c-muted); margin-top: 5px; font-weight: 400; }
.form-error { color: var(--c-danger); font-size: 14px; font-weight: 600; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; }
.checkbox-row label { font-weight: 500; margin: 0; }

/* ---------- Badges / status ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
    background: #e8f2ff; color: #003d8c; border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge-success { background: color-mix(in srgb, var(--c-success) 12%, var(--c-surface)); color: var(--c-success); }
.badge-warning { background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface)); color: var(--c-warning); }
.badge-danger  { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface));  color: var(--c-danger); }
.badge-info    { background: color-mix(in srgb, var(--c-info) 12%, var(--c-surface));    color: var(--c-info); }
.badge-muted   { background: var(--c-surface-2); color: var(--c-muted); }

/* ---------- Alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14.5px; }
.alert-success { background: color-mix(in srgb, var(--c-success) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-success) 25%, var(--c-surface)); color: #14532d; }
.alert-danger  { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface));  border-color: color-mix(in srgb, var(--c-danger) 25%, var(--c-surface));  color: #7f1d1d; }
.alert-info    { background: color-mix(in srgb, var(--c-info) 8%, var(--c-surface));    border-color: color-mix(in srgb, var(--c-info) 25%, var(--c-surface));    color: #0c4a6e; }
.alert-warning { background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-warning) 30%, var(--c-surface)); color: #78350f; }

/* ---------- Decline reason ----------
   The note a signatory leaves when they decline, shown under their row.

   It was written inline with `background:#fef2f2`, a fixed light pink. The tint never moved
   with the theme while the text did, so in dark mode the reason itself was near-white on
   near-white — present, selectable, and invisible. The heading survived only because it set
   its own colour.

   Tinted from --c-surface the way every .alert above is, so the SAME declaration serves both
   themes: --c-surface flips to #111a2e and --c-danger to #f87171, which is also why this needs
   no bespoke dark override (the alerts need one only because they hardcode their text colour).
   Every colour here is a token, so a future palette change carries. */
.decline-note {
  margin-top: 6px;
  padding: 8px 10px;
  max-width: 540px;
  border-radius: var(--radius-sm);
  /* inline-start, not left: identical in LTR, and correct if this ever renders RTL. */
  border-inline-start: 3px solid var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface));
  color: var(--c-text);
}
.decline-note-h    { display: block; color: var(--c-danger); font-weight: 600; }
.decline-note-body { white-space: pre-wrap; margin-top: 2px; }
.decline-note-at   { margin-top: 3px; color: var(--c-muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-border); }
table.data { width: 100%; border-collapse: collapse; background: var(--c-surface); font-size: 14.5px; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--c-surface-2); }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.stat {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: 13px; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat.accent-primary { border-left: 4px solid var(--c-primary); }
.stat.accent-success { border-left: 4px solid var(--c-success); }
.stat.accent-warning { border-left: 4px solid var(--c-warning); }
.stat.accent-danger  { border-left: 4px solid var(--c-danger); }
.stat.accent-info    { border-left: 4px solid var(--c-info); }

/* ---------- App shell (sidebar) ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
    background: #0f172a; color: #cbd5e1; padding: calc(20px + env(safe-area-inset-top)) 14px 20px; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; color: #fff; font-weight: 800; font-size: 17px; }
.sidebar .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--c-primary); display: grid; place-items: center; color: #fff; font-weight: 800; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar a.nav-link {
    display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px;
    color: #cbd5e1; font-weight: 600; font-size: 14.5px;
}
.sidebar a.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar a.nav-link.active { background: var(--c-primary); color: #fff; }
.sidebar a.nav-link .ic { width: 20px; height: 20px; display: inline-grid; place-items: center; }
.sidebar .spacer { flex: 1; }
.sidebar .userbox { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; margin-top: 8px; }
.sidebar .userbox .name { color: #fff; font-weight: 700; font-size: 14px; }
.sidebar .userbox .role { color: #94a3b8; font-size: 12px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    /* Safe-area top padding so the hamburger clears the status bar/notch when
       the platform runs as an installed PWA (viewport-fit=cover). */
    padding: calc(14px + env(safe-area-inset-top)) 24px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; margin: 0; }
/* A topbar with no title and no actions has nothing to show on a desktop browser —
   the hamburger is hidden above 900px and the back button only appears in the
   installed app — so it would paint a blank sticky band above the page heading.
   (display-mode: browser) deliberately excludes the installed PWA: in standalone the
   bar still holds the back button and the notch-clearing safe-area padding, and a
   browser too old to support the feature simply keeps today's behaviour. */
@media (min-width: 901px) and (display-mode: browser) {
    .topbar.is-empty { display: none; }
}
.topbar-back { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; color: var(--c-text); flex: 0 0 auto; }
.topbar-back[hidden] { display: none; }
.topbar-back:active { background: var(--c-surface-2); }
.content { padding: 26px 24px 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; margin: 0; }

/* Mobile bottom nav + off-canvas scrim (hidden on desktop; shown on mobile when open) */
.mobile-nav { display: none; }
.hamburger { display: none; }
.scrim { display: none; }

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .sidebar.open {
        display: flex; position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; z-index: 60;
        box-shadow: var(--shadow-lg);
    }
    .scrim { display: none; }
    .scrim.open { display: block; position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 55; }
    .hamburger { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; }
    .content { padding: 18px 16px 90px; }
    .mobile-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        background: var(--c-surface); border-top: 1px solid var(--c-border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        justify-content: space-around;
    }
    .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--c-muted); font-weight: 600; padding: 6px 10px; border-radius: 10px; flex: 1; }
    .mobile-nav a.active { color: var(--c-primary); }
}

/* ---------- Auth / public ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
    background: linear-gradient(150deg, var(--c-primary), color-mix(in srgb, var(--c-accent) 70%, var(--c-primary)));
    color: #fff; padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.auth-hero h1 { color: #fff; font-size: 34px; max-width: 460px; }
.auth-hero p { color: rgba(255,255,255,.9); max-width: 440px; font-size: 16px; }
.auth-hero ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; max-width: 440px; }
.auth-hero li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.95); font-size: 15px; }
.auth-hero li .tick { flex: 0 0 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 13px; }
.auth-panel { display: grid; place-items: center; padding: 40px 24px; background: var(--c-bg); }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; margin-bottom: 26px; }
.auth-logo .logo { width: 40px; height: 40px; border-radius: 11px; background: var(--c-primary); display: grid; place-items: center; color: #fff; }
@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
}

/* ---------- Public marketing ---------- */
/* Safe-area top padding so the public header clears the status bar/notch in PWA. */
.pub-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding-top: env(safe-area-inset-top); }
.pub-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.pub-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.pub-brand .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--c-primary); display: grid; place-items: center; color: #fff; }
.hero {
    padding: 80px 0 70px; text-align: center;
    background: radial-gradient(1200px 400px at 50% -10%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent);
}
.hero h1 { font-size: clamp(30px, 5vw, 48px); max-width: 760px; margin: 0 auto .4em; }
.hero p { font-size: 18px; color: var(--c-muted); max-width: 620px; margin: 0 auto 28px; }
.hero .cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 20px 0 80px; }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface)); color: var(--c-primary); display: grid; place-items: center; margin-bottom: 12px; }
.feature h3 { font-size: 17px; }
.feature p { font-size: 14.5px; color: var(--c-muted); margin: 0; }
.pub-footer { border-top: 1px solid var(--c-border); padding: 28px 0; color: var(--c-muted); font-size: 14px; text-align: center; }

/* ---------- Verify result ---------- */
.verify-card { max-width: 560px; margin: 40px auto; }
.verify-status { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: var(--radius); color: #fff; }
.verify-status .vs-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 26px; flex: 0 0 auto; }
.verify-status h2 { color: #fff; margin: 0; font-size: 22px; }
.vs-valid { background: var(--c-success); }
.vs-void, .vs-invalid { background: var(--c-danger); }
.vs-expired, .vs-superseded { background: var(--c-warning); }
.vs-notfound { background: var(--c-muted); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14.5px; }
.kv dt { color: var(--c-muted); font-weight: 600; }
.kv dd { margin: 0; word-break: break-word; }

/* ---------- Utilities ---------- */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-sm { gap: 8px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--c-border); margin: 20px 0; border: 0; }

/* ============================================================
   Redesign — Phase 1: light sidebar shell + indigo UI accent
   The --ui* tokens are independent of the branding-injected
   --c-primary (which still drives signed documents & emails), so
   the app chrome adopts the reference indigo look without changing
   the brand colour. Appended so it overrides earlier rules by cascade.
   ============================================================ */
:root{
  --ui:#006eff; --ui-2:#006eff; --ui-soft:#e8f2ff;
  --side-bg:#ffffff; --side-ink:#3d4453; --side-hover:#f4f5fb; --side-line:#ecedf5;
}
/* Sidebar → light */
.sidebar{ background:var(--side-bg); color:var(--side-ink); border-right:1px solid var(--side-line); scrollbar-color:#d5d8e4 transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:#d5d8e4; }
.sidebar .brand{ color:var(--c-text); }
.sidebar .brand .logo{ background:linear-gradient(135deg,var(--ui),var(--ui-2)); box-shadow:0 6px 14px -5px rgba(0,110,255,.6); }
.sidebar a.nav-link{ color:var(--side-ink); font-weight:600; }
.sidebar a.nav-link:hover{ background:var(--side-hover); color:var(--c-text); }
.sidebar a.nav-link.active{ background:var(--ui-soft); color:var(--ui); }
.sidebar .userbox{ border-top:1px solid var(--side-line); }
.sidebar .userbox .name{ color:var(--c-text); }
.sidebar .userbox .role{ color:#8b90a0; }
/* New-document CTA (rendered above the nav) */
.new-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 12px; padding:11px 12px;
  border-radius:11px; background:linear-gradient(135deg,var(--ui),var(--ui-2)); color:#fff; font-weight:700; font-size:14.5px;
  text-decoration:none; box-shadow:0 9px 20px -9px rgba(0,110,255,.75); }
.new-cta:hover{ filter:brightness(1.05); text-decoration:none; color:#fff; }
.new-cta .ic{ width:18px; height:18px; display:inline-grid; place-items:center; }
.new-cta .ic svg{ width:16px; height:16px; }
/* Primary action → indigo gradient (product-wide chrome accent) */
.btn-primary{ background:linear-gradient(135deg,var(--ui),var(--ui-2)); box-shadow:0 8px 18px -9px rgba(0,110,255,.7); }
.btn-primary:hover{ filter:brightness(1.06); }
/* Mobile bottom-nav active → indigo */
.mobile-nav a.active{ color:var(--ui); }

/* ============================================================
   Redesign — Phase 2: dashboard (icon-chip KPI cards + drop-zone)
   ============================================================ */
.kpi{ border-radius:14px; padding:16px; }
.kpi-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:11px; }
.kpi-ic svg{ width:18px; height:18px; }
.kpi-lab{ order:0; font-size:12px; font-weight:600; color:var(--c-muted); margin:0; }
.kpi-val{ font-size:27px; font-weight:800; letter-spacing:-.03em; margin-top:1px; }
.kpi-ic.tint-i{ background:var(--ui-soft); color:var(--ui); }
.kpi-ic.tint-b{ background:#e8f0ff; color:#2563eb; }
.kpi-ic.tint-g{ background:#e7f6ec; color:#15803d; }
.kpi-ic.tint-v{ background:#f3ecfe; color:#7c3aed; }
.kpi-ic.tint-a{ background:#fdf1e3; color:#b45309; }
.kpi-ic.tint-r{ background:#fdeaea; color:#dc2626; }
.kpi-alert .kpi-ic.tint-r{ background:#fdeaea; }
/* Drop-zone hero */
.dash-hero{ margin-bottom:18px; }
.dz{ display:flex; align-items:center; gap:18px; border:2px dashed var(--c-border); border-radius:16px;
  background:linear-gradient(180deg,#fbfdff,#f2f8ff); padding:18px 22px; text-decoration:none; color:inherit; }
.dz:hover{ border-color:color-mix(in srgb,var(--ui) 40%,var(--c-border)); background:linear-gradient(180deg,#fbfdff,#eaf4ff); text-decoration:none; }
.dz-ic{ width:52px; height:52px; border-radius:14px; background:var(--ui-soft); color:var(--ui); display:grid; place-items:center; flex:0 0 auto; }
.dz-ic svg{ width:26px; height:26px; }
.dz-txt{ flex:1; min-width:0; }
.dz-txt .t{ display:block; font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--c-text); }
.dz-txt .s{ display:block; color:var(--c-muted); font-size:13.5px; margin-top:2px; }
@media(max-width:600px){ .dz{ flex-direction:column; text-align:center; } }

/* ============================================================
   Redesign — Phase 3: list pages (status/filter chips + empty states)
   ============================================================ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fchip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:var(--c-surface);
  border:1px solid var(--c-border); color:var(--c-text); font-size:13px; font-weight:600; text-decoration:none; line-height:1; white-space:nowrap; }
.fchip:hover{ border-color:color-mix(in srgb,var(--ui) 40%,var(--c-border)); color:var(--ui); text-decoration:none; }
.fchip.is-on{ background:var(--ui-soft); border-color:color-mix(in srgb,var(--ui) 45%,transparent); color:var(--ui); }
/* Polished empty state — extends the base .empty (also used by contacts) */
.empty-lg{ padding:54px 20px; }
.empty-ic.tint-i{ border-radius:16px; background:var(--ui-soft); color:var(--ui); }
.empty-title{ font-size:16px; font-weight:700; color:var(--c-text); letter-spacing:-.01em; margin:2px 0 5px; }
.empty p{ max-width:420px; margin:0 auto; }
.empty .btn{ margin-top:14px; }
.tag-or { display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: 13px; margin: 18px 0; }
.tag-or::before, .tag-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* ---------- Layout helpers ---------- */
.split-2 { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 20px; align-items: start; }
.stack-lg > * + * { margin-top: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Collapse 2-column form/content grids on phones. Inline grid-template-columns
   needs !important to be overridden; the substring selectors catch the inline
   ones used across the wizard, SMTP, users, permit-types and Microsoft config. */
@media (max-width: 760px) {
  .row2 { grid-template-columns: 1fr; }
  /* Robust: any fractional multi-column inline grid contains "fr 1fr"
     (1fr 1fr, 2fr 1fr, 1.6fr 1fr, 1.5fr 1fr, 1.4fr 1fr, 1fr 1fr 1fr, …) → single column. */
  [style*="fr 1fr"],
  [style*="grid-template-columns:1fr 340px"], [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 320px"], [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 300px"], [style*="grid-template-columns: 1fr 300px"] { grid-template-columns: 1fr !important; }
}
/* Wider two-column work layouts (form + side panel) collapse earlier. */
@media (max-width: 900px) {
  [style*="minmax(0,1fr) 380px"], [style*="minmax(0, 1fr) 380px"],
  [style*="minmax(0,1fr) 320px"], [style*="minmax(0, 1fr) 320px"],
  [style*="grid-template-columns:1fr 380px"], [style*="grid-template-columns: 1fr 380px"] { grid-template-columns: 1fr !important; }
}
.inline-search { display: flex; gap: 8px; align-items: center; }
.inline-search input { min-height: 40px; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; min-width: 240px; background: var(--c-surface); }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } .inline-search input { min-width: 0; } }

/* ---------- Chips (tag filter) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.chip-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--c-muted)); }
.chip-on .chip-dot { background: #fff; }
.chip-n { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------- Tag pills + picker ---------- */
.tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; margin: 1px 2px 1px 0; color: var(--chip, #64748b); background: color-mix(in srgb, var(--chip, #64748b) 12%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--chip, #64748b) 28%, var(--c-surface)); }
.tag-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip, #64748b); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--c-border); font-size: 13px; cursor: pointer; user-select: none; }
.tag-check input { accent-color: var(--chip, var(--c-primary)); margin: 0; }
.tag-check:has(input:checked) { background: color-mix(in srgb, var(--chip, var(--c-primary)) 12%, var(--c-surface)); border-color: var(--chip, var(--c-primary)); }
.tag-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tag-row { display: flex; align-items: center; gap: 10px; }
.tag-add { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--c-border); padding-top: 14px; }
.tag-add input[name=name] { flex: 1; min-height: 38px; padding: 7px 11px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; }
.tag-add input[type=color] { width: 42px; height: 38px; padding: 3px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); }

/* ---------- CRM toolbar (chips + search) ---------- */
.crm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px 40px; background: rgba(2, 6, 23, .55); overflow-y: auto; }
.modal-backdrop.show { display: flex; }
.modal { width: 100%; max-width: 560px; background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: modalIn .18s ease; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--c-border); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--c-muted); font-size: 22px; line-height: 1; cursor: pointer; text-decoration: none; }
.modal-close:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.modal-body { padding: 22px; }
@keyframes modalIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Backup options ---------- */
.backup-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.backup-opts form { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.backup-opts .small { line-height: 1.4; }
@media (max-width: 820px) { .backup-opts { grid-template-columns: 1fr; } }

/* ---------- Dashboard: KPIs + charts ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.kpi-val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--c-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-lab { font-size: 12.5px; color: var(--c-muted); margin-top: 3px; }
.kpi-alert { border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-surface)); background: color-mix(in srgb, var(--c-danger) 5%, var(--c-surface)); }
.kpi-alert .kpi-val { color: var(--c-danger); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chart-donut { flex: 0 0 auto; max-width: 190px; height: auto; }
.chart-donut-num { font: 700 26px var(--font); fill: var(--c-text); }
.chart-donut-lab { font: 500 11px var(--font); fill: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }
.chart-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.chart-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.chart-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chart-legend .lg-label { color: var(--c-text); }
.chart-legend .lg-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.chart-bars { display: block; height: auto; max-height: 220px; overflow: visible; }
.chart-donut-track { stroke: var(--c-surface-2); }
.chart-axis { stroke: var(--c-border); }
.chart-xlab { font: 500 11px var(--font); fill: var(--c-muted); }
.chart-blab { font: 600 10px var(--font); fill: var(--c-muted); }
.chart-key { display: flex; gap: 14px; font-size: 12.5px; color: var(--c-muted); }
.chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.chart-empty { padding: 40px; text-align: center; color: var(--c-muted); font-size: 14px; }

.hbars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.hbar-row { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; }
.hbar-label { font-size: 13px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { height: 12px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; transition: width .3s; }
.hbar-val { font-size: 13px; font-weight: 600; text-align: right; color: var(--c-muted); font-variant-numeric: tabular-nums; }

.quick-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-stat { padding: 7px 13px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); font-size: 13px; color: var(--c-muted); }
.quick-stat:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.quick-stat strong { color: var(--c-text); }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 26px 16px; color: var(--c-muted); }
.empty-ic { display: inline-flex; padding: 14px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-muted); margin-bottom: 10px; }
.empty-ic svg { width: 26px; height: 26px; }
.empty p { margin: 0; font-size: 14.5px; }
.empty-cell { padding: 8px !important; }

/* ---------- Accessibility: honour reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.card-header { flex-wrap: wrap; }

/* ---------- System health strip ---------- */
.health-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); margin-bottom: 18px; border-left: 4px solid var(--c-muted); }
.health-strip.health-ok   { border-left-color: var(--c-success); }
.health-strip.health-warn { border-left-color: var(--c-warning); }
.health-strip.health-down { border-left-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 4%, var(--c-surface)); }
.health-main { display: flex; align-items: center; gap: 13px; }
.health-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-muted); flex: 0 0 auto; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-muted) 18%, transparent); }
.health-ok .health-dot   { background: var(--c-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success) 18%, transparent); }
.health-warn .health-dot { background: var(--c-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-warning) 18%, transparent); }
.health-down .health-dot { background: var(--c-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 18%, transparent); animation: healthPulse 1.6s ease-in-out infinite; }
@keyframes healthPulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-danger) 6%, transparent); } }
.health-title { font-weight: 700; font-size: 15px; }
.health-desc { font-size: 13px; color: var(--c-muted); }
.health-metrics { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hm { display: flex; flex-direction: column; line-height: 1.25; }
.hm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); font-weight: 600; }
.hm-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-sub { font-size: 11.5px; color: var(--c-muted); }
.hm-alert .hm-val { color: var(--c-danger); }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager-info { font-size: 13px; color: var(--c-muted); }
.pager-links { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager-gap { color: var(--c-muted); padding: 0 2px; }
/* Rows-per-page control. A bare <select> is width:100%/min-height:44px above, which
   would swallow the pager row — so it is sized to its content here, as .list-toolbar
   does for the filter selects. */
.pager-per { display: flex; align-items: center; gap: 8px; margin: 0; }
.pager-per label { display: flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; font-size: 13px; color: var(--c-muted); }
.pager-per select { width: auto; min-width: 74px; min-height: 34px; padding: 5px 34px 5px 11px; font-size: 13.5px; background-position: right 10px center; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Logo plate (guarantees a white/transparent logo is visible) ---------- */
.logo-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); border-radius: 9px; padding: 6px 11px; }
.logo-plate-light { background: #fff; border: 1px solid var(--c-border); }
/* No plate at all: for the header that renders BOTH logo variants and lets the theme swap
   choose. The swap already guarantees the artwork suits the page, so any colour behind it
   can only fight that — a brand colour dark enough for the white variant hides the default
   one, and a pale one hides the white variant. The brand-coloured .logo-plate stays exactly
   as it is for the branding screens, where showing the logo ON the brand colour is the
   entire point of the preview. */
.logo-plate-bare { background: transparent; border: 0; padding: 0; }
/* Dark-mode logo swap. Both <img> render only when a dark logo is uploaded (a lone
   default logo stays class-less, so these rules never hide it). Mirrors the theme-toggle
   icon idiom exactly: default here, explicit-dark below, system-dark inside the @media. */
.brand-logo-dark { display: none; }

/* ---------- Landing: inline document validator ---------- */
.validator { max-width: 680px; margin: 6px auto 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; text-align: left; }
.validator-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.validator-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface)); color: var(--c-primary); }
.validator-head h2 { font-size: 20px; margin: 0 0 3px; }
.validator-form { display: flex; gap: 10px; }
.validator-form input { flex: 1; min-height: 50px; font-size: 16px; }
.validator-form .btn { min-height: 50px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 560px) { .validator-form { flex-direction: column; } }

.vresult { display: none; }
.vresult.show { display: block; margin-top: 18px; }
.vres-loading { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: 14.5px; padding: 8px 2px; }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vres { border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.vres-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: #fff; }
.vres-head.vs-valid { background: var(--c-success); }
.vres-head.vs-void, .vres-head.vs-invalid { background: var(--c-danger); }
.vres-head.vs-expired, .vres-head.vs-superseded { background: var(--c-warning); }
.vres-head.vs-notfound { background: var(--c-muted); }
.vres-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.vres-title { font-weight: 700; font-size: 16px; }
.vres-desc { font-size: 13px; opacity: .95; }
.vres-body { padding: 16px 18px; }
.vres-kv { display: grid; grid-template-columns: 120px 1fr; gap: 7px 14px; margin: 0; font-size: 14px; }
.vres-kv dt { color: var(--c-muted); font-weight: 600; }
.vres-kv dd { margin: 0; word-break: break-word; }
.vres-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }

/* ---------- Landing: feature icon accents + how-it-works ---------- */
.feature .ic.i-blue   { background: color-mix(in srgb, #2563eb 12%, var(--c-surface)); color: #2563eb; }
.feature .ic.i-cyan   { background: color-mix(in srgb, #0891b2 14%, var(--c-surface)); color: #0891b2; }
.feature .ic.i-green  { background: color-mix(in srgb, #15803d 13%, var(--c-surface)); color: #15803d; }
.feature .ic.i-violet { background: color-mix(in srgb, #7c3aed 13%, var(--c-surface)); color: #7c3aed; }
.feature .ic.i-amber  { background: color-mix(in srgb, #d97706 15%, var(--c-surface)); color: #d97706; }
.feature .ic.i-rose   { background: color-mix(in srgb, #e11d48 12%, var(--c-surface)); color: #e11d48; }
.how { padding: 20px 0 80px; }
.how-title { text-align: center; font-size: 26px; margin-bottom: 28px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 22px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; margin-bottom: 12px; }
.step h3 { font-size: 16px; margin: 0 0 6px; }
.step p { margin: 0; font-size: 14px; }

/* ---------- Announcement top bar ---------- */
.ann-bars { display: flex; flex-direction: column; }
.ann-bar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ann-bar .ann-in { flex: 1; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ann-bar .ann-in strong { font-weight: 700; }
.ann-bar a { color: inherit; text-decoration: underline; font-weight: 600; }
.ann-bar .ann-x { border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.ann-bar .ann-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
.ann-info { background: #eff6ff; color: #1e40af; }
.ann-success { background: #ecfdf5; color: #065f46; }
.ann-warning { background: #fffbeb; color: #92400e; }
.ann-danger { background: #fef2f2; color: #991b1b; }

/* Platform version chip next to the sidebar role */
.sidebar .userbox .role .ver { color: var(--c-muted); opacity: .85; }

/* Private signatory note field (builder) — visually distinct so it's noticed */
.signer-note { min-height: 38px; padding: 8px 11px; font-size: 13px; background: #fffbeb; border-color: #fcd9a5; border-radius: 8px; }
.signer-note:focus { border-color: var(--c-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warning) 22%, transparent); }
.signer-note::placeholder { color: #b45309; opacity: .55; }
.signer-note-lab { font-size: 11.5px; color: var(--c-warning); font-weight: 600; margin-bottom: 4px; }

/* ---------- PWA install button ---------- */
.pwa-install-btn { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: none; align-items: center; gap: 8px; background: var(--c-primary); color: #fff; border: none; border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 600; box-shadow: var(--shadow-lg); cursor: pointer; }
.pwa-install-btn:hover { filter: brightness(1.06); }
.pwa-install-btn svg { flex: 0 0 auto; }
@media (max-width: 640px) { .pwa-install-btn { left: 16px; right: 16px; bottom: 78px; justify-content: center; } }

/* ---------- Install advisory banner ---------- */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 75; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 14px; animation: ibIn .25s ease; }
.install-banner[hidden] { display: none; }
.install-banner .ib-body { display: flex; align-items: center; gap: 12px; min-width: 0; }
.install-banner .ib-ic { font-size: 26px; flex: 0 0 auto; }
.install-banner .ib-txt { display: flex; flex-direction: column; min-width: 0; }
.install-banner .ib-txt strong { font-size: 14.5px; }
.install-banner .ib-txt span { font-size: 12.5px; color: var(--c-muted); }
.install-banner .ib-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.install-banner .ib-x { border: 0; background: transparent; color: var(--c-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.install-banner .ib-x:hover { background: var(--c-surface-2); color: var(--c-text); }
@keyframes ibIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 460px) { .install-banner .ib-txt span { display: none; } }

/* ---------- list pages: one-line toolbar, sortable headers ---------- */
/* Search, filters and actions share a single horizontal row on every index page.
   The search box is the only element allowed to grow, so the row stays one line
   until the viewport genuinely cannot hold it. */
.list-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:14px;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:10px 12px}
.list-toolbar>*{flex:0 0 auto;margin:0}
.list-toolbar .lt-search{position:relative;flex:1 1 260px;min-width:170px;display:flex;align-items:center}
.list-toolbar .lt-search svg{position:absolute;inset-inline-start:11px;width:16px;height:16px;color:var(--c-muted);pointer-events:none}
.list-toolbar .lt-search input{width:100%;padding-inline-start:34px;margin:0}
.list-toolbar select,.list-toolbar input[type=date]{margin:0;min-width:120px;max-width:210px;flex:0 1 auto}
.list-toolbar .lt-date{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--c-muted);white-space:nowrap}
.list-toolbar .lt-date input{min-width:140px}
.list-toolbar .lt-spacer{flex:1 1 auto}
th .sort-h{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;white-space:nowrap}
th .sort-h svg{width:13px;height:13px;flex:0 0 13px}
th .sort-h:hover{color:var(--c-muted)}
th .sort-h.is-active{color:var(--c-muted)}
/* The sidebar eats ~330px, so the toolbar box is far narrower than the viewport:
   wrap at 1100px, not 900px, or three filters + search overflow the card. */
@media (max-width:1100px){
  .list-toolbar{flex-wrap:wrap}
  .list-toolbar .lt-search{flex:1 1 100%}
  .list-toolbar select,.list-toolbar input[type=date]{flex:1 1 140px;max-width:none}
}

/* ============================================================
   Theme toggle control (theme-agnostic — shown in sidebar + public header)
   ============================================================ */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);cursor:pointer;
  flex:0 0 auto;transition:background .15s,border-color .15s,color .15s}
.theme-toggle:hover{background:var(--c-surface-2)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}
.userbox-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.userbox-theme .lbl{font-size:12.5px;color:var(--c-muted);font-weight:600}

/* ============================================================
   Dark mode
   Token overrides on two triggers, both higher-specificity than the
   branding :root injected in <head> (specificity 0,2,0 > 0,1,0), so they
   win regardless of source order:
     • system default → @media(dark) :root:not([data-theme="light"])
     • explicit choice → :root[data-theme="dark"]
   Component rules already consume the tokens (surface / border / text /
   muted, and tints mixed against --c-surface which is #fff in light), so
   most of the UI re-themes by swapping tokens; the rules after the token
   blocks are the handful of bespoke fixes (hardcoded light values, and
   solid status fills that must stay dark enough for white text).
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:#0b1120; --c-surface:#111a2e; --c-surface-2:#1a2438; --c-border:#26324b;
    --c-text:#e6edf7; --c-muted:#97a6bf; --c-input-bg:#0d1526;
    --c-success:#34d399; --c-warning:#fbbf24; --c-danger:#f87171; --c-info:#38bdf8; --c-focus:#60a5fa;
    --ui-soft:#20264a; --side-bg:#0f1728; --side-ink:#aeb9cf; --side-hover:#182136; --side-line:#243049;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
    --shadow:0 12px 34px -12px rgba(0,0,0,.6);
    --shadow-lg:0 26px 64px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --c-bg:#0b1120; --c-surface:#111a2e; --c-surface-2:#1a2438; --c-border:#26324b;
  --c-text:#e6edf7; --c-muted:#97a6bf; --c-input-bg:#0d1526;
  --c-success:#34d399; --c-warning:#fbbf24; --c-danger:#f87171; --c-info:#38bdf8; --c-focus:#60a5fa;
  --ui-soft:#20264a; --side-bg:#0f1728; --side-ink:#aeb9cf; --side-hover:#182136; --side-line:#243049;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow:0 12px 34px -12px rgba(0,0,0,.6);
  --shadow-lg:0 26px 64px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* --- Bespoke dark fixes: explicit-choice trigger --- */
:root[data-theme="dark"] .alert-success{color:#a7f3d0}
:root[data-theme="dark"] .alert-danger{color:#fecaca}
:root[data-theme="dark"] .alert-info{color:#bae6fd}
:root[data-theme="dark"] .alert-warning{color:#fde68a}
:root[data-theme="dark"] .badge:not([class*="badge-"]){background:color-mix(in srgb,var(--ui) 22%,var(--c-surface));color:#b8d6ff}
:root[data-theme="dark"] .sidebar a.nav-link.active,
:root[data-theme="dark"] .fchip.is-on,
:root[data-theme="dark"] .fchip:hover,
:root[data-theme="dark"] .kpi-ic.tint-i,
:root[data-theme="dark"] .empty-ic.tint-i,
:root[data-theme="dark"] .wsswitch-item.is-current,
:root[data-theme="dark"] .mobile-nav a.active{color:#b8d6ff}
:root[data-theme="dark"] a:not([class]){color:#93b4ff}
:root[data-theme="dark"] .feature .ic,
:root[data-theme="dark"] .validator-ic{color:#93b4ff}
:root[data-theme="dark"] .ann-info{background:#132a4d;color:#bfdbfe}
:root[data-theme="dark"] .ann-success{background:#0f2e22;color:#a7f3d0}
:root[data-theme="dark"] .ann-warning{background:#33260a;color:#fde68a}
:root[data-theme="dark"] .ann-danger{background:#3a1620;color:#fecaca}
:root[data-theme="dark"] .ann-bar{border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .ann-bar .ann-x:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dz{background:linear-gradient(180deg,var(--c-surface-2),var(--c-surface))}
:root[data-theme="dark"] .dz:hover{background:linear-gradient(180deg,var(--c-surface-2),#182136)}
:root[data-theme="dark"] .kpi-ic.tint-b{background:#122a4d;color:#93b4ff}
:root[data-theme="dark"] .kpi-ic.tint-g{background:#0f2e22;color:#6ee7b7}
:root[data-theme="dark"] .kpi-ic.tint-v{background:#241a3d;color:#c4b5fd}
:root[data-theme="dark"] .kpi-ic.tint-a{background:#33260a;color:#fcd34d}
:root[data-theme="dark"] .kpi-ic.tint-r,
:root[data-theme="dark"] .kpi-alert .kpi-ic.tint-r{background:#3a1620;color:#fca5a5}
:root[data-theme="dark"] .signer-note{background:#2a2410;border-color:#5c4a1e;color:var(--c-text)}
:root[data-theme="dark"] .signer-note::placeholder{color:#d9b878;opacity:1}
:root[data-theme="dark"] .btn-danger{background:#dc2626}
:root[data-theme="dark"] .vs-valid{background:#15803d}
:root[data-theme="dark"] .vs-void,
:root[data-theme="dark"] .vs-invalid{background:#b91c1c}
:root[data-theme="dark"] .vs-expired,
:root[data-theme="dark"] .vs-superseded{background:#b45309}
:root[data-theme="dark"] .vs-notfound{background:#475569}
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2397a6bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .dz-ic{color:#b8d6ff}
:root[data-theme="dark"] .sidebar{scrollbar-color:#2a3654 transparent}
:root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb{background:#2a3654}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:inline-flex}
:root[data-theme="dark"] .brand-logo-light{display:none}
:root[data-theme="dark"] .brand-logo-dark{display:inline-block}

/* --- Bespoke dark fixes: system-preference trigger (mirror of above) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-success{color:#a7f3d0}
  :root:not([data-theme="light"]) .alert-danger{color:#fecaca}
  :root:not([data-theme="light"]) .alert-info{color:#bae6fd}
  :root:not([data-theme="light"]) .alert-warning{color:#fde68a}
  :root:not([data-theme="light"]) .badge:not([class*="badge-"]){background:color-mix(in srgb,var(--ui) 22%,var(--c-surface));color:#b8d6ff}
  :root:not([data-theme="light"]) .sidebar a.nav-link.active,
  :root:not([data-theme="light"]) .fchip.is-on,
  :root:not([data-theme="light"]) .fchip:hover,
  :root:not([data-theme="light"]) .kpi-ic.tint-i,
  :root:not([data-theme="light"]) .empty-ic.tint-i,
  :root:not([data-theme="light"]) .wsswitch-item.is-current,
  :root:not([data-theme="light"]) .mobile-nav a.active{color:#b8d6ff}
  :root:not([data-theme="light"]) a:not([class]){color:#93b4ff}
  :root:not([data-theme="light"]) .feature .ic,
  :root:not([data-theme="light"]) .validator-ic{color:#93b4ff}
  :root:not([data-theme="light"]) .ann-info{background:#132a4d;color:#bfdbfe}
  :root:not([data-theme="light"]) .ann-success{background:#0f2e22;color:#a7f3d0}
  :root:not([data-theme="light"]) .ann-warning{background:#33260a;color:#fde68a}
  :root:not([data-theme="light"]) .ann-danger{background:#3a1620;color:#fecaca}
  :root:not([data-theme="light"]) .ann-bar{border-bottom-color:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .ann-bar .ann-x:hover{background:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .dz{background:linear-gradient(180deg,var(--c-surface-2),var(--c-surface))}
  :root:not([data-theme="light"]) .dz:hover{background:linear-gradient(180deg,var(--c-surface-2),#182136)}
  :root:not([data-theme="light"]) .kpi-ic.tint-b{background:#122a4d;color:#93b4ff}
  :root:not([data-theme="light"]) .kpi-ic.tint-g{background:#0f2e22;color:#6ee7b7}
  :root:not([data-theme="light"]) .kpi-ic.tint-v{background:#241a3d;color:#c4b5fd}
  :root:not([data-theme="light"]) .kpi-ic.tint-a{background:#33260a;color:#fcd34d}
  :root:not([data-theme="light"]) .kpi-ic.tint-r,
  :root:not([data-theme="light"]) .kpi-alert .kpi-ic.tint-r{background:#3a1620;color:#fca5a5}
  :root:not([data-theme="light"]) .signer-note{background:#2a2410;border-color:#5c4a1e;color:var(--c-text)}
  :root:not([data-theme="light"]) .signer-note::placeholder{color:#d9b878;opacity:1}
  :root:not([data-theme="light"]) .btn-danger{background:#dc2626}
  :root:not([data-theme="light"]) .vs-valid{background:#15803d}
  :root:not([data-theme="light"]) .vs-void,
  :root:not([data-theme="light"]) .vs-invalid{background:#b91c1c}
  :root:not([data-theme="light"]) .vs-expired,
  :root:not([data-theme="light"]) .vs-superseded{background:#b45309}
  :root:not([data-theme="light"]) .vs-notfound{background:#475569}
  :root:not([data-theme="light"]) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2397a6bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) .dz-ic{color:#b8d6ff}
  :root:not([data-theme="light"]) .sidebar{scrollbar-color:#2a3654 transparent}
  :root:not([data-theme="light"]) .sidebar::-webkit-scrollbar-thumb{background:#2a3654}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:inline-flex}
  :root:not([data-theme="light"]) .brand-logo-light{display:none}
  :root:not([data-theme="light"]) .brand-logo-dark{display:inline-block}
}

/* ---------- Icon-only action buttons ---------- */
/* Square .btn carrying a glyph instead of words, for dense table rows where three worded
   buttons crowd the useful columns out of view.

   Neither class existed before — the markup that needed them was hand-written, so this is
   the first time they are built properly in app.css rather than inline on the element.

   An icon with no accessible name is a guess for a sighted user and silence for a screen
   reader, so .btn-ic is only ever used together with BOTH a title= tooltip and an .sr-only
   span. The span is what assistive technology announces; the tooltip is what everyone else
   hovers for. */
.btn-ic { padding: 7px; width: 36px; min-width: 36px; gap: 0; }
.btn-ic svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* .btn sets min-height 44px for touch; .btn-sm drops it to 36, which is what makes the
   icon variant square rather than a tall slab. Stated explicitly so a future change to
   .btn-sm cannot silently turn these into rectangles. */
.btn-ic.btn-sm { width: 36px; min-width: 36px; height: 36px; padding: 7px; }

/* Visually hidden, still announced. Not display:none, which would remove it from the
   accessibility tree along with the button's only name. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ---------- Client-side table tools (admin/users) ---------- */
/* Only the sortable-header affordance lives here now. The toolbar and pager markup emitted
   by admin_usertables.js reuses .list-toolbar, .lt-search and .pager, so those components are
   styled once, in one place, for both table engines — a rewrite of this block to mirror them
   would have been a second copy to keep in sync.

   Mirrors partials/sort_head so a reader cannot tell which engine is under a given table. */
th.tt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.tt-sortable::after { content: '⇅'; opacity: .35; margin-left: 6px; font-size: 11px; }
th.tt-asc::after { content: '↑'; opacity: .9; }
th.tt-desc::after { content: '↓'; opacity: .9; }

/* ── Searchable select (combobox) ─────────────────────────────────────────────
   Enhancement over a real <select>, which stays in the DOM and keeps submitting --
   so with JavaScript off this never applies and the native control is what shows. */
.combo { position: relative; }
.combo > select { display: none; }
.combo-list {
    position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30;
    margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.combo-list[hidden] { display: none; }
.combo-opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--c-text); }
.combo-opt.is-none { color: var(--c-muted); }
.combo-opt:hover, .combo-opt.is-active { background: var(--ui-soft); color: var(--ui); }
.combo-empty { padding: 8px 10px; font-size: 13px; color: var(--c-muted); }

/* ── Sticky announcement bar ──────────────────────────────────────────────────
   The bar and the topbar stick together as one block, so the topbar never has to
   know how tall the bar is. .topbar carries its own position:sticky for the case
   where this wrapper is not present, so it is neutralised inside it -- two nested
   sticky elements with the same top would fight. */
.stickhead { position: sticky; top: 0; z-index: 20; background: var(--c-surface); }
.stickhead .topbar { position: static; z-index: auto; }

/* ── Active sidebar link ──────────────────────────────────────────────────────
   The pale tint alone did not read as "you are here" -- and on most pages it was not
   even shown, because the layouts defaulted the nav key to the Dashboard.

   currentColor, not var(--ui): the dark token block redeclares --ui-soft but NOT --ui,
   and a separate rule recolours this link to #b8d6ff in dark. currentColor follows that;
   var(--ui) would stay light indigo on the dark tint.

   inset-inline-start and a symmetric radius, never border-left: Arabic is a first-class
   locale here and a physical-side border puts the marker on the wrong edge in RTL. */
.sidebar a.nav-link.active { font-weight: 700; position: relative; }
.sidebar a.nav-link.active::before {
    content: ""; position: absolute; inset-inline-start: 3px; top: 50%;
    transform: translateY(-50%); width: 3px; height: 58%;
    border-radius: 3px; background: currentColor;
}

/* The "New document" CTA is lifted out of the nav, so it needs its own current state
   or its page is the one page with nothing highlighted. */
.new-cta.is-current { outline: 2px solid var(--ui); outline-offset: 2px; }

/* Forced colours drop background and shadow; the marker would simply vanish. Same
   opt-out the stat-card accent already uses. */
@media (forced-colors: active) {
    .sidebar a.nav-link.active::before { forced-color-adjust: none; background: currentColor; }
    .sidebar a.nav-link.active { outline: 1px solid; }
}


/* ── Side-by-side fields, page rhythm, and the reveal disclosure ───────────────
   Added together because the first two are defects in rules that already exist
   here, not in any one page's markup. */

/* `.field + .field { margin-top: 16px }` above is right for a STACK. But two fields
   sitting side by side in a .row or a .grid are adjacent siblings too, and there that
   margin is not spacing -- it is a stagger: the second field alone drops ~16px, which
   is why "Accent color" sat lower than "Primary color" on /admin/branding and "Height"
   lower than "Width" on /admin/sticker. A flex or grid parent already supplies the gap
   on BOTH axes, so when those rows wrap on a narrow screen the vertical spacing is
   still there; this removes a duplicate, not the spacing. Child combinator on purpose:
   fields stacked inside a column of a .row keep their margin. */
.row > .field + .field,
.grid > .field + .field,
.row2 > .field + .field { margin-top: 0; }

/* Page sections carry their own bottom rhythm -- .kpi-row and .dash-grid are both 18px
   -- but a bare .card used as a top-level section has none, so two cards in a row sat
   flush while every other pair on the page sat 18px apart. Visible between "Document
   activity" and "Top senders" on /admin/reports.
   A TOP margin on the second card, not a bottom margin on the first, so a page never
   ends with a trailing gap. Adjacent sibling margins collapse, so a card already
   carrying .mb-3 keeps its 24px instead of adding to it. */
.content > .card + .card { margin-top: 18px; }

/* A disclosure whose <summary> IS the button. Native <details> rather than a JS toggle:
   it works with scripting off and brings its own keyboard and screen-reader semantics.
   The three marker resets between them remove the default triangle in every engine --
   a .btn with a disclosure arrow inside it reads as a dropdown that does not exist. */
.reveal > summary { list-style: none; cursor: pointer; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::marker { content: ""; }
.reveal[open] > summary { margin-bottom: 18px; }