/* ═══════════════════════════════════════════════════════════════════════════════
   B6 V5.4 · Theme "Hallenlicht"
   Idee: Eine Trainingshalle bei Nacht. Ein warmer Lichtkegel von oben, gebürsteter Stahl,
   DIN-Beschilderung. Ein einziger auffälliger Effekt (Licht), alles andere ruhig.
   - Lichtkegel schaltet beim Laden einmal ein (Leuchtstoffröhren-Flackern), danach ruhig
   - Karten: Lichtkante folgt dem Mauszeiger (nur Desktop, nur auf der Karte unter dem Zeiger)
   - Bewegung sonst nur als Antwort auf Aktionen (Ansicht wechseln, Dialog, Klick, laufender Fortschritt)
   Abschalten: <link …theme-hallenlicht.css> in index.html entfernen.
   ═══════════════════════════════════════════════════════════════════════════════ */
html.hl{
  --hl-bg:#08090B;           /* Hallenschwarz */
  --hl-surface:#121317;      /* Gussgrau */
  --hl-surface-2:#17181D;
  --hl-line:#262830;         /* Stahlkante */
  --hl-line-soft:rgba(255,255,255,.065);
  --hl-yellow:#FFD400;       /* Fabrikgelb (Marke) */
  --hl-amber:#FFB23F;        /* Glühlicht */
  --hl-chalk:#F2F1EC;        /* Kreideweiß */
  --hl-muted:#8F8E88;
  --hl-faint:#5E5D59;
  --hl-ok:#46D98A;--hl-warn:#FFB23F;--hl-bad:#FF6B6B;
  --hl-display:"Bahnschrift","DIN Alternate","DIN Next LT Pro","Roboto Condensed","Arial Narrow","DejaVu Sans Condensed",sans-serif;
  --hl-ui:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  --r-xl:24px;--r-l:18px;--r-m:12px;--r-s:8px;
  --hl-ease:cubic-bezier(.2,.75,.2,1);
  /* bestehende Variablen auf die neue Palette legen */
  --bg:var(--hl-bg);--panel:var(--hl-surface);--text:var(--hl-chalk);--muted:var(--hl-muted);--yellow:var(--hl-yellow);--yellow2:#FFE97A;--line:var(--hl-line);
  --green:var(--hl-ok);--orange:var(--hl-warn);--red:var(--hl-bad);
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  color-scheme:dark;
}
html.hl body{font-family:var(--hl-ui);background:var(--hl-bg);color:var(--hl-chalk);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.hl ::selection{background:rgba(255,212,0,.32);color:#fff}

/* ── Hallenlicht: Lichtkegel + Korn (statt der unscharfen Farbflecken) ─────────── */
html.hl .ambient{filter:none!important;border-radius:0;inset:0;width:auto!important;height:auto!important;opacity:1!important;z-index:0;pointer-events:none}
html.hl .ambient-a{background:
  radial-gradient(52% 38% at 60% -6%,rgba(255,190,72,.20),rgba(255,190,72,.07) 45%,transparent 72%),
  radial-gradient(30% 22% at 60% -2%,rgba(255,230,150,.16),transparent 70%)!important;
  transform-origin:60% 0;animation:hl-breathe 11s ease-in-out infinite}
html.hl .ambient-b{background:
  radial-gradient(38% 30% at 6% 104%,rgba(255,212,0,.06),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important}
html.hl.hl-switch-on .ambient-a{animation:hl-flicker 1.1s steps(1,end) 1,hl-breathe 11s ease-in-out 1.1s infinite}
@keyframes hl-breathe{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.82;transform:scaleX(1.04)}}
@keyframes hl-flicker{0%{opacity:0}9%{opacity:.75}12%{opacity:.05}20%{opacity:.9}23%{opacity:.25}31%{opacity:1}100%{opacity:1}}
html.hl .app-shell,html.hl .login-card{position:relative;z-index:1}

/* ── Typografie: DIN-Beschilderung für Überschriften und Zahlen ────────────────── */
html.hl .topbar h1,html.hl .section-title-row h2,html.hl .today-hero h2,html.hl .login-card h1,html.hl .panel-head h3,html.hl .live-ops-head h4,html.hl .brand-title{
  font-family:var(--hl-display);font-stretch:87.5%;letter-spacing:-.005em}
html.hl .topbar h1{font-size:34px;font-weight:700;line-height:1.02}
html.hl .section-title-row h2{font-size:32px;font-weight:700;line-height:1.05}
html.hl .panel-head h3{font-size:19px;font-weight:600}
html.hl .mini-stat strong,html.hl .live-ops-kpis b,html.hl .live-studio-line strong,html.hl .nav-item em,html.hl .task-table td,html.hl #todayAttentionCount{font-variant-numeric:tabular-nums}
html.hl .mini-stat strong{font-family:var(--hl-display);font-stretch:87.5%;font-weight:700;font-size:32px;letter-spacing:0}
html.hl .eyebrow{font-family:var(--hl-display);font-stretch:87.5%;font-size:10.5px;letter-spacing:.08em;color:var(--hl-faint)!important;font-weight:600}
html.hl .section-sub,html.hl .stack-meta{color:var(--hl-muted)}

/* ── Seitenleiste: Glas über Rändelung (wie der Griff einer Hantelstange) ──────── */
html.hl .sidebar{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.016) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,rgba(18,19,23,.86),rgba(11,12,15,.9))!important;
  border:1px solid var(--hl-line-soft)!important;border-radius:var(--r-xl)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)!important}
html.hl .brand-mark{background:linear-gradient(150deg,#FFE869,#FFD400 55%,#E9B800)!important;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 12px 34px -8px rgba(255,212,0,.55)!important;font-family:var(--hl-display);font-stretch:87.5%}
html.hl .nav-item{border-radius:var(--r-m)!important;color:#B9B8B2;transition:background-color .18s var(--hl-ease),color .18s var(--hl-ease),transform .18s var(--hl-ease)}
html.hl .nav-item:hover{background:rgba(255,255,255,.04)!important;color:var(--hl-chalk)}
html.hl .nav-item:active{transform:scale(.985)}
html.hl .nav-item.active{background:linear-gradient(90deg,rgba(255,212,0,.15),rgba(255,212,0,.03) 70%,transparent)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,212,0,.16)!important}
html.hl .nav-item.active:before{left:0;top:9px;bottom:9px;width:3px;background:var(--hl-yellow);box-shadow:0 0 14px 2px rgba(255,212,0,.65)}
html.hl .nav-item b{background:rgba(255,255,255,.06);border-radius:999px;font-variant-numeric:tabular-nums}
html.hl .nav-item.active b{background:rgba(255,212,0,.2);color:#FFE97A}
html.hl .system-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
html.hl .system-actions .btn{white-space:nowrap}

/* ── Kopfzeile: bleibt beim Scrollen sichtbar (Suche, Meldung, Aufgabe immer erreichbar) ── */
@media(min-width:761px){
  html.hl .topbar{position:sticky;top:12px;z-index:40;border-radius:var(--r-xl)!important;
    background:linear-gradient(180deg,rgba(20,21,26,.78),rgba(13,14,17,.72))!important;border:1px solid var(--hl-line-soft)!important;
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 18px 50px -30px rgba(0,0,0,.9)!important}
}

/* ── Flächen: gebürsteter Stahl mit Lichtkante, die dem Mauszeiger folgt ─────────── */
html.hl .panel,html.hl .mini-stat,html.hl .today-hero,html.hl .live-ops-card,html.hl .table-card,html.hl .login-card,html.hl .modal,html.hl .hero-card,html.hl .ai-modal-box,html.hl .mail-server-banner,html.hl .mail-list-panel,html.hl .mail-reader,html.hl .compose-card,html.hl .compose-aside,html.hl .inventory-sales-panel,html.hl .realtime-panel,html.hl .today-workspace,html.hl .notification-panel,html.hl .today-new-login,html.hl .inventory-count-panel,html.hl .stock-receipt-panel,html.hl .datacore-panel,html.hl .kpi,html.hl .supplier-card,html.hl .staff-card,html.hl .record-card,html.hl .automation-rule,html.hl .score-card{
  --mx:50%;--my:-300px;
  background:
    radial-gradient(520px circle at var(--mx) var(--my),rgba(255,196,80,.055),transparent 42%) padding-box,
    linear-gradient(180deg,#16171C,#101115) padding-box,
    radial-gradient(300px circle at var(--mx) var(--my),rgba(255,212,0,.55),transparent 58%) border-box,
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset,var(--shadow)!important}
html.hl .panel,html.hl .today-hero,html.hl .modal,html.hl .login-card,html.hl .hero-card,html.hl .ai-modal-box,html.hl .mail-server-banner,html.hl .mail-list-panel,html.hl .mail-reader,html.hl .compose-card,html.hl .compose-aside,html.hl .inventory-sales-panel,html.hl .realtime-panel,html.hl .today-workspace,html.hl .notification-panel,html.hl .today-new-login,html.hl .inventory-count-panel,html.hl .stock-receipt-panel,html.hl .datacore-panel{border-radius:var(--r-xl)!important}
html.hl .mini-stat,html.hl .live-ops-card,html.hl .table-card,html.hl .kpi,html.hl .supplier-card,html.hl .staff-card,html.hl .record-card,html.hl .automation-rule,html.hl .score-card{border-radius:var(--r-l)!important}
html.hl .table-card .table-card,html.hl .panel .table-card{box-shadow:none!important}

/* ── B6 Heute: die Zahl ist das Wichtigste auf der Seite ───────────────────────── */
html.hl .today-hero{
  background:
    radial-gradient(70% 140% at 8% -30%,rgba(255,190,72,.16),transparent 55%) padding-box,
    radial-gradient(520px circle at var(--mx) var(--my),rgba(255,196,80,.06),transparent 42%) padding-box,
    linear-gradient(180deg,#18181C,#101114) padding-box,
    radial-gradient(300px circle at var(--mx) var(--my),rgba(255,212,0,.6),transparent 58%) border-box,
    linear-gradient(120deg,rgba(255,212,0,.35),rgba(255,255,255,.06) 40%,rgba(255,255,255,.04)) border-box!important}
html.hl .today-hero h2{font-size:clamp(30px,3.2vw,44px);font-weight:700;line-height:1.02}
html.hl #todayAttentionCount{display:inline-block;font-size:1.55em;font-weight:800;line-height:.9;color:var(--hl-yellow);text-shadow:0 0 28px rgba(255,212,0,.45);margin-right:.08em;vertical-align:-.06em}
html.hl .today-hero-mark{border-radius:50%!important;background:radial-gradient(circle at 50% 40%,rgba(255,226,120,.35),rgba(255,212,0,.08) 55%,transparent 72%)!important;border:1px solid rgba(255,212,0,.28)!important;box-shadow:0 0 60px -10px rgba(255,212,0,.45)}

/* ── Knöpfe ───────────────────────────────────────────────────────────────────── */
html.hl .btn{border-radius:11px!important;transition:transform .12s var(--hl-ease),background-color .18s,border-color .18s,box-shadow .18s,color .18s,background-position .6s var(--hl-ease)}
html.hl .btn:active{transform:scale(.97)}
html.hl .btn-primary{color:#151100!important;border:0!important;
  background-image:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%),linear-gradient(180deg,#FFE352,#FFD400 55%,#F0BF00)!important;
  background-size:260% 100%,100% 100%!important;background-position:150% 0,0 0!important;background-repeat:no-repeat!important;
  box-shadow:0 10px 26px -12px rgba(255,212,0,.85),inset 0 1px 0 rgba(255,255,255,.55)!important;font-weight:700}
html.hl .btn-primary:hover{background-position:-60% 0,0 0!important;box-shadow:0 14px 34px -12px rgba(255,212,0,.95),inset 0 1px 0 rgba(255,255,255,.6)!important}
html.hl .btn-ghost{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.09)!important;color:var(--hl-chalk)!important}
html.hl .btn-ghost:hover{border-color:rgba(255,212,0,.38)!important;background:rgba(255,212,0,.06)!important}
html.hl .btn-danger-glow{border-color:rgba(255,120,90,.35)!important;color:#FFBBA6!important}
html.hl .btn-danger-glow:hover{background:rgba(255,107,107,.10)!important;border-color:rgba(255,120,90,.6)!important;box-shadow:0 0 26px -8px rgba(255,107,107,.6)!important}
html.hl .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── Eingaben ─────────────────────────────────────────────────────────────────── */
html.hl input,html.hl select,html.hl textarea{background-color:#0D0E11!important;border:1px solid var(--hl-line)!important;border-radius:10px!important;color:var(--hl-chalk)!important;transition:border-color .15s,box-shadow .15s}
html.hl input:focus,html.hl select:focus,html.hl textarea:focus{outline:none;border-color:rgba(255,212,0,.6)!important;box-shadow:0 0 0 3px rgba(255,212,0,.14)!important}
html.hl :is(button,a,.nav-item,[tabindex]):focus-visible{outline:2px solid var(--hl-yellow);outline-offset:2px}

/* ── Statusanzeigen: Leuchtdioden ─────────────────────────────────────────────── */
html.hl .global-sync-item span,html.hl .integration-dot,html.hl .live-dot,html.hl .status-dot{box-shadow:0 0 0 3px rgba(255,255,255,.03)}
html.hl .global-sync-item.ok span{background:var(--hl-ok)!important;box-shadow:0 0 10px rgba(70,217,138,.7)}
html.hl .global-sync-item.warning span{background:var(--hl-warn)!important;box-shadow:0 0 10px rgba(255,178,63,.8);animation:hl-led 1.6s ease-in-out infinite}
html.hl .global-sync-item.error span{background:var(--hl-bad)!important;box-shadow:0 0 10px rgba(255,107,107,.8)}
@keyframes hl-led{50%{opacity:.45}}
html.hl .live-worker-pill.running{position:relative;color:#FFE08A}
html.hl .live-worker-pill.running:after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid rgba(255,212,0,.5);animation:hl-ring 1.8s ease-out infinite}
@keyframes hl-ring{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.18)}}

/* Fortschritt: läuft ein Abgleich, wandert ein Lichtstreifen durch den Balken */
html.hl .live-progress{background:rgba(255,255,255,.06)!important;border-radius:999px;overflow:hidden}
html.hl .live-progress i{background:linear-gradient(90deg,#E9B800,#FFD400 60%,#FFE97A)!important;box-shadow:0 0 12px rgba(255,212,0,.45);transition:width .5s var(--hl-ease)!important}
html.hl .live-studio-line.ok .live-progress i{background:linear-gradient(90deg,#2FB873,#46D98A)!important;box-shadow:0 0 10px rgba(70,217,138,.35)}
html.hl .live-studio-line.warning .live-progress i{background-image:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%),linear-gradient(90deg,#E9B800,#FFD400)!important;background-size:200% 100%,100% 100%!important;animation:hl-run 1.4s linear infinite}
@keyframes hl-run{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}

/* ── Tabellen ─────────────────────────────────────────────────────────────────── */
html.hl .task-table th,html.hl .system-table th{font-family:var(--hl-display);font-stretch:87.5%;font-weight:600;letter-spacing:.04em;color:var(--hl-faint)!important}
html.hl .task-table tbody tr,html.hl .system-table tbody tr{transition:background-color .15s}
html.hl .task-table tbody tr:hover,html.hl .system-table tbody tr:hover{background:rgba(255,255,255,.025)}
html.hl .critical-row td:first-child{box-shadow:inset 3px 0 0 var(--hl-warn)}

/* ── Ansichtswechsel und Dialoge: Bewegung als Antwort auf eine Aktion ─────────── */
html.hl .view.active-view{animation:hl-view-in .34s var(--hl-ease)}
@keyframes hl-view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.hl .modal-backdrop{background:rgba(5,5,7,.6)!important;-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
html.hl .modal-backdrop:not(.hidden) .modal:not(.hidden){animation:hl-pop .26s var(--hl-ease)}
@keyframes hl-pop{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
html.hl .toast,html.hl #toast{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ── Anmeldung: der Lichtkegel steht über der Karte ───────────────────────────── */
html.hl .login-screen{background:
  radial-gradient(46% 42% at 50% -4%,rgba(255,190,72,.22),rgba(255,190,72,.06) 48%,transparent 74%),
  radial-gradient(20% 16% at 50% 0,rgba(255,236,170,.18),transparent 70%),var(--hl-bg)!important}
html.hl.hl-switch-on .login-screen{animation:hl-flicker 1.1s steps(1,end) 1}
html.hl .login-card h1{font-size:44px;font-weight:700;line-height:1}
html.hl .login-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ── Schwebender KI-Knopf ─────────────────────────────────────────────────────── */
html.hl .floating-ai{box-shadow:0 14px 40px -12px rgba(255,212,0,.75),inset 0 1px 0 rgba(255,255,255,.5)!important;transition:transform .18s var(--hl-ease)}
html.hl .floating-ai:hover{transform:translateY(-2px)}

/* ── Bildlaufleisten ──────────────────────────────────────────────────────────── */
html.hl *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
html.hl ::-webkit-scrollbar{width:10px;height:10px}
html.hl ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
html.hl ::-webkit-scrollbar-thumb:hover{background-color:rgba(255,212,0,.4)}

/* ── Handy ────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* Feste Tab-Leiste unten mit Beschriftung (vorher: kleine Symbolbox oben ohne Text) */
  html.hl .sidebar{position:fixed!important;left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom));top:auto!important;height:auto!important;width:auto!important;padding:6px!important;z-index:80;border-radius:20px!important;overflow-x:auto;overflow-y:hidden;display:block!important}
  html.hl .sidebar .brand,html.hl .sidebar .location-switch,html.hl .sidebar .sidebar-bottom{display:none!important}
  html.hl .sidebar .nav{display:flex!important;flex-direction:row!important;gap:4px;min-width:max-content;margin:0!important}
  html.hl .sidebar .nav-item.hidden-by-role,html.hl .sidebar .nav-item.hidden{display:none!important}
  html.hl .sidebar .nav-item:not(.hidden-by-role):not(.hidden){display:flex!important}
  html.hl .sidebar .nav-item{flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;padding:8px 10px!important;font-size:10.5px;position:relative}
  html.hl .sidebar .nav-item span{font-size:17px;line-height:1}
  html.hl .sidebar .nav-item em{display:block!important;font-style:normal;white-space:nowrap;font-size:10.5px}
  html.hl .sidebar .nav-item b{display:block!important;position:absolute;top:3px;right:6px;font-size:9px;padding:1px 5px;min-width:0}
  html.hl .sidebar .nav-item.active:before{left:26%;right:26%;top:auto;bottom:2px;width:auto;height:3px}
  html.hl body.employee-mode .sidebar .nav{min-width:0;width:100%}
  html.hl body.employee-mode .sidebar .nav-item{flex:1 1 0;min-width:0}
  html.hl .main{padding-bottom:112px!important}
  html.hl .floating-ai{bottom:98px!important}
  html.hl .topbar h1{font-size:26px}
  html.hl .section-title-row h2{font-size:26px}
  html.hl .ambient-a{background:radial-gradient(90% 34% at 50% -6%,rgba(255,190,72,.18),transparent 72%)!important}
}
/* ── Weniger Bewegung gewünscht → alles ruhig ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html.hl *,html.hl *:before,html.hl *:after{animation:none!important;transition:none!important}
}