/* Page layout for the portal (intern, portal, public). Appearance comes from the design system
   (static/design/tokens.css and bundle.css, including links, SkipLink, MobileMenu and the mobile
   rules); this file only arranges the ap- components and may use CSS variables only: no colour
   values, no font names (tests/test_design_guard.py). Breakpoints as in tokens.json (bp-mobile). */

html { background: var(--page); }
body { margin: 0; min-height: 100vh; }
img, svg { max-width: 100%; }
main:focus { outline: none; }

a.ap-card { color: inherit; text-decoration: none; }
/* Menu button: show only the icon for the current state (.ap-icon-btn svg overrides [hidden]). */
.ap-navbar__toggle svg[hidden] { display: none; }

.ap-table-wrap { position: relative; } /* keeps visually hidden captions inside the scroll area */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-8); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row--tight { gap: var(--space-2); }
.cell-nowrap { white-space: nowrap; }
/* Rechnungsausgangsbuch: die Aktionen einer Zeile untereinander, damit die Tabelle auf einen Laptop passt */
@media (min-width: 960px) { .ledger .row--tight { flex-direction: column; align-items: stretch; } }
/* Rechnungsausgangsbuch als Karten auf dem Handy (Design System Table, ap-table--stack): die
   Aktionen in einer eigenen Zeile ohne Beschriftung, mehrzeilige Zellen links ausgerichtet. */
@media (max-width: 959px) {
  .ledger td[data-label="Aktionen"]::before { content: none; }
  .ledger td[data-label="Aktionen"] { justify-content: flex-start; }
  .ledger td[data-label="Familie"], .ledger td[data-label="Art"], .ledger td[data-label="Status"] { align-items: flex-start; }
  .ledger td br { display: none; }
  .ledger td .step__meta { display: block; }
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.cell-person { display: flex; align-items: center; gap: var(--space-3); }
.cell-nowrap { white-space: nowrap; } /* table cells that stay on one line (e.g. status, invoice) */

/* Intern (agency): sidebar left, navbar on top, content */
.layout-intern { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }
.layout-intern .ap-sidebar { min-height: 100vh; }
.layout-intern__main { display: flex; flex-direction: column; min-width: 0; }
.layout-intern__content { padding: var(--space-8); max-width: var(--container); box-sizing: border-box; width: 100%; }

/* Intern: worklist, lists and record pages (work package 1.9) */
.navbar-search { display: flex; justify-content: center; min-width: 0; }
.navbar-search .ap-input { width: 100%; padding-top: var(--space-1); padding-bottom: var(--space-1); }
/* Agency navbar: section on the left, search in the middle, signed-in user on the right. */
.layout-intern__bar { display: flex; align-items: center; gap: var(--space-4); }
.layout-intern__section { flex: none; }
.layout-intern__bar .navbar-search { flex: 1 1 auto; margin-inline: auto; max-width: 34rem; }
.layout-intern__bar .ap-navbar__actions { flex: 0 1 auto; min-width: 0; }
.layout-intern__mobile-brand { display: none; }
.intern-user { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.intern-user__name { font: 500 14px/1.2 var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; min-width: 0; }
.intern-user__logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.intern-user--mobile { flex-wrap: wrap; padding: var(--space-2) 0 var(--space-12); }
.intern-user--mobile .intern-user__name { flex: 1; max-width: none; }
.intern-user--mobile .intern-user__logout { display: inline-flex; width: 100%; }
.intern-user--mobile .intern-user__logout span { position: static; width: auto; height: auto; clip-path: none; }
.intern-mobile-nav { display: flex; flex-direction: column; }
.intern-mobile-nav a { display: flex; align-items: center; gap: var(--space-3); }
.layout-intern__content { padding-bottom: var(--space-16); }
.record-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.record-header .ap-h2 { margin: 0; }
.record-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font: var(--type-small-weight) var(--type-small-size) / var(--type-small-line) var(--type-small-family); }
.dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
/* Question above answer, for long labels (Anmeldeformular, intern/partials/_registration_form.html). */
.dl--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dl--stacked dd { margin-block-end: var(--space-3); }
.due--overdue { color: var(--error); font-weight: 600; }
.due--today { color: var(--warning); font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.timeline__item { border-left: 3px solid var(--border); padding-left: var(--space-3); }
.timeline__meta { display: block; color: var(--text-muted); font: var(--type-small-weight) var(--type-small-size) / var(--type-small-line) var(--type-small-family); }
.timeline__body { white-space: pre-wrap; margin: var(--space-1) 0 0; }
.inline-form { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); align-items: start; }
/* Felder oben bündig: Beschriftungen und Eingabefelder bilden je eine Linie, Hilfetexte hängen darunter.
   Ein Knopf oder Ankreuzfeld als eigene Zelle rückt auf die Höhe der Eingabefelder
   (Abstand = Zeile von .ap-label, 14px/1.3, plus Abstand in .ap-field; Höhe wie .ap-input). */
.form-grid > :not(.ap-field):has(> .ap-btn), .form-grid > .ap-check { display: flex; align-items: center; min-height: 42px; padding-top: calc(var(--type-small-size) * 1.3 + var(--space-2)); }
.form-grid .ap-field { margin: 0; }
/* Vermittlungsablauf (intern/process.html): badges of a table cell wrap, lists inside cells. */
.process-cell { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
/* Table or diagram (intern.js); .stack and .ap-segmented override [hidden]. */
[data-process-view][hidden], [data-process-switch][hidden] { display: none; }
.process-list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--divider); }
.step:last-child { border-bottom: 0; }
.step__title { flex: 1 1 240px; }
/* Statusliste (Vermittlungserfolg): das Badge bleibt rechts neben dem Text, auch am Handy. */
.step-list--status .step { flex-wrap: nowrap; }
.step-list--status .step__title { flex: 1 1 auto; min-width: 0; }
.step__meta { color: var(--text-muted); font: var(--type-small-weight) var(--type-small-size) / var(--type-small-line) var(--type-small-family); }
/* Zweite Zeile beim Fälligkeitsdatum („in 3 Tagen“): dünner als das Datum, auch bei überfällig. */
.due-relative { font-weight: var(--type-body-weight); }
.step details { flex-basis: 100%; }
.step summary { cursor: pointer; color: var(--link); }
.prose-note { white-space: pre-wrap; }
/* Draft review (draft_detail.html): tabs appear once ui.js runs; .ap-tabs overrides [hidden]. */
.ap-tabs[hidden], .ap-tabpanel[hidden] { display: none; }
.email-preview { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--card); overflow-wrap: anywhere; }

/* Portal (au pairs): mobile first, narrow column */
.layout-portal__content { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--gutter-mobile) var(--space-16); box-sizing: border-box; }

/* Public (family links, questionnaires, sign-in): website style */
.layout-public { display: flex; flex-direction: column; min-height: 100vh; background: var(--shell); }
.layout-public__content { flex: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-12) var(--space-8); box-sizing: border-box; }
.layout-public__center { display: flex; justify-content: center; }
.layout-public .ap-footer { padding-top: var(--space-8); }
.layout-public .ap-footer__bottom { flex-wrap: wrap; gap: var(--space-3); margin-top: 0; padding-top: 0; border-top: 0; }

/* Lists inside cards (portal, family pages) */
.todo-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.todo-list { gap: var(--space-3); }
.todo-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.todo-list .ap-badge { justify-self: start; }
.facts { display: grid; gap: var(--space-3); margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 10rem) 1fr; gap: var(--space-3); }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text); }
fieldset.ap-field { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Sign-in pages (allauth) inside the AuthCard */
.ap-auth form { display: flex; flex-direction: column; gap: var(--space-4); }
.ap-auth .ap-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: calc(12.5px - 0.15em); } /* long allauth texts wrap instead of overflowing the card; same height on one line */
.ap-auth .ap-h3 { text-align: center; }
.ap-auth__qr { display: block; box-sizing: content-box; margin: 0 auto; width: 200px; height: 200px; padding: var(--space-3); background: var(--card); border-radius: var(--radius-sm); }
.auth-text { margin: 0; color: var(--text-body); }
.errorlist { margin: 0; padding: 0; list-style: none; }

@media (max-width: 959px) {
  .layout-intern { grid-template-columns: 1fr; }
  .layout-intern__bar { display: flex; }
  .layout-intern__mobile-brand { display: inline-flex; flex: none; }
  .layout-intern__section, .layout-intern__bar .ap-navbar__actions { display: none; }
  .navbar-search { flex: 1; }
  .layout-intern__content { padding: var(--space-6) var(--gutter-mobile); }
  .layout-public__content { padding: var(--space-8) var(--gutter-mobile); }
  .layout-public .ap-footer { padding: var(--space-8) var(--gutter-mobile); }
}

/* Live filters (intern.js): the submit button goes once JavaScript runs; .ap-btn overrides [hidden]. */
/* Filter above the agency lists: the fields keep their grid; the line below holds the "Filtern"
   button (without JavaScript) and the reset link, and keeps its height when both are hidden. */
.list-filter { display: flex; flex-direction: column; gap: var(--space-2); }
.list-filter__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); align-items: end; }
.list-filter__fields .ap-field { margin: 0; }
.list-filter__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); min-height: var(--space-6); }
.list-filter__actions [hidden] { display: none; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { justify-content: flex-end; }
.proposal-head { display: flex; align-items: center; gap: var(--space-4); }
.proposal-photo { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-full); flex: none; }

/* Drop-down lists: where the browser allows styling the list (appearance: base-select,
   Edge and Chrome), it looks like the design system's Dropdown (ap-menu). Other browsers keep
   their native list. Keyboard and screen reader behaviour stays native. */
@supports (appearance: base-select) {
  select.ap-select, select.ap-select::picker(select) { appearance: base-select; }
  select.ap-select { display: flex; align-items: center; }
  select.ap-select::picker-icon { display: none; } /* the design system draws its own arrow */
  select.ap-select::picker(select) {
    min-width: anchor-size(width); box-sizing: border-box; margin-top: var(--space-1); padding: 6px;
    background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
  }
  select.ap-select option {
    padding: 10px 12px; border-radius: var(--radius-sm); font: 500 14px/1.2 var(--font-sans); color: var(--text);
    cursor: pointer;
  }
  select.ap-select option::checkmark { display: none; }
  select.ap-select option:hover, select.ap-select option:focus-visible { background: var(--control-fill); outline: none; }
  select.ap-select option:checked { background: var(--accent-soft); color: var(--accent-strong); }
}


/* Dropzone: on touch devices "drag here" is meaningless (design system FileUpload: "Datei auswählen" first). */
@media (hover: none) { .ap-dropzone__drag { display: none; } }


/* Print: the agency layout's navigation goes (charts, feedback button: design system). */
@media print { .layout-intern .ap-sidebar, .layout-intern__bar { display: none !important; } }
/* Record pages (family, au pair, placement): tabs on screen, every area on paper. */
@media print { .record-tabs { display: none !important; } .record-panel[hidden] { display: flex !important; } }
/* Dashboard: heading and List/Kalender switch in one row (intern/worklist.html). */
.task-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.task-head .ap-h3 { margin: 0; }
[data-print][hidden] { display: none; } /* shown by intern.js */
/* Anmeldeformular on paper (intern/registration_form.html): question beside the answer, to save paper. */
@media print {
  .registration-sheet .dl--stacked { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-1) var(--space-4); }
  .registration-sheet .dl--stacked dd { margin: 0; }
  .registration-sheet .dl--stacked dt, .registration-sheet .dl--stacked dd { break-inside: avoid; }
}