/* Seiten-Anordnung Dienstplan: nur Layout, Komponenten kommen aus app.css. */

.dp-status { margin: calc(var(--s2) * -1) 0 var(--s3); }
.dp-bar .label { min-width: 0; padding: 0 var(--s2); white-space: nowrap; }
.dp-bar .select { width: 210px; min-width: 0; }
.dp-acts { margin-left: auto; gap: var(--s2); }
@media (max-width: 767px) {
  .dp-bar .select { width: auto; flex: 1 1 100%; }
  .dp-acts { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
  .dp-acts .btn { flex: 1 1 auto; }
}

/* Raster ab 1024px, darunter Tagesliste */
.dp-l { display: none; }
@media (max-width: 1023px) {
  .dp-g { display: none; }
  .dp-l { display: block; }
}

/* ── Raster ─────────────────────────────────────────────────── */
.dp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.dp-grid { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 760px; }
.dp-grid .c-who { width: 172px; }
.dp-grid th, .dp-grid td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: var(--s2); vertical-align: top; }
.dp-grid th { text-align: left; background: var(--surface); padding: 10px var(--s2); font-weight: 400; }
.dp-grid th .wd { display: block; font: 600 var(--fs-xs)/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dp-grid th .d { display: block; font: 600 var(--fs-ui)/1.3 var(--sans); color: var(--ink); margin-top: 2px; }
.dp-grid th .h { display: block; font-size: var(--fs-xs); line-height: 1.25; color: var(--bad); margin-top: 2px; }
.dp-grid th.today .wd, .dp-grid th.today .d { color: var(--accent-deep); }
.dp-grid .who { position: sticky; left: 0; z-index: 2; background: var(--surface); border-left: 0; }
.dp-grid thead .who { font: 600 var(--fs-xs)/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); vertical-align: bottom; }
.dp-grid tr:last-child td { border-bottom: 0; }
.dp-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.dp-who .n { font-weight: 600; font-size: var(--fs-ui); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-who .p { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-open { background: var(--surface-2); color: var(--text-3); font-size: 12px; }
.dp-grid td.cell { height: 68px; }
.dp-grid td.cell.can { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .dp-grid td.cell.can:hover { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); } }
.dp-grid td.we { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.dp-grid td.today { background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.dp-grid tr.hl td { background: var(--accent-soft); }

/* Schicht-Chip */
.dp-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin: 0 0 var(--s1); padding: 6px var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: 400 var(--fs-sm)/1.25 var(--sans); text-align: left; cursor: pointer; transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.dp-chip:active { transform: scale(0.98); }
.dp-chip .tm { font-weight: 600; white-space: nowrap; }
.dp-chip .lb, .dp-chip .who { color: var(--text-2); font-size: var(--fs-xs); }
.dp-chip .who { color: var(--ink); font-weight: 500; font-size: var(--fs-sm); }
.dp-chip .lb.dr { color: var(--warn); }
.dp-chip.draft { border-style: dashed; background: var(--surface); }
.dp-chip.ro { cursor: default; }
.dp-chip.mine { border-color: var(--accent); background: var(--accent-soft); }
.dp-chip.hl { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }
@media (hover: hover) and (pointer: fine) { button.dp-chip:hover { border-color: var(--accent-deep); } }

/* Urlaub im Plan */
.dp-leave { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s1); padding: 5px var(--s2); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.25; }
.dp-leave .ic { font-size: 13px; flex: none; }
.dp-leave.pending { background: transparent; border: 1px dashed var(--line-2); }

/* Legende */
.dp-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-2); }
.dp-legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--line-2); background: #fff; flex: none; }
.dp-legend i.lg-d { border-style: dashed; background: var(--surface); }
.dp-legend i.lg-l { background: var(--surface-3); border-color: var(--surface-3); }
.dp-legend i.lg-p { background: transparent; border-style: dashed; }

/* ── Tagesliste ─────────────────────────────────────────────── */
.dp-days { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.dp-day { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.dp-day:first-child { border-top: 0; }
.dp-day.today { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.dp-dh { display: flex; align-items: center; gap: var(--s2); min-height: 32px; margin-bottom: var(--s2); }
.dp-dh .wd { font-weight: 600; }
.dp-dh .d { color: var(--text-2); }
.dp-day.today .dp-dh .wd { color: var(--accent-deep); }
.dp-row + .dp-row { margin-top: var(--s2); }
.dp-row .dp-chip { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding: var(--s2) var(--s3); }
.dp-row .dp-chip .tm { min-width: 104px; }
.dp-lrow { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.dp-lrow .dp-leave { margin: 0; }
.dp-none { color: var(--text-3); font-size: var(--fs-sm); padding-bottom: var(--s1); }

/* Dialog */
.dp-hint { margin-top: calc(var(--s2) * -1); }
.dp-uf { margin-top: var(--s4); }