/* ===========================================================
   Straßenwärter Tool – Design 4 "Portal Hub"
   - Blue-first, clean glass, dashboard-centric
   - Light & Dark via body[data-theme]
   =========================================================== */

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

:root{
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Brand */
  --blue-950:#061222;
  --blue-900:#071a33;
  --blue-850:#0a2346;
  --blue-800:#0d2b57;
  --blue-700:#113a73;
  --blue-600:#1b55b8;
  --blue-500:#2d6df6;

  --accent:#2d6df6;          /* primary */
  --accent-2:#60a5fa;        /* soft */
  --warn:#f59e0b;
  --danger:#ef4444;
  --ok:#22c55e;

  /* Dark theme (default) */
  --bg0: radial-gradient(1200px 700px at 20% 20%, rgba(45,109,246,.25), transparent 55%),
         radial-gradient(900px 600px at 85% 30%, rgba(96,165,250,.12), transparent 55%),
         radial-gradient(900px 700px at 30% 85%, rgba(17,58,115,.22), transparent 60%),
         linear-gradient(180deg, #040a14 0%, #050b16 30%, #030914 100%);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.08);
  --surface-3: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.52);

  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --shadow2: 0 10px 26px rgba(0,0,0,.35);
  --blur: 18px;

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;

  --pad: 18px;
  --gap: 14px;
}

body[data-theme="light"]{
  --bg0: radial-gradient(1200px 700px at 20% 20%, rgba(45,109,246,.16), transparent 55%),
         radial-gradient(900px 600px at 85% 30%, rgba(96,165,250,.10), transparent 55%),
         linear-gradient(180deg, #f6f9ff 0%, #eef4ff 55%, #f9fbff 100%);
  --surface: rgba(255,255,255,.70);
  --surface-2: rgba(255,255,255,.80);
  --surface-3: rgba(255,255,255,.90);
  --border: rgba(3,10,20,.10);
  --border-2: rgba(3,10,20,.14);

  --text: rgba(3,10,20,.90);
  --muted: rgba(3,10,20,.70);
  --muted2: rgba(3,10,20,.55);

  --shadow: 0 18px 45px rgba(10,28,60,.18);
  --shadow2: 0 10px 26px rgba(10,28,60,.12);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: var(--bg0);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.fade-in{ animation: fadeIn .28s ease both; }
@keyframes fadeIn { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

.container, #mainContent{
  width:min(1200px, calc(100% - 34px));
  margin: 0 auto;
}

/* ---------- Top header / brand area (index.css uses .header) ---------- */
.header{
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body[data-theme="light"] .header{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(3,10,20,.06);
}

.header .container{
  padding: 18px 0 10px;
}

/* ---------- Nav pills ---------- */
.navbar{
  position: sticky;
  top: 0;
  z-index: 25;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.10));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body[data-theme="light"] .navbar{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border-bottom: 1px solid rgba(3,10,20,.08);
}

.navbar .container{
  padding: 10px 0;
  display:flex;
  align-items:center;
  gap: 10px;
}

#navMenu{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-link, .nav-btn, .nav-item button{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  box-shadow: var(--shadow2);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nav-link:hover, .nav-btn:hover, .nav-item button:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  background: var(--surface-2);
}
.nav-link.active, .nav-btn.active, .nav-item button.active{
  background: linear-gradient(180deg, rgba(45,109,246,.55), rgba(45,109,246,.22));
  border-color: rgba(96,165,250,.55);
}
body[data-theme="light"] .nav-link.active,
body[data-theme="light"] .nav-btn.active,
body[data-theme="light"] .nav-item button.active{
  background: linear-gradient(180deg, rgba(45,109,246,.18), rgba(45,109,246,.08));
  border-color: rgba(45,109,246,.35);
}

/* Mobile nav toggle (keeps existing id) */
#mobileNavToggle{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ---------- Portal cards & layout primitives ---------- */
.card, .glass, .panel, .set-card, .support-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.card{ padding: var(--pad); }

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .2px;
}

.subtle{ color: var(--muted); }

/* ---------- Buttons ---------- */
.btn, button.btn, .button, button{
  font-family: var(--font);
}
.btn{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  background: var(--surface-2);
}
.btn-primary{
  border-color: rgba(96,165,250,.55);
  background: linear-gradient(180deg, rgba(45,109,246,.72), rgba(45,109,246,.30));
}
.btn-primary:hover{ filter: brightness(1.04); }
.btn-danger{
  border-color: rgba(239,68,68,.45);
  background: linear-gradient(180deg, rgba(239,68,68,.55), rgba(239,68,68,.22));
}
.btn-ghost{
  background: transparent;
  border-color: var(--border);
}
.btn-sm{ padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.btn-pill{ border-radius: 999px; }

/* ---------- Inputs ---------- */
input, select, textarea{
  width:100%;
  color: var(--text);
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
  transition: border-color .12s ease, background .12s ease;
}
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea{
  background: rgba(255,255,255,.65);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(96,165,250,.60);
  background: rgba(45,109,246,.08);
}
::placeholder{ color: var(--muted2); }

/* ---------- Tables ---------- */
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
thead th{
  text-align:left;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, rgba(45,109,246,.25), rgba(0,0,0,0));
  border-bottom: 1px solid var(--border);
  padding: 12px 12px;
}
tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body[data-theme="light"] tbody td{ border-bottom: 1px solid rgba(3,10,20,.06); }
tbody tr:hover td{ background: rgba(45,109,246,.06); }

/* ---------- Badges / chips ---------- */
.badge, .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}
.badge-blue{
  border-color: rgba(96,165,250,.55);
  color: var(--text);
  background: rgba(45,109,246,.18);
}
.badge-warn{ border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.14); color: var(--text); }
.badge-ok{ border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); color: var(--text); }

/* ---------- Dashboard portal layout helpers (used by dashboard.js) ---------- */
.portal{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.portal-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
}
.portal-title h1{
  margin:0;
  font-size: 26px;
  letter-spacing:.2px;
}
.portal-title p{ margin:6px 0 0; color: var(--muted); }
.portal-search{
  flex: 0 0 420px;
  max-width: 100%;
}
.portal-search .search-wrap{
  display:flex;
  gap:10px;
}
.portal-search input{ height: 44px; border-radius: 999px; }
.portal-search .btn{ height: 44px; border-radius: 999px; }

.portal-actions{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.quick-tile{
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.quick-tile:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  background: var(--surface-2);
}
.quick-tile .qt-left{ display:flex; gap:10px; align-items:center; }
.quick-tile .qt-ico{
  width: 38px; height:38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(45,109,246,.18);
  border: 1px solid rgba(96,165,250,.35);
}
.quick-tile .qt-label{ font-weight: 600; }
.quick-tile .qt-sub{ color: var(--muted2); font-size: 12px; margin-top:2px; }

.portal-grid{
  display:grid;
  grid-template-columns: 1.35fr .95fr;
  gap: 16px;
  align-items:start;
}
.portal-col{ display:flex; flex-direction:column; gap: 16px; }
.portal-list .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body[data-theme="light"] .portal-list .row{ border-bottom: 1px solid rgba(3,10,20,.06); }
.portal-list .row:last-child{ border-bottom:none; }
.portal-list .meta{ color: var(--muted2); font-size: 12px; }

@media (max-width: 980px){
  .portal-actions{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .portal-grid{ grid-template-columns: 1fr; }
  .portal-search{ flex-basis: auto; width: 100%; }
  .portal-hero{ flex-direction:column; }
}
@media (max-width: 520px){
  .container, #mainContent{ width: calc(100% - 22px); }
  .portal-actions{ grid-template-columns: 1fr; }
}

/* ---------- Reduce overly heavy legacy glows if present ---------- */
.neon, .glow, .ultra-glow{ filter:none !important; box-shadow: var(--shadow2) !important; }