/* ── Skolkollen Super Admin Portal — FVK family theme ───────── */
:root {
  --navy:       #15233e;   /* sidebar */
  --navy-2:     #1d2f4d;   /* sidebar hover */
  --navy-3:     #26395a;   /* sidebar toggle track */
  --ink:        #1e293b;   /* headings / body */
  --ink-soft:   #475569;
  --muted:      #64748b;
  --canvas:     #f6f4ee;   /* warm off-white page bg */
  --card:       #f5f6f8;   /* very light grey — softer than pure white */
  --border:     #e8e4da;   /* warm card border */
  --line:       #eef0f3;
  --primary:    #1e3a5f;   /* navy button */
  --primary-d:  #16314f;
  --blue:       #2563eb;   /* active / links */
  --blue-soft:  #eaf1fe;
  --danger:     #dc2626;
  --danger-soft:#fdeaea;
  --green:      #16a34a;  --green-soft:  #dcfce7;
  --amber:      #d97706;  --amber-soft:  #fef3c7;
  --slate:      #64748b;  --slate-soft:  #eef1f5;
  --radius:     16px;
  --shadow:     0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
a { color: inherit; }

/* ══════════════════════════════════════════════════════════
   TRANSITION ANIMATIONS
   ══════════════════════════════════════════════════════════ */

/* ── Dynamic content animations removed ────────────────────── */
/* Views, workspace, and tab content are rendered via innerHTML —
   animating them causes layout thrashing and visible stutter.
   Kept: modal pop, overlay fade, hover transitions, chip appear. */

/* ── Modal scale-in ────────────────────────────────────────── */
.overlay .modal,
.overlay .ob-modal,
.overlay .scaf-modal,
.overlay .modal-wide {
  animation: modalPop .3s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: center center;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(.85) translateY(24px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Overlay backdrop fade ─────────────────────────────────── */
.overlay {
  animation: backdropIn .22s ease both;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Sidebar nav item active transition ────────────────────── */
.nav-item {
  transition: background .14s ease, color .14s ease;
}
.nav-item.active {
  transition: background .08s ease, color .08s ease;
}

/* ── Project cards hover lift ──────────────────────────────── */
.card {
  transition: transform .15s cubic-bezier(.4,0,.2,1),
              box-shadow .15s ease,
              border-color .15s ease;
}

/* ── School list item slide ────────────────────────────────── */
.ws-list-item {
  transition: background .1s ease, border-color .1s ease, box-shadow .1s ease;
}

/* ── Health chip appear ────────────────────────────────────── */
.ws-issue-btn {
  animation: chipIn .18s cubic-bezier(.4,0,.2,1) both;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Kollen panel slide-up ─────────────────────────────────── */
#agent-panel:not(.hidden) {
  animation: kollenUp .24s cubic-bezier(.34,1.15,.64,1) both;
  transform-origin: right bottom;
}
@keyframes kollenUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Agent bubble ──────────────────────────────────────────── */
/* Already defined as 'bubbleIn' — keep that */

/* ── Topbar stats count-up flash ───────────────────────────── */
.ws-topbar-stats .ws-stat-err {
  animation: errPulse 1.2s ease 1;
}
@keyframes errPulse {
  0%   { opacity: .4; }
  40%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ── Monitoring card status update ────────────────────────── */
.mon-card {
  transition: transform .12s ease, box-shadow .12s ease;
}
.health-chip {
  transition: background .25s ease, color .25s ease;
}

/* ── Lock button press ─────────────────────────────────────── */
.ws-privacy-locked:active,
.ws-privacy-open:active {
  transform: scale(.96);
}

/* ── Settings save feedback ────────────────────────────────── */
.ws-save {
  transition: opacity .15s ease;
}

/* ══════════════════════════════════════════════════════════ */

/* ── Family block logo ─────────────────────────────────────── */
.logo-mark {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5px;
  width: 30px; height: 30px; flex: none;
}
.logo-mark i { background: #fff; border-radius: 3px; }
.logo-mark i:nth-child(2) { background: #16a34a; }   /* top middle — green */
.logo-mark i:nth-child(4) { background: var(--blue); }
.logo-mark i:nth-child(6) { background: #facc15; }   /* right middle — yellow */
.logo-mark i:nth-child(8) { background: var(--danger); }
.logo-mark--lg { width: 46px; height: 46px; gap: 4px; }
.logo-mark--ink i { background: var(--navy); }
.logo-mark--ink i:nth-child(2) { background: #16a34a; }
.logo-mark--ink i:nth-child(4) { background: var(--blue); }
.logo-mark--ink i:nth-child(6) { background: #facc15; }
.logo-mark--ink i:nth-child(8) { background: var(--danger); }

/* ── App shell: sidebar + main ─────────────────────────────── */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex: none;
  background: var(--navy);
  color: #cdd6e6;
  display: flex; flex-direction: column;
  padding: 20px 16px;
  position: sticky; top: 0; height: 100vh;
  /* Scroll within the sidebar when nav + bottom exceed the viewport height
     (e.g. at 100% zoom / shorter screens) instead of overflowing the page. */
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--navy-3); border-radius: 8px; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 22px; }
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-brand strong { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sidebar-brand .brand-text span { color: #8595b3; font-size: 11.5px; font-weight: 500; }

.nav-label { color: #6b7b9c; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; padding: 0 8px 10px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-gap { height: 14px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  color: #c2cce0; font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 11px 12px; border-radius: 11px;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.nav-item:hover { background: var(--navy-2); color: #fff; }
.nav-item.active { background: #fff; color: var(--blue); }
.nav-item.active svg { color: var(--blue); opacity: 1; }
/* Kollen nav button — sits below nav items with a subtle divider */
.nav-kollen { margin-top: 8px; border-top: 1px solid var(--navy-3); padding-top: 14px !important; }
/* Nav "Kollen": a plain static K-in-a-circle (no animated eye) — only the
   bottom-right FAB gets the living, blinking eye. */
.kei-nav { width: 22px; height: 22px; flex: none;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(37,99,235,.4), 0 0 6px rgba(37,99,235,.2);
  display: flex; align-items: center; justify-content: center; }
.kei-nav .kei-iris,
.kei-nav .kei-blink { display: none; }
.kei-nav .kei-pupil { inset: 0; background: transparent; animation: none;
  box-shadow: none; transform: none; }
.kei-nav .kei-pupil span { font-size: 11px; text-shadow: none; }
.nav-item .soon {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--navy-3); color: #9fb0d0; padding: 2px 6px; border-radius: 6px;
}
.nav-item.active .soon { background: var(--blue-soft); color: var(--blue); }

.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.lang-toggle { display: flex; background: var(--navy-3); border-radius: 10px; padding: 3px; }
.lang-toggle button {
  flex: 1; background: transparent; border: none; cursor: pointer;
  color: #9fb0d0; font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 0; border-radius: 8px; transition: background .12s, color .12s;
}
.lang-toggle button.active { background: #34486c; color: #fff; }

/* Light variant for the onboarding wizard header (sits on a white modal). */
.ob-head-right { display: flex; align-items: center; gap: 12px; }
.ob-lang-toggle { background: var(--canvas); border: 1px solid var(--border); padding: 2px; }
.ob-lang-toggle button { color: var(--muted); font-size: 12px; padding: 5px 12px; }
.ob-lang-toggle button.active { background: var(--blue); color: #fff; }

.user-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--navy-3); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.user-row .user-name { color: #e4e9f2; font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signout { background: none; border: none; color: #8595b3; font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; }
.signout:hover { color: #fff; }

/* ── Main area ─────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { max-width: 1080px; width: 100%; margin: 0 auto; padding: 34px 36px 20px; flex: 1; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.section-head h2 { font-size: 24px; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: -.01em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.loading { color: var(--muted); padding: 40px; grid-column: 1 / -1; text-align: center; }

/* ── Project card ──────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow); transition: transform .1s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.09); }
.card-head { display: flex; align-items: flex-start; gap: 13px; }
.card-icon {
  font-size: 22px; width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft, var(--slate-soft));
}
.card-title { flex: 1; min-width: 0; }
.card-title h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.card-title .slug { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
.card-desc { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 0; min-height: 40px; }
.card-edit {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 2px 4px; border-radius: 8px; line-height: 1;
}
.card-edit:hover { color: var(--blue); background: var(--blue-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--slate-soft); color: var(--slate);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.status-active   { background: var(--green-soft); color: var(--green); }
.chip.status-building { background: var(--amber-soft); color: var(--amber); }
.chip.status-paused   { background: var(--blue-soft);  color: var(--blue); }
.chip.status-archived { background: var(--slate-soft); color: var(--slate); }

.card-entity {
  display: flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 12px; font-weight: 500;
  padding-top: 2px; border-top: 1px solid var(--line);
}
.card-entity svg { width: 14px; height: 14px; flex: none; opacity: .7; }

.card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.card-links a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border);
  color: var(--ink); background: #fff; transition: background .12s, border-color .12s;
}
.card-links a:hover { background: var(--canvas); border-color: #d9d4c8; }
.card-links .slug { color: var(--muted); font-size: 12.5px; align-self: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-danger {
  font-family: inherit; font-size: 14px; font-weight: 600;
  border-radius: 10px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); }
.btn-ghost { background: #fff; color: var(--ink-soft); border-color: var(--border); }
.btn-ghost:hover { background: var(--canvas); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); }

/* ── Empty / coming-soon views ─────────────────────────────── */
.placeholder {
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 56px 32px; text-align: center; color: var(--muted);
}
.placeholder .ph-icon { font-size: 34px; }
.placeholder h3 { color: var(--ink); font-size: 19px; font-weight: 700; margin: 14px 0 8px; }
.placeholder p { max-width: 460px; margin: 0 auto; font-size: 14px; line-height: 1.6; }
.placeholder .ph-phase {
  display: inline-block; margin-bottom: 18px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--blue); background: var(--blue-soft);
  padding: 4px 11px; border-radius: 999px;
}

/* ── Login screen ──────────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0; background: var(--canvas);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 44px 38px; width: 100%; max-width: 380px; text-align: center; box-shadow: var(--shadow);
}
.login-card .logo-mark { margin: 0 auto; }
.login-card h1 { font-size: 26px; font-weight: 800; margin: 18px 0 2px; color: var(--ink); letter-spacing: -.02em; }
.login-card .tagline { color: var(--muted); margin: 0 0 28px; font-weight: 500; }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f2937; border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: box-shadow .15s, transform .08s;
}
.btn-google:hover { box-shadow: 0 6px 18px rgba(15,23,42,.1); transform: translateY(-1px); }
.login-error { color: var(--danger); margin-top: 16px; font-size: 14px; }

/* ── Modal ─────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.4); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 120;
}
.modal {
  background: var(--card); border-radius: 20px; padding: 28px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal h3 { margin: 0 0 20px; font-size: 20px; font-weight: 800; color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
}
.form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-grid input[type="color"] { padding: 4px; height: 42px; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.modal-actions .spacer { flex: 1; }

/* ── Project workspace ─────────────────────────────────────── */
#view-workspace { max-width: 1400px; width: 100%; margin: 0; padding: 28px 36px 20px; flex: 1; }
.ws-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.ws-back { align-self: flex-start; background: none; border: none; color: var(--blue);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 0; }
.ws-title { display: flex; align-items: center; gap: 13px; }
.ws-title h2 { margin: 0; font-size: 22px; font-weight: 800; }
.ws-title .slug { color: var(--muted); font-size: 12.5px; font-family: ui-monospace, monospace; }

.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0 20px; }
.ws-tab { background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ws-tab:hover { color: var(--ink); }
.ws-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.ws-schools { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.ws-master { display: flex; flex-direction: column; gap: 10px; }
.ws-search { font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.ws-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ws-list { display: flex; flex-direction: column; gap: 4px; }
.ws-list-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  padding: 11px 12px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
.ws-list-item:hover { background: var(--canvas); }
.ws-list-item.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.ws-li-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-li-meta { color: var(--muted); font-size: 12px; font-weight: 600; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ws-dot.green { background: var(--green); } .ws-dot.red { background: var(--danger); }

.ws-detail-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; }
.ws-dh { display: flex; align-items: center; gap: 12px; }
.ws-dh h3 { margin: 0; font-size: 19px; font-weight: 800; flex: 1; }
.ws-id { color: var(--muted); font-size: 11.5px; font-family: ui-monospace, monospace;
  background: var(--slate-soft); padding: 3px 8px; border-radius: 6px; }
.ws-pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.ws-pill.active { background: var(--green-soft); color: var(--green); }
.ws-pill.trial { background: var(--amber-soft); color: var(--amber); }
.ws-pill.suspended { background: var(--danger-soft); color: var(--danger); }
.ws-pill.churned { background: var(--slate-soft); color: var(--slate); }

.ws-health-bar { height: 5px; border-radius: 999px; margin-bottom: 10px; }
.ws-health-bar.green { background: var(--green); }
.ws-health-bar.amber { background: var(--amber); }
.ws-health-bar.red { background: var(--danger); }
.ws-issue.red { background: var(--danger-soft); color: var(--danger); }
.ws-issue.amber { background: var(--amber-soft); color: var(--amber); }
.ws-issue-btn { font-family: inherit; cursor: pointer; border: none;
  transition: filter .1s, transform .08s; }
.ws-issue-btn:hover { filter: brightness(.92); transform: translateY(-1px); }
.cust-issues-badge { font-family: inherit; font-size: 12px; font-weight: 800;
  background: var(--danger-soft); color: var(--danger); border: none; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  transition: filter .1s; }
.cust-issues-badge:hover { filter: brightness(.9); }
.qs-signing { background: var(--canvas); border-radius: 12px; padding: 14px; margin-bottom: 4px; }
.qs-section-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }

.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ws-section-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; margin: 4px 0 10px; }
.ws-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.ws-stat { flex: 1; background: var(--canvas); border-radius: 10px; padding: 10px; text-align: center; }
.ws-stat b { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.ws-stat span { font-size: 11.5px; color: var(--muted); }
.ws-flags { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.ws-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.ws-fields { display: flex; flex-direction: column; gap: 8px; }
.ws-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.ws-field span { color: var(--muted); flex: none; }
.ws-field input { flex: 1; min-width: 0; text-align: right; font-family: inherit; font-size: 13px;
  color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; }
.ws-field input:hover { border-color: var(--border); }
.ws-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); text-align: left; }
.ws-field input.empty { background: var(--amber-soft); }
.ws-fees { background: var(--canvas); border-radius: 12px; padding: 16px; }
.ws-fee { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; padding: 5px 0; }
.ws-fee span { color: var(--ink-soft); } .ws-fee b { font-weight: 700; }
.ws-fee-in { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.ws-fee-in input { width: 78px; text-align: right; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 4px 7px; }
.ws-fee-in input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ws-status { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; }
.ws-foot-seats input { width: 56px; font-family: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 4px 7px; margin-left: 4px; }
.ws-save { font-size: 12.5px; font-weight: 700; color: var(--green); opacity: 0; transition: opacity .15s; }
.ws-save.show { opacity: 1; }
.ws-save.ws-save-err { color: var(--danger); }
.ws-fee.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.ws-fee.total b { color: var(--blue); }
.ws-fee-divider { border-top: 1px dashed var(--border); margin: 8px 0 4px; }
.ws-fee-students .ws-fee-in { gap: 6px; }
.ws-fee-unit { font-size: 12px; color: var(--muted); }
.ws-fee-actual { opacity: .65; cursor: default; }
.ws-fee-actual .ws-fee-in { color: var(--muted); }
.ws-actual-input { background: var(--canvas) !important; color: var(--muted) !important;
  border-color: var(--border) !important; cursor: default !important; }
.ws-actual-total b { color: var(--muted) !important; }
.ws-actual-total { opacity: .7; }
.ws-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.ws-foot-seats { font-size: 13px; color: var(--ink-soft); }
.ws-footer .spacer { flex: 1; }
.ws-empty { color: var(--muted); padding: 40px; text-align: center; }

@media (max-width: 760px) {
  #view-workspace { padding: 20px 16px; }
  .ws-schools { grid-template-columns: 1fr; }
  .ws-cols { grid-template-columns: 1fr; }
}

/* small action buttons reused by billing/admins */
.ic { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--muted);
  padding: 4px 6px; border-radius: 7px; }
.ic:hover { background: var(--canvas); color: var(--ink); }
.ic.danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-mini { font-family: inherit; font-size: 12px; font-weight: 700; border: none; cursor: pointer;
  padding: 5px 9px; border-radius: 7px; }
.btn-mini.amber { background: var(--amber-soft); color: var(--amber); }
.btn-mini.green { background: var(--green-soft); color: var(--green); }
.ws-master-toolbar { display: flex; align-items: center; gap: 8px; }
.ws-add { flex: 1; white-space: nowrap; }
/* Privacy mode toggle */
.ws-privacy-toggle { font-family: inherit; font-weight: 700; border-radius: 10px;
  cursor: pointer; white-space: nowrap; flex: none;
  transition: background .12s, color .12s, box-shadow .12s; }
/* LOCKED — prominent, can't miss it */
.ws-privacy-locked { font-size: 13px; padding: 9px 14px;
  background: var(--danger); color: #fff; border: none;
  box-shadow: 0 2px 8px rgba(220,38,38,.35); }
.ws-privacy-locked:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220,38,38,.45); }
/* OPEN — understated, just an icon */
.ws-privacy-open { font-size: 16px; padding: 6px 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted); }
.ws-privacy-open:hover { background: var(--canvas); color: var(--ink); }
/* Fee panel hidden in privacy mode */
.ws-privacy-fees { display: flex; align-items: center; gap: 10px; padding: 20px 12px;
  color: var(--muted); font-size: 13.5px; font-style: italic;
  background: var(--canvas); border-radius: 10px; }

/* ── Overview tab ──────────────────────────────────────────── */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ov-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; text-align: center; box-shadow: var(--shadow); }
.ov-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--ink); }
.ov-stat span { font-size: 12.5px; color: var(--muted); }
/* p-based stat elements (block by default, no display override needed) */
.ov-val { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 2px; line-height: 1.1; }
.ov-lbl { font-size: 12.5px; color: var(--muted); margin: 0; }
.ov-note { color: var(--muted); font-size: 13px; margin-top: 16px; }

/* ── Billing tab ───────────────────────────────────────────── */
.bill-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bill-toolbar select { font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }
.bill-toolbar .spacer { flex: 1; }
.bill-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); }

/* ── Billing hub: unified financials across all products ── */
.bill-hub-wrap { margin-top: 22px; }
.bill-hub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bill-hub-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.bill-reveal-btn { border: 1px solid var(--border); border-radius: 8px; }
.bill-hub-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.bh-stat { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; }
.bh-stat span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.bh-stat b { font-size: 19px; font-weight: 800; }
.bill-hub-listwrap { position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.bill-hub-rowhead, .bill-hub-row {
  display: grid; grid-template-columns: 1fr 200px 100px 96px 130px; gap: 12px; align-items: center; }
.bill-hub-rowhead { padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bill-hub-rowhead .ta-r, .bh-total { text-align: right; justify-self: end; }
.bill-hub-scroll { max-height: 560px; overflow-y: auto; }
.bill-hub-row { width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); padding: 9px 16px; cursor: pointer; font: inherit;
  font-size: 13.5px; color: var(--ink); transition: background .1s; }
.bill-hub-row:last-child { border-bottom: 0; }
.bill-hub-row:hover { background: var(--canvas); }
.bill-hub-row.is-demo { background: color-mix(in srgb, #fef3c7 14%, var(--card)); }
.bh-school { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-prod { display: flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; flex: none; }
.bh-period { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.bh-total { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Reveal gate — blur the money until the user opts in. */
.figures-hidden .figure { filter: blur(8px); user-select: none; pointer-events: none; }
.bill-hub-lock { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(2px); }
@media (max-width: 720px) {
  .bill-hub-totals { grid-template-columns: repeat(2, 1fr); }
  .bill-hub-rowhead, .bill-hub-row { grid-template-columns: 1fr 90px 96px; }
  .bill-hub-rowhead span:nth-child(2), .bh-prod, .bill-hub-rowhead span:nth-child(4), .bill-hub-row .chip { display: none; }
}
.bill-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bill-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; padding: 12px 10px; border-bottom: 1px solid var(--border); }
.bill-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.bill-table tr.paid { opacity: .7; }
.bill-table .num { text-align: right; } .bill-table .total { font-weight: 800; }
.bill-name { font-weight: 600; }
.bill-in { width: 72px; text-align: right; font-family: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; }
.bill-in:hover { border-color: var(--border); }
.bill-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.bill-in:disabled { background: transparent; color: var(--muted); }
.bill-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.bill-table tfoot td { font-weight: 800; color: var(--ink); border-top: 2px solid var(--border); }

/* ── Admins tab ────────────────────────────────────────────── */
.adm-head h3 { margin: 0 0 4px; font-size: 18px; }
.adm-head p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.adm-add { display: flex; gap: 8px; margin-bottom: 18px; }
.adm-add input { flex: 1; font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.adm-list { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.adm-row { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.adm-shield { font-size: 16px; }
.adm-info { flex: 1; display: flex; flex-direction: column; }
.adm-info b { font-size: 14px; } .adm-info span { font-size: 12px; color: var(--muted); }

/* ── Settings modal ────────────────────────────────────────── */
.modal-wide { max-width: 960px; }
/* Drive browser modal specifically — taller and wider */
.modal-drive { max-width: 960px; }
.modal-drive .drive-tree,
.modal-drive .drive-tree { max-height: calc(70vh - 140px); }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.set-head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.set-body { display: grid; grid-template-columns: 170px 1fr; gap: 18px; min-height: 240px; }
.set-tabs { display: flex; flex-direction: column; gap: 3px; }
.stab { text-align: left; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); padding: 9px 11px; border-radius: 9px; }
.stab:hover { background: var(--canvas); }
.stab.active { background: var(--blue-soft); color: var(--blue); }
.set-pane { display: flex; flex-direction: column; gap: 14px; }
.set-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.set-f input, .set-f select { font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.set-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.set-hint { color: var(--muted); font-size: 12.5px; margin: 0; }
.set-add { display: flex; gap: 8px; }
.set-add input, .set-add select { font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.set-add input { flex: 1; }
.set-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 240px; overflow-y: auto; }
/* Danger zone in settings modal */
.set-danger-zone { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--danger-soft);
  border-radius: 11px; background: var(--danger-soft); }
.set-danger-head { font-size: 12px; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
.set-danger-zone .set-hint { color: var(--danger); opacity: .8; margin: 0 0 10px; }
.set-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 10px;
  background: var(--canvas); border-radius: 9px; }
.set-row > span:first-child { flex: 1; }
.set-row .mono { font-family: ui-monospace, monospace; }
.set-loading { color: var(--muted); font-style: italic; animation: pulse-load 1.2s ease-in-out infinite; }
@keyframes pulse-load { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Landing mini-cards (Monitoring / Deployment / Billing) ── */
.view-intro { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 22px; max-width: 640px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mini-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 14px;
  box-shadow: var(--shadow); font-family: inherit; transition: transform .1s, box-shadow .15s; }
.mini-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.1); }
.mini-icon { font-size: 20px; width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; }
.mini-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Add school success screen ─────────────────────────────── */
.set-success { text-align: center; padding: 20px 0 10px; }
.set-success-icon { display: block; font-size: 42px; color: var(--green); margin-bottom: 12px; }
.set-success h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.set-success p { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }
.set-invite-wrap { display: flex; gap: 8px; margin-bottom: 8px; }
.set-invite-url { flex: 1; font-family: ui-monospace, monospace; font-size: 12.5px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
  color: var(--ink); }
.set-section-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ── Onboarding wizard — privacy/presentation mode ─────────── */
/* The overlay behind the onboarding modal is OPAQUE, not transparent.
   No school data is visible behind it. Clicking the backdrop does nothing. */
#onboard-modal.overlay {
  background: rgba(246, 244, 238, 0.98);   /* near-solid warm canvas */
  backdrop-filter: none;                    /* no blur = no data visible */
  cursor: default;                          /* no pointer hint to click out */
}
#onboard-modal.overlay > * { pointer-events: all; }   /* only modal itself is interactive */
.ob-modal { max-width: 680px; }
.ob-body { min-height: 280px; }
.ob-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ob-product-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px;
  background: var(--card); border: 2px solid var(--border); border-radius: 14px; cursor: pointer;
  font-family: inherit; transition: border-color .12s, box-shadow .12s; }
.ob-product-card:hover { border-color: var(--blue); }
.ob-product-card.selected { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ob-prod-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 24px;
  display: flex; align-items: center; justify-content: center; }
.ob-pricing { background: var(--canvas); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
.ob-pricing-head { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.ob-price-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ob-price-grid label { font-size: 12.5px; color: var(--muted); font-weight: 600;
  display: flex; flex-direction: column; gap: 5px; }
.ob-price-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ob-price-row input { width: 80px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; text-align: right; }
.ob-price-total { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ob-price-total > div { display: flex; justify-content: space-between; font-size: 14px; }
.ob-price-total span { color: var(--muted); }
.ob-price-total b { font-weight: 800; color: var(--blue); font-size: 16px; }
/* Onboarding: choose agreements from the Document Library */
.ob-lib-pick { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 4px;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px; max-height: 260px; overflow-y: auto; }
.ob-lib-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; }
.ob-lib-pick-row:hover { background: var(--canvas); }
.ob-lib-pick-row input { width: auto; flex: none; }
.ob-lib-ico { font-size: 16px; flex: none; }
.ob-lib-title { flex: 1; min-width: 0; }
.ob-docs-section { display: flex; flex-direction: column; gap: 10px; }
.ob-doc-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.ob-doc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ob-doc-head > div { flex: 1; min-width: 0; }
.ob-sig-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-record-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ob-qr-wrap { text-align: center; padding: 12px 0; }
.ob-qr { border-radius: 10px; border: 1px solid var(--border); }
.ob-account-preview, .ob-activate { display: flex; flex-direction: column; gap: 10px; }
.ob-account-row, .ob-activate-options { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ob-account-row span { color: var(--muted); } .ob-account-row b { font-weight: 700; }
.ob-activate-head { font-size: 18px; font-weight: 800; color: var(--green); }
.ob-activate-options { border: none; display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; }
.ob-done { max-height: 400px; overflow-y: auto; }
.ob-done-header h2 { font-size: 22px; font-weight: 800; }
.ob-done-header p { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.ob-done-section { margin-bottom: 18px; }
.ob-done-section h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ob-done-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.ob-done-row span { color: var(--muted); } .ob-done-row b { font-weight: 700; text-align: right; }
.ob-next-step { padding: 5px 0; font-size: 14px; }
.ob-done-footer { margin-top: 24px; font-size: 12px; color: var(--muted); text-align: center; }
.ob-poll-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted);
  margin-top: 8px; justify-content: center; }
.ob-poll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  animation: pulse-down 1.4s ease-in-out infinite; flex: none; }

/* ── Scaffold wizard ───────────────────────────────────────── */
.scaf-modal { max-width: 640px; }
.scaf-progress { display: flex; align-items: center; margin: 0 0 6px; }
.scaf-step { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; flex: none;
  background: var(--border); color: var(--muted); }
.scaf-step.done { background: var(--green-soft); color: var(--green); }
.scaf-step.cur  { background: var(--blue); color: #fff; }
.scaf-step-line { flex: 1; height: 2px; background: var(--border); min-width: 8px; }
.scaf-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px; }
.scaf-body { min-height: 240px; }
.scaf-review { display: flex; flex-direction: column; gap: 10px; }
.scaf-review-row { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scaf-review-row span { color: var(--muted); flex: none; }
.scaf-review-row b { text-align: right; word-break: break-all; }
.scaf-result { display: flex; flex-direction: column; gap: 12px; }
.scaf-log { background: var(--canvas); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; max-height: 180px; overflow-y: auto; font-size: 13px; font-family: ui-monospace, monospace; }
.scaf-log-line { padding: 2px 0; }
.scaf-log-line.ok   { color: var(--green); }
.scaf-log-line.err  { color: var(--danger); }
.scaf-log-line.done { color: var(--blue); font-weight: 700; }
.scaf-link { display: block; color: var(--blue); text-decoration: none; font-size: 13.5px;
  font-weight: 600; padding: 6px 0; }
.scaf-link:hover { text-decoration: underline; }
.scaf-manual { background: var(--amber-soft); border-radius: 12px; padding: 14px 16px; }
.scaf-manual h4 { margin: 0 0 10px; font-size: 14px; color: var(--amber); }
.scaf-manual-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
  padding: 5px 0; color: var(--ink-soft); }
.scaf-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--amber);
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex: none; }

/* ── Workspace topbar stats ────────────────────────────────── */
.ws-topbar-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.ws-topbar-stat { font-size: 13px; color: #8595b3; white-space: nowrap; }
.ws-topbar-stat b { color: #e4e9f2; font-weight: 700; }
.ws-stat-ok  b { color: #4ade80; }
.ws-stat-warn b { color: #fbbf24; }
.ws-stat-err b { color: #f87171; }

/* ── Visit school button in card header ────────────────────── */
.ws-visit-btn { font-size: 12.5px; padding: 5px 10px; margin-left: auto;
  text-decoration: none; flex: none; }

/* ── SA/DPA signing status ─────────────────────────────────── */
.ws-sigs { display: flex; flex-direction: column; gap: 5px; }
.ws-sig-row { font-size: 12.5px; padding: 5px 8px; border-radius: 7px; }
.ws-sig-ok   { background: var(--green-soft); color: var(--green); }
.ws-sig-missing { background: var(--danger-soft); color: var(--danger); }
.ws-sig-row .slug { margin-left: 6px; opacity: .7; }

/* ── Pending invites in school card ────────────────────────── */
.ws-invite-list { display: flex; flex-direction: column; gap: 5px; }
.ws-invite-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 5px 8px; background: var(--canvas); border-radius: 7px; }
.ws-invite-row .mono { font-family: ui-monospace,monospace; font-size: 11.5px; flex: none; }
.ws-invite-row span { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── FVK portal overview ───────────────────────────────────── */
.fvk-api-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  background: var(--blue-soft); border-radius: 12px; margin-bottom: 20px;
  font-size: 13.5px; border: 1px solid rgba(37,99,235,.2); }
.fvk-api-banner span:first-child { font-size: 20px; flex: none; }
.fvk-api-banner b { display: block; font-weight: 700; color: var(--blue); margin-bottom: 2px; }
.fvk-api-banner span:last-child { color: var(--ink-soft); }
.fvk-step-list, .fvk-doc-list { display: flex; flex-direction: column; gap: 7px; }
.fvk-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 7px 0;
  border-bottom: 1px solid var(--line); }
.fvk-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--canvas);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted); flex: none; }
.fvk-doc { font-size: 13.5px; padding: 6px 0; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); }
.ws-tab-dim { opacity: .45; cursor: not-allowed !important; }

/* ── Builder tab ───────────────────────────────────────────── */
.bld-section { margin-bottom: 28px; }
.bld-section-head { margin-bottom: 14px; }
.bld-section-head h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.bld-module-list { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.bld-row { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px; }
.bld-icon { font-size: 18px; flex: none; }
.bld-label { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.bld-toggle { flex: none; position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.bld-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.bld-track { width: 40px; height: 22px; background: var(--border); border-radius: 999px;
  transition: background .15s; display: block; }
.bld-toggle input:checked + .bld-track { background: var(--blue); }
.bld-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.bld-toggle input:checked + .bld-track::after { transform: translateX(18px); }
.bld-toggle input:disabled + .bld-track { opacity: .5; cursor: not-allowed; }
.bld-step-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bld-step-row { display: flex; align-items: center; gap: 10px; background: var(--canvas);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; }
.bld-step-type { font-size: 15px; flex: none; }
.bld-step-label { flex: 1; min-width: 0; font-weight: 600; }
.bld-add-step { background: var(--canvas); border-radius: 12px; padding: 16px;
  border: 1px dashed var(--border); }

/* ── Deploy tab ────────────────────────────────────────────── */
.dep-toolbar { margin-bottom: 14px; }
.dep-list { display: flex; flex-direction: column; gap: 8px; }
.dep-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dep-latest { border-color: rgba(37,99,235,.3); box-shadow: 0 0 0 1px rgba(37,99,235,.1); }
.dep-row-main { display: flex; align-items: center; gap: 12px; }
.dep-info { flex: 1; min-width: 0; }
.dep-commit { font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.dep-branch { font-family: ui-monospace, monospace; }
.dep-preview { background: var(--slate-soft); color: var(--slate); }
.dep-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dep-visit { padding: 6px 10px; font-size: 13px; }

/* ── Kunder (customers) page ───────────────────────────────── */
.cust-stats-bar { display: flex; align-items: center; gap: 14px; font-size: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cust-stats-bar b { font-weight: 700; }
.cust-search { font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; margin-left: auto; width: 200px; }
.cust-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
/* Monitoring nav badge for down services */
.nav-badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  margin-left: auto; }
.nav-badge-err { background: var(--danger); color: #fff; }
.cust-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cust-filter-btn { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-soft); transition: background .1s; }
.cust-filter-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.cust-filter-btn:hover:not(.active) { background: var(--canvas); }
.cust-header { display: grid; grid-template-columns: 44px 1fr 140px 80px 90px;
  gap: 12px; padding: 6px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.cust-list { display: flex; flex-direction: column; gap: 6px; }
.cust-row { display: grid; grid-template-columns: 44px 1fr 140px 80px 90px;
  gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer; transition: box-shadow .1s, transform .1s; }
.cust-row:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); transform: translateY(-1px); }
.cust-product-badge { width: 32px; height: 32px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; font-size: 16px; }
.cust-name-col { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-name-col b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-prog-col { display: flex; align-items: center; gap: 8px; }
.cust-prog-bar { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.cust-prog-fill { height: 100%; border-radius: 999px; transition: width .3s; }

/* Compact sortable customers table (scales to many schools) */
.cust-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.cust-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cust-table thead th { position: sticky; top: 0; background: var(--card); text-align: left;
  padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 2px solid var(--border); white-space: nowrap; z-index: 1; }
.cust-table th.num, .cust-table td.num { text-align: right; }
.cust-table th.cust-sortable { cursor: pointer; user-select: none; }
.cust-table th.cust-sortable:hover { color: var(--ink); }
.cust-table tr.cust-row { display: table-row; cursor: pointer; background: transparent;
  border: none; border-radius: 0; box-shadow: none; transform: none; transition: background .1s; }
.cust-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cust-table tbody tr.cust-row:hover { background: var(--canvas); box-shadow: none; transform: none; }
.cust-table tbody tr.cust-row:last-child td { border-bottom: none; }
.cust-c-name b { font-weight: 600; }
.cust-c-prod { white-space: nowrap; }
.cust-c-prod .cust-product-badge { width: 22px; height: 22px; font-size: 13px; border-radius: 6px;
  display: inline-flex; vertical-align: middle; }
.cust-c-prog { white-space: nowrap; }
.cust-c-prog .cust-prog-bar { display: inline-block; width: 72px; height: 7px; flex: none; vertical-align: middle; }
.cust-c-prog .cust-prog-label { margin-left: 6px; }
.cust-c-act { white-space: nowrap; text-align: right; }
.cust-c-act .btn-ghost { padding: 4px 8px; font-size: 13px; }
.cust-table tbody tr.cust-row-demo td { background: color-mix(in srgb, #fef3c7 16%, var(--card)); }
.cust-prog-fill.prog-done { background: var(--green); }
.cust-prog-fill.prog-mid  { background: var(--amber); }
.cust-prog-fill.prog-low  { background: var(--danger); }
.cust-prog-label { font-size: 12px; color: var(--muted); font-weight: 600; flex: none; }
/* Segmented onboarding tracker + click-through checklist */
.cust-prog-seg { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; cursor: pointer; }
.cust-seg { width: 11px; height: 7px; border-radius: 2px; background: #e2e8f0; transition: background .1s, transform .08s; }
.cust-seg.done { background: #16a34a; }
.cust-prog-seg:hover .cust-seg { transform: translateY(-1px); }
.cust-ob-pop { position: absolute; z-index: 200; width: 262px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.16); padding: 10px 12px; font-size: 13px; }
.cust-ob-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.cust-ob-step { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.cust-ob-tick { width: 16px; text-align: center; color: #94a3b8; font-weight: 700; flex: none; }
.cust-ob-step.done .cust-ob-tick { color: #16a34a; }
.cust-ob-step.done .cust-ob-label { color: var(--muted); }
.cust-ob-label { flex: 1; min-width: 0; }
.cust-ob-go { border: 0; background: #eff6ff; color: #2563eb; border-radius: 6px; padding: 2px 8px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; flex: none; }
.cust-ob-go:hover { background: #dbeafe; }
.cust-stats-col { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cust-issues { color: var(--danger); font-weight: 700; }
.cust-actions-col { display: flex; justify-content: flex-end; }
.cust-open { font-size: 13px; padding: 6px 10px; }
.cust-empty-product { display: grid; grid-template-columns: 44px 1fr 140px 80px 90px;
  align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 11px;
  font-size: 13.5px; margin-bottom: 6px; }
.cust-unconn { font-size: 13px; color: var(--muted); margin-top: 16px; padding: 10px 14px;
  background: var(--canvas); border-radius: 9px; }
.cust-unconn b { color: var(--ink-soft); }

/* ── Progress bar with CSS variable ───────────────────────── */
.progress-bar { width: var(--pct, 0%); }

/* ── Onboarding wizard — new step styles ──────────────────── */
.ob-section-head { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ob-section-head:first-child { margin-top: 0; }
.ob-section-head .ob-same-toggle { float: right; font-size: 12px; text-transform: none; letter-spacing: 0;
  font-weight: 500; display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink-soft); }
.ob-same-toggle input { cursor: pointer; }
.ob-compliance-empty { text-align: center; padding: 20px 0 10px; }
.ob-compliance-empty .ph-icon { font-size: 40px; }
.ob-compliance-empty h3 { font-size: 17px; font-weight: 700; margin: 8px 0 6px; }
.ob-compliance-empty p { color: var(--muted); font-size: 13.5px; }
.ob-compliance-placeholder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; text-align: left; }
@media (max-width: 520px) { .ob-compliance-placeholder { grid-template-columns: 1fr; } }
.ob-comp-block { background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.ob-comp-block h4 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.ob-comp-method { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ob-comp-method label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ob-comp-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ob-bank-placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ob-bank-row { display: flex; gap: 10px; font-size: 13.5px; }
.ob-bank-row span { color: var(--muted); min-width: 80px; }
.ob-modal { max-height: 90vh; display: flex; flex-direction: column; }
.ob-body { flex: 1; overflow-y: auto; }

/* ── Onboarding — addon mode ───────────────────────────────── */
.ob-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.ob-mode-opt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--card); border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: border-color .12s; }
.ob-mode-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ob-mode-opt span { font-size: 14px; font-weight: 600; }
.ob-mode-opt small { font-size: 11.5px; color: var(--muted); }
.ob-mode-opt.selected,
.ob-mode-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.ob-parent-picker { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.ob-parent-picker select { width: 100%; }
.ob-parent-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; flex-wrap: wrap; }

/* ── Onboarding — generate invoice card ───────────────────── */
.ob-gen-record-card { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; margin-top: 8px; cursor: pointer;
  background: var(--canvas); border: 2px solid var(--border); border-radius: 14px;
  transition: border-color .15s, background .15s; }
.ob-gen-record-card:hover { border-color: var(--blue); }
.ob-gen-record-card.checked { background: var(--blue-soft); border-color: var(--blue); }
.ob-gen-record-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; }
.ob-gen-record-icon { font-size: 28px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.ob-gen-record-left div { display: flex; flex-direction: column; gap: 4px; }
.ob-gen-record-left b { font-size: 15px; font-weight: 700; color: var(--ink); }
.ob-gen-record-left span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ob-gen-record-card input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0;
  accent-color: var(--blue); cursor: pointer; }

/* ── Compliance step — document buttons ────────────────────── */
.ob-doc-btns { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.ob-doc-btns .btn-mini { font-size: 12px; padding: 5px 10px; }

/* ── Summary step — document print dropdown ─────────────────── */
.ob-print-menu { position: relative; }
.ob-print-dropdown { position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); min-width: 240px; z-index: 200;
  display: flex; flex-direction: column; overflow: hidden; }
.ob-print-dropdown.hidden { display: none; }
.ob-pdoc-btn { background: none; border: none; border-bottom: 1px solid var(--line);
  text-align: left; padding: 10px 14px; font-size: 13px; font-family: inherit;
  cursor: pointer; color: var(--ink); transition: background .1s; }
.ob-pdoc-btn:last-child { border-bottom: none; }
.ob-pdoc-btn:hover { background: var(--blue-soft); color: var(--blue); }

/* ── Customers — addon chips ───────────────────────────────── */
.cust-row-addon { background: color-mix(in srgb, var(--blue-soft) 35%, var(--card)); }
.cust-addon-chip { background: #e8f0fe; color: #1a56db; border: 1px solid #c7d7fc; }

/* ── Demo / test school markers ─────────────────────────────── */
/* Demo schools stay visible everywhere but are visually tagged and
   excluded from real budget/revenue totals. */
.chip-demo { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.cust-row-demo,
.bill-row-demo { background: color-mix(in srgb, #fef3c7 30%, var(--card)); }
.cust-row-demo .cust-name-col b,
.bill-row-demo .bill-name { opacity: .92; }
.cust-demo-stat { color: #92400e; }
.cust-demo-stat b { color: #92400e; }
.cust-filter-demo.active { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cust-demo-card { cursor: pointer; background: color-mix(in srgb, #fef3c7 25%, var(--card)); }
.cust-demo-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }

/* Onboarding wizard demo toggle */
.ob-demo-toggle { display: flex; flex-direction: column; gap: 2px;
  margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border);
  border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.ob-demo-toggle:hover { background: var(--canvas); }
.ob-demo-toggle.on { background: #fffbeb; border-color: #fde68a; }
.ob-demo-toggle input { margin-right: 8px; }
.ob-demo-toggle span { font-weight: 600; }
.ob-demo-toggle small { color: var(--text-muted); font-size: 11.5px; }
.ob-demo-sub { display: flex; flex-direction: column; gap: 2px;
  margin: 8px 0 0 18px; padding: 10px 14px; border-left: 2px solid #fde68a;
  background: #fffbeb; border-radius: 0 8px 8px 0; cursor: pointer; }
.ob-demo-sub span { font-weight: 600; font-size: 12.5px; }
.ob-demo-sub small { color: var(--text-muted); font-size: 11.5px; }
.ob-demo-sub input { margin-right: 8px; }

/* Portal-schools modal demo checkbox */
.ps-demo-check { display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); }
.ps-demo-check input { width: auto; }

/* Onboarding: pricing basis toggle + marketing consent */
.ob-basis-toggle { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 13px; }
.ob-basis-toggle label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ob-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); font-size: 13px; }
.ob-consent input { margin-top: 2px; flex: none; }
.ob-consent .set-hint { display: block; margin-top: 4px; }

/* ── Live health chips ─────────────────────────────────────── */
.health-chip.health-ok    { background: var(--green-soft); color: var(--green); }
.health-chip.health-warn  { background: var(--amber-soft); color: var(--amber); }
.health-chip.health-down  { background: var(--danger-soft); color: var(--danger); animation: pulse-down 2s infinite; }
.health-chip.health-unknown { background: var(--slate-soft); color: var(--slate); }
@keyframes pulse-down { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Monitoring page ───────────────────────────────────────── */
.mon-toolbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; }
.mon-last-check { font-size: 13px; color: var(--muted); }
.mon-last-check b { color: var(--ink); }
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mon-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); cursor: pointer; transition: transform .1s, box-shadow .15s; }
.mon-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.1); }
.mon-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mon-icon { font-size: 20px; width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.mon-info { flex: 1; min-width: 0; }
.mon-info b { display: block; font-size: 15px; font-weight: 700; }
.mon-info .slug { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; }
.mon-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted);
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.mon-meta b { color: var(--ink); font-weight: 600; }
.mon-visit { color: var(--blue); text-decoration: none; font-weight: 600; margin-left: auto; }
.mon-visit:hover { text-decoration: underline; }
.mon-no-url { font-style: italic; }
.mon-config { color: var(--blue); }

/* ── Document library ──────────────────────────────────────── */
.lib-toolbar { margin-bottom: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lib-group { margin-bottom: 24px; }
.lib-group-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.lib-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px; box-shadow: var(--shadow); }
.lib-row-main { display: flex; align-items: flex-start; gap: 12px; }
.lib-icon { font-size: 20px; flex: none; padding-top: 2px; }
.lib-info { flex: 1; min-width: 0; }
.lib-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.lib-summary { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.lib-kollen-note { font-size: 12.5px; color: var(--blue); margin: 6px 0 0;
  background: var(--blue-soft); border-radius: 8px; padding: 6px 10px; }
.lib-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.lib-flags { margin: 10px 0 0 32px; padding: 8px 12px; background: var(--amber-soft);
  border-radius: 8px; font-size: 12.5px; color: var(--amber); list-style: none; }
.lib-flags li { padding: 2px 0; }
.lib-archived-toggle { margin-top: 8px; }

/* ── Skolkollen animated loader (replaces thin blue bar) ─────── */
#sk-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#sk-loader.skl-in  { opacity: 1;  pointer-events: all; }
#sk-loader.skl-out { opacity: 0;  pointer-events: none; }

/* Central stage */
.skl-stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative;
}

/* The K logo */
.skl-k {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; color: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.5), 0 0 32px rgba(37,99,235,.4),
              0 0 64px rgba(37,99,235,.2);
  animation: kGlow 2s ease-in-out infinite;
  position: relative; z-index: 2;
}
@keyframes kGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37,99,235,.5), 0 0 32px rgba(37,99,235,.4), 0 0 64px rgba(37,99,235,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(37,99,235,.3), 0 0 48px rgba(37,99,235,.6), 0 0 80px rgba(37,99,235,.3); transform: scale(1.04); }
}

/* Orbiting emojis */
.skl-orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
}
.skl-emoji {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.skl-e1 { animation: orbit1 3.2s linear infinite; }
.skl-e2 { animation: orbit2 4.0s linear infinite; }
.skl-e3 { animation: orbit3 2.8s linear infinite reverse; }
.skl-e4 { animation: orbit4 5.0s linear infinite; }

@keyframes orbit1 {
  from { transform: rotate(0deg)   translateX(72px) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(72px) rotate(-360deg); }
}
@keyframes orbit2 {
  from { transform: rotate(90deg)  translateX(88px) rotate(-90deg);  }
  to   { transform: rotate(450deg) translateX(88px) rotate(-450deg); }
}
@keyframes orbit3 {
  from { transform: rotate(180deg) translateX(60px) rotate(-180deg); }
  to   { transform: rotate(540deg) translateX(60px) rotate(-540deg); }
}
@keyframes orbit4 {
  from { transform: rotate(270deg) translateX(78px) rotate(-270deg); }
  to   { transform: rotate(630deg) translateX(78px) rotate(-630deg); }
}

/* "Laddar..." text with animated dots */
.skl-text {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.7); letter-spacing: .04em; margin-top: 48px;
}
.skl-dots::after {
  content: '';
  animation: dotsAnim 1.4s steps(4, end) infinite;
}
@keyframes dotsAnim {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Running teacher along the bottom —
   🏃 faces right naturally. Starts LEFT, runs toward 🏫 on the RIGHT.
   No flipping at all — just clean left→right movement with bounce. */
.skl-track {
  width: 300px; height: 44px; position: relative;
}
/* School on the RIGHT, pulses with a glow as runner approaches */
.skl-school-end {
  font-size: 28px; position: absolute; right: 0; bottom: 6px;
  filter: drop-shadow(0 0 8px rgba(37,99,235,.6));
  animation: schoolPulse 2.4s ease-in-out infinite;
}
@keyframes schoolPulse {
  0%, 70%   { transform: scale(1); filter: drop-shadow(0 0 8px rgba(37,99,235,.4)); }
  85%, 93%  { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(37,99,235,.9)); }
  100%      { transform: scale(1); filter: drop-shadow(0 0 8px rgba(37,99,235,.4)); }
}
/* Runner — no transform flip, just bounces up/down while moving left→right */
.skl-runner {
  font-size: 28px; position: absolute; bottom: 8px; left: 0;
  display: inline-block;
  animation: runAcross 2.4s ease-in-out infinite;
}
@keyframes runAcross {
  0%    { left: 0;                    transform: scaleX(-1) translateY(0); }
  8%    { left: 6%;                   transform: scaleX(-1) translateY(-6px); }
  16%   { left: 16%;                  transform: scaleX(-1) translateY(0); }
  24%   { left: 26%;                  transform: scaleX(-1) translateY(-6px); }
  32%   { left: 38%;                  transform: scaleX(-1) translateY(0); }
  40%   { left: 48%;                  transform: scaleX(-1) translateY(-6px); }
  48%   { left: 58%;                  transform: scaleX(-1) translateY(0); }
  56%   { left: 67%;                  transform: scaleX(-1) translateY(-6px); }
  64%   { left: 75%;                  transform: scaleX(-1) translateY(0); }
  72%   { left: 80%;                  transform: scaleX(-1) translateY(-5px); }
  80%   { left: calc(100% - 56px);    transform: scaleX(-1) translateY(0); }
  85%, 95% { left: calc(100% - 56px); transform: scaleX(-1) translateY(0); }
  100%  { left: 0;                    transform: scaleX(-1) translateY(0); }
}
/* Glowing track */
.skl-track-line {
  height: 2px;
  background: linear-gradient(90deg, rgba(37,99,235,.5), rgba(255,255,255,.2), rgba(37,99,235,.5));
  border-radius: 999px;
  position: absolute; bottom: 4px; left: 0; right: 32px;
}

/* ── School list item stagger-in ───────────────────────────── */
.ws-list-item {
  animation: itemIn .3s cubic-bezier(.4,0,.2,1) both;
}
.ws-list-item:nth-child(1) { animation-delay: .03s; }
.ws-list-item:nth-child(2) { animation-delay: .08s; }
.ws-list-item:nth-child(3) { animation-delay: .13s; }
.ws-list-item:nth-child(4) { animation-delay: .18s; }
.ws-list-item:nth-child(n+5) { animation-delay: .22s; }
@keyframes itemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Skeleton shimmer base ─────────────────────────────────── */
@keyframes sk-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.sk-line, .sk-icon, .sk-chip, .sk-btn, .sk-circle,
.sk-dot-circle, .sk-bar, .skeleton-card, .sk-cust-row {
  background: linear-gradient(90deg, #ece9e1 25%, #f4f1ea 50%, #ece9e1 75%);
  background-size: 800px 100%;
  animation: sk-sweep 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* ── Skeleton project cards ────────────────────────────────── */
.skeleton-card {
  height: 220px; border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  background-color: #f0ede5;
}
.sk-head { display: flex; align-items: center; gap: 12px; }
.sk-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-line { height: 13px; }
.sk-w20 { width: 20%; } .sk-w40 { width: 40%; } .sk-w50 { width: 50%; }
.sk-w60 { width: 60%; } .sk-w70 { width: 70%; } .sk-w80 { width: 80%; }
.sk-w90 { width: 90%; } .sk-w100 { width: 100%; }
.sk-chips { display: flex; gap: 8px; }
.sk-chip { height: 22px; width: 64px; border-radius: 999px; }
.sk-btn  { height: 32px; width: 80px; border-radius: 9px; }

/* ── Skeleton school list ──────────────────────────────────── */
.sk-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  background: rgba(236,233,225,.6);
  animation: sk-sweep 1.6s ease-in-out infinite;
  background-size: 800px 100%;
}
.sk-dot-circle { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── Skeleton customer rows ────────────────────────────────── */
.sk-cust-row {
  display: grid; grid-template-columns: 32px 1fr 140px 60px;
  gap: 12px; align-items: center; padding: 12px 14px; border-radius: 11px;
  background-color: #f0ede5;
}
.sk-circle { width: 32px; height: 32px; border-radius: 50%; }
.sk-bar    { height: 6px; border-radius: 999px; }

/* ── Skeleton workspace content ────────────────────────────── */
.sk-content { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }

/* ── K-button loading ring ─────────────────────────────────── */
#agent-fab.kollen-thinking::after {
  content: '';
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(37,99,235,.8);
  border-right-color: rgba(37,99,235,.4);
  animation: kollen-spin .8s linear infinite;
}
@keyframes kollen-spin {
  to { transform: rotate(360deg); }
}
#agent-fab { position: relative; }   /* ensure ::after is positioned */

/* ── Portal settings ───────────────────────────────────────── */
.ps-banner { background: var(--amber-soft); color: var(--amber); font-weight: 600; font-size: 13.5px;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; }
.ps-rows { display: flex; flex-direction: column; gap: 14px; }
.ps-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--canvas); border-radius: 11px; border: 1px solid var(--border); }
.ps-row.ps-missing { border-color: var(--amber); background: var(--amber-soft); }
.ps-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-label b { font-size: 14px; font-weight: 700; }
.ps-flag { font-size: 11px; }
.ps-input-wrap { display: flex; align-items: center; gap: 8px; }
.ps-input { flex: 1; font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.ps-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ps-saved { font-size: 12px; font-weight: 700; color: var(--green); width: 20px; }
.ps-meta { font-size: 11.5px; color: var(--muted); }
#portal-settings-btn { position: relative; }
.ps-btn-warn::after { content: ''; position: absolute; top: 8px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--navy); }

/* ── Inline confirmation (replaces window.confirm) ─────────── */
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.confirm-msg { font-size: 13px; color: var(--danger); font-weight: 600; }
.confirm-yes { font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: var(--danger); color: #fff; border: none; border-radius: 8px; padding: 5px 11px; }
.confirm-yes:hover { background: #b91c1c; }
.confirm-no  { font-size: 14px; }

/* ── Documents tab ─────────────────────────────────────────── */
.doc-header { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.doc-filter { margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); }
.doc-filter select { font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-left: 8px; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow); }
.doc-row-main { display: flex; align-items: center; gap: 12px; }
.doc-icon { font-size: 20px; flex: none; }
.doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.doc-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; }
.doc-cat { background: var(--canvas); color: var(--muted); font-size: 11px; }
.doc-req { background: var(--amber-soft); color: var(--amber); font-size: 11px; }
.doc-del { opacity: 0; transition: opacity .1s; }
.doc-row:hover .doc-del { opacity: 1; }
.doc-sig-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.doc-add-wrap { margin-bottom: 18px; }
.doc-add-wrap summary { list-style: none; }
.doc-add-wrap summary::-webkit-details-marker { display: none; }
.doc-add-form { background: var(--canvas); border-radius: 12px; padding: 16px;
  margin-top: 10px; border: 1px solid var(--border); }

/* ── Kollen — Knowledge agent ──────────────────────────────── */
/* ── The All-Seeing K ──────────────────────────────────────── */
/* A geometric eye: rotating iris spokes, K as the pupil,
   slow blink, pulsing glow. Built from pure CSS. */

.kollen-eye {
  position: relative; border-radius: 50%;
  overflow: hidden; flex: none;
  /* Outer glow ring handled per-size */
}

/* ── Iris: radiating spokes on a deep navy base ─────────────── */
.kei-iris {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    #071020 0deg,  #1a3a6e 6deg,  #071020 10deg,
    #071020 30deg, #1a3a6e 36deg, #071020 40deg,
    #071020 60deg, #1a3a6e 66deg, #071020 70deg,
    #071020 90deg, #1a3a6e 96deg, #071020 100deg,
    #071020 120deg,#1a3a6e 126deg,#071020 130deg,
    #071020 150deg,#1a3a6e 156deg,#071020 160deg,
    #071020 180deg,#1a3a6e 186deg,#071020 190deg,
    #071020 210deg,#1a3a6e 216deg,#071020 220deg,
    #071020 240deg,#1a3a6e 246deg,#071020 250deg,
    #071020 270deg,#1a3a6e 276deg,#071020 280deg,
    #071020 300deg,#1a3a6e 306deg,#071020 310deg,
    #071020 330deg,#1a3a6e 336deg,#071020 360deg
  );
  animation: irisRotate 10s linear infinite;
}
@keyframes irisRotate {
  to { transform: rotate(360deg); }
}

/* ── Pupil: dark center with the K ─────────────────────────── */
.kei-pupil {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #0d1f3c, #020c1b);
  display: flex; align-items: center; justify-content: center;
  animation: pupilBreath 3s ease-in-out infinite;
  /* Look-around: JS sets --kei-x / --kei-y to glance / follow the mouse */
  transform: translate(var(--kei-x, 0px), var(--kei-y, 0px));
  transition: transform .16s ease-out;
}
.kei-pupil span {
  font-family: 'Inter', sans-serif; font-weight: 900; color: #fff;
  line-height: 1; letter-spacing: -.03em;
  text-shadow: 0 0 8px rgba(37,99,235,.9), 0 0 16px rgba(37,99,235,.5);
}
@keyframes pupilBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.0), inset 0 0 8px rgba(37,99,235,.3); }
  50%       { box-shadow: 0 0 12px 2px rgba(37,99,235,.4), inset 0 0 14px rgba(37,99,235,.5); }
}

/* ── Blink: an eyelid that slides down occasionally ─────────── */
.kei-blink {
  position: absolute; inset: 0; border-radius: 50%;
  background: #071020;
  transform: scaleY(0); transform-origin: top;
  animation: eyeBlink 7s ease-in-out infinite;
}
@keyframes eyeBlink {
  0%, 88%, 100% { transform: scaleY(0); }
  92%            { transform: scaleY(1); }
  96%            { transform: scaleY(0); }
}

/* ── FAB size (58×58) ───────────────────────────────────────── */
#agent-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer; border: none;
  background: transparent; padding: 0;
  box-shadow: 0 0 0 2.5px rgba(37,99,235,.5), 0 0 24px rgba(37,99,235,.3),
              0 8px 24px rgba(11,18,34,.6);
  transition: transform .12s, box-shadow .15s;
}
#agent-fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(37,99,235,.7), 0 0 36px rgba(37,99,235,.45),
              0 12px 32px rgba(11,18,34,.7);
}
.kei-fab { width: 58px; height: 58px; }
.kei-fab .kei-pupil { inset: 16px; }
.kei-fab .kei-pupil span { font-size: 16px; }

/* ── Avatar size (40×40, in panel header) ───────────────────── */
.kei-avatar { width: 40px; height: 40px;
  box-shadow: 0 0 0 1.5px rgba(37,99,235,.5), 0 0 14px rgba(37,99,235,.3); }
.kei-avatar .kei-pupil { inset: 11px; }
.kei-avatar .kei-pupil span { font-size: 11px; }
.agent-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--navy);
  box-shadow: 0 0 6px rgba(34,197,94,.6); z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   KOLLEN COMES ALIVE — blinks, glances & rare wacky antics
   Driven by js/kollen-life.js, which toggles one-shot classes
   on .kollen-eye. All pure CSS so it stays buttery & CSP-safe.
   ════════════════════════════════════════════════════════════ */

/* When the JS engine is running, it owns all blinking — silence the
   default infinite CSS blink so the two don't fight. (If JS fails to
   load, body never gets .kollen-alive and the original blink remains.) */
body.kollen-alive .kei-blink { animation: none; }

/* Pop-outs need to escape the round eye, and the eye must sit above
   anything peeking from "behind" it. */
#agent-fab { overflow: visible; }
.kollen-eye { z-index: 1; }

/* ── Blink family (eyelid = .kei-blink, slides down from top) ─── */
.kollen-eye.k-blink   .kei-blink { animation: keiBlink1  .34s ease-in-out; }
.kollen-eye.k-blink2  .kei-blink { animation: keiBlink2  .66s ease-in-out; }
.kollen-eye.k-sleepy  .kei-blink { animation: keiSleepy  .95s ease-in-out; }
.kollen-eye.k-flutter .kei-blink { animation: keiFlutter .78s ease-in-out; }
.kollen-eye.k-wink    .kei-blink { animation: keiBlink1  .55s ease-in-out; }

@keyframes keiBlink1 { 0%,100% { transform: scaleY(0); } 50% { transform: scaleY(1); } }
@keyframes keiBlink2 {
  0% { transform: scaleY(0); } 18% { transform: scaleY(1); } 36% { transform: scaleY(0); }
  54% { transform: scaleY(1); } 72%,100% { transform: scaleY(0); }
}
@keyframes keiSleepy { /* slow, heavy-lidded close + hold */
  0% { transform: scaleY(0); } 38%,62% { transform: scaleY(1); } 100% { transform: scaleY(0); }
}
@keyframes keiFlutter { /* rapid triple */
  0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 24% { transform: scaleY(0); }
  36% { transform: scaleY(1); } 48% { transform: scaleY(0); }
  60% { transform: scaleY(1); } 72%,100% { transform: scaleY(0); }
}

/* ── Wink: one eyelid dip + a cheeky head-tilt ─────────────────── */
.kollen-eye.k-wink { animation: keiTilt .55s ease-in-out; }
@keyframes keiTilt { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-9deg); } }

/* ── Glance / dart: pupil flicks toward a random spot, then back ─ */
.kollen-eye.k-look .kei-pupil { animation: keiLook 1.5s ease-in-out; }
@keyframes keiLook {
  0%,100% { transform: translate(0,0); }
  22%,68% { transform: translate(var(--dx, 5px), var(--dy, 0px)); }
}

/* ── Eye-roll: pupil circles the iris ──────────────────────────── */
.kollen-eye.k-roll .kei-pupil { animation: keiRoll 1.15s ease-in-out; }
@keyframes keiRoll {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(0,-5px); } 40% { transform: translate(5px,0); }
  60% { transform: translate(0,5px); }  80% { transform: translate(-5px,0); }
}

/* ── Surprise: pupil dilates, whole eye recoils ────────────────── */
.kollen-eye.k-surprise { animation: keiRecoil .9s ease-out; }
.kollen-eye.k-surprise .kei-pupil { animation: keiDilate .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes keiRecoil { 0%,100% { transform: scale(1); } 26% { transform: scale(1.13); } }
@keyframes keiDilate {
  0%,100% { transform: scale(1); } 28% { transform: scale(1.5); } 52% { transform: scale(.88); }
}

/* ── Dizzy: woozy wobble ───────────────────────────────────────── */
.kollen-eye.k-dizzy { animation: keiDizzy 1.6s ease-in-out; }
.kollen-eye.k-dizzy .kei-pupil { animation: keiRoll 1.6s linear; }
@keyframes keiDizzy {
  0%,100% { transform: rotate(0); } 25% { transform: rotate(13deg); }
  50% { transform: rotate(-13deg); } 75% { transform: rotate(7deg); }
}

/* ── Sneeze: wind-up then a sharp "achoo" shake ────────────────── */
.kollen-eye.k-sneeze { animation: keiSneeze .85s ease-in-out; }
@keyframes keiSneeze {
  0%,100% { transform: translate(0,0); }
  18% { transform: translate(0,-3px) scale(1.06); }   /* inhale */
  34% { transform: translate(0,4px) scale(1.12); }    /* ACHOO */
  48% { transform: translate(-3px,0); } 60% { transform: translate(3px,0); }
  72% { transform: translate(-2px,0); } 84% { transform: translate(2px,0); }
}

/* ── Colour shift: hue-rotate the entire eye for a few seconds ──── */
.kollen-eye.k-color { animation: keiColor 4s ease-in-out; }
@keyframes keiColor {
  0%,100% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(var(--hue, 180deg)) saturate(1.35); }
}
.kollen-eye.k-rainbow { animation: keiRainbow 4.5s linear; }
@keyframes keiRainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* ── Spawned emoji pop-outs (appended to #agent-fab) ───────────── */
.kollen-popout {
  position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; pointer-events: none;
  z-index: 0;            /* behind the eye → emerges from "behind" */
  opacity: 0; will-change: transform, opacity;
}
.kollen-popout.peek { animation: keiPeek var(--dur, 4.6s) ease-in-out forwards; }
@keyframes keiPeek {
  0%   { opacity: 0; transform: translate(0,0) scale(.4); }
  12%  { opacity: 1; transform: translate(var(--ex,0px), var(--ey,-40px)) scale(1) rotate(-7deg); }
  30%  { transform: translate(var(--ex,0px), var(--ey,-40px)) scale(1) rotate(7deg); }
  50%  { transform: translate(var(--ex,0px), var(--ey,-40px)) scale(1) rotate(-5deg); }
  70%  { transform: translate(var(--ex,0px), var(--ey,-40px)) scale(1) rotate(5deg); }
  86%  { opacity: 1; transform: translate(var(--ex,0px), var(--ey,-40px)) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(0,0) scale(.4); }   /* duck back behind */
}

/* Floating "z z z" when sleepy (in front of the eye) */
.kollen-zzz {
  position: absolute; top: 28%; left: 56%;
  font-family: 'Inter', sans-serif; font-weight: 800; color: #9bd0ff;
  pointer-events: none; opacity: 0; z-index: 3;
  text-shadow: 0 0 6px rgba(37,99,235,.7);
}
.kollen-zzz.go { animation: keiZzz 2.4s ease-out forwards; }
@keyframes keiZzz {
  0% { opacity: 0; transform: translate(0,0) scale(.6) rotate(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px,-28px) scale(1.25) rotate(12deg); }
}

/* Sunglasses drop — "deal with it" (sits on the eye) */
.kollen-shades {
  position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -16px;
  width: 32px; text-align: center; font-size: 25px; line-height: 1;
  pointer-events: none; z-index: 3; opacity: 0;
}
.kollen-shades.go { animation: keiShades 3.6s ease-in-out forwards; }
@keyframes keiShades {
  0% { opacity: 0; transform: translateY(-44px); }
  13% { opacity: 1; transform: translateY(0); }     /* drop */
  17% { transform: translateY(3px); }               /* bounce */
  22%,82% { transform: translateY(0); }             /* sit, deal with it */
  100% { opacity: 0; transform: translateY(-44px); }/* lift off */
}

/* Heart-eyes — Kollen adores you (over the pupil) */
.kollen-heart {
  position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px;
  font-size: 20px; line-height: 1; pointer-events: none; z-index: 3; opacity: 0;
}
.kollen-heart.go { animation: keiHeart 2.4s ease-in-out forwards; }
@keyframes keiHeart {
  0% { opacity: 0; transform: scale(.3); }
  18% { opacity: 1; transform: scale(1.25); }
  34% { transform: scale(1); } 50% { transform: scale(1.2); } 66% { transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); }
}

/* Be calm if the user prefers reduced motion: gentle blinks only. */
@media (prefers-reduced-motion: reduce) {
  .kollen-eye.k-look .kei-pupil,
  .kollen-eye.k-roll .kei-pupil,
  .kollen-eye.k-dizzy .kei-pupil,
  .kollen-eye.k-surprise .kei-pupil { animation: none; }
  .kollen-eye.k-dizzy, .kollen-eye.k-sneeze,
  .kollen-eye.k-surprise, .kollen-eye.k-wink,
  .kollen-eye.k-rainbow { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   KOLLEN CHAT PANEL — full redesign
   Dark deep-space interior, glass bubbles, aurora bg,
   asymmetric shape, dramatic header with the all-seeing K
   ════════════════════════════════════════════════════════════ */

#agent-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 200;
  width: 370px; max-width: calc(100vw - 290px);
  height: 520px; max-height: calc(100vh - 120px);
  /* Asymmetric — bottom-right clipped to anchor near FAB */
  border-radius: 24px 24px 6px 24px;
  /* Deep space interior */
  background: #040d1a;
  border: 1px solid rgba(37,99,235,.25);
  box-shadow:
    0 0 0 1px rgba(37,99,235,.1),
    0 8px 32px rgba(7,16,40,.6),
    0 32px 80px rgba(7,16,40,.5),
    0 0 60px rgba(37,99,235,.08);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1),
              height .3s cubic-bezier(.4,0,.2,1),
              box-shadow .2s;
}
#agent-panel.expanded {
  width: min(580px, calc(100vw - 290px));
  height: min(82vh, calc(100vh - 120px));
  border-radius: 28px 28px 6px 28px;
}

/* ── Header: full-width dramatic dark gradient ────────────── */
.agent-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg,
    #071428 0%, #0a1e3c 40%, #071428 100%);
  border-bottom: 1px solid rgba(37,99,235,.18);
  flex: none; position: relative; overflow: hidden;
  user-select: none; /* prevent text selection while dragging */
}
/* Subtle starfield in the header */
.agent-head::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 40%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 50%, rgba(37,99,235,.6) 0%, transparent 100%);
  pointer-events: none;
}
.agent-id { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.agent-head-actions { display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; }
.agent-head-actions .ic { color: #5a7aaa; font-size: 16px; border-radius: 7px; }
.agent-head-actions .ic:hover { color: #a0bce0; background: rgba(255,255,255,.07); }

/* Avatar wrapper */
.agent-ava-wrap { position: relative; flex: none; }

/* Identity text */
.agent-who { display: flex; flex-direction: column; line-height: 1.2; }
.agent-who b { font-size: 15px; font-weight: 700; color: #e8f0fc; letter-spacing: -.01em; }
#kollen-roles { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.kollen-role-badge {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(37,99,235,.18); color: #7aa4e8;
  padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(37,99,235,.25);
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}

/* ── Message area: deep space with aurora ────────────────── */
.agent-msgs {
  flex: 1; overflow-y: scroll; overflow-x: hidden; padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 14px;
  background: #040d1a;
  position: relative; scroll-behavior: smooth;
  /* Fade top AND bottom so messages dissolve at both edges */
  mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 48px,
    #000 calc(100% - 28px),
    transparent 100%);
}
/* Aurora shimmer behind messages */
.agent-msgs::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 85%, rgba(37,99,235,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(99,60,220,.05) 0%, transparent 55%);
  animation: auroraFloat 12s ease-in-out infinite;
}
@keyframes auroraFloat {
  0%, 100% { opacity: .6; transform: translateY(0); }
  33%       { opacity: 1;  transform: translateY(-10px); }
  66%       { opacity: .7; transform: translateY(6px); }
}
.agent-msgs > * { position: relative; z-index: 1; }
.agent-msgs::-webkit-scrollbar { width: 3px; }
.agent-msgs::-webkit-scrollbar-track { background: transparent; }
.agent-msgs::-webkit-scrollbar-thumb { background: rgba(37,99,235,.3); border-radius: 3px; }

/* ── Message bubbles ─────────────────────────────────────── */
.agent-bubble {
  max-width: 86%; font-size: 13.5px; line-height: 1.6;
  padding: 11px 14px; white-space: pre-wrap;
  animation: bubbleRise .22s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bubbleRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Kollen speaks: dark glass from the left */
.agent-bubble.assistant {
  align-self: flex-start;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px 18px 18px 18px;
  color: #c8d8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
/* User speaks: electric blue from the right */
.agent-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6);
  border-radius: 18px 4px 18px 18px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,99,235,.4), 0 1px 0 rgba(255,255,255,.15) inset;
}

/* Links in Kollen's messages */
.kollen-link {
  color: #60a5fa; text-decoration: none; font-weight: 600; word-break: break-word;
  border-bottom: 1px solid rgba(96,165,250,.3);
  transition: border-color .15s;
}
.kollen-link:hover { border-bottom-color: #60a5fa; }

/* ── Input area: pill-shaped, glows on focus ─────────────── */
.agent-input {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 14px 16px;
  /* Same colour as panel — no seam, no border line */
  background: #040d1a;
  flex: none;
}
#agent-q {
  flex: 1; font-family: inherit; font-size: 14px;
  color: #c8d8f0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 14px;
  padding: 10px 14px; resize: none; overflow: hidden;
  line-height: 1.5; max-height: 120px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#agent-q::placeholder { color: rgba(100,130,180,.5); }
#agent-q:focus {
  outline: none;
  border-color: rgba(37,99,235,.6);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 0 20px rgba(37,99,235,.08);
}
.agent-input .btn-primary {
  padding: 10px 16px; border-radius: 12px; flex: none; align-self: flex-end;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border: none;
  box-shadow: 0 4px 12px rgba(37,99,235,.4);
  transition: transform .1s, box-shadow .15s;
}
.agent-input .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,99,235,.5);
}

/* ── WIP badge ──────────────────────────────────────────────── */
.wip-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  background: rgba(245,158,11,.15); color: #d97706;
  border: 1px solid rgba(245,158,11,.3);
  padding: 3px 8px; border-radius: 6px; text-transform: uppercase;
}

/* ── Documents page ─────────────────────────────────────────── */
.lib-section { margin-bottom: 40px; }
.lib-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lib-section-head h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.lib-section-sub { font-size: 12px; color: var(--muted); margin: 0; }
.lib-empty { font-size: 13px; color: var(--muted); padding: 16px 0; }

/* Project chips */
.proj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.proj-chip-wrap { display: flex; align-items: center; gap: 0; }
.chip-add-btn {
  height: 32px; padding: 0 8px; font-size: 16px; font-weight: 400; line-height: 1;
  border: 1.5px solid var(--chip-color, #1e3a5f); border-left: none;
  border-radius: 0 20px 20px 0; background: transparent;
  color: var(--chip-color, #1e3a5f); cursor: pointer;
  transition: background .15s, color .15s;
}
.chip-add-btn:hover { background: var(--chip-color, #1e3a5f); color: #fff; }
.proj-chip-wrap .proj-chip { border-radius: 20px 0 0 20px; }
.proj-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.proj-chip:hover { border-color: var(--chip-color, #1e3a5f); color: var(--text); }
.proj-chip.active { background: color-mix(in srgb, var(--chip-color, #1e3a5f) 12%, transparent); border-color: var(--chip-color, #1e3a5f); color: var(--text); }
.chip-count { background: var(--chip-color, #1e3a5f); color: #fff; font-size: 10px; border-radius: 10px; padding: 1px 6px; }

/* Document cards grid */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(37,99,235,.08); }
.doc-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; align-self: flex-start; }
.doc-card-title { font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.doc-card-title:hover { text-decoration: underline; }
.doc-card-cat { font-size: 11px; color: var(--muted); }
.doc-card-desc { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.doc-card-remove {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; color: var(--muted); opacity: 0;
  transition: opacity .15s;
}
.doc-card:hover .doc-card-remove { opacity: 1; }
.doc-card-remove:hover { color: var(--danger, #ef4444); }

/* ── Drive browser — compact tree ───────────────────────────── */
.ldm-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.drive-browser { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.drive-browser-head { display: flex; align-items: center; gap: 8px; }
.drive-browser-head b { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.drive-search { flex: 1; font-size: 12px; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-width: 0; }
.drive-search:focus { outline: none; border-color: var(--primary); }
.drive-tree { overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px 2px; background: var(--surface); height: min(480px, 60vh); font-size: 12px; }
.dtree-folder summary { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; cursor: pointer; list-style: none; user-select: none; }
.dtree-folder summary::-webkit-details-marker { display: none; }
.dtree-folder summary:hover { background: rgba(37,99,235,.06); }
.dtree-caret { font-size: 7px; color: var(--muted); flex: none; width: 8px; transition: transform .12s; }
.dtree-folder[open] > summary .dtree-caret { transform: rotate(90deg); }
.dtree-folder-icon { font-size: 11px; flex: none; }
.dtree-folder-name { font-size: 11.5px; font-weight: 600; color: var(--text); flex: 1; }
.dtree-file { display: flex; align-items: flex-start; gap: 5px; padding: 3px 6px 3px 8px; border-radius: 5px; }
.dtree-file:hover { background: rgba(37,99,235,.06); }
.dtree-file.selected { background: rgba(37,99,235,.12); }
.dtree-file-icon { font-size: 10px; color: var(--muted); flex: none; margin-top: 2px; }
.dtree-file-name { font-size: 11.5px; flex: 1; line-height: 1.4; color: var(--text); word-break: break-word; }
.dtree-select { flex: none; font-size: 10px; padding: 1px 5px; opacity: 0; background: var(--primary); color: #fff; border-radius: 4px; border: none; cursor: pointer; }
.dtree-file:hover .dtree-select { opacity: 1; }
.dtree-empty { font-size: 12px; color: var(--muted); padding: 16px; text-align: center; }
.ldm-form { align-content: start; }
@media (max-width: 600px) { .ldm-layout { grid-template-columns: 1fr; } }

/* ── Project docs panel ─────────────────────────────────────── */
.proj-panels { display: flex; flex-direction: column; gap: 10px; }
.proj-docs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.proj-docs-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--chip-color, #1e3a5f) 6%, transparent); border-bottom: 1px solid var(--border); border-left: 3px solid var(--chip-color, var(--primary)); }
.proj-docs-panel-title { font-size: 13px; font-weight: 600; color: var(--text); }
.proj-docs-empty { font-size: 12.5px; color: var(--muted); padding: 14px 16px; margin: 0; font-style: italic; }
.proj-doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.proj-doc-row:last-child { border-bottom: none; }
.proj-doc-icon { font-size: 16px; flex: none; }
.proj-doc-info { flex: 1; min-width: 0; }
.proj-doc-title { font-size: 13px; font-weight: 500; color: var(--primary); text-decoration: none; }
.proj-doc-title:hover { text-decoration: underline; }
.proj-doc-cat { font-size: 11px; color: var(--muted); margin-left: 6px; }
.proj-doc-remove { color: var(--muted); opacity: 0; font-size: 11px; transition: opacity .15s; }
.proj-doc-row:hover .proj-doc-remove { opacity: 1; }
.proj-doc-remove:hover { color: #ef4444; }

/* ── Documents page tabs (Library / Maker) ───────────────────── */
.doc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.doc-tab { background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.doc-tab:hover { color: var(--text); }
.doc-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Billing row: make the Print button obvious ──────────────── */
.btn-mini.bill-print { background: #eef2ff; color: #1e3a5f; border: 1px solid #c7d2fe; font-weight: 600; }
.btn-mini.bill-print:hover { background: #e0e7ff; border-color: #1e3a5f; }

/* ── CRM List stage tabs ─────────────────────────────────────── */
.crm-list-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-list-tab { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card, #fff); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crm-list-tab:hover { border-color: var(--blue); color: var(--text); }
.crm-list-tab-n { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.07); border-radius: 10px; padding: 1px 7px; color: inherit; }
/* "All" tab (no stage class) = navy when active.
   Match " st-" (space-prefixed) so it doesn't false-match "crm-li[st-]tab". */
.crm-list-tab.active:not([class*=" st-"]) { background: var(--ink, #1e3a5f); border-color: var(--ink, #1e3a5f); color: #fff; }
.crm-list-tab.active:not([class*=" st-"]) .crm-list-tab-n { background: rgba(255,255,255,.22); }
/* Stage tabs tinted to match the stage pills in the rows */
.crm-list-tab.st-identified     { background: #eef1f6; color: #475569; border-color: #dfe5ee; }
.crm-list-tab.st-contacted      { background: #dbeafe; color: #1e40af; border-color: #c7dbfb; }
.crm-list-tab.st-meeting_booked { background: #e0e7ff; color: #4338ca; border-color: #cdd6fb; }
.crm-list-tab.st-demo_completed { background: #cffafe; color: #0e7490; border-color: #b6f0f5; }
.crm-list-tab.st-interested     { background: #fef9c3; color: #854d0e; border-color: #fdf0a0; }
.crm-list-tab.st-pilot          { background: #ffedd5; color: #9a3412; border-color: #fdddb8; }
.crm-list-tab.st-customer       { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.crm-list-tab.st-lost           { background: #fee2e2; color: #b91c1c; border-color: #fbcaca; }
.crm-list-tab[class*=" st-"]:hover { filter: brightness(.96); color: inherit; }
.crm-list-tab[class*=" st-"] .crm-list-tab-n { background: rgba(0,0,0,.09); }
/* Active stage tab = same tint + a ring in its own colour */
.crm-list-tab.st-identified.active     { box-shadow: inset 0 0 0 2px #475569; }
.crm-list-tab.st-contacted.active      { box-shadow: inset 0 0 0 2px #1e40af; }
.crm-list-tab.st-meeting_booked.active { box-shadow: inset 0 0 0 2px #4338ca; }
.crm-list-tab.st-demo_completed.active { box-shadow: inset 0 0 0 2px #0e7490; }
.crm-list-tab.st-interested.active     { box-shadow: inset 0 0 0 2px #854d0e; }
.crm-list-tab.st-pilot.active          { box-shadow: inset 0 0 0 2px #9a3412; }
.crm-list-tab.st-customer.active       { box-shadow: inset 0 0 0 2px #15803d; }
.crm-list-tab.st-lost.active           { box-shadow: inset 0 0 0 2px #b91c1c; }

/* ── Command Center (landing) ────────────────────────────────── */
.home-wrap { max-width: 1100px; }
.home-greeting { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.home-greeting h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text); }
.home-greeting p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.home-greeting .spacer { flex: 1; }
.home-eye { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

.home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.home-kpi { text-align: left; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .1s; }
.home-kpi:hover { border-color: var(--blue); transform: translateY(-1px); }
.home-kpi-label { font-size: 12.5px; color: var(--muted); }
.home-kpi-value { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.home-kpi-value.warn { color: #b45309; }
.home-kpi-sub { font-size: 12px; color: var(--muted); }

.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.home-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.home-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; width: 100%; }
.home-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.home-card-link { background: none; border: none; cursor: pointer; padding: 0; }
.home-card-link:hover .home-card-arrow { color: var(--blue); transform: translateX(2px); }
.home-card-arrow { color: var(--muted); transition: transform .12s, color .12s; }

.home-attn-list { display: flex; flex-direction: column; }
.home-attn-item { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border: none; border-top: 1px solid var(--border); background: none; width: 100%; text-align: left; cursor: pointer; border-radius: 8px; }
.home-attn-item:first-child { border-top: none; }
.home-attn-item:hover { background: var(--surface-2, #f8fafc); }
.home-attn-icon { font-size: 16px; }
.home-attn-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-attn-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.home-attn-detail { font-size: 12px; color: var(--muted); }
.home-attn-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2, #f1f5f9); border-radius: 20px; padding: 2px 9px; }
.home-attn-arrow { color: var(--muted); opacity: .5; }
.home-attn-item.is-high .home-attn-title { color: #b91c1c; }
.home-allclear { padding: 18px 4px; font-size: 13.5px; color: #15803d; }

/* Pending signature banner (home page) */
.home-sig-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 13px 16px; margin-bottom: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.home-sig-banner:hover { background: #fef3c7; border-color: #f59e0b; }
.home-sig-icon { font-size: 20px; }
.home-sig-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.home-sig-title { font-size: 13.5px; font-weight: 700; color: #92400e; }
.home-sig-detail { font-size: 12px; color: #b45309; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-sig-arrow { color: #b45309; font-size: 14px; }

/* CRM Agreements — awaiting founders state */
.crm-awaiting-chip { display: inline-flex; align-items: center; gap: 5px; background: #fef9c3; color: #854d0e; border: 1px solid #fde047; border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 2px 10px; }
.crm-founder-check { color: #15803d; font-weight: 700; }
.crm-filter-count { display: inline-flex; align-items: center; justify-content: center; background: #b45309; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; }

/* Founder signing queue (top of Agreements tab) */
.crm-founder-queue { background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.crm-founder-queue-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #92400e; margin-bottom: 10px; }
.crm-founder-queue-badge { display: inline-flex; align-items: center; justify-content: center; background: #f59e0b; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 5px; }
.crm-founder-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #fde68a; }
.crm-founder-queue-doc { font-size: 13.5px; font-weight: 600; color: #1e293b; }

/* Founder sign modal */
.crm-fsig-doc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 16px; }
/* Read-before-sign gate */
.crm-fsig-readbox { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 16px; margin: 16px 0; transition: background .2s, border-color .2s; }
.crm-fsig-readbox.done { background: #f0fdf4; border-color: #bbf7d0; }
.crm-fsig-readbox-txt { display: flex; flex-direction: column; gap: 3px; }
.crm-fsig-readbox-txt b { font-size: 13.5px; color: #1e293b; }
.crm-fsig-readbox #fsig-open { white-space: nowrap; flex: none; }
.crm-fsig-step2 { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.crm-fsig-locked { opacity: .5; pointer-events: none; }
.crm-fsig-progress { margin-bottom: 18px; }
.crm-fsig-head { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.crm-fsig-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.crm-fsig-row:last-child { border: none; }
.crm-fsig-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; flex: none; }
.crm-fsig-dot.done { background: #22c55e; }
.crm-fsig-email { flex: 1; color: #1e293b; }
.crm-fsig-row.is-me .crm-fsig-email { font-weight: 600; }
.crm-fsig-status { font-size: 11.5px; color: #64748b; }
.crm-fsig-row.signed .crm-fsig-status { color: #15803d; font-weight: 600; }

.home-pipe-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.home-pipe-label { width: 78px; font-size: 12.5px; color: var(--muted); }
.home-pipe-bar { flex: 1; height: 9px; border-radius: 6px; background: var(--surface-2, #f1f5f9); overflow: hidden; }
.home-pipe-fill { display: block; height: 100%; border-radius: 6px; }
.home-pipe-fill.pipe-lead { background: #93c5fd; }
.home-pipe-fill.pipe-trial { background: #60a5fa; }
.home-pipe-fill.pipe-customer { background: #16a34a; }
.home-pipe-num { width: 26px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text); }

.home-health { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.home-health-label { font-size: 12px; color: var(--muted); }
.home-health-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.home-health-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--surface-2, #f8fafc); border-radius: 8px; padding: 4px 10px; color: var(--text); }
.home-health-dot { width: 7px; height: 7px; border-radius: 50%; }
.home-health-dot.h-ok { background: #16a34a; }
.home-health-dot.h-warn { background: #f59e0b; }
.home-health-dot.h-down { background: #dc2626; }
.home-health-dot.h-unknown { background: #cbd5e1; }

.home-launch-label { font-size: 12.5px; color: var(--muted); }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 8px 13px; cursor: pointer; color: var(--text); }
.home-chip:hover { border-color: var(--blue); }
.home-chip-dot { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.home-chip-add { color: var(--muted); }

/* ── Product admins section (Portal settings) ────────────────── */
.ps-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ps-section-head h4 { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--text); }
/* DPA tracker table */
.dpa-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.dpa-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: 6px 8px; border-bottom: 2px solid #e2e8f0; }
.dpa-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.dpa-table tr[data-status="done"] td:first-child { color: #15803d; }
.dpa-table select, .dpa-table input { width: 100%; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 12.5px; background: #fff; }
.dpa-table .dpa-date { max-width: 150px; }
.dpa-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ps-product-sel { margin: 10px 0 12px; max-width: 320px; }
.psacc-user { border-top: 1px solid var(--border); padding: 8px 0; }
.psacc-user:first-child { border-top: none; }
.psacc-row { display: flex; align-items: center; gap: 12px; }
.psacc-row .adm-info { flex: 1; min-width: 0; }
.psacc-role { width: auto; min-width: 108px; text-transform: capitalize; }
.psacc-detail { margin: 8px 0 4px; padding: 10px 14px; background: var(--surface-2, #f8fafc); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 18px; }
.psacc-tier { min-width: 150px; }
.psacc-tier-h { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 6px; }
.psacc-page { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.psacc-remove { color: var(--muted); margin-left: auto; flex-shrink: 0; }
.psacc-remove:hover { color: var(--danger); }
.hr-portal-list { display: flex; flex-direction: column; }
.hr-portal-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.hr-portal-row .adm-info { flex: 1; min-width: 0; }
.hr-portal-remove { color: var(--muted); margin-left: auto; flex-shrink: 0; }
.hr-portal-remove:hover { color: var(--danger); }
.hrpa-steps { margin-top: 14px; padding: 12px 14px; background: var(--surface-2, #f8fafc); border-radius: 8px; font-size: 13px; color: var(--text); }
.hrpa-steps b { display: block; margin-bottom: 8px; }
.hrpa-steps ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.hrpa-steps p { margin: 0; color: var(--muted); }
.psacc-invite { padding: 14px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.psacc-invite h5 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.psacc-invite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psacc-invite-row input, .psacc-invite-row select { flex: 1; min-width: 120px; }
.psacc-invite-row #psacc-inv-email { flex: 2; }
.psacc-inv-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--muted); flex-shrink: 0; }

/* ── Inline billing editor (Billing page) ────────────────────── */
#view-billing.billing-editing #grid-billing,
#view-billing.billing-editing .view-intro { display: none; }
.bill-editor-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.bill-editor-title { display: flex; align-items: center; gap: 10px; }
.bill-editor-title h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
.bill-editor-title .bh-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

/* ── Brand Images (Documents → Images) ───────────────────────── */
.bi-intro { font-size: 13px; color: var(--muted); max-width: 760px; margin: 0 0 14px; line-height: 1.5; }
.bi-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.bi-tab { background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.bi-tab.on { background: var(--card, #fff); color: var(--text); border-color: var(--blue); box-shadow: 0 -2px 0 var(--blue) inset; }
.bi-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.bi-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.bi-preview { height: 158px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bi-card.bg-light .bi-preview { background: repeating-conic-gradient(#f8fafc 0% 25%, #eef2f7 0% 50%) 50% / 20px 20px; }
.bi-card.bg-dark .bi-preview { background: #15233e; }
.bi-preview img { max-width: 100%; max-height: 100%; }
.bi-meta { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.bi-meta h4 { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--text); }
.bi-meta code { font-size: 11px; color: var(--muted); }
.bi-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.bi-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bi-rl { width: 42px; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.bi-dl { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2, #f8fafc); color: var(--text); cursor: pointer; }
.bi-dl:hover { background: var(--surface-3, #eef2f7); }
.bi-dl.svg { border-color: var(--blue); color: var(--blue); background: var(--card, #fff); font-weight: 700; }

/* ── Document Maker ──────────────────────────────────────────── */
.dm-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* Output actions on their own right-justified row, all clearly buttoned. */
.dm-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dm-act { font-weight: 600; }
.dm-actions .btn-ghost.dm-act { border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.dm-actions .btn-ghost.dm-act:hover { background: var(--canvas); border-color: #c2cad6; }
.dm-title-in { flex: 1; min-width: 200px; font-weight: 600; font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; }
.dm-title-in.dm-empty { border-color: #dc2626; background: #fff5f5; }
.dm-title-in.dm-empty:focus { outline: none; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.dm-title-warn { color: #b91c1c; font-size: 12px; font-weight: 600; margin: -4px 0 10px; }
.dm-type-in { width: 200px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; }
.dm-load { max-width: 200px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.dm-logo-size-val { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--blue-soft); color: var(--blue); border-radius: 6px; font-size: 12px; font-weight: 700; }
.dm-jump { cursor: pointer; }
.dm-jump:hover { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
/* Input gets a fixed editing column; the preview takes the rest so it renders
   close to true A4 width (otherwise lines look artificially short). */
.dm-panes { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .dm-panes { grid-template-columns: 1fr; } }
.dm-input { display: flex; flex-direction: column; gap: 8px; }
/* Rich-text editor (Quill) — integrate the snow theme with the portal look. */
.dm-input .ql-toolbar.ql-snow { border: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--card, #fff); position: sticky; top: 0; z-index: 2; }
.dm-quill.ql-container.ql-snow { border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; font-family: inherit; }
.dm-quill .ql-editor { min-height: 380px; max-height: 62vh; overflow-y: auto; font-size: 14px; line-height: 1.65; }
.dm-quill .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.dm-empty { padding: 20px; color: var(--muted); }
.dm-fmtbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dm-fmt { font: inherit; font-size: 13px; min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--border);
  background: var(--card, #fff); color: var(--text); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dm-fmt:hover { background: var(--surface-2, #f1f5f9); border-color: var(--blue); }
.dm-fmt b { font-weight: 800; }
.dm-fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.dm-text { width: 100%; min-height: 420px; resize: vertical; padding: 14px 16px; font-size: 13px;
  line-height: 1.6; border: 1px solid var(--border); border-radius: 10px;
  font-family: 'SF Mono', ui-monospace, monospace; }
.dm-upload { font-size: 12px; color: var(--muted); }
/* The fit wrapper holds the box/size; the iframe inside renders at true A4 and
   is transform-scaled by JS (fitPreview) to fit the pane width — no side-scroll. */
.dm-preview-fit { position: relative; overflow: hidden; width: 100%; height: 76vh; min-height: 560px;
  border: 1px solid var(--border); border-radius: 10px; background: #e9edf3; box-shadow: 0 6px 18px rgba(11,18,34,.06); }
.dm-preview { position: absolute; top: 0; left: 0; width: 794px; height: 100%; border: 0; background: #fff; }
/* Exact-pages PDF layer — fills the wrapper; the browser's PDF viewer paginates. */
.dm-pagepdf { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #525659; }
.dm-fields { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--canvas); }
.dm-fields-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 6px; }
.dm-frow { font-size: 12px; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.dm-frow code { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 5px; font-size: 11px;
  flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-frow.unknown code { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.dm-frow.unknown b { color: #b91c1c; }
.dm-frow.added code { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.dm-frow.added b { color: #15803d; }
.dm-frow.ignored { opacity: .62; }
.dm-frow.ignored code { background: #eef1f6; color: #64748b; border: 1px solid var(--border); }
/* The clickable jump target is just the label — keeps the hover box small. */
.dm-fjump { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.dm-fjump b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dm-guess { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 5px; flex: none; }
.dm-fsrc { margin-left: auto; color: var(--muted); font-size: 10.5px; flex: none; }
/* Add / Ignore / Undo switch for unrecognised placeholders */
.dm-fswitch { display: flex; gap: 4px; flex: none; margin-left: auto; }
.dm-fadd, .dm-fign, .dm-fundo { font-size: 10.5px; font-weight: 600; border: 1px solid var(--border);
  background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.dm-fadd { color: #15803d; border-color: #bbf7d0; }
.dm-fadd:hover { background: #dcfce7; }
.dm-fign:hover { background: #f1f5f9; color: #475569; }
.dm-fundo { color: #2563eb; }
.dm-fundo:hover { background: #eff6ff; }
.dm-anom { font-size: 11.5px; line-height: 1.4; margin-top: 4px; }
.dm-anom.error { color: #b91c1c; } .dm-anom.warn { color: #b45309; } .dm-anom.info { color: var(--muted); }

/* ── Document Library (versioned editions) ───────────────────── */
/* ── Document Library — bookshelf of book-cover cards ── */
.doc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 20px;
  padding: 6px 2px 10px; }
/* Category shelves */
.lib-shelf { margin-bottom: 18px; }
.lib-shelf-head { display: flex; align-items: center; gap: 9px; padding: 7px 2px 9px; margin-bottom: 2px;
  border-bottom: 2px solid var(--book, #cbd5e1); }
.lib-shelf-ico { font-size: 17px; line-height: 1; }
.lib-shelf-name { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #1e293b; text-transform: uppercase; }
.lib-shelf-count { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
.doc-card-tool.doc-card-lock { background: rgba(100,116,139,.6); cursor: default; }
.doc-card.doc-locked { /* read-only reference */ }
.doc-card[draggable="true"] { cursor: grab; }
.doc-card.dragging { opacity: .4; }
.lib-shelf.shelf-drop { outline: 2px dashed var(--book, #2563eb); outline-offset: 4px; border-radius: 10px; background: rgba(37,99,235,.04); }
/* Each card is a standing hardcover book: coloured cover (--book), a darker
   spine on the left, page edges on the right, title set on the cover. */
.doc-card.doc-book {
  position: relative; aspect-ratio: 5 / 7; border: 0; padding: 0; overflow: hidden; cursor: default;
  border-radius: 3px 9px 9px 3px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--book) 86%, #fff) 0%, var(--book) 40%,
    color-mix(in srgb, var(--book) 74%, #000) 100%);
  box-shadow: 3px 5px 12px rgba(15,23,42,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Spine overlay — sits ABOVE the cover (and any page thumbnail) on the left. */
.doc-card.doc-book::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 15px; z-index: 3; pointer-events: none;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--book) 52%, #000) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,0) 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18);
}
/* Stacked page edges down the right side */
.doc-card.doc-book::after {
  content: ''; position: absolute; top: 5px; bottom: 5px; right: 0; width: 6px; z-index: 3;
  background: repeating-linear-gradient(to right, #f8fafc 0 1px, #cbd3de 1px 2px);
  border-radius: 0 3px 3px 0; box-shadow: inset 1px 0 1px rgba(0,0,0,.15);
}
/* The actual first page rendered as the cover (text-bodied documents). */
.doc-book-page { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #fff;
  border-radius: 3px 9px 9px 3px; }
.doc-book-page iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left;
  pointer-events: none; background: #fff; }
/* When a page thumbnail is shown, the inner content becomes a bottom title strip. */
.doc-card.doc-book.has-thumb .doc-book-emblem,
.doc-card.doc-book.has-thumb .doc-book-note { display: none; }
.doc-card.doc-book.has-thumb .doc-book-inner { justify-content: flex-end; padding-bottom: 12px;
  background: linear-gradient(to top, rgba(15,23,42,.88) 0%, rgba(15,23,42,.5) 22%, rgba(15,23,42,0) 44%); }
.doc-card.doc-book.has-thumb .doc-book-title { margin-top: 0; font-size: 13.5px; -webkit-line-clamp: 2; }
/* Keep the title with the footer at the bottom (override the auto top-margin
   that would otherwise push the title up over the page header). */
.doc-card.doc-book.has-thumb .doc-book-foot { margin-top: 6px; }
.doc-book-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  padding: 16px 18px 14px 24px; color: #fff; }
.doc-book-emblem { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.doc-book-title { margin-top: 12px; font-weight: 800; font-size: 16.5px; line-height: 1.25; letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0,0,0,.30);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.doc-book-note { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-book-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10px; color: rgba(255,255,255,.80); padding-top: 9px; margin-right: 4px;
  border-top: 1px solid rgba(255,255,255,.20); }
.doc-book-src { display: inline-flex; align-items: center; gap: 3px; }
.doc-book-date { margin-left: auto; }
.doc-book-ver { background: rgba(255,255,255,.20); border-radius: 5px; padding: 0 5px; font-weight: 600; letter-spacing: .2px; }
.doc-card.doc-book.doc-card-open { cursor: pointer; }
.doc-card.doc-book.doc-card-open:hover { transform: translateY(-4px) rotate(-.5deg);
  box-shadow:
    inset 8px 0 11px -5px rgba(0,0,0,.50), inset 15px 0 0 -14px rgba(255,255,255,.28),
    6px 12px 22px rgba(15,23,42,.32); }
.doc-card-tools { position: absolute; top: 7px; right: 9px; z-index: 4; display: flex; gap: 4px; }
.doc-card-tool { border: 0; cursor: pointer; font-size: 12px; line-height: 1;
  opacity: .82; transition: opacity .1s, background .1s; border-radius: 6px; padding: 3px 6px;
  color: #fff; background: rgba(0,0,0,.28); }
.doc-card-tool.doc-card-edit { background: rgba(37,99,235,.82); }
.doc-card-tool.doc-card-dl   { background: rgba(5,150,105,.82); }
.doc-card-tool.doc-card-del  { background: rgba(220,38,38,.82); }
.doc-card-tool.doc-card-hist { background: rgba(100,116,139,.82); }
.doc-card:hover .doc-card-tool { opacity: 1; }
.doc-card-tool:hover { opacity: 1 !important; filter: brightness(1.15); }

/* Version history + diff modal */
.dhx-card { max-width: 920px; width: 94vw; }
.dhx-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 760px) { .dhx-wrap { grid-template-columns: 1fr; } }
.dhx-timeline { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.dhx-row { display: flex; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; background: #fff; border-left: 3px solid #e2e8f0; }
.dhx-row.is-to { border-left-color: #16a34a; background: #f0fdf4; }
.dhx-row.is-from { border-left-color: #dc2626; background: #fef2f2; }
.dhx-meta { flex: 1; min-width: 0; font-size: 13px; }
.dhx-vline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dhx-sub { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.dhx-ab { font-size: 10px; font-weight: 800; letter-spacing: .04em; border-radius: 4px; padding: 1px 6px; color: #fff; }
.dhx-after { background: #16a34a; }
.dhx-before { background: #dc2626; }
.dhx-nochg { font-size: 10.5px; color: #94a3b8; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }
.dhx-bin { font-size: 10.5px; color: #b45309; background: #fffbeb; border-radius: 4px; padding: 1px 5px; }
.dhx-view { flex: none; }
.dhx-diff { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; max-height: 62vh; }
.dh-controls { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.dh-sel { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; flex: 1; min-width: 0; }
.dh-sel span { text-transform: uppercase; letter-spacing: .04em; }
.dh-sel-before span { color: #b91c1c; }
.dh-sel-after span { color: #15803d; }
.dh-sel select { font-size: 12.5px; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; width: 100%; }
.dh-sel-before select { border-color: #fca5a5; }
.dh-sel-after select { border-color: #86efac; }
.dh-arrow { font-size: 18px; color: #94a3b8; padding-bottom: 5px; flex: none; }
.dh-head { padding: 7px 12px; background: #fff; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.dh-legend { font-family: ui-monospace, monospace; }
.dh-add { color: #15803d; font-weight: 700; }
.dh-del { color: #b91c1c; font-weight: 700; margin-left: 10px; }
.dh-body { overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; padding: 6px 0; }
.dh-body > div { padding: 1px 12px; white-space: pre-wrap; word-break: break-word; }
.dhl-ctx { color: #475569; }
.dhl-add { background: #dcfce7; color: #14532d; }
.dhl-del { background: #fee2e2; color: #7f1d1d; }
.dhl-gap { color: #94a3b8; font-style: italic; background: #f8fafc; text-align: center; }
.dh-same { padding: 24px; text-align: center; color: #64748b; font-size: 13px; }
/* Import modal: source segment (Drive / local) */
.ldoc-intro { margin: -4px 0 12px; }
.ldoc-srcseg { display: inline-flex; gap: 4px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.ldoc-srcbtn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 7px; }
.ldoc-srcbtn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

.doc-lib-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.doc-lib-fam { border-bottom: 1px solid var(--border); }
.doc-lib-fam:last-child { border-bottom: none; }
.doc-lib-fam.open { background: var(--canvas); }
.doc-lib-head { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; cursor: pointer; }
.doc-lib-head:hover { background: var(--canvas); }
.doc-lib-toggle { font-size: 12px; color: var(--muted); padding: 2px 4px; flex: none; margin-top: 2px;
  user-select: none; }
.doc-lib-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--primary); cursor: pointer; text-align: left; text-decoration: none; }
.doc-lib-link:hover { text-decoration: underline; }
.doc-lib-ext { font-size: 11px; color: var(--muted); }
.doc-lib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-lib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-lib-summary { display: block; }
.doc-lib-actions { flex: none; }
.doc-lib-hash { font-size: 10.5px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--muted); }
.doc-lib-remove { color: var(--danger); }
.doc-lib-editions { padding: 4px 14px 12px 36px; display: flex; flex-direction: column; gap: 6px; }
.doc-lib-edition { display: flex; align-items: center; gap: 10px; font-size: 12px;
  padding: 6px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.doc-lib-ver { font-weight: 700; min-width: 48px; }
.doc-lib-text { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 12px; line-height: 1.5; }

/* ── Parser review (Phase 2) ─────────────────────────────────── */
.ldoc-analyze-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.doc-analysis { border: 1px solid var(--border); border-radius: 8px; margin-top: 6px;
  overflow: hidden; }
.doc-analysis-head { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--canvas); border-bottom: 1px solid var(--border); font-size: 12px; }
.doc-fields { display: flex; flex-direction: column; }
.doc-field-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
.doc-field-row:last-child { border-bottom: none; }
.doc-field-raw { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 6px; font-size: 11.5px; }
.doc-field-arrow { color: var(--muted); }
.doc-field-canon { font-weight: 600; }
.doc-field-map { font-size: 11.5px; padding: 2px 6px; max-width: 180px; }
.doc-field-src { margin-left: auto; }
.doc-conf { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.doc-anoms { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--border); background: var(--canvas); }
.doc-anom { font-size: 11.5px; line-height: 1.4; }
.doc-anom.error { color: #b91c1c; }
.doc-anom.warn  { color: #b45309; }
.doc-anom.info  { color: var(--muted); }

/* ── Attach-to-project (Phase 3) ─────────────────────────────── */
.chip-linked { background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc; }
.attach-projs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.attach-proj { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; }
.attach-proj:hover { background: var(--canvas); }
.attach-proj.linked { opacity: .6; cursor: default; }
.attach-proj input { flex: none; }
.attach-proj span:first-of-type { flex: 1; }

/* ── Signing status report (Phase 4) ─────────────────────────── */
.sign-groups { display: flex; flex-direction: column; gap: 14px; }
.sign-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sign-group-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--canvas); border-bottom: 1px solid var(--border); }
.sign-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.sign-row:last-child { border-bottom: none; }
.sign-row-outdated { background: color-mix(in srgb, #fef3c7 30%, var(--card)); }
.sign-doc { font-weight: 600; min-width: 160px; }
.sign-ed { flex: 1; min-width: 200px; }
.btn-mini.amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ── Merge-render preview (Phase 5) ──────────────────────────── */
.merge-note { font-size: 12px; padding: 8px 12px; border-radius: 8px; margin: 10px 0 8px; }
.merge-note-ok   { background: #ecfdf5; color: #166534; border: 1px solid #a7f3d0; }
.merge-note-warn { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.merge-doc { max-height: 52vh; }
.merge-fill    { background: #ecfdf5; border-radius: 2px; padding: 0 2px; }
.merge-missing { background: #fee2e2; color: #b91c1c; border-radius: 2px; padding: 0 2px; }

/* ── Quick links cards ───────────────────────────────────────── */
.qdoc-group { margin-bottom: 28px; }
.qdoc-group-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.qdoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.qdoc-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; position: relative; transition: border-color .15s, box-shadow .15s, transform .1s; }
.qdoc-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,99,235,.1); transform: translateY(-1px); }
.qdoc-icon { font-size: 22px; flex: none; line-height: 1; }
.qdoc-body { flex: 1; min-width: 0; }
.qdoc-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qdoc-desc { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qdoc-remove { position: absolute; top: 8px; right: 8px; font-size: 11px; color: var(--muted); opacity: 0; border-radius: 4px; padding: 2px 4px; transition: opacity .15s; background: var(--surface); }
.qdoc-card:hover .qdoc-remove { opacity: 1; }
.qdoc-remove:hover { color: #ef4444; }

/* ── Lib section layout ─────────────────────────────────────── */
.lib-section { margin-bottom: 36px; }
.lib-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.lib-section-head h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.lib-section-sub { font-size: 12px; color: var(--muted); margin: 0; }
.lib-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }
.kb-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.kb-flow code { background: rgba(37,99,235,.08); color: var(--primary); padding: 2px 8px; border-radius: 6px; font-size: 12px; }

/* Knowledge base instructions */
.kb-instructions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; font-size: 13px;
}
.kb-instructions p { margin: 0; color: var(--muted); flex-basis: 100%; }
.kb-instructions code { background: rgba(37,99,235,.08); color: var(--primary); padding: 3px 8px; border-radius: 6px; font-size: 12px; }
.kb-arrow { color: var(--muted); }
.kb-step { font-size: 12.5px; color: var(--text); font-weight: 500; }

/* ── Portal-native school management ────────────────────────── */
.ps-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.ps-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.ps-stat { font-size: 13px; color: var(--muted); }
.ps-stat b { color: var(--text); }
.ps-stat.red { color: #ef4444; }
.ps-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.ps-empty h3 { font-size: 17px; color: var(--text); margin: 12px 0 8px; }

.ps-list { display: flex; flex-direction: column; gap: 16px; }
.ps-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ps-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; }
.ps-card-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ps-card-orgnr { font-size: 12px; color: var(--muted); background: var(--bg); padding: 2px 8px; border-radius: 5px; }
.ps-card-actions { display: flex; gap: 8px; }

.ps-flags { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 18px; background: rgba(239,68,68,.03); border-bottom: 1px solid var(--border); }
.ps-flag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.ps-flag.red   { background: rgba(239,68,68,.1);  color: #ef4444; }
.ps-flag.amber { background: rgba(245,158,11,.1); color: #d97706; }

.ps-card-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; }
.ps-card-info { padding: 14px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.ps-info-row { font-size: 13px; color: var(--text); }
.ps-info-row a { color: var(--primary); text-decoration: none; }

.ps-onboarding { padding: 14px 18px; }
.ps-onb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ps-onb-pct { font-size: 12px; font-weight: 700; color: var(--text); }
.ps-progress-bar { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.ps-progress-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.ps-steps { display: flex; flex-direction: column; gap: 4px; }
.ps-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; padding: 3px 0; }
.ps-step input[type=checkbox] { width: 14px; height: 14px; accent-color: #10b981; cursor: pointer; }
.ps-step.done .ps-step-label { color: var(--muted); text-decoration: line-through; }
.ps-step-icon { font-size: 13px; }
.ps-step-label { flex: 1; }
.ps-step-req { font-size: 10px; color: #ef4444; font-weight: 700; text-transform: uppercase; }

.ps-modal-sections { display: flex; flex-direction: column; gap: 20px; margin-bottom: 4px; }
.ps-modal-section { }
.ps-modal-section-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

@media (max-width: 600px) { .ps-card-body { grid-template-columns: 1fr; } .ps-card-info { border-right: none; border-bottom: 1px solid var(--border); } }

/* ── Action items ────────────────────────────────────────────── */
.action-badge { font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; background: var(--primary); color: #fff; }
.action-badge.urgent { background: #ef4444; }
.action-badge.hidden { display: none; }

.act-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.act-filter select { font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.act-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.act-empty h3 { font-size: 16px; color: var(--text); margin: 12px 0 6px; }

.act-group { margin-bottom: 28px; }
.act-group-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.act-group-head.overdue { color: #ef4444; }
.act-group-head.this-week { color: #f59e0b; }

.act-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; transition: border-color .15s; }
.act-row:hover { border-color: var(--primary); }
.act-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: transparent; flex: none; margin-top: 2px; cursor: pointer; transition: background .15s, border-color .15s; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.act-check:hover { border-color: #10b981; }
.act-check.done { background: #10b981; border-color: #10b981; color: #fff; }
.act-body { flex: 1; min-width: 0; }
.act-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.act-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }
.act-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.act-tag { font-size: 11px; color: var(--muted); background: rgba(37,99,235,.06); padding: 2px 7px; border-radius: 5px; }
.act-tag.overdue { background: rgba(239,68,68,.1); color: #ef4444; }
.act-tag.school { background: rgba(16,185,129,.08); color: #059669; }
.act-tag.project { background: rgba(37,99,235,.08); color: var(--primary); }
.act-row-actions { display: flex; align-items: center; gap: 4px; flex: none; opacity: 0; transition: opacity .15s; }
.act-row:hover .act-row-actions { opacity: 1; }
.act-pri-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── Login briefing modal ────────────────────────────────────── */
.briefing-overlay { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.briefing-modal { max-width: 520px !important; }
.briefing-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.briefing-greeting { display: flex; align-items: flex-start; gap: 14px; }
.briefing-wave { font-size: 32px; line-height: 1; }
.briefing-greeting h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--text); }
.briefing-greeting p { font-size: 13.5px; color: var(--muted); margin: 0; }
.briefing-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.brief-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.brief-item-high { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04); }
.brief-item-med  { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.04); }
.brief-item-icon { font-size: 18px; flex: none; }
.brief-item-body { flex: 1; min-width: 0; }
.brief-item-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.brief-item-detail { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-item-count { font-size: 12px; font-weight: 700; background: var(--primary); color: #fff; border-radius: 10px; padding: 1px 7px; flex: none; align-self: center; }
.briefing-footer { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Meeting runner — green/red buttons ─────────────────────── */
.rn-btn-complete {
  padding: 9px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none;
  cursor: pointer; box-shadow: 0 4px 12px rgba(16,185,129,.3);
  transition: transform .1s, box-shadow .15s;
}
.rn-btn-complete:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,.4); }
.rn-btn-skip {
  padding: 9px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; border: none;
  cursor: pointer; box-shadow: 0 4px 12px rgba(239,68,68,.3);
  transition: transform .1s, box-shadow .15s;
}
.rn-btn-skip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(239,68,68,.4); }

/* ── Monitoring usage row ────────────────────────────────────── */
.mon-usage { font-size: 11.5px; padding: 4px 0 0; }
.mon-usage-ok    { color: #10b981; }
.mon-usage-warn  { color: #f59e0b; }
.mon-usage-alert { color: #ef4444; font-weight: 700; }
.mon-usage-unknown { color: var(--muted); }

/* ── HR page ────────────────────────────────────────────────── */
.hr-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hr-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.hr-card  { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.hr-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.hr-name  { font-size: 15px; font-weight: 700; color: var(--text); margin-right: 8px; }
.hr-card-body { display: grid; grid-template-columns: 1fr 1fr; }
.hr-info  { padding: 14px 16px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.hr-info-row { font-size: 12.5px; color: var(--text); }
.hr-info-row a { color: var(--primary); text-decoration: none; }
.hr-compliance { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.hr-compliance-title { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hr-check-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.hr-check-row input { accent-color: #10b981; }
.hr-check-row.done span:first-of-type { color: var(--muted); text-decoration: line-through; }
.hr-check-row.missing { color: #ef4444; font-weight: 600; }
.hr-required { font-size: 10px; color: #ef4444; font-weight: 700; text-transform: uppercase; margin-left: 4px; }

.appfoot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 22px; }

/* ── Responsive ────────────────────────────────────────────── */
/* Mobile chrome hidden on desktop. */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

/* ── Tablet / phone: off-canvas drawer + touch tuning (≤900px) ──── */
@media (max-width: 900px) {
  button, a, .nav-item, .crm-tab, .mon-tab { touch-action: manipulation; }

  /* Top bar with hamburger */
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
    background: var(--navy); color: #fff; height: 52px; padding: 0 14px;
    box-shadow: 0 1px 8px rgba(0,0,0,.18);
  }
  .mobile-menu-btn { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: flex; }
  .mobile-menu-btn svg { width: 26px; height: 26px; }
  .mobile-topbar-title { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 272px;
    transform: translateX(-100%); transition: transform .22s ease;
    z-index: 5500; box-shadow: 0 0 48px rgba(0,0,0,.45);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5000;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  /* Main content takes full width, clears the fixed top bar */
  .main { width: 100%; min-width: 0; padding-top: 52px; }
  .view { padding: 18px 14px; }
  .section-head { flex-wrap: wrap; gap: 10px 12px; }
  .section-head h2 { font-size: 22px; }

  /* Stack two-column forms/grids */
  .form-grid, .crm-form2, .grid { grid-template-columns: 1fr; }

  /* Inputs at 16px so iOS doesn't auto-zoom on focus */
  input, select, textarea { font-size: 16px; }

  /* Wide tables scroll horizontally instead of breaking the page */
  .crm-table, .siem-feed, .acc-table, .retention-scroll table, .ov-table {
    display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  }

  /* Data browser: stack the table list above the data */
  .db-shell { flex-direction: column; }
  .db-sidebar { width: auto; flex-direction: row; flex-wrap: wrap; max-height: 160px; overflow-y: auto; }

  /* CRM tabs / monitoring tabs scroll horizontally if they overflow */
  .crm-tabs, .mon-tabs, .crm-detail-tabs { overflow-x: auto; max-width: 100%; }
}

/* ── Phones (≤560px): tighten further ──────────────────────────── */
@media (max-width: 560px) {
  .view { padding: 14px 11px; }
  .crm-modal { padding: 10px 6px; }
  .crm-modal-card { padding: 16px 14px; }
  .crm-kpis { grid-template-columns: repeat(2, 1fr); }
  .crm-board { gap: 8px; }
  .crm-col { flex-basis: 78vw; }
}

/* Meetings — attendee toggle pills (fun, bold) */
.att-pill {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #eef1f5; color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .05s;
}
.att-pill:hover { border-color: var(--navy); color: var(--ink); }
.att-pill:active { transform: translateY(1px); }
.att-pill.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 2px 8px rgba(21, 35, 62, .22);
}
.att-pill:disabled { cursor: default; }
.meeting-row:hover { border-color: var(--blue); }
.build-number {
  font-size: 10px; font-family: ui-monospace, monospace;
  color: #b8c4da; opacity: .9; text-align: center;
  padding: 2px 0; letter-spacing: .4px;
}
.btn-green { background: var(--green) !important; }
.btn-green:hover { background: #15803d !important; }
.mtg-history-card { cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mtg-card-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.agenda-card-body { padding: 14px; margin: 0; }
.guest-input-w { width: 120px; }
.rn-kbd-hint { margin: -8px 0 16px; }
.btn-sm { font-size: 13px; padding: 6px 12px; }
.text-bold { font-weight: 600; }
.rn-reset-btn { font-size: 13px; opacity: .7; }
.guest-pill { cursor: default; display: inline-flex; align-items: center; gap: 4px; }
.guest-remove { cursor: pointer; font-size: 12px; opacity: .7; margin-left: 2px; }
.guest-remove:hover { opacity: 1; }
.guest-input {
  border: 1.5px dashed var(--border); border-radius: 999px;
  background: transparent; font-family: inherit; padding: 4px 12px;
  color: var(--ink); outline: none;
}
.guest-input:focus { border-color: var(--navy); border-style: solid; }
/* Tighter cards inside the Meetings view only (rest of portal unchanged) */
#meetings-content .card { padding: 16px; }
#meetings-content h3 { line-height: 1.2; }

/* ── Meetings detail: visual uplift ─────────────────────── */

/* Section headings — Fredoka with a coloured accent bar */
.mtg-sh {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 18px; font-weight: 600; color: var(--navy);
  margin: 8px 0 10px; letter-spacing: .1px;
}
.mtg-sh::before {
  content: ''; display: block;
  width: 4px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--navy) 100%);
  flex: none;
}

/* Agenda item number badge */
.agenda-num {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-right: 6px;
}
/* Tiny "who added this" initials — small & unobtrusive */
.agenda-by {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 3px; margin-left: 6px;
  border-radius: 8px; background: var(--canvas); border: 1px solid var(--border);
  color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .03em;
  vertical-align: middle;
}

/* Agenda cards — left accent + hover lift */
#meetings-content .agenda-card {
  border-left: 3px solid var(--navy);
  transition: box-shadow .18s, transform .12s;
}
#meetings-content .agenda-card:hover {
  box-shadow: 0 6px 20px rgba(21,35,62,.11);
  transform: translateY(-2px);
}
#meetings-content .agenda-card.discussed-card {
  border-left-color: var(--green); opacity: .75;
}
#meetings-content .agenda-card.agenda-collapsed { cursor: pointer; }
#meetings-content .agenda-card.agenda-collapsed:hover {
  background: #f0fdf4; border-color: #bbf7d0;
  box-shadow: 0 4px 14px rgba(22,163,74,.10);
}
.agenda-min-edit {
  width: 36px; border: none; background: transparent; font: inherit;
  font-size: 11px; font-weight: 600; color: var(--blue);
  text-align: center; padding: 0; outline: none; cursor: pointer;
  -moz-appearance: textfield;
}
.agenda-min-edit::-webkit-inner-spin-button,
.agenda-min-edit::-webkit-outer-spin-button { opacity: 0; }
.agenda-min-edit:hover, .agenda-min-edit:focus {
  background: var(--blue-soft); border-radius: 4px;
  -webkit-appearance: auto; -moz-appearance: auto;
}
.agenda-toggle { font-size: 10px !important; color: var(--muted); transition: transform .15s; }
.agenda-card:not(.agenda-collapsed) .agenda-toggle { color: var(--blue); }

/* Minutes textarea — warm amber-tinted */
.mtg-minutes-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fff 60%) !important;
  border-left: 3px solid #f59e0b !important;
}
.mtg-minutes-card textarea {
  background: rgba(255,251,235,.6) !important;
  border-color: #fde68a !important;
}
.mtg-minutes-card textarea:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
}

/* Action cards — owner colour coding */
#meetings-content .action-card {
  border-left: 3px solid var(--line);
  transition: box-shadow .15s;
}
#meetings-content .action-card:hover { box-shadow: 0 4px 14px rgba(21,35,62,.09); }
#meetings-content .action-card.owner-Barry   { border-left-color: var(--blue); }
#meetings-content .action-card.owner-Gareth  { border-left-color: var(--green); }
#meetings-content .action-card.owner-Ibrahim { border-left-color: #d97706; }

/* Min chip on agenda items */
.agenda-min-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 600;
}

/* Bottom bar buttons with more presence */
#meetings-content .btn-danger-soft {
  background: var(--danger-soft); color: var(--danger);
  border-color: var(--danger-soft);
}

/* btn-ghost variant for dark backgrounds (runner topbar) */
.btn-ghost-dark {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.12) !important; }

/* ── Meeting header card — big date + nav ─────────────── */
.mtg-date-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mtg-date-block { flex: 1; min-width: 0; }
.mtg-today-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  color: var(--blue); background: var(--blue-soft);
  display: inline-block; padding: 1px 7px; border-radius: 999px; margin-bottom: 2px;
}
.mtg-week-label {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: var(--muted); margin-bottom: 2px; text-transform: uppercase;
}
.mtg-big-date {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  line-height: 1; margin-bottom: 3px;
}
.mtg-big-weekday { font-size: 15px; font-weight: 500; color: var(--muted); }
.mtg-big-day     { font-size: 36px; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
.mtg-big-month   { font-size: 20px; font-weight: 600; color: var(--navy); }
.mtg-title-row   { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ml-6            { margin-left: 6px; }
.mtg-nav-block   { display: flex; gap: 4px; align-items: center; flex: none; }
.mtg-nav-btn     { font-size: 18px; font-weight: 700; padding: 3px 8px; border-radius: 8px; line-height: 1; }
.mtg-nav-btn:disabled { opacity: .3; cursor: default; }
.mtg-date-row { align-items: center !important; }
.mtg-nav-block { flex-wrap: wrap; }

/* ── Meeting add-cards (3-up row above Additional Notes) ─ */
.grid-add-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 800px) { .grid-add-3 { grid-template-columns: 1fr; } }
.add-card { display: flex; flex-direction: column; gap: 10px; }
.add-card-label {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--navy);
  letter-spacing: .1px;
}
.add-card-agenda { border-top: 3px solid var(--blue);  background: #f0f6ff; }
.add-card-action { border-top: 3px solid var(--green); background: #f0fdf4; }
.add-card-vote   { border-top: 3px solid #d97706;      background: #fffbeb; }
.add-card-ta {
  width: 100%; min-height: 72px; resize: none; overflow: hidden;
  font-family: inherit; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.7); color: var(--ink);
}
.add-card-ta:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.add-card-foot {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.add-card-foot .btn-primary { margin-left: auto; }
.add-card-min { width: 60px; }

/* ── Meeting Polls ───────────────────────────────────── */
.poll-card {
  border-left: 3px solid var(--blue); border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  border-left-width: 3px; border-left-color: var(--blue);
  padding: 14px; margin: 0;
  box-shadow: var(--shadow);
}
.poll-card.closed { border-left-color: var(--green); opacity: .8; }
.poll-question { font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--ink); }
.poll-votes-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.poll-vote-btn {
  flex: 1; min-width: 70px;
  padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 2px solid var(--line); background: var(--canvas); color: var(--muted);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .05s;
}
.poll-vote-btn:active { transform: scale(.97); }
.poll-vote-btn.yes:hover,  .poll-vote-btn.yes.selected  { background: #dcfce7; border-color: var(--green); color: #15803d; }
.poll-vote-btn.no:hover,   .poll-vote-btn.no.selected   { background: #fee2e2; border-color: var(--danger); color: var(--danger); }
.poll-vote-btn.abs:hover,  .poll-vote-btn.abs.selected  { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.poll-results { font-size: 13px; }
.poll-voter-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.poll-voter-name { width: 72px; font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.poll-voter-vote { font-size: 13px; }
.poll-voter-vote.yes     { color: #15803d; font-weight: 600; }
.poll-voter-vote.no      { color: var(--danger); font-weight: 600; }
.poll-voter-vote.abstain { color: #92400e; }
.poll-voter-vote.pending { color: var(--muted); }
.poll-result-banner {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center;
}
.poll-result-banner.passed  { background: #dcfce7; color: #15803d; }
.poll-result-banner.failed  { background: #fee2e2; color: var(--danger); }
.poll-result-banner.tied    { background: #fef3c7; color: #92400e; }
.poll-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ── Meeting Runner ──────────────────────────────────── */
.runner-wrap {
  display: flex; gap: 0;
  height: calc(100vh - 130px);
  min-height: 500px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--card);
}
.runner-sidebar {
  width: 240px; flex: none;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 12px 0;
  background: #f9f8f5;
}
.rn-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s;
}
.rn-item:hover { background: var(--canvas); }
.rn-item.active { background: var(--blue-soft); border-left-color: var(--blue); }
.rn-item.done { opacity: .5; }
.rn-item.rn-item-locked { cursor: default; pointer-events: none; opacity: .45; }
.rn-icon {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--line); color: var(--muted);
}
.rn-item.active .rn-icon { background: var(--blue); color: #fff; }
.rn-item.done .rn-icon { background: var(--green); color: #fff; }
.rn-item-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.rn-item-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

.runner-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.runner-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--navy);
  color: #fff;
  flex: none;
}
.runner-topbar-title {
  font-size: 15px; font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runner-topbar-meta { font-size: 13px; opacity: .75; white-space: nowrap; }
.runner-topbar .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.3);
  font-size: 13px; padding: 6px 12px;
}
.runner-topbar .btn-ghost:hover { background: rgba(255,255,255,.1); }

.runner-body { flex: 1; overflow-y: auto; padding: 0 18px 14px; }

/* Timer — sticks to the top of the scrolling body so it's always visible. */
.runner-timer-card {
  position: sticky; top: 0; z-index: 5;
  border-radius: 12px; padding: 14px 18px; text-align: center;
  margin: 14px 0 12px;
  border: 2px solid var(--border); background: var(--canvas);
  box-shadow: 0 6px 14px rgba(11,18,34,.10);
  transition: background .4s, border-color .4s;
}
.runner-timer-card.overtime  { border-color: #fbbf24; background: #fffbeb; }
.runner-timer-card.overrun   { border-color: var(--danger); background: #fef2f2; }
.runner-topic { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.runner-timer {
  font-family: 'Fredoka', monospace; font-size: 52px; font-weight: 700;
  color: var(--navy); line-height: 1; margin: 6px 0;
  transition: color .4s;
}
.runner-timer-card.overtime .runner-timer  { color: #d97706; }
.runner-timer-card.overrun  .runner-timer  { color: var(--danger); }
.runner-target { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.runner-bar-track {
  height: 6px; background: var(--line); border-radius: 99px; overflow: hidden;
}
.runner-bar-fill {
  height: 100%; background: var(--blue); border-radius: 99px;
  transition: width .9s linear, background .4s;
}
.runner-timer-card.overtime .runner-bar-fill { background: #f59e0b; }
.runner-timer-card.overrun  .runner-bar-fill { background: var(--danger); }
.runner-overtime-msg {
  margin-top: 10px; font-size: 13px; font-weight: 600; display: none;
}
.runner-timer-card.overtime .runner-overtime-msg { display: block; color: #b45309; }
.runner-timer-card.overrun  .runner-overtime-msg { display: block; color: var(--danger); }

/* Jiggle animation for overtime */
@keyframes rn-jiggle {
  0%,80%,100% { transform: translateX(0); }
  82% { transform: translateX(-5px); }
  84% { transform: translateX(5px); }
  86% { transform: translateX(-4px); }
  88% { transform: translateX(4px); }
  90% { transform: translateX(-2px); }
  92% { transform: translateX(2px); }
  94% { transform: translateX(0); }
}
.runner-timer-card.overtime { animation: rn-jiggle 2.5s ease-in-out infinite; }
.runner-timer-card.overrun  { animation: rn-jiggle 1.2s ease-in-out infinite; }

.runner-controls {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px;
}
.runner-controls .btn-primary { min-width: 90px; }
.rn-btn-done { background: var(--green) !important; }
.rn-btn-done:hover { background: #15803d !important; }

.runner-context {
  background: var(--blue-soft); border: 1px solid #bfdbfe;
  border-radius: 10px; padding: 8px 12px; font-size: 13px;
  color: var(--ink-soft); margin-bottom: 10px;
}
.runner-context b { color: var(--blue); }
.runner-notes-area label { font-size: 12px; color: var(--muted); font-weight: 600; }
.runner-notes {
  width: 100%; min-height: 52px; margin-top: 6px;
  font-family: inherit; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: #fff; color: var(--ink); resize: none; overflow: hidden;
  transition: border-color .15s;
}
.runner-notes:focus { outline: none; border-color: var(--blue); }

.runner-next-card {
  margin-top: 10px; padding: 8px 12px;
  background: var(--canvas); border-radius: 10px; border: 1px solid var(--border);
  font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center;
}
.runner-next-card b { color: var(--ink); }

.runner-quick-action { margin: 12px 0 4px; }
.rn-action-summary {
  font-size: 13px; font-weight: 600; color: var(--blue);
  cursor: pointer; list-style: none; padding: 6px 0;
}
.rn-action-summary::-webkit-details-marker { display: none; }
.rn-action-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.rn-action-ta {
  width: 100%; min-height: 44px; resize: none; overflow: hidden;
  font-family: inherit; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px;
  background: #fff; color: var(--ink);
}
.rn-action-ta:focus { outline: none; border-color: var(--blue); }
.rn-action-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rn-action-foot .btn-primary { margin-left: auto; }
.rn-action-date { font-size: 12.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.runner-complete {
  text-align: center; padding: 40px 20px;
}
.runner-complete .ph-icon { font-size: 48px; margin-bottom: 12px; }
.runner-kbd {
  display: inline-block; background: var(--line); color: var(--muted);
  border-radius: 5px; padding: 2px 7px; font-size: 11px; font-family: monospace;
  margin: 0 2px;
}

/* ── Inline-style utility classes (removes CSP unsafe-inline) ── */
.flex-row { display:flex;align-items:center }
.flex-between { display:flex;align-items:center;justify-content:space-between }
.flex-end { display:flex;align-items:center;justify-content:flex-end }
.flex-center { display:flex;align-items:center;justify-content:center }
.flex-wrap { display:flex;flex-wrap:wrap;align-items:center }
.flex-start { display:flex;align-items:flex-start }
.flex-1 { flex:1;min-width:0 }
.flex-none { flex:none }
.flex-row-center { flex-direction:row;align-items:center }
.grid-auto-260 { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px }
.grid-auto-280 { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px }
.grid-2col { display:grid;grid-template-columns:1fr 1fr;gap:20px }
.col-full { grid-column:1/-1 }
.gap-2 { gap:2px }
.gap-6 { gap:6px }
.gap-8 { gap:8px }
.gap-10 { gap:10px }
.mb-0 { margin-bottom:0 }
.mb-4 { margin-bottom:4px }
.mb-8 { margin-bottom:8px }
.mb-12 { margin-bottom:12px }
.mb-14 { margin-bottom:14px }
.mb-24 { margin-bottom:24px }
.mt-2 { margin-top:2px }
.mt-3 { margin-top:3px }
.mt-4 { margin-top:4px }
.mt-6 { margin-top:6px }
.mt-8 { margin-top:8px }
.mt-10 { margin-top:10px }
.mt-12 { margin-top:12px }
.mt-14 { margin-top:14px }
.mt-16 { margin-top:16px }
.mt-24 { margin-top:24px }
.ml-4 { margin-left:4px }
.ml-6 { margin-left:6px }
.ml-8 { margin-left:8px }
.ml-34 { margin-left:34px }
.mr-auto { margin-right:auto }
.text-10 { font-size:10px }
.text-11 { font-size:11px }
.text-11-5 { font-size:11.5px }
.text-12 { font-size:12px }
.text-13 { font-size:13px }
.text-14 { font-size:14px }
.text-15 { font-size:15px }
.text-18 { font-size:18px }
.text-bold { font-weight:700 }
.text-center { text-align:center }
.text-muted { color:var(--muted) }
.text-danger { color:var(--danger) }
.text-green { color:var(--green) }
.text-amber { color:var(--amber) }
.text-amber-dark { color:#92400e }
.text-white-dim { color:rgba(255,255,255,.55) }
.text-white { color:#fff }
.font-mono { font-family:ui-monospace,monospace }
.text-strikethrough-muted { text-decoration:line-through;color:var(--muted) }
.bg-amber-soft { background:#fef3c7;border-color:#fde68a }
.bg-transparent-white { background:rgba(255,255,255,.8) }
.border-ghost { border-color:rgba(255,255,255,.35) }
.border-green-soft { border-color:#bbf7d0 }
.border-active { border-color:var(--blue);color:var(--blue) }
.bg-icon { background:var(--icon-bg) }
.progress-bar { width:var(--pct) }
.opacity-done { opacity:.55 }
.item-row { margin:0;padding:12px;display:flex;gap:10px;align-items:flex-start }
.topic-input { width:100%;resize:none;overflow:hidden;font-family:inherit;font-size:14px;font-weight:600;border:none;padding:0;background:transparent }
.note-textarea { width:100%;margin-top:3px;resize:vertical;overflow:hidden;font-size:13px }
.note-textarea-tall { width:100%;margin-top:6px;min-height:90px;resize:vertical;overflow:hidden }
.no-wrap { white-space:nowrap }
.cursor-pointer { cursor:pointer }
.clickable-row { cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;border:1px solid var(--border) }
.max-480 { max-width:480px }
.w-70 { width:70px }
.w-full { width:100% }
.min-200 { min-width:200px }
.min-110 { min-width:110px }
.min-160 { min-width:160px }
.min-0 { min-width:0 }
.display-none { display:none }
.display-block { display:block }
.inline-flex-center { display:inline-flex;align-items:center;gap:4px }
.role-badge { background:var(--role-bg);border-color:var(--role-border);color:var(--role-text);box-shadow:0 0 8px var(--role-border) }
.status-active-blue { border-color:var(--blue);color:var(--blue) }
.p-4-8 { padding:4px 8px }
.p-3-6 { padding:3px 6px }

/* ══════════════════════════════════════════════════════════
   DATA EXPORTS — Section 4 of Documents tab
   ══════════════════════════════════════════════════════════ */

.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* ── Export card ──────────────────────────────────────────── */
.exp-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.exp-card:hover {
  border-color: #b8d0f0;
  box-shadow: 0 4px 18px rgba(30,58,95,.07);
}

/* ── Card header ──────────────────────────────────────────── */
.exp-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.exp-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.exp-card-meta { flex: 1; min-width: 0; }
.exp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.exp-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Format toggle buttons ────────────────────────────────── */
.exp-fmts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fmt-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  font-family: inherit;
}
.fmt-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--blue-soft);
}
.fmt-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Options area ─────────────────────────────────────────── */
.exp-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8f7f4;
  border-radius: 8px;
  padding: 10px 12px;
}
.exp-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.exp-opt-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.exp-opt-row span { flex: 1; }
.exp-select {
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  max-width: 140px;
}

/* ── Export CTA button ────────────────────────────────────── */
.exp-btn {
  margin-top: auto;
  width: 100%;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  background: var(--primary);
  color: #fff;
  transition: background .12s ease, opacity .12s ease;
}
.exp-btn:hover:not(:disabled) { background: var(--primary-d); }
.exp-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════
   MONITORING — Tab bar + SIEM security dashboard
   ══════════════════════════════════════════════════════════ */

/* ── Tabs ─────────────────────────────────────────────────── */
.mon-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 0;
}
.mon-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: color .12s ease, border-color .12s ease;
}
.mon-tab:hover { color: var(--ink); }
.mon-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── SIEM stats row ───────────────────────────────────────── */
.siem-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.siem-stat {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 100px;
  text-align: center;
}
.siem-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.siem-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.siem-stat-warn { border-color: var(--amber); }
.siem-stat-warn .siem-stat-val { color: var(--amber); }
.siem-stat-danger { border-color: var(--danger); }
.siem-stat-danger .siem-stat-val { color: var(--danger); }
.siem-stat-clickable { cursor: pointer; transition: all .15s; }
.siem-stat-clickable:hover { background: var(--blue-soft); border-color: var(--blue); }
.siem-stat-clickable:hover .siem-stat-label::after { content: ' ↓'; color: var(--blue); font-size: 9px; }
.siem-stat-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.siem-stat-active .siem-stat-val,
.siem-stat-active .siem-stat-label { color: #fff !important; }

/* ── Transparency panel ───────────────────────────────────── */
.siem-transparency {
  background: var(--blue-soft);
  border: 1px solid #c7ddf8;
  border-radius: 10px;
  margin-bottom: 18px;
  overflow: hidden;
}
.siem-transparency details > summary {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.siem-transparency details > summary::-webkit-details-marker { display: none; }
.siem-transparency details[open] > summary { border-bottom: 1px solid #c7ddf8; }
.siem-trans-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  background: var(--primary);
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
}
.siem-trans-list {
  margin: 0;
  padding: 12px 16px 12px 32px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.siem-trans-note {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  padding: 8px 16px 12px;
  border-top: 1px solid #c7ddf8;
}

/* ── Filter bar ───────────────────────────────────────────── */
.siem-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.siem-filter-select, .siem-filter-input {
  font-family: inherit;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.siem-filter-input { min-width: 180px; cursor: text; }
.siem-refresh-btn { font-size: 12px; padding: 6px 12px; }

/* ── Event feed table ─────────────────────────────────────── */
.siem-feed-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.siem-feed {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.siem-feed thead tr {
  background: var(--navy);
  color: white;
}
.siem-feed th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}
.siem-feed td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siem-feed tr:last-child td { border-bottom: none; }
.siem-feed tbody tr:hover td { background: #f8f7f4; }

/* Severity row colours */
.siem-sev-danger td { background: #fff5f5; }
.siem-sev-warn   td { background: #fffbeb; }
.siem-sev-notice td { background: #f0fdf4; }
.siem-sev-info   td { }

/* Status pills */
.siem-status { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.siem-st-ok      { color: var(--green); }
.siem-st-blocked { color: var(--danger); }
.siem-st-error   { color: var(--amber); }

.siem-ts     { color: var(--muted); font-size: 11px; font-family: monospace; white-space: nowrap; }
.siem-action code { font-size: 11px; background: #f1f0ec; padding: 1px 4px; border-radius: 4px; }
.siem-detail { color: var(--muted); font-size: 11px; max-width: 280px; }

/* ── Action code tooltip ──────────────────────────────────────────── */
.siem-action-code.has-tip {
  cursor: help;
  border-bottom: 1px dashed var(--muted);
  position: relative;
}
.siem-action-code.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 340px;
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  white-space: normal;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
.siem-action-code.has-tip:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── Transparency panel — expanded with descriptions ─────────────── */
.siem-trans-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.siem-trans-item { display: flex; gap: 10px; align-items: flex-start; }
.siem-trans-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; margin-top: 1px; }
.siem-trans-text { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.siem-trans-text b { color: var(--ink); display: block; margin-bottom: 1px; }
.siem-trans-desc { color: var(--muted); font-size: 11px; }
.siem-trans-desc em { color: var(--green); font-style: normal; font-weight: 500; }
.siem-ip     { color: var(--muted); font-size: 11px; font-family: monospace; }
.siem-empty  { text-align: center; color: var(--muted); padding: 24px; }
.siem-error  { padding: 20px; color: var(--amber); font-size: 13px; line-height: 1.6; }

/* ── Nav HR badge ─────────────────────────────────────────── */
.nav-item[data-view="hr"] {
  /* Slightly differentiated from the main business group */
  opacity: 0.92;
}

/* ══════════════════════════════════════════════════════════
   SKOLKOLLEN PORTAL PANEL (workspace special case)
   ══════════════════════════════════════════════════════════ */

.sk-panel-notice {
  font-size: 11px;
  color: var(--muted);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 4px 12px;
  margin-left: auto;
}

/* System info bar */
.sk-info-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.sk-info-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sk-info-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sk-info-val {
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--ink);
}
.sk-info-ok { color: var(--green); font-weight: 600; }

/* Section label */
.sk-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Nav tiles grid */
.sk-nav-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.sk-nav-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.sk-nav-tile:hover {
  border-color: var(--primary);
  background: var(--blue-soft);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,58,95,.08);
}
.sk-tile-icon { font-size: 18px; }

/* Admins */
.sk-admins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.sk-admin-list { display: flex; flex-direction: column; gap: 2px; }
.sk-admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.sk-admin-row:last-child { border-bottom: none; }
.sk-admin-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sk-admin-info { flex: 1; min-width: 0; }
.sk-admin-name  { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.sk-admin-email { display: block; font-size: 11px; color: var(--muted); }
.sk-admin-you {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); background: var(--slate-soft);
  border-radius: 6px; padding: 2px 8px;
}
.sk-admin-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sk-admin-add-form input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--card);
}
.sk-admin-add-form input:focus { outline: none; border-color: var(--blue); }
.sk-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sk-empty { color: var(--muted); font-size: 13px; padding: 20px 0; }
.sk-err   { color: var(--amber); font-size: 13px; padding: 16px 0; }

/* Dev links */
.sk-links { display: flex; flex-direction: column; gap: 24px; }
.sk-link-group {}
.sk-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  transition: color .15s;
}
.sk-link-row:hover { color: var(--blue); }
.sk-link-icon { font-size: 15px; width: 20px; text-align: center; }
.sk-link-label { flex: 1; }
.sk-link-tag {
  font-size: 10px; font-weight: 600;
  background: var(--amber-soft); color: var(--amber);
  border-radius: 4px; padding: 1px 6px;
}
.sk-link-ext { color: var(--muted); font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   MONITORING — OPS DASHBOARD
   ══════════════════════════════════════════════════════════ */

/* Summary chips strip */
.ops-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ops-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}
.ops-sum-ok    { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.ops-sum-danger{ border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.dot-green { background: var(--green) !important; }

/* Section labels */
.ops-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 10px;
}

/* Two-column ops flags layout */
.ops-flags-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) { .ops-flags-two-col { grid-template-columns: 1fr; } }

.ops-flags-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.ops-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink-soft);
}
.ops-panel-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.ops-count-ok     { background: var(--green-soft);  color: var(--green); }
.ops-count-warn   { background: var(--amber-soft);  color: var(--amber); }
.ops-count-danger { background: var(--danger-soft); color: var(--danger); }

/* Action item flags */
.ops-items-list { padding: 6px 0; }
.ops-flag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.ops-flag-item:last-child { border-bottom: none; }
.ops-flag-item:hover { background: var(--canvas); }
.ops-flag-overdue { background: #fef2f2; }
.ops-flag-overdue:hover { background: #fee2e2; }
.ops-pri { font-size: 11px; flex-shrink: 0; }
.ops-flag-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ops-flag-title { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ops-flag-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  background: var(--slate-soft); color: var(--muted);
  border-radius: 4px; padding: 1px 5px;
}
.ops-flag-overdue-tag {
  font-size: 10px; font-weight: 700;
  background: var(--danger-soft); color: var(--danger);
  border-radius: 4px; padding: 1px 5px;
}
.ops-flag-who { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ops-flags-empty { padding: 20px 14px; font-size: 12px; color: var(--muted); text-align: center; }
.ops-flags-more {
  display: block; padding: 8px 14px; font-size: 11px; color: var(--blue);
  text-decoration: none; border-top: 1px solid var(--line);
}
.ops-flags-more:hover { background: var(--blue-soft); }

/* Security events table */
.ops-sec-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.ops-sec-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ops-sec-table tr:last-child td { border-bottom: none; }
.ops-sec-table tr:hover td { background: var(--canvas); }
.ops-sec-icon  { width: 24px; text-align: center; }
.ops-sec-action code { font-size: 10px; color: var(--ink-soft); }
.ops-sec-who   { color: var(--muted); max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.ops-sec-ts    { color: var(--muted); font-family: monospace; white-space: nowrap; }
.ops-sec-blocked { color: var(--danger); font-weight: 700; font-size: 10px; }
.ops-sec-more {
  display: block; padding: 8px 14px; font-size: 11px; color: var(--blue);
  text-decoration: none; border-top: 1px solid var(--line);
}
.ops-sec-more:hover { background: var(--blue-soft); }
.ops-flags-content { margin-bottom: 4px; }
.mon-ops-err { color: var(--amber); font-size: 12px; padding: 16px; display: block; }

/* Dev links on health cards */
.mon-devlinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.mon-devlink {
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--blue-soft);
  transition: background .15s;
}
.mon-devlink:hover { background: #c7d9fc; }

/* ══════════════════════════════════════════════════════════
   CUSTOMER COMMUNICATIONS PANEL
   ══════════════════════════════════════════════════════════ */

/* ── Comms button in customer row ─────────────────────────── */
.cust-comms {
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
  transition: background .15s;
}
.cust-comms:hover { background: var(--blue-soft); }

/* ── Modal wrapper ────────────────────────────────────────── */
.comms-modal {
  width: min(680px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comms-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.comms-school-icon { font-size: 22px; line-height: 1; }
.comms-modal-title h3 { margin: 0; font-size: 16px; }
.comms-project-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
}

/* ── Filter tabs ──────────────────────────────────────────── */
.comms-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.comms-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .15s;
}
.comms-tab:hover  { background: var(--slate-soft); }
.comms-tab.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

/* ── Timeline ─────────────────────────────────────────────── */
.comms-timeline {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  max-height: 340px;
}
.comms-loading, .comms-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.comms-error {
  padding: 20px;
  color: var(--amber);
  font-size: 13px;
}

/* ── Comm entry ───────────────────────────────────────────── */
.comm-entry {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color .15s;
}
.comm-entry:hover { border-color: #c5bfb0; }

.comm-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.comm-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
/* per-type colours */
.comm-type-note    { background: #fef9c3; color: #a16207; }
.comm-type-email   { background: #dbeafe; color: #1d4ed8; }
.comm-type-call    { background: #dcfce7; color: #166534; }
.comm-type-meeting { background: #ede9fe; color: #6d28d9; }

.comm-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-meta {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.comm-delete {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.comm-entry:hover .comm-delete { opacity: 1; }
.comm-delete:hover { color: var(--danger); background: var(--danger-soft); }

.comm-body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Log form ─────────────────────────────────────────────── */
.comms-log-section {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 14px 20px;
  background: var(--card);
}
.comms-log-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Type pill buttons — replace the dropdown */
.comm-type-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.comm-type-pill-btn {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .15s;
  white-space: nowrap;
}
.comm-type-pill-btn:hover { background: var(--slate-soft); }
.comm-type-pill-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.comms-subj {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--card);
  margin-bottom: 8px;
}
.comms-subj:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.comms-body {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: var(--card);
  color: var(--ink);
  margin-bottom: 8px;
  transition: border-color .15s;
}
.comms-body:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.comms-log-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comms-log-note {
  font-size: 11px;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   DATA OVERVIEW TAB (Monitoring → Data)
   ══════════════════════════════════════════════════════════ */

.data-overview { padding: 4px 0 32px; }

/* ── Flagged test data alert ─────────────────────────────── */
.data-flag-alert {
  display: flex;
  gap: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.data-flag-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.data-flag-alert strong { display: block; font-size: 13px; color: #92400e; margin-bottom: 8px; }
.data-flag-list { display: flex; flex-direction: column; gap: 6px; }
.data-flag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

/* ── Registry table ──────────────────────────────────────── */
.data-registry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.data-registry-table thead th {
  background: var(--navy);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.data-registry-table thead th.data-num { text-align: center; }
.data-registry-table tbody tr.data-project-row:hover { background: var(--bg-soft); }
.data-registry-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-num { text-align: center; font-variant-numeric: tabular-nums; }
.data-total { font-weight: 700; color: var(--navy); }

/* ── Per-project school detail expand ──────────────────────── */
.data-expand-row td { padding: 0 !important; border-bottom: 2px solid var(--line) !important; }
.data-school-list {
  background: var(--bg-soft);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.data-school-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
}
.data-school-name { font-weight: 600; flex: 1; }
.data-test-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: .06em;
}
.data-muted { color: var(--muted); font-size: 11px; }

/* ── Activity cards row ──────────────────────────────────── */
.data-activity-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.data-activity-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1;
  min-width: 160px;
}
.data-activity-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
.data-activity-value { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1; }
.data-activity-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
.data-activity-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── Product health cards ────────────────────────────────── */
.data-product-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.data-product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1;
  min-width: 220px;
}
.data-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.data-product-meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; }
.data-product-note { font-size: 11px; color: var(--muted); background: var(--bg-soft); border-radius: 6px; padding: 6px 10px; }
.data-product-note code { font-family: monospace; background: none; font-size: 10.5px; }

/* ── Misc ────────────────────────────────────────────────── */
.data-total-chip {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}
.data-sub-note { font-size: 12px; color: var(--muted); margin: 4px 0 10px; line-height: 1.5; }
.data-empty { color: var(--muted); font-size: 13px; padding: 16px 0; }
.btn-xs { font-size: 11px; padding: 2px 8px; border-radius: 6px; }

/* ══════════════════════════════════════════════════════════
   DATA BROWSER (Monitoring → Data tab)
   ══════════════════════════════════════════════════════════ */

/* ── Shell layout: sidebar + main ───────────────────────── */
.db-shell {
  display: flex;
  gap: 0;
  height: calc(100vh - 180px);
  min-height: 500px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--card-bg);
}

/* ── Left sidebar: table list ────────────────────────────── */
.db-sidebar {
  width: 190px;
  flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.db-sidebar-head {
  padding: 14px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.db-table-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  transition: background .12s, border-color .12s;
}
.db-table-btn:hover  { background: var(--hover); }
.db-table-btn.active { background: var(--blue-soft); border-left-color: var(--blue); color: var(--blue); font-weight: 600; }
.db-table-icon  { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.db-table-label { flex: 1; font-size: 12px; }
.db-table-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.db-count-err   { color: #ef4444; }
.db-sidebar-footer {
  margin-top: auto;
  padding: 12px 14px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
}

/* ── Right main area ─────────────────────────────────────── */
.db-main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Kollen chat logs (Monitoring → Data) ────────────────────── */
.kc-wrap { max-height: 65vh; overflow-y: auto; padding: 8px 14px 20px;
  display: flex; flex-direction: column; gap: 8px; }
.kc-body { max-height: 50vh; overflow-y: auto; }
.kc-session { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.kc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--canvas); border: none; cursor: pointer; text-align: left; font-size: 13px; }
.kc-head:hover { background: var(--card); }
.kc-toggle, .kc-q-tog { color: var(--muted); font-size: 11px; flex: none; }
.kc-user { font-weight: 700; color: var(--text); }
.kc-meta { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.kc-body { background: #fff; }
.kc-summary { font-size: 12px; color: var(--muted); background: var(--canvas);
  border-bottom: 1px solid var(--border); padding: 8px 12px; }

/* Clickable question rows */
.kc-qa { border-top: 1px solid var(--border); }
.kc-qa:first-of-type { border-top: none; }
.kc-q { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: none; border: none; cursor: pointer; text-align: left; font-size: 12.5px; }
.kc-q:hover { background: var(--canvas); }
.kc-q-text { color: var(--text); }
.kc-a { padding: 4px 14px 14px 30px; display: flex; flex-direction: column; gap: 8px; }
.kc-line { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 9px; }
.kc-line-q { background: #e8f0fe; }
.kc-line-a { background: var(--canvas); border: 1px solid var(--border); }
.kc-by { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.kc-by-kollen { color: var(--blue); }
.kc-text { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; }
.db-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* ── Controls bar ────────────────────────────────────────── */
.db-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card-bg);
}
.db-table-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.db-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.db-search {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  width: 180px;
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.db-search:focus { border-color: var(--blue); background: #fff; }
.db-record-count { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── Table ───────────────────────────────────────────────── */
.db-table-wrap {
  overflow: auto;
  flex: 1;
}
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.db-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  z-index: 1;
}
.db-table thead th.db-num { text-align: right; }
.db-table tbody .db-row {
  cursor: pointer;
  transition: background .1s;
}
.db-table tbody .db-row:hover  { background: var(--hover); }
.db-table tbody .db-row.db-row-open { background: var(--blue-soft); }
.db-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-table tbody td.db-num { text-align: right; font-variant-numeric: tabular-nums; }
.db-row-chevron { color: var(--muted); font-size: 10px; text-align: right; width: 24px; }
.db-null  { color: var(--muted); font-style: italic; }
.db-obj   { color: var(--muted); font-family: monospace; font-size: 11px; }
.db-empty { padding: 32px 16px; color: var(--muted); font-size: 13px; }

/* ── Expand panel (full record) ──────────────────────────── */
.db-expand-tr td {
  padding: 0 !important;
  background: #f0f4ff !important;
  border-bottom: 2px solid var(--blue) !important;
}
.db-expand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--blue);
}
.db-field {
  background: #f8faff;
  padding: 10px 14px;
}
.db-field-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.db-field-val {
  font-size: 12.5px;
  color: var(--text);
  word-break: break-word;
}
.db-json {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  background: #1e293b;
  color: #94d468;
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 200px;
  white-space: pre;
  margin: 0;
}
.db-date   { font-variant-numeric: tabular-nums; }
.db-link   { color: var(--blue); text-decoration: none; font-size: 12px; word-break: break-all; }
.db-link:hover { text-decoration: underline; }
.db-bool-true  { color: #16a34a; font-weight: 600; }
.db-bool-false { color: #dc2626; }
.db-val { line-height: 1.5; }

/* ── Pagination ──────────────────────────────────────────── */
.db-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.db-page-info { font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   SCHOOL LIFECYCLE PANEL (Data tab → purge management)
   ══════════════════════════════════════════════════════════ */

.lc-panel {
  background: #fff8f0;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.lc-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.lc-panel-icon { font-size: 20px; flex-shrink: 0; }
.lc-panel-head strong { font-size: 13px; color: #9a3412; }
.lc-panel-sub { font-size: 12px; color: #c2410c; }

.lc-school-list { display: flex; flex-direction: column; gap: 6px; }
.lc-school-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.lc-school-name { font-weight: 600; flex: 1; min-width: 120px; }
.lc-school-slug { color: var(--muted); font-size: 11px; }

.lc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lc-badge.test     { background: #fef3c7; color: #92400e; }
.lc-badge.eligible { background: #fee2e2; color: #991b1b; }
.lc-badge.purged   { background: #dcfce7; color: #166534; }

.lc-purge-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-color: #f97316 !important;
  color: #9a3412 !important;
  margin-left: auto;
}
.lc-purge-btn:hover { background: #fff8f0 !important; }

.lc-retained {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #fed7aa;
  font-size: 12px;
  color: #c2410c;
  flex-wrap: wrap;
}
.lc-retained-label { font-weight: 600; }
.lc-retained-item  { background: #fff7ed; border-radius: 6px; padding: 2px 8px; }

/* ── Monitoring → Access (access-map.js) ─────────────────────────── */
.acc-wrap { display: flex; flex-direction: column; gap: 6px; }
.acc-intro { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #334155; }
/* Signature-ledger integrity card */
.acc-ledger { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 14px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 13px; }
.acc-ledger > div { flex: 1; }
.acc-ledger b { font-size: 13.5px; }
.acc-ledger .acc-ledger-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #94a3b8; }
.acc-ledger.ok { background: #f0fdf4; border-color: #bbf7d0; }
.acc-ledger.ok .acc-ledger-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.acc-ledger.ok b { color: #15803d; }
.acc-ledger.bad { background: #fef2f2; border-color: #fecaca; }
.acc-ledger.bad .acc-ledger-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.acc-ledger.bad b { color: #b91c1c; }
.acc-ledger.checking .acc-ledger-dot { background: #f59e0b; animation: acc-pulse 1s ease-in-out infinite; }
.acc-ledger.unknown { background: #fffbeb; border-color: #fde68a; }
@keyframes acc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.acc-anchor { margin-top: 7px; font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-anchor.ok { color: #15803d; }
.acc-anchor.warn { color: #b45309; }
.acc-anchor .btn-ghost { padding: 2px 8px; font-size: 11.5px; }
.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; }
.acc-table td { padding: 9px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.acc-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.acc-sub code, .acc-table code { font-size: 11px; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; color: #475569; }
.acc-guard { display: inline-block; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 2px 8px; font-size: 11px; margin: 0 4px 4px 0; }
.acc-warn { display: inline-block; color: #b45309; font-size: 11px; margin-top: 4px; }
.acc-badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.acc-write { background: #fee2e2; color: #b91c1c; }
.acc-read { background: #dbeafe; color: #1d4ed8; }
.acc-none, .acc-noaccess { background: #f1f5f9; color: #64748b; }
.acc-unknown { background: #fef3c7; color: #92400e; }
.acc-block { margin-top: 14px; }
.acc-block-h { font-weight: 700; font-size: 13px; color: #1e293b; margin-bottom: 6px; }
.acc-note { font-size: 12px; color: #64748b; margin-bottom: 8px; }
.acc-saline { font-size: 13px; color: #334155; margin: 6px 0; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip { background: var(--card); border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.acc-mgr { color: #b91c1c; font-size: 10px; font-weight: 700; }
.acc-on { color: #15803d; font-weight: 600; font-size: 12px; }
.acc-off { color: #b91c1c; font-weight: 600; font-size: 12px; }
.acc-row-off { opacity: .55; }
.acc-actions { white-space: nowrap; }
.acc-actions .btn-ghost { padding: 3px 8px; font-size: 12px; margin-left: 4px; }
.acc-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.acc-add .siem-filter-input { flex: 1; min-width: 160px; }
.acc-empty { text-align: center; color: #94a3b8; padding: 14px; }
.acc-count { font-weight: 600; font-size: 11px; color: #64748b; margin-left: 8px; }
.acc-scroll { max-height: 360px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 8px; }
.acc-scroll table { margin: 0; }
.acc-scroll thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }

/* ── Demo billing modal + Demo mini-card ─────────────────────────── */
.mini-card-demo { border-style: dashed; }
.mini-card-demo .chip-demo { background: #fef3c7; color: #92400e; }
.bd-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.bd-card { background: var(--card); border-radius: 14px; max-width: 940px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.bd-banner { background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 600;
  padding: 10px 18px; border-bottom: 1px solid #fde68a; }
.bd-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.bd-head h2 { font-size: 16px; margin: 0; }
.bd-x { background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; line-height: 1; }

/* Demo-tab bulk delete toolbar */
.cust-demo-toolbar { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 8px 4px 10px; }
.btn-ghost.danger { color: var(--danger, #dc2626); border-color: #fecaca; }
.btn-ghost.danger:hover { background: #fef2f2; }

/* Onboarding pricing breakdown (per-student + per-teacher) */
.ob-price-break { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.ob-price-break span { white-space: nowrap; }

/* ── CRM ──────────────────────────────────────────────────────── */
.crm-tabs { display: inline-flex; gap: 0; border-bottom: 2px solid #e2e8f0; }
.crm-tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 0; cursor: pointer; font-size: 13px; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; transition: color .12s, border-color .12s; }
.crm-tab:hover { color: #1e293b; }
.crm-tab.active { color: #1e3a5f; border-bottom-color: #1e3a5f; font-weight: 700; }

/* Kanban board */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.crm-col { flex: 0 0 230px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.crm-col-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; background: #f8fafc; border-radius: 10px 10px 0 0; }
.crm-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #475569; }
.crm-col-count { font-size: 12px; background: #e2e8f0; color: #475569; border-radius: 10px; padding: 1px 8px; }
.crm-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; }
.crm-col-body.crm-col-over { background: #eef6ff; outline: 2px dashed #93c5fd; outline-offset: -4px; border-radius: 8px; }
.crm-col-empty { color: #cbd5e1; text-align: center; font-size: 12px; padding: 8px 0; }

.crm-card { background: var(--card); border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.crm-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.crm-card-dragging { opacity: .5; }
.crm-card.crm-prio-high { border-left-color: #ef4444; }
.crm-card.crm-prio-medium { border-left-color: #f59e0b; }
.crm-card.crm-prio-low { border-left-color: #94a3b8; }
.crm-card-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.crm-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: #64748b; }
.crm-card-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #475569; margin-top: 6px; }
.crm-card-owner { margin-left: auto; background: #f1f5f9; border-radius: 6px; padding: 0 6px; }
.crm-prio-dot.crm-prio-high { color: #dc2626; }
.crm-prio-dot.crm-prio-medium { color: #d97706; }
.crm-prio-dot.crm-prio-low { color: #64748b; }

/* List view */
.crm-list-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.crm-list-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Push search + priority + count to the right; chips stay on the left. */
.crm-list-bar .crm-list-search { margin-left: auto; }
.crm-select { padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.crm-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }
.crm-list-row { cursor: pointer; }
.crm-list-row:hover { background: #f8fafc; }
.crm-stage-pill { background: #eef2ff; color: #4338ca; border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
/* Distinct colour per pipeline stage (cool → warm → won/lost). */
.crm-stage-pill.st-identified     { background: #eef1f6; color: #475569; }
.crm-stage-pill.st-contacted      { background: #dbeafe; color: #1e40af; }
.crm-stage-pill.st-meeting_booked { background: #e0e7ff; color: #4338ca; }
.crm-stage-pill.st-demo_completed { background: #cffafe; color: #0e7490; }
.crm-stage-pill.st-interested     { background: #fef9c3; color: #854d0e; }
.crm-stage-pill.st-pilot          { background: #ffedd5; color: #9a3412; }
.crm-stage-pill.st-customer       { background: #dcfce7; color: #15803d; }
.crm-stage-pill.st-lost           { background: #fee2e2; color: #b91c1c; }

/* Detail modal */
.crm-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; z-index: 6000; padding: 30px 16px; overflow-y: auto; }
.crm-modal.hidden { display: none; }
.crm-modal-card { background: var(--card); border-radius: 14px; width: 100%; max-width: 980px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.crm-detail-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 14px; }
.crm-detail-head h3 { margin: 0; }
.crm-detail-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.crm-detail-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-detail-save-hdr { display: flex; align-items: center; gap: 8px; }
.crm-detail-tabs { display: inline-flex; gap: 8px; padding: 2px; margin: 0 0 16px; }
.crm-dtab {
  border: 1px solid #d4dae3; background: #eef1f5; padding: 9px 22px; border-radius: 9px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: #5b6677;
  box-shadow: 0 1px 1px rgba(15,23,42,.04);
  transition: background .12s, color .12s, box-shadow .12s, border-color .12s, transform .08s;
}
.crm-dtab:hover:not(.active) { background: #fff; color: #1f2937; border-color: #c2cad6; }
.crm-dtab.active {
  background: #fff; color: #0f172a; border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(37,99,235,.20), inset 0 0 0 1px var(--blue);
  transform: translateY(-1px);
}
.crm-fin-est { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 14px; }
.crm-fin-est b { font-size: 18px; color: #0f172a; }
.crm-detail-actions { display: flex; align-items: center; gap: 8px; }
.crm-leadscore { background: #fef3c7; color: #92400e; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.crm-close { font-size: 16px; }
.crm-x { border: 0; background: transparent; cursor: pointer; color: #94a3b8; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.crm-x:hover { background: #f1f5f9; color: #ef4444; }
.crm-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .crm-detail-grid { grid-template-columns: 1fr; } }
.crm-detail-col { display: flex; flex-direction: column; gap: 14px; }
.crm-card-box h4 { margin: 0 0 10px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.crm-sub { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.btn-sm { font-size: 12px; padding: 3px 8px; }
.crm-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed #f1f5f9; }
.crm-kv span { color: #64748b; }
.crm-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.crm-form2 label, .crm-full, .crm-score { display: flex; flex-direction: column; font-size: 12px; color: #475569; gap: 3px; }
.crm-full { margin-top: 8px; }
.crm-form2 input, .crm-form2 select, .crm-full input, .crm-full textarea, .crm-score input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; font-family: inherit; }
.crm-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.crm-score span { font-size: 11px; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-tag { border: 1px solid #e2e8f0; background: var(--card); color: #475569; border-radius: 16px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
.crm-tag.on { background: #4338ca; border-color: #4338ca; color: #fff; }
.crm-contact, .crm-meeting, .crm-doc, .crm-task { border-top: 1px solid #f1f5f9; padding: 8px 0; }
.crm-contact:first-child, .crm-meeting:first-child { border-top: 0; }
.crm-contact-top, .crm-meeting-top { display: flex; align-items: center; gap: 8px; }
.crm-contact-top .crm-x, .crm-meeting-top .crm-x, .crm-doc .crm-x { margin-left: auto; }
.crm-dm { background: #dcfce7; color: #166534; }
.crm-doc, .crm-task { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crm-doc-signed { color: #15803d; font-weight: 600; margin-left: 8px; white-space: nowrap; }
/* Pale-green "Sign" button — appears wherever a document is opened from a
   school context (smart signing). */
.btn-sign { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; border-radius: 8px;
  font-weight: 600; cursor: pointer; padding: 6px 14px; font-size: 13px; white-space: nowrap;
  transition: background .1s, border-color .1s; }
.btn-sign:hover { background: #bbf7d0; border-color: #86efac; }
.btn-sign-sm { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }
.crm-doc-acts { display: flex; align-items: center; gap: 6px; flex: none; }
/* "Agreement not signed" health chips — click to sign */
.crm-need-sign { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.crm-need-sign-btn { border: 1px solid #fcd34d; background: #fef9c3; color: #92400e; border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .1s; }
.crm-need-sign-btn:hover { background: #fde68a; border-color: #f59e0b; }
/* SV/EN toggle on signing forms/modals */
.sign-lang-toggle { display: inline-flex; gap: 2px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 7px; padding: 2px; }
.sign-lang-toggle button { border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px; cursor: pointer; }
.sign-lang-toggle button.active { background: var(--blue); color: #fff; }
/* Signed-agreements summary */
.crm-sign-summary { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-sign-summary .crm-kpi { flex: 1; min-width: 120px; }
.crm-sign-school { background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  margin-bottom: 10px; overflow: hidden; }
.crm-sign-school-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--canvas); border-bottom: 1px solid var(--border); cursor: pointer; }
.crm-sign-school-head:hover { background: var(--blue-soft, #eef2ff); }
.crm-sign-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.crm-sign-row:last-child { border-bottom: none; }
.crm-sign-now { border: 1px solid #fcd34d; background: #fef9c3; color: #92400e; border-radius: 999px;
  padding: 3px 11px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .1s, border-color .1s; }
.crm-sign-now:hover { background: #fde68a; border-color: #f59e0b; }
.crm-doc-signedtoggle { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; }
.crm-doc-signedtoggle input { width: auto; }

/* Dashboard */
.crm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .crm-kpis { grid-template-columns: repeat(3, 1fr); } }
.crm-kpi { background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px 10px; position: relative; transition: box-shadow .15s, transform .15s; }
.crm-kpi-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; margin: 0; }
.crm-kpi-mark i { border-radius: 2px; background: var(--ac, #94a3b8); }
.crm-kpi-mark i:nth-child(1) { opacity: .9; }
.crm-kpi-mark i:nth-child(2) { opacity: .3; }
.crm-kpi-mark i:nth-child(3) { opacity: .55; }
.crm-kpi-mark i:nth-child(4) { opacity: .15; }
.crm-kpi-n { font-size: 22px; font-weight: 800; line-height: 1; margin-top: 4px; }
.crm-conv-pct { font-size: 14px; font-weight: 600; color: #64748b; margin-left: 4px; }
.crm-kpi-l { font-size: 12px; color: #64748b; margin-top: 4px; font-weight: 500; }
.crm-card-box { background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; }
.crm-card-box h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #1e293b; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.crm-card-pipeline { border-top: 3px solid #2563eb; }
.crm-card-followup  { border-top: 3px solid #d97706; }
.crm-card-problems  { border-top: 3px solid #7c3aed; }
.crm-card-activity  { border-top: 3px solid #059669; }
.crm-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .crm-dash-grid { grid-template-columns: 1fr; } }
.crm-sumrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.crm-sumrow:last-child { border-bottom: none; }
.crm-sumrow span { color: #475569; }
.crm-sumrow b { margin-left: auto; min-width: 24px; text-align: right; }
.crm-pipe-label { display: flex; align-items: center; gap: 7px; min-width: 140px; color: #374151; font-weight: 500; }
.crm-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #94a3b8; }
.crm-stage-dot.st-identified { background: #94a3b8; }
.crm-stage-dot.st-contacted { background: #60a5fa; }
.crm-stage-dot.st-meeting_booked { background: #a78bfa; }
.crm-stage-dot.st-demo_completed { background: #c084fc; }
.crm-stage-dot.st-interested { background: #f59e0b; }
.crm-stage-dot.st-pilot { background: #f97316; }
.crm-stage-dot.st-customer { background: #22c55e; }
.crm-stage-dot.st-lost { background: #f87171; }
.crm-pipe-bar-wrap { flex: 1; height: 6px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.crm-pipe-bar { display: block; height: 100%; border-radius: 99px; background: #94a3b8; min-width: 2px; transition: width .4s ease; }
.crm-pipe-bar.st-identified { background: #94a3b8; }
.crm-pipe-bar.st-contacted { background: #60a5fa; }
.crm-pipe-bar.st-meeting_booked { background: #a78bfa; }
.crm-pipe-bar.st-demo_completed { background: #c084fc; }
.crm-pipe-bar.st-interested { background: #f59e0b; }
.crm-pipe-bar.st-pilot { background: #f97316; }
.crm-pipe-bar.st-customer { background: #22c55e; }
.crm-pipe-bar.st-lost { background: #f87171; }
.crm-fu { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.crm-fu:last-child { border-bottom: none; }
.crm-fu-over span:first-child { color: #dc2626; font-weight: 600; }
.crm-act { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.crm-act:last-child { border-bottom: none; }
.crm-act .text-11 { display: block; margin-top: 2px; }

/* Doc form mode tabs */
.crm-doc-tabs { display: inline-flex; gap: 4px; background: #f1f5f9; padding: 3px; border-radius: 8px; margin: 6px 0; }
.crm-doc-mode { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #475569; }
.crm-doc-mode.active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }

/* CSV import */
.crm-imp-summary { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.crm-imp-new { background: #dcfce7; color: #166534; border-radius: 8px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.crm-imp-dup { background: #fef3c7; color: #92400e; border-radius: 8px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.crm-imp-unmapped { margin-top: 10px; padding: 10px 11px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: 12px; color: #92400e; }
.crm-imp-maprow { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.crm-imp-h { font-weight: 600; min-width: 130px; }
.crm-imp-maprow select { flex: 1; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 12px; background: #fff; }

/* Clickable dashboard tiles + pipeline rows */
.crm-clickable { cursor: pointer; transition: background .1s, box-shadow .1s, transform .05s; }
.crm-kpi.crm-clickable:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.crm-sumrow.crm-clickable:hover { background: var(--blue-soft); border-radius: 6px; }
.crm-bar-row.crm-clickable { border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.crm-bar-row.crm-clickable:hover { background: var(--blue-soft); }
tr.crm-clickable { cursor: pointer; }
tr.crm-clickable:hover { background: var(--blue-soft); }
.crm-stage-filter-chip { border: 1px solid var(--blue); background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }

/* Reusable form modal (contacts / meetings / tasks) */
.crm-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 560px) { .crm-fieldgrid { grid-template-columns: 1fr; } }
.crm-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.crm-field-full { grid-column: 1 / -1; }
.crm-field input, .crm-field select, .crm-field textarea { padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; font-family: inherit; }
.crm-field textarea { resize: vertical; }
.crm-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: #0f172a; cursor: pointer; }
.crm-check input { width: auto; }
.crm-form-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; }
.crm-hint { font-size: 11px; color: #94a3b8; line-height: 1.35; margin-top: 1px; font-weight: 400; }
.crm-score[title] { cursor: help; }
.crm-x.crm-edit:hover { color: var(--blue); background: var(--blue-soft); }

/* Reports bar charts */
.crm-bar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.crm-bar-label { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-bar { background: #f1f5f9; border-radius: 6px; height: 14px; overflow: hidden; }
.crm-bar-fill { background: #4338ca; height: 100%; border-radius: 6px; min-width: 2px; }
.crm-bar-fill.alt { background: #0ea5e9; }
.crm-bar-n { text-align: right; font-weight: 600; color: #0f172a; }

/* Monitoring → Retention: scrollable ~6-7 row window */
.retention-scroll { max-height: 290px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.retention-scroll table { margin: 0; }
.retention-scroll thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }