/* ══════════════════════════════════════════════════════════════════════════════
   Jinba Hub — Shared Stylesheet
   ./css/styles.css
   ══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* clip, not hidden: hidden makes body a scroll container and silently kills position: sticky everywhere (22 Sep 2026) */
html, body { overflow-x: clip; max-width: 100vw; }
html { overflow-y: scroll; }

/* ── Universal layout constraints ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* Universal pagination (hub.js hubPaginate) */
.hub-paginate-hidden { display: none !important; }
.hub-paginate-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}
.hub-paginate-count { font-size: 12px; color: var(--text-dim); }
.hub-paginate-btn {
  padding: 6px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  background: transparent;
  border: 1.5px solid var(--teal);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.hub-paginate-btn:hover { background: var(--teal); color: #fff; }
.app-page { width: 100%; }
.app-page [class$="-container"],
.app-page [class$="-card"] { width: 100%; min-width: 0; }
.app-page [class$="-row"],
.app-page [class$="-info"] { min-width: 0; }
.app-page [class$="-name"],
.app-page [class$="-email"],
.app-page [class$="-path"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-page [class$="-meta"] span { white-space: normal; word-break: break-word; }

/* ── Design Tokens ── */
:root {
  --hub-page-width: 1200px;   /* one page frame for every full-width app; 4 tiles across on the home page */
  --teal: #00B4B4;
  --teal-dark: #009999;
  --teal-dim: #0a8f8f;
  --teal-glow: rgba(0, 180, 180, 0.15);
  --orange: #F5A623;
  --orange-dark: #d89520;
  --orange-glow: rgba(245, 166, 35, 0.12);

  --bg: #0c0e14;
  --bg-raised: #12151e;
  --bg-card: #161a26;
  --bg-tile: #161a26;
  --bg-tile-hover: #1c2133;
  --bg-field: #0e1019;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(0,180,180,0.3);
  --border-focus: rgba(245,166,35,0.4);

  --text: #f0f2f7;
  --text-mid: #b0b5c8;
  --text-dim: #7e839a;
  /* Alias for --text-dim. 53 rules already referenced --text-muted without it
     ever being defined, so every one of them silently inherited body colour. */
  --text-muted: #7e839a;
  /* Aliases the permissions app's pm-* rules reference; 18 uses of --card-bg
     and one of --danger had no definition, so those rules silently inherited
     instead of applying. */
  --card-bg: #161a26;
  --danger: #ef4444;

  --radius: 12px;
  --radius-lg: 14px;
  --tile-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --tile-shadow-hover: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border-hover);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: clip;
}

a { color: var(--text); }
a:hover { color: var(--teal); }

/* ── Background Texture ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,180,180,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(245,166,35,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Radar (1 Nov 2026): a faint scope behind every page — range rings and a
   slow sweep. z-index -1 keeps it under all content (body has no stacking
   context, so it sits just above the canvas colour); it is a transform-only
   animation, so the compositor does the work. Off for reduced motion.
   The scope is as wide as the screen's diagonal (2 Nov 2026), so the arm
   reaches every edge and corner of the window, not just the content column;
   142vmax is the fallback where hypot() is missing (always at least the diagonal). ── */
body::after {
  --scope: 142vmax;
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--scope);
  height: var(--scope);
  margin: calc(var(--scope) / -2) 0 0 calc(var(--scope) / -2);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg 280deg, rgba(0,180,180,0.04) 315deg, rgba(0,180,180,0.13) 358deg, rgba(0,200,200,0.24) 360deg),
    repeating-radial-gradient(circle closest-side, transparent 0 calc(20% - 1px), rgba(0,180,180,0.09) calc(20% - 1px) 20%);
  -webkit-mask: radial-gradient(circle closest-side, #000 70%, rgba(0,0,0,0.6) 100%);
          mask: radial-gradient(circle closest-side, #000 70%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: -1;
  animation: hub-radar 14s linear infinite;
  will-change: transform;
}
@keyframes hub-radar { to { transform: rotate(360deg); } }
@supports (width: hypot(1px, 1px)) { body::after { --scope: hypot(100vw, 100vh); } }
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; background: repeating-radial-gradient(circle closest-side, transparent 0 calc(20% - 1px), rgba(0,180,180,0.09) calc(20% - 1px) 20%); }
}
/* Contacts: hub.js drops a dot where the beam is about to pass; it flares and fades over most of a sweep */
.hub-radar-blips { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hub-radar-blip { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #3fe0e0; box-shadow: 0 0 16px 4px rgba(0,200,200,0.45); opacity: 0; animation: hub-blip 9s ease-out forwards; }
@keyframes hub-blip { 0% { opacity: 0; transform: scale(0.6); } 3% { opacity: 0.75; transform: scale(1.15); } 12% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media print { body::after, .hub-radar-blips { display: none; } }

/* ── Flex body for app pages (centred card layout) ── */
body.app-page {
  display: flex;
  flex-direction: column;
}
body.app-page .hero,
body.app-page .grid-section { width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════════
   TOP BAR — shared across all pages
   ══════════════════════════════════════════════════════════════════════════════ */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

/* Home page: brand left, user right */
.topbar-home {
  justify-content: space-between;
  padding: 16px 28px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-brand svg { flex-shrink: 0; }
.topbar-brand h1 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--teal) 0%, #4dd9d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar-logo { height: 36px; width: auto; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-mid);
}
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-dim) 0%, var(--teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* App page: breadcrumb nav */
.topbar a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-mid);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.topbar a:hover { color: var(--teal); }
.topbar-sep { color: var(--text-dim); font-size: 14px; padding: 0 4px; }
.topbar h1 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.topbar-nav { display: flex; align-items: center; gap: 10px; flex: 1; }
.topbar-tenant { display: none; }
.topbar-clocks {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-tz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.topbar-tz-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.topbar-tz-time {
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: var(--text-mid);
}
.topbar-error { color: #e74c3c; }
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--teal);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.topbar-btn:hover { background: var(--teal-dark); }
.topbar a.topbar-btn { color: #fff; }
.topbar a.topbar-btn:hover { color: #fff; }

/* Push any topbar element to the right edge (e.g. clocks, buttons, user info on app pages) */
.topbar-right { margin-left: auto; }
.topbar .topbar-clocks,
.topbar .topbar-user,
.topbar .topbar-btn,
.topbar a.topbar-btn { margin-left: auto; }

/* Tile icon colour variants.
   Each sets `color` as well as the fill so an <svg stroke="currentColor"> picks
   up the right tone; older tiles hardcode their stroke and are unaffected.
   blue/cyan/green/red are each declared twice below — the later wins, which is
   pre-existing and left alone. */
.tile-icon-teal { background: rgba(0,180,180,0.12); color: #00B4B4; }
.tile-icon-orange { background: rgba(245,166,35,0.12); color: #F5A623; }
.tile-icon-purple { background: rgba(108,92,231,0.12); color: #6c5ce7; }
.tile-icon-blue { background: rgba(59,130,246,0.12); color: #3b82f6; }
.tile-icon-green { background: rgba(16,185,129,0.12); color: #10b981; }
.tile-icon-cyan { background: rgba(6,182,212,0.12); color: #06b6d4; }
.tile-icon-amber { background: rgba(245,158,11,0.12); color: #f59e0b; }
.tile-icon-pink { background: rgba(236,72,153,0.12); color: #ec4899; }
.tile-icon-slate { background: rgba(148,163,184,0.12); color: #94a3b8; }
.tile-icon-red { background: rgba(239,68,68,0.12); color: #ef4444; }
.tile-icon-indigo { background: rgba(99,102,241,0.12); color: #6366f1; }
.tile-icon-blue { background: rgba(52,152,219,0.12); color: #3498db; }
.tile-icon-cyan { background: rgba(0,206,209,0.12); color: #00ced1; }
.tile-icon-green { background: rgba(39,174,96,0.12); color: #27ae60; }
.tile-icon-red { background: rgba(231,76,60,0.12); color: #e74c3c; }

/* Secure Score tile (home page) */
.ss-tile-metric { padding: 4px 0 8px; }
.ss-tile-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.ss-tile-pct { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; }
.ss-tile-label { font-size: 12px; color: var(--text-mid); font-weight: 600; }
.ss-tile-bar { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
.ss-tile-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.ss-tile-detail { margin-top: 8px; font-size: 11px; color: var(--text-dim); }

/* Utility: hidden by default (JS toggles) */
/* Utility hide. !important because later, more specific rules (e.g.
   .sc-selected-user { display: flex }) would otherwise win on source order. */
.hub-hidden { display: none !important; }
.hub-relative { position: relative; }
.dir-oof-message { width: 100%; margin-top: 4px; font-style: italic; color: var(--text-dim); opacity: 0.8; }
.sc-badge-email { font-size: 12px; color: var(--text-dim); margin-left: 8px; font-family: 'Inter', sans-serif; }


/* ══════════════════════════════════════════════════════════════════════════════
   HERO — home page only
   ══════════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  z-index: 1;
  padding: 48px 28px 8px;
  max-width: var(--hub-page-width);
  margin: 0 auto;
}
.hero-greeting {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 4px;
}
.hero-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}
.hero-title span {
  color: var(--teal);
}

.hero-edit-btn {
  position: absolute; right: 28px; bottom: 12px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 8px 16px; cursor: pointer; transition: all 0.15s;
}
.hero-edit-btn:hover { border-color: var(--teal); color: var(--text); }
.hero-edit-active { background: var(--teal); border-color: var(--teal); color: #0c0e14; }
.hero-edit-active:hover { background: #5ae69c; border-color: #5ae69c; color: #0c0e14; }

@media (max-width: 700px) { .hero-edit-btn { display: none; } }

.tile-drag-handle {
  position: absolute; top: 12px; right: 14px;
  font-size: 18px; color: var(--text-dim); cursor: grab;
  opacity: 0; animation: handleIn 0.2s ease forwards;
  user-select: none; line-height: 1;
}
@keyframes handleIn { to { opacity: 0.6; } }
.tile-drag-handle:hover { opacity: 1 !important; color: var(--teal); }

.tile-grid-editing .tile { cursor: grab; }
.tile-grid-editing .tile:active { cursor: grabbing; }
.tile-dragging { opacity: 0.4; }


/* ══════════════════════════════════════════════════════════════════════════════
   TILE GRID — home page
   ══════════════════════════════════════════════════════════════════════════════ */

.grid-section {
  position: relative;
  z-index: 1;
  max-width: var(--hub-page-width);
  margin: 0 auto;
  padding: 28px 28px 60px;
}
.grid-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

/* ── Client-specific apps ── */
/* Pinned above the reorderable grid: a heading, the client's tiles, then a
   small gap and a soft white rule separating them from everyone's apps. */
.client-apps {
  padding-bottom: 0;
}
.client-apps-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.client-apps-grid {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Internal › Client Apps — one group per client. */
.ca-group { margin-bottom: 36px; }
.ca-group:last-child { margin-bottom: 0; }

/* ── Individual Tile ── */
.tile {
  position: relative;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--tile-shadow);
  transition: background 0.2s, box-shadow 0.25s, border-color 0.25s, transform 0.2s;
  opacity: 0;
  transform: translateY(16px);
  animation: tileIn 0.45s ease-out forwards;
}
.tile:nth-child(1)  { animation-delay: 0.06s; }
.tile:nth-child(2)  { animation-delay: 0.12s; }
.tile:nth-child(3)  { animation-delay: 0.18s; }
.tile:nth-child(4)  { animation-delay: 0.24s; }
.tile:nth-child(5)  { animation-delay: 0.30s; }
.tile:nth-child(6)  { animation-delay: 0.36s; }
.tile:nth-child(7)  { animation-delay: 0.42s; }
.tile:nth-child(8)  { animation-delay: 0.48s; }
.tile:nth-child(9)  { animation-delay: 0.54s; }
.tile:nth-child(10) { animation-delay: 0.60s; }
.tile:nth-child(11) { animation-delay: 0.66s; }
.tile:nth-child(12) { animation-delay: 0.72s; }
.tile:nth-child(13) { animation-delay: 0.78s; }
.tile:nth-child(14) { animation-delay: 0.84s; }
.tile:nth-child(15) { animation-delay: 0.90s; }
.tile:nth-child(16) { animation-delay: 0.96s; }
.tile:nth-child(17) { animation-delay: 1.02s; }
.tile:nth-child(18) { animation-delay: 1.08s; }
.tile:nth-child(19) { animation-delay: 1.14s; }
.tile:nth-child(20) { animation-delay: 1.20s; }
.tile:nth-child(n+21) { animation-delay: 1.26s; }

@keyframes tileIn {
  to { opacity: 1; transform: translateY(0); }
}

.tile:hover {
  background: var(--bg-tile-hover);
  border-color: var(--border-hover);
  box-shadow: var(--tile-shadow-hover);
  transform: translateY(-2px);
}

.tile-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.tile-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}
.tile-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Status Badges ── */
.badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
}
.badge-live {
  background: rgba(39, 174, 96, 0.15);
  color: #5ae69c;
}
.badge-soon {
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
}
.badge-internal {
  background: rgba(168,85,247,0.15);
  color: #c084fc;
}
.tile-internal { border-color: rgba(168,85,247,0.25); }
.tile-internal:hover { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 20px rgba(168,85,247,0.08); }

.tile-arrow {
  color: var(--text-dim);
  transition: color 0.2s, transform 0.2s;
}
.tile:hover .tile-arrow {
  color: var(--teal);
  transform: translateX(3px);
}
.tile.coming-soon { opacity: 0.55; pointer-events: none; }
.tile.coming-soon:hover { transform: none; box-shadow: var(--tile-shadow); }


/* ══════════════════════════════════════════════════════════════════════════════
   APP CARD — centred card layout for individual app pages
   ══════════════════════════════════════════════════════════════════════════════ */

.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 28px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MODE TOGGLE — reusable two-way tab switch
   ══════════════════════════════════════════════════════════════════════════════ */

.mode-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
}
.mode-btn {
  flex: 1;
  padding: 10px 14px;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-mid);
  transition: all 0.2s;
  user-select: none;
}
.mode-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.mode-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.mode-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #1a1a2e;
}
.mode-btn:not(.active):hover { background: rgba(255,255,255,0.04); }


/* ══════════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — sliders, labels, values
   ══════════════════════════════════════════════════════════════════════════════ */

.controls { margin-top: 20px; }
.controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.controls-row + .controls-row { margin-top: 12px; }
.control-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  min-width: 72px;
}
.control-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
  min-width: 28px;
  text-align: center;
}

/* ── Range Slider ── */
.length-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
}
.length-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(245,166,35,0.3);
  transition: transform 0.15s;
}
.length-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.length-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(245,166,35,0.3);
}


/* ══════════════════════════════════════════════════════════════════════════════
   PASSWORD / OUTPUT FIELD
   ══════════════════════════════════════════════════════════════════════════════ */

.password-field {
  width: 100%;
  background: var(--bg-field);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 60px;
  word-break: break-all;
}
.password-field:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.08);
}
.password-field::placeholder {
  color: var(--text-dim);
  font-size: 15px;
  letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.97); }

.btn-generate {
  background: var(--orange);
  color: #1a1a2e;
  box-shadow: 0 2px 10px rgba(245,166,35,0.25);
}
.btn-generate:hover {
  background: var(--orange-dark);
  box-shadow: 0 4px 16px rgba(245,166,35,0.3);
}

.btn-copy {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-copy:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.12);
}
.btn-copy.copied {
  background: rgba(0,180,180,0.15);
  border-color: rgba(0,180,180,0.3);
  color: var(--teal);
}


/* ══════════════════════════════════════════════════════════════════════════════
   MISC — privacy note, footer
   ══════════════════════════════════════════════════════════════════════════════ */

.privacy-note {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hub-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px 28px 32px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  max-width: var(--hub-page-width);
  margin: 0 auto;
}
.hub-footer a { color: var(--teal-dim); text-decoration: none; }
.hub-footer a:hover { color: var(--teal); }



/* ══════════════════════════════════════════════════════════════════════════════
   STAFF CHANGES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Staff Changes page-specific styles ── */
.sc-container { width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.sc-tenant { text-align: center; font-size: 12px; color: var(--text-dim); margin-bottom: 20px; }

/* Tab switcher */
.sc-tabs { display: flex; gap: 0; margin-bottom: 16px; width: 100%; }
.sc-tab {
  flex: 1; padding: 12px 16px; text-align: center; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 2px solid var(--border); background: var(--bg-card);
  color: var(--text-mid); transition: all 0.2s; user-select: none;
}
.sc-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.sc-tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.sc-tab.active-starter { background: var(--teal); border-color: var(--teal); color: #fff; }
.sc-tab.active-leaver { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.sc-tab:not([class*="active-"]):hover { background: rgba(255,255,255,0.04); }

/* Form card */
.sc-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden;
}

/* Section labels */
.sc-section {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--teal); margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 2px solid rgba(0,180,180,0.15);
}
.sc-card[data-mode="leaver"] .sc-section { color: #e74c3c; border-bottom-color: rgba(231,76,60,0.15); }

/* Fields */
.sc-field { margin-bottom: 18px; }
.sc-field:last-child { margin-bottom: 0; }
.sc-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.sc-field label .hint { font-weight: 400; color: var(--text-dim); font-size: 12px; }

.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field input[type="tel"],
.sc-field input[type="date"],
.sc-field select,
.sc-field textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 14px; font-family: inherit; font-size: 14px;
  color: var(--text); background: var(--bg-field, #0e1019);
  border: 1.5px solid var(--border); border-radius: 8px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-field input:focus, .sc-field select:focus, .sc-field textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,180,0.1);
}
.sc-field input::placeholder, .sc-field textarea::placeholder { color: var(--text-dim); }
.sc-field textarea { resize: vertical; min-height: 80px; }
.sc-field select option { background: var(--bg-card); }
.sc-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }

.sc-row { display: flex; gap: 12px; max-width: 100%; }
.sc-row .sc-field { flex: 1; min-width: 0; }

/* Checkbox / radio groups */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; max-width: 100%; }
.sc-chips label {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  color: var(--text-mid); padding: 6px 12px; border: 1.5px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all 0.15s; user-select: none;
}
.sc-chips label:hover { background: rgba(255,255,255,0.03); }
.sc-chips label:has(input:checked) { border-color: var(--teal); background: rgba(0,180,180,0.08); color: var(--teal); }
.sc-chips input { display: none; }

/* M365 Groups selector */
.sc-groups { margin-top: 4px; }
.sc-groups-loading, .sc-groups-empty { font-size: 13px; color: var(--text-dim); padding: 8px 0; }
.sc-groups-search { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.sc-groups-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px; }
.sc-group-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  color: var(--text-mid); padding: 6px 12px; border: 1.5px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all 0.15s; user-select: none;
}
.sc-group-item:hover { background: rgba(255,255,255,0.03); }
.sc-group-item:has(input:checked) { border-color: var(--teal); background: rgba(0,180,180,0.08); color: var(--teal); }
.sc-group-item input { display: none; }

/* Divider */
.sc-divider { height: 1px; background: var(--border); margin: 24px 0; }

/* Submit buttons */
.sc-submit { margin-top: 24px; }
.sc-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--teal); border: none; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, transform 0.1s; box-shadow: 0 2px 10px rgba(0,180,180,0.25);
}
.sc-btn:hover { background: var(--teal-dark); }
.sc-btn:active { transform: scale(0.98); }
.sc-btn.leaver-btn { background: #e74c3c; box-shadow: 0 2px 10px rgba(231,76,60,0.25); }
.sc-btn.leaver-btn:hover { background: #c0392b; }
.sc-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Feedback */
.sc-feedback { margin-bottom: 16px; padding: 14px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: none; }

/* User picker dropdown */
.sc-user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sc-user-dropdown.open { display: block; }
.sc-user-option {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}
.sc-user-option:last-child { border-bottom: none; }
.sc-user-option:hover { background: rgba(0,180,180,0.08); }
.sc-user-option-name { font-size: 14px; font-weight: 500; color: var(--text); }
.sc-user-option-detail { font-size: 12px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.sc-user-dropdown .sc-user-empty { padding: 14px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* Selected user badge */
.sc-selected-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0,180,180,0.08);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
}
.sc-clear-user {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}
.sc-clear-user:hover { background: rgba(231,76,60,0.15); color: #e74c3c; }
.sc-feedback.success { display: block; background: rgba(39,174,96,0.1); color: #5ae69c; border: 1px solid rgba(39,174,96,0.2); }
.sc-feedback.error { display: block; background: rgba(231,76,60,0.1); color: #e74c3c; border: 1px solid rgba(231,76,60,0.2); }

@media (max-width: 500px) {
  .sc-row { flex-direction: column; gap: 0; }
  .sc-card { padding: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADCOUNT
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Headcount page styles ── */
.hc-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 28px; position: relative; z-index: 1; }

.hc-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}
.hc-stat-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-align: center;
}
.hc-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.hc-stat-value.teal { color: var(--teal); }
.hc-stat-value.orange { color: var(--orange); }
.hc-stat-value.dim { color: var(--text-dim); }
.hc-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Table */
.hc-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.hc-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.hc-table-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.hc-toggle {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--border);
}
.hc-toggle-btn {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  transition: all 0.15s;
}
.hc-toggle-btn:last-child { border-right: none; }
.hc-toggle-btn.active { background: var(--teal); color: #fff; }
.hc-toggle-btn:not(.active):hover { background: rgba(255,255,255,0.04); }

table.hc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hc-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.hc-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.hc-table thead th.sortable:hover { color: var(--teal); }
.hc-table thead th.sortable::after {
  content: '⇅';
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.3;
}
.hc-table thead th.sort-asc::after { content: '↑'; opacity: 1; color: var(--teal); }
.hc-table thead th.sort-desc::after { content: '↓'; opacity: 1; color: var(--teal); }
.hc-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.hc-table tbody tr:last-child { border-bottom: none; }
.hc-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.hc-table tbody td {
  padding: 11px 16px;
  color: var(--text-mid);
  vertical-align: middle;
}
.hc-table .name-cell {
  color: var(--text);
  font-weight: 500;
}
.hc-table .upn-cell {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.hc-table .date-cell {
  white-space: nowrap;
}
.hc-table .note-cell {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 200px;
}
.hc-table .offboarded-row td {
  opacity: 0.45;
}
.hc-table .offboarded-row .name-cell {
  text-decoration: line-through;
  text-decoration-color: var(--text-dim);
}
.hc-table .other-row td {
  opacity: 0.7;
}
.hc-table .other-row .name-cell {
  color: var(--orange);
}

.hc-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
}
.hc-badge-active { background: rgba(39,174,96,0.15); color: #5ae69c; }
.hc-badge-other { background: rgba(245,166,35,0.15); color: #F5A623; }
.hc-badge-offboarded { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.hc-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 14px;
}
.hc-error {
  text-align: center;
  padding: 40px 20px;
  color: #e74c3c;
  font-size: 14px;
}

.hc-updated {
  text-align: right;
  padding: 12px 22px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .hc-container { padding: 20px 16px; }
  .hc-stats { flex-direction: column; }
  .hc-table { font-size: 12px; }
  .hc-table thead th, .hc-table tbody td { padding: 9px 10px; }
  .hc-table .upn-cell { display: none; }
  .hc-table thead th:nth-child(3) { display: none; }
  .hc-table .note-cell { max-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   KNOWLEDGEBASE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── KB Page-Specific ── */
.kb-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 28px 28px 60px; position: relative; z-index: 1; }

.kb-search { margin-bottom: 24px; }
.kb-search input { width: 100%; padding: 12px 16px 12px 42px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.kb-search input:focus { border-color: var(--border-hover); box-shadow: 0 0 0 3px rgba(0,180,180,0.08); }
.kb-search input::placeholder { color: var(--text-dim); }
.kb-search-wrap { position: relative; }
.kb-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }

.kb-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.kb-cat-pill { padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 20px; background: transparent; color: var(--text-mid); cursor: pointer; transition: all 0.15s; user-select: none; }
.kb-cat-pill:hover { background: rgba(255,255,255,0.04); }
.kb-cat-pill.active { border-color: var(--teal); background: var(--teal-glow); color: var(--teal); }

.kb-article-list { display: flex; flex-direction: column; gap: 10px; }
.kb-article-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s; text-decoration: none; color: inherit; }
.kb-article-item:hover { background: var(--bg-tile-hover); border-color: var(--border-hover); transform: translateX(2px); }
.kb-article-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; background: var(--bg, rgba(0,180,180,0.12)); }
.kb-article-info { flex: 1; min-width: 0; }
.kb-article-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.kb-scope-pill { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; color: var(--teal); background: rgba(0,180,180,0.12); border: 1px solid rgba(0,180,180,0.35); border-radius: 20px; white-space: nowrap; }
.kb-reader h1 .kb-scope-pill { font-size: 12px; padding: 3px 11px; position: relative; top: -2px; }
body.hub-large .kb-scope-pill { font-size: 14px; padding: 3px 12px; }
body.hub-large .kb-reader h1 .kb-scope-pill { font-size: 15px; }
.kb-article-meta { font-size: 12px; color: var(--text-dim); }
.kb-article-arrow { color: var(--text-dim); flex-shrink: 0; transition: color 0.2s, transform 0.2s; }
.kb-article-item:hover .kb-article-arrow { color: var(--teal); transform: translateX(3px); }
.kb-empty { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; }

/* ── Article Reader ── */
.kb-reader { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 40px 36px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
/* Article text keeps today's measure — the 1200px frame is for grids and tables, not 180-character lines. */
.kb-reader { max-width: 904px; margin-left: auto; margin-right: auto; }
.kb-reader-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--teal); cursor: pointer; margin-bottom: 28px; transition: color 0.15s; background: none; border: none; font-family: inherit; }
.kb-reader-back:hover { color: #5ae69c; }
.kb-reader-cat { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); margin-bottom: 6px; }
.kb-reader h1 { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.kb-reader-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }

/* Article body */
.kb-reader-body h2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.kb-reader-body h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 22px 0 8px; }
.kb-reader-body p { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin: 0; padding: 0; }
.kb-reader-body ol, .kb-reader-body ul { padding-left: 24px; margin-bottom: 14px; }
.kb-reader-body li { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin-bottom: 6px; }
.kb-reader-body strong { color: var(--text); }
.kb-reader-body a { color: var(--teal); text-decoration: none; }
.kb-reader-body a:hover { text-decoration: underline; }
.kb-reader-body code { font-family: 'Inter', sans-serif; font-size: 13px; background: var(--bg-field); padding: 2px 6px; border-radius: 4px; color: var(--orange); }
.kb-reader-body .callout { background: rgba(0,180,180,0.06); border-left: 3px solid var(--teal); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0; font-size: 13px; color: var(--text-mid); line-height: 1.6; }
.kb-reader-body .callout strong { color: var(--teal); }

/* Images */
.kb-reader-body .kb-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); margin: 18px 0; cursor: zoom-in; transition: opacity 0.2s; display: block; }
.kb-reader-body .kb-img:hover { opacity: 0.85; }
/* Catch-all for editor-generated images (no CSS class, inline styles) */
.kb-reader-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); margin: 12px 0; cursor: zoom-in; display: block; }
.kb-reader-body .kb-img-float-right { float: right; max-width: 260px; margin: 4px 0 16px 24px; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; transition: opacity 0.2s; }
.kb-reader-body .kb-img-float-right:hover { opacity: 0.85; }
.kb-reader-body .kb-figure { margin: 20px 0; text-align: center; }
.kb-reader-body .kb-figure img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; transition: opacity 0.2s; }
.kb-reader-body .kb-figure img:hover { opacity: 0.85; }
.kb-reader-body .kb-figcaption { margin-top: 8px; font-size: 12px; color: var(--text-dim); font-style: italic; }
.kb-reader-body .kb-clearfix::after { content: ''; display: table; clear: both; }

/* Lightbox */
.kb-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); align-items: center; justify-content: center; cursor: zoom-out; padding: 32px; }
.kb-lightbox.open { display: flex; }
.kb-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); object-fit: contain; }
.kb-lightbox-close { position: fixed; top: 16px; right: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 10000; }

/* KB article attachments */
.kb-attachments {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.kb-attachments-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.kb-attach-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
}
.kb-attach-link:hover { border-color: var(--teal); background: rgba(0,180,180,0.04); }
.kb-attach-link svg { color: var(--text-dim); flex-shrink: 0; }
.kb-attach-name { flex: 1; font-size: 13px; font-weight: 600; }
.kb-attach-size { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.kb-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.kb-lightbox-caption { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.5); padding: 6px 16px; border-radius: 20px; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .kb-container { padding: 20px 16px 48px; }
  .kb-reader { padding: 24px 20px; }
  .kb-reader-body .kb-img-float-right { float: none; max-width: 100%; margin: 18px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DIRECTORY
   ══════════════════════════════════════════════════════════════════════════════ */

.dir-container { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.dir-search {
  position: relative;
  margin-bottom: 16px;
}
.dir-search input {
  width: 100%;
  padding: 14px 18px 14px 46px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.dir-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,180,0.12); }
.dir-search input::placeholder { color: var(--text-dim); }
.dir-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mid);
  pointer-events: none;
}

/* Department pills */
.dir-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.dir-pill {
  padding: 5px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.dir-pill:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.dir-pill.active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* User list */
.dir-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.dir-user {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.dir-user:last-child { border-bottom: none; }
.dir-user:hover { background: rgba(255,255,255,0.02); }

.dir-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
}

.dir-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  border: 2px solid var(--border);
}
.dir-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dir-user-info { flex: 1; min-width: 0; }
.dir-user-name { font-size: 15px; font-weight: 600; color: var(--text); }
.dir-user-title { font-size: 12px; color: var(--text-mid); margin-top: 2px; }

.dir-user-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dir-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-mid);
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.12s;
}
.dir-link:hover { background: rgba(0,180,180,0.08); color: var(--teal); }
.dir-link svg { flex-shrink: 0; }

.dir-expand-arrow {
  color: var(--text-mid);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.dir-user.expanded .dir-expand-arrow { transform: rotate(90deg); }

/* Expanded details */
.dir-details {
  display: none;
  padding: 0 20px 16px 76px;
  gap: 10px;
  flex-wrap: wrap;
}
.dir-user.expanded .dir-details { display: flex; }

.dir-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-mid);
}
.dir-detail svg { flex-shrink: 0; color: var(--text-mid); opacity: 0.7; }
.dir-detail a { color: var(--teal); text-decoration: none; }
.dir-detail a:hover { text-decoration: underline; }

.dir-oof-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(245,166,35,0.12);
  color: var(--orange);
}

.dir-count {
  text-align: right;
  padding: 12px 20px;
  font-size: 11px;
  color: var(--text-mid);
  border-top: 1px solid var(--border);
}

.dir-loading {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-mid);
  font-size: 14px;
}

@media (max-width: 600px) {
  .dir-container { padding: 20px 12px; }
  .dir-user-row { padding: 12px 14px; gap: 10px; }
  .dir-user-links { display: none; }
  .dir-details { padding-left: 14px; }
  .dir-user-links-mobile { display: flex; gap: 8px; margin-bottom: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECURE SCORE
   ══════════════════════════════════════════════════════════════════════════════ */

.ss-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

/* Overview row */
.ss-overview { display: flex; gap: 16px; margin-bottom: 20px; }

/* Score card */
.ss-score-card {
  flex: 0 0 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.ss-score-ring { position: relative; width: 120px; height: 120px; margin-bottom: 12px; }
.ss-score-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ss-score-ring .ring-bg { fill: none; stroke: var(--bg-raised); stroke-width: 10; }
/* Ring and trend take their colour from the ss-tone-* class on the element,
   via currentColor — no hardcoded hexes and no inline styles. */
.ss-score-ring .ring-fg { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.8s; }
.ss-score-number {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700;
}
.ss-score-label { font-size: 13px; font-weight: 600; }
.ss-score-detail { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Trend chart */
.ss-trend-card {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.ss-section-title { font-size: 13px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.ss-trend-chart { width: 100%; height: 120px; }

/* Category cards */
.ss-categories { display: flex; gap: 12px; margin-bottom: 20px; }
.ss-cat-card {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.ss-cat-name { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.ss-cat-score { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 8px; }
.ss-cat-bar { height: 5px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
.ss-cat-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s; background: currentColor; }
.ss-cat-detail { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* Summary badges */
.ss-summary { display: flex; gap: 10px; margin-bottom: 20px; }
.ss-summary-badge {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.ss-summary-num { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.ss-summary-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Card wrapper */
.ss-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  margin-bottom: 16px;
}
.ss-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.ss-card-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; }
.ss-card-count { font-size: 12px; color: var(--text-dim); }

/* Control rows */
.ss-control {
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; transition: background 0.12s; cursor: pointer;
}
.ss-control:last-child { border-bottom: none; }
.ss-control:hover { background: rgba(255,255,255,0.02); }

.ss-ctrl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ss-ctrl-dot.implemented { background: #27ae60; }
.ss-ctrl-dot.partial { background: #F5A623; }
.ss-ctrl-dot.not_addressed { background: rgba(255,255,255,0.12); }

.ss-ctrl-info { flex: 1; min-width: 0; }
.ss-ctrl-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ss-ctrl-cat { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.ss-ctrl-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ss-ctrl-pts { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.ss-impact {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.ss-impact.high { background: rgba(39,174,96,0.12); color: #5ae69c; }
.ss-impact.med { background: rgba(245,166,35,0.12); color: #F5A623; }
.ss-impact.low { background: rgba(255,255,255,0.05); color: var(--text-dim); }

/* Expandable detail */
.ss-ctrl-detail {
  display: none; padding: 0 22px 14px 46px;
  font-size: 12px; color: var(--text-mid); line-height: 1.6;
}
.ss-ctrl-detail.open { display: block; }
.ss-detail-tag { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 10px; background: rgba(255,255,255,0.04); border-radius: 4px; color: var(--text-dim); }

/* Implemented toggle */
.ss-toggle-implemented {
  padding: 14px 22px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--teal); cursor: pointer; transition: background 0.12s;
}
.ss-toggle-implemented:hover { background: rgba(0,180,180,0.04); }

.ss-card-footer { padding: 12px 22px; font-size: 11px; color: var(--text-dim); text-align: right; border-top: 1px solid var(--border); }

.ss-loading { text-align: center; padding: 48px 20px; color: var(--text-mid); font-size: 14px; }

.ss-disclaimer { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 20px; padding: 0 4px; }

@media (max-width: 700px) {
  .ss-overview { flex-direction: column; }
  .ss-score-card { flex: none; }
  .ss-categories { flex-wrap: wrap; }
  .ss-cat-card { flex: 1 1 45%; }
  .ss-summary { flex-wrap: wrap; }
  .ss-summary-badge { flex: 1 1 30%; }
  .ss-ctrl-right { gap: 8px; }
}

/* Comparatives */
.ss-compare-card { margin-bottom: 20px; padding: 18px 22px; }
.ss-compare-rows { display: flex; flex-direction: column; gap: 12px; }
.ss-compare-row { display: flex; align-items: center; gap: 12px; }
.ss-compare-label { width: 140px; font-size: 12px; color: var(--text-mid); }
.ss-compare-label-you { width: 140px; font-size: 13px; font-weight: 600; color: var(--text); }
.ss-compare-bar { flex: 1; height: 8px; background: var(--bg-raised); border-radius: 4px; overflow: hidden; }
.ss-compare-bar-fill { height: 100%; border-radius: 4px; background: currentColor; }
.ss-compare-pct { width: 40px; text-align: right; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim); }
.ss-compare-pct-you { width: 40px; text-align: right; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; }
.ss-cat-nodata { color: var(--text-dim); }
.ss-num-green { color: #27ae60; }
.ss-num-orange { color: #F5A623; }
.ss-num-dim { color: var(--text-dim); }
.ss-card-footer-center { text-align: center; color: var(--text-dim); }
.ss-page-footer { text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 12px; }
.ss-detail-label { margin-bottom: 4px; font-weight: 600; color: var(--text-dim); }
/* Secure Score — verbose view (10 Sep 2026) */
.ss-cat-counts { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.ss-cat-avail { font-size: 11px; color: var(--teal); margin-top: 2px; font-weight: 600; }
.ss-card-body { padding: 16px 22px; }
.ss-gap-top { margin-top: 14px; }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text-mid); }
.ss-chip-on { background: rgba(0,180,180,0.12); color: var(--teal); }
.ss-src-row { display: grid; grid-template-columns: 1fr 64px minmax(80px, 160px) 44px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ss-src-row:last-child { border-bottom: none; }
.ss-src-name { color: var(--text); }
.ss-src-n { font-size: 12px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.ss-src-bar { height: 5px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
.ss-src-bar-fill { height: 100%; border-radius: 3px; background: currentColor; }
.ss-src-pct { font-family: 'Inter', sans-serif; font-weight: 700; text-align: right; }
.ss-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ss-kv-item { padding: 12px 14px; background: var(--bg-raised); border-radius: 10px; }
.ss-kv-num { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; }
.ss-kv-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; }
.ss-num-red { color: #ff7b6b; }
.ss-note { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }
.ss-note code { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-mid); }
.ss-alert-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.ss-alert-row:last-child { border-bottom: none; }
.ss-alert-title { flex: 1; min-width: 0; color: var(--text); }
.ss-alert-date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ss-sev { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
.ss-sev-high { background: rgba(231,76,60,0.15); color: #ff7b6b; }
.ss-sev-medium { background: rgba(245,166,35,0.12); color: #F5A623; }
.ss-sev-low, .ss-sev-informational, .ss-sev- { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.ss-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); }
.ss-tab { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-mid); cursor: pointer; }
.ss-tab.active { background: rgba(0,180,180,0.12); border-color: var(--teal); color: var(--teal); }
.ss-tab-gap { flex: 1 1 100%; height: 0; }
.ss-ctrl-status { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ss-ctrl-detail p { margin: 0 0 8px; }
.ss-ctrl-link { color: var(--teal); text-decoration: none; font-weight: 600; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   README — the guide to the Hub (admin/readme)
   ══════════════════════════════════════════════════════════════════════════════ */
.rm-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 28px 20px 70px; position: relative; z-index: 1; }
.rm-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 28px; align-items: center; padding: 34px 36px; background: linear-gradient(135deg, rgba(0,180,180,0.12), rgba(0,180,180,0.02) 60%, transparent), var(--bg-card); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 36px; }
.rm-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.rm-title { font-family: 'Outfit', 'Inter', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; margin: 0 0 14px; color: var(--text); }
.rm-lead { font-size: 15px; line-height: 1.7; color: var(--text-mid); margin: 0 0 18px; max-width: 640px; }
.rm-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-jump a { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-mid); text-decoration: none; background: var(--bg-card); }
.rm-jump a:hover { border-color: var(--teal); color: var(--teal); }
.rm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-stat { background: var(--bg-raised); border-radius: 12px; padding: 16px 14px; text-align: center; }
.rm-stat-num { font-family: 'Outfit', 'Inter', sans-serif; font-size: 30px; font-weight: 700; color: var(--teal); line-height: 1; }
.rm-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }
.rm-section { margin-bottom: 46px; scroll-margin-top: 80px; }
.rm-h3 { font-family: 'Outfit', 'Inter', sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.rm-p { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin: 0 0 18px; max-width: 900px; }
.rm-p a, .rm-card a { color: var(--teal); text-decoration: none; }
.rm-note { font-size: 12px; color: var(--text-dim); margin: 14px 0 0; }
.rm-diagram { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin-bottom: 18px; overflow-x: auto; }
.rm-diagram svg { width: 100%; min-width: 720px; height: auto; display: block; color: var(--text-dim); }
.rm-d-node rect { fill: var(--bg-raised); stroke: var(--border); stroke-width: 1.5; }
.rm-d-accent rect { stroke: var(--teal); }
.rm-d-hub rect { fill: rgba(0,180,180,0.10); stroke: var(--teal); stroke-width: 2; }
.rm-d-t { fill: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; }
.rm-d-s { fill: var(--text-dim); font-family: 'DM Sans', sans-serif; font-size: 11.5px; }
.rm-d-edge path { fill: none; stroke: var(--teal); stroke-width: 2; marker-end: url(#rm-arrow); opacity: 0.8; }
.rm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rm-fact { font-size: 13px; line-height: 1.6; color: var(--text-mid); padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: 10px; }
.rm-fact strong { color: var(--text); }
.rm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.rm-cols-3 { margin-top: 18px; }
.rm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 20px 18px; }
.rm-card h4 { font-size: 15px; font-weight: 700; margin: 12px 0 8px; color: var(--text); }
.rm-card p { font-size: 13px; line-height: 1.65; color: var(--text-mid); margin: 0; }
.rm-card code, .rm-tip code { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--teal); }
.rm-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.rm-ico-teal { background: rgba(0,180,180,0.14); color: var(--teal); }
.rm-ico-purple { background: rgba(167,139,250,0.14); color: #a78bfa; }
.rm-ico-amber { background: rgba(245,166,35,0.14); color: #F5A623; }
.rm-ico-indigo { background: rgba(129,140,248,0.14); color: #818cf8; }
.rm-ico-green { background: rgba(39,174,96,0.14); color: #5ae69c; }
.rm-ico-cyan { background: rgba(34,211,238,0.14); color: #22d3ee; }
.rm-ico-red { background: rgba(239,68,68,0.14); color: #ff7b6b; }
.rm-ico-orange { background: rgba(251,146,60,0.14); color: #fb923c; }
.rm-ico-pink { background: rgba(244,114,182,0.14); color: #f472b6; }
.rm-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.rm-app { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.rm-app:hover { border-color: var(--teal); transform: translateY(-2px); }
.rm-app-head { display: flex; align-items: center; gap: 12px; }
.rm-app-name { font-size: 15px; font-weight: 700; color: var(--text); }
.rm-app-what { font-size: 13px; line-height: 1.6; color: var(--text-mid); margin: 0; flex: 1; }
.rm-app-src { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--teal); }
.rm-app-tip { font-size: 12px; line-height: 1.55; color: var(--text-dim); padding-top: 10px; border-top: 1px dashed var(--border); }
.rm-app-try { font-size: 12px; line-height: 1.55; color: var(--text-mid); padding: 8px 10px; border-radius: 8px; background: rgba(245,166,35,0.10); }
.rm-app-try-label { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F5A623; margin-right: 8px; }
.rm-tip a { color: var(--teal); text-decoration: none; font-weight: 600; }
.rm-timeline { position: relative; margin: 6px 0 22px; padding-left: 22px; border-left: 2px solid var(--border); }
.rm-tl-item { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 10px 0 14px; }
.rm-tl-item::before { content: ''; position: absolute; left: -29px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(0,180,180,0.18); }
.rm-tl-time { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--teal); padding-top: 2px; }
.rm-tl-what { font-size: 13px; line-height: 1.6; color: var(--text-mid); }
.rm-tl-what strong { color: var(--text); }
.rm-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.rm-tip { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text-mid); }
.rm-tip strong { color: var(--text); }
.rm-tip-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,180,180,0.14); color: var(--teal); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 800px) {
  .rm-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .rm-title { font-size: 26px; }
  .rm-tl-item { grid-template-columns: 1fr; gap: 4px; }
  .rm-tips { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DEMO — the bar shown on every page under /demo/
   ══════════════════════════════════════════════════════════════════════════════ */
.hub-demo-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; background: #F5A623; color: #111; font-size: 13px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════
   BLOBBY — public file store for automations (admin/blobby)
   ══════════════════════════════════════════════════════════════════════════════ */
.bb-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }
.bb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bb-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.bb-crumb { font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); background: none; border: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.bb-crumb:hover { background: rgba(0,180,180,0.08); }
.bb-crumb-here { color: var(--text); cursor: default; }
.bb-crumb-here:hover { background: none; }
.bb-crumb-sep { color: var(--text-dim); }
.bb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.bb-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
.bb-btn:hover { border-color: var(--border-hover); }
.bb-btn-primary { background: var(--teal); border-color: var(--teal); color: #041a1a; }
.bb-btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.bb-drop { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 220px; overflow: hidden; }
.bb-drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 12px; background: rgba(0,180,180,0.10); color: var(--teal); font-size: 15px; font-weight: 600; border: 2px dashed var(--teal); border-radius: var(--radius-lg); pointer-events: none; }
.bb-drop-active .bb-drop-hint { display: flex; }
.bb-list { display: flex; flex-direction: column; min-height: 220px; }
.bb-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; }
.bb-row { display: grid; grid-template-columns: 28px 280px 80px 150px 100px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bb-row:last-child { border-bottom: none; }
.bb-row[data-folder], .bb-row-up { cursor: pointer; }
.bb-row[data-folder]:hover, .bb-row-up:hover { background: rgba(255,255,255,0.02); }
.bb-ico { color: var(--text-dim); display: flex; }
.bb-ico-folder { color: var(--teal); }
.bb-ico-image { color: #a78bfa; }
.bb-ico-package { color: #F5A623; }
.bb-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-name a { color: inherit; text-decoration: none; }
.bb-name a:hover { color: var(--teal); }
.bb-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-row-actions { display: flex; gap: 4px; justify-self: end; flex-wrap: nowrap; }
.bb-icon-btn { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-mid); cursor: pointer; white-space: nowrap; }
.bb-icon-btn:hover { border-color: var(--border-hover); color: var(--text); }
.bb-icon-btn.bb-danger:hover { border-color: #ef4444; color: #ef4444; }
.bb-uploads { margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; }
.bb-uploads-head { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.bb-up-row { display: grid; grid-template-columns: minmax(160px, 1fr) 70px minmax(120px, 2fr) 110px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; }
.bb-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-up-name em { font-style: normal; color: var(--text-dim); font-size: 11px; }
.bb-up-size, .bb-up-state { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.bb-up-bar { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; display: block; }
.bb-up-fill { display: block; height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.2s; }
.bb-up-done .bb-up-state { color: #27ae60; }
.bb-up-error .bb-up-fill { background: #ef4444; }
.bb-up-error .bb-up-state { color: #ef4444; }
.bb-note { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 16px 4px 0; }
.bb-bin { margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bb-bin-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--text-mid); }
.bb-bin-head::-webkit-details-marker { display: none; }
.bb-bin-head .slog-fatal-chev { margin-left: auto; }
.bb-bin[open] .slog-fatal-chev { transform: rotate(180deg); }
.bb-bin-count { font-weight: 400; color: var(--text-dim); }
.bb-bin-row { display: grid; grid-template-columns: 28px minmax(160px, 1.4fr) minmax(120px, 1fr) minmax(150px, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.bb-bin-empty { padding: 14px 16px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.bb-restore { border-color: var(--teal); color: var(--teal); }
.bb-restore:hover { background: rgba(0,180,180,0.10); }
.bb-restore:disabled { opacity: 0.5; cursor: default; }
.bb-name-gone { color: var(--text-dim); font-weight: 500; }
.bb-mono { font-family: 'DM Mono', monospace; font-size: 11px; }
.bb-fetch-row { display: grid; grid-template-columns: 150px 150px minmax(160px, 1.6fr) minmax(120px, 1fr) 110px; gap: 12px; align-items: center; padding: 7px 16px; border-top: 1px solid var(--border); font-size: 12px; }
.bb-fetch-denied .bb-meta { color: #F5A623; }
.bb-fetch-more { font-size: 11px; color: var(--text-dim); padding: 8px 16px 10px; border-top: 1px solid var(--border); }
.bb-alert-date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 900px) { .bb-fetch-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .bb-bin-row { grid-template-columns: 28px 1fr auto; } .bb-bin-row .bb-meta { display: none; } }
.bb-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #F5A623; vertical-align: middle; }
.bb-lock svg { width: 12px; height: 12px; }
.bb-icon-btn.bb-on { border-color: #F5A623; color: #F5A623; }
@media (max-width: 900px) {
  .bb-row { grid-template-columns: 28px 1fr auto; }
  .bb-row .bb-meta { display: none; }
  .bb-up-row { grid-template-columns: 1fr auto; }
  .bb-up-size, .bb-up-bar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHARING AUDIT
   ══════════════════════════════════════════════════════════════════════════════ */

.au-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

/* Summary cards */
.au-summary { display: flex; gap: 12px; margin-bottom: 20px; }
.au-stat {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.au-stat-num { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.au-stat-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Scan info bar */
.au-scan-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; margin-bottom: 20px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); gap: 10px;
}
.au-rescan-btn {
  padding: 5px 14px; font-family: inherit; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--teal); color: var(--teal); background: transparent;
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.au-rescan-btn:hover { background: var(--teal); color: #fff; }

/* Tabs */
.au-tabs { display: flex; gap: 2px; margin-bottom: 16px; }
.au-tab {
  flex: 1; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; transition: all 0.15s;
}
.au-tab:first-child { border-radius: 10px 0 0 10px; }
.au-tab:last-child { border-radius: 0 10px 10px 0; }
.au-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.au-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.03); }

/* Cards */
.au-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* Library rows */
.au-lib-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.au-lib-row:last-child { border-bottom: none; }
.au-lib-row:hover { background: rgba(255,255,255,0.02); }
.au-lib-info { flex: 1; min-width: 0; }
.au-lib-site { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; }
.au-lib-name { font-size: 14px; font-weight: 600; color: var(--text); }
.au-lib-name a { color: var(--text); text-decoration: none; }
.au-lib-name a:hover { color: var(--teal); }
.au-lib-count {
  flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 4px 12px; border-radius: 6px; font-weight: 600;
}
.au-lib-count.has-shares { background: rgba(231,76,60,0.12); color: #e74c3c; }
.au-lib-count.no-shares { background: rgba(39,174,96,0.08); color: #27ae60; }

/* User rows */
.au-user-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.au-user-row:last-child { border-bottom: none; }
.au-user-row:hover { background: rgba(255,255,255,0.02); }
.au-user-info { flex: 1; }
.au-user-name { font-size: 14px; font-weight: 600; color: var(--text); }
.au-user-email { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.au-user-badges { display: flex; gap: 6px; flex-shrink: 0; }
.au-type-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
.au-type-badge.anon { background: rgba(231,76,60,0.12); color: #e74c3c; }
.au-type-badge.org { background: rgba(245,166,35,0.12); color: #F5A623; }
.au-type-badge.specific { background: rgba(52,152,219,0.12); color: #3498db; }

/* Item rows */
.au-item-row {
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  transition: background 0.12s; cursor: pointer;
}
.au-item-row:last-child { border-bottom: none; }
.au-item-row:hover { background: rgba(255,255,255,0.02); }

.au-item-top { display: flex; align-items: flex-start; gap: 10px; }
.au-item-icon { flex-shrink: 0; margin-top: 2px; color: var(--text-dim); }
.au-item-info { flex: 1; }
.au-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.au-item-path { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; margin-top: 2px; }
.au-item-meta { display: flex; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }

/* Filter row */
.au-filter-row { display: flex; gap: 6px; padding: 14px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.au-filter-btn {
  padding: 5px 12px; font-family: inherit; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--border); background: transparent; color: var(--text-dim);
  border-radius: 5px; cursor: pointer; transition: all 0.12s;
}
.au-filter-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.au-filter-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; }

.au-card-footer { padding: 12px 22px; font-size: 11px; color: var(--text-dim); text-align: right; border-top: 1px solid var(--border); }

.au-empty { text-align: center; padding: 36px 20px; color: var(--text-dim); font-size: 14px; }
.au-loading { text-align: center; padding: 60px 20px; color: var(--text-mid); font-size: 14px; }
.au-loading-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.au-spinner { margin-bottom: 12px; }
.au-spinner svg { animation: spin 1.5s linear infinite; }
.au-stat-anon { color: #e74c3c; }
.au-stat-org { color: #F5A623; }
.au-stat-specific { color: #3498db; }
.au-child-count { font-size: 11px; color: var(--text-dim); font-weight: 400; }

@media (max-width: 600px) {
  .au-summary { flex-wrap: wrap; }
  .au-stat { flex: 1 1 45%; }
  .au-tabs { font-size: 12px; }
  .au-user-badges { flex-wrap: wrap; }
  .au-item-meta { flex-direction: column; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WHO'S OUT TODAY
   ══════════════════════════════════════════════════════════════════════════════ */

.wo-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.wo-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.wo-summary-alert { background: rgba(245,166,35,0.1); color: var(--orange); border: 1px solid rgba(245,166,35,0.2); }
.wo-summary-clear { background: rgba(39,174,96,0.08); color: #5ae69c; border: 1px solid rgba(39,174,96,0.15); }

.wo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.wo-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  opacity: 0.5;
}
.wo-tile-out {
  opacity: 1;
  border-color: var(--orange);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px var(--orange);
}

.wo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 10px;
  overflow: hidden;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  border: 2px solid var(--border);
}
.wo-tile-out .wo-avatar { border-color: var(--orange); }
.wo-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Avatar tints (shared: .dir-avatar, .wo-avatar) ── */
/* Deterministic per-user colour, assigned in JS from a hash of the email so a
   person keeps the same tint everywhere. Must stay AFTER the .dir-avatar and
   .wo-avatar base rules — equal specificity, so source order decides.
   rgba() cannot take a CSS variable, hence the literal brand-matched values. */
.hub-av-1 { background: rgba(0,180,180,0.14);   color: #3ad2d2; border-color: rgba(0,180,180,0.34); }
.hub-av-2 { background: rgba(245,166,35,0.14);  color: #f0b04a; border-color: rgba(245,166,35,0.34); }
.hub-av-3 { background: rgba(167,139,250,0.14); color: #b39dfb; border-color: rgba(167,139,250,0.34); }
.hub-av-4 { background: rgba(242,120,159,0.14); color: #f28cae; border-color: rgba(242,120,159,0.34); }
.hub-av-5 { background: rgba(78,209,127,0.14);  color: #6ad695; border-color: rgba(78,209,127,0.34); }
.hub-av-6 { background: rgba(90,168,242,0.14);  color: #7bb8f4; border-color: rgba(90,168,242,0.34); }
.hub-av-7 { background: rgba(229,193,92,0.14);  color: #e5c977; border-color: rgba(229,193,92,0.34); }
.hub-av-8 { background: rgba(124,147,240,0.14); color: #94a6f3; border-color: rgba(124,147,240,0.34); }

/* Out-of-office ring wins over the tint's border colour. */
.wo-tile-out .wo-avatar[class*="hub-av-"] { border-color: var(--orange); }

.wo-oof-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(245,166,35,0.12);
  color: var(--orange);
  margin-bottom: 8px;
}

.wo-tile-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.wo-tile-title { font-size: 11px; color: var(--text-mid); }
.wo-tile-dept { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.wo-oof-msg {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.5;
}

.wo-oof-dates {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
}

.wo-footer {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--text-dim);
}

.wo-loading { text-align: center; padding: 48px 20px; color: var(--text-mid); font-size: 14px; }

@media (max-width: 900px) {
  .wo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .wo-grid { grid-template-columns: repeat(2, 1fr); }
  .wo-tile { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LICENCE INSIGHTS
   ══════════════════════════════════════════════════════════════════════════════ */

.li-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.li-summary { display: flex; gap: 12px; margin-bottom: 20px; }
.li-stat {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.li-stat-num { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--text); }
.li-stat-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.li-num-assigned { color: var(--teal); }
.li-num-available { color: #27ae60; }

.li-tabs { display: flex; gap: 2px; margin-bottom: 16px; }
.li-tab {
  flex: 1; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; transition: all 0.15s;
}
.li-tab:first-child { border-radius: 10px 0 0 10px; }
.li-tab:last-child { border-radius: 0 10px 10px 0; }
.li-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.li-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.03); }

.li-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* Licence rows */
.li-lic-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.li-lic-row:last-child { border-bottom: none; }
.li-lic-row:hover { background: rgba(255,255,255,0.02); }

.li-lic-info { flex: 1; min-width: 0; }
.li-lic-name { font-size: 14px; font-weight: 600; color: var(--text); }
.li-lic-meta { display: flex; gap: 8px; margin-top: 3px; align-items: center; }
.li-lic-sku { font-size: 10px; color: var(--text-dim); font-family: 'Inter', sans-serif; }

.li-lic-right { flex-shrink: 0; width: 200px; }
.li-lic-bar { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.li-lic-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.li-lic-counts { font-size: 12px; color: var(--text-mid); display: flex; align-items: center; gap: 2px; }
.li-lic-assigned { font-weight: 700; font-family: 'Inter', sans-serif; }
.li-lic-sep { color: var(--text-dim); }
.li-lic-total { font-family: 'Inter', sans-serif; }
.li-lic-avail { color: #F5A623; font-size: 11px; margin-left: 6px; }
.li-lic-full { color: #5ae69c; font-size: 10px; font-weight: 700; margin-left: 6px; padding: 1px 6px; background: rgba(90,230,156,0.12); border-radius: 3px; }
.li-lic-over { color: #e74c3c; font-size: 10px; font-weight: 700; margin-left: 6px; padding: 1px 6px; background: rgba(231,76,60,0.12); border-radius: 3px; }

/* Expandable user list per licence */
.li-lic-row { cursor: pointer; }
.li-lic-users {
  display: none;
  border-bottom: 1px solid var(--border);
}
.li-lic-users.open {
  display: block;
  background: var(--bg-raised);
  padding: 10px 22px 14px 42px;
  border-left: 3px solid var(--teal);
  margin: 0 12px;
  border-radius: 0 0 8px 8px;
}
.li-lic-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.li-lic-user:last-child { border-bottom: none; }
.li-lic-user-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.li-lic-user-email { color: var(--text-dim); font-family: 'Inter', sans-serif; font-size: 11px; }
.li-lic-user-empty { padding: 8px 0; font-size: 12px; color: var(--text-dim); }

/* User rows (Users tab) */
.li-user-row {
  padding: 0; border-bottom: 1px solid var(--border);
  transition: background 0.12s; cursor: pointer;
}
.li-user-row:last-child { border-bottom: none; }
.li-user-row:hover { background: rgba(255,255,255,0.02); }

.li-user-header { display: flex; align-items: center; gap: 14px; padding: 12px 22px; }
.li-user-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.li-user-disabled { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(231,76,60,0.12); color: #e74c3c; vertical-align: middle; }
.li-user-email { font-size: 11px; color: var(--text-dim); font-family: 'DM Mono', monospace; }
.li-user-count { font-size: 11px; color: var(--text-dim); white-space: nowrap; margin-left: auto; }

.li-user-detail { display: none; padding: 0 22px 14px; }
.li-user-detail.open { display: flex; flex-wrap: wrap; gap: 4px; }

.li-user-lics { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; max-width: 50%; }
.li-user-lic-tag {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
  background: rgba(0,180,180,0.08); color: var(--teal); white-space: nowrap;
}

.li-footer { text-align: center; padding: 16px; font-size: 11px; color: var(--text-dim); }
.li-loading { text-align: center; padding: 48px 20px; color: var(--text-mid); font-size: 14px; }
.li-empty { text-align: center; padding: 36px 20px; color: var(--text-dim); font-size: 14px; }

@media (max-width: 700px) {
  .li-summary { flex-wrap: wrap; }
  .li-stat { flex: 1 1 45%; }
  .li-lic-row { flex-direction: column; gap: 8px; }
  .li-lic-right { width: 100%; }
  .li-user-header { flex-wrap: wrap; }
  .li-user-detail.open { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   QUICK REQUEST
   ══════════════════════════════════════════════════════════════════════════════ */

.qr-container { max-width: 680px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.qr-from {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}
.qr-from svg { color: var(--text-dim); flex-shrink: 0; }
.qr-from-email { font-weight: 400; font-size: 12px; color: var(--text-dim); font-family: 'Inter', sans-serif; margin-left: auto; }

.qr-field { margin-bottom: 16px; }
.qr-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

.qr-input {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.qr-input:focus { border-color: var(--teal); }
.qr-input::placeholder { color: var(--text-dim); }

.qr-editor {
  width: 100%;
  min-height: 240px;
  overflow-y: auto;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
  word-wrap: break-word;
  resize: vertical;
}
.qr-editor:focus { border-color: var(--teal); }
.qr-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  pointer-events: none;
}
.qr-editor img.qr-inline-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
}

.qr-attachments-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  transition: all 0.15s;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qr-attachments-zone svg { flex-shrink: 0; }
.qr-attachments-zone.qr-drag-over {
  border-color: var(--teal);
  background: rgba(0,180,180,0.04);
  color: var(--teal);
}
.qr-browse-btn {
  background: none;
  border: none;
  color: var(--teal);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.qr-drop-hint { width: 100%; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.qr-file-list { margin-bottom: 16px; }
.qr-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text);
}
.qr-file-item svg { color: var(--text-dim); flex-shrink: 0; }
.qr-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qr-file-size { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; flex-shrink: 0; }
.qr-file-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.12s;
}
.qr-file-remove:hover { color: #e74c3c; }


.qr-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.qr-submit:hover { background: var(--teal-dark); }
.qr-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 600px) {
  .qr-from { flex-wrap: wrap; }
  .qr-from-email { margin-left: 24px; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PERMISSIONS — Admin tenant/app manager
   ══════════════════════════════════════════════════════════════════════════════ */

.pm-container { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.pm-consent-url {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.pm-consent-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.pm-consent-code { flex: 1; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.pm-count { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; font-weight: 600; }

.pm-tenant { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.pm-tenant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; transition: background 0.12s;
}
.pm-tenant-row:hover { background: rgba(255,255,255,0.02); }
.pm-tenant-info { flex: 1; min-width: 0; }
.pm-tenant-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pm-tenant-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.pm-tenant-tid { font-family: 'Inter', sans-serif; }

.pm-consent-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.pm-consent-checking { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.pm-consented { background: rgba(39,174,96,0.12); color: #5ae69c; }
.pm-partial { background: rgba(245,166,35,0.12); color: #F5A623; }
.pm-not-consented { background: rgba(231,76,60,0.12); color: #e74c3c; }

.pm-perms-status { font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.pm-perms-ok { color: var(--text-dim); }
.pm-perms-warn { color: #F5A623; font-weight: 600; }
.pm-perms-checking { color: var(--text-dim); }
.pm-perm-missing {
  font-family: 'Inter', sans-serif; font-size: 11px;
  background: rgba(231,76,60,0.08); color: #e74c3c;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}

.pm-tenant-detail { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border); }
.pm-tenant-detail.open { display: block; }

.pm-detail-section { margin-top: 18px; }
.pm-detail-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.pm-detail-label .pm-hint { text-transform: none; font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.pm-tid-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; }
.pm-detail-tid { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-mid); word-break: break-all; cursor: pointer; transition: color 0.12s; }
.pm-detail-tid:hover { color: var(--teal); }

.pm-apps-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pm-app-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; color: var(--text-mid); cursor: pointer; transition: all 0.12s; white-space: nowrap; position: relative;
}
.pm-app-toggle:has(input:checked) { border-color: var(--teal); color: var(--teal); background: rgba(0,180,180,0.06); }
.pm-app-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pm-app-all { font-weight: 700; margin-bottom: 6px; }

.pm-users-list { margin-bottom: 10px; }
.pm-user-override {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 6px;
}
.pm-user-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pm-user-identity { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pm-user-display { font-size: 15px; font-weight: 700; color: var(--text); }
.pm-user-upn { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-dim); }
.pm-user-remove { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; }
.pm-user-remove:hover { color: #e74c3c; }
.pm-user-apps { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-app-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
  font-size: 11px; color: var(--text-dim); cursor: pointer; transition: all 0.12s; user-select: none;
}
.pm-app-chip.pm-chip-on { border-color: var(--teal); color: var(--teal); }

.pm-no-users { font-size: 12px; color: var(--text-dim); padding: 8px 0; }

.pm-detail-actions { display: flex; gap: 10px; margin-top: 20px; }
.pm-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px;
  border: none; border-radius: 6px; cursor: pointer; transition: all 0.12s;
}
.pm-btn-primary { background: var(--teal); color: #fff; }
.pm-btn-primary:hover { background: var(--teal-dark); }
.pm-btn-secondary { background: var(--bg-raised); color: var(--text-mid); border: 1px solid var(--border); }
.pm-btn-secondary:hover { border-color: var(--text-dim); }
.pm-btn-danger { background: rgba(231,76,60,0.12); color: #e74c3c; }
.pm-btn-danger:hover { background: rgba(231,76,60,0.2); }
.pm-btn-small { font-size: 11px; padding: 5px 12px; }
.pm-btn-scope { display: block; margin-top: 14px; margin-bottom: 6px; background: #e8e8e8; color: #111; border: none; }
.pm-btn-scope:hover { background: #d4d4d4; }
.pm-btn-add-user { margin-top: 4px; }

.pm-feedback { font-size: 13px; font-weight: 600; margin-top: 10px; transition: opacity 0.5s; }
.pm-feedback-success { color: #5ae69c; }
.pm-feedback-error { color: #e74c3c; }
.pm-feedback-fading { opacity: 0; }

.pm-error { color: #e74c3c; }
.pm-loading { text-align: center; padding: 48px 20px; color: var(--text-mid); font-size: 14px; }

/* Modals */
.pm-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.pm-modal-overlay.open { display: flex; }
.pm-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px; width: 100%; max-width: 460px; box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.pm-modal h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.pm-modal-note { font-size: 0.85rem; color: var(--text-mid); margin: 0 0 1rem; }

/* ── Standalone message pages (auth/session.php, auth/callback.php) ── */
/* Rendered without the app chrome, so they link styles.css directly rather
   than carrying inline styles. See includes/message-page.php. */
.hub-msg-page {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
}
.hub-msg { text-align: center; max-width: 440px; }
.hub-msg-icon {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  background: rgba(239,68,68,0.15); color: #ef4444;
}
.hub-msg-success .hub-msg-icon { background: rgba(16,185,129,0.15); color: #10b981; }
.hub-msg-heading { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.hub-msg-success .hub-msg-heading { color: var(--teal); }
.hub-msg-text { color: var(--text-dim); line-height: 1.6; margin: 0 0 24px; }
.hub-msg-links { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hub-msg-footer { margin-top: 32px; font-size: 0.8rem; color: var(--text-dim); }
.hub-msg-link { color: var(--teal); text-decoration: none; }
.hub-msg-link:hover { text-decoration: underline; }
.hub-msg-btn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}
.hub-msg-btn:hover { background: var(--teal-dark); }

/* ── Shared status text colours ── */
/* Named tones so JS can pick a colour by meaning instead of emitting
   style="color:#ef4444". Values match what the inline styles used. */
.hub-txt-ok     { color: #10b981; }
.hub-txt-info   { color: #3b82f6; }
.hub-txt-warn   { color: #f59e0b; }
.hub-txt-danger { color: #ef4444; }
.hub-txt-teal   { color: var(--teal); }
.hub-txt-muted  { color: #64748b; }
.hub-txt-dim    { color: var(--text-dim); }

/* ── Dynamic sizing ── */
/* Chart bars and progress fills are the one case a static stylesheet cannot
   express: the number is data. Markup carries data-pct / data-width and
   hubApplyDynamic() copies it into a CSS custom property, so the declarations
   still live here rather than in the markup. */
.hub-dyn-h { height: var(--pct, 0%); }
.hub-dyn-w { width: var(--pct, 0%); }

/* "Today" marker in date-grouped lists (admin/calls, admin/server-log). */
.hub-today-tag { color: var(--teal); font-weight: 400; font-size: 0.78rem; }

/* Shared layout helpers used across the admin apps. */
.hub-grid-4  { grid-template-columns: repeat(4, 1fr); }
.hub-row-6   { display: flex; gap: 6px; align-items: center; }
.hub-row-8   { display: flex; align-items: center; gap: 8px; }
.hub-btn-flash { background: rgba(90,230,156,0.25); }
/* Set by hubFixContrast() on text that would be unreadable against its real background; !important beats the email's inline colour. */
.hub-contrast-fix { color: inherit !important; }

/* Secure Score tile tone — three buckets, set in PHP as a class on .tile.
   rgba() cannot take a variable, so each tone spells out its own fill. */
.ss-good .tile-icon { background: rgba(39,174,96,0.125); color: #27ae60; }
.ss-fair .tile-icon { background: rgba(245,166,35,0.125); color: #F5A623; }
.ss-poor .tile-icon { background: rgba(231,76,60,0.125); color: #e74c3c; }
.ss-good .ss-tile-pct { color: #27ae60; }
.ss-fair .ss-tile-pct { color: #F5A623; }
.ss-poor .ss-tile-pct { color: #e74c3c; }
.ss-good .ss-tile-bar-fill { background: #27ae60; }
.ss-fair .ss-tile-bar-fill { background: #F5A623; }
.ss-poor .ss-tile-bar-fill { background: #e74c3c; }

/* Lock background scrolling behind the KB lightbox. */
.hub-no-scroll { overflow: hidden; }

/* headcount */
.hc-stat-current { color: #5ae69c; }

/* service-health raw-response dump */
.sh-raw {
  font-size: 11px;
  white-space: pre-wrap;
  max-height: 300px;
  overflow: auto;
  margin-top: 8px;
  color: var(--text-dim);
}

/* licences usage bar */
.li-bar-over { background: #e74c3c; }
.li-bar-full { background: #5ae69c; }
.li-bar-part { background: #F5A623; }

/* security (secure score) — three tone buckets, chosen in JS by percentage.
   Bar fills take their colour from the same class via currentColor. */
.ss-tone-good { color: #27ae60; }
.ss-tone-fair { color: #F5A623; }
.ss-tone-poor { color: #e74c3c; }
.ss-tone-peer { color: var(--text-dim); }
.ss-compare-bar-fill, .ss-cat-bar-fill { background: currentColor; }

/* games — replacing inline styles */
.gm-btn-block  { margin-top: 12px; }
.gm-btn-inline { margin-left: 12px; }
.gm-lb-card-wide   { max-width: 420px; margin: 20px auto; }
.gm-lb-card-narrow { max-width: 360px; margin: 20px auto; }
.gm-overlay-inline { position: relative; background: transparent; min-height: 200px; }
.gm-tile-icon  { background: rgba(232,93,117,0.12); }
.gm-lb-label   { margin-bottom: 0; }
.gm-feedback-wrong { color: #E85D75; }

/* Announcement bar injected by js/hub.js. */
.hub-announce {
  position: relative;
  z-index: 9989;
  background: rgba(0,180,180,0.1);
  border-bottom: 1px solid rgba(0,180,180,0.2);
  padding: 10px 40px 10px 20px;
  font-size: 13px;
  color: #b0b4c4;
  text-align: center;
}
.hub-announce-warning {
  background: rgba(245,166,35,0.1);
  border-bottom-color: rgba(245,166,35,0.2);
}
.hub-announce-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
}

/* kb editor */
.ed-empty { color: var(--text-dim); font-size: 13px; }
.ed-article-hit { flex: 1; min-width: 0; cursor: pointer; }
.ed-feedback-fading { opacity: 0; }

/* Shared banner (hub.js hubBanner). A toast that floats over the page, so the
   content under it never moves; fades and slides 0.2s in and out. Tone colours
   are applied while it is invisible so no frame shows unstyled text. */
.hub-banner { position: fixed; top: 72px; left: 50%; z-index: 1000; width: max-content; max-width: min(600px, calc(100vw - 32px)); opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.hub-banner.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hub-banner > span { display: block; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.hub-banner > span:empty { display: none; }
.hub-banner-success > span { background: linear-gradient(rgba(39,174,96,0.16), rgba(39,174,96,0.16)), var(--bg-card); border: 1px solid rgba(39,174,96,0.35); color: #5ae69c; }
.hub-banner-error > span { background: linear-gradient(rgba(231,76,60,0.16), rgba(231,76,60,0.16)), var(--bg-card); border: 1px solid rgba(231,76,60,0.35); color: #ff7b6b; }
.hub-banner-info > span { background: linear-gradient(rgba(0,180,180,0.14), rgba(0,180,180,0.14)), var(--bg-card); border: 1px solid rgba(0,180,180,0.35); color: var(--teal); }
@media (prefers-reduced-motion: reduce) { .hub-banner { transition: none; } }

/* Compact badge/button variants (admin/permissions, admin/shared-mailboxes). */
.pm-badge-xs { font-size: 0.65rem; padding: 1px 6px; }
.pm-badge-sm { font-size: 0.68rem; padding: 2px 8px; }
.pm-btn-xs   { font-size: 0.65rem; padding: 1px 8px; margin-left: 4px; }
.pm-detail-label-inline { margin-bottom: 0; display: inline; }

/* admin/permissions */
.pm-domain-row     { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pm-domain-name    { min-width: 200px; }
.pm-domain-actions { margin-top: 8px; }

/* admin/licences */
.ali-sync-spaced   { margin-top: 1rem; }
.ali-actions-right { margin-top: 1rem; text-align: right; }
.ali-count-over    { color: #ef4444; font-weight: 600; }
.ali-count-under   { color: #f59e0b; }

/* admin/shared-mailboxes */
.sm-email-offset { margin-left: 8px; }
.sm-log {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.sm-log-syncing { color: var(--text); }
.sm-log-phase   { color: var(--teal); font-weight: 600; }
.sm-log-default { }

/* admin/headcount */
.ahc-chart-wrap { position: relative; width: 100%; }
.ahc-section-label { margin: 1.5rem 0 0.5rem; }
.ahc-name-faded { opacity: 0.5; }
.ahc-badge-sm { font-size: 0.7rem; }
.ahc-detail-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* admin/logs */
.lg-loading-inline { padding: 12px; }
.lg-entry-clickable { cursor: pointer; }

/* admin/server-log */
.pm-modal-field { margin-bottom: 14px; }
.pm-modal-field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.pm-modal-field input {
  width: 100%; padding: 10px 14px; font-family: inherit; font-size: 14px;
  color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.pm-modal-field input:focus { border-color: var(--teal); }
.pm-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.pm-modal-error { font-size: 13px; color: #e74c3c; margin-top: 10px; }
.pm-modal-field select { width: 100%; padding: 10px 14px; background: var(--card-bg, #1a2236); color: var(--text, #e0e0e0); border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; font-family: inherit; font-size: 0.88rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.pm-modal-field select:focus { outline: none; border-color: var(--teal); }
.pm-modal-field select option { background: var(--card-bg, #1a2236); color: var(--text, #e0e0e0); }

.pm-user-search {
  width: 100%; padding: 10px 14px; font-family: inherit; font-size: 14px;
  color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; outline: none; margin-bottom: 10px;
}
.pm-user-search:focus { border-color: var(--teal); }
.pm-picker-status { font-size: 12px; padding: 6px 0 8px; }
.pm-picker-ok { color: var(--teal); }
.pm-picker-err { color: #e74c3c; }
.pm-user-list { max-height: 320px; overflow-y: auto; }

.pm-detail-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.6; }
.pm-tenant-scoped { color: var(--orange); font-weight: 600; }
.pm-tenant-all { color: var(--text-dim); }
.pm-picker-user {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s;
}
.pm-picker-user:hover { background: rgba(0,180,180,0.04); }
.pm-picker-user:last-child { border-bottom: none; }
.pm-picker-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pm-picker-email { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.pm-picker-disabled { font-size: 10px; color: #e74c3c; background: rgba(231,76,60,0.12); padding: 1px 6px; border-radius: 3px; font-weight: 700; }

@media (max-width: 600px) {
  .pm-tenant-row { flex-direction: column; align-items: flex-start; }
  .pm-consent-url { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN HEADCOUNT
   ══════════════════════════════════════════════════════════════════════════════ */

.ahc-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }   /* wide, like Devices, Licencing and Teams Calling */
body.hub-large .ahc-container { max-width: none; padding-inline: 24px; }
.ahc-count { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; font-weight: 600; }
.ahc-count-billable { color: var(--teal); }

.ahc-global-chart {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 20px; cursor: pointer; transition: border-color 0.15s;
}
.ahc-global-chart:hover { border-color: var(--border-hover); }
#chartWrap { height: 160px; transition: height 0.3s; }
#chartWrap.expanded { height: 300px; }
#chartWrap { height: 160px; transition: height 0.3s; }
#chartWrap.expanded { height: 300px; }
.ahc-chart-global { height: 180px; }

.ahc-total {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--teal); flex-shrink: 0;
}
.ahc-delta {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; flex-shrink: 0; min-width: 36px; text-align: center;
}
.ahc-delta-up { color: #5ae69c; }
.ahc-delta-down { color: #e74c3c; }
.ahc-delta-flat { color: var(--text-dim); }

.ahc-stat-active { color: var(--teal); font-weight: 600; }
.ahc-stat-off { color: var(--text-dim); }
/* Tenant with an offboard date still in the future — a client until that day,
   so flagged rather than greyed out. */
.ahc-stat-leaving { color: var(--orange); font-weight: 600; }
.ahc-pending-note { margin-right: auto; align-self: center; font-size: 13px; }
.ahc-stat-other { color: var(--orange); }

.ahc-chart-section { margin-bottom: 24px; }
.ahc-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 140px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.ahc-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.ahc-bar {
  width: 100%; max-width: 40px; background: var(--teal); border-radius: 4px 4px 0 0;
  transition: height 0.3s; min-height: 3px;
}
.ahc-bar-val { font-size: 10px; color: var(--text-mid); margin-bottom: 4px; font-weight: 600; }
.ahc-bar-projected { background: rgba(0,180,180,0.18); border: 1.5px solid var(--teal); border-bottom: none; }
.ahc-bar-val-projected { color: var(--text-dim); }
.ahc-count-sub { font-size: 11px; color: var(--text-dim); margin-left: 8px; }
.ahc-search { display: block; width: 50%; min-width: 280px; margin: 4px 0 14px; padding: 12px 16px; font: inherit; font-size: 14px; color: var(--text); background: var(--bg-field); border: 1.5px solid var(--border-hover); border-radius: var(--radius); box-shadow: 0 0 0 3px rgba(0,180,180,0.08); }
.ahc-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,180,0.22); }
@media (max-width: 700px) { .ahc-search { width: 100%; } }
.ahc-hits { padding: 4px 18px 10px 18px; border-top: 1px dashed var(--border); }
.ahc-hit { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) 90px; gap: 12px; padding: 5px 0; font-size: 12px; align-items: baseline; }
.ahc-hit-name { color: var(--text); font-weight: 600; }
.ahc-hit-email { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahc-hit-email-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ahc-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.ahc-copy:hover, .ahc-copy:focus-visible { color: var(--teal); background: rgba(0,180,180,0.10); outline: none; }
.ahc-copy.ahc-copied { color: #5ae69c; }
.ahc-copy.ahc-copy-failed { color: #ff7b6b; }
.ahc-copy-scratch { position: fixed; top: -1000px; left: -1000px; opacity: 0; }
.ahc-hit-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); text-align: right; }
.ahc-hit-active { color: #5ae69c; } .ahc-hit-offboarded { color: #ff7b6b; }
.ahc-hit-more { font-size: 11px; color: var(--text-dim); padding-top: 4px; }
.ahc-bar-label { font-size: 9px; color: var(--text-dim); text-align: center; margin-top: 6px; line-height: 1.3; }

.ahc-users-section { margin-top: 8px; }
.ahc-users-list { margin-bottom: 10px; }
.ahc-sort-header { display: flex; align-items: center; padding: 6px 0; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ahc-sort-col { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); cursor: pointer; transition: color 0.15s; }
.ahc-sort-col:hover { color: var(--text); }
.ahc-sort-active { color: var(--teal, #0891b2); }
.ahc-sort-col-name { flex: 1; }
.ahc-sort-col-date { width: 100px; text-align: left; }
.ahc-sort-col-spacer { width: 220px; flex-shrink: 0; }
.ahc-tenant-offboarded { opacity: 0.55; }
.ahc-tenant-offboarded:hover { opacity: 0.75; }

/* Teams Calling dashboard */
.tc-filters { display: flex; align-items: center; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap; }
.tc-filter-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-muted); font-size: 0.78rem; padding: 5px 12px; cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; }
.tc-filter-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.tc-filter-active { background: rgba(0,180,180,0.15); border-color: rgba(0,180,180,0.3); color: #00B4B4; }
.tc-sync-info { font-size: 0.72rem; color: var(--text-muted); text-align: right; margin-top: 18px; }   /* page footer line */
.tc-stale { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.35); color: #F5A623; font-size: 13px; }
.tc-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 1.2rem; width: 100%; }
/* The hub-grid-* modifiers are defined earlier in this file, so on equal
   specificity the line above wins and the modifier does nothing. Qualifying
   it with the component beats that regardless of order. */
.tc-stats.hub-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tc-stats.hub-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tc-stats.hub-grid-4 { grid-template-columns: 1fr; } }
.tc-stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 14px 12px; text-align: center; }
.tc-stat-value { font-size: 1.5rem; font-weight: 700; margin-bottom: 2px; }
.tc-stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tc-chart-wrap { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 16px; margin-bottom: 1.2rem; height: 220px; }
.tc-log { margin-top: 0.5rem; }
.tc-log-header { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.tc-log-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
.tc-log-row:hover { background: rgba(255,255,255,0.02); }
.tc-col-time { width: 130px; flex-shrink: 0; }
.tc-col-dir { width: 65px; flex-shrink: 0; }
.tc-col-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-col-to { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-col-agent { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-col-dur { width: 80px; flex-shrink: 0; text-align: right; }
.tc-col-status { width: 80px; flex-shrink: 0; text-align: right; }
.tc-agent-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.78rem; padding: 5px 28px 5px 10px; font-family: 'Inter', sans-serif; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b90a0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.tc-agent-select option { background: #1a1d2e; color: #e8eaf0; }
.tc-dir-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.tc-dir-inbound { background: rgba(16,185,129,0.15); color: #10b981; }
.tc-dir-outbound { background: rgba(59,130,246,0.15); color: #3b82f6; }
.tc-dir-internal { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.tc-dir-unknown { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.tc-status-answered { color: #10b981; font-size: 0.75rem; }
.tc-status-abandoned { color: #f59e0b; font-weight: 600; font-size: 0.75rem; }
.tc-status-missed { color: #ef4444; font-weight: 600; font-size: 0.75rem; }
.tc-phone { font-family: 'Inter', monospace; font-size: 0.8rem; }
.tc-user { font-weight: 500; }
.tc-unknown { color: var(--text-muted); font-style: italic; }
@media (max-width: 900px) { .tc-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tc-stats { grid-template-columns: repeat(2, 1fr); } }

.ahc-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.ahc-user-row:last-child { border-bottom: none; }
.ahc-row-new { border-left: 3px solid #5ae69c; background: rgba(90,230,156,0.04); border-radius: 0; }
.ahc-row-gone { border-left: 3px solid #e74c3c; background: rgba(231,76,60,0.04); border-radius: 0; }
.ahc-status-new { background: rgba(90,230,156,0.12); color: #5ae69c; }
.ahc-row-new {
  border-left: 3px solid #5ae69c; background: rgba(90,230,156,0.04); border-radius: 0;
}
.ahc-row-gone {
  border-left: 3px solid #e74c3c; background: rgba(231,76,60,0.04); border-radius: 0;
}
.ahc-status-new { background: rgba(90,230,156,0.12); color: #5ae69c; }
.ahc-user-info { flex: 1; min-width: 0; }
.ahc-user-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ahc-user-email { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.ahc-user-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahc-copy.ahc-copy-row { width: 26px; height: 26px; margin: -5px 0; border-radius: 5px; font-size: 15px; }   /* negative margin: the bigger button does not make the row taller */
.ahc-copy.ahc-copy-row svg { width: 17px; height: 17px; overflow: visible; }   /* visible: the icon's stroke sits at the edge and clipped at odd sizes */
body.hub-large .ahc-copy.ahc-copy-row { width: 32px; height: 32px; margin: -6px 0; }
body.hub-large .ahc-copy.ahc-copy-row svg { width: 21px; height: 21px; }
.ahc-user-dates { display: flex; gap: 0; flex-shrink: 0; }
.ahc-user-date { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; white-space: nowrap; width: 100px; text-align: left; }
.ahc-date-end { color: var(--orange); }
.ahc-user-status {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
  width: 80px; text-align: center; box-sizing: border-box;
}
.ahc-status-active { background: rgba(39,174,96,0.12); color: #5ae69c; }
.ahc-status-offboarded { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.ahc-status-other { background: rgba(245,166,35,0.12); color: #F5A623; }

.ahc-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ahc-updated { font-size: 11px; color: var(--text-dim); margin-top: 16px; text-align: right; }
.ahc-bulk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 600px) {
  .ahc-user-row { flex-wrap: wrap; }
  .ahc-user-actions { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   NEWSLETTERS
   ══════════════════════════════════════════════════════════════════════════════ */

.nl-container { max-width: 800px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }
.nl-loading { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.nl-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 14px; }
.nl-topbar-actions { margin-bottom: 20px; }
.nl-list { display: flex; flex-direction: column; gap: 4px; }
.nl-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.nl-item:hover { background: rgba(255,255,255,0.02); }
.nl-item-title { font-weight: 700; font-size: 15px; color: var(--text); }
.nl-item-meta { font-size: 11px; color: var(--text-dim); font-family: 'DM Mono', monospace; margin-top: 2px; }
.nl-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.nl-badge-draft { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.nl-badge-sending { background: rgba(245,166,35,0.12); color: #F5A623; }
.nl-badge-sent { background: rgba(90,230,156,0.12); color: #5ae69c; }
.nl-back { background: none; border: none; color: var(--teal); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 20px; font-family: inherit; }
.nl-back:hover { text-decoration: underline; }
.nl-field { margin-bottom: 16px; }
.nl-field label { display: block; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.nl-input { width: 100%; padding: 10px 14px; font-size: 15px; font-family: inherit; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; color: var(--text); box-sizing: border-box; }
.nl-input:focus { outline: none; border-color: var(--teal); }
.nl-quill { min-height: 300px; }
.nl-quill .ql-editor { min-height: 280px; font-size: 15px; line-height: 1.7; color: var(--text); }
.nl-quill .ql-toolbar { background: var(--bg-raised); border-color: var(--border); border-radius: 8px 8px 0 0; }
.nl-quill .ql-container { background: var(--bg-card); border-color: var(--border); border-radius: 0 0 8px 8px; }
.nl-quill .ql-toolbar .ql-stroke { stroke: var(--text-dim); }
.nl-quill .ql-toolbar .ql-fill { fill: var(--text-dim); }
.nl-quill .ql-toolbar .ql-picker-label { color: var(--text-dim); }
.nl-quill .ql-toolbar button:hover .ql-stroke { stroke: var(--teal); }
.nl-quill .ql-toolbar button:hover .ql-fill { fill: var(--teal); }
.nl-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.nl-progress { margin-top: 20px; }
.nl-progress-bar { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
.nl-progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.3s; }
.nl-progress-text { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-family: 'DM Mono', monospace; }
.nl-progress-done .nl-progress-fill { background: #5ae69c; }
.nl-sent-info { font-size: 13px; color: var(--text-dim); margin-top: 20px; font-family: 'DM Mono', monospace; }
.nl-feedback { font-size: 13px; margin-top: 16px; min-height: 20px; }
.nl-feedback-ok { color: #5ae69c; }
.nl-feedback-error { color: #e74c3c; }
.nl-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; display: flex; align-items: center; justify-content: center; }
.nl-modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: 400px; max-width: 90vw; }
.nl-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.nl-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.nl-archive-item { padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding-left 0.15s; }
.nl-archive-item:hover { padding-left: 8px; }
.nl-archive-title { font-size: 17px; font-weight: 700; color: var(--text); }
.nl-archive-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.nl-article { padding: 8px 0; }
.nl-article-title { font-size: 26px; font-weight: 700; font-family: 'Outfit', sans-serif; margin: 0 0 8px; }
.nl-article-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 28px; font-family: 'DM Mono', monospace; }
.nl-article-body { font-size: 15px; line-height: 1.8; color: var(--text-mid); }
.nl-article-body p { margin: 0; padding: 0; }
.nl-article-body h1, .nl-article-body h2, .nl-article-body h3 { color: var(--text); margin-top: 24px; }
.nl-article-body a { color: var(--teal); }
.nl-article-body img { max-width: 100%; border-radius: 8px; margin: 12px 0; display: block; }

/* ══════════════════════════════════════════════════════════════════════════════
   SERVICE HEALTH
   ══════════════════════════════════════════════════════════════════════════════ */

.sh-container { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; zoom: 1.2; }
body.hub-large.app-page > .sh-container { zoom: 1.5 !important; max-width: 1100px; }
.sh-loading { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 14px; }
.sh-error { color: #e74c3c; }
.sh-updated { font-size: 11px; color: var(--text-dim); text-align: right; margin-bottom: 16px; font-family: 'Inter', sans-serif; }

.sh-section-label {
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 24px 0 12px; display: flex; align-items: center; gap: 8px;
}

.sh-primary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 8px;
}

.sh-third-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 8px;
}

.sh-svc-card {
  background: rgba(39,174,96,0.06); border: 1px solid rgba(39,174,96,0.15);
  border-radius: 10px; padding: 14px 16px; text-align: center; transition: border-color 0.15s;
}
.sh-svc-degraded { background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.2); }
.sh-svc-outage { background: rgba(231,76,60,0.08); border-color: rgba(231,76,60,0.25); }
.sh-svc-unknown { background: rgba(255,255,255,0.03); border-color: var(--border); }

.sh-svc-icon { font-size: 20px; margin-bottom: 4px; }
.sh-svc-operational .sh-svc-icon { color: #5ae69c; }
.sh-svc-degraded .sh-svc-icon { color: #F5A623; }
.sh-svc-outage .sh-svc-icon { color: #e74c3c; }
.sh-svc-unknown .sh-svc-icon { color: var(--text-dim); }

.sh-svc-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 4px; }
.sh-svc-status { font-size: 11px; font-weight: 600; margin-top: 4px; }
.sh-svc-operational .sh-svc-status { color: #5ae69c; }
.sh-svc-degraded .sh-svc-status { color: #F5A623; }
.sh-svc-outage .sh-svc-status { color: #e74c3c; }
.sh-svc-unknown .sh-svc-status { color: var(--text-dim); }

.sh-svc-error { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.sh-svc-affected { font-size: 10px; color: #F5A623; margin-top: 4px; max-height: 40px; overflow: hidden; }
.sh-svc-clickable { cursor: pointer; }
.sh-svc-clickable:hover { border-color: rgba(255,255,255,0.2); }
.sh-svc-counts { font-size: 10px; font-weight: 600; margin-top: 4px; color: #F5A623; }

.sh-svc-detail {
  display: none; grid-column: 1 / -1;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-top: -2px;
}
.sh-svc-detail.open { display: block; }
.sh-svc-issue { padding: 8px 0; border-bottom: 1px solid var(--border); }
.sh-svc-issue:last-child { border-bottom: none; }
.sh-svc-issue-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-svc-issue-id { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-dim); }
.sh-ms-link { color: var(--teal); text-decoration: none; }
.sh-ms-link:hover { text-decoration: underline; }
.sh-svc-issue-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.sh-svc-issue-meta { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; margin-top: 4px; }

.sh-badge-sm {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.sh-sev-incident { background: rgba(245,166,35,0.12); color: #F5A623; }
.sh-sev-advisory { background: rgba(0,180,180,0.08); color: var(--teal); }
.sh-sev-resolved { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.sh-provider-error { font-size: 12px; color: #e74c3c; margin-top: 8px; }

.sh-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sh-dot-amber { background: #F5A623; }
.sh-dot-green { background: #5ae69c; }
.sh-dot-red { background: #e74c3c; }

.sh-no-incidents {
  font-size: 13px; color: var(--text-dim); padding: 20px 0;
  border-top: 1px solid var(--border); margin-top: 20px;
}

.sh-section-header {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 8px 0; margin-top: 20px;
  border-bottom: 1px solid var(--border);
}
.sh-section-header:hover .sh-section-label { color: var(--text-mid); }
.sh-section-count { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-left: 6px; }
.sh-chevron { font-size: 14px; color: var(--text-dim); }
.sh-section-body { display: none; padding-top: 10px; }
.sh-section-body.open { display: block; }

.sh-incident {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 10px;
}
.sh-incident-amber { border-left: 3px solid #F5A623; }
.sh-incident-outage { border-left: 3px solid #e74c3c; }
.sh-incident-advisory { border-left: 3px solid var(--teal); }
.sh-incident-resolved { border-left: 3px solid rgba(255,255,255,0.08); opacity: 0.6; }

.sh-incident-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.sh-incident-title { font-weight: 700; font-size: 14px; color: var(--text); flex: 1; min-width: 0; }
.sh-incident-id { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim); margin-right: 8px; }

.sh-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.sh-severity-incident { background: rgba(245,166,35,0.12); color: #F5A623; }
.sh-severity-outage { background: rgba(231,76,60,0.12); color: #e74c3c; }
.sh-severity-advisory { background: rgba(0,180,180,0.12); color: var(--teal); }
.sh-severity-resolved { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.sh-incident-meta {
  display: flex; gap: 16px; font-size: 11px; color: var(--text-dim);
  font-family: 'Inter', sans-serif; margin-bottom: 8px;
}
.sh-incident-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.sh-incident-update { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; margin-top: 10px; }

@media (max-width: 600px) {
  .sh-primary-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-third-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-incident-header { flex-direction: column; }
  .sh-incident-meta { flex-direction: column; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTIVITY LOGS
   ══════════════════════════════════════════════════════════════════════════════ */

.lg-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }

.lg-stats { display: flex; gap: 12px; margin-bottom: 24px; }
.lg-stat {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; flex: 1; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.lg-stat-num { font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }
.lg-num-teal { color: var(--teal); }
.lg-num-orange { color: var(--orange); }
.lg-num-dim { color: var(--text); }
.lg-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

.lg-day { margin-bottom: 4px; }
.lg-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  transition: color 0.12s;
}
.lg-day-header:hover { color: var(--teal); }
.lg-day-meta { font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-dim); }

.lg-day-entries { display: none; }
.lg-day-entries.open { display: block; }

.lg-entry {
  font-size: 13px;
}
/* User groups within day sections */
.lg-user-group { border-bottom: 1px solid rgba(255,255,255,0.05); }
.lg-user-group:last-child { border-bottom: none; }
.lg-user-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; transition: background 0.15s; }
.lg-user-header:hover { background: rgba(255,255,255,0.03); }
.lg-user-summary { display: flex; align-items: center; gap: 10px; }
.lg-user-name { font-weight: 600; font-size: 0.88rem; }
.lg-user-email { font-size: 0.78rem; color: var(--text-muted); }
.lg-user-meta { display: flex; align-items: center; gap: 16px; font-size: 0.78rem; color: var(--text-muted); }
.lg-user-chevron { font-size: 0.7rem; margin-left: 4px; transition: transform 0.15s; }
.lg-user-entries { display: none; padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.06); margin-left: 16px; }
.lg-user-entries.open { display: block; }

.lg-entry-alt { background: rgba(255,255,255,0.015); border-radius: 6px; }
.lg-entry-main { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.lg-entry-time { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim); min-width: 60px; }
.lg-entry-user { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lg-entry-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
.lg-entry-email { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-entry-page {
  background: rgba(0,180,180,0.08); border: 1px solid rgba(0,180,180,0.15); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; color: var(--teal); white-space: nowrap; flex-shrink: 0;
}
.lg-entry-duration { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-dim); min-width: 55px; text-align: right; flex-shrink: 0; }
.lg-entry-clicks { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,255,255,0.2); min-width: 55px; text-align: right; flex-shrink: 0; }
.lg-empty { font-size: 12px; color: var(--text-dim); padding: 12px 16px; }

.lg-top-apps { display: flex; flex-direction: column; gap: 2px; }
.lg-top-app { font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--text); }
.lg-top-rank { color: var(--text-dim); }

.lg-click-detail { display: none; padding: 6px 16px 10px 76px; }
.lg-click-detail.open { display: block; }
.lg-click-row {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0; font-size: 11px; color: var(--text-dim);
  border-left: 2px solid var(--border); padding-left: 10px; margin-left: 4px;
}
.lg-click-time { font-family: 'Inter', sans-serif; min-width: 40px; color: rgba(255,255,255,0.2); }
.lg-click-type {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; min-width: 44px; text-align: center; color: var(--text-dim);
}
.lg-click-text { color: var(--text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-click-href { font-family: 'Inter', sans-serif; font-size: 10px; color: rgba(255,255,255,0.2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .lg-stats { flex-direction: column; }
  .lg-entry-main { flex-wrap: wrap; gap: 6px; }
  .lg-click-detail { padding-left: 16px; }
  .lg-entry-user { width: 100%; }
  .lg-entry-time { min-width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN — Internal Jinba Hub
   ══════════════════════════════════════════════════════════════════════════════ */

.adm-hero {
  text-align: center;
  padding: 48px 20px 12px;
  position: relative;
  z-index: 1;
}
.adm-greeting {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.adm-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 6px;
}
.adm-tiles-container {
  max-width: var(--hub-page-width);
  margin: 0 auto;
  padding: 24px 20px 60px;
  position: relative;
  z-index: 1;
}
.adm-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Large Mode (1.25x scale, higher contrast)
   Toggle via body.hub-large
   ══════════════════════════════════════════════════════════════════════════════ */

body.hub-large {
  --text: #f8f9fc;
  --text-mid: #c8cce0;
  --text-dim: #9499b2;
  --border: rgba(255,255,255,0.12);
  --border-hover: rgba(0,200,200,0.45);
  --bg-tile-hover: #222840;
}

/* Universal content zoom — scales everything between topbar and footer automatically */
body.hub-large.app-page > *:not(.topbar):not(.hub-footer):not(.hub-radar-blips) {
  zoom: 1.25;
}

/* Topbar & footer */
body.hub-large .topbar { padding: 22px 32px; }
body.hub-large .topbar a { font-size: 16px; }
body.hub-large .topbar-sep { font-size: 18px; }
body.hub-large .topbar h1 { font-size: 22px; }
body.hub-large .topbar-brand h1 { font-size: 26px; }
body.hub-large .topbar-logo { height: 44px; }
body.hub-large .topbar-tz-label { font-size: 14px; }
body.hub-large .topbar-tz-time { font-size: 16px; }
/* Export PDF and friends live in the topbar, which the accessibility mode
   scales manually — without this they stayed at 12px while everything around
   them grew. Applies to every app using .topbar-btn, not just Devices. */
body.hub-large .topbar-btn { font-size: 15px; padding: 9px 18px; gap: 8px; }
body.hub-large .topbar-btn svg { width: 17px; height: 17px; }
body.hub-large .slog-updated { font-size: 15px; }
body.hub-large .hub-footer { font-size: 15px; padding: 28px 32px 40px; }

/* Home */
body.hub-large .hero { padding-top: 56px; max-width: 1140px; }
body.hub-large .hero-greeting { font-size: 18px; }
body.hub-large .hero-title { font-size: 36px; }
body.hub-large .hero-edit-btn { font-size: 14px; padding: 10px 20px; }
body.hub-large .grid-label { font-size: 14px; }
body.hub-large .client-apps-title { font-size: 14px; }
body.hub-large .grid-section { max-width: 1140px; }
body.hub-large .tile-grid { grid-template-columns: repeat(3, 1fr); }
body.hub-large .tile { padding: 30px; gap: 16px; border-radius: 18px; }
body.hub-large .tile-icon { width: 56px; height: 56px; border-radius: 14px; }
body.hub-large .tile-icon svg { width: 28px; height: 28px; }
body.hub-large .tile-name { font-size: 19px; }
body.hub-large .tile-desc { font-size: 16px; line-height: 1.6; }
body.hub-large .badge { font-size: 12px; padding: 4px 10px; }

/* Password Generator */
body.hub-large .card { padding: 48px 42px; border-radius: 20px; max-width: 660px; }
body.hub-large .card-icon { width: 64px; height: 64px; border-radius: 16px; }
body.hub-large .card-title { font-size: 28px; }
body.hub-large .card-subtitle { font-size: 16px; margin-bottom: 36px; }
body.hub-large .mode-toggle { margin-bottom: 28px; }
body.hub-large .mode-btn { padding: 14px 20px; font-size: 16px; }
body.hub-large .password-field { font-size: 26px; padding: 22px 24px; min-height: 78px; border-radius: 16px; }
body.hub-large .password-field::placeholder { font-size: 18px; }
body.hub-large .controls-row { gap: 16px; }
body.hub-large .control-label { font-size: 16px; min-width: 90px; }
body.hub-large .control-value { font-size: 18px; }
body.hub-large .length-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
body.hub-large .length-slider::-moz-range-thumb { width: 24px; height: 24px; }
body.hub-large .btn-row { gap: 14px; margin-top: 32px; }
body.hub-large .btn { padding: 18px 28px; font-size: 18px; border-radius: 14px; }
body.hub-large .privacy-note { font-size: 14px; margin-top: 32px; }

/* Staff Changes */
body.hub-large .sc-tab { padding: 16px 20px; font-size: 18px; }
body.hub-large .sc-card { padding: 36px; border-radius: 18px; }
body.hub-large .sc-section { font-size: 14px; margin-bottom: 20px; }
body.hub-large .sc-field label { font-size: 16px; margin-bottom: 7px; }
body.hub-large .sc-field label .hint { font-size: 14px; }
body.hub-large .sc-field input,
body.hub-large .sc-field select,
body.hub-large .sc-field textarea { padding: 14px 18px; font-size: 17px; border-radius: 10px; }
body.hub-large .sc-field textarea { min-height: 110px; }
body.hub-large .sc-chips label { font-size: 16px; padding: 9px 16px; border-radius: 8px; }
body.hub-large .sc-btn { padding: 16px 36px; font-size: 19px; border-radius: 10px; }
body.hub-large .sc-feedback { font-size: 17px; padding: 18px 20px; }
body.hub-large .sc-user-option-name { font-size: 17px; }
body.hub-large .sc-user-option-detail { font-size: 14px; }
body.hub-large .sc-selected-user { padding: 14px 18px; font-size: 16px; }

/* KB */
body.hub-large .kb-search input { padding: 16px 20px 16px 48px; font-size: 17px; }
body.hub-large .kb-cat-pill { padding: 8px 18px; font-size: 15px; }
body.hub-large .kb-article-item { padding: 20px 24px; gap: 18px; }
body.hub-large .kb-article-icon { width: 50px; height: 50px; font-size: 24px; }
body.hub-large .kb-article-title { font-size: 18px; }
body.hub-large .kb-article-meta { font-size: 15px; }
body.hub-large .kb-reader { padding: 52px 48px; }
body.hub-large .kb-reader h1 { font-size: 32px; }
body.hub-large .kb-reader-meta { font-size: 15px; }
body.hub-large .kb-reader-body h2 { font-size: 24px; }
body.hub-large .kb-reader-body h3 { font-size: 19px; }
body.hub-large .kb-reader-body p,
body.hub-large .kb-reader-body li { font-size: 17px; line-height: 1.8; }
body.hub-large .kb-reader-body .callout { font-size: 16px; padding: 18px 22px; }
body.hub-large .kb-attachments-title { font-size: 15px; }
body.hub-large .kb-attach-link { padding: 12px 18px; }
body.hub-large .kb-attach-name { font-size: 16px; }
body.hub-large .kb-attach-size { font-size: 14px; }

/* KB Editor */
body.hub-large .editor-container { max-width: 1080px; }
body.hub-large .editor-card { padding: 38px; }
body.hub-large .editor-header h2 { font-size: 24px; }
body.hub-large .editor-header p { font-size: 16px; }
body.hub-large .ed-field label { font-size: 16px; }
body.hub-large .ed-field label .hint { font-size: 14px; }
body.hub-large .ed-field input,
body.hub-large .ed-field select { font-size: 17px; padding: 12px 16px; }
body.hub-large .ed-tenant-chip { font-size: 16px; padding: 8px 18px; }
body.hub-large .ed-add-category input { font-size: 16px; padding: 8px 14px; }
body.hub-large .ed-add-category button { font-size: 14px; padding: 8px 18px; }
body.hub-large .ql-container.ql-snow { font-size: 17px !important; min-height: 400px; }
body.hub-large .ql-editor { font-size: 17px; line-height: 1.8; }
body.hub-large .ed-attach-zone { font-size: 16px; padding: 20px; }
body.hub-large .ed-attach-item { font-size: 16px; padding: 10px 16px; }
body.hub-large .ed-attach-size { font-size: 14px; }
body.hub-large .ed-btn { font-size: 16px; padding: 12px 24px; }
body.hub-large .ed-feedback { font-size: 16px; }
body.hub-large .ed-existing h3 { font-size: 17px; }
body.hub-large .ed-article-row-title { font-size: 16px; }
body.hub-large .ed-article-row-meta { font-size: 14px; }
body.hub-large .ed-row-edit { font-size: 15px; }

/* Headcount */
body.hub-large .hc-container { max-width: 1200px; }
body.hub-large .hc-stat-card { padding: 26px 28px; }
body.hub-large .hc-stat-value { font-size: 42px; }
body.hub-large .hc-stat-label { font-size: 15px; }
body.hub-large .hc-table thead th { font-size: 13px; padding: 16px 20px; }
body.hub-large .hc-table tbody td { font-size: 16px; padding: 14px 20px; }
body.hub-large .hc-table .upn-cell { font-size: 14px; }
body.hub-large .hc-status-badge { font-size: 12px; padding: 3px 10px; }
body.hub-large .hc-toggle-btn { padding: 8px 18px; font-size: 15px; }
body.hub-large .hc-table-title { font-size: 20px; }

/* Directory */
body.hub-large .dir-container { max-width: 960px; }
body.hub-large .dir-search input { padding: 18px 22px 18px 52px; font-size: 19px; border-radius: 14px; }
body.hub-large .dir-search svg { left: 18px; width: 22px; height: 22px; }
body.hub-large .dir-pill { padding: 8px 18px; font-size: 15px; border-radius: 24px; }
body.hub-large .dir-list { border-radius: 18px; }
body.hub-large .dir-user-row { padding: 20px 26px; gap: 18px; }
body.hub-large .dir-avatar { width: 56px; height: 56px; font-size: 18px; border-width: 3px; }
body.hub-large .dir-user-name { font-size: 19px; }
body.hub-large .dir-user-title { font-size: 15px; margin-top: 4px; }
body.hub-large .dir-link { font-size: 14px; padding: 7px 14px; border-radius: 6px; gap: 6px; }
body.hub-large .dir-link svg { width: 16px; height: 16px; }
body.hub-large .dir-expand-arrow { width: 20px; height: 20px; }
body.hub-large .dir-details { padding: 0 26px 22px 100px; gap: 14px; }
body.hub-large .dir-detail { font-size: 15px; gap: 8px; }
body.hub-large .dir-detail svg { width: 16px; height: 16px; }
body.hub-large .dir-detail a { font-size: 15px; }
body.hub-large .dir-oof-badge { font-size: 14px; padding: 5px 14px; }
body.hub-large .dir-count { font-size: 14px; padding: 16px 26px; }
body.hub-large .dir-loading { font-size: 18px; padding: 60px 20px; }

/* Secure Score */
body.hub-large .ss-container { max-width: 1080px; }
body.hub-large .ss-score-card { flex: 0 0 240px; padding: 30px; }
body.hub-large .ss-score-ring { width: 140px; height: 140px; }
body.hub-large .ss-score-ring svg { width: 140px; height: 140px; }
body.hub-large .ss-score-number { font-size: 34px; }
body.hub-large .ss-score-label { font-size: 16px; }
body.hub-large .ss-score-detail { font-size: 14px; }
body.hub-large .ss-section-title { font-size: 16px; }
body.hub-large .ss-trend-chart { height: 150px; }
body.hub-large .ss-cat-card { padding: 20px 22px; }
body.hub-large .ss-cat-name { font-size: 14px; }
body.hub-large .ss-cat-score { font-size: 26px; }
body.hub-large .ss-cat-bar { height: 7px; }
body.hub-large .ss-cat-detail { font-size: 14px; }
body.hub-large .ss-summary-badge { padding: 18px 20px; }
body.hub-large .ss-summary-num { font-size: 30px; }
body.hub-large .ss-summary-label { font-size: 13px; }
body.hub-large .ss-card-header { padding: 20px 26px; }
body.hub-large .ss-card-title { font-size: 19px; }
body.hub-large .ss-card-count { font-size: 14px; }
body.hub-large .ss-control { padding: 18px 26px; gap: 18px; }
body.hub-large .ss-ctrl-dot { width: 12px; height: 12px; margin-top: 6px; }
body.hub-large .ss-ctrl-title { font-size: 17px; }
body.hub-large .ss-ctrl-cat { font-size: 14px; }
body.hub-large .ss-ctrl-pts { font-size: 16px; }
body.hub-large .ss-impact { font-size: 13px; padding: 3px 10px; }
body.hub-large .ss-ctrl-detail { font-size: 15px; padding: 0 26px 18px 56px; }
body.hub-large .ss-detail-tag { font-size: 13px; padding: 3px 10px; }
body.hub-large .ss-toggle-implemented { font-size: 16px; padding: 18px 26px; }
body.hub-large .ss-card-footer { font-size: 14px; padding: 14px 26px; }
body.hub-large .ss-loading { font-size: 18px; }
body.hub-large .ss-disclaimer { font-size: 15px; }

/* Sharing Audit */
body.hub-large .au-container { max-width: 1080px; }
body.hub-large .au-stat { padding: 20px 22px; }
body.hub-large .au-stat-num { font-size: 34px; }
body.hub-large .au-stat-label { font-size: 14px; }
body.hub-large .au-scan-bar { padding: 14px 22px; font-size: 14px; }
body.hub-large .au-rescan-btn { font-size: 14px; padding: 7px 18px; }
body.hub-large .au-tab { padding: 16px 20px; font-size: 16px; }
body.hub-large .au-lib-row { padding: 18px 26px; }
body.hub-large .au-lib-site { font-size: 14px; }
body.hub-large .au-lib-name { font-size: 17px; }
body.hub-large .au-lib-count { font-size: 16px; padding: 5px 14px; }
body.hub-large .au-user-row { padding: 18px 26px; }
body.hub-large .au-user-name { font-size: 17px; }
body.hub-large .au-user-email { font-size: 14px; }
body.hub-large .au-type-badge { font-size: 13px; padding: 4px 10px; }
body.hub-large .au-item-row { padding: 18px 26px; }
body.hub-large .au-item-name { font-size: 17px; }
body.hub-large .au-item-path { font-size: 14px; }
body.hub-large .au-item-meta { font-size: 14px; }
body.hub-large .au-item-icon svg { width: 20px; height: 20px; }
body.hub-large .au-filter-row { padding: 18px 26px; }
body.hub-large .au-filter-btn { font-size: 14px; padding: 7px 16px; }
body.hub-large .au-card-footer { font-size: 14px; padding: 14px 26px; }
body.hub-large .au-empty { font-size: 18px; }
body.hub-large .au-loading { font-size: 18px; }
body.hub-large .au-loading-sub { font-size: 14px; }

/* Who's Out Today */
body.hub-large .wo-container { max-width: 1080px; }
body.hub-large .wo-summary { font-size: 16px; padding: 16px 22px; }
body.hub-large .wo-tile { padding: 26px; border-radius: 16px; }
body.hub-large .wo-avatar { width: 56px; height: 56px; font-size: 18px; }
body.hub-large .wo-tile-name { font-size: 17px; }
body.hub-large .wo-tile-title { font-size: 14px; }
body.hub-large .wo-tile-dept { font-size: 13px; }
body.hub-large .wo-oof-badge { font-size: 13px; }
body.hub-large .wo-oof-msg { font-size: 13px; }
body.hub-large .wo-oof-dates { font-size: 13px; }
body.hub-large .wo-footer { font-size: 14px; }
body.hub-large .wo-loading { font-size: 18px; }

/* Licence Insights */
body.hub-large .li-container { max-width: 1080px; }
body.hub-large .li-stat { padding: 20px 22px; }
body.hub-large .li-stat-num { font-size: 34px; }
body.hub-large .li-stat-label { font-size: 14px; }
body.hub-large .li-tab { padding: 16px 20px; font-size: 16px; }
body.hub-large .li-lic-row { padding: 20px 26px; }
body.hub-large .li-lic-name { font-size: 17px; }
body.hub-large .li-lic-sku { font-size: 13px; }
body.hub-large .li-lic-counts { font-size: 15px; }
body.hub-large .li-lic-right { width: 240px; }
body.hub-large .li-user-row { padding: 18px 26px; }
body.hub-large .li-user-name { font-size: 17px; }
body.hub-large .li-user-email { font-size: 14px; }
body.hub-large .li-user-lic-tag { font-size: 13px; padding: 4px 10px; }
body.hub-large .li-footer { font-size: 14px; }
body.hub-large .li-loading { font-size: 18px; }
body.hub-large .li-lic-users.open { padding: 12px 26px 18px; }
body.hub-large .li-lic-user { padding: 8px 0; }
body.hub-large .li-lic-user-name { font-size: 16px; }
body.hub-large .li-lic-user-email { font-size: 14px; }

/* Quick Request */
body.hub-large .qr-container { max-width: 780px; }

/* Admin */
body.hub-large .adm-tiles-container { max-width: 1200px; }

/* Permissions */
body.hub-large .pm-container { max-width: 1000px; }

/* Pagination */
body.hub-large .hub-paginate-footer { padding: 20px 26px; }
body.hub-large .hub-paginate-count { font-size: 15px; }
body.hub-large .hub-paginate-btn { font-size: 15px; padding: 8px 20px; }

/* Accessibility toggle button */
.hub-a11y-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 9990;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: var(--bg-raised);
  color: var(--text-mid);
  font-size: 17px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  line-height: 1;
}
.hub-a11y-btn:hover { background: var(--bg-tile-hover); color: var(--text); border-color: var(--teal); }
.hub-a11y-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Session timeout warning */
.hub-session-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(245, 166, 35, 0.12);
  border-bottom: 1px solid rgba(245, 166, 35, 0.25);
  backdrop-filter: blur(12px);
  font-size: 14px;
  color: #F5A623;
}
.hub-session-msg { font-weight: 500; }
.hub-session-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  background: #F5A623;
  color: #111;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.hub-session-btn:hover { background: #e09510; }
.hub-update-banner { background: rgba(0,180,180,0.16); border-bottom: 1px solid var(--teal); color: var(--text); }
.hub-update-banner .hub-session-btn { background: var(--teal); color: #041a1a; }
.hub-update-banner .hub-session-btn:hover { background: var(--teal-dark); }


/* ══════════════════════════════════════════════════════════════════════════════
   GAMES (gm-)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Leaderboard on landing ── */
.gm-leaderboard-section { margin-top: 24px; }
.gm-section-title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 16px; }
.gm-lb-header {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 14px 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 0.15s;
}
.gm-lb-header:hover { border-color: var(--teal); }
.gm-lb-header .grid-label { margin-bottom: 0; }
.gm-lb-chevron { font-size: 14px; color: var(--text-dim); }
.gm-leaderboard-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding-top: 16px;
}
.gm-leaderboard-grid.open {
  display: grid;
}
.gm-lb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.gm-lb-game { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--teal); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Game page layout ── */
.gm-app { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; position: relative; z-index: 1; }
.gm-game-layout { display: flex; gap: 24px; align-items: flex-start; }
.gm-game-area { position: relative; flex-shrink: 0; }
.gm-game-area canvas {
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.gm-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 140px; }

/* ── Stat cards ── */
.gm-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}
.gm-stat-label { font-family: 'Inter', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 4px; }
.gm-stat-value { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; color: var(--text); }
.gm-stat-card canvas { display: block; margin: 4px auto 0; border-radius: 4px; }

/* ── Controls hint ── */
.gm-controls-hint {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.gm-controls-hint p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 4px;
  line-height: 1.5;
}
.gm-controls-hint p:last-child { margin-bottom: 0; }

/* ── Overlay ── */
.gm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 20, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  z-index: 10;
}
.gm-overlay-content { text-align: center; padding: 24px; }
.gm-overlay-content h2 { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.gm-overlay-content p { font-size: 14px; color: var(--text-dim); margin: 0 0 20px; }

/* ── Buttons ── */
.gm-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.gm-btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 180, 180, 0.25);
}
.gm-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.gm-btn-primary:active { transform: scale(0.98); }
.gm-btn-sm { font-size: 12px; padding: 6px 14px; }

/* ── Inline leaderboard (on game pages) ── */
.gm-lb-inline { margin-top: 32px; }
.gm-lb-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.gm-lb-list { list-style: none; padding: 0; margin: 0; }
.gm-lb-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.15s;
}
.gm-lb-entry:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.gm-lb-rank { width: 28px; text-align: center; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-dim); }
.gm-lb-name { flex: 1; font-weight: 500; color: var(--text); }
.gm-lb-score { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--teal); font-weight: 500; }

.gm-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.gm-loading { font-size: 13px; color: var(--text-dim); }
.gm-lb-vacant { color: var(--text-dim); font-style: italic; }

/* ── Typing Speed ── */
.gm-typing-container { max-width: 720px; margin: 0 auto; }
.gm-typing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.gm-typing-stats { display: flex; gap: 12px; }
.gm-typing-stats .gm-stat-card { min-width: 80px; }
.gm-typing-duration { display: flex; gap: 6px; }
.gm-duration-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.gm-duration-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.gm-typing-text {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 2;
  color: var(--text-dim);
  max-height: 180px;
  overflow: hidden;
  margin-bottom: 16px;
  word-spacing: 4px;
}
.gm-word { transition: color 0.1s; }
.gm-word-active { color: var(--text); }
.gm-word-done { color: var(--teal); }
.gm-word-missed { color: #E85D75; text-decoration: line-through; }
.gm-char-correct { color: var(--teal); }
.gm-char-wrong { color: #E85D75; background: rgba(232, 93, 117, 0.15); border-radius: 2px; }
.gm-typing-input {
  width: 100%;
  padding: 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  background: var(--bg-field);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.gm-typing-input:focus { border-color: var(--teal); }
.gm-typing-input:disabled { opacity: 0.5; }
.gm-typing-result {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.gm-typing-result h2 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 20px; }
.gm-typing-result-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 20px; flex-wrap: wrap; }
.gm-result-stat { text-align: center; }
.gm-result-num { display: block; font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 700; color: var(--teal); }
.gm-result-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); font-family: 'Inter', sans-serif; }

/* ── Wordle ── */
.gm-wordle-board { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
.gm-wordle-row { display: flex; gap: 6px; }
.gm-wordle-cell {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; color: var(--text);
  border: 2px solid var(--border); border-radius: 6px;
  text-transform: uppercase; transition: background 0.3s, border-color 0.3s;
}
.gm-wordle-filled { border-color: var(--text-dim); }
.gm-wordle-correct { background: #2d8a4e; border-color: #2d8a4e; color: #fff; }
.gm-wordle-present { background: #b59f3b; border-color: #b59f3b; color: #fff; }
.gm-wordle-absent { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); color: var(--text-dim); }
.gm-wordle-msg { text-align: center; font-size: 15px; font-weight: 600; color: var(--teal); min-height: 24px; margin-bottom: 16px; }
.gm-wordle-result { text-align: center; }
.gm-wordle-share { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.gm-wordle-emoji { font-size: 28px; line-height: 1.4; letter-spacing: 2px; margin: 0; font-family: inherit; }
.gm-wordle-summary { font-size: 18px; font-weight: 700; font-family: 'Outfit', sans-serif; color: var(--text); }

.gm-wordle-tally { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.gm-wordle-tally-header { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.gm-wordle-tally-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.gm-wordle-tally-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; }
.gm-wordle-tally-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.gm-wordle-tally-emoji { font-size: 18px; line-height: 1.3; letter-spacing: 1px; margin: 0; font-family: inherit; }
.gm-wordle-tally-score { font-size: 14px; font-weight: 700; font-family: 'Outfit', sans-serif; color: var(--teal); margin-top: 6px; }
.gm-wordle-keyboard { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gm-wordle-kb-row { display: flex; gap: 5px; }
.gm-wordle-key {
  padding: 10px 12px; min-width: 32px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); cursor: pointer; transition: all 0.15s; text-transform: uppercase;
}
.gm-wordle-key:hover { background: var(--bg-tile-hover); }
.gm-wordle-key-wide { padding: 10px 16px; font-size: 12px; }
.gm-wk-correct { background: #2d8a4e; border-color: #2d8a4e; color: #fff; }
.gm-wk-present { background: #b59f3b; border-color: #b59f3b; color: #fff; }
.gm-wk-absent { background: rgba(255,255,255,0.06); border-color: transparent; color: var(--text-dim); }

/* ── Math Sprint ── */
.gm-math-container { max-width: 520px; margin: 0 auto; }
.gm-math-question {
  font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 700;
  text-align: center; color: var(--text); padding: 24px 0 20px;
  min-height: 100px; display: flex; align-items: center; justify-content: center;
}
.gm-math-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.gm-math-choice {
  padding: 16px; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); cursor: pointer; transition: all 0.15s; text-align: center;
}
.gm-math-choice:hover { border-color: var(--teal); background: var(--bg-tile-hover); }
.gm-math-feedback { text-align: center; font-size: 28px; font-weight: 700; min-height: 40px; }


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
  .hero { padding: 32px 20px 4px; }
  .grid-section { padding: 20px 20px 48px; }
  .topbar { padding: 14px 20px; }
  .hero-title { font-size: 22px; }
  .topbar-user .user-name { display: none; }
  .topbar-clocks { gap: 10px; }
  .topbar-tz-time { font-size: 11px; }
  .topbar-tz-label { font-size: 10px; }

  /* Games responsive */
  .gm-game-layout { flex-direction: column; align-items: center; }
  .gm-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: unset; width: 100%; }
  .gm-stat-card { flex: 1; min-width: 80px; }
  .gm-controls-hint { display: none; }
  .gm-wordle-cell { width: 44px; height: 44px; font-size: 18px; }
  .gm-wordle-key { padding: 8px 8px; min-width: 26px; font-size: 11px; }
  .gm-math-question { font-size: 36px; }
  .gm-math-choice { font-size: 18px; padding: 12px; }
  .gm-typing-header { flex-direction: column; align-items: stretch; }
  .gm-typing-text { font-size: 15px; padding: 16px; }
  .gm-typing-input { font-size: 15px; }
  .gm-leaderboard-grid.open { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .card { padding: 28px 20px; }
  .password-field { font-size: 17px; padding: 14px 14px; }
}

/* Permissions — Domain management */
.pm-tenant-domains { color: var(--text-muted); font-size: 0.82rem; }
.pm-domains { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.pm-domain-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.85rem; color: var(--text); font-family: 'Inter', sans-serif; }
.pm-domain-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0 0.15rem; line-height: 1; }
.pm-domain-remove:hover { color: var(--danger); }
.pm-domain-add { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.35rem; }
.pm-domain-input { flex: 1; max-width: 280px; padding: 0.35rem 0.6rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; font-family: 'Inter', sans-serif; }
.pm-domain-input:focus { outline: none; border-color: var(--teal); }
.pm-domain-feedback { font-size: 0.8rem; margin-top: 0.25rem; min-height: 1.2em; }

/* ═══════════════════════════════════════════════════════
   Tickets
   ═══════════════════════════════════════════════════════ */

.tk-container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.tk-loading { text-align: center; padding: 3rem; color: var(--text-muted); }
.tk-error { color: var(--danger, #ef4444); }
.tk-success { color: var(--teal, #0891b2); }
.tk-empty { text-align: center; padding: 3rem; color: var(--text-muted); }

/* Filter bar */
.tk-filters { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tk-filter-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tk-filter-secondary { font-size: 0.85rem; }
.tk-filter-search { margin-left: auto; }
.tk-search-wrap { position: relative; display: inline-flex; align-items: center; }
.tk-search-input { padding: 0.5rem 2rem 0.5rem 0.85rem; background: var(--card-bg); border: 2px solid rgba(255,255,255,0.2); border-radius: 6px; color: var(--text); font-size: 0.88rem; width: 280px; }
.tk-search-input:focus { outline: none; border-color: var(--teal); }
.tk-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.tk-search-clear:hover { color: var(--text); }
.tk-filter-select { padding: 0.35rem 0.6rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.82rem; cursor: pointer; }
.tk-filter-select:focus { outline: none; border-color: var(--teal); }
.tk-filter-select option { background: #1e1e2e; color: #e0e0e0; }
.tk-result-count { color: var(--text-muted); font-size: 0.82rem; margin-left: auto; }

/* Status tabs */
.tk-status-tabs { display: flex; gap: 0.25rem; }
.tk-tab { padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 0.82rem; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.tk-tab:hover { border-color: var(--teal); color: var(--text); }
.tk-tab-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.tk-tab-count { font-size: 0.72rem; margin-left: 0.3rem; opacity: 0.7; }

/* Ticket table */
.tk-table-wrap { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.tk-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
.tk-th { padding: 10px 12px; text-align: left; font-weight: 500; color: var(--text-muted); background: #1a2236; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer; white-space: nowrap; user-select: none; font-size: 0.8rem; }
.tk-th:hover { color: var(--text); }
.tk-th-active { color: var(--teal, #0891b2); }
.tk-tr-even { background: #111827; cursor: pointer; }
.tk-tr-odd { background: #161e2e; cursor: pointer; }
.tk-tr-even:hover, .tk-tr-odd:hover { background: #1e293b; }
.tk-td { padding: 9px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-td-client { color: var(--teal, #0891b2); }
.tk-td-status { overflow: visible; }
.tk-td-subject { color: var(--text); }
.tk-td-muted { color: var(--text-muted); }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.tk-status-new { background: #ef4444; }
.tk-status-with-user { background: #10b981; }
.tk-status-replied { background: #f59e0b; }
.tk-status-closed { background: var(--text-muted); }

/* Pagination */
.tk-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.tk-page-info { font-size: 0.82rem; color: var(--text-muted); }

/* Detail layout */
.tk-detail { display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; }
@media (max-width: 768px) { .tk-detail { grid-template-columns: 1fr; } }
.tk-detail-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* Stats bar */
.tk-stats-bar { display: flex; gap: 1px; border-radius: 8px; overflow: hidden; }
.tk-stat { flex: 1; padding: 0.65rem 1rem; background: var(--card-bg); border: 2px solid rgba(255,255,255,0.2); }
.tk-stat:first-child { border-radius: 8px 0 0 8px; }
.tk-stat:last-child { border-radius: 0 8px 8px 0; }
.tk-stat-label { display: block; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.15rem; }
.tk-stat-value { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text); }

/* Activity log entries (same format as notes) */
.tk-msg-note, .tk-msg-activity { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-left: 3px solid #f59e0b; }
.tk-note-label, .tk-activity-label { font-weight: 500; font-size: 0.72rem; color: #f59e0b; background: rgba(245, 158, 11, 0.15); padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; }
.tk-msg-note .tk-msg-body, .tk-msg-activity .tk-msg-body { background: transparent !important; color: var(--text) !important; padding: 0 !important; }

/* Conversation thread */
.tk-thread { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.5rem 0; }
.tk-msg { padding: 0.85rem 1rem; border-radius: 8px; border: 1px solid var(--border); }
.tk-msg-inbound { background: var(--card-bg); border-left: 3px solid var(--teal, #0891b2); }
.tk-msg-outbound { background: var(--card-bg); border-left: 3px solid var(--text-muted); }
.tk-msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; }
.tk-msg-from { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.tk-msg-time { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }
.tk-msg-cc { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.tk-msg-body { font-size: 0.88rem; line-height: 1.55; color: #1a1a1a; background: #f4f4f5; padding: 0.85rem 1rem; border-radius: 6px; overflow-wrap: break-word; }
.tk-msg-body a { color: #0891b2; }
.tk-msg-body p { margin: 0 0 0.5rem; }
.tk-msg-body img { max-width: 100%; border-radius: 4px; }
.tk-msg-attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.tk-attachment { font-size: 0.78rem; padding: 0.2rem 0.5rem; background: var(--border); border-radius: 4px; color: var(--teal, #0891b2); text-decoration: none; cursor: pointer; }
.tk-attachment:hover { background: rgba(8,145,178,0.15); text-decoration: underline; }

/* Merged tickets */
.tk-merged-list { padding: 0.75rem 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; }
.tk-merged-title { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; }
.tk-merged-item { font-size: 0.85rem; padding: 0.3rem 0; cursor: pointer; color: var(--teal); }
.tk-merged-item:hover { text-decoration: underline; }

/* Composer */
.tk-composer { border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.tk-composer:focus-within { border-color: var(--teal, #0891b2); }
.tk-composer-tabs { display: flex; border-bottom: 2px solid rgba(255,255,255,0.2); }
.tk-composer-tabs .tk-tab { border: none; border-radius: 0; flex: 1; text-align: center; padding: 0.5rem; }
.tk-composer-tabs .tk-tab-active { background: var(--card-bg); }
.tk-composer-input { width: 100%; padding: 0.85rem 1rem; background: var(--card-bg); border: none; color: var(--text); font-family: inherit; font-size: 0.88rem; min-height: 180px; overflow-y: auto; resize: vertical; box-sizing: border-box; outline: none; }
.tk-composer-input:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.tk-composer-input img { max-width: 100%; border-radius: 4px; margin: 0.25rem 0; display: block; }
.tk-composer-actions { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--card-bg); border-top: 2px solid rgba(255,255,255,0.2); }
.tk-composer-feedback { font-size: 0.8rem; }
.tk-composer-recipients { border-top: 2px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; background: var(--card-bg); }
.tk-recipient-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.tk-recipient-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); width: 28px; flex-shrink: 0; }
.tk-pill-input { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0.35rem 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; min-height: 32px; cursor: text; }
.tk-pill-input:focus-within { border-color: var(--teal); }
.tk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 10px; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.35); border-radius: 5px; font-size: 0.88rem; font-weight: 600; color: #f59e0b; font-family: 'Inter', sans-serif; white-space: nowrap; }
.tk-pill-x { background: none; border: none; color: rgba(245,158,11,0.5); font-size: 1rem; cursor: pointer; padding: 0 2px; line-height: 1; }
.tk-pill-x:hover { color: #ef4444; }
.tk-pill-field { flex: 1; min-width: 140px; background: transparent; border: none; color: var(--text); font-size: 0.82rem; font-family: 'Inter', sans-serif; outline: none; padding: 4px 0; }
.tk-toolbar { display: flex; align-items: center; gap: 0.2rem; padding: 0.35rem 0.6rem; border-bottom: 2px solid rgba(255,255,255,0.2); background: var(--card-bg); flex-wrap: wrap; }
.tk-tb-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted); padding: 0.25rem 0.5rem; font-size: 0.8rem; cursor: pointer; font-family: inherit; line-height: 1; }
.tk-tb-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--border); }
.tk-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 0.25rem; }
.tk-attachments-pending { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem; background: var(--card-bg); }
.tk-attachments-pending:empty { display: none; }
.tk-pending-file { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; padding: 0.25rem 0.5rem; background: var(--border); border-radius: 4px; color: var(--text); margin: 0.3rem 0; }
.tk-pending-size { color: var(--text-muted); }
.tk-note-attachments { margin-top: 0.5rem; font-size: 0.82rem; }
.tk-note-attachments a { color: var(--teal, #0891b2); }
.pm-btn-note { background: #f59e0b; color: #fff; border: none; padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.85rem; }
.pm-btn-note:hover { background: #d97706; }

/* Sidebar */
.tk-sidebar { display: flex; flex-direction: column; gap: 0.6rem; }
.tk-sidebar-section { padding: 0.6rem 0.75rem; background: var(--card-bg); border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; }
.tk-sidebar-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.25rem; }
.tk-sidebar-select { width: 100%; padding: 0.35rem 0.5rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.85rem; cursor: pointer; }
.tk-sidebar-select:focus { outline: none; border-color: var(--teal); }
.tk-sidebar-select option { background: #1e1e2e; color: #e0e0e0; }
.tk-sidebar-value { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.tk-sidebar-sub { font-size: 0.8rem; color: var(--text-muted); }
.tk-sidebar-btn { width: 100%; }
.tk-mt { margin-top: 0.5rem; }
.tk-merge-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.tk-cc-chip { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-muted); padding: 0.15rem 0; }
.tk-cc-none { font-style: italic; }
.tk-client-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.tk-tally-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.tk-stat-current { color: var(--teal, #0891b2); }
.tk-pill-locked { pointer-events: none; opacity: 0.85; }
.tk-pill-fixed { cursor: default; }
.tk-client-btn { padding: 0.45rem 1.1rem; border-radius: 6px; border: none; background: #f59e0b; color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.tk-client-btn:hover { background: #d97706; }
.tk-client-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tk-tab-orange { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }

/* Client tickets — orange overrides */
.client-tickets .tk-search-input:focus { border-color: #f59e0b; }
.client-tickets .tk-composer:focus-within { border-color: #f59e0b; }
.client-tickets .tk-th-active { color: #f59e0b; }
.client-tickets .tk-pill-input:focus-within { border-color: #f59e0b; }
.client-tickets .qr-browse-btn { color: #f59e0b; }
.client-tickets .qr-attachments-zone.qr-drag-over { border-color: #f59e0b; background: rgba(245,158,11,0.04); color: #f59e0b; }
.client-tickets .qr-subject:focus { border-color: #f59e0b; }
.client-tickets .qr-editor:focus { border-color: #f59e0b; }

/* ── Tickets (tickets/ — staging successor to Quick Request) ── */
.tix-history { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 8px; }
.tix-history-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--text-mid); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 0; cursor: pointer; }
.tix-history-toggle:hover { color: var(--text); }
.tix-history-toggle .tix-chev { transition: transform 0.2s; }
.tix-history-toggle.tix-open .tix-chev { transform: rotate(180deg); }
.tix-history-count { background: rgba(255,255,255,0.08); color: var(--text-mid); font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.tix-empty { color: var(--text-dim); font-size: 14px; padding: 12px 0 20px; }
.tix-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: clip; }
.tix-item.tix-open { border-color: var(--border-hover); }
.tix-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.tix-wide .tix-row { display: grid; grid-template-columns: 92px 150px minmax(0, 1fr) auto auto; align-items: center; }
.tix-wide .tix-row .tix-status { text-align: center; }
.tix-wide .tix-row .badge { justify-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.tix-row:hover { background: var(--bg-tile-hover); }
.tix-row .tix-chev { color: var(--text-dim); flex-shrink: 0; transition: transform 0.2s; }
.tix-item.tix-open .tix-row .tix-chev { transform: rotate(180deg); }
.tix-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; flex-shrink: 0; }
.tix-status-open { background: rgba(0,180,180,0.15); color: var(--teal); }
.tix-status-closed { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.tix-subject { flex: 1; min-width: 0; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tix-user { color: var(--text); }
.tix-status-scheduled { background: rgba(167,139,250,0.14); color: #a78bfa; }
.tix-popout { display: inline-flex; align-items: center; color: var(--text-dim); padding: 4px; border-radius: 6px; flex-shrink: 0; }
.tix-popout:hover { color: var(--teal); background: rgba(0,180,180,0.10); }
.tix-meta { font-size: 12px; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tix-thread { border-top: 1px solid var(--border); padding: 14px 16px; }
.tix-msg { margin-bottom: 12px; border-radius: 8px; padding: 12px 14px; border: 1px solid var(--border); }
.tix-msg:last-child { margin-bottom: 0; }
/* Three voices, three colours: client = yellow, Jinba = teal, private note = orange (dashed). Each carries a solid left rail so the colour reads even on a long thread. */
.tix-msg-user { background: rgba(255,216,77,0.09); border-color: rgba(255,216,77,0.35); border-left: 4px solid #FFD84D; }
.tix-msg-user .tix-msg-author { color: #FFD84D; }
.tix-msg-jinba { background: rgba(0,180,180,0.06); border-color: rgba(0,180,180,0.25); border-left: 4px solid var(--teal); }
.tix-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tix-msg-author { font-size: 12px; font-weight: 700; color: var(--text-mid); }
.tix-msg-jinba .tix-msg-author { color: var(--teal); }
.tix-msg-time { font-size: 11px; color: var(--text-dim); }
.tix-msg-body { font-size: 14px; line-height: 1.55; color: var(--text); word-break: break-word; }
.tix-msg-system { font-size: 12px; color: var(--text-dim); text-align: center; padding: 4px 0 12px; }
.tix-thread-actions { display: flex; justify-content: flex-end; padding-top: 12px; }
.tix-inline-img { max-width: 100%; height: auto; border-radius: 6px; }
.tix-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tix-hidden-note { margin-top: 8px; }
.tix-hidden-btn { font: inherit; font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; border: 1px dashed var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.tix-hidden-btn:hover { color: var(--teal); border-color: var(--teal); }
.tix-light .tix-hidden-btn { color: #5c6470; border-color: #c9ccd2; }
.tix-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--teal); text-decoration: none; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised); max-width: 100%; }
.tix-file:hover { border-color: var(--teal); }
.tix-file-size { font-weight: 400; color: var(--text-dim); }
.tix-msg-body img { max-width: 100%; height: auto; border-radius: 6px; }
/* Quoted chains never thread: every level's indent and rail is flattened, so a
   reply reads as sequential text at full width even in the original view. */
.tix-msg-body blockquote,
.tix-msg-body [style*="border-left"],
.tix-msg-body [style*="margin-left"],
.tix-msg-body [style*="padding-left"],
.tix-msg-body [style*="margin: 0 0 0"],
.tix-msg-body [style*="margin:0 0 0"] { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
.tix-msg-body blockquote { margin: 8px 0 !important; padding: 0 !important; }
.tix-msg-body div, .tix-msg-body p, .tix-msg-body span { max-width: 100% !important; width: auto !important; }
/* Internal tickets: full-width frame, and a light surface for client email HTML */
.pm-container.tix-wide { max-width: var(--hub-page-width); width: 100%; min-width: 0; }
/* Wide Internal pages (Devices, Licencing): the same frame as Internal tickets
   by default; large-text mode (which zooms content 1.25x) lifts the cap so the
   bigger text gets the whole window instead of a narrower column. */
.pm-container.pm-wide { max-width: var(--hub-page-width); width: 100%; min-width: 0; }
body.hub-large .pm-container.pm-wide { max-width: none; padding-inline: 24px; }
.tix-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tix-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tix-head-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tix-head-who { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.35; min-width: 0; }
.tix-who-name { font-size: 13px; font-weight: 600; color: var(--text); }
.tix-who-email { font-size: 12px; color: var(--text-mid); overflow-wrap: anywhere; }
.tix-who-when { font-size: 11px; color: var(--text-dim); }
.tix-client-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tix-client-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.78rem; padding: 5px 8px; font-family: 'Inter', sans-serif; max-width: 240px; }
.tix-client-select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.tix-client-select option { background: #151929; color: #e0e2ef; }
.tix-origin { font-size: 11px; color: var(--text-dim); font-style: italic; }
.tix-search { margin-left: auto; min-width: 260px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 13px; padding: 6px 10px; }
.tix-search:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.tix-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.tix-pager-info { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tix-pager .tc-filter-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 640px) { .tix-search { margin-left: 0; min-width: 0; width: 100%; } }
.tix-thread-msgs { margin-top: 16px; }
.tix-light .tix-msg { background: #f4f5f7; border-color: #d9dce1; }
.tix-light .tix-msg-user { background: #fff9db; border-color: #e9d27a; border-left-color: #e6c200; }
.tix-light .tix-msg-user .tix-msg-author { color: #8a6d00; }
.tix-light .tix-msg-jinba { background: #e8f7f7; border-color: #9fd9d9; }
.tix-light .tix-note { background: #fff1f1; border-color: #e05252; }
.tix-light .tix-note-label { color: #b42323; }
.tix-light .tix-msg-body { background: #ffffff; color: #1a1a1a; padding: 12px 14px; border-radius: 6px; }
.tix-light .tix-msg-body a { color: #0b6e6e; }
.tix-light .tix-msg-author, .tix-light .tix-note-label { color: #1a1a1a; }
.tix-light .tix-msg-jinba .tix-msg-author { color: #0b8a8a; }
.tix-light .tix-msg-time { color: #5c6470; }
.tix-light .tix-msg-system { color: #5c6470; }
.tix-light .tix-file { background: #ffffff; border-color: #d9dce1; color: #0b6e6e; }

/* ── Devices (devices/) ── */
/* Kept as a safety net for very narrow viewports; the table itself is built
   to fit — every cell wraps rather than forcing the page sideways. */
.dv-table-scroll { overflow-x: auto; }
.dv-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.dv-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mid); padding: 10px 10px; border-bottom: 1px solid var(--border); }
.dv-table td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.dv-table th, .dv-table td { overflow-wrap: anywhere; word-break: normal; }
.dv-table tbody tr:last-child td { border-bottom: none; }
.dv-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }
.dv-table tbody tr:hover { background: rgba(255,255,255,0.05); }
.dv-th-sort { cursor: pointer; user-select: none; }
.dv-th-sort:hover { color: var(--text); }
.dv-sort-arrow { display: inline-block; width: 12px; font-size: 9px; color: var(--teal); margin-left: 3px; }
.dv-num { text-align: right; font-variant-numeric: tabular-nums; }
.dv-host { font-weight: 600; }
.dv-upn { display: block; font-size: 11px; color: var(--text-dim); }
.dv-loan { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3); padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.dv-serial { font-family: 'DM Mono', monospace; font-size: 12px; }
.dv-cpu { }
.dv-seen { color: var(--text-dim); font-size: 12px; }
.dv-dim { color: var(--text-dim); }
.dv-empty { text-align: center; color: var(--text-dim); padding: 24px 0; }
/* 8 columns on the client view: hostname, user, serial, model, cpu, ram, storage, seen */
.dv-table col.dv-w-host { width: 14%; }
.dv-table col.dv-w-user { width: 17%; }
.dv-table col.dv-w-serial { width: 11%; }
.dv-table col.dv-w-model { width: 21%; }
.dv-table col.dv-w-cpu { width: 13%; }
.dv-table col.dv-w-num { width: 8%; }
.dv-table col.dv-w-seen { width: 10%; }
.dv-table col.dv-w-notes { width: 18%; }
.dv-table col.dv-w-loan { width: 15%; }
.dv-table col.dv-w-del { width: 4%; }
/* Not seen in 2+ months: present but unmistakably faded */
/* On loan from Jinba — same treatment in the client and admin tables, and
   sorted to the top by devDecorate(). td rather than tr so it paints over
   the zebra stripe. */
.dv-loan-row td { background: rgba(245,166,35,0.13); }
.dv-loan-row:hover td { background: rgba(245,166,35,0.19); }
.dv-loan-row td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.dv-stale td { opacity: 0.38; }
.dv-stale .dv-seen { color: var(--orange); opacity: 1; }

/* Devices held by Jinba — expandable, mirrors the tickets history toggle */
.dv-held { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 8px; }
.dv-held-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--text-mid); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 0; cursor: pointer; }
.dv-held-toggle:hover { color: var(--text); }
.dv-held-toggle .dv-chev { transition: transform 0.2s; }
.dv-held-toggle.dv-open .dv-chev { transform: rotate(180deg); }
.dv-held-count { background: rgba(255,255,255,0.08); color: var(--text-mid); font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.dv-empty-note { color: var(--text-dim); font-size: 14px; padding: 12px 0 20px; }

/* Devices — staff management (admin/devices/) */
.adv-picker { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.adv-picker .qr-label { margin-bottom: 6px; }
.adv-select { min-width: 320px; max-width: 100%; }
.adv-heading, .adv-held-head { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mid); padding: 12px 0; }
.adv-held-head { margin-top: 28px; border-top: 1px solid var(--border); }
/* First block on the page needs no separating rule above it */
.adv-held-head.adv-held-first { margin-top: 0; border-top: none; padding-top: 0; }
.adv-heading { margin-top: 28px; border-top: 1px solid var(--border); }
.adv-held-head span:first-child { margin-right: auto; }
.adv-save { margin: 0; padding: 7px 16px; font-size: 13px; width: auto; flex: none; white-space: nowrap; }
.adv-held-head { flex-wrap: nowrap; }                                        /* title and both buttons on one line */
.adv-held-head span:first-child, .adv-held-head .tc-filter-btn { white-space: nowrap; }
.adv-held-head .tc-filter-btn { flex: none; }
.adv-save.adv-unsaved { box-shadow: 0 0 0 2px rgba(245,166,35,0.5); }
.adv-loan-col { text-align: right; }   /* toggle (and its note) sit against the right edge of the table */
/* iOS-style toggle. The native checkbox stays in the DOM — hidden but
   focusable — so keyboard, screen readers and the existing onchange handler
   all keep working; the track and knob are drawn from the sibling span. */
.adv-switch { display: inline-flex; align-items: center; cursor: pointer; }
.adv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adv-toggle { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,0.16); border: 1px solid var(--border); transition: background 0.2s ease; }
.adv-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: transform 0.2s ease; }
.adv-switch input:checked + .adv-toggle { background: var(--orange); border-color: var(--orange); }
.adv-switch input:checked + .adv-toggle::after { transform: translateX(16px); }
.adv-switch input:focus-visible + .adv-toggle { box-shadow: 0 0 0 3px rgba(245,166,35,0.45); }
.adv-switch:hover .adv-toggle { border-color: var(--border-hover); }
@media (prefers-reduced-motion: reduce) {
  .adv-toggle, .adv-toggle::after { transition: none; }
}
.adv-loan-note { display: block; margin-top: 4px; width: 100%; background: var(--bg-field); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; padding: 3px 6px; }
.adv-noserial { font-size: 12px; font-style: italic; }
.adv-in { width: 100%; background: var(--bg-field); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; padding: 5px 7px; }
.adv-in:focus { outline: none; border-color: var(--border-focus); }
.adv-in-mono { font-family: 'DM Mono', monospace; font-size: 12px; }
.adv-in-num { text-align: right; max-width: 90px; }
.adv-del { background: none; border: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.adv-del:hover { color: #ef4444; }
.adv-held-table td { padding: 6px 8px; }
.adv-held-empty { padding-top: 0; }
/* Landing view: the note/date line beneath a loan row. */
.adv-loan-sub td { padding-top: 0; border-top: none; font-size: 12px; }

/* Admin side (admin/tickets/) */
.tix-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-dim); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tix-note { background: rgba(239,68,68,0.07); border: 2px dashed rgba(239,68,68,0.75); border-left: 4px solid #ef4444; }
.tix-note-label { font-size: 12px; font-weight: 700; color: #ff7b6b; }
/* The reply box stays pinned to the top of the viewport while the thread scrolls beneath it. */
.tix-compose { position: sticky; top: 0; z-index: 5; margin-top: 14px; padding: 14px 0 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-card); box-shadow: 0 10px 18px -12px rgba(0,0,0,0.6); }
.tix-compose-tabs { margin-bottom: 10px; }
.tix-recips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.tix-recip-row { display: flex; align-items: center; gap: 8px; }
.tix-recip-label { width: 30px; flex-shrink: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tix-recip-to { color: var(--text-mid); overflow-wrap: anywhere; }
.tix-recip-toggles { margin-left: auto; display: flex; gap: 4px; }
.tix-recip-toggle { background: none; border: 0; color: var(--teal); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.tix-recip-toggle:hover, .tix-recip-toggle:focus-visible { background: rgba(0,180,180,0.10); outline: none; }
.tix-recip-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font: inherit; font-size: 13px; padding: 6px 10px; }
.tix-recip-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 0; }
.tix-msg-cc { font-size: 12px; color: var(--text-dim); margin: -2px 0 8px; overflow-wrap: anywhere; }
.tix-compose-editor { min-height: 90px; }
.tix-compose-editor.tix-compose-note { border-color: rgba(245,166,35,0.35); }
.tix-compose-send { margin-top: 0; width: 25%; min-width: 140px; }
.tix-compose-note { border: 2px dashed rgba(239,68,68,0.75) !important; background: rgba(239,68,68,0.05); }
.tix-compose-send.tix-send-note { background: #ef4444; color: #fff; }
.tix-compose-send.tix-send-note:hover { background: #d63b3b; }
.tix-compose .tix-thread-actions { justify-content: flex-start; }

.tk-fwd-success { color: #f59e0b !important; }

/* Shared Mailboxes — member rows (extends pm- system) */
.sm-member-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sm-member-row:last-child { border-bottom: none; }
.sm-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sm-status-active { background: #10b981; }
.sm-status-disabled { background: #ef4444; }
.sm-member-info { flex: 1; min-width: 0; }
.sm-member-perms { display: flex; gap: 4px; flex-shrink: 0; }
.sm-mailbox-section { padding-bottom: 0; }
.sm-mailbox-bar { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.4rem 0; border-radius: 4px; transition: opacity 0.15s; }
.sm-mailbox-bar:hover { opacity: 0.8; }
.sm-mailbox-members { display: none; padding: 0.5rem 0 0.5rem 1rem; border-left: 2px solid rgba(255,255,255,0.06); margin-top: 0.4rem; }
.sm-mailbox-members.open { display: block; }

/* Admin Licence Insights */
.ali-table { margin-top: 0.5rem; }
.ali-header { display: flex; align-items: center; padding: 6px 0 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ali-row { display: flex; align-items: center; padding: 8px 0 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
/* Licences still assigned to blocked accounts. Red rather than the orange
   used for money, so an omission reads differently from a total. Declared
   after .pm-tenant-scoped so it wins the colour on the tenant row. */
.ali-flag-disabled { color: #ef4444; font-weight: 700; }
.ali-row-disabled { background: rgba(239,68,68,0.05); box-shadow: inset 3px 0 0 #ef4444; }
.ali-row:hover { background: rgba(255,255,255,0.02); }
.ali-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ali-col-num { width: 80px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ali-col-num.ali-col-price { width: 120px; }
.ali-col-hist { color: var(--text-muted); }
.ali-lic-name { display: block; font-weight: 500; }
.ali-lic-sku { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
.ali-billing-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ali-billing-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.ali-billing-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.82rem; padding: 6px 10px; flex: 1; font-family: 'Inter', sans-serif; }
.ali-billing-input::placeholder { color: var(--text-muted); }
.ali-export-btn { background: rgba(0,180,180,0.15); border: 1px solid rgba(0,180,180,0.3); border-radius: 6px; color: #00B4B4; font-size: 0.78rem; padding: 6px 14px; cursor: pointer; white-space: nowrap; font-family: 'Inter', sans-serif; transition: all 0.15s; }
.ali-export-btn:hover { background: rgba(0,180,180,0.25); }
.ali-terms-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.78rem; padding: 6px 10px; font-family: 'Inter', sans-serif; cursor: pointer; }
.ali-terms-select option { background: #1a1d2e; color: #e8eaf0; }
.ali-price-wrap { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); justify-content: flex-end; width: 100%; }
.ali-price-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: var(--text); font-size: 0.82rem; padding: 4px 6px; width: 65px; text-align: right; font-family: 'Inter', sans-serif; }
.ali-price-input:focus { outline: none; border-color: rgba(0,180,180,0.4); }
.ali-pricing-info { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; }
.ali-ov-lic { border-bottom: 1px solid rgba(255,255,255,0.04); }
.ali-ov-lic:last-child { border-bottom: none; }
.ali-ov-lic-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 8px 12px; cursor: pointer; transition: opacity 0.15s; }
.ali-ov-lic-row:hover { opacity: 0.8; }
.ali-ov-lic-name { font-size: 0.85rem; font-weight: 500; }
.ali-ov-lic-count { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.ali-ov-users { display: none; padding: 0 0 8px 1rem; border-left: 2px solid rgba(255,255,255,0.06); margin-left: 4px; }
.ali-ov-users.open { display: block; }
.ali-ov-user { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.8rem; }
.ali-ov-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ali-dot-green { background: #10b981; }
.ali-dot-red { background: #ef4444; }
.ali-ov-user-name { font-weight: 500; }
.ali-ov-user-email { color: var(--text-muted); }
.ali-ov-user-disabled { font-size: 0.7rem; color: #ef4444; font-weight: 600; margin-left: auto; }
.ali-ov-loading { font-size: 0.8rem; color: var(--text-muted); padding: 6px 0; }

/* Server Log */
/* ── Server Console (admin/server-log) ──
   Composed entirely from the hub's shared tokens and scales: cards are
   --bg-card / --border / var(--radius) with 20px padding, big numbers are the
   32px/700 Inter stat scale (see .hc-stat-value), labels are the 12px/600
   uppercase stat-label scale, section headers the 13px/700 uppercase style
   (see .ss-section-title). DM Mono appears only for raw log text. */
.slog-time { flex-shrink: 0; color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.slog-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.slog-critical { background: rgba(239,68,68,0.2); color: #ef4444; }
/* Client-side faults reported by js-error.php — real, but not server-fatal. */
.slog-browser { background: rgba(245,166,35,0.15); color: var(--orange); }
.slog-cat { font-size: 12px; color: var(--text-mid); background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.slog-updated { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Primary gauges — same card and type scale as the stat cards elsewhere */
.slog-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.slog-gauge { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; text-align: center; transition: border-color 0.3s; }
.slog-gauge-label { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.slog-gauge-value { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.slog-gauge-unit { font-size: 16px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
.slog-gauge-sub { font-size: 12px; color: var(--text-dim); min-height: 1em; margin-bottom: 12px; }
.slog-gauge-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.slog-gauge-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease, background 0.3s; }
.slog-tone-ok .slog-gauge-fill { background: var(--teal); }
.slog-tone-warn { border-color: rgba(245,166,35,0.35); }
.slog-tone-warn .slog-gauge-fill { background: var(--orange); }
.slog-tone-warn .slog-gauge-value { color: var(--orange); }
.slog-tone-danger { border-color: rgba(239,68,68,0.45); }
.slog-tone-danger .slog-gauge-fill { background: #ef4444; }
.slog-tone-danger .slog-gauge-value { color: #ef4444; }

/* Secondary console tiles */
.slog-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.slog-mini { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.slog-mini-label { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.slog-mini-value { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.slog-mini-svc { grid-column: span 2; }
.slog-svc { display: inline-block; font-size: 12px; padding: 1px 8px 1px 18px; border-radius: 10px; margin: 0 4px 2px 0; position: relative; }
.slog-svc::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; }
.slog-svc-up { background: rgba(16,185,129,0.1); color: #34d399; }
.slog-svc-up::before { background: #34d399; }
.slog-svc-down { background: rgba(239,68,68,0.15); color: #ef4444; font-weight: 700; }
.slog-svc-down::before { background: #ef4444; }

/* History */
.slog-history-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
.slog-h2 { font-size: 13px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.slog-range { margin-bottom: 0; }
.slog-collecting { font-size: 12px; color: var(--text-dim); }
.slog-charts { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
.slog-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.slog-chart-title { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.slog-chart-wrap { position: relative; height: 240px; }

/* Fatal error rows */
.slog-fatal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; }
.slog-fatal:hover { border-color: var(--border-hover); }
.slog-fatal-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.slog-fatal-heading { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.slog-fatal-count { font-size: 12px; font-weight: 700; color: #ef4444; background: rgba(239,68,68,0.12); padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.slog-fatal-chev { color: var(--text-dim); flex-shrink: 0; }
.slog-fatal-raw { display: none; padding: 12px 16px; border-top: 1px solid var(--border); font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-mid); word-break: break-all; white-space: pre-wrap; }
.slog-fatal-open { display: block; }
.slog-health { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; font-size: 14px; line-height: 1.6; }
.slog-health h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.slog-health h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mid); margin: 16px 0 6px; }
.slog-health ul { margin: 6px 0; padding-left: 20px; }
.slog-health li { margin-bottom: 5px; }
.slog-health code { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-mid); }
/* Nightly review — collapsed rows, today first, a fortnight below */
.slog-review { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.slog-review:hover { border-color: var(--border-hover); }
.slog-review-today { border-color: var(--teal); }
.slog-review-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.slog-review-row::-webkit-details-marker { display: none; }
.slog-review-date { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
.slog-review-headline { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.slog-review-ok { color: var(--text); }
.slog-review-note { color: #F5A623; }
.slog-review[open] .slog-fatal-chev { transform: rotate(180deg); }
.slog-review-body.slog-health { border: none; border-top: 1px solid var(--border); border-radius: 0; }
.slog-review-past-head { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 8px; }
.slog-allclear { padding: 20px 22px; border-radius: var(--radius); background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15); color: #34d399; font-size: 14px; }

@media (max-width: 800px) {
  .slog-gauges { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { .ali-col-hist { display: none; } }

/* Newsletter */
.nl-compose { max-width: 760px; }
.nl-label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 1.2rem 0 0.4rem; }
.nl-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.9rem; padding: 9px 12px; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.nl-input::placeholder { color: var(--text-muted); }
.nl-textarea { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.82rem; padding: 9px 12px; font-family: 'Monaco', 'Courier New', monospace; box-sizing: border-box; resize: vertical; }
#nlEditor { background: #ffffff; border-radius: 0 0 6px 6px; color: #333; }
.ql-toolbar.ql-snow { background: rgba(255,255,255,0.9); border-radius: 6px 6px 0 0; border-color: rgba(255,255,255,0.1); }
.ql-container.ql-snow { border-color: rgba(255,255,255,0.1); }
.ql-container.ql-snow .ql-editor { min-height: 280px; resize: vertical; overflow-y: auto; }
.ql-container.ql-snow .ql-editor img { max-width: 100%; height: auto; }
.ql-container.ql-snow .ql-editor pre.ql-syntax { background: #1e2230; color: #e8eaf0; border-radius: 6px; padding: 14px 16px; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.82rem; overflow-x: auto; }
.nl-recipients { margin-top: 0.4rem; }
.nl-all-toggle { display: inline-block; font-size: 0.82rem; font-weight: 500; padding: 7px 16px; margin-bottom: 0.8rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.nl-all-toggle:hover { background: rgba(255,255,255,0.07); }
.nl-all-toggle.active { background: rgba(0,180,180,0.15); border-color: rgba(0,180,180,0.4); color: #00B4B4; }
.nl-tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; transition: opacity 0.15s; }
.nl-tenant-card { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; cursor: pointer; transition: all 0.15s; user-select: none; }
.nl-tenant-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.nl-tenant-card.selected { background: rgba(0,180,180,0.15); border-color: rgba(0,180,180,0.5); }
.nl-tenant-card.selected .nl-tenant-card-name { color: #00B4B4; }
.nl-tenant-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nl-tenant-count { font-size: 0.72rem; color: var(--text-muted); background: rgba(255,255,255,0.08); padding: 1px 7px; border-radius: 10px; flex-shrink: 0; }
.nl-tenant-card.selected .nl-tenant-count { background: rgba(0,180,180,0.25); color: #00B4B4; }
.nl-recipient-count { margin-top: 0.8rem; font-size: 0.85rem; color: var(--text); padding: 10px 14px; background: rgba(0,180,180,0.08); border: 1px solid rgba(0,180,180,0.2); border-radius: 6px; }
.nl-actions { display: flex; gap: 10px; margin-top: 1.4rem; justify-content: flex-end; }
.nl-btn { border-radius: 6px; font-size: 0.85rem; padding: 9px 22px; cursor: pointer; font-family: 'Inter', sans-serif; border: 1px solid transparent; transition: all 0.15s; }
.nl-btn-primary { background: rgba(0,180,180,0.15); border-color: rgba(0,180,180,0.3); color: #00B4B4; }
.nl-btn-primary:hover { background: rgba(0,180,180,0.25); }
.nl-btn-secondary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text-muted); }
.nl-btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.nl-draft-row, .nl-campaign-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.nl-draft-info, .nl-campaign-info { flex: 1; min-width: 0; cursor: pointer; }
.nl-draft-subject, .nl-campaign-subject { font-weight: 500; font-size: 0.9rem; }
.nl-draft-meta, .nl-campaign-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.nl-draft-delete, .nl-optout-remove { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: 5px; color: #ef4444; font-size: 0.75rem; padding: 5px 12px; cursor: pointer; font-family: 'Inter', sans-serif; }
.nl-draft-delete:hover, .nl-optout-remove:hover { background: rgba(239,68,68,0.2); }
.nl-campaign-status { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border: 1px solid; border-radius: 4px; }
.nl-optout-list { margin-top: 0.5rem; }
.nl-optout-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.85rem; }
.nl-optout-email { font-family: 'Monaco', monospace; font-size: 0.8rem; }
.nl-detail-back { font-size: 0.82rem; color: #00B4B4; cursor: pointer; margin-bottom: 1rem; display: inline-block; }
.nl-detail-back:hover { text-decoration: underline; }
.nl-detail-section { margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nl-detail-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.5rem; }
.nl-detail-subject { font-size: 1.05rem; font-weight: 600; }
.nl-detail-sentby { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.nl-detail-preview { background: #ffffff; color: #333; border-radius: 8px; padding: 24px; max-width: 600px; line-height: 1.6; overflow: hidden; }
.nl-detail-preview img { max-width: 100%; height: auto; }
.nl-detail-preview pre.ql-syntax, .nl-detail-preview pre { background: #1e2230; color: #e8eaf0; border-radius: 6px; padding: 14px 16px; font-family: 'Monaco', monospace; font-size: 0.82rem; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
.nl-detail-stats { display: flex; gap: 16px; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600; }
.nl-detail-recipients { max-height: 400px; overflow-y: auto; }
.nl-detail-recipient { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
.nl-detail-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Newsletter status colours ── */
/* Replaces the inline style="color:..." the JS used to emit (see hard rule 3).
   Delivery states share one palette across the campaign list, the detail stats
   and the recipient dots. */
.nl-status-queued    { color: #5aa8f2; border-color: #5aa8f2; }
.nl-status-sending   { color: var(--orange); border-color: var(--orange); }
.nl-status-completed { color: #5ae69c; border-color: #5ae69c; }
.nl-status-unknown   { color: var(--text-dim); border-color: var(--text-dim); }

.nl-detail-stat { display: inline-flex; align-items: center; gap: 6px; }
.nl-detail-stat-sent    { color: #5ae69c; }
.nl-detail-stat-failed  { color: #e74c3c; }
.nl-detail-stat-pending { color: #5aa8f2; }

.nl-detail-dot-sent    { background: #5ae69c; }
.nl-detail-dot-failed  { background: #e74c3c; }
.nl-detail-dot-pending { background: #5aa8f2; }

/* Tenant grid is inert while "All Tenants" is on. */
.nl-tenant-grid.nl-grid-locked { opacity: 0.4; pointer-events: none; }

/* Transient "Saved ✓" confirmation on a button. */
.nl-btn-flash { background: rgba(90,230,156,0.25); }

.nl-detail-label-spaced { margin-top: 1rem; }

/* Test send row — address field beside its button. */
.nl-test-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nl-test-row .nl-test-email { flex: 1; min-width: 220px; width: auto; }
.nl-test-row .nl-btn { white-space: nowrap; }
.nl-test-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.nl-detail-rname { font-weight: 500; min-width: 140px; }
.nl-detail-remail { color: var(--text-muted); flex: 1; }
.nl-detail-rstatus { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

/* ── Staff Changes: search-to-add pickers (shared mailboxes, distribution lists) ── */

.sc-picker { position: relative; }

/* Results list — display is toggled inline by JS, so do not set it here */
.sc-picker-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.sc-picker-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}
.sc-picker-result:last-child { border-bottom: none; }
.sc-picker-result:hover { background: rgba(0,180,180,0.08); }

.sc-picker-result-name  { font-size: 14px; font-weight: 500; color: var(--text); }
.sc-picker-result-email { font-size: 12px; color: var(--text-dim); font-family: 'Inter', sans-serif; word-break: break-all; }

/* Selected chips */
.sc-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  max-width: 100%;
}
.sc-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  font-size: 13px;
  line-height: 1;
  border: 1.5px solid var(--teal);
  border-radius: 20px;
  background: rgba(0,180,180,0.08);
  color: var(--teal);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sc-picker-chip-x {
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--teal);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.12s;
}
.sc-picker-chip-x:hover { opacity: 1; }

body.hub-large .sc-picker-result-name  { font-size: 17px; }
body.hub-large .sc-picker-result-email { font-size: 14px; }
body.hub-large .sc-picker-chip { font-size: 16px; padding: 9px 12px 9px 16px; }

/* ── Moved out of an inline <style> block: games/2048 ── */
.g-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:0 auto 20px;background:var(--bg-raised);padding:12px;border-radius:12px;}
.g-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;border-radius:8px;font-size:22px;background:rgba(255,255,255,0.04);color:var(--text);transition:all 0.1s;}
.g-cell[data-val="2"]{background:#264d40;color:#5ae69c;}
.g-cell[data-val="4"]{background:#2d5a3e;color:#5ae69c;}
.g-cell[data-val="8"]{background:#6b4c2a;color:#F5A623;}
.g-cell[data-val="16"]{background:#7a4a1f;color:#F5A623;}
.g-cell[data-val="32"]{background:#7a3320;color:#ff7043;}
.g-cell[data-val="64"]{background:#8b2a1a;color:#ff5252;}
.g-cell[data-val="128"]{background:#5c4b8a;color:#b39ddb;font-size:20px;}
.g-cell[data-val="256"]{background:#4a3d8a;color:#b39ddb;font-size:20px;}
.g-cell[data-val="512"]{background:#3a2f8a;color:#ce93d8;font-size:20px;}
.g-cell[data-val="1024"]{background:#2a1f7a;color:#e1bee7;font-size:17px;}
.g-cell[data-val="2048"]{background:#1a0f6a;color:#f3e5f5;font-size:17px;}
.g-score{text-align:center;font-family:'Outfit',sans-serif;font-size:28px;font-weight:700;color:var(--teal);margin-bottom:16px;}
.g-over{text-align:center;padding:16px;font-size:15px;font-weight:600;color:var(--text-mid);}
.g-hint{text-align:center;font-size:11px;color:var(--text-dim);margin-bottom:12px;}

/* ── Moved out of an inline <style> block: games/memory ── */
.mm-bar{display:flex;justify-content:space-between;align-items:center;max-width:420px;margin:0 auto 12px;font-family:'DM Mono',monospace;font-size:14px;color:var(--text-mid);}
.mm-bar span{background:var(--bg-raised);padding:6px 14px;border-radius:6px;border:1px solid var(--border);}
.mm-board{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:10px;width:100%;max-width:420px;margin:0 auto 16px;box-sizing:border-box;}
.mm-card{aspect-ratio:1;min-width:0;min-height:60px;display:flex;align-items:center;justify-content:center;font-size:32px;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;cursor:pointer;user-select:none;transition:all 0.2s;}
.mm-card:hover{border-color:var(--teal);}
.mm-card.flipped{background:rgba(0,180,180,0.08);border-color:var(--teal);}
.mm-card.matched{background:rgba(90,230,156,0.08);border-color:rgba(90,230,156,0.3);cursor:default;}
.mm-card .mm-face{display:none;}
.mm-card.flipped .mm-face,.mm-card.matched .mm-face{display:block;}
.mm-msg{text-align:center;font-size:15px;font-weight:600;color:var(--teal);min-height:24px;margin-bottom:12px;}

/* ── Moved out of an inline <style> block: games/minesweeper ── */
.ms-bar{display:flex;justify-content:space-between;align-items:center;max-width:360px;margin:0 auto 12px;font-family:'DM Mono',monospace;font-size:14px;color:var(--text-mid);}
.ms-bar span{background:var(--bg-raised);padding:6px 14px;border-radius:6px;border:1px solid var(--border);}
.ms-board{display:grid;grid-template-columns:repeat(var(--cols,9),1fr);gap:2px;width:100%;max-width:400px;margin:0 auto 16px;background:var(--bg-raised);padding:6px;border-radius:10px;box-sizing:border-box;}
.ms-cell{aspect-ratio:1;min-width:0;min-height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border-radius:4px;cursor:pointer;user-select:none;background:rgba(255,255,255,0.06);color:var(--text);transition:background 0.1s;}
.ms-cell:hover{background:rgba(255,255,255,0.1);}
.ms-cell.revealed{background:rgba(255,255,255,0.02);cursor:default;}
.ms-cell.mine{background:rgba(231,76,60,0.2);}
.ms-cell.flagged::after{content:'🚩';}
.ms-cell[data-n="1"]{color:#5ae69c;}.ms-cell[data-n="2"]{color:#00B4B4;}.ms-cell[data-n="3"]{color:#F5A623;}.ms-cell[data-n="4"]{color:#b39ddb;}.ms-cell[data-n="5"]{color:#ff7043;}.ms-cell[data-n="6"]{color:#4dd0e1;}.ms-cell[data-n="7"]{color:#e0e0e0;}.ms-cell[data-n="8"]{color:#999;}
.ms-msg{text-align:center;font-size:15px;font-weight:600;color:var(--teal);min-height:24px;margin-bottom:12px;}

/* ── Moved out of an inline <style> block: kb/editor — Quill overrides keep their !important, which is what makes them beat the CDN stylesheet ── */
/* ── Editor page styles ── */
.editor-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 28px; position: relative; z-index: 1; }
.editor-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.editor-header { margin-bottom: 24px; }
.editor-header h2 { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.editor-header p { font-size: 13px; color: var(--text-mid); }

.ed-field { margin-bottom: 18px; }
.ed-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.ed-field label .hint { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.ed-field input, .ed-field select { width: 100%; padding: 10px 14px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg-field); border: 1.5px solid var(--border); border-radius: 8px; outline: none; }
.ed-field input:focus, .ed-field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,180,0.1); }
.ed-field select option { background: var(--bg-card); }
.ed-row { display: flex; gap: 12px; }
.ed-row .ed-field { flex: 1; }

.ed-tenant-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ed-tenant-chip { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-mid); padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.15s; user-select: none; }
.ed-tenant-chip:hover { background: rgba(255,255,255,0.03); }
.ed-tenant-chip:has(input:checked) { border-color: var(--teal); background: var(--teal-glow); color: var(--teal); }
.ed-tenant-chip input { display: none; }

/* Quill dark theme overrides */
.ql-toolbar.ql-snow { border: 1.5px solid var(--border) !important; border-radius: 8px 8px 0 0 !important; background: var(--bg-raised) !important; }
.ql-container.ql-snow { border: 1.5px solid var(--border) !important; border-top: none !important; border-radius: 0 0 8px 8px !important; background: var(--bg-field) !important; min-height: 350px; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; color: var(--text) !important; resize: vertical; overflow: auto; }
.ql-editor { line-height: 1.7; }
.ql-editor.ql-blank::before { color: var(--text-dim) !important; font-style: normal !important; }
.ql-snow .ql-stroke { stroke: var(--text-mid) !important; }
.ql-snow .ql-fill { fill: var(--text-mid) !important; }
.ql-snow .ql-picker { color: var(--text-mid) !important; }
.ql-snow .ql-picker-options { background: var(--bg-card) !important; border-color: var(--border) !important; border-radius: 8px !important; }
.ql-snow button:hover .ql-stroke, .ql-snow button.ql-active .ql-stroke { stroke: var(--teal) !important; }
.ql-snow button:hover .ql-fill, .ql-snow button.ql-active .ql-fill { fill: var(--teal) !important; }
.ql-snow .ql-tooltip { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }
.ql-snow .ql-tooltip input[type=text] { background: var(--bg-field) !important; border-color: var(--border) !important; color: var(--text) !important; }
.ql-snow .ql-tooltip a { color: var(--teal) !important; }
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--text) !important; }
.ql-editor img { cursor: pointer; max-width: 100%; border-radius: 6px; transition: outline 0.15s; }
.ql-editor img.kb-img-selected { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Image resize toolbar */
.kb-img-toolbar {
  position: absolute;
  z-index: 100;
  display: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  gap: 6px;
  align-items: center;
}
.kb-img-toolbar.open { display: flex; }
.kb-img-toolbar-group {
  display: flex;
  gap: 3px;
  padding: 0 6px;
  border-right: 1px solid var(--border);
}
.kb-img-toolbar-group:last-child { border-right: none; padding-right: 0; }
.kb-img-toolbar-group:first-child { padding-left: 0; }
.kb-img-toolbar button {
  padding: 5px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.kb-img-toolbar button:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.kb-img-toolbar button.active { background: var(--teal-glow); border-color: var(--teal); color: var(--teal); }

.ed-actions { display: flex; gap: 10px; margin-top: 24px; }
.ed-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; font-family: inherit; font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s, transform 0.1s; }
.ed-btn:active { transform: scale(0.97); }
.ed-btn-primary { background: var(--teal); color: #fff; box-shadow: 0 2px 10px rgba(0,180,180,0.25); }
.ed-btn-primary:hover { background: var(--teal-dark); }
.ed-btn-secondary { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); }
.ed-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.ed-btn-danger { background: rgba(231,76,60,0.12); color: #e74c3c; border: 1px solid rgba(231,76,60,0.25); margin-left: auto; }
.ed-btn-danger:hover { background: rgba(231,76,60,0.25); }
.ed-feedback { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: none; transition: opacity 0.5s ease; }
.ed-feedback.success { display: block; background: rgba(39,174,96,0.1); color: #5ae69c; border: 1px solid rgba(39,174,96,0.2); }
.ed-feedback.error { display: block; background: rgba(231,76,60,0.1); color: #e74c3c; border: 1px solid rgba(231,76,60,0.2); }

/* Article list sidebar */
.ed-existing { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.ed-existing h3 { font-size: 14px; font-weight: 600; color: var(--text-mid); margin-bottom: 12px; }
.ed-article-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-field); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: background 0.15s; }
.ed-article-row:hover { background: var(--bg-tile-hover); }
.ed-article-row-title { font-size: 13px; font-weight: 500; color: var(--text); }
.ed-article-row-meta { font-size: 11px; color: var(--text-dim); }
.ed-status-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
.ed-status-draft { background: rgba(245,166,35,0.15); color: var(--orange); }
.ed-status-published { background: rgba(39,174,96,0.15); color: #5ae69c; }
.ed-row-delete { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.15s; flex-shrink: 0; line-height: 1; }
.ed-row-delete:hover { background: rgba(231,76,60,0.15); color: #e74c3c; }
.ed-row-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.ed-row-edit { background: none; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: all 0.15s; }
.ed-row-edit:hover { background: var(--teal-glow); color: var(--teal); }

/* File attachments */
.ed-attachments { margin-top: 18px; }
.ed-attach-zone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border: 2px dashed var(--border); border-radius: 10px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; transition: all 0.15s;
  margin-top: 6px;
}
.ed-attach-zone:hover { border-color: var(--teal); color: var(--teal); }
.ed-attach-zone.drag-over { border-color: var(--teal); background: rgba(0,180,180,0.04); }
.ed-attach-list { margin-top: 8px; }
.ed-attach-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-field); border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 6px; font-size: 13px;
}
.ed-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.ed-attach-size { font-size: 11px; color: var(--text-dim); font-family: 'DM Mono', monospace; }
.ed-attach-remove { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; }
.ed-attach-remove:hover { color: #e74c3c; }

.ed-add-category { display: flex; gap: 6px; margin-top: 8px; }
.ed-add-category input { flex: 1; padding: 6px 12px; font-family: inherit; font-size: 13px; color: var(--text); background: var(--bg-field); border: 1.5px solid var(--border); border-radius: 6px; outline: none; }
.ed-add-category input:focus { border-color: var(--teal); }
.ed-add-category input::placeholder { color: var(--text-dim); }
.ed-add-category button { padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--teal); background: transparent; border: 1.5px solid var(--teal); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.ed-add-category button:hover { background: var(--teal); color: #fff; }

@media (max-width: 600px) { .ed-row { flex-direction: column; gap: 0; } .editor-card { padding: 24px 18px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   RUNBOOKS — admin/runbooks. Full width, two panes: contents on the left, the
   client's runbook as one editable page on the right (Notion-style property
   rows, tables and free notes), in the Hub's palette.
   ═══════════════════════════════════════════════════════════════════════════ */
.rbk-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 28px; background: var(--bg); border-bottom: 1px solid var(--border); }
.rbk-picker { display: flex; align-items: center; gap: 10px; }
.rbk-picker-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.rbk-select { min-width: 280px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; }
.rbk-select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.rbk-select optgroup, .rbk-select option { background: #151929; color: #e0e2ef; }
.rbk-toolbar-right { display: flex; align-items: center; gap: 14px; }
.rbk-state { font-size: 12px; color: var(--text-dim); }
.rbk-state-dirty, .rbk-state-saving { color: #F5A623; }
.rbk-state-error { color: #ff7b6b; font-weight: 600; }
.rbk-state-btn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.rbk-btn { background: var(--teal); color: #06222a; border: 0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.rbk-btn:disabled { opacity: 0.4; cursor: default; }
.rbk-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rbk-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 140px); }
.rbk-side { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 22px 14px 40px 22px; border-right: 1px solid var(--border); }
.rbk-side-head { font-family: 'Outfit', 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); padding: 0 8px 12px; overflow-wrap: anywhere; }
.rbk-side-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--text-mid); text-decoration: none; font-size: 13px; }
.rbk-side-item:hover, .rbk-side-item:focus-visible { background: rgba(255,255,255,0.05); color: var(--text); outline: none; }
.rbk-side-icon { width: 18px; text-align: center; flex-shrink: 0; }
.rbk-side-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rbk-side-count { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rbk-side-count-none { opacity: 0.5; }
.rbk-side-count-full { color: #5ae69c; }
.rbk-side-add { margin-top: 10px; width: 100%; text-align: left; background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-dim); font: inherit; font-size: 13px; padding: 7px 10px; cursor: pointer; }
.rbk-side-add:hover, .rbk-side-add:focus-visible { color: var(--teal); border-color: var(--teal); outline: none; }
.rbk-doc { padding: 36px 56px 90px; min-width: 0; }
.rbk-empty { color: var(--text-dim); font-size: 15px; padding: 60px 0; }
.rbk-error { color: #ff7b6b; }
.rbk-cover { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.rbk-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.rbk-title { font-family: 'Outfit', 'Inter', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; margin: 0 0 14px; color: var(--text); text-wrap: balance; }
.rbk-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--text-mid); }
.rbk-fact-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-right: 8px; }
.rbk-warn { margin-top: 14px; font-size: 12px; color: #F5A623; }
.rbk-section { padding-top: 30px; scroll-margin-top: 80px; }
.rbk-h { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', 'Inter', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.rbk-h-icon { font-size: 20px; }
.rbk-custom-title { flex: 1; min-width: 0; outline: none; }
.rbk-custom-title:empty::before { content: attr(data-placeholder); color: var(--text-dim); }
.rbk-sec-del { margin-left: auto; background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; opacity: 0; }
.rbk-section:hover .rbk-sec-del, .rbk-sec-del:focus-visible { opacity: 1; }
.rbk-sec-del:hover { color: #ff7b6b; background: rgba(239,68,68,0.08); }
.rbk-props { display: flex; flex-direction: column; margin-bottom: 14px; }
.rbk-prop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; padding: 2px 0; }
.rbk-prop-label { font-size: 13px; color: var(--text-dim); padding: 7px 8px; }
.rbk-prop-val, .rbk-cell { font-size: 14px; color: var(--text); padding: 7px 8px; border-radius: 6px; outline: none; min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.rbk-prop-val:hover { background: rgba(255,255,255,0.04); }
.rbk-prop-val:focus { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(0,180,180,0.45); }
.rbk-prop-val:empty::before { content: attr(data-placeholder); color: var(--text-dim); opacity: 0.55; }
.rbk-table-block { margin: 6px 0 16px; }
.rbk-table-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-mid); margin: 0 0 6px 2px; }
.rbk-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.rbk-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.rbk-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 8px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.rbk-table td { border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,0.04); vertical-align: top; padding: 0; }
.rbk-table tr:last-child td { border-bottom: 0; }
.rbk-cell { font-size: 13px; padding: 7px 8px; border-radius: 0; }
.rbk-cell:focus { background: rgba(0,180,180,0.07); }
.rbk-td-act { width: 30px; border-right: 0 !important; }
.rbk-row-del { background: none; border: 0; color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 8px; opacity: 0; }
.rbk-table tr:hover .rbk-row-del, .rbk-row-del:focus-visible { opacity: 1; }
.rbk-row-del:hover { color: #ff7b6b; }
.rbk-add-row { background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 13px; padding: 6px 4px; cursor: pointer; }
.rbk-add-row:hover, .rbk-add-row:focus-visible { color: var(--teal); outline: none; }
.rbk-notes { font-size: 14px; line-height: 1.65; color: var(--text); padding: 8px 10px; border-radius: 8px; outline: none; min-height: 2.2em; margin-top: 4px; }
.rbk-notes:hover { background: rgba(255,255,255,0.025); }
.rbk-notes:focus { background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(0,180,180,0.35); }
.rbk-notes:empty::before { content: attr(data-placeholder); color: var(--text-dim); opacity: 0.55; }
.rbk-notes ul, .rbk-notes ol { margin: 4px 0; padding-left: 24px; }
.rbk-notes h3 { font-family: 'Outfit', 'Inter', sans-serif; font-size: 16px; margin: 10px 0 4px; }
.rbk-notes a { color: var(--teal); }
.rbk-notes blockquote { border-left: 3px solid var(--border); margin: 6px 0; padding-left: 12px; color: var(--text-mid); }
.rbk-notes code, .rbk-notes pre { font-family: 'DM Mono', monospace; font-size: 12.5px; background: rgba(255,255,255,0.05); border-radius: 4px; padding: 1px 4px; }
@media (max-width: 900px) {
  .rbk-shell { grid-template-columns: 1fr; }
  .rbk-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; }
  .rbk-doc { padding: 24px 16px 70px; }
  .rbk-prop { grid-template-columns: 1fr; gap: 0; }
  .rbk-prop-label { padding-bottom: 0; }
  .rbk-toolbar { padding: 12px 16px; }
  .rbk-select { min-width: 0; }
  .rbk-title { font-size: 30px; }
}

/* Licencing pricing tab: no spinner arrows on the unit price boxes — they sat
   over the figure and nudged prices by accident. Still a number field (numeric
   keypad on phones, invalid input refused). */
.ali-price-input { -moz-appearance: textfield; appearance: textfield; }
.ali-price-input::-webkit-outer-spin-button, .ali-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ali-price-wrap { position: relative; }
.ali-price-wrap .ali-price-input { transition: border-color 0.2s, box-shadow 0.2s; }
.ali-price-saving .ali-price-input { border-color: rgba(245,166,35,0.6); }
.ali-price-saved .ali-price-input { border-color: rgba(39,174,96,0.7); box-shadow: 0 0 0 2px rgba(39,174,96,0.15); }
.ali-price-saved::after { content: '✓'; position: absolute; right: -16px; color: #5ae69c; font-size: 12px; }
.ali-price-error .ali-price-input { border-color: rgba(239,68,68,0.8); box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }

/* Internal Headcount — status-aware edit dialog and non-billable conversion */
.ahc-field-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.ahc-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mid); margin: 2px 0 12px; cursor: pointer; }
.ahc-nb { border: 1px solid rgba(245,166,35,0.35); background: rgba(245,166,35,0.06); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; }
.ahc-nb-title { font-size: 13px; font-weight: 700; color: #F5A623; margin-bottom: 4px; }
.ahc-nb-text { font-size: 12px; color: var(--text-mid); line-height: 1.5; margin-bottom: 10px; }
.ahc-nb-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; font-size: 12px; color: var(--text-dim); }
.ahc-nb-actions { display: flex; gap: 8px; margin-top: 12px; }
.ahc-nb-open { margin-left: auto; }
.ahc-history { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; font-size: 12px; color: var(--text-mid); }
.ahc-history-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 4px; }
.ahc-history-row { padding: 2px 0; }
.ahc-date-caption { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

/* KB editor: the formatting toolbar stays pinned to the top of the window while
   a long article scrolls beneath it, so formatting never needs a scroll back up. */
.editor-card .ql-toolbar.ql-snow { position: sticky; top: 0; z-index: 20; box-shadow: 0 6px 12px -8px rgba(0,0,0,0.6); }

/* Vic Civil Timesheets (viccivil/timesheets) — review of the public timesheet form */
/* Vic Civil's palette is orange and black (19 Oct 2026). The Hub's teal is
   redefined for this page only, so every shared control on it — topbar
   button, modal buttons, inputs, links, footer — follows without a per-rule
   override. Orange buttons take black text, as Vic Civil's own apps do (white
   on this orange is hard to read). Only two shared styles hard-code teal. */
body.vts-page { --teal: #f47c20; --teal-dark: #d9660f; --teal-dim: #e0711a; --teal-glow: rgba(244,124,32,0.15); }
body.vts-page .topbar-btn, body.vts-page .topbar a.topbar-btn, body.vts-page .pm-btn-primary, body.vts-page .vts-add-btn,
body.vts-page .hub-a11y-btn.active, body.vts-page .hub-update-banner .hub-session-btn { color: #111; }
body.vts-page .hub-banner-info > span { background: linear-gradient(rgba(244,124,32,0.14), rgba(244,124,32,0.14)), var(--bg-card); border-color: rgba(244,124,32,0.35); }
body.vts-page .hub-update-banner { background: rgba(244,124,32,0.16); }
.vts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.vts-week { display: flex; align-items: center; gap: 8px; }
.vts-nav { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; }
.vts-nav:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.vts-nav:disabled { opacity: 0.35; cursor: default; }
.vts-week-label { min-width: 190px; text-align: center; font-weight: 700; font-size: 15px; color: var(--text); }
.vts-today { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vts-today:hover { border-color: var(--teal); color: var(--teal); }
.vts-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.vts-filters select { min-width: 200px; padding: 8px 12px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.vts-filters select:focus { outline: none; border-color: var(--teal); }
.vts-stats { display: flex; gap: 14px; margin-bottom: 18px; }
.vts-stat { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; text-align: center; }
.vts-stat-value { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--text); }
.vts-stat-value.vts-accent { color: var(--teal); }
.vts-stat-label { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; }
.vts-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.vts-card-head { padding: 14px 18px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--border); }
.vts-scroll { overflow-x: auto; }
table.vts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vts-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); background: var(--bg-raised); border-bottom: 1px solid var(--border); white-space: nowrap; }
.vts-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.vts-table tbody tr:last-child td { border-bottom: none; }
.vts-table .vts-num { text-align: right; white-space: nowrap; }
.vts-nowrap { white-space: nowrap; }
.vts-strong { font-weight: 700; }
.vts-dim { color: var(--text-dim); }
.vts-ident { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--teal); white-space: nowrap; }
.vts-job { font-weight: 700; }
.vts-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--orange); background: rgba(243,156,18,0.12); }
.vts-notes { min-width: 180px; max-width: 360px; color: var(--text-mid); white-space: pre-wrap; overflow-wrap: anywhere; }
.vts-empty { text-align: center; color: var(--text-dim); padding: 28px 14px !important; }
.vts-note { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.vts-reg { margin-top: 6px; }
.vts-reg-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 18px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.vts-reg-toggle:hover { background: rgba(255,255,255,0.02); }
.vts-reg-chev { flex: none; color: var(--text-dim); transition: transform 0.2s ease; }
.vts-reg-toggle[aria-expanded="true"] .vts-reg-chev { transform: rotate(90deg); }
.vts-reg-toggle[aria-expanded="true"] { border-bottom: 1px solid var(--border); }
.vts-reg-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; }
.vts-reg-count { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.vts-reg-lock { margin-left: auto; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--orange); background: rgba(243,156,18,0.12); border: 1px solid rgba(243,156,18,0.35); }
.vts-reg-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.vts-reg-bar input { flex: 1 1 280px; max-width: 420px; padding: 8px 12px; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.vts-reg-bar input:focus { outline: none; border-color: var(--teal); }
.vts-reg-note { font-size: 12px; color: var(--text-dim); }
.vts-add-btn { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--teal); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vts-add-btn:hover { background: var(--teal-dark); }
.vts-reg-table td a { color: var(--teal); text-decoration: none; }
.vts-reg-table td a:hover { text-decoration: underline; }
.vts-reg-name { margin-right: 4px; }
.vts-row-lock { margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--orange); background: rgba(243,156,18,0.12); border: 1px solid rgba(243,156,18,0.35); white-space: nowrap; vertical-align: middle; }
.vts-ident-auto { opacity: 0.8; }
.vts-row-btn { margin-left: 6px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.vts-row-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.vts-row-del { color: #ff9d97; border-color: rgba(231,76,60,0.4); background: rgba(231,76,60,0.08); }
.vts-row-del:hover:not(:disabled) { color: #ffb9bd; border-color: rgba(231,76,60,0.7); }
.vts-row-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vts-modal { max-width: 620px; }
.vts-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vts-modal-grid .vts-full { grid-column: 1 / -1; }
.vts-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.vts-upper { text-transform: uppercase; }
.vts-modal-error { min-height: 18px; margin-top: 6px; font-size: 13px; font-weight: 600; color: #ff7b6b; }
body.hub-large .vts-table { font-size: 16px; }
body.hub-large .vts-row-btn { font-size: 15px; padding: 5px 12px; }
body.hub-large .vts-week-label { font-size: 18px; }
@media (max-width: 700px) { .vts-stats { flex-direction: column; } .vts-filters select { min-width: 0; flex: 1; } .vts-modal-grid { grid-template-columns: 1fr; } .vts-reg-lock { margin-left: 0; } }

/* ── Invoicing (admin/invoicing) ───────────────────────────────────────────
   Client name and a dash: grey = no change since last month, orange = worth
   opening (billables changed, licences unreadable, or a new unpriced one). */
.inv-container { max-width: var(--hub-page-width); margin: 0 auto; padding: 24px 20px 60px; position: relative; z-index: 1; }
.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-select { min-width: 200px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; }
.inv-select option { background: #151929; color: #e0e2ef; }
.inv-select:focus-visible, .inv-filter-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.inv-filter-btn { padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); border-radius: 8px; cursor: pointer; transition: all 0.12s; }
.inv-filter-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.inv-filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.inv-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.inv-dash { flex-shrink: 0; width: 18px; height: 4px; border-radius: 2px; background: var(--text-dim); opacity: 0.6; }
.inv-dash-changed { background: var(--orange); opacity: 1; }
.inv-table-wrap { overflow-x: auto; padding-top: 6px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.inv-table td { padding: 8px 10px; color: var(--text); border-bottom: 1px solid var(--border); }
.inv-table .inv-num { text-align: right; white-space: nowrap; }
.inv-table .inv-strong { font-weight: 700; font-family: 'Inter', sans-serif; }
.inv-table td.inv-dim, .inv-table tr.inv-row-muted td { color: var(--text-dim); }
.inv-table td.inv-err { color: #ff7b6b; font-weight: 600; }
.inv-table tr.inv-row-changed td { background: var(--orange-glow); }
.inv-table tr.inv-row-removed td:first-child { text-decoration: line-through; }
.inv-table tr.inv-group td { padding-top: 16px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.inv-delta-up { color: #5ae69c; font-weight: 700; }
.inv-delta-down { color: #e74c3c; font-weight: 700; }
.inv-needs-price { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--orange); text-decoration: none; }
.inv-needs-price:hover { text-decoration: underline; }
body.hub-large .inv-table { font-size: 15px; }
body.hub-large .inv-select, body.hub-large .inv-filter-btn { font-size: 15px; }