/* ══════════════════════════════════════════════════════════
   Kugelblitz Brand System — Light Theme
   Primary: Blue 700 (#295BAC) · Inter + Montserrat
   ══════════════════════════════════════════════════════════ */

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

/* ── Brand Palette ──────────────────────────────────────── */
:root {
  /* Brand blue scale */
  --kb-blue-900: #183462;
  --kb-blue-800: #204867;
  --kb-blue-700: #295BAC;
  --kb-blue-600: #3261D1;
  --kb-blue-500: #3082F8;
  --kb-blue-400: #609AF8;
  --kb-blue-300: #8662F8;
  --kb-blue-200: #C4DAFF;
  --kb-blue-100: #E5EFFF;
  --kb-blue-50:  #F1F5FF;

  /* Neutral grayscale */
  --kb-surface-900: #212121;
  --kb-surface-800: #424242;
  --kb-surface-700: #616161;
  --kb-surface-600: #757575;
  --kb-surface-500: #8F8F8F;
  --kb-surface-400: #BDBDBD;
  --kb-surface-300: #E0E0E0;
  --kb-surface-200: #EEEEEE;
  --kb-surface-100: #F5F5F5;
  --kb-surface-0:   #FFFFFF;

  /* Semantic */
  --kb-red-800:    #BC221C;
  --kb-red-100:    #FFD0C8;
  --kb-green-800:  #136C34;
  --kb-green-100:  #CAF1D8;
  --kb-yellow-800: #816204;
  --kb-yellow-100: #FAEDC4;

  /* ── Aliases mapped to the existing --md-* tokens ─── */
  /* Primary – Kugelblitz Blue */
  --md-primary:               var(--kb-blue-700);
  --md-on-primary:            #FFFFFF;
  --md-primary-container:     var(--kb-blue-100);
  --md-on-primary-container:  var(--kb-blue-900);

  /* Secondary – darker blue accent */
  --md-secondary:             var(--kb-blue-800);
  --md-on-secondary:          #FFFFFF;
  --md-secondary-container:   var(--kb-blue-50);
  --md-on-secondary-container:var(--kb-blue-900);

  /* Tertiary – bright accent blue */
  --md-tertiary:              var(--kb-blue-600);
  --md-on-tertiary:           #FFFFFF;
  --md-tertiary-container:    var(--kb-blue-200);
  --md-on-tertiary-container: var(--kb-blue-900);

  /* Error – Brand Red */
  --md-error:                 var(--kb-red-800);
  --md-on-error:              #FFFFFF;
  --md-error-container:       var(--kb-red-100);
  --md-on-error-container:    #4A0E0B;

  /* Neutral surface – brand grayscale */
  --md-background:                  var(--kb-surface-0);
  --md-on-background:               var(--kb-surface-900);
  --md-surface:                     var(--kb-surface-0);
  --md-on-surface:                  var(--kb-surface-900);
  --md-surface-variant:             var(--kb-surface-100);
  --md-on-surface-variant:          var(--kb-surface-700);
  --md-surface-container-lowest:    var(--kb-surface-0);
  --md-surface-container-low:       #FAFAFA;
  --md-surface-container:           var(--kb-surface-100);
  --md-surface-container-high:      var(--kb-surface-200);
  --md-surface-container-highest:   var(--kb-surface-300);

  /* Outline */
  --md-outline:         var(--kb-surface-600);
  --md-outline-variant: var(--kb-surface-300);

  /* Inverse */
  --md-inverse-surface:    var(--kb-surface-900);
  --md-inverse-on-surface: var(--kb-surface-100);
  --md-inverse-primary:    var(--kb-blue-300);

  /* ── Status Tonal Palette ── */
  --md-success:               var(--kb-green-800);
  --md-on-success:            #FFFFFF;
  --md-success-container:     var(--kb-green-100);
  --md-on-success-container:  #002111;

  --md-warning:               var(--kb-yellow-800);
  --md-on-warning:            #FFFFFF;
  --md-warning-container:     var(--kb-yellow-100);
  --md-on-warning-container:  #271900;

  /* ── M3 Elevation Shadows (light theme) ── */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --md-elevation-2: 0 3px 6px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --md-elevation-3: 0 10px 20px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.06);
  --md-elevation-4: 0 15px 30px rgba(0,0,0,.10), 0 5px 10px rgba(0,0,0,.06);
  --md-elevation-card-hover: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

  /* Status-tinted hover shadows */
  --md-shadow-up:      0 20px 40px rgba(19,108,52,.18),  0 6px 12px rgba(0,0,0,.06);
  --md-shadow-deg:     0 20px 40px rgba(129,98,4,.18),   0 6px 12px rgba(0,0,0,.06);
  --md-shadow-down:    0 20px 40px rgba(188,34,28,.18),  0 6px 12px rgba(0,0,0,.06);

  /* ── Shape ── */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:   12px;
  --md-shape-lg:   16px;
  --md-shape-xl:   28px;
  --md-shape-full: 50px;

  --md-transition: 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--md-background);
  color: var(--md-on-background);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* subtle brand-blue page tint */
  background-image: radial-gradient(ellipse 70% 40% at 80% -10%, rgba(41,91,172,.06), transparent);
}

/* Headings use Montserrat — the brand display face */
h1, h2, h3, h4, h5, h6,
.md-navbar-brand {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--md-surface-container-low); }
::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ══════════════════════════════════════════════════════════
   Kugelblitz Sidebar (left rail)
   ══════════════════════════════════════════════════════════ */
:root {
  --kb-sidebar-w: 248px;
  --kb-topbar-h: 56px;
}

/* Push page content to make room for the sidebar / topbar — only when
   the sidebar partial is actually rendered. Uses :has() so standalone
   pages (login, forgot-password, error, public status) stay centered. */
@media (min-width: 992px) {
  body:has(.kb-sidebar) { padding-left: var(--kb-sidebar-w); }
}
@media (max-width: 991.98px) {
  body:has(.kb-sidebar) { padding-top: var(--kb-topbar-h); }
}

/* ── Sidebar shell ── */
.kb-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--kb-sidebar-w);
  background: var(--md-surface-container-lowest);
  border-right: 1px solid var(--md-outline-variant);
  display: flex; flex-direction: column;
  z-index: 1040;
  transition: transform var(--md-transition);
}

/* ── Brand block ── */
.kb-brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}
.kb-brand .brand-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--md-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 2px 6px rgba(41,91,172,.25);
  flex-shrink: 0;
}
.kb-brand-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: -.2px;
  color: var(--md-on-surface);
  line-height: 1.1;
}
.kb-brand-sub {
  font-size: .7rem;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
  letter-spacing: .2px;
}

/* ── Nav list ── */
.kb-nav {
  flex: 1; overflow-y: auto;
  padding: 1rem .625rem;
}
.kb-nav-section {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  opacity: .7;
  padding: .875rem .875rem .375rem;
}
.kb-nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  border-radius: 10px;
  font-size: .875rem; font-weight: 500;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  margin-bottom: 2px;
  transition: background var(--md-transition), color var(--md-transition);
}
.kb-nav-link i {
  font-size: 1.05rem;
  width: 18px; text-align: center;
  flex-shrink: 0;
}
.kb-nav-link:hover {
  background: var(--kb-blue-50);
  color: var(--md-primary);
}
.kb-nav-link.active {
  background: var(--kb-blue-100);
  color: var(--md-primary);
  font-weight: 600;
}

/* ── Sidebar footer ── */
.kb-sidebar-footer {
  border-top: 1px solid var(--md-outline-variant);
  padding: .75rem;
  flex-shrink: 0;
}
.kb-user-chip {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem;
  border-radius: 10px;
  background: var(--md-surface-container-low);
  margin-bottom: .5rem;
}
.kb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--md-primary);
  color: #fff;
  font-weight: 600; font-size: .8125rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kb-user-name {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.kb-user-role {
  font-size: .68rem;
  letter-spacing: .5px;
  color: var(--md-on-surface-variant);
  font-weight: 500;
}
.kb-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-success);
  animation: live-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.kb-logout {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  font-size: .8125rem; font-weight: 500;
  color: var(--md-error);
  background: transparent;
  border: 1px solid var(--md-outline-variant);
  text-decoration: none;
  transition: background var(--md-transition), border-color var(--md-transition);
}
.kb-logout:hover {
  background: var(--md-error-container);
  border-color: var(--md-error);
  color: var(--md-on-error-container);
}

/* ── Mobile top bar + overlay ── */
.kb-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--kb-topbar-h);
  background: var(--md-surface-container-lowest);
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  z-index: 1030;
}
.kb-topbar-brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--md-on-surface);
  text-decoration: none;
}
.kb-topbar-brand .brand-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--md-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.kb-burger {
  background: var(--md-surface-container);
  border: none;
  border-radius: 8px;
  width: 38px; height: 38px;
  color: var(--md-on-surface);
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.kb-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1035;
}

/* Mobile sidebar slide-in */
@media (max-width: 991.98px) {
  .kb-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  body.sidebar-open .kb-sidebar { transform: translateX(0); }
  body.sidebar-open .kb-sidebar-overlay { display: block; }
}
@media (min-width: 992px) {
  .kb-topbar, .kb-sidebar-overlay { display: none !important; }
}

/* ── Tag Groups (admin) ─────────────────────────────────── */
.kb-tag-group-card {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  margin-bottom: .875rem;
}
.kb-tag-group-head {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: .75rem;
}
.kb-tag-group-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.kb-tag-group-name {
  font-size: .95rem; font-weight: 600;
  color: var(--md-on-surface);
}
.kb-tag-group-count {
  font-size: .7rem; font-weight: 500;
  color: var(--md-on-surface-variant);
  padding: 2px 8px;
  background: var(--md-surface-container);
  border-radius: 999px;
}
.kb-tag-group-tags {
  display: flex; flex-wrap: wrap; gap: .375rem;
}
.kb-tag-chip {
  display: inline-flex; align-items: center;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  border: 1px solid;
}

/* ── Tag pill input (resource form, with autocomplete) ───── */
.kb-tag-input {
  position: relative;
  display: block;
}
.kb-tag-input-pills {
  display: flex; flex-wrap: wrap; gap: .375rem;
  padding: .425rem .5rem;
  border: 1px solid var(--md-outline);
  border-radius: 10px;
  background: var(--md-surface-container-lowest);
  min-height: 44px;
  cursor: text;
  transition: border-color var(--md-transition), box-shadow var(--md-transition);
}
.kb-tag-input-pills:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(41,91,172,.12);
}
.kb-tag-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .25rem .2rem .625rem;
  border-radius: 999px;
  font-size: .8125rem; font-weight: 500;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.kb-tag-pill-x {
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  font-size: 1rem; line-height: 1;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--md-transition), opacity var(--md-transition);
}
.kb-tag-pill-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
.kb-tag-input-field {
  flex: 1; min-width: 120px;
  border: none; outline: none; background: transparent;
  font-size: .875rem;
  color: var(--md-on-surface);
  padding: .2rem .25rem;
}
.kb-tag-input-field::placeholder { color: var(--md-on-surface-variant); }

/* Suggestions dropdown */
.kb-tag-input-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 50;
  background: #fff;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05);
  max-height: 260px;
  overflow-y: auto;
  padding: .25rem;
}
.kb-tag-input-sugg {
  display: flex; align-items: center; gap: .625rem;
  width: 100%;
  padding: .5rem .75rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: .8125rem;
  text-align: left;
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background var(--md-transition);
}
.kb-tag-input-sugg:hover { background: var(--kb-blue-50); }
.kb-tag-input-sugg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.kb-tag-input-sugg-val { font-weight: 500; }
.kb-tag-input-sugg-group {
  margin-left: auto;
  font-size: .7rem; font-weight: 500;
  color: var(--md-on-surface-variant);
  padding: 2px 8px;
  background: var(--md-surface-container);
  border-radius: 999px;
}

/* Tag row editor (admin tag-group modal) */
.tg-tag-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 32px;
  gap: .5rem;
  align-items: center;
}
.tg-tag-row .form-control { font-size: .8125rem; }
.tg-tag-row .tg-tag-remove {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tg-tag-row .tg-tag-remove:hover {
  background: var(--md-error-container);
  color: var(--md-error);
}

/* Tag picker on resource form */
.kb-tag-picker {
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  padding: .75rem;
  background: var(--md-surface-container-low);
  max-height: 280px;
  overflow-y: auto;
}
.kb-tag-picker-group { margin-bottom: .875rem; }
.kb-tag-picker-group:last-child { margin-bottom: 0; }
.kb-tag-picker-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: .375rem;
}
.kb-tag-picker-chips {
  display: flex; flex-wrap: wrap; gap: .25rem;
}
.kb-tag-pick {
  display: inline-flex; align-items: center;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  border: 1px solid;
  cursor: pointer;
  transition: transform var(--md-transition);
}
.kb-tag-pick:hover { transform: translateY(-1px); }

/* Color swatch picker in tag-group modal */
.tg-color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--md-transition), border-color var(--md-transition);
}
.tg-color-swatch:hover { transform: scale(1.1); }
.tg-color-swatch.active {
  border-color: var(--md-on-surface);
  box-shadow: 0 0 0 2px var(--md-surface-container-lowest), 0 0 0 4px var(--md-on-surface);
}

/* ── Active recipients card (saved-state display) ── */
.kb-active-recipients-card {
  background: var(--kb-blue-50);
  border: 1px solid var(--kb-blue-100);
  border-radius: 12px;
  padding: 1rem 1.125rem;
}
.kb-chip-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.kb-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .35rem .35rem .35rem .75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kb-blue-200);
  font-size: .8125rem; font-weight: 500;
  color: var(--kb-blue-800);
  transition: border-color var(--md-transition), box-shadow var(--md-transition);
}
.kb-chip:hover {
  border-color: var(--md-primary);
  box-shadow: 0 1px 4px rgba(41,91,172,.15);
}
.kb-chip i {
  font-size: .8125rem;
  color: var(--md-primary);
}
.kb-chip-text { margin: 0 .125rem 0 0; }
.kb-chip-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  padding: 0;
  font-size: .9rem;
  transition: background var(--md-transition), color var(--md-transition);
  flex-shrink: 0;
}
.kb-chip-del:hover {
  background: var(--md-error-container);
  color: var(--md-error);
}
.kb-chip-del i { color: inherit; font-size: .85rem; }
.kb-chip.kb-chip--muted {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-weight: 400;
}
.kb-chip.kb-chip--muted code {
  background: var(--md-surface-container);
  padding: 0 .25rem;
  border-radius: 3px;
  font-size: .75rem;
}
.kb-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--md-primary);
  color: #fff;
  font-size: .6875rem; font-weight: 700;
}

/* ── Page header (matches reference style) ── */
.kb-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem;
}
.kb-page-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--md-on-surface);
  margin: 0; letter-spacing: -.4px;
}
.kb-page-sub {
  font-size: .875rem;
  color: var(--md-on-surface-variant);
  margin: 4px 0 0;
}

.md-navbar-brand {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.2px;
  color: var(--md-on-surface);
  text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
}
.md-navbar-brand .brand-icon {
  width: 34px; height: 34px;
  border-radius: var(--md-shape-sm);
  background: var(--md-primary-container);
  display: flex; align-items: center; justify-content: center;
  color: var(--md-primary);
  font-size: .95rem;
  box-shadow: var(--md-elevation-1);
}

.md-nav-link {
  font-size: .875rem; font-weight: 500; letter-spacing: .1px;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  padding: .45rem .875rem;
  border-radius: var(--md-shape-full);
  transition: background var(--md-transition), color var(--md-transition);
  display: inline-flex; align-items: center; gap: .35rem;
}
.md-nav-link:hover {
  background: rgba(41,91,172,.08);
  color: var(--md-primary);
}
.md-nav-link.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* Live chip */
.md-live-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 500; letter-spacing: .5px;
  padding: 4px 12px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant);
}
.md-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--md-success);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Logout */
.md-btn-logout {
  font-size: .8125rem; font-weight: 500; letter-spacing: .1px;
  color: var(--md-error);
  background: transparent;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  padding: .38rem 1rem;
  text-decoration: none;
  transition: background var(--md-transition), border-color var(--md-transition);
  display: inline-flex; align-items: center; gap: .35rem;
}
.md-btn-logout:hover {
  background: var(--md-error-container);
  border-color: var(--md-error);
  color: var(--md-on-error-container);
}

/* ── Stat Cards ─────────────────────────────────────────── */
.md-stat-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-variant);
  padding: 1.375rem 1.25rem;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-transition), transform var(--md-transition);
  position: relative; overflow: hidden;
}
.md-stat-card:hover {
  box-shadow: var(--md-elevation-3);
  transform: translateY(-3px);
}
/* Tonal accent bar at top */
.md-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--md-shape-lg) var(--md-shape-lg) 0 0;
}
.s-total::before { background: var(--md-primary); }
.s-up::before    { background: var(--md-success); }
.s-deg::before   { background: var(--md-warning); }
.s-down::before  { background: var(--md-error); }

.md-stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--md-shape-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .875rem;
}
.s-total .md-stat-icon { background: var(--md-primary-container);  color: var(--md-primary); }
.s-up    .md-stat-icon { background: var(--md-success-container);  color: var(--md-success); }
.s-deg   .md-stat-icon { background: var(--md-warning-container);  color: var(--md-warning); }
.s-down  .md-stat-icon { background: var(--md-error-container);    color: var(--md-error); }

.md-stat-num {
  font-size: 2.25rem; font-weight: 300; letter-spacing: -1.5px; line-height: 1;
  color: var(--md-on-surface);
}
.s-up   .md-stat-num { color: var(--md-success); }
.s-deg  .md-stat-num { color: var(--md-warning); }
.s-down .md-stat-num { color: var(--md-error); }

.md-stat-label {
  font-size: .72rem; font-weight: 500; letter-spacing: .6px;
  color: var(--md-on-surface-variant);
  margin-top: .35rem;
  text-transform: uppercase;
}

/* ── Incident Banner ────────────────────────────────────── */
.md-incident-banner {
  background: var(--md-error-container);
  border-radius: var(--md-shape-lg);
  border: 1px solid rgba(179,38,30,.2);
  box-shadow: var(--md-elevation-1);
  padding: .875rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
}
.md-incident-banner .banner-icon { color: var(--md-error); }
.md-incident-banner .banner-text { color: var(--md-on-error-container); font-size: .875rem; font-weight: 600; }
.md-incident-banner .banner-names { color: rgba(65,14,11,.7); font-size: .8125rem; }

/* ── Filter / Search ────────────────────────────────────── */
.md-search-field {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-full);
  padding: .5rem 1.1rem;
  font-size: .875rem; font-family: inherit;
  outline: none;
  box-shadow: var(--md-elevation-1);
  transition: border-color var(--md-transition), box-shadow var(--md-transition);
  width: 220px;
}
.md-search-field::placeholder { color: var(--md-outline); }
.md-search-field:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(41,91,172,.15), var(--md-elevation-1);
}

.md-select {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-full);
  padding: .5rem 1rem;
  font-size: .875rem; font-family: inherit;
  outline: none; cursor: pointer;
  box-shadow: var(--md-elevation-1);
  transition: border-color var(--md-transition);
  width: 145px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2379747E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.25rem;
}
.md-select:focus { border-color: var(--md-primary); }

/* ── Resource Cards ─────────────────────────────────────── */
.rc-wrapper { perspective: 900px; }

.rc-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-1);
  overflow: hidden;
  position: relative;
  transition:
    transform 260ms cubic-bezier(0.2,0,0,1),
    box-shadow 260ms cubic-bezier(0.2,0,0,1),
    border-color 260ms cubic-bezier(0.2,0,0,1);
  height: 100%;
  will-change: transform, box-shadow;
}

/* State layer (M3 hover = 8% primary overlay) */
.rc-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(41,91,172,0);
  transition: background 220ms;
  pointer-events: none; z-index: 0;
}
.rc-card:hover::before { background: rgba(41,91,172,.04); }

/* Status left accent bar */
.rc-card::after {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
}

/* UP */
.rc-card.s-UP { border-color: rgba(46,125,70,.2); }
.rc-card.s-UP::after { background: var(--md-success); }
.rc-card.s-UP:hover {
  box-shadow: var(--md-shadow-up);
  transform: translateY(-8px) perspective(900px) rotateX(2deg);
  border-color: rgba(46,125,70,.35);
}

/* DEGRADED */
.rc-card.s-DEGRADED { border-color: rgba(122,79,0,.2); }
.rc-card.s-DEGRADED::after { background: var(--md-warning); }
.rc-card.s-DEGRADED:hover {
  box-shadow: var(--md-shadow-deg);
  transform: translateY(-8px) perspective(900px) rotateX(2deg);
  border-color: rgba(122,79,0,.35);
}

/* DOWN */
.rc-card.s-DOWN { border-color: rgba(179,38,30,.2); }
.rc-card.s-DOWN::after { background: var(--md-error); }
.rc-card.s-DOWN:hover {
  box-shadow: var(--md-shadow-down);
  transform: translateY(-8px) perspective(900px) rotateX(2deg);
  border-color: rgba(179,38,30,.35);
}

/* UNKNOWN */
.rc-card.s-UNKNOWN::after { background: var(--md-outline-variant); }
.rc-card.s-UNKNOWN:hover {
  box-shadow: var(--md-elevation-card-hover);
  transform: translateY(-8px) perspective(900px) rotateX(2deg);
}

.rc-body {
  padding: 1.125rem 1.125rem 1.125rem 1.625rem;
  position: relative; z-index: 1;
}

/* ── Status chip ────────────────────────────────────────── */
.md-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--md-shape-full);
  font-size: .6875rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase;
}
.md-status-chip.UP       { background: var(--md-success-container); color: var(--md-success); }
.md-status-chip.DEGRADED { background: var(--md-warning-container); color: var(--md-warning); }
.md-status-chip.DOWN     { background: var(--md-error-container);   color: var(--md-error); }
.md-status-chip.UNKNOWN  { background: var(--md-surface-container-highest); color: var(--md-outline); }

/* Status dot */
.md-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.md-status-dot.UP       { background: var(--md-success); }
.md-status-dot.DEGRADED { background: var(--md-warning); }
.md-status-dot.DOWN     { background: var(--md-error); animation: dot-pulse 1.5s ease-in-out infinite; }
.md-status-dot.UNKNOWN  { background: var(--md-outline-variant); }

@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Type chip ──────────────────────────────────────────── */
.md-type-chip {
  display: inline-block;
  font-size: .65rem; font-weight: 500; letter-spacing: .8px;
  text-transform: uppercase;
  padding: 2px 9px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant);
}

/* ── Tag chip ───────────────────────────────────────────── */
.md-tag-chip {
  display: inline-block;
  font-size: .625rem; font-weight: 500; letter-spacing: .4px;
  padding: 2px 8px; border-radius: var(--md-shape-full);
  background: var(--md-primary-container);
  color: var(--md-primary);
  border: 1px solid rgba(41,91,172,.2);
}

/* ── Resource text ──────────────────────────────────────── */
.rc-name {
  font-size: .9375rem; font-weight: 600; letter-spacing: -.1px;
  color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-target {
  font-size: .6875rem; letter-spacing: .3px;
  color: var(--md-outline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Roboto Mono', monospace;
}

/* ── Metric tiles ───────────────────────────────────────── */
.md-metric {
  flex: 1;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  padding: .625rem .5rem;
  text-align: center;
}
.md-metric-val {
  font-size: .8125rem; font-weight: 600; letter-spacing: -.2px;
  line-height: 1.2; color: var(--md-on-surface);
}
.md-metric-lbl {
  font-size: .6rem; font-weight: 500; letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

/* Mini uptime bar */
.md-uptime-track {
  height: 2px; border-radius: 2px; margin-top: 5px;
  background: var(--md-outline-variant);
  overflow: hidden;
}
.md-uptime-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }

/* ── Card footer ────────────────────────────────────────── */
.rc-footer-time {
  font-size: .6875rem; color: var(--md-outline);
  display: flex; align-items: center; gap: 4px;
  font-family: 'Roboto Mono', monospace;
}
.md-text-btn {
  font-size: .8125rem; font-weight: 500; letter-spacing: .1px;
  color: var(--md-primary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--md-shape-full);
  transition: background var(--md-transition);
  display: inline-flex; align-items: center; gap: 4px;
}
.md-text-btn:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* SSL warning */
.md-ssl-warn {
  margin-top: .75rem; padding: .5rem .875rem;
  border-radius: var(--md-shape-md);
  background: var(--md-warning-container);
  border: 1px solid rgba(122,79,0,.2);
  color: var(--md-warning);
  font-size: .75rem; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}

/* ── Status flash ───────────────────────────────────────── */
@keyframes status-flash { 0%{opacity:.2} 100%{opacity:1} }
.status-flash { animation: status-flash .35s ease-out; }

/* ── Empty state ────────────────────────────────────────── */
.md-empty { padding: 4rem 1rem; text-align: center; color: var(--md-on-surface-variant); }
.md-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 1.25rem;
  color: var(--md-secondary);
}

/* ── Tables ─────────────────────────────────────────────── */
.md-table { width: 100%; border-collapse: collapse; }
.md-table th {
  padding: .75rem 1.25rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  text-align: left; white-space: nowrap;
}
.md-table td {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: .875rem; color: var(--md-on-surface);
  vertical-align: middle;
}
.md-table tbody tr { transition: background var(--md-transition); }
.md-table tbody tr:hover { background: rgba(41,91,172,.04); }
.md-table tbody tr:last-child td { border-bottom: none; }

/* ── Page surface ───────────────────────────────────────── */
.md-surface {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-2);
  overflow: hidden;
}
.md-surface-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: .875rem; font-weight: 600;
  color: var(--md-on-surface);
  background: var(--md-surface-container-low);
  display: flex; align-items: center; gap: .5rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.md-btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none; border-radius: var(--md-shape-full);
  padding: .625rem 1.5rem;
  font-size: .875rem; font-weight: 500; letter-spacing: .1px; font-family: inherit;
  cursor: pointer; box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-transition), transform var(--md-transition), filter var(--md-transition);
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
.md-btn-filled:hover {
  box-shadow: var(--md-elevation-3); transform: translateY(-1px);
  filter: brightness(1.06); color: var(--md-on-primary);
}

.md-btn-tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border: none; border-radius: var(--md-shape-full);
  padding: .625rem 1.5rem;
  font-size: .875rem; font-weight: 500; font-family: inherit; cursor: pointer;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-transition), filter var(--md-transition);
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
.md-btn-tonal:hover { box-shadow: var(--md-elevation-2); filter: brightness(.96); color: var(--md-on-secondary-container); }

.md-btn-outlined {
  background: transparent; color: var(--md-primary);
  border: 1px solid var(--md-outline); border-radius: var(--md-shape-full);
  padding: .625rem 1.5rem;
  font-size: .875rem; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background var(--md-transition), border-color var(--md-transition), box-shadow var(--md-transition);
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
.md-btn-outlined:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  box-shadow: var(--md-elevation-1);
  color: var(--md-on-primary-container);
}

.md-btn-text {
  background: transparent; border: none; color: var(--md-primary);
  border-radius: var(--md-shape-full);
  padding: .5rem 1rem;
  font-size: .875rem; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background var(--md-transition);
  display: inline-flex; align-items: center; gap: .4rem;
}
.md-btn-text:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); text-decoration: none; }

/* ── Forms ──────────────────────────────────────────────── */
.md-field {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-md);
  color: var(--md-on-surface);
  padding: .6875rem .875rem;
  font-size: .875rem; font-family: inherit;
  width: 100%; outline: none;
  transition: border-color var(--md-transition), box-shadow var(--md-transition);
}
.md-field::placeholder { color: var(--md-outline); }
.md-field:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(41,91,172,.15);
}
.md-field-label {
  font-size: .75rem; font-weight: 500; letter-spacing: .4px;
  color: var(--md-on-surface-variant); margin-bottom: .375rem; display: block;
}
.md-field-hint { font-size: .6875rem; color: var(--md-outline); margin-top: .25rem; }
.md-select-field { appearance: none; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-content {
  background: var(--md-surface-container-lowest) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-xl) !important;
  box-shadow: var(--md-elevation-4) !important;
  color: var(--md-on-surface) !important;
}
.modal-header, .modal-footer { border-color: var(--md-outline-variant) !important; }
.modal-header { background: var(--md-surface-container-low) !important; border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0 !important; }
.modal-title { font-size: 1.25rem; font-weight: 500; color: var(--md-on-surface); }
.btn-close { opacity: .6; }

.modal .form-control, .modal .form-select {
  background: var(--md-surface-container-low) !important;
  border-color: var(--md-outline) !important;
  color: var(--md-on-surface) !important;
  border-radius: var(--md-shape-md) !important;
  font-family: inherit;
}
.modal .form-control:focus, .modal .form-select:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(41,91,172,.15) !important;
}
.modal .form-label { color: var(--md-on-surface-variant); font-size: .75rem; font-weight: 500; }

/* ── Login ──────────────────────────────────────────────── */
.md-login-surface {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-xl);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-4);
  width: 400px; padding: 2.5rem 2.25rem;
}

/* ── Status page ────────────────────────────────────────── */
.md-status-row {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--md-transition);
}
.md-status-row:last-child { border-bottom: none; }
.md-status-row:hover { background: rgba(41,91,172,.03); }

/* ── Pagination ─────────────────────────────────────────── */
.kb-pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--md-outline-variant);
}
.kb-pagination-info {
  font-size: .8125rem;
  color: var(--md-on-surface-variant);
}
.kb-pagination-info strong {
  color: var(--md-on-surface); font-weight: 600;
}
.kb-pagination-controls {
  display: flex; align-items: center; gap: .25rem;
}
.md-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .5rem;
  border-radius: 10px;
  font-size: .8125rem; font-weight: 500;
  color: var(--md-on-surface-variant); text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--md-transition), color var(--md-transition), border-color var(--md-transition);
}
.md-page-link:hover {
  background: var(--kb-blue-50);
  color: var(--md-primary);
}
.md-page-link.active {
  background: var(--md-primary);
  color: #fff;
  font-weight: 600;
}
.md-page-link.disabled {
  color: var(--md-outline-variant);
  pointer-events: none;
  opacity: .55;
}
.md-page-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 36px;
  color: var(--md-outline);
  font-size: .9rem;
}
@media (max-width: 575.98px) {
  .kb-pagination { flex-direction: column; align-items: stretch; }
  .kb-pagination-controls { justify-content: center; }
}

/* ── Toggle / Checkbox ──────────────────────────────────── */
.form-check-input {
  background-color: var(--md-outline-variant) !important;
  border-color: var(--md-outline) !important;
}
.form-check-input:checked {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}

/* ── Bootstrap overrides ────────────────────────────────── */
.btn { font-family: inherit; }
.btn-secondary {
  background: var(--md-surface-container-high) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-1);
}
.btn-secondary:hover { box-shadow: var(--md-elevation-2) !important; filter: brightness(.97); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .container-fluid { padding: .75rem; }
  .rc-body { padding: 1rem 1rem 1rem 1.375rem; }
  .md-stat-card { padding: 1rem; }
  .md-login-surface { width: 95vw; padding: 1.75rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════
   Admin Portal
   ══════════════════════════════════════════════════════════ */

@keyframes slideInRight {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Admin Layout (top tabs + content) ───────────────────── */
.admin-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Admin Top-tab bar ───────────────────────────────────── */
.admin-sidebar {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-1);
  padding: .375rem;
  display: flex;
  flex-direction: row;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { display: none; }

.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--md-transition), color var(--md-transition);
}
.admin-tab-btn:hover  { background: var(--kb-blue-50); color: var(--md-primary); }
.admin-tab-btn.active { background: var(--md-primary); color: #fff; }
.admin-tab-btn.active .admin-tab-badge {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.admin-tab-btn i { font-size: 1rem; flex-shrink: 0; }

.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary-container);
  color: var(--md-primary);
  font-size: .6875rem;
  font-weight: 600;
}

.admin-content { min-width: 0; }

/* ── Admin Panel (card) ──────────────────────────────────── */
.admin-panel {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-2);
  overflow: hidden;
}
.admin-panel-header {
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: .875rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-panel-body { padding: 1.25rem; }

/* ── Method switcher ─────────────────────────────────────── */
.method-switcher {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  padding: .3rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  width: fit-content;
}

.method-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4rem .9rem;
  border: none;
  border-radius: var(--md-shape-full);
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--md-on-surface-variant);
  background: transparent;
  cursor: pointer;
  transition: background var(--md-transition), color var(--md-transition), box-shadow var(--md-transition);
}
.method-pill:hover { background: rgba(41,91,172,.08); color: var(--md-primary); }
.method-pill.active {
  background: var(--md-surface-container-lowest);
  color: var(--md-primary);
  box-shadow: var(--md-elevation-1);
}

/* ── Preset cards ────────────────────────────────────────── */
.preset-category-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: .625rem;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}

.preset-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: 1rem .875rem;
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--md-transition), transform var(--md-transition), border-color var(--md-transition);
}
.preset-card:hover {
  box-shadow: var(--md-elevation-3);
  transform: translateY(-4px);
  border-color: var(--md-primary);
}

.preset-icon {
  width: 44px; height: 44px;
  border-radius: var(--md-shape-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin: 0 auto .625rem;
}
.preset-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--md-on-surface);
  margin-bottom: .25rem;
}
.preset-desc {
  font-size: .6875rem;
  color: var(--md-on-surface-variant);
  font-family: 'Roboto Mono', monospace;
}

/* ── Admin form helpers ──────────────────────────────────── */
.admin-check-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--md-on-surface);
  cursor: pointer;
}

.admin-preview-box {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  padding: .875rem 1rem;
}

.admin-error-msg {
  background: var(--md-error-container);
  color: var(--md-error);
  border-radius: var(--md-shape-md);
  padding: .625rem .875rem;
  font-size: .8125rem;
  border: 1px solid rgba(179,38,30,.2);
}

.json-textarea {
  font-family: 'Roboto Mono', monospace;
  font-size: .8rem;
  resize: vertical;
  line-height: 1.65;
}

.admin-code-example {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  padding: .75rem 1rem;
}
.admin-code-example pre {
  margin: 0;
  font-size: .775rem;
  color: var(--md-on-surface-variant);
  font-family: 'Roboto Mono', monospace;
  overflow-x: auto;
  white-space: pre;
}
.admin-code-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--md-primary);
  display: block;
  margin-bottom: .375rem;
}

/* ── Action buttons ──────────────────────────────────────── */
.admin-action-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-sm);
  color: var(--md-on-surface-variant);
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--md-transition), color var(--md-transition), border-color var(--md-transition);
}
.admin-action-btn:hover {
  background: var(--md-primary-container);
  color: var(--md-primary);
  border-color: var(--md-primary);
}
.admin-action-btn.danger:hover {
  background: var(--md-error-container);
  color: var(--md-error);
  border-color: var(--md-error);
}

/* ── Bulk action bar ─────────────────────────────────────── */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem 1.25rem;
  background: var(--md-secondary-container);
  border-top: 1px solid var(--md-outline-variant);
}

/* ── Role badges ─────────────────────────────────────────── */
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--md-shape-full);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.admin-role-badge.admin  { background: var(--md-primary-container); color: var(--md-primary); }
.admin-role-badge.viewer { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

.admin-you-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: var(--md-shape-full);
  font-size: .625rem; font-weight: 600;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  margin-left: .375rem;
  vertical-align: middle;
}

/* ── User create section ─────────────────────────────────── */
.admin-create-section {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: 1.25rem;
}

/* ── System stat cards ───────────────────────────────────── */
.admin-sys-card {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--md-elevation-1);
}
.sys-icon {
  width: 44px; height: 44px;
  border-radius: var(--md-shape-md);
  background: var(--md-primary-container);
  color: var(--md-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin: 0 auto .75rem;
}
.sys-val {
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -1px;
  color: var(--md-on-surface);
  line-height: 1;
}
.sys-lbl {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-top: .375rem;
}

/* ── Admin responsive ────────────────────────────────────── */
@media (max-width: 600px) {
  .admin-tab-btn { padding: .5rem .75rem; font-size: .8125rem; }
}

@media (max-width: 576px) {
  .method-switcher { width: 100%; border-radius: var(--md-shape-lg); }
  .method-pill { font-size: .75rem; padding: .375rem .625rem; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ── Heartbeat resource card accent ──────────────────────── */
.rc-card.s-UNKNOWN { border-color: rgba(98,91,113,.2); }
.rc-card.s-UNKNOWN::after { background: var(--md-secondary); }