/* KinderPraxis Portal — Terminmodul (Kalender, Wartezimmer, Terminbuchung).
   Loaded in addition to app.css / shell.css. Logical properties only, so every screen works in RTL. */

/* ---- small shared helpers (scoped to this module) -------------------------------------------- */
.appt-page .subtitle,
.appt-subtitle { color: var(--kp-muted); font-size: var(--kp-fs-sm); margin: .25rem 0 0; }
.appt-page .grow, .appt-grow { flex: 1; min-width: 0; }
.appt-filters { display: flex; flex-wrap: wrap; gap: var(--kp-s-3); align-items: flex-end; background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg); padding: var(--kp-s-4); margin-bottom: var(--kp-s-4); }
.appt-filters .form-group { margin-bottom: 0; }
.appt-filters .form-group.wide { flex: 1 1 220px; }
.appt-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.appt-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.appt-meta { color: var(--kp-muted); font-size: var(--kp-fs-xs); }

/* ---- calendar -------------------------------------------------------------------------------- */
.cal-scroll { overflow-x: auto; padding-bottom: .5rem; }
.cal-scroll .cal-grid { min-width: 640px; }
.cal-body { display: contents; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--kp-s-4); font-size: var(--kp-fs-xs); color: var(--kp-muted); align-items: center; }
.cal-legend .item { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend .swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-legend .swatch.hatched { background: repeating-linear-gradient(135deg, #eef2f7 0 4px, #e3e8f0 4px 8px); }
.cal-event { text-align: start; border: 0; border-inline-start: 3px solid var(--kp-primary); font-family: inherit; width: auto; }
.cal-event:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; z-index: 7; }
.cal-event .p { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event .s { display: block; opacity: .75; }
.cal-agenda { display: flex; flex-direction: column; gap: var(--kp-s-4); }
.cal-agenda .day-block h3 { font-size: var(--kp-fs-sm); color: var(--kp-muted); margin: 0 0 .5rem; text-transform: none; }
.cal-agenda .ev-row { display: flex; gap: .75rem; align-items: center; width: 100%; text-align: start; padding: .6rem .8rem; border: 1px solid var(--kp-line); border-radius: var(--kp-r); background: var(--kp-surface); font-family: inherit; font-size: var(--kp-fs-sm); color: var(--kp-ink); cursor: pointer; }
.cal-agenda .ev-row:hover { border-color: var(--kp-primary); background: var(--kp-primary-50); }
.cal-agenda .ev-row .t { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.5rem; }
.cal-agenda .ev-row.cancelled { opacity: .55; }
.cal-month .day .ev { border: 0; width: 100%; text-align: start; font-family: inherit; font-size: 11px; cursor: pointer; }
.cal-month .day .ev:hover { filter: brightness(.97); }
.cal-move-banner { position: sticky; top: 0; z-index: 20; display: none; align-items: center; gap: .75rem; background: var(--kp-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--kp-r); margin-bottom: var(--kp-s-3); font-size: var(--kp-fs-sm); }
.cal-move-banner.open { display: flex; }
.cal-col.drop-target { background: var(--kp-primary-50); box-shadow: inset 0 0 0 2px var(--kp-primary); }
.cal-col.move-target { cursor: copy; }
.cal-drawer .kv { margin-bottom: var(--kp-s-4); }
.cal-drawer .drawer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--kp-s-4); }
.cal-drawer h2 { margin-bottom: .25rem; }

/* ---- day sheet (print) ----------------------------------------------------------------------- */
.day-sheet { max-width: 900px; margin: 0 auto; padding: var(--kp-s-5); }
.day-sheet h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.day-sheet .sheet-meta { color: var(--kp-muted); font-size: var(--kp-fs-sm); margin-bottom: var(--kp-s-5); }
.day-sheet table { width: 100%; border-collapse: collapse; font-size: var(--kp-fs-sm); }
.day-sheet th, .day-sheet td { text-align: start; padding: .45rem .5rem; border-bottom: 1px solid var(--kp-line); vertical-align: top; }
.day-sheet th { font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); }
.day-sheet .time { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.day-sheet .sign { width: 22%; }
@media print {
  .day-sheet { padding: 0; max-width: none; }
  .no-print { display: none !important; }
  .day-sheet table { page-break-inside: auto; }
  .day-sheet tr { page-break-inside: avoid; }
  a[href]::after { content: none !important; }
}

/* ---- check-in / waiting room ----------------------------------------------------------------- */
.queue-columns { display: grid; gap: var(--kp-s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.queue-col h2 { font-size: var(--kp-fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--kp-muted); margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; }
.queue-col h2 .count { background: var(--kp-line-2); color: var(--kp-ink-2); border-radius: 999px; padding: 0 .5rem; font-size: var(--kp-fs-xs); }
.queue-list { display: flex; flex-direction: column; gap: .6rem; }
.queue-card { flex-wrap: wrap; }
.queue-card .who { flex: 1; min-width: 140px; }
.queue-card .who .n { font-weight: 700; color: var(--kp-ink); }
.queue-card .who .m { font-size: var(--kp-fs-xs); color: var(--kp-muted); }
.queue-card .acts { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; }
.queue-card .acts .btn { flex: 1; min-height: 46px; }
.queue-card.state-called { border-color: var(--kp-primary); background: var(--kp-primary-50); }
.queue-card.state-in_treatment { border-color: var(--kp-mint); background: var(--kp-mint-100); }
.queue-card.state-done { opacity: .6; }
.queue-empty { border: 1px dashed var(--kp-line); border-radius: var(--kp-r); padding: var(--kp-s-4); text-align: center; color: var(--kp-subtle); font-size: var(--kp-fs-sm); }

.board { min-height: 100vh; background: var(--kp-ink); color: #fff; padding: clamp(1rem, 4vw, 3rem); display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 2rem); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.board-head h1 { color: #fff; font-size: clamp(1.4rem, 4vw, 2.4rem); margin: 0; }
.board-head .clock { font-size: clamp(1rem, 3vw, 1.6rem); opacity: .7; font-variant-numeric: tabular-nums; }
.board-grid { display: grid; gap: clamp(.6rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 18vw, 220px), 1fr)); }
.board-num { border-radius: 20px; padding: clamp(.8rem, 3vw, 1.6rem); text-align: center; background: rgba(255, 255, 255, .08); }
.board-num .n { font-size: clamp(2rem, 8vw, 5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.board-num .s { font-size: clamp(.7rem, 1.6vw, 1rem); text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-top: .4rem; }
.board-num.called { background: #fff; color: var(--kp-ink); animation: board-pulse 1.6s ease-in-out infinite; }
.board-num.in_treatment { background: rgba(143, 217, 195, .25); }
.board-empty { text-align: center; opacity: .6; font-size: clamp(1rem, 3vw, 1.6rem); padding: 3rem 0; }
@keyframes board-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .board-num.called { animation: none; } }

/* ---- booking wizard -------------------------------------------------------------------------- */
.wizard { max-width: 760px; margin: 0 auto; }
.wizard .steps { flex-wrap: wrap; }
.type-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.type-card { display: flex; gap: .75rem; align-items: flex-start; text-align: start; width: 100%; padding: .9rem 1rem; border: 1px solid var(--kp-line); border-radius: var(--kp-r); background: var(--kp-surface); cursor: pointer; font-family: inherit; font-size: var(--kp-fs-sm); color: var(--kp-ink); transition: border-color var(--kp-t), box-shadow var(--kp-t), background var(--kp-t); }
.type-card:hover, .type-card:focus-visible { border-color: var(--kp-primary); box-shadow: var(--kp-sh-sm); }
.type-card[aria-pressed="true"], .type-card.selected { border-color: var(--kp-primary); background: var(--kp-primary-50); }
.type-card .bar { width: 6px; align-self: stretch; border-radius: 999px; flex: none; }
.type-card .name { font-weight: 700; display: block; }
.type-card .desc { color: var(--kp-muted); font-size: var(--kp-fs-xs); display: block; margin-top: .2rem; }
.child-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.child-card { display: flex; gap: .75rem; align-items: center; width: 100%; text-align: start; padding: .9rem 1rem; border: 1px solid var(--kp-line); border-radius: var(--kp-r); background: var(--kp-surface); cursor: pointer; font-family: inherit; color: var(--kp-ink); }
.child-card:hover { border-color: var(--kp-primary); background: var(--kp-primary-50); }
.day-picker-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: .35rem; font-size: var(--kp-fs-xs); color: var(--kp-muted); text-align: center; font-weight: 700; }
.day-picker .dp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: auto; min-height: 60px; padding: .3rem; }
.day-picker .dp .d { font-size: var(--kp-fs-sm); font-weight: 700; }
.day-picker .dp .f { font-size: 10px; opacity: .8; }
.day-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.slot-groups { display: flex; flex-direction: column; gap: var(--kp-s-4); }
.slot-groups h3 { font-size: var(--kp-fs-sm); color: var(--kp-muted); margin: 0 0 .5rem; }
.summary-list { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; gap: .6rem 1rem; align-items: baseline; font-size: var(--kp-fs-sm); }
.summary-list dt { color: var(--kp-muted); margin: 0; }
.summary-list dd { margin: 0; font-weight: 600; color: var(--kp-ink); }
.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- portal appointment cards ---------------------------------------------------------------- */
.appt-card { display: flex; gap: .9rem; align-items: flex-start; padding: var(--kp-s-4); border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg); background: var(--kp-surface); }
.appt-card + .appt-card { margin-top: .6rem; }
.appt-card .when { text-align: center; flex: none; min-width: 62px; padding: .4rem .5rem; border-radius: var(--kp-r); background: var(--kp-primary-50); color: var(--kp-primary-700); }
.appt-card .when .d { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.appt-card .when .m { font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.appt-card .when .t { font-size: var(--kp-fs-xs); font-weight: 700; margin-top: .25rem; }
.appt-card.past { opacity: .75; }
.appt-card .body { flex: 1; min-width: 0; }
.appt-card .body .title { font-weight: 700; color: var(--kp-ink); }
.doc-check { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--kp-line-2); font-size: var(--kp-fs-sm); }
.doc-check:last-child { border-bottom: 0; }
.doc-check .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kp-line-2); color: var(--kp-muted); }
.doc-check.done .ic { background: var(--kp-success-100); color: var(--kp-success); }

/* ---- availability grid (admin) ---------------------------------------------------------------- */
.hours-grid { display: grid; gap: .5rem; }
.hours-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: .75rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--kp-line-2); }
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { font-weight: 700; color: var(--kp-ink); padding-top: .35rem; }
.hours-row .ranges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hours-range { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 999px; background: var(--kp-primary-50); color: var(--kp-primary-700); font-size: var(--kp-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hours-range form { display: inline; }
.hours-range .rm { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 .1rem; line-height: 1; font-size: 1rem; opacity: .6; }
.hours-range .rm:hover { opacity: 1; }
.hours-range.kind-acute { background: var(--kp-peach-100); color: #9c5330; }
.hours-range.kind-telephone { background: var(--kp-lavender-100); color: #5a4a9c; }
.hours-range.kind-emergency { background: var(--kp-danger-100); color: #8f2f2c; }
.hours-empty { color: var(--kp-subtle); font-size: var(--kp-fs-sm); padding-top: .35rem; }
.preview-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.preview-day { border: 1px solid var(--kp-line); border-radius: 10px; padding: .4rem .55rem; text-align: center; min-width: 66px; font-size: var(--kp-fs-xs); }
.preview-day .n { display: block; font-weight: 800; font-size: var(--kp-fs-sm); color: var(--kp-ink); }
.preview-day.zero { color: var(--kp-subtle); background: var(--kp-surface-2); }
.qr-box { text-align: center; padding: var(--kp-s-4); }
.qr-box svg { width: 190px; height: 190px; }

/* ---- slot radio (works without JavaScript) ---------------------------------------------------- */
.slot-radio { position: relative; display: block; }
.slot-radio:has(input:checked) { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.slot-radio.selected { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.slot-radio:focus-within { outline: 2px solid var(--kp-primary); outline-offset: 2px; }