/* Zeiterfassung – Praxisdemo GfK Lüdinghausen
   Visuelle Orientierung an der Praxiswebsite (Bordeaux + Sandgold),
   eigenständiges Produkt, keine Klischees. */

:root {
  --brand: #8A2524;
  --brand-dark: #621A19;
  --brand-soft: #F6EDEC;
  --accent: #CEB383;
  --accent-soft: #F7F1E6;
  --bg: #F7F5F2;
  --card: #ffffff;
  --text: #2A2A2A;
  --mute: #6B6B6B;
  --line: #E4DFD8;
  --warn: #BD6200;
  --warn-bg: #FFF4E8;
  --ok: #2F7A45;
  --ok-bg: #EAF5EE;
  --row-present: #F4FAF6;
  --danger: #8A2524;
  --danger-bg: #F6EDEC;
  --info: #5A6B7D;
  --info-bg: #EEF2F5;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(42,42,42,.04), 0 10px 28px rgba(42,42,42,.06);
  --touch: 56px;
  --font: "Helvetica Neue", Helvetica, Calibri, Arial, system-ui, sans-serif;
  --max: 980px;
  --max-wide: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: var(--brand); }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ========== Top bar ========== */
.topbar {
  background: var(--brand);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(98,26,25,.25);
}
.topbar h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.topbar-brand {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 8px;
}
.topbar .sub {
  margin-top: 2px;
  opacity: .88;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(70vw, 420px);
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.header-clock {
  text-align: right;
  line-height: 1.15;
  flex-shrink: 0;
  color: #fff;
  min-width: 4.5rem;
}
.header-clock-time {
  font-size: 1.15rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.header-clock-date {
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 500;
  opacity: .88;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-clock-date-short { display: none; }

@media (max-width: 420px) {
  .header-clock-time { font-size: 1.02rem; }
  .header-clock-date-full { display: none; }
  .header-clock-date-short { display: inline; }
  .topbar-right { gap: 8px; }
  .topbar { padding: 12px 12px; gap: 8px; }
}

@media (min-width: 768px) {
  .header-clock-time { font-size: 1.22rem; }
  .header-clock-date { font-size: .75rem; }
}

.icon-btn {
  background: rgba(255,255,255,.14);
  border: 0;
  color: #fff;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
}
.icon-btn:hover, .icon-btn:focus-visible { background: rgba(255,255,255,.24); outline: none; }

.wrap {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 20px 16px 28px;
  flex: 1;
}
.wrap-wide { width: min(var(--max-wide), 100%); }
/* Alle Verwaltungsseiten teilen sich exakt dieselbe Contentbreite.
   Vorher war sie seitenweise verschieden (Übersicht und Schichtplan
   1440px, übrige Seiten 1120px). Das Sprungverhalten kam daher, dass die
   Navigation im Inhaltscontainer lag: sie ist jetzt im Header, deshalb
   ist eine einzige gemeinsame Breite ausreichend und der Inhalt
   verrutscht beim Seitenwechsel nicht mehr. 1440px ist der bereits
   vorhandene Wert – es wurde kein neuer erfunden. */
.admin-wrap { --max-wide: 1440px; }

/* ========== Cards / layout ========== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.section-title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 650;
}
.muted { color: var(--mute); font-size: .92rem; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ========== Login ========== */
.login-shell {
  display: block;
  /* padding-top ersetzt den Abstand der entfernten Überschrift
     "Wer bist du?" – es ist kein Ersatztext entstanden. */
  padding: 26px 0 8px;
}
.login-hero {
  text-align: center;
  padding: 6px 4px 4px;
}
.login-hero h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.login-hero .product {
  margin: 4px 0 0;
  color: var(--mute);
  font-size: .95rem;
  font-weight: 600;
}
/* Die Überschrift "Wer bist du?" ist entfernt. Der obere Abstand, den
   ihre Margin gesetzt hat, liegt jetzt auf der Auswahlfläche selbst –
   es ist kein Ersatztext entstanden. */
@media (max-width: 767px) {
  .login-shell {
    padding-top: 20px;
  }
  .login-admin {
    margin-top: 20px;
  }
}


/* Three occupation columns side-by-side from tablet up */
.group-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  /* height = content only — no flex stretch */
}
@media (min-width: 768px) {
  .group-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .wrap.login-wrap {
    padding-top: 16px;
    padding-bottom: 16px;
    max-width: min(1100px, 100%);
  }
}
@media (min-width: 1024px) {
  .group-row { gap: 14px; }
}

.group-block {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 10px 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.group-head {
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 2px solid var(--accent-soft);
}
.group-head h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.group-block[data-group="tierarzt"] .group-head { border-bottom-color: #E8D5D4; }
.group-block[data-group="tfa"] .group-head { border-bottom-color: #E8DFC9; }
.group-block[data-group="junior"] .group-head { border-bottom-color: #DDE5EA; }
.group-block[data-group="junior"] .group-head h3 { color: var(--info); }

/* People ALWAYS stacked vertically inside a column */
.person-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.person-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  cursor: pointer;
  background: #FFFCFA;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 10px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.person-card:hover, .person-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138,37,36,.12);
  outline: none;
}
.person-card:active { transform: scale(.99); }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
  font-size: .75rem;
}
.group-block[data-group="tfa"] .avatar {
  background: var(--accent-soft);
  color: #8A6A2E;
}
.group-block[data-group="junior"] .avatar {
  background: var(--info-bg);
  color: var(--info);
}
.person-meta { flex: 1; min-width: 0; }
.person-meta strong {
  display: block;
  font-size: .9rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.person-meta .muted {
  display: block;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C5C0B8;
  flex-shrink: 0;
}
.status-dot.on { background: var(--ok); }
.status-dot.break { background: var(--warn); }
.status-dot.duty { background: #5A6B7D; }

.login-admin {
  margin-top: 24px;
}
.login-admin .divider {
  margin: 0 0 8px;
}
.admin-card {
  border-style: dashed;
  border-color: #C9C2B8;
  background: #FFFCFA;
  margin-bottom: 0;
  min-height: 48px;
  padding: 8px 10px;
}
.admin-card .avatar {
  background: #EFEAE3;
  color: #5C5348;
  width: 34px;
  height: 34px;
  font-size: .75rem;
}
.login-footer {
  text-align: center;
  padding: 14px 0 0;
}
.login-footer .btn {
  min-height: 40px;
  font-size: .85rem;
  padding: 0 14px;
}

/* ========== Chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
  background: var(--brand-soft);
  color: var(--brand);
}
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.mute { background: #EEF0EE; color: var(--mute); }
.chip.blue { background: var(--info-bg); color: var(--info); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 650;
  text-decoration: none;
  color: var(--text);
  background: #EFEAE3;
  transition: background .15s, transform .1s;
}
.btn:focus-visible { outline: 3px solid rgba(138,37,36,.28); outline-offset: 2px; }
.btn:active { transform: scale(.99); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-warn { background: var(--warn); color: #fff; }
.btn-danger { background: var(--brand-dark); color: #fff; }
.btn-block { width: 100%; }
.btn-row { display: grid; gap: 10px; }
@media (min-width: 520px) {
  .btn-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .btn-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ========== Status panel ========== */
.status-panel {
  text-align: center;
  padding: 24px 16px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 55%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.status-panel .big {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 10px 0 4px;
  letter-spacing: .01em;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.stat .label { font-size: .72rem; color: var(--mute); font-weight: 600; letter-spacing: .02em; }
.stat .value { font-weight: 750; font-size: 1.05rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ========== Timeline ========== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 0; }
.timeline time {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .92rem;
}

/* ========== Tables ========== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 520px;
}
table.data th, table.data td {
  text-align: left;
  padding: 13px 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
  font-weight: 700;
  background: #FAF8F5;
  position: sticky;
  top: 0;
}
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover { background: var(--brand-soft); }

/* ========== Bottom nav ========== */
.bottom-nav {
  position: sticky;
  bottom: 0;
  background: rgba(255,252,250,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 15;
}
.bottom-nav button {
  border: 0;
  background: transparent;
  min-height: 56px;
  cursor: pointer;
  color: var(--mute);
  font-size: .72rem;
  font-weight: 650;
  display: grid;
  place-items: center;
  gap: 3px;
  border-radius: 12px;
}
.bottom-nav button.active {
  color: var(--brand);
  background: var(--brand-soft);
}
.bottom-nav .ico { font-size: 1.05rem; line-height: 1; }

/* ========== KPI ========== */
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.kpi .n {
  font-size: 1.55rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.kpi.warn-card {
  border-color: #E8C49A;
  background: var(--warn-bg);
  cursor: pointer;
}
.kpi.warn-card:hover { box-shadow: var(--shadow); }

/* ========== Forms ========== */
label.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 650;
  font-size: .9rem;
}
label.field input, label.field select, label.field textarea {
  min-height: 50px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 400;
}
label.field textarea { min-height: 100px; resize: vertical; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: min(92vw, 420px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-weight: 600;
}
.toast.show { opacity: 1; }

/* Stempelbestätigung nach dem Rückweg zur Auswahl: bewusst nur Information.
   Kein Button, kein Dialog, pointer-events bleibt none – die Mitarbeiterauswahl
   darunter ist sofort weiter bedienbar. */
.toast.toast-stamp {
  bottom: 16px;
  background: var(--ok);
  box-shadow: 0 10px 28px rgba(47, 122, 69, .28);
}

.open-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #FFFCFA;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  cursor: pointer;
  margin-bottom: 10px;
}
.open-item:hover { border-color: var(--warn); background: #fff; }

.profile-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 16px 16px 14px;
}
.profile-card h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.profile-card-meta { margin: 0; font-size: .88rem; }
.profile-list-intro { margin: 0 0 14px; max-width: 40rem; }
.profile-detail-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 750;
}
.profile-detail .note { margin: 0 0 18px; }
.profile-section-label {
  margin: 18px 0 6px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute);
}
.profile-detail .profile-section-label:first-of-type { margin-top: 4px; }
.profile-list { margin: 0; padding: 0; list-style: none; }
.profile-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}
.profile-list .profile-row:last-child { border-bottom: 0; }
.profile-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.profile-label { font-weight: 650; color: var(--text); }
.profile-note {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
  max-width: 36rem;
}
.profile-list .v {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  flex-shrink: 0;
}
.profile-list .open-val {
  color: var(--warn);
  font-weight: 600;
}
@media (max-width: 480px) {
  .profile-row-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .profile-list .v { text-align: left; }
}

.note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 11px 13px;
  border-radius: 0 12px 12px 0;
  font-size: .88rem;
  color: #5C5348;
  line-height: 1.4;
}
.footer-note {
  text-align: center;
  padding: 18px 8px 10px;
  color: var(--mute);
  font-size: .8rem;
}


/* ========== Punch / Heute ========== */
.punch-status {
  text-align: center;
  padding: 22px 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 60%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.punch-status.punch-on {
  background: linear-gradient(180deg, var(--ok-bg) 0%, #fff 60%);
  border-color: #C5E0CF;
}
.punch-status.punch-break {
  background: linear-gradient(180deg, var(--warn-bg) 0%, #fff 60%);
  border-color: #E8C49A;
}
.punch-status.punch-duty,
.punch-status.punch-deploy {
  background: linear-gradient(180deg, var(--info-bg) 0%, #fff 60%);
  border-color: #C5CED8;
}
.punch-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.punch-headline {
  margin: 8px 0 6px;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
}
.punch-since {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
}
.punch-work {
  margin-top: 8px;
  font-size: .95rem;
  color: var(--mute);
}
.punch-work strong { color: var(--text); font-variant-numeric: tabular-nums; }

.punch-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.btn-punch {
  min-height: 64px;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: .02em;
  border-radius: 16px;
  width: 100%;
}
.btn-punch-secondary {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 650;
  width: 100%;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.btn-punch-secondary:hover, .btn-punch-secondary:focus-visible {
  border-color: var(--brand);
  outline: none;
}
.punch-hint { margin: 0; text-align: center; }

.punch-card { margin-bottom: 12px; }
.today-blocks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.today-blocks li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.today-blocks li:last-child { border-bottom: 0; }
.tb-dur { color: var(--mute); font-weight: 650; }
.punch-timeline { margin-top: 4px; }
.punch-timeline li.now { border-bottom: 0; }

.month-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.month-strip > div {
  background: #FAF8F5;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
}
.ms-l {
  display: block;
  font-size: .72rem;
  color: var(--mute);
  font-weight: 650;
  margin-bottom: 4px;
}
.ms-v {
  display: block;
  font-size: 1.05rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.open-hint {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #E8C49A;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 700;
  cursor: pointer;
  font-size: .95rem;
}
.open-hint:hover, .open-hint:focus-visible {
  box-shadow: 0 0 0 3px rgba(189,98,0,.15);
  outline: none;
}

.punch-duty .btn-duty {
  min-height: 48px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #FFFCFA;
  font-weight: 650;
  cursor: pointer;
}
.punch-duty .btn-duty.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

@media (min-width: 768px) {
  .wrap.emp-wrap {
    max-width: 900px;
  }
  .btn-punch { min-height: 68px; font-size: 1.2rem; }
}

@media (min-width: 1024px) {
  .wrap.emp-wrap {
    max-width: 1180px;
  }
  .punch-desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .punch-main-column,
  .punch-side-column {
    min-width: 0;
  }
}


@media print {
  /* .topbar blendet die Hauptnavigation der Verwaltung mit aus. */
  .topbar, .bottom-nav, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}


/* ========== Admin Lagebild ========== */
.lagebild { margin-bottom: 16px; }
.lage-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .lage-kpis { grid-template-columns: repeat(4, 1fr); }
}
.lage-kpi .n { font-variant-numeric: tabular-nums; }
.kpi.duty-card {
  background: var(--info-bg, #EEF3F8);
  border: 1px solid #C5CED8;
}
.klar-cta {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #E8C49A;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 750;
  font-size: 1rem;
  cursor: pointer;
}
.klar-cta:hover, .klar-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(189,98,0,.15);
  outline: none;
}
.lage-calm { margin: 0 0 10px; }
.corr-hint { margin: 0 0 12px; font-size: .9rem; }

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.admin-staff { min-width: 720px; }
table.admin-staff .col-name { min-width: 140px; }
table.admin-staff .col-status { min-width: 110px; }
table.admin-staff .col-klar { min-width: 90px; text-align: center; }
table.admin-staff .col-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Zahlenspalten rechts ausrichten, damit die Überschriften mit den Werten stehen */
table.admin-staff th.col-num,
table.admin-staff td.col-num { text-align: right; }
/* Anwesende Mitarbeiter dezent hervorheben – keine zusätzliche Markierung */
table.admin-staff tbody tr.is-present { background: var(--row-present); }
table.admin-staff tbody tr.is-present:hover { background: var(--brand-soft); }
/* Große Desktops: Breite nutzen, ohne die Spalten auseinanderzuziehen */
@media (min-width: 1280px) {
  table.admin-staff .col-name { width: 24%; }
  table.admin-staff .col-role { width: 15%; }
  table.admin-staff .col-status { width: 15%; }
  table.admin-staff .col-num { width: 10%; }
  table.admin-staff .col-klar { width: 6%; }
}

/* ========== Mitarbeiterverwaltung: dichte Desktop-Liste ==========
   Zwei Spalten nebeneinander, jede Mitarbeiterin eine schmale Zeile.
   Bewusst keine Karten: auf einem Laptop muss die ganze Belegschaft
   auf einen Blick sichtbar sein. */

/* Kopfzeile: Titel links, Anlegen rechts – ohne Erklärtext dazwischen. */
.staff-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.staff-head-row .section-title { margin: 0; }

/* Mobile: einspaltig. Ab Desktop: zwei Bereiche nebeneinander. */
.staff-split { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .staff-split { grid-template-columns: 1fr 1fr; align-items: start; }
}

.staff-col {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.staff-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #FAF8F5;
  border-bottom: 1px solid var(--line);
}
.staff-col-head h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
}
.staff-col-count {
  font-size: .72rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.staff-empty { margin: 0; padding: 10px; color: var(--mute); font-size: .84rem; }

/* Dichte Tabelle: kleine Schrift, flache Zeilen, ruhige Spalten. */
table.staff-list {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  table-layout: auto;
}
table.staff-list thead th {
  padding: 4px 10px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
  text-align: left;
  background: #FCFBF9;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.staff-list td {
  padding: 4px 10px;
  line-height: 1.3;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
table.staff-list tbody tr:last-child td { border-bottom: 0; }
table.staff-list tbody tr:hover { background: var(--brand-soft); }
table.staff-list tbody tr.is-present { background: var(--row-present); }
table.staff-list tbody tr.is-present:hover { background: var(--brand-soft); }

/* Spalten: Name bekommen Luft, der Rest bleibt schmal. */
table.staff-list .col-staff-name { font-weight: 600; white-space: nowrap; }
table.staff-list .col-staff-role { font-size: .8rem; }
table.staff-list .col-staff-profile { font-size: .8rem; white-space: nowrap; }
table.staff-list .col-staff-status { width: 1%; white-space: nowrap; }
table.staff-list .col-staff-act { width: 1%; text-align: right; white-space: nowrap; }

/* Status-Chip auf Zeilenhöhe eindampfen. */
table.staff-list .chip { padding: 1px 7px; font-size: .68rem; }

/* Einzige Aktion pro Zeile: hier wird bereits verwaltet. */
.staff-act {
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  padding: 0 8px;
  min-height: 22px;
  line-height: 22px;
  font-size: .74rem;
  font-weight: 650;
  color: var(--brand);
  text-decoration: none;
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
}
.staff-act:hover,
.staff-act:focus-visible {
  background: var(--brand);
  color: #fff;
  outline: none;
}

.chip.info {
  background: #EEF3F8;
  color: #3A5A78;
}
.chip.blue {
  background: #EEF3F8;
  color: #2F4F6F;
}

.block-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.block-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.block-list li:last-child { border-bottom: 0; }
.block-list .tb-range {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.block-list .tb-label { color: var(--mute); font-size: .92rem; }

.emp-admin-head { margin-bottom: 4px; }


/* ========== Klärungsbedarf ========== */
.klar-page-head { margin-bottom: 16px; }
.klar-page-head .section-title { margin-bottom: 4px; }
.klar-count {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--text);
}
.klar-intro { margin: 0 0 8px; max-width: 52rem; line-height: 1.45; }
.klar-list {
  display: grid;
  gap: 14px;
}
.klar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #C09D5E);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.klar-card-detail { cursor: default; }
.klar-card:hover { border-color: #D4B87A; }
.klar-card-detail:hover { border-color: var(--line); }
.klar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.klar-name { font-size: 1.08rem; font-weight: 750; }
.klar-role { font-weight: 500; color: var(--mute); font-size: .95rem; }
.klar-when {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
}
.klar-tags { margin: 0 0 12px; }
.klar-need {
  background: #FBF7F0;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.klar-need-label,
.klar-ask-label {
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.klar-need-text { font-weight: 650; color: var(--text); }
.klar-ask {
  margin-bottom: 12px;
  padding: 4px 2px 0;
}
.klar-ask-text {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
}
.klar-reason { margin: 0 0 12px; font-size: .92rem; }
.klar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}
.klar-actions .btn { min-height: 44px; }
.klar-blocks { margin-top: 8px; }

@media (min-width: 1024px) {
  .klar-list {
    max-width: 820px;
  }
  .klar-card { padding: 18px 20px 16px; }
  .klar-ask-text { font-size: 1.06rem; }
}

/* ========== Brand logo ========== */
.topbar-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-brand-text {
  min-width: 0;
  flex: 1 1 auto;
}
.brand-logo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  line-height: 0;
}
.brand-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 224px;
  object-fit: contain;
}
@media (max-width: 420px) {
  .brand-logo { height: 44px; max-width: 168px; }
  .brand-logo-chip { padding: 3px 6px; border-radius: 8px; }
  .topbar-brand-row { gap: 8px; }
}

/* ========== Schichtplan ========== */
/* Desktop: die komplette Kalenderwoche in EINER Reihe, Montag bis Sonntag.

   repeat(7, minmax(0, 1fr)) ist der entscheidende Punkt:
     * jede Tagesspalte bekommt dieselbe Grundbreite,
     * minmax(0, …) verhindert, dass eine Spalte durch ihren Inhalt breiter
       wird als die anderen – die Geometrie hängt damit nicht am Inhalt,
     * ein Tag mit vielen Schichten verbreitert keine andere Spalte.

   Kleinere Displays bleiben responsiv (1 bzw. 2 Spalten); sieben Tage auf
   ein Handy zu quetschen wird bewusst nicht versucht. */
.shift-week {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}
@media (min-width: 700px) {
  .shift-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .shift-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Der Inhalt bremst die Spalte nicht aus. */
.shift-day {
  padding: 7px;
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}
/* `.card + .card` schiebt im Raster jeden Tag ausser dem ersten um 14px
   nach unten. Die Kopfzeilen der sieben Tage muessen auf einer Linie
   bleiben, deshalb wird der Abstand hier neutralisiert. */
.shift-day.card { margin: 0; }
.shift-day-title {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
}
/* Wochenende nur optisch markiert, fachlich gleich behandelt. */
.shift-day.is-weekend { background: #FCFBF9; }

.shift-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shift-empty { margin: 0; padding: 2px 1px; color: var(--mute); font-size: .72rem; }

/* Schicht kompakt: alles bleibt in der Spaltenbreite, lange Texte
   werden gekürzt oder auf wenige Zeilen begrenzt. */
.shift-item {
  display: block;
  text-align: left;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.shift-item:hover, .shift-item:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(192,157,94,.25);
}
.shift-item.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.shift-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 1px;
  min-width: 0;
}
.shift-item-top .chip {
  padding: 0 5px;
  font-size: .62rem;
  line-height: 1.5;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-time {
  font-variant-numeric: tabular-nums;
  font-size: .66rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Namen und Zusatzinfos bleiben ein- bzw. zweizeilig – sie verlängern
   die Spalte nie. */
.shift-primary {
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shift-vertretung {
  font-size: .68rem;
  margin-top: 1px;
  color: var(--brand-dark);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shift-note {
  font-size: .68rem;
  margin-top: 1px;
  color: var(--mute);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shift-edit { margin-bottom: 14px; border-color: var(--accent); }
.shift-form { display: grid; gap: 10px; max-width: 420px; }
.shift-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.emp-shifts-list { margin: 0; padding-left: 1.1rem; }
.emp-shifts-list li { margin: 4px 0; }

/* Mitarbeiteransicht: Praxis links, Uhr mittig, aktive Person rechts. */
.employee-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.employee-topbar .header-clock { text-align: center; }
.employee-topbar-user {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.employee-topbar-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.25;
}
.employee-topbar-identity strong,
.employee-topbar-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-topbar-identity span { font-size: .78rem; opacity: .88; }
@media (max-width: 700px) {
  .employee-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .employee-topbar .topbar-brand { grid-column: 1 / -1; }
  .employee-topbar .header-clock { grid-column: 1; justify-self: center; }
  .employee-topbar-user { grid-column: 2; gap: 8px; }
  .employee-topbar-identity { max-width: 110px; }
}
@media (max-width: 420px) {
  .employee-topbar-identity { max-width: 82px; font-size: .8rem; }
  .employee-topbar-user .icon-btn { padding-inline: 9px; font-size: .78rem; }
}

/* Gleiche mittige Uhr auf Startseite und in Verwaltung. */
.centered-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.centered-topbar .header-clock { text-align: center; }
.centered-topbar .topbar-spacer { min-width: 0; }
.centered-topbar .topbar-actions { justify-content: flex-end; }
@media (max-width: 700px) {
  .centered-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .centered-topbar .topbar-brand { grid-column: 1 / -1; }
  .centered-topbar .header-clock { grid-column: 1; justify-self: center; }
  .login-topbar .header-clock { grid-column: 1 / -1; }
  .centered-topbar .topbar-spacer { display: none; }
}

/* ========== Admin-Header ========== */
/* Feste Aufteilung des Headers:

     [ Logo ] [ Navigation ] [ Uhr/Datum ] [ Zurück ]

   Alle vier Spalten sind feste, seitengleich grosse Bereiche. Keine
   Spalte hängt an der Breite des Seiteninhalts, deshalb stehen Logo,
   Navigation, Uhr und Datum auf Übersicht, Klärungsbedarf, Korrekturen,
   Mitarbeiter, Schichtplan und Abschluss exakt an derselben Position.
   Vorher lag die Navigation im Inhaltscontainer und sprang deshalb
   zwischen den Seiten um 160px hin und her. */
.admin-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 20px;
}
.admin-topbar .topbar-brand { padding-right: 0; }
.admin-topbar .header-clock { text-align: right; }

/* Kompakte Hauptnavigation: ruhige Textpunkte statt grosser weisser
   Pillen. Der aktive Punkt wird über eine sandgoldene Unterlinie und ein
   leichtes Flächenhighlight erkennbar – beides ohne Wechsel der
   Abmessungen, damit nichts zappelt. */
.admin-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  /* Die Punkte behalten immer ihre natürliche Breite (flex: 0 0 auto).
     Reicht der Platz nicht, scrollt die Leiste horizontal, statt dass
     ein Punkt gestaucht wird und sein Text über den Nachbarn ragt. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav-item {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .84);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 11px 14px 10px;
  /* Unterlinie ist immer da, nur beim aktiven Punkt sichtbar gefuellt –
     so aendert die Aktivierung weder Hoehe noch Breite. */
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-nav-item:hover,
.admin-nav-item:focus-visible {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  outline: none;
}
.admin-nav-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.admin-nav-item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-bottom-color: var(--accent);
}

/* Nur fuer Screenreader sichtbar (Dokumentgliederung), kein Text im Bild. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  /* Ab hier wird linksbündig gescrollt: bei zentriertem Inhalt würde
     sonst der Anfang der Leiste abgeschnitten. */
  .admin-nav { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .admin-topbar { column-gap: 12px; }
  .admin-nav-item { padding: 9px 10px 8px; font-size: .84rem; }
  .admin-topbar .header-clock-date { display: none; }
}

/* Dezente Markenakzente nach der Praxiswebsite. */
.group-block { border-top: 3px solid var(--accent); }
.group-block[data-group="tierarzt"] { border-top-color: var(--brand); }
.group-block[data-group="junior"] { border-top-color: var(--info); }
.group-block[data-group="tfa"] .group-head { border-bottom-color: var(--accent); }
.shift-day-title { color: var(--brand); }

/* ========== Schichtplan – erweiterter Bereich ========== */

/* Titelzeile mit Wochennavigation */
.shift-plan-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}
.shift-plan-head { margin-bottom: 14px; }
/* Wochennavigation: der Zeitraum in der Mitte ist ein eigener, gleich
   breiter Bereich. Die beiden Pfeile stehen ueber eine symmetrische
   Rasteraufteilung immer ganz aussen, dadurch wandert die Beschriftung
   nicht, wenn sich die Datumslaenge aendert (z. B. Monatswechsel). */
.shift-week-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
}
.shift-week-nav > :last-child { justify-self: end; }
.shift-week-label {
  /* Feste Mindestbreite. Die laengste Beschriftung ist
     "28.09.-04.10.2026" (Monatswechsel, 17 Zeichen); 19ch liegt darueber,
     damit die Box bei jedem Monatswechsel exakt gleich breit bleibt und
     die Pfeile nicht verrutschen. */
  min-width: 19ch;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  padding: 0 4px;
}
.btn-sm {
  min-height: 38px;
  padding: 0 13px;
  font-size: .88rem;
  font-weight: 650;
  border-radius: 10px;
}

/* Tagesbeschriftung Datum */
.shift-day-date {
  font-size: .87rem;
  font-weight: 500;
  color: var(--mute);
}

/* Schicht-Bearbeiten-Kopf */
.shift-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Datums-/Zeit-Zeile im Formular */
.shift-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .shift-form-row { grid-template-columns: 1fr; }
}

/* Schicht-Konflikt-Markierung */
.shift-item.shift-conflict {
  border-color: var(--warn);
  background: var(--warn-bg);
}
.shift-item.shift-conflict:hover,
.shift-item.shift-conflict:focus-visible {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px rgba(189,98,0,.2);
}
.shift-conflict-flag {
  font-size: .78rem;
  font-weight: 700;
  color: var(--warn);
  margin-top: 4px;
}

/* Konfliktzusammenfassung oben */
.shift-conflicts {
  background: var(--warn-bg);
  border: 1px solid #E8C49A;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: .92rem;
  color: var(--text);
}
.shift-conflict-list {
  margin: 6px 0 4px 1.1rem;
  padding: 0;
  font-size: .9rem;
}
.shift-conflict-list li { margin: 3px 0; }

/* Mitarbeiteransicht: Schicht-Listenelemente */
.emp-shifts-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.emp-shift-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-size: .92rem;
  line-height: 1.3;
}
.emp-shift-item:last-child { border-bottom: 0; }