/* ============================================================
   theme-polish.css — Feinschliff fuer Modern-Theme (2026-06-11)
   Scoped auf html[data-theme*="modern"], nur Klassen/IDs.
   Laedt NACH theme-modern.css. Reiner Optik-Layer, kein Layout-Bruch.
   ============================================================ */

/* ---------- KPI Stat-Cards: Tiefe + Hover-Lift + Accent-Kante ---------- */
html[data-theme*="modern"] #dash-kpi-grid .stat-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 38%),
    var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem 0.9rem;
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
html[data-theme*="modern"] #dash-kpi-grid .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity: 0.85;
}
html[data-theme*="modern"] #dash-kpi-grid .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
html[data-theme*="modern"] #dash-kpi-grid .stat-card .label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.35rem;
}
html[data-theme*="modern"] #dash-kpi-grid .stat-card .value {
  font-size: 1.45em !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 0.45rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* ---------- Dashboard Hero-Karten (Wetter / heutige Termine) ---------- */
html[data-theme*="modern"] #dash-weather,
html[data-theme*="modern"] #dash-today-appts {
  background:
    radial-gradient(420px 120px at 0% 0%, var(--accent-soft), transparent 70%),
    var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s var(--ease);
}
html[data-theme*="modern"] #dash-weather:hover,
html[data-theme*="modern"] #dash-today-appts:hover {
  box-shadow: var(--shadow-md);
}

/* ---------- Status-Badges: semantische Farben ---------- */
html[data-theme*="modern"] .badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.74em;
  white-space: nowrap;
  display: inline-block;
}
/* Erfolg / Gruen (bleibt #2da44e laut Vorgabe) */
html[data-theme*="modern"] .badge.paid,
html[data-theme*="modern"] .badge.accepted,
html[data-theme*="modern"] .badge.completed,
html[data-theme*="modern"] .badge.confirmed {
  background: rgba(45,164,78,0.14);
  color: #2da44e;
  border-color: rgba(45,164,78,0.30);
}
/* Warnung / Amber */
html[data-theme*="modern"] .badge.partially_paid,
html[data-theme*="modern"] .badge.sent,
html[data-theme*="modern"] .badge.in_progress {
  background: rgba(245,158,11,0.14);
  color: #d97706;
  border-color: rgba(245,158,11,0.30);
}
/* Gefahr / Rot */
html[data-theme*="modern"] .badge.overdue,
html[data-theme*="modern"] .badge.rejected,
html[data-theme*="modern"] .badge.cancelled,
html[data-theme*="modern"] .badge.collections {
  background: rgba(220,38,38,0.13);
  color: #e5484d;
  border-color: rgba(220,38,38,0.28);
}
/* Neutral / Grau */
html[data-theme*="modern"] .badge.draft,
html[data-theme*="modern"] .badge.new,
html[data-theme*="modern"] .badge.expired,
html[data-theme*="modern"] .badge.written_off {
  background: var(--bg-softer);
  color: var(--muted);
  border-color: var(--border);
}

/* ---------- Primary-Button: subtiler Verlauf ---------- */
html[data-theme*="modern"] button.primary,
html[data-theme*="modern"] .btn-primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: #fff;
}

/* ---------- nav-btn aktiv: klarere Kante ---------- */
html[data-theme*="modern"] .sidebar .nav-btn.active {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-weight: 600;
}
html[data-theme*="modern"] .sidebar .nav-btn.active::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--accent-glow);
}
html[data-theme*="modern"] .sidebar .nav-btn { position: relative; }

/* ---------- Listen-Karten auf Dashboard (recent quots/sos/inbox/mails) ---------- */
html[data-theme*="modern"] #dash-recent-quots > *,
html[data-theme*="modern"] #dash-recent-sos > *,
html[data-theme*="modern"] #dash-recent-inbox > *,
html[data-theme*="modern"] #dash-recent-mails > * {
  border-radius: 8px;
  transition: background 0.12s var(--ease);
}

/* ---------- Tabellen: zebra + weicheres Hover ---------- */
html[data-theme*="modern"] tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-softer) 45%, transparent);
}
html[data-theme*="modern"] tbody tr {
  transition: background 0.12s var(--ease);
}
html[data-theme*="modern"] tbody tr:hover td {
  background: var(--accent-soft);
}

/* ---------- Scrollbar (dezent, modern) ---------- */
html[data-theme*="modern"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme*="modern"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme*="modern"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
html[data-theme*="modern"] ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Sanftes Einblenden beim View-Wechsel ---------- */
html[data-theme*="modern"] .view:not(.hidden) {
  animation: polishFadeIn 0.22s var(--ease);
}
@keyframes polishFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Login-Screen aufgewertet ---------- */
html[data-theme*="modern"] #auth-screen.screen,
html[data-theme*="modern"] #setup-screen.screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(800px 500px at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
html[data-theme*="modern"] #auth-screen .card.auth {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 2.4rem 2.2rem;
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
}
html[data-theme*="modern"] #auth-screen .card.auth::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}
html[data-theme*="modern"] #auth-screen #auth-title {
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme*="modern"] #auth-screen .card.auth label {
  display: block;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.9rem;
}
html[data-theme*="modern"] #auth-screen .card.auth input {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 1em;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
html[data-theme*="modern"] #auth-screen .card.auth input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme*="modern"] #auth-screen #auth-submit {
  width: 100%;
  margin-top: 1.3rem;
  padding: 0.8rem;
  font-size: 1.02em;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: #fff; border: 0; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
html[data-theme*="modern"] #auth-screen #auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* ---------- Sidebar-Brand: Akzent-Wortmarke ---------- */
html[data-theme*="modern"] .sidebar .brand {
  font-weight: 800;
  font-size: 1.35em;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.6rem 0.8rem 0.2rem;
}