/* =========================================================================
   Kalkül-Design für den Arbeitsvertragsgenerator
   Zentrales Stylesheet mit Design-Tokens, Header/Nav, Karten, Buttons,
   Fields, Chips, Tabs, Tablet-Breakpoint.
   Bestehende Klassennamen (.card, .btn, .field, .chip, .accordion-toggle,
   .autocomplete-wrap, .spinner, .header) werden hier ergänzt/überschrieben,
   NICHT umbenannt — damit der bestehende Vanilla-JS-Code intakt bleibt.
   ========================================================================= */

/* --- Design-Tokens (überschreiben bestehende :root aus Inline-Styles) ---- */
:root {
  --brand-navy: #252E56;
  --brand-navy-800: #1a2340;
  --brand-navy-900: #10162e;
  --brand-cyan: #00CCCC;
  --brand-cyan-600: #1BC1C1;
  --brand-cyan-100: #d9fbfb;

  /* Semantic tokens (überschreiben die alten Blau-Werte) */
  --accent: var(--brand-navy);
  --accent-hover: var(--brand-navy-800);
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #252E56;
  --label: #64748b;
  --border: #e5e8ef;
  --border-strong: #cfd4e0;
  --success: #16a34a;
  --error: #dc2626;
  --amber: #f59e0b;

  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --focus-ring: 0 0 0 3px rgba(0,204,204,.22);
  --transition: 150ms cubic-bezier(.22,1,.36,1);
}

/* --- Body / Typografie ---------------------------------------------------- */
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--brand-navy);
  letter-spacing: -.01em;
  font-weight: 700;
}

/* =========================================================================
   Kalkül-Header (ersetzt den bestehenden Gradient-Header)
   Diese Klasse liegt zusätzlich zu .header. In jedem HTML wird
   .header um .kalkuel-header ergänzt und das innere Markup angepasst.
   ========================================================================= */
.kalkuel-header {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--brand-navy) !important;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--brand-cyan);
  padding: 12px 24px !important;
  font-size: 15px !important;
  box-shadow: var(--shadow-sm);
  gap: 20px;
  position: relative;    /* Anchor für die absolute Nav → Nav sitzt immer mittig,
                             unabhängig von Brand-/User-Breite (kein Springen mehr) */
}

.kalkuel-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--brand-navy);
  min-width: 0;
}
.kalkuel-header__logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.kalkuel-header__title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--brand-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kalkuel-header__title-sub {
  color: var(--label);
  font-weight: 500;
  font-size: 12.5px;
  margin-left: 6px;
}

/* Nav in Header: absolut in Header-Mitte → sitzt fix, egal wie sich Brand/User verändern */
.kalkuel-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: none;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.kalkuel-nav::-webkit-scrollbar { display: none; }
.kalkuel-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--label);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.kalkuel-nav a:hover {
  color: var(--brand-navy);
  background: rgba(0,204,204,.06);
}
.kalkuel-nav a.active {
  color: var(--brand-navy);
  font-weight: 600;
  border-bottom-color: var(--brand-cyan);
  border-radius: var(--radius) var(--radius) 0 0;
}
.kalkuel-nav svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* User-Bereich im Header (rechts) */
.kalkuel-header__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--label);
  min-width: 0;
}
.kalkuel-header__user-name {
  font-weight: 500;
  color: var(--brand-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Hamburger-Button-Anpassung (bestehender Selector .hamburger span aus index.html) */
.kalkuel-header .hamburger span {
  background: var(--brand-navy) !important;
}
.kalkuel-header .header-dropdown a {
  color: var(--brand-navy) !important;
}
.kalkuel-header .header-dropdown a:hover {
  background: rgba(0,204,204,.08) !important;
}

/* Mode-Toggle (Auge-Symbol) im Kalkül-Header umfärben */
.kalkuel-header .mode-toggle {
  background: rgba(0,204,204,.1) !important;
  border-color: rgba(0,204,204,.35) !important;
  color: var(--brand-navy) !important;
}
.kalkuel-header .mode-toggle:hover {
  background: rgba(0,204,204,.18) !important;
}

/* =========================================================================
   Karten
   ========================================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-title {
  color: var(--label);
}

/* =========================================================================
   Buttons — bestehende Klassen umfärben
   ========================================================================= */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary {
  background: var(--brand-navy);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-navy-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,46,86,.25);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

/* Neue Cyan-CTA-Variante für seltenen, hervorgehobenen Klick */
.btn-cyan {
  background: var(--brand-cyan);
  color: var(--brand-navy-900);
  font-weight: 700;
  border: none;
}
.btn-cyan:hover {
  background: var(--brand-cyan-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,204,204,.35);
}

/* =========================================================================
   Formular-Elemente
   ========================================================================= */
input, select, textarea {
  border-color: var(--border-strong) !important;
  color: var(--brand-navy) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-cyan) !important;
  box-shadow: var(--focus-ring) !important;
}
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--error) !important;
}
label {
  color: var(--label);
}

/* =========================================================================
   Chips (Steuerklasse/Kirchensteuer/Bundesland-Toggles etc.)
   ========================================================================= */
.chip.active {
  background: var(--brand-navy) !important;
  color: #fff !important;
}
.chip-group {
  border-color: var(--border-strong) !important;
  background: var(--bg) !important;
}

/* Segmented-Group (Situations-Auswahl) */
.seg-group {
  border-color: var(--border-strong) !important;
  background: var(--bg) !important;
}
.seg-group .seg.active {
  background: #fff !important;
  color: var(--brand-navy) !important;
  border: 1px solid rgba(0,204,204,.35);
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   Bausteine (bs-group, bs-item, bs-chip)
   ========================================================================= */
.bs-group {
  border-color: var(--border) !important;
}
.bs-group-header {
  background: var(--bg) !important;
}
.bs-group-header:hover {
  background: #eef1f6 !important;
}
.bs-group-header .bs-group-sel {
  background: rgba(0,204,204,.15) !important;
  color: #007a7a !important;
}
.bs-item.active {
  background: rgba(0,204,204,.08) !important;
  border-color: rgba(0,204,204,.28) !important;
}
.bs-item input {
  accent-color: var(--brand-cyan) !important;
}
.bs-chip {
  background: var(--brand-navy) !important;
  color: #fff !important;
}
.bs-eingaben {
  background: rgba(0,204,204,.05) !important;
  border-color: rgba(0,204,204,.2) !important;
}

/* =========================================================================
   Accordion
   ========================================================================= */
.accordion-toggle {
  color: var(--label);
}
.accordion-toggle:hover {
  color: var(--brand-navy);
  background: rgba(0,204,204,.06) !important;
}
.accordion-toggle.open {
  color: var(--brand-navy);
}

/* =========================================================================
   Autocomplete-Liste
   ========================================================================= */
.autocomplete-item:hover, .autocomplete-item.active {
  background: rgba(0,204,204,.08) !important;
}
.autocomplete-item.new {
  color: var(--brand-navy) !important;
  font-weight: 600;
}

/* =========================================================================
   Segmented Tabs (Verwaltung — Firmen/Vorlagen/Berufe/Jobs)
   Neue Klasse .kalkuel-tabs neben bestehender .tabs (falls vorhanden)
   ========================================================================= */
.kalkuel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kalkuel-tabs::-webkit-scrollbar { display: none; }

.kalkuel-tabs a,
.kalkuel-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: var(--label);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.kalkuel-tabs a:hover,
.kalkuel-tabs button:hover {
  color: var(--brand-navy);
}
.kalkuel-tabs a.active,
.kalkuel-tabs button.active {
  color: var(--brand-navy);
  font-weight: 600;
  border-bottom-color: var(--brand-cyan);
}
.kalkuel-tabs svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Falls die alten Verwaltung-HTMLs eine .tab-Klasse haben — auch dort Cyan */
.tab.active, .tabs .tab.active, [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--brand-cyan) !important;
  color: var(--brand-navy) !important;
}

/* Alte Verwaltung-Tab-Nav (Vorlagen/Berufsbezeichnungen/Job-Mapping) mit Cyan */
.tab-nav {
  background: #fff !important;
  border-bottom-color: var(--border) !important;
  padding: 0 24px !important;
}
.tab-nav a {
  color: var(--label) !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  transition: color var(--transition), border-color var(--transition);
}
.tab-nav a:hover {
  color: var(--brand-navy) !important;
}
.tab-nav a.active {
  color: var(--brand-navy) !important;
  border-bottom-color: var(--brand-cyan) !important;
}

/* bulk_lohn.html Tabs (Excel/CSV vs. PDF) */
.tabs {
  gap: 4px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.tabs .tab {
  color: var(--label) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 16px !important;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.tabs .tab:hover {
  color: var(--brand-navy) !important;
  background: rgba(0,204,204,.06) !important;
}
.tabs .tab.active {
  color: var(--brand-navy) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--brand-cyan) !important;
  font-weight: 600 !important;
}

/* =========================================================================
   Toasts
   ========================================================================= */
.toast.success { background: var(--success) !important; }
.toast.error { background: var(--error) !important; }
.toast.info { background: var(--brand-navy) !important; }

/* =========================================================================
   Header-Dropdown (Hamburger-Menu)
   ========================================================================= */
.header-dropdown {
  border-color: var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* =========================================================================
   Modal
   ========================================================================= */
.modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.2) !important;
}
.modal h3 {
  color: var(--brand-navy);
}

/* =========================================================================
   Nettolohn-Ergebnis
   ========================================================================= */
.nlo-row.green .value {
  color: var(--success) !important;
}
.nlo-section-title {
  color: var(--label);
}
.nlo-divider {
  background: var(--border);
}

/* =========================================================================
   Spinner (bleibt weiß im dunklen Button-Kontext, aber neu im hellen Header)
   ========================================================================= */
.spinner {
  border-color: rgba(37,46,86,.2);
  border-top-color: var(--brand-navy);
}
.btn-primary .spinner {
  border-color: rgba(255,255,255,.3);
  border-top-color: #fff;
}

/* =========================================================================
   Vorschau-Seite — spezielle Header-Buttons mit Icon
   ========================================================================= */
.kalkuel-preview-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.kalkuel-preview-actions .btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  font-size: 13.5px;
}
.kalkuel-preview-actions svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* =========================================================================
   Container-Anpassungen
   ========================================================================= */
.container {
  max-width: 960px !important;
}

/* =========================================================================
   Obere Auswahl-Zeilen (Firma/Standort + Vorlage/Standard-Button):
   - mittig zentriert (max-width < container width, margin auto)
   - Standort-Cell nutzt visibility:hidden (JS-gesteuert) statt display:none
     → Grid-Slot bleibt reserviert, kein Layout-Sprung beim Firma-Wechsel
   ========================================================================= */
#row-firma,
#row-vorlage {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   Bulk-Lohn — Upload-Karte
   ========================================================================= */
.kalkuel-drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  color: var(--label);
  background: var(--bg);
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}
.kalkuel-drop-zone:hover,
.kalkuel-drop-zone.dragover {
  border-color: var(--brand-cyan);
  background: rgba(0,204,204,.05);
  color: var(--brand-navy);
}

/* =========================================================================
   Tablet-Breakpoint (≤768px)
   ========================================================================= */
@media (max-width: 768px) {
  .kalkuel-header {
    flex-wrap: wrap;
    padding: 10px 16px !important;
    gap: 10px;
  }
  .kalkuel-header__title-sub {
    display: none;
  }
  .kalkuel-nav {
    /* Mobile: Nav in eigener Row, absolute-Positionierung aus Desktop zurücksetzen */
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    margin: 0;
    padding: 4px 0;
    border-top: 1px solid var(--border);
    justify-content: flex-start;
  }
  .kalkuel-header__user-name {
    max-width: 100px;
    font-size: 12px;
  }
  .container {
    padding: 16px 12px 24px !important;
  }
  .grid-2, .field-row {
    grid-template-columns: 1fr !important;
  }
  .card {
    padding: 16px !important;
  }
  .footer {
    flex-direction: column-reverse;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .footer .btn {
    width: 100%;
    justify-content: center;
  }
  .modal {
    width: 92vw !important;
    padding: 20px !important;
  }
  .kalkuel-tabs {
    margin-bottom: 14px;
  }
  .kalkuel-tabs a,
  .kalkuel-tabs button {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* =========================================================================
   Sehr kleine Screens (≤640px): Icons in Nav und Mode-Toggle-Label weg,
   Text bleibt (barrierefrei) — spart Platz auf dem Handy.
   ========================================================================= */
@media (max-width: 640px) {
  #mode-toggle-label { display: none; }
  .kalkuel-nav a svg { display: none; }
  .kalkuel-nav a { padding: 8px 10px; font-size: 12.5px; }
  .kalkuel-header__user-name {
    max-width: 80px;
    font-size: 11.5px;
  }
}

/* =========================================================================
   Reduzierte Motion respektieren
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}