/* ============================================================
   PentestBoard design system — "Kinetic" (retheme, 2026-09-16)

   Replaces the previous dark-only "Terminal" identity (near-black +
   phosphor green) with a light-first, clean operational-SaaS look —
   modeled on a Stitch-generated reference built for this app
   (artifacts_example/calendar_view.zip, user_management.zip; both
   share one design system per their own DESIGN.md, confirming it's a
   whole-app language, not two separate designs) — with one deliberate
   substitution: the reference's violet primary (#5D2BFF) is replaced
   with #007aff everywhere, per explicit instruction ("not purple").
   The dark theme/toggle stays (it was a real working feature, not
   something to remove) — re-derived as a parallel slate-dark palette
   using the SAME #007aff family (bumped to #0a84ff for dark-background
   contrast, the same light/dark split Apple's own systemBlue uses),
   not the old green.

   Two fonts, self-hosted under /static/fonts/ (see the @font-face
   rules below) rather than loaded from a CDN — the previous version of
   this file pulled Inter from rsms.me and htmx from unpkg.com in
   base.html, both silently blocked by this app's own CSP
   (default-src 'self') the whole time; fixed here instead of carried
   forward. Plus Jakarta Sans carries headings/chrome (replacing the
   old monospace-everywhere identity); Inter handles body copy and
   dense data exactly as it already did.
   --accent-ink is the text color to put ON a solid --accent
   background (buttons, the "today" calendar marker, etc.).
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root,
:root[data-theme="light"] {
  --bg: #f8fafc;
  --bg-2: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #f1f5f9;
  --border: #cbd5e1;
  --border-soft: #e2e8f0;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;
  --accent: #007aff;
  --accent-2: #0060cc;
  --accent-hover: #0066d6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 122, 255, 0.10);
  --ok: #10b981;
  --ok-soft: rgba(16, 185, 129, 0.12);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --danger: #f43f5e;
  --danger-soft: rgba(244, 63, 94, 0.10);
  --idle: #e2e8f0;
  --shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --radius: 12px;
  --radius-sm: 8px;
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --bg-2: #0f172a;
  --panel: #131c2e;
  --panel-2: #1a2438;
  --panel-3: #223049;
  --border: #334155;
  --border-soft: #1e293b;
  --text: #e2e8f0;
  --text-2: #94a3b8;
  --muted: #64748b;
  --accent: #0a84ff;
  --accent-2: #55a6ff;
  --accent-hover: #3396ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --idle: #1e293b;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
/* Plus Jakarta Sans carries headings/chrome — a font-family change only
   (never text-transform), so it's safe even where a heading happens to
   interpolate a real client/pentester name (several do: pentest_detail.html,
   intake_form.html) — the name still renders exactly as typed. */
h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 26px 0 12px; letter-spacing: -.005em; }
h3 { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; margin: 0; }

/* ---------- App shell: sidebar + fluid content (full width) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 16px 12px;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--text);
  padding: 6px 8px 18px; letter-spacing: -.004em;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 12px;
}
.sidebar .brand .logo {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--accent);
  display: grid; place-items: center; color: var(--accent-ink); font-size: 16px;
  flex: none;
}
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar nav .section { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; padding: 16px 12px 7px; font-family: var(--font-body); font-weight: 600; }
.sidebar nav .section:first-child { padding-top: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500;
  font-family: var(--font-body); font-size: 13px;
  position: relative; border-left: 2px solid transparent;
  transition: background-color .1s, color .1s, border-color .1s;
}
.sidebar nav a:hover { background: var(--panel-2); color: var(--text); }
.sidebar nav a.active { background: var(--accent-soft); color: var(--accent-2); border-left-color: var(--accent); font-weight: 600; }
.sidebar nav a .ic { width: 16px; text-align: center; opacity: .85; flex: none; }
.sidebar nav a.active .ic { opacity: 1; }
.sidebar .spacer { flex: 1; }

.sidebar .side-foot { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.sidebar .who { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.sidebar .who .id { min-width: 0; }

/* Reusable initials avatar badge — sidebar footer + admin/users.html */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-2);
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-weight: 700; font-size: 12px; letter-spacing: -.02em;
}
.sidebar .who .name { font-weight: 600; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .who .role { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-body); }
.sidebar .side-actions { display: flex; gap: 8px; margin-top: 4px; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topstrip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.topstrip .crumb { color: var(--muted); font-size: 13px; }
.topstrip .grow { flex: 1; }
main { padding: 22px 28px 48px; width: 100%; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 34px; padding: 0; gap: 0;
  border-radius: var(--radius-sm); line-height: 1;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer; font-size: 15px;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle > span { display: block; line-height: 1; }

/* ---------- Buttons ---------- */
button, .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600; font-size: 13.5px; line-height: 1;
  transition: background-color .12s, border-color .12s, color .12s;
}
button:hover, .btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.secondary, button.secondary {
  background: var(--panel-2); border-color: var(--border); color: var(--text);
}
.btn.secondary:hover, button.secondary:hover { border-color: var(--accent); color: var(--text); background: var(--panel-3); }
button.danger, .btn.danger { background: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger); filter: brightness(.92); }
.btn.small, button.small { padding: 6px 10px; font-size: 13px; }
.linkbtn { background: none; border: none; color: var(--muted); padding: 4px 6px; font: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.linkbtn:hover { color: var(--text); background: var(--panel-2); }

/* Round "+" icon button — replaces text "+ Add row"/"+ Add pentester"
   buttons where the plus glyph alone is enough context (an adjacent
   labelled field already says what's being added). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; padding: 0; margin-top: 6px;
  background: var(--panel-2); border: 1px solid var(--border-soft);
  color: var(--accent-2); font-size: 17px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: var(--panel-3); border-color: var(--accent); color: var(--accent); }

/* Toasts — replace the old inline banner (pushed page content down, easy to
   miss) with a floating stack in the corner, per feedback that step-12
   validation errors ("select a pentester", over-allocation, ...) gave no
   visible feedback at all. */
.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent;
  box-shadow: var(--shadow); animation: pb-toast-in .18s ease-out;
}
.toast.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.toast.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.toast span { flex: 1; }
.toast-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; opacity: .7; padding: 0; }
.toast-close:hover { opacity: 1; }
/* Same look/animation as a corner toast, but sitting in normal document
   flow right above whichever form produced the error (pentest_detail.html's
   fetch-based step forms) instead of fixed to the viewport — the point is
   for it to appear exactly where the user already is, not pull focus (or
   scroll) anywhere else. */
.inline-toast { margin-bottom: 12px; }
.inline-toast.pb-pulse { animation: pb-toast-in .18s ease-out, pb-toast-pulse 1s ease-out .15s; }
@keyframes pb-toast-pulse {
  0% { box-shadow: 0 0 0 0 var(--danger-soft); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes pb-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 480px) { .toast-stack { left: 12px; right: 12px; max-width: none; } }
form.inline { display: inline; }

/* ---------- Forms ---------- */
label { display: block; margin: 12px 0 5px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 9px 11px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 84px; resize: vertical; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }

/* ---------- Cards / panels ---------- */
.card, .panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card h2:first-child, .panel h2:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .cols, .grid2 { grid-template-columns: 1fr; } }

/* ---------- Flash / alerts ---------- */
.flash { padding: 11px 16px; margin: 0 0 16px; border-radius: var(--radius-sm); font-size: 13.5px; border: 1px solid transparent; }
.flash.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.flash.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--panel); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }

/* ---------- Metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; transition: border-color .12s, background-color .12s;
}
a.metric:hover { border-color: var(--accent); background: var(--panel-2); color: var(--text); }
.metric .n { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: inherit; }
.metric .l { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.metric.accent { border-color: var(--accent); }
.metric.accent .n { color: var(--accent); }
.metric.ok { border-color: var(--ok); }
.metric.ok .n { color: var(--ok); }
.metric.warn { border-color: var(--warn); }
.metric.warn .n { color: var(--warn); }

/* ---------- Pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; background: var(--panel-3); border: 1px solid var(--border); color: var(--text-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.active, .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.accent { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.idle { background: var(--panel-3); color: var(--muted); border-color: transparent; }
.pill .dot { width: 7px; height: 7px; }

.muted { color: var(--muted); }
.sub { color: var(--muted); font-size: 13.5px; }
.mono { font-family: ui-monospace, Menlo, monospace; }

/* ---------- Dots ---------- */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--idle); }
.dot.done { background: var(--ok); }
.dot.active, .dot.current { background: var(--warn); }
.dot.idle, .dot.todo { background: var(--idle); }

/* ---------- Overview: pentest cards, compact single-line meta + phase rail ---------- */
.board-list { display: flex; flex-direction: column; gap: 10px; }
.pcard {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-sm);
  transition: border-color .12s, background-color .12s;
}
.pcard:hover { border-color: var(--accent); background: var(--panel-2); }
.pcard .phead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pcard .ptitle { font-weight: 650; font-size: 15px; color: var(--text); }
.pcard .pmeta-line { color: var(--muted); font-size: 12px; margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; width: 100%; max-width: 440px; box-shadow: var(--shadow); }

/* Calendar (month view) */
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-head h1 { margin: 0; }
.cal-nav { margin-left: auto; display: flex; gap: 6px; }
.cal-jump { display: flex; align-items: center; gap: 8px; margin: 14px 0 16px; }
.cal-jump select { width: auto; }

.cal-grid { padding: 0; overflow: hidden; box-shadow: var(--shadow); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--panel-2); border-bottom: 1px solid var(--border); }
.cal-wd { padding: 14px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); font-weight: 700; text-align: right; }
.cal-jump select {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-sm);
}

/* A week is two stacked layers: day-cell backgrounds + a spanning-bars grid. */
.cal-week { position: relative; }
.cal-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-bg .cal-cell { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 8px 8px; }
.cal-bg .cal-cell:last-child { border-right: none; }
.cal-cell.out { background: var(--bg-2); }
.cal-cell.out .cal-day { color: var(--muted); opacity: .55; }
.cal-day { text-align: right; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.cal-cell.today .cal-day { color: var(--accent-ink); background: var(--accent); border-radius: 50%; width: 22px; height: 22px; line-height: 22px; margin-left: auto; text-align: center; }

.cal-bars { position: absolute; left: 0; right: 0; top: 36px; bottom: 4px;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 26px;
  gap: 4px; padding: 0 4px; pointer-events: none; }
.cal-bar {
  pointer-events: auto; display: block; align-self: start; width: 100%;
  font-family: var(--font-body);
  font-size: 12px; line-height: 20px; height: 24px; padding: 1px 8px;
  border: none; border-radius: 5px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.cal-bar:hover { filter: brightness(1.08); text-decoration: none; color: var(--accent-ink); }
/* Confirmed once pentester_assigned (step 12) is reached — real testing
   dates AND a team on it. Draft is everything before that: either a real
   testing window with no assignee yet (mid-scheduling), or just the
   requested date captured at intake — grey either way, on purpose, since
   neither is a commitment yet. */
.cal-bar.confirmed { background: var(--ok); color: var(--accent-ink); }
/* A deliberately literal blue, not var(--accent) — this app's own accent
   has since been re-themed to violet (see the "Kinetic Ops" token block
   further down), which is also what .draft bars already use; reusing it
   here would make "my confirmed booking" and "still-draft" indistinguishable
   at a glance. Blue was requested explicitly for "my" bookings specifically
   to read as a third, unambiguous color next to green (team) and violet
   (draft). */
.cal-bar.confirmed-mine { background: #2563eb; color: #fff; }
.cal-bar.draft { background: var(--idle); color: var(--text-2); border: 1px dashed var(--border); }
.cal-bar.draft:hover { color: var(--text); filter: none; background: var(--panel-3); }
/* No testing happens on a weekend, so that portion of a bar never paints
   green/confirmed even mid-engagement — grid columns are Sun..Sat (0, 6). */
.cal-bar.weekend { background: var(--panel-3); color: var(--muted); border: 1px dashed var(--border-soft); opacity: .75; }
.cal-bar.weekend:hover { filter: none; }
/* Flatten the clipped edge when an event continues into an adjacent week. */
.cal-bar.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 720px) { .cal-bar { font-size: 10px; } }

/* Chips (timesheet quick-pick) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--accent); filter: none; color: var(--text); }

/* Filter bar */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.filterbar input, .filterbar select { width: auto; }
.filterbar .f-search { flex: 1 1 260px; min-width: 200px; }

/* 15-step rail grouped by 6 phases */
.rail { display: flex; gap: 10px; }
.rail .phase-group { flex: 1 1 0; min-width: 0; }
.rail .phase-name { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .segs { display: flex; gap: 4px; }
.seg { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--idle); position: relative; }
.seg.done { background: var(--ok); }
.seg.current { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.seg.todo { background: var(--idle); }
.seg[data-cancelled="1"] { background: var(--danger-soft); }

/* ---------- Detail: vertical stepper ---------- */
.stepper { list-style: none; margin: 0; padding: 0; position: relative; }
.stepper li { display: flex; gap: 14px; padding: 0 0 2px; }
.stepper .rail-col { display: flex; flex-direction: column; align-items: center; width: 26px; }
.stepper .node { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel); display: grid; place-items: center; font-size: 11px; color: var(--muted); flex: none; z-index: 1; }
.stepper li.done .node { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
.stepper li.current .node { background: var(--warn); border-color: var(--warn); color: #1a1a1a; box-shadow: 0 0 0 4px var(--warn-soft); }
.stepper .line { width: 2px; flex: 1; background: var(--border); margin: 2px 0; min-height: 14px; }
.stepper li.done .line { background: var(--ok); }
.stepper li:last-child .line { display: none; }
.stepper .body { padding-bottom: 16px; flex: 1; }
.stepper .body .name { font-weight: 600; font-size: 13.5px; }
.stepper li.current .body .name { color: var(--warn); }
.stepper li.todo .body .name { color: var(--muted); }
.stepper .body .when { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stepper .phase-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-2); font-weight: 600; }

/* ---------- Nextcloud sync: confirmation fields ---------- */
.candidate-group-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 18px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.candidate-group-head:first-child { margin-top: 4px; }

.kv { width: 100%; }
.kv td { padding: 8px 4px; border-bottom: 1px solid var(--border-soft); }
.kv td:first-child { color: var(--muted); width: 42%; font-size: 13.5px; }

/* Pager (board list) */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.pager-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Auth page ---------- */
.auth-wrap { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }

/* Entrance animation for the auth flow (login → 2FA code prompt → 2FA setup
   → forced password change) — each step is a full page load (no SPA
   routing here), so without this the transition between them is just a flat
   flash. `.auth-card` always plays it (that class only ever appears on
   login.html/login_2fa.html); `.enter` is the explicit opt-in used on the
   two /account pages, which render inside the normal sidebar layout (.card)
   rather than the bare auth layout — deliberately not applied to `.card` in
   general, since replaying this on every filter/nav click elsewhere in the
   app would read as gimmicky rather than purposeful. */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card, .enter {
  animation: card-enter .32s cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .auth-card, .enter { animation: none; }
}

/* ---------- Intake: markdown-document form ---------- */
.lang-switch { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.lang-btn { display: inline-block; background: transparent; color: var(--text-2); border: none; padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 4px; text-decoration: none; cursor: pointer; }
.lang-btn:hover { color: var(--text); text-decoration: none; }
.lang-btn.active { background: var(--accent); color: var(--accent-ink); }
.lang-btn.active:hover { color: var(--accent-ink); }

.md-doc {
  max-width: 920px; margin-top: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 30px 40px 26px;
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.7;
}
.md-doc .md-h {
  font-family: inherit; font-size: 15px; font-weight: 650; color: var(--accent-2);
  margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.md-doc .md-h:first-of-type { margin-top: 0; }
.md-list { list-style: none; margin: 0; padding: 0; }
.md-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0; }
.md-bullet { color: var(--muted); user-select: none; }
.md-label { color: var(--text-2); white-space: nowrap; }
.md-inline {
  flex: 1 1 260px; min-width: 200px; width: auto;
  background: transparent; border: none; border-bottom: 1px dashed var(--border);
  border-radius: 0; padding: 2px 4px; font-family: inherit; color: var(--text);
}
.md-inline:focus { box-shadow: none; border-bottom: 1px solid var(--accent); background: var(--accent-soft); }
.md-sub { flex: 1 1 100%; padding-left: 22px; margin-top: 2px; }
.md-block {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: 6px; font-family: inherit; font-size: 13px; min-height: 40px;
}
.md-block::placeholder, .md-inline::placeholder { color: var(--muted); opacity: .8; font-style: italic; }
.md-actions { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.md-actions .sub { font-family: -apple-system, "Segoe UI", sans-serif; }

/* Repeatable day-estimate rows (Time estimation and planning) */
.repeat-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.repeat-row { display: flex; align-items: center; gap: 8px; }
.repeat-days { width: 70px; flex: 0 0 auto; }
.repeat-label { flex: 1 1 260px; }
.repeat-days, .repeat-label {
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 4px 8px; font-family: inherit; font-size: 13px; color: var(--text);
}

/* Knowledge-level cascading checkboxes */
.kl-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.kl-check { display: flex; align-items: center; gap: 6px; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; cursor: pointer; }
.kl-check input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }

/* Outlook-style date-range overlay (intake form's "Requested date for this
   test") — click a start day, click an end day; the range greys live via
   the same --idle token used for "draft" everywhere else in the app. */
.dr-field { position: relative; display: inline-block; }
.dr-display {
  text-align: left; cursor: pointer; min-width: 220px;
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 7px 12px; font-family: var(--font-body); font-size: 13px; color: var(--text);
}
.dr-display:disabled { cursor: default; opacity: .7; }
/* Enlarged, centered overlay (not a small anchored dropdown) — an anchored
   popover here used to overflow off-screen depending on where the trigger
   field sat in the page (found live: elements clipped/overflowing near the
   page edge). A fixed, full-viewport backdrop with a centered card, same
   pattern as the calendar's own event-quick-view modal, has no anchor point
   to overflow from at all. */
.dr-popover {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .45);
  align-items: center; justify-content: center; padding: 20px;
}
.dr-popover.open { display: flex; }
.dr-popover-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; width: 100%; max-width: 340px;
}
.dr-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
.dr-weekdays { margin-bottom: 4px; border-bottom: none; }
.dr-weekdays .cal-wd { text-align: center; padding: 2px 0; }
.dr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dr-day {
  /* This is a button, so explicitly clear the shared button primitive's
     14px horizontal padding and 32px minimum height. Without this, seven
     cells cannot fit in the picker grid and their day numbers overflow. */
  aspect-ratio: 1; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: none; background: transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; line-height: 1; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  overflow: hidden;
}
.dr-day:hover { background: var(--panel-3); }
.dr-day.out { color: var(--muted); opacity: .5; }
.dr-day.today { font-weight: 700; color: var(--accent); }
.dr-day.in-range { background: var(--idle); border-radius: 0; }
.dr-day.range-start { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dr-day.range-end { background: var(--accent); color: var(--accent-ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dr-day.range-start.range-end { border-radius: var(--radius-sm); }
/* Step 11's slot-picker calendar (pentest_detail.html) reuses this same
   .dr-day cell — the intake form's plain date-range picker never sets
   these classes, so it renders exactly as before, unaffected. */
.dr-avail-badge { display: block; min-width: 1em; font-size: 8px; font-weight: 700; line-height: 1; text-align: center; }
.dr-day.avail-some .dr-avail-badge { color: var(--ok); }
.dr-day.avail-none .dr-avail-badge { color: var(--danger); }
.dr-day.range-start .dr-avail-badge, .dr-day.range-end .dr-avail-badge { color: inherit; opacity: .85; }

/* ---------- Responsive: collapse sidebar ---------- */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  .sidebar .brand { border-bottom: none; margin-bottom: 0; padding: 6px 8px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar nav .section { display: none; }
  .sidebar .spacer { flex: 0; }
  .sidebar .side-foot { border: none; padding: 0; margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .sidebar .who { display: none; }
  main, .topstrip { padding-left: 16px; padding-right: 16px; }
  .rail .phase-name { font-size: 9px; }
}

/* ---------- Enterprise refinement: compact, data-first workspace ---------- */
:root, :root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-2: #f1f3f5;
  --panel: #fff;
  --panel-2: #f8f9fa;
  --panel-3: #eef1f4;
  --border: #d9dee5;
  --border-soft: #e8ebef;
  --text: #1d2939;
  --text-2: #475467;
  --muted: #667085;
  --accent: #155eef;
  --accent-2: #0b4fc4;
  --accent-hover: #004ee6;
  --accent-soft: #e9efff;
  --ok: #087443;
  --ok-soft: #e7f6ec;
  --warn: #a15c07;
  --warn-soft: #fff4df;
  --danger: #b42318;
  --danger-soft: #fef0f0;
  --idle: #e4e7ec;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 8px 20px rgba(16, 24, 40, .12);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
}
body { font-size: 14px; line-height: 1.45; }
h1 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
h2 { font-size: 14px; line-height: 1.35; margin: 22px 0 10px; }
h3 { font-size: 13px; }
.sidebar { width: 224px; flex-basis: 224px; padding: 14px 10px; background: #f9fafb; }
.sidebar .brand { padding: 5px 8px 16px; gap: 9px; font-size: 14px; }
.sidebar .brand .logo { width: 26px; height: 26px; border-radius: 5px; font-size: 9px; letter-spacing: -.04em; }
.sidebar nav .section { padding: 15px 10px 6px; font-size: 10px; }
.sidebar nav a { padding: 7px 10px; gap: 9px; border-left: 0; border-radius: 4px; font-size: 13px; }
.sidebar nav a.active { box-shadow: inset 2px 0 0 var(--accent); }
.sidebar nav a .ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.sidebar nav a .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav a .ic svg rect { fill: none; }
.sidebar .side-foot { padding-top: 10px; }
.topstrip { min-height: 48px; padding: 0 26px; background: rgba(255,255,255,.82); }
.topstrip .crumb { font-size: 12.5px; }
main { padding: 20px 26px 40px; max-width: 1600px; }
button, .btn { min-height: 32px; padding: 7px 11px; border-radius: 4px; font-size: 13px; }
.btn.small, button.small { min-height: 28px; padding: 5px 9px; font-size: 12.5px; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { padding: 7px 10px; min-height: 34px; border-radius: 4px; font-size: 13px; background: var(--panel); }
textarea { min-height: 78px; }
label { margin: 11px 0 5px; font-size: 12.5px; font-weight: 600; }
.card, .panel { border-radius: 6px; padding: 15px 16px; box-shadow: none; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.metric { padding: 12px 14px; border-radius: 5px; box-shadow: none; }
.metric .n { font-size: 23px; }.metric .l { font-size: 12px; }
.filterbar { gap: 8px; margin-bottom: 12px; padding: 9px 10px; border-radius: 5px; box-shadow: none; }
.filterbar .f-search { min-height: 32px; }
.tablewrap { border-radius: 5px; }
th, td { padding: 9px 12px; font-size: 13px; }
th { position: sticky; top: 48px; z-index: 1; font-size: 10.5px; background: var(--panel-2); }
tbody tr:hover { background: var(--panel-2); }
.pill { padding: 2px 7px; border-radius: 999px; font-size: 11.5px; }
.pcard { padding: 12px 14px; border-radius: 5px; box-shadow: none; }
.pcard .phead { gap: 9px; margin-bottom: 4px; }.pcard .ptitle { font-size: 14px; }.pcard .pmeta-line { margin-bottom: 10px; }
.rail { gap: 8px; }.rail .phase-name { font-size: 9.5px; margin-bottom: 4px; }.seg { height: 6px; border-radius: 2px; }
.cal-head { min-height: 34px; }.cal-nav { gap: 4px; }.cal-jump { margin: 10px 0 12px; }
.cal-grid { border-radius: 5px; box-shadow: none; }.cal-wd { padding: 9px 10px; font-size: 10.5px; }
.cal-bg .cal-cell { padding: 6px 8px; }.cal-day { font-size: 12.5px; }.cal-bars { top: 31px; grid-auto-rows: 23px; gap: 3px; }
.cal-bar { height: 21px; padding: 0 6px; border-radius: 3px; line-height: 20px; font-size: 11px; font-weight: 600; }
.modal-card { max-width: 480px; border-radius: 6px; padding: 18px; }.modal-overlay { background: rgba(16,24,40,.42); }
.stepper li { gap: 11px; }.stepper .body { padding-bottom: 13px; }.stepper .node { width: 20px; height: 20px; font-size: 10px; }.stepper .rail-col { width: 22px; }
.md-doc { max-width: 980px; padding: 24px 30px; border-radius: 6px; box-shadow: none; font-size: 13px; }
.lang-switch { border-radius: 5px; }.lang-btn { padding: 5px 10px; border-radius: 3px; font-size: 12.5px; }
.toast { border-radius: 5px; font-size: 13px; }
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } th { top: auto; } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr 1fr; } main { padding: 16px 14px 28px; } .topstrip { padding: 0 14px; } }

/* Shared page composition. Kept deliberately structural so screens stay
   recognisable as operational workflows, not collections of decorative cards. */
.page-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.page-header h1 { margin: 0 0 3px; }
.page-header .sub { margin: 0; }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 10px; margin: 0 0 12px; border: 1px solid var(--border); background: var(--panel); border-radius: 5px; }
.toolbar form { display: flex; align-items: center; gap: 8px; flex: 1 1 420px; flex-wrap: wrap; }
.toolbar .search { flex: 1 1 240px; min-width: 180px; }
.empty-state { border: 1px dashed var(--border); border-radius: 5px; background: var(--panel); padding: 28px 18px; color: var(--text-2); text-align: center; }
.empty-state strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; }
.section-panel { border: 1px solid var(--border); background: var(--panel); border-radius: 5px; }
.section-panel > .section-heading { display: flex; align-items: center; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--border-soft); }
.section-panel > .section-heading h2 { margin: 0; }
.section-panel > .section-content { padding: 14px; }
.data-table td:first-child { font-weight: 600; color: var(--text); }
.data-table .numeric { text-align: right; }
@media (max-width: 640px) { .page-actions { width: 100%; margin-left: 0; } .toolbar form { flex-basis: 100%; } }

/* Kinetic Ops reference system — sourced from the supplied user-management
   and calendar artifacts. These tokens intentionally replace the interim
   blue/grey pass so every existing workflow shares the reference language. */
:root, :root[data-theme="light"] {
  --bg: #faf8ff; --bg-2: #f2f3ff; --panel: #fff; --panel-2: #f8faff; --panel-3: #eaedff;
  --border: #e2e8f0; --border-soft: #edf0f5; --text: #131b2e; --text-2: #484457; --muted: #747087;
  --accent: #5d2bff; --accent-2: #4500d9; --accent-hover: #4500d9; --accent-soft: #eeeaff;
  --ok: #047857; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --danger: #e11d48; --danger-soft: #fff1f2;
  --idle: #e6e9f6; --radius: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.02);
  --shadow: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.05);
}
body { font: 14px/1.375 var(--font-body); background: var(--bg); }
h1 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 16px; line-height: 1.5; } h3 { font-size: 14px; }
.app-shell { background: var(--bg); }
.sidebar { width: 256px; flex-basis: 256px; padding: 16px; background: #fff; border: 0; box-shadow: 1px 0 8px rgba(0,0,0,.04); }
.sidebar .brand { height: 48px; border: 0; padding: 0 8px; margin: 0 0 14px; font-size: 16px; }
.sidebar .brand .logo { width: 30px; height: 30px; border-radius: 8px; font-size: 10px; }
.sidebar nav { gap: 3px; }.sidebar nav .section { padding: 18px 10px 7px; font-size: 11px; color: var(--text-2); }
.sidebar nav a { min-height: 38px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--text-2); }
.sidebar nav a:hover { background: var(--panel-3); }.sidebar nav a.active { color: #fff; background: var(--accent); box-shadow: var(--shadow-sm); }
.sidebar .side-foot { border: 0; padding: 0; }.sidebar .who { padding: 10px; background: var(--bg-2); border-radius: 12px; }
.avatar { background: var(--accent); color: #fff; }.sidebar .side-actions { margin: 8px 0 0; }
.topstrip { min-height: 64px; padding: 0 24px; background: rgba(255,255,255,.9); border: 0; box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.topstrip .crumb { font-size: 12px; color: var(--text-2); }.content main { padding: 24px; max-width: none; }
button,.btn { min-height: 38px; padding: 8px 14px; border-radius: 8px; font-size: 12px; letter-spacing: .01em; }
.btn.secondary,button.secondary { background: #fff; border-color: var(--border); }.btn.small,button.small { min-height: 32px; border-radius: 7px; }
input,select,textarea { min-height: 38px; border-radius: 8px; background: #fff; border-color: var(--border); font-size: 13px; }
input:focus,select:focus,textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(93,43,255,.15); }
.card,.panel,.section-panel { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow-sm); }
.tablewrap { border-radius: 12px; border-color: var(--border); box-shadow: var(--shadow-sm); } th,td { padding: 12px 16px; } th { height: 44px; background: var(--panel-2); font-size: 11px; color: #64748b; } tbody tr { height: 48px; }
.pill { min-height: 24px; padding: 3px 10px; font-size: 11px; }.pill.accent { background: #f2f5ff; color: var(--accent); }.pill.ok { background: #ecfdf5; color: #047857; }.pill.active { background: #fffbeb; color: #b45309; }
.page-header { margin-bottom: 24px; }.page-header h1 { font-size: 28px; }.toolbar { min-height: 48px; border-radius: 12px; padding: 7px 10px; box-shadow: var(--shadow-sm); }
.metric { border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }.metric .n { font-family: var(--font-display); font-size: 24px; }.pcard { border-radius: 12px; padding: 16px; }
.cal-grid { border-radius: 16px; }.cal-wd { padding: 12px; }.cal-bar { border-radius: 6px; }.modal-card { border-radius: 16px; }

/* Login is intentionally the sole place the supplied Lottie is used. */
.auth-theme { position: fixed; top: 18px; right: 18px; z-index: 2; }
.auth-wrap.auth-layout { grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); padding: 0; place-items: stretch; background: var(--bg); }
.auth-intro { min-height: 100vh; padding: 48px clamp(36px,7vw,112px); display: flex; flex-direction: column; background: linear-gradient(145deg,#f0edff 0%,#f8f7ff 56%,#eef2ff 100%); overflow: hidden; }
.auth-intro-brand,.auth-card-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.auth-intro-brand > span,.auth-card-brand .logo { display: grid; place-items:center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; font-family: var(--font-body); font-size: 10px; }
.login-animation { width: min(540px,100%); flex: 1; min-height: 280px; margin: 18px auto 6px; }
.auth-intro-copy { max-width: 460px; }.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; letter-spacing: .08em; font-weight: 700; }.auth-intro-copy h1 { font-size: clamp(30px,3vw,46px); }.auth-intro-copy p:last-child { color: var(--text-2); font-size: 15px; max-width: 390px; }
.auth-card { align-self: center; justify-self: center; width: min(420px,calc(100% - 48px)); }.auth-layout .auth-card { margin: 0; }.auth-card-brand { margin-bottom: 48px; }.auth-card-heading { margin-bottom: 24px; }.auth-card-heading h1 { font-size: 25px; margin-bottom: 8px; }.auth-form { padding: 24px; }.auth-submit { margin-top: 20px; }.auth-submit button { width: 100%; justify-content: center; }.auth-simple { background: var(--bg); }.auth-simple .auth-card { margin: 0; }
@media (max-width: 680px) { .auth-wrap.auth-layout { display: block; padding: 32px 16px; }.auth-intro { display: none; }.auth-layout .auth-card { margin: 80px auto 0; }.auth-card-brand { margin-bottom: 32px; } }

/* Calendar composition follows the supplied calendar workspace reference.
   Only existing month navigation, scope and engagement data are exposed. */
.calendar-workspace { display: flex; flex-direction: column; gap: 16px; }
.calendar-toolbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.calendar-crumb { color: var(--text-2); font-size: 11px; font-weight: 600; }.calendar-crumb span { color: #c9c3da; padding: 0 5px; }.calendar-crumb strong { color: var(--accent); }.calendar-title-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }.calendar-title-row h1 { font-size: 20px; margin: 0; }.calendar-state { padding: 3px 8px; border-radius: 999px; background: #f2f5ff; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.calendar-navigation,.calendar-actions,.calendar-scope { display: flex; align-items: center; gap: 5px; }.calendar-navigation { background: var(--bg-2); padding: 4px; border-radius: 8px; }.calendar-icon-control,.calendar-today { display: grid; place-items: center; height: 30px; min-width: 30px; border-radius: 6px; color: var(--text-2); font-weight: 600; }.calendar-icon-control:hover,.calendar-today:hover { background:#fff; color:var(--text); }.calendar-today { padding: 0 10px; font-size: 12px; }.calendar-period { padding: 0 9px; border-left: 1px solid var(--border); margin-left: 3px; }.calendar-period span { display:block; color:var(--text); font-size:12px; font-weight:700; white-space:nowrap; }.calendar-period small { color:var(--muted); font-size:9px; letter-spacing:.06em; }
.calendar-actions { justify-content:flex-end; }.calendar-scope { padding: 4px; background:var(--bg-2); border-radius:8px; }.calendar-scope a { padding:6px 10px; border-radius:5px; font-size:12px; color:var(--text-2); font-weight:600; }.calendar-scope a.active { color:var(--accent); background:#fff; box-shadow:var(--shadow-sm); }
.calendar-surface { background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }.calendar-surface-head { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--border-soft); }.calendar-key,.calendar-timezone { color:var(--text-2); font-size:11px; }.key-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 5px 0 14px; }.key-dot:first-child { margin-left:0; }.key-dot.confirmed { background:#10b981; }.key-dot.mine { background:#2563eb; }.key-dot.draft { background:#c9c3da; }
.calendar-surface .cal-grid { border:0; border-radius:0; }.calendar-surface .cal-weekdays { background:#f8faff; }.calendar-surface .cal-wd { padding:11px 12px; text-align:left; color:#64748b; font-size:10px; }.calendar-surface .cal-cell { padding:8px 10px; background:#fff; }.calendar-surface .cal-cell.out { background:#fafbff; }.calendar-surface .cal-cell.today { background:#f7f5ff; }.calendar-surface .cal-day { text-align:left; font-size:12px; }.calendar-surface .cal-cell.today .cal-day { width:24px; height:24px; line-height:24px; margin:0; background:var(--accent); }.calendar-surface .cal-bars { top:34px; bottom:6px; grid-auto-rows:25px; gap:4px; padding:0 5px; }.calendar-surface .cal-bar { height:24px; line-height:22px; padding:0 7px; border-radius:5px; font-size:11px; }.calendar-surface .cal-bar.confirmed { background:#ecfdf5; color:#047857; border-left:3px solid #10b981; }.calendar-surface .cal-bar.confirmed-mine { background:#eff6ff; color:#1d4ed8; border-left:3px solid #2563eb; }.calendar-surface .cal-bar.draft { background:#f2f5ff; color:#4500d9; border:1px solid #ddd5ff; border-left:3px solid #a996ff; }.calendar-surface .cal-bar.weekend { background:#f8faff; color:var(--muted); border-color:var(--border-soft); }
.calendar-unscheduled { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); }.calendar-unscheduled h2 { margin:0 0 3px; }.calendar-unscheduled .chips { margin:0; justify-content:flex-end; }.modal-actions { margin-top:16px; }.modal-card .card-head { margin-bottom:12px; }.modal-card .card-head h2 { margin:0; }.modal-card .card-head .linkbtn { margin-left:auto; font-size:18px; }
.mfa-animation { width:150px; height:100px; margin:-8px auto 8px; overflow:hidden; }
@media(max-width:1050px){.calendar-toolbar{grid-template-columns:1fr auto;}.calendar-actions{grid-column:1 / -1;justify-content:flex-start;}.calendar-unscheduled{display:block;}.calendar-unscheduled .chips{justify-content:flex-start;margin-top:12px;}}@media(max-width:640px){.calendar-toolbar{display:flex;align-items:flex-start;flex-direction:column;gap:12px;}.calendar-actions{flex-wrap:wrap;}.calendar-surface-head{padding:0 10px;}.calendar-timezone{display:none;}}

/* Warpnet branding: published palette and official logo/icon assets from
   warpnet.nl/branding. The product name remains PentestBoard. */
:root, :root[data-theme="light"] {
  --bg: #eff1f3; --bg-2: #e5e8ec; --panel: #ffffff; --panel-2: #f7f8f9; --panel-3: #e9edf1;
  --border: #d7dce1; --border-soft: #e5e8eb; --text: #050520; --text-2: #454545; --muted: #686d74;
  --accent: #000090; --accent-2: #000050; --accent-hover: #000050; --accent-ink: #ffffff; --accent-soft: rgba(0,0,144,.10);
  --ok: #087f5b; --ok-soft: #e7f5ef; --warn: #a96105; --warn-soft: #fff4dd; --danger: #b42318; --danger-soft: #fef0f0;
}
:root[data-theme="dark"] { --bg:#050520; --bg-2:#0c0c20; --panel:#101027; --panel-2:#17172f; --panel-3:#20203a; --border:#30304a; --border-soft:#23233a; --text:#fff; --text-2:#d4d5dc; --muted:#a5a7b0; --accent:#5f63ff; --accent-2:#a4a6ff; --accent-hover:#7679ff; --accent-soft:rgba(95,99,255,.18); }
.brand-logo { display:block; width:72px; height:24px; object-fit:contain; object-position:left center; }
.sidebar .brand { gap:8px; }.sidebar .brand > span:last-child { padding-left:8px; border-left:1px solid var(--border); font-size:13px; color:var(--text-2); font-weight:600; }
.sidebar .brand .logo { background-image:url('/static/brand/warpnet-icon.avif'); background-size:cover; background-color:transparent; color:transparent; }
/* Avatars are used to distinguish people in the sidebar, user table and
   engagement cards. The former icon background made every person look the
   same and hid the initials already rendered by the templates. Keep the
   brand colour, but let the supplied identity cue remain visible. */
.avatar { background-image:none; background-color:var(--accent); color:var(--accent-ink); }
button:focus-visible,.btn:focus-visible,a:focus-visible { outline-color:#000090; }
input:focus,select:focus,textarea:focus { border-color:#000090; box-shadow:0 0 0 3px rgba(0,0,144,.15); }
.sidebar nav a.active { background:#000090; }.calendar-surface .cal-bar.draft { color:#000090; border-left-color:#000090; background:#eef0ff; }.calendar-state,.calendar-crumb strong { color:#000090; }.calendar-state { background:#e8e9ff; }.calendar-scope a.active { color:#000090; }
.auth-intro { background:linear-gradient(145deg,#eff1f3 0%,#fff 55%,#e5e8ec 100%); }.auth-intro-brand,.auth-card-brand { gap:10px; }.auth-intro-brand img,.auth-card-brand img { display:block; width:94px; height:26px; object-fit:contain; object-position:left; }.auth-intro-brand > span,.auth-card-brand > span { padding-left:10px; border-left:1px solid #cfd4da; font-size:13px; color:var(--text-2); font-weight:600; }.auth-intro-brand > span,.auth-card-brand .logo { width:auto; height:auto; border-radius:0; background:none; color:inherit; font-size:inherit; }

/* Dark theme repair. Light-theme declarations above are intentionally left
   untouched; these overrides replace only hard-coded light surfaces that
   bypass the semantic token system. */
:root[data-theme="dark"] .sidebar { background: var(--panel); box-shadow: 1px 0 12px rgba(0,0,0,.35); }
:root[data-theme="dark"] .topstrip { background: rgba(16,16,39,.9); box-shadow: 0 1px 10px rgba(0,0,0,.35); }
:root[data-theme="dark"] .btn.secondary,
:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] th { color: var(--text-2); }
:root[data-theme="dark"] .pill.accent { background: rgba(95,99,255,.18); color: #b9bbff; }
:root[data-theme="dark"] .pill.ok { background: rgba(8,127,91,.20); color: #75dbb8; }
:root[data-theme="dark"] .pill.active { background: rgba(169,97,5,.20); color: #f4c46e; }
:root[data-theme="dark"] .calendar-toolbar,
:root[data-theme="dark"] .calendar-surface,
:root[data-theme="dark"] .calendar-unscheduled { background: var(--panel); }
:root[data-theme="dark"] .calendar-navigation,
:root[data-theme="dark"] .calendar-scope { background: var(--panel-2); }
:root[data-theme="dark"] .calendar-icon-control:hover,
:root[data-theme="dark"] .calendar-today:hover,
:root[data-theme="dark"] .calendar-scope a.active { background: var(--panel-3); color: var(--accent-2); }
:root[data-theme="dark"] .calendar-surface .cal-weekdays { background: var(--panel-2); }
:root[data-theme="dark"] .calendar-surface .cal-wd { color: var(--text-2); }
:root[data-theme="dark"] .calendar-surface .cal-cell { background: var(--panel); }
:root[data-theme="dark"] .calendar-surface .cal-cell.out,
:root[data-theme="dark"] .calendar-surface .cal-bar.weekend { background: var(--panel-2); }
:root[data-theme="dark"] .calendar-surface .cal-cell.today { background: rgba(95,99,255,.13); }
:root[data-theme="dark"] .calendar-surface .cal-bar.confirmed { background: rgba(8,127,91,.22); color: #75dbb8; border-left-color: #34c38f; }
:root[data-theme="dark"] .calendar-surface .cal-bar.confirmed-mine { background: rgba(95,99,255,.22); color: #c7c8ff; border-left-color: #878aff; }
:root[data-theme="dark"] .calendar-surface .cal-bar.draft { background: rgba(95,99,255,.16); color: #c7c8ff; border-color: rgba(164,166,255,.35); border-left-color: #878aff; }
:root[data-theme="dark"] .calendar-state { background: rgba(95,99,255,.18); color: #c7c8ff; }
:root[data-theme="dark"] .calendar-crumb strong { color: #a4a6ff; }
:root[data-theme="dark"] .auth-wrap.auth-layout,
:root[data-theme="dark"] .auth-simple { background: var(--bg); }
:root[data-theme="dark"] .auth-intro { background: linear-gradient(145deg, #0c0c20 0%, #101027 55%, #17172f 100%); }
:root[data-theme="dark"] .auth-intro-brand > span,
:root[data-theme="dark"] .auth-card-brand > span { border-left-color: var(--border); }
:root[data-theme="dark"] .auth-form { background: var(--panel); }
:root[data-theme="dark"] .auth-theme .theme-toggle { background: var(--panel-2); }
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .auth-intro-brand img,
:root[data-theme="dark"] .auth-card-brand img { content: url('/static/brand/warpnet-logo-light.avif'); }

/* Small-screen and constrained-height repairs. These are deliberately
   presentational: no controls, links, form names, or workflow states change. */
.modal-card {
  max-height: min(720px, calc(100vh - 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  /* Seven calendar columns need a readable minimum width; letting them
     compress makes dates and event labels impossible to scan or activate. */
  .calendar-surface { overflow-x: auto; }
  .calendar-surface .cal-grid { min-width: 700px; }
  .calendar-surface-head { min-width: 700px; }
}

@media (max-width: 640px) {
  .sidebar { align-items: stretch; }
  .sidebar .brand { align-self: flex-start; }
  .sidebar nav { width: 100%; }
  .sidebar nav a { flex: 1 1 145px; }
  .sidebar .side-foot { margin-left: 0; width: 100%; justify-content: space-between; }
  .sidebar .side-actions { flex: 1; justify-content: flex-end; }
  .sidebar .side-actions form.inline { flex: 0 1 180px !important; }

  .board-search { width: 100%; }
  .board-search-form { width: 100%; }
  .board-toolbar-filters { width: 100%; }
  .board-toolbar-count { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Overview (Kanban engagement board) — layout follows the supplied
   "Productive"-style engagement-board reference; only real PentestBoard
   data is shown (no invented dollar figures, billing rates, live timers,
   or vulnerability tallies — this app tracks intake/scheduling/reporting
   only, not billing). Color keys (warn/idle/accent/ok/danger) reuse this
   file's own existing tokens rather than the reference's separate violet
   brand hue, staying consistent with the sidebar/buttons/calendar already
   built on --accent. */
.board-workspace { display: flex; flex-direction: column; gap: 20px; }
.board-toolbar-top h1 { margin: 2px 0 4px; }
.board-crumb { color: var(--text-2); font-size: 11px; font-weight: 600; }
.board-crumb span { color: var(--outline-variant, #c9c3da); padding: 0 5px; }
.board-crumb strong { color: var(--accent); }

.board-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.board-stat { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.board-stat-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.board-stat-ic { font-size: 15px; }
.board-stat-ic.accent { color: var(--accent); }
.board-stat-ic.warn { color: var(--warn); }
.board-stat-ic.ok { color: var(--ok); }
.board-stat-n { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.board-stat-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px; }
.board-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.board-search-form { margin: 0; }
.board-search { width: 240px; margin: 0; height: 36px; }
.board-pill-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: var(--panel-2); padding: 3px; border-radius: 8px; }
.board-pill-group a { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.board-pill-group a.active { background: var(--panel); color: var(--accent-2); box-shadow: var(--shadow-sm); }
.board-toolbar-count { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 12px; }
.board-toolbar-count a { font-weight: 600; }

/* A fixed-height box, not a section that grows to fit its tallest column —
   the whole point of a Kanban board is that columns scroll independently;
   letting the page itself grow to the tallest column's height (found live:
   one busy column pushed the "Needs attention"/"Team workload" panels far
   below the fold, forcing a long page scroll just to reach them) defeats
   that. Columns scroll horizontally together (drag the board itself, or
   scroll while hovering the header row); each column's card list scrolls
   vertically on its own, independent of its neighbors. */
.board-kanban {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  height: min(620px, calc(100vh - 360px));
  min-height: 360px;
  padding-bottom: 4px;
}
.board-column { display: flex; flex-direction: column; flex: 0 0 280px; min-width: 0; background: var(--panel-2); border-radius: var(--radius); padding: 10px; overflow: hidden; }
.board-column-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; flex: none; }
.board-column-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.board-column-dot.warn { background: var(--warn); }
.board-column-dot.idle { background: var(--muted); }
.board-column-dot.accent { background: var(--accent); }
.board-column-dot.ok { background: var(--ok); }
.board-column-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
.board-column-count { margin-left: auto; background: var(--panel); color: var(--text-2); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.board-column-cards { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; flex: 1; padding-right: 4px; margin-right: -4px; }
.board-column-empty { color: var(--muted); font-size: 12px; padding: 10px 6px; }

.board-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px; color: inherit; transition: box-shadow .12s, transform .12s; }
.board-card:hover { box-shadow: var(--shadow); color: inherit; transform: translateY(-1px); }
.board-card-head { display: flex; align-items: center; }
.board-card-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.board-card-char { color: var(--muted); font-size: 11.5px; margin-top: -4px; }
.board-card-context { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); font-size: 12px; }
.board-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.board-avatars { display: flex; }
.board-avatars .avatar { width: 22px; height: 22px; font-size: 10px; margin-left: -6px; border: 2px solid var(--panel); }
.board-avatars .avatar:first-child { margin-left: 0; }

.board-progress { width: 100%; height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.board-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.board-progress-fill.ok { background: var(--ok); }
.board-progress-fill.warn { background: var(--warn); }

.board-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.board-panel { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.board-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.board-panel-head h3 { margin: 0 0 2px; }
.board-attention-list { display: flex; flex-direction: column; gap: 4px; }
.board-attention-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: var(--radius-sm); color: inherit; }
.board-attention-item:hover { background: var(--panel-2); color: inherit; }
.board-attention-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.board-attention-dot.danger { background: var(--danger); }
.board-attention-dot.warn { background: var(--warn); }
.board-attention-title { font-weight: 600; font-size: 13px; color: var(--text); }
.board-workload-list { display: flex; flex-direction: column; gap: 12px; }
.board-workload-label { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.board-workload-label span:first-child { font-weight: 600; color: var(--text); }

@media (max-width: 1200px) { .board-bottom { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .board-stats { grid-template-columns: repeat(2, 1fr); } .board-column { flex-basis: 240px; } }