/* Shared "control-room" dark theme — matches the /gl map page. */
:root {
  --bg: #14130f;
  --panel: rgba(28, 26, 22, 0.82);
  --panel-solid: #1c1a16;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #ece8df;
  --text-dim: #9c968a;
  --text-faint: #6b6559;
  --accent: #e8a838;
  --accent-ink: #1a1305;
  --ok: #57d6a6;
  --bad: #ff8a87;
  --radius: 14px;
}

* { box-sizing: border-box; }

body.dk {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232,168,56,0.06), transparent 60%),
    var(--bg);
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.dk a { color: var(--accent); text-decoration: none; }
.dk a:hover { filter: brightness(1.12); }

/* ---------- Top bar ---------- */
.dk-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  height: 58px; padding: 0 22px;
  background: rgba(12, 11, 9, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.dk-brand {
  display: flex; align-items: center; gap: 10px; color: var(--text);
}
.dk-brand-mark {
  width: 13px; height: 13px; border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 13px rgba(232,168,56,0.6);
}
.dk-brand-text { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; }
.dk-brand-dim { color: var(--text-faint); font-weight: 400; }

.dk-nav { display: flex; gap: 4px; flex: 1; }
.dk-nav a {
  color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 9px; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.dk-nav a:hover { background: rgba(255,255,255,0.05); color: var(--text); filter: none; }
.dk-nav a.active { background: rgba(232,168,56,0.12); color: var(--accent); }

.dk-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.dk-badge-admin {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.05em;
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 8px; border-radius: 6px; font-weight: 700;
}
.dk-logout {
  background: none; border: 1px solid var(--line-strong); color: var(--text-dim);
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.18s;
}
.dk-logout:hover { color: var(--text); border-color: var(--text-dim); }

/* ---------- Layout ---------- */
.dk-wrap { max-width: 1340px; margin: 0 auto; padding: 26px 22px 60px; }
.dk-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.dk-title { font-family: "Fraunces", serif; font-size: 27px; font-weight: 600; margin: 0; }
.dk-subtitle { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; }

.dk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Rule:
   - amber background  -> dark text
   - dark background   -> amber text + amber border  */
.dk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(232,168,56,0.4); background: rgba(232,168,56,0.06);
  color: var(--accent); cursor: pointer; transition: all 0.18s; text-decoration: none;
}
.dk-btn:hover { background: rgba(232,168,56,0.14); filter: none; color: var(--accent); }
.dk-btn i, .dk-btn span { color: inherit; }
/* Amber filled button -> dark text (like Import progression) */
.dk-btn-accent { background: var(--accent); color: var(--accent-ink) !important; border-color: transparent; }
.dk-btn-accent:hover { filter: brightness(1.08); color: var(--accent-ink) !important; background: var(--accent); }
.dk-btn-accent i, .dk-btn-accent span { color: var(--accent-ink) !important; }
/* Outline variants on dark background -> amber text */
.dk-btn-warn { border-color: rgba(232,168,56,0.4); color: var(--accent); background: transparent; }
.dk-btn-ok { border-color: rgba(232,168,56,0.4); color: var(--accent); background: transparent; }
.dk-btn-sm { padding: 6px 10px; font-size: 12px; }
/* Any button rendered on a light/accent fill keeps black text */
.dk-btn-accent i, .dk-btn-accent span { color: var(--accent-ink) !important; }

/* ---------- KPI grid ---------- */
.dk-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px;
}
.dk-kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px;
}
.dk-kpi-label {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.dk-kpi-value { font-family: "Space Mono", monospace; font-size: 26px; font-weight: 700; line-height: 1; }
.dk-kpi-value.ok { color: var(--ok); }
.dk-kpi-value.bad { color: var(--bad); }

/* ---------- Cards ---------- */
.dk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.dk-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.dk-card-head {
  padding: 14px 17px; border-bottom: 1px solid var(--line);
  font-family: "Fraunces", serif; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dk-card-body { padding: 16px 17px; }

.dk-bignum { font-family: "Space Mono", monospace; font-size: 44px; font-weight: 700; line-height: 1; }
.dk-meter { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); margin-top: 11px; overflow: hidden; }
.dk-meter > div { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.6s ease; }
.dk-note { color: var(--text-faint); font-size: 12px; margin-top: 9px; }

/* ---------- Link list ---------- */
.dk-links { display: flex; flex-direction: column; }
.dk-links a {
  display: flex; align-items: center; gap: 10px; padding: 11px 17px;
  color: var(--text-dim); border-top: 1px solid var(--line); font-size: 13.5px;
  transition: all 0.15s;
}
.dk-links a:first-child { border-top: none; }
.dk-links a:hover { background: rgba(255,255,255,0.04); color: var(--text); filter: none; }
.dk-links a i { font-size: 16px; width: 18px; }
.dk-links a.danger { color: var(--bad); }

/* ---------- Table ---------- */
.dk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dk-table thead th {
  text-align: left; padding: 11px 14px; color: var(--text-faint);
  font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; border-bottom: 1px solid var(--line); font-weight: 700;
}
.dk-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.dk-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.dk-table tbody tr:last-child td { border-bottom: none; }
.dk-num { font-family: "Space Mono", monospace; text-align: right; color: var(--text-dim); }
.dk-right { text-align: right; }

/* ---------- Badges / pills ---------- */
.dk-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
}
.dk-pill.ok { background: rgba(87,214,166,0.14); color: var(--ok); }
.dk-pill.bad { background: rgba(255,138,135,0.14); color: var(--bad); }
.dk-pill.warn { background: rgba(232,168,56,0.16); color: var(--accent); }

/* ---------- Forms ---------- */
.dk-field { margin-bottom: 14px; }
.dk-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 5px; }
.dk-input, .dk-textarea, .dk select, .dk input[type=text], .dk input[type=date],
.dk input[type=file], .dk input[type=password], .dk input[type=email], .dk input[type=number] {
  width: 100%; background: rgba(255,255,255,0.04); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 14px; outline: none; transition: border-color 0.15s;
}
.dk-input:focus, .dk-textarea:focus, .dk select:focus,
.dk input:focus { border-color: var(--accent); }
.dk-textarea { min-height: 80px; resize: vertical; }
.dk input::placeholder, .dk-textarea::placeholder { color: var(--text-faint); }
.dk input[type=file] { padding: 7px 12px; }
.dk input[type=file]::file-selector-button {
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 7px; padding: 5px 10px; margin-right: 10px; cursor: pointer; font: inherit; font-size: 12px;
}

/* ---------- Alerts / messages ---------- */
.dk-alert {
  border-radius: 11px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.dk-alert.info { background: rgba(232,168,56,0.10); border: 1px solid rgba(232,168,56,0.25); color: var(--accent); }
.dk-alert.ok { background: rgba(87,214,166,0.10); border: 1px solid rgba(87,214,166,0.25); color: var(--ok); }
.dk-alert.bad { background: rgba(255,138,135,0.10); border: 1px solid rgba(255,138,135,0.25); color: var(--bad); }

/* ---------- Misc ---------- */
.dk-section-label {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin: 18px 0 9px;
}
.dk-back { color: var(--text-dim); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.dk-back:hover { color: var(--text); filter: none; }

@media (max-width: 980px) {
  .dk-kpis { grid-template-columns: repeat(3, 1fr); }
  .dk-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dk-kpis { grid-template-columns: repeat(2, 1fr); }
  .dk-nav { display: none; }
}

/* ---------- 3D page-load entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dk-wrap { perspective: 1400px; perspective-origin: 50% 0%; }

  @keyframes dk3dIn {
    0%   { opacity: 0; transform: translateY(26px) translateZ(-120px) rotateX(14deg); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes dkFadeUp {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes dkTopbarIn {
    0%   { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: none; }
  }

  .dk-topbar { animation: dkTopbarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

  .dk-head { animation: dkFadeUp 0.5s ease both; animation-delay: 0.1s; }

  /* Staggered 3D reveal for KPI tiles */
  .dk-kpis .dk-kpi {
    transform-style: preserve-3d;
    animation: dk3dIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .dk-kpis .dk-kpi:nth-child(1) { animation-delay: 0.14s; }
  .dk-kpis .dk-kpi:nth-child(2) { animation-delay: 0.20s; }
  .dk-kpis .dk-kpi:nth-child(3) { animation-delay: 0.26s; }
  .dk-kpis .dk-kpi:nth-child(4) { animation-delay: 0.32s; }
  .dk-kpis .dk-kpi:nth-child(5) { animation-delay: 0.38s; }
  .dk-kpis .dk-kpi:nth-child(6) { animation-delay: 0.44s; }

  /* Cards rise in 3D after the KPIs */
  .dk-grid2 > .dk-card,
  .dk-wrap > .dk-card {
    transform-style: preserve-3d;
    animation: dk3dIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .dk-grid2 > .dk-card:nth-child(1) { animation-delay: 0.5s; }
  .dk-grid2 > .dk-card:nth-child(2) { animation-delay: 0.58s; }
  .dk-wrap > .dk-card { animation-delay: 0.62s; }

  /* Login card pops in 3D */
  .login-card {
    transform-style: preserve-3d;
    animation: dk3dIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}