/* DFSBackend — Prestige Operations
   Aesthetic: Editorial luxury × precision ops
   Warm ivory base · Deep charcoal · Vermillion accent
   Playfair Display (headers) + IBM Plex Mono (data) + Outfit (UI)
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600&display=swap');

/* ── Reset & Variables ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette */
  --ivory:       #F8F5F0;
  --ivory-2:     #F0EDE7;
  --ivory-3:     #E8E3DB;
  --cream:       #FDFBF8;
  --charcoal:    #1A1714;
  --charcoal-2:  #2E2A26;
  --charcoal-3:  #4A4540;
  --muted:       #8A837A;
  --muted-2:     #B0A99F;
  --muted-3:     #D0CAC2;
  --vermillion:  #C23B28;
  --vermillion-d:#9B2E1E;
  --vermillion-l:#E8ECE9; /* very light tint for hovers */
  --vermillion-bg: rgba(194,59,40,.07);
  --emerald:     #2A7A52;
  --emerald-bg:  rgba(42,122,82,.08);
  --gold:        #B8860B;
  --gold-bg:     rgba(184,134,11,.08);
  --slate:       #4A5568;
  --slate-bg:    rgba(74,85,104,.06);

  /* Environment colors */
  --env-local:      #2A7A52;
  --env-staging:    #B8860B;
  --env-production: #C23B28;
  --env-unknown:    #8A837A;

  /* Spacing */
  --topbar-h:    56px;
  --nav-h:       48px;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Shadow */
  --shadow-sm:   0 1px 3px rgba(26,23,20,.08), 0 1px 2px rgba(26,23,20,.04);
  --shadow:      0 4px 16px rgba(26,23,20,.10), 0 2px 4px rgba(26,23,20,.06);
  --shadow-lg:   0 12px 40px rgba(26,23,20,.14), 0 4px 8px rgba(26,23,20,.08);

  /* Borders */
  --border:      #DDD8D0;
  --border-2:    #CBC4BA;
  --radius:      5px;
  --radius-lg:   10px;
  --radius-xl:   16px;

  --transition:  150ms cubic-bezier(.4,0,.2,1);
}

html { font-size: 14px; }
body {
  font-family: var(--font-ui);
  background: var(--ivory);
  color: var(--charcoal);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── Login Screen ──────────────────────────────────────────────────────────── */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 9999;
  background: var(--cream);
}

.login-left {
  width: 440px;
  flex-shrink: 0;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

/* Garment tag pattern — pure CSS */
.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,.015) 30px,
      rgba(255,255,255,.015) 31px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,.015) 30px,
      rgba(255,255,255,.015) 31px
    );
}
.login-left::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border: 40px solid rgba(194,59,40,.15);
  border-radius: 50%;
}

.login-brand {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 40px;
}
.login-brand-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.login-brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.login-brand-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: var(--font-mono);
}

.login-tagline {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.25);
  font-size: .7rem;
  letter-spacing: .08em;
  text-align: center;
  font-family: var(--font-mono);
  margin-top: auto;
}

.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow-y: auto;
}

.login-form-wrap {
  width: 100%;
  max-width: 460px;
}

.login-section-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.login-section-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 28px;
  font-family: var(--font-mono);
}

/* Server tiles */
.server-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}

.server-tile {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 10px;
  cursor: pointer;
  transition: var(--transition);
  background: var(--cream);
  position: relative;
  text-align: center;
  user-select: none;
}
.server-tile:hover {
  border-color: var(--border-2);
  background: var(--ivory-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.server-tile.selected {
  border-color: var(--vermillion);
  background: var(--vermillion-bg);
  box-shadow: 0 0 0 3px rgba(194,59,40,.12);
}
.server-tile .env-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: block;
}
.server-tile .tile-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--charcoal-2);
  margin-bottom: 3px;
  font-family: var(--font-ui);
}
.server-tile .tile-host {
  font-size: .62rem;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-tile .tile-env {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 4px;
  font-family: var(--font-mono);
}
.server-tile.selected .tile-label { color: var(--vermillion); }

.env-local      { background: var(--env-local);      }
.env-staging    { background: var(--env-staging);    }
.env-production { background: var(--env-production); }
.env-unknown    { background: var(--muted-2);        }
.c-local        { color: var(--env-local);      }
.c-staging      { color: var(--env-staging);    }
.c-production   { color: var(--env-production); }
.c-unknown      { color: var(--muted);          }

.custom-host-input {
  display: none;
  margin-bottom: 16px;
}
.custom-host-input.visible { display: block; }

.test-result {
  font-size: .72rem;
  font-family: var(--font-mono);
  padding: 6px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  display: none;
}
.test-result.show { display: block; }
.test-result.ok   { background: var(--emerald-bg); color: var(--emerald); border: 1px solid rgba(42,122,82,.2); }
.test-result.fail { background: var(--vermillion-bg); color: var(--vermillion); border: 1px solid rgba(194,59,40,.2); }

.divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 16px;
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: var(--font-mono);
}
.divider-label::before, .divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Form elements ─────────────────────────────────────────────────────────── */
label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-ui);
  display: block;
  margin-bottom: 5px;
}
input, select, textarea {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: 9px 12px;
  transition: var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vermillion);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(194,59,40,.1);
}
select option { background: #fff; }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--vermillion); cursor: pointer; }

.form-group { margin-bottom: 14px; }
.form-group label { margin-bottom: 5px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: .01em;
}
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

.btn-primary {
  background: var(--vermillion);
  color: #fff;
  border-color: var(--vermillion);
}
.btn-primary:hover { background: var(--vermillion-d); border-color: var(--vermillion-d); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--charcoal-3);
}
.btn-ghost:hover { border-color: var(--charcoal-3); color: var(--charcoal); background: var(--ivory-2); }

.btn-danger {
  background: transparent;
  border-color: var(--border);
  color: var(--vermillion);
}
.btn-danger:hover { background: var(--vermillion-bg); border-color: var(--vermillion); }

.btn-success {
  background: var(--emerald);
  color: #fff;
  border-color: var(--emerald);
}
.btn-success:hover { filter: brightness(1.08); }

.btn-sm { padding: 5px 11px; font-size: .75rem; }
.btn-xs { padding: 3px 8px; font-size: .7rem; }
.btn-icon { padding: 7px 9px; }
.w-full { width: 100%; display: flex; justify-content: center; }

/* Login error */
.login-error {
  color: var(--vermillion);
  font-size: .75rem;
  font-family: var(--font-mono);
  margin-top: 8px;
  min-height: 18px;
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h);
  background: var(--charcoal);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 100;
}

.topbar-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.topbar-brand-icon { font-size: 1.2rem; }

.server-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
  cursor: default;
  transition: var(--transition);
}
.server-badge .sb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-badge.env-local      { color: var(--env-local);      border-color: rgba(42,122,82,.4);   background: rgba(42,122,82,.1); }
.server-badge.env-staging    { color: var(--env-staging);    border-color: rgba(184,134,11,.4); background: rgba(184,134,11,.1); }
.server-badge.env-production { color: var(--env-production); border-color: rgba(194,59,40,.4);  background: rgba(194,59,40,.1); }
.server-badge.env-unknown    { color: var(--muted-2);        border-color: rgba(255,255,255,.15);background: rgba(255,255,255,.05); }
.server-badge .sb-dot.env-local      { background: var(--env-local); }
.server-badge .sb-dot.env-staging    { background: var(--env-staging); }
.server-badge .sb-dot.env-production { background: var(--env-production); animation: pulse 2s ease-in-out infinite; }
.server-badge .sb-dot.env-unknown    { background: var(--muted-2); }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

.topbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.12); }
.topbar-spacer { flex: 1; }

.topbar-user {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-user-name { color: rgba(255,255,255,.9); font-weight: 500; }

.btn-topbar-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.55);
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .72rem;
  transition: var(--transition);
}
.btn-topbar-logout:hover { border-color: rgba(194,59,40,.6); color: #ff8070; }

/* ── Top nav tabs ──────────────────────────────────────────────────────────── */
#topnav {
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 0 20px;
  gap: 2px;
  flex-shrink: 0;
  overflow-x: auto;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  position: relative;
  bottom: 0;
  letter-spacing: .005em;
}
.nav-tab:hover { color: var(--charcoal-2); background: var(--ivory-2); border-radius: var(--radius) var(--radius) 0 0; }
.nav-tab.active { color: var(--vermillion); border-bottom-color: var(--vermillion); background: transparent; }
.nav-tab .nav-icon { font-size: .95rem; }
.nav-tab .nav-badge {
  background: var(--vermillion);
  color: #fff;
  font-size: .6rem;
  padding: 1px 5px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  display: none;
}
.nav-tab .nav-badge.show { display: block; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
#main {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Panel structure ───────────────────────────────────────────────────────── */
.tab-panel {
  display: none;
  height: 100%;
  flex-direction: column;
  animation: panelIn .18s ease;
  overflow: hidden;
}
.tab-panel.active { display: flex; }
@keyframes panelIn { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} }

.panel-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  background: var(--cream);
}
.panel-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: -.01em;
}
.panel-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.panel-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.panel-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.panel-body.scrollable { overflow-y: auto; padding: 20px 24px; }

/* ── Panes ─────────────────────────────────────────────────────────────────── */
.pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }

.pane-hdr {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-ui);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--ivory);
}
.pane-body { flex: 1; overflow-y: auto; }

/* ── Search bar ────────────────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: .82rem;
  font-family: var(--font-mono);
}
.search-bar input:focus { box-shadow: none; }
.search-icon { color: var(--muted-2); font-size: .95rem; flex-shrink: 0; }

/* ── List rows ─────────────────────────────────────────────────────────────── */
.list-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  gap: 10px;
}
.list-row:hover { background: var(--ivory-2); }
.list-row.selected {
  background: var(--vermillion-bg);
  border-left: 3px solid var(--vermillion);
  padding-left: 13px;
}
.list-row .row-name { font-size: .83rem; color: var(--charcoal); flex: 1; font-weight: 500; }
.list-row .row-sub  { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.list-row .row-meta { font-size: .68rem; color: var(--muted-2); font-family: var(--font-mono); }

/* ── Status badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  white-space: nowrap;
  font-weight: 600;
  font-family: var(--font-ui);
  letter-spacing: .03em;
}
.badge-active   { color: var(--emerald);     border-color: rgba(42,122,82,.3);   background: var(--emerald-bg); }
.badge-inactive { color: var(--muted);       border-color: var(--border);        background: transparent; }
.badge-pending  { color: var(--gold);        border-color: rgba(184,134,11,.3);  background: var(--gold-bg); }
.badge-alert    { color: var(--vermillion);  border-color: rgba(194,59,40,.3);   background: var(--vermillion-bg); }

/* Ticket status */
.ts-20 { color: var(--muted); }
.ts-30 { color: var(--emerald); font-weight: 600; }
.ts-40 { color: var(--slate); }

/* ── Data tables ───────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  font-family: var(--font-mono);
}
.data-table th {
  background: var(--ivory);
  color: var(--muted);
  font-weight: 600;
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}
.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--charcoal-2);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--ivory-2); cursor: pointer; }
.data-table tr.selected td { background: var(--vermillion-bg); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Toggle switch ─────────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.toggle-row > label:last-child {
  font-size: .82rem;
  font-weight: 400;
  color: var(--charcoal-2);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}
.toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--ivory-3);
  border: 1.5px solid var(--border-2);
  border-radius: 22px;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 2px;
  top: 2px;
  background: var(--muted-2);
  border-radius: 50%;
  transition: var(--transition);
}
.toggle input:checked + .toggle-slider { background: var(--vermillion-bg); border-color: var(--vermillion); }
.toggle input:checked + .toggle-slider::before { background: var(--vermillion); transform: translateX(16px); }

/* ── Check pills (Y/N strings for days/months) ─────────────────────────────── */
.check-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.check-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  font-size: .75rem;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--muted);
  background: var(--cream);
  user-select: none;
}
.check-pill:hover { border-color: var(--vermillion); color: var(--vermillion); }
.check-pill.checked { border-color: var(--vermillion); background: var(--vermillion-bg); color: var(--vermillion); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,23,20,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: overlayIn .15s ease;
  backdrop-filter: blur(2px);
}
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: modalIn .2s cubic-bezier(.34,1.56,.64,1);
}
.modal.modal-lg { max-width: 920px; }
.modal.modal-sm { max-width: 420px; }
@keyframes modalIn { from{transform:translateY(-16px)scale(.97);opacity:0} to{transform:none;opacity:1} }

.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--charcoal);
  flex: 1;
  letter-spacing: -.01em;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: var(--transition);
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--vermillion); background: var(--vermillion-bg); }
.modal-body { padding: 20px; flex: 1; overflow-y: auto; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--ivory);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--charcoal);
  color: rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  padding: 11px 16px;
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  animation: toastIn .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
  font-family: var(--font-ui);
  border-left: 3px solid;
}
@keyframes toastIn { from{transform:translateX(16px)scale(.95);opacity:0} to{transform:none;opacity:1} }
.toast.success { border-left-color: var(--emerald); }
.toast.error   { border-left-color: var(--vermillion); }
.toast.info    { border-left-color: var(--gold); }
.toast-icon { font-size: .9rem; flex-shrink: 0; }
.toast-text { flex: 1; line-height: 1.3; }

/* ── Stat cards ────────────────────────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  overflow-x: auto;
}
.stat-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  min-width: 140px;
}
.stat-label {
  font-size: .62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 5px;
  font-family: var(--font-ui);
  font-weight: 600;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
.stat-value.c-red   { color: var(--vermillion); }
.stat-value.c-green { color: var(--emerald); }
.stat-value.c-gold  { color: var(--gold); }

/* ── Auth station cards ────────────────────────────────────────────────────── */
.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 20px;
}
.auth-card {
  background: var(--cream);
  border: 2px solid var(--vermillion);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 0 0 rgba(194,59,40,.2);
  animation: authPulse 2.4s ease-in-out infinite;
}
.auth-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
@keyframes authPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(194,59,40,.25)}
  50%{box-shadow:0 0 0 8px rgba(194,59,40,0)}
}
.auth-code {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--vermillion);
  margin-bottom: 6px;
  letter-spacing: .05em;
}
.auth-time { font-size: .68rem; color: var(--muted); font-family: var(--font-mono); }
.auth-ip   { font-size: .65rem; color: var(--muted-2); font-family: var(--font-mono); margin-top: 3px; }

/* ── Coupon section cards ──────────────────────────────────────────────────── */
.section-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.section-card-title {
  font-family: var(--font-display);
  font-size: .9rem;
  font-style: italic;
  color: var(--charcoal-3);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Store sub-tabs ────────────────────────────────────────────────────────── */
.sub-tabs {
  display: flex;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--ivory);
  gap: 2px;
}
.sub-tab {
  padding: 8px 14px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  font-family: var(--font-ui);
}
.sub-tab:hover { color: var(--charcoal-2); }
.sub-tab.active { color: var(--vermillion); border-bottom-color: var(--vermillion); }

/* ── Schedule grid ─────────────────────────────────────────────────────────── */
.schedule-grid {
  display: grid;
  grid-template-columns: 130px repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .72rem;
}
.sch-cell {
  background: var(--cream);
  padding: 8px 6px;
  text-align: center;
  font-family: var(--font-mono);
}
.sch-cell.hdr   { background: var(--ivory); color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-ui); font-weight: 600; }
.sch-cell.lbl   { text-align: left; color: var(--charcoal-3); font-family: var(--font-ui); }
.sch-cell.open  { color: var(--emerald); }
.sch-cell.close { color: var(--muted-2); }
.sch-cell.due   { color: var(--vermillion); cursor: pointer; font-weight: 500; }
.sch-cell.due:hover { background: var(--vermillion-bg); }

/* ── Permission tree ───────────────────────────────────────────────────────── */
.tree-group { margin-bottom: 2px; }
.tree-hdr {
  padding: 7px 14px;
  font-size: .73rem;
  color: var(--charcoal-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius);
  transition: var(--transition);
  font-family: var(--font-ui);
  font-weight: 500;
}
.tree-hdr:hover { background: var(--ivory-2); }
.tree-hdr.selected { background: var(--vermillion-bg); color: var(--vermillion); }
.tree-children { padding-left: 18px; display: none; }
.tree-children.open { display: block; }
.tree-leaf {
  padding: 5px 14px;
  font-size: .75rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-leaf:hover  { background: var(--ivory-2); color: var(--charcoal-2); }
.tree-leaf.selected { background: var(--vermillion-bg); color: var(--vermillion); }

/* ── Type indicator ────────────────────────────────────────────────────────── */
.type-pill {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-family: var(--font-mono);
  margin-left: 6px;
}

/* ── Loading / empty ───────────────────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: .8rem;
  font-family: var(--font-mono);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}
.empty-icon { font-size: 2rem; opacity: .35; }

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border-2);
  border-top-color: var(--vermillion);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to{ transform: rotate(360deg); } }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.items-center { align-items: center; }
.text-muted { color: var(--muted); }
.text-red { color: var(--vermillion); }
.text-green { color: var(--emerald); }
.text-gold { color: var(--gold); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.mt-8 { margin-top: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* ── Version badge ─────────────────────────────────────────────────────────── */
.ver-badge {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--muted-2);
  background: var(--ivory-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: .04em;
  white-space: nowrap;
  align-self: center;
  margin-left: 4px;
  flex-shrink: 0;
}