/* ============================================================
   Enterprise Reporting Portal - UI Foundation v2
   Modern command-center shell, shared components, dark mode and
   RBAC-aware navigation states. Page-specific styles continue
   below this foundation block.
   ============================================================ */

/* -- CUSTOM PROPERTIES --------------------------------------- */
:root {
  /* Shell */
  --sidebar-bg:               #0D1B2F;
  --sidebar-bg-2:             #102746;
  --sidebar-text:             #B7C7DA;
  --sidebar-text-strong:      #F8FAFC;
  --sidebar-active-bg:        rgba(59, 130, 246, .20);
  --sidebar-active-text:      #FFFFFF;
  --sidebar-hover-bg:         rgba(255,255,255,.075);
  --sidebar-group-label:      #7F92AA;
  --sidebar-width:            280px;
  --sidebar-collapsed-width:  76px;
  --sidebar-transition:       width .22s ease, margin-left .22s ease;

  --topbar-height:            76px;
  --topbar-bg:                rgba(255,255,255,.92);
  --topbar-text:              #0F172A;

  /* Content */
  --color-content-bg:         #F3F6FB;
  --color-surface-2:          #F8FAFC;
  --color-card-bg:            #FFFFFF;
  --color-card-bg-soft:       #FBFCFE;
  --color-surface:            #FFFFFF;
  --color-surface-secondary:  #F8FAFC;
  --color-border:             #E2E8F0;
  --color-border-hover:       #CBD5E1;

  /* Typography */
  --color-text-primary:       #0F172A;
  --color-text-secondary:     #526174;
  --color-text-muted:         #8793A5;
  --color-text:               #0F172A;

  /* Brand */
  --color-accent:             #2563EB;
  --color-primary:            #2563EB;
  --color-accent-hover:       #1D4ED8;
  --color-accent-soft:        #EFF6FF;
  --color-accent-ring:        rgba(37,99,235,.18);

  /* RAG status */
  --color-rag-green:          #16A34A;
  --color-rag-green-bg:       #DCFCE7;
  --color-rag-amber:          #D97706;
  --color-rag-amber-bg:       #FEF3C7;
  --color-rag-red:            #DC2626;
  --color-rag-red-bg:         #FEE2E2;
  --color-rag-gray:           #64748B;
  --color-rag-gray-bg:        #F1F5F9;
  --color-rag-purple:         #7C3AED;
  --color-rag-purple-bg:      #EDE9FE;

  /* Form / table */
  --color-input-bg:           #FFFFFF;
  --color-table-header-bg:    #F8FAFC;
  --color-table-stripe:       #FBFCFE;

  /* Sector accents */
  --sector-ciso:              #2563EB;
  --sector-ict:               #2563EB;
  --sector-itsec:             #0EA5E9;
  --sector-it:                #6366F1;
  --sector-risk:              #DC2626;
  --sector-physical:          #8B5CF6;
  --sector-compliance:        #16A34A;
  --sector-reporting:         #38BDF8;
  --sector-dpo:               #F59E0B;

  /* Shadows */
  --shadow-xs:                0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:                0 1px 3px rgba(15,23,42,.07);
  --shadow-md:                0 8px 22px rgba(15,23,42,.08);
  --shadow-lg:                0 18px 44px rgba(15,23,42,.14);

  /* Radius */
  --radius-sm:                8px;
  --radius-md:                10px;
  --radius-lg:                16px;
  --radius-xl:                22px;

  /* Font */
  --font-sans:                'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:                'SFMono-Regular', 'Cascadia Code', 'Courier New', monospace;
}

[data-theme="dark"] {
  --topbar-bg:                rgba(15,23,42,.92);
  --topbar-text:              #F8FAFC;
  --color-content-bg:         #0B1120;
  --color-surface-2:          #111A2D;
  --color-card-bg:            #111827;
  --color-card-bg-soft:       #0F172A;
  --color-surface:            #111827;
  --color-surface-secondary:  #162033;
  --color-border:             #263244;
  --color-border-hover:       #3A465A;
  --color-text-primary:       #F1F5F9;
  --color-text-secondary:     #B6C2D2;
  --color-text-muted:         #7C8AA0;
  --color-text:               #F1F5F9;
  --color-input-bg:           #0F172A;
  --color-table-header-bg:    #162033;
  --color-table-stripe:       #101827;
  --color-accent-soft:        rgba(37,99,235,.16);
  --color-rag-green-bg:       rgba(22,163,74,.16);
  --color-rag-amber-bg:       rgba(217,119,6,.18);
  --color-rag-red-bg:         rgba(220,38,38,.18);
  --color-rag-gray-bg:        rgba(148,163,184,.12);
  --color-rag-purple-bg:      rgba(124,58,237,.18);
  --shadow-xs:                0 1px 2px rgba(0,0,0,.18);
  --shadow-sm:                0 1px 4px rgba(0,0,0,.24);
  --shadow-md:                0 10px 28px rgba(0,0,0,.34);
  --shadow-lg:                0 22px 54px rgba(0,0,0,.48);
}

/* -- BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 32rem),
    linear-gradient(180deg, var(--color-content-bg), var(--color-content-bg));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: none; }
img { max-width: 100%; }
code, pre { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-muted) !important; }
.small, small { line-height: 1.45; }

/* -- LAYOUT --------------------------------------------------- */
.portal-layout { min-height: 100vh; display: block; }
.portal-main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--sidebar-transition);
  min-width: 0;
}
.sidebar-collapsed .portal-main { margin-left: var(--sidebar-collapsed-width); }
.portal-content {
  padding: 1.35rem 1.5rem 2rem;
  min-width: 0;
}
.portal-content-inner {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
}

/* -- TOPBAR --------------------------------------------------- */
.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 820;
  min-height: var(--topbar-height);
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 10px 28px rgba(15,23,42,.045);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 1.35rem;
}
.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .85rem;
}
.topbar-page-context { min-width: 0; }
.topbar-eyebrow {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.topbar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: .7;
}
.topbar-title-row { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.topbar-title {
  margin: .08rem 0 0;
  color: var(--color-text-primary);
  font-size: 1.18rem;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  flex: 0 0 auto;
}
.topbar-breadcrumb { overflow: hidden; max-width: 760px; }
.topbar-breadcrumb .breadcrumb {
  font-size: .74rem;
  color: var(--color-text-muted);
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); opacity: .65; }
.topbar-breadcrumb .breadcrumb-item a { color: var(--color-text-secondary); }
.topbar-breadcrumb .breadcrumb-item.active { color: var(--color-text-muted); }
.topbar-right {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
}
.topbar-run-chip {
  align-items: center;
  gap: .42rem;
  height: 34px;
  padding: 0 .72rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-card-bg-soft);
  font-size: .76rem;
  font-weight: 700;
}
.topbar-btn {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.topbar-btn:hover,
.topbar-btn:focus-visible {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.28);
  color: var(--color-accent);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.topbar-btn-wrap { position: relative; }
.topbar-avatar {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(37,99,235,.18);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), #60A5FA);
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-xs);
}
.topbar-avatar:hover { border-color: rgba(37,99,235,.42); }
.topbar-avatar::after { display: none !important; }
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 50%;
}
.badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: .64rem;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  border: 2px solid var(--topbar-bg);
}
.badge-danger { background: var(--color-rag-red); }
.topbar-popover-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 24px));
  max-height: 540px;
  overflow: hidden;
  flex-direction: column;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1080;
}
.topbar-popover-header,
.topbar-popover-footer {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.topbar-popover-footer { border-top: 1px solid var(--color-border); border-bottom: 0; }
.topbar-popover-list { overflow-y: auto; flex: 1; max-height: 440px; }
.notif-item:hover { background: var(--color-surface-2) !important; }

/* -- SIDEBAR -------------------------------------------------- */
.portal-sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(37,99,235,.10), transparent 18rem),
    linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--sidebar-transition), transform .25s ease;
  z-index: 900;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06), 10px 0 32px rgba(15,23,42,.16);
}
.portal-sidebar::-webkit-scrollbar { width: 6px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.sidebar-collapsed .portal-sidebar { width: var(--sidebar-collapsed-width); }
.sidebar-brand {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: .82rem .9rem .72rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: .78rem;
  width: 100%;
  min-width: 0;
  color: var(--sidebar-text-strong);
}
.sidebar-brand-link:hover { color: #FFFFFF; text-decoration: none; }
.sidebar-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
  overflow: hidden;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sidebar-logo i { font-size: 1.15rem; }
.sidebar-brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-name {
  color: #FFFFFF;
  font-size: .96rem;
  font-weight: 850;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-brand-subtitle {
  margin-top: .18rem;
  color: rgba(226,232,240,.62);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.sidebar-nav { flex: 1; padding: .85rem .62rem .65rem; }
.nav-group { margin-bottom: .72rem; }
.nav-group-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .72rem .32rem;
  white-space: nowrap;
  overflow: hidden;
}
.nav-group-icon {
  font-size: .95rem;
  flex: 0 0 auto;
  color: var(--sidebar-group-label);
}
.nav-group-label {
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .075em;
  color: var(--sidebar-group-label);
  transition: opacity .15s ease;
  white-space: nowrap;
}
.nav-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .68rem;
  min-height: 42px;
  padding: .55rem .72rem;
  color: var(--sidebar-text);
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: #FFFFFF;
  text-decoration: none;
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-color: rgba(96,165,250,.28);
  box-shadow: inset 3px 0 0 var(--sector-accent, #60A5FA);
}
.nav-item.active .nav-item-icon { color: var(--sector-accent, #93C5FD); }
.nav-item-icon {
  font-size: 1.02rem;
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(226,232,240,.72);
}
.nav-item-label { transition: opacity .15s ease; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  margin-left: auto;
  background: var(--color-rag-red);
  color: #FFFFFF;
  font-size: .64rem;
  font-weight: 850;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex: 0 0 auto;
}
.sidebar-footer {
  padding: .75rem .62rem .85rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: .6rem;
}
.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .48rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  min-width: 0;
}
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(96,165,250,.22);
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 850;
  flex: 0 0 auto;
}
.sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.18; }
.sidebar-user-name { color: #FFFFFF; font-size: .76rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .18rem;
  color: rgba(226,232,240,.66);
  font-size: .64rem;
  font-weight: 750;
  white-space: nowrap;
}
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .52rem .7rem;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--sidebar-text);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 12px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.09); color: #FFFFFF; border-color: rgba(255,255,255,.14); }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.58);
  z-index: 850;
  backdrop-filter: blur(2px);
}
.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: .55rem; padding-right: .55rem; }
.sidebar-collapsed .sidebar-brand-link { justify-content: center; gap: 0; }
.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .nav-group-label,
.sidebar-collapsed .nav-item-label,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .sidebar-user-meta,
.sidebar-collapsed .sidebar-collapse-btn .nav-item-label { display: none; }
.sidebar-collapsed .nav-group-header { justify-content: center; padding: .5rem 0 .25rem; }
.sidebar-collapsed .nav-group-icon { width: 42px; text-align: center; }
.sidebar-collapsed .sidebar-nav { padding-left: .48rem; padding-right: .48rem; }
.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; box-shadow: none; }
.sidebar-collapsed .nav-item-icon { width: 40px; height: 34px; }
.sidebar-collapsed .sidebar-user-card { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .sidebar-collapse-btn { padding-left: 0; padding-right: 0; }

/* -- PAGE HEADER --------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.page-header-content { min-width: 0; }
.page-title {
  font-size: 1.28rem;
  font-weight: 850;
  letter-spacing: -.025em;
  color: var(--color-text-primary);
  margin: 0 0 .2rem 0;
}
.page-subtitle {
  font-size: .86rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.page-header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 0 0 auto; }
.section-heading {
  font-size: .92rem;
  font-weight: 850;
  color: var(--color-text-secondary);
  margin: 1.35rem 0 .75rem;
  text-transform: uppercase;
  letter-spacing: .045em;
}

/* -- CARDS / DASHBOARD COMPONENTS ---------------------------- */
.portal-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.portal-card:hover { border-color: var(--color-border-hover); }
.portal-card-header {
  padding: 1rem 1.1rem .82rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.portal-card-title {
  font-size: .98rem;
  font-weight: 850;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -.01em;
}
.portal-card-subtitle { font-size: .78rem; color: var(--color-text-muted); margin: .18rem 0 0; }
.portal-card-body { padding: 1.1rem; }
.portal-card-footer { padding: .85rem 1.1rem; border-top: 1px solid var(--color-border); background: var(--color-card-bg-soft); }
.dashboard-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dashboard-span-3 { grid-column: span 3; }
.dashboard-span-4 { grid-column: span 4; }
.dashboard-span-6 { grid-column: span 6; }
.dashboard-span-8 { grid-column: span 8; }
.dashboard-span-12 { grid-column: span 12; }

.summary-card,
.metric-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .32rem;
  min-height: 112px;
  color: var(--color-text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.summary-card-link:hover,
a.summary-card:hover,
a.metric-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text-primary); }
.summary-card-icon,
.metric-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  margin-bottom: .1rem;
}
.summary-card-value,
.metric-card-value { font-size: 1.75rem; font-weight: 850; line-height: 1; letter-spacing: -.03em; }
.summary-card-label,
.metric-card-label { font-size: .78rem; color: var(--color-text-secondary); font-weight: 650; }
.summary-card-hint,
.metric-card-hint { font-size: .72rem; color: var(--color-text-muted); }
.summary-card-warning { border-color: rgba(217,119,6,.36); }
.summary-card-warning .summary-card-icon { color: var(--color-rag-amber); background: var(--color-rag-amber-bg); }
.summary-card-danger { border-color: rgba(220,38,38,.36); }
.summary-card-danger .summary-card-icon { color: var(--color-rag-red); background: var(--color-rag-red-bg); }
.summary-card-success { border-color: rgba(22,163,74,.36); }
.summary-card-success .summary-card-icon { color: var(--color-rag-green); background: var(--color-rag-green-bg); }

.sector-card {
  display: flex;
  align-items: center;
  gap: .78rem;
  padding: 1rem 1.05rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--sector-card-color, var(--color-accent));
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease;
}
.sector-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--color-text-primary); text-decoration: none; }
.sector-card-icon { font-size: 1.45rem; color: var(--sector-card-color, var(--color-accent)); flex: 0 0 auto; }
.sector-card-label { flex: 1; font-weight: 750; min-width: 0; }
.sector-card-arrow { color: var(--color-text-muted); font-size: .9rem; }

.filter-bar,
.ops-filter-bar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.info-banner,
.portal-alert-soft {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-text-secondary);
}

/* -- TABLES --------------------------------------------------- */
.table { color: var(--color-text-primary); --bs-table-color: var(--color-text-primary); --bs-table-border-color: var(--color-border); }
.table > :not(caption) > * > * { border-bottom-color: var(--color-border); }
.table-hover tbody tr:hover > * { background: rgba(37,99,235,.045); color: var(--color-text-primary); }
.portal-table {
  width: 100%;
  margin: 0;
  font-size: .86rem;
  border-collapse: separate;
  border-spacing: 0;
}
.portal-table thead th,
.table thead.table-light th,
.table-light th {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 850;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .035em;
  padding: .72rem .88rem;
  border-bottom: 1px solid var(--color-border) !important;
  white-space: nowrap;
}
.portal-table tbody tr:nth-child(even) { background: var(--color-table-stripe); }
.portal-table tbody tr:hover { background: rgba(37,99,235,.055); }
.portal-table tbody td {
  padding: .72rem .88rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--color-border-hover) transparent; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--color-border) !important;
  background: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--color-text-secondary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 9px !important; border: 1px solid transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--color-accent-soft) !important; color: var(--color-accent) !important; border-color: rgba(37,99,235,.22) !important; }

/* -- BADGES / STATUS ----------------------------------------- */
.status-badge,
.p-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .24rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.status-approved,
.status-pass { background: var(--color-rag-green-bg); color: var(--color-rag-green); }
.status-pending,
.status-partial { background: var(--color-rag-amber-bg); color: var(--color-rag-amber); }
.status-rejected,
.status-fail { background: var(--color-rag-red-bg); color: var(--color-rag-red); }
.status-draft,
.status-missing,
.status-neutral,
.status-not-tested { background: var(--color-rag-gray-bg); color: var(--color-rag-gray); }
.status-overdue { background: var(--color-rag-red-bg); color: var(--color-rag-red); }
.status-purple { background: var(--color-rag-purple-bg); color: var(--color-rag-purple); }
.badge.bg-light { background: var(--color-rag-gray-bg) !important; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border); }
.badge.bg-success { background: var(--color-rag-green) !important; }
.badge.bg-warning { background: var(--color-rag-amber) !important; }
.badge.bg-danger { background: var(--color-rag-red) !important; }
.badge.bg-secondary { background: var(--color-rag-gray) !important; }

/* -- FORMS / BUTTONS ----------------------------------------- */
.form-label { font-weight: 750; font-size: .79rem; color: var(--color-text-primary); margin-bottom: .32rem; }
.form-control,
.form-select,
.form-check-input {
  background-color: var(--color-input-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  font-size: .875rem;
  border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--color-input-bg);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}
/* Keep native checkbox/radio checked state visible while focused.
   The previous shared focus rule reset the background colour, so a newly
   checked control only looked selected after focus moved to another field. */
.form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.form-check-input:checked,
.form-check-input:checked:focus {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-text { font-size: .74rem; color: var(--color-text-secondary); margin-top: .25rem; }
.form-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.35rem;
  flex-wrap: wrap;
}
.btn { border-radius: 10px; font-weight: 750; }
.btn-sm { border-radius: 9px; font-weight: 750; }
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
}
.btn-primary:hover,
.btn-primary:focus { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-outline-primary { color: var(--color-accent); border-color: rgba(37,99,235,.34); }
.btn-outline-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; }
.btn-outline-secondary { color: var(--color-text-secondary); border-color: var(--color-border-hover); }
.btn-outline-secondary:hover { color: var(--color-text-primary); background: var(--color-surface-2); border-color: var(--color-border-hover); }
.btn-link { color: var(--color-accent); font-weight: 750; text-decoration: none; }
.btn-link:hover { color: var(--color-accent-hover); text-decoration: none; }
.dropdown-menu,
.modal-content {
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dropdown-item { color: var(--color-text-primary); }
.dropdown-item:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.dropdown-header { color: var(--color-text-secondary); font-weight: 800; }
.dropdown-divider,
.modal-header,
.modal-footer { border-color: var(--color-border); }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); }

/* -- EMPTY STATES / DETAILS ---------------------------------- */
.empty-state { text-align: center; padding: 3.5rem 2rem; color: var(--color-text-secondary); }
.empty-state-icon { font-size: 2.7rem; display: block; margin-bottom: .85rem; opacity: .35; }
.empty-state-title { font-size: 1.05rem; font-weight: 850; color: var(--color-text-primary); margin-bottom: .35rem; }
.empty-state-text { font-size: .86rem; max-width: 380px; margin: 0 auto; }
.avatar-circle-lg {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-accent), #60A5FA);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 850;
  color: #FFFFFF;
  margin: 0 auto;
}
.detail-row { display: flex; justify-content: space-between; padding: .58rem 0; border-bottom: 1px solid var(--color-border); font-size: .875rem; gap: 1rem; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--color-text-secondary); font-weight: 750; }
.detail-value { color: var(--color-text-primary); text-align: right; }
.alert-flash { border-radius: var(--radius-lg); margin-bottom: 1rem; font-size: .875rem; box-shadow: var(--shadow-sm); }
.alert { border-radius: var(--radius-md); }

/* -- LOGIN PAGE ---------------------------------------------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 24rem),
    linear-gradient(135deg, #0B1120, #13213A 48%, #0F172A);
}
[data-theme="light"] .login-body {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 24rem),
    linear-gradient(135deg, #EAF1FB, #F7FAFC);
}
.login-wrapper { width: 100%; max-width: 430px; padding: 1rem; position: relative; }
.login-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 2.45rem 2rem;
  box-shadow: var(--shadow-lg);
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-logo {
  width: 62px;
  height: 62px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-accent), #60A5FA);
  color: #FFFFFF;
  box-shadow: 0 16px 34px rgba(37,99,235,.26);
  font-size: 1.6rem;
}
.login-title { font-size: 1.35rem; font-weight: 850; color: var(--color-text-primary); margin: 0 0 .25rem; }
.login-subtitle { font-size: .88rem; color: var(--color-text-secondary); margin: 0; }
.login-theme-toggle {
  position: absolute;
  top: 0;
  right: 1rem;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
[data-theme="light"] .login-theme-toggle { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.08); color: #334155; }

/* -- DARK MODE BOOTSTRAP SAFETY ------------------------------ */
[data-theme="dark"] .bg-white { background-color: var(--color-card-bg) !important; }
[data-theme="dark"] .bg-light { background-color: var(--color-surface-2) !important; }
[data-theme="dark"] .text-dark { color: var(--color-text-primary) !important; }
[data-theme="dark"] .table-light { --bs-table-bg: var(--color-table-header-bg); --bs-table-color: var(--color-text-secondary); }
[data-theme="dark"] .modal-backdrop.show { opacity: .72; }

/* -- RESPONSIVE ---------------------------------------------- */
@media (max-width: 1199.98px) {
  .dashboard-span-3 { grid-column: span 6; }
  .dashboard-span-4 { grid-column: span 6; }
  .dashboard-span-6,
  .dashboard-span-8 { grid-column: span 12; }
}
@media (max-width: 991.98px) {
  .topbar-breadcrumb { display: none; }
  .topbar-eyebrow { font-size: .64rem; }
  .topbar-title { font-size: 1.05rem; }
}
@media (max-width: 767.98px) {
  :root { --topbar-height: 68px; }
  .portal-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
    width: var(--sidebar-width) !important;
  }
  .portal-sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay.mobile-open { display: block; }
  .portal-main,
  .sidebar-collapsed .portal-main { margin-left: 0; }
  .portal-content { padding: 1rem .85rem 1.5rem; }
  .portal-topbar { padding: .6rem .85rem; gap: .65rem; }
  .topbar-title-icon,
  .topbar-eyebrow { display: none; }
  .topbar-right { gap: .35rem; }
  .topbar-btn,
  .topbar-avatar { width: 36px; height: 36px; }
  .page-header { padding: .9rem; border-radius: 16px; }
  .page-header-actions { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-span-3,
  .dashboard-span-4,
  .dashboard-span-6,
  .dashboard-span-8,
  .dashboard-span-12 { grid-column: span 1; }
}
@media (max-width: 575.98px) {
  .topbar-title { max-width: 46vw; }
  .topbar-run-chip { display: none !important; }
  .portal-card-header { padding: .9rem; }
  .portal-card-body { padding: .9rem; }
  .filter-bar, .ops-filter-bar { padding: .85rem; }
}

/* -- PRINT ---------------------------------------------------- */
@media print {
  .portal-sidebar,
  .portal-topbar,
  .sidebar-overlay,
  .form-actions,
  .btn { display: none !important; }
  .portal-main { margin-left: 0 !important; }
  .portal-content { padding: 0 !important; }
  .portal-card,
  .page-header { box-shadow: none; border: 1px solid #CCCCCC; }
  body { background: #FFFFFF; }
}

/* ── Toggle switch checkboxes (portal-wide) ──────────────────── */
.form-check.p-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    user-select: none;
    background: var(--color-card-bg);
    margin: 0;
}
.form-check.p-toggle:hover {
    background: rgba(46,117,182,.05);
    border-color: var(--color-accent);
}
.form-check.p-toggle.checked {
    background: rgba(220,38,38,.06);
    border-color: rgba(220,38,38,.4);
}
/* Hide native checkbox — use custom toggle pill */
.form-check.p-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 34px;
    height: 18px;
    border-radius: 10px;
    border: 2px solid var(--color-border);
    background: var(--color-border);
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
}
.form-check.p-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.form-check.p-toggle input[type="checkbox"]:checked {
    background: #DC2626;
    border-color: #DC2626;
}
.form-check.p-toggle input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}
/* Green variant for controls */
.form-check.p-toggle-green input[type="checkbox"]:checked {
    background: var(--color-rag-green);
    border-color: var(--color-rag-green);
}
.form-check.p-toggle-green.checked {
    background: rgba(22,163,74,.06);
    border-color: rgba(22,163,74,.4);
}
.form-check.p-toggle .form-check-label {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}
/* Dark mode adjustments */
[data-theme="dark"] .form-check.p-toggle { background: var(--color-card-bg); }
[data-theme="dark"] .form-check.p-toggle:hover { background: rgba(59,130,246,.08); }
[data-theme="dark"] .form-check.p-toggle.checked { background: rgba(220,38,38,.1); }

/* ── VULNERABILITY REGISTER LAYOUT AND CHART ───────────────── */
/* Vulnerability register table: compact, predictable table layout.
   The long server purpose/description is hidden from the main row and shown in the expandable details row. */
.vuln-table-wrap{max-width:100%;overflow-x:auto;overflow-y:visible}
.vuln-main-table{table-layout:fixed!important;width:100%!important;max-width:none!important;font-size:.82rem;border-collapse:collapse}
.vuln-main-table.is-backlog{min-width:1260px}
.vuln-main-table.is-period{min-width:1160px}
.vuln-main-table th,.vuln-main-table td{box-sizing:border-box;vertical-align:middle;min-width:0}
.vuln-main-table th{white-space:nowrap;font-size:.76rem;padding:.56rem .44rem}
.vuln-main-table td{padding:.54rem .44rem}
.vuln-main-table.is-backlog col.vuln-col-asset{width:14.5%!important}
.vuln-main-table.is-backlog col.vuln-col-vulnerability{width:36.5%!important}
.vuln-main-table.is-backlog col.vuln-col-period{width:5%!important}
.vuln-main-table.is-backlog col.vuln-col-risk{width:18%!important}
.vuln-main-table.is-backlog col.vuln-col-state{width:9%!important}
.vuln-main-table.is-backlog col.vuln-col-context{width:8%!important}
.vuln-main-table.is-backlog col.vuln-col-actions{width:9%!important}
.vuln-main-table.is-period col.vuln-col-asset{width:15.5%!important}
.vuln-main-table.is-period col.vuln-col-vulnerability{width:40.5%!important}
.vuln-main-table.is-period col.vuln-col-risk{width:18%!important}
.vuln-main-table.is-period col.vuln-col-state{width:9%!important}
.vuln-main-table.is-period col.vuln-col-context{width:8%!important}
.vuln-main-table.is-period col.vuln-col-actions{width:9%!important}
.vuln-main-table.is-backlog thead th:nth-child(1),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(1){width:14.5%!important;max-width:14.5%!important}
.vuln-main-table.is-backlog thead th:nth-child(2),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(2){width:36.5%!important;max-width:36.5%!important}
.vuln-main-table.is-backlog thead th:nth-child(3),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(3){width:5%!important;max-width:5%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(4),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(4){width:18%!important;max-width:18%!important}
.vuln-main-table.is-backlog thead th:nth-child(5),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(5){width:9%!important;max-width:9%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(6),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(6){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(7),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(7){width:9%!important;max-width:9%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(1),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(1){width:15.5%!important;max-width:15.5%!important}
.vuln-main-table.is-period thead th:nth-child(2),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(2){width:40.5%!important;max-width:40.5%!important}
.vuln-main-table.is-period thead th:nth-child(3),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(3){width:18%!important;max-width:18%!important}
.vuln-main-table.is-period thead th:nth-child(4),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(4){width:9%!important;max-width:9%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(5),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(5){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(6),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(6){width:9%!important;max-width:9%!important;text-align:center}
.vuln-asset-cell,.vuln-server-cell,.vuln-title-cell{overflow:hidden!important;overflow-wrap:normal!important;word-break:normal!important;min-width:0!important;max-width:0}
.vuln-asset-cell>*,.vuln-server-cell>*,.vuln-title-cell>*{min-width:0;max-width:100%}
.vuln-asset-name{display:block;max-width:100%;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis;line-height:1.25;font-weight:700;margin-bottom:.16rem}
.vuln-title-main{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important;max-width:100%;line-height:1.28;font-weight:600}
.vuln-asset-line{display:flex;align-items:center;gap:.34rem;max-width:100%;min-width:0;overflow:hidden;white-space:nowrap}
.vuln-asset-line+.vuln-asset-line{margin-top:.18rem}
.vuln-asset-meta,.vuln-title-subline{display:block;max-width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.vuln-asset-line .vuln-asset-meta{display:inline-block;min-width:0;max-width:60%}
.vuln-asset-meta{font-size:.68rem;color:var(--color-text-secondary);line-height:1.18}
.vuln-asset-meta.mono{font-family:monospace;font-size:.67rem;max-width:44%}
.vuln-criticality-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:.66rem;font-weight:700;padding:.11rem .42rem;border-radius:999px;line-height:1.15;flex:0 0 auto}
.vuln-asset-purpose,.vuln-server-purpose{display:none!important}
.vuln-asset-purpose-chip{display:inline-flex;align-items:center;gap:.22rem;min-width:0;max-width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.66rem;font-weight:600;line-height:1.15;border:1px solid var(--color-border);border-radius:999px;padding:.11rem .4rem;color:var(--color-text-secondary);background:var(--color-content-bg);cursor:help}
.vuln-asset-purpose-chip i{font-size:.72rem;flex:0 0 auto}
.vuln-search-hidden{display:none!important}
.vuln-title-subline{font-size:.68rem}
.vuln-comment-count{font-size:.68rem;color:var(--color-text-secondary);margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vuln-metric-cell{white-space:nowrap;text-align:center;font-size:.72rem}
.vuln-risk-cell{line-height:1.15;text-align:center;overflow:hidden}
.vuln-risk-stack{display:flex;flex-direction:column;gap:.26rem;min-width:0;align-items:center;justify-content:center}
.vuln-risk-top{display:flex;align-items:center;gap:.27rem;flex-wrap:nowrap;justify-content:center;max-width:100%;overflow:hidden}
.vuln-risk-chip{display:inline-flex;align-items:center;gap:.22rem;white-space:nowrap;font-size:.68rem;border:1px solid var(--color-border);border-radius:999px;padding:.11rem .36rem;background:var(--color-content-bg);max-width:96px;overflow:hidden;text-overflow:ellipsis}
.vuln-risk-chip b{font-size:.76rem}
.vuln-risk-chip.residual b{font-size:.9rem;font-weight:800}
.vuln-risk-meta{display:flex;gap:.34rem;flex-wrap:wrap;justify-content:center;font-size:.65rem;color:var(--color-text-secondary);max-width:100%}
.vuln-risk-meta span{white-space:nowrap}
.vuln-rating-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:.68rem;font-weight:700;padding:.12rem .42rem;border-radius:999px;max-width:82px;overflow:hidden;text-overflow:ellipsis}
.vuln-state-cell{text-align:center;line-height:1.12;overflow:hidden}
.vuln-state-cell .p-status-badge{white-space:normal;line-height:1.1;text-align:center;margin-top:.27rem;display:inline-block;max-width:100%}
.vuln-actions-cell{text-align:center;white-space:nowrap;overflow:visible!important;max-width:none!important}
.vuln-actions{display:inline-flex!important;flex-wrap:nowrap;align-items:center;justify-content:center;min-width:0;gap:.24rem!important}
.vuln-actions .btn{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}
.vuln-actions .vuln-comment-toggle-btn{width:32px;min-width:32px;padding:0}
.vuln-comment-toggle-btn .badge{position:absolute;top:-6px;right:-7px;font-size:.56rem;line-height:1;padding:.11rem .25rem}
.vuln-comment-toggle-btn.active{box-shadow:0 0 0 .12rem rgba(13,110,253,.08)}
.vuln-comments-row{display:none}
.vuln-comments-cell{background:var(--color-content-bg);border-top:0!important;padding-top:0!important;width:auto!important;max-width:none!important;text-align:left!important;overflow:visible!important}
.vuln-comments-panel{border-left:3px solid var(--color-border);margin-left:1rem;margin-right:1rem;padding:.55rem .75rem .65rem .8rem;background:rgba(100,116,139,.035);border-radius:0 0 8px 8px;text-align:left}
.vuln-asset-purpose-panel{font-size:.76rem;color:var(--color-text-secondary);background:rgba(100,116,139,.06);border:1px solid var(--color-border);border-radius:6px;padding:.42rem .55rem;margin:.35rem 0 .45rem;white-space:normal;overflow-wrap:anywhere}
.vuln-comment-item{border-top:1px solid var(--color-border);padding:.45rem 0}
.vuln-comment-item:first-of-type{border-top:0;padding-top:.15rem}
.vuln-comment-meta{font-size:.68rem;color:var(--color-text-secondary);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vuln-comment-body{font-size:.78rem;margin-top:.15rem;white-space:pre-wrap;word-break:break-word}
.vuln-comment-empty{font-size:.76rem;color:var(--color-text-secondary);font-style:italic}
.vuln-comment-add textarea{min-height:32px;resize:vertical;font-size:.78rem}
/* Fallback for older vulnerability table markup with separate metric columns. */
.vuln-main-table col.vuln-col-server{width:15.5%!important}
.vuln-main-table col.vuln-col-cvss{width:4.5%!important}
.vuln-main-table col.vuln-col-inherent{width:5%!important}
.vuln-main-table col.vuln-col-mitig{width:4.5%!important}
.vuln-main-table col.vuln-col-residual{width:5%!important}
.vuln-main-table col.vuln-col-rating{width:5.5%!important}
.vuln-main-table col.vuln-col-sla{width:6.5%!important}
.vuln-main-table col.vuln-col-status{width:5.5%!important}
.vuln-server-cell .fw-semibold{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.vuln-server-cell .text-muted{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2}
@media (max-width:1400px){.vuln-main-table.is-backlog{min-width:1200px}.vuln-main-table.is-period{min-width:1100px}.vuln-main-table td,.vuln-main-table th{padding-left:.38rem;padding-right:.38rem}.vuln-actions .btn{width:28px;height:28px}.vuln-actions .vuln-comment-toggle-btn{width:30px;min-width:30px}}

.vuln-mitigation-card .portal-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vuln-mitigation-subtitle{font-size:.76rem;color:var(--color-text-secondary);font-weight:400}
.vuln-mitigation-chart-wrap{position:relative;height:320px;min-height:280px}
.vuln-mitigation-chart-wrap canvas{width:100%!important;height:100%!important}
.vuln-mitigation-side{display:grid;gap:.65rem}
.vuln-mitigation-stat{border:1px solid var(--color-border);border-radius:10px;padding:.7rem .8rem;background:var(--color-content-bg)}
.vuln-mitigation-stat .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);font-weight:700}
.vuln-mitigation-stat .value{font-size:1.45rem;font-weight:800;line-height:1.05;margin-top:.15rem}
.vuln-mitigation-stat .hint{font-size:.7rem;color:var(--color-text-secondary);margin-top:.15rem}
.vuln-mitigation-legend{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-size:.72rem;color:var(--color-text-secondary)}
.vuln-mitigation-legend span{display:inline-flex;align-items:center;gap:.3rem}
.vuln-mitigation-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.vuln-mitigation-fallback{display:grid;gap:.6rem}
.vuln-mitigation-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;gap:.55rem;align-items:center;font-size:.74rem}
.vuln-mitigation-row-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vuln-mitigation-row-meta{font-size:.66rem;color:var(--color-text-secondary);white-space:nowrap}
.vuln-mitigation-bar{height:14px;border-radius:999px;background:var(--color-border);overflow:hidden;display:flex;min-width:80px}
.vuln-mitigation-bar .mitigated{height:100%;background:#16A34A}
.vuln-mitigation-bar .residual{height:100%;background:#DC2626}
.vuln-mitigation-pct{font-weight:800;color:#16A34A;white-space:nowrap}
@media (max-width:992px){.vuln-mitigation-chart-wrap{height:300px}.vuln-mitigation-row{grid-template-columns:1fr}.vuln-mitigation-row-meta{white-space:normal}}

.vf-entity-row { border-radius:4px; transition:background .12s }
.vf-entity-row:hover { background:var(--color-content-bg) !important }
.vf-entity-row.vf-selected { background:rgba(124,93,255,.08) !important; color:var(--color-accent) }
.vf-pill { transition:all .15s }
.vf-pill:hover { background:var(--color-content-bg) !important }


.vuln-main-table .vuln-row { height: auto; }
.vuln-main-table .vuln-row > td { overflow: hidden; }
.vuln-search-hidden { display: none !important; }
.vuln-mitigation-card .portal-card-title { display: flex; align-items: center; }
.vuln-mitigation-chart-wrap { overflow: hidden; }
[data-theme="dark"] .vuln-mitigation-stat,
[data-theme="dark"] .vuln-risk-chip,
[data-theme="dark"] .vuln-asset-purpose-chip { background: rgba(255,255,255,.03); }

/* Scale-aware vulnerability risk mitigation chart. */
.vuln-mitigation-header{align-items:flex-start!important}
.vuln-mitigation-legend i.mitigated{background:#16A34A}
.vuln-mitigation-legend i.residual{background:#DC2626}
.vuln-mitigation-axis-note{font-size:.7rem;color:var(--color-text-secondary);margin-top:.35rem;text-align:center;line-height:1.35}
.vuln-mitigation-stat .value.good{color:#16A34A}
.vuln-mitigation-stat .value.risk{color:#DC2626}
.vuln-mitigation-pct{font-weight:800;color:#DC2626;white-space:nowrap;text-align:right}
.vuln-methodology{border:1px solid var(--color-border);border-radius:10px;background:var(--color-content-bg);overflow:hidden}
.vuln-methodology summary{list-style:none;cursor:pointer;padding:.7rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);font-weight:800;display:flex;align-items:center}
.vuln-methodology summary::-webkit-details-marker{display:none}
.vuln-methodology[open] summary{border-bottom:1px solid var(--color-border)}
.vuln-methodology-body{padding:.68rem .8rem .78rem;font-size:.74rem;color:var(--color-text-secondary);line-height:1.35}
.vuln-methodology-body p{margin:0 0 .45rem}
.vuln-methodology-body p:last-child{margin-bottom:0}
[data-theme="dark"] .vuln-methodology{background:rgba(255,255,255,.03)}

.vuln-mitigation-stat .value:not(.good):not(.risk){color:var(--color-text-primary)}

/* Vulnerability report UX refresh: individual entity posture, SLA focus and dark-mode-safe table. */
.vuln-sla-chart-wrap{position:relative;height:260px;min-height:220px}
.vuln-sla-chart-wrap canvas{width:100%!important;height:100%!important}
.vuln-sla-kpi{border:1px solid var(--color-border);border-radius:10px;padding:.65rem .75rem;background:var(--color-content-bg);height:100%}
.vuln-sla-kpi .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);font-weight:700}
.vuln-sla-kpi .value{font-size:1.35rem;font-weight:800;line-height:1.05;margin-top:.1rem}
.vuln-sla-kpi .value.good{color:#16A34A}.vuln-sla-kpi .value.risk{color:#DC2626}.vuln-sla-kpi .value.warn{color:#D97706}
.vuln-sla-kpi .hint{font-size:.69rem;color:var(--color-text-secondary);margin-top:.15rem;line-height:1.25}
.vuln-sla-report-table{font-size:.78rem;color:var(--color-text-primary)}
.vuln-sla-report-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.035em;color:var(--color-text-secondary);background:var(--color-content-bg)}
.vuln-mitigation-legend i.sla-ok{background:#16A34A}.vuln-mitigation-legend i.sla-soon{background:#D97706}.vuln-mitigation-legend i.sla-risk{background:#DC2626}
.vuln-purpose-line{margin-top:.16rem;display:flex;align-items:center;gap:.3rem}
.vuln-calc-popover{position:relative;display:inline-flex;align-items:center;white-space:nowrap}
.vuln-calc-pill{border:1px solid var(--color-border);border-radius:999px;padding:.06rem .38rem;background:var(--color-content-bg);font-weight:700;color:var(--color-text-secondary);cursor:help}
.vuln-calc-tooltip{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:280px;max-width:80vw;text-align:left;white-space:normal;line-height:1.35;background:var(--color-card-bg);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow-lg);padding:.65rem .75rem;font-size:.72rem}
.vuln-calc-tooltip:before{content:"";position:absolute;right:16px;top:-6px;width:10px;height:10px;background:var(--color-card-bg);border-left:1px solid var(--color-border);border-top:1px solid var(--color-border);transform:rotate(45deg)}
.vuln-calc-popover:hover .vuln-calc-tooltip,.vuln-calc-popover:focus-within .vuln-calc-tooltip{display:block}
[data-theme="dark"] .vuln-main-table{--bs-table-bg:transparent;--bs-table-color:var(--color-text-primary);--bs-table-border-color:var(--color-border)}
[data-theme="dark"] .vuln-main-table thead th,[data-theme="dark"] .vuln-sla-report-table th{background:rgba(255,255,255,.035)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-main-table tbody td,[data-theme="dark"] .vuln-sla-report-table tbody td{background:transparent!important;color:var(--color-text-primary);border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-main-table tbody tr.vuln-row:hover>td{background:rgba(124,93,255,.08)!important}
[data-theme="dark"] .vuln-comments-panel,[data-theme="dark"] .vuln-comments-cell{background:rgba(255,255,255,.025)!important;color:var(--color-text-primary)!important}
[data-theme="dark"] .vuln-main-table .badge.bg-light,[data-theme="dark"] .vuln-sla-report-table .badge.bg-light{background:rgba(255,255,255,.06)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-sla-kpi,[data-theme="dark"] .vuln-calc-pill,[data-theme="dark"] .vuln-calc-tooltip{background:rgba(255,255,255,.035)}

/* Vulnerability report context column and dark-mode hardening. */
.vuln-context-cell{line-height:1.15;text-align:left;overflow:visible!important;vertical-align:middle!important}
.vuln-context-purpose{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;font-size:.68rem;font-weight:600;line-height:1.2;border:1px solid var(--color-border);border-radius:8px;padding:.18rem .42rem;color:var(--color-text-secondary);background:var(--color-content-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
.vuln-context-purpose i{font-size:.72rem;flex:0 0 auto;color:var(--color-accent)}
.vuln-context-review{display:inline-flex;align-items:center;gap:.25rem;margin-top:.22rem;font-size:.66rem;font-weight:700;line-height:1.15;border:1px solid rgba(217,119,6,.35);border-radius:999px;padding:.15rem .42rem;color:#D97706;background:rgba(217,119,6,.08);white-space:nowrap}
.vuln-context-empty{display:inline-block;color:var(--color-text-muted);font-size:.75rem;text-align:center;width:100%}
[data-theme="dark"] .vuln-context-purpose,[data-theme="dark"] .vuln-context-review{background:rgba(255,255,255,.035)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-rating-pill,[data-theme="dark"] .vuln-criticality-pill{background:rgba(255,255,255,.035)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-main-table .text-muted{color:var(--color-text-secondary)!important}
[data-theme="dark"] .vuln-main-table .btn-outline-secondary{color:var(--color-text-secondary);border-color:var(--color-border)}
@media (max-width:1400px){.vuln-main-table.is-backlog{min-width:1280px}.vuln-main-table.is-period{min-width:1180px}.vuln-context-purpose{max-width:110px}}
[data-theme="dark"] .vuln-main-table .text-dark{color:var(--color-text-primary)!important}
[data-theme="dark"] .vuln-main-table .bg-dark.bg-opacity-10{background:rgba(255,255,255,.06)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-main-table code,[data-theme="dark"] .vuln-sla-report-table code{color:var(--color-text-primary)}

/* Vulnerability report page refresh 2026-06-17: entity SLA chart and restored table layout. */
.vuln-sla-chart-card .portal-card-body{padding:1rem}
.vuln-sla-report-card .portal-card-body{background:transparent}
.vuln-sla-chart-wrap{position:relative;height:430px;min-height:380px;overflow:hidden}
.vuln-sla-chart-wrap canvas{width:100%!important;height:100%!important}
.vuln-mitigation-legend i.sla-missing{background:#64748B}
.vuln-mitigation-stat .value.warn{color:#D97706}
.vuln-sla-report-wrap{border-top:1px solid var(--color-border)}
.vuln-sla-report-table tbody tr:hover td{background:rgba(124,93,255,.055)}

/* Vulnerability report table v3: split inherent / mitigation / residual and remove context column. */
.vuln-main-table.is-backlog{min-width:1320px!important}
.vuln-main-table.is-period{min-width:1220px!important}
.vuln-main-table.is-backlog col.vuln-col-asset{width:15%!important}
.vuln-main-table.is-backlog col.vuln-col-vulnerability{width:31%!important}
.vuln-main-table.is-backlog col.vuln-col-period{width:5%!important}
.vuln-main-table.is-backlog col.vuln-col-inherent{width:8%!important}
.vuln-main-table.is-backlog col.vuln-col-mitigation{width:8%!important}
.vuln-main-table.is-backlog col.vuln-col-residual{width:9%!important}
.vuln-main-table.is-backlog col.vuln-col-sla{width:8%!important}
.vuln-main-table.is-backlog col.vuln-col-status{width:7%!important}
.vuln-main-table.is-backlog col.vuln-col-actions{width:9%!important}
.vuln-main-table.is-period col.vuln-col-asset{width:16%!important}
.vuln-main-table.is-period col.vuln-col-vulnerability{width:35%!important}
.vuln-main-table.is-period col.vuln-col-inherent{width:9%!important}
.vuln-main-table.is-period col.vuln-col-mitigation{width:9%!important}
.vuln-main-table.is-period col.vuln-col-residual{width:10%!important}
.vuln-main-table.is-period col.vuln-col-sla{width:8%!important}
.vuln-main-table.is-period col.vuln-col-status{width:6%!important}
.vuln-main-table.is-period col.vuln-col-actions{width:7%!important}
.vuln-main-table.is-backlog thead th:nth-child(1),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(1){width:15%!important;max-width:15%!important}
.vuln-main-table.is-backlog thead th:nth-child(2),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(2){width:31%!important;max-width:31%!important}
.vuln-main-table.is-backlog thead th:nth-child(3),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(3){width:5%!important;max-width:5%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(4),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(4){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(5),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(5){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(6),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(6){width:9%!important;max-width:9%!important;text-align:center;overflow:visible!important}
.vuln-main-table.is-backlog thead th:nth-child(7),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(7){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(8),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(8){width:7%!important;max-width:7%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(9),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(9){width:9%!important;max-width:9%!important;text-align:center;overflow:visible!important}
.vuln-main-table.is-period thead th:nth-child(1),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(1){width:16%!important;max-width:16%!important}
.vuln-main-table.is-period thead th:nth-child(2),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(2){width:35%!important;max-width:35%!important}
.vuln-main-table.is-period thead th:nth-child(3),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(3){width:9%!important;max-width:9%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(4),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(4){width:9%!important;max-width:9%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(5),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(5){width:10%!important;max-width:10%!important;text-align:center;overflow:visible!important}
.vuln-main-table.is-period thead th:nth-child(6),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(6){width:8%!important;max-width:8%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(7),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(7){width:6%!important;max-width:6%!important;text-align:center}
.vuln-main-table.is-period thead th:nth-child(8),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(8){width:7%!important;max-width:7%!important;text-align:center;overflow:visible!important}
.vuln-main-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.025em;background:#173B6C!important;color:#fff!important;border-color:#173B6C!important}
.vuln-main-table td{padding:.48rem .42rem}
.vuln-main-table tbody tr.vuln-row:hover>td{background:rgba(23,59,108,.045)!important}
.vuln-purpose-text{display:block;margin-top:.15rem;font-size:.72rem;color:var(--color-text-secondary);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vuln-purpose-text:before{content:"Purpose: ";font-weight:700;color:var(--color-text-primary)}
.vuln-evidence-line{display:flex;flex-wrap:wrap;align-items:center;gap:.28rem;margin-top:.16rem;min-width:0;line-height:1.2}
.vuln-cve{font-family:monospace;color:#DC2626!important;font-weight:800}
.vuln-asset-badges{gap:.28rem;flex-wrap:wrap;white-space:normal!important}
.vuln-asset-review{display:inline-flex;align-items:center;gap:.25rem;margin-top:.22rem;font-size:.66rem;font-weight:800;line-height:1.15;border:1px solid rgba(217,119,6,.35);border-radius:999px;padding:.15rem .42rem;color:#D97706;background:rgba(217,119,6,.08);white-space:nowrap;max-width:100%}
.vuln-asset-review i{font-size:.7rem}.vuln-score-cell{text-align:center;line-height:1.1;overflow:hidden}.vuln-score-primary{font-weight:850;font-size:1.05rem;line-height:1;color:var(--color-text-primary)}
.vuln-score-primary span{font-size:.62rem;color:var(--color-text-secondary);font-weight:700;margin-left:.06rem}.vuln-score-primary.good{color:#16A34A}.vuln-score-caption{font-size:.63rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);font-weight:800;margin-top:.12rem}.vuln-score-sub{font-size:.66rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.08rem}.vuln-score-bar{height:4px;border-radius:999px;background:var(--color-border);overflow:hidden;margin:.2rem auto .1rem;max-width:68px}.vuln-score-bar span{display:block;height:100%;border-radius:999px;background:#16A34A}.vuln-residual-wrap{display:flex;flex-direction:column;align-items:center;gap:.12rem;overflow:visible}.vuln-sla-cell,.vuln-status-cell{text-align:center;line-height:1.14;overflow:hidden}.vuln-sla-label{font-size:.73rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vuln-sla-date{font-size:.66rem;color:var(--color-text-secondary);margin-top:.12rem}.vuln-sla-date.muted{color:var(--color-text-muted)}.vuln-calc-pill{font-size:.64rem;padding:.08rem .42rem}.vuln-calc-tooltip{width:320px;padding:.75rem .8rem;font-size:.72rem}.vuln-calc-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);font-weight:800;margin-bottom:.45rem}.vuln-calc-grid{display:grid;grid-template-columns:1fr auto;gap:.26rem .65rem;align-items:center}.vuln-calc-grid span{color:var(--color-text-secondary)}.vuln-calc-grid strong{font-size:.76rem}.vuln-calc-reason{border-top:1px solid var(--color-border);margin-top:.55rem;padding-top:.5rem;line-height:1.35;color:var(--color-text-primary)}
[data-theme="dark"] .vuln-main-table th{background:rgba(23,59,108,.9)!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important}
[data-theme="dark"] .vuln-main-table tbody tr.vuln-row:hover>td,[data-theme="dark"] .vuln-sla-report-table tbody tr:hover td{background:rgba(124,93,255,.10)!important}
[data-theme="dark"] .vuln-purpose-text:before{color:var(--color-text-primary)}
[data-theme="dark"] .vuln-asset-review,[data-theme="dark"] .vuln-score-bar,[data-theme="dark"] .vuln-calc-pill,[data-theme="dark"] .vuln-calc-tooltip{background:rgba(255,255,255,.04)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-score-sub,[data-theme="dark"] .vuln-score-caption,[data-theme="dark"] .vuln-sla-date,[data-theme="dark"] .vuln-purpose-text{color:var(--color-text-secondary)!important}
@media (max-width:1400px){.vuln-main-table.is-backlog{min-width:1320px!important}.vuln-main-table.is-period{min-width:1220px!important}.vuln-actions .btn{width:28px;height:28px}.vuln-actions .vuln-comment-toggle-btn{width:30px;min-width:30px}}

/* Vulnerability SLA chart refinement: grouped columns and closed-by-default report tables. */
.vuln-sla-chart-card.is-column-chart .vuln-sla-chart-wrap{
  position:relative;
  height:460px;
  min-height:430px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:.25rem;
}
.vuln-sla-chart-card.is-column-chart .vuln-sla-chart-wrap canvas{
  min-width:820px;
  height:100%!important;
}
.vuln-collapsible-table-card{
  overflow:hidden;
}
.vuln-collapsible-table-card>summary.vuln-collapsible-summary{
  list-style:none;
  cursor:pointer;
  display:flex!important;
  justify-content:space-between;
  align-items:flex-start!important;
  gap:1rem;
  user-select:none;
}
.vuln-collapsible-table-card>summary.vuln-collapsible-summary::-webkit-details-marker{display:none}
.vuln-collapsible-hint{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  flex:0 0 auto;
  border:1px solid var(--color-border);
  border-radius:999px;
  padding:.28rem .62rem;
  font-size:.72rem;
  font-weight:800;
  color:var(--color-text-secondary);
  background:var(--color-content-bg);
  white-space:nowrap;
}
.vuln-collapsible-hint i{transition:transform .16s ease}
.vuln-collapsible-table-card[open] .vuln-collapsible-hint i{transform:rotate(180deg)}
.vuln-collapsible-table-card[open]>summary.vuln-collapsible-summary{border-bottom:1px solid var(--color-border)}
.vuln-entity-summary-table{font-size:.78rem;color:var(--color-text-primary)}
[data-theme="dark"] .vuln-collapsible-hint{background:rgba(255,255,255,.035);border-color:var(--color-border);color:var(--color-text-secondary)}
[data-theme="dark"] .vuln-entity-summary-table{--bs-table-bg:transparent;--bs-table-color:var(--color-text-primary);--bs-table-border-color:var(--color-border)}
[data-theme="dark"] .vuln-entity-summary-table th{background:rgba(255,255,255,.035)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-entity-summary-table td{background:transparent!important;color:var(--color-text-primary);border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-entity-summary-table tbody tr:hover td{background:rgba(124,93,255,.1)!important}
@media (max-width:768px){
  .vuln-collapsible-table-card>summary.vuln-collapsible-summary{flex-direction:column;align-items:stretch!important}
  .vuln-collapsible-hint{align-self:flex-start}
}

/* ============================================================
   UI polish 2026-06-22: clearer branding, cleaner topbar,
   calendar/clock widget and normalized table controls.
   ============================================================ */

/* Brand polish */
.sidebar-brand {
  padding: .82rem 1rem .78rem;
}
.sidebar-brand-link {
  gap: .9rem;
}
.sidebar-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, #1D4ED8, #38BDF8);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.20);
}
.sidebar-logo img {
  padding: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.20));
}
.sidebar-logo i { font-size: 1.35rem; }
.sidebar-brand-name {
  font-size: 1.02rem;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.sidebar-brand-subtitle { display: none !important; }
.sidebar-collapsed .sidebar-logo {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

/* Topbar title context. The noisy eyebrow/RBAC label is retired. */
.topbar-eyebrow { display: none !important; }
.topbar-page-context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .18rem;
}
.topbar-title-row {
  gap: .42rem;
  min-height: 27px;
}
.topbar-section-title {
  color: var(--color-text-muted);
  font-size: .92rem;
  font-weight: 780;
  letter-spacing: -.015em;
  white-space: nowrap;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-title-separator {
  color: var(--color-text-muted);
  opacity: .65;
  font-weight: 700;
}
.topbar-title {
  margin: 0;
  font-size: 1.22rem;
}
.topbar-title-icon {
  width: 26px;
  height: 26px;
  margin-left: .15rem;
}

/* Clickable clock/calendar trigger */
.topbar-clock-wrap { position: relative; }
.topbar-clock-trigger {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.topbar-clock-trigger:hover,
.topbar-clock-trigger:focus-visible,
.topbar-clock-trigger[aria-expanded="true"] {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.28);
  color: var(--color-accent);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
  outline: none;
}
.clock-popover-panel {
  width: 354px;
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.clock-widget-hero {
  padding: 1rem 1.05rem .9rem;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.22), transparent 9rem),
    linear-gradient(135deg, var(--color-accent-soft), var(--color-card-bg));
  border-bottom: 1px solid var(--color-border);
}
.clock-widget-time {
  font-size: 2.15rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.055em;
  color: var(--color-text-primary);
}
.clock-widget-date {
  margin-top: .35rem;
  color: var(--color-text-secondary);
  font-size: .86rem;
  font-weight: 680;
}
.clock-widget-calendar { padding: .9rem 1rem 1rem; }
.calendar-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .72rem;
}
.calendar-month-label {
  font-size: .88rem;
  font-weight: 820;
  color: var(--color-text-primary);
  text-align: center;
}
.calendar-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.calendar-nav-btn:hover,
.calendar-nav-btn:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: rgba(37,99,235,.25);
  outline: none;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .28rem;
}
.calendar-weekdays {
  margin-bottom: .38rem;
  color: var(--color-text-muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-align: center;
}
.calendar-day {
  min-height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 720;
  border: 1px solid transparent;
}
.calendar-day.is-muted { opacity: .38; }
.calendar-day.is-weekend { background: var(--color-card-bg-soft); }
.calendar-day.is-today {
  color: #FFFFFF;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 18px rgba(37,99,235,.24);
}
.clock-widget-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .72rem;
  background: var(--color-card-bg-soft);
}
[data-theme="dark"] .clock-widget-hero {
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 9rem),
    linear-gradient(135deg, rgba(37,99,235,.13), var(--color-card-bg));
}
[data-theme="dark"] .calendar-day.is-weekend,
[data-theme="dark"] .clock-widget-footer,
[data-theme="dark"] .calendar-nav-btn { background: rgba(255,255,255,.035); }

/* DataTables / table polish across modules */
.portal-card .dataTables_wrapper,
.table-responsive > .dataTables_wrapper {
  width: 100%;
  padding: .95rem 1rem 1rem;
}
.portal-card-body.p-0 > .table-responsive > .dataTables_wrapper {
  padding: .95rem 1rem 1rem;
}
.dataTables_wrapper.portal-dt-wrapper,
.dataTables_wrapper {
  color: var(--color-text-primary);
}
.dataTables_wrapper .dt-top,
.dataTables_wrapper .dt-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem 1rem !important;
  flex-wrap: wrap !important;
  width: 100%;
}
.dataTables_wrapper .dt-top {
  margin: 0 !important;
  padding: .1rem 0 .85rem;
}
.dataTables_wrapper .dt-bottom {
  margin: 0 !important;
  padding: .85rem 0 0;
  border-top: 1px solid var(--color-border);
}
.dataTables_wrapper .dt-length,
.dataTables_wrapper .dt-search,
.dataTables_wrapper .dt-info,
.dataTables_wrapper .dt-pages {
  display: flex;
  align-items: center;
  min-width: 0;
}
.dataTables_wrapper .dt-search { margin-left: auto; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.dataTables_wrapper .dataTables_filter { text-align: right !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.dataTables_wrapper .dataTables_length select {
  min-width: 76px;
  height: 34px;
  margin: 0 !important;
  padding: .25rem 2rem .25rem .65rem !important;
  border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_filter input {
  width: min(320px, 30vw) !important;
  min-width: 220px;
  height: 36px;
  margin: 0 !important;
  padding: .45rem .75rem !important;
  border-radius: 12px !important;
}
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.portal-table {
  margin: 0 !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
  border-bottom: 1px solid var(--color-border) !important;
}
.dataTables_wrapper .dataTables_info {
  float: none !important;
  padding: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 650;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: .78rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 !important;
  padding: .34rem .62rem !important;
  min-width: 32px;
  line-height: 1.25 !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  background: var(--color-accent-soft) !important;
  border-color: rgba(37,99,235,.22) !important;
  color: var(--color-accent) !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--color-text-muted) !important;
  opacity: .58;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_processing {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-card-bg) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-md);
}
.table-responsive {
  border-radius: inherit;
}
@supports selector(:has(*)) {
  .table-responsive:has(> .dataTables_wrapper) {
    overflow-x: visible;
  }
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

@media (max-width: 991.98px) {
  .topbar-section-title { max-width: 12rem; font-size: .84rem; }
  .topbar-title { font-size: 1.08rem; }
  .dataTables_wrapper .dataTables_filter input { width: min(280px, 44vw) !important; }
}
@media (max-width: 767.98px) {
  .topbar-section-title,
  .topbar-title-separator { display: none; }
  .dataTables_wrapper .dt-top,
  .dataTables_wrapper .dt-bottom { align-items: stretch !important; }
  .dataTables_wrapper .dt-length,
  .dataTables_wrapper .dt-search,
  .dataTables_wrapper .dt-info,
  .dataTables_wrapper .dt-pages { width: 100%; justify-content: space-between; }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; min-width: 0; }
  .dataTables_wrapper .dataTables_paginate { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .portal-card .dataTables_wrapper,
  .table-responsive > .dataTables_wrapper { padding: .85rem; }
}

/* UI polish v10: make configured logo assets visible without squeezing wide wordmarks. */
.sidebar-logo.has-img {
  width: 72px;
  height: 46px;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 30px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.55);
}
.sidebar-logo.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px 7px;
  filter: none;
}
.sidebar-logo.has-icon {
  width: 50px;
  height: 50px;
}
.sidebar-collapsed .sidebar-logo.has-img {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}
.sidebar-collapsed .sidebar-logo.has-img img {
  width: auto;
  max-width: none;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  object-position: left center;
}

/* UI polish v10: unified table spacing and DataTables chrome. */
.portal-table-shell {
  width: 100%;
  max-width: 100%;
}
.portal-card-body.p-0 > .table-responsive.portal-table-shell,
.portal-card-body.p-0 > .table-responsive {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.portal-card-body.p-0 > .table-responsive > table.portal-table:not(.dataTable),
.portal-card-body.p-0 > table.portal-table:not(.dataTable) {
  margin: 0 !important;
}
.portal-card table.table:not(.portal-table),
.radar-section-card table.table:not(.portal-table),
.card table.table:not(.portal-table) {
  color: var(--color-text-primary);
}
.portal-card table.table thead th,
.radar-section-card table.table thead th,
.card table.table thead th {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 850;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .035em;
  white-space: nowrap;
}
.dataTables_wrapper {
  box-sizing: border-box !important;
  max-width: 100%;
}
.portal-card .dataTables_wrapper,
.table-responsive > .dataTables_wrapper,
.portal-card-body.p-0 > .table-responsive > .dataTables_wrapper {
  padding: .9rem 1rem 1rem !important;
}
.dataTables_wrapper .dt-top {
  min-height: 42px;
  padding: 0 0 .8rem !important;
}
.dataTables_wrapper .dt-bottom {
  min-height: 40px;
  padding: .85rem 0 0 !important;
}
.dataTables_wrapper .dataTables_length label::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--color-card-bg-soft);
  border: 1px solid var(--color-border);
  display: inline-block;
  flex: 0 0 auto;
}
.dataTables_wrapper .dataTables_filter label {
  position: relative;
}
.dataTables_wrapper .dataTables_filter label::before {
  content: "\F52A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: .72rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: .84rem;
  pointer-events: none;
}
.dataTables_wrapper .dataTables_filter input {
  padding-left: 2rem !important;
  box-sizing: border-box !important;
}
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable tbody td {
  box-sizing: border-box;
}
.dataTables_wrapper table.dataTable thead th.sorting,
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc {
  cursor: pointer;
}
.dataTables_wrapper table.dataTable thead th.dt-no-sort,
.dataTables_wrapper table.dataTable thead th.no-sort,
.dataTables_wrapper table.dataTable thead th.actions,
.dataTables_wrapper table.dataTable thead th.text-end:last-child:empty {
  background-image: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 16px rgba(37,99,235,.18) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .portal-card .dataTables_wrapper,
  .table-responsive > .dataTables_wrapper,
  .portal-card-body.p-0 > .table-responsive > .dataTables_wrapper {
    padding: .85rem !important;
  }
  .dataTables_wrapper .dataTables_length label::before { display: none; }
}

/* ============================================================
   UI polish continuation 2026-06-22: visible horizontal logos
   and unified table/sort affordances.
   ============================================================ */
.sidebar-logo.has-image {
  width: 82px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: 0 14px 30px rgba(0,0,0,.18), 0 10px 24px rgba(37,99,235,.16);
}
.sidebar-logo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px 7px;
  filter: none;
}
.sidebar-brand-name { color: #FFFFFF; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.sidebar-collapsed .sidebar-logo.has-image {
  width: 48px;
  height: 44px;
  border-radius: 14px;
}
.sidebar-collapsed .sidebar-logo.has-image img { padding: 6px; }

/* Normalize enhanced and native tables. Data-entry, heatmap and matrix tables opt out. */
.table.portal-table,
.dataTables_wrapper table.dataTable {
  color: var(--color-text-primary);
  font-size: .83rem;
}
.table.portal-table > :not(caption) > * > *,
.dataTables_wrapper table.dataTable > :not(caption) > * > * {
  vertical-align: middle;
}
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  font-size: .68rem !important;
  font-weight: 820 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dataTables_wrapper table.dataTable thead .sorting,
.dataTables_wrapper table.dataTable thead .sorting_asc,
.dataTables_wrapper table.dataTable thead .sorting_desc,
.dataTables_wrapper table.dataTable thead .sorting_asc_disabled,
.dataTables_wrapper table.dataTable thead .sorting_desc_disabled {
  background-image: none !important;
  position: relative;
  padding-right: 1.45rem !important;
  cursor: pointer;
}
.dataTables_wrapper table.dataTable thead .sorting::after,
.dataTables_wrapper table.dataTable thead .sorting_asc::after,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: bootstrap-icons !important;
  font-size: .72rem;
  color: var(--color-text-muted);
  opacity: .72;
}
.dataTables_wrapper table.dataTable thead .sorting::after { content: "\F282"; opacity: .34; }
.dataTables_wrapper table.dataTable thead .sorting_asc::after { content: "\F286"; color: var(--color-accent); opacity: .95; }
.dataTables_wrapper table.dataTable thead .sorting_desc::after { content: "\F282"; color: var(--color-accent); opacity: .95; }
.dataTables_wrapper table.dataTable thead .sorting_disabled::after,
.dataTables_wrapper table.dataTable thead .no-sort::after,
.dataTables_wrapper table.dataTable thead .dt-no-sort::after { display: none !important; content: none !important; }
.dataTables_wrapper .dt-top,
.dataTables_wrapper .dt-bottom {
  background: transparent;
}
.dataTables_wrapper .dt-top {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0 !important;
}
.dataTables_wrapper .dt-bottom {
  min-height: 42px;
}
.dataTables_wrapper .dataTables_length label::before { content: none !important; }
.dataTables_wrapper .dataTables_filter label::before {
  content: "\F52A";
  font-family: bootstrap-icons !important;
  color: var(--color-text-muted);
  font-size: .9rem;
  margin-right: -.18rem;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--color-text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.20) !important;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
  color: var(--color-text-muted);
  padding: .34rem .35rem;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 0 !important; }
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
  border-color: var(--color-border) !important;
}
.dataTables_wrapper .child {
  background: var(--color-card-bg-soft) !important;
}
.dataTables_wrapper .dtr-details {
  width: 100%;
}
.dataTables_wrapper .dtr-title {
  color: var(--color-text-secondary);
  font-weight: 800;
  min-width: 9rem;
}

/* ============================================================
   UI polish 2026-06-22: unified tab bars for catalogue/task pages.
   Uses the cleaner Entity page pattern: a card-backed strip with a
   persistent bottom rule and an active underline instead of floating
   Bootstrap tab buttons.
   ============================================================ */
.portal-tab-shell,
.portal-tabs-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.portal-tab-shell {
  padding: 0 .35rem;
}
.portal-tabs-card > .portal-tabs,
.portal-tab-shell > .portal-tabs {
  margin: 0;
  border: 0 !important;
}
.portal-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .15rem;
  min-height: 50px;
  padding: 0 .35rem;
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border) !important;
}
.portal-tabs .nav-item {
  display: flex;
  align-items: stretch;
}
.portal-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 50px;
  padding: .86rem 1.05rem .78rem;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  font-size: .89rem;
  font-weight: 820;
  letter-spacing: -.01em;
  box-shadow: none !important;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.portal-tabs .nav-link:hover,
.portal-tabs .nav-link:focus-visible {
  color: var(--color-accent) !important;
  background: var(--color-card-bg-soft) !important;
}
.portal-tabs .nav-link.active,
.portal-tabs .nav-item.show .nav-link {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--color-accent) !important;
  background: transparent !important;
}
.portal-tabs .nav-link .badge {
  line-height: 1;
  padding: .28rem .48rem;
  border-radius: .55rem;
  font-weight: 850;
}
.portal-tabs-card > .tab-content {
  background: var(--color-card-bg);
}
.portal-tabs-card > .tab-content > .tab-pane {
  border: 0;
}
[data-theme="dark"] .portal-tabs .nav-link:hover,
[data-theme="dark"] .portal-tabs .nav-link:focus-visible {
  background: rgba(255,255,255,.045) !important;
}
@media (max-width: 767.98px) {
  .portal-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .portal-tabs .nav-link {
    white-space: nowrap;
    padding-left: .9rem;
    padding-right: .9rem;
  }
}

/* ------------------------------------------------------------------
   Security section polish + reusable action buttons (2026-06-22)
   ------------------------------------------------------------------ */
.security-page-header {
  align-items: center;
  gap: 1rem;
}
.security-header-actions {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .55rem;
  min-width: min(100%, 520px);
}
.security-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}
.security-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .42rem .68rem;
  border: 1px solid rgba(37,99,235,.28);
  border-radius: var(--radius-md);
  background: var(--color-card-bg);
  color: var(--color-accent);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.security-subnav-link:hover,
.security-subnav-link:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: rgba(37,99,235,.48);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.security-subnav-link.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 8px 18px rgba(37,99,235,.20);
}
.security-monitor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}
.security-stat-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 100%;
  padding: .95rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.security-stat-card:hover,
.security-stat-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  text-decoration: none;
}
.security-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card-bg-soft);
  border: 1px solid var(--color-border);
  flex: 0 0 auto;
}
.security-stat-icon i { font-size: 1.45rem; }
.security-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.security-stat-value {
  font-size: 1.6rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.03em;
}
.security-stat-label {
  margin-top: .18rem;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 700;
}
.portal-action-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  border-radius: var(--radius-md) !important;
  font-weight: 800;
  box-shadow: var(--shadow-xs);
}
.portal-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  line-height: 1;
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.portal-icon-btn:hover,
.portal-icon-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.portal-icon-btn-primary {
  color: var(--color-accent);
  border-color: rgba(37,99,235,.32);
}
.portal-icon-btn-primary:hover,
.portal-icon-btn-primary:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.portal-icon-btn-secondary:hover,
.portal-icon-btn-secondary:focus-visible {
  background: var(--color-card-bg-soft);
  color: var(--color-text-primary);
}
.portal-icon-btn-success {
  color: var(--color-rag-green);
  border-color: rgba(22,163,74,.32);
}
.portal-icon-btn-success:hover,
.portal-icon-btn-success:focus-visible,
.portal-icon-btn-success.is-on,
.portal-icon-btn-success.active,
.portal-icon-btn-success[data-state="on"] {
  background: var(--color-rag-green-bg);
  color: var(--color-rag-green);
  border-color: rgba(22,163,74,.42);
}
.portal-icon-btn-warning {
  color: var(--color-rag-amber);
  border-color: rgba(217,119,6,.35);
}
.portal-icon-btn-warning:hover,
.portal-icon-btn-warning:focus-visible,
.portal-icon-btn-warning.is-on,
.portal-icon-btn-warning.active,
.portal-icon-btn-warning[data-state="on"] {
  background: var(--color-rag-amber-bg);
  color: var(--color-rag-amber);
  border-color: rgba(217,119,6,.46);
}
.portal-icon-btn-danger {
  color: var(--color-rag-red);
  border-color: rgba(220,38,38,.32);
}
.portal-icon-btn-danger:hover,
.portal-icon-btn-danger:focus-visible {
  background: var(--color-rag-red-bg);
  color: var(--color-rag-red);
}
.portal-icon-btn.opacity-50,
.portal-icon-btn[data-state="off"] {
  opacity: .55 !important;
}
.asset-status-icons,
.compact-actions:not(td):not(th),
.compact-action-group {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}
td.compact-actions,
th.compact-actions {
  display: table-cell;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
td.compact-actions > .portal-icon-btn + .portal-icon-btn,
td.compact-actions > .compact-action-group .portal-icon-btn + .portal-icon-btn {
  margin-left: .35rem;
}
.asset-compact-table td:nth-last-child(-n+2),
.asset-compact-table th:nth-last-child(-n+2) {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.asset-compact-table .dt-column-order { display: none; }
@media (max-width: 991.98px) {
  .security-page-header { align-items: stretch; }
  .security-header-actions,
  .security-subnav,
  .security-monitor-controls { align-items: stretch; justify-content: flex-start; }
  .security-subnav-link { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 575.98px) {
  .security-stat-card { padding: .8rem; }
  .security-stat-icon { width: 38px; height: 38px; border-radius: 12px; }
  .security-stat-value { font-size: 1.35rem; }
}

/* ============================================================
   UI polish 2026-06-22 v15: compact topbar context, responsive
   rem-based brand logo and darker table safety pass.
   ============================================================ */
:root {
  --portal-brand-logo-expanded-w: 6.35rem;
  --portal-brand-logo-expanded-h: 2.95rem;
  --portal-brand-logo-collapsed: 3rem;
}

/* The section/page title is the primary locator; hide the redundant
   second-line breadcrumb everywhere. */
.topbar-breadcrumb { display: none !important; }
.topbar-page-context { gap: 0 !important; }
.topbar-title-row { min-height: 2.15rem; }

/* Logo uses rem sizing and crops wide wordmarks gracefully in the
   collapsed sidebar instead of squeezing them into an unreadable pill. */
.sidebar-brand { padding: .78rem .95rem; }
.sidebar-brand-link { min-height: 3.05rem; }
.sidebar-logo.has-img,
.sidebar-logo.has-image,
.sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-expanded-w) !important;
  height: var(--portal-brand-logo-expanded-h) !important;
  border-radius: 1.15rem !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 .95rem 1.9rem rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.62) !important;
  overflow: hidden !important;
}
.sidebar-logo.has-img img,
.sidebar-logo.has-image img,
.sidebar-logo.has-img.has-image img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: .45rem .68rem !important;
  filter: none !important;
}
.sidebar-brand-name {
  font-size: 1.03rem;
  line-height: 1.08;
}
.sidebar-collapsed .sidebar-brand { padding-left: .55rem; padding-right: .55rem; }
.sidebar-collapsed .sidebar-logo.has-img,
.sidebar-collapsed .sidebar-logo.has-image,
.sidebar-collapsed .sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-collapsed) !important;
  height: var(--portal-brand-logo-collapsed) !important;
  border-radius: 1rem !important;
}
.sidebar-collapsed .sidebar-logo.has-img img,
.sidebar-collapsed .sidebar-logo.has-image img,
.sidebar-collapsed .sidebar-logo.has-img.has-image img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  padding: .38rem 0 .38rem .22rem !important;
  transform: translateX(.12rem);
}

/* Night-mode table safety. This covers native Bootstrap tables,
   portal tables, DataTables generated wrappers and tables that were
   not converted to the portal-table class yet. */
[data-theme="dark"] .table,
[data-theme="dark"] table.portal-table,
[data-theme="dark"] table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-hover-bg: rgba(37,99,235,.12);
  --bs-table-hover-color: var(--color-text-primary);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table > :not(caption) > * > *,
[data-theme="dark"] table.portal-table > :not(caption) > * > *,
[data-theme="dark"] table.dataTable > :not(caption) > * > * {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td,
[data-theme="dark"] .table-light th,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] table.portal-table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
  background-color: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] .portal-table tbody tr:nth-child(even) > *,
[data-theme="dark"] table.dataTable.stripe tbody tr.odd > *,
[data-theme="dark"] table.dataTable.display tbody tr.odd > * {
  background-color: var(--color-table-stripe) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] .portal-table tbody tr:hover > *,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > *,
[data-theme="dark"] table.dataTable.display tbody tr:hover > * {
  background-color: rgba(37,99,235,.12) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] table.dataTable tbody tr.selected > *,
[data-theme="dark"] table.dataTable tbody tr > .selected {
  background-color: rgba(37,99,235,.22) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_empty,
[data-theme="dark"] .dataTables_wrapper .dtr-title,
[data-theme="dark"] .dataTables_wrapper .dtr-data {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_empty {
  background: var(--color-card-bg) !important;
  color: var(--color-text-muted) !important;
}
[data-theme="dark"] .dataTables_wrapper .child,
[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details {
  background: var(--color-card-bg-soft) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .portal-table-shell,
[data-theme="dark"] .admin-table-shell {
  border-color: var(--color-border) !important;
}

/* Hard-coded light utility backgrounds used by older module tables/cards. */
[data-theme="dark"] .portal-content .card-header.bg-white,
[data-theme="dark"] .portal-content .bg-white,
[data-theme="dark"] .portal-content [style*="background:#fff"],
[data-theme="dark"] .portal-content [style*="background: #fff"],
[data-theme="dark"] .portal-content [style*="background:#ffffff"],
[data-theme="dark"] .portal-content [style*="background: #ffffff"],
[data-theme="dark"] .portal-content [style*="background:#f8fafc"],
[data-theme="dark"] .portal-content [style*="background: #f8fafc"],
[data-theme="dark"] .portal-content [style*="background:#F8FAFC"],
[data-theme="dark"] .portal-content [style*="background: #F8FAFC"],
[data-theme="dark"] .portal-content [style*="background:#f3f4f6"],
[data-theme="dark"] .portal-content [style*="background: #f3f4f6"],
[data-theme="dark"] .portal-content [style*="background:#eff6ff"],
[data-theme="dark"] .portal-content [style*="background: #eff6ff"] {
  background: var(--color-card-bg-soft) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .portal-content [style*="color:#64748b"],
[data-theme="dark"] .portal-content [style*="color: #64748b"],
[data-theme="dark"] .portal-content [style*="color:#6b7280"],
[data-theme="dark"] .portal-content [style*="color: #6b7280"] {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .portal-content .border,
[data-theme="dark"] .portal-content .border-bottom,
[data-theme="dark"] .portal-content .border-top,
[data-theme="dark"] .portal-content .table-bordered {
  border-color: var(--color-border) !important;
}

/* Keep warning/info badges readable after the generic dark text override. */
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] .badge.bg-warning-subtle.text-dark,
[data-theme="dark"] .badge.text-bg-warning,
[data-theme="dark"] .badge.text-bg-info {
  color: #111827 !important;
}
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.bg-light {
  background: rgba(255,255,255,.07) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   UI polish 2026-06-22: compact topbar, responsive logo mark,
   and dark-mode table hardening across legacy/native tables.
   ============================================================ */

/* The title row already communicates section + page. Hide the older
   breadcrumb line so the topbar does not repeat itself. */
.portal-topbar {
  min-height: 68px;
}
.topbar-page-context {
  gap: 0;
}
.topbar-breadcrumb {
  display: none !important;
}
.topbar-title-row {
  min-height: auto;
}
.topbar-section-title {
  max-width: min(24rem, 32vw);
}

/* Logo handling: full horizontal logo in expanded mode, compact mark in
   collapsed mode when a *_mark asset exists. All dimensions use rems so
   browser zoom and density changes remain smooth. */
.sidebar-brand {
  padding: .75rem .85rem;
}
.sidebar-brand-link {
  gap: .75rem;
}
.sidebar-logo.has-img,
.sidebar-logo.has-image {
  width: 6.8rem;
  height: 3.05rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.22), 0 .45rem 1.2rem rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.62);
  overflow: hidden;
}
.sidebar-logo.has-img > img,
.sidebar-logo.has-image > img,
.sidebar-logo.has-image .sidebar-logo-full,
.sidebar-logo.has-image .sidebar-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .35rem .55rem;
  filter: none;
}
.sidebar-logo.has-image .sidebar-logo-mark {
  display: none;
  padding: .32rem;
}
.sidebar-logo.has-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}
.sidebar-collapsed .sidebar-brand {
  padding-left: .55rem;
  padding-right: .55rem;
}
.sidebar-collapsed .sidebar-logo.has-img,
.sidebar-collapsed .sidebar-logo.has-image {
  width: 3.05rem;
  height: 3.05rem;
  border-radius: 1rem;
}
.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-full:not(:only-child) {
  display: none;
}
.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-mark {
  display: block;
}
.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-full:only-child,
.sidebar-collapsed .sidebar-logo.has-img img:only-child {
  width: auto;
  max-width: none;
  height: 100%;
  padding: .32rem;
  object-fit: contain;
  object-position: left center;
}
.sidebar-collapsed .sidebar-logo.has-icon {
  width: 2.8rem;
  height: 2.8rem;
}
@media (max-width: 767.98px) {
  .portal-topbar { min-height: 64px; }
  .sidebar-logo.has-img,
  .sidebar-logo.has-image {
    width: 6.4rem;
    height: 2.85rem;
  }
}

/* Dark-mode table safety net for Bootstrap, DataTables and older module
   tables that do not use portal-card/portal-table classes yet. */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button {
  background-color: var(--color-card-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--color-card-bg-soft) !important;
}
[data-theme="dark"] .table,
[data-theme="dark"] table.dataTable,
[data-theme="dark"] .portal-table {
  --bs-table-color: var(--color-text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-active-color: var(--color-text-primary);
  --bs-table-active-bg: rgba(59,130,246,.12);
  --bs-table-hover-color: var(--color-text-primary);
  --bs-table-hover-bg: rgba(59,130,246,.10);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table > :not(caption) > * > *,
[data-theme="dark"] table.dataTable > :not(caption) > * > *,
[data-theme="dark"] .portal-table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td,
[data-theme="dark"] .portal-table thead th,
[data-theme="dark"] .portal-table thead td {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] .portal-table tbody tr:nth-child(even) > *,
[data-theme="dark"] table.dataTable.stripe tbody tr.odd > *,
[data-theme="dark"] table.dataTable.display tbody tr.odd > *,
[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: var(--color-table-stripe) !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] .portal-table tbody tr:hover > *,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > *,
[data-theme="dark"] table.dataTable.display tbody tr:hover > *,
[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: rgba(59,130,246,.12) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-active > *,
[data-theme="dark"] .table-active,
[data-theme="dark"] tr.table-active > td,
[data-theme="dark"] tr.table-active > th {
  background-color: rgba(59,130,246,.16) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > * {
  background-color: rgba(217,119,6,.16) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > *,
[data-theme="dark"] .table-danger-subtle,
[data-theme="dark"] .table-danger-subtle > * {
  background-color: rgba(220,38,38,.16) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > * {
  background-color: rgba(22,163,74,.15) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > * {
  background-color: rgba(148,163,184,.12) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dtr-title,
[data-theme="dark"] .dataTables_wrapper .dtr-data {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
  color: #fff !important;
}
[data-theme="dark"] table.dataTable tbody tr.child,
[data-theme="dark"] table.dataTable tbody tr.child ul.dtr-details,
[data-theme="dark"] .dataTables_wrapper .child {
  background: var(--color-card-bg-soft) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] table.dataTable tbody tr.child ul.dtr-details > li {
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dataTables_scrollHead,
[data-theme="dark"] .dataTables_scrollBody,
[data-theme="dark"] .dataTables_scrollFoot {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_empty,
[data-theme="dark"] .dataTables_wrapper .empty-state {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .sticky-top.table-light,
[data-theme="dark"] thead.sticky-top,
[data-theme="dark"] .table-responsive thead.sticky-top th {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: 0 1px 0 var(--color-border);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .tom-select,
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-dropdown {
  background-color: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .form-check-input:not(:checked) {
  background-color: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .form-check-input:checked,
[data-theme="dark"] .form-check-input:checked:focus {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
[data-theme="dark"] .ts-dropdown .option,
[data-theme="dark"] .ts-dropdown .optgroup-header {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .ts-dropdown .active {
  background: var(--color-accent-soft) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start {
  border-color: var(--color-border) !important;
}

/* ============================================================
   UI polish v15 2026-06-22: simplified page header, responsive
   NLB logo treatment and dark-mode-safe table surfaces.
   ============================================================ */

/* The section/page title already gives the user context, so the
   secondary breadcrumb row is intentionally retired portal-wide. */
.topbar-breadcrumb { display: none !important; }
.portal-topbar { min-height: 68px; }
.topbar-page-context { gap: 0; }
.topbar-title-row { min-height: 32px; }
.topbar-section-title { font-size: 1rem; }
.topbar-title { font-size: 1.32rem; }

/* Keep configured horizontal logos readable when expanded, then crop to
   the mark portion when the sidebar is collapsed. */
.sidebar-brand { padding: .72rem .95rem; }
.sidebar-brand-link { gap: .8rem; }
.sidebar-logo.has-img,
.sidebar-logo.has-image {
  width: 6.55rem;
  height: 3.2rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: 0 16px 34px rgba(0,0,0,.20), 0 10px 26px rgba(37,99,235,.16);
  overflow: hidden;
}
.sidebar-logo.has-img img,
.sidebar-logo.has-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center center;
  padding: .46rem .62rem !important;
  filter: none !important;
}
.sidebar-brand-name {
  font-size: .98rem;
  line-height: 1.08;
}
.sidebar-collapsed .sidebar-brand { padding-left: .62rem; padding-right: .62rem; }
.sidebar-collapsed .sidebar-brand-link { justify-content: center; gap: 0; }
.sidebar-collapsed .sidebar-logo.has-img,
.sidebar-collapsed .sidebar-logo.has-image {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 1.05rem;
}
.sidebar-collapsed .sidebar-logo.has-img img,
.sidebar-collapsed .sidebar-logo.has-image img {
  width: auto !important;
  height: 2.25rem !important;
  max-width: none !important;
  padding: 0 !important;
  object-fit: contain;
  object-position: left center;
  transform: translateX(0);
}

/* Dark-mode table hardening. This catches Bootstrap tables, portal
   tables, native tables decorated by the enhancer, DataTables scroll
   clones and responsive child rows. */
[data-theme="dark"] .table,
[data-theme="dark"] table.dataTable,
[data-theme="dark"] .portal-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-hover-bg: rgba(59,130,246,.11);
  --bs-table-hover-color: var(--color-text-primary);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table > :not(caption) > * > *,
[data-theme="dark"] .portal-table > :not(caption) > * > *,
[data-theme="dark"] table.dataTable > :not(caption) > * > * {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .portal-table thead th,
[data-theme="dark"] .table thead.table-light th,
[data-theme="dark"] .table-light th,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] .dataTables_wrapper table.dataTable thead th,
[data-theme="dark"] .dataTables_wrapper table.dataTable thead td,
[data-theme="dark"] .dataTables_scrollHead table.dataTable thead th,
[data-theme="dark"] .dataTables_scrollHead table.dataTable thead td {
  background: var(--color-table-header-bg) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .portal-table tbody tr,
[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr,
[data-theme="dark"] table.dataTable.display tbody tr,
[data-theme="dark"] table.dataTable.stripe tbody tr,
[data-theme="dark"] table.dataTable.row-border tbody tr,
[data-theme="dark"] table.dataTable.hover tbody tr {
  background-color: transparent !important;
}
[data-theme="dark"] .portal-table tbody tr:nth-child(even) > *,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] table.dataTable.display tbody tr.even > *,
[data-theme="dark"] table.dataTable.stripe tbody tr.even > * {
  background-color: rgba(255,255,255,.025) !important;
}
[data-theme="dark"] .portal-table tbody tr:hover > *,
[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover > *,
[data-theme="dark"] table.dataTable.display tbody tr:hover > *,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > * {
  background-color: rgba(59,130,246,.11) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_2,
[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_2,
[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_3,
[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_3 {
  background-color: inherit !important;
}
[data-theme="dark"] .dataTables_scrollHead,
[data-theme="dark"] .dataTables_scrollHeadInner,
[data-theme="dark"] .dataTables_scrollBody,
[data-theme="dark"] .dataTables_wrapper.no-footer .dataTables_scrollBody {
  background: transparent !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .form-control,
[data-theme="dark"] .dataTables_wrapper .form-select {
  background-color: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--color-text-muted) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) {
  color: var(--color-text-secondary) !important;
  background: transparent !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):focus {
  color: var(--color-accent) !important;
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.24) !important;
}
[data-theme="dark"] .dataTables_wrapper .child,
[data-theme="dark"] table.dataTable > tbody > tr.child,
[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details,
[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
  background: var(--color-card-bg-soft) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table .bg-white,
[data-theme="dark"] .table .bg-light,
[data-theme="dark"] .portal-table .bg-white,
[data-theme="dark"] .portal-table .bg-light,
[data-theme="dark"] .dataTables_wrapper .bg-white,
[data-theme="dark"] .dataTables_wrapper .bg-light,
[data-theme="dark"] .dataTables_wrapper pre.bg-light {
  background-color: rgba(255,255,255,.055) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .table code,
[data-theme="dark"] .portal-table code,
[data-theme="dark"] .dataTables_wrapper code,
[data-theme="dark"] .dataTables_wrapper pre {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table .text-dark,
[data-theme="dark"] .portal-table .text-dark,
[data-theme="dark"] .dataTables_wrapper .text-dark {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table .text-muted,
[data-theme="dark"] .portal-table .text-muted,
[data-theme="dark"] .dataTables_wrapper .text-muted {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .table-bordered > :not(caption) > * > *,
[data-theme="dark"] .table-bordered {
  border-color: var(--color-border) !important;
}
[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--color-accent) !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  .topbar-title { font-size: 1.16rem; }
  .topbar-section-title { font-size: .9rem; }
  .sidebar-logo.has-img,
  .sidebar-logo.has-image { width: 6.1rem; }
}
.sidebar-collapsed .sidebar-logo.has-img,
.sidebar-collapsed .sidebar-logo.has-image { justify-content: flex-start; align-items: center; }

/* ============================================================
   UI polish v16 2026-06-22: sidebar brand correction.
   Expanded mode shows only the full horizontal logo and keeps the
   portal title readable. Collapsed mode keeps the compact logo mark.
   ============================================================ */
:root {
  --portal-brand-logo-expanded-w: 5.35rem;
  --portal-brand-logo-expanded-h: 2.85rem;
  --portal-brand-logo-collapsed: 3.15rem;
}
.sidebar-brand {
  padding: .72rem .78rem !important;
}
.sidebar-brand-link {
  gap: .65rem !important;
  min-width: 0 !important;
  overflow: hidden;
}
.sidebar-logo.has-img,
.sidebar-logo.has-image,
.sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-expanded-w) !important;
  height: var(--portal-brand-logo-expanded-h) !important;
  flex: 0 0 var(--portal-brand-logo-expanded-w) !important;
  min-width: var(--portal-brand-logo-expanded-w) !important;
  border-radius: 1.05rem !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.20), 0 .45rem 1.15rem rgba(37,99,235,.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.sidebar-logo.has-image .sidebar-logo-full,
.sidebar-logo.has-img > img:first-child {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: .42rem .52rem !important;
  transform: none !important;
  filter: none !important;
}
.sidebar-logo.has-image .sidebar-logo-mark {
  display: none !important;
}
.sidebar-brand-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.sidebar-brand-name {
  font-size: .98rem !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
}
.sidebar-collapsed .sidebar-brand {
  padding-left: .62rem !important;
  padding-right: .62rem !important;
}
.sidebar-collapsed .sidebar-brand-link {
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible;
}
.sidebar-collapsed .sidebar-logo.has-img,
.sidebar-collapsed .sidebar-logo.has-image,
.sidebar-collapsed .sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-collapsed) !important;
  height: var(--portal-brand-logo-collapsed) !important;
  flex-basis: var(--portal-brand-logo-collapsed) !important;
  min-width: var(--portal-brand-logo-collapsed) !important;
  border-radius: 1.05rem !important;
}
.sidebar-collapsed .sidebar-logo.has-mark .sidebar-logo-full {
  display: none !important;
}
.sidebar-collapsed .sidebar-logo.has-mark .sidebar-logo-mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: .42rem !important;
  transform: none !important;
  filter: none !important;
}
.sidebar-collapsed .sidebar-logo.no-mark .sidebar-logo-full,
.sidebar-collapsed .sidebar-logo.no-mark > img:first-child {
  display: block !important;
  width: auto !important;
  height: 2.25rem !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  padding: 0 !important;
  transform: translateX(.05rem) !important;
}

/* -- Sidebar collapse retirement ------------------------------------------ */
/* Desktop sidebar collapse was removed. These guards neutralize stale browser
   state from older releases while preserving the mobile drawer behaviour. */
html.sidebar-collapsed .portal-main { margin-left: var(--sidebar-width) !important; }
html.sidebar-collapsed .portal-sidebar { width: var(--sidebar-width) !important; }
html.sidebar-collapsed .sidebar-brand { justify-content: flex-start !important; padding-left: .75rem !important; padding-right: .85rem !important; }
html.sidebar-collapsed .sidebar-brand-link { justify-content: flex-start !important; gap: .75rem !important; }
html.sidebar-collapsed .sidebar-brand-text,
html.sidebar-collapsed .nav-group-label,
html.sidebar-collapsed .nav-item-label,
html.sidebar-collapsed .nav-badge,
html.sidebar-collapsed .sidebar-user-meta { display: inline-flex !important; }
html.sidebar-collapsed .sidebar-brand-text,
html.sidebar-collapsed .sidebar-user-meta { flex-direction: column !important; }
html.sidebar-collapsed .nav-group-header { justify-content: flex-start !important; }
html.sidebar-collapsed .nav-item { justify-content: flex-start !important; padding-left: .72rem !important; padding-right: .72rem !important; }
html.sidebar-collapsed .nav-item-icon { width: 22px !important; height: auto !important; }
html.sidebar-collapsed .sidebar-user-card { justify-content: flex-start !important; padding-left: .48rem !important; padding-right: .48rem !important; }
html.sidebar-collapsed .sidebar-logo.has-img,
html.sidebar-collapsed .sidebar-logo.has-image,
html.sidebar-collapsed .sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-expanded-w, 6.8rem) !important;
  height: var(--portal-brand-logo-expanded-h, 3.05rem) !important;
}
html.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-full,
html.sidebar-collapsed .sidebar-logo.has-img img:first-child { display: block !important; }
html.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-mark { display: none !important; }
@media (max-width: 767.98px) {
  html.sidebar-collapsed .portal-main { margin-left: 0 !important; }
  html.sidebar-collapsed .portal-sidebar { width: var(--sidebar-width) !important; }
}

/* Compliance operational/admin pages need the same full-width workspace behavior as data-heavy pages. */
body[data-page-slug="compliance/workspace"] .portal-content-inner,
body[data-page-slug="compliance/findings"] .portal-content-inner,
body[data-page-slug="compliance/assessments"] .portal-content-inner,
body[data-page-slug="compliance/framework-compliance"] .portal-content-inner,
body[data-page-slug="admin/compliance-frameworks"] .portal-content-inner,
body[data-page-slug="compliance/frameworks"] .portal-content-inner {
  max-width: none;
}

/* ============================================================
   Portal manual and contextual help
   RBAC-aware documentation system, full manual and help drawer.
   ============================================================ */
.portal-help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.28);
  z-index: 1110;
  opacity: 0;
  transition: opacity .18s ease;
}
.portal-help-backdrop.is-open { opacity: 1; }
.portal-help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1120;
  width: min(480px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%);
  transition: transform .22s ease;
}
.portal-help-drawer.is-open { transform: translateX(0); }
.portal-help-header {
  padding: 1rem 1.1rem .9rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.15), transparent 14rem),
    var(--color-card-bg);
}
.portal-help-kicker,
.manual-eyebrow,
.manual-kicker {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--color-accent);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.portal-help-header h2 {
  margin: .28rem 0 0;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.025em;
}
.portal-help-close {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  color: var(--color-text-secondary);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-help-close:hover { color: var(--color-accent); border-color: rgba(37,99,235,.28); background: var(--color-accent-soft); }
.portal-help-search {
  position: relative;
  padding: .85rem 1.1rem .75rem;
  border-bottom: 1px solid var(--color-border);
}
.portal-help-search i {
  position: absolute;
  left: 1.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.portal-help-search input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  border-radius: 999px;
  min-height: 40px;
  padding: .45rem .9rem .45rem 2.35rem;
  outline: none;
  font-weight: 650;
}
.portal-help-search input:focus { border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 .22rem var(--color-accent-ring); }
.portal-help-search-results {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  max-height: 240px;
  overflow: auto;
}
.portal-help-body {
  padding: 1rem 1.1rem 1.15rem;
  overflow: auto;
  flex: 1 1 auto;
}
.portal-help-footer {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
}
.portal-help-footer .btn { width: 100%; font-weight: 800; }
.portal-help-loading,
.portal-help-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-text-secondary);
  gap: .5rem;
}
.portal-help-topic h3 {
  margin: .2rem 0 .45rem;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.02em;
}
.portal-help-topic p { color: var(--color-text-secondary); margin-bottom: .7rem; }
.portal-help-section-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: .82rem .9rem;
  background: var(--color-card-bg-soft);
  margin-bottom: .75rem;
}
.portal-help-section-card strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: .45rem;
}
.portal-help-chip-list { display: flex; flex-wrap: wrap; gap: .38rem; }
.portal-help-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .52rem;
  border-radius: 999px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: .72rem;
  font-weight: 750;
}
.portal-help-chip.can { color: var(--color-rag-green); border-color: rgba(22,163,74,.28); background: var(--color-rag-green-bg); }
.portal-help-chip.cannot { color: var(--color-rag-red); border-color: rgba(220,38,38,.24); background: var(--color-rag-red-bg); }
.portal-help-actions { display: grid; gap: .48rem; }
.portal-help-action {
  display: flex;
  gap: .62rem;
  padding: .64rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-card-bg);
}
.portal-help-action i { color: var(--color-accent); flex: 0 0 auto; margin-top: .1rem; }
.portal-help-action strong { margin: 0; font-size: .8rem; color: var(--color-text-primary); text-transform: none; letter-spacing: 0; }
.portal-help-action span { display: block; color: var(--color-text-secondary); font-size: .74rem; line-height: 1.35; }
.portal-help-result,
.manual-search-result {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: inherit;
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.portal-help-result:hover,
.manual-search-result:hover { background: var(--color-accent-soft); color: inherit; }
.portal-help-result i,
.manual-search-result i { color: var(--color-accent); margin-top: .15rem; }
.portal-help-result strong,
.manual-search-result strong { display: block; font-size: .8rem; color: var(--color-text-primary); }
.portal-help-result small,
.manual-search-result small { display: block; color: var(--color-text-secondary); line-height: 1.35; }
.portal-help-related { display: grid; gap: .42rem; }
.portal-help-related a {
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: .5rem .62rem;
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  font-weight: 750;
  font-size: .78rem;
}
.portal-help-related a:hover { background: var(--color-accent-soft); color: var(--color-accent); }

.manual-shell { display: grid; gap: 1rem; }
.manual-hero {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 1.15rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 22rem),
    linear-gradient(135deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-sm);
}
.manual-hero-copy h1 {
  margin: .28rem 0 .35rem;
  font-size: clamp(1.45rem, 2.3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.045em;
}
.manual-hero-copy p { margin: 0; color: var(--color-text-secondary); max-width: 740px; font-size: .95rem; }
.manual-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: .72rem;
  align-items: stretch;
}
.manual-stat-card {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  padding: .86rem .92rem;
  min-width: 132px;
}
[data-theme="dark"] .manual-stat-card { background: rgba(255,255,255,.035); }
.manual-stat-card span { display: block; font-size: 1.35rem; font-weight: 900; letter-spacing: -.04em; }
.manual-stat-card strong { display: block; font-size: .78rem; color: var(--color-text-primary); }
.manual-stat-card p { margin: .12rem 0 0; color: var(--color-text-muted); font-size: .72rem; }
.manual-search-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
  padding: .82rem;
}
.manual-search-box { position: relative; }
.manual-search-box i {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.manual-search-box input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  min-height: 46px;
  padding: .52rem 1rem .52rem 2.55rem;
  font-weight: 700;
  outline: none;
}
.manual-search-box input:focus { border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 .22rem var(--color-accent-ring); }
.manual-search-results {
  position: absolute;
  left: .82rem;
  right: .82rem;
  top: calc(100% - .3rem);
  z-index: 20;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 370px;
  overflow-y: auto;
}
.manual-search-empty { padding: 1rem; color: var(--color-text-secondary); text-align: center; }
.manual-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 260px;
  gap: 1rem;
  align-items: start;
}
.manual-nav-panel,
.manual-main-panel,
.manual-side-panel { min-width: 0; }
.manual-nav-panel,
.manual-side-card,
.manual-main-panel {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
}
.manual-nav-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
  max-height: calc(100vh - var(--topbar-height) - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.manual-nav-header {
  padding: .86rem .95rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.manual-nav-header strong { font-weight: 850; }
.manual-nav-header span { color: var(--color-text-muted); font-size: .72rem; font-weight: 750; }
.manual-nav-list { padding: .7rem; overflow: auto; }
.manual-nav-group + .manual-nav-group { margin-top: .8rem; }
.manual-nav-group-title {
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--color-text-muted);
  margin: 0 0 .38rem .34rem;
}
.manual-nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .54rem .58rem;
  color: var(--color-text-secondary);
  border-radius: 13px;
  font-weight: 750;
  font-size: .82rem;
  line-height: 1.25;
}
.manual-nav-link i { flex: 0 0 18px; color: var(--color-text-muted); }
.manual-nav-link:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.manual-nav-link.active { background: var(--color-accent-soft); color: var(--color-accent); box-shadow: inset 3px 0 0 var(--color-accent); }
.manual-nav-link.active i { color: var(--color-accent); }
.manual-main-panel { padding: 0; overflow: hidden; }
.manual-article { padding: 1.15rem; }
.manual-article-header {
  display: flex;
  gap: .95rem;
  padding: 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 16rem),
    var(--color-card-bg-soft);
  margin-bottom: 1rem;
}
.manual-article-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.manual-article-header h1 { margin: .22rem 0 .28rem; font-size: 1.55rem; font-weight: 900; letter-spacing: -.035em; }
.manual-article-header p { color: var(--color-text-secondary); margin: 0; }
.manual-meta-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .72rem; }
.manual-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .22rem .48rem;
  color: var(--color-text-secondary);
  background: var(--color-card-bg);
  font-size: .7rem;
  font-weight: 750;
}
.manual-learn-card,
.manual-access-card,
.manual-section,
.manual-feedback {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-card-bg);
  padding: 1rem;
  margin-bottom: 1rem;
}
.manual-learn-card { background: var(--color-card-bg-soft); }
.manual-learn-card h2 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 850; }
.manual-chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.manual-learn-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  padding: .36rem .64rem;
  font-weight: 800;
  font-size: .76rem;
}
.manual-section-title { display: flex; align-items: center; gap: .65rem; margin-bottom: .68rem; }
.manual-section-title h2 { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; }
.manual-section-type {
  border-radius: 999px;
  background: var(--color-rag-gray-bg);
  color: var(--color-text-secondary);
  padding: .18rem .46rem;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.manual-section p { color: var(--color-text-secondary); margin: 0 0 .68rem; }
.manual-section p:last-child { margin-bottom: 0; }
.manual-bullet-list,
.manual-step-list { color: var(--color-text-secondary); padding-left: 1.15rem; margin: .2rem 0 0; }
.manual-bullet-list li,
.manual-step-list li { margin: .3rem 0; }
.manual-callout,
.manual-takeaway {
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 16px;
  background: var(--color-accent-soft);
  color: var(--color-text-secondary);
  padding: .78rem .85rem;
  margin-top: .8rem;
}
.manual-callout strong { display: block; color: var(--color-accent); margin-bottom: .25rem; }
.manual-callout p { margin: 0; }
.manual-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.manual-access-grid > div {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: .85rem;
  background: var(--color-card-bg-soft);
}
.manual-access-grid h3 {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .55rem;
  font-size: .85rem;
  font-weight: 900;
}
.manual-access-grid h3 i { color: var(--color-accent); }
.manual-access-grid ul { padding-left: 1rem; margin: 0; color: var(--color-text-primary); }
.manual-access-grid li { margin: .42rem 0; font-weight: 750; }
.manual-access-grid li span { display: block; color: var(--color-text-secondary); font-size: .72rem; font-weight: 550; }
.manual-muted { color: var(--color-text-muted) !important; font-size: .78rem; margin: 0; }
.manual-action-list { display: grid; gap: .68rem; }
.manual-action-row {
  display: flex;
  gap: .75rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: .85rem;
  background: var(--color-card-bg-soft);
}
.manual-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.manual-action-row strong { display: block; font-size: .88rem; }
.manual-action-row p { margin: .15rem 0 0; color: var(--color-text-secondary); }
.manual-example-line {
  display: inline-flex;
  margin-top: .45rem;
  color: var(--color-text-muted);
  font-size: .74rem;
  font-weight: 700;
}
.manual-term-grid,
.manual-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.manual-term-card,
.manual-example-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: .85rem;
  background: var(--color-card-bg-soft);
}
.manual-term-card strong,
.manual-example-card h3 { display: block; margin: 0 0 .35rem; font-size: .88rem; font-weight: 900; }
.manual-term-card p,
.manual-example-card p { margin: 0 0 .5rem; color: var(--color-text-secondary); }
.manual-takeaway { display: flex; gap: .45rem; align-items: flex-start; margin-top: .65rem; font-size: .78rem; font-weight: 750; }
.manual-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-card-bg-soft);
}
.manual-feedback strong { display: block; }
.manual-feedback p { margin: .14rem 0 0; color: var(--color-text-muted); font-size: .76rem; }
.manual-feedback-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.manual-side-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
  display: grid;
  gap: .8rem;
}
.manual-side-card { padding: .9rem; }
.manual-side-card strong { display: block; margin-bottom: .55rem; font-size: .82rem; font-weight: 900; }
.manual-side-card a {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-secondary);
  padding: .38rem 0;
  font-size: .78rem;
  font-weight: 750;
}
.manual-side-card a:hover { color: var(--color-accent); }
.manual-side-card p { color: var(--color-text-secondary); font-size: .76rem; margin: 0 0 .5rem; }
.manual-health-card summary { cursor: pointer; color: var(--color-accent); font-weight: 800; font-size: .76rem; }
.manual-health-card ul { margin: .5rem 0 0; padding-left: 1rem; color: var(--color-text-secondary); font-size: .72rem; }
.manual-empty-state { min-height: 420px; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--color-text-secondary); }
.manual-empty-state i { font-size: 2.5rem; color: var(--color-text-muted); }
.manual-empty-state h2 { margin: .75rem 0 .2rem; color: var(--color-text-primary); font-weight: 900; }

body[data-page-slug="manual"] .portal-content-inner { max-width: none; }

@media (max-width: 1300px) {
  .manual-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .manual-side-panel { grid-column: 1 / -1; position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .manual-hero { grid-template-columns: 1fr; }
  .manual-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manual-layout { grid-template-columns: 1fr; }
  .manual-nav-panel { position: static; max-height: none; }
  .manual-nav-list { max-height: 360px; }
  .manual-side-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .portal-help-drawer { width: 100vw; }
  .manual-hero-stats { grid-template-columns: 1fr; }
  .manual-article { padding: .82rem; }
  .manual-article-header { flex-direction: column; }
  .manual-access-grid,
  .manual-term-grid,
  .manual-example-grid { grid-template-columns: 1fr; }
  .manual-feedback { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   RBAC-aware Manual & Contextual Help Center
   ============================================================ */
.manual-help-topbar-btn.active,
.manual-help-topbar-btn[aria-expanded="true"] {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.34);
  color: var(--color-accent);
}
.manual-drawer-backdrop[hidden] { display: none !important; }
.manual-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1088;
  background: rgba(15,23,42,.36);
  backdrop-filter: blur(3px);
}
.manual-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1092;
  width: min(470px, calc(100vw - 18px));
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%);
  transition: transform .22s ease;
  color: var(--color-text-primary);
}
.manual-drawer.open { transform: translateX(0); }
.manual-drawer-header,
.manual-drawer-footer {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-drawer-footer {
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  font-size: .78rem;
  color: var(--color-text-muted);
}
.manual-drawer-footer kbd {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  color: var(--color-text-secondary);
  border-radius: 6px;
  padding: .08rem .28rem;
  box-shadow: none;
}
.manual-drawer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .065em;
}
.manual-drawer-header h2 {
  margin: .12rem 0 0;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.02em;
}
.manual-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.manual-drawer-close:hover,
.manual-drawer-close:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: rgba(37,99,235,.28);
}
.manual-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.manual-drawer-topic,
.manual-drawer-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg-soft);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
}
.manual-drawer-topic-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
}
.manual-drawer-topic-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  flex: 0 0 auto;
}
.manual-drawer-topic-head span:not(.manual-drawer-topic-icon) {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--color-text-muted);
}
.manual-drawer-topic h3 {
  margin: .05rem 0 0;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.02em;
}
.manual-drawer-topic p {
  color: var(--color-text-secondary);
  margin: 0 0 .9rem;
}
.manual-drawer-actions,
.manual-drawer-section h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.manual-drawer-section h4 {
  justify-content: space-between;
  margin: 0 0 .7rem;
  font-size: .84rem;
  font-weight: 850;
  color: var(--color-text-primary);
}
.manual-drawer-mini-title {
  display: block;
  color: var(--color-text-primary);
  font-size: .78rem;
  margin-bottom: .45rem;
}
.manual-drawer-point-list,
.manual-drawer-access-list,
.manual-drawer-link-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.manual-drawer-point-list { padding-left: 1.05rem; color: var(--color-text-secondary); }
.manual-drawer-access-row,
.manual-drawer-link-list a {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .58rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  font-size: .82rem;
}
.manual-drawer-access-row.allowed i { color: var(--color-rag-green); }
.manual-drawer-access-row.denied i { color: var(--color-text-muted); }
.manual-drawer-link-list a:hover {
  border-color: rgba(37,99,235,.30);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.manual-drawer-link-list i { flex: 0 0 auto; margin-top: .12rem; }

.manual-page { display: grid; gap: 1rem; }
.manual-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.13), transparent 30rem),
    linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-sm);
}
.manual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 999px;
  padding: .24rem .55rem;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.manual-hero h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  font-weight: 880;
  letter-spacing: -.045em;
  color: var(--color-text-primary);
}
.manual-hero p {
  max-width: 840px;
  margin: .42rem 0 0;
  color: var(--color-text-secondary);
  font-size: .95rem;
}
.manual-search-form {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: 920px;
  padding: .55rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
}
.manual-search-form > i { color: var(--color-text-muted); margin-left: .35rem; }
.manual-search-form input[type="text"],
.manual-search-form input[name="q"],
.manual-search-form input:not([type]) {
  flex: 1;
  min-width: 140px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 650;
}
.manual-search-form input::placeholder { color: var(--color-text-muted); }
.manual-hero-side {
  display: grid;
  grid-template-columns: repeat(1, minmax(135px, 1fr));
  gap: .65rem;
  min-width: 170px;
}
.manual-stat-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  padding: .85rem;
  display: grid;
  gap: .18rem;
  box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .manual-stat-card { background: rgba(15,23,42,.42); }
.manual-stat-card-accent { border-color: rgba(37,99,235,.28); background: var(--color-accent-soft); }
.manual-stat-value { font-size: 1.55rem; font-weight: 880; line-height: 1; letter-spacing: -.035em; color: var(--color-text-primary); }
.manual-stat-label { color: var(--color-text-secondary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.manual-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
}
.manual-module-filter { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.manual-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 32px;
  padding: .36rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg-soft);
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 780;
}
.manual-filter-chip:hover,
.manual-filter-chip.active {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.28);
}
.manual-role-preview {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 780;
}
.manual-role-preview select {
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  padding: .25rem .55rem;
}
.manual-preview-banner,
.manual-alert {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.manual-preview-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(37,99,235,.22);
  background: var(--color-accent-soft);
  color: var(--color-text-secondary);
}
.manual-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 300px);
  gap: 1rem;
  align-items: start;
}
.manual-nav-panel,
.manual-context-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--topbar-height) - 2rem);
  overflow: auto;
}
.manual-nav-panel,
.manual-toc-card,
.manual-access-card,
.manual-related-card,
.manual-results-card,
.manual-coverage-card,
.manual-article-card,
.manual-empty-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-sm);
}
.manual-nav-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem .95rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.manual-nav-header strong { font-size: .86rem; }
.manual-nav-header span { color: var(--color-text-muted); font-size: .72rem; font-weight: 850; }
.manual-nav-groups { padding: .55rem; display: grid; gap: .45rem; }
.manual-nav-group {
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-card-bg-soft);
  overflow: hidden;
}
.manual-nav-group summary {
  cursor: pointer;
  padding: .62rem .7rem;
  color: var(--color-text-secondary);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.manual-nav-group ul { list-style: none; margin: 0; padding: 0 .35rem .38rem; display: grid; gap: .16rem; }
.manual-nav-group a {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 36px;
  padding: .46rem .5rem;
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 700;
}
.manual-nav-group a:hover,
.manual-nav-group a.active {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.manual-nav-group a i { width: 18px; text-align: center; flex: 0 0 auto; }
.manual-main { display: grid; gap: 1rem; min-width: 0; }
.manual-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-section-head h3 { margin: 0; font-size: 1rem; font-weight: 850; }
.manual-section-head p { margin: .18rem 0 0; color: var(--color-text-muted); font-size: .8rem; }
.manual-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem;
}
.manual-topic-card {
  display: flex;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-card-bg-soft);
  color: var(--color-text-primary);
}
.manual-topic-card:hover {
  border-color: rgba(37,99,235,.30);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.manual-topic-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.manual-topic-card-body { display: grid; gap: .12rem; min-width: 0; }
.manual-topic-card-body strong { font-weight: 850; }
.manual-topic-card-body small { color: var(--color-text-muted); font-weight: 750; }
.manual-topic-card-body span { color: var(--color-text-secondary); font-size: .8rem; }
.manual-empty-inline {
  margin: 1rem;
  padding: 1rem;
  border: 1px dashed var(--color-border-hover);
  border-radius: 14px;
  color: var(--color-text-secondary);
  display: flex;
  gap: .6rem;
  align-items: center;
}
.manual-article-card { overflow: hidden; }
.manual-article-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1.15rem;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.11), transparent 24rem),
    linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-article-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 1.25rem;
}
.manual-article-kicker {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
  margin-bottom: .25rem;
}
.manual-article-header h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.35rem;
  font-weight: 880;
  letter-spacing: -.035em;
}
.manual-article-header p { margin: .35rem 0 0; color: var(--color-text-secondary); }
.manual-meta-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.manual-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .22rem .48rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 750;
}
.manual-open-page-btn { white-space: nowrap; }
.manual-article-body { padding: 1.1rem; display: grid; gap: 1rem; }
.manual-article-section {
  scroll-margin-top: calc(var(--topbar-height) + 1.25rem);
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-card-bg-soft);
}
.manual-article-section h4 {
  margin: 0 0 .7rem;
  font-size: .98rem;
  font-weight: 850;
  color: var(--color-text-primary);
}
.manual-point-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .45rem;
  color: var(--color-text-secondary);
}
.manual-definition-list { display: grid; gap: .65rem; }
.manual-definition-list > div {
  padding: .7rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-card-bg);
}
.manual-definition-list dt { font-weight: 850; color: var(--color-text-primary); }
.manual-definition-list dd { margin: .18rem 0 0; color: var(--color-text-secondary); }
.manual-permission-list { display: grid; gap: .55rem; }
.manual-permission-row {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .72rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-card-bg);
}
.manual-permission-row code {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 8px;
  padding: .18rem .38rem;
  width: fit-content;
}
.manual-permission-row strong { display: block; color: var(--color-text-primary); }
.manual-permission-row span { display: block; color: var(--color-text-secondary); font-size: .8rem; margin-top: .12rem; }
.manual-article-footer {
  padding: .95rem 1.1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
}
.manual-feedback {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  color: var(--color-text-secondary);
  font-weight: 750;
}
.manual-feedback-status { color: var(--color-rag-green); font-size: .8rem; }
.manual-context-panel { display: grid; gap: 1rem; }
.manual-toc-card,
.manual-access-card,
.manual-related-card { padding: .95rem; }
.manual-toc-card h4,
.manual-access-card h4,
.manual-related-card h4 {
  margin: 0 0 .65rem;
  font-size: .84rem;
  font-weight: 850;
  color: var(--color-text-primary);
}
.manual-toc-card nav,
.manual-related-list,
.manual-access-list { display: grid; gap: .35rem; }
.manual-toc-card a,
.manual-related-list a,
.manual-access-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .55rem;
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 700;
}
.manual-toc-card a:hover,
.manual-related-list a:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.manual-access-row { border: 1px solid var(--color-border); background: var(--color-card-bg-soft); }
.manual-access-row.allowed i { color: var(--color-rag-green); }
.manual-access-row.denied i { color: var(--color-text-muted); }
.manual-coverage-card { overflow: hidden; }
.manual-coverage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 850;
}
.manual-missing-routes { padding: 1rem; display: grid; gap: .45rem; }
.manual-missing-routes > div {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .55rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card-bg-soft);
}
.manual-missing-routes code { color: var(--color-text-primary); }
.manual-missing-routes span { color: var(--color-text-secondary); }
.manual-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-secondary);
}
.manual-empty-state i { font-size: 2.2rem; opacity: .45; }
.manual-empty-state h3 { margin: .7rem 0 .25rem; color: var(--color-text-primary); font-weight: 850; }

@media (max-width: 1299.98px) {
  .manual-layout { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .manual-context-panel { grid-column: 1 / -1; position: static; max-height: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .manual-hero { grid-template-columns: 1fr; }
  .manual-hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manual-layout { grid-template-columns: 1fr; }
  .manual-nav-panel { position: static; max-height: none; }
  .manual-context-panel { grid-template-columns: 1fr; }
  .manual-topic-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .manual-drawer { width: min(440px, 100vw); }
  .manual-hero { padding: 1rem; }
  .manual-search-form { align-items: stretch; flex-wrap: wrap; }
  .manual-search-form input[name="q"] { flex-basis: calc(100% - 2.2rem); }
  .manual-hero-side { grid-template-columns: 1fr; }
  .manual-toolbar-card { align-items: stretch; }
  .manual-role-preview { width: 100%; justify-content: space-between; }
  .manual-role-preview select { flex: 1; }
  .manual-article-header { grid-template-columns: auto minmax(0, 1fr); }
  .manual-open-page-btn { grid-column: 1 / -1; justify-self: start; }
  .manual-permission-row,
  .manual-missing-routes > div { grid-template-columns: 1fr; }
}
@media print {
  .manual-nav-panel,
  .manual-context-panel,
  .manual-toolbar-card,
  .manual-feedback,
  .manual-drawer,
  .manual-drawer-backdrop { display: none !important; }
  .manual-layout { display: block; }
  .manual-article-card,
  .manual-article-section,
  .manual-hero { box-shadow: none; border-color: #CCCCCC; }
}
.manual-rich-point {
  display: grid;
  gap: .22rem;
}
.manual-rich-point strong {
  color: var(--color-text-primary);
  font-weight: 850;
}
.manual-rich-point span {
  display: block;
}
.manual-rich-point em {
  display: block;
  color: var(--color-accent);
  font-style: normal;
  font-weight: 750;
}

/* ============================================================
   Manual center visual refinement: slimmer hero, cleaner topic
   header, and explicit feedback card.
   ============================================================ */
body[data-page-slug="manual"] .portal-content-inner {
  max-width: none;
  padding-top: 1rem;
}
.manual-page {
  gap: .9rem;
}
.manual-page .manual-hero {
  grid-template-columns: 1fr;
  align-items: start;
  padding: 1.2rem 1.25rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(37,99,235,.12), transparent 24rem),
    linear-gradient(135deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-hero-main {
  max-width: 1040px;
}
.manual-page .manual-hero h2 {
  max-width: 780px;
}
.manual-page .manual-hero p {
  max-width: 860px;
}
.manual-page .manual-hero-side {
  display: none !important;
}
.manual-page .manual-search-form {
  max-width: 940px;
  min-height: 56px;
  border-radius: 18px;
  padding: .48rem .55rem;
}
.manual-search-form input[type="search"] {
  flex: 1;
  min-width: 180px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 650;
}
.manual-toolbar-card {
  padding: .7rem .8rem;
  border-radius: 18px;
}
.manual-toolbar-main {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex-wrap: wrap;
}
.manual-toolbar-label,
.manual-role-preview label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
}
.manual-module-filter {
  min-width: 0;
}
.manual-filter-chip {
  min-height: 30px;
  padding: .32rem .62rem;
  box-shadow: none;
}
.manual-layout {
  gap: .9rem;
}
.manual-nav-panel,
.manual-toc-card,
.manual-access-card,
.manual-related-card,
.manual-results-card,
.manual-coverage-card,
.manual-article-card,
.manual-empty-state {
  border-radius: 18px;
  box-shadow: var(--shadow-xs);
}
.manual-nav-header {
  padding: .75rem .9rem;
  border-radius: 18px 18px 0 0;
}
.manual-article-card {
  background: var(--color-card-bg);
}
.manual-article-header {
  padding: 1rem;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: .85rem;
  background:
    radial-gradient(circle at 95% 0%, rgba(37,99,235,.09), transparent 18rem),
    linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-article-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 1.08rem;
}
.manual-article-kicker {
  margin-bottom: .16rem;
}
.manual-article-header h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.38rem);
  line-height: 1.12;
}
.manual-article-header p {
  max-width: 860px;
  margin-top: .28rem;
}
.manual-meta-row {
  margin-top: .62rem;
}
.manual-open-page-btn {
  align-self: start;
  box-shadow: var(--shadow-xs);
}
.manual-article-body {
  padding: 1rem;
  gap: .85rem;
}
.manual-article-section {
  border-radius: 14px;
  padding: .9rem .95rem;
}
.manual-article-footer {
  padding: 1rem;
  background: linear-gradient(180deg, var(--color-card-bg), var(--color-card-bg-soft));
}
.manual-feedback-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-card-bg);
  padding: .9rem;
  box-shadow: var(--shadow-xs);
}
.manual-feedback-copy strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: 850;
}
.manual-feedback-copy p {
  margin: .2rem 0 0;
  color: var(--color-text-muted);
  font-size: .8rem;
  line-height: 1.45;
}
.manual-feedback-controls {
  display: grid;
  gap: .5rem;
}
.manual-feedback-comment {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  padding: .55rem .65rem;
  outline: none;
  font-size: .82rem;
}
.manual-feedback-comment:focus {
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 .18rem var(--color-accent-ring);
}
.manual-feedback-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.manual-feedback-status {
  color: var(--color-rag-green);
  font-size: .8rem;
  font-weight: 750;
}
.portal-help-feedback-note {
  margin: -.2rem 0 .55rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.35;
}
@media (max-width: 991.98px) {
  .manual-page .manual-hero {
    padding: 1rem;
  }
  .manual-toolbar-main {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .manual-article-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .manual-feedback-card {
    grid-template-columns: 1fr;
  }
  .manual-search-form input[type="search"] {
    flex-basis: calc(100% - 2.2rem);
  }
}
@media print {
  .manual-feedback-card { display: none !important; }
}

/* ============================================================
   Manual feedback analytics + bootstrap-admin user inspection
   ============================================================ */
.topbar-run-chip {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.topbar-run-chip:hover,
.topbar-run-chip:focus-visible {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.28);
  color: var(--color-accent);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
  outline: none;
}
.topbar-inspection-wrap { z-index: 1030; }
.topbar-inspection-trigger {
  min-width: 174px;
  color: var(--color-accent);
  border-color: rgba(37,99,235,.22);
  background: linear-gradient(135deg, var(--color-card-bg), var(--color-accent-soft));
}
.topbar-inspection-chip {
  min-width: 220px;
  max-width: 360px;
  height: 38px;
  border-color: rgba(245,158,11,.38);
  background: linear-gradient(135deg, rgba(245,158,11,.16), var(--color-card-bg));
  color: var(--color-text-primary);
}
.topbar-inspection-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  flex: 0 0 auto;
}
.topbar-inspection-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-inspection-return {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: var(--color-accent);
  font-weight: 850;
  flex: 0 0 auto;
}
.inspection-popover-panel {
  width: min(420px, calc(100vw - 2rem));
  max-height: min(520px, calc(100vh - 5rem));
  padding: 0;
  overflow: hidden;
}
.inspection-search-box {
  margin: .85rem .9rem .6rem;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-input-bg);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .75rem;
}
.inspection-search-box i { color: var(--color-text-muted); }
.inspection-search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: .86rem;
  font-weight: 650;
  width: 100%;
  min-width: 0;
}
.inspection-results {
  display: grid;
  gap: .45rem;
  padding: 0 .9rem .85rem;
  overflow: auto;
  max-height: 310px;
}
.inspection-empty {
  padding: 1rem;
  border: 1px dashed var(--color-border-hover);
  border-radius: 14px;
  color: var(--color-text-muted);
  background: var(--color-card-bg-soft);
  font-size: .82rem;
  text-align: center;
}
.inspection-user-option {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .62rem .7rem;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.inspection-user-option:hover,
.inspection-user-option:focus-visible {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.28);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
  outline: none;
}
.inspection-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: .78rem;
  font-weight: 850;
}
.inspection-user-meta { display: grid; min-width: 0; }
.inspection-user-meta strong {
  font-size: .86rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspection-user-meta small {
  color: var(--color-text-muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspection-popover-footer {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .72rem .9rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  color: var(--color-text-muted);
  font-size: .76rem;
  line-height: 1.35;
}
.inspection-reason-target {
  padding: .72rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-card-bg-soft);
  color: var(--color-text-primary);
  font-weight: 800;
  margin-bottom: .85rem;
}
.manual-page .manual-article-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.manual-page .manual-article-header {
  border: 0;
  border-radius: 0;
  padding: .35rem 0 1rem;
  background: transparent;
}
.manual-page .manual-article-body {
  padding: 0;
  gap: .72rem;
}
.manual-page .manual-article-section {
  background: var(--color-card-bg-soft);
  box-shadow: none;
}
.manual-page .manual-article-body .manual-article-section:first-child {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.manual-page .manual-article-footer {
  padding: .85rem 0 0;
  border-top: 0;
  background: transparent;
}
.manual-feedback-card {
  grid-template-columns: 1fr !important;
  gap: .8rem;
  padding: 1rem;
}
.manual-feedback-copy { text-align: left; }
.manual-feedback-controls {
  grid-template-columns: 1fr;
  gap: .72rem;
}
.manual-feedback-comment {
  width: 100%;
  min-height: 84px;
}
.manual-feedback-actions {
  justify-content: center;
  gap: 1.1rem;
}
.manual-feedback-actions .btn {
  min-width: 132px;
}
.manual-feedback-status {
  display: block;
  min-height: 1.1rem;
  text-align: center;
}
.manual-feedback-admin-page { display: grid; gap: 1rem; }
.feedback-admin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(37,99,235,.10), transparent 22rem),
    linear-gradient(135deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-xs);
}
.feedback-admin-hero h2 {
  margin: .25rem 0 .25rem;
  color: var(--color-text-primary);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.045em;
}
.feedback-admin-hero p { margin: 0; color: var(--color-text-secondary); max-width: 780px; }
.feedback-admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.feedback-kpi-card {
  padding: .95rem;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
}
.feedback-kpi-card strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.feedback-kpi-card span {
  color: var(--color-text-muted);
  font-size: .74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.feedback-filter-card,
.feedback-topic-card,
.feedback-table-card {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.feedback-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .7fr) minmax(150px, 1fr) repeat(2, minmax(130px, .7fr)) auto;
  gap: .75rem;
  align-items: end;
}
.feedback-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.feedback-topic-list { display: grid; gap: .65rem; }
.feedback-topic-row {
  display: grid;
  gap: .5rem;
  padding: .72rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-card-bg-soft);
}
.feedback-topic-row-head { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.feedback-topic-row strong { color: var(--color-text-primary); font-size: .84rem; }
.feedback-topic-row small { color: var(--color-text-muted); font-size: .72rem; }
.feedback-topic-meter {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.feedback-topic-meter span { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
.feedback-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 92px;
  justify-content: center;
  padding: .24rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: .72rem;
  font-weight: 850;
}
.feedback-rating-pill.useful { color: var(--color-rag-green); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.20); }
.feedback-rating-pill.needs-work { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
.feedback-note-cell { max-width: 520px; white-space: normal; color: var(--color-text-secondary); }
.feedback-user-context { display: grid; gap: .15rem; }
.feedback-user-context small { color: var(--color-text-muted); }
@media (max-width: 1399.98px) {
  .topbar-inspection-trigger { min-width: 148px; }
  .topbar-inspection-chip { min-width: 190px; max-width: 300px; }
}
@media (max-width: 1199.98px) {
  .topbar-inspection-trigger span { display: none; }
  .topbar-inspection-trigger { min-width: 40px; width: 40px; padding: 0; }
  .topbar-inspection-chip { max-width: 240px; }
}
@media (max-width: 991.98px) {
  .feedback-admin-hero { flex-direction: column; }
  .feedback-admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-admin-grid { grid-template-columns: 1fr; }
  .feedback-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .topbar-inspection-chip { min-width: 0; max-width: 70vw; }
  .topbar-inspection-return { display: none; }
  .feedback-admin-kpis,
  .feedback-filter-grid { grid-template-columns: 1fr; }
  .manual-feedback-actions { gap: .65rem; }
  .manual-feedback-actions .btn { min-width: 118px; }
}
@media print {
  .topbar-inspection-wrap,
  .inspection-popover-panel,
  .feedback-filter-card { display: none !important; }
}
.feedback-topic-list { padding: .9rem; }
.feedback-topic-row span { color: var(--color-text-muted); font-size: .74rem; }
.feedback-empty-inline { padding: 1rem; color: var(--color-text-muted); }
.feedback-filter-actions { display: flex; gap: .45rem; align-items: center; }

/* ------------------------------------------------------------------
   Human-readable Security Center refinement (2026-06-27)
   ------------------------------------------------------------------ */
.security-human-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 34%),
    var(--color-card-bg);
  box-shadow: var(--shadow-sm);
}
.security-human-hero-copy h1 {
  margin: .25rem 0 .35rem;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--color-text-primary);
}
.security-human-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
}
.security-human-kicker,
.security-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: var(--color-text-muted);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.security-human-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .95rem;
}
.security-health-pill,
.security-soft-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .45rem .68rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}
.security-health-pill.is-success { color: var(--color-rag-green); background: var(--color-rag-green-bg); border-color: rgba(22,163,74,.24); }
.security-health-pill.is-warning { color: var(--color-rag-amber); background: var(--color-rag-amber-bg); border-color: rgba(217,119,6,.24); }
.security-health-pill.is-danger { color: var(--color-rag-red); background: var(--color-rag-red-bg); border-color: rgba(220,38,38,.24); }
.security-human-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: min(460px, 42vw);
}
.security-human-hero-actions .security-subnav { justify-content: flex-end; }

.security-attention-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.12rem;
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-xl);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-sm);
}
.security-attention-panel.is-success { border-left-color: var(--color-rag-green); }
.security-attention-panel.is-warning { border-left-color: var(--color-rag-amber); }
.security-attention-panel.is-danger { border-left-color: var(--color-rag-red); }
.security-attention-copy h2 {
  margin: .15rem 0 .32rem;
  font-size: clamp(1.22rem, 2vw, 1.58rem);
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--color-text-primary);
}
.security-attention-copy p {
  margin: 0;
  color: var(--color-text-secondary);
}
.security-attention-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.security-human-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
.security-focus-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.security-focus-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-accent);
}
.security-focus-card.is-success:before { background: var(--color-rag-green); }
.security-focus-card.is-warning:before { background: var(--color-rag-amber); }
.security-focus-card.is-danger:before { background: var(--color-rag-red); }
.security-focus-card:hover,
.security-focus-card:focus-visible {
  color: var(--color-text-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}
.security-focus-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 1.35rem;
}
.security-focus-card.is-success .security-focus-icon { color: var(--color-rag-green); background: var(--color-rag-green-bg); }
.security-focus-card.is-warning .security-focus-icon { color: var(--color-rag-amber); background: var(--color-rag-amber-bg); }
.security-focus-card.is-danger .security-focus-icon { color: var(--color-rag-red); background: var(--color-rag-red-bg); }
.security-focus-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.security-focus-title {
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.security-focus-value {
  margin-top: .2rem;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.045em;
}
.security-focus-meta {
  margin-top: .08rem;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 800;
}
.security-focus-message {
  margin-top: .58rem;
  color: var(--color-text-secondary);
  font-size: .88rem;
  line-height: 1.35;
}
.security-focus-link {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: auto;
  padding-top: .7rem;
  color: var(--color-accent);
  font-size: .82rem;
  font-weight: 900;
}

.security-insight-panel {
  padding: 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(37,99,235,.055), transparent 34%),
    var(--color-card-bg);
  box-shadow: var(--shadow-sm);
}
.security-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.security-insight-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: .82rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: 0 10px 22px rgba(15,23,42,.035);
}
.security-insight-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .58rem;
  align-items: flex-start;
  margin-bottom: .7rem;
}
.security-insight-card-icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  flex: 0 0 auto;
}
.security-insight-card h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: .95rem;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -.02em;
}
.security-insight-card p {
  margin: .18rem 0 0;
  color: var(--color-text-secondary);
  font-size: .78rem;
  line-height: 1.3;
}
.security-insight-list {
  display: grid;
  gap: .38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.security-insight-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main side" "meta side";
  gap: .08rem .58rem;
  align-items: center;
  padding: .52rem .56rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card-bg-soft);
}
.security-insight-main {
  grid-area: main;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-size: .83rem;
  font-weight: 900;
}
.security-insight-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 760;
}
.security-insight-side {
  grid-area: side;
  min-width: 4.4rem;
  text-align: right;
}
.security-insight-side strong,
.security-insight-side small {
  display: block;
  line-height: 1.08;
}
.security-insight-side strong {
  color: var(--color-accent);
  font-size: .95rem;
  font-weight: 950;
}
.security-insight-side small {
  margin-top: .2rem;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 750;
}
.security-insight-empty {
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .68rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card-bg-soft);
  color: var(--color-text-secondary);
  font-size: .8rem;
  line-height: 1.35;
}
.security-insight-empty i { color: var(--color-rag-green); }
.security-insight-more {
  margin-top: .42rem;
  color: var(--color-text-muted);
  font-size: .74rem;
  font-weight: 850;
  text-align: center;
}
.security-insight-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  margin-top: auto;
  padding-top: .65rem;
  color: var(--color-accent);
  font-size: .8rem;
  font-weight: 900;
  text-decoration: none;
}
.security-insight-open:hover,
.security-insight-open:focus-visible {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.security-section-card {
  padding: 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-sm);
}
.security-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .95rem;
}
.security-section-heading.compact { margin-bottom: .7rem; }
.security-section-heading h2 {
  margin: .18rem 0 .22rem;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--color-text-primary);
}
.security-section-heading p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .92rem;
}
.security-chart-card {
  height: 100%;
  padding: .88rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg-soft);
}
.security-chart-card h3,
.security-readable-list h3,
.security-mini-block h3 {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 900;
  color: var(--color-text-primary);
}
.security-chart-card p {
  margin: 0 0 .65rem;
  color: var(--color-text-secondary);
  font-size: .84rem;
}
.security-chart-wrap { height: 190px; }
.security-chart-wrap.is-short { height: 160px; }
.security-empty-note,
.security-muted-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .4rem 0 0;
  padding: .75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: var(--color-card-bg);
  font-size: .86rem;
}
.security-fact-list,
.security-mini-block {
  display: grid;
  gap: .45rem;
}
.security-mini-block {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--color-border);
}
.security-fact-row,
.security-scheduler-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .68rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card-bg-soft);
}
.security-fact-row span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-secondary);
  font-size: .86rem;
  font-weight: 760;
}
.security-fact-row strong {
  color: var(--color-text-primary);
  font-weight: 950;
}
.security-scheduler-list {
  display: grid;
  gap: .38rem;
  margin-top: .5rem;
}
.security-scheduler-row code {
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.security-mini-status {
  padding: .16rem .42rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.security-mini-status.is-success { color: var(--color-rag-green); background: var(--color-rag-green-bg); }
.security-mini-status.is-danger { color: var(--color-rag-red); background: var(--color-rag-red-bg); }
.security-readable-list {
  height: 100%;
  padding: .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg-soft);
}
.security-readable-row {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .58rem 0;
  border-top: 1px solid var(--color-border);
}
.security-readable-row:first-of-type { margin-top: .55rem; }
.security-readable-row strong,
.security-readable-row span {
  display: block;
}
.security-readable-row strong {
  color: var(--color-text-primary);
  font-size: .88rem;
}
.security-readable-row span,
.security-readable-row time {
  color: var(--color-text-secondary);
  font-size: .78rem;
}
.security-readable-row time {
  white-space: nowrap;
  font-weight: 800;
}
.security-workbench-intro {
  margin: 1.25rem 0 .7rem;
  padding: 0 .2rem;
}
.security-workbench-intro h2 {
  margin: .18rem 0 .25rem;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.035em;
}
.security-workbench-intro p {
  margin: 0;
  color: var(--color-text-secondary);
}
.security-workbench-tabs {
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-card-bg);
  padding: .35rem .35rem 0;
}
.security-workbench-tabs .nav-link {
  border: 0 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  color: var(--color-text-secondary) !important;
  font-weight: 900;
}
.security-workbench-tabs .nav-link.active {
  background: var(--color-card-bg-soft) !important;
  color: var(--color-text-primary) !important;
}
.security-workbench-card {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

@media (max-width: 1199.98px) {
  .security-human-grid,
  .security-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-human-hero { grid-template-columns: 1fr; }
  .security-human-hero-actions { justify-content: flex-start; min-width: 0; }
  .security-human-hero-actions .security-subnav { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .security-attention-panel { grid-template-columns: 1fr; }
  .security-attention-actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .security-human-grid,
  .security-insight-grid { grid-template-columns: 1fr; }
  .security-human-hero,
  .security-section-card,
  .security-attention-panel { border-radius: var(--radius-lg); }
  .security-focus-card { grid-template-columns: 1fr; }
  .security-focus-icon { width: 42px; height: 42px; border-radius: 14px; }
}
.security-table-intro h3 {
  margin: 0 0 .18rem;
  color: var(--color-text-primary);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.security-table-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .9rem;
}

/* ------------------------------------------------------------------
   Human-readable Security subpages refinement (2026-06-27)
   ------------------------------------------------------------------ */
.security-filter-panel {
  padding: .95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg-soft);
}
.security-filter-panel .form-label {
  color: var(--color-text-secondary);
  font-weight: 850;
  letter-spacing: .01em;
}
.security-section-card .table-responsive {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
}
.security-section-card .portal-table,
.security-section-card .table {
  margin-bottom: 0;
}
.security-list-scroll {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
}
.security-list-scroll .list-group-item {
  background: transparent;
  border-color: var(--color-border);
}
.security-monitor-controls .badge {
  align-self: center;
}
.security-monitor-controls.mt-2 {
  justify-content: flex-end;
}
@media (max-width: 1199.98px) {
  .security-monitor-controls.mt-2 { justify-content: flex-start; }
}

/* ------------------------------------------------------------------
   Security insight drilldowns: show the people/sources behind KPI cards
   ------------------------------------------------------------------ */
button.security-focus-card {
  width: 100%;
  border: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
button.security-focus-card:hover,
button.security-focus-card:focus-visible,
.security-focus-card.is-selected {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  box-shadow: 0 16px 34px rgba(37, 99, 235, .13);
  transform: translateY(-1px);
}
button.security-focus-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  outline-offset: 3px;
}
.security-insight-deck {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.security-insight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .35rem 0 1rem;
}
.security-insight-tab {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 850;
  padding: .46rem .82rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.security-insight-tab:hover,
.security-insight-tab:focus-visible,
.security-insight-tab.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card-bg));
  box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
}
.security-insight-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  outline-offset: 2px;
}
.security-insight-pane {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  padding: 1rem;
}
.security-insight-pane[hidden] {
  display: none !important;
}
.security-insight-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .95rem;
}
.security-insight-pane-head h3 {
  margin: 0 0 .2rem;
  color: var(--color-text-primary);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.security-insight-pane-head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .9rem;
}
.security-insight-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.security-insight-group {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg-soft);
  padding: .85rem;
}
.security-insight-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.security-insight-group-title span {
  color: var(--color-text-primary);
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.security-insight-group-title small {
  color: var(--color-text-muted);
  font-weight: 750;
  white-space: nowrap;
}
.security-insight-list {
  display: grid;
  gap: .5rem;
}
.security-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .62rem .68rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--color-card-bg);
}
.security-insight-row-main {
  min-width: 0;
}
.security-insight-row-main strong {
  display: block;
  color: var(--color-text-primary);
  font-size: .9rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.security-insight-row-main span {
  display: block;
  color: var(--color-text-secondary);
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.security-insight-row-side {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  white-space: nowrap;
}
.security-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-card-bg));
  color: var(--color-primary);
  font-weight: 900;
  padding: .16rem .48rem;
}
.security-insight-empty {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 3.2rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-success) 4%, var(--color-card-bg));
  padding: .75rem;
  font-size: .86rem;
}
.security-insight-empty i {
  color: var(--color-success);
}
@media (max-width: 1199.98px) {
  .security-insight-groups { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .security-insight-pane-head { display: block; }
  .security-insight-pane-head .btn { margin-top: .75rem; }
}
.security-insight-card.is-selected {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  box-shadow: 0 16px 34px rgba(37, 99, 235, .12);
}
.security-insight-pane[hidden] {
  display: none !important;
}

/* ============================================================
   Portal polish v42: square logo placeholder, aligned topbar,
   contextual feedback, and feedback analytics.
   ============================================================ */
:root {
  --portal-topbar-height: 72px;
  --portal-brand-logo-size: 3.25rem;
}
.portal-topbar {
  min-height: var(--portal-topbar-height) !important;
}
.sidebar-brand {
  min-height: var(--portal-topbar-height) !important;
  padding: .55rem .85rem !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-brand-link {
  min-height: calc(var(--portal-topbar-height) - 1.1rem) !important;
  gap: .78rem !important;
  align-items: center !important;
}
.sidebar-logo.has-icon,
.sidebar-logo.has-img,
.sidebar-logo.has-image,
.sidebar-logo.has-img.has-image,
html.sidebar-collapsed .sidebar-logo.has-img,
html.sidebar-collapsed .sidebar-logo.has-image,
html.sidebar-collapsed .sidebar-logo.has-img.has-image {
  width: var(--portal-brand-logo-size) !important;
  height: var(--portal-brand-logo-size) !important;
  min-width: var(--portal-brand-logo-size) !important;
  flex: 0 0 var(--portal-brand-logo-size) !important;
  border-radius: 1.08rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.sidebar-logo.has-image .sidebar-logo-full,
.sidebar-logo.has-img > img:first-child,
html.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-full,
html.sidebar-collapsed .sidebar-logo.has-img img:first-child {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: .48rem !important;
  transform: none !important;
}
.sidebar-logo.has-image .sidebar-logo-mark,
html.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-mark {
  display: none !important;
}
.sidebar-brand-name {
  white-space: normal !important;
}
@media (max-width: 767.98px) {
  :root { --portal-topbar-height: 64px; --portal-brand-logo-size: 3rem; }
}

.portal-help-feedback-card .manual-feedback-controls {
  gap: .65rem;
}
.portal-help-feedback-card .manual-feedback-actions {
  justify-content: flex-start;
  gap: .5rem;
}
.portal-help-feedback-card .manual-feedback-actions .btn {
  min-width: auto;
}
.portal-help-feedback-card .manual-feedback-status {
  text-align: left;
}
.feedback-analytics-page {
  display: grid;
  gap: 1rem;
}
.feedback-human-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 6%, rgba(37,99,235,.13), transparent 22rem),
    linear-gradient(135deg, var(--color-card-bg), var(--color-card-bg-soft));
  box-shadow: var(--shadow-xs);
}
.feedback-human-hero-copy h2 {
  margin: .35rem 0 .35rem;
  color: var(--color-text-primary);
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  font-weight: 950;
  letter-spacing: -.055em;
}
.feedback-human-hero-copy p {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 840px;
  line-height: 1.55;
}
.feedback-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.feedback-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .42rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 850;
}
.feedback-guidance-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(16,185,129,.05));
}
.feedback-guidance-panel strong {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-primary);
  margin-bottom: .25rem;
}
.feedback-guidance-panel p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .86rem;
  line-height: 1.5;
}
.feedback-guidance-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}
.feedback-guidance-steps span {
  padding: .36rem .55rem;
  border-radius: 999px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: .74rem;
  font-weight: 850;
  white-space: nowrap;
}
.feedback-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1rem;
  align-items: start;
}
.feedback-line-chart {
  display: grid;
  gap: .7rem;
}
.feedback-line-chart-svg {
  width: 100%;
  height: 240px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(37,99,235,.035), transparent 58%),
    var(--color-card-bg-soft);
  overflow: visible;
}
.feedback-line-grid {
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: .85;
}
.feedback-line-total {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-line-needs {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-line-dot {
  stroke: var(--color-card-bg);
  stroke-width: 2;
}
.feedback-line-dot.total {
  fill: var(--color-accent);
}
.feedback-line-dot.needs {
  fill: #f59e0b;
}
.feedback-line-label {
  fill: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
}
.feedback-line-legend,
.feedback-line-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 800;
}
.feedback-line-legend span,
.feedback-line-summary span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.feedback-line-swatch {
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  display: inline-block;
}
.feedback-line-swatch.total {
  background: var(--color-accent);
}
.feedback-line-swatch.needs {
  background: #f59e0b;
}
.feedback-attention-list,
.feedback-page-list {
  display: grid;
  gap: .65rem;
}
.feedback-attention-item {
  display: grid;
  gap: .4rem;
  padding: .75rem;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-card-bg-soft);
}
.feedback-attention-item strong,
.feedback-page-row strong,
.feedback-topic-title {
  display: block;
  color: var(--color-text-primary);
  font-size: .86rem;
}
.feedback-attention-item span,
.feedback-page-row span,
.feedback-topic-title + small {
  display: block;
  color: var(--color-text-muted);
  font-size: .72rem;
  margin-top: .1rem;
}
.feedback-attention-item p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .82rem;
  line-height: 1.45;
}
.feedback-attention-item a {
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
}
.feedback-breakdown-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
}
.feedback-page-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.feedback-page-row:last-child {
  border-bottom: 0;
}
.feedback-page-row b {
  min-width: 52px;
  text-align: center;
  padding: .28rem .45rem;
  border-radius: 999px;
  color: var(--color-text-primary);
  background: var(--color-card-bg-soft);
  border: 1px solid var(--color-border);
}
.feedback-topic-row > span {
  color: var(--color-text-secondary);
  font-size: .75rem;
}
.feedback-topic-row-head > span {
  color: var(--color-accent);
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}
.feedback-empty-inline {
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: .85rem;
}
@media (max-width: 1199.98px) {
  .feedback-human-hero,
  .feedback-insight-grid,
  .feedback-breakdown-grid {
    grid-template-columns: 1fr;
  }
  .feedback-guidance-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .feedback-guidance-steps {
    justify-content: flex-start;
  }
}
@media (max-width: 575.98px) {
  .feedback-human-hero {
    padding: 1rem;
    border-radius: 20px;
  }
  .feedback-hero-pills,
  .feedback-guidance-steps {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .feedback-line-chart-svg {
    height: 210px;
  }
}

/* Build 22 — full-width outbound automation workspace */
body[data-page-slug="risk/automation"] .portal-content-inner {
  max-width: none;
}
body[data-page-slug="risk/automation"] .automation-table-wrap {
  width: 100%;
}
body[data-page-slug="risk/automation"] .automation-preview-table {
  width: 100%;
  min-width: 1120px;
}
body[data-page-slug="risk/automation"] .automation-preview-table th {
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-text-secondary);
}
body[data-page-slug="risk/automation"] .automation-preview-table td {
  vertical-align: middle;
}
body[data-page-slug="risk/automation"] .automation-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .6rem;
}
body[data-page-slug="risk/automation"] .automation-kpi-strip > div {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg-soft);
  border-radius: 12px;
  padding: .65rem .75rem;
}
body[data-page-slug="risk/automation"] .automation-kpi-strip span {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
body[data-page-slug="risk/automation"] .automation-kpi-strip strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.15;
  margin-top: .15rem;
}
@media (max-width: 992px) {
  body[data-page-slug="risk/automation"] .automation-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Build 43 — container-aware vulnerability register
   The register becomes a readable grid of records when its actual content
   area is narrower than the full desktop table, instead of clipping columns.
   ============================================================ */
.vuln-comments-row.is-open { display: table-row; }
.vuln-edit-dialog .modal-content { min-width: 0; }
.vuln-edit-dialog .modal-body { overflow-x: hidden; }
.vuln-live-score-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.vuln-live-score-values { display:flex; justify-content:flex-end; align-items:center; gap:.35rem .15rem; flex-wrap:wrap; min-width:0; }

.vuln-table-wrap.is-responsive {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: .7rem;
  background: var(--color-content-bg);
}
.vuln-table-wrap.is-responsive .vuln-main-table,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog,
.vuln-table-wrap.is-responsive .vuln-main-table.is-period {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate;
}
.vuln-table-wrap.is-responsive .vuln-main-table colgroup,
.vuln-table-wrap.is-responsive .vuln-main-table thead { display: none !important; }
.vuln-table-wrap.is-responsive .vuln-main-table tbody {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  gap: .72rem;
  width: 100%;
}
.vuln-table-wrap.is-responsive .vuln-main-table tr.vuln-row {
  display: grid !important;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 0;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: visible;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-xs);
}
.vuln-table-wrap.is-responsive .vuln-main-table tr.vuln-row > td {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: .68rem .75rem !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  background: transparent !important;
  white-space: normal;
}
.vuln-table-wrap.is-responsive .vuln-main-table tr.vuln-row > td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: .3rem;
  color: var(--color-text-muted);
  font-size: .62rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-asset-cell {
  grid-column: span 4;
  border-top: 0 !important;
  border-right: 1px solid var(--color-border) !important;
}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-title-cell {
  grid-column: span 8;
  border-top: 0 !important;
}
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-period-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-inherent-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-mitigation-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-residual-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-sla-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-status-cell { grid-column: span 2; }
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-inherent-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-mitigation-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-residual-cell { grid-column: span 2; }
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-sla-cell,
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-status-cell { grid-column: span 3; }
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-actions-cell {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--color-border) !important;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .4rem !important;
}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-actions .btn {
  width: auto;
  min-width: 34px;
  height: 32px;
  flex: 0 0 auto;
}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-actions .vuln-comment-toggle-btn { min-width: 38px; }
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-score-cell,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-sla-cell,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-status-cell,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-period-cell { text-align: left !important; }
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-residual-wrap { align-items: flex-start; }
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-score-bar { margin-left: 0; margin-right: 0; }
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-title-main,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-purpose-text,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-score-sub,
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-sla-label {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.vuln-table-wrap.is-responsive .vuln-comments-row { display: none !important; }
.vuln-table-wrap.is-responsive .vuln-comments-row.is-open {
  display: block !important;
  width: 100%;
  margin-top: -.72rem;
}
.vuln-table-wrap.is-responsive .vuln-comments-row > td,
.vuln-table-wrap.is-responsive .vuln-comments-cell {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}
.vuln-table-wrap.is-responsive .vuln-comments-panel {
  margin: 0 .45rem;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.vuln-table-wrap.is-compact { padding: .5rem; }
.vuln-table-wrap.is-compact .vuln-main-table tr.vuln-row { grid-template-columns: repeat(6,minmax(0,1fr)); }
.vuln-table-wrap.is-compact .vuln-main-table .vuln-asset-cell,
.vuln-table-wrap.is-compact .vuln-main-table .vuln-title-cell { grid-column: 1 / -1; border-right: 0 !important; }
.vuln-table-wrap.is-compact .vuln-main-table .vuln-title-cell { border-top: 1px solid var(--color-border) !important; }
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-period-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-inherent-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-mitigation-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-residual-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-sla-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-backlog .vuln-status-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-period .vuln-inherent-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-period .vuln-mitigation-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-period .vuln-residual-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-period .vuln-sla-cell,
.vuln-table-wrap.is-compact .vuln-main-table.is-period .vuln-status-cell { grid-column: span 3; }
.vuln-table-wrap.is-compact .vuln-main-table .vuln-actions-cell { grid-column: 1 / -1; }
.vuln-table-wrap.is-compact .vuln-main-table .vuln-actions { justify-content: flex-start; }

[data-theme="dark"] .vuln-table-wrap.is-responsive { background: rgba(15,23,42,.18); }
[data-theme="dark"] .vuln-table-wrap.is-responsive .vuln-main-table tr.vuln-row { background: var(--color-card-bg); border-color: var(--color-border); }

@media (max-width: 767.98px) {
  .vuln-edit-dialog { max-width: calc(100vw - 1rem); margin: .5rem; }
  .vuln-live-score-values { justify-content: flex-start; text-align: left !important; }
  .vuln-live-score-values #scoreResidual { font-size: 1.35rem !important; }
}
.vuln-table-wrap .vuln-row.is-filtered-out,
.vuln-table-wrap .vuln-comments-row.is-filtered-out { display:none!important; }

/* ============================================================
   Build 44 - compact desktop density
   Keeps the existing mobile layout, while making the desktop shell,
   navigation, controls, tables and high-level cards roughly 8-12%
   denser at the browser's normal 100% zoom.
   ============================================================ */
@media (min-width: 992px) {
  html {
    font-size: 15px;
  }

  :root {
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 68px;
    --topbar-height: 64px;
    --portal-topbar-height: 64px;
    --portal-brand-logo-size: 2.8rem;
    --radius-lg: 14px;
    --radius-xl: 18px;
  }

  body {
    font-size: 13.5px;
    line-height: 1.47;
  }

  /* Application shell */
  .portal-content {
    padding: 1rem 1.15rem 1.5rem;
  }
  .portal-topbar {
    gap: .75rem;
    padding: .5rem 1.05rem;
  }
  .topbar-left {
    gap: .7rem;
  }
  .topbar-right {
    gap: .35rem;
  }
  .topbar-title {
    font-size: 1.08rem;
  }
  .topbar-title-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }
  .topbar-run-chip {
    height: 32px;
    padding: 0 .62rem;
  }
  .topbar-inspection-trigger {
    min-width: 156px;
  }
  .topbar-inspection-chip {
    min-width: 200px;
    height: 34px;
  }
  .topbar-btn,
  .topbar-avatar {
    width: 34px;
    height: 34px;
  }
  .topbar-btn {
    border-radius: 10px;
    font-size: .93rem;
  }
  .avatar-initials {
    font-size: .72rem;
  }

  /* Sidebar */
  .sidebar-brand {
    padding: .42rem .75rem !important;
  }
  .sidebar-brand-link {
    min-height: calc(var(--portal-topbar-height) - .84rem) !important;
    gap: .66rem !important;
  }
  .sidebar-logo.has-icon,
  .sidebar-logo.has-img,
  .sidebar-logo.has-image,
  .sidebar-logo.has-img.has-image,
  html.sidebar-collapsed .sidebar-logo.has-img,
  html.sidebar-collapsed .sidebar-logo.has-image,
  html.sidebar-collapsed .sidebar-logo.has-img.has-image {
    border-radius: .9rem !important;
  }
  .sidebar-logo.has-image .sidebar-logo-full,
  .sidebar-logo.has-img > img:first-child,
  html.sidebar-collapsed .sidebar-logo.has-image .sidebar-logo-full,
  html.sidebar-collapsed .sidebar-logo.has-img img:first-child {
    padding: .4rem !important;
  }
  .sidebar-brand-name {
    font-size: .9rem !important;
  }
  .sidebar-nav {
    padding: .6rem .52rem .48rem;
  }
  .nav-group {
    margin-bottom: .5rem;
  }
  .nav-group-header {
    gap: .38rem;
    padding: .38rem .62rem .22rem;
  }
  .nav-group-label {
    font-size: .64rem;
  }
  .nav-item {
    min-height: 36px;
    gap: .56rem;
    padding: .4rem .62rem;
    border-radius: 10px;
    font-size: .82rem;
  }
  .nav-item-icon {
    width: 20px;
    font-size: .94rem;
  }
  .sidebar-footer {
    gap: .5rem;
    padding: .6rem .52rem .68rem;
  }
  .sidebar-user-card {
    min-height: 40px;
    padding: .4rem;
    border-radius: 12px;
  }
  .sidebar-user-avatar {
    width: 29px;
    height: 29px;
  }
  .sidebar-collapse-btn {
    padding: .42rem .6rem;
    border-radius: 10px;
    font-size: .78rem;
  }

  /* Shared page surfaces */
  .page-header {
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .82rem .95rem;
    border-radius: 18px;
  }
  .page-title {
    font-size: 1.17rem;
  }
  .section-heading {
    margin: 1.05rem 0 .6rem;
  }
  .portal-card {
    border-radius: 14px;
  }
  .portal-card-header {
    gap: .75rem;
    padding: .82rem .95rem .68rem;
  }
  .portal-card-body {
    padding: .92rem;
  }
  .portal-card-footer {
    padding: .68rem .92rem;
  }
  .dashboard-grid {
    gap: .75rem;
  }
  .summary-card,
  .metric-card {
    min-height: 98px;
    gap: .25rem;
    padding: .82rem;
  }
  .summary-card-icon,
  .metric-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1.08rem;
  }
  .summary-card-value,
  .metric-card-value {
    font-size: 1.55rem;
  }
  .sector-card {
    gap: .65rem;
    padding: .82rem .9rem;
  }
  .filter-bar,
  .ops-filter-bar {
    gap: .6rem;
    margin-bottom: .82rem;
    padding: .82rem;
  }
  .info-banner,
  .portal-alert-soft {
    gap: .6rem;
    padding: .7rem .82rem;
  }

  /* Tables, forms and actions */
  .portal-table {
    font-size: .82rem;
  }
  .portal-table thead th,
  .table thead.table-light th,
  .table-light th {
    padding: .58rem .72rem;
    font-size: .68rem;
  }
  .portal-table tbody td {
    padding: .58rem .72rem;
  }
  .form-label {
    margin-bottom: .26rem;
    font-size: .76rem;
  }
  .form-control,
  .form-select {
    min-height: 34px;
    padding: .34rem .62rem;
    border-radius: 9px;
    font-size: .84rem;
  }
  textarea.form-control {
    min-height: 72px;
  }
  .form-actions {
    gap: .45rem;
    margin-top: 1rem;
    padding-top: .78rem;
  }
  .btn {
    --bs-btn-padding-y: .32rem;
    --bs-btn-padding-x: .68rem;
    --bs-btn-font-size: .84rem;
    --bs-btn-line-height: 1.35;
    border-radius: 9px;
  }
  .btn-sm {
    --bs-btn-padding-y: .22rem;
    --bs-btn-padding-x: .52rem;
    --bs-btn-font-size: .76rem;
    border-radius: 8px;
  }
  .status-badge,
  .p-status-badge {
    padding: .2rem .5rem;
    font-size: .68rem;
  }
  .modal-header,
  .modal-footer {
    padding: .78rem .95rem;
  }
  .modal-body {
    padding: .95rem;
  }

  /* Security Center: reduce the large hero and signal cards. */
  .security-human-hero.mb-4,
  .security-attention-panel.mb-4,
  .security-human-grid.mb-4,
  .security-insight-panel.mb-4,
  .security-section-card.mb-4 {
    margin-bottom: 1rem !important;
  }
  .security-human-hero {
    gap: .8rem;
    padding: 1rem;
    border-radius: 18px;
  }
  .security-human-hero-copy h1 {
    margin: .18rem 0 .28rem;
    font-size: clamp(1.55rem, 2.45vw, 2.15rem);
  }
  .security-human-hero-copy p {
    font-size: .94rem;
    line-height: 1.45;
  }
  .security-human-kicker,
  .security-section-eyebrow {
    font-size: .7rem;
  }
  .security-human-pills {
    gap: .35rem;
    margin-top: .72rem;
  }
  .security-health-pill,
  .security-soft-pill {
    gap: .34rem;
    padding: .34rem .56rem;
    font-size: .75rem;
  }
  .security-human-hero-actions {
    min-width: min(420px, 40vw);
  }
  .security-subnav {
    gap: .35rem;
  }
  .security-subnav-link {
    gap: .3rem;
    padding: .34rem .56rem;
    font-size: .76rem;
  }
  .security-attention-panel {
    gap: .8rem;
    padding: .78rem .95rem;
    border-left-width: 4px;
    border-radius: 18px;
  }
  .security-attention-copy h2 {
    margin: .1rem 0 .24rem;
    font-size: clamp(1.08rem, 1.65vw, 1.4rem);
  }
  .security-attention-actions {
    gap: .38rem;
  }
  .security-human-grid {
    gap: .7rem;
  }
  .security-focus-card {
    gap: .68rem;
    padding: .82rem;
    border-radius: 18px;
  }
  .security-focus-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.15rem;
  }
  .security-focus-title {
    font-size: .76rem;
  }
  .security-focus-value {
    margin-top: .14rem;
    font-size: 1.72rem;
  }
  .security-focus-meta {
    font-size: .72rem;
  }
  .security-focus-message {
    margin-top: .42rem;
    font-size: .81rem;
    line-height: 1.3;
  }
  .security-focus-link {
    padding-top: .52rem;
    font-size: .76rem;
  }
  .security-insight-panel,
  .security-section-card {
    padding: .86rem;
    border-radius: 18px;
  }
  .security-section-heading {
    gap: .75rem;
    margin-bottom: .72rem;
  }
  .security-section-heading.compact {
    margin-bottom: .52rem;
  }
  .security-section-heading h2 {
    font-size: 1.08rem;
  }
  .security-section-heading p {
    font-size: .84rem;
  }
  .security-insight-tabs {
    gap: .38rem;
    margin: .24rem 0 .72rem;
  }
  .security-insight-tab {
    padding: .34rem .62rem;
    font-size: .75rem;
  }
  .security-insight-pane,
  .security-insight-card {
    padding: .8rem;
  }
  .security-insight-card-head {
    gap: .48rem;
    margin-bottom: .52rem;
  }
  .security-insight-card-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .65rem;
  }
  .security-insight-list {
    gap: .32rem;
  }
  .security-insight-list li {
    padding: .42rem .48rem;
  }
  .security-chart-card {
    padding: .75rem;
  }
  .security-chart-wrap {
    height: 170px;
  }
  .security-chart-wrap.is-short {
    height: 145px;
  }
}

/* ============================================================
   Build 45 - desktop 90% visual density
   Matches the preferred browser-zoom-at-90% feel at normal zoom.
   Desktop only: mobile/tablet retain their existing touch-friendly size.
   ============================================================ */
@media (min-width: 992px) {
  html {
    font-size: 13.5px;
  }

  :root {
    --sidebar-width: 230px;
    --sidebar-collapsed-width: 61px;
    --topbar-height: 58px;
    --portal-topbar-height: 58px;
    --radius-lg: 13px;
    --radius-xl: 16px;
  }

  body {
    font-size: 12.15px;
    line-height: 1.45;
  }

  /* At 90% browser zoom the 1720px content canvas renders at ~1548px. */
  .portal-content-inner {
    max-width: 1548px;
  }

  /* Fixed-pixel shell pieces need an explicit 90% pass; rem-based
     spacing/typography already follows the smaller root font above. */
  .topbar-title-icon {
    width: 20px;
    height: 20px;
  }
  .topbar-run-chip {
    height: 29px;
  }
  .topbar-inspection-trigger {
    min-width: 140px;
  }
  .topbar-inspection-chip {
    min-width: 180px;
    height: 31px;
  }
  .topbar-btn,
  .topbar-avatar {
    width: 31px;
    height: 31px;
  }

  .nav-item {
    min-height: 32px;
  }
  .nav-item-icon {
    width: 18px;
  }
  .sidebar-user-card {
    min-height: 36px;
  }
  .sidebar-user-avatar {
    width: 26px;
    height: 26px;
  }

  .page-header {
    border-radius: 16px;
  }
  .portal-card {
    border-radius: 13px;
  }
  .summary-card,
  .metric-card {
    min-height: 88px;
  }
  .summary-card-icon,
  .metric-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }

  .form-control,
  .form-select {
    min-height: 31px;
    border-radius: 8px;
  }
  textarea.form-control {
    min-height: 65px;
  }
  .btn {
    border-radius: 8px;
  }
  .btn-sm {
    border-radius: 7px;
  }

  /* Keep overlays proportionate to the denser shell. */
  .modal-content,
  .dropdown-menu,
  .popover {
    --bs-border-radius-lg: 12px;
  }

  /* Common chart canvases are deliberately a little shorter as browser
     zoom also makes them occupy less vertical space. Page-specific charts
     that need a fixed analytical height can still override these locally. */
  .vuln-criticality-chart-wrap,
  .vuln-open-queue-wrap {
    height: 288px;
    min-height: 252px;
  }
  .vuln-asset-severity-wrap {
    height: 324px;
    min-height: 270px;
  }
  .vuln-sla-aging-wrap {
    height: 270px;
    min-height: 234px;
  }
}

/* ============================================================
   Build 46 - vulnerability register right-side alignment
   Rebalances the desktop table after the 90% density pass:
   scores stay centered, SLA reads left-to-right, status stays
   centered, and the action rail gets breathing room at the edge.
   ============================================================ */
@media (min-width: 992px) {
  /* Backlog mode: make the utility side of the table easier to scan. */
  .vuln-main-table.is-backlog col.vuln-col-asset { width: 14.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-vulnerability { width: 30.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-period { width: 5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-inherent { width: 7.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-mitigation { width: 7.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-residual { width: 8.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-sla { width: 9.5% !important; }
  .vuln-main-table.is-backlog col.vuln-col-status { width: 6% !important; }
  .vuln-main-table.is-backlog col.vuln-col-actions { width: 11% !important; }

  .vuln-main-table.is-backlog thead th:nth-child(1),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(1) { width: 14.5% !important; max-width: 14.5% !important; }
  .vuln-main-table.is-backlog thead th:nth-child(2),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(2) { width: 30.5% !important; max-width: 30.5% !important; }
  .vuln-main-table.is-backlog thead th:nth-child(3),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(3) { width: 5% !important; max-width: 5% !important; text-align: center; }
  .vuln-main-table.is-backlog thead th:nth-child(4),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(4) { width: 7.5% !important; max-width: 7.5% !important; text-align: center; }
  .vuln-main-table.is-backlog thead th:nth-child(5),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(5) { width: 7.5% !important; max-width: 7.5% !important; text-align: center; }
  .vuln-main-table.is-backlog thead th:nth-child(6),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(6) { width: 8.5% !important; max-width: 8.5% !important; text-align: center; overflow: visible !important; }
  .vuln-main-table.is-backlog thead th:nth-child(7),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(7) { width: 9.5% !important; max-width: 9.5% !important; }
  .vuln-main-table.is-backlog thead th:nth-child(8),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(8) { width: 6% !important; max-width: 6% !important; text-align: center; }
  .vuln-main-table.is-backlog thead th:nth-child(9),
  .vuln-main-table.is-backlog tbody tr.vuln-row > td:nth-child(9) { width: 11% !important; max-width: 11% !important; overflow: visible !important; }

  /* Period mode has one fewer column, but uses the same visual rhythm. */
  .vuln-main-table.is-period col.vuln-col-asset { width: 15.5% !important; }
  .vuln-main-table.is-period col.vuln-col-vulnerability { width: 31.5% !important; }
  .vuln-main-table.is-period col.vuln-col-inherent { width: 8.5% !important; }
  .vuln-main-table.is-period col.vuln-col-mitigation { width: 8.5% !important; }
  .vuln-main-table.is-period col.vuln-col-residual { width: 9% !important; }
  .vuln-main-table.is-period col.vuln-col-sla { width: 9.5% !important; }
  .vuln-main-table.is-period col.vuln-col-status { width: 6% !important; }
  .vuln-main-table.is-period col.vuln-col-actions { width: 11.5% !important; }

  .vuln-main-table.is-period thead th:nth-child(1),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(1) { width: 15.5% !important; max-width: 15.5% !important; }
  .vuln-main-table.is-period thead th:nth-child(2),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(2) { width: 31.5% !important; max-width: 31.5% !important; }
  .vuln-main-table.is-period thead th:nth-child(3),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(3) { width: 8.5% !important; max-width: 8.5% !important; text-align: center; }
  .vuln-main-table.is-period thead th:nth-child(4),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(4) { width: 8.5% !important; max-width: 8.5% !important; text-align: center; }
  .vuln-main-table.is-period thead th:nth-child(5),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(5) { width: 9% !important; max-width: 9% !important; text-align: center; overflow: visible !important; }
  .vuln-main-table.is-period thead th:nth-child(6),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(6) { width: 9.5% !important; max-width: 9.5% !important; }
  .vuln-main-table.is-period thead th:nth-child(7),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(7) { width: 6% !important; max-width: 6% !important; text-align: center; }
  .vuln-main-table.is-period thead th:nth-child(8),
  .vuln-main-table.is-period tbody tr.vuln-row > td:nth-child(8) { width: 11.5% !important; max-width: 11.5% !important; overflow: visible !important; }

  /* Multi-line SLA content reads more naturally from a common left edge. */
  .vuln-main-table .vuln-sla-cell {
    text-align: left !important;
    padding-left: .68rem !important;
    padding-right: .38rem !important;
  }
  .vuln-main-table.is-backlog thead th:nth-child(7),
  .vuln-main-table.is-period thead th:nth-child(6) {
    text-align: left !important;
    padding-left: .68rem !important;
  }
  .vuln-main-table.is-backlog thead th:nth-child(7) .vuln-sort-link,
  .vuln-main-table.is-period thead th:nth-child(6) .vuln-sort-link {
    justify-content: flex-start !important;
  }

  /* Action rail: align to the right edge, but keep a deliberate inset. */
  .vuln-main-table .vuln-actions-cell {
    text-align: right !important;
    padding-left: .32rem !important;
    padding-right: .78rem !important;
    border-left: 1px solid rgba(148, 163, 184, .18);
  }
  .vuln-main-table.is-backlog thead th:nth-child(9),
  .vuln-main-table.is-period thead th:nth-child(8) {
    text-align: right !important;
    padding-right: .78rem !important;
  }
  .vuln-main-table .vuln-actions {
    width: 100%;
    justify-content: flex-end !important;
    gap: .28rem !important;
  }

  /* These controls were fixed-pixel and did not follow the 90% density pass. */
  .vuln-main-table .vuln-actions .btn {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    font-size: .76rem;
  }
  .vuln-main-table .vuln-actions .vuln-comment-toggle-btn {
    width: 29px;
    min-width: 29px;
  }
  .vuln-main-table .vuln-comment-toggle-btn .badge {
    top: -5px;
    right: -6px;
  }

  /* Give the status pill a stable center without wasting a full-width column. */
  .vuln-main-table .vuln-status-cell {
    text-align: center !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }
}

/* ============================================================
   Vulnerability register triage table v4
   - merges the three risk metrics into one readable risk path
   - groups status + SLA into one workflow column
   - gives asset/vulnerability context more horizontal room
   - visually separates shortcut vs workflow actions
   ============================================================ */
.vuln-main-table.is-backlog{min-width:1280px!important}
.vuln-main-table.is-period{min-width:1160px!important}
.vuln-main-table.is-backlog col.vuln-col-asset{width:15%!important}
.vuln-main-table.is-backlog col.vuln-col-vulnerability{width:32%!important}
.vuln-main-table.is-backlog col.vuln-col-period{width:5%!important}
.vuln-main-table.is-backlog col.vuln-col-risk-flow{width:25%!important}
.vuln-main-table.is-backlog col.vuln-col-workflow{width:10%!important}
.vuln-main-table.is-backlog col.vuln-col-actions{width:13%!important}
.vuln-main-table.is-period col.vuln-col-asset{width:17%!important}
.vuln-main-table.is-period col.vuln-col-vulnerability{width:35%!important}
.vuln-main-table.is-period col.vuln-col-risk-flow{width:25%!important}
.vuln-main-table.is-period col.vuln-col-workflow{width:10%!important}
.vuln-main-table.is-period col.vuln-col-actions{width:13%!important}

.vuln-main-table.is-backlog thead th:nth-child(1),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(1){width:15%!important;max-width:15%!important}
.vuln-main-table.is-backlog thead th:nth-child(2),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(2){width:32%!important;max-width:32%!important}
.vuln-main-table.is-backlog thead th:nth-child(3),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(3){width:5%!important;max-width:5%!important;text-align:center}
.vuln-main-table.is-backlog thead th:nth-child(4),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(4){width:25%!important;max-width:25%!important}
.vuln-main-table.is-backlog thead th:nth-child(5),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(5){width:10%!important;max-width:10%!important}
.vuln-main-table.is-backlog thead th:nth-child(6),.vuln-main-table.is-backlog tbody tr.vuln-row>td:nth-child(6){width:13%!important;max-width:13%!important;overflow:visible!important}
.vuln-main-table.is-period thead th:nth-child(1),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(1){width:17%!important;max-width:17%!important}
.vuln-main-table.is-period thead th:nth-child(2),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(2){width:35%!important;max-width:35%!important}
.vuln-main-table.is-period thead th:nth-child(3),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(3){width:25%!important;max-width:25%!important}
.vuln-main-table.is-period thead th:nth-child(4),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(4){width:10%!important;max-width:10%!important}
.vuln-main-table.is-period thead th:nth-child(5),.vuln-main-table.is-period tbody tr.vuln-row>td:nth-child(5){width:13%!important;max-width:13%!important;overflow:visible!important}

.vuln-main-table thead th{vertical-align:middle;background:var(--color-card-bg-soft)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important;box-shadow:inset 0 -1px 0 var(--color-border)}
.vuln-main-table thead th .vuln-sort-link{color:var(--color-text-secondary)!important}
.vuln-main-table thead th .vuln-sort-link:hover{color:var(--color-primary)!important}
.vuln-head-stack{display:flex;align-items:center;justify-content:space-between;gap:.45rem;min-width:0}
.vuln-head-title{font-weight:850;white-space:nowrap;color:var(--color-text-secondary)}
.vuln-head-sorters{display:inline-flex;align-items:center;gap:.18rem;min-width:0}
.vuln-head-sorters a{display:inline-flex;align-items:center;gap:.12rem;padding:.14rem .28rem;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);font-size:.56rem;font-weight:800;line-height:1;text-decoration:none;text-transform:none;letter-spacing:0;background:var(--color-card-bg)}
.vuln-head-sorters a:hover,.vuln-head-sorters a.is-active{color:var(--color-primary);border-color:rgba(37,99,235,.34);background:rgba(37,99,235,.07)}
.vuln-head-sorters i{font-size:.54rem}

.vuln-risk-flow-cell{padding:.38rem .44rem!important;overflow:visible!important}
.vuln-risk-flow{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);align-items:stretch;gap:.12rem;min-width:0}
.vuln-risk-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;padding:.3rem .22rem;border:1px solid rgba(148,163,184,.18);border-radius:9px;background:rgba(148,163,184,.045);line-height:1.02}
.vuln-risk-stage.is-control{background:rgba(22,163,74,.035);border-color:rgba(22,163,74,.14)}
.vuln-risk-stage.is-residual{background:var(--vuln-risk-bg,rgba(148,163,184,.05));border-color:var(--vuln-risk-border,var(--color-border))}
.vuln-risk-stage-label{font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.045em;color:var(--color-text-muted);margin-bottom:.12rem;white-space:nowrap}
.vuln-risk-stage-value{font-size:1.02rem;font-weight:900;line-height:1;color:var(--color-text-primary);white-space:nowrap}
.vuln-risk-stage-value.good{color:#16A34A}
.vuln-risk-stage-value small{font-size:.55rem;color:var(--color-text-secondary);font-weight:750;margin-left:.04rem}
.vuln-risk-stage-meta{display:block;max-width:100%;margin-top:.13rem;font-size:.58rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.vuln-risk-stage-meta .vuln-rating-pill{font-size:.56rem;padding:.08rem .3rem}
.vuln-risk-stage-meta .vuln-calc-pill{font-size:.55rem;padding:.06rem .27rem;margin-left:.1rem}
.vuln-risk-stage-meta-row{display:flex;align-items:center;justify-content:center;gap:.22rem;margin-top:.13rem;max-width:100%;white-space:nowrap;overflow:visible}
.vuln-risk-stage-meta-row .vuln-rating-pill{font-size:.56rem;padding:.08rem .3rem;flex:0 0 auto}
.vuln-risk-stage.is-residual{position:relative;overflow:visible!important}
.vuln-risk-details{margin-top:0;overflow:visible!important;z-index:30;flex:0 0 auto}
.vuln-risk-details .vuln-calc-pill{font-size:.55rem;padding:.06rem .32rem;margin:0}
.vuln-risk-details .vuln-calc-tooltip{right:-.2rem;top:calc(100% + 7px);z-index:200;pointer-events:none}
.vuln-risk-details:hover,.vuln-risk-details:focus{z-index:210;outline:none}
.vuln-risk-details:focus .vuln-calc-pill{border-color:rgba(37,99,235,.38);box-shadow:0 0 0 2px rgba(37,99,235,.10);color:var(--color-primary)}
.vuln-risk-flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.64rem}

.vuln-workflow-cell{text-align:left!important;padding:.42rem .5rem!important;line-height:1.12;overflow:hidden}
.vuln-workflow-top{display:flex;align-items:center;gap:.28rem;flex-wrap:wrap;margin-bottom:.3rem;min-width:0}
.vuln-workflow-top .p-status-badge{font-size:.64rem}
.vuln-workflow-top .vuln-exception-badge{margin-top:0;font-size:.55rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vuln-workflow-sla{padding-top:.28rem;border-top:1px dashed rgba(148,163,184,.26)}
.vuln-workflow-sla .vuln-sla-label{text-align:left;font-size:.68rem}
.vuln-workflow-sla .vuln-sla-date{text-align:left;font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vuln-actions-cell{text-align:right!important;padding-left:.38rem!important;padding-right:.48rem!important;border-left:0!important}
.vuln-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:.34rem!important;width:100%;white-space:nowrap}
.vuln-action-group{display:inline-flex;align-items:center;gap:.2rem;padding:.18rem;border:1px solid var(--color-border);border-radius:9px;background:var(--color-card-bg-soft)}
.vuln-action-group.is-secondary{background:transparent;border-color:transparent;padding-left:0;padding-right:0}
.vuln-action-divider{width:1px;height:22px;background:var(--color-border);flex:0 0 auto}
.vuln-actions .btn{width:27px;height:27px;min-width:27px;border-radius:7px;padding:0;box-shadow:none}
.vuln-actions .vuln-comment-toggle-btn{width:29px;min-width:29px}
.vuln-actions .vuln-comment-toggle-btn .badge{position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;padding:0 .22rem;display:inline-flex;align-items:center;justify-content:center;font-size:.53rem;border-radius:999px}
.vuln-actions .vuln-remediation-shortcut-btn.btn-outline-warning{background:rgba(245,158,11,.06)}
.vuln-actions .vuln-remediation-shortcut-btn.btn-outline-secondary{opacity:.66}

.vuln-main-table tbody tr.vuln-row>td{border-bottom-color:rgba(148,163,184,.20)}
.vuln-main-table tbody tr.vuln-row>td.vuln-risk-flow-cell{background:rgba(148,163,184,.018)}
.vuln-main-table tbody tr.vuln-row:hover>td.vuln-risk-flow-cell{background:rgba(23,59,108,.055)!important}

[data-theme="dark"] .vuln-main-table thead th{background:rgba(255,255,255,.035)!important;color:var(--color-text-secondary)!important;border-color:var(--color-border)!important}
[data-theme="dark"] .vuln-main-table thead th .vuln-sort-link{color:var(--color-text-secondary)!important}
[data-theme="dark"] .vuln-head-title{color:var(--color-text-secondary)}
[data-theme="dark"] .vuln-head-sorters a{border-color:var(--color-border);background:rgba(255,255,255,.035);color:var(--color-text-muted)}
[data-theme="dark"] .vuln-head-sorters a:hover,[data-theme="dark"] .vuln-head-sorters a.is-active{color:#93c5fd;border-color:rgba(147,197,253,.28);background:rgba(59,130,246,.10)}
[data-theme="dark"] .vuln-risk-stage{background:rgba(255,255,255,.025);border-color:var(--color-border)}
[data-theme="dark"] .vuln-risk-stage.is-control{background:rgba(22,163,74,.055);border-color:rgba(22,163,74,.20)}
[data-theme="dark"] .vuln-action-group{background:rgba(255,255,255,.025)}

@media (max-width:1400px){
  .vuln-main-table.is-backlog{min-width:1240px!important}
  .vuln-main-table.is-period{min-width:1120px!important}
  .vuln-head-sorters a{padding:.12rem .22rem;font-size:.53rem}
  .vuln-risk-stage{padding:.28rem .16rem}
  .vuln-risk-stage-value{font-size:.94rem}
  .vuln-risk-stage-meta{font-size:.54rem}
  .vuln-actions .btn{width:26px;height:26px;min-width:26px}
  .vuln-actions .vuln-comment-toggle-btn{width:28px;min-width:28px}
}

/* Responsive card layout for the merged risk/workflow cells. */
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-period-cell{grid-column:span 2}
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-risk-flow-cell{grid-column:span 6}
.vuln-table-wrap.is-responsive .vuln-main-table.is-backlog .vuln-workflow-cell{grid-column:span 4}
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-risk-flow-cell{grid-column:span 7}
.vuln-table-wrap.is-responsive .vuln-main-table.is-period .vuln-workflow-cell{grid-column:span 5}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-risk-flow-cell,.vuln-table-wrap.is-responsive .vuln-main-table .vuln-workflow-cell{text-align:left!important}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-risk-flow{max-width:520px}
.vuln-table-wrap.is-responsive .vuln-main-table .vuln-actions{justify-content:flex-end}
.vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-flow-cell,.vuln-table-wrap.is-compact .vuln-main-table .vuln-workflow-cell{grid-column:1/-1}
.vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-flow{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);max-width:none}
.vuln-table-wrap.is-compact .vuln-main-table .vuln-actions{justify-content:flex-start;flex-wrap:wrap}

@media (max-width:480px){
  .vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-flow{grid-template-columns:1fr;gap:.28rem}
  .vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-flow-arrow{display:none}
  .vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-stage{align-items:flex-start;text-align:left;padding:.45rem .5rem}
  .vuln-table-wrap.is-compact .vuln-main-table .vuln-risk-stage-meta{text-align:left}
}

/* Vulnerability risk Details popover: keep bottom-row hover cards inside the table viewport.
   The table wrapper must scroll horizontally, which causes browsers to clip vertical overflow.
   Flip the final two finding popovers upward and lift the active risk cell above neighbour rows. */
.vuln-main-table tbody tr.vuln-row:hover > .vuln-risk-flow-cell,
.vuln-main-table tbody tr.vuln-row:focus-within > .vuln-risk-flow-cell{
  position:relative;
  z-index:260;
}
.vuln-main-table tbody tr.vuln-row:nth-last-child(-n+4) .vuln-risk-details .vuln-calc-tooltip{
  top:auto;
  bottom:calc(100% + 7px);
}
.vuln-main-table tbody tr.vuln-row:nth-last-child(-n+4) .vuln-risk-details .vuln-calc-tooltip:before{
  top:auto;
  bottom:-6px;
  border-left:0;
  border-top:0;
  border-right:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  transform:rotate(45deg);
}

/* ============================================================
   Build 47 - desktop comfort scale (+10%)
   Raises the compact 90%-density desktop shell by roughly 10% at
   normal browser zoom. This intentionally avoids CSS `zoom`, which
   can distort sticky/fixed UI and modal/table positioning.
   Mobile/tablet sizing and analytical table-width breakpoints stay
   unchanged so the larger desktop UI does not introduce new scroll.
   ============================================================ */
@media (min-width: 992px) {
  html {
    font-size: 14.85px;
  }

  :root {
    --sidebar-width: 253px;
    --sidebar-collapsed-width: 67px;
    --topbar-height: 64px;
    --portal-topbar-height: 64px;
    --radius-lg: 14px;
    --radius-xl: 18px;
  }

  body {
    font-size: 13.365px;
    line-height: 1.47;
  }

  .portal-content-inner {
    max-width: 1703px;
  }

  /* Fixed-pixel shell elements do not follow the rem scale automatically. */
  .topbar-title-icon {
    width: 22px;
    height: 22px;
  }
  .topbar-run-chip {
    height: 32px;
  }
  .topbar-inspection-trigger {
    min-width: 154px;
  }
  .topbar-inspection-chip {
    min-width: 198px;
    height: 34px;
  }
  .topbar-btn,
  .topbar-avatar {
    width: 34px;
    height: 34px;
  }

  .nav-item {
    min-height: 35px;
  }
  .nav-item-icon {
    width: 20px;
  }
  .sidebar-user-card {
    min-height: 40px;
  }
  .sidebar-user-avatar {
    width: 29px;
    height: 29px;
  }

  .page-header {
    border-radius: 18px;
  }
  .portal-card {
    border-radius: 14px;
  }
  .summary-card,
  .metric-card {
    min-height: 97px;
  }
  .summary-card-icon,
  .metric-card-icon {
    width: 35px;
    height: 35px;
    border-radius: 12px;
  }

  .form-control,
  .form-select {
    min-height: 34px;
    border-radius: 9px;
  }
  textarea.form-control {
    min-height: 72px;
  }
  .btn {
    border-radius: 9px;
  }
  .btn-sm {
    border-radius: 8px;
  }

  .modal-content,
  .dropdown-menu,
  .popover {
    --bs-border-radius-lg: 13px;
  }

  .vuln-criticality-chart-wrap,
  .vuln-open-queue-wrap {
    height: 317px;
    min-height: 277px;
  }
  .vuln-asset-severity-wrap {
    height: 356px;
    min-height: 297px;
  }
  .vuln-sla-aging-wrap {
    height: 297px;
    min-height: 257px;
  }

  /* Keep the compact vulnerability action rail legible at the larger scale
     without changing the register's carefully tuned column widths. */
  .vuln-actions .btn,
  .vuln-main-table .vuln-actions .btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
  }
  .vuln-actions .vuln-comment-toggle-btn,
  .vuln-main-table .vuln-actions .vuln-comment-toggle-btn {
    width: 32px;
    min-width: 32px;
  }
}


/* ============================================================
   Build 48 - vulnerability residual-risk explanation popover
   Turns the risk Details hover into a decision trace: inputs, floor
   rule/evidence, outcome and a short explanation of why floors exist.
   ============================================================ */
.vuln-risk-details .vuln-calc-tooltip{
  width:430px;
  max-width:min(430px,calc(100vw - 28px));
  padding:0;
  border-radius:13px;
  overflow:hidden;
  line-height:1.35;
  font-size:.74rem;
  background:var(--color-card-bg);
}
.vuln-calc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
  padding:.78rem .85rem .68rem;
  border-bottom:1px solid var(--color-border);
  background:linear-gradient(180deg,rgba(37,99,235,.045),rgba(37,99,235,0));
}
.vuln-calc-head>div{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.vuln-calc-head strong{font-size:.86rem;line-height:1.25;color:var(--color-text-primary)}
.vuln-calc-eyebrow{
  font-size:.61rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:850;
  color:var(--color-text-muted);
}
.vuln-calc-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid var(--color-border);
  border-radius:999px;
  padding:.18rem .48rem;
  font-size:.61rem;
  font-weight:850;
  white-space:nowrap;
  color:var(--color-text-secondary);
  background:var(--color-content-bg);
}
.vuln-calc-status.is-binding{color:#B91C1C;border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.08)}
.vuln-calc-status.is-active{color:#B45309;border-color:rgba(217,119,6,.28);background:rgba(217,119,6,.08)}
.vuln-calc-status.is-none{color:#15803D;border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.07)}
.vuln-calc-body{padding:.76rem .85rem .82rem}
.vuln-calc-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.38rem;
}
.vuln-calc-step{
  min-width:0;
  border:1px solid var(--color-border);
  border-radius:9px;
  padding:.46rem .48rem .42rem;
  background:var(--color-content-bg);
}
.vuln-calc-step>span{display:block;font-size:.59rem;font-weight:800;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vuln-calc-step>strong{display:inline-block;margin-top:.12rem;font-size:.89rem;line-height:1;color:var(--color-text-primary)}
.vuln-calc-step>small{margin-left:.1rem;font-size:.56rem;color:var(--color-text-muted);font-weight:650}
.vuln-calc-step.is-floor{border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.055)}
.vuln-calc-step.is-floor>strong{color:#DC2626}
.vuln-calc-decision{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-top:.44rem;
  padding:.42rem .5rem;
  border-radius:8px;
  background:rgba(15,23,42,.04);
}
.vuln-calc-decision span{font-size:.61rem;font-weight:800;color:var(--color-text-secondary)}
.vuln-calc-decision strong{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.69rem;color:var(--color-text-primary);white-space:nowrap}
.vuln-calc-section{margin-top:.66rem;padding-top:.62rem;border-top:1px solid var(--color-border)}
.vuln-calc-section-title{display:flex;align-items:center;gap:.34rem;font-size:.65rem;font-weight:850;color:var(--color-text-primary)}
.vuln-calc-section-title i{color:#DC2626;font-size:.74rem}
.vuln-calc-policy-name{display:block;margin-top:.32rem;font-size:.7rem;color:var(--color-text-primary)}
.vuln-calc-section p{margin:.18rem 0 0;font-size:.67rem;line-height:1.42;color:var(--color-text-secondary)}
.vuln-calc-signals{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.42rem}
.vuln-calc-signal{
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:100%;
  border:1px solid var(--color-border);
  border-radius:999px;
  padding:.15rem .38rem;
  font-size:.58rem;
  line-height:1.2;
  font-weight:750;
  color:var(--color-text-secondary);
  background:var(--color-content-bg);
  white-space:normal;
}
.vuln-calc-signal.is-danger{color:#B91C1C;border-color:rgba(220,38,38,.24);background:rgba(220,38,38,.06)}
.vuln-calc-signal.is-warn{color:#B45309;border-color:rgba(217,119,6,.24);background:rgba(217,119,6,.06)}
.vuln-calc-outcome{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.34rem .48rem;
  margin-top:.5rem;
  padding:.45rem .5rem;
  border-left:3px solid #DC2626;
  border-radius:7px;
  background:rgba(220,38,38,.055);
}
.vuln-calc-outcome strong{font-size:.63rem;color:#B91C1C;white-space:nowrap}
.vuln-calc-outcome span{font-size:.65rem;line-height:1.4;color:var(--color-text-secondary)}
.vuln-calc-outcome.is-neutral{border-left-color:#64748B;background:rgba(100,116,139,.06)}
.vuln-calc-outcome.is-neutral strong{color:var(--color-text-primary)}
.vuln-calc-floor-purpose{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.42rem;
  align-items:start;
  margin-top:.52rem;
  padding:.48rem .52rem;
  border:1px solid rgba(37,99,235,.16);
  border-radius:8px;
  background:rgba(37,99,235,.045);
  color:var(--color-text-secondary);
}
.vuln-calc-floor-purpose i{color:var(--color-primary);font-size:.73rem;margin-top:.02rem}
.vuln-calc-floor-purpose span{font-size:.64rem;line-height:1.42}
.vuln-calc-floor-purpose strong{color:var(--color-text-primary)}
[data-theme="dark"] .vuln-calc-head{background:linear-gradient(180deg,rgba(96,165,250,.08),rgba(96,165,250,0))}
[data-theme="dark"] .vuln-calc-step,[data-theme="dark"] .vuln-calc-status,[data-theme="dark"] .vuln-calc-signal{background:rgba(255,255,255,.035)}
[data-theme="dark"] .vuln-calc-decision{background:rgba(255,255,255,.045)}
[data-theme="dark"] .vuln-calc-step.is-floor,[data-theme="dark"] .vuln-calc-outcome{background:rgba(248,113,113,.08)}
[data-theme="dark"] .vuln-calc-floor-purpose{background:rgba(96,165,250,.07)}
@media (max-width:640px){
  .vuln-risk-details .vuln-calc-tooltip{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
  .vuln-calc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vuln-calc-head{gap:.45rem}
  .vuln-calc-decision{align-items:flex-start;flex-direction:column;gap:.18rem}
}

/* ============================================================
   Build 49 - residual-risk popover viewport layer
   The vulnerabilities table scroll container can clip descendants.
   Risk calculation details are promoted to a fixed viewport layer by
   the page script, then flipped/clamped so the full card stays visible.
   ============================================================ */
.vuln-calc-tooltip.vuln-calc-floating{
  display:block!important;
  position:fixed!important;
  inset:auto!important;
  width:430px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  padding:0;
  overflow:auto;
  overscroll-behavior:contain;
  z-index:2147483000!important;
  pointer-events:none;
  visibility:hidden;
  border-radius:13px;
  line-height:1.35;
  font-size:.74rem;
  background:var(--color-card-bg);
  color:var(--color-text-primary);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-lg);
}
.vuln-calc-tooltip.vuln-calc-floating.is-positioned{visibility:visible}
.vuln-calc-tooltip.vuln-calc-floating:before{display:none!important}
/* Once the viewport layer is active, suppress the in-table copy so there
   can never be two cards fighting for stacking/overflow. */
.vuln-risk-details.is-floating-open > .vuln-calc-tooltip{display:none!important}
@media (max-width:640px){
  .vuln-calc-tooltip.vuln-calc-floating{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
}


/* ── Top-bar task calendar ────────────────────────────────────
   The calendar mirrors Activities & Tasks only: personal work, manager team
   work, ownerless Department Queue tasks and persistent milestones. */
.clock-popover-panel {
  width: min(470px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 88px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.calendar-day {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 39px;
  padding: .2rem .12rem .44rem;
  flex-direction: column;
  gap: .08rem;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.calendar-day:hover,
.calendar-day:focus-visible {
  background: var(--color-accent-soft);
  border-color: rgba(37,99,235,.22);
  color: var(--color-text-primary);
  outline: none;
}
.calendar-day.has-actions:not(.is-today) {
  --calendar-day-work-bg: rgba(37,99,235,.095);
  --calendar-day-work-border: rgba(37,99,235,.24);
  background: var(--calendar-day-work-bg);
  border-color: var(--calendar-day-work-border);
}
.calendar-day.has-personal-task:not(.is-today) {
  --calendar-day-work-bg: rgba(37,99,235,.105);
  --calendar-day-work-border: rgba(37,99,235,.30);
}
.calendar-day.has-team-task:not(.is-today) {
  --calendar-day-work-bg: rgba(15,118,110,.10);
  --calendar-day-work-border: rgba(15,118,110,.28);
}
.calendar-day.has-department-task:not(.is-today) {
  --calendar-day-work-bg: rgba(217,119,6,.105);
  --calendar-day-work-border: rgba(217,119,6,.30);
}
.calendar-day.has-milestone:not(.is-today) {
  --calendar-day-work-bg: rgba(124,58,237,.10);
  --calendar-day-work-border: rgba(124,58,237,.28);
}
.calendar-day.has-mixed-actions:not(.is-today) {
  --calendar-day-work-bg: linear-gradient(135deg, rgba(37,99,235,.085), rgba(124,58,237,.065));
  --calendar-day-work-border: rgba(99,102,241,.26);
}
.calendar-day.has-overdue:not(.is-today) {
  --calendar-day-work-bg: rgba(239,68,68,.105);
  --calendar-day-work-border: rgba(220,38,38,.48);
}
.calendar-day.has-done:not(.is-today):not(.has-overdue) {
  --calendar-day-work-bg: color-mix(in srgb, var(--color-card-bg-soft) 82%, #94a3b8 7%);
  --calendar-day-work-border: color-mix(in srgb, var(--color-border) 82%, #64748b 18%);
}
.calendar-day.is-selected {
  border-color: rgba(37,99,235,.68);
  box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.28), 0 0 0 1px rgba(255,255,255,.72);
}
.calendar-day.has-actions:hover,
.calendar-day.has-actions:focus-visible {
  filter: saturate(1.06);
}
.calendar-day.is-today:hover,
.calendar-day.is-today:focus-visible {
  color: #fff;
  background: var(--color-accent);
}
.calendar-day-number { line-height: 1; }
.calendar-day-dots {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 5px;
  max-width: calc(100% - 8px);
}
.calendar-action-marker {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 99px;
  flex: 0 0 auto;
  background: #64748b;
}
.calendar-action-marker.is-personal-task { background: #2563eb; }
.calendar-action-marker.is-team-task { background: #0f766e; }
.calendar-action-marker.is-department-task { background: #d97706; }
.calendar-action-marker.is-milestone { background: #7c3aed; }
.calendar-day.is-today .calendar-action-marker {
  height: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72);
}
.calendar-day-count {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-primary);
  color: var(--color-card-bg);
  font-size: .55rem;
  font-weight: 850;
  line-height: 1;
}
.calendar-day.is-today .calendar-day-count {
  background: #fff;
  color: var(--color-accent);
}
.calendar-action-summary {
  min-height: 27px;
  margin-top: .72rem;
  padding: .4rem .55rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-card-bg-soft);
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 680;
  display: flex;
  align-items: center;
}
.calendar-action-summary-text.has-overdue { color: #b91c1c; }
.calendar-action-summary.is-error { color: #b91c1c; }
.calendar-action-legend {
  margin-top: .48rem;
  display: flex;
  flex-wrap: wrap;
  gap: .38rem .8rem;
  color: var(--color-text-muted);
  font-size: .64rem;
  font-weight: 680;
}
.calendar-action-legend > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.calendar-action-legend .calendar-action-marker {
  width: 14px;
  height: 4px;
}
.calendar-agenda {
  border-top: 1px solid var(--color-border);
  min-height: 92px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card-bg);
}
.calendar-agenda-header {
  padding: .62rem 1rem .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}
.calendar-agenda-header strong {
  color: var(--color-text-primary);
  font-size: .78rem;
  font-weight: 820;
}
.calendar-agenda-count {
  color: var(--color-text-muted);
  font-size: .65rem;
  font-weight: 720;
}
.calendar-agenda-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 238px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: .2rem .65rem .62rem;
}
.calendar-agenda-empty {
  padding: 1rem .35rem;
  color: var(--color-text-muted);
  font-size: .7rem;
  text-align: center;
}
.calendar-agenda-day + .calendar-agenda-day { margin-top: .34rem; }
.calendar-agenda-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .34rem .48rem .26rem;
  color: var(--color-text-muted);
  font-size: .6rem;
  font-weight: 760;
  letter-spacing: .015em;
}
.calendar-agenda-day-heading strong {
  color: var(--color-text-secondary);
  font-size: .64rem;
  font-weight: 820;
}
.calendar-agenda-item {
  --calendar-agenda-accent: #64748b;
  --calendar-agenda-soft: transparent;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr) auto;
  align-items: center;
  gap: .62rem;
  padding: .5rem .48rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  border-left: 3px solid var(--calendar-agenda-accent);
  background: var(--calendar-agenda-soft);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.calendar-agenda-item.is-personal-task { --calendar-agenda-accent: #2563eb; --calendar-agenda-soft: rgba(37,99,235,.035); }
.calendar-agenda-item.is-team-task { --calendar-agenda-accent: #0f766e; --calendar-agenda-soft: rgba(15,118,110,.035); }
.calendar-agenda-item.is-department-task { --calendar-agenda-accent: #d97706; --calendar-agenda-soft: rgba(217,119,6,.04); }
.calendar-agenda-item.is-milestone { --calendar-agenda-accent: #7c3aed; --calendar-agenda-soft: rgba(124,58,237,.038); }
.calendar-agenda-item + .calendar-agenda-item { margin-top: 2px; }
a.calendar-agenda-item:hover,
a.calendar-agenda-item:focus-visible {
  background: color-mix(in srgb, var(--calendar-agenda-soft) 66%, var(--color-card-bg-soft));
  border-color: color-mix(in srgb, var(--calendar-agenda-accent) 28%, var(--color-border));
  color: inherit;
  outline: none;
  transform: translateX(1px);
}
.calendar-agenda-item.is-overdue {
  --calendar-agenda-accent: #dc2626;
  --calendar-agenda-soft: rgba(239,68,68,.07);
  background: var(--calendar-agenda-soft);
}
.calendar-agenda-item.is-done {
  --calendar-agenda-accent: #94a3b8;
  --calendar-agenda-soft: color-mix(in srgb, var(--color-card-bg-soft) 78%, transparent);
  background: var(--calendar-agenda-soft);
  opacity: .72;
}
.calendar-agenda-item.is-done .calendar-agenda-copy strong { color: var(--color-text-secondary); }
.calendar-agenda-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .84rem;
}
.calendar-agenda-icon.is-personal-task { background: rgba(37,99,235,.12); color: #2563eb; }
.calendar-agenda-icon.is-team-task { background: rgba(15,118,110,.12); color: #0f766e; }
.calendar-agenda-icon.is-department-task { background: rgba(217,119,6,.13); color: #b45309; }
.calendar-agenda-icon.is-milestone { background: rgba(124,58,237,.12); color: #7c3aed; }
.calendar-agenda-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .16rem;
}
.calendar-agenda-copy strong {
  color: var(--color-text-primary);
  font-size: .71rem;
  font-weight: 780;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-agenda-meta {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: .61rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: .34rem;
  overflow: hidden;
  white-space: nowrap;
}
.calendar-agenda-meta > span:not(.calendar-agenda-kind) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-agenda-kind {
  flex: 0 0 auto;
  padding: .08rem .3rem;
  border-radius: 999px;
  font-size: .54rem;
  font-weight: 820;
  border: 1px solid transparent;
}
.calendar-agenda-kind.is-personal-task { background: rgba(37,99,235,.08); color: #1d4ed8; border-color: rgba(37,99,235,.16); }
.calendar-agenda-kind.is-team-task { background: rgba(15,118,110,.08); color: #0f766e; border-color: rgba(15,118,110,.16); }
.calendar-agenda-kind.is-department-task { background: rgba(217,119,6,.09); color: #a16207; border-color: rgba(217,119,6,.18); }
.calendar-agenda-kind.is-milestone { background: rgba(124,58,237,.08); color: #6d28d9; border-color: rgba(124,58,237,.16); }
.calendar-agenda-state {
  padding: .18rem .38rem;
  border-radius: 999px;
  background: var(--color-card-bg-soft);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-size: .58rem;
  font-weight: 820;
  white-space: nowrap;
}
.calendar-agenda-state.is-overdue {
  background: rgba(239,68,68,.08);
  color: #b91c1c;
  border-color: rgba(239,68,68,.20);
}
.calendar-agenda-state.is-today {
  background: rgba(37,99,235,.09);
  color: #1d4ed8;
  border-color: rgba(37,99,235,.20);
}
.calendar-agenda-state.is-done {
  background: rgba(100,116,139,.09);
  color: #64748b;
  border-color: rgba(100,116,139,.18);
}
.clock-widget-hero,
.clock-widget-calendar,
.clock-widget-footer { flex: 0 0 auto; }
[data-theme="dark"] .calendar-day.has-personal-task:not(.is-today) { --calendar-day-work-bg: rgba(37,99,235,.16); --calendar-day-work-border: rgba(96,165,250,.34); }
[data-theme="dark"] .calendar-day.has-team-task:not(.is-today) { --calendar-day-work-bg: rgba(15,118,110,.17); --calendar-day-work-border: rgba(45,212,191,.32); }
[data-theme="dark"] .calendar-day.has-department-task:not(.is-today) { --calendar-day-work-bg: rgba(217,119,6,.17); --calendar-day-work-border: rgba(251,191,36,.34); }
[data-theme="dark"] .calendar-day.has-milestone:not(.is-today) { --calendar-day-work-bg: rgba(124,58,237,.17); --calendar-day-work-border: rgba(167,139,250,.34); }
[data-theme="dark"] .calendar-day.has-mixed-actions:not(.is-today) { --calendar-day-work-bg: linear-gradient(135deg, rgba(37,99,235,.13), rgba(124,58,237,.13)); --calendar-day-work-border: rgba(129,140,248,.32); }
[data-theme="dark"] .calendar-day.has-overdue:not(.is-today) { --calendar-day-work-bg: rgba(239,68,68,.15); --calendar-day-work-border: rgba(248,113,113,.42); }
[data-theme="dark"] .calendar-day.has-done:not(.is-today):not(.has-overdue) { --calendar-day-work-bg: rgba(100,116,139,.13); --calendar-day-work-border: rgba(148,163,184,.22); }
[data-theme="dark"] .calendar-action-summary-text.has-overdue,
[data-theme="dark"] .calendar-action-summary.is-error,
[data-theme="dark"] .calendar-agenda-state.is-overdue { color: #fca5a5; }
[data-theme="dark"] .calendar-agenda-state.is-today { color: #93c5fd; }
[data-theme="dark"] .calendar-agenda-kind.is-personal-task { color: #93c5fd; }
[data-theme="dark"] .calendar-agenda-kind.is-team-task { color: #5eead4; }
[data-theme="dark"] .calendar-agenda-kind.is-department-task { color: #fbbf24; }
[data-theme="dark"] .calendar-agenda-kind.is-milestone { color: #c4b5fd; }

/* CORE brand -------------------------------------------------- */
.sidebar-logo.is-core-brand,
.sidebar-logo.is-core-brand.has-img,
.sidebar-logo.is-core-brand.has-image {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  flex: 0 0 3rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.sidebar-logo.is-core-brand .sidebar-logo-full,
.sidebar-logo.is-core-brand.has-img > img:first-child,
.sidebar-logo.is-core-brand.has-image > img:first-child {
  width: 100% !important;
  height: 100% !important;
  padding: .18rem !important;
  object-fit: contain !important;
  filter: none !important;
  transform: none !important;
}
.sidebar-brand-name {
  font-weight: 650 !important;
  letter-spacing: .11em !important;
}
.sidebar-brand-subtitle {
  display: block !important;
  margin-top: .18rem !important;
  color: rgba(226,232,240,.72) !important;
  font-size: .54rem !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
}
html.sidebar-collapsed .sidebar-logo.is-core-brand,
.sidebar-collapsed .sidebar-logo.is-core-brand {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  flex-basis: 3rem !important;
}


/* Portal brand auth layout hotfix -------------------------------------------
   Brand values/paths remain DB-driven. These rules only control presentation.
   Keep selectors generic so changing the configured brand does not require PHP. */
.login-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: 1rem;
}
.login-wrapper {
  margin-block: auto;
}
.login-logo.login-logo-brand {
  width: 64px;
  height: 64px;
  margin: 0 auto .7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.login-logo.login-logo-brand .portal-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.login-logo.login-logo-brand .portal-brand-mark-dark { display: none; }
[data-theme="dark"] .login-logo.login-logo-brand.has-dark-mark .portal-brand-mark-light { display: none; }
[data-theme="dark"] .login-logo.login-logo-brand.has-dark-mark .portal-brand-mark-dark { display: block; }
.login-header {
  margin-bottom: 1.5rem;
}
.login-brand-tagline {
  margin: .15rem auto .3rem;
  max-width: 320px;
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Do not vertically center a card that is taller than a short viewport. */
@media (max-height: 700px) {
  .login-body { align-items: flex-start; }
  .login-wrapper { margin-block: 0; }
  .login-card { padding-block: 1.55rem; }
  .login-header { margin-bottom: 1.15rem; }
  .login-logo.login-logo-brand {
    width: 52px;
    height: 52px;
    margin-bottom: .5rem;
  }
}

@media (max-width: 480px) {
  .login-wrapper { padding-inline: .75rem; }
  .login-card { padding-inline: 1.35rem; }
}