:root{
  --ink: #20241F;
  --ink-2: #262B22;
  --surface: #2B3129;
  --paper: #F3EEE1;
  --paper-dim: #C9C4B4;
  --muted: #ADB8AA;
  --brass: #C9A15A;
  --brass-dim: #8F7644;
  --green: #6FAE84;
  --red: #C1502E;
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 6px;
}
*{ box-sizing: border-box; }
body{
  margin:0; min-height:100vh;
  background: var(--ink);
  background-image: radial-gradient(circle at 50% 0%, var(--ink-2), var(--ink) 70%);
  color: var(--paper);
  font-family: var(--font-body);
  display:flex; justify-content:center; align-items:flex-start;
  padding: 32px 16px 64px;
}
#app{ width:100%; max-width: 480px; }

.eyebrow{ font-family: var(--font-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; color: var(--brass); text-align:center; margin:0 0 6px; }
.brand-logo{ display:block; max-height:44px; max-width:100%; margin:0 auto 6px; }
h1.title{ font-family: var(--font-display); font-weight:700; font-size:32px; text-align:center; margin:0 0 24px; }

.card{ background: var(--surface); border-radius: var(--radius); border:1px solid #3c443a; position:relative; padding:28px 24px 24px; margin-bottom:16px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.punch-holes{ position:absolute; top:0; left:0; right:0; height:14px; background-image: radial-gradient(circle, var(--ink) 3px, transparent 3.5px); background-size:22px 14px; background-position:11px 0; background-repeat:repeat-x; border-bottom:1px dashed #4a5245; }
.card-inner{ margin-top:10px; }

.clock-display{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size:42px; letter-spacing:2px; text-align:center; margin:4px 0 20px; }
.clock-display .secs{ color: var(--muted); font-size:24px; }

label{ display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--muted); margin:14px 0 6px; }
select, input{ width:100%; background: var(--ink-2); border:1px solid #4a5245; border-radius:4px; color: var(--paper); font-family: var(--font-body); font-size:16px; padding:11px 12px; }
select:focus, input:focus{ outline:2px solid var(--green); outline-offset:1px; border-color: var(--green); }
/* Das normale Input-Padding drückt bei input[type=color] das native Farb-Swatch
   fast auf null zusammen - eigenes, kleineres Padding + feste Höhe, damit die
   aktuell gewählte Farbe tatsächlich sichtbar ist. */
input[type="color"]{ padding:4px; height:44px; cursor:pointer; }

.btn{ display:block; width:100%; border:none; border-radius:4px; font-family: var(--font-body); font-weight:600; font-size:16px; padding:14px 16px; cursor:pointer; margin-top:18px; transition: transform .08s ease, filter .15s ease; }
.btn:active{ transform: scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-primary{ background: var(--brass); color: var(--ink); }
.btn-primary:hover{ filter: brightness(1.08); }
.btn-stop{ background: var(--red); color: var(--paper); }
.btn-stop:hover{ filter: brightness(1.1); }
.btn-ghost{ background:transparent; color: var(--paper); border:1px solid #4a5245; }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass); }
.btn-danger-ghost{ background:transparent; color: var(--red); border:1px solid var(--red); }
.btn-small{ width:auto; display:inline-block; padding:8px 12px; font-size:13px; margin-top:0; margin-left:6px; }
.btn-icon{ padding:6px 9px; font-size:15px; line-height:1; }

.row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.link{ background:none; border:none; color: var(--muted); font-family: var(--font-body); font-size:13px; text-decoration:underline; cursor:pointer; padding:0; margin-top:18px; display:block; text-align:center; width:100%; }
.link:hover{ color: var(--brass); }

.name-tag{ font-family: var(--font-display); font-weight:700; font-size:22px; }
.status-pill{ font-family: var(--font-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid; }
.status-on{ color: var(--green); border-color: var(--green); }
.status-off{ color: var(--muted); border-color:#4a5245; }
.status-admin{ color: var(--brass); border-color: var(--brass); }

.elapsed{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align:center; font-size:30px; color: var(--green); margin:16px 0 4px; }
.elapsed-label{ text-align:center; color: var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }

.stub{ font-family: var(--font-mono); background: var(--paper); color: var(--ink); border-radius:3px; padding:14px 16px; margin-top:18px; text-align:center; font-size:14px; letter-spacing:.5px; border:1px dashed var(--brass-dim); transform: rotate(-1.2deg); animation: stampIn .35s cubic-bezier(.2,1.4,.4,1) both; }
.stub b{ display:block; font-size:18px; margin-top:4px; color: var(--red); }
@keyframes stampIn{ from{ opacity:0; transform: rotate(-1.2deg) scale(.85);} to{ opacity:1; transform: rotate(-1.2deg) scale(1);} }

.section-title{ font-family: var(--font-display); font-weight:600; font-size:18px; margin:26px 0 4px; }
.totals{ display:flex; gap:10px; margin:10px 0 16px; }
.total-box{ flex:1; background: var(--ink-2); border:1px solid #3c443a; border-radius:4px; padding:10px 12px; text-align:center; }
.total-box .n{ font-family: var(--font-mono); font-size:20px; color: var(--brass); }
.total-box .l{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

table{ width:100%; border-collapse:collapse; font-family: var(--font-mono); font-size:13px; }
th{ text-align:left; color: var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:6px 4px; border-bottom:1px dashed #4a5245; }
td{ padding:8px 4px; border-bottom:1px dashed #3c443a; }
.editing-row td{ background: var(--ink-2); }
/* Verhindert Umbruch in engen Spalten (z. B. "Bearbeiten"/"Löschen" auf schmalen
   Screens) - die Tabelle scrollt dann lieber horizontal statt die Zeilen zu stauchen. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll td, .table-scroll th{ white-space:nowrap; }
.table-scroll td:last-child{ text-align:right; }
.empty-state{ color: var(--muted); font-size:13px; text-align:center; padding:18px 0; }

.error-msg{ color: var(--red); font-size:13px; margin-top:10px; text-align:center; }
.ok-msg{ color: var(--green); font-size:13px; margin-top:10px; text-align:center; }
.hint{ color: var(--muted); font-size:12px; text-align:center; margin-top:4px; }

.emp-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed #3c443a; gap:8px; flex-wrap:wrap; }
.emp-row:last-child{ border-bottom:none; }
.emp-row.warn-long-shift{ border-left:3px solid var(--red); padding-left:8px; }
.elapsed-live{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.elapsed-live.over-limit{ color: var(--red); font-weight:600; }
.emp-meta{ font-size:12px; color: var(--muted); }
.emp-actions{ display:flex; align-items:center; }
.tabs{ display:flex; gap:8px; margin-bottom:16px; }
.tab{ flex:1; text-align:center; padding:8px; border-radius:4px; border:1px solid #4a5245; background:transparent; color: var(--muted); font-family: var(--font-body); font-size:13px; cursor:pointer; }
.tab.active{ border-color: var(--brass); color: var(--brass); }

@media (prefers-reduced-motion: reduce){ .stub{ animation:none; } .btn{ transition:none; } }
@media (max-width: 420px){ .clock-display{ font-size:34px; } h1.title{ font-size:26px; } }