/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3.1.0/C (Nr. 243) · Dashboard im Portal — Werbekunde („Meine Werbung") und Agentur („Meine Kunden").
   Vorlage: docs/entwurf-dashboard.html (Bausteine antwort · kachel · aufgaben · saeulen · kamp).

   ⚠ Eigene Datei unter `resources/stil/` (hängt an `staticResources("/stil", "stil")`), damit die
     1.250 Zeilen Stil in portal.html nicht weiter wachsen. Alles hier trägt das Präfix `db-`, weil
     portal.html `.kachel`, `.zahlen`, `.balken` und `table` bereits anders belegt — eine geborgte
     Klasse wirkt dort nicht oder wirkt falsch (Lehre „angular-klassen-nicht-borgen").
   ⚠ KEINE neuen Farben: nur die Tokens aus portal.html `:root`. Status steht nie nur in der Farbe
     — jede Marke trägt Text, jede Kachel einen Fuss.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Kopfzeile: Titel · Zeitraum-Schalter „Geldzahlen" · Stand ────────────────────────────── */
.db-kopf { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.db-kopf .wachs { flex:1; }
.db-kopf h2 { margin:0 0 2px; }
.db-kopf .unter { margin:0; }
.db-krume { font-weight:500; color:var(--tinte3); }
.db-stand { font-size:12px; color:var(--tinte3); }
.db-stand button { border:0; background:none; padding:0; font:inherit; font-size:12px; color:var(--akzent-tief); font-weight:600; cursor:pointer; }
.db-stand button:hover { text-decoration:underline; }
.db-zr-wort { align-self:center; margin-right:-4px; }
.db-zeitraum { display:inline-flex; border:1px solid var(--linie2); border-radius:8px; overflow:hidden; height:34px; background:#fff; }
.db-zeitraum button { border:0; background:none; padding:0 12px; font:inherit; font-size:12.5px; font-weight:600; color:var(--tinte2); cursor:pointer; }
.db-zeitraum button + button { border-left:1px solid var(--linie); }
.db-zeitraum button[aria-pressed="true"] { background:var(--tinte); color:#fff; }
.db-zeitraum button:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }

/* ── Antwortzeile: EIN Satz, der „muss ich heute etwas tun?" beantwortet ─────────────────── */
.db-antwort { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; margin-bottom:16px; border:1px solid; }
.db-antwort.ist-gut { background:var(--ok-weich); border-color:var(--ok-linie); color:var(--ok-tief); }
.db-antwort.ist-warn { background:var(--warten-weich); border-color:var(--warten-linie); color:var(--warten-tief); }
.db-antwort.ist-stopp { background:var(--stopp-weich); border-color:var(--stopp-linie); color:var(--stopp-tief); }
.db-antwort .ico { width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none; background:#fff; }
.db-antwort b { font-weight:700; }
.db-antwort .rest { font-size:12.5px; opacity:.85; }

/* ── Kacheln ────────────────────────────────────────────────────────────────────────────────── */
.db-zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.db-kachel { padding:15px 17px; position:relative; }
.db-kachel .wert { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:28px; letter-spacing:-.02em; line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums; }
.db-kachel .fuss { font-size:11.5px; color:var(--tinte3); margin-top:3px; }
.db-kachel .sub { font-size:12px; color:var(--tinte2); margin-top:4px; }
.db-kachel .tend { font-size:11.5px; margin-top:6px; display:flex; align-items:center; gap:5px; color:var(--tinte2); }
.db-kachel .tend i { font-style:normal; font-weight:700; }
.db-kachel .tend.auf i { color:var(--ok); } .db-kachel .tend.ab i { color:var(--stopp); }
.db-kachel.warn { border-color:var(--warten-linie); background:var(--warten-weich); }
.db-kachel.warn .lbl, .db-kachel.warn .wert { color:var(--warten); }
.db-kachel.stopp { border-color:var(--stopp-linie); background:var(--stopp-weich); }
.db-kachel.stopp .lbl, .db-kachel.stopp .wert { color:var(--stopp); }
/* Klickbare Kachel: › rechts oben, Enter/Leertaste über role=button (Nachtrag Bedienbarkeit). */
.db-kachel.klick { cursor:pointer; padding-right:34px; }
.db-kachel.klick:hover { border-color:var(--akzent); }
.db-kachel.klick::after { content:'›'; position:absolute; right:14px; top:12px; font-size:18px; color:var(--tinte4); }
.db-kachel.klick:hover::after { color:var(--akzent); }
.db-kachel.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }

/* ── Raster zwei Spalten, Karten ────────────────────────────────────────────────────────────── */
.db-raster { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:16px; margin-bottom:16px; }
.db-spalte { display:flex; flex-direction:column; gap:16px; min-width:0; }
.db-karte { padding:18px; min-width:0; }
.db-kk { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.db-kk .lbl { margin:0; }
.db-kk .r { font-size:12px; color:var(--tinte3); }
.db-link { font-size:12.5px; color:var(--akzent-tief); font-weight:600; text-decoration:none; cursor:pointer; border:0; background:none; padding:0; font-family:inherit; }
.db-link:hover { text-decoration:underline; }
.db-leer { padding:14px 0; color:var(--tinte3); font-size:13px; }

/* ── Aufgaben: gruppiert, dringend oben, die GANZE Zeile ist der Knopf ───────────────────── */
.db-aufg-gr { border-top:1px solid var(--linie); padding:10px 0 6px; }
.db-aufg-gr:first-child { border-top:0; padding-top:0; }
.db-aufg-gr .gk { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; font-weight:700; }
.db-aufg-gr .gk .n { min-width:22px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; }
.db-aufg-gr.stopp .gk .n { background:var(--stopp-weich); color:var(--stopp); }
.db-aufg-gr.warn .gk .n { background:var(--warten-weich); color:var(--warten); }
.db-aufg-gr.neut .gk .n { background:var(--flaeche2); color:var(--tinte2); }
.db-aufgabe { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; min-height:44px; }
.db-aufgabe:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
.db-aufgabe:hover { background:var(--flaeche2); }
.db-aufgabe.dringend { background:var(--stopp-weich); }
.db-aufgabe .punkt { width:8px; height:8px; border-radius:999px; background:var(--warten); margin-top:6px; flex:none; }
.db-aufgabe.dringend .punkt { background:var(--stopp); }
.db-aufgabe.neut .punkt { background:var(--tinte4); }
.db-aufgabe .txt { flex-grow:1; min-width:0; }
.db-aufgabe .txt b { font-size:13px; font-weight:600; display:block; }
.db-aufgabe .txt span { font-size:11.5px; color:var(--tinte2); }
.db-aufgabe .txt .kenn { color:var(--tinte3); font-size:11px; }
.db-aufgabe .frist { font-size:11.5px; font-weight:700; white-space:nowrap; margin-top:2px; }
.db-aufgabe.dringend .frist { color:var(--stopp); }
.db-aufgabe .knopf { flex:none; }
.db-ruhig { padding:14px; border-radius:8px; background:var(--ok-weich); color:var(--ok-tief); font-size:13px; display:flex; gap:10px; align-items:center; }

/* ── Säulen: EINE Reihe, Akzent, Tag ohne Meldung schraffiert, Tooltip beim Zeigen ────────── */
.db-saeulen { display:flex; align-items:flex-end; gap:3px; height:84px; position:relative; }
.db-saeulen i { flex:1 1 0; background:var(--akzent); border-radius:2px 2px 0 0; min-height:2px; position:relative; cursor:default; }
.db-saeulen i.leer-tag { background:repeating-linear-gradient(45deg,rgba(176,125,10,.30) 0 4px,transparent 4px 8px); border:1px dashed var(--warten); }
.db-saeulen i.heute { background:var(--akzent-tief); }
.db-saeulen i:hover { filter:brightness(.85); }
.db-saeulen i:hover::after, .db-saeulen i:focus::after { content:attr(data-t); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--tinte); color:#fff; font-size:11px; padding:4px 7px; border-radius:6px; white-space:nowrap; z-index:3; }
.db-achse { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--tinte3); }
.db-legende { display:flex; gap:14px; font-size:11.5px; color:var(--tinte2); margin-top:8px; flex-wrap:wrap; }
.db-legende i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; background:var(--akzent); }
.db-legende i.leer { background:repeating-linear-gradient(45deg,rgba(176,125,10,.30) 0 4px,transparent 4px 8px); border:1px dashed var(--warten); }

/* ── Kampagnenzeilen: Name · Balken Ausspielungen · Balken Budget · Marke ───────────────────── */
.db-kamp { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--linie); cursor:pointer; border-radius:8px; }
.db-kamp:first-child { border-top:0; }
.db-kamp:hover { background:var(--flaeche2); }
.db-kamp:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
.db-kamp b { display:block; font-size:13.5px; }
.db-kamp .s { font-size:11.5px; color:var(--tinte2); }
.db-kamp .bl { font-size:11.5px; color:var(--tinte2); margin-top:4px; display:flex; justify-content:space-between; gap:8px; }
.db-balken { height:7px; border-radius:3px; background:var(--flaeche2); overflow:hidden; min-width:70px; display:block; border:1px solid var(--linie); }
.db-balken i { display:block; height:7px; background:var(--akzent); }
.db-balken i.ok { background:var(--ok); } .db-balken i.warn { background:var(--warten); } .db-balken i.stopp { background:var(--stopp); }

/* ── Tabellen (Rechnungen, Kundenliste) — die Faltung unter 640 px übernimmt `.tab-halter` ─── */
.db-tab th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte3); padding:10px 12px; border-bottom:1px solid var(--linie); white-space:nowrap; }
.db-tab td { padding:9px 12px; border-bottom:1px solid var(--linie); vertical-align:middle; }
.db-tab tr:last-child td { border-bottom:0; }
.db-tab tbody tr.klick { cursor:pointer; }
.db-tab tbody tr.klick:hover td { background:var(--akzent-weich); }
.db-tab tbody tr.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
.db-tab td.warnz { color:var(--warten); font-weight:700; } .db-tab td.stoppz { color:var(--stopp); font-weight:700; }
.db-tab .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.db-tab .klein { font-size:11.5px; color:var(--tinte2); }
.db-tab-karte { margin-bottom:16px; }
.db-tab-karte .db-kk { padding:14px 16px 4px; margin:0; }

/* ── Kundenwahl der Agentur im Kopf: „Optik Weber ▾" öffnet eine Liste ─────────────────────── */
.db-kunde-menue { position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:220px; max-height:60vh; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.db-kunde-menue button { text-align:left; min-height:36px; padding:0 12px; border:0; background:none; border-radius:7px; font:inherit; font-size:13px; color:var(--tinte); cursor:pointer; display:flex; align-items:center; gap:8px; }
.db-kunde-menue button:hover, .db-kunde-menue button:focus-visible { background:var(--akzent-weich); color:var(--akzent-tief); outline:none; }
.db-kunde-menue button .marke { margin-left:auto; }
#kopfKundeHalter { position:relative; display:inline-flex; }

/* ── Zähler am Reiter „Meine Werbung" (F7): dieselbe Quelle wie die Antwortzeile ───────────── */
#lageZahl .marke { padding:1px 7px; font-size:11px; margin-left:4px; }

/* ── Handy: alles stapelt, Tippziele ≥ 44 px, nichts rollt quer ─────────────────────────────── */
@media (max-width:640px) {
  .db-raster, .db-kamp { grid-template-columns:1fr; }
  .db-kamp { gap:8px; }
  .db-zahlen { grid-template-columns:1fr 1fr; }
  .db-kachel .wert { font-size:24px; }
  .db-kachel.klick { min-height:44px; }
  .db-kopf .db-stand { width:100%; }
  .db-zeitraum { height:44px; }
  .db-zeitraum button { min-width:44px; }
  .db-kunde-menue button { min-height:44px; }
  .db-aufgabe .knopf { display:none; }   /* die ganze Zeile ist der Knopf — der zweite wäre Platzverschwendung */
  .db-tab td.num::before, .db-tab td[data-l]::before { content:attr(data-l) " · "; }
}