/**
 * Vivid UI – kräftigere Farben, mehr Tiefe, weniger „blass“
 */

:root {
  --bg: #e4ece7;
  --bg-subtle: linear-gradient(165deg, #f2f8f4 0%, #e8f0eb 42%, #dfe8e2 100%);
  --border: #c8d6ce;
  --text-secondary: #2a3d32;
  --muted: #4d6358;
  --accent-glow: rgba(22, 120, 72, 0.28);
  --shadow: 0 6px 24px rgba(21, 40, 30, 0.1);
  --shadow-md: 0 14px 40px rgba(21, 40, 30, 0.12);
  --vivid-green-soft: #ccf3dc;
  --vivid-blue: #1d4ed8;
  --vivid-blue-soft: #dbeafe;
  --vivid-amber-soft: #ffedd5;
  --vivid-violet: #6d28d9;
  --vivid-violet-soft: #ede9fe;
  --vivid-rose-soft: #ffe4e6;
}

/* ─── Hintergrund & Shell ─── */
body.app .content {
  background:
    radial-gradient(ellipse 95% 60% at 100% -8%, rgba(31, 122, 76, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 75% 50% at -8% 105%, rgba(29, 78, 216, 0.07) 0%, transparent 52%),
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
    var(--bg-subtle);
}

body.app .sidebar {
  background: linear-gradient(185deg, #ffffff 0%, #f3faf6 55%, #ebf5ef 100%);
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-light));
  box-shadow: 4px 0 24px rgba(21, 40, 30, 0.06);
}

body.app .brand-icon:not(.brand-icon--logo) {
  background: linear-gradient(145deg, #2d9a62 0%, #156b3f 100%);
  box-shadow: 0 6px 18px rgba(31, 122, 76, 0.35);
}

body.app .nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft) 0%, rgba(230, 244, 236, 0.55) 100%);
  color: var(--accent-hover);
  font-weight: 700;
}

body.app .nav-item.active .nav-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

body.app .nav-icon svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

body.app .topbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-light));
  box-shadow: 0 4px 20px rgba(21, 40, 30, 0.05);
}

body.app .topbar-title {
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

body.app .user-avatar {
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  color: #fff;
  font-weight: 800;
}

/* ─── Seitenkopf ─── */
.page-header-enhanced h1 {
  background: linear-gradient(135deg, #0f2919 0%, var(--accent) 55%, #2d9a62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ─── KPI-Kacheln ─── */
body.app .kpi-row {
  gap: 1.1rem;
}

body.app .kpi {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-light));
  box-shadow: 0 2px 8px rgba(21, 40, 30, 0.06), 0 12px 28px rgba(21, 40, 30, 0.05);
  padding: 1.35rem 1.45rem 1.25rem;
}

body.app .kpi::before {
  height: 4px;
  border-radius: 4px 4px 0 0;
}

body.app .kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(21, 40, 30, 0.1);
}

body.app .kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 12px rgba(21, 40, 30, 0.08);
}

body.app .kpi-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

body.app .kpi.accent {
  background: linear-gradient(155deg, #ffffff 0%, var(--vivid-green-soft) 100%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-light));
}

body.app .kpi.accent .kpi-icon {
  background: linear-gradient(145deg, #3cb878, #1a7a4a);
  color: #fff;
}

body.app .kpi.accent .kpi-value {
  color: #0d5c36;
}

body.app .kpi.info {
  background: linear-gradient(155deg, #ffffff 0%, var(--vivid-blue-soft) 100%);
  border-color: #93c5fd;
}

body.app .kpi.info::before {
  background: var(--vivid-blue);
}

body.app .kpi.info .kpi-icon {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
}

body.app .kpi.warn {
  background: linear-gradient(155deg, #ffffff 0%, var(--vivid-amber-soft) 100%);
  border-color: #fdba74;
}

body.app .kpi.warn .kpi-icon {
  background: linear-gradient(145deg, #f59e0b, #d97706);
  color: #fff;
}

body.app .kpi.quote {
  background: linear-gradient(155deg, #ffffff 0%, var(--vivid-violet-soft) 100%);
  border-color: #c4b5fd;
}

body.app .kpi.quote::before {
  background: var(--vivid-violet);
}

body.app .kpi.quote .kpi-icon {
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
}

body.app .kpi-label {
  color: var(--text-secondary);
  font-weight: 700;
}

body.app .kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
}

/* ─── Schnellaktionen ─── */
body.app .quick-action-btn {
  border-radius: 12px;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: linear-gradient(180deg, #fff 0%, #f6fbf8 100%);
  box-shadow: 0 2px 8px rgba(21, 40, 30, 0.06);
}

body.app .quick-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 6px 18px var(--accent-glow);
}

body.app .quick-action-btn.primary {
  background: linear-gradient(145deg, #2d9a62 0%, #156b3f 100%);
  border-color: #14532d;
  box-shadow: 0 6px 20px var(--accent-glow);
}

body.app .quick-action-btn.primary:hover {
  background: linear-gradient(145deg, #34a86e 0%, #1a7a4a 100%);
  color: #fff;
}

/* ─── Karten ─── */
body.app .card,
body.app .list-card,
body.app .settings-card {
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-light));
  box-shadow: 0 2px 6px rgba(21, 40, 30, 0.05), 0 14px 36px rgba(21, 40, 30, 0.07);
  overflow: hidden;
}

body.app .card-head,
body.app .list-card .card-head,
body.app .settings-card .card-head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 85%, #fff) 0%, #fff 65%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-light));
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

body.app .card-head-title {
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* ─── Buttons ─── */
body.app .btn-primary {
  background: linear-gradient(145deg, #2fa868 0%, #156b3f 100%);
  border-color: #0f5132;
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.app .btn-primary:hover {
  background: linear-gradient(145deg, #38b872 0%, #1a7a4a 100%);
  box-shadow: 0 8px 22px var(--accent-glow);
}

/* ─── Tabellen & Badges ─── */
body.app .list-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

body.app .list-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

body.app .list-table tbody tr:nth-child(even):hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

body.app .badge {
  box-shadow: 0 1px 2px rgba(21, 40, 30, 0.06);
}

body.app .badge-bezahlt {
  background: linear-gradient(180deg, #ecfdf3, #d1fae5);
  border-color: #6ee7b7;
  color: #047857;
}

body.app .badge-offen {
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  border-color: #fdba74;
}

body.app .badge-overdue {
  background: linear-gradient(180deg, #fef2f2, var(--vivid-rose-soft));
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 800;
}

body.app .doc-icon-invoice {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  box-shadow: 0 3px 10px rgba(29, 78, 216, 0.3);
}

body.app .doc-icon-quote {
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 3px 10px rgba(109, 40, 217, 0.28);
}

/* ─── Hinweise ─── */
body.app .hint {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: 0 2px 10px rgba(21, 40, 30, 0.05);
}

body.app .hint-info {
  background: linear-gradient(90deg, var(--accent-soft) 0%, #fff 70%);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

body.app .hint-warn {
  background: linear-gradient(90deg, #fff7ed 0%, #fff 70%);
  border-color: #fdba74;
}

body.app .hint-error,
body.app .hint.hint-error {
  background: linear-gradient(90deg, #fef2f2 0%, #fff 70%);
  border-color: #fca5a5;
}

/* ─── System-Health ─── */
.sys-log-kpi {
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(21, 40, 30, 0.07);
  border-width: 1px;
}

.sys-log-kpi--ok {
  background: linear-gradient(155deg, #fff 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}

.sys-log-kpi--ok .sys-log-kpi-num {
  color: #047857;
}

.sys-log-kpi--warn {
  background: linear-gradient(155deg, #fff 0%, #ffedd5 100%);
  border-color: #fdba74;
}

.sys-log-kpi--warn .sys-log-kpi-num {
  color: #c2410c;
}

.sys-log-kpi--error {
  background: linear-gradient(155deg, #fff 0%, #fee2e2 100%);
  border-color: #fca5a5;
}

.sys-log-kpi--error .sys-log-kpi-num {
  color: #b91c1c;
}

.sys-improve-card--high {
  background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
  border-color: #fca5a5;
  box-shadow: 0 4px 18px rgba(185, 28, 28, 0.08);
}

.sys-improve-priority--high {
  background: linear-gradient(145deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
}

/* ─── Filter & Admin ─── */
body.app .filter-tabs a.active {
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

body.app .admin-tab-intro {
  background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border-light));
}

body.app .empty-state-icon {
  background: linear-gradient(145deg, var(--accent-soft), #b8e6cc);
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* ─── Dark mode ─── */
html.theme-dark {
  --bg: #0f1612;
  --bg-subtle: linear-gradient(165deg, #121a15 0%, #0d1410 100%);
  --border: #2a3d32;
}

html.theme-dark body.app .content {
  background:
    radial-gradient(ellipse 90% 55% at 100% -10%, rgba(45, 154, 98, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(29, 78, 216, 0.08) 0%, transparent 50%),
    var(--bg-subtle);
}

html.theme-dark body.app .sidebar {
  background: linear-gradient(185deg, #151d18 0%, #121a15 100%);
  border-right-color: #2a3d32;
}

html.theme-dark body.app .kpi.accent {
  background: linear-gradient(155deg, #1a2420 0%, #152820 100%);
  border-color: #2d5a40;
}

html.theme-dark body.app .kpi.info {
  background: linear-gradient(155deg, #1a2028 0%, #152030 100%);
  border-color: #1e3a5f;
}

html.theme-dark body.app .kpi.warn {
  background: linear-gradient(155deg, #221a12 0%, #2a1f10 100%);
  border-color: #78350f;
}

html.theme-dark body.app .kpi.quote {
  background: linear-gradient(155deg, #1e1828 0%, #221530 100%);
  border-color: #4c1d95;
}

html.theme-dark .sys-log-kpi--ok {
  background: linear-gradient(155deg, #152820 0%, #1a3024 100%);
  border-color: #166534;
}

html.theme-dark .sys-log-kpi--warn {
  background: linear-gradient(155deg, #2a1f10 0%, #221a12 100%);
  border-color: #92400e;
}

html.theme-dark .sys-log-kpi--error {
  background: linear-gradient(155deg, #2a1515 0%, #221010 100%);
  border-color: #991b1b;
}

html.theme-dark .page-header-enhanced h1 {
  background: linear-gradient(135deg, #e8f5ee 0%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Login & Portal ─── */
.login-panel {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(45, 154, 98, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(29, 78, 216, 0.1) 0%, transparent 50%),
    linear-gradient(165deg, #0f2919 0%, #156b3f 45%, #1a7a4a 100%);
}

.login-form-wrap {
  box-shadow: 0 20px 50px rgba(15, 41, 25, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.login-form-wrap .btn-primary {
  background: linear-gradient(145deg, #2fa868 0%, #156b3f 100%);
  box-shadow: 0 6px 20px rgba(31, 122, 76, 0.35);
}

.legal-header {
  background: linear-gradient(90deg, var(--accent-soft) 0%, #fff 80%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-light));
}