/* dashboard.css — HWB-DASH-INNENLEBEN-01 (Design-Welle Handwerker-Dashboard + Anfrage-Strecke)
   Ergaenzt style.css (bewusst NICHT veraendert -- Arbeitsteilung mit dem parallelen
   Design-Agenten, der style.css sowie profile.html/SEO-Seiten besitzt) um Feinschliff fuer
   das Handwerker-Dashboard (templates/dashboard*.html) und die Verbraucher-Anfrage-Strecke
   (inquiry-form.html): konsistente Seiten-Koepfe, Fokus-Zustaende, Karten-Elevation im
   Ruhezustand, Prioritaets-Hierarchie "Heute wichtig" sowie das Schritt-Erlebnis der
   Anfrage-Strecke. Nutzt ausschliesslich bestehende Tokens aus style.css (:root /
   [data-theme="dark"]) -- keine neuen Farbwerte, kein neues Skeleton-/Empty-State-System
   (wiederverwendet .skeleton-card/.skeleton-title/.skeleton-text/.empty-state, siehe
   SEARCH_BEFORE_BUILD). Bewegungsreduktion ist bereits global in style.css geregelt
   (prefers-reduced-motion, Zeile ~88) -- neue Transitionen hier erben das automatisch.
   Eingebunden per eigenem <link>-Tag NACH fragments/layout::head (gleiches Muster wie
   listings-map.html mit der Leaflet-MarkerCluster-CSS), damit style.css unangetastet bleibt. */

/* === Seiten-Kopf: konsistente Kopfzeile fuer die Dashboard-Unterseiten, die bisher
   keinen oder einen abweichenden Titel-Block hatten (Anfragen/Angebote/Bewertungen/
   Statistiken/Premium). Seiten mit bereits gutem eigenen Kopf (Ausschreibungen/Radar-
   Alarme/Profil) behalten ihre bestehende .dashboard-section-header-Struktur. */
.dash-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.dash-page-head-text h2 {
    font-size: var(--text-h2);
    margin: 0 0 4px;
}
.dash-page-head-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
    max-width: 56ch;
}
.dash-page-head-action { flex-shrink: 0; }

/* === Eyebrow-Label fuer Prioritaets-/Abschnitts-Hierarchie ("Heute wichtig" oben,
   "Auf einen Blick" fuer die Kennzahlen darunter) -- macht die Reihenfolge auf einen
   Blick lesbar statt sie nur durch DOM-Position zu implizieren. */
.dash-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.dash-eyebrow--accent { color: var(--primary-text); }
.dash-eyebrow .dash-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.dash-priority-zone { margin-bottom: var(--space-6); }
.dash-secondary-zone { margin-bottom: var(--space-5); }

/* === Karten-Elevation: dezenter Ruhezustand statt komplett flach bis zum Hover,
   gleiche Schatten-Tokens wie ueberall im Projekt (--shadow-sm/--shadow-hover). === */
.stat-card, .inquiry-card, .quote-card, .review-card {
    box-shadow: var(--shadow-sm);
}

/* === Fokus-Zustaende: Tastatur-Bedienbarkeit fuer klickbare Karten/Tabs, die bislang
   nur eine Hover-, aber keine sichtbare Fokus-Kontur hatten. */
.inquiry-card:focus-visible,
.quote-card:focus-visible,
.review-card:focus-visible,
.stat-card:focus-visible,
.dash-notif-bell:focus-visible,
.dashboard-tabs a:focus-visible,
.bookmark-tab:focus-visible,
.trade-card:focus-visible,
.target-card:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-btn);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* === Leerzustaende: konstruktive Handlungszeile (ergaenzt .empty-state aus style.css
   um einen konsistenten CTA-Abstand, wiederverwendet .empty-state-cta). === */
.empty-state .dash-empty-cta { margin-top: var(--space-4); }

/* === Anfrage-Strecke (inquiry-form.html): Schritt-Erlebnis === */
.step-progress-label {
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-muted); /* ink-subtle fiel im Axe-Scan durch (Kontrast < 4,5:1) */
    margin: -30px 0 26px;
}
.doi-hint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    font-size: 0.85rem;
    color: var(--ink-muted);
    line-height: 1.55;
    margin-top: 24px;
}
.doi-hint strong { color: var(--ink); }
.doi-hint svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--primary-text); }

/* Formular-Schritt: dezenter Fade/Slide beim Wechsel statt hartem Umschalten. Respektiert
   automatisch prefers-reduced-motion (globale Regel in style.css setzt transition-duration
   auf 0.01ms). */
.form-step {
    animation: dashStepIn 0.28s var(--ease-out, ease-out);
}
@keyframes dashStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .dash-page-head { align-items: flex-start; }
}

/* === HWB-DASH-BEGEISTERUNG-01 (Betreiber-Freigabe): Begruessung, Mikrointeraktionen,
   Leerzustand-/Nav-Feinschliff fuer das Handwerker-Dashboard. Ergaenzt die bestehenden
   Bausteine oben (Elevation/Fokus-Ringe/Eyebrow/Empty-State-CTA) -- keine Duplikate,
   nur neue Selektoren. Alles ausschliesslich mit vorhandenen Tokens aus style.css. === */

/* --- Begruessung (dashboard.html): "Guten Morgen/Tag/Abend, <Firma>" + Tageskontext.
   Start unsichtbar via inline style="display:none" im Template, JS blendet erst nach dem
   Laden ein -- dieser dezente Einstiegs-Fade macht daraus keinen harten Sprung. --- */
.dash-greeting {
    margin-bottom: var(--space-5);
    animation: dashGreetingIn var(--dur-base) var(--ease-out);
}
.dash-greeting-title {
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0 0 4px;
}
.dash-greeting-context {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-muted);
}
@keyframes dashGreetingIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Druck-Feedback (transform scale statt der globalen translateY(1px) von .btn, damit
   sich Karten/Tabs/Glocke im Dashboard bewusst als eigene Klick-Flaechen anfuehlen).
   Kurze Sondertransition (90ms) fuer einen knackigen statt traegen Druckpunkt. --- */
.dashboard-tabs a:active,
.dash-notif-bell:active,
.inquiry-card:active,
.quote-card:active,
.stat-card:active,
.trade-card:active,
.target-card:active,
.dash-priority-zone .btn:active,
.dash-secondary-zone .btn:active,
#profileCompletenessSection .btn:active,
.premium-banner .btn:active {
    transform: scale(0.98);
    transition-duration: 90ms;
}

/* --- Status-Pill-Uebergaenge: .status-badge/.plan-badge wechseln ihre Farbe bislang ohne
   jede Transition (harter Sprung bei Statuswechsel, z. B. Anfrage-Status oder Tarif-Badge
   nach einem Upgrade). --- */
.status-badge,
.plan-badge {
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

/* --- Aktiver Tab klarer: staerkerer Farbkontrast + ein schmaler Unterstrich als zweites,
   nicht-farbabhaengiges Signal (Barrierefreiheit) -- als inset-box-shadow statt eines
   absolut positionierten Pseudo-Elements, damit nichts vom "overflow-x: auto" der
   Tab-Leiste abgeschnitten wird. --- */
.dashboard-tabs a.tab-active {
    color: var(--primary-text);
    box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--primary);
}
.dashboard-tabs a.tab-active .tab-icon svg {
    color: var(--primary-text);
}

/* --- Benachrichtigungs-Glocke: dezenter Pop beim Erscheinen des Zaehler-Badges (reine
   CSS-Loesung ueber den Attribut-Selektor auf das von dashboard-nav.html per JS gesetzte
   style="display:inline-block" -- die STOMP-/Badge-Logik selbst wird bewusst nicht
   angefasst, siehe Arbeitsteilung). Zusaetzlich der korrekte Text-Ton auf der Orange-
   Flaeche: style.css nutzt fest "#fff", das eigene Design-Token --on-primary ist aber
   exakt fuer Text auf Orange-Flaechen gedacht und in beiden Themes kontrastsicher. --- */
.dash-notif-badge {
    color: var(--on-primary);
    transition: transform var(--dur-fast) var(--ease-out);
}
.dash-notif-badge[style*="inline-block"] {
    animation: dashNotifPop var(--dur-base) var(--ease-out);
}
@keyframes dashNotifPop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.dash-notif-bell:hover {
    background: var(--border-subtle);
}