/* ═══════════════════════════════════════════════════════════════════════
   Werkstatt – dunkles, industrielles Design (Stahl + Signalgelb)

   Wird in partials/header.ejs und login.ejs ALS LETZTES geladen und
   überschreibt die Standard-Optik. Zurück zum alten Look: den <link> auf
   /css/werkstatt.css aus beiden Dateien entfernen.

   Farben (Namen aus der Werkstatt):
     Walzstahl   Seitenhintergrund      Blech       Karten, Flächen
     Naht        Linien, Rahmen         Kreide      Text
     Stahlblau   Hauptaktion            Signalgelb  Akzent: aktiver Menüpunkt,
                                                    Fokus, Stempel-Button
   Radien: Karten .5rem · Bedienelemente .375rem · Etiketten .25rem
   Keine Schatten auf Karten, keine Verläufe, keine Glas-Effekte.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────── */
html:root {
  --wk-font:         'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wk-font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;

  --accent:        #F2B705;
  --on-accent:     #1E2428;
  --primary:       #3F6E93;
  --primary-dark:  #335B7B;
  --primary-soft:  #E1EBF2;

  --radius:        .375rem;
  --radius-lg:     .5rem;
  --radius-xl:     .5rem;
  --card-radius:   .5rem;
  --shadow-card:        none;
  --shadow-card-hover:  none;

  /* hell */
  --wk-bg:           #E3E7EA;
  --wk-surface:      #FFFFFF;
  --wk-raised:       #F3F5F6;
  --wk-line:         #C5CED4;
  --wk-text:         #1E2428;
  --wk-muted:        #55626C;
  --wk-input:        #FFFFFF;
  --wk-primary-text: #2F5878;

  --page-bg:      var(--wk-bg);
  --topbar-bg:    var(--wk-surface);
  --border-soft:  var(--wk-line);

  --sidebar-bg:    #1B2125;
  --sidebar-text:  #C3CCD2;
  --sidebar-hover: #2A3339;
}
html.dark:root {
  --wk-bg:           #1E2428;
  --wk-surface:      #272F35;
  --wk-raised:       #303A41;
  --wk-line:         #3B464F;
  --wk-text:         #E4E8EA;
  --wk-muted:        #9AA6AE;
  --wk-input:        #1E2428;
  --wk-primary-text: #8DB8D8;
  --primary-soft:    #2A3B48;
  --border-soft:     #3B464F;
}

/* ── Schrift ───────────────────────────────────────────────────────── */
html { font-size: 16.5px; } /* Barlow wirkt kleiner als Inter */
body, input, button, select, textarea { font-family: var(--wk-font); }
body { color: var(--wk-text); }
h1, h2, h3, h4, .font-display, .count-up { font-family: var(--wk-font-display); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
.count-up, table td, table th { font-variant-numeric: tabular-nums; }

/* Keine Großbuchstaben-Etiketten, keine gesperrte Schrift */
.uppercase { text-transform: none !important; }
.tracking-wide, .tracking-wider, .tracking-widest { letter-spacing: 0 !important; }

/* ── Flächen ───────────────────────────────────────────────────────── */
.page-bg, .dark .page-bg { background-color: var(--wk-bg); }

.card, .dark .card, .card-glass, .dark .card-glass {
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-radius: var(--card-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card:hover { box-shadow: none; }
.card-clean { border-radius: var(--card-radius); }
.card-lift { transition: border-color .15s; }
.card-lift:hover, .dark .card-lift:hover {
  transform: none; box-shadow: none; border-color: var(--wk-muted);
}
.surface-muted { background: var(--wk-raised); border-color: var(--wk-line); border-radius: var(--card-radius); }

/* Eckenradien: kleiner und abgestuft statt überall „rund“ */
.rounded-md  { border-radius: .25rem; }
.rounded-lg  { border-radius: .375rem; }
.rounded-xl  { border-radius: .5rem; }
.rounded-2xl { border-radius: .5rem; }
.rounded-3xl { border-radius: .625rem; }
.rounded-b-xl { border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }

/* ── Dashboard-Kennzahlen ──────────────────────────────────────────── */
.widget.card { border-width: 1px; }
.widget.card > .absolute.rounded-full { display: none; }              /* Deko-Kreis */
.widget.card .bg-gradient-to-r {                                       /* Verlaufsstreifen → Farbkante */
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
  height: 3px; opacity: 1; border-radius: 0;
}
.widget .count-up { font-size: 2.25rem; line-height: 1.05; font-weight: 600; }

/* ── Bedienelemente ────────────────────────────────────────────────── */
.btn { border-radius: .375rem; font-size: .875rem; font-weight: 600; box-shadow: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--primary-dark); filter: none; }
.btn-danger, .btn-success { box-shadow: none; }
.btn-ghost, .dark .btn-ghost { border: 1px solid var(--wk-line); color: var(--wk-muted); }
.btn-ghost:hover, .dark .btn-ghost:hover { background: var(--wk-raised); color: var(--wk-text); }

.input, .dark .input {
  background: var(--wk-input);
  color: var(--wk-text);
  border: 1px solid var(--wk-line);
  border-radius: .375rem;
}
.input:focus, .dark .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.badge { border-radius: .25rem; font-size: .75rem; font-weight: 600; letter-spacing: 0; padding: .25rem .5rem; }

.chip, .dark .chip { border-radius: .375rem; background: var(--wk-raised); color: var(--wk-muted); }
.chip:hover, .dark .chip:hover { background: var(--wk-line); color: var(--wk-text); }
.chip.active, .dark .chip.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--wk-primary-text);
  border-color: var(--primary);
}

.tab-nav a, .tab-nav button { color: var(--wk-muted); }
.tab-nav a:hover, .tab-nav button:hover,
.dark .tab-nav a:hover, .dark .tab-nav button:hover { color: var(--wk-text); }
.tab-nav a.active, .tab-nav button.active { color: var(--wk-text); border-bottom-color: var(--accent); }

a.link-soft { color: var(--wk-primary-text); }

/* ── Tabellen ──────────────────────────────────────────────────────── */
.table-modern thead th, .dark .table-modern thead th {
  background: var(--wk-raised);
  color: var(--wk-muted);
  text-transform: none; letter-spacing: 0;
  font-size: .8125rem; font-weight: 600;
  border-bottom: 1px solid var(--wk-line);
}
.table-modern tbody tr:hover, .dark .table-modern tbody tr:hover {
  background: color-mix(in srgb, var(--wk-text) 5%, transparent);
}
.section-title { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 600; color: var(--wk-muted); }
.empty-state, .dark .empty-state { color: var(--wk-muted); }
.empty-state h3, .dark .empty-state h3 { color: var(--wk-text); }

/* ── Seitenleiste ──────────────────────────────────────────────────── */
#sidebar a { border-radius: .375rem; }
#sidebar a.active {
  background-color: rgba(255,255,255,.07) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Untere Navigation (Handy): bündig am Rand statt schwebend ────── */
#bottom-nav { padding: 0; }
#bottom-nav-inner {
  max-width: none;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border-radius: 0;
  background: var(--sidebar-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-top: 1px solid #343E45;
  box-shadow: none;
}
#bottom-nav a { position: relative; border-radius: 0; font-size: .72rem; letter-spacing: 0; }
#bottom-nav a.active { background: transparent; box-shadow: none; color: #fff; }
#bottom-nav a.active::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%;
  height: 3px; background: var(--accent);
}
#bottom-nav a.active svg { transform: none; }

/* Stempel-Button: das eine auffällige Element auf dem Handy */
#fab-main {
  background: var(--accent); color: var(--on-accent);
  border-radius: .5rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
#fab-main:hover { filter: none; background: color-mix(in srgb, var(--accent) 90%, #fff); }

/* ── Überlagerungen ────────────────────────────────────────────────── */
#cmdk-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
#cmdk-box, .dark #cmdk-box {
  background: var(--wk-surface); border: 1px solid var(--wk-line);
  border-radius: .5rem; box-shadow: 0 12px 32px rgba(0,0,0,.4);
  animation-timing-function: ease-out;
}
#cmdk-input, .dark #cmdk-input { border-color: var(--wk-line); }
.cmdk-item, .dark .cmdk-item { color: var(--wk-text); border-radius: .375rem; }
.cmdk-item:hover, .cmdk-item.active,
.dark .cmdk-item:hover, .dark .cmdk-item.active {
  background: var(--wk-raised); color: var(--wk-text); box-shadow: inset 2px 0 0 var(--accent);
}
.cmdk-hint, .dark .cmdk-hint { border-color: var(--wk-line); color: var(--wk-muted); }
.cmdk-hint kbd, .dark .cmdk-hint kbd { background: var(--wk-raised); border-color: var(--wk-line); }

.modal-panel { animation: modalIn .15s ease-out both; }
.toast { border-radius: .375rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); animation: toastIn .18s ease-out both; }

/* ── Ruhe: keine Einblendung bei jedem Seitenwechsel ───────────────── */
main { animation: none; }
.skeleton, .dark .skeleton {
  background: linear-gradient(90deg, var(--wk-raised) 25%, var(--wk-line) 50%, var(--wk-raised) 75%);
  background-size: 200% 100%;
}
::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background: var(--wk-line); }

/* ── Login ─────────────────────────────────────────────────────────── */
body.bg-gradient-to-br { background-image: none; background-color: var(--wk-bg); }
.blur-3xl { display: none; }
.login-card { animation-timing-function: ease-out; }

/* ── Symbole (ersetzen die früheren Emojis) ────────────────────────── */
.ic { display: inline-block; vertical-align: -.15em; flex-shrink: 0; }