/* =====================================================================
   VaultorNet v27 — Compliance/Radar mode toggle, Assets, Agents,
   Consent Management. Loaded after v26.css, before theme.css, so it
   reads the same tokens (--vn-card, --color-text, --color-accent,
   --cp-good/-warn/-bad, --space-*, --radius-*) and the dark palette's
   overrides still win.
   ===================================================================== */
:root {
  --v27-line: color-mix(in srgb, var(--color-text) 12%, transparent);
  --v27-soft: color-mix(in srgb, var(--color-text) 62%, transparent);
  --v27-faint: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* ---- Compliance / Radar mode toggle (top bar) ------------------------- */
/* Compact, refined segmented pill. Sits in the top bar; small enough not to
   compete with the brand, with a crisp sliding-pill active state. */
.vn-modetoggle {
  display: inline-flex; align-items: center; gap: 1px; margin-left: var(--space-3);
  padding: 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border: 1px solid var(--v27-line);
}
.vn-modeseg {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1;
  letter-spacing: .01em; color: var(--v27-soft); text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.vn-modeseg:hover { color: var(--color-text); }
.vn-modeseg-ico { display: inline-flex; opacity: .85; }
.vn-modeseg-ico svg { width: 13px; height: 13px; }
.vn-modeseg.is-on {
  background: var(--color-surface, #fff); color: var(--color-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.vn-modeseg.is-on .vn-modeseg-ico { opacity: 1; }
[data-theme="dark"] .vn-modeseg.is-on { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); color: #fff; }
@media (max-width: 720px) {
  .vn-modetoggle { margin-left: 8px; }
  .vn-modeseg { padding: 3px 8px; }
}

/* ---- Radar dashboard (mode landing) ----------------------------------- */
.vn-rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.vn-rd-stat {
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--v27-line); background: var(--vn-card);
  display: flex; flex-direction: column; gap: 6px;
}
.vn-rd-stat .k { font-size: 12px; color: var(--v27-soft); text-transform: uppercase; letter-spacing: .04em; }
.vn-rd-stat .v { font-family: var(--font-heading); font-size: 30px; line-height: 1; }
.vn-rd-stat .s { font-size: 12px; color: var(--v27-soft); }
.vn-rd-stat.is-bad .v { color: var(--cp-bad); }
.vn-rd-stat.is-warn .v { color: var(--cp-warn); }
.vn-rd-stat.is-good .v { color: var(--cp-good); }
.vn-rd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.vn-rd-tile {
  display: flex; gap: 12px; padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--v27-line); background: var(--vn-card); text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .1s ease;
}
.vn-rd-tile:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.vn-rd-tile .ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--mod-tint, color-mix(in srgb, var(--color-accent) 12%, transparent)); color: var(--color-accent);
}
.vn-rd-tile h3 { margin: 0 0 3px; font-size: 14.5px; }
.vn-rd-tile p { margin: 0; font-size: 12.5px; color: var(--v27-soft); }

/* ---- Assets (asset register) ------------------------------------------ */

.vn-asset-src { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--v27-line); color: var(--v27-soft); }
.vn-asset-src.is-agent { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }

/* ---- Agents (dashboard) ----------------------------------------------- */
.vn-ag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--v27-soft); }
.vn-ag-dot.on { background: var(--cp-good); }
.vn-ag-dot.stale { background: var(--cp-warn); }
.vn-ag-dot.off { background: var(--cp-bad); }

/* ---- Consent Management ----------------------------------------------- */
.vn-consent-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--space-4); border-bottom: 1px solid var(--v27-line); }
.vn-consent-tab {
  padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--v27-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vn-consent-tab:hover { color: var(--color-text); }
.vn-consent-tab.is-on { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ---- ISO 42001 framework tag / badge ---------------------------------- */
.pl-tag-iso42001 { background: color-mix(in oklch, oklch(0.50 0.12 300) 14%, transparent); color: oklch(0.44 0.12 300); }
[data-theme="dark"] .pl-tag-iso42001 { color: oklch(0.80 0.10 300); }
.pf-fwbadge-iso42001 { background: #f1ebfb; color: #5b2f9e; }
[data-theme="dark"] .pf-fwbadge-iso42001 { background: #2a2140; color: #c9b6f2; }
/* Control Management with up to nine theme cards (ISO×4 + DPDP/GDPR/SOC2/HIPAA/ISO42001). */

/* =====================================================================
   v27 POLISH — a cleaner, calmer, Apple-leaning pass over the whole UI.
   Loaded after every v2x stylesheet (so these win in light mode) and
   before theme.css (so the dark palette still overrides colours). Only
   visual properties are touched — surfaces, hairlines, shadows, type —
   never layout, so no page can break.
   ===================================================================== */

/* ---- 1. Token retune: whiter cards, lighter hairlines, softer shadows */
:root {
  --color-bg: oklch(0.977 0.004 146);       /* airier page ground */
  --color-surface: oklch(0.994 0.0015 146); /* near-white panels/inputs */
  --color-divider: color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #15241c 6%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, #15241c 6%, transparent), 0 10px 28px color-mix(in srgb, #15241c 7%, transparent);
  --shadow-lg: 0 18px 50px color-mix(in srgb, #15241c 13%, transparent);
}

/* ---- 2. Cards: one crisp white surface, hairline, soft shadow -------- */
.pf-card {
  background: var(--vn-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.pf-card:hover { transform: none; }               /* calmer — no hover jump */
.card { border-radius: var(--radius-lg); }

/* ---- 3. Page header: drop the tinted band for a clean titled rule ---- */
.pf-head {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  padding: var(--space-1) 0 var(--space-4);
  margin-bottom: var(--space-5);
}
.pf-head-chip { box-shadow: inset 0 0 0 1px var(--color-divider); border-radius: 10px; }
.pf-head h1 { font-size: 24px; letter-spacing: -0.02em; }
.pf-head-kicker { opacity: .55; font-weight: 600; }
.pf-head-sub { opacity: .55; font-size: 12.5px; margin-top: 3px; }

/* ---- 4. Buttons: quieter, rounded-rect, no bounce -------------------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn:hover { transform: none; filter: none; }
.btn:active { transform: none; filter: brightness(.97); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }

/* ---- 5. Inputs: hairline, gentle focus ring -------------------------- */
.input, select.input, textarea.input {
  border-radius: 10px; border-color: var(--color-divider);
  background: var(--vn-card);
}
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

/* ---- 6. Tables: muted uppercase head, hairline rows ------------------ */
.table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.table td, .table th { border-color: var(--color-divider); }
.table tbody tr:hover { background-color: color-mix(in srgb, var(--color-text) 3%, transparent); }

/* ---- 7. Nav + top bar: lighter rules, refined active pill ------------ */
.pf-navbar { border-bottom: 1px solid var(--color-divider); background: transparent; }
.pf-navtrack { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.pf-navlink.is-active,
.pf-navdrop > summary.pf-navlink.is-active,
.pf-navdrop[open] > summary.pf-navlink {
  background: var(--vn-card);
  box-shadow: var(--shadow-sm);
}
.pf-topbar { border-bottom: 1px solid var(--color-divider); }

/* ---- 8. Pills + section sidebar: softer ------------------------------ */
.pf-pill { border-radius: 999px; font-weight: 600; }

/* ---- 9. Dark-mode: keep cards/inputs on the themed card colour ------- */
[data-theme="dark"] .pf-card,
[data-theme="dark"] .card,
[data-theme="dark"] .input,
[data-theme="dark"] select.input,
[data-theme="dark"] textarea.input { background: var(--vn-card); border-color: var(--color-divider); }
[data-theme="dark"] .pf-navtrack { background: color-mix(in srgb, #ffffff 7%, transparent); }
[data-theme="dark"] .pf-navlink.is-active { background: color-mix(in srgb, #ffffff 10%, transparent); color: #fff; }