/* ===========================================================================
   DVO Helpdesk — "datavoice options" reskin.
   Neumorphic surfaces · violet accent · emerald actions · gradient wordmark.
   Light + dark (follows the OS via prefers-color-scheme).
   This file restyles the EXISTING class structure — no markup changes needed.
   The pre-reskin stylesheet is preserved in /backup/original-source/styles.css.
   =========================================================================== */

@import url('/fonts/fonts.css');   /* self-hosted (public/fonts) - nothing loads from Google */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* 2026-10-13 refresh: page a notch darker, cards near-white, text darker,
     and BLUE added for identity (people, companies, links). */
  --bg:#e3e6ef; --surface:#f8f9fd; --press:#e8ebf3;
  --text:#171a26; --muted:#5a6172; --faint:#8b92a6; --line:rgba(120,130,160,0.2);
  --purple:#7c3aed; --purple-2:#8b5cf6; --purple-bg:#ece8fb;
  --blue:#2563eb; --blue-2:#1d4ed8; --blue-bg:#e3ecff; --blue-tint:rgba(37,99,235,0.05);
  --green:#12b76a; --green-2:#0fa45f; --green-deep:#0c7a47; --green-bg:#dcf5e8;
  --name:#0b7d4a;            /* people's names (links) — green, readable on the light surfaces */
  --crit:#d4453f;
  --shadow-dark:rgba(150,158,185,0.5); --shadow-light:rgba(255,255,255,0.95);
  --ring:0 0 0 1px rgba(37,99,235,0.07);
  --raise:6px 6px 16px var(--shadow-dark), -6px -6px 14px var(--shadow-light), var(--ring);
  --raise-sm:4px 4px 10px var(--shadow-dark), -4px -4px 9px var(--shadow-light), var(--ring);
  --inset:inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --logo-grad:linear-gradient(90deg,#14b8a6 0%,#3b82f6 52%,#d6336c 100%);
  --cta:linear-gradient(135deg,#1bcd7a,#10a866);

  --open-bg:#e4edfc;   --open-fg:#2c5fd0;
  --prog-bg:#ece7fb;   --prog-fg:#7c3aed;
  --hold-bg:#edeef3;   --hold-fg:#6b7280;
  --resolved-bg:#dcf3e6; --resolved-fg:#1a8b53;
  --closed-bg:#dcf3e6; --closed-fg:#15824b;   /* Closed = green (per request) */
  --low-bg:#dcf3e6;    --low-fg:#1a8b53;
  --med-bg:#faf0d4;    --med-fg:#956712;
  --high-bg:#fce3d2;   --high-fg:#b1571f;
  --crit-bg:#fbdcdc;   --crit-fg:#bd3636;
  --amber-bg:#fbf0d4;  --amber-fg:#9a6b12; --amber-accent:#e0a93b;
  --info-bg:#e4edfc;   --info-fg:#2c5fd0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14151d; --surface:#232532; --press:#1b1d26;
    --text:#eceef5; --muted:#a6acbf; --faint:#7d8397; --line:rgba(255,255,255,0.07);
    --purple:#a78bfa; --purple-2:#bca6fc; --purple-bg:#2a2548;
    --blue:#60a5fa; --blue-2:#93c5fd; --blue-bg:#1e2a44; --blue-tint:rgba(96,165,250,0.07);
    --green:#22c47e; --green-2:#16a566; --green-deep:#3fae6f; --green-bg:#16331f;
    --name:#4fd08c;
    --crit:#e06a6a;
    --shadow-dark:rgba(0,0,0,0.55); --shadow-light:rgba(255,255,255,0.045);
    --ring:0 0 0 1px rgba(255,255,255,0.05);
    --open-bg:#1e2a44;   --open-fg:#93b6f6;
    --prog-bg:#2a2348;   --prog-fg:#bda6fb;
    --hold-bg:#262833;   --hold-fg:#a0a6ba;
    --resolved-bg:#16331f; --resolved-fg:#62cf90;
    --closed-bg:#16331f; --closed-fg:#62cf90;   /* Closed = green (per request) */
    --low-bg:#16331f;    --low-fg:#62cf90;
    --med-bg:#332b14;    --med-fg:#d8b25f;
    --high-bg:#3a2417;   --high-fg:#e6975f;
    --crit-bg:#3a1d1d;   --crit-fg:#ef8f8f;
    --amber-bg:#332b14;  --amber-fg:#d8b25f; --amber-accent:#c79433;
    --info-bg:#1e2a44;   --info-fg:#93b6f6;
  }
}
/* Manual override: the floating toggle (theme.js) sets data-theme="dark" on
   <html> to force dark even when the OS is light. (The "light" choice is handled
   above by :not([data-theme="light"]).) */
:root[data-theme="dark"] {
  --bg:#14151d; --surface:#232532; --press:#1b1d26;
  --text:#eceef5; --muted:#a6acbf; --faint:#7d8397; --line:rgba(255,255,255,0.07);
  --purple:#a78bfa; --purple-2:#bca6fc; --purple-bg:#2a2548;
  --blue:#60a5fa; --blue-2:#93c5fd; --blue-bg:#1e2a44; --blue-tint:rgba(96,165,250,0.07);
  --green:#22c47e; --green-2:#16a566; --green-deep:#3fae6f; --green-bg:#16331f;
  --name:#4fd08c;
  --crit:#e06a6a;
  --shadow-dark:rgba(0,0,0,0.55); --shadow-light:rgba(255,255,255,0.045);
  --ring:0 0 0 1px rgba(255,255,255,0.05);
  --open-bg:#1e2a44;   --open-fg:#93b6f6;
  --prog-bg:#2a2348;   --prog-fg:#bda6fb;
  --hold-bg:#262833;   --hold-fg:#a0a6ba;
  --resolved-bg:#16331f; --resolved-fg:#62cf90;
  --closed-bg:#16331f; --closed-fg:#62cf90;   /* Closed = green (per request) */
  --low-bg:#16331f;    --low-fg:#62cf90;
  --med-bg:#332b14;    --med-fg:#d8b25f;
  --high-bg:#3a2417;   --high-fg:#e6975f;
  --crit-bg:#3a1d1d;   --crit-fg:#ef8f8f;
  --amber-bg:#332b14;  --amber-fg:#d8b25f; --amber-accent:#c79433;
  --info-bg:#1e2a44;   --info-fg:#93b6f6;
}

/* ---- Floating theme toggle (built by theme.js, on every page) ------------ */
.theme-toggle {
  position: fixed; right: 28px; bottom: 28px; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); box-shadow: var(--raise); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.theme-toggle:hover { color: var(--purple-2); }
.theme-toggle svg { width: 23px; height: 23px; }

* { box-sizing: border-box; }
html { zoom: 1.05; }

body {
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: rgba(120,128,150,0.4); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

/* ---- Header: dark indigo glass band + gradient wordmark ------------------ */
header {
  background: radial-gradient(120% 320% at 82% -120%, #2a1f5e 0%, #181a3e 46%, #0e1030 100%);
  color: #fff;
  padding: 18px 28px;
  display: block;
  position: relative;
}
/* Floating glass nav pill (built by enhanceDvoHeader in auth.js / portal.js). */
.nav-pill {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 11px 14px 11px 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 17px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: relative; z-index: 60;   /* keep nav dropdowns above the overlapping stat cards */
}
/* Nav links sit to the LEFT (right after the wordmark); the search + bell + avatar
   are pushed to the far right by .global-search's own margin-left:auto. */
.nav-pill .user-bar { flex: 1; min-width: 0; }
/* Pages where the pill isn't built (login/setup) keep a simple centered band. */
header > h1, header > .user-bar { max-width: 1340px; margin-left: auto; margin-right: auto; }
/* Gradient "datavoice options" wordmark + Helpdesk tag. */
header h1 .wm-data {
  background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
header h1 .wm-options { color: #fff; -webkit-text-fill-color: #fff; margin-left: 5px; }
header h1 .wm-tag {
  display: inline-block; margin-left: 11px; padding: 4px 10px; border-radius: 8px;
  background: rgba(167,139,250,0.22); color: #cbb8ff; -webkit-text-fill-color: #cbb8ff;
  font-family: "Hanken Grotesk", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle;
}
/* Client portal tag ("Support") is green/teal instead of the staff lavender. */
header h1 .wm-tag.wm-tag-support { background: rgba(45,212,191,0.22); color: #9beede; -webkit-text-fill-color: #9beede; }
header h1 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
header h1 .home-link, header h1 a { color: #fff; text-decoration: none; }
/* Gradient-treat the wordmark text. */
header h1 a {
  background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.user-bar { display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: nowrap; min-width: 0; }
.user-name { opacity: 0.9; }
/* Search + bell + avatar stay together as one cluster pinned to the far right,
   so the avatar never wraps off on its own when the nav gets wide. The whole bar
   is ONE line; the search box shrinks first if space gets tight. */
.user-bar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; min-width: 0; }
.user-bar-right .global-search { margin-left: 0; min-width: 0; flex: 0 1 auto; }
.nav-link { flex: none; }

/* nav links → translucent glass pills */
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  border: none;
  padding: 8px 11px;
  border-radius: 11px;
  white-space: nowrap;
}
.nav-link .nav-ic { flex: none; opacity: 0.85; }
.nav-link:hover { background: rgba(219,233,253,0.92); color: #1d4ed8; }

.home-link { color: #fff; text-decoration: none; }

/* logout pill (login-less pages) */
.logout-btn {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 7px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 600;
}
.logout-btn:hover { background: rgba(255,255,255,0.18); }

/* ---- Global search (in header) ------------------------------------------- */
.global-search { position: relative; display: flex; gap: 8px; align-items: center; margin-left: auto; padding: 5px 13px 5px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; }
.gsearch-type { margin-right: 2px; }
.gsearch-ic { width: 16px; height: 16px; flex: none; background: rgba(255,255,255,0.6); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; }
.gsearch-input { padding: 4px 2px; border: none; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font-size: 13.5px; flex: 1 1 60px; width: 150px; min-width: 0; }
.gsearch-input::placeholder { color: rgba(255,255,255,0.55); }
.gsearch-input:focus { outline: none; }
.gsearch-type { padding: 5px 8px; border: none; border-radius: 8px; background: rgba(255,255,255,0.14); color: #fff; font-size: 12px; }
.gsearch-results {
  position: absolute; top: 120%; left: 0; width: 380px; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: none; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10,12,30,0.32); z-index: 60;
}
.gsearch-group {
  padding: 8px 14px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); background: var(--press); border-bottom: 1px solid var(--line); font-weight: 700;
}
.gsearch-item {
  display: block; padding: 10px 14px; color: var(--text); text-decoration: none;
  font-size: 13px; border-bottom: 1px solid var(--line); line-height: 1.4;
}
.gsearch-item:hover { background: var(--purple-bg); }
.gsearch-item .muted { color: var(--muted); }
.gsearch-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

/* ---- Avatars + account dropdown ------------------------------------------ */
.avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg,#2dd4bf,#f472b6);
  color: #fff; font-weight: 700; border: none; padding: 0; flex-shrink: 0;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.avatar-sm { width: 38px; height: 38px; font-size: 14px; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.avatar-md { width: 44px; height: 44px; font-size: 16px; }
.avatar-lg { width: 96px; height: 96px; font-size: 32px; }
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar-sm:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }

.profile-wrap { position: relative; }
.profile-menu {
  position: absolute; top: 50px; right: 0; width: 250px;
  background: var(--surface); color: var(--text); border: none; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(10,12,30,0.32); padding: 8px; z-index: 50;
}
.profile-head { display: flex; align-items: center; gap: 10px; padding: 10px; }
.profile-id { min-width: 0; }
.profile-name { font-weight: 700; font-size: 14px; }
.profile-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; color: var(--text); border: none; border-top: 1px solid var(--line);
  padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 9px;
}
.profile-item .pi-ic { color: var(--muted); flex: none; }
.profile-item.profile-signout .pi-ic { color: var(--crit); }
.profile-item:first-of-type { border-top: none; }
.profile-item:hover { background: var(--purple-bg); }
.profile-signout { color: var(--crit); font-weight: 700; }
.profile-signout:hover { background: var(--crit-bg); }

/* ---- Notifications ------------------------------------------------------- */
.notif-wrap { position: relative; }
.notif-bell {
  position: relative; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14); color: #fff;
  border-radius: 11px; padding: 8px 11px; cursor: pointer; font-size: 14px; line-height: 1;
}
.notif-bell:hover { background: rgba(255,255,255,0.18); }
.notif-count {
  position: absolute; top: -6px; right: -6px;
  background: #f0506e; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 1px 6px;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 330px; max-height: 420px; overflow: auto;
  background: var(--surface); color: var(--text); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(10,12,30,0.32); z-index: 50;
}
.notif-item { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13px; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--press); }
.notif-item.unread { background: var(--open-bg); }
/* Colour-coded by kind: a left bar + a tiny label, so replies / new tickets /
   overdue / assignments can be told apart at a glance (uses the theme tokens so
   dark mode follows). --nk is set per kind below. */
.notif-item { --nk: var(--hold-fg); box-shadow: inset 3px 0 0 var(--nk); }
.notif-item.unread { background: color-mix(in srgb, var(--nk) 10%, var(--surface)); }
.notif-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nk); margin-bottom: 2px; }
.nk-reply   { --nk: var(--open-fg); }
.nk-new     { --nk: var(--low-fg); }
.nk-overdue { --nk: var(--crit-fg); }
.nk-assign  { --nk: var(--purple); }
.nk-status  { --nk: var(--med-fg); }
.nk-rating  { --nk: var(--med-fg); }
.nk-kb      { --nk: var(--prog-fg); }
.nk-digest, .nk-other { --nk: var(--hold-fg); }
.notif-time { color: var(--faint); font-size: 11px; margin-top: 2px; }
.notif-empty { padding: 16px; color: var(--muted); font-size: 13px; }
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--line); font-family: "Plus Jakarta Sans", sans-serif;
}
.notif-action { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 12.5px; font-weight: 600; padding: 2px 6px; }
.notif-action:hover { background: none; text-decoration: underline; }
.notif-list { max-height: 360px; overflow-y: auto; }

/* The `hidden` attribute always wins — several components set `display: flex`
   on their class, which used to override it (Suggest-articles row, Scenarios
   bar, KB toolbar all stayed visible). */
[hidden] { display: none !important; }

/* ---- Layout -------------------------------------------------------------- */
main {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 28px;
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`: an auto track never shrinks below
     its content's intrinsic width, so one long nowrap subject (a 255-char
     Freshdesk loop subject did this) widened every card and the whole page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
main.wide { max-width: 1500px; }
main.dash { max-width: 1200px; }

.card {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--raise);
  padding: 24px;
}
.card h2 { margin-top: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.01em; }

.back-link { display: inline-block; margin-bottom: 16px; color: var(--purple); text-decoration: none; font-weight: 600; }
.back-link:hover { text-decoration: underline; }
.back-prev { margin-left: 14px; color: var(--muted); font-weight: 600; }
.back-prev::before { content: '·'; color: var(--faint); margin-right: 14px; }
/* Give the back-link a little breathing room below the dark header band. */
main:has(> .back-link) { padding-top: 18px; }
.muted { color: var(--muted); }
.error { color: var(--crit); font-weight: 600; min-height: 1em; margin: 0; }
.form-ok { color: var(--green-deep); font-weight: 600; }

h1, h2, h3 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -0.01em; }

/* ---- Forms / inputs ------------------------------------------------------ */
form { display: grid; gap: 12px; }
form[hidden] { display: none; }
/* Field labels: small uppercase + letter-spacing (matches the mockup forms). */
label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
label > input, label > select, label > textarea { font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text); }
label .muted { text-transform: none; letter-spacing: normal; font-weight: 400; }
/* Button-/control-like labels keep their natural casing. */
.attach-btn, .time-billable { text-transform: none; letter-spacing: normal; }

input, textarea, select {
  padding: 11px 13px;
  border: none;
  border-radius: 11px;
  font: inherit;
  background: var(--press);
  color: var(--text);
  box-shadow: var(--inset);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
input[type="checkbox"] { width: auto; padding: 0; border: 0; box-shadow: none; accent-color: var(--green); }

.checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.checkbox input { width: auto; }

/* ---- Buttons ------------------------------------------------------------- */
button {
  justify-self: start;
  background: var(--cta);
  color: #fff; border: none;
  padding: 11px 20px; border-radius: 12px;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 18px rgba(16,160,90,0.28);
  font-family: inherit;
}
button:hover { filter: brightness(1.03); }

.btn-primary {
  background: var(--cta); color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 20px; border-radius: 13px; box-shadow: 0 8px 18px rgba(16,160,90,0.32);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { filter: brightness(1.03); }

.btn-small {
  background: var(--cta); color: #fff; border: none;
  padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--raise-sm);
}
.btn-small:hover { filter: brightness(1.03); }

.btn-ghost {
  background: var(--surface); color: var(--text);
  border: none; box-shadow: var(--raise-sm);
}
.btn-ghost:hover { color: var(--purple); filter: none; }

.btn-secondary { background: var(--surface); color: var(--text); box-shadow: var(--raise-sm); }
.btn-secondary:hover { color: var(--purple); }

.btn-danger, .btn-small.btn-danger { background: var(--crit); color: #fff; border: none; box-shadow: var(--raise-sm); }
.btn-danger:hover, .btn-small.btn-danger:hover { filter: brightness(1.05); }

.btn-link { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 13px; padding: 4px 6px; box-shadow: none; font-weight: 600; }
.btn-link:hover { background: none; text-decoration: underline; filter: none; }
.btn-link.danger { color: var(--crit); }
.form-actions, .edit-actions { display: flex; gap: 10px; align-items: center; }
.edit-error { color: var(--crit); font-weight: 600; margin: 0; }

.result-box {
  margin-top: 10px; padding: 10px 12px;
  background: var(--low-bg); color: var(--low-fg);
  border: none; border-radius: 10px; font-size: 14px;
}

/* ---- Toasts (global error/info popups, see js/toast.js) ------------------- */
#toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  z-index: 9999; pointer-events: none;
}
.toast {
  max-width: 420px; padding: 10px 18px; border-radius: 10px; font-size: 14px;
  background: #23262f; color: #f0f1f5; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  border-left: 4px solid #ef4444;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.toast-info { border-left-color: #3b82f6; }
.toast-success { border-left-color: #16a34a; }
.toast-show { opacity: 1; transform: translateY(0); }

/* ---- Empty states ---------------------------------------------------------- */
.empty-state { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty-state .empty-ic { font-size: 30px; display: block; margin-bottom: 8px; }
.empty-state p { margin: 4px 0 12px; }

/* ---- Bug Reports (beta tracker) ------------------------------------------- */
.bug-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 18px 0 4px; }
.bug-group-title:first-child { margin-top: 0; }
.bug-row { border-top: 1px solid var(--line); }
.bug-row summary { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; list-style: none; }
.bug-row summary::-webkit-details-marker { display: none; }
.bug-status-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.bug-open .bug-status-dot { background: #ef4444; }
.bug-fixed .bug-status-dot { background: #22c55e; }
.bug-title { flex: 1; font-weight: 600; }
.bug-fixed .bug-title { color: var(--muted); font-weight: 500; }
.bug-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bug-body { padding: 0 4px 14px 23px; }
/* Screenshots on a bug report: thumbnails, click to open full-size. */
.bug-shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bug-shot { max-width: 220px; max-height: 160px; border-radius: 10px; box-shadow: var(--raise-sm); object-fit: cover; display: block; }
.bug-desc { margin: 4px 0 8px; line-height: 1.55; }

/* ---- Tasks --------------------------------------------------------------- */
/* Four cards straight across (the page is narrower than the dashboard, so the
   shared auto-fit rule would wrap them 3 + 1); phones get the usual 2 x 2. */
.stats.task-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.task-stats .stat-card { padding: 16px 18px; }
.task-quick { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.task-quick input { flex: 1; min-width: 0; }
.task-quick button { flex: none; white-space: nowrap; }
.task-views { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.task-row:hover { background: var(--blue-tint); }
.task-check {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 50%;
  border: 2px solid var(--blue); background: transparent; box-shadow: none; color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.task-check:hover { border-color: var(--green); background: var(--green-bg); filter: none; }
.task-done .task-check { background: var(--green); border-color: var(--green); }
.task-main { flex: 1; min-width: 0; }
.task-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.task-ref { display: inline-block; margin-right: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--purple); background: var(--purple-bg); padding: 1px 7px; border-radius: 6px; white-space: nowrap; vertical-align: 1px; }
.task-done .task-ref { color: var(--faint); }
.task-private { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--purple-bg); color: var(--purple); vertical-align: 1px; }
.task-done .task-title, .task-done .task-title a { color: var(--muted); font-weight: 500; text-decoration: line-through; }   /* an <a> inside resets text-decoration, so strike it too */
.task-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 12px; }
.task-due { color: var(--muted); font-weight: 600; }
.task-due.task-overdue { color: var(--crit-fg); }
.task-people { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.task-person { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); }
.task-person.muted { color: var(--muted); font-weight: 500; }
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.task-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-field { display: grid; gap: 6px; align-content: start; }
.task-field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.task-contact { position: relative; }
.task-contact input { width: 100%; }
.task-link { color: var(--purple); font-weight: 600; text-decoration: none; }
.task-link-person { color: var(--name); }
.task-link-ticket { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.task-link:hover { text-decoration: underline; }
.task-private-btn { justify-self: start; }
.task-private-hint { font-size: 12px; }
.task-privacy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.task-group-overdue { color: var(--crit-fg); }
.task-all-done { margin: 12px 4px; }
.task-done-group { margin-top: 18px; }
.task-done-group > summary { cursor: pointer; }
.merge-modal.task-modal { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
.task-modal form { display: flex; flex-direction: column; gap: 12px; }
.task-pick-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.task-pick-title .muted { text-transform: none; letter-spacing: normal; font-weight: 400; }
.task-pick-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.task-pick-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text); cursor: pointer; }
.task-pick-item input { width: auto; margin: 0; box-shadow: none; accent-color: var(--purple); }
.task-meta { font-size: 12px; margin: 0; }
.task-meta:empty { display: none; }
.task-delete { margin-left: auto; }
.nk-task { --nk: var(--purple); }
.nk-time { --nk: #d99a14; }
/* API keys card (Settings) + the "via API" tag in histories. */
.via-api { background: var(--purple-bg); color: var(--purple); }
.apikey-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.apikey-form .apikey-name { flex: 1; min-width: 220px; }
.apikey-form .apikey-name input { width: 100%; }
.table-scroll { overflow-x: auto; }
.apikey-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.apikey-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); padding: 6px 8px; }
.apikey-table td { padding: 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.apikey-table tr.apikey-dead td { color: var(--muted); }
.apikey-new { margin: 10px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--amber-bg); color: var(--amber-fg); font-size: 13px; }
.apikey-new[hidden] { display: none; }
.apikey-reveal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.apikey-reveal code { padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.apikey-doc { font-size: 12px; margin-top: 10px; }
/* "Cc: …" on a client's email, and the Cc'd row in the ticket details. */
.tl-tag.tl-cc { background: var(--press); color: var(--muted); white-space: normal; font-weight: 600; text-transform: none; letter-spacing: 0.01em; font-size: 11px; }
.cc-list { overflow-wrap: anywhere; }
.task-history { border-top: 1px solid var(--line); padding-top: 10px; }
.task-history > summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.task-history #task-history-list { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.task-history .activity-item { padding: 8px 4px; font-size: 13px; }
/* Reminder badge on the Tasks nav link + the chip in the dashboard hero. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.nav-badge.overdue { background: var(--crit); }
.nav-badge[hidden] { display: none; }
.dvo-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-task-chip { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hero-task-chip:hover { background: rgba(255,255,255,0.18); }
/* Tasks panel on the ticket page. */
.ticket-task { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
#ticket-task-list { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.ticket-task-main { flex: 1; min-width: 0; }
.ticket-task .task-title { font-size: 13px; font-weight: 600; }
.ticket-task .task-link { margin-right: 6px; font-size: 12px; white-space: nowrap; }
.ticket-task-sub { font-size: 12px; margin-top: 2px; }
.ticket-task-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ticket-task-form input[type="text"] { width: 100%; }
.ticket-task-form-row { display: flex; gap: 8px; align-items: flex-end; }
.ticket-task-form-row label { flex: 1; min-width: 0; }
.ticket-task-form-row label input { width: 100%; }
.ticket-task-hint { margin: 8px 0 0; font-size: 12px; }
.ticket-task-form-row label select { width: 100%; }
/* Calendar section in the task form (+ the delete button shared with the ticket page). */
.task-cal-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.task-cal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#task-cal-list { margin-top: 6px; }
.task-cal-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.task-cal-del { flex: none; background: none; border: none; box-shadow: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.task-cal-del:hover { background: var(--press); color: var(--crit-fg); filter: none; }
.ticket-task-form textarea { width: 100%; }
/* Services (what a company pays us for): chips on directory rows, the company
   panel, the ticket contact card; the Settings catalogue; the inline editor. */
.svc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--purple); background: rgba(124, 92, 255, 0.12);
}
.svc-chip-off { opacity: 0.5; text-decoration: line-through; }
.svc-chip-hit { background: var(--purple); color: #fff; }
.svc-plan { font-weight: 400; opacity: 0.8; }
.svc-head { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.svc-none { margin: 6px 0 0; font-size: 13px; }
.keep-lines { white-space: pre-line; }
.company-services { margin-bottom: 12px; }
.svc-editor { margin-top: 6px; }
.svc-edit-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.svc-edit-fields { display: grid; grid-template-columns: 1.2fr 0.7fr 1.5fr; gap: 8px; margin: 8px 0 0 22px; }
.svc-edit-fields input { width: 100%; font-size: 13px; padding: 8px 10px; }
/* Settings → Services */
.svc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.svc-off .svc-main { opacity: 0.55; }
.svc-desc { font-size: 13px; margin-top: 2px; }
.svc-form { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.svc-form-head { font-weight: 600; margin-bottom: 8px; }
.svc-form-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
.svc-cats-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 6px; }
.svc-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.svc-edit { padding: 6px 0; width: 100%; }
/* Ticket contact card: the company block + the Billable hint */
.company-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.company-block-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.company-block-title .btn-link { font-size: 12px; text-transform: none; letter-spacing: normal; }
.company-notes { margin-top: 10px; font-size: 13px; }
.company-notes-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.time-billable-hint { font-size: 12px; line-height: 1.4; flex-basis: 100%; }
.time-billable-hint:empty { display: none; }
@media (max-width: 700px) { .svc-edit-fields, .svc-form-grid { grid-template-columns: 1fr; } }
/* Contact badges (★ Primary / ✓ Approver / VIP / Left the company) — on
   directory rows, the contact panel, the ticket contact card and dashboard rows. */
.cbadges { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 2px 0; }
.cbadge {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap;
}
.cbadge { border-radius: 6px; font-weight: 800; letter-spacing: 0.04em; }
.cbadge-primary { background: var(--blue-bg); color: var(--blue-2); }
.cbadge-approve { background: var(--green-bg); color: var(--green-deep); }
.cbadge-vip { background: var(--amber-bg); color: var(--amber-fg); }
.cbadge-left { background: var(--crit-bg); color: var(--crit-fg); }
.cbadge-off { background: var(--hold-bg); color: var(--hold-fg); }
.directory-left .directory-name { text-decoration: line-through; opacity: 0.7; }
.contact-flags { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 10px; }
.contact-warn {
  margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: rgba(220, 60, 60, 0.1); color: #b32626;
}
.t-reporter .cbadge { font-size: 10px; padding: 0 6px; }
/* "Invite the client" on the ticket calendar form: tick box on its own line,
   the explanation underneath, and air before the Add button. */
.cal-invite { padding: 4px 0 6px; }
.ticket-task-form .cal-date { width: 100%; }
.cal-join { display: inline-block; margin-left: 4px; font-weight: 600; color: var(--purple); }
.cal-invite .task-pick-item { white-space: nowrap; }
.cal-invite-hint { font-size: 12px; margin: 4px 0 0 22px; line-height: 1.4; overflow-wrap: anywhere; }
.ticket-task-form button[type="submit"] { margin-top: 4px; }
#ticket-cal-who { margin-top: 12px; }
.ticket-task-form-row .task-field { flex: 1; min-width: 0; }
/* Compact time picker (time-picker.js): a box that opens a SHORT scrolling list. */
.time-pick { position: relative; }
.time-pick-btn {
  width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px;
  background: var(--press); color: var(--text); box-shadow: var(--inset);
  font-weight: 400; font-size: 14px; cursor: pointer;
}
.time-pick-btn:hover { filter: none; }
.time-pick-btn.time-pick-empty { color: var(--faint); }
.time-pick-btn:disabled { opacity: 0.5; cursor: default; }
.time-pick-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 196px; overflow-y: auto; padding: 4px;
  background: var(--surface); border-radius: 12px; box-shadow: 0 12px 30px rgba(10,12,30,0.22);
}
.time-pick-menu[hidden] { display: none; }
.time-pick-opt {
  display: block; width: 100%; min-height: 0; text-align: left; padding: 7px 10px; border-radius: 8px;
  background: none; color: var(--text); box-shadow: none; font-weight: 500; font-size: 13px; cursor: pointer;
}
.time-pick-opt:hover { background: var(--press); filter: none; }
.time-pick-opt.selected { background: var(--purple-bg); color: var(--purple); font-weight: 700; }

/* ---- Login --------------------------------------------------------------- */
.login-card { max-width: 380px; margin: 56px auto; }
#forgot-link a, #twofa-resend { color: var(--purple); }
/* "Remember this device" checkbox on the 2FA step — inline, not a stacked field. */
.twofa-remember {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px; font-size: 14px; color: var(--muted); cursor: pointer;
}
.twofa-remember input { width: auto; margin: 0; accent-color: var(--purple); }

/* ---- Auth split-screen (login) — dark brand panel + neumorphic card ------ */
.auth-body { margin: 0; }
.auth-split { display: flex; min-height: 100vh; }
.auth-brand {
  position: relative; flex: 0 0 44%; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 46px 52px;
  background: radial-gradient(130% 120% at 75% 5%, #2a1f5e 0%, #181a3e 46%, #0e1030 100%);
}
.auth-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 55% at 18% 95%, rgba(124,58,237,0.45), transparent 70%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-logo { display: flex; align-items: center; gap: 12px; }
.auth-wm { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.auth-wm-data { background: linear-gradient(90deg,#2dd4bf,#60a5fa 52%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.auth-wm-options { color: #fff; }
.auth-wm-tag { padding: 4px 11px; border-radius: 8px; background: rgba(167,139,250,0.22); color: #cbb8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
/* Client/Support flavour of the login brand panel: green tag + teal eyebrow. */
.auth-wm-tag-support { background: rgba(45,212,191,0.22); color: #9beede; }
.auth-eyebrow-support { color: #9beede; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #c9b8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.auth-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.auth-headline { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: #fff; margin: 0 0 16px; line-height: 1.08; }
.auth-headline span { background: linear-gradient(90deg,#a78bfa,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.auth-sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 380px; margin: 0; }
.auth-brand-foot { display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,0.4); font-size: 12.5px; }
.auth-brand-foot .auth-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; margin: 0; padding: 40px 38px; }
.auth-card-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; }
.auth-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 12px; color: var(--faint); }
.auth-switch { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--purple); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ---- Client portal info footer ------------------------------------------- */
.portal-footer { margin-top: 56px; background: var(--surface); border-top: 1px solid var(--line); }
.portal-footer-inner { max-width: 1000px; margin: 0 auto; padding: 34px 28px 20px; display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.pf-brand { flex: 1 1 240px; min-width: 220px; }
.pf-wm { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.pf-wm .wm-data { background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pf-wm .wm-options { color: var(--text); margin-left: 5px; }
.pf-tag { margin: 10px 0 0; font-size: 13px; color: var(--muted); max-width: 280px; }
.pf-col { display: flex; flex-direction: column; gap: 10px; }
.pf-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.pf-line { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); text-decoration: none; }
a.pf-line:hover { color: var(--purple); }
.pf-line svg { width: 15px; height: 15px; flex: none; color: var(--purple); }
.pf-social { display: flex; gap: 10px; }
.pf-social a { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); box-shadow: var(--raise-sm); color: var(--purple); }
.pf-social a:hover { color: var(--purple-2); }
.pf-social svg { width: 18px; height: 18px; }
.pf-bottom { max-width: 1000px; margin: 0 auto; padding: 14px 28px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
@media (max-width: 860px) {
  .auth-split { flex-direction: column; }
  .auth-brand { flex: none; padding: 32px; gap: 22px; }
  .auth-headline { font-size: 30px; }
  .auth-main { padding: 28px 18px; }
}

/* ---- Pill badges --------------------------------------------------------- */
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--press); color: var(--muted);
}
/* User role badges: Global Admin = purple, others = neutral grey. */
.badge.role-ga { background: var(--purple-bg); color: var(--purple); }
.twofa-on { color: var(--amber-fg); font-weight: 600; }
.priority-low { background: var(--low-bg); color: var(--low-fg); }
.priority-medium { background: var(--med-bg); color: var(--med-fg); }
.priority-high { background: var(--high-bg); color: var(--high-fg); }
.priority-critical { background: var(--crit-bg); color: var(--crit-fg); }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; border: none; background: var(--press); color: var(--muted); white-space: nowrap;
}
.chip.st-open        { color: var(--blue-2);   background: var(--blue-bg); }
.chip.st-in-progress { color: var(--prog-fg);   background: var(--prog-bg); }
.chip.st-on-hold     { color: var(--hold-fg);   background: var(--hold-bg); }
.chip.st-resolved    { color: var(--resolved-fg); background: var(--resolved-bg); }
.chip.st-closed      { color: var(--closed-fg); background: var(--closed-bg); }

a.import-badge { text-decoration: none; }
a.import-badge:hover { text-decoration: underline; }
.import-badge {
  display: inline-block; background: var(--purple-bg); color: var(--purple);
  border: none; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700;
}
.merged-banner {
  margin: 8px 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: var(--purple-bg); color: var(--purple); border-left: 3px solid var(--purple);
}
.merged-banner a { color: inherit; text-decoration: underline; }
.via-email { font-size: 11px; background: var(--info-bg); color: var(--info-fg); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }

/* SLA pills */
.sla-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sla-green { background: var(--low-bg); color: var(--low-fg); }
.sla-yellow { background: var(--med-bg); color: var(--med-fg); }
.sla-red { background: var(--crit-bg); color: var(--crit-fg); }
.sla-done { background: var(--press); color: var(--muted); }

/* ---- Dashboard ----------------------------------------------------------- */
.dashboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dashboard-head h2 { font-size: 28px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 8px; }
.stat-card { background: var(--surface); border-radius: 18px; box-shadow: var(--raise); padding: 20px 22px; }
/* Dashboard / Analytics tiles: icon beside the number, a coloured top edge by meaning. */
.stat-tile { display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px; border-radius: 14px; border-top: 3px solid var(--blue); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.stat-tile:hover { transform: translateY(-1px); }
.stat-tile.tone-open { border-top-color: var(--blue); }
.stat-tile.tone-crit { border-top-color: var(--crit); }
.stat-tile.tone-low, .stat-tile.tone-closed { border-top-color: var(--green); }
.stat-tile.tone-purple { border-top-color: var(--purple); }
.stat-tile .stat-icon { margin: 0; width: 40px; height: 40px; flex: 0 0 40px; }
.stat-tile .stat-number { font-size: 28px; color: var(--text); }
.stat-tile .stat-number.tone-crit { color: var(--crit-fg); }
.stat-tile .stat-label { margin-top: 3px; font-size: 12.5px; }
.stat-icon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--purple-bg); color: var(--purple); }
.stat-icon.tone-open { background: var(--blue-bg); color: var(--blue-2); }
.stat-icon.tone-crit { background: var(--crit-bg); color: var(--crit-fg); }
.stat-icon.tone-low { background: var(--low-bg); color: var(--low-fg); }
.stat-icon.tone-purple { background: var(--purple-bg); color: var(--purple); }
.stat-icon.tone-closed { background: var(--closed-bg); color: var(--closed-fg); }
.stat-number { font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 800; color: var(--purple); line-height: 1; }
.stat-number.tone-crit { color: var(--crit-fg); }
.stat-number.tone-low { color: var(--text); }
.stat-number.tone-closed { color: var(--closed-fg); }
/* Analytics summary numbers are colour-coded per metric (scoped so the dashboard keeps purple). */
#a-cards .stat-number.tone-open { color: var(--open-fg); }
#a-cards .stat-number.tone-low { color: var(--low-fg); }
.stat-label { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Filters */
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.filter-field {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
/* A filter that is narrowing the list reads blue (app.js sets .is-set). */
.filter-field.is-set select, .filter-field.is-set .apick-btn { background: var(--blue-bg); color: var(--blue-2); box-shadow: none; }
/* The class sets display:flex, which would otherwise override [hidden]. */
.filter-field[hidden] { display: none; }
/* Assignee multi-pick: a select-looking button that opens a checkbox list. */
.apick-wrap { position: relative; }
.apick-btn {
  width: 100%; text-align: left; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--text); padding: 9px 12px; border: none; border-radius: 11px; background: var(--press); box-shadow: var(--inset); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apick-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border-radius: 12px; box-shadow: var(--raise); padding: 6px; display: flex; flex-direction: column;
}
.apick-menu[hidden] { display: none; }
.apick-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.apick-item:hover { background: var(--press); }
.apick-item input { width: auto; margin: 0; box-shadow: none; accent-color: var(--purple); }
.apick-all { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.filter-field select {
  width: 100%; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--text); padding: 9px 12px; border: none; border-radius: 11px;
  background: var(--press); box-shadow: var(--inset); cursor: pointer;
}
.filters #f-reset { flex: 0 0 auto; margin-bottom: 1px; }
.filter-btn { background: var(--surface); border: none; color: var(--text); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; box-shadow: var(--raise-sm); }
.filter-btn.active { background: var(--purple); color: #fff; }

/* Ticket rows */
.ticket-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 15px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; font-size: 14px; }
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: var(--blue-tint); }
.ticket-row.row-overdue { border-left-color: var(--crit); }
.ticket-row > .av { align-self: flex-start; margin-top: 2px; }
/* Closed/Resolved tickets: greyed out (still clickable), brighten on hover. */
.ticket-row.ticket-done { opacity: 0.55; transition: opacity .15s; }
.ticket-row.ticket-done:hover { opacity: 1; }

/* ---- Merge selection (dashboard) ----------------------------------------- */
.t-merge { display: flex; align-items: center; padding-top: 2px; flex: none; margin: 0; }
.t-merge-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--purple); box-shadow: none; }
.ticket-row.row-selected { border-left-color: var(--purple); background: var(--purple-bg); }
.merge-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px;
  background: var(--surface); border-radius: 14px; box-shadow: var(--raise);
  z-index: 120; opacity: 0; transition: transform .18s ease, opacity .18s ease; pointer-events: none;
}
.merge-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.merge-bar-count { font-weight: 700; font-size: 13.5px; color: var(--text); }
.merge-overlay {
  position: fixed; inset: 0; background: rgba(10,12,30,0.45); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* An overlay placed in the HTML and toggled via [hidden] needs this, because the
   display:flex above otherwise overrides the browser's [hidden]{display:none}. */
.merge-overlay[hidden] { display: none; }
.merge-modal { width: 100%; max-width: 460px; margin: 0; }
.merge-modal h2 { margin-top: 0; }
.bulk-delete-list { max-height: 220px; overflow-y: auto; margin: 10px 0; padding-left: 20px; font-size: 13.5px; }
.bulk-delete-list li { margin: 4px 0; }
.merge-opts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.merge-opt {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--press); box-shadow: var(--inset); cursor: pointer; font-size: 14px;
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--text);
}
.merge-opt input { width: auto; box-shadow: none; accent-color: var(--purple); }
.overdue-badge { flex-shrink: 0; display: inline-block; background: var(--crit-bg); color: var(--crit-fg); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; }

/* Three evenly spaced lines: id + subject · who / last reply / SLA · chips. */
.t-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.t-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.t-id { font-weight: 600; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; text-decoration: none; color: var(--purple); white-space: nowrap; flex: 0 0 auto; }
.t-subject { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; }
.t-top:hover .t-subject { text-decoration: underline; }
.t-sub { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.t-reporter { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.t-reporter-name { color: var(--name); font-weight: 700; text-decoration: none; }
a.t-reporter-name:hover { text-decoration: underline; }
.t-sep { color: var(--faint); }
.t-company { color: var(--muted); font-weight: 500; text-decoration: none; }
.t-company:hover { color: var(--blue-2); text-decoration: underline; }
.t-lastresp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sla { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 10px; }
.t-mchips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-agent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.t-agent-none { color: var(--faint); font-weight: 500; }
.t-category { display: inline-flex; align-items: center; gap: 8px; }
.t-cat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); flex-shrink: 0; }
.t-category .row-select { width: 190px; flex: none; font-size: 12px; padding: 5px 9px; }
.resp-agent { color: var(--muted); }
.resp-client { color: var(--blue-2); font-weight: 700; }
/* Priority pill with a dot (dashboard rows). */
.prio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11.5px; }
.prio-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.t-assignee { flex: 0 0 130px; font-size: 13px; }
.row-sla { flex: 0 0 95px; display: flex; justify-content: flex-end; }

.row-select {
  flex: 0 0 130px; font-size: 12px; font-weight: 600; padding: 6px 9px;
  border: none; border-radius: 9px; background: var(--press); box-shadow: var(--inset); color: var(--text); cursor: pointer;
}
.row-select.prio-low { background: var(--low-bg); color: var(--low-fg); box-shadow: none; }
.row-select.prio-medium { background: var(--med-bg); color: var(--med-fg); box-shadow: none; }
.row-select.prio-high { background: var(--high-bg); color: var(--high-fg); box-shadow: none; }
.row-select.prio-critical { background: var(--crit-bg); color: var(--crit-fg); box-shadow: none; }
.row-select.st-open { background: var(--blue-bg); color: var(--blue-2); box-shadow: none; }
.row-select.st-in-progress { background: var(--prog-bg); color: var(--prog-fg); box-shadow: none; }
.row-select.st-on-hold { background: var(--hold-bg); color: var(--hold-fg); box-shadow: none; }
.row-select.st-resolved { background: var(--resolved-bg); color: var(--resolved-fg); box-shadow: none; }
.row-select.st-closed { background: var(--closed-bg); color: var(--closed-fg); box-shadow: none; }
/* The OPEN dropdown list: keep options neutral so they don't all inherit the
   colour of the currently-selected status/priority. */
.row-select option { background: var(--surface); color: var(--text); font-weight: 600; }

.row-controls { display: grid; grid-template-columns: auto 150px; gap: 7px 10px; align-items: center; flex-shrink: 0; align-self: center; }
.row-line { display: contents; }
.row-line-label { text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.row-line .row-select { width: 150px; flex: none; box-sizing: border-box; }
.row-line .t-assignee { width: 150px; flex: none; text-align: left; }

/* Pager */
.pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; padding: 4px; }
.pager[hidden] { display: none; }   /* respect the hidden attribute (e.g. on contact/company detail views) */
.pager:empty { display: none; }     /* no controls → take up no space */
.pager-info { color: var(--muted); font-size: 13px; }
/* "Per page" always sits at the far right of the bar. */
.pager .pager-size { margin-left: auto; }
.pager-size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pager-size select { padding: 6px 10px; border-radius: 9px; border: none; background: var(--press); box-shadow: var(--inset); color: var(--text); }
/* A pager placed ABOVE a list: tuck it up against the list, no top gap. */
.pager-top { margin-top: 0; margin-bottom: 12px; }

/* ---- App settings toggles ------------------------------------------------ */
.set-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-text strong { font-size: 14px; }
.set-text .muted { font-size: 13px; margin-top: 3px; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--press); box-shadow: var(--inset); border-radius: 999px; transition: background 0.15s; }
.switch-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; box-shadow: var(--raise-sm); transition: transform 0.15s; }
.switch input:checked + .switch-slider { background: var(--purple); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; }
.ai-controls { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 6px; }
.ai-controls label { font-size: 12px; }
.ai-controls select { padding: 8px 12px; border-radius: 10px; border: none; background: var(--press); box-shadow: var(--inset); color: var(--text); }

/* ---- Ticket detail ------------------------------------------------------- */
/* Top line: the number as a purple mono tag, status chip, SLA pill. */
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head h2 { margin: 0; }
.t-id-tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-weight: 600; color: var(--purple); background: var(--purple-bg); padding: 4px 10px; border-radius: 8px; letter-spacing: 0; }
.detail-sla { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.detail-subject { font-family: "Plus Jakarta Sans", sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 12px 0 14px; line-height: 1.25; text-wrap: balance; }
/* Status + SLA rows of the field list repeat the top line — desktop hides them, the phone layout uses them. */
.desk-hide { display: none; }
body.mobile .desk-hide { display: block; }
dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 18px 0; align-items: center; }
dl.fields dt { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
dl.fields dd { margin: 0; color: var(--text); font-weight: 500; }
dl.fields dd a { color: var(--name); font-weight: 600; text-decoration: none; }
dl.fields dd a:hover { text-decoration: underline; }
.inline-select { font-size: 13px; padding: 7px 11px; max-width: 240px; border-radius: 10px; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--press); border: none; box-shadow: var(--inset); border-radius: 10px; padding: 12px 14px; max-height: 220px; overflow-y: auto; }
.description-pointer { background: none; box-shadow: none; border: none; padding: 0; font-style: italic; color: var(--muted); }
.desc-origin-ic { vertical-align: -2px; color: var(--purple); }
/* A description staff wrote when opening the ticket (in-house; never shown to the client). */
.desc-internal-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--amber-fg); }
.desc-internal #desc-files:not(:empty) { margin-top: 8px; }
body.mobile .desc-internal .description { display: block; }

/* Two-column body of the ticket-detail card: details on the left, AI summary
   panel on the right (collapses to a stack on narrow screens). */
.detail-body-row { display: flex; gap: 22px; align-items: flex-start; }
.detail-body-main { flex: 1 1 0; min-width: 0; }
.detail-body-main .detail-head { margin-top: 0; }

.ai-summary-panel {
  flex: 0 0 clamp(240px, 34%, 320px);
  align-self: flex-start;
  background: var(--purple-bg);
  box-shadow: var(--inset);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.ai-summary-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.95rem;
  color: var(--purple);
}
.ai-summary-head .ai-ic { color: var(--purple); flex: none; }
.ai-summary-head span { flex: 1 1 auto; }
.ai-summary-refresh {
  background: none; border: none; cursor: pointer; color: var(--purple);
  font-size: 1rem; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.ai-summary-refresh:hover { background: rgba(124,58,237,0.12); }
.ai-summary-body {
  font-size: 0.92rem; color: var(--text); line-height: 1.55;
  overflow-wrap: anywhere; overflow-y: auto;
}
.ai-summary-placeholder { font-style: italic; }
.ai-summary-text { white-space: normal; }
.ai-summary-meta { margin-top: 10px; font-size: 0.78rem; color: var(--faint); }
.ai-summary-gen { margin-top: 10px; font-size: 0.82rem; padding: 7px 12px; }
.ai-suggest-btn { margin-left: 8px; font-size: 0.8rem; color: var(--purple); cursor: pointer; }
.ai-suggest-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 760px) {
  .detail-body-row { flex-direction: column; }
  .ai-summary-panel { flex: none; width: 100%; }
}

.assign-actions, .sla-actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.assign-actions select, .sla-actions input[type="datetime-local"] {
  padding: 9px 12px; border: none; border-radius: 10px; font: inherit; background: var(--press); box-shadow: var(--inset); color: var(--text);
}
.sla-actions input[type="datetime-local"] { font-size: 13px; max-width: 220px; }

.status-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-actions > strong { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.status-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0; }
.status-btn { background: var(--press); color: var(--muted); border: none; padding: 8px 15px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; box-shadow: var(--inset); }
.status-btn[data-status="Open"]        { background: var(--blue-bg); color: var(--blue-2); box-shadow: none; }
.status-btn[data-status="In Progress"] { background: var(--prog-bg); color: var(--prog-fg); }
.status-btn[data-status="On Hold"]     { background: var(--hold-bg); color: var(--hold-fg); }
.status-btn[data-status="Resolved"]    { background: var(--resolved-bg); color: var(--resolved-fg); }
.status-btn[data-status="Closed"]      { background: var(--closed-bg); color: var(--closed-fg); }
.status-btn:hover { filter: brightness(0.98); }
.status-btn.current { color: #fff; cursor: default; box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.status-btn.current[data-status="Open"]        { background: var(--blue); }
.status-btn.current[data-status="In Progress"] { background: var(--prog-fg); }
.status-btn.current[data-status="On Hold"]     { background: var(--hold-fg); }
.status-btn.current[data-status="Resolved"]    { background: var(--resolved-fg); }
.status-btn.current[data-status="Closed"]      { background: var(--closed-fg); }

/* Reply / note compose */
.box-hint { margin-top: -4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.reply-card { border-left: 4px solid var(--open-fg); }
.reply-card .box-hint { color: var(--open-fg); }
.note-card { background: var(--amber-bg); border-left: 4px solid var(--amber-accent); }
.note-card .box-hint { color: var(--amber-fg); }
.btn-note { background: var(--amber-accent); box-shadow: var(--raise-sm); }
.btn-note:hover { filter: brightness(1.05); }

.btn-reply-open { margin-top: 8px; background: var(--open-bg); color: var(--open-fg); border: none; box-shadow: none; border-radius: 11px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.btn-reply-open:hover { filter: brightness(0.97); }
.status-btn.status-quiet { background: var(--press); color: var(--muted); border: 1px dashed var(--line); }
.status-btn.status-quiet:hover { color: var(--text); }
.reply-buttons { display: flex; gap: 10px; align-items: center; }
/* Send ▾ split button + "Send and set as…" menu */
.send-split { position: relative; display: inline-flex; align-items: stretch; }
.send-split button[type="submit"] { border-radius: 12px 0 0 12px; }
.send-caret { border-radius: 0 12px 12px 0; padding: 11px 12px; margin-left: 1px; font-size: 13px; }
.send-menu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 190px; background: var(--surface); border-radius: 12px; box-shadow: var(--raise); padding: 6px; z-index: 30; }
.send-menu[hidden] { display: none; }
.send-menu-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.send-menu button { display: block; width: 100%; text-align: left; background: none; color: var(--text); box-shadow: none; border-radius: 8px; padding: 9px 10px; font-weight: 600; }
.send-menu button:hover { background: var(--blue-tint); color: var(--blue-2); filter: none; }
.btn-note-open { margin-top: 8px; background: var(--amber-bg); color: var(--amber-fg); border: none; box-shadow: none; border-radius: 11px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.btn-note-open:hover { filter: brightness(0.97); }

/* Recipient picker */
.recip-field { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.recip-label { width: 26px; flex-shrink: 0; padding-top: 9px; font-size: 13px; font-weight: 600; color: var(--muted); }
.recip-box { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: none; border-radius: 11px; padding: 5px 7px; min-height: 38px; cursor: text; background: var(--press); box-shadow: var(--inset); }
.recip-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-bg); color: var(--purple); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; }
.recip-chip button { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; box-shadow: none; }
.recip-input { flex: 1; min-width: 130px; border: none; outline: none; padding: 4px; font: inherit; background: transparent; box-shadow: none; color: var(--text); }
.recip-suggest { position: absolute; top: 100%; left: 34px; right: 0; z-index: 20; margin-top: 4px; background: var(--surface); border: none; border-radius: 12px; box-shadow: 0 12px 30px rgba(10,12,30,0.22); max-height: 220px; overflow-y: auto; }
.recip-option { display: flex; flex-direction: column; padding: 8px 12px; cursor: pointer; }
.recip-option.active, .recip-option:hover { background: var(--purple-bg); }
.recip-opt-name { font-size: 13px; font-weight: 600; }
.recip-opt-email { font-size: 12px; color: var(--muted); }
/* Reporter autocomplete on the New Ticket form (dropdown anchored to the input).
   Keep the base label's grid layout (subheading above a full-width input) —
   only add positioning context so the dropdown anchors correctly. */
.reporter-field { position: relative; }
.reporter-suggest { left: 0; }

.quote-toggle { display: inline-block; background: var(--press); color: var(--muted); border: none; border-radius: 6px; height: 20px; line-height: 18px; padding: 0 10px; margin: 6px 0 0; font-weight: 700; letter-spacing: 1px; cursor: pointer; box-shadow: none; }
.quote-toggle:hover { filter: brightness(0.97); }
.quoted-thread { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.quote-toggle-label { font-weight: 600; letter-spacing: 0; text-transform: lowercase; font-size: 11px; }
/* A forwarded email is the content, not history: shown open, full colour,
   with a violet edge so it still reads as "the email they passed along". */
.quoted-thread.forwarded { color: var(--text); border-left-color: var(--purple); }

/* Templates toolbar */
.tpl-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tpl-picker { font-size: 13px; padding: 7px 10px; border: none; border-radius: 9px; background: var(--press); box-shadow: var(--inset); color: var(--text); max-width: 220px; }
.tpl-save { font-size: 13px; padding: 7px 12px; background: var(--purple-bg); color: var(--purple); border: none; border-radius: 9px; cursor: pointer; box-shadow: none; font-weight: 600; }
.tpl-save:hover { filter: brightness(0.97); }

/* Templates management page */
.tpl-group-head { margin: 18px 0 8px; font-size: 14px; color: var(--text); font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; }
.tpl-group-head:first-child { margin-top: 0; }
.tpl-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tpl-row-title { font-weight: 700; margin-right: 8px; }
.tpl-kind-chip { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--open-bg); color: var(--open-fg); vertical-align: middle; font-weight: 600; }
/* Template kind chips: client-reply = blue, internal-note = amber/orange. */
.tpl-kind-chip.kind-email { background: var(--open-bg); color: var(--open-fg); }
.tpl-kind-chip.kind-note { background: var(--amber-bg); color: var(--amber-fg); }
/* Company name chip beside a contact (Contacts page) — purple, not the blue default. */
.tpl-kind-chip.company-chip { background: var(--blue-bg); color: var(--blue-2); font-weight: 700; font-size: 12px; padding: 3px 10px; text-decoration: none; }
a.tpl-kind-chip.company-chip:hover { background: var(--blue); color: #fff; }
/* Gold default-template stars. */
.tpl-star { color: #e0a93b; -webkit-text-fill-color: #e0a93b; }
.tpl-row-preview { font-size: 12px; margin-top: 4px; line-height: 1.5; white-space: pre-wrap; max-height: 3em; overflow: hidden; color: var(--muted); }
.tpl-row-preview.expanded { max-height: none; }
.tpl-more { margin-top: 4px; }
.tpl-row-actions { white-space: nowrap; }

/* ---- Activity timeline --------------------------------------------------- */
.activity-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity-item:last-child { border-bottom: none; }
.activity-item.type-comment { background: var(--open-bg); border-left: 3px solid var(--open-fg); border-radius: 8px; }
.activity-item.internal { background: var(--amber-bg); border-left: 3px solid var(--amber-accent); border-radius: 8px; }
.activity-time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.tl-tag { display: inline-block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 8px; border-radius: 6px; }
.tl-client { background: var(--green-bg); color: var(--green-deep); }
.tl-internal { background: var(--amber-bg); color: var(--amber-fg); }
.tl-in { background: var(--blue-bg); color: var(--blue-2); }

/* ---- Lists / generic rows ------------------------------------------------ */
.list-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.list-row:last-child { border-bottom: none; }

/* ---- Tables (users / agents / billing) ----------------------------------- */
.user-table, .agent-table, .bill-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.user-table th, .agent-table th, .bill-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 700;
}
.user-table td, .agent-table td, .bill-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.user-main-row:hover, .agent-table tbody tr:hover, .bill-table tbody tr:hover { background: var(--press); }
.user-actions-cell { text-align: right; white-space: nowrap; }
.user-actions-cell .btn-small { margin-left: 6px; }
.user-edit-row td { background: var(--press); }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.edit-grid label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }

/* ---- Analytics ----------------------------------------------------------- */
#a-body { display: flex; flex-direction: column; gap: 24px; }
#a-body .stats { margin-bottom: 0; }
/* Analytics summary: all six cards in one straight row (like the mockup). */
#a-cards { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { #a-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { #a-cards { grid-template-columns: repeat(2, 1fr); } }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
/* Hand-rolled SVG line charts (Trends) */
.line-chart { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-ytick { fill: var(--muted); font-size: 10px; text-anchor: end; }
.chart-xtick { fill: var(--muted); font-size: 10px; }
.trend-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 14px 0 2px; }
.trend-subhead:first-of-type { margin-top: 8px; }
/* Per-category drill-down rows */
.cat-row { border-bottom: 1px solid var(--line); padding: 4px 0; }
.cat-row > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; flex-wrap: wrap; }
.cat-row > summary::-webkit-details-marker { display: none; }
.cat-row > summary::before { content: '▸'; color: var(--muted); font-size: 0.85em; margin-right: 6px; }
.cat-row[open] > summary::before { content: '▾'; }
.cat-name { font-weight: 700; }
.cat-meta { font-size: 13px; }
.cat-subtable { margin: 4px 0 10px; }
.cat-assisted, .kb-assisted { font-size: 13px; margin: 0 0 12px; }
/* Keep the long By-Company / By-Category lists from filling the screen. */
#a-company, #a-category-detail { max-height: 360px; overflow-y: auto; }
/* Article links in analytics tables match the app's purple aesthetic (not browser blue). */
.agent-table a { color: var(--purple); font-weight: 600; text-decoration: none; }
.agent-table a:hover { text-decoration: underline; }
/* By Agent table: colour-coded numbers (match the mockup). */
.agent-table .num-open { color: var(--open-fg); font-weight: 700; }
.agent-table .num-closed { color: var(--closed-fg); font-weight: 700; }
.agent-table .num-billable { color: var(--green); font-weight: 700; }
.chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.chart-head h2 { margin: 0; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 11px 0; font-size: 13px; }
.bar-label { width: 120px; flex-shrink: 0; color: var(--text); font-weight: 500; }
.bar-track { flex: 1; background: var(--press); box-shadow: var(--inset); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; min-width: 2px; }
.bar-count { width: 40px; text-align: right; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; flex-shrink: 0; color: var(--text); }
.trend-chart { display: flex; align-items: stretch; gap: 12px; height: 180px; margin-top: 12px; }
.trend-week { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.trend-bar { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-label { font-size: 11px; color: var(--muted); }
.time-billable { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.time-nb { display: inline-block; background: var(--amber-bg); color: var(--amber-fg); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; }

/* ---- Billing ------------------------------------------------------------- */
#b-report { display: flex; flex-direction: column; gap: 16px; }
#b-body .filters { flex-wrap: wrap; }
#b-body .filter-field { flex: 0 0 auto; }
.bill-grandtotal { margin-left: auto; align-self: center; flex-shrink: 0; font-size: 15px; color: var(--muted); }
.bill-total-val { color: var(--green); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; }
.bill-company { padding: 0; overflow: hidden; }
.bill-company-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--press); border-bottom: 1px solid var(--line); border-left: 5px solid var(--green); }
.bill-company-name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 18px; color: var(--text); }
.bill-company-total { font-weight: 800; font-size: 16px; color: var(--green); }
.bill-table .num { text-align: right; font-weight: 700; white-space: nowrap; }
.bill-table tbody tr:last-child td { border-bottom: none; }
.bill-table a { color: var(--purple); font-weight: 600; text-decoration: none; }
.bill-table a:hover { text-decoration: underline; }

/* ---- Devices ---- */
.filter-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; }
.device-owner-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.owner-matched { background: rgba(22,163,74,.12); color: var(--green); }
.owner-review { background: rgba(217,119,6,.14); color: #b45309; }
.owner-unassigned { background: var(--press); color: var(--muted); }
.owner-manual { background: var(--purple-bg, rgba(124,58,237,.12)); color: var(--purple); }
.tpl-kind-chip.device-nocompany { background: var(--press); color: var(--muted); }
.device-source-name { font-weight: 700; text-transform: capitalize; }
/* 3CX extensions directory */
.tpl-kind-chip.ext-phone-chip { background: var(--ok-bg, rgba(16,185,129,.12)); color: var(--ok, #059669); }
.tpl-kind-chip.ext-soft-chip { background: var(--press); color: var(--muted); }
.reg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.reg-dot.reg-on { background: var(--ok, #10b981); }
.reg-dot.reg-off { background: var(--border, #cbd5e1); }
/* Device lifecycle (health) chips + detail + overview bar */
.life-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.life-good { background: rgba(16,185,129,.12); color: #059669; }
.life-aging { background: rgba(245,158,11,.15); color: #b45309; }
.life-replace { background: rgba(239,68,68,.13); color: #dc2626; }
.life-unknown { background: var(--press); color: var(--muted); }
.life-detail { border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; border: 1px solid var(--border); }
.life-detail.life-replace { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); }
.life-detail.life-aging { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3); }
.life-detail.life-good { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.25); }
.life-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.life-reasons { margin: 8px 0 0; padding-left: 18px; font-size: .85rem; }
.life-reasons li { margin: 2px 0; }
.life-r-replace { color: #dc2626; }
.life-r-aging { color: #b45309; }
.life-rec { margin-top: 8px; font-weight: 600; font-size: .85rem; }
.life-ai-at { margin-top: 6px; font-size: .72rem; }
.life-sec { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.life-sec-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.life-r-info { color: var(--text); }
.lifecycle-bar { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.life-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; cursor: pointer; background: var(--card, #fff); min-width: 96px; }
.life-cell:hover { box-shadow: var(--raise-sm); }
.life-cell-n { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.life-cell-l { font-size: .72rem; font-weight: 600; color: var(--muted); }
.life-cell.life-replace .life-cell-n { color: #dc2626; }
.life-cell.life-aging .life-cell-n { color: #b45309; }
.life-cell.life-good .life-cell-n { color: #059669; }
/* 3CX extension detail panel */
.ext-detail-title { margin: 0 0 8px; font-size: 1.05rem; }
.ext-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ext-section { font-weight: 700; margin: 14px 0 6px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.ext-call-box { background: var(--press); border-radius: 8px; padding: 10px 12px; }
.ext-call-live { color: var(--crit); font-weight: 700; }
.ext-call-idle { color: var(--muted); }
.ext-tix-head { font-weight: 700; margin: 12px 0 6px; }
.ext-tix-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: inherit; }
.ext-tix-row:hover { background: var(--press); }
.ext-tix-id { font-weight: 700; color: var(--purple); white-space: nowrap; }
.ext-tix-subj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Override panel */
.device-override-body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.device-override-body label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.device-override-body select, .device-override-body input, .device-override-body textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 400; }
.device-owner-results { display: flex; flex-direction: column; gap: 2px; }
.device-owner-opt { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 13px; }
.device-owner-opt:hover { background: var(--press); }
/* Unmapped-sites banner */
.device-banner { background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.3); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 14px; }
.device-sites-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.device-site-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.device-site-name { min-width: 200px; font-weight: 600; }
.device-site-input { flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }

/* Manage-sites modal */
.dashboard-head-actions { display: flex; align-items: center; gap: 10px; }
.sites-modal { width: 100%; max-width: 720px; margin: 0; max-height: 82vh; overflow-y: auto; position: relative; }
.sites-modal h2 { margin-top: 0; }
.sites-modal-hint { margin: -4px 0 14px; }
.sites-group-title { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.sites-group-title:first-of-type { margin-top: 4px; }
.site-manage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.site-manage-name { flex: 1; min-width: 180px; font-weight: 600; }
.site-status-chip { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.site-status-chip.mapped { background: rgba(22,163,74,.12); color: var(--green); }
.site-status-chip.unmapped { background: rgba(217,119,6,.14); color: #b45309; }
.site-status-chip.ignored { background: var(--press); color: var(--muted); }
.site-manage-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ignore is a "set aside" action — muted/grey, distinct from the green Map/Reset. */
.site-ignore-btn { background: var(--press); color: var(--muted); box-shadow: var(--inset); }
.site-ignore-btn:hover { color: var(--text); filter: none; }
.sites-filter-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.sites-filter-bar label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sites-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.sites-group > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; background: var(--press); user-select: none; }
.sites-group > summary::-webkit-details-marker { display: none; }
.sites-group > summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; }
.sites-group[open] > summary::before { transform: rotate(90deg); }
.sites-group-body { padding: 4px 14px 8px; }
.sites-group-body .site-manage-row:last-child { border-bottom: none; }
/* Collapsible unmapped-sites banner */
.device-banner-details > summary { cursor: pointer; list-style: none; user-select: none; }
.device-banner-details > summary::-webkit-details-marker { display: none; }
.device-banner-details > summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: #b45309; transition: transform .15s; }
.device-banner-details[open] > summary::before { transform: rotate(90deg); }
.tpl-kind-chip.action-sent { background: rgba(22,163,74,.12); color: var(--green); }
.tpl-kind-chip.action-failed { background: rgba(220,38,38,.12); color: #dc2626; }
.tpl-kind-chip.action-queued { background: rgba(217,119,6,.14); color: #b45309; }
.switch-inline { display: inline-flex; align-items: center; gap: 8px; }
.set-section-title { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint, var(--muted)); margin: 18px 0 6px; }

/* Billable report — summary cards */
.bill-summary { display: flex; gap: 14px; margin: 18px 0 18px; flex-wrap: wrap; }
.bill-stat { flex: 1; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--raise-sm); }
.bill-stat-billable { border-top-color: var(--green); }
.bill-stat-nb { border-top-color: #9ca3af; }
.bill-stat-total { border-top-color: var(--purple); }
.bill-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.bill-stat-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.bill-stat-billable .bill-stat-val { color: var(--green); }
.bill-stat-sub { font-size: 12px; color: var(--muted); }

/* Billable report — collapsible group cards */
.bill-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--raise-sm); margin-bottom: 12px; overflow: hidden; }
.bill-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.bill-group-head::-webkit-details-marker { display: none; }
.bill-group[open] .bill-group-head { border-bottom: 1px solid var(--line); background: var(--press); }
.bill-group-name { display: inline-flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; color: var(--text); }
.bill-group-name::before { content: '▸'; color: var(--muted); font-size: .8em; }
.bill-group[open] .bill-group-name::before { content: '▾'; }
.bill-group-name svg { color: var(--purple); flex: none; }
.bill-group-totals { display: inline-flex; align-items: center; gap: 8px; }
.bill-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bill-pill-b { background: rgba(22, 163, 74, .12); color: var(--green); }
.bill-pill-nb { background: var(--press); color: var(--muted); }
.bill-group-total { font-weight: 800; font-size: 15px; color: var(--text); min-width: 56px; text-align: right; }
.bill-group .bill-table { margin: 0; }
.bill-group .bill-table th:first-child, .bill-group .bill-table td:first-child { padding-left: 18px; }
.bill-group .bill-table th:last-child, .bill-group .bill-table td:last-child { padding-right: 18px; }
/* Scroll the entry list instead of letting a big agent fill the page. */
.bill-group-body { max-height: 320px; overflow-y: auto; }
.bill-group-body .bill-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* ---- Knowledge base ------------------------------------------------------ */
.kb-search-row { margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kb-search { flex: 1; min-width: 220px; max-width: 420px; padding: 11px 14px; border: none; border-radius: 11px; font-size: 14px; background: var(--press); box-shadow: var(--inset); color: var(--text); }
.kb-filter { padding: 9px 12px; border: none; border-radius: 10px; font-size: 13px; background: var(--press); box-shadow: var(--inset); color: var(--text); }
/* Article badges (visibility / status / pinned) + tags */
.kb-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.kb-badge.internal { background: var(--press); color: var(--muted); }
.kb-badge.client { background: var(--purple-bg); color: var(--purple); }
.kb-badge.draft { background: rgba(245,158,11,0.18); color: #9a6700; }
.kb-badge.archived { background: var(--press); color: var(--faint); }
.kb-badge.pin { background: rgba(245,158,11,0.18); color: #9a6700; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.kb-tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--press); color: var(--muted); }
.kb-pin-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: normal; }
.kb-pin-label input { width: auto; }
/* "Was this helpful?" feedback (client Help Center) */
.kb-feedback { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.kb-feedback-q { font-weight: 700; margin-bottom: 8px; }
.kb-feedback-btns { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.kb-feedback textarea { width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: var(--press); box-shadow: var(--inset); color: var(--text); font-family: inherit; resize: vertical; }
/* AI "suggest / draft" actions in the ticket's Related Articles panel */
.kb-ai-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.kb-suggest-head { font-size: 12px; margin: 6px 0 2px; font-weight: 700; }
.kb-suggest-reason { font-size: 12px; margin: -2px 0 8px; line-height: 1.4; }
.kb-card { cursor: pointer; transition: box-shadow 0.15s; }
.kb-card:hover { box-shadow: var(--raise); }
.kb-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-card-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; }
.kb-card-snippet { margin: 6px 0; font-size: 13px; color: var(--text); }
.kb-card-meta { font-size: 12px; color: var(--muted); }
.kb-card-actions { margin-top: 8px; }
.kb-detail-actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 6px; }
.kb-detail-title { margin: 0; }
.kb-article-body { margin: 16px 0; line-height: 1.6; }
.kb-article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.kb-featured-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 2px 8px; }
.kb-featured-head:first-child { margin-top: 0; }
.article-linked-tickets { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.linked-ticket-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.linked-ticket-row a { font-weight: 600; color: var(--purple); }
.linked-ticket-row span { color: var(--muted); flex: 1; }
.link-ticket-row, .link-article-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.link-ticket-input, #article-picker { padding: 9px 12px; border: none; border-radius: 10px; font-size: 14px; background: var(--press); box-shadow: var(--inset); color: var(--text); }
#article-picker { max-width: 260px; }
.form-link-tickets { margin-top: 12px; }
.ticket-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ticket-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-bg); color: var(--purple); border: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.ticket-chip button { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; box-shadow: none; }

/* ---- Contacts & companies ------------------------------------------------ */
.tab-bar { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.tab-btn { background: none; color: var(--muted); border: none; border-bottom: 2.5px solid transparent; padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: none; margin-bottom: -1px; }
.tab-btn:hover { background: none; color: var(--text); filter: none; }
.tab-btn.active { color: var(--green-2); border-bottom-color: var(--green); }
.list-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.list-toolbar .kb-search { flex: 1; }
.directory-row { cursor: pointer; padding: 15px 18px; margin-bottom: 12px; transition: box-shadow 0.15s; box-shadow: var(--raise-sm); }
.directory-row:hover { box-shadow: var(--raise); }
.directory-row.row-selected { box-shadow: var(--raise), inset 0 0 0 2px var(--purple); }
/* The new/edit form lives inside the side panel — stack its fields in one
   column so they fit the narrower panel, and give the title a little room. */
.directory-panel .field-grid { grid-template-columns: 1fr; }
/* "People at this company" dropdown: keep the list scrollable so a big company
   doesn't fill the whole panel. */
#company-contacts, #company-tickets, #contact-tickets { margin-top: 12px; max-height: 300px; overflow-y: auto; }
.directory-panel #contact-form-title, .directory-panel #company-form-title { margin: 0 0 14px; }

/* Split directory: list on the left, a detail panel that opens on the right. */
.dir-page { max-width: 1180px; }
.directory-split { display: flex; gap: 22px; align-items: flex-start; }
.directory-list-col { flex: 1; min-width: 0; }
/* Width fits the content (so a long name grows the box rightward) up to a cap,
   then the title wraps instead of clipping. */
.directory-panel { position: relative; flex: 0 0 auto; width: fit-content; min-width: 380px; max-width: 520px; align-self: flex-start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.directory-panel .kb-card-head { padding-right: 26px; }   /* keep the title clear of the ✕ */
.directory-panel .kb-detail-title { font-size: 18px; overflow-wrap: anywhere; }
.panel-close {
  position: absolute; top: 14px; right: 16px; z-index: 1;
  background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 18px; color: var(--muted); padding: 4px 7px; border-radius: 8px;
}
.panel-close:hover { background: var(--press); color: var(--text); }
@media (max-width: 1240px) { .dir-page { max-width: 100%; } }
@media (max-width: 860px) {
  .directory-split { flex-direction: column; }
  .directory-panel { flex-basis: auto; width: 100%; max-width: none; position: static; max-height: none; }
}
.directory-name { font-weight: 700; font-size: 15px; margin-right: 8px; }
.directory-sub { font-size: 13px; margin-top: 3px; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } }
.info-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-label { width: 130px; color: var(--muted); flex-shrink: 0; }
.contact-actions { margin-left: auto; }
.contact-mini { display: flex; flex-direction: column; gap: 6px; }
.contact-mini-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Ticket page two-column layout --------------------------------------- */
.ticket-columns { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }   /* conversation gets ~63% (was ~55%) */
.ticket-columns .column { margin: 0; }
@media (max-width: 900px) { .ticket-columns { grid-template-columns: 1fr; } }

.msg-thread { display: flex; flex-direction: column; gap: 12px; max-height: 560px; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
.thread-empty { font-style: italic; padding: 8px 0; color: var(--muted); }
.msg { border: none; border-radius: 12px; padding: 11px 14px 12px 16px; background: var(--surface); box-shadow: var(--raise-sm); border-left: 4px solid var(--blue); }
.msg-in   { border-left-color: var(--blue); }
.msg-out  { border-left-color: var(--green); }
.msg-note { border-left-color: var(--amber-accent); background: color-mix(in srgb, var(--surface) 92%, var(--amber-accent)); }
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 7px; }
.msg-who { font-weight: 700; color: var(--text); }
/* ✎ on an internal note (author / Team Lead+) + the inline edit box. */
.msg-edit { margin-left: auto; background: none; border: none; box-shadow: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 4px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-edit, body.mobile .msg-edit { opacity: 1; }
.msg-edit:hover { background: var(--press); color: var(--text); }
.note-edit-box { margin-top: 6px; }
.note-edit-box .reply-buttons { margin-top: 8px; }
/* The email shown small beside a name ("Brian Cabezud (bcabezud@…)"), in the
   sender line and inside the "Sent to …" tag. */
.msg-email { font-weight: 400; color: var(--muted); font-size: 0.92em; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
/* The "Sent to …" tag now carries real names/addresses, so no shouting caps. */
.tl-tag.tl-client { text-transform: none; letter-spacing: 0.01em; font-size: 11px; white-space: normal; }
.msg-time { color: var(--faint); margin-left: auto; }

/* Right-gutter sidebar (Contact / Articles / Time) */
.detail-side { position: absolute; top: 124px; right: 24px; width: 300px; display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.detail-side .card { margin: 0; }
/* Mid-width screens (e.g. 1080p under the zoom): instead of a narrow centered
   column, let the ticket page use everything LEFT of the floating sidebar —
   the Client Conversation was too skinny (Freshdesk gives its thread the whole
   left side). Right margin = sidebar width (300) + its gutter (24) + a gap. */
@media (max-width: 2100px) { main.wide { max-width: none; margin-left: 12px; margin-right: 372px; } }
@media (max-width: 1700px) {
  main.wide { max-width: 1500px; margin-left: auto; margin-right: auto; }   /* sidebar is stacked here — no reserved gutter */
  .detail-side { position: static; width: 100%; margin: 0 0 16px; }
}
.contact-side, .articles-side, .agent-side { padding: 18px; font-size: 13px; }
.contact-side h2, .articles-side h2, .agent-side-title { font-size: 14px; margin: 0 0 10px; }
.side-head { display: flex; align-items: center; gap: 8px; }
/* Ticket sidebar — "Their setup" */
.ctx-summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; flex-wrap: wrap; margin: 0; }
.ctx-summary::-webkit-details-marker { display: none; }
.ctx-summary::after { content: '▸'; margin-left: auto; color: var(--faint); transition: transform .15s; }
.ctx-side[open] > .ctx-summary::after { transform: rotate(90deg); }
.ctx-side[open] > .ctx-summary { margin-bottom: 10px; }
.ctx-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ctx-flag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.ctx-flag.bad { background: var(--crit-bg); color: var(--crit-fg); } .ctx-flag.warn { background: var(--amber-bg); color: var(--amber-fg); }
.ctx-sec { padding: 10px 0; border-top: 1px solid var(--line); }
.ctx-body > .ctx-sec:first-child { border-top: 0; padding-top: 2px; }
.ctx-sub > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ctx-sub > summary::-webkit-details-marker { display: none; }
.ctx-sub > summary::before { content: '▸'; color: var(--faint); transition: transform .15s; display: inline-block; }
.ctx-sub[open] > summary::before { transform: rotate(90deg); }
.ctx-sub > summary .ctx-h { margin: 0; }
.ctx-sub[open] > summary { margin-bottom: 6px; }
.ctx-sum { font-size: 12px; font-weight: 600; }
.ctx-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ctx-dev + .ctx-dev { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ctx-dev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-dev-head a { color: var(--text); text-decoration: none; } .ctx-dev-head a:hover { text-decoration: underline; }
.ctx-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; }
.ctx-alert { background: var(--crit-bg); color: var(--crit-fg); font-weight: 700; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; margin: 2px 0 8px; }
.ctx-site { display: flex; gap: 8px; align-items: center; padding: 5px 0; text-decoration: none; color: inherit; font-size: 12.5px; }
.ctx-site:hover strong { text-decoration: underline; }
.ctx-site-main { min-width: 0; }
.ctx-fails { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; } .ctx-fails li { margin: 4px 0; }
.side-head-ic { color: var(--purple); flex: none; }
/* Directory list/detail icons (Contacts & Companies) — purple to match the
   contact card on the ticket page. The SVGs stroke with currentColor. */
.dir-ic { color: var(--purple); flex: none; }
.contact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.contact-info { display: flex; flex-direction: column; gap: 6px; }
.contact-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.contact-name-text { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; color: var(--name); }
.contact-row { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.contact-row .ic { color: var(--blue); }
.contact-row .ic { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row .ic svg { display: block; }
.contact-row span:last-child { word-break: break-word; }
.contact-view-link { display: inline-block; margin-top: 8px; color: var(--purple); }
.gen-company-btn { margin-top: 10px; align-self: flex-start; font-size: 13px; padding: 7px 12px; }
.company-chip-link { color: var(--blue-2); text-decoration: none; cursor: pointer; }
.company-chip-link:hover { text-decoration: underline; }
.articles-side .link-article-row { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.articles-side #article-picker { width: 100%; max-width: 100%; }

.agent-side { margin: 0; }
.agent-side-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.agent-side-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.agent-side-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-weight: 700; font-size: 14px; }
.agent-side-name { font-weight: 700; }
.agent-side-row { color: var(--muted); margin-top: 3px; word-break: break-word; }
@media (max-width: 760px) { .agent-side { width: 100%; } }

/* Time panel + collapsibles */
.time-panel { width: 300px; max-width: 100%; box-sizing: border-box; padding: 16px 18px; font-size: 13px; }
.time-panel > summary { cursor: pointer; font-weight: 700; list-style: none; }
.time-panel > summary::-webkit-details-marker { display: none; }
.time-panel > summary::before { content: '▸ '; color: var(--muted); }
.time-panel[open] > summary::before { content: '▾ '; }
.time-panel .time-form { margin-top: 12px; gap: 8px; }
.time-panel .time-form label { font-size: 12px; }
.time-panel .time-form input[type="number"] { width: 70px; }
.time-panel #time-list { margin-top: 8px; max-height: 200px; overflow-y: auto; }

.collapse-card > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; font-size: 1.15em; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; }
.collapse-card > summary::-webkit-details-marker { display: none; }
.collapse-card > summary::before { content: '▸'; color: var(--muted); font-size: 0.85em; }
.collapse-card[open] > summary::before { content: '▾'; }
.collapse-hint { font-size: 13px; font-weight: 400; color: var(--muted); }
/* History "N events" → purple pill badge (matches the mockup). */
#history-count { background: var(--purple-bg); color: var(--purple); padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
#history-count:empty { display: none; }
.collapse-card #history-list { margin-top: 14px; }

/* ---- Rich-text editor (Quill) -------------------------------------------- */
.editor { background: var(--surface); }
.ql-toolbar.ql-snow { border: none; background: var(--press); box-shadow: var(--inset); border-top-left-radius: 11px; border-top-right-radius: 11px; }
.ql-container.ql-snow { border: none; background: var(--press); box-shadow: var(--inset); border-top: none; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }
.ql-editor { min-height: 130px; font-size: 14px; color: var(--text); }
.ql-toolbar button { background: transparent; color: inherit; padding: 3px 5px; width: 28px; height: 24px; border-radius: 4px; box-shadow: none; }
.ql-toolbar button:hover { background: rgba(140,148,170,0.18); }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }

/* New Ticket: the optional email to the client + "ticket opened" notice */
/* Normal flow, NOT a flex column: Quill's container is height:100%, which in a
   flex item resolves against the item's initial height and the editor then
   overflowed its panel onto the Category field (bug report 2026-10-07). */
.client-email-block { margin: 4px 0 14px; }
.client-email-block > * + * { margin-top: 10px; }
.client-email-block .btn-reply-open { margin-top: 0; }
.client-email-block #email-panel { width: 100%; }
.client-email-block .ql-container.ql-snow { height: auto; }
.client-email-block .ql-editor { min-height: 160px; max-height: 360px; overflow-y: auto; }
.client-email-block .box-hint { margin: 8px 0 0; }
.client-email-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--open-fg); }
.client-email-block [hidden] { display: none; }

/* My Time page + task time */
.my-time-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.my-time-grid.two { grid-template-columns: 1fr 1fr; }
.my-time-summary { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.my-time-summary strong { color: var(--text); }
.my-time-day { margin-bottom: 14px; }
.my-time-day-head { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.my-time-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.my-time-mins { font-weight: 700; color: var(--purple); white-space: nowrap; }
.my-time-what { min-width: 0; overflow-wrap: anywhere; }
.my-time-general { font-weight: 600; }
.my-time-actions { display: flex; gap: 4px; white-space: nowrap; }
.chip-billable { background: var(--purple-bg); color: var(--purple); font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.task-time-billable { color: var(--purple); font-weight: 700; font-size: 12px; }
@media (max-width: 700px) {
  .my-time-grid { grid-template-columns: 1fr; }
  .my-time-row { grid-template-columns: 60px minmax(0, 1fr); }
}

/* My Time: inline editor under a row */
.my-time-edit { grid-column: 1 / -1; background: var(--press); border-radius: 12px; padding: 12px 14px; margin: 4px 0 10px; box-shadow: var(--inset); }
.my-time-edit .form-actions { margin-top: 6px; }
.my-time-edit .error:empty { display: none; }

/* My Time: the 14-day strip */
.day-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; }
.day-col { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; text-align: center; }
.day-col.today .day-label { color: var(--purple); font-weight: 700; }
.day-bar-wrap { position: relative; width: 100%; height: 110px; background: var(--press); border-radius: 8px; box-shadow: var(--inset); overflow: hidden; }
.day-bar { position: absolute; bottom: 0; left: 15%; width: 70%; border-radius: 6px 6px 0 0; transition: height .3s; }
.day-bar.tone-short { background: #e0822f; }
.day-bar.tone-ok { background: #5b6ef0; }
.day-bar.tone-goal { background: #16bd6f; }
.day-bar.tone-off { background: var(--faint); opacity: .6; }
.day-line { position: absolute; left: 0; right: 0; border-top: 1px dashed; opacity: .55; }
.day-line.floor { border-color: #e0822f; }
.day-line.goal { border-color: #16bd6f; }
.day-mins { min-height: 13px; font-weight: 700; color: var(--text); }
.day-label { line-height: 1.2; }
@media (max-width: 700px) { .day-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Pasted screenshots (bug reports): thumbnails with a remove button */
.paste-hint { font-size: 12px; }
.pasted-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.pasted-thumbs:empty { display: none; }
.pasted-thumb { position: relative; display: inline-block; }
.pasted-thumb img { height: 90px; max-width: 160px; object-fit: cover; border-radius: 10px; box-shadow: var(--raise-sm); display: block; }
.pasted-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: var(--crit); color: #fff; font-size: 11px; line-height: 22px; cursor: pointer; box-shadow: none; }
.pasted-x:hover { filter: brightness(1.1); }

/* Attach files */
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.visually-hidden-file { display: none; }
.attach-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--press); border: 1px dashed var(--faint); border-radius: 10px; padding: 7px 12px; box-shadow: none; }
.attach-btn:hover { border-color: var(--green); color: var(--green-deep); }
.attach-names { font-size: 13px; color: var(--muted); }

/* Attachment chips */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attachment { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text); background: var(--press); border: none; box-shadow: var(--inset); border-radius: 9px; padding: 5px 11px; }
.attachment:hover { color: var(--green-deep); }
.attachment .att-size { font-weight: 400; color: var(--muted); }

/* Rendered message bodies */
.msg-html { margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; color: var(--text); }
.msg-html hr { border: 0; border-top: 1px solid var(--line); }
.msg-html p { margin: 0 0 6px; }
.msg-html p:last-child { margin-bottom: 0; }
.msg-html img { max-width: 100%; height: auto; }
.msg-img { cursor: zoom-in; }
.img-missing { display: inline-block; padding: 6px 10px; margin: 4px 0; background: var(--press); color: var(--muted); border: 1px dashed var(--faint); border-radius: 6px; font-size: 12px; }
.msg-html table { max-width: 100%; display: block; overflow-x: auto; }
.msg-html pre, .msg-html code { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-html a { color: var(--purple); word-break: break-all; }
.msg-html blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); cursor: zoom-out; }
.lightbox-close { position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: none; font-size: 18px; cursor: pointer; box-shadow: none; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ---- Time logging -------------------------------------------------------- */
.time-total { font-size: 15px; }
.time-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.time-form label { font-size: 13px; font-weight: 600; color: var(--text); }
.time-form input[type="number"] { width: 80px; }
.time-form .time-note { flex: 1; min-width: 200px; }
.time-form .time-note input { width: 100%; }
.time-entry { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.time-entry .time-amount { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.time-meta { display: flex; align-items: center; gap: 6px; }
.time-meta .time-who { font-weight: 600; color: var(--text); }
.time-meta .time-when { color: var(--muted); }
.time-entry .time-desc { color: var(--muted); }
/* Tags: chips with a × plus an inline "+ add tag" input (ticket page), and
   small read-only chips on dashboard rows. */
.tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 12px; font-weight: 600; }
.tag-chip .tag-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; border-radius: 50%; box-shadow: none; }
.tag-chip .tag-x:hover { background: rgba(0,0,0,0.08); }
.tag-input { width: 110px; font-size: 12px; padding: 4px 9px; border-radius: 999px; }
.t-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.t-tags .tag-chip { padding: 1px 8px; font-size: 11px; }

/* ---- Automations page ----------------------------------------------------- */
.auto-tabs { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.auto-tab { padding: 7px 14px; border-radius: 999px; border: none; background: var(--press); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: none; }
.auto-tab.active { background: var(--purple); color: #fff; }
.rule-row-card { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.rule-row-card:last-child { border-bottom: none; }
.rule-row-card.rule-off { opacity: 0.55; }
.rule-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--low-fg); }
.rule-off .rule-dot { background: var(--hold-fg); }
.rule-actions { margin-left: auto; display: flex; gap: 6px; }
.rule-desc { font-size: 12.5px; margin-top: 2px; }
.rule-summary { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.rule-k { display: inline-block; width: 44px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.rule-cond { padding: 1px 8px; border-radius: 6px; background: var(--press); }
.rule-act { padding: 1px 8px; border-radius: 6px; background: var(--purple-bg); color: var(--purple); font-weight: 600; }
.rule-modal { width: 100%; max-width: 860px; max-height: 92vh; overflow-y: auto; }
.rule-grid { display: grid; grid-template-columns: 1fr 110px auto; gap: 12px; align-items: end; }
.rule-check { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; font-weight: 600; }
.rule-check input { width: auto; box-shadow: none; accent-color: var(--purple); }
.rule-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.rule-section h3 { margin: 0 0 8px; font-size: 15px; }
.rule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.rule-row select, .rule-row input[type="text"], .rule-row input[type="number"], .rule-row input[type="email"], .rule-row input[type="url"] { width: auto; min-width: 120px; flex: 0 1 auto; }
.rule-row input[type="text"].c-value, .rule-row input[type="url"], .rule-row input.a-message, .rule-row input.a-subject { flex: 1 1 200px; }
.rule-row textarea { width: 100%; flex: 1 1 100%; }
.rule-set { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--press); }
.rule-action { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--purple-bg); }
.r-x { padding: 2px 8px; }
/* Scenario buttons on the ticket page */
.scenario-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.scenario-bar .btn-small { background: var(--purple-bg); color: var(--purple); }

/* Presence strip above the ticket card: "👁 Mike is viewing · ✎ typing…" */
.presence-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 12px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  background: var(--purple-bg); box-shadow: var(--raise); width: fit-content;
}
.presence-bar[hidden] { display: none; }
.presence-who { display: inline-flex; align-items: center; gap: 6px; }
.presence-who strong { color: var(--text); }
.presence-who.typing { color: var(--purple); }
.presence-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.presence-sep { color: var(--faint); }

/* Delete-ticket button (Global Admin) sits at the far right of the SLA row. */
.ticket-delete-btn { margin-left: auto; }
.deleted-row .t-subject { white-space: normal; }
/* Edit / remove buttons on a time entry (shown on hover) + the inline editor. */
.time-actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.time-entry:hover .time-actions { opacity: 1; }
.time-actions button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.time-actions button:hover { background: var(--press); color: var(--text); }
.time-actions .time-del:hover { color: var(--crit-fg); }
.time-edit-form { display: flex; flex-direction: column; gap: 6px; }
.time-edit-form input[type="number"] { width: 58px; }
.time-edit-row { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.time-edit-bill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.time-edit-bill input { width: auto; box-shadow: none; accent-color: var(--purple); }

/* ---- Settings / avatar editor -------------------------------------------- */
.avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.avatar-buttons { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.avatar-hint { font-size: 12px; margin: 2px 0 0; color: var(--muted); }

/* ---- Active nav pill + dashboard hero ------------------------------------ */
.gsearch-type option { color: #1f2430; }
.nav-link.nav-active { background: #dbe9fd; color: #1d4ed8; }

.dvo-hero { max-width: 1340px; margin: 30px auto 0; padding: 0 4px 76px; }
.dvo-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dvo-hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #c9b8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.dvo-hero-kicker span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dvo-hero-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: #fff; margin: 0; line-height: 1.05; }
.dvo-hero-title span { background: linear-gradient(90deg,#a78bfa,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dvo-hero-actions .btn-primary { box-shadow: 0 10px 24px rgba(16,168,102,0.4); }

/* Light-body page eyebrow/kicker (violet pill above a page title), matching the
   marketing mockups. Use inside .dashboard-head via a .page-head-titles wrapper. */
.page-head-titles { display: flex; flex-direction: column; }
.page-kicker { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px; }
.page-kicker span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Stat cards overlap the dark hero (dashboard only). */
main.dash { margin: 0 auto 30px; }
main.dash > .stats { margin-top: -58px; position: relative; z-index: 2; }

/* "All Tickets" heading + count badge above the dashboard filter bar. */
.list-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 16px; }
.list-head h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.list-count { padding: 3px 11px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 12.5px; font-weight: 700; }
.list-count:empty { display: none; }

/* Saved Views drawer: pinned to the LEFT EDGE of the window, hanging from the
   bottom of the dark header band (app.js sets `top` as the page scrolls) down
   to the bottom of the window. Closed = a slim vertical tab; open = the panel.
   The dashboard's own left gutter is wide enough on big screens; on narrower
   ones body.views-open shifts the dashboard right so nothing is covered. */
.views-dock { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; display: flex; align-items: stretch; }
.views-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 40px; align-self: flex-start; margin-top: 18px; padding: 14px 0 16px; border: none; border-radius: 0 14px 14px 0; background: var(--surface); color: var(--purple); box-shadow: var(--raise-sm); cursor: pointer; }
.views-rail:hover { filter: none; background: var(--press); }
.views-rail-ic { font-size: 15px; line-height: 1; }
.views-rail-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.views-body { display: none; width: 240px; flex-direction: column; background: var(--surface); box-shadow: var(--raise); border-radius: 0 18px 0 0; padding: 18px 16px; overflow-y: auto; }
.views-dock.open .views-rail { display: none; }
.views-dock.open .views-body { display: flex; }
.views-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.views-head h3 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.views-collapse { width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: var(--press); color: var(--muted); box-shadow: none; font-size: 18px; line-height: 1; cursor: pointer; }
.views-collapse:hover { filter: none; color: var(--text); }
.views-count { padding: 2px 9px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 11.5px; font-weight: 700; }
.views-count:empty { display: none; }
.views-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.views-empty { font-size: 12.5px; margin: 0; }
.view-row { display: flex; align-items: center; gap: 2px; border-radius: 9px; border-left: 3px solid transparent; }
.view-row.active { background: var(--purple-bg); border-left-color: var(--purple); }
.view-grip { flex: 0 0 auto; padding: 0 2px 0 4px; color: var(--faint); font-size: 12px; letter-spacing: -3px; cursor: grab; user-select: none; }
.view-row:hover .view-grip { color: var(--muted); }
.view-row.dragging { opacity: 0.4; }
.view-row.drop-above { box-shadow: 0 -2px 0 0 var(--purple); }
.view-row.drop-below { box-shadow: 0 2px 0 0 var(--purple); }
.view-apply { flex: 1; min-width: 0; text-align: left; background: none; border: none; box-shadow: none; color: var(--text); font-weight: 600; font-size: 13px; padding: 7px 9px; border-radius: 9px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-apply:hover { background: var(--press); filter: none; }
.view-row.active .view-apply { color: var(--purple); background: none; }
.view-x { flex: 0 0 auto; background: none; border: none; box-shadow: none; color: var(--faint); padding: 4px 8px; font-size: 12px; border-radius: 7px; cursor: pointer; }
.view-x:hover { background: none; color: var(--crit); filter: none; }
.views-save { display: flex; gap: 6px; margin-top: 12px; }
.views-save input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 9px; }
.views-body .box-hint { margin: 8px 0 0; font-size: 12px; }
/* Narrower windows: the open drawer would cover the list, so push the dashboard over. */
@media (max-width: 1820px) {
  body.views-open main.dash { margin-left: 264px; margin-right: 24px; }
}
body.mobile .views-dock { display: none; }   /* phones: no room for a drawer */
/* "↻ N updates" pill: appears when tickets in the current view changed
   server-side; click reloads. Pulses gently so it's noticed without nagging. */
.updates-pill {
  padding: 4px 12px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--open-fg); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(44,95,208,0.35); animation: pill-pulse 2s ease-in-out infinite;
}
.updates-pill:hover { filter: brightness(1.1); animation: none; }
.updates-pill[hidden] { display: none; }
@keyframes pill-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Reporter name on the ticket page: a link to the contact, but read as normal
   text (the browser's default blue was unreadable in dark mode). */
.reporter-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.reporter-link:hover { color: var(--purple); border-bottom-color: var(--purple); }

/* SLA: paused pill (On Hold) + the quick "Change…" deadline menu */
.sla-paused { background: var(--purple-bg); color: var(--purple); }
.sla-menu-wrap { position: relative; display: inline-block; }
.sla-menu {
  white-space: nowrap;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column;
}
.sla-pick {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%;
  background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.sla-pick:hover { background: var(--press); color: var(--purple); }
.sla-menu[hidden] { display: none; }   /* the hidden attribute must beat display:flex */
.sla-pick span { white-space: nowrap; }
.sla-pick small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sla-pick-reset { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; }
.list-scope-note { font-size: 12px; margin-left: 10px; font-weight: 400; }

/* ---- Company hub (company.html) ------------------------------------------ */
.hub-head { padding: 22px 26px; }
.hub-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hub-title-row > div { display: flex; flex-direction: column; }
.hub-title { margin: 0; font-size: 26px; }
.hub-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14px; color: var(--text); font-weight: 500; }
.hub-fact { display: inline-flex; align-items: center; gap: 6px; }
.hub-fact .dir-ic { color: var(--blue); }
.hub-fact a { color: var(--blue-2); text-decoration: none; }
.hub-fact a:hover { text-decoration: underline; }
/* The dashboard lifts its stat cards 58px into the dark header band; here the
   strip sits below the head card, so undo that. */
main.dash > .hub-stats { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
/* A coloured top edge by meaning: blue (default) / green (good) / amber / red. */
.hub-stat { padding: 14px 18px 16px; border-top: 3px solid var(--blue); border-radius: 14px; }
.hub-stat.tone-ok { border-top-color: var(--green); }
.hub-stat.tone-warn { border-top-color: var(--amber-accent); }
.hub-stat.tone-bad { border-top-color: var(--crit); }
.hub-stat.tone-quiet { border-top-color: var(--faint); }
.hub-stat .stat-number { font-size: 26px; color: var(--text); }
.hub-stat .stat-number.tone-crit { color: var(--crit-fg); }
.hub-stat-sub { font-size: 12px; margin-top: 4px; }
.hub-stat-sub a { color: var(--blue-2); font-weight: 600; text-decoration: none; }
.hub-tabs { margin-bottom: 14px; }
.tab-count { font-size: 11px; font-weight: 700; background: var(--purple-bg); color: var(--purple); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.tab-count:empty { display: none; }
.hub-panel { padding: 20px 24px; }
.hub-panel .list-toolbar { margin-bottom: 12px; align-items: flex-end; }
.hub-panel .list-toolbar .kb-search { flex: 1 1 260px; }
.hub-panel .list-toolbar .filter-field { flex: 0 0 auto; margin: 0; }
.hub-panel .list-toolbar .filter-field select { width: auto; min-width: 160px; }
.hub-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hub-row:last-child { border-bottom: none; }
.hub-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.hub-row-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--name); text-decoration: none; }
/* Ticket numbers in hub lists stay purple like everywhere else. */
.hub-row-title[href*="ticket.html"] { color: var(--purple); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
a.hub-row-title:hover { text-decoration: underline; }
.hub-row-subject { flex: 1; min-width: 160px; }
.hub-row-note { font-size: 13px; }
.hub-row-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin-top: 3px; }
.hub-row-sub a { color: inherit; text-decoration: none; }
.hub-row-sub a:hover { text-decoration: underline; }
.hub-row.directory-left .hub-row-title { text-decoration: line-through; color: var(--muted); }
.hub-row-person { display: flex; align-items: center; gap: 12px; }
.hub-row-body { flex: 1; min-width: 0; }
.hub-row-sub .dir-field { color: var(--text); }
.hub-agents { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#notes-read { font-size: 14px; line-height: 1.55; }

/* ---- Companies grid (Contacts page → Companies tab) ----------------------- */
/* Search box, labelled dropdowns and the button all sit on one baseline. */
.co-toolbar { align-items: flex-end; }
.co-toolbar .kb-search { flex: 1 1 240px; height: 40px; max-width: none; }
.co-toolbar .filter-field { flex: 0 0 auto; }
.co-toolbar .filter-field select { width: auto; min-width: 150px; height: 40px; }
.co-toolbar .btn-primary { height: 40px; display: inline-flex; align-items: center; }
.co-count { margin: 0 0 10px; font-size: 13px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.co-card { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--raise-sm); transition: box-shadow 0.15s, transform 0.15s; border-left: 4px solid transparent; }
.co-card:hover { box-shadow: var(--raise); transform: translateY(-1px); }
.co-card.row-selected { box-shadow: var(--raise), inset 0 0 0 2px var(--purple); }
.co-card-overdue { border-left-color: var(--crit-fg); }
.co-card-head { display: flex; align-items: center; gap: 12px; }
.co-card-head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co-card-name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; color: var(--text); }
.co-card-domain { font-size: 12.5px; }
.co-card-tags { margin-left: 0; }
.co-card-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--muted); align-items: center; }
.co-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 10px; background: var(--blue-tint); }
.co-stat strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.5px; color: var(--blue-2); font-weight: 800; }
.co-stat-zero strong { color: var(--faint); font-weight: 700; }
.co-stat-bad { background: var(--crit-bg); color: var(--crit-fg); }
.co-stat-bad strong { color: var(--crit-fg); }
.co-stat-when { margin-left: auto; background: none; padding: 0; font-size: 12px; color: var(--faint); }
.co-card-services { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.co-nocontract { font-size: 12.5px; }
@media (max-width: 700px) { .co-grid { grid-template-columns: 1fr; } }

/* ---- Contacts table (Contacts page → Contacts tab) ------------------------ */
.ct-table-card { padding: 4px 0; overflow-x: auto; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ct-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; background: var(--blue-tint); border-bottom: 1px solid var(--line); }
.ct-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ct-table tr:last-child td { border-bottom: none; }
.ct-row { cursor: pointer; transition: background 0.1s; }
.ct-row:hover td { background: var(--blue-tint); }
.ct-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-name a { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; color: var(--name); text-decoration: none; }
.ct-name a:hover { text-decoration: underline; }
.ct-name .cbadges { margin-left: 6px; }
.ct-title, .ct-more { font-size: 12.5px; margin-top: 1px; }
.ct-email .dir-field, .ct-phone .dir-field { color: var(--text); font-weight: 500; }
.ct-phone .dir-field { display: flex; }
.ct-row.directory-left .ct-name a { text-decoration: line-through; color: var(--muted); }
@media (max-width: 900px) { .ct-table th:nth-child(4), .ct-table td:nth-child(4), .ct-table th:nth-child(5), .ct-table td:nth-child(5) { display: none; } }

/* ---- Contacts housekeeping: bulk bar, duplicates, import ------------------ */
.ct-check { width: 36px; text-align: center; }
.ct-check input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; margin: 0; box-shadow: none; }
.ct-row.row-selected td { background: var(--blue-bg); }
.bulk-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; background: var(--surface); border-radius: 14px; box-shadow: var(--raise-sm); border-left: 4px solid var(--blue); }
.bulk-bar .filter-field { flex: 0 0 auto; }
.bulk-bar .filter-field select, .bulk-bar .filter-field input { width: 160px; height: 36px; font-size: 13px; }
.bulk-bar .filter-field input { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bulk-count { font-weight: 800; color: var(--blue-2); align-self: center; min-width: 90px; }
.bulk-merge-pick { flex-basis: 100%; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
.bulk-merge-pick .dup-row { cursor: pointer; }
.bulk-merge-pick input[type="radio"] { width: auto; margin: 0; box-shadow: none; accent-color: var(--green); }
.tools-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tools-col { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr; } }
.dup-group { padding: 12px 0; border-top: 1px solid var(--line); }
.dup-reason { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.dup-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.dup-keep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dup-keep input { width: auto; margin: 0; box-shadow: none; accent-color: var(--green); }
.dup-who { min-width: 0; }
.dup-who a { color: var(--name); font-weight: 700; text-decoration: none; }
.dup-who .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.import-list { font-size: 13px; margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
#import-file { margin-top: 6px; }

/* ---- Contact page (contact.html) ------------------------------------------ */
.hub-person { display: flex; align-items: flex-start; gap: 18px; min-width: 0; }
.hub-person > div { display: flex; flex-direction: column; min-width: 0; }
.hub-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.hub-sub .company-chip { text-decoration: none; }
.hub-sub .t-tags { margin-left: 0; }
.hub-title-left { text-decoration: line-through; color: var(--muted); }
.hub-head .contact-warn { margin: 12px 0 0; }
.hub-about { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.hub-about .info-label { display: block; margin-bottom: 4px; }
#edit-card .hub-title { margin-bottom: 14px; }
.field-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .field-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .field-grid-3 { grid-template-columns: 1fr; } .av-lg { width: 48px; height: 48px; font-size: 18px; } }

/* ---- Settings: jump menu beside the stacked cards -------------------------- */
main.settings-page { max-width: 1040px; }
.settings-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.settings-main > .card { margin: 0; }
.settings-nav { position: sticky; top: 20px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.settings-nav a { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.settings-nav a:hover { background: var(--press); color: var(--text); }
.settings-nav a.current { background: var(--blue-bg); color: var(--blue-2); }
.settings-nav:empty { display: none; }
@media (max-width: 860px) { .settings-grid { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ---- Identity avatars (initials or photo), hue picked from the name ------- */
.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; flex: 0 0 auto; overflow: hidden; width: 34px; height: 34px; background: linear-gradient(135deg,#3b82f6,#7c3aed); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-h1 { background: linear-gradient(135deg,#3b82f6,#7c3aed); }
.av-h2 { background: linear-gradient(135deg,#14b8a6,#2563eb); }
.av-h3 { background: linear-gradient(135deg,#8b5cf6,#d6336c); }
.av-h4 { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.av-h5 { background: linear-gradient(135deg,#0ea5e9,#14b8a6); }
.av-h6 { background: linear-gradient(135deg,#6366f1,#0ea5e9); }
.av-sm { width: 28px; height: 28px; font-size: 11px; }
.av-lg { width: 60px; height: 60px; font-size: 20px; }

/* ---- Company status / contract (cards, hub, ticket card) ------------------- */
.field-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
@media (max-width: 900px) { .field-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co-card-churned { opacity: 0.6; }
.co-card-churned:hover { opacity: 1; }
.renew-line { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.renew-line.renew-warn, .company-plan-line.renew-warn { color: var(--amber-fg); }
.renew-line.renew-bad, .company-plan-line.renew-bad { color: var(--crit-fg); }
.hub-head .renew-line { margin-top: 6px; }
.company-status-line, .company-plan-line { font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.company-plan-line { color: var(--green-deep); }

/* ---- CRM activity feed (contact History / company Activity) --------------- */
.crm-note-form { display: flex; gap: 8px; margin: 10px 0 12px; }
.crm-note-form input { flex: 1; min-width: 0; }
.crm-event { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.crm-event:last-child { border-bottom: none; }
.crm-ic { flex: 0 0 22px; text-align: center; font-size: 14px; line-height: 1.4; }
.crm-body { flex: 1; min-width: 0; }
.crm-text { line-height: 1.45; overflow-wrap: anywhere; }
.crm-note .crm-text { white-space: pre-line; background: var(--press); border-radius: 10px; padding: 8px 12px; }
.crm-when { font-size: 12px; margin-top: 3px; }
.info-row .t-tags { margin-left: 0; }
.hub-title .t-tags { margin-left: 10px; vertical-align: middle; }
#notes-text { width: 100%; box-sizing: border-box; }

/* ===========================================================================
   PHONE LAYOUT (≤ 700px) — the installed PWA and any narrow browser.
   The site is designed for a wide desktop; these rules re-flow the pieces
   that don't collapse on their own. Order: base → nav → dashboard → ticket
   page → forms/tables → popovers.
   =========================================================================== */
/* ===== Life Cycle (Device Portal main page) ===== */
.lc-page { max-width: 1280px; }
.lc-sub { margin: 4px 0 0; font-size: 14px; }
a.btn-secondary { display: inline-block; padding: 11px 20px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.lc-boards { display: flex; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.lc-board { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px 11px; margin-bottom: -1px; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0; }
.lc-board:hover:not(:disabled) { color: var(--text); background: var(--blue-tint); }
.lc-board.active { color: var(--blue-2); border-bottom-color: var(--blue); }
.lc-board:disabled { cursor: default; opacity: .6; }
.lc-soon { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); background: var(--purple-bg); padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
/* compact KPI grid: 4 across, two rows */
.lc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lc-kpi { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: var(--surface); border-radius: 12px; padding: 10px 14px 11px; box-shadow: var(--raise-sm); border-top: 3px solid var(--blue); }
.lc-kpi.tone-crit { border-top-color: var(--crit); } .lc-kpi.tone-low { border-top-color: var(--green); } .lc-kpi.tone-purple { border-top-color: var(--purple); } .lc-kpi.tone-open { border-top-color: var(--blue); }
.lc-kpi-ic { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--purple-bg); color: var(--purple); }
.lc-kpi-ic svg { width: 18px; height: 18px; }
.lc-kpi-ic.tone-open { background: var(--blue-bg); color: var(--blue-2); } .lc-kpi-ic.tone-crit { background: var(--crit-bg); color: var(--crit-fg); } .lc-kpi-ic.tone-low { background: var(--low-bg); color: var(--low-fg); }
.lc-kpi-n { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.1; }
.lc-kpi-l { font-size: 12px; color: var(--muted); }
.lc-kpi.is-link { cursor: pointer; transition: transform .12s; } .lc-kpi.is-link:hover { transform: translateY(-1px); }
.lc-taken { margin: 10px 2px 18px; font-size: 13px; }
.lc-col { display: grid; gap: 18px; align-content: start; }
.lc-count { font-size: 12px; font-weight: 800; color: var(--purple); background: var(--purple-bg); padding: 2px 8px; border-radius: 999px; vertical-align: 3px; margin-left: 4px; }
.lc-count:empty { display: none; }
.lc-scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lc-changes, .lc-updates { padding: 18px 20px; }
.lc-change-row { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; font: inherit; color: inherit; cursor: pointer; box-shadow: none; }
.lc-change-row:hover { box-shadow: var(--raise-sm); }
.lc-change-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.lc-change-head strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; }
.lc-issue.warn { color: var(--amber-fg); background: var(--amber-bg); }
.lc-rep { color: var(--crit-fg); font-weight: 700; font-size: 12.5px; }
.lc-table-box { max-height: 560px; overflow: auto; }
.lc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 0 0 999px var(--blue-tint), 0 1px 0 var(--line); }   /* opaque — the tint alone is translucent and rows showed through */
.lc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.lc-actions .btn-small { padding: 7px 12px; font-size: 13px; }
.lc-export { font-size: 13px; font-weight: 700; color: var(--purple); align-self: center; white-space: nowrap; }
.lc-isp { width: 100%; height: 70px; display: block; }
.lc-isp rect { fill: var(--blue); opacity: .75; } .lc-isp rect.bad { fill: var(--crit); opacity: .9; }
.lc-isp-axis { display: flex; justify-content: space-between; margin-top: 2px; }
.lc-score-pill { display: inline-block; min-width: 34px; text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--press); color: var(--text); }
.lc-score-pill.tone-ok { background: var(--low-bg); color: var(--low-fg); } .lc-score-pill.tone-warn { background: var(--amber-bg); color: var(--amber-fg); } .lc-score-pill.tone-bad { background: var(--crit-bg); color: var(--crit-fg); }
a.hub-row-link { text-decoration: none; color: inherit; display: block; }
a.hub-row-link:hover { background: var(--blue-tint); }

.lc-split { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.8fr); gap: 18px; align-items: start; }
.lc-hint { font-size: 13px; margin: -6px 0 14px; }
.lc-attention { padding: 18px 20px; }
.lc-att-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--crit); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.lc-att-row:hover { box-shadow: var(--raise-sm); transform: translateY(-1px); }
.lc-att-main { min-width: 0; flex: 1; }
.lc-att-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lc-att-top strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; }
.lc-issues { display: flex; flex-wrap: wrap; gap: 5px; }
.lc-issue { display: inline-block; font-size: 12px; font-weight: 600; color: var(--amber-fg); background: var(--amber-bg); padding: 2px 8px; border-radius: 6px; line-height: 1.5; }
.lc-issue.more { color: var(--muted); background: var(--press); }
.lc-issue.bad { color: var(--crit-fg); background: var(--crit-bg); }
.lc-issue.ok { color: var(--low-fg); background: var(--low-bg); }
.lc-sites-card { padding: 18px 0 8px; }
.lc-sites-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px 12px; }
.lc-sites-head h2 { margin: 0; }
.lc-filters { display: flex; gap: 8px; }
.lc-filters { flex-wrap: wrap; align-items: center; }
.lc-filters input { width: 190px; }
.lc-filters input, .lc-filters select { height: 36px; padding: 0 12px; line-height: 36px; }
.lc-filters select { padding-right: 30px; min-width: 130px; }
.lc-table th:first-child, .lc-table td:first-child { width: 88px; }
.lc-row { cursor: pointer; }
.lc-row:hover td { background: var(--blue-tint); }
.lc-row.tone-bad td:first-child { box-shadow: inset 4px 0 0 var(--crit); }
.lc-row.tone-warn td:first-child { box-shadow: inset 4px 0 0 var(--amber-accent); }
.lc-td-score { white-space: nowrap; }
.lc-td-score .lc-ring { vertical-align: middle; }
.lc-site-name { font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; }
.lc-site-sub { font-size: 12.5px; margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lc-small { font-size: 12px; }
.lc-off { color: var(--crit-fg); font-weight: 700; font-size: 12.5px; }
.lc-on { color: var(--low-fg); font-weight: 700; font-size: 12.5px; }
.lc-upd { color: var(--blue-2); font-weight: 700; font-size: 12.5px; }
.lc-td-issues { max-width: 260px; }
.lc-ring text { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 13px; fill: var(--text); }
.lc-ring-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.lc-ring-fg { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .4s; }
.lc-ring.tone-ok .lc-ring-fg { stroke: var(--green); }
.lc-ring.tone-warn .lc-ring-fg { stroke: var(--amber-accent); }
.lc-ring.tone-bad .lc-ring-fg { stroke: var(--crit); }
.lc-ring.tone-quiet .lc-ring-fg { stroke: var(--faint); }
.lc-trend { font-size: 12px; font-weight: 700; margin-left: 4px; }
.lc-trend.up { color: var(--low-fg); } .lc-trend.down { color: var(--crit-fg); } .lc-trend.flat { color: var(--faint); }
.chip.st-quiet { color: var(--muted); background: var(--press); }
.chip.st-paused { color: var(--amber-fg); background: var(--amber-bg); }
.lc-row-off td { opacity: .55; }
.m365-table td { vertical-align: top; }
.m365-table th:nth-child(3), .m365-table td:nth-child(3) { min-width: 150px; }
.m365-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.m365-actions { display: flex; gap: 6px; margin-top: 8px; } .m365-actions .btn-small { padding: 6px 10px; font-size: 12.5px; }
.m365-company { max-width: 180px; padding: 6px 28px 6px 10px; }
.lc-note-ic { color: var(--purple); font-size: 12px; margin-left: 4px; }
.lc-full-link { font-size: 13px; font-weight: 700; color: var(--purple); text-decoration: none; margin-left: 10px; white-space: nowrap; vertical-align: 3px; }
.lc-full-link:hover { text-decoration: underline; }
/* site page */
.site-head { padding: 20px 24px; margin-bottom: 16px; }
.site-head-row { margin-bottom: 0; padding-right: 0; align-items: flex-start; }
.site-head-main { flex: 1; min-width: 0; }
.site-head-actions { margin: 0; flex-direction: column; align-items: stretch; }
.site-metrics { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.site-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .site-two { grid-template-columns: 1fr; } }
.site-h2 { margin-top: 22px; }
.site-notes-view { background: var(--bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
#tab-notes textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.site-mon { display: grid; gap: 8px; margin: 10px 0 12px; }
.site-mon-opt { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--bg); border-radius: 10px; cursor: pointer; }
.site-mon-extra { display: grid; gap: 10px; margin-bottom: 12px; max-width: 520px; }
.site-mon-extra label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.site-dev { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.site-dev.off { border-left: 4px solid var(--crit); }
.site-dev-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.site-dev-head strong a { color: inherit; text-decoration: none; } .site-dev-head strong a:hover { text-decoration: underline; }
.site-dev-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); background: var(--purple-bg); padding: 2px 7px; border-radius: 6px; }
.site-dev-sub { margin-top: 4px; }
.site-ports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; align-items: center; }
.site-port { position: relative; width: 30px; height: 30px; border-radius: 6px; background: var(--press); color: var(--faint); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; line-height: 1; border: 1.5px solid transparent; }
.site-port b { font-weight: 800; } .site-port i { font-style: normal; font-size: 8px; opacity: .8; }
.site-port.up { background: var(--blue-bg); color: var(--blue-2); border-color: var(--blue); }
.site-port.up.poe { background: var(--low-bg); color: var(--low-fg); border-color: var(--green); }
.site-port.sfp { border-radius: 2px; }
.site-port-legend { flex-basis: 100%; margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.site-port-legend .site-port { width: 14px; height: 14px; border-radius: 3px; }
.site-port.uplink { border-color: var(--purple); color: var(--purple); background: var(--purple-bg); }
.site-port.disabled { opacity: .4; text-decoration: line-through; }
.site-port.has-unifi::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }
.site-port:hover, .site-port:focus { outline: 2px solid var(--purple); outline-offset: 1px; cursor: default; }
.site-portcard { position: absolute; z-index: 60; width: 320px; background: var(--surface); border-radius: 12px; box-shadow: var(--raise); padding: 12px 14px; font-size: 13.5px; display: grid; gap: 6px; }
.site-portcard[hidden] { display: none; }
.site-pc-title { font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; }
.site-pc-conn { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.site-pc-k { color: var(--muted); font-size: 12px; }
.site-pc-conn a { color: var(--blue-2); }
.site-pc-btn { margin-top: 4px; justify-self: start; }
.site-gear-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.site-cloud-note { background: var(--amber-bg); color: var(--amber-fg); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.site-dev-restart { margin-left: auto; padding: 5px 10px; font-size: 12.5px; }
.btn-danger-ish { color: var(--crit-fg); }
.site-confirm-box { max-width: 520px; }
.site-confirm-box input { width: 100%; box-sizing: border-box; margin-top: 6px; }
.btn-primary.btn-danger { background: var(--crit); box-shadow: 0 8px 18px rgba(212,69,63,.3); }
/* drawer */
.lc-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
.lc-drawer { position: relative; width: min(640px, 100%); max-width: none; height: 100%; margin: 0; border-radius: 0; overflow-y: auto; padding: 26px 28px 40px; animation: lc-slide .18s ease-out; }
@keyframes lc-slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.lc-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--press); color: var(--muted); font-size: 15px; cursor: pointer; }
.lc-close:hover { color: var(--text); }
.lc-dr-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
.lc-dr-head .lc-ring text { font-size: 18px; }
.lc-dr-title { margin: 0 0 4px; font-size: 22px; }
.lc-dr-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.lc-dr-issues { margin-bottom: 14px; }
.lc-ok { color: var(--low-fg); font-weight: 600; }
.lc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.lc-metric { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.lc-metric-v { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 18px; }
.lc-metric-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lc-h3 { margin: 22px 0 8px; font-size: 15px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; display: flex; gap: 8px; align-items: baseline; }
.lc-spark { width: 100%; height: 64px; display: block; }
.lc-spark-path { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lc-spark-line { stroke: var(--amber-accent); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.lc-ai { background: var(--purple-bg); border-radius: 12px; padding: 12px 14px; }
.lc-ai-summary { margin: 0 0 10px; }
.lc-recs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.lc-recs li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border-radius: 10px; padding: 8px 10px; }
.lc-pri { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; margin-top: 2px; }
.lc-pri.now { background: var(--crit-bg); color: var(--crit-fg); }
.lc-pri.soon { background: var(--amber-bg); color: var(--amber-fg); }
.lc-pri.later { background: var(--blue-bg); color: var(--blue-2); }
.lc-gear td { padding: 8px 10px; }
.lc-gear-off td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
/* Computers board */
.cp-sev { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 14px; background: var(--crit-bg); color: var(--crit-fg); }
.cp-sev-lg { flex-basis: 64px; width: 64px; height: 64px; font-size: 20px; }
.cp-sev.tone-warn { background: var(--amber-bg); color: var(--amber-fg); } .cp-sev.tone-ok { background: var(--low-bg); color: var(--low-fg); }
.cp-cov { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 5px; border-radius: 5px; margin-right: 3px; background: var(--press); color: var(--faint); text-decoration: line-through; }
.cp-cov.on { background: var(--low-bg); color: var(--low-fg); text-decoration: none; }
.cp-rollup td, .cp-rollup th { padding: 9px 12px; }
.cp-table td { vertical-align: top; }
@media (max-width: 1000px) { .lc-split { grid-template-columns: 1fr; } .lc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  html { zoom: 1; }                                  /* the desktop 1.05 zoom just wastes width here */
  body { font-size: 15px; }
  main, main.dash, main.wide { padding: 0 14px; margin: 18px auto; gap: 16px; }
  .card { padding: 16px; border-radius: 16px; }
  h2 { font-size: 20px; }
  button, .btn-primary, .btn-secondary, .btn-small, .nav-link { min-height: 40px; }   /* finger-sized */

  /* --- Header: wordmark row, then the nav row; search gets its own full row --- */
  header { padding: 10px 12px; }
  .nav-pill { flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 14px; }
  header h1 { font-size: 17px; }
  header h1 .wm-tag { display: none; }
  .nav-pill .user-bar { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
  .nav-link { padding: 8px 9px; font-size: 13px; }
  .user-bar-right { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .user-bar-right .global-search { flex: 1 1 100%; order: 9; }
  .gsearch-input { width: 100%; }
  .gsearch-type { display: none; }
  .profile-menu, .notif-panel { position: fixed; left: 12px; right: 12px; top: auto; width: auto; max-width: none; }
  .notif-panel { max-height: 70vh; }
  .notif-list { max-height: 55vh; }

  /* --- Dashboard --- */
  .dvo-hero { margin-top: 12px; padding-bottom: 54px; }
  .dvo-hero-title { font-size: 26px; }
  .dvo-hero-inner { gap: 12px; }
  .dvo-hero-actions .btn-primary { width: 100%; }
  main.dash > .stats { margin-top: -40px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-card { padding: 14px; }
  .stat-number { font-size: 26px; }
  .list-head { flex-wrap: wrap; margin: 18px 0 10px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters > * { min-width: 0; }
  .filters select, .filters input { width: 100%; }
  .ticket-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 12px; }
  .ticket-row .t-merge, .ticket-row > .av { display: none; }   /* merging is a desktop job */
  .t-top { flex-wrap: wrap; }
  .t-subject { white-space: normal; overflow: visible; }
  .t-sub { flex-wrap: wrap; gap: 6px 10px; }
  .row-controls { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
  .row-line { display: flex; flex: 1 1 45%; }
  .row-line-label { display: none; }
  .row-select, .t-category .row-select { flex: 1 1 45%; width: auto; min-width: 0; }
  .t-assignee { flex: 1 1 45%; }
  .pager { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .merge-bar { left: 12px; right: 12px; transform: translateY(140%); }
  .merge-bar.show { transform: translateY(0); }
  .updates-pill { width: 100%; text-align: center; }

  /* --- Ticket page --- */
  main.wide { max-width: none; }
  .detail-side { position: static; width: 100%; margin: 0; }
  .detail-body-row { flex-direction: column; gap: 14px; }
  .detail-head { flex-wrap: wrap; gap: 8px; }
  .detail-head h2 { font-size: 22px; }
  dl.fields { grid-template-columns: 1fr; gap: 4px 0; }
  dl.fields dt { margin-top: 8px; font-size: 11px; }
  dl.fields dd { margin: 0; }
  dl.fields .inline-select, dl.fields .row-select { width: 100%; max-width: none; }
  .sla-actions { flex-wrap: wrap; gap: 8px; }
  .ticket-delete-btn { margin-left: 0; }
  .status-buttons .status-btn { flex: 1 1 45%; }
  .scenario-bar .btn-small { flex: 1 1 100%; }
  .ticket-columns { grid-template-columns: 1fr; gap: 16px; }
  .msg { padding: 10px 12px; }
  .msg-html img { max-width: 100%; height: auto; }
  .recip-field { flex-wrap: wrap; }
  .ql-toolbar.ql-snow { flex-wrap: wrap; }
  .reply-buttons { flex-wrap: wrap; }
  .reply-buttons button { flex: 1 1 45%; }
  .presence-bar { width: 100%; border-radius: 12px; }
  .time-form { flex-direction: column; align-items: stretch; }
  .ai-summary-side { width: 100%; }

  /* --- Forms, tables, directory pages --- */
  .form-actions { flex-wrap: wrap; }
  .form-actions button { flex: 1 1 45%; }
  .field-grid { grid-template-columns: 1fr; }
  .task-grid { grid-template-columns: 1fr; }
  .task-links { grid-template-columns: 1fr; }
  .task-cal-grid { grid-template-columns: 1fr; }
  .stats.task-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-head { flex-wrap: wrap; gap: 10px; }
  .dashboard-head .btn-primary { width: 100%; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dir-page { max-width: 100%; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-modal { max-height: 100vh; border-radius: 0; }
  .merge-overlay { padding: 0; align-items: stretch; }
  .auto-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .empty-state { padding: 24px 12px; }
}

/* ===========================================================================
   PHONE "LITE" MODE — body.mobile (set by auth.js on <=700px).
   A stripped-down app: bottom tab bar, compact dashboard, minimal ticket page
   with a ... menu that opens the other sections in a bottom sheet.
   =========================================================================== */
/* --- Shell: bottom tab bar, no top nav links --- */
body.mobile { padding-bottom: 68px; }                     /* room for the tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--surface); box-shadow: 0 -6px 18px rgba(20,24,60,0.12);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; }
.tabbar .tab.active { color: var(--purple); background: var(--purple-bg); }
body.mobile .nav-link, body.mobile .global-search, body.mobile header h1 .wm-tag { display: none; }
body.mobile .nav-pill { flex-wrap: nowrap; justify-content: space-between; }
body.mobile .nav-pill .user-bar { flex: 0 0 auto; }
body.mobile .user-bar-right { flex: 0 0 auto; margin-left: auto; }
body.mobile .theme-toggle { bottom: 140px; }   /* above the floating + New Ticket button */
body.mobile .back-link { margin-bottom: 8px; }

/* --- Dashboard: chips row + filters + tight rows; floating "+" --- */
body.mobile .dvo-hero { margin: 0; padding: 0; }
body.mobile .dvo-hero-kicker, body.mobile .dvo-hero-title { display: none; }
body.mobile .dvo-hero-actions .btn-primary {
  position: fixed; right: 16px; bottom: 84px; z-index: 89; width: auto;
  border-radius: 999px; padding: 12px 18px; font-size: 15px;
}
body.mobile main.dash > .stats { margin-top: 12px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
body.mobile .stats::-webkit-scrollbar { display: none; }
body.mobile .stat-card { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
body.mobile .stat-icon { display: none; }
body.mobile .stat-number { font-size: 18px; }
body.mobile .stat-label { margin: 0; font-size: 12px; white-space: nowrap; }
body.mobile .list-head { margin: 12px 0 8px; }
body.mobile .list-head h2 { font-size: 18px; }
body.mobile .filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
body.mobile .filters::-webkit-scrollbar { display: none; }
body.mobile .filters > * { flex: 0 0 auto; min-width: 130px; }
body.mobile .filters label, body.mobile .filters .filter-label { font-size: 10px; }
body.mobile .ticket-row { padding: 12px 10px; gap: 6px; }
body.mobile .ticket-row .row-controls, body.mobile .ticket-row .t-category, body.mobile .ticket-row .t-merge, body.mobile .t-tags { display: none; }
body.mobile .t-top { display: flex; align-items: baseline; gap: 6px; }
body.mobile .t-subject { white-space: normal; font-size: 14.5px; line-height: 1.3; }
body.mobile .t-sub { font-size: 12px; }
body.mobile .t-lastresp { white-space: normal; }
.t-mchips { display: none; }
body.mobile .t-mchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
body.mobile .t-mchips .badge, body.mobile .t-mchips .chip { padding: 2px 9px; font-size: 11px; }
body.mobile .t-sla { margin-top: 2px; }
body.mobile .t-sla .sla-badge { font-size: 11px; padding: 2px 8px; }
body.mobile .pager { justify-content: space-between; }
body.mobile .pager .pager-size { display: none; }

/* --- Ticket page: summary + AI + threads; the rest in sheets --- */
body.mobile .presence-bar { margin: 0 0 8px; }
body.mobile #ticket-detail { padding: 14px; }
body.mobile .detail-head { position: relative; padding-right: 44px; }
body.mobile .detail-head h2 { font-size: 20px; }
body.mobile .import-badge { font-size: 11px; }
body.mobile #ticket-detail h3 { font-size: 16px; margin: 6px 0 8px; line-height: 1.3; }
body.mobile .description, body.mobile .description-pointer { display: none; }
body.mobile dl.fields { grid-template-columns: max-content 1fr; gap: 8px 12px; margin: 8px 0; align-items: center; }
body.mobile dl.fields dt { font-size: 11px; margin: 0; }
body.mobile dl.fields .m-extra { display: none; }              /* moved to "More details" */
body.mobile dl.fields dt[hidden] { display: none; }
body.mobile #priority-select, body.mobile .m-status, body.mobile #assign-select, body.mobile #category-select { width: 100%; max-width: none; }
body.mobile #ai-categorize-btn { display: none; }
body.mobile dl.fields dd:nth-of-type(2) { display: flex; align-items: center; gap: 8px; }
body.mobile dl.fields dd:nth-of-type(2) .chip { display: none; }   /* the select replaces the chip */
body.mobile .status-actions, body.mobile .sla-actions, body.mobile .scenario-bar, body.mobile .ticket-delete-btn { display: none; }
body.mobile .detail-side { display: none; }                       /* contact / articles / time live behind the menu */
body.mobile #history-card { display: none; }
body.mobile #m-details { display: none; }
body.mobile .detail-body-row { flex-direction: column; gap: 10px; }
/* AI summary: header row stays, body collapses */
body.mobile .ai-summary-panel { width: 100%; }
body.mobile .ai-summary-head { cursor: pointer; }
body.mobile .ai-summary-panel.m-collapsed .ai-summary-body { display: none; }
body.mobile .ai-summary-panel .ai-summary-head::after { content: "\25BE"; margin-left: auto; color: var(--muted); }
body.mobile .ai-summary-panel.m-collapsed .ai-summary-head::after { content: "\25B8"; }
/* Threads: conversation open, notes collapsed; tap the heading to toggle */
body.mobile .ticket-columns { gap: 12px; }
body.mobile .column h2 { cursor: pointer; display: flex; align-items: center; margin-bottom: 4px; font-size: 16px; }
body.mobile .column h2::after { content: "\25BE"; margin-left: auto; color: var(--muted); font-size: 14px; }
body.mobile .column.m-collapsed h2::after { content: "\25B8"; }
body.mobile .column.m-collapsed > *:not(h2) { display: none; }
body.mobile .column .box-hint { display: none; }
body.mobile .msg-thread { max-height: none; }
body.mobile .tpl-bar { flex-wrap: wrap; }
/* ... menu */
.m-more-btn { position: absolute; right: 0; top: -4px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--press); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: none; }
.m-menu { position: absolute; right: 0; top: 38px; z-index: 40; min-width: 210px; background: var(--surface); border-radius: 14px; box-shadow: var(--raise); padding: 6px; display: flex; flex-direction: column; }
.m-menu[hidden] { display: none; }
.m-menu button { text-align: left; background: none; border: none; box-shadow: none; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.m-menu button:hover { background: var(--press); }
.m-menu button.danger { color: var(--crit-fg); }
/* Bottom sheet that hosts a moved section */
.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 12vh; z-index: 120; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(10,12,30,0.35); display: flex; flex-direction: column; }
.m-sheet[hidden] { display: none; }
.m-sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.m-sheet-body { overflow-y: auto; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
body.m-sheet-open { overflow: hidden; }
/* Sections shown inside the sheet override their hidden-on-mobile rules */
body.mobile .m-sheet .m-in-sheet { display: block !important; width: auto; margin: 0; position: static; }
body.mobile .m-sheet .status-actions.m-in-sheet, body.mobile .m-sheet .sla-actions.m-in-sheet, body.mobile .m-sheet .scenario-bar.m-in-sheet { display: flex !important; flex-wrap: wrap; }
body.mobile .m-sheet dl.fields .m-extra { display: block; }
body.mobile .m-sheet .m-fields { grid-template-columns: max-content 1fr; }


/* ---------------------------------------------------------------------------
   Client health report (report.html)
   --------------------------------------------------------------------------- */
.report { max-width: 1100px; }
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rp-include { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1 1 360px; }
.rp-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.rp-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.rp-hint { flex-basis: 100%; margin: 0; font-size: 0.8rem; }
.rp-head { border-top: 4px solid var(--purple); }
.rp-head h2 { margin: 2px 0 4px; }
.rp-head p { margin: 0; }
.rp-brand { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); font-weight: 700; }
.rp-section h3 { margin: 0 0 12px; }
.rp-section h4 { margin: 16px 0 8px; font-size: 0.9rem; }
.rp-excluded { opacity: 0.4; }
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 10px; }
.rp-facts .info-label { margin-right: 6px; }
.rp-services { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-ai { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--purple-bg); }
.rp-ai-summary { margin: 0 0 6px; line-height: 1.55; }
.rp-ai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.rp-ai ul, .rp-ai ol { margin: 0; padding-left: 20px; line-height: 1.5; }
.rp-recs li { margin-bottom: 4px; }
.rp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; }
.rp-bars { display: grid; gap: 6px; }
.rp-bar-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 34px; align-items: center; gap: 8px; font-size: 0.85rem; }
.rp-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar { height: 10px; border-radius: 6px; background: var(--press); overflow: hidden; }
.rp-bar > span { display: block; height: 100%; background: var(--purple); border-radius: 6px; }
.rp-bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.rp-trend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
.rp-week { display: flex; flex-direction: column; align-items: center; height: 100%; }
.rp-cols { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.rp-cols span { width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; }
.rp-open, .rp-k-open { background: var(--purple); }
.rp-closed, .rp-k-closed { background: var(--green); }
.rp-legend { font-weight: 400; font-size: 0.8rem; margin-left: 8px; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
.rp-wk { font-size: 0.68rem; color: var(--faint); margin-top: 4px; white-space: nowrap; }
.rp-table { width: 100%; margin-top: 4px; }
.rp-table td { vertical-align: top; }
.rp-issues { font-size: 0.85rem; line-height: 1.45; }
.rp-flag { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 0.75rem; background: var(--crit-bg); color: var(--crit-fg); }
.rp-score { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.rp-score.tone-ok { background: var(--green-bg); color: var(--green-deep); }
.rp-score.tone-warn { background: var(--amber-bg); color: var(--amber-fg); }
.rp-score.tone-bad { background: var(--crit-bg); color: var(--crit-fg); }
.rp-score.tone-quiet { background: var(--press); color: var(--muted); }
.rp-small { font-size: 0.8rem; margin: 10px 0 0; }

@media print {
  html { zoom: 1; }
  /* Light colours on paper even when the screen is in dark mode. */
  body.report-page { background: #fff !important; color: #000;
    --text:#171a26; --muted:#5a6172; --faint:#8b92a6; --surface:#fff; --press:#eceef4; --line:rgba(120,130,160,0.25);
    --purple:#7c3aed; --purple-bg:#f1edfc; --green:#12b76a; --green-bg:#dcf5e8; --green-deep:#0c7a47; }
  .report-page .no-print, .report-page header, .report-page .rp-excluded { display: none !important; }
  .report-page main.report { max-width: none; margin: 0; padding: 0; }
  .report-page .card { box-shadow: none !important; border: 1px solid #ddd; background: #fff !important; break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; }
  .report-page .rp-section table { break-inside: auto; }
  .report-page .stat-card { box-shadow: none !important; border: 1px solid #e3e3e3; background: #fff !important; }
  .report-page a { color: inherit; text-decoration: none; }
  .report-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.hub-head .contact-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Calendar invite picker (ticket sidebar): who gets the Outlook invitation. */
.cal-invitees { margin: 6px 0 2px 22px; display: flex; flex-direction: column; gap: 4px; }
.cal-invitee { font-size: 12.5px; }
.cal-invitee-extra { width: 100%; margin-top: 4px; font-size: 12.5px; padding: 7px 10px; }

/* Dashboard hover preview: the last few messages of a ticket, on a card. */
.t-preview {
  position: fixed; z-index: 60; width: min(520px, calc(100vw - 16px));
  background: var(--surface); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 14px 36px rgba(10,12,30,0.24); pointer-events: none;
  font-size: 13px; line-height: 1.45; color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
}
.t-preview-msg { padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 6px; background: var(--press); }
.t-preview-msg.is-client { border-left-color: var(--blue); }
.t-preview-msg.is-agent { border-left-color: var(--open-fg); }
.t-preview-msg.is-note { border-left-color: var(--amber-accent); background: var(--amber-bg); }
.t-preview-msg:not(.is-latest) { opacity: 0.78; }
.t-preview-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }
.t-preview-text { overflow-wrap: anywhere; }

/* Similar tickets (AI panel on the ticket page). */
.ai-similar { margin-top: 12px; border-top: 1px solid rgba(124,58,237,0.18); padding-top: 10px; }
.ai-similar > summary { cursor: pointer; font-size: 0.84rem; font-weight: 700; color: var(--purple); list-style: none; display: flex; align-items: center; gap: 6px; }
.ai-similar > summary::-webkit-details-marker { display: none; }
.ai-similar > summary::before { content: '▸'; font-size: 0.8em; transition: transform 0.15s; }
.ai-similar[open] > summary::before { transform: rotate(90deg); }
.sim-count { font-weight: 600; font-size: 0.78rem; }
.ai-similar-btn { display: inline-block; margin-top: 8px; background: var(--surface); border: none; cursor: pointer; color: var(--purple); font: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; box-shadow: var(--inset); }
.ai-similar-btn:hover { text-decoration: underline; }
.ai-similar-btn:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
.sim-head { font-size: 0.78rem; color: var(--faint); margin: 8px 0 6px; }
.sim-row { display: block; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; font-size: 0.84rem; box-shadow: var(--inset); }
.sim-row:hover { filter: brightness(0.98); }
.sim-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sim-top .chip { font-size: 10px; padding: 1px 7px; }
.sim-co { font-size: 10px; font-weight: 700; color: var(--blue-2); background: var(--blue-bg); padding: 1px 7px; border-radius: 999px; }
.sim-subject { font-weight: 600; margin-top: 2px; }
.sim-meta { font-size: 0.76rem; }
.sim-why { margin-top: 4px; font-size: 0.8rem; color: var(--muted); font-style: italic; }

/* --- Security board: Huntress block ---------------------------------------- */
.lc-sub-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.hu-inc { border-bottom: 1px solid var(--line); }
.hu-inc > summary { list-style: none; cursor: pointer; }
.hu-inc > summary::-webkit-details-marker { display: none; }
.hu-closed > summary { opacity: .75; }
.hu-inc-body { padding: 4px 12px 14px 54px; }
.hu-pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; max-height: 340px; overflow: auto; background: var(--press); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.hu-cmd { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.hu-line { margin: 4px 0; }
.lc-dr-h { margin: 14px 0 6px; font-size: 14px; }
.rp-quote { font-style: italic; white-space: pre-line; }

/* ---- Utility classes (2026-10-23, Content-Security-Policy clean-up) ------
   These replace the one-off style="" attributes the pages used to carry. A
   strict CSP forbids inline styles, so every such rule now lives here. Keep
   them small and single-purpose; page-specific looks belong in a real class. */
.is-hidden { display: none; }                 /* initial state; JS may still set el.style.display */
.u-block { display: block; }
.u-nowrap { white-space: nowrap; }
.lc-split > .lc-col { min-width: 0; }                 /* long incident titles no longer widen the column (QA 2026-10-26 #18) */
#hu-incidents .hu-inc > summary, .hu-inc-body { overflow-wrap: anywhere; }
.u-m0 { margin: 0; }
.u-mt-3 { margin-top: 3px; }   .u-mt-10 { margin-top: 10px; }  .u-mt-18 { margin-top: 18px; }  .u-mt-22 { margin-top: 22px; }
.u-mb-8 { margin-bottom: 8px; } .u-mb-10 { margin: 0 0 10px; }  .u-mb-22 { margin: 0 0 22px; }  .u-my-16-6 { margin: 16px 0 6px; }
.u-pb-10 { padding: 0 0 10px; }
.u-w100 { width: 100%; }
.u-maxw-520 { max-width: 520px; } .u-maxw-560 { max-width: 560px; } .u-maxw-620 { max-width: 620px; } .u-maxw-760 { max-width: 760px; }
.u-narrow-top { max-width: 520px; margin: 12vh auto 0; }
.u-maxh-340 { max-height: 340px; } .u-maxh-420 { max-height: 420px; }
.u-grow-180 { flex: 1; min-width: 180px; } .u-grow-260 { flex: 1; min-width: 260px; }
.u-ai-center { align-items: center; }
.u-row-8 { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.u-row-10 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.u-row-10-mt { display: flex; gap: 10px; margin-top: 12px; }
.u-row-start-8 { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.u-link-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; color: inherit; margin: 8px 0; }
.u-rule-top { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }      /* was #eee - the token works in dark mode too */
.u-rule-top-lg { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.u-empty-pad { text-align: center; padding: 48px 32px; }
.u-fw-normal { font-weight: normal; } .u-sub { font-weight: 400; font-size: 14px; } .u-fs-12 { font-size: 12px; }
.u-glyph { font-size: 56px; line-height: 1; }
.u-link-purple { color: var(--purple); font-weight: 600; }
.u-plain-link { color: inherit; text-decoration: none; }
.legend-opened { background: var(--blue); } .legend-closed { background: #16a34a; }

/* ---- Sign-in options (2026-10-23, Phase 2) -------------------------------- */
.btn-ms { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: var(--raise-sm);
  border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.btn-ms:hover { transform: translateY(-1px); text-decoration: none; }
.btn-ms:active { transform: translateY(1px); box-shadow: var(--inset); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; min-height: 1.2em; }

/* ---- UI BUGS folder, 2026-10-26 ---------------------------------------------- */
/* Services on the ticket contact card fold into a dropdown (summary = count + covering service). */
.svc-dd { margin-top: 6px; }
.svc-dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: var(--press); box-shadow: var(--inset); font-size: 13px; font-weight: 600; }
.svc-dd > summary::-webkit-details-marker { display: none; }
.svc-dd > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex: none; }
.svc-dd[open] > summary::after { transform: rotate(225deg); }
.svc-dd .svc-chips { margin-top: 8px; }
/* Tasks panel in the ticket sidebar: the hint overlapped the Create-task row. */
.ticket-task-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ticket-task-form-row label { display: block; flex: 1 1 140px; min-width: 0; }
.ticket-task-form-row input[type="date"] { width: 100%; box-sizing: border-box; }
.ticket-task-form-row button { flex: none; }
.ticket-task-hint { margin-top: 10px; }
.back-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px; margin-bottom: 16px; }
.back-row .back-link { margin-bottom: 0; }

/* Phase 3: why a ticket is On Hold (classic look; v2 restyles it in redesign.css). */
.hold-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e0e3e9; color: #454d5b; }
.hold-chip .hold-note { font-weight: 400; }
.t-hold { color: #454d5b; }

/* Phase 3: two SLA clocks — classic look (v2 restyles in redesign.css). */
.sla-1st { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 3px; border-radius: 3px; background: rgba(0,0,0,.12); margin-right: 2px; }
.sla-meters { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sla-meter { display: inline-grid; grid-template-columns: auto 64px auto; align-items: center; gap: 6px; font-size: 12px; }
.sla-meter-label { color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.sla-meter-bar { display: block; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.sla-meter-bar i { display: block; height: 100%; background: #16a34a; }
.sla-meter-yellow .sla-meter-bar i { background: #d97706; }
.sla-meter-red .sla-meter-bar i, .sla-meter-late .sla-meter-bar i { background: #dc2626; }
.sla-meter-done .sla-meter-bar i { background: #9ca3af; }
.sla-targets-grid { border-collapse: collapse; margin: 8px 0 6px; }
.sla-targets-grid th, .sla-targets-grid td { padding: 4px 8px 4px 0; text-align: left; font-size: 12px; }
.sla-targets-grid input { width: 90px; }
.snooze-chip { background: #ece4fd; color: #5b21b6; }

/* ---- Phase 3: @mentions ---- */
#note-form { position: relative; }
.mention { display: inline; padding: 0 4px; border-radius: 4px; background: rgba(124, 58, 237, .12); color: #5b21b6; font-weight: 600; }
.mention-pop { position: absolute; z-index: 50; min-width: 220px; max-width: 320px; padding: 4px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mention-item.is-active, .mention-item:hover { background: rgba(124, 58, 237, .1); }
.mention-name { font-weight: 600; }
.mention-role { margin-left: auto; font-size: 11px; color: #6b7280; }
.msg.is-target { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* ---- Phase 4: client portal status timeline + "Was this solved?" ---- */
.pt-steps { display: flex; gap: 0; list-style: none; margin: 10px 0 4px; padding: 0; counter-reset: step; }
.pt-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; padding: 8px 6px; text-align: center; color: #6b7280; font-size: 12px; }
.pt-step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 0; }
.pt-step:first-child::before { display: none; }
.pt-step.is-done::before, .pt-step.is-current::before { background: #16a34a; }
.pt-step-ic { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #e5e7eb; color: #9ca3af; }
.pt-step.is-done .pt-step-ic { background: #16a34a; border-color: #16a34a; color: #fff; }
.pt-step.is-current .pt-step-ic { border-color: #7c3aed; color: #7c3aed; background: #f3e8ff; box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.pt-step.is-current { color: #111827; font-weight: 700; }
.pt-step.is-done { color: #374151; }
.pt-step-when { font-size: 11px; font-weight: 400; color: #6b7280; }
.pt-tech { margin: 2px 0 10px; font-size: 13px; color: #374151; }
.pt-solved { margin-top: 12px; }
@media (max-width: 600px) { .pt-steps { flex-direction: column; align-items: stretch; } .pt-step { flex-direction: row; text-align: left; justify-content: flex-start; gap: 10px; padding: 6px 0; } .pt-step::before { top: -8px; left: 14px; width: 2px; height: 16px; } .pt-step-when { margin-left: auto; } }