/*
 * Brautmode Saarpfalz CRM - Dashboard-Seite (Nacht-Run 2026-06-10)
 * Eigene Styles fuer den Tagesueberblick. Basiskomponenten (kpi, card,
 * today-panel, attention-grid, btn, chip) kommen aus syn-admin.css.
 * Kein Glassmorphism, Gold nur als Akzent (Sterne, Italic-Schlusswort).
 */

/* ---------- Kopf ---------- */

.dash-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--admin-text-mute);
  margin-bottom: var(--sp-2);
}

.dash-greeting-accent {
  font-style: italic;
  color: var(--loyalty-gold);
  font-weight: 600;
}

.dash-updated {
  font-size: 11px;
  color: var(--admin-text-mute);
  margin-top: var(--sp-1);
}

/* ---------- Kennzahlen-Streifen ---------- */

.dash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

@media (max-width: 760px) { .dash-kpi-strip { grid-template-columns: 1fr; } }

/* Kacheln sind echte Links: Fokus sichtbar, Hover als Hairline-Lift */
a.dash-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 118px;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: var(--admin-charcoal);
  border: 1px solid var(--admin-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
a.dash-tile:hover { border-color: var(--admin-border-hov); transform: translateY(-1px); }
a.dash-tile:focus-visible { outline: 2px solid var(--admin-cyan); outline-offset: 2px; }

.dash-tile-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--admin-text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.dash-tile-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--admin-text);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.dash-tile-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-mute);
}

.dash-tile-sub { font-size: 12px; color: var(--admin-text-dim); }

/* Quelle + Zeitraum: unterste Zeile jeder Kachel */
.dash-tile-caption {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--admin-border-soft);
  font-size: 10.5px;
  color: var(--admin-text-mute);
  letter-spacing: 0.02em;
}

.dash-trend-up { color: var(--admin-success); font-size: 12px; font-weight: 600; }
.dash-trend-down { color: var(--admin-danger); font-size: 12px; font-weight: 600; }

/* ---------- Skeleton-Loader ---------- */

.dash-skel {
  display: inline-block;
  height: 22px;
  width: 72%;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg,
    rgba(58,51,53,0.05) 25%,
    rgba(58,51,53,0.11) 50%,
    rgba(58,51,53,0.05) 75%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.4s ease-in-out infinite;
}
.dash-skel.sm { height: 12px; width: 55%; }
/* Schmaler Inline-Platzhalter, z. B. in der Aktualisiert-Zeile */
.dash-skel.line { height: 11px; width: 220px; max-width: 60%; border-radius: var(--r-pill); vertical-align: middle; }
.dash-skel.w40 { width: 40%; }

@keyframes dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Fehlerband ---------- */

.dash-error-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(192,86,79,0.35);
  border-radius: var(--r-md);
  background: rgba(192,86,79,0.07);
  font-size: 13px;
  color: var(--admin-text-soft);
}
.dash-error-band strong { color: var(--admin-danger); font-weight: 600; }

/* ---------- Alarme ---------- */

.dash-alerts {
  border: 1px solid var(--admin-border);
  border-radius: var(--r-md);
  background: var(--admin-charcoal);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}

.dash-alerts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--admin-border-soft);
}
.dash-alerts-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dash-alerts-count {
  font-size: 11px;
  color: var(--admin-danger);
  border: 1px solid rgba(192,86,79,0.4);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

.dash-alert-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;
  border-bottom: 1px solid var(--admin-border-soft);
  font-size: 13px;
}
.dash-alert-row:last-child { border-bottom: none; }

.dash-alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
.dash-alert-dot.danger { background: var(--admin-danger); }
.dash-alert-dot.warn   { background: var(--admin-warn); }
.dash-alert-dot.info   { background: var(--admin-cyan); }

.dash-alert-text { flex: 1; color: var(--admin-text-soft); }
.dash-alert-text .mute { color: var(--admin-text-mute); }

a.dash-alert-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-cyan-deep);
  border-radius: var(--r-sm);
}
a.dash-alert-action:hover { text-decoration: underline; text-underline-offset: 3px; }
a.dash-alert-action:focus-visible { outline: 2px solid var(--admin-cyan); outline-offset: 2px; }

.dash-alerts-quiet {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 13px;
  color: var(--admin-text-dim);
  border: 1px dashed var(--admin-border);
  border-radius: var(--r-md);
}
.dash-alerts-quiet .dash-alert-dot { background: var(--admin-success); }

/* ---------- Zahlen im Detail (einklappbare Charts) ---------- */

.dash-details { margin-top: 24px; }

.dash-details-toggle {
  width: 100%;
  background: transparent;
  border-color: var(--admin-border);
  margin-bottom: var(--sp-4);
}

/* ---------- Chart-Grid ---------- */

.dash-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (max-width: 1080px) { .dash-chart-grid { grid-template-columns: 1fr; } }

.dash-chart-card {
  background: var(--admin-charcoal);
  border: 1px solid var(--admin-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dash-chart-caption {
  font-size: 10.5px;
  color: var(--admin-text-mute);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--admin-border-soft);
}

/* Segment-Umschalter Tag/Woche/Monat */
.dash-seg {
  display: inline-flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.dash-seg button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--admin-text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 0 var(--sp-3);
  min-height: 32px;
  min-width: 44px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.dash-seg button + button { border-left: 1px solid var(--admin-border-soft); }
.dash-seg button[aria-pressed="true"] {
  background: var(--admin-cyan-dim);
  color: var(--admin-cyan-deep);
}
.dash-seg button:focus-visible { outline: 2px solid var(--admin-cyan); outline-offset: -2px; }

/* ---------- Heute-Timeline Ergaenzungen ---------- */

/* Check-in-Button: sichtbar 28px, Touch-Ziel 44px via unsichtbarer Hit-Area */
.today-actions .btn-icon { position: relative; }
.today-actions .btn-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* Review-Sterne in Gold (Akzent, keine Flaeche) */
.dash-stars { color: var(--loyalty-gold); letter-spacing: 2px; font-size: 14px; }
.dash-stars .off { color: var(--admin-border-strong); }

/* ---------- Leerzustaende ---------- */

.dash-empty-inline {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--admin-text-dim);
  font-size: 13px;
  border: 1px dashed var(--admin-border);
  border-radius: var(--r-md);
}
.dash-empty-inline strong { color: var(--admin-text); display: block; margin-bottom: var(--sp-1); }

/* Button im Leerzustand des Heute-Panels: Abstand zum Text */
.dash-empty-cta { margin-top: var(--sp-3); }
/* Fokus-Zeilen-Label "Heute im Fokus" leicht eingerueckt wie die Karten */
.dash-focus-eyebrow { margin-left: var(--sp-1); }

/* ---------- Neue Anfragen (oben auf der Uebersicht) ---------- */

.dash-anfragen { margin-bottom: var(--sp-5); }
.dash-anfragen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dash-anfragen-head h2 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dash-anfragen-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--admin-cyan); color: var(--admin-black); font-size: 12px; font-weight: 700; }
.dash-anfragen-all { color: var(--admin-cyan-deep); font-size: 13px; font-weight: 500; text-decoration: none; }
.dash-anfragen-all:hover { text-decoration: underline; }
.dash-anfragen-empty { background: var(--admin-charcoal); border: 1px solid rgba(58,51,53,0.07); border-radius: 14px; padding: 18px 20px; color: var(--admin-text-dim); font-size: 14px; }
.dash-anfragen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 760px) { .dash-anfragen-grid { grid-template-columns: 1fr; } }

a.dash-anfrage-card { display: block; background: var(--admin-charcoal); border: 1px solid rgba(58,51,53,0.07); border-left: 3px solid var(--admin-cyan); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; transition: transform 120ms var(--ease-out), border-color 120ms var(--ease-out); }
a.dash-anfrage-card:hover { transform: translateY(-1px); border-color: rgba(183,129,138,0.4); }
.dash-anfrage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-anfrage-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-anfrage-stage { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(58,51,53,0.08); color: var(--admin-text-dim); }
.dash-anfrage-stage.stage-warm { background: rgba(176,141,87,0.16); color: var(--admin-warn); }
.dash-anfrage-stage.stage-heiss { background: rgba(192,86,79,0.18); color: var(--admin-danger); }
.dash-anfrage-stage.stage-trial { background: rgba(183,129,138,0.16); color: var(--admin-cyan-deep); }
.dash-anfrage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 7px; font-size: 13px; color: var(--admin-text-dim); }
.dash-anfrage-world { display: inline-flex; align-items: center; gap: 6px; }
.dash-anfrage-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dash-anfrage-when { margin-left: auto; }
.dash-anfrage-contact { margin-top: 5px; font-size: 13px; color: var(--admin-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dash-skel { animation: none; }
  a.dash-tile, a.dash-tile:hover { transform: none; transition: none; }
}