* {
  box-sizing: border-box;
}

:root {
  --primary: #2d7d6c;
  --primary-dark: #205a4d;
  --accent: #f5e000;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f3f4f6;
  --card-bg: #ffffff;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Logo links, Profil-Button (falls vorhanden) rechts — eigene Zeile. Die Überschrift (.company)
   steht seit 19.07.2026 als eigene Zeile darunter (vorher versucht, sie in derselben Zeile
   zentriert neben Logo/Profil-Button unterzubringen — auf schmalen Bildschirmen sah das gedrängt
   aus, siehe Kurze Historie in der Projekt-Memory). So zentriert sie sich ganz normal über die
   volle Breite und braucht keine Sonderbehandlung (kein position:absolute, keine feste
   Seitenreservierung) mehr, um Logo/Profil-Button nicht zu überlappen. */
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
}

.topbar .company {
  margin: 8px 0 0;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
}

.demo-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #4a3f00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.profile-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 20;
}

.profile-menu-name {
  margin: 4px 8px 8px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.profile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 8px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-menu-item:hover {
  background: var(--bg);
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

/* Auf größeren Bildschirmen (Notebook/Desktop) mehr Breite nutzen, statt bei
   640px zu deckeln — vor allem die Tabellen (Kalender/Historie/Projekte)
   profitieren davon. Login-/Passwort-Formulare bleiben bewusst schmaler
   (siehe .auth-card weiter unten), damit sie nicht auf voller Breite wirken. */
@media (min-width: 700px) {
  .container {
    max-width: 820px;
  }
}

@media (min-width: 1000px) {
  .container {
    max-width: 1100px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }
}

#role-choice,
#login-card,
#password-gate,
#mfa-gate {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#mfa-qr-wrap {
  text-align: center;
  margin: 12px 0;
}

#mfa-qr-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

#mfa-secret-text {
  word-break: break-all;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hidden {
  display: none !important;
}

label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px;
  font-size: 0.95rem;
}

input[type='text'],
input[type='date'],
input[type='number'],
input[type='password'],
select {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* "Auge"-Button zum Anzeigen/Verbergen des Passworts (seit 19.07.2026), in allen Passwort-Feldern
   der App (Login, Passwort-Gate auf index.html/admin.html). Input bekommt zusätzlichen Platz rechts
   für den Button; der Button selbst togglet input.type zwischen "password"/"text" per JS (siehe
   app.js/admin.js) und blendet zwischen den beiden SVG-Icons (.icon-eye/.icon-eye-off) um.*/
.password-field-wrap {
  position: relative;
}

.password-field-wrap input {
  padding-right: 44px !important;
}

.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle-btn .icon-eye-off {
  display: none;
}

.password-toggle-btn.active .icon-eye {
  display: none;
}

.password-toggle-btn.active .icon-eye-off {
  display: block;
}

input:focus,
select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Datumsfeld bekommt einen leicht grauen Hintergrund, damit es sich optisch von den (weißen)
   Eingabefeldern darunter abhebt — seit 18.07.2026 in Zeiterfassung, seit 19.07.2026 auch in
   Prüfung (#day-date-display-btn, vorher bewusst weiß, jetzt an Zeiterfassung angeglichen). */
#tab-zeiterfassung .date-display-btn,
#tab-day .date-display-btn {
  background: var(--bg);
}

/* Label+Eingabefeld als zwei direkt aneinandergrenzende Kästen in einer Zeile (Zeiterfassung-Tab,
   seit 18.07.2026) statt Label oben/Input darunter — .field-label-box überschreibt bewusst nur hier
   die generische display:block-Regel für <label>, alle anderen Labels (Mitarbeiterübersicht, Login
   usw.) bleiben unverändert gestapelt. */
.field-row {
  display: flex;
  align-items: stretch;
  margin: 12px 0 6px;
}

/* Feste, einheitliche Breite für alle vier Label-Kästen (Projektnr./Projektname/Tätigkeit/Stunden,
   seit 19.07.2026) statt variabler Breite je Inhalt — an "Tätigkeit" (breitester Inhalt durch das
   Beispiel "z.B. Schrank eingebaut") ausgerichtet, damit alle vier Zeilen bündig untereinanderstehen. */
.field-label-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  width: 150px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: var(--muted);
}

.field-label-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.field-label-example {
  font-weight: 400;
  font-size: 0.78rem;
  text-align: left;
}

.field-input-box {
  flex: 1;
  min-width: 0;
  border-radius: 0 10px 10px 0 !important;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary:active {
  background: var(--primary-dark);
}

.btn-primary:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-large {
  padding: 16px;
  font-size: 1.15rem;
}

.btn-outline {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  background: var(--card-bg);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-outline:active {
  background: var(--bg);
}

/* nowrap + kleinere Buttons (seit 19.07.2026), damit alle vier Abwesenheits-Buttons auch auf
   schmalen Handy-Breiten in einer Zeile nebeneinander passen statt umzubrechen. */
.absence-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 10px;
}

.absence-buttons .btn-secondary {
  flex: 1 1 0;
  padding: 8px 4px;
  font-size: 0.78rem;
}

.btn-secondary {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-krank {
  color: #854d0e;
  border-color: #fde68a;
  background: #fef9c3;
}

.btn-schule {
  color: #c2410c;
  border-color: #fed7aa;
  background: #ffedd5;
}

.btn-lehrgang {
  color: #6d28d9;
  border-color: #ddd6fe;
  background: #ede9fe;
}

.btn-urlaub {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #dbeafe;
}

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}

.greeting {
  margin: 0 0 4px;
}

.error {
  color: var(--danger);
  font-weight: 600;
  margin-top: 10px;
}

.entries-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.entry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.compact-list .entry-row {
  padding: 7px 0;
}

.compact-list .entry-project {
  font-size: 0.9rem;
}

.compact-list .entry-hours {
  font-size: 0.8rem;
}

.bullet-row .entry-project::before {
  content: '• ';
  color: var(--muted);
}

.entry-row:last-child {
  border-bottom: none;
}

.entry-info {
  min-width: 0;
}

.entry-project {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.entry-hours {
  color: var(--muted);
  font-size: 0.9rem;
}

.delete-btn {
  flex-shrink: 0;
  background: var(--danger-bg);
  color: var(--danger);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.empty-hint {
  color: var(--muted);
  padding: 12px 0;
}

.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-size: 1.05rem;
}

.warning-banner {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 600;
}

.holiday-hint {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

th,
td {
  text-align: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

th:first-child,
td:first-child {
  text-align: left;
  font-weight: 600;
}

thead th {
  color: var(--muted);
  font-weight: 600;
}

td.zero-hours {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  border-radius: 6px;
}

.day-leer {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
}

.day-krank {
  background: #fef9c3;
  color: #854d0e;
  font-weight: 700;
}

.day-urlaub {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}

.day-schule {
  background: #ffedd5;
  color: #c2410c;
  font-weight: 700;
}

.day-lehrgang {
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 700;
}

.day-erfasst {
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
}

.day-frei {
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 600;
}

.day-feiertag {
  background: #fde68a;
  color: #92400e;
  font-weight: 700;
}

/* Markiert einen Feiertag zusätzlich zur normalen Status-Farbe (z.B. "erfasst"), damit der
   Feiertag auch bei einer Buchung an dem Tag erkennbar bleibt. */
.is-holiday {
  box-shadow: inset 0 0 0 2px #f59e0b;
}

.holiday-col {
  background: #fef3c7;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 0;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.swatch-leer {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
}

.swatch-krank {
  background: #fef9c3;
  border: 1px solid #854d0e;
}

.swatch-urlaub {
  background: #dbeafe;
  border: 1px solid #1d4ed8;
}

.swatch-schule {
  background: #ffedd5;
  border: 1px solid #c2410c;
}

.swatch-lehrgang {
  background: #ede9fe;
  border: 1px solid #6d28d9;
}

.swatch-erfasst {
  background: #dcfce7;
  border: 1px solid #15803d;
}

.swatch-frei {
  background: #f3f4f6;
  border: 1px solid #9ca3af;
}

.swatch-feiertag {
  background: #fde68a;
  border: 1px solid #92400e;
}

.subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.subnav-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.subnav-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.period-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.period-nav input {
  flex: 1;
}

.date-display-btn {
  flex: 1;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

/* Natives date-input bleibt für showPicker()/Tastatureingabe funktional, ist aber unsichtbar —
   sichtbar ist stattdessen der .date-display-btn mit Wochentag im Text. */
.visually-hidden-date {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 1rem;
  cursor: pointer;
}

.period-label {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 600;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: var(--bg);
}

.clickable-cell {
  cursor: pointer;
}

.clickable-cell:hover {
  background: var(--bg);
}

.detail-row td {
  background: var(--bg);
  padding: 0;
}

.detail-wrap {
  padding: 8px 12px 16px;
}

.add-entry-heading {
  margin: 16px 0 8px;
  font-size: 0.95rem;
}

.add-entry-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-entry-form input {
  padding: 10px;
  font-size: 0.95rem;
}

.add-entry-form .btn-primary {
  margin-top: 0;
}

.reviewed-mark {
  color: var(--primary);
}

.kw-label {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--muted);
}

/* Mitarbeiter-Spalte bleibt beim horizontalen Scrollen von Kalender/Historie sichtbar. */
.week-table-wrap th:first-child,
.week-table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}

.week-table-wrap .reviewed-row td:first-child {
  background: var(--bg);
}

#day-review-btn.reviewed {
  background: #dcfce7;
  color: #15803d;
}

.reviewed-row td {
  background: var(--bg);
  font-weight: 700;
}

.reviewed-yes {
  color: #15803d;
}

.reviewed-no {
  color: var(--danger);
}

.day-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

.day-position-chip {
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}


/* Tagesansicht: Name/Summe-Zeile und die Positionen-Zeile darunter gehören optisch zusammen —
   die Trennlinie erscheint erst nach der Positionen-Zeile, nicht schon zwischen den beiden. */
#day-table .day-name-row td {
  border-bottom: none;
}

.day-positions-row td {
  padding-top: 0;
}

.action-btn {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.entry-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
}

.edit-form input {
  padding: 10px;
  font-size: 0.95rem;
}

.edit-form .btn-primary {
  margin-top: 0;
}

.qualification-select {
  width: auto !important;
  padding: 8px !important;
  font-size: 0.8rem !important;
}

/* Name steht seit 21.07.2026 als reiner Text da (kein umrahmender "weißer Kasten" mehr) — bleibt
   technisch ein <input> (Umbenennen per Klick weiterhin möglich), verliert aber Rahmen/Hintergrund
   des generischen input[type='text']-Stils, damit es optisch wie normaler Fließtext wirkt. */
.employee-name-input {
  width: auto !important;
  padding: 2px 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  min-width: 160px;
}

.employee-name-input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Qualifikations-Dropdown und die drei Rollen-Häkchen (Mitarbeiter/Vorarbeiter/Chef) stehen seit
   21.07.2026 gemeinsam in einer Zeile direkt unter dem Namen, statt getrennt in info/actions. */
.employee-qual-role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0;
}

.project-number-input {
  padding: 6px !important;
  font-size: 0.8rem !important;
  text-align: center;
  margin: 0 auto;
}

/* Vorgangsnr./Projektnr. (12.08.2026, zweite Folgerunde) — erst auf frei wachsend gleich
   Vorgangsnr. gestellt (siehe project-number-input-Historie), dann auf Wunsch wieder etwas
   kompakter: fester Fixwert für beide (statt frei wachsend bis zur längsten OSD-Nummer),
   damit mehr Platz für die Kom.-Name-Spalte bleibt. Auf vorgangsnrTd und numberInput gemeinsam
   gesetzt (ersetzt dort project-text-input-narrow), Intern Anna bleibt unverändert auf dieser
   schmaleren Klasse. */
.project-number-field {
  width: 80px !important;
  max-width: 80px;
}

.project-name-input {
  padding: 6px 8px !important;
  font-size: 0.85rem !important;
  min-width: 240px;
  text-align: left;
}

.project-text-input {
  padding: 6px 8px !important;
  font-size: 0.85rem !important;
  text-align: left;
}

/* Intern Anna / Vorgangsnr. (seit 19.07.2026 nur noch halb so breit wie vorher, meist kurze
   Werte) vs. Kom. Ort/Nr. / Beschreibung (etwas breiter als vorher, oft längerer Freitext). */
.project-text-input-narrow {
  min-width: 45px;
}

.project-text-input-wide {
  min-width: 170px;
}

.filter-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

/* Die drei Berechtigungs-Häkchen (Mitarbeiter/Vorarbeiter/Prüfer) — sowohl im Anlegen-Formular
   als auch pro Zeile in der Mitarbeiterübersicht. */
.role-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0;
}

.role-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.role-checkbox input {
  margin: 0;
}

.filter-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Farben je Bauleiter/Projektnummern-Block (1-6) — färben nur noch das Projektnr.-Feld in der
   Admin-Projekte-/Buchhaltungstabelle ein (Legende auf Zeiterfassung und die Personen-Filter-
   Buttons in Projekte/Buchhaltung wurden am 21.07.2026 entfernt). Bewusst nur Hintergrund/Text/
   Fettschrift (kein Padding/Radius), damit die Klasse ohne Layout-Konflikte auf Inputs wiederverwendbar ist. */
.color-red {
  background: rgba(220, 38, 38, 0.18);
  color: #991b1b;
  font-weight: 700;
}

.color-orange {
  background: rgba(234, 88, 12, 0.2);
  color: #c2410c;
  font-weight: 700;
}

.color-blue {
  background: rgba(29, 78, 216, 0.18);
  color: #1d4ed8;
  font-weight: 700;
}

.color-green {
  background: rgba(21, 128, 61, 0.18);
  color: #15803d;
  font-weight: 700;
}

.color-grey {
  background: rgba(107, 114, 128, 0.2);
  color: #374151;
  font-weight: 700;
}

.color-yellow {
  background: rgba(202, 138, 4, 0.22);
  color: #854d0e;
  font-weight: 700;
}