/* ============================================================
   Skynet Digital — DOOH Planner (standalone web app)
   Global styles. Theme tokens are applied as CSS custom
   properties on the app root (see src/theme.js).
   ============================================================ */

/* ---- Cubron Grotesk (self-hosted CI typeface) ---- */
@font-face { font-family:"Cubron Grotesk"; src:url("assets/fonts/CubronGrotesk-Book.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cubron Grotesk"; src:url("assets/fonts/CubronGrotesk-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cubron Grotesk"; src:url("assets/fonts/CubronGrotesk-SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Cubron Grotesk"; src:url("assets/fonts/CubronGrotesk-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Cubron Grotesk"; src:url("assets/fonts/CubronGrotesk-ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; overflow-x:hidden; max-width:100%; }
body {
  font-family:"Cubron Grotesk","Helvetica Neue",Arial,sans-serif;
  background:#eceded;
  -webkit-font-smoothing:antialiased;
}
#app { height:100%; }

::selection { background:#72caef; color:#092552; }

@keyframes sk-spin { to { transform:rotate(360deg); } }
@keyframes sk-pop  { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes sk-fade { from { opacity:0; } to { opacity:1; } }

/* Custom scrollbars */
.sk-scroll::-webkit-scrollbar { width:9px; }
.sk-scroll::-webkit-scrollbar-thumb { background:var(--scroll-thumb,rgba(27,31,35,.18)); border-radius:9px; border:2px solid var(--scroll-tb,#fff); }
.sk-scroll::-webkit-scrollbar-track { background:transparent; }

/* ---- Leaflet theming to match the CI ---- */
.leaflet-container { font-family:"Cubron Grotesk","Helvetica Neue",Arial,sans-serif; background:var(--lf-bg,#e8eaec); }
.leaflet-container .leaflet-tile { filter: var(--tile-filter, none); }

.leaflet-tooltip.sk-tip {
  background:#0c2b5d; color:#fff; border:none; border-radius:8px; padding:6px 10px;
  font-size:12.5px; font-weight:600; box-shadow:0 6px 20px rgba(12,43,93,.45); white-space:nowrap;
}
.leaflet-tooltip.sk-tip::before { border-top-color:#0c2b5d; }

.leaflet-bar { border:none !important; box-shadow:0 4px 16px rgba(0,0,0,.18) !important; border-radius:12px !important; overflow:hidden; }
.leaflet-bar a {
  width:38px !important; height:38px !important; line-height:38px !important;
  background:var(--lf-ctrl-bg,#fff) !important; color:var(--lf-ctrl-ink,#0c2b5d) !important;
  font-weight:600 !important; border-bottom:1px solid var(--line,rgba(27,31,35,.08)) !important;
}
.leaflet-bar a:hover { background:var(--lf-ctrl-hover,#f3f6fb) !important; }
.leaflet-control-attribution { background:var(--lf-attr-bg,rgba(255,255,255,.72)) !important; color:var(--faint2,#888) !important; font-size:10px !important; margin:0; padding:0 5px; }
.leaflet-control-attribution a { color:var(--accent,#0078A8) !important; text-decoration:none; }

/* On mobile, lift the map controls (zoom bottom-left, attribution bottom-right)
   above the 62px bottom nav so they aren't hidden behind it. */
@media (max-width: 860px) {
  .leaflet-bottom { bottom: 72px; }
}

/* Inputs inherit the CI typeface and respect placeholders */
input, button, textarea { font-family:inherit; }

/* Subtle, CI-consistent hover/active feedback on pointer devices. Kept gentle so
   it reads as a hint, not a state change. Disabled controls stay inert. */
@media (hover: hover) {
  button, a[href], [role="button"] { transition: filter .15s ease, box-shadow .15s ease, transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
  button:not(:disabled):hover, a[href]:hover, [role="button"]:hover { filter: brightness(1.05); }
  button:not(:disabled):active, a[href]:active { transform: translateY(1px); }
}
input::placeholder { color:var(--ph,#9aa0a6); }

/* "Karte einfärben"/Analyse box in Nightsky-blue (10% transparent): scoped token
   overrides so text/controls stay readable on the dark-blue background. */
.sk-analyse-dark {
  --surface:#0c2349; --inset:#0a1d3f; --inset-btn:#17355f;
  --ink:#eceff5; --muted:#dbe3ef; --faint:#c4cee0; --faint2:#aab7cd; --b3:#5e7088;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.20);
  --accent:#72caef; --action:#72caef; --action-text:#0c2349; --hi:#9fd9f4;
  --sel-ring:#72caef; --sel-bg:rgba(114,202,239,.16);
}