/* ============================================================================
   CS Bot Portal — Kewaunee Scientific Design System
   ----------------------------------------------------------------------------
   Color Philosophy: Dark Navy chrome, Kewaunee Blue primary, Red/Yellow pops
   Typography: Industry Black (display), IBM Plex Sans (UI), Helvetica Now Text
               (body), IBM Plex Mono (code/logs)
   Spacing: 4px base unit
   Radii: tight / architectural (2–8px)

   Keeps existing `cs-*` class surface so app.js works unchanged. Tokens are
   swapped to Kewaunee Scientific brand values.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. WEB FONTS
   `@import` rules must appear before any other at-rules or style rules,
   so the Google Fonts import comes first and the self-hosted @font-face
   declarations follow.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face {
  font-family: "Helvetica Now Text";
  src: url("/assets/fonts/HelveticaNowText.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Industry";
  src: url("/assets/fonts/Industry-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* -- Kewaunee brand palette -- */
  --ksc-dark-navy:        #071E36;
  --ksc-kewaunee-blue:    #0055AB;
  --ksc-statesville-blue: #3580BF;
  --ksc-kewaunee-red:     #DE0016;
  --ksc-bold-yellow:      #FFAA16;
  --ksc-ice-white:        #F2F2F2;
  --ksc-pure-white:       #FFFFFF;
  --ksc-slate-blue:       #4D6680;
  --ksc-charcoal:         #333333;

  /* Navy ramps */
  --ksc-navy-95:  #0C253F;
  --ksc-navy-90:  #13304D;
  --ksc-navy-80:  #1F3A55;
  --ksc-navy-70:  #2B4868;
  --ksc-navy-60:  #3E5266;
  --ksc-navy-t20: #394B5E;
  --ksc-navy-t40: #6A7886;
  --ksc-navy-t60: #9CA5AF;
  --ksc-navy-t80: #CDD2D7;
  --ksc-navy-t95: #E8EAEE;

  /* Blue ramps */
  --ksc-blue-t20: #3377BB;
  --ksc-blue-t40: #7FA8D3;
  --ksc-blue-t60: #98BADC;
  --ksc-blue-t80: #CBDCED;
  --ksc-blue-t95: #EAF1F9;

  --ksc-yellow-t80: #FFE4B0;
  --ksc-red-t80:    #FCE6E8;
  --ksc-red-t40:    #EF808B;

  /* -- Primary (Kewaunee Blue → Dark Navy) — keeps `--cs-primary-*` surface for app.js -- */
  --cs-primary-50:  var(--ksc-blue-t95);
  --cs-primary-100: #D5E3F3;
  --cs-primary-200: var(--ksc-blue-t80);
  --cs-primary-300: var(--ksc-blue-t60);
  --cs-primary-400: var(--ksc-blue-t40);
  --cs-primary-500: var(--ksc-statesville-blue);
  --cs-primary-600: var(--ksc-kewaunee-blue);
  --cs-primary-700: #004487;
  --cs-primary-800: #003564;
  --cs-primary-900: var(--ksc-dark-navy);
  --cs-primary-950: #050F1C;

  /* -- Neutral (Navy-tinted slate) -- */
  --cs-slate-25:  #FAFBFC;
  --cs-slate-50:  var(--ksc-ice-white);
  --cs-slate-100: #EAEEF2;
  --cs-slate-150: #E8EBEF;
  --cs-slate-200: #D9DEE4;
  --cs-slate-300: #B6BFC9;
  --cs-slate-400: var(--ksc-navy-t60);
  --cs-slate-500: var(--ksc-navy-t40);
  --cs-slate-600: var(--ksc-slate-blue);
  --cs-slate-700: var(--ksc-navy-t20);
  --cs-slate-800: var(--ksc-navy-80);
  --cs-slate-900: var(--ksc-navy-90);
  --cs-slate-950: var(--ksc-dark-navy);

  /* -- Semantic: Success (navy-compatible green) -- */
  --cs-success-50:  #E3F6EC;
  --cs-success-100: #C3ECD4;
  --cs-success-400: #3DBE82;
  --cs-success-500: #1F8F5A;
  --cs-success-600: #157A44;
  --cs-success-700: #116336;
  --cs-success-900: #093A1F;

  /* -- Semantic: Warning (Bold Yellow) -- */
  --cs-warning-50:  #FFF6DF;
  --cs-warning-100: #FFECB7;
  --cs-warning-400: #FFBF47;
  --cs-warning-500: var(--ksc-bold-yellow);
  --cs-warning-600: #E99910;
  --cs-warning-700: #A16B00;
  --cs-warning-900: #5C3D00;

  /* -- Semantic: Danger (Kewaunee Red) -- */
  --cs-danger-50:  var(--ksc-red-t80);
  --cs-danger-100: #F7BFC5;
  --cs-danger-400: var(--ksc-red-t40);
  --cs-danger-500: var(--ksc-kewaunee-red);
  --cs-danger-600: #B0000F;
  --cs-danger-700: #8A000C;
  --cs-danger-900: #47000A;

  /* -- Semantic: Info (Statesville Blue) -- */
  --cs-info-50:  var(--ksc-blue-t95);
  --cs-info-100: #D5E3F3;
  --cs-info-400: var(--ksc-blue-t40);
  --cs-info-500: var(--ksc-statesville-blue);
  --cs-info-600: var(--ksc-kewaunee-blue);
  --cs-info-900: var(--ksc-dark-navy);

  /* -- Surface & Background -- */
  --cs-bg-body:     var(--ksc-ice-white);
  --cs-bg-surface:  var(--ksc-pure-white);
  --cs-bg-elevated: var(--ksc-pure-white);
  --cs-bg-inset:    #EAEEF2;
  --cs-bg-overlay:  rgba(7, 30, 54, 0.55);

  /* -- Borders -- */
  --cs-border-default: #D9DEE4;
  --cs-border-subtle:  #E8EBEF;
  --cs-border-strong:  #B6BFC9;
  --cs-border-focus:   var(--ksc-kewaunee-blue);
  --cs-border-on-dark: rgba(255, 255, 255, 0.12);
  --cs-border-on-dark-strong: rgba(255, 255, 255, 0.22);

  /* -- Text -- */
  --cs-text-primary:    var(--ksc-dark-navy);
  --cs-text-secondary:  var(--ksc-slate-blue);
  --cs-text-tertiary:   var(--ksc-navy-t40);
  --cs-text-inverse:    var(--ksc-pure-white);
  --cs-text-inverse-2:  rgba(255, 255, 255, 0.72);
  --cs-text-inverse-3:  rgba(255, 255, 255, 0.52);
  --cs-text-link:       var(--ksc-kewaunee-blue);

  /* -- Typography -- */
  --cs-font-display: "Industry", "Industry Black", "Arial Black", sans-serif;
  --cs-font-sub:     "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --cs-font-sans:    "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif;
  --cs-font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* -- Font Sizes (rem) -- */
  --cs-text-xs:    0.75rem;
  --cs-text-sm:    0.8125rem;
  --cs-text-base:  0.875rem;
  --cs-text-md:    0.9375rem;
  --cs-text-lg:    1rem;
  --cs-text-xl:    1.125rem;
  --cs-text-2xl:   1.25rem;
  --cs-text-3xl:   1.5rem;
  --cs-text-4xl:   2rem;
  --cs-text-display: 2.625rem; /* 42px — KPI numerals */

  /* -- Line Heights -- */
  --cs-leading-tight:   1.25;
  --cs-leading-normal:  1.5;
  --cs-leading-relaxed: 1.625;

  /* -- Spacing (4px grid) -- */
  --cs-space-0:  0;
  --cs-space-1:  0.25rem;
  --cs-space-1h: 0.375rem;
  --cs-space-2:  0.5rem;
  --cs-space-3:  0.75rem;
  --cs-space-4:  1rem;
  --cs-space-5:  1.25rem;
  --cs-space-6:  1.5rem;
  --cs-space-8:  2rem;
  --cs-space-10: 2.5rem;
  --cs-space-12: 3rem;
  --cs-space-16: 4rem;

  /* -- Radii (tight / architectural) -- */
  --cs-radius-sm:   2px;
  --cs-radius-md:   4px;
  --cs-radius-lg:   6px;
  --cs-radius-xl:   8px;
  --cs-radius-2xl:  10px;
  --cs-radius-full: 9999px;

  /* -- Shadows -- */
  --cs-shadow-xs:   0 1px 2px rgba(7, 30, 54, 0.06);
  --cs-shadow-sm:   0 2px 6px rgba(7, 30, 54, 0.08);
  --cs-shadow-md:   0 8px 20px rgba(7, 30, 54, 0.10);
  --cs-shadow-lg:   0 20px 40px rgba(7, 30, 54, 0.14);
  --cs-shadow-xl:   0 30px 60px rgba(7, 30, 54, 0.18);
  --cs-shadow-ring: 0 0 0 3px rgba(0, 85, 171, 0.15);
  --cs-shadow-ring-danger: 0 0 0 3px rgba(222, 0, 22, 0.18);

  /* -- Transitions -- */
  --cs-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --cs-transition-normal: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --cs-transition-slow:   260ms cubic-bezier(0.4, 0, 0.2, 1);
  --cs-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -- Z-index -- */
  --cs-z-dropdown: 10;
  --cs-z-sticky:   20;
  --cs-z-overlay:  40;
  --cs-z-modal:    50;
  --cs-z-toast:    60;
}

/* -- Dark mode tokens -- */
.dark {
  --cs-bg-body:     var(--ksc-dark-navy);
  --cs-bg-surface:  var(--ksc-navy-90);
  --cs-bg-elevated: var(--ksc-navy-80);
  --cs-bg-inset:    var(--ksc-navy-80);
  --cs-bg-overlay:  rgba(0, 0, 0, 0.72);

  --cs-border-default: rgba(255, 255, 255, 0.10);
  --cs-border-subtle:  rgba(255, 255, 255, 0.06);
  --cs-border-strong:  rgba(255, 255, 255, 0.22);
  --cs-border-focus:   var(--ksc-statesville-blue);

  --cs-text-primary:   #EEF2F7;
  --cs-text-secondary: rgba(255, 255, 255, 0.72);
  --cs-text-tertiary:  rgba(255, 255, 255, 0.48);
  --cs-text-link:      var(--ksc-statesville-blue);

  --cs-primary-600: var(--ksc-statesville-blue);
  --cs-primary-700: var(--ksc-blue-t20);

  --cs-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.35);
  --cs-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.35);
  --cs-shadow-md:   0 8px 20px rgba(0, 0, 0, 0.40);
  --cs-shadow-lg:   0 20px 40px rgba(0, 0, 0, 0.50);
  --cs-shadow-ring: 0 0 0 3px rgba(53, 128, 191, 0.25);
  --cs-shadow-ring-danger: 0 0 0 3px rgba(239, 128, 139, 0.25);
}


/* ---------------------------------------------------------------------------
   2. BASE RESET & TYPOGRAPHY
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-normal);
  color: var(--cs-text-primary);
  background-color: var(--cs-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ksc-bold-yellow); color: var(--ksc-dark-navy); }

/* Display / editorial type helpers */
.cs-display {
  font-family: var(--cs-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
}
.cs-eyebrow {
  font-family: var(--cs-font-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ksc-kewaunee-blue);
}
.cs-eyebrow--on-dark { color: var(--ksc-bold-yellow); }

a { color: var(--cs-text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }


/* ---------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   --------------------------------------------------------------------------- */

/* -- App header (Dark Navy) -- */
.cs-header {
  position: sticky;
  top: 0;
  z-index: var(--cs-z-sticky);
  background: var(--ksc-dark-navy);
  color: var(--cs-text-inverse);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

.dark .cs-header {
  background: #050F1C;
}

/* Gradient accent stripe beneath the header — Kewaunee ribbon motif */
.cs-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--ksc-kewaunee-blue) 0%,
    var(--ksc-blue-t40) 50%,
    var(--ksc-kewaunee-red) 100%);
  opacity: 0.9;
  pointer-events: none;
}

.cs-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--cs-space-5);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
}

/* -- App logo (Kewaunee wordmark + product eyebrow/title) -- */
.cs-logo {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  min-width: 0;
  flex-shrink: 0;
}

.cs-logo-mark {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.cs-logo-product {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.cs-logo-eyebrow {
  font-family: var(--cs-font-sub);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ksc-bold-yellow);
  white-space: nowrap;
}

.cs-logo-text {
  font-family: var(--cs-font-sub);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--cs-text-inverse);
  white-space: nowrap;
}

/* -- Health indicator (on-dark pill) -- */
.cs-health {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 6px var(--cs-space-3);
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-inverse-2);
  background: transparent;
  border: 1px solid var(--cs-border-on-dark);
  border-radius: var(--cs-radius-md);
}

.cs-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ksc-navy-t60);
  transition: background var(--cs-transition-normal);
}

.cs-health-dot--ok {
  background: #2DD17E;
  box-shadow: 0 0 0 3px rgba(45, 209, 126, 0.18);
}

.cs-health-dot--error {
  background: var(--ksc-kewaunee-red);
  box-shadow: 0 0 0 3px rgba(222, 0, 22, 0.22);
  animation: cs-pulse-dot 2s ease-in-out infinite;
}

@keyframes cs-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* -- Dark-mode toggle (on-dark chip) -- */
.cs-dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--cs-radius-md);
  background: transparent;
  border: 1px solid var(--cs-border-on-dark);
  color: var(--cs-text-inverse-2);
  cursor: pointer;
  transition: background var(--cs-transition-fast),
              color var(--cs-transition-fast),
              border-color var(--cs-transition-fast);
}

.cs-dark-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cs-text-inverse);
  border-color: var(--cs-border-on-dark-strong);
}

/* -- Top tab navigation -- */
.cs-nav {
  background: var(--cs-bg-surface);
  border-bottom: 1px solid var(--cs-border-default);
  padding: 0 var(--cs-space-5);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cs-nav::-webkit-scrollbar { display: none; }

.dark .cs-nav {
  background: var(--cs-bg-surface);
  border-bottom-color: var(--cs-border-default);
}

.cs-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 14px 14px 13px;
  font-family: var(--cs-font-sub);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cs-text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--cs-transition-fast),
              border-color var(--cs-transition-fast),
              background var(--cs-transition-fast);
}

.cs-nav-item:hover {
  color: var(--cs-text-primary);
  background: var(--cs-bg-inset);
}

.cs-nav-item--active {
  color: var(--cs-text-primary);
  border-bottom-color: var(--ksc-kewaunee-blue);
}

.dark .cs-nav-item--active {
  color: var(--cs-text-primary);
  border-bottom-color: var(--ksc-statesville-blue);
}

.cs-nav-icon {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.cs-nav-item--active .cs-nav-icon { opacity: 1; }

/* Optional tab count chip (for conversations / KB badges) */
.cs-nav-item .cs-tabcount {
  font-family: var(--cs-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--cs-radius-full);
  background: var(--cs-bg-inset);
  color: var(--cs-text-secondary);
}

.cs-nav-item--active .cs-tabcount {
  background: var(--ksc-bold-yellow);
  color: var(--ksc-dark-navy);
}

.dark .cs-nav-item .cs-tabcount {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cs-text-secondary);
}

/* -- Sub-navigation (inside Settings / Rules pages) -- */
.cs-subnav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--cs-border-default);
  margin-bottom: var(--cs-space-5);
}

.cs-subnav-item {
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cs-text-secondary);
  font-family: var(--cs-font-sub);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--cs-transition-fast),
              border-color var(--cs-transition-fast);
}

.cs-subnav-item:hover { color: var(--cs-text-primary); }

.cs-subnav-item--active {
  color: var(--cs-text-primary);
  border-bottom-color: var(--ksc-kewaunee-blue);
  font-weight: 600;
}

.dark .cs-subnav-item--active {
  border-bottom-color: var(--ksc-statesville-blue);
}


/* ---------------------------------------------------------------------------
   4. STAT CARDS (KPI)
   --------------------------------------------------------------------------- */

.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cs-space-4);
}

@media (max-width: 768px) {
  .cs-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Clean surface card with thick color bar on top — Kewaunee pattern */
.cs-stat-card {
  position: relative;
  padding: 18px 20px 16px;
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-text-primary);
  overflow: hidden;
  box-shadow: var(--cs-shadow-xs);
}

.cs-stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ksc-kewaunee-blue);
  pointer-events: none;
}

.cs-stat-card::after { content: none; }

.cs-stat-card--total::before    { background: var(--ksc-kewaunee-blue); }
.cs-stat-card--24h::before      { background: var(--ksc-dark-navy); }
.cs-stat-card--awaiting::before { background: var(--ksc-bold-yellow); }
.cs-stat-card--auto::before     { background: var(--ksc-kewaunee-red); }

.cs-stat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  gap: var(--cs-space-3);
}

.cs-stat-label {
  font-family: var(--cs-font-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ksc-kewaunee-blue);
  margin-bottom: 10px;
}

.dark .cs-stat-label {
  color: var(--ksc-bold-yellow);
}

.cs-stat-value {
  font-family: var(--cs-font-display);
  font-weight: 900;
  font-size: var(--cs-text-display);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--cs-text-primary);
  display: flex;
  align-items: baseline;
  gap: var(--cs-space-2);
}

.cs-stat-value .cs-stat-unit {
  font-family: var(--cs-font-sub);
  font-weight: 500;
  font-size: 16px;
  color: var(--cs-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

.cs-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cs-radius-md);
  background: var(--cs-bg-inset);
  color: var(--cs-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: none;
}

.cs-stat-icon svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* Trend indicator */
.cs-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--cs-font-mono);
  font-size: 11px;
  font-weight: 500;
  margin-top: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.cs-stat-trend--up   { color: var(--cs-success-600); }
.cs-stat-trend--down { color: var(--cs-danger-500); }

.dark .cs-stat-trend--up   { color: var(--cs-success-400); }
.dark .cs-stat-trend--down { color: var(--ksc-red-t40); }

.cs-stat-trend-icon {
  width: 12px;
  height: 12px;
}


/* ---------------------------------------------------------------------------
   5. DATA TABLES
   --------------------------------------------------------------------------- */

.cs-table-wrap {
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow-xs);
}

.cs-table {
  width: 100%;
  font-size: var(--cs-text-sm);
  border-collapse: separate;
  border-spacing: 0;
}

.cs-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.cs-table thead th {
  text-align: left;
  padding: 11px 14px;
  font-family: var(--cs-font-sub);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cs-text-secondary);
  background: var(--cs-bg-inset);
  border-bottom: 1px solid var(--cs-border-default);
  white-space: nowrap;
  user-select: none;
}

.dark .cs-table thead th {
  background: rgba(255, 255, 255, 0.03);
}

.cs-table thead th.cs-sortable {
  cursor: pointer;
  transition: color var(--cs-transition-fast);
}

.cs-table thead th.cs-sortable:hover {
  color: var(--cs-text-primary);
}

.cs-table thead th .cs-sort-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.35;
  transition: opacity var(--cs-transition-fast);
}

.cs-table thead th.cs-sorted .cs-sort-icon {
  opacity: 0.9;
  color: var(--ksc-kewaunee-blue);
}

.cs-table thead th.cs-sorted--desc .cs-sort-icon {
  transform: rotate(180deg);
}

.cs-table tbody tr {
  transition: background var(--cs-transition-fast);
}

.cs-table tbody tr:hover {
  background: rgba(0, 85, 171, 0.03);
}

.dark .cs-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Zebra striping removed — cleaner architectural feel */

.cs-table tbody td {
  padding: 12px 14px;
  color: var(--cs-text-primary);
  border-bottom: 1px solid var(--cs-border-subtle);
  vertical-align: middle;
}

.cs-table tbody tr:last-child td {
  border-bottom: none;
}

.cs-table tbody tr.cs-row-clickable {
  cursor: pointer;
}

.cs-table .cs-cell-muted {
  color: var(--cs-text-secondary);
  font-size: var(--cs-text-xs);
}

.cs-table .cs-cell-mono {
  font-family: var(--cs-font-mono);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-secondary);
}

.cs-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cs-bg-inset);
  border-top: 1px solid var(--cs-border-default);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-secondary);
}

.dark .cs-table-footer {
  background: rgba(255, 255, 255, 0.03);
}

.cs-table-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.cs-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--cs-space-2);
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  color: var(--cs-text-secondary);
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-md);
  cursor: pointer;
  transition: all var(--cs-transition-fast);
}

.cs-page-btn:hover:not(:disabled) {
  border-color: var(--ksc-kewaunee-blue);
  color: var(--ksc-kewaunee-blue);
  background: var(--cs-primary-50);
}

.cs-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-page-btn--active {
  background: var(--ksc-kewaunee-blue);
  border-color: var(--ksc-kewaunee-blue);
  color: #fff;
}


/* ---------------------------------------------------------------------------
   6. DETAIL CARDS
   --------------------------------------------------------------------------- */

.cs-card {
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  padding: 18px;
  box-shadow: var(--cs-shadow-xs);
  transition: border-color var(--cs-transition-normal),
              box-shadow var(--cs-transition-normal);
}

.cs-card:hover {
  border-color: var(--cs-border-strong);
  box-shadow: var(--cs-shadow-sm);
}

.cs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-3);
}

.cs-card-title {
  font-family: var(--cs-font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cs-text-primary);
  line-height: var(--cs-leading-tight);
}

.cs-card-subtitle {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-secondary);
  margin-top: 2px;
}

.cs-card-body {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  line-height: var(--cs-leading-relaxed);
}

.cs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-3);
  margin-top: var(--cs-space-4);
  padding-top: var(--cs-space-4);
  border-top: 1px solid var(--cs-border-subtle);
}

.cs-card-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

/* Kewaunee accent variants — thick top bar replaces left border */
.cs-card--accent {
  border-top: 3px solid var(--ksc-kewaunee-blue);
  border-left: 1px solid var(--cs-border-default);
}
.cs-card--pop {
  border-top: 3px solid var(--ksc-bold-yellow);
}
.cs-card--red {
  border-top: 3px solid var(--ksc-kewaunee-red);
}

/* Card for SME experts */
.cs-card--sme {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--cs-space-4);
  align-items: center;
  padding: 14px 18px;
}

.cs-card--sme:hover {
  border-color: var(--ksc-blue-t60);
}

.dark .cs-card--sme:hover {
  border-color: rgba(0, 85, 171, 0.4);
}

/* Avatar (Kewaunee blue→red gradient) */
.cs-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ksc-kewaunee-blue), var(--ksc-kewaunee-red));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-sm);
  font-weight: 600;
}

.dark .cs-avatar {
  background: linear-gradient(135deg, var(--ksc-statesville-blue), var(--ksc-kewaunee-red));
}

/* Default / fallback SME card — yellow */
.cs-card--default-sme {
  background: var(--cs-warning-50);
  border-color: #F2D996;
  border-top: 3px solid var(--ksc-bold-yellow);
  border-left: 1px solid #F2D996;
}

.dark .cs-card--default-sme {
  background: rgba(255, 170, 22, 0.08);
  border-color: rgba(255, 170, 22, 0.3);
  border-top-color: var(--ksc-bold-yellow);
}

/* KB suggestion card */
.cs-card--kb {
  border-top: 3px solid var(--ksc-statesville-blue);
}

.cs-card--kb-approved {
  border-top-color: var(--cs-success-500);
}

.cs-card--kb-dismissed {
  border-top-color: var(--ksc-slate-blue);
  opacity: 0.7;
}


/* ---------------------------------------------------------------------------
   7. MODAL DIALOG
   --------------------------------------------------------------------------- */

.cs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cs-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-4);
  background: var(--cs-bg-overlay);
  backdrop-filter: blur(4px);
  animation: cs-fade-in 150ms ease-out;
}

.cs-modal-overlay[data-closing="true"] {
  animation: cs-fade-out 120ms ease-in forwards;
}

.cs-modal {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-top: 3px solid var(--ksc-kewaunee-blue);
  border-radius: var(--cs-radius-xl);
  box-shadow: var(--cs-shadow-xl);
  animation: cs-modal-enter 200ms var(--cs-transition-spring);
}

.cs-modal--lg { max-width: 42rem; }
.cs-modal--sm { max-width: 24rem; }

.cs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cs-space-5) var(--cs-space-6);
  border-bottom: 1px solid var(--cs-border-subtle);
}

.cs-modal-title {
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  color: var(--cs-text-primary);
  letter-spacing: 0.01em;
}

.cs-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--cs-radius-md);
  background: transparent;
  border: none;
  color: var(--cs-text-tertiary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--cs-transition-fast);
}

.cs-modal-close:hover {
  background: var(--cs-bg-inset);
  color: var(--cs-text-primary);
}

.cs-modal-body {
  padding: var(--cs-space-6);
}

.cs-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cs-space-3);
  padding: var(--cs-space-4) var(--cs-space-6);
  border-top: 1px solid var(--cs-border-subtle);
  background: var(--cs-bg-inset);
  border-radius: 0 0 var(--cs-radius-xl) var(--cs-radius-xl);
}

.dark .cs-modal-footer {
  background: rgba(255, 255, 255, 0.03);
}

/* Danger modal variant */
.cs-modal--danger {
  border-top-color: var(--ksc-kewaunee-red);
}

.cs-modal--danger .cs-modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

.cs-modal-danger-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--cs-radius-full);
  background: var(--cs-danger-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--cs-space-4);
}

.dark .cs-modal-danger-icon {
  background: rgba(222, 0, 22, 0.12);
}

.cs-modal-danger-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ksc-kewaunee-red);
}

@keyframes cs-modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cs-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-fade-out { from { opacity: 1; } to { opacity: 0; } }


/* ---------------------------------------------------------------------------
   8. TOAST NOTIFICATIONS
   --------------------------------------------------------------------------- */

.cs-toast-container {
  position: fixed;
  top: var(--cs-space-4);
  right: var(--cs-space-4);
  z-index: var(--cs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  max-width: 24rem;
  pointer-events: none;
}

.cs-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  padding: var(--cs-space-4);
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-lg);
  pointer-events: auto;
  animation: cs-toast-enter 300ms var(--cs-transition-spring);
  overflow: hidden;
  position: relative;
}

.cs-toast[data-closing="true"] {
  animation: cs-toast-exit 200ms ease-in forwards;
}

.cs-toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
}

.cs-toast--success .cs-toast-icon { color: var(--cs-success-500); }
.cs-toast--error   .cs-toast-icon { color: var(--cs-danger-500); }
.cs-toast--warning .cs-toast-icon { color: var(--cs-warning-500); }
.cs-toast--info    .cs-toast-icon { color: var(--cs-info-500); }

.cs-toast--success { border-top: 3px solid var(--cs-success-500); }
.cs-toast--error   { border-top: 3px solid var(--cs-danger-500); }
.cs-toast--warning { border-top: 3px solid var(--cs-warning-500); }
.cs-toast--info    { border-top: 3px solid var(--cs-info-500); }

.cs-toast-content { flex: 1; min-width: 0; }

.cs-toast-title {
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-primary);
  line-height: var(--cs-leading-tight);
}

.cs-toast-message {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-secondary);
  margin-top: 2px;
  line-height: var(--cs-leading-normal);
}

.cs-toast-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--cs-radius-sm);
  background: transparent;
  border: none;
  color: var(--cs-text-tertiary);
  cursor: pointer;
  transition: all var(--cs-transition-fast);
}

.cs-toast-dismiss:hover {
  background: var(--cs-bg-inset);
  color: var(--cs-text-primary);
}

.cs-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0;
  animation: cs-toast-progress linear forwards;
}

.cs-toast--success .cs-toast-progress { background: var(--cs-success-500); }
.cs-toast--error   .cs-toast-progress { background: var(--cs-danger-500); }
.cs-toast--warning .cs-toast-progress { background: var(--cs-warning-500); }
.cs-toast--info    .cs-toast-progress { background: var(--cs-info-500); }

@keyframes cs-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

@keyframes cs-toast-enter {
  from { opacity: 0; transform: translateX(100%) translateX(var(--cs-space-4)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cs-toast-exit {
  from { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(100%); max-height: 0; margin-bottom: calc(var(--cs-space-3) * -1); }
}


/* ---------------------------------------------------------------------------
   9. FORM CONTROLS
   --------------------------------------------------------------------------- */

.cs-label {
  display: block;
  font-family: var(--cs-font-sub);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cs-text-secondary);
  margin-bottom: 5px;
}

.cs-label-required::after {
  content: ' *';
  color: var(--ksc-kewaunee-red);
}

.cs-input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-sm);
  line-height: 1.5;
  color: var(--cs-text-primary);
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-md);
  box-shadow: none;
  transition: border-color var(--cs-transition-fast),
              box-shadow var(--cs-transition-fast);
  outline: none;
}

.cs-input::placeholder {
  color: var(--cs-text-tertiary);
}

.cs-input:hover:not(:focus):not(:disabled) {
  border-color: var(--ksc-slate-blue);
}

.cs-input:focus {
  border-color: var(--ksc-kewaunee-blue);
  box-shadow: var(--cs-shadow-ring);
}

.cs-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cs-bg-inset);
}

.cs-input--error {
  border-color: var(--ksc-kewaunee-red);
}

.cs-input--error:focus {
  box-shadow: var(--cs-shadow-ring-danger);
}

.dark .cs-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--cs-text-primary);
}

.dark .cs-input:focus {
  border-color: var(--ksc-statesville-blue);
}

.cs-input-error-msg {
  font-size: var(--cs-text-xs);
  color: var(--ksc-kewaunee-red);
  margin-top: var(--cs-space-1);
}

.cs-input-help {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-tertiary);
  margin-top: var(--cs-space-1);
}

.cs-textarea {
  width: 100%;
  padding: var(--cs-space-3);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-sm);
  line-height: var(--cs-leading-relaxed);
  color: var(--cs-text-primary);
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-md);
  transition: border-color var(--cs-transition-fast),
              box-shadow var(--cs-transition-fast);
  outline: none;
  resize: vertical;
  min-height: 5rem;
}

.cs-textarea::placeholder {
  color: var(--cs-text-tertiary);
}

.cs-textarea:focus {
  border-color: var(--ksc-kewaunee-blue);
  box-shadow: var(--cs-shadow-ring);
}

.dark .cs-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

.dark .cs-textarea:focus {
  border-color: var(--ksc-statesville-blue);
}

.cs-select {
  appearance: none;
  width: 100%;
  padding: 9px var(--cs-space-8) 9px 12px;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-primary);
  background-color: var(--cs-bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234D6680' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.1rem;
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-md);
  transition: border-color var(--cs-transition-fast),
              box-shadow var(--cs-transition-fast);
  outline: none;
  cursor: pointer;
}

.cs-select:focus {
  border-color: var(--ksc-kewaunee-blue);
  box-shadow: var(--cs-shadow-ring);
}

.dark .cs-select {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA5AF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* -- Toggle switch -- */
.cs-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: var(--cs-space-2);
}

.cs-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cs-toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  background: var(--cs-border-strong);
  border-radius: var(--cs-radius-full);
  transition: background var(--cs-transition-fast);
  flex-shrink: 0;
}

.dark .cs-toggle-track {
  background: rgba(255, 255, 255, 0.2);
}

.cs-toggle-input:checked + .cs-toggle-track {
  background: var(--ksc-kewaunee-blue);
}

.dark .cs-toggle-input:checked + .cs-toggle-track {
  background: var(--ksc-statesville-blue);
}

.cs-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left var(--cs-transition-fast);
}

.cs-toggle-input:checked + .cs-toggle-track::after {
  left: 16px;
}

.cs-toggle-input:focus-visible + .cs-toggle-track {
  outline: 2px solid var(--ksc-kewaunee-blue);
  outline-offset: 2px;
}

.cs-toggle-label {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
}


/* ---------------------------------------------------------------------------
   10. BUTTONS
   --------------------------------------------------------------------------- */

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  font-family: var(--cs-font-sub);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--cs-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cs-text-primary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  outline: none;
  transition: background var(--cs-transition-fast),
              color var(--cs-transition-fast),
              border-color var(--cs-transition-fast),
              box-shadow var(--cs-transition-fast);
}

.cs-btn:focus-visible {
  outline: 2px solid var(--ksc-kewaunee-blue);
  outline-offset: 2px;
}

.cs-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.cs-btn--xs {
  padding: 4px var(--cs-space-2);
  font-size: 11px;
  border-radius: var(--cs-radius-sm);
}

.cs-btn--sm {
  padding: 6px 10px;
  font-size: 12px;
}

.cs-btn--lg {
  padding: 11px 18px;
  font-size: 14px;
}

/* Primary — Kewaunee Blue */
.cs-btn--primary {
  background: var(--ksc-kewaunee-blue);
  color: #fff;
  border-color: var(--ksc-kewaunee-blue);
}

.cs-btn--primary:hover:not(:disabled) {
  background: var(--ksc-dark-navy);
  border-color: var(--ksc-dark-navy);
}

.cs-btn--primary:active:not(:disabled) {
  background: #050F1C;
  border-color: #050F1C;
}

.dark .cs-btn--primary {
  background: var(--ksc-statesville-blue);
  border-color: var(--ksc-statesville-blue);
}

.dark .cs-btn--primary:hover:not(:disabled) {
  background: var(--ksc-kewaunee-blue);
  border-color: var(--ksc-kewaunee-blue);
}

/* Secondary / ghost with surface */
.cs-btn--secondary {
  background: var(--cs-bg-surface);
  color: var(--cs-text-primary);
  border-color: var(--cs-border-strong);
  box-shadow: none;
}

.cs-btn--secondary:hover:not(:disabled) {
  background: var(--cs-bg-inset);
  border-color: var(--cs-border-strong);
}

/* Danger — Kewaunee Red */
.cs-btn--danger {
  background: var(--ksc-kewaunee-red);
  color: #fff;
  border-color: var(--ksc-kewaunee-red);
}

.cs-btn--danger:hover:not(:disabled) {
  background: #B0000F;
  border-color: #B0000F;
}

/* Pop — Bold Yellow accent CTA */
.cs-btn--pop {
  background: var(--ksc-bold-yellow);
  color: var(--ksc-dark-navy);
  border-color: var(--ksc-bold-yellow);
  font-weight: 600;
}

.cs-btn--pop:hover:not(:disabled) {
  background: #E99910;
  border-color: #E99910;
}

/* Ghost — transparent bg */
.cs-btn--ghost {
  background: transparent;
  color: var(--cs-text-secondary);
  border-color: transparent;
}

.cs-btn--ghost:hover:not(:disabled) {
  background: var(--cs-bg-inset);
  color: var(--cs-text-primary);
}

/* Link */
.cs-btn--link {
  background: transparent;
  color: var(--cs-text-link);
  padding-left: 0;
  padding-right: 0;
  border: none;
}

.cs-btn--link:hover:not(:disabled) {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   11. STATUS BADGES & TOPIC PILLS
   --------------------------------------------------------------------------- */

.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-family: var(--cs-font-sub);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: var(--cs-radius-full);
  border: 1px solid;
  white-space: nowrap;
}

.cs-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Conversation statuses */
.cs-badge--new {
  background: var(--ksc-blue-t95);
  color: var(--ksc-kewaunee-blue);
  border-color: #C9DBEE;
}

.dark .cs-badge--new {
  background: rgba(127, 168, 211, 0.15);
  color: #9ECAEC;
  border-color: rgba(127, 168, 211, 0.30);
}

.cs-badge--auto_replied {
  background: var(--cs-success-50);
  color: var(--cs-success-700);
  border-color: #B9E4CC;
}

.dark .cs-badge--auto_replied {
  background: rgba(31, 143, 90, 0.14);
  color: var(--cs-success-400);
  border-color: rgba(31, 143, 90, 0.30);
}

.cs-badge--awaiting_sme {
  background: var(--cs-warning-50);
  color: #8A5A00;
  border-color: #F2D996;
}
.cs-badge--awaiting_sme .cs-badge-dot { animation: cs-pulse-dot 2s ease-in-out infinite; }

.dark .cs-badge--awaiting_sme {
  background: rgba(255, 170, 22, 0.14);
  color: var(--ksc-bold-yellow);
  border-color: rgba(255, 170, 22, 0.30);
}

.cs-badge--sme_replied {
  background: var(--ksc-blue-t95);
  color: var(--ksc-kewaunee-blue);
  border-color: #C9DBEE;
}

.dark .cs-badge--sme_replied {
  background: rgba(127, 168, 211, 0.15);
  color: #9ECAEC;
  border-color: rgba(127, 168, 211, 0.30);
}

.cs-badge--closed {
  background: #EEF1F4;
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

.dark .cs-badge--closed {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

.cs-badge--needs_review {
  background: var(--ksc-red-t80);
  color: var(--ksc-kewaunee-red);
  border-color: #F4BAC1;
}

.dark .cs-badge--needs_review {
  background: rgba(222, 0, 22, 0.14);
  color: var(--ksc-red-t40);
  border-color: rgba(222, 0, 22, 0.30);
}

/* Rule states */
.cs-badge--active {
  background: var(--cs-success-50);
  color: var(--cs-success-700);
  border-color: #B9E4CC;
}

.dark .cs-badge--active {
  background: rgba(31, 143, 90, 0.14);
  color: var(--cs-success-400);
  border-color: rgba(31, 143, 90, 0.30);
}

.cs-badge--disabled {
  background: #EEF1F4;
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

.dark .cs-badge--disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

/* KB statuses */
.cs-badge--pending {
  background: var(--cs-warning-50);
  color: #8A5A00;
  border-color: #F2D996;
}

.cs-badge--approved {
  background: var(--cs-success-50);
  color: var(--cs-success-700);
  border-color: #B9E4CC;
}

.cs-badge--dismissed,
.cs-badge--rejected_auto {
  background: #EEF1F4;
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

.dark .cs-badge--pending {
  background: rgba(255, 170, 22, 0.14);
  color: var(--ksc-bold-yellow);
  border-color: rgba(255, 170, 22, 0.30);
}

.dark .cs-badge--approved {
  background: rgba(31, 143, 90, 0.14);
  color: var(--cs-success-400);
  border-color: rgba(31, 143, 90, 0.30);
}

.dark .cs-badge--dismissed,
.dark .cs-badge--rejected_auto {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cs-text-secondary);
  border-color: var(--cs-border-default);
}

/* Topic pill (compact mono-style chip) */
.cs-topic-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--cs-font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--cs-bg-inset);
  color: var(--cs-text-primary);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-sm);
}

.cs-topic-pill--blue {
  background: var(--ksc-blue-t95);
  color: var(--ksc-kewaunee-blue);
  border-color: #C9DBEE;
}

.dark .cs-topic-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cs-text-primary);
  border-color: var(--cs-border-default);
}


/* ---------------------------------------------------------------------------
   12. LOADING & SKELETONS
   --------------------------------------------------------------------------- */

@keyframes cs-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.cs-skeleton {
  border-radius: var(--cs-radius-md);
  background: linear-gradient(
    90deg,
    var(--cs-slate-150) 25%,
    var(--cs-slate-100) 50%,
    var(--cs-slate-150) 75%
  );
  background-size: 200% 100%;
  animation: cs-shimmer 1.8s ease-in-out infinite;
}

.dark .cs-skeleton {
  background: linear-gradient(
    90deg,
    var(--ksc-navy-80) 25%,
    var(--ksc-navy-70) 50%,
    var(--ksc-navy-80) 75%
  );
  background-size: 200% 100%;
}

.cs-skeleton--text      { height: 0.875rem; width: 100%; }
.cs-skeleton--text-sm   { height: 0.75rem; width: 75%; }
.cs-skeleton--heading   { height: 1.5rem; width: 40%; }
.cs-skeleton--avatar    { width: 2.5rem; height: 2.5rem; border-radius: var(--cs-radius-full); }
.cs-skeleton--button    { height: 2.25rem; width: 5rem; border-radius: var(--cs-radius-md); }
.cs-skeleton--card      { height: 6rem; border-radius: var(--cs-radius-lg); }
.cs-skeleton--stat      { height: 7rem; border-radius: var(--cs-radius-lg); }
.cs-skeleton--chart     { height: 12rem; border-radius: var(--cs-radius-lg); }

.cs-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-4);
  padding: var(--cs-space-3) var(--cs-space-4);
  border-bottom: 1px solid var(--cs-border-subtle);
}

.cs-skeleton-row > div {
  height: 0.75rem;
  border-radius: var(--cs-radius-sm);
}

.cs-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--cs-border-default);
  border-top-color: var(--ksc-kewaunee-blue);
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
}

.cs-spinner--sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; }
.cs-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }

.cs-spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

@keyframes cs-spin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------------------
   13. EMPTY STATES
   --------------------------------------------------------------------------- */

.cs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-12) var(--cs-space-6);
  text-align: center;
}

.cs-empty-icon {
  width: 3rem;
  height: 3rem;
  color: var(--cs-text-tertiary);
  margin-bottom: var(--cs-space-4);
  opacity: 0.55;
}

.cs-empty-title {
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-md);
  font-weight: 600;
  color: var(--cs-text-primary);
  margin-bottom: var(--cs-space-1);
}

.cs-empty-message {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  max-width: 20rem;
  line-height: var(--cs-leading-relaxed);
  margin-bottom: var(--cs-space-5);
}


/* ---------------------------------------------------------------------------
   14. CHARTS
   --------------------------------------------------------------------------- */

.cs-donut-ring {
  fill: none;
  stroke-width: 3.5;
  stroke: var(--cs-bg-inset);
}

.dark .cs-donut-ring {
  stroke: rgba(255, 255, 255, 0.08);
}

.cs-donut-segment {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease, opacity 0.2s ease;
}

.cs-donut-segment:hover {
  stroke-width: 4;
  filter: brightness(1.08);
}

.cs-donut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cs-donut-center-value {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-3xl);
  font-weight: 900;
  color: var(--cs-text-primary);
  letter-spacing: 0.01em;
  line-height: 1;
}

.cs-donut-center-label {
  font-family: var(--cs-font-sub);
  font-size: 10px;
  color: var(--cs-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 4px;
}

.cs-chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.cs-chart-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-2);
  font-size: var(--cs-text-xs);
}

.cs-chart-legend-color {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cs-chart-legend-label {
  flex: 1;
  color: var(--cs-text-primary);
}

.cs-chart-legend-value {
  font-family: var(--cs-font-mono);
  font-weight: 500;
  color: var(--cs-text-secondary);
  font-variant-numeric: tabular-nums;
}

.cs-bar-track {
  height: 8px;
  background: var(--cs-bg-inset);
  border-radius: 2px;
  overflow: hidden;
}

.dark .cs-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

.cs-bar-fill {
  height: 100%;
  background: var(--ksc-kewaunee-blue);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cs-space-1);
  font-size: var(--cs-text-xs);
}

.cs-bar-label-text {
  color: var(--cs-text-primary);
  font-weight: 500;
}

.cs-bar-label-value {
  font-family: var(--cs-font-mono);
  color: var(--cs-text-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cs-chart-card {
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-top: 3px solid var(--ksc-kewaunee-blue);
  border-radius: var(--cs-radius-lg);
  padding: 18px;
  box-shadow: var(--cs-shadow-xs);
}

.cs-chart-card-title {
  font-family: var(--cs-font-sub);
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--cs-space-4);
}


/* ---------------------------------------------------------------------------
   15. SECTION / COLLAPSIBLE PANELS
   --------------------------------------------------------------------------- */

.cs-section {
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
}

.cs-section + .cs-section { margin-top: var(--cs-space-4); }

.cs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cs-space-4) var(--cs-space-5);
  cursor: pointer;
  user-select: none;
  transition: background var(--cs-transition-fast);
}

.cs-section-header:hover {
  background: var(--cs-bg-inset);
}

.cs-section-title {
  font-family: var(--cs-font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cs-text-primary);
}

.cs-section-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cs-text-tertiary);
  transition: transform var(--cs-transition-normal);
}

.cs-section-chevron--open {
  transform: rotate(180deg);
}

.cs-section-body {
  padding: 0 var(--cs-space-5) var(--cs-space-5);
}


/* ---------------------------------------------------------------------------
   16. LOG VIEWER (mono, dark panel)
   --------------------------------------------------------------------------- */

.cs-log-container {
  font-family: var(--cs-font-mono);
  font-size: 12px;
  line-height: 1.6;
  max-height: 36rem;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--ksc-dark-navy);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
}

.dark .cs-log-container {
  background: #050F1C;
}

.cs-log-entry {
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.cs-log-entry--error { color: #FF8A92; }
.cs-log-entry--warn  { color: var(--ksc-bold-yellow); }
.cs-log-entry--info  { color: var(--ksc-blue-t40); }
.cs-log-entry--debug { color: rgba(255, 255, 255, 0.4); }

.cs-log-timestamp {
  color: rgba(255, 255, 255, 0.4);
  margin-right: var(--cs-space-2);
}


/* ---------------------------------------------------------------------------
   17. FILTER BAR
   --------------------------------------------------------------------------- */

.cs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cs-space-3);
  padding: var(--cs-space-4);
  background: var(--cs-bg-surface);
  border: 1px solid var(--cs-border-default);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-xs);
  margin-bottom: var(--cs-space-4);
}

.cs-filter-group {
  display: flex;
  flex-direction: column;
}


/* ---------------------------------------------------------------------------
   18. UTILITIES
   --------------------------------------------------------------------------- */

.cs-fade-in { animation: cs-fade-in 200ms ease-out; }

.cs-divider {
  height: 1px;
  background: var(--cs-border-default);
  border: none;
  margin: var(--cs-space-4) 0;
}

/* Gradient ribbon bar — Kewaunee accent */
.cs-gradient-bar {
  height: 3px;
  background: linear-gradient(90deg,
    var(--ksc-kewaunee-blue) 0%,
    var(--ksc-blue-t40) 50%,
    var(--ksc-kewaunee-red) 100%);
  border-radius: 2px;
}

.cs-prose {
  font-size: var(--cs-text-sm);
  line-height: var(--cs-leading-relaxed);
  color: var(--cs-text-secondary);
}

.cs-prose p + p { margin-top: var(--cs-space-3); }

.cs-code {
  font-family: var(--cs-font-mono);
  font-size: var(--cs-text-xs);
  padding: 1px var(--cs-space-1h);
  background: var(--cs-bg-inset);
  border: 1px solid var(--cs-border-subtle);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text-primary);
}

.cs-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-section-label {
  font-family: var(--cs-font-sub);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cs-text-tertiary);
}

/* Smooth scroll */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--cs-border-strong);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cs-text-tertiary);
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}


/* ---------------------------------------------------------------------------
   19. CONFIRM DIALOG
   --------------------------------------------------------------------------- */

.cs-confirm-body {
  text-align: center;
  padding: var(--cs-space-6);
}

.cs-confirm-title {
  font-family: var(--cs-font-sub);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  color: var(--cs-text-primary);
  margin-bottom: var(--cs-space-2);
}

.cs-confirm-message {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  line-height: var(--cs-leading-relaxed);
  max-width: 24rem;
  margin: 0 auto;
}

.cs-confirm-actions {
  display: flex;
  justify-content: center;
  gap: var(--cs-space-3);
  margin-top: var(--cs-space-6);
}


/* ---------------------------------------------------------------------------
   20. VIEW TRANSITIONS
   --------------------------------------------------------------------------- */

.cs-view-enter {
  opacity: 0;
  transform: translateY(6px);
}

.cs-view-enter-active {
  animation: cs-view-fade-in 250ms ease-out forwards;
}

@keyframes cs-view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------------
   21. TAB STATE CLASSES (legacy helpers)
   --------------------------------------------------------------------------- */

.cs-tab-active {
  color: var(--cs-text-primary);
  border-bottom: 2px solid var(--ksc-kewaunee-blue);
  font-weight: 600;
}

.dark .cs-tab-active {
  border-bottom-color: var(--ksc-statesville-blue);
}

.cs-tab-inactive {
  color: var(--cs-text-secondary);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}

.cs-tab-inactive:hover {
  color: var(--cs-text-primary);
}


/* ---------------------------------------------------------------------------
   22. PAGE HEADERS (Kewaunee editorial style)
   --------------------------------------------------------------------------- */

.cs-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cs-space-6);
  margin-bottom: var(--cs-space-5);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cs-border-default);
}

.cs-page-head h1,
.cs-page-head h2 {
  font-family: var(--cs-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 32px;
  line-height: 1.02;
  color: var(--cs-text-primary);
  margin: 6px 0 0;
}

.cs-page-head .cs-page-sub {
  color: var(--cs-text-secondary);
  font-size: 13px;
  margin-top: 6px;
}

.cs-page-head .cs-page-actions {
  display: flex;
  gap: var(--cs-space-2);
  align-items: center;
}

/* Editorial hero — dark navy panel with grid motif */
.cs-editorial-hero {
  background: var(--ksc-dark-navy);
  color: #fff;
  border-radius: var(--cs-radius-lg);
  padding: 32px 40px;
  margin-bottom: var(--cs-space-6);
  position: relative;
  overflow: hidden;
}

.cs-editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/design-elements/Grid1.png");
  background-size: 520px;
  background-position: right -40px top -40px;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.cs-editorial-hero h1 {
  font-family: var(--cs-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 8px 0 10px;
  max-width: 760px;
}

.cs-editorial-hero .cs-eyebrow {
  color: var(--ksc-bold-yellow);
}

.cs-editorial-hero .cs-lede {
  font-family: var(--cs-font-sub);
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
  line-height: 1.5;
}