/* Stempel-App der Zeiterfassung – mobil zuerst, große Touch-Flächen */
:root { --co-navy: #10233d; --co-blau: #1b6ec2; --co-gelb: #ffc107; --co-gruen: #198754; --co-rot: #dc3545; }

html, body { height: 100%; }
body.co-stempeln {
  margin: 0;
  background: #eef2f7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
.co-app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: #eef2f7; }

.co-kopf {
  background: var(--co-navy); color: #fff;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 18px;
  border-bottom-left-radius: 22px; border-bottom-right-radius: 22px;
}
.co-kopf .co-firma { font-size: .85rem; opacity: .75; }
.co-kopf .co-uhr { font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.co-kopf .co-datum { font-size: .95rem; opacity: .85; }
.co-kopf .co-name { font-size: 1.15rem; font-weight: 600; }
.co-kopf .btn-link { color: #fff; text-decoration: none; opacity: .85; }

.co-inhalt { flex: 1; padding: 16px 16px calc(env(safe-area-inset-bottom) + 84px); }

.co-karte { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 2px 10px rgba(16,35,61,.06); margin-bottom: 14px; }

/* PIN-Feld */
.co-pin-anzeige { display: flex; justify-content: center; gap: 14px; margin: 8px 0 18px; }
.co-pin-punkt { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--co-navy); }
.co-pin-punkt.voll { background: var(--co-navy); }
.co-tastatur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.co-taste {
  height: 68px; border: 0; border-radius: 16px; background: #fff; font-size: 1.7rem; font-weight: 600; color: var(--co-navy);
  box-shadow: 0 2px 6px rgba(16,35,61,.08); touch-action: manipulation;
}
.co-taste:active { background: #dbe4f0; }
.co-taste.co-taste-leer { background: transparent; box-shadow: none; }

/* Namensliste */
.co-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.co-name-knopf { border: 0; border-radius: 14px; background: #fff; padding: 16px 12px; text-align: left; box-shadow: 0 2px 6px rgba(16,35,61,.08); }
.co-name-knopf .small { display: block; }

/* Stempelknöpfe */
.co-aktionen { display: grid; gap: 12px; }
.co-aktion {
  border: 0; border-radius: 18px; padding: 22px 18px; font-size: 1.35rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 14px; justify-content: center; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(16,35,61,.15);
}
.co-aktion i { font-size: 1.8rem; }
.co-aktion:disabled { opacity: .6; }
.co-aktion-Kommen { background: var(--co-gruen); }
.co-aktion-Gehen { background: var(--co-rot); }
.co-aktion-PauseStart { background: #fd7e14; }
.co-aktion-PauseEnde { background: var(--co-blau); }

.co-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.co-status .punkt { width: 10px; height: 10px; border-radius: 50%; background: #adb5bd; }
.co-status.anwesend .punkt { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.co-status.pause .punkt { background: #ffb02e; }

.co-bestaetigung { text-align: center; padding: 28px 12px; }
.co-bestaetigung i { font-size: 4rem; color: var(--co-gruen); }

.co-liste { list-style: none; margin: 0; padding: 0; }
.co-liste li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef0f3; gap: 8px; }
.co-liste li:last-child { border-bottom: 0; }

.co-kennzahl { font-size: 1.6rem; font-weight: 700; color: var(--co-navy); line-height: 1.1; }

/* Untere Navigation */
.co-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #dee2e6;
  display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); z-index: 10;
}
.co-tabs-innen { display: flex; width: 100%; max-width: 560px; }
.co-tab { flex: 1; border: 0; background: none; padding: 9px 4px 8px; font-size: .75rem; color: #6c757d; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.co-tab i { font-size: 1.35rem; }
.co-tab.aktiv { color: var(--co-blau); font-weight: 600; }

.co-tag-zeile { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: .95rem; }
.co-tag-zeile.wochenende { color: #6c757d; }

#co-install { display: none !important; }
.co-kann-installieren #co-install { display: inline-flex !important; }

#blazor-error-ui { display: none; }

/* Pausen-Knöpfe (rückwirkend) */
.co-pausen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.co-pause-knopf {
  border: 0; border-radius: 12px; background: #fff; color: #b35900; font-weight: 600; padding: 12px 4px; font-size: .9rem;
  box-shadow: 0 2px 6px rgba(16,35,61,.08); touch-action: manipulation;
}
.co-pause-knopf:disabled { opacity: .45; color: #6c757d; }
.co-pause-knopf:active:not(:disabled) { background: #ffe8cc; }

.co-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ced4da; margin-right: 7px; vertical-align: middle; }
.co-punkt.anwesend { background: var(--co-gruen); }
.co-punkt.pause { background: #fd7e14; }

/* ---------------- Tablet-Terminal (Querformat, angelehnt an das Access-Formular) ---------------- */
.co-app.co-tablet { max-width: 1180px; }
.co-tablet-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; padding-right: 56px; }
.co-tablet-logo { max-height: 56px; max-width: 160px; background: #fff; border-radius: 10px; padding: 4px 8px; }
.co-tablet-titel { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.co-tablet .co-kopf .co-uhr { font-size: 3rem; }
.co-vollbild { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; opacity: .7; font-size: 1.3rem; }
.co-tablet .co-inhalt { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
.co-tablet-raster { display: grid; gap: 16px; }
.co-tablet-frage { font-size: 1.2rem; }
.co-tablet .co-namen { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.co-tablet .co-name-knopf { padding: 22px 16px; font-size: 1.15rem; }
.co-tablet .co-taste { height: 80px; font-size: 2rem; }
.co-tablet-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--co-navy); color: #fff; border-radius: 18px; padding: 16px 20px; margin-bottom: 14px; }
.co-tablet-person .co-name { font-size: 1.5rem; font-weight: 700; }
.co-aktionen-reihe { grid-template-columns: repeat(2, 1fr); }
.co-aktionen-reihe .co-aktion { flex-direction: column; gap: 6px; padding: 26px 10px; font-size: 1.3rem; }
.co-aktionen-reihe .co-aktion i { font-size: 2.4rem; }
.co-aktionen-reihe .co-aktion:disabled { opacity: .28; filter: grayscale(.6); box-shadow: none; }
.co-tablet .co-pause-knopf { padding: 16px 6px; font-size: 1rem; }
.co-schliessen { min-width: 180px; }
.co-tablet .co-tabs-innen { max-width: 1180px; }
.co-tablet .co-bestaetigung { padding: 20px 12px; }

@media (min-width: 820px) {
  .co-tablet-raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .co-tablet-raster > :only-child { grid-column: 1 / -1; }
  .co-aktionen-reihe { grid-template-columns: repeat(4, 1fr); }
  .co-aktionen-reihe .co-aktion { padding: 34px 10px; }
  .co-tablet .co-tastatur { max-width: 420px; margin: 0 auto; }
}