/* ==========================================================================
   Comms Express CRM: the one global stylesheet
   RADAR 2.0 look and feel, in Comms Express brand colours.

   Sections
     1. Fonts            9. Tables             17. Toasts
     2. Tokens          10. Pills & badges     18. Empty states & loading
     3. Base            11. Modals             19. Record detail
     4. Login           12. Forms              20. Dashboard bits
     5. Sidebar         13. Boxes              21. Footer
     6. Header          14. Board (pipeline)   22. Styleguide helpers
     7. Buttons         15. Lists & toolbars   23. Responsive
     8. Cards & KPI     16. Dropdowns          24. Print

   Rules: hex values live in :root only. Pill colours come from picklist data
   (see CX.paintPills in app.js); nothing here hardcodes a status colour.
   Button order everywhere: the action first, Cancel last (right-aligned).
   ========================================================================== */


/* 1. Fonts ================================================================ */
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Solari'; src: url('/assets/fonts/Solari.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Flight'; src: url('/assets/fonts/Flight.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }


/* 2. Tokens =============================================================== */
:root {
  /* Comms Express palette */
  --comms-blue: #313366;
  --comms-orange: #F06538;
  --comms-orange-text: #C94A1F;   /* darker orange for text links on white (4.7:1) */
  --comms-green: #A6CC75;
  --comms-red: #990000;
  --comms-light-grey: #E2E2E2;
  --comms-lighter-grey: #F2F2F2;
  --comms-grey: #656565;
  --comms-dark-grey: #333333;
  --comms-light-blue: #13A0D8;
  --comms-yellow: #FBC249;
  --white: #FFFFFF;
  --black: #000000;

  /* Roles */
  --bg: var(--comms-lighter-grey);
  --panel: var(--white);
  --brand: var(--comms-blue);
  --accent: var(--comms-orange);
  --text: var(--comms-dark-grey);
  --muted: var(--comms-grey);
  --border: var(--comms-light-grey);
  --success: var(--comms-green);
  --danger: var(--comms-red);
  --warning: var(--comms-yellow);
  --info: var(--comms-light-blue);

  /* Tints, rings, overlays */
  --tint-red: rgba(153, 0, 0, .10);
  --tint-red-soft: rgba(153, 0, 0, .08);
  --tint-amber: rgba(251, 194, 73, .18);
  --tint-green: rgba(166, 204, 117, .18);
  --tint-info: rgba(19, 160, 216, .12);
  --tint-orange: rgba(240, 101, 56, .10);
  --ring: 0 0 0 3px rgba(240, 101, 56, .2);
  --overlay: rgba(0, 0, 0, .4);
  --login-veil: rgba(49, 51, 102, .55);
  --on-navy-hover: rgba(255, 255, 255, .08);
  --on-navy-active: rgba(255, 255, 255, .12);
  --on-navy-line: rgba(255, 255, 255, .10);
  --input-bg: rgba(255, 255, 255, .75);
  --input-inset: inset 0 1px 2px rgba(0, 0, 0, .06);

  /* Chart series, in order */
  --chart-1: var(--comms-blue);
  --chart-2: var(--comms-orange);
  --chart-3: var(--comms-light-blue);
  --chart-4: var(--comms-green);
  --chart-5: var(--comms-yellow);
  --chart-6: var(--comms-grey);
  /* Report builder doughnut slices: Comms hues stepped into one lightness band and ordered so neighbouring slices stay
     apart for colour-blind readers (checked with the dataviz palette validator, adjacent pairs incl. last→first). */
  --cat-1: #4B4E9C; --cat-2: #E0582C; --cat-3: #1392C6; --cat-4: #C98A00; --cat-5: #A8467E; --cat-6: #6F9E3A;
  --cat-other: #B5B5B5;
  --chart-grid: #E9E9EE;

  /* Shape */
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px;
  --shadow: 0 8px 20px rgba(0, 0, 0, .06);
  --shadow-header: 0 1px 4px rgba(0, 0, 0, .04);
  --shadow-login: 0 10px 25px rgba(49, 51, 102, .15), 0 30px 60px rgba(49, 51, 102, .25);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .25);
  --shadow-menu: 0 12px 28px rgba(0, 0, 0, .12);
  --shadow-seg: 0 1px 3px rgba(0, 0, 0, .12);
  --shadow-up: 0 -6px 16px rgba(0, 0, 0, .06);
  --sidebar-w: 240px;
  --header-h: 60px;

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Solari', 'Figtree', system-ui, sans-serif;
  --font-flight: 'Flight', 'Figtree', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* 3. Base ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font: 400 16px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: var(--comms-orange-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
h1, h2, h3 { color: var(--brand); margin: 0; line-height: 1.25; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
small { font-size: .8rem; }
hr { border: 0; border-top: 2px solid var(--accent); margin: 1rem 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.display-font { font-family: var(--font-display); font-weight: 400; }
.flight-font { font-family: var(--font-flight); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.1em; text-align: center; flex: none; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-gap.center { justify-content: center; }
.m-0 { margin: 0; }
.text-left { text-align: left; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}


/* 4. Login ================================================================ */
body.login-page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px;
  background: linear-gradient(var(--login-veil), var(--login-veil)), url('/assets/img/loginscreen.webp') center / cover no-repeat fixed;
  background-color: var(--brand);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border-radius: 20px;
  border-top: 4px solid var(--accent);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-login);
}
.login-logo { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 1rem; }
.login-logo-text { display: block; margin: 0 auto 1rem; font-weight: 800; font-size: 1.5rem; color: var(--brand); }
.login-form { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.login-form label { display: block; width: 95%; text-align: left; font-size: .9rem; color: var(--muted); }
.login-form label span { display: block; margin-bottom: .3rem; }
.login-form input {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--input-bg); box-shadow: var(--input-inset);
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--input-inset), var(--ring); }
.login-btn {
  width: 95%; padding: .8rem; margin-top: .4rem;
  border: 0; border-radius: var(--r-md);
  background: var(--accent); color: var(--white);
  font: 700 1rem/1 var(--font); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  overflow: hidden; transition: background-color .2s;
}
.login-btn .plane { display: inline-block; transition: transform .5s ease; }
.login-btn:hover, .login-btn:focus-visible { background: var(--brand); }
.login-btn:hover .plane, .login-btn:focus-visible .plane { transform: translateX(100px); }
.login-card .error-box, .login-card .info-box { text-align: left; margin-bottom: 1rem; }
.login-foot { margin-top: 1.5rem; font-size: .8rem; color: var(--muted); }
.login-foot a { color: var(--muted); }
.login-title { font-size: 1.15rem; color: var(--brand); margin: 0 0 .4rem; }
.login-help { font-size: .88rem; color: var(--muted); margin: 0 0 1rem; text-align: left; }
.login-form input.login-code { font-size: 1.3rem; letter-spacing: .25em; text-align: center; }
.login-form label.login-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.login-form label.login-check input { width: 1.1rem; height: 1.1rem; padding: 0; margin: 0; box-shadow: none; accent-color: var(--accent); flex: none; }
.login-form label.login-check span { margin: 0; }


/* 5. Sidebar ============================================================== */
.shell { display: flex; min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  background: var(--brand); color: var(--white);
  display: flex; flex-direction: column;
  padding: 18px 12px 12px;
  overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; justify-content: center; padding: 4px 8px 20px; color: var(--white); text-decoration: none !important; }
.sidebar-logo img { height: 44px; width: auto; max-width: 150px; object-fit: contain; }
.sidebar-logo .logo-icon { display: none; width: 40px; height: 36px; max-width: none; }
.sidebar-logo-text { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.sidebar-logo-text b { color: var(--comms-yellow); font-weight: 800; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section { margin-top: 10px; }
.nav-label {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px 6px; border: 0; background: none; cursor: pointer;
  font: 600 .75rem/1 var(--font); letter-spacing: .02em; text-transform: uppercase;
  color: var(--comms-light-grey); opacity: .7;
}
.nav-label:hover { opacity: 1; }
.nav-label .chev { transition: transform .2s ease; font-size: .7rem; }
.nav-section.collapsed .nav-label .chev { transform: rotate(-90deg); }
.nav-items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; max-height: 600px; opacity: 1; transition: max-height .2s ease, opacity .2s ease; }
.nav-section.collapsed .nav-items { max-height: 0; opacity: 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  color: var(--white); opacity: .85;
  font: 500 .95rem/1.2 var(--font);
  border: 0; border-left: 3px solid transparent; background: none; width: 100%; text-align: left; cursor: pointer;
  text-decoration: none !important;
  transition: background-color .15s, opacity .15s;
}
.nav-item .icon { font-size: 1.2rem; }
.nav-item:hover { background: var(--on-navy-hover); opacity: 1; }
.nav-item.active { background: var(--on-navy-active); opacity: 1; border-left-color: var(--accent); font-weight: 600; }
.nav-item.active .icon { color: var(--accent); }
.sidebar-foot { border-top: 1px solid var(--on-navy-line); padding-top: 8px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-toggle { font-size: .85rem; }

/* Collapsed sidebar (desktop): an icon rail. Names show as tooltips (title). */
.sidebar, .main { transition: width .2s ease, margin-left .2s ease; }
body.sidebar-collapsed { --sidebar-w: 72px; }
body.sidebar-collapsed .sidebar { padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
body.sidebar-collapsed .sidebar-logo { padding: 4px 0 20px; }
body.sidebar-collapsed .sidebar-logo img { width: 39px; height: 39px; max-width: none; object-fit: cover; object-position: left center; }
body.sidebar-collapsed .sidebar-logo.has-icon .logo-full { display: none; }
body.sidebar-collapsed .sidebar-logo .logo-icon { display: block; width: 40px; height: 36px; object-fit: contain; }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-item > span { display: none; }
body.sidebar-collapsed .nav-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--on-navy-line); }
body.sidebar-collapsed .nav-section:first-child { border-top: 0; }
body.sidebar-collapsed .nav-section.collapsed .nav-items { max-height: 600px; opacity: 1; } /* sections always open as a rail */
body.sidebar-collapsed .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
body.sidebar-collapsed .nav-item .icon { font-size: 1.35rem; }
.scrim { display: none; }


/* 6. Header =============================================================== */
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--header-h); padding: 10px 24px;
  background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-header);
}
.topbar-title { font-size: 1.25rem; font-weight: 700; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search {
  display: flex; align-items: center; gap: 8px; width: 320px; max-width: 40vw;
  padding: 0 12px; height: 38px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.search:focus-within { background: var(--panel); border-color: var(--accent); box-shadow: var(--ring); }
.search input { border: 0; outline: 0; background: none; font: inherit; font-size: .9rem; color: var(--text); width: 100%; min-width: 0; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
  border: 0; background: none; color: var(--brand); cursor: pointer; font-size: 1.05rem;
}
.icon-btn:hover { background: var(--bg); color: var(--accent); }
.burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 9px 8px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 3px; border-radius: 3px; background: var(--accent); }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; border: 0; background: none; cursor: pointer; font: 600 .9rem var(--font); color: var(--brand); }
.user-btn:hover { background: var(--bg); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--white); display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-menu);
  padding: 6px;
}
.user-dropdown .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-dropdown .who strong { display: block; color: var(--brand); }
.user-dropdown .who small { color: var(--muted); }
.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 0; background: none; font: 500 .9rem var(--font); color: var(--text); text-align: left; cursor: pointer; text-decoration: none;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg); text-decoration: none; }
.user-dropdown .icon { color: var(--muted); }
.content { flex: 1; width: 100%; padding: 20px 24px; }


/* 7. Buttons ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: var(--r-sm);
  font: 600 13px/1.2 var(--font); white-space: nowrap; cursor: pointer;
  background: var(--comms-lighter-grey); color: var(--text);
  text-decoration: none !important;
  transition: background-color .18s, color .18s, box-shadow .18s, opacity .18s;
}
.btn:hover { background: var(--comms-light-grey); }
.btn-primary { background: var(--accent); color: var(--white); font-size: 14px; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--brand); color: var(--white); }
.btn-secondary { background: var(--brand); color: var(--white); font-size: 14px; font-weight: 700; }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--accent); color: var(--white); }
.btn-success { background: var(--success); color: var(--comms-dark-grey); }
.btn-success:hover { background: var(--brand); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); font-size: 14px; font-weight: 700; }
.btn-danger:hover { background: var(--brand); color: var(--white); }
.btn-cancel { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.btn-cancel:hover { background: var(--comms-light-grey); color: var(--text); }
.btn-ghost { background: transparent; color: var(--comms-orange-text); }
.btn-ghost:hover { background: var(--tint-orange); }
.btn-mini { font-size: .8rem; padding: 5px 8px; background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-mini:hover { background: var(--bg); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--muted); border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn-primary.is-loading::after, .btn-secondary.is-loading::after, .btn-danger.is-loading::after { border-color: var(--white); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }


/* 8. Cards & KPI ========================================================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1rem; }
.page-title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-title h1 { word-break: break-word; }
.page-sub { color: var(--muted); margin: 4px 0 0; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { display: flex; gap: 6px; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.card { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem; }
.card:last-child { margin-bottom: 0; }
.stack > .card, .stack-lg > .card, .grid-2 > .card { margin-bottom: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 2px solid var(--accent); }
.card-header h2 { font-size: 1.05rem; font-weight: 700; color: var(--brand); }
.card-flush > .card-header { padding: 1rem 1rem .6rem; margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 1rem; }
/* Balanced rows, whatever the number of tiles (roles and settings change it): one row on wide screens, two even rows
   in between, two columns on phones. --n = tiles, --half = the wider of two rows. */
.kpi-grid:has(> :nth-child(3):last-child) { --n: 3; --half: 3; }
.kpi-grid:has(> :nth-child(4):last-child) { --n: 4; --half: 2; }
.kpi-grid:has(> :nth-child(5):last-child) { --n: 5; --half: 3; }
.kpi-grid:has(> :nth-child(6):last-child) { --n: 6; --half: 3; }
.kpi-grid:has(> :nth-child(7):last-child) { --n: 7; --half: 4; }
.kpi-grid:has(> :nth-child(8):last-child) { --n: 8; --half: 4; }
.kpi-grid:has(> :nth-child(9):last-child) { --n: 9; --half: 5; }
@media (min-width: 1500px) { .kpi-grid:has(> :nth-child(3):last-child, > :nth-child(4):last-child, > :nth-child(5):last-child, > :nth-child(6):last-child, > :nth-child(7):last-child, > :nth-child(8):last-child, > :nth-child(9):last-child) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1499px) { .kpi-grid:has(> :nth-child(3):last-child, > :nth-child(4):last-child, > :nth-child(5):last-child, > :nth-child(6):last-child, > :nth-child(7):last-child, > :nth-child(8):last-child, > :nth-child(9):last-child) { grid-template-columns: repeat(var(--half), minmax(0, 1fr)); } }
@media (max-width: 699px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 14px; box-shadow: var(--shadow); color: var(--text);
  text-decoration: none !important; transition: transform .15s, box-shadow .15s;
}
a.kpi:hover, .kpi:hover { transform: translateY(-1px); }
.kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.kpi-label { color: var(--muted); font-weight: 600; font-size: .9rem; }
.kpi--red { background: var(--tint-red); border-color: var(--danger); }
.kpi--amber { background: var(--tint-amber); border-color: var(--warning); }
.kpi--green { background: var(--tint-green); border-color: var(--success); }
.kpi--info { background: var(--tint-info); border-color: var(--info); }


/* 9. Tables =============================================================== */
.table-scroll { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* relative: hidden labels inside stay inside, so they never widen the page */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table thead th {
  background: var(--brand); color: var(--white); font-weight: 600; font-size: .85rem;
  text-align: left; padding: .6rem .8rem; white-space: nowrap; user-select: none;
}
.table td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; vertical-align: middle; }
.table td:first-child, .table th:first-child { text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.table td.col-primary { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.table td.col-primary a, .table td.col-primary strong { color: var(--brand); }
.table tbody tr:hover { background: var(--bg); }
.table tbody tr.clickable, .table tbody tr[data-id] { cursor: pointer; }
.table tbody tr.selected { background: var(--tint-orange); }
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--comms-yellow); }
.table th .dir { margin-left: 6px; font-size: .75rem; color: var(--comms-yellow); }
.table td.cb, .table th.cb { width: 40px; padding-right: 0; }
.table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
.table td.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .skeleton td span { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--border), var(--bg), var(--border)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.table .empty-row td { cursor: default; background: var(--panel); }
@keyframes shimmer { to { background-position: -200% 0; } }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: .7rem .8rem; color: var(--muted); font-size: .9rem; }
.pager { display: flex; gap: 8px; align-items: center; }


/* 10. Pills & badges ====================================================== */
/* Background comes from the picklist (data-color, painted by CX.paintPills); text colour is picked by
   luminance (pill--ink-dark / pill--ink-light). No colour set → Light Grey. */
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 15px;
  font: 600 .9rem/1.2 var(--font); white-space: nowrap; vertical-align: middle;
  background: var(--comms-light-grey); color: var(--comms-dark-grey);
  border: 0;
}
.pill--ink-dark { color: var(--comms-dark-grey); }
.pill--ink-light { color: var(--white); }
button.pill { cursor: pointer; transition: box-shadow .15s; }
button.pill:hover { box-shadow: 0 0 0 2px var(--accent); }
.pill-empty { color: var(--muted); font-style: italic; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 700 .72rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.badge-new { background: var(--success); color: var(--comms-dark-grey); }
.badge-reduced { background: var(--danger); color: var(--white); }
.badge-muted { background: var(--comms-light-grey); color: var(--comms-dark-grey); }
.badge-info { background: var(--tint-info); color: var(--comms-dark-grey); }
/* A count beside a heading or tab (card headers, record tabs, search results). */
.count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: .75rem; font-weight: 700; }


/* 11. Modals ============================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: var(--overlay); padding: 6vh 16px 16px; overflow-y: auto;
  place-items: start center;
}
.modal-overlay.is-open { display: grid; animation: fade .15s ease-out; }
.modal {
  width: min(1000px, 92vw); background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; max-height: 88vh; animation: pop .16s ease-out;
}
.modal--sm { width: min(480px, 92vw); }
.modal--md { width: min(640px, 92vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 1.25rem; padding: 1rem 0 .7rem; border-bottom: 2px solid var(--accent); }
.modal-head h2 { font-size: 1.2rem; }
.modal-body { padding: 1rem 1.25rem; overflow-y: auto; max-height: 70vh; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: .8rem 1.25rem 1rem; border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: 0; } }


/* 12. Forms =============================================================== */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span, .field > label > span { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); }
.req { color: var(--danger); font-weight: 700; }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; padding: .5rem .7rem; font: inherit; font-size: .95rem; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--input-bg); box-shadow: var(--input-inset);
  transition: border-color .15s, box-shadow .15s;
}
select.input, .field select { padding-right: 2rem; }
textarea.input, .field textarea { min-height: 84px; resize: vertical; }
select.input[multiple] { min-height: 120px; padding: 6px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--input-inset), var(--ring); }
/* Read-only forms (e.g. a colleague's activity you can only view): plainly not editable. */
.input:disabled, .field input:not([type="checkbox"]):not([type="radio"]):disabled, .field select:disabled, .field textarea:disabled { background: var(--bg); color: var(--text); opacity: 1; cursor: default; box-shadow: none; }
.ref-picker:has(input:disabled) .ref-clear, .ref-picker:has(input:disabled) button { display: none; }
.act-check:disabled[title*="view only"] { cursor: default; opacity: .6; }
.field.has-error .input, .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .8rem; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.section-box { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.section-box.off > :not(:first-child) { display: none; }


/* Reference picker (organisation, reports to…) */
.ref-picker { position: relative; width: 100%; }
.ref-control { position: relative; display: flex; align-items: center; }
.ref-control > .fa-magnifying-glass { position: absolute; left: .7rem; color: var(--muted); font-size: 1rem; pointer-events: none; }
.ref-control .input, .field .ref-control .input:not([type="checkbox"]):not([type="radio"]) { padding-left: 2rem; padding-right: 2rem; } /* beats the .field input rule */
.ref-clear { position: absolute; right: .35rem; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; display: none; }
.ref-picker.has-value .ref-clear { display: grid; place-items: center; }
.ref-clear:hover { background: var(--bg); color: var(--danger); }
.ref-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 95; list-style: none; margin: 0; padding: 6px;
  max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-menu);
}
.ref-results li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.ref-results li small { color: var(--muted); font-size: .78rem; }
.ref-results li.active, .ref-results li:hover { background: var(--bg); }
.ref-results li.active strong { color: var(--brand); }
.ref-results li.none { color: var(--muted); cursor: default; }


/* 13. Boxes =============================================================== */
.error-box, .info-box, .warn-box, .success-box { padding: .7rem .9rem; border-radius: 8px; font-size: .9rem; border-left: 4px solid; }
.error-box { background: var(--tint-red-soft); color: var(--danger); border-color: var(--danger); font-weight: 600; }
.info-box { background: var(--tint-info); color: var(--text); border-color: var(--info); }
.warn-box { background: var(--tint-amber); color: var(--text); border-color: var(--warning); }
.error-box > p + p, .info-box > p + p, .warn-box > p + p, .success-box > p + p { margin-top: .4rem; } /* several points in one box */
.page-flash { margin-bottom: 16px; }
/* Explanations: under a card on a page (p.help-text), or the opening line inside a card (help-text m-0). */
.help-text { color: var(--muted); font-size: .88rem; max-width: 110ch; }
p.help-text { margin: 0 0 1rem; }
p.help-text.m-0 { margin: 0; }
.success-box { background: var(--tint-green); color: var(--text); border-color: var(--success); }
.error-box ul, .warn-box ul, .info-box ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }


/* 14. Board (pipeline) ================================================== */
/* The board page is full-width and fills the viewport height down to the footer; columns stretch to fill
   the width (between a readable minimum and a sensible maximum) and each column scrolls its own cards. */
.content-wide { max-width: none; display: flex; flex-direction: column; }
.content-wide > .board { flex: 1 1 0; }
.board { position: relative; display: flex; gap: 14px; overflow-x: auto; align-items: stretch; min-height: 440px; padding-bottom: 10px; }
.board-col {
  --stage: var(--comms-light-grey); /* set from the picklist colour when one exists */
  flex: 1 0 260px; max-width: 380px; min-height: 0;
  background: var(--comms-lighter-grey); border: 1px solid var(--border); border-top: 4px solid var(--stage);
  border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.board-col.is-closed { opacity: .85; }
.board-col.is-locked { border-style: dashed; border-top-style: solid; }
.board-col-head h3 .icon { color: var(--muted); font-size: .95rem; }
.board-col-note { margin: 0; font-size: .78rem; color: var(--muted); }
.board-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; border-bottom: 2px solid var(--accent); }
.board-col-head h3 { font-size: 1rem; line-height: 1.3; }
.board-col-count { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--bg); color: var(--brand); font-size: .8rem; font-weight: 700; }
.board-col-total { font-size: .85rem; color: var(--muted); padding: 0 2px; }
.board-col-total strong { color: var(--brand); font-size: 1.05rem; font-weight: 800; }
.board-cards { flex: 1 1 0; min-height: 120px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 2px 2px 6px; border-radius: 10px; }
.board-cards:empty { border: 2px dashed var(--border); align-items: center; justify-content: center; }
.board-cards:empty::before { content: attr(data-empty); color: var(--muted); font-size: .85rem; padding: 12px; text-align: center; }
.board-card { flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; cursor: grab; display: flex; flex-direction: column; gap: 6px; outline-offset: 1px; }
.board-card:focus-visible { outline: 2px solid var(--accent); }
.board-card-title { font-weight: 700; color: var(--text); line-height: 1.3; }
.board-card-title:hover { color: var(--comms-orange-text); }
.board-card-org, .board-card-next { font-size: .85rem; color: var(--muted); }
.board-card-org .icon, .board-card-next .icon, .board-card-meta .icon { color: var(--accent); font-size: .9rem; }
.board-card-amount { font-weight: 800; font-size: 1.05rem; color: var(--brand); }
.board-card-meta { font-size: .82rem; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.board-card-right { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.board-card.dragging, .board-card.sortable-chosen { outline: 2px solid var(--accent); cursor: grabbing; }
.board-card.sortable-ghost { opacity: .4; }
.board-card.is-saving { opacity: .6; pointer-events: none; }
.board-more { font-size: .85rem; padding: 0 2px; }
.board-summary { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); }
.kpi-inline strong { color: var(--brand); font-size: 1.35rem; font-weight: 800; margin-right: 4px; }
.avatar-xs { width: 22px; height: 22px; font-size: .62rem; }
/* Board / List switch */
.seg { display: inline-flex; background: var(--panel); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border); padding: 2px; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; font: 600 13px/1.2 var(--font); color: var(--text); text-decoration: none !important; cursor: pointer; }
.seg-btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.seg-btn:hover { background: var(--bg); }
.seg-btn.active { background: var(--brand); color: var(--white); }


/* 15. Lists & toolbars ==================================================== */
.views { display: flex; gap: 6px; flex-wrap: wrap; }
.view-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: 600 .85rem/1.2 var(--font); cursor: pointer; transition: background-color .15s, color .15s;
}
.view-tab:hover { border-color: var(--accent); }
/* Tabs and pills that are links (Reports, Settings, role profile chips, visit status) never underline, like the button ones. */
a.view-tab, a.chip, a.lf-status { text-decoration: none !important; }
.view-tab.active { background: var(--brand); border-color: var(--brand); color: var(--white); }
.view-tab .x { opacity: .7; font-size: .75rem; }
.view-tab .x:hover { opacity: 1; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar-search {
  display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 240px;
  padding: 0 12px; height: 34px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted); box-shadow: var(--input-inset);
}
.toolbar-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.toolbar-search input { border: 0; outline: 0; background: none; font: inherit; font-size: .9rem; color: var(--text); width: 100%; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.dd-btn { min-height: 34px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
/* Selects and dates sitting in a toolbar or page head: as tall as the buttons beside them. */
.toolbar .input, .dash-controls .input, .rel-filters select.input-sm { height: 34px; padding-top: 0; padding-bottom: 0; font-size: .9rem; }
.toolbar select.input:not(.input-sm) { width: auto; min-width: 150px; }
.dd-btn.active { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--comms-orange-text); background: var(--tint-orange); }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--brand); color: var(--white); }
.bulkbar .btn { background: var(--on-navy-active); color: var(--white); box-shadow: none; }
.bulkbar .btn:hover { background: var(--accent); }
#bulk-count { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bulkbar .btn-link { background: none; padding: 0; font-weight: 600; font-size: .9rem; color: var(--comms-yellow); text-decoration: underline; text-underline-offset: 3px; }
.bulkbar .btn-link:hover { background: none; color: var(--white); }
.bulkbar .btn-link:focus-visible { outline: 2px solid var(--comms-yellow); outline-offset: 2px; border-radius: 2px; }
.bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--border); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px; color: inherit; border-radius: 8px; }
.list-row:hover { text-decoration: none; background: var(--bg); }
.list-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.list-row strong { color: var(--brand); }
.list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }


/* 16. Dropdowns =========================================================== */
.dd-menu {
  position: fixed; z-index: 90; min-width: 220px; max-height: 340px; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-menu); padding: 6px;
}
.dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 6px;
  border: 0; background: none; cursor: pointer; font: 500 .9rem var(--font); color: var(--text); text-align: left;
}
.dd-item:hover, .dd-item:focus-visible { background: var(--bg); outline: 0; }
.dd-item.selected { font-weight: 700; color: var(--brand); }
.dd-item input[type="checkbox"] { accent-color: var(--accent); }
.dd-sep { height: 1px; background: var(--border); margin: 6px 0; }
.dd-head { font: 700 .7rem/1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; }


/* 17. Toasts ============================================================== */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 12px 14px;
  background: var(--panel); color: var(--text); border-radius: 10px; box-shadow: var(--shadow-menu);
  border-left: 4px solid var(--success); font-size: .9rem; animation: pop .16s ease-out;
}
.toast .icon { font-size: 1.25rem; }
.toast.ok .icon { color: var(--brand); }
.toast.error { border-left-color: var(--danger); }
.toast.error .icon { color: var(--danger); }
.toast.info { border-left-color: var(--info); }
.toast.fading { opacity: 0; transition: opacity .2s; }


/* 18. Empty states & loading ============================================== */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px; text-align: center; }
.empty h2 { font-size: 1.2rem; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 0 8px; }
.empty-sm { padding: 20px 8px; }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-orange); color: var(--accent); font-size: 1.4rem; }
.empty-sm .empty-icon { width: 44px; height: 44px; font-size: 1.1rem; }
.loading-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--input-bg); border-radius: inherit; }
.loading-host { position: relative; }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; }


/* 19. Record detail ======================================================= */
.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.record-id { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.record-id h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.75rem; }
.record-sub { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.record-sub .icon { color: var(--accent); }
.record-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Tabs across the main column; the side column (comments, record info) starts level with the tab content. */
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "tabs tabs" "main side"; column-gap: 16px; row-gap: 12px; align-items: start; }
.record-grid > .record-tabs { grid-area: tabs; }
.record-grid > .record-main { grid-area: main; }
.record-grid > .record-side { grid-area: side; }
.rel-pane > .card { margin-bottom: 0; }
.rel-filters { margin: -2px 0 10px; }
.rel-filters .toolbar-search { flex: 1 1 240px; max-width: 380px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.f { padding: 6px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.f-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 30px; padding: 2px 8px; margin: 0 -8px; border-radius: 6px; word-break: break-word; white-space: pre-wrap; }
.f-value.editable { cursor: text; }
.f-value.editable:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.f-value.editable:hover::after { content: "\270E"; margin-left: auto; color: var(--accent); font-size: .85rem; }
.f-value .empty-val { color: var(--muted); }
.f-edit { display: flex; gap: 6px; align-items: flex-start; }
.f-edit .input { flex: 1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .9rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; text-align: right; }
.kv.kv-left dd { text-align: left; }
.order-totals { max-width: 300px; margin: 1rem 0 .75rem auto; }
.order-grid { margin-bottom: 1rem; } /* its cards lose their own margin (.grid-2 > .card) */
.order-totals dt:last-of-type, .order-totals dd:last-of-type { font-weight: 700; color: var(--text); }
.dupes { grid-column: 1 / -1; }


/* Related panels on detail pages */
.related .card-header h2 { display: flex; align-items: center; gap: 8px; }
.related .card-header h2 .icon { color: var(--accent); }
.related .list-row { padding: 8px 4px; }
.related .list-row strong { font-size: .92rem; }
.related .list-row .icon { font-size: .9rem; color: var(--muted); }
.related li.has-row-action { display: flex; align-items: center; gap: 4px; }
.related li.has-row-action > .list-row { flex: 1; min-width: 0; }
.related .row-action { color: var(--muted); flex: none; }
.related .row-action:hover { color: var(--danger); }
.related-empty { margin: 0; font-size: .9rem; }
.related-more { margin: .6rem 0 0; font-size: .85rem; }
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: .8rem; }
.note-actions { display: flex; justify-content: flex-end; }
.note { padding: 10px 2px; }
.note-list .note { border-bottom: 1px solid var(--border); padding: 12px 4px; }
.note-list .note:last-child { border-bottom: 0; }
.note-body { white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.note-meta { margin-top: 4px; font-size: .78rem; color: var(--muted); }
.new-menu { position: relative; }


/* Activities (My day, related panels) */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: 0; }
.act-check { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; color: var(--muted); font-size: 1.15rem; cursor: pointer; }
.act-check:hover { color: var(--accent); background: var(--tint-orange); }
.act-check:disabled { opacity: .5; cursor: wait; }
.activity-item.is-done .act-check { color: var(--success); }
.act-type { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--brand); }
.act-main { display: flex; flex-direction: column; min-width: 0; }
.act-subject { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.act-subject:hover { color: var(--comms-orange-text); }
.activity-item.is-done .act-subject { color: var(--muted); text-decoration: line-through; }
.act-meta { color: var(--muted); font-size: .8rem; }
.act-meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); }
.act-meta a:hover { color: var(--comms-orange-text); }
.act-overdue { color: var(--danger); font-weight: 700; }
.act-right { display: inline-flex; align-items: center; gap: 6px; }
.activity-card .card-header h2 { display: flex; align-items: center; gap: 8px; }
.activity-card .card-header h2 .icon { color: var(--accent); }
.is-overdue-card { border-left: 4px solid var(--danger); }
/* My day: agenda (overdue, today) beside the week ahead */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
.agenda-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.agenda-main > .card, .agenda-side > .card { margin-bottom: 0; }
.day-head { margin: 14px 0 2px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.card-header + .day-head { margin-top: 0; }
.is-compact .activity-item { padding: 7px 2px; gap: 8px; }
.is-compact .act-right { display: none; }
.is-compact .act-type { width: 26px; height: 26px; font-size: .8rem; }
.act-kind { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand); }
.activity-form .seg { display: flex; width: 100%; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); box-shadow: none; }
.activity-form .seg-btn { flex: 1 1 0; justify-content: center; padding: 9px 8px; border-radius: 8px; color: var(--muted); white-space: nowrap; }
.activity-form .seg-btn:hover { background: var(--panel); color: var(--text); }
.activity-form .seg-btn.active { background: var(--panel); color: var(--brand); box-shadow: var(--shadow-seg), inset 0 -2px 0 var(--accent); }
.activity-form .seg-btn .icon { color: inherit; }
.field-spacer { display: block; height: 1.3rem; }
.col-actions { width: 48px; text-align: right; }
.table td.col-actions .icon-btn { width: 32px; height: 32px; color: var(--accent); }
.is-loading-soft { opacity: .6; transition: opacity .15s; }
.related .activity-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.related .activity-item .act-type { display: none; }


/* Global search (header type-ahead + results page) */
.search { position: relative; }
.search-results-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; z-index: 80; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-menu); padding: 6px;
}
.sr-group + .sr-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.sr-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; font: 700 .72rem/1 var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sr-head i { color: var(--accent); }
.sr-head span { margin-left: auto; font-weight: 600; }
.sr-item { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 6px; color: var(--text); text-decoration: none !important; }
.sr-item strong { font-weight: 600; font-size: .92rem; }
.sr-item small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item:hover, .sr-item.active { background: var(--bg); }
.sr-item.active strong { color: var(--brand); }
.sr-more { font-size: .82rem; color: var(--comms-orange-text); }
.sr-all { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; font-weight: 600; color: var(--comms-orange-text); text-align: center; }
.sr-empty { padding: 14px; color: var(--muted); text-align: center; font-size: .9rem; }
.search-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.search-results .card { margin: 0; }
.search-results .card-header h2 { display: flex; align-items: center; gap: 8px; }
.search-results .card-header h2 .icon { color: var(--accent); }

/* Record tabs + timeline */
.record-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.record-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.record-tabs::-webkit-scrollbar { display: none; } /* scrolls sideways on narrow screens without a scrollbar */
.record-tab { white-space: nowrap; flex: none; }
.record-tab .count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--brand); color: var(--white); font-size: .72rem; font-weight: 700; }
.record-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: 600 .95rem var(--font); color: var(--muted); cursor: pointer; }
.record-tab:hover { color: var(--brand); }
.record-tab.active { color: var(--brand); border-bottom-color: var(--accent); }
.record-tab .icon { color: inherit; }
#timeline:not([hidden]) { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
#timeline > .card { margin-bottom: 0; }
#upcoming:empty { display: none; }
.tl-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-filters { margin: 2px 0; }
.tl-upcoming { margin: 0; border-left: 4px solid var(--info); }
.tl-upcoming .card-header h2 { display: flex; align-items: center; gap: 8px; }
.tl-upcoming .card-header h2 .icon { color: var(--info); }
#upcoming .act-subject { white-space: normal; overflow-wrap: anywhere; } /* narrow side column: wrap rather than cut off */
.tl-card { margin: 0; padding: 1.1rem 1.25rem; }
.tl-loading { display: grid; place-items: center; min-height: 120px; }
.tl-day { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 4px; padding: 0 4px 6px; border-bottom: 1px solid var(--border); }
.tl-day:first-child { margin-top: 0; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 4px; }
.tl-item.tl-activity { display: block; padding: 0; }
.tl-item.tl-activity .activity-item { border-bottom: 0; }
.tl-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--brand); font-size: .8rem; }
.tl-stage .tl-icon, .tl-item.tl-stage .tl-icon { background: var(--tint-orange); color: var(--accent); }
.tl-item.tl-note .tl-icon { background: var(--tint-amber); color: var(--comms-dark-grey); }
.tl-item.tl-email .tl-icon { background: var(--tint-info); }
.tl-item.tl-created .tl-icon { background: var(--tint-green); color: var(--comms-dark-grey); }
.tl-item.tl-deleted .tl-icon { background: var(--tint-red); color: var(--danger); }
.tl-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .9rem; color: var(--muted); }
.tl-head strong { color: var(--text); }
.tl-time { flex: none; font-size: .78rem; color: var(--muted); }
.tl-note { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--bg); white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.tl-email-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.tl-email-body { margin-top: 4px; font-size: .88rem; color: var(--text); }
.tl-email-full { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; overflow-y: auto; padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.tl-email-subject { font-weight: 600; }
.tl-changes { list-style: none; margin: 4px 0 0; padding: 0; font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.tl-field { font-weight: 600; color: var(--text); margin-right: 4px; }
.tl-from { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border); }
.tl-to { color: var(--text); }
.tl-changes .icon, .tl-stage .icon { font-size: .85rem; color: var(--muted); margin: 0 3px; }
.tl-stage { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tl-more { display: flex; justify-content: center; padding-top: 12px; }


/* Quotes, sales orders, invoices: items + totals (record page) and the editor */
.doc-items .card-header h2 { display: flex; align-items: center; gap: 8px; }
.doc-lines td { white-space: normal; vertical-align: top; }
.doc-lines td.num { white-space: nowrap; }
.doc-desc strong { color: var(--text); }
.doc-detail { white-space: pre-wrap; color: var(--muted); font-size: .88rem; margin-top: 2px; }
.doc-totals { margin: 0; padding: 12px 16px 16px; display: grid; gap: 4px; justify-content: end; }
.doc-total { display: grid; grid-template-columns: minmax(180px, auto) 140px; gap: 16px; align-items: center; }
.doc-total dt { color: var(--muted); font-size: .92rem; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.doc-total dd { margin: 0; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-total dt { min-width: 0; }
.doc-total.is-grand { border-top: 2px solid var(--border); margin-top: 4px; padding-top: 8px; }
.doc-total.is-grand dt, .doc-total.is-grand dd { color: var(--brand); font-weight: 800; font-size: 1.1rem; }
.doc-total.is-due dd { color: var(--danger); }

.doc-source { margin-bottom: 0; }
.doc-lines-head, .doc-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px 170px 110px 104px; gap: 10px; align-items: start; }
.doc-line > * { min-width: 0; }
.line-num .input { width: 100%; }
.doc-lines-head { padding: 0 0 6px; border-bottom: 2px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.doc-lines-head span:nth-child(2), .doc-lines-head span:nth-child(3), .doc-lines-head span:nth-child(5) { text-align: right; }
.doc-lines-head span:nth-child(2), .doc-lines-head span:nth-child(3) { padding-right: .7rem; } /* over the numbers, which are right-aligned inside their boxes */
.doc-edit-lines { list-style: none; margin: 0; padding: 0; }
.doc-line { position: relative; padding: 12px 0; border-bottom: 1px solid var(--border); }
.doc-line.has-error { background: var(--tint-red-soft); box-shadow: -8px 0 0 var(--tint-red-soft), 8px 0 0 var(--tint-red-soft); }
.line-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.line-item { display: flex; }
.line-item .btn-link { padding-top: 0; padding-bottom: 0; }
.line-desc { min-height: 58px; resize: vertical; }
.line-num input, .line-disc input { text-align: right; }
.line-disc { display: flex; gap: 4px; }
.line-disc select { width: 76px; flex: none; padding-left: .5rem; padding-right: 1.4rem; }
.line-disc input { min-width: 0; }
/* Everything on a line starts level with the top of the description box and is as tall as one input. */
.doc-line input.input, .doc-line select.input { height: 2.5rem; }
.line-net { display: flex; align-items: center; justify-content: flex-end; height: 2.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-tools { display: flex; align-items: center; gap: 2px; justify-content: flex-end; height: 2.5rem; }
.line-tools .icon-btn { width: 32px; height: 32px; }
.line-pick { position: relative; grid-column: 1 / 2; }
.line-pick .ref-results { position: absolute; }
.doc-lines-foot { padding: 12px 0 0; }
.doc-totals-edit { padding: 16px 0 4px; justify-content: stretch; }
.doc-totals-edit .doc-total { grid-template-columns: minmax(0, 1fr) 150px; }
.doc-totals-edit dd .input { width: 100%; min-width: 0; text-align: right; }
.doc-totals-edit #dt-charge { max-width: min(420px, 100%); }
.doc-manual { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.doc-manual .input { flex: 1; }
.doc-hint { margin: 0; text-align: right; font-size: .8rem; color: var(--muted); }
.input-sm { width: auto; padding: .3rem .5rem; font-size: .88rem; }
select.input-sm { padding-right: 1.6rem; }
.doc-totals-edit dt .input-sm[inputmode] { width: 80px; text-align: right; }
.check-inline { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--muted); cursor: pointer; }
.check-inline input { accent-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--tint-info); color: var(--brand); font-size: .85rem; font-weight: 600; }
.chip-x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chip-x:hover { background: var(--panel); }
.btn-link { border: 0; background: none; box-shadow: none; color: var(--comms-orange-text); padding-left: 0; }
.btn-link:hover { background: none; text-decoration: underline; }
.doc-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; margin: 0 -4px; background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow-up); }
.record-extra-actions { display: contents; }

/* CSV import wizard */
.steps { list-style: none; display: flex; gap: 8px; margin: 0 0 16px; padding: 0; counter-reset: step; flex-wrap: wrap; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--panel); color: var(--muted); font-weight: 600; font-size: .9rem; box-shadow: var(--shadow); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .8rem; }
.steps li.active { color: var(--brand); }
.steps li.active::before { background: var(--accent); color: var(--white); }
.steps li.done::before { content: "✓"; background: var(--success); color: var(--comms-dark-grey); }
.upload-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.upload-side { display: flex; flex-direction: column; gap: 16px; }
.upload-main { display: flex; flex-direction: column; }
.upload-main .dropzone { flex: 1; }
.type-list { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.type-list legend { padding: 0; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.type-choice { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-weight: 600; color: var(--text); }
.type-choice .icon { color: var(--muted); width: 18px; text-align: center; }
.type-choice input { accent-color: var(--accent); margin: 0; }
.type-choice:has(input:checked) { border-color: var(--accent); background: var(--tint-orange); color: var(--brand); }
.type-choice:has(input:checked) .icon { color: var(--accent); }
.type-choice:has(input:focus-visible) { box-shadow: var(--ring); }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: var(--tint-green); color: var(--text); }
#drop-text { display: flex; flex-direction: column; gap: 4px; }
#drop-text small { color: var(--muted); }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; padding: 16px; border: 2px dashed var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--muted); cursor: pointer; text-align: center; }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--accent); color: var(--text); }
.dropzone .icon { font-size: 2.2rem; color: var(--accent); }
.import-tips { margin: 0; padding-left: 1.1rem; font-size: .84rem; display: grid; gap: 4px; }
.map-table { table-layout: fixed; }
.map-table col.c-name { width: 28%; } .map-table col.c-sample { width: 42%; } .map-table col.c-field { width: 30%; }
.map-table td { white-space: normal; vertical-align: middle; }
.map-table td.col-primary { max-width: none; }
.map-table select { width: 100%; }
.map-sample { display: flex; flex-wrap: wrap; gap: 4px; }
.map-sample span { padding: 1px 8px; border-radius: 6px; background: var(--bg); font-size: .85rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.default-row { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 360px) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.default-value .input, .default-value .ref-picker { width: 100%; }
.required-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: .88rem; }
.req-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-weight: 600; }
.req-chip.ok { background: var(--tint-green); color: var(--comms-dark-grey); }
.req-chip.missing { background: var(--tint-red); color: var(--danger); }
.radio-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.import-summary .info-box, .import-summary .warn-box { margin-top: 12px; }
.import-summary p { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg); border-left: 4px solid var(--border); }
.stat strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat.is-good { border-left-color: var(--success); } .stat.is-info { border-left-color: var(--info); }
.stat.is-bad { border-left-color: var(--danger); background: var(--tint-red-soft); } .stat.is-bad strong { color: var(--danger); }
.imp-status { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--bg); color: var(--muted); }
.imp-status.is-done { background: var(--tint-green); color: var(--comms-dark-grey); }
.imp-status.is-running, .imp-status.is-undoing { background: var(--tint-amber); color: var(--comms-dark-grey); }
.imp-status.is-new { background: var(--tint-info); color: var(--brand); }
#import-recent { margin-top: 16px; }
#import-recent .col-primary { max-width: 280px; }
.row-gap.end { justify-content: flex-end; flex-wrap: nowrap; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--accent); background: var(--tint-orange); }
.radio input { margin-top: 3px; accent-color: var(--accent); }
.radio span { display: flex; flex-direction: column; }
.org-create { margin-top: 12px; }
.import-progress { display: grid; gap: 8px; padding: 8px 0; }
.import-progress p { margin: 0; }
progress.bar-lg { height: 14px; }
.problems { max-height: 420px; overflow-y: auto; }
.table td.wrap { white-space: normal; }

/* 20. Dashboard bits ====================================================== */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bars a { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 12px; color: inherit; padding: 6px; border-radius: 8px; }
.bars a:hover { background: var(--bg); text-decoration: none; }
.bar-n { text-align: right; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
progress.bar { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: 99px; background: var(--bg); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--bg); border-radius: 99px; }
progress.bar::-webkit-progress-value { background: var(--chart-1); border-radius: 99px; }
progress.bar::-moz-progress-bar { background: var(--chart-1); border-radius: 99px; }
.chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding: 8px 4px 0; border-bottom: 2px solid var(--border); }
.chart-bar { flex: 1; border-radius: 6px 6px 0 0; min-height: 4px; }
.series-1 { background: var(--chart-1); } .series-2 { background: var(--chart-2); } .series-3 { background: var(--chart-3); }
.series-4 { background: var(--chart-4); } .series-5 { background: var(--chart-5); } .series-6 { background: var(--chart-6); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Dashboard page */
.dash-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-controls select.input { width: auto; min-width: 150px; }
.dash-row { margin-bottom: 16px; }
.kpi-sub { color: var(--muted); font-size: .8rem; }
.is-bad { color: var(--danger); font-weight: 700; }

/* Horizontal bar (a span, so it can take any series colour) */
.hbar { display: block; width: 100%; height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.hbar-fill { display: block; height: 100%; min-width: 2px; border-radius: 99px; }
.bars--wide a { grid-template-columns: minmax(120px, 190px) 1fr auto; }
.bars--wide .bar-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 64px; }
.bars--wide .bar-n small { color: var(--muted); font-weight: 600; font-size: .75rem; }
.inline-bar { display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 10px; min-width: 120px; }

/* Column chart: one column per period, optional second series beside the first */
.colchart { display: flex; align-items: stretch; gap: 6px; height: 210px; }
.colchart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; border-radius: 8px; padding: 4px 2px 0; }
a.colchart-col:hover { background: var(--bg); text-decoration: none; }
.colchart-val { font-size: .75rem; font-weight: 700; color: var(--brand); min-height: 1.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.colchart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 2px solid var(--border); }
.colchart-bar { width: 38%; max-width: 26px; border-radius: 4px 4px 0 0; min-height: 0; }
.colchart-label { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.colchart-col.is-overdue .colchart-label, .colchart-col.is-overdue .colchart-val { color: var(--danger); }

/* Activity figures */
.stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stat-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.stat-list li:last-child { border-bottom: 0; }
.stat-list strong { font-size: 1.35rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-info); color: var(--brand); }
.stat-now { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg); font-size: .9rem; }
.stat-now.is-bad { background: var(--tint-red-soft); font-weight: 400; color: var(--text); }
.stat-now.is-bad strong:first-child { color: var(--danger); }
.stat-now a { margin-left: 6px; font-weight: 600; }
.dash-team tfoot th, .dash-team tfoot td { padding: .6rem .8rem; border-top: 2px solid var(--border); font-weight: 700; }
.dash-team td .badge { margin-left: 4px; }

/* Reports page */
.report-sub { margin: -4px 0 14px; }
.report-controls .custom-dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.report-controls .custom-dates[hidden] { display: none; }
.report-controls input[type="date"].input { width: auto; }
.report-note { font-size: .85rem; margin: 0 0 16px; }
.small-note { margin: 0; font-size: .85rem; }
.table th.sortable button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.table th.sortable button:focus-visible { outline: 2px solid var(--comms-yellow); outline-offset: 2px; border-radius: 2px; }
.table th.sortable[aria-sort="ascending"] button::after { content: "▲"; font-size: .65rem; color: var(--comms-yellow); }
.table th.sortable[aria-sort="descending"] button::after { content: "▼"; font-size: .65rem; color: var(--comms-yellow); }
.table th.num.sortable button { justify-content: flex-end; }
.table tr.is-bad-row td { color: var(--danger); font-weight: 600; }


/* 21. Footer ============================================================== */
.app-footer { background: var(--comms-light-grey); color: var(--comms-dark-grey); font-size: 14px; border-top: 3px solid var(--accent); padding: 12px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-footer a { color: var(--comms-dark-grey); text-decoration: underline; text-decoration-color: var(--accent); }


/* 22. Styleguide helpers ================================================== */
.sg-section { scroll-margin-top: 80px; }
.sg-sub { font-size: .95rem; font-weight: 700; color: var(--brand); margin: 1.4rem 0 .8rem; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sg-swatch { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); background: var(--panel); font-size: .8rem; }
.sg-swatch-chip { height: 64px; }
.sg-swatch-meta { padding: 8px 10px; }
.sg-swatch-meta code { display: block; color: var(--muted); font-size: .75rem; }
.sg-chip--comms-blue { background: var(--comms-blue); } .sg-chip--comms-orange { background: var(--comms-orange); }
.sg-chip--comms-orange-text { background: var(--comms-orange-text); } .sg-chip--comms-green { background: var(--comms-green); }
.sg-chip--comms-red { background: var(--comms-red); } .sg-chip--comms-light-grey { background: var(--comms-light-grey); }
.sg-chip--comms-lighter-grey { background: var(--comms-lighter-grey); } .sg-chip--comms-grey { background: var(--comms-grey); }
.sg-chip--comms-dark-grey { background: var(--comms-dark-grey); } .sg-chip--comms-light-blue { background: var(--comms-light-blue); }
.sg-chip--comms-yellow { background: var(--comms-yellow); }
.sg-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-demo-navy { background: var(--brand); border-radius: var(--r-md); padding: 12px; width: 260px; }


/* 23. Responsive ========================================================== */
@media (max-width: 1100px) {
  .record-grid { grid-template-columns: 1fr; grid-template-areas: "tabs" "main" "side"; }
}
@media (max-width: 899px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-modal); }
  body.sidebar-collapsed { --sidebar-w: 240px; } /* the phone drawer ignores the desktop rail setting */
  body.sidebar-collapsed .nav-label { display: flex; }
  body.sidebar-collapsed .nav-item > span { display: inline; }
  body.sidebar-collapsed .nav-section { border-top: 0; margin-top: 10px; padding-top: 0; }
  body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 10px 14px; gap: 12px; }
  body.sidebar-collapsed .sidebar-logo img { width: auto; height: 44px; max-width: 150px; object-fit: contain; }
  body.sidebar-collapsed .sidebar-logo.has-icon .logo-full, body.sidebar-collapsed .sidebar-logo .logo-full { display: block; }
  body.sidebar-collapsed .sidebar-logo .logo-icon { display: none; }
  .sidebar-toggle { display: none; }
  .sidebar.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .main { margin-left: 0; }
  .burger { display: flex; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .search { width: auto; flex: 1; max-width: none; }
  .topbar-title { display: none; }
  .user-btn .user-name { display: none; }
  .content { padding: 16px; }
  .content-wide > .board { flex: none; height: calc(100dvh - 240px); }
  .grid-2, .fields, .form-grid { grid-template-columns: 1fr; }
  .agenda { grid-template-columns: 1fr; }
  .default-row { grid-template-columns: 1fr auto; }
  .radio-list { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: 1fr; }
  .dropzone { min-height: 150px; }
  .map-table { table-layout: auto; }
  .default-row .default-value { grid-column: 1 / -1; grid-row: 2; }
  .doc-lines-head { display: none; }
  .doc-line { grid-template-columns: 1fr 1fr; }
  .doc-line .line-main, .doc-line .line-disc, .doc-line .line-pick { grid-column: 1 / -1; }
  .line-net { padding-top: .3rem; }
  .doc-total, .doc-totals-edit .doc-total { grid-template-columns: 1fr auto; }
  .doc-totals { justify-content: stretch; }
  .toolbar-search { flex: 1 1 100%; min-width: 0; }
  .hide-sm { display: none; }
  .table .hide-mobile { display: none; }
  .bars a { grid-template-columns: 110px 1fr 32px; }
  .bars--wide a { grid-template-columns: 110px 1fr auto; }
  .dash-controls { width: 100%; }
  .dash-controls select.input { flex: 1; min-width: 0; }
  .colchart { height: 180px; gap: 2px; }
  .colchart-val { display: none; }
  .colchart-label { font-size: .68rem; white-space: normal; text-align: center; line-height: 1.1; }
  .modal-overlay { padding: 12px; }
  .modal { max-height: 94vh; }
  .modal-foot { flex-wrap: wrap; }
  h1 { font-size: 1.6rem; }
  .app-footer { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* 24. Print =============================================================== */
@media print {
  .sidebar, .topbar, .app-footer, .toasts, .bulkbar, .toolbar, .page-actions, .record-actions, .burger, .scrim { display: none !important; }
  .main { margin: 0; }
  body { background: var(--white); font-size: 12px; }
  .card { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; }
  .table thead th { background: var(--white); color: var(--black); border-bottom: 2px solid var(--black); }
  a { color: var(--black); text-decoration: none; }
}

/* ---------- My preferences ---------- */
.prefs { display: flex; flex-direction: column; gap: 16px; }
.prefs .grid-2 { align-items: start; }
.prefs-actions { display: flex; justify-content: flex-end; gap: 8px; }
.prefs-note { margin: 12px 0 0; }
.prefs-password { margin-bottom: 0; }
.prefs-security { align-items: start; }
@media (max-width: 899px) { .prefs .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .prefs .form-grid, .prefs .fields { grid-template-columns: 1fr; } }

/* ---------- Two-factor authentication ---------- */
.pill.mfa-on { background: var(--success); color: var(--comms-dark-grey); }
.mfa-facts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.mfa-facts .icon { width: 1.2em; color: var(--muted); }
.mfa-facts .mfa-low { color: var(--danger); font-weight: 600; }
.mfa-steps { margin: 0; padding-left: 1.2rem; font-size: .92rem; display: flex; flex-direction: column; gap: 4px; }
.mfa-qr { display: flex; justify-content: center; }
.mfa-qr svg { width: 200px; height: 200px; background: var(--white); border-radius: 8px; }
.mfa-key { margin: 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.mfa-key code { font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
.input.mfa-code { font-size: 1.2rem; letter-spacing: .2em; text-align: center; }
.mfa-codes { margin: 0; padding: 12px 12px 12px 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; background: var(--bg); border-radius: 8px; }
.mfa-codes code { font-size: .95rem; }
.login-field-error { display: block; margin-top: 4px; color: var(--danger); font-size: .82rem; }
.login-foot .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* ---------- Users & security ---------- */
.pill.pill-sm { font-size: .72rem; padding: 2px 8px; }
.input-static { padding: .55rem 0; font-weight: 600; }
.dd-danger { color: var(--danger); }
.temp-pass { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 12px; background: var(--bg); border-radius: 8px; }
.temp-pass dt { color: var(--muted); font-size: .85rem; }
.temp-pass dd { margin: 0; }
.temp-pass code { font-size: 1.05rem; user-select: all; }
.users-tabs { margin-bottom: 16px; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chips .chip { padding: 2px 8px; font-size: .78rem; }
.chip-more { background: var(--bg); color: var(--muted); }
[data-members-field] .input-sm { width: 100%; }
.member-picker { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 12px 10px; }
.member-picker fieldset { border: 0; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.member-picker legend { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 0 2px; }
.check.indent-1 { padding-left: 14px; } .check.indent-2 { padding-left: 28px; } .check.indent-3 { padding-left: 42px; }
.check.indent-4 { padding-left: 56px; } .check.indent-5 { padding-left: 70px; }

/* ---------- Dashboard: quotes ---------- */
.is-warn { color: var(--comms-orange-text); font-weight: 700; }
.stat-list li:has(> a) { display: block; padding: 0; }
.stat-list li > a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; color: inherit; border-radius: var(--r-sm); }
.stat-list li > a:hover { background: var(--bg); text-decoration: none; }
.stat-list li.stat-bad strong { color: var(--danger); }
.stat-list li.stat-warn strong { color: var(--comms-orange-text); }
.stat-list strong small { font-size: .8rem; font-weight: 600; }
.dash-section { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 1.15rem; color: var(--brand); }

/* ---------- Icon sizes (Phosphor Light draws smaller than Font Awesome did at the same font size) ---------- */
.fa-solid, .fa-regular { font-size: 1.2em; vertical-align: -.16em; }
.card-header h2 .icon, .card-header h2 > .fa-solid, .page-head h1 .icon, .dash-section .icon, .modal-head h2 .icon,
.record-tab .icon, .views .icon, .empty-icon .fa-solid { font-size: 1.3em; }
.card-header h2 { display: flex; align-items: center; gap: 8px; }
.kpi .icon { font-size: 1.3em; }
.btn .fa-solid, .btn-mini .fa-solid { font-size: 1.25em; }
.stat-icon .fa-solid { font-size: 1.35rem; }

/* ---------- App settings (Users & security → Settings) ---------- */
.settings-list { display: flex; flex-direction: column; }
.setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row p { margin-top: 4px; font-size: .88rem; max-width: 70ch; }
.switch { position: relative; flex: none; width: 44px; height: 24px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--border); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }
.switch input:disabled + span { opacity: .5; }

/* ---------- Organisation type badges (Prestige etc.) ---------- */
.org-badge .pill { font-size: .7rem; padding: 1px 7px; vertical-align: 1px; }
/* Card header subtitle sits right, next to any buttons (e.g. a report table's CSV button), not in the middle. */
.card-header > h2 + .muted { margin-left: auto; }
.card-header > .muted { font-size: .85rem; }
/* A toolbar in the page head (Users & security) takes the row, lined up with the action buttons. */
.page-head:has(> .toolbar) { align-items: center; }
.page-head > .toolbar { flex: 1 1 auto; }
.page-head > .toolbar .toolbar-search { min-width: 260px; }

/* ---------- Report builder (Reports → Saved reports) ---------- */
.saved-reports .report-name small { display: block; font-weight: 400; white-space: normal; max-width: 60ch; }
.report-head { align-items: flex-start; }
.report-desc { max-width: 80ch; }
.report-note-box { margin: 12px; }
.report-table tbody tr.is-private td { color: var(--muted); font-style: italic; }
.report-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.builder-grid { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.builder-steps { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.builder-steps > .card { margin-bottom: 0; }
.builder-step { display: flex; flex-direction: column; gap: 10px; }
.step-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--white); font-size: .8rem; }
.builder-preview { position: sticky; top: calc(var(--header-h) + 12px); min-width: 0; }
.builder-preview .card-header { padding: 16px 16px .6rem; }
.col-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.col-chip { cursor: grab; }
.col-chip:focus-visible { outline: 0; box-shadow: var(--ring); }
.col-chip.sortable-ghost { opacity: .4; }
.col-chip.is-missing, .filter-row.is-missing .filter-field { background: var(--tint-red); color: var(--danger); }
.filter-rows { display: flex; flex-direction: column; gap: 8px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.filter-field { flex: 1 0 100%; font-weight: 600; font-size: .9rem; color: var(--brand); }
.filter-row > select { flex: 0 1 auto; }
.filter-values { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 0; }
.filter-values .input { flex: 1 1 120px; min-width: 0; }
.filter-row > .icon-btn { margin-left: auto; width: 32px; height: 32px; }
.sort-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sort-row .input { flex: 1 1 160px; min-width: 0; }
.field-picker { display: flex; flex-direction: column; gap: 10px; }
.field-picker .toolbar-search { flex: none; min-width: 0; }
.fp-groups { display: flex; flex-direction: column; gap: 6px; }
.fp-group { border: 1px solid var(--border); border-radius: var(--r-sm); }
.fp-group > summary { padding: 8px 10px; font-weight: 700; color: var(--brand); cursor: pointer; }
.fp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; padding: 4px 10px 10px; }
.fp-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: .9rem; color: var(--text); text-align: left; cursor: pointer; }
.fp-item:hover, .fp-item:focus-visible { background: var(--bg); outline: 0; }
.fp-item input { accent-color: var(--accent); }
.fp-item.is-taken { color: var(--muted); cursor: default; }
@media (max-width: 1100px) {
  .builder-grid { grid-template-columns: minmax(0, 1fr); }
  .builder-preview { position: static; }
}
.page-actions:has(> .toolbar-search) { align-items: center; flex-wrap: nowrap; }
.page-actions > .toolbar-search { flex: 0 1 260px; min-width: 180px; }
@media (max-width: 640px) {
  .page-actions:has(> .toolbar-search) { flex-wrap: wrap; width: 100%; }
  .page-actions > .toolbar-search { flex: 1 1 100%; }
}
/* Report builder: grouping, totals, summaries, cross-tabs */
.report-table tr.group-row th, .report-table tr.group-row td { background: var(--tint-info); color: var(--brand); font-weight: 700; text-align: left; }
.report-table tr.group-row td.num { text-align: right; }
.report-table tr.group-row.group-2 th { background: var(--bg); padding-left: 1.6rem; }
.report-table tr.group-row .muted { font-weight: 400; }
.report-table tr.subtotal-row td { font-weight: 600; border-bottom: 2px solid var(--border); }
.report-table tr.subtotal-row.group-2 td:first-child { padding-left: 1.6rem; }
.report-table tr.total-row td, .report-table tr.total-row th { font-weight: 800; color: var(--brand); border-top: 2px solid var(--accent); background: var(--panel); }
.report-table tbody tr.group-row:hover, .report-table tbody tr.subtotal-row:hover { background: inherit; }
.report-table td small { color: var(--muted); font-weight: 600; }
.summary-table .indent-cell { width: 1.6rem; padding-right: 0; }
.matrix-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--brand); background: var(--panel); }
.matrix-table .total-col { font-weight: 700; border-left: 2px solid var(--border); }
.matrix-caption { caption-side: top; text-align: left; padding: .6rem .8rem; font-weight: 700; color: var(--brand); }
.builder-step.is-off > :not(.step-title) { opacity: .45; }
.builder-step.is-off::after { content: "Not used by summaries and cross-tabs."; font-size: .85rem; color: var(--muted); }
.group-rows { display: flex; flex-direction: column; gap: 8px; }
.group-pick, .add-total { display: flex; flex-wrap: wrap; gap: 6px; }
.group-pick .input, .add-total .input { flex: 1 1 140px; min-width: 0; }
.totals-box { display: flex; flex-direction: column; gap: 6px; }
.table thead th .muted { color: var(--comms-light-grey); font-weight: 400; }
.report-table tbody th, .report-table tfoot th { padding: .6rem .8rem; }
/* Report builder charts (assets/js/report-view.js CX.reportChart) */
.report-chart { position: relative; margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.chart-title { font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.chart-title .muted { font-weight: 400; }
.chart-note { margin-top: 6px; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 9px; border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow-menu); font-size: .85rem; white-space: nowrap; }
.hbar-row { display: grid; grid-template-columns: minmax(80px, 200px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 3px 0; }
.hbar-row:hover .hbar-bar { opacity: .85; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; text-align: right; }
.hbar-track { position: relative; height: 16px; margin-right: 5.5em; }
.hbar-bar { position: absolute; top: 0; bottom: 0; background: var(--brand); border-radius: 0 4px 4px 0; }
.hbar-val { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 6px; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.vbar-plot { display: flex; align-items: flex-end; gap: 2px; height: 200px; border-bottom: 1px solid var(--chart-grid); }
.vbar-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.vbar-bar { width: 100%; max-width: 24px; background: var(--brand); border-radius: 4px 4px 0 0; }
.vbar-col:hover .vbar-bar { opacity: .85; }
.vbar-val { font-size: .75rem; color: var(--muted); margin-bottom: 3px; white-space: nowrap; }
.vbar-axis { display: flex; gap: 2px; margin-top: 4px; }
.vbar-axis span { flex: 1 1 0; min-width: 0; font-size: .75rem; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-svg { display: block; width: 100%; height: auto; max-height: 280px; }
.line-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.line-svg .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.line-svg .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-svg .dot { fill: var(--brand); stroke: var(--panel); stroke-width: 2; }
.line-svg .cross { stroke: var(--muted); stroke-width: 1; }
.line-svg .hit { fill: transparent; }
.doughnut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.doughnut-svg { width: 190px; height: 190px; flex: none; }
.doughnut-svg .slice { stroke: var(--panel); stroke-width: 2; }
.doughnut-svg .slice:hover { opacity: .85; }
.doughnut-total { fill: var(--brand); font: 700 18px var(--font); }
.doughnut-sub { fill: var(--muted); font: 400 11px var(--font); }
.chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 220px; }
.chart-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .9rem; }
.chart-legend .legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend .legend-val { font-variant-numeric: tabular-nums; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.slice-1 { fill: var(--cat-1); background: var(--cat-1); } .slice-2 { fill: var(--cat-2); background: var(--cat-2); }
.slice-3 { fill: var(--cat-3); background: var(--cat-3); } .slice-4 { fill: var(--cat-4); background: var(--cat-4); }
.slice-5 { fill: var(--cat-5); background: var(--cat-5); } .slice-6 { fill: var(--cat-6); background: var(--cat-6); }
.slice-other { fill: var(--cat-other); background: var(--cat-other); }
@media (max-width: 640px) {
  .hbar-row { grid-template-columns: minmax(60px, 110px) minmax(0, 1fr); }
}
@media print { .chart-tip { display: none; } }
/* Report page: "choose when running" bar, sharing */
.ask-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 16px; }
.ask-title { font-size: .95rem; margin-right: 4px; }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ask-row .filter-field { flex: none; }
.report-shared .icon { font-size: 1em; }
[data-members-field].is-off { opacity: .45; pointer-events: none; }
.filter-ask { flex: 1 0 100%; font-size: .85rem; color: var(--muted); }

/* ---------- Settings (admins): roles, profiles ---------- */
.settings-tabs { margin-bottom: 1rem; }
.settings-tabs .icon { font-size: 1.1em; }
fieldset.field { border: 0; margin: 0; padding: 0; gap: 6px; }
fieldset.field > legend { padding: 0; margin-bottom: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.role-name { display: inline-flex; align-items: center; gap: 8px; padding-left: calc(max(var(--depth) - 1, 0) * 22px); }
.role-name .icon { color: var(--muted); }
.perm-grid th[scope="row"] { font-weight: 600; white-space: nowrap; }
.perm-grid .c { text-align: center; width: 1%; padding-left: 10px; padding-right: 10px; }
.perm-grid td.c input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.perm-grid tr.is-off td.c, .perm-grid tr.is-off [data-fields] { opacity: .35; pointer-events: none; }
.perm-fields > td { background: var(--bg); padding: 12px 16px 16px; }
.perm-fields-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .85rem; }
.perm-fields-title { font-size: .95rem; margin: 14px 0 4px; }
.perm-field-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 24px; }
.perm-block { grid-column: 1 / -1; padding: 10px 0 2px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.perm-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.perm-field .seg-btn { padding: 4px 8px; font-size: 12px; }
.perm-field.is-locked > span { color: var(--muted); }
@media (max-width: 699px) {
  .perm-field-list { grid-template-columns: 1fr; }
  .perm-field { flex-wrap: wrap; }
}
.sharing-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.sharing-table td:nth-child(2) { white-space: nowrap; }
.sharing-table tr.is-changed > * { background: var(--tint-orange); }
.doc-savebar [data-summary] { margin-right: auto; align-self: center; }
.card-flush > .doc-savebar { margin: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
.table tbody th { padding: .6rem .8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.sharing-table td:nth-child(3) { white-space: normal; min-width: 260px; }
#sharing-rules td:first-child { white-space: normal; }
.picklist-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.picklist-nav { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; padding: 12px; }
.picklist-pick { display: none; }
.picklist-group h3 { margin: 10px 0 4px; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.picklist-group:first-child h3 { margin-top: 0; }
.picklist-group a { display: block; padding: 5px 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: .9rem; }
.picklist-group a:hover { background: var(--bg); }
.picklist-group a.active { background: var(--brand); color: var(--white); font-weight: 600; }
.picklist-head { align-items: flex-start; padding: 16px 16px .6rem; }
.picklist-head h2 small { font-weight: 400; font-size: .85rem; }
.picklist-head p { font-size: .88rem; max-width: 70ch; margin-top: 4px; }
.picklist-move { width: 1%; white-space: nowrap; }
.picklist-move .icon-btn[disabled] { opacity: .25; pointer-events: none; }
.picklist-table td:nth-child(3) { white-space: normal; }
.picklist-colour { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }
.picklist-colour:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 899px) {
  .picklist-layout { grid-template-columns: 1fr; }
  .picklist-nav { position: static; max-height: none; }
  .picklist-pick { display: flex; }
  #picklist-menu { display: none; }
}
.pill.pill-muted { background: var(--bg); color: var(--muted); }
.pill.pill-info { background: var(--tint-info); color: var(--brand); }
.layout-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.layout-list h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: .95rem; }
.layout-list p { margin: 2px 0 8px; font-size: .82rem; }
.layout-list ol { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); }
.layout-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px 3px 10px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.layout-list li:last-child { border-bottom: 0; }
.layout-list li.muted { padding: 8px 10px; }
.layout-list-tools { display: inline-flex; flex: none; }
.layout-list-tools .icon-btn, .layout-block-tools .icon-btn { width: 30px; height: 30px; }
.layout-list-tools .icon-btn[disabled], .layout-block-tools .icon-btn[disabled] { opacity: .25; pointer-events: none; }
.layout-list select { width: 100%; }
.layout-block-tools { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.layout-fields tr.is-hidden td:nth-child(2) strong { color: var(--muted); font-weight: 600; }
.layout-empty { padding: 0 1rem 1rem; margin: 0; }
.field-name { font-size: .78rem; color: var(--muted); background: var(--bg); padding: 1px 5px; border-radius: 4px; user-select: all; }

/* ---------- Settings → Lead Forensics ---------- */
.lf-gap { margin-top: 12px; }
#lf-form, #cops-form { margin-bottom: 1rem; } /* their last card loses its margin (.card:last-child) */
.lf-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.lf-roles .check small { color: var(--muted); }
.lf-status .kv { max-width: 520px; }
.lf-status .lf-error { color: var(--danger); }
.cops-status .kv { max-width: 620px; }
.cops-status .cops-error { color: var(--danger); }

/* ---------- Website visits (Lead Forensics) ---------- */
.lf-table tbody tr[data-visit] { cursor: pointer; }
.lf-table .chips .chip { white-space: nowrap; }
.lf-kw { font-size: .8rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-status { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.lf-status-new { background: var(--tint-orange); color: var(--text); }
.lf-status-crm { background: var(--tint-green); color: var(--text); text-decoration: none; }
a.lf-status-crm:hover { box-shadow: inset 0 0 0 1px var(--success); }
.lf-status-dismissed { background: var(--bg); color: var(--muted); }
.lf-live { display: inline-block; padding: 1px 6px; border-radius: 99px; background: var(--success); color: var(--white); font-size: .7rem; font-weight: 700; vertical-align: 1px; }
.lf-panel-back { position: fixed; inset: 0; z-index: 84; background: var(--overlay); }
.lf-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(540px, 100vw); display: flex; flex-direction: column; background: var(--panel); box-shadow: var(--shadow-menu); }
.lf-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 1rem 1.25rem .8rem; border-bottom: 2px solid var(--accent); }
.lf-panel-head h2 { font-size: 1.15rem; color: var(--brand); }
.lf-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.lf-panel-body h3 { font-size: .95rem; color: var(--brand); margin: 0 0 8px; }
.lf-panel-body .kv { grid-template-columns: minmax(120px, auto) 1fr; }
.lf-panel-body .kv dd { overflow-wrap: anywhere; }
.lf-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-trail li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 8px; font-size: .9rem; overflow-wrap: anywhere; }
.lf-trail-time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.lf-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
body.lf-panel-open { overflow: hidden; }
.lf-panel-foot { display: flex; gap: 8px; padding: .8rem 1.25rem 1rem; border-top: 1px solid var(--border); background: var(--panel); }
.lf-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lf-box .btn { margin-left: auto; }
.lf-convert .radio small { font-size: .82rem; }
.lf-convert .field small { font-size: .8rem; }