/*
 * Pentesys tenant portal brand skin.
 * Loaded after /css/tenant.css (Bootstrap 5 + Paces theme) on tenant.master
 * and the tenant.auth.* pages. Source: resources/new-style/Pentesys_Brand_Field_Guide_v1.3.
 * Reskins the existing Bootstrap component set via custom-property overrides,
 * then layers on the new component classes (page-head, kicker, stat-tile,
 * panel, pill badges, product-accent cards) used by the redesigned views.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  /* ---- brand tokens (light) ---- */
  --bg: #FBFAF5;
  --bg-alt: #F6F3EC;
  --surface: #FFFFFF;
  --surface-2: #F9F2ED;
  --ink: #12222A;
  --ink-soft: #3F5058;
  --ink-muted: #6B7B80;
  --border: #E4DFD2;
  --border-soft: #EEE9DC;

  --mint-pale: #E5F7F0;
  --mint: #56C9B4;
  --mint-strong: #1D8A72;

  --yellow: #FFD63A;
  --yellow-hover: #F0C41E;
  --yellow-pale: #FFF6D6;
  --yellow-ink: #3A2E00;

  --raspberry: #D11483;
  --raspberry-pale: #FBE3F0;
  --raspberry-ink: #7A0A4D;   /* Deep raspberry - text on raspberry-pale fields, ~8.8:1 contrast (raspberry itself is only 4.19:1 there) */
  --raspberry-solid: var(--raspberry); /* Solid fill for buttons/icons carrying white text/icons - same as --raspberry here, ~5.1:1 with white */
  --raspberry-glow: rgba(209, 20, 131, .15);

  --sev-critical: #d03b3b;
  --sev-high: #ec835a;
  --sev-medium: #fab219;
  --sev-low: #0ca30c;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(18,34,42,.04), 0 10px 28px -14px rgba(18,34,42,.18);

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* ---- remap legacy Paces tokens so untouched markup still reads on-brand ---- */
  --primary: var(--ink);
  --primary-dark: #0C151A;
  --primary-light: var(--surface-2);
  --primary-subtle: rgba(18, 34, 42, .07);
  --accent: var(--raspberry);
  --accent-dark: #A80F68;
  --gray-50: var(--bg-alt);
  --gray-100: var(--border-soft);
  --gray-800: var(--ink);
  --bs-primary: var(--ink);
  --bs-primary-rgb: 18, 34, 42;

  /* Fixed chrome tokens - navbar and the active sidebar item are meant to stay
     the same Deep ink field in both themes (not inverted like --ink/--bg),
     so intentionally NOT redefined in the dark block below. */
  --chrome-bg: #12222A;
  --chrome-text: #EDF3F1;
}

[data-theme="dark"],
html.dark-mode {
  /* Dark palette per Pentesys_Brand_Field_Guide_v1.3 p.16-17 - "related, not
     inverted": deliberately tuned swatches, not a mechanical inversion of
     the light palette. Named swatches: Deepest ink #071116, Dark porcelain
     #0C151A, Blue-charcoal #17272F, Raised charcoal #1D3039, Lincoln green
     #195905, Botanical mint #78CC8A, Mint text #B7E8C2, Bright yellow
     #EFD15A, Raspberry #EF5AAB, Primary text #EDF3F1. */
  --bg: #071116;
  --bg-alt: #0C151A;
  --surface: #17272F;
  --surface-2: #1D3039;
  --ink: #EDF3F1;
  --ink-soft: #C7D6D3;
  --ink-muted: #8FA3A0;
  --border: #263A42;
  --border-soft: #1D3039;

  /* Approved dark-mode combinations (p.17): panel background + accent pairs -
     not a pale tint of the light-mode swatch, a distinct named dark field. */
  --mint-pale: #195905;      /* Lincoln green - Foundation dark field */
  --mint: #78CC8A;           /* Botanical mint - Foundation accent */
  --mint-strong: #B7E8C2;    /* Mint text - readable mint copy on dark */

  --yellow: #EFD15A;         /* Bright yellow - dark-mode actions/signal */
  --yellow-hover: #F7DD7A;   /* lighten on hover, don't darken, against a dark surface */
  --yellow-pale: #CEB23F;    /* Muted gold - toned yellow field for pills */
  --yellow-ink: #071116;     /* Non-negotiable: text on yellow is always deep ink */

  --raspberry: #EF5AAB;      /* Raspberry - Validate/link accents */
  --raspberry-pale: #382032; /* Dark plum field paired with raspberry accent */
  --raspberry-ink: var(--raspberry); /* Already passes contrast on the dark plum field, no separate ink needed */
  --raspberry-solid: #D11483; /* Fixed deep raspberry for solid fills with white text/icons - the lighter --raspberry above is tuned for text-on-dark-surface use, not as a background carrying white text (only ~3.1:1 there) */
  --raspberry-glow: rgba(239, 90, 171, .28);
  --accent-dark: #F58BC7;    /* Lighter on hover for legibility on dark bg (not a darken) */

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);

  --primary: var(--surface-2);
  --primary-dark: #071116;
  --primary-light: var(--surface);
  --primary-subtle: rgba(237, 243, 241, .08);
  --gray-800: var(--ink);
  --bs-primary: var(--surface-2);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { color: var(--raspberry); }
a:hover { color: var(--accent-dark); }
::selection { background: var(--yellow); color: var(--yellow-ink); }
:focus-visible { outline: 2px solid var(--raspberry); outline-offset: 1px; }

/* ---------- top-level chrome ---------- */
body > .navbar,
.navbar.navbar-dark {
  background: var(--chrome-bg) !important;
  border-bottom: 1px solid var(--border);
}

.sidebar {
  background: var(--bg-alt) !important;
  border-right: 1px solid var(--border);
}
.sidebar .nav-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sidebar .nav-link {
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-link:hover { background: var(--bg-alt); color: var(--ink); }
.sidebar .nav-link.active {
  background: var(--chrome-bg) !important;
  color: var(--chrome-text) !important;
}
.sidebar .nav-link i { width: 18px; text-align: center; opacity: .85; }
.nav-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.sidebar-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.sidebar-foot-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: background .15s ease, color .15s ease;
}
.sidebar-foot-link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.sidebar-foot-link i { width: 16px; text-align: center; opacity: .75; }
.sidebar-foot-link.signout:hover { color: var(--raspberry); }
.sidebar-foot-link.signout:hover i { opacity: 1; }

.header.bg-white {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
.breadcrumb { font-family: var(--font-body); }
.breadcrumb li.active a, .breadcrumb li.active { color: var(--ink); font-weight: 600; }
.breadcrumb li a { color: var(--ink-muted); }

main.bg-dk { background: var(--bg) !important; }

/* ---------- page-head pattern ---------- */
.page-head { margin-bottom: 24px; }
/* pixel-exact row spacing for the tenant dashboard - deliberately not the
   rem-based .mt-4 utility, which (at this site's 14.5px root font-size)
   works out to 21.75px and reads as a slightly thinner gap than the
   fixed-px .page-head margin-bottom above it. Also zeroes --bs-gutter-y:
   Bootstrap's row gutter isn't just the row's own negative margin-top,
   ".row > *" children get their OWN "margin-top: var(--bs-gutter-y)" too
   (for wrapped multi-line grids) - left at .g-4's 1.5rem, that added a
   second, invisible-to-inspect 21.75px on top of this rule's 24px. */
.dash-row-gap { --bs-gutter-y: 0; margin-top: 24px !important; }
.page-head .k {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--raspberry);
  margin-bottom: 6px;
}
.page-head h1, .page-head h2 {
  font-size: 28px;
  margin: 0 0 6px;
  line-height: 1.15;
}
.page-head .sub {
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
}

/* ---------- cards / panels ---------- */
.card, .panel, .table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Temporarily lifted while a row-actions dropdown inside this card is
   open (see the 'show.bs.dropdown'/'hidden.bs.dropdown' handlers in
   master.blade.php) - overflow:hidden above clips any menu that needs to
   extend past the card's rounded-corner edge. */
.card.dropdown-open-overflow-visible,
.panel.dropdown-open-overflow-visible,
.table-card.dropdown-open-overflow-visible {
  overflow: visible;
}
.card-header {
  background: transparent;
  border-bottom: none;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.card-title { font-family: var(--font-display); font-weight: 700; }

/* card-header variant with no divider line and a small subtitle under the
   title, e.g. the tenant dashboard's chart/list cards. */
.card-header-plain { border-bottom: none; }
.card-desc { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-muted); margin-top: 3px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 16px 18px;
}
.stat-tile .stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  color: var(--ink);
}

/* product-owned card: thin colored top accent bar. Intentionally scoped to
   .p-card only - this bar marks a card as belonging to a specific service/
   product (the dashboard's module-launcher tiles, module content cards via
   .accent-*), not a generic decoration for every card. Giving it to plain
   .card/.stat-tile/.table-card too made unrelated cards (stat tiles, chart
   containers) show a stray var(--ink) bar that renders near-white in dark
   mode, since those have no real --p-color/--mod context to fall back on.
   An overlay (not a real border-top) because several p-card usages combine
   with Bootstrap's .border-0, which would zero out a real border. Kept at
   1px - same thin weight as every other border in the card system, just
   colored - rather than the earlier bold 4px treatment. */
.p-card { position: relative; overflow: hidden; }
.p-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--p-color, var(--ink));
}
/* These read the live --mod custom property that master.blade.php sets per
   request (from the tenant's actual configured module colour), not a fixed
   brand-guide default - a tenant that recolours/renames a module (e.g.
   Assure -> "Foundation" in mint) must see that colour here too. */
.p-card.accent-surface,
.p-card.accent-validate,
.p-card.accent-adversary,
.p-card.accent-assure,
.p-card.accent-foundation { --p-color: var(--mod, var(--ink)); }

/* ---------- buttons ---------- */
.btn {
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--bg);
}
.btn-outline-primary {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--bg);
}
.btn-link { color: var(--raspberry); }

/* In dark mode --ink is near-white (it's the text colour), so a plain
   .btn-primary/.btn-outline-primary built from var(--ink) renders as a
   bright white button - swap to the brand's dark-mode action colour
   (Bright yellow, p.16-17) instead, same treatment as chip.active below. */
:root[data-theme="dark"] .btn-primary,
html.dark-mode .btn-primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--yellow-ink);
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus,
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
  background: var(--yellow-hover);
  border-color: var(--yellow-hover);
  color: var(--yellow-ink);
}
:root[data-theme="dark"] .btn-outline-primary,
html.dark-mode .btn-outline-primary {
  color: var(--yellow);
  border-color: var(--yellow);
}
:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-primary:focus,
:root[data-theme="dark"] .btn-outline-primary:active,
html.dark-mode .btn-outline-primary:hover,
html.dark-mode .btn-outline-primary:focus,
html.dark-mode .btn-outline-primary:active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--yellow-ink);
}

/* ---------- list groups ----------
   Bootstrap's .list-group-item.active reads its own internal
   --bs-list-group-active-* variables (hardcoded to Bootstrap blue in the
   compiled CDN stylesheet), not --bs-primary - so remapping --bs-primary
   alone never reaches it. Used for the file-vault folder list and any
   other selectable list-group in the portal. */
.list-group-item.active {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg) !important;
}
.list-group-item.active i { color: var(--bg) !important; }
.list-group-item-action:hover:not(.active) {
  background-color: var(--bg-alt);
}

/* ---------- badges / pills / severity ---------- */
.badge { font-weight: 700; letter-spacing: .02em; border-radius: 999px; }
.badge.bg-primary { background: var(--ink) !important; }

.status-pill, .role-chip, .conn-pill, .tag, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--ink-soft);
}
.status-pill.pill-mint   { background: var(--mint-pale);      color: var(--mint-strong); }
.status-pill.pill-raspberry { background: var(--raspberry-pale); color: var(--raspberry-ink); }
.status-pill.pill-yellow { background: var(--yellow-pale); color: var(--yellow-ink); }

/* clickable variant of .chip, for filter-pill toggles */
a.chip, button.chip {
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
a.chip:hover, button.chip:hover { background: var(--border-soft); color: var(--ink); }
a.chip.active, button.chip.active { background: var(--ink); color: var(--bg-alt); border-color: transparent; }
:root[data-theme="dark"] a.chip.active, :root[data-theme="dark"] button.chip.active { background: var(--yellow); color: var(--yellow-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a.chip.active, :root:not([data-theme="light"]) button.chip.active { background: var(--yellow); color: var(--yellow-ink); }
}

/* ---------- uniform filter bar (list/table filter controls) ----------
   One canonical shape for every "narrow this list" control row in the
   portal, replacing what were ~10 different wrapper/sizing/spacing
   combinations (bootstrap-grid forms, panel-wrapped forms, embedded
   card-header forms, and 5 incompatible filter-pill implementations). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 24px;
}
.filter-bar form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.filter-bar .form-select-sm,
.filter-bar .form-control-sm {
  width: auto;
  min-width: 130px;
}
.filter-bar .btn { flex-shrink: 0; }
.filter-bar .form-select-sm,
.filter-bar .form-control-sm {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
  line-height: 19.5px;
}
.filter-bar .filter-bar-label { font-size: 11.5px; font-weight: 700; color: var(--ink-muted); margin-right: 2px; }

.sev { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px; }
.sev::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sev-critical { color: var(--sev-critical); }
.sev-high     { color: var(--sev-high); }
.sev-medium   { color: var(--sev-medium); }
.sev-low      { color: var(--sev-low); }

/* ---------- tables ---------- */
.table { font-size: 12.5px; color: var(--ink-soft); }
.card table.table, .card .table-responsive > table.table,
.panel table.table, .panel .table-responsive > table.table,
.table-card table.table, .table-card .table-responsive > table.table {
  border-top: 1px solid var(--border-soft);
}
.table thead th {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.table tbody tr:hover { background: var(--bg-alt); }
.table td, .table th { border-color: var(--border-soft); vertical-align: middle; }

/* ---------- forms ---------- */
.form-control, .form-select {
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: 13.5px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--raspberry);
  box-shadow: 0 0 0 3px var(--raspberry-glow);
}
.form-label { font-weight: 600; font-size: 13px; color: var(--ink); }

/* ---------- modals ---------- */
.modal-content {
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- misc ---------- */
hr { border-color: var(--border-soft); }
.text-muted { color: var(--ink-muted) !important; }
code, .font-mono { font-family: var(--font-mono); }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- grid/table view toggle (engagement & campaign lists) ---------- */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button:hover { color: var(--ink); background: var(--bg-alt); }
.view-toggle button.active { background: var(--ink); color: var(--bg); }

/* ---------- product colour ownership ----------
   "A product-owned page must clearly carry that product colour in its
   first visual impression, then repeat it through markers, icons, rules
   and active states." (brand guide, colour ownership). --mod/--mod-text-light/
   --mod-text-dark/--mod-btn-text are set inline on <main data-module> in
   master.blade.php, computed from the TENANT'S ACTUAL tenant()->moduleBranding()
   colour (not a fixed constant here) - a renamed/recoloured module (e.g.
   this demo tenant's Assure module, branded "Foundation" in mint) must show
   its own configured colour, not a hardcoded default. --mod-pale is the one
   token still derived here, since it's a simple tint of whatever --mod
   resolves to and doesn't need per-tenant contrast math.

   --mod-text itself picks between the two inline values per theme, rather
   than being one server-computed value: a bright module colour (Foundation's
   mint) needs DARKENING to stay readable as text on a light card, but a dark
   module colour (Adversary's dark red) needs LIGHTENING to stay readable on
   a dark card - opposite corrections depending on theme, so light/dark are
   computed independently server-side and CSS just selects between them. */
main[data-module] {
  --mod-pale: color-mix(in srgb, var(--mod) 15%, var(--bg-alt));
  --mod-text: var(--mod-text-light);
}
:root[data-theme="dark"] main[data-module],
html.dark-mode main[data-module] {
  --mod-text: var(--mod-text-dark);
}

main[data-module] .page-head .k { color: var(--mod-text); }
/* Subtle module tint on generic (non-p-card) cards inside a module page - a
   light brand touch, deliberately NOT the bold 4px .p-card bar, since these
   aren't themselves product-owned cards. */
main[data-module] .card:not(.p-card),
main[data-module] .stat-tile,
main[data-module] .table-card {
  border-top: 1px solid color-mix(in srgb, var(--mod) 35%, var(--border));
}
main[data-module] .btn-primary {
  background: var(--mod);
  border-color: var(--mod);
  color: var(--mod-btn-text);
}
main[data-module] .btn-primary:hover,
main[data-module] .btn-primary:focus {
  filter: brightness(0.92);
  color: var(--mod-btn-text);
}
main[data-module="surface"] a:not(.btn):not(.chip):not(.tag):not(.status-pill):not(.role-chip):not(.conn-pill),
main[data-module="validate"] a:not(.btn):not(.chip):not(.tag):not(.status-pill):not(.role-chip):not(.conn-pill),
main[data-module="adversary"] a:not(.btn):not(.chip):not(.tag):not(.status-pill):not(.role-chip):not(.conn-pill),
main[data-module="assure"] a:not(.btn):not(.chip):not(.tag):not(.status-pill):not(.role-chip):not(.conn-pill) { color: var(--mod-text); }
main[data-module] a:not(.btn):not(.chip):not(.tag):not(.status-pill):not(.role-chip):not(.conn-pill):hover { filter: brightness(0.85); }
/* Same module tint, restated with .table in the selector so it beats
   tenant.css's ".dark-mode .table a:not(.btn) { color: var(--raspberry); }"
   (added for tables outside any module context) on specificity - without
   this, every link in a module page's tables (asset lists, engagement/
   campaign tables, ...) went raspberry in dark mode instead of the page's
   own service colour. */
main[data-module] .table a:not(.btn) { color: var(--mod-text); }
main[data-module] .table a:not(.btn):hover { filter: brightness(0.85); }
main[data-module] .status-pill.pill-mod,
main[data-module] .tag.pill-mod {
  background: var(--mod-pale);
  color: var(--mod-text);
}

/* Per-module badge/text utility classes (.bg-surface, .bg-validate,
   .bg-adversary, .bg-assure and their -subtle/text- variants) - referenced
   by several model STATUSES maps (e.g. AssureEngagement's "in_progress"
   badge) and a few blade views, but never actually defined anywhere before
   this, so those badges silently rendered with no colour at all. Reads the
   same live --mod/--mod-text/--mod-pale tokens as everything else here, so
   they follow the tenant's actual configured module colour. */
.bg-surface, .bg-validate, .bg-adversary, .bg-assure {
  background-color: var(--mod, var(--ink)) !important;
  color: var(--mod-btn-text, #fff) !important;
}
.bg-surface-subtle, .bg-validate-subtle, .bg-adversary-subtle, .bg-assure-subtle {
  background-color: var(--mod-pale, var(--bg-alt)) !important;
  color: var(--mod-text, var(--ink)) !important;
}
.text-surface, .text-validate, .text-adversary, .text-assure {
  color: var(--mod-text, var(--ink)) !important;
}
main[data-module] :focus-visible { outline-color: var(--mod); }
main[data-module] .form-control:focus,
main[data-module] .form-select:focus {
  border-color: var(--mod);
  box-shadow: 0 0 0 3px var(--mod-pale);
}

/* ---------- auth split-screen shell (login / register / password / etc.) ---------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}
.auth-side {
  flex: 0 0 42%;
  max-width: 560px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--ink);
  color: #EDF3F1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 52px;
  overflow: hidden;
  position: relative;
}
.auth-side::before {
  content: '';
  position: absolute;
  top: -120px; right: -160px;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(237,243,241,.14);
}
.auth-side::after {
  content: '';
  position: absolute;
  top: -60px; right: -100px;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(255,214,58,.18);
}
.auth-side-top, .auth-side-mid, .auth-side-foot { position: relative; z-index: 1; }
.auth-logo-badge {
  display: inline-flex;
  align-items: center;
}
.auth-logo-badge img { max-height: 30px; max-width: 170px; display: block; }

.auth-side-cta {
  border: 1px solid rgba(237,243,241,.18);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 28px;
}
.auth-side-cta .auth-side-cta-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}
.auth-side-cta .auth-side-cta-sub {
  font-size: 12px;
  color: rgba(237,243,241,.6);
  margin: 0 0 12px;
}
.auth-side-cta .btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(237,243,241,.35);
  color: #fff;
}
.auth-side-cta .btn:hover {
  background: rgba(237,243,241,.08);
  border-color: rgba(237,243,241,.5);
  color: #fff;
}
.auth-side-cta .auth-side-cta-foot {
  font-size: 11px;
  color: rgba(237,243,241,.45);
  margin: 8px 0 0;
  text-align: center;
}
.auth-kicker {
  margin-top: 40px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--yellow);
}
.auth-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 10px 0 0;
  max-width: 12ch;
}
.auth-side-sub {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(237,243,241,.7);
  max-width: 34ch;
}
.auth-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-product {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(237,243,241,.85);
}
.auth-product .nav-dot { width: 9px; height: 9px; margin-right: 0; }
.auth-side-foot-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--yellow);
}
.auth-side-foot-sub {
  font-size: 11.5px;
  color: rgba(237,243,241,.45);
  margin-top: 4px;
}

.auth-form-col {
  flex: 1 1 auto;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-form-wrap.wide { max-width: 480px; }
.auth-form-head { margin-bottom: 28px; }
.auth-form-head .k {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--raspberry);
  margin-bottom: 8px;
}
.auth-form-head h1 {
  font-size: 26px;
  margin: 0 0 6px;
  line-height: 1.2;
}
.auth-form-head p {
  color: var(--ink-muted);
  font-size: 13.5px;
  margin: 0;
}
.auth-mobile-logo { display: none; }

@media (max-width: 900px) {
  .auth-side { display: none; }
  .auth-form-col { min-height: auto; padding: 32px 20px; }
  .auth-mobile-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
  }
  .auth-mobile-logo img { max-height: 32px; }
}

/* ---------- dashboard: hero, deltas, exposure card, product cards, panels ----------
   Component vocabulary for the tenant Overview page (and any future page that
   wants the same "at-a-glance" pattern): a page-head hero with a faint motif,
   stat-tiles with a trend delta, a stacked severity exposure bar, a row of
   product-owned summary cards, and lightweight list panels. */
.page-head { position: relative; }
.page-head .head-text { position: relative; z-index: 1; }
.page-head h1.hero-greet, .page-head h2.hero-greet { font-size: 32px; line-height: 1.15; letter-spacing: -.015em; }
.hero-motif {
  position: absolute; top: -8px; right: -8px; width: 160px; height: 160px;
  z-index: 0; opacity: .12; pointer-events: none;
}
@media (max-width: 760px) { .hero-motif { display: none; } }

.stat-tile .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px 12px; flex-wrap: wrap; }
.delta { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.delta.good { color: var(--mint-strong); }
.delta.bad { color: var(--sev-critical); }
.delta.neutral { color: var(--ink-muted); font-weight: 600; }
.spark { display: block; flex-shrink: 0; }

.exposure-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.exposure-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.exposure-top h3 { font-size: 17px; }
.exposure-top p { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; }
.stackbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 16px; gap: 2px; }
.stackbar span { display: block; height: 100%; }
.stackbar span:first-child { border-radius: 6px 0 0 6px; }
.stackbar span:last-child { border-radius: 0 6px 6px 0; }
.sev-legend { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.sev-legend .item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.sev-legend .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
a.p-card {
  display: block;
  padding: 18px;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.p-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(18, 34, 42, .3);
  border-color: color-mix(in srgb, var(--p-color, var(--ink)) 45%, var(--border));
}
.p-card .num { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); }
.p-card h4 { font-size: 15.5px; margin-top: 7px; }
.p-card .tag { font-size: 11.5px; color: var(--ink-muted); margin-top: 5px; background: none; padding: 0; border-radius: 0; font-weight: 500; }
.p-card .metric { font-size: 23px; font-weight: 700; margin-top: 13px; font-family: var(--font-display); color: var(--ink); }
.p-card .metric small { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); margin-left: 3px; }
.p-card .cap { font-size: 11px; color: var(--ink-muted); margin-top: 4px; }
.p-track { height: 5px; border-radius: 3px; background: var(--border-soft); margin-top: 10px; overflow: hidden; }
.p-track span { display: block; height: 100%; }

.panel h5 { font-size: 13.5px; margin-bottom: 2px; font-family: var(--font-display); }
.panel .hint { display: block; font-size: 11px; color: var(--ink-muted); margin: 2px 0 12px; }
.link-more {
  font-size: 12px; font-weight: 700; color: var(--raspberry);
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; border: none; background: none; padding: 0; margin-top: 14px;
  text-decoration: none;
}
.link-more:hover { color: var(--accent-dark); }

/* reskin the legacy security-gauge / severity-bar primitives onto brand tokens */
.security-gauge-bg, .risk-gauge-bg { stroke: var(--border-soft); }
.security-score, .risk-score { font-family: var(--font-display); font-weight: 800; font-size: 3rem; }
.status-label, .risk-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

/* compact horizontal gauge card - sized to sit level with the stat-grid row */
.status-card .security-gauge-container { width: 150px; height: 86px; margin: 0; }
.status-card .security-score { font-size: 2rem; }
.severity-bar { background: var(--border-soft); }
.severity-bar .bar.severity-critical, .severity-critical { background: var(--sev-critical); }
.severity-bar .bar.severity-high, .severity-high { background: var(--sev-high); }
.severity-bar .bar.severity-medium, .severity-medium { background: var(--sev-medium); }
.severity-bar .bar.severity-low, .severity-low { background: var(--sev-low); }