/* pages.css – wird nach app.css geladen, überschreibt/ergänzt. Präfix as-pg-* */

/* ── Seitenkopf: Eyebrow, Titel, Lede, Aktionen ─────────────── */
.as-pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; flex-wrap: wrap; }
.as-pg-head__text { min-width: 0; flex: 1 1 320px; }
.as-pg-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--as-color-primary); margin-bottom: 4px; }
.as-pg-h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; overflow-wrap: anywhere; }
.as-pg-lede { max-width: 640px; line-height: 1.55; font-size: 14px; color: var(--as-color-body); margin: 0; }
.as-pg-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.as-pg-note { font-size: 13px; color: var(--as-color-body); }
.as-pg-h2 { font-size: 18px; margin: 24px 0 12px; }
.as-pg-h3 { font-size: 16px; margin: 0 0 12px; }
.as-pg-h4 { font-size: 14px; margin: 20px 0 8px; }
.as-pg-meta { font-size: 12px; color: rgba(49,49,49,.75); margin: 0 0 8px; }
.as-pg-muted { font-size: 13px; color: rgba(49,49,49,.75); margin: 4px 0 0; }
.as-pg-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.as-pg-help { font-size: 13px; line-height: 1.5; margin: 8px 0 16px; max-width: 640px; }
.as-pg-hint { font-size: 12px; color: rgba(49,49,49,.8); margin: 4px 0 12px; }
.as-pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as-pg-section { margin-bottom: 8px; }
.as-pg-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }

.as-pg-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; color: rgba(49,49,49,.75); }
.as-pg-crumbs a { text-decoration: none; font-weight: 700; }

/* ── Segment-Control (Ansicht umschalten, Filter) ───────────── */
.as-pg-segment { display: inline-flex; border: 1px solid var(--as-color-primary); margin-bottom: 16px; max-width: 100%; }
.as-pg-segment a { padding: 9px 18px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--as-color-primary); background: var(--as-white); border-left: 1px solid var(--as-color-primary); min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.as-pg-segment a:first-child { border-left: none; }
.as-pg-segment a.is-active { background: var(--as-color-primary); color: var(--as-white); }
.as-pg-segment a:hover { opacity: .8; }
.as-pg-segment--small { margin-bottom: 0; }
.as-pg-segment--small a { padding: 6px 12px; min-height: 32px; font-size: 12px; }

.as-pg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.as-pg-counter { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.as-pg-calnav { gap: 8px; flex-wrap: wrap; }
.as-pg-tap { min-height: 36px; display: inline-flex; align-items: center; }
.as-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.as-pg-daynav { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

/* ── Leerzustand, Hinweis ───────────────────────────────────── */
.as-pg-empty { border: 1.5px dashed rgba(0,0,0,.25); padding: 20px 22px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; background: var(--as-white); }
.as-pg-empty strong { display: block; font-size: 15px; margin-bottom: 2px; color: var(--as-color-heading); }
.as-pg-empty--small { padding: 12px 16px; font-size: 13px; margin: 8px 0; }
.as-pg-notice { border-left: 4px solid var(--as-blue); background: var(--as-white); padding: 14px 18px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.as-pg-notice strong { color: var(--as-color-primary); font-size: 14px; }
.as-pg-notice p { margin: 4px 0 0; max-width: 720px; }

.as-pg-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.as-pg-cardgrid .as-card { margin-bottom: 0; }

/* ── Tabellen: scrollbare Container ─────────────────────────── */
.as-pg-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.as-pg-tablewrap table.as-table { min-width: 520px; }
.as-pg-numtable td:last-child, .as-pg-numtable th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.as-pg-reason { color: rgba(49,49,49,.85); }
.as-pg-aftable input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--as-color-primary); }
.as-pg-aftable td, .as-pg-postable td { vertical-align: middle; }
.as-pg-occ { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.as-pg-occ .as-progress-track { flex: 0 0 80px; }
.as-pg-stickyaction { margin: 16px 0; }
.as-pg-stickyaction button:disabled { opacity: .4; cursor: not-allowed; }

/* ── KPI-Kacheln (Statistik) ────────────────────────────────── */
.as-pg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.as-pg-kpi { background: var(--as-white); border-top: 3px solid var(--as-blue); padding: 20px 22px; display: flex; flex-direction: column; }
.as-pg-kpi__value { display: block; font-size: 28px; font-weight: 700; color: var(--as-color-heading); font-variant-numeric: tabular-nums; }
.as-pg-kpi__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(49,49,49,.75); margin-bottom: 6px; order: -1; }

/* ── Monatskalender: Legende, Chips, Zellenfuß ──────────────── */
.as-pg-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; align-items: center; }
.as-pg-legend li { display: inline-flex; align-items: center; gap: 6px; }
.as-pg-dot--offen { background: transparent; border: 2px solid var(--as-color-error); }
.as-pg-ueber-text { color: var(--as-color-error); }
.as-pg-chip { font-size: 11px; font-weight: 700; padding: 1px 6px; display: inline-block; }
.as-pg-chip--voll, .as-pg-daylabel--voll { background: rgba(29,154,86,.12); color: var(--as-color-success); }
.as-pg-chip--teil, .as-pg-daylabel--teil { background: rgba(0,159,227,.12); color: var(--as-color-primary); }
.as-pg-chip--offen, .as-pg-daylabel--offen { background: rgba(154,29,29,.10); color: var(--as-color-error); }
.as-pg-chip--ueber, .as-pg-daylabel--ueber { background: var(--as-color-error); color: var(--as-white); }

.as-calendar-day { min-height: 92px; }
.as-calendar-day .as-pg-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-pg-daylabel { margin-top: auto; align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.as-pg-short { display: none; }
.as-pg-day--voll { border-bottom: 3px solid var(--as-color-success); }
.as-pg-day--teil { border-bottom: 3px dashed var(--as-blue); }
.as-pg-day--offen { border-bottom: 3px dotted var(--as-color-error); }
.as-pg-day--ueber { border-bottom: 3px solid var(--as-color-error); }
.as-calendar-day.is-today { outline: 2px solid var(--as-color-primary); outline-offset: -2px; }

/* ── Wochenansicht ──────────────────────────────────────────── */
.as-pg-weekcard { min-width: 0; }
.as-pg-filterbar { margin: 8px 0; }
.as-pg-filterbar select { min-height: 36px; max-width: 100%; }
.as-pg-weeklayout { display: flex; gap: 16px; align-items: flex-start; }
.as-pg-weekmain { flex: 1; min-width: 0; }
.as-pg-gridwrap { overflow-x: auto; max-width: 100%; border: 1px solid rgba(0,0,0,.08); }
.as-pg-weeklayout .as-week-grid { min-width: 720px; }
.as-pg-panel { flex: 0 0 220px; position: sticky; top: 16px; }
.as-pg-panel[hidden] { display: none !important; }
.as-week-day-body { background-image: none !important; }
.as-pg-hourline { position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.07); pointer-events: none; }

.as-pg-block { container-type: inline-size; display: flex; flex-direction: column; gap: 1px; font-size: 11px; z-index: 1; }
.as-pg-block-time { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pg-block-status { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pg-names { display: block; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.as-pg-ini { display: none; }
.as-pg-ini .as-week-avatar { width: 20px; height: 20px; font-size: 11px; }
@container (max-width: 140px) {
  .as-pg-names { display: none; }
  .as-pg-ini { display: flex; }
}
.as-week-block.is-ueber { border: 2px solid var(--as-color-error); background: rgba(154,29,29,.18); }
.as-week-block.is-ueber .as-pg-block-status { color: var(--as-color-error); text-transform: uppercase; letter-spacing: .04em; }
.as-week-block.is-voll .as-pg-block-status { color: var(--as-color-success); }
.as-week-block.is-teilweise .as-pg-block-status { color: var(--as-color-primary); }
.as-week-block:not(.is-voll):not(.is-teilweise):not(.is-ueber) .as-pg-block-status { color: var(--as-color-error); }

.as-pg-hint--desktop { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .as-pg-hint--desktop { display: block; }
  .as-pg-hint--touch { display: none; }
}

.as-pg-daylist { display: none; }
.as-pg-daycard { background: var(--as-color-surface); padding: 12px; margin-bottom: 12px; }
.as-pg-daycard.is-today { border-left: 4px solid var(--as-color-primary); }
.as-pg-daycard h3 { font-size: 15px; margin: 0 0 8px; }
.as-pg-shiftcard { display: flex; flex-direction: column; gap: 2px; background: var(--as-white); border-left: 4px solid var(--as-color-error); padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: var(--as-color-body); font-size: 13px; min-height: 44px; }
.as-pg-shiftcard.is-teilweise { border-left-color: var(--as-blue); }
.as-pg-shiftcard.is-voll { border-left-color: var(--as-color-success); }
.as-pg-shiftcard.is-ueber { border-left-color: var(--as-color-error); border-left-width: 8px; }
.as-pg-shiftcard__top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.as-pg-shiftcard__status { font-weight: 700; font-variant-numeric: tabular-nums; }
.as-pg-shiftcard.is-ueber .as-pg-shiftcard__status { color: var(--as-color-error); }
.as-pg-shiftcard__meta { font-size: 12px; color: rgba(49,49,49,.8); }

@media (max-width: 1099px) {
  .as-pg-weeklayout { flex-direction: column; }
  .as-pg-panel { position: static; flex: none; width: 100%; max-height: none; }
}
@media (max-width: 760px) {
  .as-pg-gridwrap { display: none; }
  .as-pg-daylist { display: block; }
  .as-pg-h1 { font-size: 22px; }
  .as-pg-head { align-items: flex-start; }
  .as-pg-head__actions { width: 100%; }
  .as-pg-head__actions .as-btn { flex: 1 1 auto; justify-content: center; text-align: center; min-height: 44px; }
  .as-pg-segment { display: flex; width: 100%; }
  .as-pg-segment a { flex: 1; min-height: 44px; padding: 9px 6px; }
  .as-pg-segment--small { width: auto; }
  .as-pg-segment--small a { min-height: 36px; }
  .as-pg-tap { min-height: 44px; }
  .as-pg-calnav h2 { order: -1; width: 100%; font-size: 18px; }
  .as-pg-filterbar select { flex: 1 1 100%; min-height: 44px; }
  .as-pg-filterbar { margin-top: 12px; }
  .as-pg-panel-toggle { flex: 1 1 100%; justify-content: center; }
  .as-pg-long { display: none; }
  .as-pg-short { display: inline; }
  .as-calendar-day { min-height: 68px; padding: 4px; gap: 2px; }
  .as-calendar-day .as-pg-count { font-size: 11px; }
  .as-pg-daylabel { padding: 0 3px; }
  .as-calendar-weekday { font-size: 11px; }
  .as-pg-kpi { padding: 14px 16px; }
  .as-pg-kpi__value { font-size: 24px; }
}

/* ── Wochenansicht: Mitarbeiter-Sidebar rechts, Zuweisen per Ziehen/Tippen ── */
.as-pg-legend--line { flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; }
.as-pg-legend--line span { display: inline-flex; align-items: center; gap: 6px; }
.as-pg-sw { display: inline-block; width: 12px; height: 12px; border: 1.5px solid; flex-shrink: 0; }
.as-pg-sw--voll { border-color: var(--as-color-success); background: rgba(29,154,86,.25); }
.as-pg-sw--teil { border-color: var(--as-blue); background: rgba(0,159,227,.2); }
.as-pg-sw--offen { border-color: var(--as-color-error); background: rgba(154,29,29,.12); }
.as-pg-sw--ueber { border-color: var(--as-color-error); background: var(--as-color-error); }

.as-pg-hint { margin: 4px 0 12px; }
.as-pg-hint--desktop { display: none; }
.as-pg-hint--touch { display: inline; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .as-pg-hint--desktop { display: inline; }
  .as-pg-hint--touch { display: none; }
}

.as-pg-free { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 0 6px; border: 1px dashed currentColor; font-size: 11px; font-weight: 700; color: var(--as-color-primary); background: rgba(255,255,255,.7); }

.as-pg-panel { flex: 0 0 260px; width: 260px; position: sticky; top: 16px; height: calc(100vh - 32px); max-height: 900px; overflow: hidden; display: flex; flex-direction: column; background: var(--as-white); border: 1px solid rgba(0,0,0,.1); border-top: 3px solid var(--as-blue); padding: 14px; z-index: 5; }
.as-pg-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.as-pg-panel__head h3 { margin: 0; font-size: 16px; }
.as-pg-panel__close { display: none; background: none; border: 1px solid rgba(0,0,0,.2); font: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; min-height: 36px; cursor: pointer; }
.as-pg-search { width: 100%; padding: 9px 10px; border: 1px solid rgba(0,0,0,.25); font-family: var(--as-font); font-size: 14px; border-radius: 0; margin-bottom: 8px; }
.as-pg-dropinfo { font-size: 12px; line-height: 1.4; margin: 0 0 8px; min-height: 34px; color: rgba(49,49,49,.85); }
.as-pg-dropinfo.is-hard { color: var(--as-color-error); font-weight: 700; }
.as-pg-emplist { overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.as-pg-emp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; min-height: 48px; cursor: grab; user-select: none; }
.as-pg-emp[hidden] { display: none; }
.as-pg-emp:hover { border-color: var(--as-color-primary); }
.as-pg-emp.is-selected { border: 2px solid var(--as-color-primary); background: rgba(0,159,227,.1); padding: 7px 9px; }
.as-pg-emp__av { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.as-pg-emp__text { min-width: 0; display: flex; flex-direction: column; }
.as-pg-emp__name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pg-emp__meta { font-size: 11px; color: rgba(49,49,49,.8); }
.as-pg-extern { font-size: 11px; padding: 0 6px; margin-left: 4px; }

/* Drop-Ziele */
.as-week-block.is-drop-ok, .as-pg-shiftcard.is-drop-ok { outline: 2px solid var(--as-color-success); outline-offset: -2px; box-shadow: inset 0 0 0 100px rgba(29,154,86,.08); }
.as-week-block.is-drop-soft, .as-pg-shiftcard.is-drop-soft { outline: 2px dashed var(--as-blue); outline-offset: -2px; }
.as-week-block.is-drop-hard, .as-pg-shiftcard.is-drop-hard { outline: 2px solid var(--as-color-error); outline-offset: -2px; opacity: .6; cursor: not-allowed; }
.as-week-block.is-dropzone-active { outline-width: 3px; opacity: 1; }

.as-pg-selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 30; background: var(--as-dark-bg); color: var(--as-white); padding: 10px 14px; display: flex; gap: 12px; align-items: center; font-size: 13px; max-width: calc(100vw - 24px); }
.as-pg-selbar[hidden], .as-pg-toast[hidden] { display: none; }
.as-pg-selbar .as-btn--ghost { color: var(--as-white); border-color: rgba(255,255,255,.5); }
.as-pg-toast { position: fixed; right: 16px; top: 16px; z-index: 40; background: var(--as-color-success); color: var(--as-white); padding: 12px 16px; font-size: 14px; font-weight: 700; max-width: calc(100vw - 32px); }
.as-pg-toast.is-error { background: var(--as-color-error); }

@media (max-width: 1099px) {
  .as-pg-weeklayout { flex-direction: column; }
  .as-pg-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; flex: none; height: auto; max-height: 65vh; border-top: 3px solid var(--as-blue); box-shadow: 0 -4px 16px rgba(0,0,0,.2); z-index: 20; }
  .as-pg-panel__close { display: inline-block; }
  .as-pg-selbar { bottom: 8px; }
}