/* ============================================================
   GökDedektör — design system
   ============================================================
   A deliberately different visual language from a typical dark
   dashboard: squared corners, flat surfaces with hairline borders
   instead of drop shadows, a warm graphite ground rather than
   blue-grey, and a single saturated red used sparingly as a signal
   colour rather than as decoration.

   Loaded after the component framework so these tokens win.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root, [data-theme="dark"] {
  /* --- palette -------------------------------------------------- */
  --gr-ink-900: #0C0B0A;   /* page ground — warm near-black */
  --gr-ink-800: #141210;
  --gr-ink-700: #1C1917;   /* panels */
  --gr-ink-600: #262220;   /* raised */
  --gr-ink-500: #34302C;   /* hairlines */
  --gr-ink-400: #57504A;

  --gr-paper:   #F5F2EE;   /* primary text — warm off-white, not pure */
  --gr-muted:   #A8A099;
  --gr-faint:   #6E6862;

  --gr-red:     #D81E2C;   /* signal */
  --gr-red-dim: #9E1620;
  --gr-amber:   #E0A100;
  --gr-green:   #3F9A56;
  --gr-steel:   #5C7A99;   /* informational, replaces generic blue */

  /* --- framework tokens (oklch: L C H) --------------------------- */
  --p:  54% 0.21 25;   --pc: 98% 0 0;      --pf: 45% 0.19 25;
  --s:  52% 0.06 245;  --sc: 97% 0 0;      --sf: 44% 0.05 245;
  --a:  70% 0.15 78;   --ac: 15% 0.02 78;  --af: 62% 0.14 78;
  --n:  22% 0.01 40;   --nc: 93% 0.01 40;
  --b1: 11% 0.005 40;  --b2: 9% 0.005 40;  --b3: 14% 0.006 40;
  --bc: 93% 0.008 40;
  --in: 56% 0.08 245;  --inc: 97% 0 0;
  --su: 55% 0.13 148;  --suc: 97% 0 0;
  --wa: 72% 0.15 78;   --wac: 15% 0.02 78;
  --er: 54% 0.21 25;   --erc: 98% 0 0;

  /* Squared geometry — the clearest departure from a rounded UI. */
  --rounded-box: 2px;
  --rounded-btn: 1px;
  --rounded-badge: 1px;
  --animation-btn: 0;
  --border-btn: 1px;
  --tab-radius: 1px;
}

/* --- typography ------------------------------------------------- */
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--gr-ink-900) !important;
  color: var(--gr-paper);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, .navbar, .stat-title, .stat-value, .btn, .badge, th {
  font-family: 'Barlow Condensed', 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1, h2, h3, h4 { font-weight: 700; }

.font-mono, code, pre, .stat-value, .countdown {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  letter-spacing: 0;
}

/* --- surfaces: flat panels, hairline borders, no soft shadows ---- */
.card, .navbar, .menu, .dropdown-content, .modal-box,
.stats, .alert, .table, .collapse {
  background: var(--gr-ink-700) !important;
  border: 1px solid var(--gr-ink-500) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: none !important;
}

/* A thin accent rule at the top of panels — a recognisable signature. */
.card::before {
  content: '';
  display: block;
  height: 2px;
  margin: -1px -1px 0;
  background: linear-gradient(90deg, var(--gr-red) 0%, var(--gr-red) 28%, transparent 28%);
}

/* --- controls: squared, bordered, uppercase --------------------- */
.btn {
  border-radius: 1px !important;
  border-width: 1px;
  font-weight: 600;
  min-height: 2.25rem;
  height: auto;
}
.btn-primary {
  background: var(--gr-red) !important;
  border-color: var(--gr-red) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--gr-red-dim) !important; border-color: var(--gr-red-dim) !important; }
.btn-ghost:hover { background: var(--gr-ink-600) !important; }
.btn-outline { background: transparent !important; }

.input, .select, .textarea, .toggle, .checkbox {
  border-radius: 1px !important;
  background: var(--gr-ink-800) !important;
  border: 1px solid var(--gr-ink-500) !important;
  font-family: 'IBM Plex Sans', sans-serif;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none !important;
  border-color: var(--gr-red) !important;
}

.badge { border-radius: 1px !important; border-width: 1px; font-weight: 600; }

/* --- retint the framework greys/blues to the warm graphite ramp -- */
.bg-base-100 { background-color: var(--gr-ink-800) !important; }
.bg-base-200 { background-color: var(--gr-ink-700) !important; }
.bg-base-300 { background-color: var(--gr-ink-600) !important; }

.bg-gray-900, .bg-slate-900, .bg-slate-950 { background-color: var(--gr-ink-800) !important; }
.bg-gray-800, .bg-slate-800 { background-color: var(--gr-ink-700) !important; }
.bg-gray-700, .bg-slate-700 { background-color: var(--gr-ink-600) !important; }
.bg-gray-600 { background-color: var(--gr-ink-500) !important; }
.border-gray-700, .border-gray-600, .border-slate-800 { border-color: var(--gr-ink-500) !important; }

.text-gray-400, .text-slate-400 { color: var(--gr-muted) !important; }
.text-gray-500 { color: var(--gr-faint) !important; }

/* Blues and indigos become steel or signal red, never generic blue. */
.bg-blue-600, .bg-blue-700, .bg-indigo-600 { background-color: var(--gr-red) !important; }
.hover\:bg-blue-500:hover, .hover\:bg-blue-800:hover,
.hover\:bg-indigo-500:hover { background-color: var(--gr-red-dim) !important; }
.text-blue-400, .text-blue-500, .text-indigo-600 { color: var(--gr-steel) !important; }
.border-blue-500 { border-color: var(--gr-steel) !important; }

/* Status colours kept distinct from the signal red. */
.text-green-400, .text-green-300 { color: var(--gr-green) !important; }
.text-amber-400, .text-yellow-400 { color: var(--gr-amber) !important; }
.text-red-400, .text-red-500 { color: var(--gr-red) !important; }

/* --- map chrome ------------------------------------------------- */
.leaflet-container { background: var(--gr-ink-900); }
/* Leaflet stacks the buttons in a .leaflet-bar and relies on each one having a
   single shared edge. Giving every button a full 1px border made them overlap
   and sit crooked, so the border lives on the bar and the buttons only carry a
   divider between them. */
.leaflet-bar {
  border: 1px solid var(--gr-ink-500) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--gr-ink-700) !important;
  color: var(--gr-paper) !important;
  border: none !important;
  border-bottom: 1px solid var(--gr-ink-500) !important;
  border-radius: 0 !important;
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  margin: 0 !important;
  float: none !important;
}
.leaflet-bar a:last-child { border-bottom: none !important; }
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover { background: var(--gr-ink-600) !important; }

/* Custom round buttons the app places over the map (fullscreen, recentre …)
   keep their own shape — the global squaring rule would flatten them. */
.leaflet-control-container .btn-circle,
.btn-circle { border-radius: 9999px !important; }

/* The app pins its own fullscreen button at top-right, where Leaflet also puts
   the zoom control. Push the Leaflet stack down so the two no longer sit on
   top of each other. */
.leaflet-top.leaflet-right { padding-top: 52px; }
.leaflet-top.leaflet-right .leaflet-control { margin-top: 0; clear: both; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--gr-ink-700);
  color: var(--gr-paper);
  border-radius: 2px;
  border: 1px solid var(--gr-ink-500);
}

/* --- scrollbars ------------------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--gr-ink-800); }
::-webkit-scrollbar-thumb { background: var(--gr-ink-500); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gr-ink-400); }

/* --- licence-restricted controls -------------------------------- */
.lic-restricted { position: relative; opacity: .5; cursor: not-allowed !important; }
.lic-restricted .lic-mark {
  position: absolute; top: -5px; right: -5px;
  font-size: 10px; line-height: 1; pointer-events: none;
}
.lic-restricted input, .lic-restricted select, .lic-restricted button { pointer-events: none; }

.lic-zone-tip {
  background: var(--gr-ink-800); color: var(--gr-amber);
  border: 1px solid var(--gr-amber); border-radius: 1px;
  font-size: 11px; font-weight: 600;
}