/* ============================================================
   KingsCorner Component Library  (components.css)
   Phase 0b of the Global CSS Redesign Sprint
   ------------------------------------------------------------
   RULE: every value here references a token from tokens.css.
   No hardcoded hex/rgba. Keeps the library theme-agnostic so a
   future [data-theme="light"] block restyles everything for free.

   Load order in base.html:  tokens.css -> megamenu.css -> components.css
   ------------------------------------------------------------
   Phase 0b-1 (this file): .kc-glass-card + .kc-page-header
   Phase 0b-2 (next):      .kc-btn, .kc-kpi-tile, .kc-empty-state
   ============================================================ */

/* ============================================================
   GLASS CARD
   The core surface primitive. A translucent, blurred panel that
   floats over the aurora background.
   Variants:
     .kc-glass-card              base surface
     .kc-glass-card--strong      denser surface (for panels/modals)
     .kc-glass-card--inner       nested surface (card-within-card)
     .kc-glass-card--flush       no padding (for tables/media)
     .kc-glass-card--interactive hover lift + accent border
   ============================================================ */
.kc-glass-card {
  background: var(--kc-glass-surface);
  backdrop-filter: blur(var(--kc-glass-blur)) saturate(var(--kc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--kc-glass-blur)) saturate(var(--kc-glass-saturate));
  border: 1px solid var(--kc-glass-border);
  border-radius: var(--kc-radius-xl);
  box-shadow: var(--kc-shadow-md);
  padding: var(--kc-space-6);
  color: var(--kc-text-body);
}

.kc-glass-card--strong {
  background: var(--kc-glass-surface-strong);
  backdrop-filter: blur(var(--kc-glass-blur-strong)) saturate(var(--kc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--kc-glass-blur-strong)) saturate(var(--kc-glass-saturate));
  box-shadow: var(--kc-shadow-lg);
}

.kc-glass-card--inner {
  background: var(--kc-glass-surface-inner);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--kc-glass-border-dim);
  box-shadow: none;
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-4);
}

.kc-glass-card--flush {
  padding: 0;
  overflow: hidden;
}

.kc-glass-card--interactive {
  cursor: pointer;
  transition:
    transform var(--kc-dur-base) var(--kc-ease),
    border-color var(--kc-dur-base) var(--kc-ease),
    box-shadow var(--kc-dur-slow) var(--kc-ease),
    background var(--kc-dur-base) var(--kc-ease);
}
.kc-glass-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--kc-glass-border-hover);
  box-shadow: var(--kc-shadow-lg), var(--kc-shadow-glow-cyan);
  background: var(--kc-glass-surface-strong);
}
.kc-glass-card--interactive:active {
  transform: translateY(0);
}

/* Optional card header row inside a glass card */
.kc-glass-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-space-3);
  margin-bottom: var(--kc-space-4);
  padding-bottom: var(--kc-space-3);
  border-bottom: 1px solid var(--kc-glass-border-dim);
}
.kc-glass-card__title {
  margin: 0;
  font-size: var(--kc-fs-md);
  font-weight: var(--kc-fw-semibold);
  color: var(--kc-text-primary);
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
}
.kc-glass-card__meta {
  font-size: var(--kc-fs-sm);
  color: var(--kc-text-muted);
}

/* ============================================================
   PAGE HEADER
   Standard top-of-page identity strip: title + subtitle on the
   left, optional action row on the right. Sits below the megamenu.
   ============================================================ */
.kc-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kc-space-4);
  flex-wrap: wrap;
  margin: var(--kc-space-6) 0 var(--kc-space-5);
  padding-bottom: var(--kc-space-4);
  border-bottom: 1px solid var(--kc-glass-border-dim);
}

.kc-page-header__titles {
  min-width: 0;
}

.kc-page-header__title {
  margin: 0;
  font-size: var(--kc-fs-2xl);
  font-weight: var(--kc-fw-bold);
  color: var(--kc-text-primary);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: var(--kc-space-3);
}

.kc-page-header__icon {
  font-size: var(--kc-fs-xl);
  line-height: 1;
}

.kc-page-header__subtitle {
  margin: var(--kc-space-2) 0 0;
  font-size: var(--kc-fs-base);
  color: var(--kc-text-muted);
}

.kc-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
  flex-shrink: 0;
}

/* Breadcrumb slot above the title (optional) */
.kc-page-header__crumbs {
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
  margin-bottom: var(--kc-space-2);
  font-size: var(--kc-fs-sm);
  color: var(--kc-text-dimmer);
}
.kc-page-header__crumbs a {
  color: var(--kc-text-muted);
  text-decoration: none;
  transition: color var(--kc-dur-base) var(--kc-ease);
}
.kc-page-header__crumbs a:hover {
  color: var(--kc-accent-cyan);
}

/* ---- Responsive: stack header on small screens ---- */
@media (max-width: 768px) {
  .kc-page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .kc-page-header__actions {
    width: 100%;
  }
  .kc-page-header__title {
    font-size: var(--kc-fs-xl);
  }
}
/* ============================================================
   BUTTONS
   .kc-btn base + variants primary/secondary/ghost/danger
   + sizes sm/lg + .kc-btn-icon (square icon-only)
   ============================================================ */
.kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-space-2);
  padding: var(--kc-space-3) var(--kc-space-5);
  border-radius: var(--kc-radius-md);
  border: 1px solid transparent;
  font-family: var(--kc-font-sans);
  font-size: var(--kc-fs-base);
  font-weight: var(--kc-fw-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--kc-dur-base) var(--kc-ease),
    border-color var(--kc-dur-base) var(--kc-ease),
    box-shadow var(--kc-dur-slow) var(--kc-ease),
    color var(--kc-dur-base) var(--kc-ease),
    transform var(--kc-dur-fast) var(--kc-ease);
}
.kc-btn:active { transform: translateY(1px); }
.kc-btn:disabled,
.kc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary - cyan accent */
.kc-btn--primary {
  background: var(--kc-accent-cyan-soft);
  border-color: var(--kc-accent-cyan-glow);
  color: var(--kc-accent-cyan);
}
.kc-btn--primary:hover {
  background: var(--kc-accent-cyan);
  border-color: var(--kc-accent-cyan);
  color: var(--kc-text-inverse);
  box-shadow: var(--kc-shadow-glow-cyan);
}

/* Secondary - neutral glass */
.kc-btn--secondary {
  background: var(--kc-glass-surface-inner);
  border-color: var(--kc-glass-border);
  color: var(--kc-text-secondary);
}
.kc-btn--secondary:hover {
  background: var(--kc-glass-surface-inner-hover);
  border-color: var(--kc-glass-border-hover);
  color: var(--kc-text-primary);
}

/* Ghost - transparent until hover */
.kc-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--kc-text-muted);
}
.kc-btn--ghost:hover {
  background: var(--kc-glass-surface-inner);
  color: var(--kc-text-primary);
}

/* Danger - red accent */
.kc-btn--danger {
  background: var(--kc-accent-red-soft);
  border-color: var(--kc-accent-red);
  color: var(--kc-accent-red-text);
}
.kc-btn--danger:hover {
  background: var(--kc-accent-red);
  border-color: var(--kc-accent-red);
  color: var(--kc-text-inverse);
}

/* Sizes */
.kc-btn--sm {
  padding: var(--kc-space-2) var(--kc-space-3);
  font-size: var(--kc-fs-sm);
  border-radius: var(--kc-radius-sm);
}
.kc-btn--lg {
  padding: var(--kc-space-4) var(--kc-space-6);
  font-size: var(--kc-fs-md);
}

/* Icon-only square button */
.kc-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--kc-radius-md);
  border: 1px solid var(--kc-glass-border);
  background: var(--kc-glass-surface-inner);
  color: var(--kc-text-secondary);
  cursor: pointer;
  transition:
    background var(--kc-dur-base) var(--kc-ease),
    border-color var(--kc-dur-base) var(--kc-ease),
    color var(--kc-dur-base) var(--kc-ease);
}
.kc-btn-icon:hover {
  background: var(--kc-glass-surface-inner-hover);
  border-color: var(--kc-glass-border-hover);
  color: var(--kc-text-primary);
}

/* ============================================================
   KPI TILE
   Compact metric tile: icon + label + value (+ optional sub).
   Generalized from the homepage .kpi pattern.
   Accent set per-tile via --kc-kpi-accent (defaults to cyan).
   ============================================================ */
.kc-kpi-tile {
  --kc-kpi-accent: var(--kc-accent-cyan);
  display: flex;
  align-items: center;
  gap: var(--kc-space-3);
  padding: var(--kc-space-4);
  background: var(--kc-glass-surface-strong);
  backdrop-filter: blur(var(--kc-glass-blur)) saturate(var(--kc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--kc-glass-blur)) saturate(var(--kc-glass-saturate));
  border: 1px solid var(--kc-glass-border);
  border-radius: var(--kc-radius-lg);
}
.kc-kpi-tile__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--kc-radius-md);
  font-size: var(--kc-fs-lg);
  background: color-mix(in srgb, var(--kc-kpi-accent) 15%, transparent);
  color: var(--kc-kpi-accent);
}
.kc-kpi-tile__body { min-width: 0; }
.kc-kpi-tile__label {
  font-size: var(--kc-fs-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--kc-text-muted);
}
.kc-kpi-tile__value {
  font-size: var(--kc-fs-lg);
  font-weight: var(--kc-fw-bold);
  color: var(--kc-text-primary);
  line-height: 1.15;
}
.kc-kpi-tile__sub {
  font-size: var(--kc-fs-xs);
  color: var(--kc-text-dimmer);
}

/* ============================================================
   EMPTY STATE
   Centered placeholder for empty lists/tables/results.
   ============================================================ */
.kc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--kc-space-12) var(--kc-space-4);
  color: var(--kc-text-dim);
}
.kc-empty-state__icon {
  font-size: var(--kc-fs-2xl);
  margin-bottom: var(--kc-space-3);
  opacity: 0.5;
}
.kc-empty-state__title {
  margin: 0 0 var(--kc-space-2);
  font-size: var(--kc-fs-md);
  font-weight: var(--kc-fw-semibold);
  color: var(--kc-text-secondary);
}
.kc-empty-state__text {
  margin: 0;
  font-size: var(--kc-fs-sm);
  color: var(--kc-text-muted);
  max-width: 42ch;
}
.kc-empty-state__actions {
  margin-top: var(--kc-space-5);
  display: flex;
  gap: var(--kc-space-2);
}
/* ============================================================
   MEGAMENU CHROME  (Phase 1a-2)
   Bell + user-pill identity/notification chrome docked at the
   right edge of the megamenu pill row. Renders on every page
   that extends base.html (suppressed on the homepage, which
   keeps its own quickstrip-util copy until later de-dup).
   Distinct IDs (mmBell, mmUtilPill, ...) avoid duplicate-ID
   collisions with the homepage's .util-* chrome.
   ============================================================ */
.mm-chrome {
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
  margin-left: auto;
  flex: 0 0 auto;
}

.mm-chrome-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
  background: var(--kc-glass-surface-inner);
  border: 1px solid var(--kc-glass-border-dim);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-2) var(--kc-space-3);
  color: var(--kc-text-body);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--kc-dur-base) var(--kc-ease),
    border-color var(--kc-dur-base) var(--kc-ease),
    background var(--kc-dur-base) var(--kc-ease);
}
.mm-chrome-card:hover {
  transform: translateY(-1px);
  border-color: var(--kc-glass-border-hover);
  background: var(--kc-glass-surface-inner-hover);
}

.mm-chrome-icon { font-size: var(--kc-fs-md); line-height: 1; }

.mm-bell { justify-content: center; min-width: 42px; }
.mm-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--kc-accent-red);
  color: #fff;
  border-radius: var(--kc-radius-pill);
  font-size: var(--kc-fs-xs);
  font-weight: var(--kc-fw-bold);
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--kc-bg-base);
  line-height: 1;
}
.mm-bell-badge.active { display: inline-flex; }

.mm-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kc-accent-orange), #b45309);
  display: grid;
  place-items: center;
  font-size: var(--kc-fs-xs);
  font-weight: var(--kc-fw-bold);
  color: var(--kc-text-inverse);
  flex-shrink: 0;
}
.mm-user-name {
  font-size: var(--kc-fs-sm);
  font-weight: var(--kc-fw-semibold);
  color: var(--kc-text-primary);
  white-space: nowrap;
}
.mm-chev {
  font-size: var(--kc-fs-xs);
  opacity: 0.55;
  transition: transform var(--kc-dur-slow) var(--kc-ease);
}
.mm-chrome-card.open .mm-chev { transform: rotate(180deg); opacity: 0.9; }

.mm-menu {
  position: absolute;
  top: calc(100% + var(--kc-space-2));
  right: 0;
  background: var(--kc-glass-surface-strong);
  backdrop-filter: blur(var(--kc-glass-blur-strong)) saturate(var(--kc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--kc-glass-blur-strong)) saturate(var(--kc-glass-saturate));
  border: 1px solid var(--kc-glass-border);
  border-radius: var(--kc-radius-lg);
  min-width: 220px;
  box-shadow: var(--kc-shadow-lg);
  padding: var(--kc-space-2);
  display: none;
  z-index: 200;
}
.mm-chrome-card.open .mm-menu { display: block; }
.mm-menu--bell { min-width: 260px; }

.mm-menu-header {
  padding: var(--kc-space-2) var(--kc-space-3) var(--kc-space-2);
  font-size: var(--kc-fs-xs);
  color: var(--kc-text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--kc-fw-semibold);
}
.mm-menu-username {
  font-weight: var(--kc-fw-bold);
  color: var(--kc-text-primary);
  font-size: var(--kc-fs-base);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.mm-menu-email {
  color: var(--kc-text-dimmer);
  font-size: var(--kc-fs-xs);
  margin-top: 2px;
  font-family: var(--kc-font-mono);
  text-transform: none;
  letter-spacing: 0;
}
.mm-menu-divider {
  height: 1px;
  background: var(--kc-glass-border-dim);
  margin: var(--kc-space-1) var(--kc-space-1);
}
.mm-menu-item {
  display: flex;
  align-items: center;
  gap: var(--kc-space-3);
  padding: var(--kc-space-2) var(--kc-space-3);
  border-radius: var(--kc-radius-sm);
  color: var(--kc-text-secondary);
  font-size: var(--kc-fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--kc-dur-base) var(--kc-ease);
}
.mm-menu-item:hover { background: var(--kc-border-faint); color: var(--kc-text-primary); }
.mm-menu-item.danger { color: var(--kc-accent-red); }
.mm-menu-item.danger:hover { background: var(--kc-accent-red-soft); }

.mm-bell-summary {
  font-weight: var(--kc-fw-bold);
  color: var(--kc-text-primary);
  font-size: var(--kc-fs-sm);
  margin-top: var(--kc-space-1);
  text-transform: none;
  letter-spacing: 0;
}
.mm-bell-count {
  margin-left: auto;
  background: var(--kc-accent-red);
  color: #fff;
  font-size: var(--kc-fs-xs);
  font-weight: var(--kc-fw-bold);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--kc-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-bell-empty {
  padding: var(--kc-space-3) var(--kc-space-2);
  text-align: center;
  color: var(--kc-text-muted);
  font-size: var(--kc-fs-sm);
  font-style: italic;
}

@media (max-width: 768px) {
  .mm-chrome { width: 100%; justify-content: flex-end; margin-top: var(--kc-space-2); }
  .mm-user-name { display: none; }
}
/* ============================================================
   GRID  (Phase 1b)
   Responsive auto-fit card grid. Children size themselves;
   collapses to a single column on small screens.
   ============================================================ */
.kc-grid {
  display: grid;
  gap: var(--kc-space-5);
}
.kc-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (max-width: 600px) {
  .kc-grid--cards { grid-template-columns: 1fr; }
}

/* Server/nav card built on .kc-glass-card--interactive.
   Per-card accent set via --kc-card-accent (defaults to cyan). */
.kc-navcard {
  --kc-card-accent: var(--kc-accent-cyan);
  display: block;
  color: inherit;
  text-decoration: none;
}
.kc-navcard:hover { border-color: var(--kc-card-accent); }
.kc-navcard__icon {
  font-size: var(--kc-fs-2xl);
  display: block;
  margin-bottom: var(--kc-space-3);
}
.kc-navcard__name {
  font-size: var(--kc-fs-md);
  font-weight: var(--kc-fw-bold);
  margin-bottom: var(--kc-space-1);
  color: var(--kc-card-accent);
}
.kc-navcard__desc {
  font-size: var(--kc-fs-sm);
  color: var(--kc-text-muted);
  line-height: 1.6;
}

/* ── Status pill ─────────────────────────────────────────────── */
.kc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kc-status-pill::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.kc-status-pill--ok      { color: #22c55e; background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.30); }
.kc-status-pill--warn    { color: #f59e0b; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); }
.kc-status-pill--down    { color: #ef4444; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.30); }
.kc-status-pill--unknown { color: #94a3b8; background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.30); }
.kc-status-pill--loading { color: #94a3b8; background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.22); }
.kc-status-pill--loading::before { animation: kc-pulse 1.2s ease-in-out infinite; }
@keyframes kc-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Command Center cards ────────────────────────────────────── */
.kc-cc-card { display: flex; flex-direction: column; gap: .7rem; }
.kc-cc-card__head { display: flex; align-items: center; gap: .65rem; }
.kc-cc-card__icon { font-size: 1.5rem; line-height: 1; flex: none; }
.kc-cc-card__id { flex: 1; min-width: 0; }
.kc-cc-card__name { font-weight: 700; font-size: 1.02rem; }
.kc-cc-card__version { font-size: .74rem; opacity: .6; }
.kc-cc-card__detail {
  font-size: .84rem; opacity: .78; min-height: 1.2em;
  overflow: hidden; text-overflow: ellipsis;
}
.kc-cc-card__metrics { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: auto; }
.kc-cc-metric__value { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.kc-cc-metric__label { font-size: .7rem; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }

/* ── Toast ───────────────────────────────────────────────────── */
.kc-toast-host {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
  z-index: 9999; pointer-events: none;
}
.kc-toast {
  pointer-events: auto;
  min-width: 15rem; max-width: 24rem;
  padding: .65rem .9rem;
  border-radius: .6rem;
  font-size: .85rem; font-weight: 500;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: kc-toast-in .22s ease-out;
}
.kc-toast--ok    { border-color: rgba(34,197,94,.45);  color: #86efac; }
.kc-toast--error { border-color: rgba(239,68,68,.45);  color: #fca5a5; }
@keyframes kc-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

/* action row on command center cards */
.kc-cc-card__actions {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding-top: .6rem; margin-top: .2rem;
  border-top: 1px solid rgba(148,163,184,.14);
}

/* ── Drawer ──────────────────────────────────────────────────── */
.kc-drawer-scrim {
  position: fixed; inset: 0; background: rgba(2,6,23,.62);
  backdrop-filter: blur(2px); z-index: 9000; opacity: 0;
  transition: opacity .18s ease; pointer-events: none;
}
.kc-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.kc-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(64rem, 96vw); z-index: 9001;
  background: rgba(12,18,32,.97);
  border-left: 1px solid rgba(148,163,184,.18);
  box-shadow: -12px 0 40px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.kc-drawer.is-open { transform: none; }
.kc-drawer__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid rgba(148,163,184,.14);
}
.kc-drawer__title { font-size: 1.05rem; font-weight: 700; flex: 1; }
.kc-drawer__body { padding: 1rem 1.15rem; overflow: auto; flex: 1; }
.kc-drawer__close {
  background: none; border: 0; color: inherit; opacity: .65;
  font-size: 1.35rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.kc-drawer__close:hover { opacity: 1; }

/* ── Table ───────────────────────────────────────────────────── */
.kc-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.kc-table th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; opacity: .6; font-weight: 600;
  padding: .45rem .6rem; border-bottom: 1px solid rgba(148,163,184,.2);
  position: sticky; top: 0; background: rgba(12,18,32,.97);
}
.kc-table td {
  padding: .5rem .6rem; border-bottom: 1px solid rgba(148,163,184,.09);
  vertical-align: top;
}
.kc-table tr:hover td { background: rgba(148,163,184,.05); }
.kc-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.kc-table tr.is-down td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.kc-cc-card__body { cursor: pointer; }

/* ── Section header ──────────────────────────────────────────── */
.kc-section-header {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; opacity: .72;
  margin: 1.6rem 0 .7rem;
}
.kc-section-header__rule { flex: 1; height: 1px; background: rgba(148,163,184,.16); }
.kc-section-header .kc-btn { text-transform: none; letter-spacing: 0; }

/* ── Compact service strip ───────────────────────────────────── */
.kc-svc-strip {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.kc-svc-card { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.kc-svc-card__top { display: flex; align-items: center; gap: .5rem; }
.kc-svc-card__icon { font-size: 1.15rem; line-height: 1; }
.kc-svc-card__name { font-weight: 700; font-size: .92rem; flex: 1; min-width: 0; }
.kc-svc-card__ver { font-size: .68rem; opacity: .5; }
.kc-svc-card__metrics { display: flex; gap: .9rem; flex-wrap: wrap; }
.kc-svc-card__metrics .kc-cc-metric__value { font-size: 1rem; }
.kc-svc-card__detail { font-size: .74rem; opacity: .6; }
.kc-svc-card__actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.kc-svc-card__actions .kc-btn { font-size: .72rem; padding: .18rem .5rem; }

/* ── Inline table panel ──────────────────────────────────────── */
.kc-panel { padding: 0; overflow: hidden; }
.kc-panel__scroll { max-height: 26rem; overflow: auto; }
.kc-panel__empty { padding: 1.5rem; text-align: center; opacity: .55; font-size: .85rem; }

/* ── Quick links ─────────────────────────────────────────────── */
.kc-quicklinks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.kc-quicklink {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .8rem; border-radius: .6rem; text-decoration: none;
  color: inherit; background: rgba(148,163,184,.06);
  border: 1px solid rgba(148,163,184,.14); transition: background .15s ease;
}
.kc-quicklink:hover { background: rgba(148,163,184,.13); }
.kc-quicklink__name { font-weight: 600; font-size: .85rem; }
.kc-quicklink__url { font-size: .68rem; opacity: .5; }

/* ══════════════════════════════════════════════════════════════
   Linux server pages: gauge rings, load average, docker cards
   Added for KINGDEV / KINGMEDIA / KINGOCULUS / BRYDOCKER reskin
   ══════════════════════════════════════════════════════════════ */

/* ── Gauge rings (CPU / Memory / Temp) ───────────────────────── */
.kc-gauge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: flex-start;
  padding: .4rem 0;
}
.kc-gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 8.5rem;
}
.kc-gauge {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(
    var(--kc-gauge-color, #22c55e) calc(var(--kc-gauge-pct, 0) * 1%),
    rgba(148, 163, 184, .16) 0
  );
  transition: background .4s ease;
}
.kc-gauge::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(10, 14, 26, .62);
  backdrop-filter: blur(2px);
}
.kc-gauge__value {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 800;
}
.kc-gauge-card__label {
  font-size: .74rem;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.kc-gauge-card__sub {
  font-size: .72rem;
  opacity: .5;
}

/* ── Load average row ────────────────────────────────────────── */
.kc-load-row {
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  padding-top: .6rem;
  margin-top: .6rem;
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.kc-load-item { text-align: center; }
.kc-load-item__label {
  font-size: .68rem;
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kc-load-item__value {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: .15rem;
}

/* ── Docker container cards ──────────────────────────────────── */
.kc-docker-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.kc-docker-card {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.kc-docker-card__name {
  font-weight: 700;
  font-size: .95rem;
}
.kc-docker-card__status {
  font-size: .78rem;
  opacity: .65;
}
.kc-docker-card__image {
  font-size: .72rem;
  opacity: .45;
  word-break: break-all;
}
.kc-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
  width: fit-content;
}
.kc-badge::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
}
.kc-badge--running { color: #22c55e; background: rgba(34, 197, 94, .13); }
.kc-badge--exited  { color: #ef4444; background: rgba(239, 68, 68, .13); }
.kc-badge--other   { color: #94a3b8; background: rgba(148, 163, 184, .13); }

/* ── Slot / camera mini-cards (KINGDEV slots, KINGOCULUS cameras) ── */
.kc-mini-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.kc-mini-card {
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.kc-mini-card__title {
  font-weight: 700;
  font-size: .88rem;
}
.kc-mini-card__detail {
  font-size: .76rem;
  opacity: .62;
}

/* ══════════════════════════════════════════════════════════════
   Linux server pages v2: old-style Host Info / System Resources /
   Disk Volumes / Docker Containers, ported onto the new design system.
   ══════════════════════════════════════════════════════════════ */

/* ── Host Info stat tiles ────────────────────────────────────── */
.kc-stat-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.kc-stat-tile {
  text-align: center;
  padding: 1.1rem .8rem;
}
.kc-stat-tile__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .55;
  margin-bottom: .5rem;
  font-weight: 600;
}
.kc-stat-tile__value {
  font-size: 1.05rem;
  font-weight: 800;
  word-break: break-word;
}

/* ── System Resources: large side-by-side gauge cards ───────── */
.kc-resource-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kc-resource-card {
  text-align: center;
  padding: 1.75rem 1.25rem 1.4rem;
}
.kc-resource-card__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .55;
  font-weight: 700;
  margin-bottom: .9rem;
}
.kc-resource-card__sub {
  font-size: .8rem;
  opacity: .55;
  margin-top: .7rem;
}

/* Larger gauge variant for the 2-wide resource cards (vs. the smaller
   3-in-a-row gauge used elsewhere). Shares --kc-gauge-pct/--kc-gauge-color
   with the base .kc-gauge rule. */
.kc-gauge--lg {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.kc-gauge--lg .kc-gauge__value {
  font-size: 1.65rem;
}

/* Load average row -- centered beneath both resource cards */
.kc-load-row {
  justify-content: center;
  text-align: center;
}

/* ── Disk Volumes (linear bar style) ─────────────────────────── */
.kc-disk-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kc-disk-item {
  padding: 1.1rem 1.35rem;
}
.kc-disk-item__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.kc-disk-item__mount {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--kc-accent-cyan, #22d3ee);
}
.kc-disk-item__device {
  font-size: .8rem;
  opacity: .5;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.kc-disk-bar-bg {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: rgba(148, 163, 184, .15);
  overflow: hidden;
  margin-bottom: .6rem;
}
.kc-disk-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .5s ease;
}
.kc-disk-item__meta {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  opacity: .65;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ── Docker Containers v2: name+badge header, labeled fields ─── */
.kc-docker-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.kc-docker-card__field {
  display: flex;
  gap: .5rem;
  font-size: .78rem;
}
.kc-docker-card__field-label {
  opacity: .5;
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .04em;
  min-width: 3.6rem;
  flex: none;
  padding-top: .1rem;
}
.kc-docker-card__field-value {
  opacity: .88;
  word-break: break-all;
}