/* ==========================================================================
   Askari Enterprise Design System
   A token-driven overlay that upgrades the AdminLTE/Bootstrap admin to an
   enterprise-grade security console. Loaded LAST so it wins the cascade.
   Every surface is driven by CSS custom properties, so future pages and
   components inherit the system automatically — change a token, not a page.
   ========================================================================== */

:root {
  /* ---- Surfaces (SOC slate, layered depth) ---- */
  --ak-bg-0:  #090C12;
  --ak-bg-1:  #0F141D;
  --ak-bg-2:  #151C27;
  --ak-bg-3:  #1B2433;
  --ak-sidebar: #0A0E15;
  --ak-topbar: rgba(9,12,18,0.88);
  --ak-stage: #05070b;

  /* ---- Lines ---- */
  --ak-border:       rgba(148,163,184,0.12);
  --ak-border-strong:rgba(148,163,184,0.22);

  /* ---- Brand (Askari Purple Team palette) ---- */
  --ak-brand:       #6D28D9;
  --ak-brand-hover: #5B21B6;
  --ak-brand-ink:   #2E1065;
  --ak-brand-lilac: #A78BFA;
  --ak-brand-soft:  rgba(109,40,217,0.12);
  --ak-brand-2:     var(--ak-brand);
  --ak-brand-grad:  #6D28D9;
  --ak-btn-brand:   var(--ak-brand);

  /* ---- Data / telemetry accent ---- */
  --ak-accent:      #06B6D4;
  --ak-accent-soft: rgba(6,182,212,0.12);
  --ak-cyan:        var(--ak-accent);
  --ak-cyan-soft:   var(--ak-accent-soft);

  /* ---- Spacing scale ---- */
  --ak-space-1: 4px;
  --ak-space-2: 8px;
  --ak-space-3: 12px;
  --ak-space-4: 16px;
  --ak-space-5: 24px;
  --ak-section-gap: var(--ak-space-4);

  /* ---- Semantic ---- */
  --ak-success: #22c55e;
  --ak-warning: #f59e0b;
  --ak-danger:  #ef4444;
  --ak-info:    var(--ak-accent);
  --ak-critical:#ff3b5c;
  --ak-high:    #ff8a4c;
  --ak-medium:  #ffd166;
  --ak-low:     #38bdf8;

  /* ---- Text ---- */
  --ak-text:      #E8EDF4;
  --ak-text-muted:#94A3B8;
  --ak-text-dim:  #64748B;

  /* ---- Shape & motion ---- */
  --ak-radius:    14px;
  --ak-radius-sm: 9px;
  --ak-radius-pill: 999px;
  --ak-shadow:    0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --ak-shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --ak-ring:      0 0 0 3px rgba(109,40,217,0.35);
  --ak-ease:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Type family ---- */
  --ak-font: "Inter","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ak-mono: "JetBrains Mono","SFMono-Regular",ui-monospace,"Menlo",monospace;

  /* ---- Type scale (named, 8-pt aligned; drives the whole UI) ---- */
  --fs-display: 1.75rem;  /* 28px — stat numbers            */
  --fs-h1:      1.375rem; /* 22px — page titles             */
  --fs-h2:      1.125rem; /* 18px — card titles             */
  --fs-body:    0.875rem; /* 14px — default text (base)     */
  --fs-sm:      0.8125rem;/* 13px — secondary / form labels */
  --fs-label:   0.71875rem;/* 11.5px — section eyebrows     */
  --lh-body:    1.5;
  --lh-tight:   1.2;
}

/* ---- Light theme -------------------------------------------------------
   Only the tokens flip; every component reads them, so the whole app
   re-themes without touching a single page. Applied via html[data-ak-theme].
   ----------------------------------------------------------------------- */
html[data-ak-theme="light"] {
  --ak-bg-0:  #F8FAFC;
  --ak-bg-1:  #FFFFFF;
  --ak-bg-2:  #F1F5F9;
  --ak-bg-3:  #E8EDF5;
  --ak-sidebar: #FFFFFF;
  --ak-topbar: rgba(255,255,255,0.92);

  --ak-border:        rgba(15,23,42,0.08);
  --ak-border-strong: rgba(15,23,42,0.16);

  --ak-accent-soft: rgba(6,182,212,0.10);
  --ak-cyan-soft: var(--ak-accent-soft);
  --ak-brand-soft:  rgba(109,40,217,0.08);

  --ak-text:      #131A27;
  --ak-text-muted:#51607A;
  --ak-text-dim:  #8A95A8;

  --ak-shadow:    0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.08);
  --ak-shadow-lg: 0 12px 40px rgba(16,24,40,0.14);
  --ak-ring:      0 0 0 3px rgba(109,40,217,0.25);
}
html[data-ak-theme="light"] a { color: #6D28D9; }
html[data-ak-theme="light"] a:hover { color: #5B21B6; }
html[data-ak-theme="light"] code, html[data-ak-theme="light"] kbd { color: #6D28D9; background: var(--ak-brand-soft); padding: 1px 5px; border-radius: 5px; }
html[data-ak-theme="light"] .content-wrapper {
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(109,40,217,0.05), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(6,182,212,0.04), transparent 55%),
    var(--ak-bg-0) !important;
}
html[data-ak-theme="light"] .nav-tabs .nav-link.active {
  color: var(--ak-brand) !important;
  background: var(--ak-brand-soft) !important;
  border-bottom-color: var(--ak-brand) !important;
}
/* Sidebar in light mode: crisp separators, readable ink */
html[data-ak-theme="light"] .brand-link { color: var(--ak-text) !important; }
html[data-ak-theme="light"] .main-sidebar .nav-icon { opacity: 0.7; }
/* Threat-globe side rails follow the theme; the globe stage stays dark */
html[data-ak-theme="light"] .tg-panel { background: var(--ak-bg-1) !important; box-shadow: var(--ak-shadow); }
html[data-ak-theme="light"] .tg-h { color: var(--ak-text-dim); }
html[data-ak-theme="light"] .tg-stat { background: var(--ak-bg-2); }
html[data-ak-theme="light"] .tg-stat .v { color: var(--ak-text); }
html[data-ak-theme="light"] .tg-feed-row .who b { color: var(--ak-text); }
html[data-ak-theme="light"] .tg-bar-row { color: var(--ak-text); }
html[data-ak-theme="light"] .tg-bar-row strong { color: var(--ak-text); }

/* ---- Base ------------------------------------------------------------- */
body,
body.dark-mode,
.wrapper {
  background: var(--ak-bg-0) !important;
  color: var(--ak-text);
  font-family: var(--ak-font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); }
.content-wrapper {
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(109,40,217,0.08), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(6,182,212,0.05), transparent 55%),
    var(--ak-bg-0) !important;
}
a { color: var(--ak-brand-lilac); }
a:hover { color: #C4B5FD; }
code, kbd, pre { font-family: var(--ak-mono); }

/* Accessible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible {
  outline: none !important;
  box-shadow: var(--ak-ring) !important;
  border-radius: var(--ak-radius-sm);
}

/* ---- Topbar ----------------------------------------------------------- */
.main-header.navbar {
  background: var(--ak-topbar) !important;
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ak-border) !important;
}
.main-header .nav-link { color: var(--ak-text-muted) !important; }
.main-header .nav-link:hover { color: var(--ak-text) !important; }
.form-control-navbar {
  background: var(--ak-bg-2) !important;
  border: 1px solid var(--ak-border) !important;
  color: var(--ak-text) !important;
  border-radius: var(--ak-radius-pill) 0 0 var(--ak-radius-pill);
}
.form-control-navbar::placeholder { color: var(--ak-text-dim) !important; }
.btn-navbar {
  background: var(--ak-bg-2) !important;
  border: 1px solid var(--ak-border) !important;
  color: var(--ak-cyan) !important;
  border-radius: 0 var(--ak-radius-pill) var(--ak-radius-pill) 0;
}

/* ---- Sidebar ---------------------------------------------------------- */
.main-sidebar,
.main-sidebar .sidebar { background: var(--ak-sidebar) !important; }
.main-sidebar { border-right: 1px solid var(--ak-border); }
.brand-link {
  border-bottom: 1px solid var(--ak-border) !important;
  background: transparent !important;
  letter-spacing: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px !important;
  min-height: 58px;
}
.brand-link .brand-text { display: none !important; }
.ak-brand-logo {
  display: block;
  width: auto;
  max-width: calc(100% - 16px);
  height: 28px;
  object-fit: contain;
}
.ak-brand-icon {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
html[data-ak-theme="dark"] .ak-brand-logo--on-dark,
html:not([data-ak-theme="light"]) .ak-brand-logo--on-dark { display: block; }
html[data-ak-theme="dark"] .ak-brand-logo--on-light,
html:not([data-ak-theme="light"]) .ak-brand-logo--on-light { display: none; }
html[data-ak-theme="light"] .ak-brand-logo--on-light { display: block; }
html[data-ak-theme="light"] .ak-brand-logo--on-dark { display: none; }
.nav-sidebar .nav-header {
  color: var(--ak-text-muted) !important;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 16px 6px;
}
.nav-sidebar > .nav-item > .nav-link {
  color: var(--ak-text-muted) !important;
  border-radius: var(--ak-radius-sm);
  margin: 2px 10px;
  transition: background .15s var(--ak-ease), color .15s var(--ak-ease);
}
.nav-sidebar > .nav-item > .nav-link p { font-weight: 500; }
.nav-sidebar > .nav-item > .nav-link:hover {
  background: var(--ak-bg-2) !important;
  color: var(--ak-text) !important;
}
.nav-sidebar > .nav-item > .nav-link.active {
  background: var(--ak-btn-brand) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(109,40,217,0.35);
}
.nav-sidebar .nav-icon { opacity: 0.9; }
/* Active item: left accent bar for a stronger "you are here" cue */
.nav-sidebar > .nav-item > .nav-link.active { position: relative; }
.nav-sidebar > .nav-item > .nav-link.active::before {
  content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: #fff;
}

/* ---- Sidebar badge languages: STATUS (dot+text) vs COUNT (chip) --------
   Protection state and numeric counts previously looked identical. Give them
   two clearly different visual languages so operators read state at a glance. */
.nav-sidebar .nav-link .badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: var(--ak-radius-pill); line-height: 1.5;
}
/* STATUS — ON: filled green dot + label on a soft tint */
.nav-sidebar .nav-link .badge.badge-success {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,0.16) !important; color: #6ee7a0 !important;
}
.nav-sidebar .nav-link .badge.badge-success::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ak-success);
  box-shadow: 0 0 6px rgba(34,197,94,0.8);
}
/* STATUS — OFF (rendered as badge-danger or badge-primary): hollow dot, muted */
.nav-sidebar .nav-link .badge.badge-danger,
.nav-sidebar .nav-link .badge.badge-primary {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ak-bg-3) !important; color: var(--ak-text-dim) !important;
}
.nav-sidebar .nav-link .badge.badge-danger::before,
.nav-sidebar .nav-link .badge.badge-primary::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--ak-text-dim);
}
/* COUNT — neutral numeric chip, visually distinct from status pills */
.nav-sidebar .nav-link .badge.badge-secondary {
  min-width: 20px; text-align: center; padding: 2px 7px;
  background: var(--ak-bg-3) !important; color: var(--ak-text-muted) !important;
  font-variant-numeric: tabular-nums; font-family: var(--ak-mono);
}

/* ---- Page header ------------------------------------------------------ */
.content-header h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ak-text);
}
.breadcrumb { background: transparent; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--ak-text-dim); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: linear-gradient(180deg, var(--ak-bg-1), var(--ak-bg-1)) !important;
  border: 1px solid var(--ak-border) !important;
  border-radius: var(--ak-radius) !important;
  box-shadow: var(--ak-shadow) !important;
  color: var(--ak-text);
  margin-bottom: var(--ak-space-4) !important;   /* consistent gap between stacked cards */
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ak-border) !important;
  padding: 1rem 1.25rem;
}
.card-title { font-weight: 650; letter-spacing: 0.01em; }
/* Outline cards: restrained top accent only, subtle on the other three sides */
.card.card-outline { border-color: var(--ak-border) !important; }
.card.card-primary.card-outline { border-top: 2px solid var(--ak-brand) !important; }
.card.card-info.card-outline    { border-top: 2px solid var(--ak-cyan) !important; }
.card.card-success.card-outline { border-top: 2px solid var(--ak-success) !important; }
.card.card-danger.card-outline  { border-top: 2px solid var(--ak-danger) !important; }
.card.card-warning.card-outline { border-top: 2px solid var(--ak-warning) !important; }

/* ---- Stat tiles (small-box) ------------------------------------------ */
.small-box {
  border-radius: var(--ak-radius) !important;
  border: 1px solid var(--ak-border);
  box-shadow: var(--ak-shadow) !important;
  overflow: hidden;
  position: relative;
}
.small-box > .inner { padding: 18px 20px; }
.small-box h3 { font-weight: 750; font-size: 2.1rem; letter-spacing: -0.02em; }
.small-box .icon > i { opacity: 0.28; }
.small-box .small-box-footer {
  background: rgba(0,0,0,0.18) !important;
  transition: background .15s var(--ak-ease);
}
.small-box .small-box-footer:hover { background: rgba(0,0,0,0.32) !important; }
/* Tone down AdminLTE's saturated presets into an enterprise palette */
.small-box.bg-info    { background: linear-gradient(135deg,#0e7490,#155e75) !important; }
.small-box.bg-success { background: linear-gradient(135deg,#15803d,#166534) !important; }
.small-box.bg-danger  { background: linear-gradient(135deg,#b91c1c,#991b1b) !important; }
.small-box.bg-warning { background: linear-gradient(135deg,#b45309,#92400e) !important; color:#fff !important; }
.small-box.bg-warning h3, .small-box.bg-warning p { color:#fff !important; }

/* ---- Tables ----------------------------------------------------------- */
.table { color: var(--ak-text); }
.table thead th,
.thead-dark th, .thead-light th {
  background: var(--ak-bg-2) !important;
  color: var(--ak-text-muted) !important;
  border-color: var(--ak-border) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table td, .table th { border-color: var(--ak-border) !important; vertical-align: middle; }
.table-hover tbody tr { transition: background .12s var(--ak-ease); }
.table-hover tbody tr:hover { background: var(--ak-bg-2) !important; }
.table-bordered { border-color: var(--ak-border) !important; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  border-radius: var(--ak-radius-sm);
  font-weight: 600;
  min-height: 38px;
  letter-spacing: 0.01em;
  transition: transform .06s var(--ak-ease), box-shadow .15s var(--ak-ease), filter .15s var(--ak-ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ak-btn-brand) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(109,40,217,0.30);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { background: var(--ak-bg-3) !important; border: 1px solid var(--ak-border) !important; color: var(--ak-text) !important; }
.btn-info    { background: var(--ak-accent) !important; border: none !important; color: #fff !important; }
.btn-success { background: linear-gradient(135deg,#16a34a,#15803d) !important; border: none !important; }
.btn-danger  { background: linear-gradient(135deg,#dc2626,#b91c1c) !important; border: none !important; }
.btn-outline-secondary { color: var(--ak-text-muted) !important; border-color: var(--ak-border-strong) !important; }

/* ---- Forms ------------------------------------------------------------ */
.form-control, .custom-select, textarea.form-control {
  background: var(--ak-bg-2) !important;
  border: 1px solid var(--ak-border) !important;
  color: var(--ak-text) !important;
  border-radius: var(--ak-radius-sm) !important;
  min-height: 40px;
}
.form-control::placeholder { color: var(--ak-text-dim) !important; }
.form-control:focus, .custom-select:focus {
  border-color: var(--ak-brand-2) !important;
  box-shadow: var(--ak-ring) !important;
  background: var(--ak-bg-2) !important;
}
label { color: var(--ak-text); font-weight: 600; font-size: 13px; }
.input-group-text { background: var(--ak-bg-3) !important; border-color: var(--ak-border) !important; color: var(--ak-text-muted) !important; }

/* ---- Badges & callouts ------------------------------------------------ */
.badge { border-radius: var(--ak-radius-pill); font-weight: 600; padding: 0.4em 0.7em; }
.callout {
  background: var(--ak-bg-2) !important;
  color: var(--ak-text) !important;
  border-radius: var(--ak-radius);
  border: 1px solid var(--ak-border);
  border-left-width: 4px;
  box-shadow: var(--ak-shadow);
}
.callout p,
.callout li { color: var(--ak-text-muted) !important; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ak-text) !important; }
.callout-danger  { border-left-color: var(--ak-danger) !important; }
.callout-info    { border-left-color: var(--ak-info) !important; }
.callout-success { border-left-color: var(--ak-success) !important; }
.callout-warning { border-left-color: var(--ak-warning) !important; }

/* ---- Modals, dropdowns ------------------------------------------------ */
.modal-content, .dropdown-menu {
  background: var(--ak-bg-1) !important;
  border: 1px solid var(--ak-border) !important;
  border-radius: var(--ak-radius) !important;
  box-shadow: var(--ak-shadow-lg) !important;
  color: var(--ak-text);
}
.dropdown-item { color: var(--ak-text-muted); }
.dropdown-item:hover { background: var(--ak-bg-2); color: var(--ak-text); }

/* ---- Footer ----------------------------------------------------------- */
.main-footer {
  background: var(--ak-sidebar) !important;
  border-top: 1px solid var(--ak-border) !important;
  color: var(--ak-text-dim) !important;
}
/* Two-region utility bar: identity/version left, status + links right */
.ak-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; font-size: var(--fs-sm);
}
.ak-footer a { color: var(--ak-text-muted); text-decoration: none; }
.ak-footer a:hover { color: var(--ak-cyan); }
.ak-footer-left { color: var(--ak-text-dim); }
.ak-footer-left .ak-footer-ver { font-family: var(--ak-mono); }
.ak-footer-sep { margin: 0 8px; opacity: 0.5; }
.ak-footer-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ak-footer-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ak-text-muted); font-weight: 500; }
.ak-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ak-success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
@media (prefers-reduced-motion: no-preference) {
  .ak-status-dot { animation: ak-pulse 2.4s var(--ak-ease) infinite; }
  @keyframes ak-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.18); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.05); } }
}
@media (max-width: 575.98px) { .ak-footer-status { display: none; } }

/* ---- Scrollbars ------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--ak-bg-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ak-bg-3); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #26303f; }

/* ---- Utilities for new components ------------------------------------- */
.ak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--ak-radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--ak-bg-3); color: var(--ak-text-muted);
  border: 1px solid var(--ak-border);
}
.ak-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ak-dot--on  { background: var(--ak-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-success) 22%, transparent); }
.ak-dot--off { background: var(--ak-text-dim); }
.text-muted { color: var(--ak-text-muted) !important; }

/* Code editor textarea (.htaccess editor). */
.ak-code-area {
    font-family: var(--ak-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
    font-size: 13px; line-height: 1.55; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4;
}

/* Inline code block used in help panels (php.ini snippets etc.). */
.ak-code {
    display: block; padding: 8px 10px; margin: 0; white-space: pre-wrap; word-break: break-word;
    font-family: var(--ak-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px; color: var(--ak-text); background: var(--ak-bg-3);
    border: 1px solid var(--ak-border); border-radius: 6px;
}

/* Embedded phpinfo() output — force the raw tables onto the dark theme and
   drop the white PHP logo box. Scoped so it can't leak to real ak-tables. */
.ak-phpinfo { overflow-x: auto; }
.ak-phpinfo img { display: none; }
.ak-phpinfo h1, .ak-phpinfo h2 { color: var(--ak-text); font-size: 1rem; margin: 4px 0 10px; }
.ak-phpinfo table { width: 100%; border-collapse: collapse; margin: 0 0 16px; background: transparent !important; }
.ak-phpinfo td, .ak-phpinfo th {
    background: transparent !important; color: var(--ak-text) !important;
    border: 1px solid var(--ak-border) !important; padding: 5px 9px;
    font-size: 12px; text-align: left; word-break: break-word;
}
.ak-phpinfo .e, .ak-phpinfo .h, .ak-phpinfo th, .ak-phpinfo .h td {
    background: var(--ak-bg-2) !important; color: var(--ak-text-muted) !important; font-weight: 600;
}
.ak-phpinfo a { color: var(--ak-info); }
.ak-phpinfo hr { border-color: var(--ak-border); }

/* Native <details> styled as an ak-panel (used for the collapsible phpinfo). */
.ak-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ak-details > summary::-webkit-details-marker { display: none; }
.ak-details > summary .ak-details-hint::after { content: " \25BC"; font-size: 9px; }
.ak-details[open] > summary .ak-details-hint::after { content: " \25B2"; }
.ak-details[open] > summary .ak-details-hint { visibility: hidden; }
.ak-details[open] > summary .ak-details-hint::after { visibility: visible; }

/* Scroll-capped panel body (audit log, long tables). */
.ak-scroll-70 { max-height: 70vh; }

/* Constrained form fields (settings selects/inputs). */
.ak-field-md { max-width: 360px; }
.ak-field-lg { max-width: 520px; }

/* Taller progress bar (onboarding setup progress). */
.ak-progress-lg { height: 22px; }

/* Severity chip strip (PHP config checker rollup). */
.ak-sev-strip { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.ak-sev-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ak-text-muted); }

/* Visit Analytics — collector toolbar (status left, actions right). */
.ak-va-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ak-va-status { display: flex; align-items: center; gap: 8px; color: var(--ak-text-muted); font-size: var(--fs-sm); }
.ak-va-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ======================================================================
   Third-party component coverage (DataTables, Select2, tabs, pagination,
   alerts, progress, list-groups, toggles). Keeps every plugin on-system.
   ====================================================================== */

/* ---- DataTables ------------------------------------------------------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--ak-text-muted) !important; }
.dataTables_wrapper .dataTables_length select {
  min-width: 66px; height: 34px; padding: 2px 10px; margin: 0 8px;
  background: var(--ak-bg-2) !important; color: var(--ak-text) !important;
  border: 1px solid var(--ak-border) !important; border-radius: var(--ak-radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter input {
  height: 36px; padding: 4px 12px; margin-left: 8px;
  background: var(--ak-bg-2) !important; color: var(--ak-text) !important;
  border: 1px solid var(--ak-border) !important; border-radius: var(--ak-radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ak-brand-2) !important; box-shadow: var(--ak-ring) !important; outline: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ak-text-muted) !important; background: var(--ak-bg-2) !important;
  border: 1px solid var(--ak-border) !important; border-radius: var(--ak-radius-sm) !important;
  margin: 0 3px !important; min-width: 34px; text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ak-bg-3) !important; color: var(--ak-text) !important; border-color: var(--ak-border-strong) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ak-btn-brand) !important; background-image: none !important; color: #fff !important; border: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; }
.dt-buttons .btn, .dt-button {
  background: var(--ak-bg-2) !important; color: var(--ak-text-muted) !important;
  border: 1px solid var(--ak-border) !important; border-radius: var(--ak-radius-sm) !important; margin-right: 6px;
}
.dt-buttons .btn:hover, .dt-button:hover { background: var(--ak-bg-3) !important; color: var(--ak-text) !important; }
table.dataTable tbody td, table.dataTable thead th { border-color: var(--ak-border) !important; }
table.dataTable tbody tr { background: transparent !important; }
table.dataTable tbody tr:hover { background: var(--ak-bg-2) !important; }
table.dataTable td.dataTables_empty { color: var(--ak-text-dim) !important; padding: 28px !important; }

/* ---- Select2 ---------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--ak-bg-2) !important; border: 1px solid var(--ak-border) !important;
  border-radius: var(--ak-radius-sm) !important; min-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ak-text) !important; line-height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ak-text-dim) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--ak-bg-3) !important; border: 1px solid var(--ak-border) !important; color: var(--ak-text) !important; border-radius: var(--ak-radius-pill) !important;
}
.select2-dropdown { background: var(--ak-bg-1) !important; border: 1px solid var(--ak-border-strong) !important; color: var(--ak-text) !important; box-shadow: var(--ak-shadow-lg); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--ak-bg-2) !important; color: var(--ak-text) !important; border: 1px solid var(--ak-border) !important; border-radius: var(--ak-radius-sm) !important;
}
.select2-results__option { color: var(--ak-text-muted) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ak-brand-2) !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--ak-bg-3) !important; color: var(--ak-text) !important; }

/* ---- Bootstrap tabs / pills ------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--ak-border) !important; }
.nav-tabs .nav-link { color: var(--ak-text-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--ak-text) !important; border-bottom-color: var(--ak-border-strong) !important; }
.nav-tabs .nav-link.active { color: var(--ak-text) !important; border-bottom: 2px solid var(--ak-brand) !important; background: var(--ak-brand-soft) !important; }
.nav-pills .nav-link { color: var(--ak-text-muted); border-radius: var(--ak-radius-sm); }
.nav-pills .nav-link.active { background: var(--ak-btn-brand) !important; background-image: none !important; color: #fff !important; }

/* ---- Pagination (Bootstrap) ------------------------------------------ */
.page-link { background: var(--ak-bg-2) !important; border-color: var(--ak-border) !important; color: var(--ak-text-muted) !important; }
.page-link:hover { background: var(--ak-bg-3) !important; color: var(--ak-text) !important; }
.page-item.active .page-link { background: var(--ak-btn-brand) !important; background-image: none !important; border-color: transparent !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--ak-bg-1) !important; color: var(--ak-text-dim) !important; }

/* ---- Alerts ----------------------------------------------------------- */
.alert { background: var(--ak-bg-2) !important; border: 1px solid var(--ak-border) !important; border-left-width: 4px !important; border-radius: var(--ak-radius) !important; color: var(--ak-text) !important; }
.alert-success { border-left-color: var(--ak-success) !important; }
.alert-danger  { border-left-color: var(--ak-danger) !important; }
.alert-warning { border-left-color: var(--ak-warning) !important; }
.alert-info    { border-left-color: var(--ak-info) !important; }

/* ---- Progress & list groups ------------------------------------------ */
.progress { background: var(--ak-bg-3) !important; border-radius: var(--ak-radius-pill); height: 8px; }
.progress-bar { background: var(--ak-brand) !important; }
.list-group-item { background: var(--ak-bg-1) !important; border-color: var(--ak-border) !important; color: var(--ak-text); }

/* ---- Custom checkboxes / radios --------------------------------------- */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked { background: var(--ak-brand-2) !important; border-color: var(--ak-brand-2) !important; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--ak-ring) !important; }

/* ---- Charts: bounded, responsive canvas wrappers ---------------------
   Chart.js canvases have no intrinsic height; without a sized wrapper they
   render at arbitrary/huge dimensions. Pair these with maintainAspectRatio:
   false in the chart config so the canvas fills the box, not the page. */
canvas { max-width: 100%; }
.ak-chart { position: relative; width: 100%; height: 320px; }

/* ---- KPI tiles (number + trend sparkline + delta) --------------------- */
.ak-kpi {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; height: 100%;
  background: var(--ak-bg-1); border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius); box-shadow: var(--ak-shadow); overflow: hidden;
  transition: border-color .15s var(--ak-ease), transform .15s var(--ak-ease);
}
.ak-kpi:hover { border-color: var(--ak-border-strong); transform: translateY(-1px); }
.ak-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ak-brand); }
.ak-kpi--danger::before  { background: var(--ak-danger); }
.ak-kpi--info::before    { background: var(--ak-info); }
.ak-kpi--warning::before { background: var(--ak-warning); }
.ak-kpi--success::before { background: var(--ak-success); }
.ak-kpi--neutral::before { background: var(--ak-text-dim); }
.ak-kpi-link { position: absolute; inset: 0; z-index: 3; }
.ak-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.ak-kpi-label { font-size: var(--fs-sm); color: var(--ak-text-muted); font-weight: 600; }
.ak-kpi-icon { color: var(--ak-text-dim); font-size: 15px; }
.ak-kpi-num { font-size: var(--fs-display); font-weight: 750; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ak-text); }
.ak-kpi-num--text { font-size: 1.15rem; line-height: 1.2; }
.ak-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.ak-kpi-sub { font-size: var(--fs-label); color: var(--ak-text-dim); }
.ak-kpi-delta { font-size: var(--fs-label); font-weight: 700; white-space: nowrap; }
.ak-kpi-delta--up   { color: var(--ak-danger); }   /* more threats = worse */
.ak-kpi-delta--down { color: var(--ak-success); }
.ak-kpi-delta--flat { color: var(--ak-text-dim); }
.ak-kpi-spark { position: relative; height: 34px; flex: 1; max-width: 130px; }

/* ---- Segmented time-range control ------------------------------------ */
.ak-range .btn {
  border-color: var(--ak-border) !important; color: var(--ak-text-muted) !important;
  background: var(--ak-bg-2) !important; font-weight: 600; font-size: var(--fs-label);
  padding: 4px 12px;
}
.ak-range .btn:hover { color: var(--ak-text) !important; background: var(--ak-bg-3) !important; }
.ak-range .btn.active {
  color: #fff !important; background: var(--ak-brand-2) !important; border-color: var(--ak-brand-2) !important;
}

/* ---- Sticky "unsaved changes" save bar -------------------------------- */
.ak-savebar {
  position: fixed; left: var(--ak-sidebar-w, 250px); right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px; transform: translateY(120%); transition: transform .22s var(--ak-ease);
  background: var(--ak-bg-2); border-top: 1px solid var(--ak-border-strong);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
}
.ak-savebar.show { transform: translateY(0); }
.ak-savebar-msg { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--ak-text); font-weight: 600; }
.ak-savebar-msg .fa-circle-exclamation { color: var(--ak-warning); }
.ak-savebar-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 991.98px) { .ak-savebar { left: 0; } }
body.sidebar-collapse .ak-savebar { left: var(--ak-sidebar-mini-w, 4rem); }

/* ---- CSV export button in the datatable toolbar ---------------------- */
.datatable-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ak-csv-btn { margin-left: auto; white-space: nowrap; font-weight: 600; font-size: var(--fs-label); }
.ak-csv-btn i { margin-right: 4px; }
.ak-chart--sm { height: 240px; }
.ak-chart--donut { height: 240px; max-width: 360px; margin: 0 auto; }
@media (max-width: 767.98px) { .ak-chart { height: 260px; } }

/* ======================================================================
   Header user menu (far-right account dropdown)
   ====================================================================== */
.ak-user-menu { margin-left: 4px; position: relative; }
.ak-user-toggle { display: inline-flex !important; align-items: center; gap: 7px; padding: 4px 8px !important; border-radius: var(--ak-radius-pill); }
.ak-user-toggle:hover { background: var(--ak-bg-2); }
.ak-user-caret { font-size: 10px; color: var(--ak-text-dim); transition: transform .18s var(--ak-ease); }
.ak-user-menu.show .ak-user-caret,
.ak-user-menu:hover .ak-user-caret { transform: rotate(180deg); }
.ak-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ak-brand); color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 12px rgba(109,40,217,0.35);
}
.ak-user-avatar.lg { width: 44px; height: 44px; font-size: 17px; }

/* Anchor to the top-right of the toggle so the hover-opened menu (no Popper)
   never spills off the right edge of the viewport. */
.ak-user-dropdown { min-width: 260px; padding: 0; overflow: hidden; position: absolute; top: 100%; right: 0; left: auto; margin-top: 4px; }
/* Open on hover as well as click (still keyboard/click accessible) */
.ak-user-menu:hover .ak-user-dropdown { display: block; }
.ak-user-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--ak-bg-2); }
.ak-user-meta { min-width: 0; }
.ak-user-name { font-weight: 650; color: var(--ak-text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-user-role { font-size: 11.5px; color: var(--ak-text-muted); margin-top: 2px; }
.ak-user-role .fa-circle-dot { color: var(--ak-success); font-size: 9px; }
.ak-user-dropdown .dropdown-item { padding: 11px 16px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ak-user-dropdown .dropdown-item i { color: var(--ak-text-muted); }
.ak-user-dropdown .dropdown-header { font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.1em; color:var(--ak-text-dim); font-weight:700; padding:8px 16px 4px; }
.ak-user-dropdown .dropdown-item .ak-choice-check { margin-left:auto; opacity:0; color:var(--ak-brand); font-size:11px; }
.ak-user-dropdown .dropdown-item.active { background:var(--ak-bg-2); color:var(--ak-text); }
.ak-user-dropdown .dropdown-item.active .ak-choice-check { opacity:1; }
.ak-user-dropdown .dropdown-divider { margin: 0; border-color: var(--ak-border); }
.ak-user-signout { color: var(--ak-danger) !important; font-weight: 600 !important; }
.ak-user-signout i { color: var(--ak-danger) !important; }
.ak-user-signout:hover { background: rgba(239,68,68,0.12) !important; color: var(--ak-danger) !important; }

/* ---- Header live-alerts bell ------------------------------------------ */
.ak-bell-menu { position:relative; }
.ak-bell-toggle {
  position:relative; display:inline-flex !important; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0 !important; border-radius:var(--ak-radius-sm);
  color:var(--ak-text-muted); transition:color .15s var(--ak-ease), background .15s var(--ak-ease);
}
.ak-bell-toggle:hover { background:var(--ak-bg-2); color:var(--ak-text); }
/* Two-tone bell: the glyph stays standard theme purple in every active state,
   while the count badge carries the alert-grade colour — high visibility. */
.ak-bell-toggle .fa-bell { font-size:1.05rem; color:var(--ak-brand-lilac); }
.ak-bell-badge {
  position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--ak-radius-pill); font-size:9px; font-weight:800; line-height:16px;
  text-align:center; color:#fff; background:var(--ak-danger);
  box-shadow:0 0 0 2px var(--ak-bg-1);
}
.ak-bell-toggle:hover .fa-bell { color:#c4b5fd; }
/* Quiet (no alerts): muted bell, no badge. */
.ak-bell--none .fa-bell { color:var(--ak-text-dim); }
.ak-bell--low .ak-bell-badge { background:var(--ak-cyan); color:#042f2e; }
.ak-bell--medium .ak-bell-badge { background:var(--ak-warning); color:#422006; }
.ak-bell--high .ak-bell-badge { background:#fb923c; color:#431407; }
.ak-bell--critical .fa-bell { animation:ak-bell-pulse 1.6s ease-in-out infinite; }
.ak-bell--critical .ak-bell-badge { background:var(--ak-danger); box-shadow:0 0 0 2px var(--ak-bg-1), 0 0 10px rgba(239,68,68,0.55); }
@keyframes ak-bell-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.08); opacity:0.85; }
}
.ak-bell-dropdown { min-width:320px; max-width:min(92vw,380px); padding:0; overflow:hidden; }
.ak-bell-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--ak-border); background:var(--ak-bg-2);
}
.ak-bell-head-title { font-weight:700; font-size:var(--fs-sm); color:var(--ak-text); display:inline-flex; align-items:center; gap:8px; }
.ak-bell-mark-all { font-size:11px; font-weight:600; padding:0; text-decoration:none; color:var(--ak-cyan); }
.ak-bell-mark-all:disabled { opacity:0.4; pointer-events:none; }
.ak-bell-list { max-height:min(52vh,360px); overflow-y:auto; }
.ak-bell-empty { padding:20px 16px; font-size:var(--fs-sm); color:var(--ak-text-dim); text-align:center; }
.ak-bell-item {
  display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--ak-border);
}
.ak-bell-item:last-child { border-bottom:0; }
.ak-bell-item-link {
  flex:1; min-width:0; padding:10px 12px; text-decoration:none; color:var(--ak-text);
  display:grid; gap:2px;
}
.ak-bell-item-link:hover { background:var(--ak-bg-2); color:var(--ak-text); }
.ak-bell-sev {
  display:inline-flex; align-self:start; font-size:9px; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; padding:2px 6px; border-radius:var(--ak-radius-pill);
}
.ak-bell-sev--critical { background:rgba(239,68,68,0.18); color:#fca5a5; }
.ak-bell-sev--high { background:rgba(251,146,60,0.18); color:#fdba74; }
.ak-bell-sev--medium { background:rgba(234,179,8,0.18); color:#fde047; }
.ak-bell-sev--low { background:rgba(6,182,212,0.16); color:#67e8f9; }
.ak-bell-item-title { font-weight:600; font-size:var(--fs-sm); line-height:1.35; }
.ak-bell-item-site { font-size:10px; color:var(--ak-text-muted); }
.ak-bell-item-time { font-size:10px; color:var(--ak-text-dim); font-family:var(--ak-mono); }
.ak-bell-dismiss {
  width:40px; flex-shrink:0; border:0; border-left:1px solid var(--ak-border);
  background:transparent; color:var(--ak-text-dim); cursor:pointer;
}
.ak-bell-dismiss:hover { background:var(--ak-bg-2); color:var(--ak-success); }
.ak-bell-foot { padding:10px 14px; border-top:1px solid var(--ak-border); background:var(--ak-bg-2); text-align:center; }
.ak-bell-view-all { font-size:var(--fs-sm); font-weight:600; color:var(--ak-cyan); text-decoration:none; }
.ak-bell-view-all:hover { color:var(--ak-text); }
.ak-ar-focus { animation:ak-ar-flash 1.2s ease-out 2; outline:2px solid var(--ak-cyan); outline-offset:-2px; }
@keyframes ak-ar-flash {
  0% { background:rgba(6,182,212,0.22); }
  100% { background:transparent; }
}

/* ---- System Settings area sub-nav ------------------------------------- */
.ak-settings-area { border-bottom: 1px solid var(--ak-border); padding-bottom: var(--ak-space-2); margin-bottom: var(--ak-space-3); }
.ak-settings-area-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ak-text-dim); font-weight: 700; margin-bottom: 6px; }
.ak-nav-segment-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ak-text-dim); font-weight: 700; margin: 4px 0 4px 2px;
}
.ak-settings-nav { flex-wrap: wrap; gap: 5px; }
.ak-settings-nav .nav-link { color: var(--ak-text-muted); background: var(--ak-bg-2); border: 1px solid var(--ak-border); border-radius: var(--ak-radius-pill); padding: 5px 11px; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ak-settings-nav .nav-link:hover { color: var(--ak-text); background: var(--ak-bg-3); }
.ak-settings-nav .nav-link.active { background: var(--ak-btn-brand) !important; background-image: none !important; color: #fff !important; border-color: transparent; }
@media (max-width: 1100px) {
  .ak-settings-nav .nav-link .ak-nav-long { display: none; }
}
@media (min-width: 1101px) {
  .ak-settings-nav .nav-link .ak-nav-short { display: none; }
}

/* ----------------------------------------------------------------------
   Settings menu — clean, squared, theme-matching redesign.
   Scoped to settings areas (platform/site); policy & access keep their pills.
   Rectangular chips (not rounded pills), grouped by segment inside a
   tidy bordered panel that uses the app's own surface + border + brand tokens.
   ---------------------------------------------------------------------- */
.ak-settings-area--clean {
  background: var(--ak-bg-1);
  border: 1px solid var(--ak-border);
  border-radius: 10px;
  padding: 12px 16px 14px;
  margin-bottom: 18px;
}
.ak-settings-area--clean .ak-settings-area-label {
  color: var(--ak-text);
  font-size: 11px;
  margin-bottom: 4px;
}
.ak-settings-area--clean .ak-nav-segment-label {
  margin: 12px 0 6px 1px;
}
.ak-settings-nav--clean { gap: 6px; }
.ak-settings-nav--clean .nav-link {
  border: 1px solid var(--ak-border);
  border-radius: 6px;                 /* squared rectangle, not a pill */
  background: var(--ak-bg-2);
  color: var(--ak-text-muted);
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ak-settings-nav--clean .nav-link i { opacity: 0.75; font-size: 12px; }
.ak-settings-nav--clean .nav-link:hover {
  background: var(--ak-bg-3);
  color: var(--ak-text);
}
.ak-settings-nav--clean .nav-link:hover i { opacity: 1; }
.ak-settings-nav--clean .nav-link.active {
  background: var(--ak-btn-brand) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: transparent;
}
.ak-settings-nav--clean .nav-link.active i { opacity: 1; }

/* ======================================================================
   Theme switcher + fullscreen controls (topbar)
   ====================================================================== */
.ak-topbar-tools { display:flex; align-items:center; gap:2px; }
.ak-tool-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--ak-radius-sm);
  color:var(--ak-text-muted); background:transparent; border:1px solid transparent;
  cursor:pointer; transition:all .15s var(--ak-ease);
}
.ak-tool-btn:hover { color:var(--ak-text); background:var(--ak-bg-2); }

/* ---- Environment chip (visibility of system status) ---- */
.ak-env-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:var(--ak-radius-pill);
  font-size:var(--fs-label); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--ak-border);
}
.ak-env-dot { width:7px; height:7px; border-radius:50%; }
.ak-env--prod    { color:var(--ak-success); background:rgba(34,197,94,0.10); border-color:rgba(34,197,94,0.30); }
.ak-env--prod    .ak-env-dot { background:var(--ak-success); box-shadow:0 0 0 3px rgba(34,197,94,0.20); }
.ak-env--staging { color:var(--ak-warning); background:rgba(245,158,11,0.10); border-color:rgba(245,158,11,0.30); }
.ak-env--staging .ak-env-dot { background:var(--ak-warning); box-shadow:0 0 0 3px rgba(245,158,11,0.20); }

/* ---- Promoted site selector (the operator's primary context switch) ---- */
.ak-site-selector-item { display:flex; align-items:center; margin:0 6px 0 2px; }
.ak-site-selector-form { margin:0; }
.ak-site-selector { display:flex; align-items:center; position:relative; }
.ak-site-selector-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--ak-cyan); font-size:12px; pointer-events:none; z-index:2;
}
.ak-site-select {
  min-width:200px; max-width:260px; height:34px; padding:4px 28px 4px 31px !important;
  font-weight:600 !important; font-size:var(--fs-sm) !important;
  color:var(--ak-text) !important; background-color:var(--ak-bg-2) !important;
  border:1px solid var(--ak-border-strong) !important; border-radius:var(--ak-radius-pill) !important;
  box-shadow:var(--ak-shadow); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important;
  background-size:10px 6px !important;
}
.ak-site-select:hover { border-color:var(--ak-cyan) !important; }
.ak-site-select:focus { box-shadow:var(--ak-ring) !important; outline:none; }
@media (max-width: 1199.98px) {
  .ak-site-selector-item { display:none !important; }
}

/* ---- View menu (theme + display, one labeled control) ---- */
.ak-view-toggle { display:inline-flex !important; align-items:center; gap:7px; padding:6px 12px !important; border-radius:var(--ak-radius-pill); font-weight:600; font-size:var(--fs-sm); }
.ak-view-toggle:hover { background:var(--ak-bg-2); color:var(--ak-text) !important; }
.ak-view-caret { font-size:10px; color:var(--ak-text-dim); transition:transform .18s var(--ak-ease); }
.ak-view-toggle[aria-expanded="true"] .ak-view-caret { transform:rotate(180deg); }
.ak-view-menu { min-width:216px; padding:6px; }
.ak-view-menu .dropdown-header { font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.1em; color:var(--ak-text-dim); font-weight:700; padding:8px 10px 4px; }
.ak-view-menu .dropdown-item { display:flex; align-items:center; gap:10px; border-radius:var(--ak-radius-sm); padding:9px 10px; font-weight:500; font-size:var(--fs-sm); cursor:pointer; }
.ak-view-menu .dropdown-item:hover { background:var(--ak-bg-2); color:var(--ak-text); }
.ak-view-menu .dropdown-item .ak-choice-check { margin-left:auto; opacity:0; color:var(--ak-brand); }
.ak-view-menu .dropdown-item.active { background:var(--ak-bg-2); color:var(--ak-text); }
.ak-view-menu .dropdown-item.active .ak-choice-check { opacity:1; }
.ak-view-menu .dropdown-divider { border-color:var(--ak-border); margin:6px 4px; }

/* ======================================================================
   SOC focus / wall mode — hide chrome, maximize the data surface.
   Toggled by adding .ak-focus to <body>.
   ====================================================================== */
body.ak-focus .main-sidebar,
body.ak-focus .main-header { display:none !important; }
body.ak-focus .content-wrapper,
body.ak-focus .main-footer { margin-left:0 !important; }
body.ak-focus .content-header { padding-top:14px; }
.ak-focus-exit {
  position:fixed; top:12px; right:14px; z-index:2000; display:none;
  align-items:center; gap:8px; padding:8px 14px; border-radius:var(--ak-radius-pill);
  background:var(--ak-bg-2); border:1px solid var(--ak-border-strong); color:var(--ak-text);
  box-shadow:var(--ak-shadow-lg); cursor:pointer; font-size:13px; font-weight:600;
}
body.ak-focus .ak-focus-exit { display:inline-flex; }

/* ======================================================================
   Collapsible sidebar (icon-mini) polish
   ====================================================================== */
.sidebar-mini.sidebar-collapse .brand-link .brand-text { opacity:0; }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-text { opacity:1; }
.user-panel .btn { min-height:32px; }
/* Hide the Account/Logout panel when collapsed to icons (returns on hover) */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel { visibility:hidden; height:0; margin:0 !important; padding:0 !important; overflow:hidden; }

/* ---- Collapsed icon rail (desktop, sidebar not hovered) ---------------- */
@media (min-width:992px){
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    display:flex; align-items:center; justify-content:center;
    padding:0; text-align:center;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-logo { display: none !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon { display: block !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .ak-brand-icon { display: none !important; }
  html[data-ak-theme="light"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-light { display: block !important; }
  html[data-ak-theme="light"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-dark { display: none !important; }
  html[data-ak-theme="dark"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-dark,
  html:not([data-ak-theme="light"]) body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-dark { display: block !important; }
  html[data-ak-theme="dark"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-light,
  html:not([data-ak-theme="light"]) body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .ak-brand-icon--on-light { display: none !important; }

  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar {
    padding:4px 0 10px;
  }

  /* Zone headers become hairline dividers between icon groups */
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > li.nav-header {
    visibility:visible; opacity:1;
    height:0; margin:12px 12px 6px; padding:0; border:0;
    border-top:1px solid var(--ak-border);
    overflow:hidden; font-size:0; line-height:0;
    pointer-events:none; border-radius:0;
    background:transparent; cursor:default;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > li.nav-header:first-child {
    margin-top:6px; border-top:0;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > li.nav-header.ak-group-header {
    border-top:1px solid var(--ak-border); margin-top:12px;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > li.nav-header .ak-group-caret { display:none; }

  /* Icon cells: centered squares with even vertical rhythm */
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link {
    display:flex; justify-content:center; align-items:center;
    width:2.5rem; height:2.5rem;
    margin:4px auto; padding:0;
    border-radius:10px;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link p {
    display:none !important; width:0; overflow:hidden;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-icon {
    margin:0; width:auto; font-size:1.05rem;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .badge,
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .right {
    display:none !important;
  }

  /* Active + hover on the icon tile */
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link.active::before {
    display:none;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link.active {
    box-shadow:0 4px 14px rgba(109,40,217,0.38);
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link:hover {
    transform:translateY(-1px);
  }

  /* Flatten Diagnostics tree: show child icons, hide folder parent */
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .has-treeview > .nav-link {
    display:none;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview {
    display:block; padding:0; margin:0;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    display:flex; justify-content:center; align-items:center;
    width:2.5rem; height:2.5rem;
    margin:4px auto; padding:0;
    border-radius:10px;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    display:none !important;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview .nav-icon {
    margin:0; font-size:0.95rem; opacity:0.88;
  }
}
/* Expanded-on-hover restores normal layout (shell.css handles label fade-in) */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link {
  margin:2px 10px;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link.active { box-shadow:0 6px 18px rgba(109,40,217,0.35); }

/* ---- Collapsible sidebar groups -------------------------------------- */
.nav-sidebar .nav-header.ak-group-header {
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; border-radius:var(--ak-radius-sm);
  margin:10px 8px 2px; padding:8px 12px 6px; transition:color .15s var(--ak-ease), background .15s var(--ak-ease);
}
/* Hairline seam above each group so the eye catches the section breaks */
.nav-sidebar .nav-header.ak-group-header { border-top:1px solid var(--ak-border); margin-top:12px; padding-top:12px; }
.nav-sidebar > li.nav-header.ak-group-header:first-child { border-top:0; margin-top:4px; }
.nav-sidebar .nav-header.ak-group-header:hover { color:var(--ak-text) !important; background:var(--ak-bg-2); }
/* Platform-admin scope accent: superadmins always know when they're in platform scope */
.nav-sidebar .nav-header.ak-group-header.ak-scope-admin { color:var(--ak-cyan) !important; }
.nav-sidebar .nav-header.ak-group-header.ak-scope-admin .ak-group-caret { color:var(--ak-cyan); }

/* ---- Sidebar quick-jump filter -------------------------------------- */
.ak-navfilter { padding:10px 12px 6px; }
.ak-navfilter-box { position:relative; }
.ak-navfilter-box .fa-magnifying-glass { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--ak-text-dim); pointer-events:none; }
.ak-navfilter input {
  width:100%; padding:7px 10px 7px 30px; font-size:var(--fs-sm);
  color:var(--ak-text); background:var(--ak-bg-2);
  border:1px solid var(--ak-border); border-radius:var(--ak-radius-pill); outline:none;
}
.ak-navfilter input:focus { border-color:var(--ak-cyan); box-shadow:var(--ak-ring); }
.ak-navfilter input::placeholder { color:var(--ak-text-dim); }
/* When filtering, force-show matched items even inside collapsed groups */
.nav-sidebar .nav-item.ak-filter-hit.ak-hidden { display:block !important; }
.nav-sidebar .nav-item.ak-filter-miss { display:none !important; }
.nav-sidebar .nav-header.ak-filter-miss { display:none !important; }
.ak-navfilter-empty { display:none; padding:8px 14px; font-size:var(--fs-sm); color:var(--ak-text-dim); }
body.ak-filtering .ak-navfilter-empty.show { display:block; }
/* Hide the quick-jump when the rail is collapsed to icons */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .ak-navfilter { display:none; }

/* ---- Pinned sidebar footer (version + help) ------------------------- */
.ak-sidebar-foot {
  margin-top:14px; padding:12px 16px; border-top:1px solid var(--ak-border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:var(--fs-label); color:var(--ak-text-dim);
}
.ak-sidebar-foot a { color:var(--ak-text-muted); text-decoration:none; }
.ak-sidebar-foot a:hover { color:var(--ak-cyan); }
.ak-sidebar-foot .ak-sidebar-ver { font-family:var(--ak-mono); letter-spacing:0.02em; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .ak-sidebar-foot { display:none; }
.nav-sidebar .nav-header.ak-group-header:focus-visible { outline:none; box-shadow:var(--ak-ring); }
.ak-group-caret { font-size:11px; opacity:0.55; transition:transform .2s var(--ak-ease); }
.nav-sidebar .nav-header.ak-group-header.ak-open .ak-group-caret { transform:rotate(180deg); opacity:0.9; }
.nav-sidebar .nav-item.ak-hidden { display:none !important; }
/* A collapsed group that still holds the active page gets a subtle dot cue */
.nav-sidebar .nav-header.ak-group-header.ak-has-active:not(.ak-open)::before {
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ak-btn-brand);
  position:absolute; left:3px; top:50%; transform:translateY(-50%);
}
/* In icon-mini mode, show every item as an icon regardless of group state */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item.ak-hidden { display:block !important; }
.sidebar-mini.sidebar-collapse .ak-group-caret { display:none; }
/* Collapsed rail tooltips: right-side labels on hover */
body.sidebar-mini.sidebar-collapse .nav-sidebar > .nav-item > .nav-link[data-bs-toggle="tooltip"] {
  cursor:pointer;
}

/* ======================================================================
   Responsive — SOC wall, desktop, tablet (iPad), mobile
   ====================================================================== */
/* Large / wall displays: let content breathe, cap ultra-wide line length */
@media (min-width:1920px){
  .content > .container-fluid,
  .content-header > .container-fluid { max-width:1800px; margin-inline:auto; }
}

/* Tablet (≤1024px): auto-collapse sidebar to icons is handled by AdminLTE;
   tighten paddings and let the navbar search shrink. */
@media (max-width:1024px){
  .content-header h1 { font-size:1.5rem; }
  .small-box h3 { font-size:1.8rem; }
}

/* Small tablet / large phone (≤768px) */
@media (max-width:768px){
  .content, .content-header { padding-left:8px; padding-right:8px; }
  .main-header .navbar-nav .nav-item.d-none { display:none !important; }
  /* Bigger touch targets */
  .btn, .nav-sidebar > .nav-item > .nav-link, .ak-tool-btn { min-height:44px; }
  .nav-sidebar > .nav-item > .nav-link { display:flex; align-items:center; }
  /* Tables scroll horizontally instead of squashing */
  .table-responsive { -webkit-overflow-scrolling:touch; }
  /* Breadcrumb clutter off on phones */
  .content-header .breadcrumb { display:none; }
}

/* Phone (≤576px): hide the wide IP-search, stack toolbars */
@media (max-width:576px){
  .main-header form.form-inline { display:none !important; }
  .small-box .icon { display:none; }
  .card-header { padding:0.85rem 1rem; }
  h1.m-0 { font-size:1.35rem; }
}

/* ---- Respect reduced-motion preferences ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ======================================================================
   Section labels, density helpers, dashboard widgets
   ====================================================================== */
.ak-section-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ak-text-dim);
  font-weight: 700;
  margin: var(--ak-space-4) 0 var(--ak-space-2);
}
.ak-section-label:first-child { margin-top: 0; }

.ak-site-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ak-space-3) var(--ak-space-5);
  padding: var(--ak-space-3) var(--ak-space-4);
  background: var(--ak-bg-2);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-sm);
  margin-bottom: var(--ak-section-gap);
  font-size: var(--fs-sm);
}
.ak-site-banner strong { color: var(--ak-text); }
.ak-site-banner .ak-site-meta { color: var(--ak-text-muted); }

.content-header.ak-header-slim { padding-top: 10px; padding-bottom: 0; }
.content-header.ak-header-slim h1 { font-size: var(--fs-h2); }
.content-header.ak-header-slim .row.mb-2 { margin-bottom: 0.35rem !important; }

.ak-posture-grid .ak-posture-tile {
  padding: var(--ak-space-2) var(--ak-space-3);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-sm);
  height: 100%;
  background: var(--ak-bg-2);
}
.ak-posture-grid .ak-posture-tile .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ak-text-dim); }
.ak-posture-grid .ak-posture-tile .value { font-size: var(--fs-sm); font-weight: 650; color: var(--ak-text); margin-top: 2px; }

.ak-feed-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--ak-border); font-size: var(--fs-sm);
}
.ak-feed-row:last-child { border-bottom: none; }
.ak-feed-row .ak-feed-ip { font-family: var(--ak-mono); font-weight: 600; color: var(--ak-text); }
.ak-feed-row .ak-feed-meta { color: var(--ak-text-muted); font-size: 11px; }
.ak-feed-row .ak-feed-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.info-box, .ak-kpi--compact {
  display: flex; align-items: center; gap: var(--ak-space-3);
  padding: var(--ak-space-3);
  background: var(--ak-bg-2);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-sm);
  min-height: 64px;
}
.info-box-icon, .ak-kpi--compact .icon {
  width: 40px; height: 40px; border-radius: var(--ak-radius-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--ak-accent-soft); color: var(--ak-accent); font-size: 1.1rem;
}
.info-box-content, .ak-kpi--compact .body { min-width: 0; flex: 1; }
.info-box-text, .ak-kpi--compact .label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ak-text-dim); display: block; }
.info-box-number, .ak-kpi--compact .value { font-size: var(--fs-sm); font-weight: 650; color: var(--ak-text); }

.ak-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--ak-radius-pill);
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.ak-status-badge.on { background: rgba(34,197,94,0.14); color: #6ee7a0; }
.ak-status-badge.off { background: rgba(239,68,68,0.12); color: #fca5a5; }

.ak-waap-sections .accordion-button {
  background: var(--ak-bg-2) !important; color: var(--ak-text) !important;
  font-size: var(--fs-sm); font-weight: 650; padding: 0.65rem 1rem;
  box-shadow: none !important;
}
.ak-waap-sections .accordion-button:not(.collapsed) { color: var(--ak-brand) !important; background: var(--ak-brand-soft) !important; }
.ak-waap-sections .accordion-item { background: transparent; border-color: var(--ak-border); }
.ak-waap-sections .accordion-body { padding: 1rem; }

/* ======================================================================
   Compact view (View menu toggle — html[data-ak-compact="1"])
   ====================================================================== */
html[data-ak-compact="1"] .card-header,
body.ak-compact .card-header { padding: 0.5rem 0.85rem; }
html[data-ak-compact="1"] .content-header h1,
html[data-ak-compact="1"] h1.m-0,
body.ak-compact .content-header h1,
body.ak-compact h1.m-0 { font-size: 1.125rem; }
html[data-ak-compact="1"] .card-title,
html[data-ak-compact="1"] h3.card-title,
body.ak-compact .card-title,
body.ak-compact h3.card-title { font-size: 0.95rem; }
html[data-ak-compact="1"] .ak-kpi,
body.ak-compact .ak-kpi { padding: 10px 12px; }
html[data-ak-compact="1"] .ak-kpi-num,
body.ak-compact .ak-kpi-num { font-size: 1.35rem; }
html[data-ak-compact="1"] .ak-kpi-spark,
body.ak-compact .ak-kpi-spark { display: none; }
html[data-ak-compact="1"] .ak-chart,
body.ak-compact .ak-chart { height: 220px; }
html[data-ak-compact="1"] .ak-chart--sm,
body.ak-compact .ak-chart--sm { height: 160px; }
html[data-ak-compact="1"] .ak-settings-nav .nav-link,
body.ak-compact .ak-settings-nav .nav-link { padding: 4px 10px; font-size: 11.5px; }
html[data-ak-compact="1"] .ak-settings-area,
body.ak-compact .ak-settings-area { padding-bottom: 6px; margin-bottom: 8px !important; }
html[data-ak-compact="1"] .form-control,
html[data-ak-compact="1"] .form-select,
body.ak-compact .form-control,
body.ak-compact .form-select { min-height: 34px; }
html[data-ak-compact="1"] .btn,
body.ak-compact .btn { min-height: 32px; }
html[data-ak-compact="1"] .form-group,
body.ak-compact .form-group { margin-bottom: 0.5rem; }
html[data-ak-compact="1"] .ak-posture-grid .ak-posture-tile,
body.ak-compact .ak-posture-grid .ak-posture-tile { padding: 6px 10px; }
html[data-ak-compact="1"] .content-header,
body.ak-compact .content-header { padding-top: 8px; }
html[data-ak-compact="1"] .content,
body.ak-compact .content { padding-top: 0.35rem; }
html[data-ak-compact="1"] .small-box > .inner,
body.ak-compact .small-box > .inner { padding: 12px 14px; }
html[data-ak-compact="1"] .small-box h3,
body.ak-compact .small-box h3 { font-size: 1.6rem; margin-bottom: 4px; }
html[data-ak-compact="1"] .small-box .icon,
body.ak-compact .small-box .icon { font-size: 48px; }
html[data-ak-compact="1"] .ak-site-banner,
body.ak-compact .ak-site-banner { padding: 8px 12px; margin-bottom: 10px; }
html[data-ak-compact="1"] .ak-section-label,
body.ak-compact .ak-section-label { margin: 10px 0 6px; }
@media (max-width: 767.98px) {
  html[data-ak-compact="1"] .ak-chart,
  body.ak-compact .ak-chart { height: 200px; }
}

/* ============================================================
   Lighter sub-navigation (nav plan) — replaces the multi-row
   pill "tab wall". Two modes: slim underline strip for operator
   areas, left sub-rail for settings areas.
   ============================================================ */

/* Operator areas: one slim row, underline active, thin group divider. */
.ak-subnav-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px; border-bottom: 1px solid var(--ak-border);
  margin-bottom: var(--ak-space-3);
}
.ak-subnav-strip .ak-subnav-tab {
  font-size: 13px; padding: 9px 12px; color: var(--ak-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; text-decoration: none; display: inline-flex;
  align-items: center; gap: 6px;
}
.ak-subnav-strip .ak-subnav-tab i { font-size: 12px; opacity: 0.8; }
.ak-subnav-strip .ak-subnav-tab:hover { color: var(--ak-text); }
.ak-subnav-strip .ak-subnav-tab.active {
  color: var(--ak-text); font-weight: 600;
  border-bottom-color: var(--ak-btn-brand);
}
.ak-subnav-div {
  width: 1px; height: 18px; background: var(--ak-border-strong);
  margin: 0 6px;
}
/* Segment eyebrow inside the strip: names the group the following tabs
   belong to (General / Security / Tenancy / Diagnostics …). */
.ak-subnav-seg {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ak-text-dim);
  padding: 9px 4px 9px 6px; white-space: nowrap; user-select: none;
}

/* ---- Quick Jump results dropdown (sidebar whole-system search) --------- */
.ak-navfilter { position: relative; }
.ak-jump-list {
  display: none; position: absolute; left: 10px; right: 10px; top: 100%;
  z-index: 1080; margin-top: 4px; padding: 4px; overflow: hidden;
  background: var(--ak-bg-2); border: 1px solid var(--ak-border-strong);
  border-radius: var(--ak-radius-sm); box-shadow: var(--ak-shadow-lg);
}
.ak-jump-list.show { display: block; }
.ak-jump-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  font-size: var(--fs-sm); color: var(--ak-text); text-decoration: none;
  min-width: 0;
}
.ak-jump-item i { width: 16px; text-align: center; font-size: 12px; color: var(--ak-text-dim); flex: 0 0 auto; }
.ak-jump-item:hover, .ak-jump-item[aria-selected="true"] { background: var(--ak-brand); color: #fff; text-decoration: none; }
.ak-jump-item:hover i, .ak-jump-item[aria-selected="true"] i,
.ak-jump-item:hover .ak-jump-group, .ak-jump-item[aria-selected="true"] .ak-jump-group { color: rgba(255,255,255,0.8); }
.ak-jump-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-jump-group {
  flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ak-text-dim);
}

/* Settings areas: left sub-rail. Grid is applied by the page wrapper
   .ak-settings-layout; the rail itself is a <details> so it can collapse. */
.ak-subrail { margin-bottom: var(--ak-space-3); }
.ak-subrail-summary { display: none; }
.ak-subrail-nav { display: flex; flex-direction: column; gap: 1px; }
.ak-subrail-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ak-text-dim); font-weight: 700;
  margin: 12px 0 4px; padding: 0 8px;
}
.ak-subrail-group:first-child { margin-top: 0; }
.ak-subrail-link {
  font-size: 13px; padding: 7px 10px; border-radius: 8px;
  color: var(--ak-text-muted); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.ak-subrail-link i { font-size: 13px; opacity: 0.75; }
.ak-subrail-link:hover { color: var(--ak-text); background: var(--ak-bg-2); }
.ak-subrail-link.active {
  color: #fff; background: var(--ak-btn-brand); font-weight: 600;
}
.ak-subrail-link.active i { opacity: 1; }

/* Two-column settings layout: rail + content. Pages opt in by wrapping
   the rail and body in .ak-settings-layout. */
.ak-settings-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.ak-settings-layout .ak-subrail { position: sticky; top: 12px; }

@media (max-width: 991.98px) {
  .ak-settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .ak-subrail-summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--ak-border);
    border-radius: 10px; background: var(--ak-bg-2); list-style: none;
  }
  .ak-subrail-summary::-webkit-details-marker { display: none; }
  .ak-subrail-area { font-size: 11px; color: var(--ak-text-dim);
    text-transform: uppercase; letter-spacing: 0.1em; }
  .ak-subrail-current { font-size: 13px; font-weight: 600; color: var(--ak-text); }
  .ak-subrail-summary i { margin-left: auto; transition: transform .15s; font-size: 12px; }
  .ak-subrail[open] .ak-subrail-summary i { transform: rotate(180deg); }
  .ak-subrail-nav { margin-top: 6px; }
}

/* Manifest breadcrumb: subtle, consistent trail (nav plan Phase 7). */
.ak-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--ak-text-dim); }
.ak-breadcrumb .breadcrumb-item a { color: var(--ak-text-muted); text-decoration: none; }
.ak-breadcrumb .breadcrumb-item a:hover { color: var(--ak-text); }
.ak-breadcrumb .breadcrumb-item.active { color: var(--ak-text); font-weight: 600; }

/* ============================================================
   UI-unification demo (U1): .ak-panel — the ONE neutral panel.
   Color appears only as a 3px status edge. Preview on
   superadmin-dashboard.php?ui=v2 (reversible; classic is default).
   ============================================================ */
.ak-panel {
  background: var(--ak-bg-2); border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius); margin-bottom: var(--ak-space-3);
  overflow: hidden;
}
.ak-panel--success { border-left: 3px solid #22C55E; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-panel--warning { border-left: 3px solid #F59E0B; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-panel--danger  { border-left: 3px solid #EF4444; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 10px 14px;
  border-bottom: 1px solid var(--ak-border);
}
.ak-panel-title { font-size: 13px; font-weight: 600; color: var(--ak-text); margin: 0; display: flex; align-items: center; gap: 7px; }
.ak-panel-title i { color: var(--ak-text-dim); font-size: 12px; }
.ak-panel-title small { color: var(--ak-text-dim); font-weight: 500; }
.ak-panel-toolbar { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ak-panel-toolbar a { color: var(--ak-text-muted); text-decoration: none; }
.ak-panel-toolbar a:hover { color: var(--ak-text); }
.ak-panel-toolbar a i { font-size: 11px; margin-left: 3px; }
.ak-panel-body { padding: 14px; }
.ak-panel-body--flush { padding: 0; }

/* One table vocabulary. */
.ak-table { margin-bottom: 0; }
/* Force ak-table cells transparent so the dark panel shows through (some
   bundled table styles default cell background to white, producing a jarring
   light block on the dark theme — e.g. the port scanner results). */
.ak-table, .ak-table > thead > tr > th, .ak-table > tbody > tr,
.ak-table > tbody > tr > td, .ak-table > tbody > tr > th { background-color: transparent !important; color: var(--ak-text); }
.ak-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ak-text-dim); font-weight: 600; border-bottom-width: 1px !important; }
.ak-table td { font-size: 13px; vertical-align: middle; }

/* Status chips for summaries (agent health etc.). */
.ak-chipline { display: flex; gap: 8px; flex-wrap: wrap; }
.ak-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ak-border); color: var(--ak-text-muted); }
.ak-chip--ok { color: #22C55E; border-color: rgba(34,197,94,.35); }
.ak-chip--warn { color: #F59E0B; border-color: rgba(245,158,11,.35); }
.ak-chip--bad { color: #EF4444; border-color: rgba(239,68,68,.35); }

/* Demo toggle pill in the page header. */
.ak-ui-toggle { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--ak-border-strong); color: var(--ak-text-muted); text-decoration: none; }
.ak-ui-toggle:hover { color: var(--ak-text); border-style: solid; }

/* U2 compat: codemodded pages keep Bootstrap .card-header/.card-title markup
   inside .ak-panel — style those to the unified header without markup surgery. */
.ak-panel > .card-header {
  background: transparent; border-bottom: 1px solid var(--ak-border);
  padding: 10px 14px;
}
.ak-panel .card-title {
  font-size: 13px; font-weight: 600; color: var(--ak-text); margin-bottom: 0;
}
.ak-panel .card-title i { color: var(--ak-text-dim); font-size: 12px; }
.ak-panel .card-title small { color: var(--ak-text-dim); font-weight: 500; }
.ak-panel > .card-body { padding: 14px; }
.ak-panel > .card-footer { background: transparent; border-top: 1px solid var(--ak-border); }

/* U2: legacy AdminLTE small-box KPIs restyled flat to match .ak-kpi — color
   becomes a left status edge instead of a solid colored box. */
.small-box {
  background: var(--ak-bg-2) !important; color: var(--ak-text) !important;
  border: 1px solid var(--ak-border); border-radius: var(--ak-radius);
  position: relative; overflow: hidden; padding: 12px 14px; box-shadow: none;
}
.small-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ak-text-dim); }
.small-box.bg-info::before, .small-box.bg-primary::before { background: var(--ak-info); }
.small-box.bg-success::before { background: #22C55E; }
.small-box.bg-warning::before { background: #F59E0B; }
.small-box.bg-danger::before { background: #EF4444; }
.small-box .inner h3 { font-size: 24px; font-weight: 700; color: var(--ak-text); margin: 0 0 2px; }
.small-box .inner p { font-size: 12px; color: var(--ak-text-muted); margin: 0; }
.small-box .icon { color: var(--ak-text-dim); opacity: 0.35; font-size: 34px; right: 14px; top: 10px; position: absolute; }
.small-box .small-box-footer, .small-box a.small-box-footer {
  display: block; background: transparent !important; color: var(--ak-text-muted) !important;
  font-size: 11px; padding: 6px 0 0; text-align: left; text-decoration: none;
  border-top: 1px solid var(--ak-border); margin-top: 8px;
}

/* ============================================================
   OWASP Top 10 (2025) coverage panel (ASKARI-OWASP-TOP10-DASHBOARD-PLAN).
   Two-column grid of ten category rows, activity chip + status dot.
   ============================================================ */
.ak-owasp-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767.98px) { .ak-owasp-grid { grid-template-columns: 1fr; } }
.ak-owasp-col { display: flex; flex-direction: column; }
.ak-owasp-col + .ak-owasp-col { border-left: 1px solid var(--ak-border); }
@media (max-width: 767.98px) { .ak-owasp-col + .ak-owasp-col { border-left: 0; } }
.ak-owasp-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  border-bottom: 1px solid var(--ak-border); text-decoration: none;
  color: inherit; min-height: 40px;
}
.ak-owasp-row:last-child { border-bottom: 0; }
.ak-owasp-row:hover { background: var(--ak-bg-3); }
.ak-owasp-rank { font-size: 11px; font-weight: 700; color: var(--ak-text-dim); width: 26px; flex: none; font-family: var(--ak-font-mono, monospace); }
.ak-owasp-name { flex: 1; font-size: 12px; color: var(--ak-text); min-width: 0; }
.ak-owasp-name small { color: var(--ak-text-dim); }
.ak-owasp-chip { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--ak-border); color: var(--ak-text-muted); }
.ak-owasp-chip--block { color: #EF4444; border-color: rgba(239,68,68,.35); }
.ak-owasp-chip--detect { color: #F59E0B; border-color: rgba(245,158,11,.35); }
.ak-owasp-chip--ok { color: #22C55E; border-color: rgba(34,197,94,.35); }
.ak-owasp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ak-text-dim); }
.ak-owasp-dot--ok { background: #22C55E; }
.ak-owasp-dot--warn { background: #F59E0B; }
.ak-owasp-dot--bad { background: #EF4444; }
.ak-owasp-dot--monitor { background: #64748B; }
.ak-owasp-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--ak-border); font-size: 10px; color: var(--ak-text-dim); }
.ak-owasp-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; margin-right: 4px; }
.ak-owasp-refresh { background: transparent; border: 0; color: var(--ak-text-muted); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ak-owasp-refresh:hover { color: var(--ak-text); }
.ak-owasp-refresh.is-spinning i { animation: ak-spin 0.7s linear infinite; }
@keyframes ak-spin { to { transform: rotate(360deg); } }
.ak-owasp-updated { font-size: 10px; color: var(--ak-text-dim); }
.ak-owasp-legend .dot.ak-owasp-dot--ok { background:#22C55E; }
.ak-owasp-legend .dot.ak-owasp-dot--warn { background:#F59E0B; }
.ak-owasp-legend .dot.ak-owasp-dot--bad { background:#EF4444; }
.ak-owasp-legend .dot.ak-owasp-dot--monitor { background:#64748B; }

/* ============================================================
   Layout & proportion (ASKARI-LAYOUT-PROPORTION-PLAN — L1).
   Equal-height panels, auto-fit grid, hint component, dense
   collapsible sections. Fixes dead space + text-over-border.
   ============================================================ */

/* Panels are flex columns (header / body / footer stack). They are sized by
   their CONTENT — never force-stretched in a plain Bootstrap row, because that
   inflates a sparse panel to match a data-heavy sibling (oversized empty box).
   Equal-height applies ONLY inside an explicit .ak-grid of peer tiles. */
.ak-panel { display: flex; flex-direction: column; }
.ak-panel > .card-body,
.ak-panel > .ak-panel-body { flex: 1 1 auto; }

/* Consistent vertical rhythm between stacked blocks — one spacing value so
   there's never "some gap / no gap". Applies to panels, hints, and section
   labels regardless of whether they sit in a row or stand alone. */
.ak-panel, .ak-hint, .ak-sections, .ak-grid { margin-bottom: var(--ak-space-4); }
/* A row already spaces its columns via gutters; don't double up with the
   panel's own margin when the panel is the column's direct child. */
.row > [class*="col-"] > .ak-panel:only-child,
.row > [class*="col-"] > .ak-hint:only-child { margin-bottom: 0; }
.row.g-0 > [class*="col-"] > .ak-panel { margin-bottom: var(--ak-space-3); }

/* Clear floated children (float-sm-right breadcrumbs, float-sm-end toolbars) in
   the non-flex block containers, so a collapsed height can't let a child overflow
   onto the footer. (.ak-panel / .ak-panel-header are flex — floats become flex
   items there, so they need no clearfix.) */
.content::after, .content-header::after, .card-header:not(.ak-panel-header)::after { content: ""; display: table; clear: both; }

/* Auto-fit tiling grid — replaces hand-picked col-md-* for peer cards.
   Columns reflow to fill the row; no orphan gap at any width. */
.ak-grid { display: grid; gap: var(--ak-space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.ak-grid--wide { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.ak-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ak-grid > .ak-panel { margin-bottom: 0; height: 100%; }

/* One hint component — replaces AdminLTE .callout. Block by default (safely
   wraps whatever the old callout held: paragraphs, lists, code grids), padded
   so text can never sit on a border, tokenised tint. Use .ak-hint--row for the
   compact icon-beside-text variant. */
.ak-hint {
  padding: 10px 13px; border-radius: var(--ak-radius);
  background: var(--ak-bg-3); border: 1px solid var(--ak-border);
  font-size: 12px; color: var(--ak-text-muted); line-height: 1.55;
  margin-bottom: var(--ak-space-3);
}
.ak-hint--row { display: flex; align-items: flex-start; gap: 9px; }
.ak-hint > i { flex: none; color: var(--ak-text-dim); font-size: 14px; }
.ak-hint p { margin: 0 0 6px; }
.ak-hint p:last-child { margin-bottom: 0; }
.ak-hint strong { color: var(--ak-text); font-weight: 600; }
.ak-hint a { color: var(--ak-info); text-decoration: underline; }
.ak-hint--info    { border-left: 3px solid var(--ak-info);    border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-hint--info > i { color: var(--ak-info); }
.ak-hint--success { border-left: 3px solid #22C55E; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-hint--success > i { color: #22C55E; }
.ak-hint--warning { border-left: 3px solid #F59E0B; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-hint--warning > i { color: #F59E0B; }
.ak-hint--danger  { border-left: 3px solid #EF4444; border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }
.ak-hint--danger > i { color: #EF4444; }

/* Dense collapsible section (generalised WAAP accordion). Collapsed rows
   keep a status chip so state is visible without opening. */
.ak-sections { border: 1px solid var(--ak-border); border-radius: var(--ak-radius); overflow: hidden; margin-bottom: var(--ak-space-3); }
.ak-section + .ak-section { border-top: 1px solid var(--ak-border); }
.ak-section-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; background: var(--ak-bg-2); border: 0; cursor: pointer;
  color: var(--ak-text); text-align: left; font-size: 13px; font-weight: 600;
}
.ak-section-head:hover { background: var(--ak-bg-3); }
.ak-section-head > .ak-section-icon { color: var(--ak-text-dim); font-size: 14px; flex: none; }
.ak-section-head > .ak-section-name { flex: 1; }
.ak-section-head > .ak-section-chip {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--ak-border); color: var(--ak-text-muted);
}
.ak-section-head > .ak-section-chip.is-on { color: #22C55E; border-color: rgba(34,197,94,.35); }
.ak-section-head > .ak-section-chip.is-off { color: var(--ak-text-dim); }
.ak-section-head > .ak-section-caret { color: var(--ak-text-dim); font-size: 12px; transition: transform .15s; }
.ak-section-head[aria-expanded="true"] > .ak-section-caret { transform: rotate(90deg); }
.ak-section-body { padding: 14px; border-top: 1px solid var(--ak-border); }

/* Content-width cap for form/settings pages — stops wide monitors
   stretching two-column forms into vast empty bands. Opt-in per page. */
.ak-page--form .container-fluid { max-width: 1180px; }

/* Table overflow containment — many tables aren't wrapped in .table-responsive,
   so a wide one used to push past its panel (and onto the footer) on narrow
   viewports. Let the panel body scroll the table horizontally instead. */
.ak-panel > .card-body,
.ak-panel > .ak-panel-body,
.ak-panel > .ak-panel-body--flush { overflow-x: auto; }
.ak-table { width: 100%; }

/* Belt-and-braces: nothing inside a panel may push the page wider than the
   viewport (the root cause of "div overflows to the footer/side"). */
.ak-panel, .ak-hint, .ak-sections { max-width: 100%; }
.content, .content-header { max-width: 100%; overflow-x: hidden; }

/* Dashboards: panels explicitly marked .h-100 (in intentional 8/4 or 6/6 splits)
   fill their already-stretched Bootstrap column, so paired panels are equal
   height with no dead space. ak-kpi tiles fill their grid cell likewise. */
.ak-panel.h-100 { height: 100%; margin-bottom: 0; }
.ak-grid > .ak-kpi, .ak-grid > .ak-kpi--compact { height: 100%; margin-bottom: 0; }
.ak-grid .ak-kpi--compact { display: flex; align-items: center; gap: 10px; }

/* Key/value table used in settings & install-guide side panels. */
.ak-kv td { vertical-align: top; }
.ak-kv td:first-child { white-space: nowrap; width: 160px; color: var(--ak-text-muted); }

/* Loaded-extensions chip list (system info). Replaces an invalid <pre><ul>
   whose text inherited the light background and rendered invisible. */
.ak-ext-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-ext-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 12px;
    font-family: var(--ak-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--ak-text);
    background: var(--ak-bg-3);
    border: 1px solid var(--ak-border-strong);
    border-radius: 6px;
}

/* ======================================================================
   Triage components — Security Events / IP Intelligence / Alerts & Reports
   redesign. Severity semantics, faceted filter bar, verdict banner and
   alert-state pills. All token-driven; nothing page-specific.
   ====================================================================== */

/* ---- Severity indicator (dot + label) --------------------------------- */
.ak-sev {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ak-text-muted);
  white-space: nowrap;
}
.ak-sev::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ak-text-dim);
}
.ak-sev--critical { color: var(--ak-critical); }
.ak-sev--critical::before { background: var(--ak-critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-critical) 22%, transparent); }
.ak-sev--high { color: var(--ak-high); }
.ak-sev--high::before { background: var(--ak-high); }
.ak-sev--medium { color: var(--ak-medium); }
.ak-sev--medium::before { background: var(--ak-medium); }
.ak-sev--low { color: var(--ak-low); }
.ak-sev--low::before { background: var(--ak-low); }

/* ---- Decision pills (Block / Challenge / Allow / Log) ------------------ */
.ak-decision {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--ak-radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--ak-border); color: var(--ak-text-muted); background: transparent;
}
.ak-decision--block     { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.ak-decision--challenge { color: #fcd34d; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); }
.ak-decision--allow     { color: #86efac; border-color: rgba(34,197,94,.45);  background: rgba(34,197,94,.10); }

/* ---- Faceted filter bar ------------------------------------------------ */
.ak-facetbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 12px 14px; margin-bottom: var(--ak-space-4);
  background: var(--ak-bg-2); border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-sm);
}
.ak-facet { display: flex; flex-direction: column; gap: 4px; }
.ak-facet > label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ak-text-dim); margin: 0;
}
.ak-facetbar .ak-facet-actions { display: flex; gap: 8px; align-items: center; }
.ak-facetbar .ak-facet-views { display: flex; gap: 8px; align-items: center; margin-left: auto; padding-left: 16px; border-left: 1px solid var(--ak-border); }

/* Active-filter chips (removable) */
.ak-filterchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ak-space-3); }
.ak-filterchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 11px; border-radius: var(--ak-radius-pill);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ak-brand-lilac); background: var(--ak-brand-soft);
  border: 1px solid color-mix(in srgb, var(--ak-brand-lilac) 35%, transparent);
}
.ak-filterchip i { font-size: 11px; opacity: 0.8; }
.ak-filterchip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: inherit; font-size: 12px; line-height: 1; text-decoration: none;
  background: rgba(255,255,255,0.06);
}
.ak-filterchip-x:hover { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; }

/* KPI tile in "active filter" state */
.ak-kpi--active { border-color: var(--ak-brand-lilac); box-shadow: var(--ak-ring); }

/* ---- Verdict banner (IP Intelligence hero) ---------------------------- */
.ak-verdict {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding: 20px 22px; margin-bottom: var(--ak-space-4);
  background: var(--ak-bg-1); border: 1px solid var(--ak-border);
  border-left-width: 4px; border-radius: var(--ak-radius); box-shadow: var(--ak-shadow);
}
.ak-verdict--clean { border-left-color: var(--ak-success); }
.ak-verdict--warn  { border-left-color: var(--ak-warning); }
.ak-verdict--bad   { border-left-color: var(--ak-danger); }
.ak-verdict-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; font-size: 22px; flex: 0 0 auto;
}
.ak-verdict--clean .ak-verdict-icon { color: var(--ak-success); background: rgba(34,197,94,.12); }
.ak-verdict--warn  .ak-verdict-icon { color: var(--ak-warning); background: rgba(245,158,11,.12); }
.ak-verdict--bad   .ak-verdict-icon { color: var(--ak-danger);  background: rgba(239,68,68,.12); }
.ak-verdict-main { flex: 1 1 260px; min-width: 0; }
.ak-verdict-ip {
  font-family: var(--ak-mono); font-size: 1.3rem; font-weight: 700;
  color: var(--ak-text); letter-spacing: -0.01em; word-break: break-all;
}
.ak-verdict-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ak-verdict--clean .ak-verdict-label { color: var(--ak-success); }
.ak-verdict--warn  .ak-verdict-label { color: var(--ak-warning); }
.ak-verdict--bad   .ak-verdict-label { color: var(--ak-danger); }
.ak-verdict-sub { font-size: var(--fs-sm); color: var(--ak-text-muted); margin-top: 4px; }
.ak-verdict-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.ak-verdict-fact { min-width: 90px; }
.ak-verdict-fact dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-text-dim); margin: 0 0 2px; }
.ak-verdict-fact dd { font-size: var(--fs-body); font-weight: 650; color: var(--ak-text); margin: 0; font-variant-numeric: tabular-nums; }
.ak-verdict-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

/* Definition grid used for network/whois facts */
.ak-factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; margin: 0; }
.ak-factgrid dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-text-dim); margin: 0 0 3px; }
.ak-factgrid dd { font-size: var(--fs-body); color: var(--ak-text); margin: 0; word-break: break-word; }

/* ---- Alert status pills ------------------------------------------------ */
.ak-astate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--ak-radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--ak-border); color: var(--ak-text-muted);
}
.ak-astate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ak-astate--open         { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.ak-astate--acknowledged { color: #fcd34d; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); }
.ak-astate--resolved     { color: #86efac; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10); }

/* ---- Friendly empty state ---------------------------------------------- */
.ak-empty { text-align: center; padding: 44px 24px; color: var(--ak-text-muted); }
.ak-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 14px;
  font-size: 22px; color: var(--ak-success); background: rgba(34,197,94,.10);
}
.ak-empty-icon--muted { color: var(--ak-text-dim); background: var(--ak-bg-3); }
.ak-empty-title { font-size: var(--fs-h2); font-weight: 650; color: var(--ak-text); margin-bottom: 4px; }
.ak-empty-sub { font-size: var(--fs-sm); max-width: 420px; margin: 0 auto 14px; }

/* Card-header toolbars: real gaps between action buttons instead of the
   ~4px whitespace text nodes (headers now carry up to five actions). */
.card-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Monospace data cells (IPs, rule IDs) */
.ak-mono { font-family: var(--ak-mono); font-size: 12.5px; }

/* ======================================================================
   Security Analyst — posture gauge, explainable risk drivers, action
   center, and share bars. Token-driven, reusable on any posture page.
   ====================================================================== */

/* Circular score gauge (pure SVG, stroke driven by inline dasharray). */
.ak-gauge { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.ak-gauge svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ak-gauge-track { fill: none; stroke: var(--ak-bg-3); stroke-width: 10; }
.ak-gauge-arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s var(--ak-ease); }
.ak-gauge--success .ak-gauge-arc { stroke: var(--ak-success); }
.ak-gauge--info    .ak-gauge-arc { stroke: var(--ak-info); }
.ak-gauge--warning .ak-gauge-arc { stroke: var(--ak-warning); }
.ak-gauge--danger  .ak-gauge-arc { stroke: var(--ak-danger); }
.ak-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ak-gauge-num { font-size: 2rem; font-weight: 750; line-height: 1; letter-spacing: -0.02em; color: var(--ak-text); font-variant-numeric: tabular-nums; }
.ak-gauge-cap { font-size: var(--fs-label); color: var(--ak-text-dim); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }

/* Risk drivers — each factor's contribution to the score, with a share bar. */
.ak-driver { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ak-border); }
.ak-driver:last-child { border-bottom: 0; }
.ak-driver-label { flex: 1 1 auto; font-size: var(--fs-sm); color: var(--ak-text); min-width: 0; }
.ak-driver-label small { display: block; color: var(--ak-text-dim); }
.ak-driver-bar { flex: 0 0 120px; height: 6px; border-radius: 999px; background: var(--ak-bg-3); overflow: hidden; }
.ak-driver-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ak-warning); }
.ak-driver--critical .ak-driver-bar > span { background: var(--ak-danger); }
.ak-driver--low .ak-driver-bar > span { background: var(--ak-info); }
.ak-driver-pts { flex: 0 0 44px; text-align: right; font-weight: 700; font-size: var(--fs-sm); color: var(--ak-text); font-variant-numeric: tabular-nums; }

/* Action center — recommendation + one-click remediation link. */
.ak-action { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ak-border); }
.ak-action:last-child { border-bottom: 0; }
.ak-action-body { flex: 1 1 auto; font-size: var(--fs-sm); color: var(--ak-text); min-width: 0; }
.ak-action .ak-sev { flex: 0 0 92px; }
.ak-action-cta { flex: 0 0 auto; }

/* Uneven-column fix: a column whose last card stretches to the row baseline,
   so side-by-side columns always end flush — no blank space under the
   shorter column. (BS5 .card is a flex column; the body absorbs the growth
   and any .card-footer stays pinned to the bottom.) */
.ak-stretch-col { display: flex; flex-direction: column; }
.ak-stretch-col > .card:last-child { flex: 1 1 auto; }
/* Form-wrapped card (col > form > card): stretch through the wrapper so the
   card footer (submit button) pins to a flush baseline across columns. */
.ak-stretch-col > form:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.ak-stretch-col > form:last-child > .card { flex: 1 1 auto; }

/* Equal-height card rows: an h-100 card fills 100% of its column, which
   pushes its 16px bottom margin OUTSIDE the column — the next section then
   starts flush against the row (zero gap). Move the gap onto the row itself
   so the rhythm stays a uniform 16px. */
.row > [class*="col-"] > .card.h-100 { margin-bottom: 0 !important; }
.row:has(> [class*="col-"] > .card.h-100) { margin-bottom: var(--ak-space-4); }
/* Stacked (mobile) fallback: gutter-y restores the vertical gap between
   wrapped columns of equal-height rows. */
@media (max-width: 991.98px) {
  .row:has(> [class*="col-"] > .card.h-100) { row-gap: var(--ak-space-4); }
}

/* Share bars inside ranking tables (threat mix, top IPs, OWASP). */
.ak-share { display: flex; align-items: center; gap: 10px; }
.ak-share-bar { flex: 1 1 auto; height: 5px; border-radius: 999px; background: var(--ak-bg-3); overflow: hidden; min-width: 40px; }
.ak-share-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ak-brand-lilac); }
.ak-share-num { flex: 0 0 auto; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ak-text); }

/* Row link affordance for drill-down tables */
.ak-table tbody tr td a.ak-iplink { color: var(--ak-accent); text-decoration: none; }
.ak-table tbody tr td a.ak-iplink:hover { text-decoration: underline; }

/* ==========================================================================
   User-management UI redesign (2026-07): identity cells, row-action menus
   ========================================================================== */
.ak-id-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.ak-avatar-sm { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; font-size: 12px; letter-spacing: .02em; color: #fff; flex: 0 0 34px; text-transform: uppercase; }
.ak-id-name { font-weight: 600; line-height: 1.25; color: var(--ak-text); }
.ak-id-sub { font-size: 12px; line-height: 1.25; opacity: .62; }
.ak-id-badges { margin-top: 2px; }
.ak-row-actions .dropdown-menu { min-width: 230px; padding: 6px 0; }
.ak-row-actions form { margin: 0; }
.ak-row-actions .dropdown-item { font-size: 13px; padding: 7px 16px; }
.ak-row-actions .dropdown-item i { width: 18px; text-align: center; margin-right: 6px; opacity: .75; }
.ak-row-actions .dropdown-toggle::after { margin-left: 8px; }
.ak-cell-muted { opacity: .6; font-size: 12px; }
.ak-table td { vertical-align: middle; }
.ak-pending-panel { border-left: 3px solid #06B6D4; }

/* ---- Map surface (Leaflet — log-details / ip-lookup / ip-intelligence) --- */
.ak-map {
  width: 100%;
  height: 340px;
  border-radius: var(--ak-radius, 10px);
  overflow: hidden;
  background: var(--ak-surface-2, #10131c);
}
.ak-map .leaflet-container { background: var(--ak-surface-2, #10131c); }

/* ---- Inline code + inline icon (record/detail pages) -------------------- */
.ak-inline-code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  word-break: break-all;
}
.ak-inline-icon { width: 16px; height: 16px; vertical-align: -3px; }