/* Support101 — design tokens + Bootstrap re-skin + helpdesk-specific bits.
   Phase 0 of the "Field Ops Console" redesign: self-hosted fonts, a token layer
   (Ops Light + Ops Dark), and a mapping of those tokens onto Bootstrap's --bs-*
   variables so the whole app adopts the brand colours/fonts and Bootstrap 5.3's
   dark mode (data-bs-theme="dark") with the existing layouts intact. Page-level
   redesigns come in later phases. */

/* ── Self-hosted fonts (CSP fontSrc 'self'; no CDN) ──────────────────────────
   Hanken Grotesk = UI/body (variable); IBM Plex Mono = data/IDs/metrics. OFL. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/css/vendor/fonts/hanken-grotesk-wght.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/css/vendor/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/css/vendor/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/css/vendor/fonts/ibm-plex-mono-600.woff2') format('woff2')}

/* ── Design tokens ──────────────────────────────────────────────────────────
   Ops Light in :root; Ops Dark overrides keyed on [data-bs-theme="dark"] so a
   single attribute drives BOTH Bootstrap's dark mode and our tokens. */
:root{
  --font-sans:'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand:#0E7A6E; --brand-deep:#0A5C53; --brand-bright:#15B8A6; --brand-rgb:14,122,110;
  --signal:#E2710B;
  --paper:#F4F5F2; --surface:#FFFFFF; --surface-2:#FAFBF9; --line:#E6E4DD;
  --text:#18222A; --text-soft:#5C6770; --text-faint:#929BA1;
}
[data-bs-theme="dark"]{
  --brand:#16B5A3; --brand-deep:#0E7A6E; --brand-bright:#2FE0CC; --brand-rgb:22,181,163;
  --signal:#F2871F;
  --paper:#0C1215; --surface:#141C21; --surface-2:#192329; --line:#243038;
  --text:#E7EDEF; --text-soft:#9BA7AE; --text-faint:#69767D;
}

/* ── Map tokens onto Bootstrap ──────────────────────────────────────────────
   style.css loads AFTER bootstrap.min.css, so these win (incl. over Bootstrap's
   own [data-bs-theme="dark"] block). */
:root{
  --bs-body-font-family:var(--font-sans);
  --bs-primary:var(--brand); --bs-primary-rgb:var(--brand-rgb);
  --bs-link-color:var(--brand); --bs-link-color-rgb:var(--brand-rgb); --bs-link-hover-color:var(--brand-deep);
  --bs-body-bg:var(--paper); --bs-body-color:var(--text);
  --bs-border-color:var(--line);
}
[data-bs-theme="dark"]{
  --bs-primary:var(--brand); --bs-primary-rgb:var(--brand-rgb);
  --bs-link-color:var(--brand); --bs-link-color-rgb:var(--brand-rgb); --bs-link-hover-color:var(--brand-bright);
  --bs-body-bg:var(--paper); --bs-body-color:var(--text);
  --bs-border-color:var(--line);
}
body{font-family:var(--font-sans)}
.mono,.tracking-id,code,kbd,.font-monospace{font-family:var(--font-mono)}

/* Primary button/outline driven by the brand (component vars are compiled in
   Bootstrap, so set them explicitly). */
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-deep); --bs-btn-hover-border-color:var(--brand-deep);
  --bs-btn-active-bg:var(--brand-deep); --bs-btn-active-border-color:var(--brand-deep);
  --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-bg:var(--brand); --bs-btn-active-border-color:var(--brand);
}

/* Chrome bits that use fixed Bootstrap utilities need a nudge in dark mode until
   they're redesigned (sidebar = Phase 1, login = Phase 6). */
[data-bs-theme="dark"] .navbar.bg-light{background-color:var(--surface)!important;border-color:var(--line)!important}
[data-bs-theme="dark"] .navbar.bg-light .navbar-text{color:var(--text)!important}
[data-bs-theme="dark"] body.bg-light,[data-bs-theme="dark"] .bg-light{background-color:var(--paper)!important}

/* ── Sidebar — Field Ops Console nav (Phase 1; dark in both modes) ───────────*/
:root{
  --side-bg1:#0E1417; --side-bg2:#141C21; --side-tx:#BAC3C8; --side-muted:#69767D;
  --side-active:rgba(21,184,166,.13); --side-line:rgba(255,255,255,.07); --side-card:rgba(255,255,255,.045);
}
/* Body itself doesn't scroll; sidebar nav + content scroll independently. */
#wrapper { height: 100vh; overflow: hidden; }
#page-content-wrapper { height: 100vh; overflow-y: auto; }

.s-side{
  min-width:264px; width:264px; height:100vh; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, var(--side-bg1), var(--side-bg2));
  color:var(--side-tx); border-right:1px solid var(--side-line);
}
.s-brand{ padding:18px 18px 14px; }
.s-brand-link{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.s-mark{
  width:34px; height:34px; border-radius:9px; flex:0 0 34px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); color:#fff; font-weight:800; font-size:17px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 16px -6px var(--brand);
}
.s-name{ display:block; color:#fff; font-weight:700; font-size:16px; letter-spacing:-.01em; line-height:1; }
.s-ver{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--side-muted); margin-top:3px; }

.s-nav{ flex:1; overflow-y:auto; padding:4px 12px 12px; }
.s-nav::-webkit-scrollbar{ width:7px; } .s-nav::-webkit-scrollbar-thumb{ background:var(--side-card); border-radius:8px; }
.s-grp{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--side-muted); padding:16px 12px 7px;
}
.s-link{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; position:relative;
  color:var(--side-tx); text-decoration:none; font-weight:500; font-size:14px; transition:background .14s, color .14s;
}
.s-link i{ font-size:16px; width:18px; text-align:center; opacity:.85; }
.s-link:hover{ background:var(--side-card); color:#fff; }
.s-link.active{ background:var(--side-active); color:#fff; }
.s-link.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand-bright); }
.s-link.active i{ opacity:1; color:var(--brand-bright); }

.s-me{
  margin:10px 12px 14px; padding:10px 12px; border-radius:11px; display:flex; align-items:center; gap:10px;
  background:var(--side-card); border:1px solid var(--side-line);
}
.s-av{
  width:34px; height:34px; border-radius:8px; flex:0 0 34px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--brand), var(--brand-deep)); color:#fff; font-weight:700; font-size:13px;
}
.s-me-who{ min-width:0; line-height:1.25; flex:1; }
.s-me-who b{ display:block; color:#fff; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-me-who span{ font-family:var(--font-mono); font-size:10.5px; color:var(--side-muted); text-transform:uppercase; letter-spacing:.06em; }
.s-out-form{ margin:0; }
.s-out{ border:0; background:transparent; color:var(--side-muted); font-size:16px; line-height:1; padding:4px; cursor:pointer; }
.s-out:hover{ color:#fff; }

@media (max-width: 768px) {
  .s-side { min-width: 0; width: 0 !important; overflow: hidden; }
}

/* ── Top bar (Phase 1) ──────────────────────────────────────────────────────*/
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:13px 24px; background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar h1{ font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--text); }
.topbar .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.topbar .bell-btn{
  position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); display:grid; place-items:center; font-size:16px; text-decoration:none;
}
.topbar .bell-btn:hover{ color:var(--text); }

/* ── Status + priority badges (helpdesk; constant across themes) ────────────*/
.badge.st-new { background-color: #2563eb; }
.badge.st-open { background-color: #0891b2; }
.badge.st-pending { background-color: #d97706; }
.badge.st-resolved { background-color: #059669; }
.badge.st-closed { background-color: #6b7280; }
.badge.pr-low { background-color: #94a3b8; }
.badge.pr-medium { background-color: #2563eb; }
.badge.pr-high { background-color: #ea580c; }
.badge.pr-critical { background-color: #dc2626; }

/* ── Ticket detail header + message avatars (Phase 4) ───────────────────────*/
.back-link{ display:inline-flex; align-items:center; gap:7px; color:var(--text-soft); text-decoration:none; font-size:13px; font-weight:600; margin-bottom:14px; }
.back-link:hover{ color:var(--text); }
.dhead{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.dhead-main{ flex:1; min-width:0; }
.dhead-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0; }
.dhead-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.dhead-meta span{ display:inline-flex; align-items:center; gap:6px; }
.msg-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.msg-av{ width:28px; height:28px; border-radius:7px; flex:0 0 28px; display:grid; place-items:center; font-weight:700; font-size:11px; color:#fff; background:var(--av, var(--brand)); }
.msg-who{ font-size:13.5px; font-weight:600; }
.msg-when{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }

/* ── Admin inline editors: statuses + categories (aligned grid rows) ────────
   Replaces the old "whole edit form crammed into one table cell" layout, which
   wrapped and never lined up. Each row is a CSS grid; the edit <form> uses
   display:contents so its fields become grid cells that align across all rows
   (and with the header). Horizontal scroll on narrow viewports. */
.adm-scroll{ overflow-x:auto; }
.adm-editor{ display:flex; flex-direction:column; min-width:max-content; }
.adm-head, .adm-row{ display:grid; gap:10px; align-items:center; }
.adm-head{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); padding:0 4px 8px; border-bottom:1px solid var(--line); }
.adm-row{ padding:9px 4px; border-bottom:1px solid var(--line); }
.adm-row:last-child{ border-bottom:0; }
.adm-form{ display:contents; }
.adm-form > .form-control, .adm-form > .form-select, .adm-row > form { margin:0; }
.adm-del{ margin:0; justify-self:start; }
.adm-flag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-soft); white-space:nowrap; }
.adm-flag input{ margin:0; }
.adm-slug{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); display:flex; align-items:center; gap:6px; min-width:0; }
.adm-swatch{ padding:0; width:34px; height:34px; }
/* Fixed action-column widths (NOT auto) so every row's tracks match exactly and
   columns stay aligned regardless of cell content (e.g. "★ Default" badge vs
   "Make default" button). Each .adm-row is its own grid, so auto columns would
   size per-row and break alignment. */
/* Categories: Name · Description · Sort · Active · Save · Delete */
.adm-cats .adm-head, .adm-cats .adm-row{ grid-template-columns: minmax(140px,1.6fr) minmax(160px,2.4fr) 78px 116px 72px 84px; min-width:760px; }
/* Statuses: Colour · Name · Slug · Sort · Active · Closed · Notify · Save · Default · Delete */
.adm-statuses .adm-head, .adm-statuses .adm-row{ grid-template-columns: 54px minmax(130px,1.5fr) 134px 68px 104px 70px 74px 66px 120px 84px; min-width:1020px; }

/* ── Accessibility (Phase 7) ────────────────────────────────────────────────*/
/* Visible keyboard focus on interactive elements (mouse focus stays clean). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .metric:focus-visible, .att:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}
/* Brighter ring inside the dark sidebar for contrast. */
.s-link:focus-visible, .s-out:focus-visible, .s-brand-link:focus-visible { outline-color: var(--brand-bright); }
/* Respect users who prefer reduced motion — kill animations + transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── Login split screen (Phase 6) ───────────────────────────────────────────*/
.login-split{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-art{ position:relative; overflow:hidden; padding:54px; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, var(--side-bg1), var(--side-bg2)); color:#AEB8BE; }
.login-art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0) 0 0/26px 26px; }
.login-art > *{ position:relative; z-index:1; }
.la-brand{ display:flex; align-items:center; gap:12px; }
.la-brand .mark{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px;
  background:linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); }
.la-brand b{ color:#fff; font-size:19px; font-weight:700; }
.la-pitch{ max-width:430px; }
.la-pitch h2{ color:#fff; font-size:32px; font-weight:700; line-height:1.18; letter-spacing:-.02em; }
.la-pitch p{ margin-top:14px; font-size:15px; line-height:1.6; color:#AEB8BE; }
.la-feats{ display:flex; flex-direction:column; gap:12px; }
.la-feats div{ display:flex; align-items:center; gap:11px; font-size:13.5px; }
.la-feats i{ color:var(--brand-bright); font-size:17px; }

.login-pane{ position:relative; display:grid; place-items:center; padding:40px; background:var(--paper); }
.login-box{ width:100%; max-width:360px; }
.login-box h1{ font-size:23px; font-weight:700; letter-spacing:-.01em; margin:0; }
.login-box .lead{ color:var(--text-soft); margin:4px 0 24px; font-size:14px; }
.login-theme{ position:absolute; top:20px; right:20px; display:flex; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px; }
.login-theme button{ border:0; background:transparent; color:var(--text-faint); width:30px; height:28px; border-radius:7px; cursor:pointer; display:grid; place-items:center; font-size:14px; }
.login-theme button:hover{ color:var(--text-soft); }
.login-theme button.on{ background:var(--surface-2); color:var(--brand); }
@media (max-width: 860px){ .login-split{ grid-template-columns:1fr; } .login-art{ display:none; } }

/* ── Customer detail header + ministats (Phase 5) ───────────────────────────*/
.chead{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.chead-logo{ width:54px; height:54px; border-radius:14px; flex:0 0 54px; display:grid; place-items:center; font-size:24px; color:#fff; background:linear-gradient(140deg, var(--brand), var(--brand-deep)); }
.chead-main{ flex:1; min-width:0; }
.chead-name{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0; }
.chead-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:6px; }
.chead-phone{ font-size:12.5px; color:var(--text-faint); display:inline-flex; align-items:center; gap:5px; }
.chead-actions{ display:flex; gap:8px; align-items:center; }
.tagpill{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-soft); display:inline-flex; align-items:center; gap:5px; }
.tagpill.ok{ color:#0E9E6E; background:color-mix(in srgb, #0E9E6E 13%, var(--surface)); border-color:transparent; }
.ministats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.mini{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.mini-n{ font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--text); }
.mini-l{ font-size:12px; color:var(--text-soft); margin-top:2px; }
@media (max-width: 992px){ .ministats{ grid-template-columns:repeat(2,1fr); } }

/* ── Ticket conversation (token-driven so dark mode adapts) ─────────────────*/
.msg { border: 1px solid var(--line); border-radius: .5rem; padding: .85rem 1.1rem; margin-bottom: 1rem; background: var(--surface); }
.msg-staff { border-left: 3px solid var(--brand); }
.msg-customer { border-left: 3px solid #94a3b8; }
.msg-note { background: color-mix(in srgb, var(--signal) 9%, var(--surface)); border-left: 3px solid #d97706; }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg { scroll-margin-top: 1rem; }
/* Briefly highlight a message jumped to from the attachments list */
.msg.msg-flash { animation: msgFlash 1.6s ease-out; }
@keyframes msgFlash { 0% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.5); } 100% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0); } }
.att-list-row { cursor: pointer; }
.att-list-row .att-thumb { width: 40px; height: 40px; flex: 0 0 40px; }

/* ── Dashboard (Phase 2) ────────────────────────────────────────────────────*/
.dash-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); margin:2px 0 13px; }
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric{ position:relative; overflow:hidden; display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow);
  transition:border-color .14s, transform .08s, box-shadow .14s; }
.metric:hover{ transform:translateY(-1px); box-shadow:0 6px 20px -10px rgba(0,0,0,.18); }
.metric::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ac); }
.metric .m-lab{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); font-weight:600; }
.metric .m-lab i{ color:var(--ac); font-size:15px; }
.metric .m-num{ font-family:var(--font-mono); font-weight:600; font-size:34px; letter-spacing:-.03em; line-height:1; margin:12px 0 4px; color:var(--text); }
.metric .m-sub{ font-size:12px; color:var(--text-faint); }

.dash-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
.dash-stack{ display:flex; flex-direction:column; gap:16px; }
.dash-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.dash-card .dc-hd{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.dash-card .dc-hd h2{ font-size:14.5px; font-weight:700; margin:0; letter-spacing:-.01em; }
.dash-card .dc-hd a{ font-size:12.5px; font-weight:600; text-decoration:none; color:var(--brand); }
.dash-card .dc-bd{ padding:6px 18px 10px; }

.feed{ list-style:none; margin:0; padding:0; }
.feed li{ display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.feed li:last-child{ border-bottom:0; }
.feed .fic{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; font-size:14px; margin-top:1px;
  background:color-mix(in srgb, var(--ic) 15%, var(--surface)); color:var(--ic); }
.feed .ftx{ flex:1; min-width:0; font-size:13.5px; }
.feed .ftx a{ font-weight:600; text-decoration:none; color:var(--brand); }
.feed .fago{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); white-space:nowrap; margin-top:3px; }

.att{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.att:last-child{ border-bottom:0; }
.att:hover .att-t b{ color:var(--brand); }
.att .att-bar{ width:3px; align-self:stretch; min-height:32px; border-radius:3px; background:var(--c); flex:0 0 3px; }
.att .att-t{ flex:1; min-width:0; }
.att .att-t b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.att .att-t span{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.att .att-age{ font-family:var(--font-mono); font-size:11px; color:var(--text-soft); white-space:nowrap; }

.prio-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.prio-row:last-child{ border-bottom:0; }
.prio-row .pr-name{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--text); text-transform:capitalize; }
.prio-row .pr-dot{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 9px; }
.prio-row .pr-c{ font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--text); }

@media (max-width: 992px){ .metrics{ grid-template-columns:repeat(2,1fr); } .dash-cols{ grid-template-columns:1fr; } }

/* ── Ticket queue (Phase 3) ─────────────────────────────────────────────────*/
.tix-bar{ display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.tix-bar-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.tix-total{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.seg{ display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:4px; flex-wrap:wrap; gap:2px; }
.seg a{ border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; color:var(--text-soft); text-decoration:none; }
.seg a:hover{ color:var(--text); }
.seg a.on{ background:var(--brand); color:#fff; }

.tix-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.tix-table{ width:100%; border-collapse:collapse; }
.tix-table thead th{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); text-align:left; font-weight:500; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.tix-table tbody tr{ border-bottom:1px solid var(--line); transition:background .12s; }
.tix-table tbody tr:last-child{ border-bottom:0; }
.tix-table tbody tr:hover{ background:var(--surface-2); }
.tix-table tbody td{ padding:12px 14px; vertical-align:middle; position:relative; }
.tix-table tbody td:first-child{ padding-left:18px; }
.tix-table tbody td:first-child::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c, transparent); }
.tix-pr{ display:flex; align-items:center; gap:8px; }
.tix-pr .d{ width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 8px; }
.tix-pr .l{ font-size:12px; font-weight:600; color:var(--text-soft); text-transform:capitalize; }
.tix-subj{ font-weight:600; font-size:13.8px; }
.tix-subj a{ color:var(--text); text-decoration:none; }
.tix-subj a:hover{ color:var(--brand); }
.tix-meta{ font-size:12px; color:var(--text-faint); margin-top:2px; }
.tix-meta .tid{ color:var(--brand); text-decoration:none; }
.tix-cust{ font-size:13px; }
.tix-cust .site{ font-size:12px; color:var(--text-faint); }
.who-chip{ display:flex; align-items:center; gap:8px; font-size:13px; }
.who-chip .av{ width:25px; height:25px; border-radius:6px; flex:0 0 25px; display:grid; place-items:center; font-weight:700; font-size:10.5px; color:#fff; background:var(--av, var(--brand)); }
.who-chip.un{ color:var(--text-faint); }
.who-chip.un .av{ background:var(--surface-2); color:var(--text-faint); box-shadow:inset 0 0 0 1px var(--line); font-weight:600; }
.tix-when{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }

/* Status pill (shared) — colour comes from --pc (statusColor()). */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;
  color:var(--pc, #6b7280); background:color-mix(in srgb, var(--pc, #6b7280) 14%, var(--surface)); white-space:nowrap; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── Public tracking-id chip ────────────────────────────────────────────────*/
.tracking-id {
  font-size: 1.4rem; font-weight: 700; letter-spacing: .05em;
  display: inline-block; padding: .5rem 1rem; border: 1px dashed var(--line); border-radius: .5rem;
}

/* KB deflection suggestions */
.kb-suggest { margin-top: .5rem; }

/* ── Attachment tiles + preview ─────────────────────────────────────────────*/
.att-tile { max-width: 260px; background: var(--surface); cursor: pointer; }
.att-tile:hover { background: var(--surface-2); }
.att-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.att-thumb { width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: .25rem; background: var(--surface-2); border: 1px solid var(--line); }
.att-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.att-thumb-icon { font-size: 1.4rem; color: #6c757d; }
.att-meta { min-width: 0; }
.att-tile .att-name { max-width: 150px; font-size: .85rem; }
.att-tile .att-size { font-size: .72rem; }
#attPreviewBody img { max-height: 70vh; }

/* ── Persona switcher (topbar) ───────────────────────────────────────────────*/
.persona-btn{ display:flex; align-items:center; gap:10px; max-width:260px; padding:6px 12px; border:1px solid var(--line);
  background:var(--surface); border-radius:11px; color:var(--text); cursor:pointer; }
.persona-btn:hover{ background:var(--surface-2); }
.persona-btn > .bi-person-rolodex{ color:var(--brand); font-size:17px; }
.persona-cur{ display:flex; flex-direction:column; line-height:1.15; min-width:0; text-align:left; }
.persona-cur b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.persona-cur span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.persona-caret{ color:var(--text-faint); font-size:12px; }
.persona-menu{ width:320px; max-height:420px; overflow-y:auto; padding:6px; }
.persona-list{ display:flex; flex-direction:column; }
.persona-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; }
.persona-item.active{ background:color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.persona-av{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; background:linear-gradient(140deg, var(--brand), var(--brand-deep)); }
.persona-who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.persona-who b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.persona-who span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.persona-unseen{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; background:var(--brand); border-radius:20px; padding:1px 8px; }

/* ── Sidebar demo-view (acting as a persona) ─────────────────────────────────*/
.s-persona-tag{ display:flex; align-items:center; gap:10px; margin:2px 12px 4px; padding:9px 11px; border-radius:10px;
  background:color-mix(in srgb, var(--brand) 16%, var(--side-card)); border:1px solid var(--side-line); }
.s-persona-av{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff;
  background:linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); }
.s-persona-who{ min-width:0; line-height:1.2; }
.s-persona-who b{ display:block; color:#fff; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-persona-who span{ font-family:var(--font-mono); font-size:10.5px; color:var(--side-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.s-exit-demo{ margin-top:10px; color:var(--brand-bright); }
.s-exit-demo i{ color:var(--brand-bright); }

/* ── Calendar month grid (server-rendered) ───────────────────────────────────*/
.cal-nav{ display:flex; align-items:center; }
.cal-grid{ width:100%; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.cal-head{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-2); border-bottom:1px solid var(--line); }
.cal-head div{ padding:8px 10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-cell{ min-height:108px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 7px; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-cell:nth-child(7n){ border-right:0; }
.cal-week:last-child .cal-cell{ border-bottom:0; }
.cal-cell.out{ background:var(--surface-2); }
.cal-cell.out .cal-day{ color:var(--text-faint); }
.cal-day{ font-size:12.5px; font-weight:600; color:var(--text-soft); align-self:flex-start; }
.cal-cell.today .cal-day{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:var(--brand); color:#fff; }
.cal-ev{ display:block; font-size:11.5px; line-height:1.3; padding:2px 6px; border-radius:6px; text-decoration:none; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 3px 0 0 rgba(0,0,0,.18); }
.cal-ev:hover{ filter:brightness(1.08); color:#fff; }
.cal-ev .t{ font-family:var(--font-mono); opacity:.85; margin-right:4px; }
.cal-more{ font-size:11px; color:var(--text-faint); padding-left:2px; }
@media (max-width: 760px){ .cal-cell{ min-height:74px; } .cal-ev{ font-size:10.5px; } }

/* ── Event detail (facts list + guest list) ─────────────────────────────────*/
.ev-facts{ display:grid; grid-template-columns:24px 1fr; gap:10px 12px; align-items:start; margin:0; }
.ev-facts dt{ color:var(--text-faint); text-align:center; font-size:15px; padding-top:2px; margin:0; }
.ev-facts dd{ margin:0; font-size:14px; color:var(--text); }
.guest-list{ list-style:none; margin:0; padding:0; }
.guest-list li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.guest-list li:last-child{ border-bottom:0; }
.guest-av{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; background:var(--av,var(--brand)); }
.guest-who{ flex:1; min-width:0; line-height:1.25; }
.guest-who b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guest-who > span{ display:block; font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }