/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* ════════════════════════════════════════════════════════════════
   ANTRÄGE v3 — the approval desk.

   The page is src/features/requests/requests.page.ts →
   public/js/pages/requests.js; this sheet holds every .rq3-* rule.
   Token-native under .mt-scope — dark mode is a token swap, never a
   parallel rule set. Shares the KPI / action / dialog grammar with
   fuhrpark.css + dispatch.css (.fp3-*, .dsp3-*). The driver PWA's
   .rq-* rules live in its own sheet and are unrelated.
   ════════════════════════════════════════════════════════════════ */

.rq3 { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; padding: 14px 16px 20px; }
.rq3-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rq3-title-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq3-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display), sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.rq3-sub { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .74rem; color: var(--text-muted); max-width: 80ch; }
.rq3-ic { flex: 0 0 auto; }
.rq3-av { flex: 0 0 auto; }
.rq3-avfall { display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .7rem; font-weight: 800; flex: 0 0 auto; }

/* ── KPI strip ──────────────────────────────────────────────────── */
.rq3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rq3-kpi { display: flex; flex-direction: column; gap: 5px; }
.rq3-kpi-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-inset); color: var(--text-secondary); }
.rq3-kpi.is-warn .rq3-kpi-ic { background: var(--status-expiring-soft); color: var(--status-expiring); }
.rq3-kpi-v { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.rq3-kpi-sub { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.rq3-kpi-l { font-size: .7rem; font-weight: 600; color: var(--text-muted); }

/* ── toolbar ────────────────────────────────────────────────────── */
.rq3-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-subtle);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
}
.rq3-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rq3-chipbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rq3-chipbtn:hover { background: var(--surface-hover); color: var(--text-primary); }
.rq3-chipbtn.is-on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-fill-solid); }
.rq3-chipbtn b { font-variant-numeric: tabular-nums; }
.rq3-chipbtn:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.rq3-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq3-select {
  height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--field-line);
  background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .8rem; min-width: 0;
}
.rq3-select:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.rq3-search { display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 36px; min-width: 180px; flex: 1; max-width: 300px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-muted); }
.rq3-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .8rem; }
.rq3-search input:focus { outline: none; }
.rq3-search:focus-within { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }

/* ── the rows — an inbox, not a staff directory (2026-09-13) ─────
   One request is one full-width row inside one surface, rows parted
   by a hairline. What leads is the KIND (a tinted icon disc), then the
   ask as the subject line, the sender and the time, the reason and the
   decision context, and at the end the two decisions or the verdict.
   No coloured edge on anything: the disc, the pills and the words say
   what state a row is in. */
.rq3-list { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.rq3-rows { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); overflow: hidden; }
.rq3-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: start;
  padding: 14px 16px; min-width: 0;
  border-block-end: 1px solid var(--border-subtle);
  transition: background .15s ease;
}
.rq3-row:last-child { border-block-end: 0; }
.rq3-row:hover { background: var(--surface-hover); }
.rq3-row:not(.is-open) { color: var(--text-secondary); }
.rq3-row:not(.is-open) .rq3-ask { color: var(--text-secondary); }
.rq3-row:not(.is-open) .rq3-kind { opacity: .7; }

/* the kind: the one place the type colour lives */
.rq3-kind { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-inset); color: var(--text-secondary); }
.rq3-kind.is-sky { background: var(--status-info-soft); color: var(--status-info); }
.rq3-kind.is-rose { background: var(--status-expired-soft); color: var(--status-expired); }
.rq3-kind.is-amber { background: var(--status-expiring-soft); color: var(--status-expiring); }
.rq3-kind.is-violet { background: var(--accent-soft); color: var(--accent-text); }

.rq3-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rq3-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.rq3-ask { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.rq3-tag { font-family: var(--font-display), sans-serif; font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); vertical-align: middle; }
.rq3-chip.is-urgent { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; background: var(--status-expiring-soft); color: var(--status-expiring); }

/* who, what kind, when — one quiet line, parted by dots */
.rq3-meta { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); }
.rq3-meta > span:not(:first-child)::before { content: "·"; margin-inline-end: 12px; color: var(--border-strong); }
.rq3-meta em { font-style: normal; font-variant-numeric: tabular-nums; }
.rq3-from { display: inline-flex; align-items: center; gap: 6px; }
.rq3-from b { font-weight: 700; color: var(--text-primary); }
.rq3-av { flex: 0 0 auto; }
.rq3-att { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rq3-att:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; border-radius: 4px; }

.rq3-reason { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-secondary); max-width: 72ch; }
.rq3-note { margin: 0; font-size: .74rem; font-style: italic; color: var(--text-muted); }

/* decision context: chips, in one wrapping line */
.rq3-ctxs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-block-start: 2px; }
.rq3-ctx { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; border-radius: 8px; font-size: .72rem; font-weight: 600; background: var(--surface-inset); color: var(--text-secondary); flex-wrap: wrap; }
.rq3-ctx b { font-variant-numeric: tabular-nums; }
.rq3-ctx.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring); }
.rq3-ctx.is-bad { background: var(--status-expired-soft); color: var(--status-expired); }
.rq3-ctx.is-info { background: var(--status-info-soft); color: var(--status-info); }

/* the decided row's two steps */
.rq3-tl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: 2px; }
.rq3-tl-step { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.rq3-tl-step em { font-style: normal; font-variant-numeric: tabular-nums; }
.rq3-tl-step.is-good { color: var(--status-valid); }
.rq3-tl-step.is-bad { color: var(--status-expired); }
.rq3-tl-step.is-warn { color: var(--status-expiring); }
.rq3-tl-step:not(:first-child)::before { content: "→"; margin-inline-end: 8px; color: var(--border-strong); }

/* the end of the row: the two decisions, or the verdict */
.rq3-side { display: flex; align-items: center; gap: 8px; justify-self: end; }
.rq3-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.rq3-status.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring); }
.rq3-status.is-good { background: var(--status-valid-soft); color: var(--status-valid); }
.rq3-status.is-bad { background: var(--status-expired-soft); color: var(--status-expired); }
.rq3-status.is-muted { background: var(--surface-inset); color: var(--text-muted); }

/* decided history, collapsed */
.rq3-done { border: 1px dashed var(--border-strong); border-radius: 18px; padding: 10px 12px; }
.rq3-done summary { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; list-style: none; min-height: 34px; }
.rq3-done summary::-webkit-details-marker { display: none; }
.rq3-done[open] summary { margin-block-end: 10px; }
.rq3-done summary .rq3-ic { transition: transform .18s ease; }
.rq3-done[open] summary .rq3-ic { transform: rotate(180deg); }
.rq3-more { align-self: center; margin-block-start: 10px; }

/* ── empty states (a newcomer must understand what this IS) ─────── */
.rq3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 18px; }
.rq3-empty b { font-size: .9rem; color: var(--text-primary); }
.rq3-empty p { margin: 0; font-size: .78rem; max-width: 56ch; line-height: 1.55; }
.rq3-empty.is-error { border-color: var(--status-expired); border-style: solid; }
.rq3-empty.hidden { display: none !important; }

/* ── motion — purposeful, killable ──────────────────────────────── */
@keyframes rq3Rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rq3-rise { animation: rq3Rise .3s cubic-bezier(.22, .8, .36, 1) both; }
.rq3-rows .rq3-row:nth-child(2) { animation-delay: 40ms; }
.rq3-rows .rq3-row:nth-child(3) { animation-delay: 80ms; }
.rq3-rows .rq3-row:nth-child(4) { animation-delay: 120ms; }
.rq3-rows .rq3-row:nth-child(n+5) { animation-delay: 160ms; }

/* ── phone ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rq3 { padding: 10px 10px 16px; }
  .rq3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq3-row { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 10px; padding: 12px; }
  .rq3-kind { width: 34px; height: 34px; border-radius: 10px; }
  .rq3-side { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
  .rq3-side .dsp3-act { min-height: 44px; flex: 1; justify-content: center; }
  .rq3-chipbtn, .rq3-select { min-height: 44px; }
  .rq3-search { height: 44px; max-width: none; }
}

/* ── calm by default ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rq3 *, .rq3-rise { animation: none !important; transition: none !important; }
}