/* ====================================================================
   Werkmeister Pro — Design 2.0  ("Petrol")
   Liegt ÜBER main.css. Ändert nur das Aussehen – keine IDs, keine
   Klassen, auf die JavaScript angewiesen ist, werden entfernt.
   Hell + Dunkel: Klasse .theme-dark auf <html> (siehe js/theme.js)
   ==================================================================== */

/* ─── Tokens: Hell ──────────────────────────────────────────────────── */
:root{
  --brand:#0b3a4a;
  --brand-2:#0e7490;
  --accent:#0891b2;
  --accent-2:#14b8a6;
  --accent-hover:#0e7490;
  --accent-soft:#ecfeff;
  --accent-ring:rgba(8,145,178,.22);
  --grad:linear-gradient(135deg,#0e7490 0%,#0891b2 45%,#14b8a6 100%);
  --grad-soft:linear-gradient(135deg,rgba(14,116,144,.10),rgba(20,184,166,.10));

  --bg:#f4f7f9;
  --bg-tint:radial-gradient(1200px 600px at -10% -20%,rgba(8,145,178,.10),transparent 60%),
            radial-gradient(900px 500px at 110% -10%,rgba(20,184,166,.08),transparent 55%);
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --surface-3:#eef3f5;
  --surface-glass:rgba(255,255,255,.72);

  --border:#e3e9ed;
  --border-strong:#cfd8de;
  --border-subtle:#eef2f4;

  --text:#0c1a22;
  --text-2:#4b5d68;
  --text-3:#8a9aa4;
  --text-inverse:#ffffff;

  --success:#059669; --success-soft:#ecfdf5;
  --warning:#d97706; --warning-soft:#fffbeb;
  --danger:#dc2626;  --danger-soft:#fef2f2;
  --info:#0891b2;    --info-soft:#ecfeff;
  --violet:#7c3aed;  --violet-soft:#f5f3ff;

  --chart-1:#0891b2; --chart-2:#14b8a6; --chart-3:#94a3b8; --chart-grid:#e8eef1;

  --radius-sm:8px; --radius:10px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;

  --shadow-xs:0 1px 2px rgba(12,26,34,.04);
  --shadow-sm:0 1px 2px rgba(12,26,34,.04),0 2px 6px rgba(12,26,34,.04);
  --shadow:0 1px 2px rgba(12,26,34,.04),0 6px 16px -4px rgba(12,26,34,.08);
  --shadow-md:0 2px 4px rgba(12,26,34,.04),0 12px 24px -6px rgba(12,26,34,.12);
  --shadow-lg:0 4px 8px rgba(12,26,34,.05),0 24px 48px -12px rgba(12,26,34,.18);
  --shadow-xl:0 32px 64px -16px rgba(12,26,34,.28);
  --glow:0 8px 24px -6px rgba(8,145,178,.45);

  --t-fast:140ms cubic-bezier(.2,.8,.2,1);
  --t:220ms cubic-bezier(.2,.8,.2,1);
  --t-slow:420ms cubic-bezier(.2,.8,.2,1);
  --font-head:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}

/* ─── Tokens: Dunkel ────────────────────────────────────────────────── */
.theme-dark{
  --brand:#0b4f62; /* wird in main.css als Hintergrund mit weißer Schrift genutzt */
  --accent:#22b8d6;
  --accent-2:#2dd4bf;
  --accent-hover:#5fd0e6;
  --accent-soft:rgba(34,184,214,.12);
  --accent-ring:rgba(34,184,214,.30);
  --grad:linear-gradient(135deg,#0e7490 0%,#0891b2 45%,#14b8a6 100%);
  --grad-soft:linear-gradient(135deg,rgba(34,184,214,.14),rgba(45,212,191,.10));

  --bg:#070d12;
  --bg-tint:radial-gradient(1200px 600px at -10% -20%,rgba(8,145,178,.16),transparent 60%),
            radial-gradient(900px 500px at 110% -10%,rgba(20,184,166,.10),transparent 55%);
  --surface:#0e171e;
  --surface-2:#121d25;
  --surface-3:#18252e;
  --surface-glass:rgba(14,23,30,.72);

  --border:#1f2e38;
  --border-strong:#2a3c48;
  --border-subtle:#162229;

  --text:#e7eef2;
  --text-2:#9fb1bc;
  --text-3:#6b7f8b;

  --success:#34d399; --success-soft:rgba(52,211,153,.12);
  --warning:#fbbf24; --warning-soft:rgba(251,191,36,.12);
  --danger:#f87171;  --danger-soft:rgba(248,113,113,.12);
  --info:#22b8d6;    --info-soft:rgba(34,184,214,.12);
  --violet:#a78bfa;  --violet-soft:rgba(167,139,250,.12);

  --chart-1:#22b8d6; --chart-2:#2dd4bf; --chart-3:#4b5d68; --chart-grid:#1a2830;

  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 20px -6px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.35),0 14px 28px -8px rgba(0,0,0,.6);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4),0 26px 52px -14px rgba(0,0,0,.7);
  --shadow-xl:0 32px 64px -16px rgba(0,0,0,.8);
  --glow:0 8px 28px -6px rgba(34,184,214,.45);
  color-scheme:dark;
}

/* Weicher Übergang beim Umschalten Hell/Dunkel */
.wm-theme-anim,.wm-theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}

/* ─── Grundlagen ────────────────────────────────────────────────────── */
html{background:var(--bg)}
body{background:var(--bg-tint),var(--bg);background-attachment:fixed;color:var(--text);transition:background-color var(--t),color var(--t)}
html.theme-dark body{background:var(--bg-tint),var(--bg);background-attachment:fixed}
::selection{background:rgba(8,145,178,.22)}
h1,h2,h3,.wm-h{font-family:var(--font-head);letter-spacing:-.02em}

/* Seitenkopf jedes Bereichs (Partials: .mb-8 > h1 + p) */
.app-section > .mb-8:first-child h1,
.app-section > div:first-child > h1,
.app-section h1.text-4xl{
  font-family:var(--font-head);font-size:clamp(1.6rem,2.2vw,2.05rem)!important;font-weight:800!important;
  letter-spacing:-.03em;color:var(--text)!important;line-height:1.15;
}
.app-section > .mb-8:first-child p{color:var(--text-2)!important}

/* Bereichswechsel: sanft einblenden */
.app-section.active{animation:wmSectionIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes wmSectionIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─── Seitenleiste ──────────────────────────────────────────────────── */
.sidebar{
  background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-right:1px solid var(--border);
}
.sidebar .brand-override{border-bottom:1px solid var(--border-subtle)!important}
html.theme-dark #sidebarBrandLogoImg{filter:brightness(0) invert(1) opacity(.92)}
.nav-group-title{font-family:var(--font-head);font-size:.66rem;letter-spacing:.09em;color:var(--text-3);padding:1.05rem 1.2rem .35rem}
.nav-item{position:relative;margin:.12rem .6rem;padding:.55rem .7rem;border-radius:var(--radius-md);color:var(--text-2);font-weight:550;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item:active{transform:scale(.98)}
.nav-item.active{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.nav-item.active .nav-icon{color:#fff}
.nav-item.active::after{content:'';position:absolute;right:.55rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(255,255,255,.85)}
.nav-icon{color:var(--text-3)}

.wm-sidebar-user{margin:.6rem .7rem;padding:.7rem;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border-subtle)}
.wm-user-avatar{box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--border)}
.wm-logout-btn{border-radius:var(--radius-md)!important}

/* Theme-Umschalter (js/theme.js) */
.wm-theme-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:.4rem .9rem 1rem;border-radius:12px;background:var(--surface-3);border:1px solid var(--border-subtle)}
.wm-theme-switch button{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:600 11.5px/1 Inter,sans-serif;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.wm-theme-switch button svg{width:14px;height:14px}
.wm-theme-switch button:hover{color:var(--text)}
.wm-theme-switch button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}

/* ─── Kopfleiste mit Suche ──────────────────────────────────────────── */
.gsb{background:var(--surface-glass)!important;-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--border)!important}
.gsb-input{border-radius:12px!important;background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important;transition:box-shadow var(--t),border-color var(--t),background var(--t)}
.gsb-input:focus{background:var(--surface)!important;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-ring)!important}
.gsb-drop{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-lg)!important;border:1px solid var(--border)!important;background:var(--surface)!important}

/* ─── Karten ────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);transition:box-shadow var(--t),border-color var(--t),transform var(--t)}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow)}
.card h2,.card h3{color:var(--text)}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn{border-radius:var(--radius-md)!important;font-weight:600!important;letter-spacing:-.005em;transition:transform var(--t-fast),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t)!important}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--grad)!important;color:#fff!important;border:0!important;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--glow)!important}
.btn-primary:hover{filter:brightness(1.06) saturate(1.05);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 12px 28px -8px rgba(8,145,178,.6)!important;transform:translateY(-1px)}
.btn-secondary{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-xs)!important}
.btn-secondary:hover{border-color:var(--border-strong)!important;background:var(--surface-2)!important}
.btn-danger{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid transparent!important}
.btn-danger:hover{background:var(--danger)!important;color:#fff!important}

/* ─── Eingabefelder ─────────────────────────────────────────────────── */
.input,select.input,textarea.input{border-radius:var(--radius-md)!important;border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.input:hover{border-color:var(--border-strong)!important}
.input:focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-ring)!important}
.input::placeholder{color:var(--text-3)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
input[type="file"]{color:var(--text-2);font-size:.85rem}
input[type="file"]::file-selector-button{margin-right:12px;padding:.5rem .9rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
input[type="file"]::file-selector-button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ─── Modals ────────────────────────────────────────────────────────── */
.modal{background:rgba(6,16,22,.42)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-content{background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-xl)!important}
.modal.active .modal-content{animation:wmModalIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes wmModalIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

/* ─── Badges & Status ───────────────────────────────────────────────── */
.badge{border-radius:999px!important;font-weight:650!important;letter-spacing:.01em;padding:.18rem .6rem!important}
.badge-cyan{background:var(--info-soft)!important;color:var(--accent)!important}
.badge-green{background:var(--success-soft)!important;color:var(--success)!important}
.badge-blue{background:var(--info-soft)!important;color:var(--accent)!important}
.badge-purple{background:var(--danger-soft)!important;color:var(--danger)!important}
.badge-red{background:var(--danger-soft);color:var(--danger)}
.badge-amber{background:var(--warning-soft);color:var(--warning)}

/* ─── Tabellen ──────────────────────────────────────────────────────── */
.table{border-collapse:separate;border-spacing:0}
.table thead th{background:transparent!important;color:var(--text-3)!important;font-size:.7rem!important;letter-spacing:.07em;text-transform:uppercase;font-weight:650!important;border-bottom:1px solid var(--border)!important}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--surface-2)!important}
.table td{border-bottom:1px solid var(--border-subtle)!important;color:var(--text)}

/* ─── Schalter ──────────────────────────────────────────────────────── */
.toggle-switch input:checked + .toggle-slider{background:var(--grad)!important}

/* ─── Benutzer-Karten ───────────────────────────────────────────────── */
.user-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:box-shadow var(--t),transform var(--t)}
.user-card:hover{box-shadow:var(--shadow-md)}

/* ─── Listen-Karten aus JS (Rechnungen, Aufträge, Angebote, Kunden) ── */
#invoicesList > div > div[onclick],#ordersList > div > div[onclick],#offersList div[onclick].rounded-xl,#customersList > div > div{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
#invoicesList > div > div[onclick]:hover,#ordersList > div > div[onclick]:hover,#offersList div[onclick].rounded-xl:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)!important;border-color:rgba(8,145,178,.35)!important}

/* ─── Einstellungen: Reiter ─────────────────────────────────────────── */
.settings-mini-nav .settings-tab-btn,.tax-mini-nav .tax-tab-btn{border-radius:10px!important;transition:background var(--t-fast),color var(--t-fast)}
.settings-mini-nav .settings-tab-btn.active,.tax-mini-nav .tax-tab-btn.active{background:var(--grad)!important;color:#fff!important;box-shadow:var(--glow)}

/* ─── Mobile Navigation ─────────────────────────────────────────────── */
.mobile-bottom-nav{background:var(--surface-glass)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border)!important}
.mobile-bottom-nav button.active{color:var(--accent)!important}

.wm-must-change-header{background:var(--grad)!important}
.theme-dark .bg-gray-50\/50,.theme-dark [class*="bg-gray-50/"]{background-color:var(--surface-2)!important}

/* ─── Login ─────────────────────────────────────────────────────────── */
#loginScreen{background:var(--bg-tint),var(--bg)!important}
.wm-login-shell{border-radius:28px!important;box-shadow:var(--shadow-xl)!important;border:1px solid var(--border)!important;overflow:hidden;background:var(--surface)!important;animation:wmModalIn .6s cubic-bezier(.2,.8,.2,1) both}
.wm-login-brand{position:relative;overflow:hidden;background:linear-gradient(150deg,#07303d 0%,#0b4f62 40%,#0e7490 75%,#14b8a6 120%)!important}
.wm-login-brand::before,.wm-login-brand::after{content:'';position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.wm-login-brand::before{width:320px;height:320px;right:-90px;bottom:-110px;background:#2dd4bf;animation:wmFloat 14s ease-in-out infinite}
.wm-login-brand::after{width:240px;height:240px;left:-80px;top:-70px;background:#22b8d6;opacity:.35;animation:wmFloat 18s ease-in-out infinite reverse}
@keyframes wmFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-24px) scale(1.12)}}
.wm-login-brand > *{position:relative;z-index:1}
.wm-login-greeting{font-family:var(--font-head)!important;letter-spacing:-.03em}
.wm-login-point-ic{background:rgba(255,255,255,.14)!important;color:#fff!important;border-radius:10px!important}
.wm-login-panel{background:var(--surface)!important}
.wm-login-card h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;color:var(--text)}
.wm-login-hint,.wm-login-label{color:var(--text-2)!important}
#loginScreen .btn-primary,.wm-login-submit,.theme-dark .wm-login-submit{background:var(--grad)!important;border:0!important;color:#fff!important;box-shadow:var(--glow)!important;border-radius:14px!important}
.wm-login-submit:hover{box-shadow:0 14px 32px -10px rgba(8,145,178,.65)!important}
.wm-login-logo-wrap{background:rgba(255,255,255,.95)!important;border-radius:14px!important}

/* Ladebildschirm + Speicheranzeige */
#gistLoadOverlay{background:var(--bg-tint),var(--bg)!important}
#gistLoadOverlay div{color:var(--text)!important}
#gistSaveStatus{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important;border-radius:999px!important;box-shadow:var(--shadow-md)!important}

/* ─── Bildlaufleisten ───────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}

/* ─── Dunkelmodus: Tailwind-Klassen aus Partials & JS umfärben ──────── */
.theme-dark .bg-white{background-color:var(--surface)!important}
.theme-dark .bg-gray-50,.theme-dark .bg-slate-50{background-color:var(--surface-2)!important}
.theme-dark .bg-gray-100,.theme-dark .bg-slate-100{background-color:var(--surface-3)!important}
.theme-dark .text-gray-900,.theme-dark .text-gray-800,.theme-dark .text-slate-900,.theme-dark .text-slate-800{color:var(--text)!important}
.theme-dark .text-gray-700,.theme-dark .text-gray-600,.theme-dark .text-slate-700,.theme-dark .text-slate-600{color:var(--text-2)!important}
.theme-dark .text-gray-500,.theme-dark .text-gray-400,.theme-dark .text-slate-500,.theme-dark .text-slate-400{color:var(--text-3)!important}
.theme-dark .border-gray-100,.theme-dark .border-gray-200,.theme-dark .border-gray-300,.theme-dark .border-slate-200{border-color:var(--border)!important}
.theme-dark .divide-gray-100 > * + *,.theme-dark .divide-gray-200 > * + *{border-color:var(--border)!important}
.theme-dark .bg-amber-50,.theme-dark .bg-yellow-50,.theme-dark .bg-orange-50{background-color:var(--warning-soft)!important}
.theme-dark .border-amber-200,.theme-dark .border-yellow-200,.theme-dark .border-orange-200{border-color:rgba(251,191,36,.28)!important}
.theme-dark .text-amber-700,.theme-dark .text-amber-800,.theme-dark .text-amber-900,.theme-dark .text-yellow-800{color:var(--warning)!important}
.theme-dark .bg-emerald-50,.theme-dark .bg-green-50{background-color:var(--success-soft)!important}
.theme-dark .border-emerald-200,.theme-dark .border-green-200{border-color:rgba(52,211,153,.28)!important}
.theme-dark .text-emerald-700,.theme-dark .text-emerald-800,.theme-dark .text-green-700,.theme-dark .text-green-800{color:var(--success)!important}
.theme-dark .bg-red-50{background-color:var(--danger-soft)!important}
.theme-dark .border-red-200{border-color:rgba(248,113,113,.28)!important}
.theme-dark .text-red-600,.theme-dark .text-red-700{color:var(--danger)!important}
.theme-dark .bg-cyan-50,.theme-dark .bg-blue-50,.theme-dark .bg-sky-50{background-color:var(--info-soft)!important}
.theme-dark .border-cyan-200,.theme-dark .border-blue-200{border-color:rgba(34,184,214,.28)!important}
.theme-dark .text-cyan-600,.theme-dark .text-cyan-700,.theme-dark .text-cyan-900,.theme-dark .text-blue-700{color:var(--accent)!important}
.theme-dark .bg-cyan-100,.theme-dark .bg-blue-100,.theme-dark .bg-sky-100{background-color:rgba(34,184,214,.16)!important}
.theme-dark .bg-red-100{background-color:rgba(248,113,113,.16)!important}
.theme-dark .bg-green-100,.theme-dark .bg-emerald-100{background-color:rgba(52,211,153,.16)!important}
.theme-dark .bg-amber-100,.theme-dark .bg-yellow-100{background-color:rgba(251,191,36,.16)!important}
.theme-dark .text-blue-800,.theme-dark .text-cyan-800{color:var(--accent)!important}
.theme-dark .text-red-800{color:var(--danger)!important}
.theme-dark .text-green-800{color:var(--success)!important}
/* Hellfarbige Inline-Badges aus JS (Versand, Mahnstufen) */
.theme-dark #mainApp [style*="background:#eff6ff"]{background:rgba(34,184,214,.14)!important;color:var(--accent)!important;border-color:transparent!important}
.theme-dark #mainApp [style*="background:#fee2e2"],.theme-dark #mainApp [style*="background:#fef2f2"]{background:rgba(248,113,113,.14)!important;color:var(--danger)!important;border-color:transparent!important}
.theme-dark #mainApp [style*="background:#fef9c3"],.theme-dark #mainApp [style*="background:#fffbeb"],.theme-dark #mainApp [style*="background:#fff7ed"]{background:rgba(251,191,36,.14)!important;color:var(--warning)!important;border-color:transparent!important}
.theme-dark #mainApp [style*="background:#f0fdf4"],.theme-dark #mainApp [style*="background:#ecfdf5"]{background:rgba(52,211,153,.14)!important;color:var(--success)!important;border-color:transparent!important}
.theme-dark #mainApp [style*="background:#fafafa"]{background:var(--surface-2)!important}
/* Inline-Weiß aus JS-Markup (z. B. Detailkarten) */
.theme-dark #mainApp [style*="background:#fff"],.theme-dark #mainApp [style*="background: #fff"],
.theme-dark #mainApp [style*="background:white"],.theme-dark #mainApp [style*="background:#ffffff"]{background:var(--surface)!important}
.theme-dark #mainApp [style*="background:#f8fafc"],.theme-dark #mainApp [style*="background:#f9fafb"],
.theme-dark #mainApp [style*="background:#f1f5f9"]{background:var(--surface-2)!important}
.theme-dark #mainApp [style*="color:#111827"],.theme-dark #mainApp [style*="color:#0f172a"],
.theme-dark #mainApp [style*="color:#1f2937"],.theme-dark #mainApp [style*="color:#374151"],
.theme-dark #mainApp [style*="color:#1e293b"],.theme-dark #mainApp [style*="color:#334155"]{color:var(--text)!important}
.theme-dark #mainApp [style*="color:#475569"],.theme-dark #mainApp [style*="color:#4b5563"],.theme-dark #mainApp [style*="color:#64748b"]{color:var(--text-2)!important}
.theme-dark #mainApp [style*="color:#9a3412"],.theme-dark #mainApp [style*="color:#92400e"],.theme-dark #mainApp [style*="color:#854d0e"]{color:var(--warning)!important}
.theme-dark #mainApp [style*="color:#991b1b"],.theme-dark #mainApp [style*="color:#b91c1c"]{color:var(--danger)!important}
/* Blaue Verlaufs-Knöpfe aus dem alten Design → Petrol */
#mainApp button[style*="#2563eb,#1d4ed8"],#mainApp button[style*="#2563eb, #1d4ed8"]{background:var(--grad)!important}
.theme-dark #mainApp [style*="border:1px solid #e5e7eb"],.theme-dark #mainApp [style*="border:1px solid #e2e8f0"]{border-color:var(--border)!important}

/* ─── Seitenkopf mit Symbol-Kachel (js/ui-enhance.js) ───────────────── */
.wm-ph{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
.wm-ph > h1{grid-column:2;margin-bottom:2px!important}
.wm-ph > p{grid-column:2}
.wm-ph-icon{grid-row:1 / span 2;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--glow)}
.wm-ph-icon svg{width:24px;height:24px}
.app-section.active .wm-ph-icon{animation:wmPop .5s cubic-bezier(.2,.8,.2,1.4) both}
@keyframes wmPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

/* ─── Kennzahlen-Leiste über Listen ─────────────────────────────────── */
.wm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:-12px 0 22px}
.wm-stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 16px 14px 18px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;color:var(--text);transition:transform var(--t),box-shadow var(--t),border-color var(--t);animation:dbIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.wm-stat::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--wm-ton,var(--accent))}
.wm-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wm-stat.wm-stat-static{cursor:default}
.wm-stat.wm-stat-static:hover{transform:none;box-shadow:var(--shadow-sm)}
.wm-stat.on{border-color:var(--wm-ton,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-ton,var(--accent)) 18%,transparent),var(--shadow-sm)}
.wm-stat-l{font-size:.74rem;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.wm-stat-v{font-family:var(--font-head);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wm-stat-s{font-size:.75rem;color:var(--text-3)}
.wm-stat-cyan{--wm-ton:var(--accent)}
.wm-stat-red{--wm-ton:var(--danger)}
.wm-stat-green{--wm-ton:var(--success)}
.wm-stat-amber{--wm-ton:var(--warning)}
.wm-stat-violet{--wm-ton:var(--violet)}

/* ─── Listen-Karten veredeln (Rechnungen, Aufträge, Angebote) ──────── */
#invoicesList .rounded-xl[onclick],#ordersList .rounded-xl[onclick],#offersList .rounded-xl[onclick]{
  position:relative;background:var(--surface);border-color:var(--border)!important;border-radius:14px!important;
  padding:14px 16px 14px 20px!important;box-shadow:var(--shadow-xs)}
#invoicesList .rounded-xl[onclick]::before,#ordersList .rounded-xl[onclick]::before,#offersList .rounded-xl[onclick]::before{
  content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--wm-bar,var(--border-strong));transition:top var(--t),bottom var(--t)}
#invoicesList .rounded-xl[onclick]:hover::before,#ordersList .rounded-xl[onclick]:hover::before,#offersList .rounded-xl[onclick]:hover::before{top:0;bottom:0;border-radius:14px 0 0 14px}
#invoicesList .rounded-xl[onclick]:has(.badge-cyan){--wm-bar:var(--accent)}
#invoicesList .rounded-xl[onclick]:has(.badge-purple){--wm-bar:var(--danger)}
#invoicesList .rounded-xl[onclick]:has(.badge-green){--wm-bar:var(--success)}
#invoicesList .rounded-xl.bg-amber-50,#ordersList .rounded-xl.bg-amber-50{--wm-bar:var(--warning)}
#ordersList .rounded-xl.bg-emerald-50{--wm-bar:var(--success)}
#ordersList .rounded-xl[onclick]:not(.bg-emerald-50){--wm-bar:var(--accent)}
#invoicesList .text-base.font-bold{font-family:var(--font-head);letter-spacing:-.01em}
/* Zahlungs-Knöpfe aus JS (Inline-Stil wird überschrieben) */
#invoicesList button[onclick*="toggleInvStatus"],#invoicesList button[onclick*="openAddPaymentDialog"]{
  border-radius:10px!important;padding:.42rem .85rem!important;font-weight:700!important;transition:transform var(--t-fast),box-shadow var(--t),filter var(--t)}
#invoicesList button[onclick*="toggleInvStatus"][title^="Als bezahlt"]{background:linear-gradient(135deg,#059669,#10b981)!important;border:0!important;box-shadow:0 6px 16px -6px rgba(5,150,105,.55)}
#invoicesList button[onclick*="toggleInvStatus"][title^="Als bezahlt"]:hover{transform:translateY(-1px);filter:brightness(1.05)}
#invoicesList button[onclick*="toggleInvStatus"][title^="Klicken"]{background:var(--success-soft)!important;color:var(--success)!important;border:1px solid transparent!important}
#invoicesList button[onclick*="openAddPaymentDialog"]{background:var(--warning-soft)!important;color:var(--warning)!important;border:1px solid transparent!important}
/* Datums-Chip */
#invoicesList div[style*="background:#eff6ff"]{background:var(--surface-3)!important;border-color:transparent!important;border-radius:8px!important}
#invoicesList div[style*="background:#eff6ff"] span:last-child{color:var(--text-2)!important}
/* Sortier-Knöpfe */
.inv-sort-btn{border-radius:9px!important;transition:background var(--t-fast),color var(--t-fast)}
.inv-sort-btn.inv-sort-active{background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
/* Kunden-Karten */
#customersList .rounded-xl,#customersList .border.rounded-lg{background:var(--surface);border-color:var(--border)!important;border-radius:16px!important;transition:transform var(--t),box-shadow var(--t)}
#customersList .rounded-xl:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ─── Fest eingebautes Navy aus dem alten Design → Petrol ───────────── */
#mainApp [style*="background:#1e293b"],#mainApp [style*="background: #1e293b"],
#mainApp [style*="background:#0f172a"],#mainApp [style*="background:#1E2A3A"]{background:var(--brand-2)!important;color:#fff!important}
.theme-dark #mainApp [style*="background:#1e293b"],.theme-dark #mainApp [style*="background:#0f172a"]{background:#0b4f62!important}

/* ─── Bewegung reduzieren, wenn gewünscht ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}