/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* public/auftraege.css — MitaBase GO's inbox (module `auftraege`, 2026-09-22).
   Tokens only (public/tokens.css): no hex here, so the page follows the
   brand and both themes without a second edit. Logical properties
   throughout, because thirteen languages include two that read
   right-to-left.

   A state is a dot, a pill or a word — never a coloured stripe down the
   side of a card (the operator's rule; scripts/test-no-stripes.js). The
   one colour this page uses for urgency is the border of the whole card
   plus a word, which reads as "this card", not as a decorative bar. */

#au3-root { display: flex; flex-direction: column; gap: 14px; padding: 18px; }

/* ── the head ─────────────────────────────────────────────────────── */
.au3-head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.au3-head h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px;
  font-family: var(--mb-font-sans);
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em;
  color: var(--text-primary);
}
.au3-head-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au3-sub { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.au3-sec {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.au3-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-body);
  font-size: .8rem; font-weight: 600;
}
.au3-pill.urgent { border-color: var(--status-expiring); color: var(--status-expiring-text); }

/* ── a card ───────────────────────────────────────────────────────── */
.au3-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
}
.au3-card.urgent { border-color: var(--status-expiring); }
.au3-card.proposed { border-style: dashed; }
.au3-card.done { background: var(--surface-inset); }

.au3-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.au3-card-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-primary); font-size: .95rem; }
.au3-ward {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-secondary);
  font-size: .74rem;
}
.au3-no { color: var(--text-muted); font-family: var(--mb-font-mono); font-size: .76rem; }

.au3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 10px; }
.au3-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au3-lbl { color: var(--text-muted); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.au3-cell b { color: var(--text-primary); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.au3-urgent { color: var(--status-expiring-text); }

.au3-note, .au3-vero {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0;
  color: var(--text-secondary);
  font-size: .82rem;
}
.au3-note { padding: 8px 10px; border-radius: 10px; background: var(--surface-inset); }

.au3-detail {
  display: flex; flex-direction: column; gap: 6px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--border-subtle);
}
.au3-kv { display: flex; gap: 8px; justify-content: space-between; font-size: .84rem; }
.au3-kv span { color: var(--text-muted); }
.au3-kv b { color: var(--text-primary); font-weight: 600; }

/* ── the actions ──────────────────────────────────────────────────── */
.au3-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au3-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-body);
  font: inherit; font-size: .85rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mb-dur-fast) var(--mb-ease-out), color var(--mb-dur-fast) var(--mb-ease-out);
}
.au3-btn:hover { background: var(--surface-inset); color: var(--text-primary); }
/* the panel's primary is the brand fill (.dsp3-act.is-primary), in both themes */
.au3-btn.primary { background: var(--accent-fill); border-color: transparent; color: var(--accent-contrast); }
.au3-btn.primary:hover { background: var(--accent-fill); color: var(--accent-contrast); box-shadow: 0 0 0 4px var(--accent-soft); }
.au3-btn.danger { color: var(--status-expired-text); border-color: color-mix(in srgb, var(--mb-danger) 40%, transparent); }
.au3-btn.danger:hover { background: color-mix(in srgb, var(--mb-danger) 12%, transparent); }
.au3-btn.ghost { border-color: transparent; color: var(--text-muted); }
.au3-btn[disabled] { opacity: .55; cursor: not-allowed; }
.au3-btn:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.au3-ic { flex: 0 0 auto; }

/* ── after the accept: the thread with the ward (M4) ──────────────── */
/* A count of unread messages is a small disc and a number, never a
   coloured edge on the card. */
.au3-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--text-primary); color: var(--surface-card);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.au3-thread {
  display: flex; flex-direction: column; gap: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--border-subtle);
}
.au3-msgs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.au3-msgs li {
  max-inline-size: min(36rem, 90%);
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-inset);
}
/* Ours at the end of the line, the ward's at its start — logical sides,
   so the two right-to-left languages mirror it by themselves. */
.au3-msgs li.ours { align-self: flex-end; background: var(--surface-inset); }
.au3-msgs li.theirs { align-self: flex-start; }
.au3-msgs p { margin: 2px 0 0; color: var(--text-primary); font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.au3-field textarea {
  min-height: 88px;
  padding: 9px 11px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--field-ground);
  color: var(--text-primary);
  font: inherit;
  resize: vertical;
}
.au3-field textarea:focus-visible, .au3-field select:focus-visible { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── the settings pane ────────────────────────────────────────────── */
.au3-panel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
}
.au3-panel h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem; font-weight: 700;
}
.au3-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; }
.au3-field { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--text-body); }
/* A field is a line, not a box: `--field-ground` is transparent in both
   themes and `--field-line` is the strong hairline, because with no fill
   the edge is all the field has (scripts/test-bare-fields.js). */
.au3-field input {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--field-ground);
  color: var(--text-primary);
  font: inherit;
}
.au3-field input::placeholder, .au3-field textarea::placeholder { color: var(--text-muted); }
.au3-field input:hover, .au3-field textarea:hover, .au3-field select:hover { border-color: var(--border-strong); }
.au3-field input:focus-visible { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.au3-field small { color: var(--text-muted); font-size: .74rem; }
.au3-kinds { display: flex; flex-wrap: wrap; gap: 10px; }
.au3-check {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: .85rem;
  cursor: pointer;
}
.au3-check input { width: 18px; height: 18px; accent-color: var(--accent-fill-solid); }

/* ── a series, its choice on the card, partners, hours (M5) ──────── */
.au3-pick {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 12px;
  border: 1px solid var(--border-default); border-radius: 12px;
}
.au3-pick legend { padding: 0 4px; color: var(--text-primary); font-size: .84rem; font-weight: 700; }
.au3-days { display: flex; flex-wrap: wrap; gap: 8px; }
.au3-pick .au3-field { max-width: 18rem; }
/* What houses read about us (contract v2.1): the closed days as chips, the sentence full width */
.au3-closed-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.au3-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface-inset); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.au3-chip-x { min-width: 28px; min-height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--text-body); cursor: pointer; font-size: 1rem; line-height: 1; }
.au3-chip-x:hover, .au3-chip-x:focus-visible { background: var(--surface-inset); color: var(--text-primary); }
.au3-wide { grid-column: 1 / -1; }
.au3-field textarea, .au3-field select { min-height: 44px; padding: 9px 11px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field-ground); color: var(--text-primary); font: inherit; }
.au3-day {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border-default); border-radius: 10px;
  color: var(--text-primary); font-size: .85rem; font-weight: 700;
  cursor: pointer;
}
.au3-day input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.au3-day:has(input:checked) { border-color: var(--accent-fill-solid); background: var(--surface-inset); }
.au3-day:has(input:focus-visible) { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
/* ── the tabs (M8): five stations of the order desk ──────────────── */
/* The Disposition's view tabs (.dsp3-tabs), in both themes: one inset
   track, the open station a raised card with a hairline, the others
   transparent and quiet (operator's UI round S3, 2026-10-28 — the old
   pills were white in dark mode, the open one inverted). */
.au3-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-inset); align-self: flex-start; max-width: 100%; }
.au3-tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 38px; padding: 0 14px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background var(--mb-dur-fast) var(--mb-ease-out), color var(--mb-dur-fast) var(--mb-ease-out);
}
.au3-tab:hover { color: var(--text-primary); }
.au3-tab:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.au3-tab.is-on { background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
.au3-tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--surface-overlay); color: var(--text-secondary);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.au3-tab.is-on .au3-tab-n { background: var(--accent-soft); color: var(--accent); }

/* ── who is asking (M8): a word, never a stripe ───────────────────── */
.au3-origin {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-inset); border: 1px solid var(--border-default);
  color: var(--text-muted); font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.au3-origin.is-partner { color: var(--accent); border-color: currentColor; background: transparent; }
.au3-origin.is-app { color: var(--mb-purple); border-color: currentColor; background: transparent; }

/* the strike rule's pause, said out loud */
.au3-paused { border: 1px solid var(--status-expiring); }

/* ── Verlauf (M8) ─────────────────────────────────────────────────── */
.au3-hist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au3-hist li {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card);
  font-size: .85rem; color: var(--text-body);
}
.au3-hist li > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
/* the house's mark in Verlauf (v1.7): the same plate, smaller */
.au3-hist .au3-logo { height: 18px; max-width: 42px; align-self: center; }
.au3-hist-state { font-weight: 700; color: var(--text-primary); }

/* ── Einrichtungen (M8): stars are ours alone ─────────────────────── */
.au3-counts { margin-block-start: 2px; }
/* What the house said (M8c) — read-only stars, ticks, sentences. */
.au3-stars { display: inline-flex; align-items: center; gap: 2px; }
.au3-stars.is-read { color: var(--accent); }
.au3-recv { display: flex; flex-direction: column; gap: 6px; margin-block-start: 8px; }
.au3-recv-line { display: flex; align-items: center; gap: 8px; margin: 0; }
.au3-tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.au3-tagchip {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 650;
}
.au3-recv-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au3-recv-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au3-recv-list li p { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--text-primary); }

/* the assign dialog's ride list */
.au3-assign-rides { margin: 0 0 10px; padding-inline-start: 18px; color: var(--text-body); font-size: .85rem; }

.au3-partners { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au3-partners li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-default); border-radius: 10px;
  color: var(--text-primary); font-size: .88rem;
}
.au3-office { display: flex; align-items: center; gap: 6px; margin: 0; }
.au3-hours { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; }
.au3-hours legend { padding: 0 4px; color: var(--text-primary); font-size: .84rem; font-weight: 700; }
.au3-hours-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.au3-hours-row .au3-check { min-width: 76px; }
.au3-time { flex: 0 1 8rem; }
/* "von" and "bis" are said once, over the first day; the rows below keep
   them for the screen reader and drop them from the eye. */
.au3-hours-row + .au3-hours-row .au3-time > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#au3-root [hidden] { display: none !important; }

/* ── the empty state: empty is not broken ─────────────────────────── */
.au3-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 40px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--text-muted);
  text-align: center;
}
.au3-empty b { color: var(--text-primary); font-size: .95rem; }
.au3-empty p { max-width: 42ch; margin: 0; font-size: .84rem; color: var(--text-secondary); }

/* what a house asking to become a partner needs (contract v1.4, 2026-09-28) */
.au3-link-needs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: .84rem; }
.au3-link-needs dt { color: var(--text-muted); }
.au3-link-needs dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .au3-btn { transition: none; }
}

/* a house's own logo in place of the icon (contract v1.6, 2026-09-28):
   on a small light plate, so a dark mark on the dark theme is still seen */
.au3-logo { flex: none; width: auto; max-width: 56px; height: 24px; padding: 2px 4px; object-fit: contain; border-radius: 6px; background: var(--mb-alt); }

/* several patients on one trip (contract v1.8): one frame around their
   cards, the count and the two group actions on top — no coloured stripe,
   a hairline and the inset surface, like any other group on this page */
.au3-group { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-inset); }
.au3-group-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.au3-group-head b { display: inline-flex; align-items: center; gap: 6px; }
.au3-group-head .au3-actions { margin: 0; }
/* when the car will be there, under its ride (v1.8) */
.au3-eta { display: block; font-weight: 400; }
.au3-late { display: inline-flex; align-items: center; gap: 4px; color: var(--status-expiring-text); }

/* the yes/no pair (MT.ui.decide) ends the row: the yes at the far end */
.au3-decide { margin-inline-start: auto; }