/* =====================================================================
   SuchtFrei GmbH · Zeiterfassung
   Gestaltung: Kontobuch statt App-Bunt. Zahlen stehen exakt untereinander,
   jeder Tag ist eine Zeile, jeder Zustand ist auf einen Blick lesbar.
   Bedient wird das hier meist nachts, auf dem Handy, von müden Leuten.
   ===================================================================== */

:root {
  --gruen:        #2E7D32;
  --gruen-dunkel: #1B5E20;
  --gruen-hell:   #E8F1E9;
  --papier:       #FBFAF7;
  --karte:        #FFFFFF;
  --anthrazit:    #23262B;
  --grau:         #666666;
  --grau-hell:    #E3E1DC;
  --bernstein:    #B26A00;
  --bernstein-bg: #FDF3E3;
  --rot:          #B3261E;

  --radius: 10px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--schrift);
  background: var(--papier);
  color: var(--anthrazit);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* Zahlen laufen tabellarisch – das ist hier keine Kosmetik, sondern der Punkt. */
.zahl, .streifen, input[type=time], input[type=number], td, .dauer {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.screen { max-width: 720px; margin: 0 auto; padding: 20px 16px 56px; }
[hidden] { display: none !important; }

/* ---------- Typo ---------- */
.marke {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gruen); font-weight: 700;
}
h1 { font-size: 26px; font-weight: 700; margin: 4px 0 6px; }
h2 { font-size: 19px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.sub { color: var(--grau); font-size: 14px; margin-bottom: 22px; }

label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--grau); margin: 14px 0 5px;
}

input, select {
  width: 100%; padding: 12px 13px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--grau-hell); border-radius: var(--radius);
  background: var(--karte); color: var(--anthrazit);
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}

/* ---------- Buttons ---------- */
button { font-family: inherit; font-size: 15px; cursor: pointer; border: 0; border-radius: var(--radius); }

.primaer {
  width: 100%; padding: 14px; margin-top: 20px;
  background: var(--gruen); color: #fff; font-weight: 600;
}
.primaer:hover { background: var(--gruen-dunkel); }

.sekundaer {
  width: 100%; padding: 14px; margin-top: 10px;
  background: var(--karte); color: var(--gruen);
  border: 1.5px solid var(--gruen); font-weight: 600;
}
.sekundaer:hover { background: var(--gruen-hell); }

.gefahr { padding: 12px 16px; background: transparent; color: var(--rot); font-weight: 600; }

.text-btn {
  background: transparent; color: var(--grau);
  padding: 12px 8px; font-weight: 600; width: auto;
}
.text-btn:hover { color: var(--gruen); }

.rund {
  width: 42px; height: 42px; font-size: 22px; line-height: 1;
  background: var(--karte); border: 1px solid var(--grau-hell); color: var(--anthrazit);
}
.rund:hover { border-color: var(--gruen); color: var(--gruen); }

/* ---------- Anmeldung ---------- */
.login-karte {
  background: var(--karte); border: 1px solid var(--grau-hell);
  border-top: 3px solid var(--gruen);
  border-radius: var(--radius); padding: 28px 22px; margin-top: 8vh;
}

/* ---------- Kopf ---------- */
.kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px; border-bottom: 2px solid var(--gruen); margin-bottom: 18px;
}

/* ---------- Monatswahl ---------- */
.monatswahl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.monat-titel { text-align: center; flex: 1; }
.monat-titel span:first-child { font-size: 18px; font-weight: 600; display: block; }

.status {
  display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
}
.status.offen        { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.status.eingereicht  { background: var(--bernstein-bg); color: var(--bernstein); }
.status.freigegeben  { background: #E7E9EC; color: var(--grau); }

/* ---------- Kennzahlen ---------- */
.kennzahlen {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--grau-hell); border: 1px solid var(--grau-hell);
  border-radius: var(--radius); overflow: hidden; margin: 18px 0;
}
.kz { background: var(--karte); padding: 12px 4px; text-align: center; }
.kz .zahl { display: block; font-size: 17px; font-weight: 700; color: var(--gruen-dunkel); }
.kz .label { font-size: 10px; color: var(--grau); letter-spacing: .03em; }

.admin-leiste {
  background: var(--gruen-hell); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px;
}
.admin-leiste label { margin-top: 0; }

/* ---------- Der Monatsstreifen ---------- */
.streifen { list-style: none; border-top: 1px solid var(--grau-hell); }

.tag {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center; gap: 10px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--grau-hell);
  background: var(--karte);
  cursor: pointer;
  width: 100%; text-align: left; border-radius: 0;
}
.tag:hover { background: var(--gruen-hell); }
.tag.wochenende { background: #F4F3F0; }
.tag.heute { box-shadow: inset 3px 0 0 var(--gruen); }

.tag .datum { font-size: 12px; color: var(--grau); font-weight: 600; line-height: 1.25; }
.tag .datum b { display: block; font-size: 16px; color: var(--anthrazit); font-weight: 700; }

.tag .inhalt { min-width: 0; }
.tag .zeiten { font-size: 14px; font-weight: 600; }
.tag .was {
  font-size: 12px; color: var(--grau);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag .leer { font-size: 13px; color: #A9A6A0; }

.tag .summe { font-size: 15px; font-weight: 700; color: var(--gruen-dunkel); }

/* Zustandsmarken – jede sagt genau eine Sache */
.marke-klein {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; margin-right: 5px; vertical-align: 1px;
}
.m-urlaub   { background: #E3EEF7; color: #1B5E8A; }
.m-krank    { background: #F7E7E6; color: var(--rot); }
.m-feiertag { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.m-frei     { background: #EDEBE6; color: var(--grau); }
.m-nach     { background: var(--bernstein-bg); color: var(--bernstein); }
.m-warn     { background: var(--bernstein-bg); color: var(--bernstein); }

/* ---------- Aktionen ---------- */
.aktionen { margin-top: 26px; text-align: center; }
.hinweis-fuss { font-size: 12px; color: var(--grau); margin-top: 18px; text-align: center; }

/* ---------- Dialoge ---------- */
dialog {
  width: min(460px, calc(100vw - 28px));
  border: 0; border-top: 3px solid var(--gruen); border-radius: var(--radius);
  padding: 22px; background: var(--karte); color: var(--anthrazit);
}
dialog::backdrop { background: rgba(35, 38, 43, .5); }

.typwahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.typ {
  padding: 10px 4px; font-size: 13px; font-weight: 600;
  background: var(--karte); border: 1px solid var(--grau-hell); color: var(--grau);
}
.typ.aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }

.zeile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.zeile label { margin-top: 12px; }

.dauer {
  margin-top: 14px; padding: 10px; text-align: center;
  background: var(--gruen-hell); border-radius: var(--radius);
  font-size: 16px; font-weight: 700; color: var(--gruen-dunkel);
}

.hinweise { list-style: none; margin-top: 10px; }
.hinweise li {
  font-size: 12px; color: var(--bernstein); background: var(--bernstein-bg);
  padding: 8px 10px; border-radius: 6px; margin-top: 6px;
}

.dlg-aktionen { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.dlg-aktionen .primaer { margin-top: 0; flex: 1; }
.dlg-aktionen .gefahr { margin-right: auto; }

.fehler {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: #F7E7E6; color: var(--rot); font-size: 13px; font-weight: 600;
}

/* ---------- Übersichtstabelle ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 8px 6px; background: var(--anthrazit); color: #fff;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
td { padding: 9px 6px; border-bottom: 1px solid var(--grau-hell); }
td.num { text-align: right; font-weight: 600; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--anthrazit); color: #fff; padding: 12px 20px;
  border-radius: 24px; font-size: 14px; font-weight: 600; z-index: 99;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* ---------- Klein ---------- */
@media (max-width: 420px) {
  .kennzahlen { grid-template-columns: repeat(3, 1fr); }
  .kz:nth-child(4), .kz:nth-child(5) { border-top: 1px solid var(--grau-hell); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}