@import url('/shared/fonts/inter.css');
* { margin:0; padding:0; box-sizing:border-box }

:root {
  --bg: linear-gradient(145deg,#eef2f7 0%,#e4ecf4 25%,#dfe8f0 50%,#e8eef5 75%,#f0f4f8 100%);
  --nav-bg: rgba(255,255,255,0.55);
  --nav-border: rgba(255,255,255,0.5);
  --card-bg: rgba(255,255,255,0.45);
  --card-border: rgba(255,255,255,0.6);
  --card-hover-bg: rgba(255,255,255,0.65);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.04);
  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-tertiary: #8e8e93;
  --badge-bg: rgba(4,179,214,0.1);
  --badge-color: #04b3d6;
  --toggle-bg: rgba(0,0,0,0.06);
  --toggle-knob: #fff;
  --accent: #04b3d6;
  --red: #ff453a;
  --green: #30d158;
  --input-bg: rgba(255,255,255,0.5);
}
[data-theme="dark"] {
  --bg: linear-gradient(145deg,#0a0a1a 0%,#0f1528 20%,#151022 40%,#1a0f1e 60%,#12111a 80%,#0d1318 100%);
  --nav-bg: rgba(255,255,255,0.05);
  --nav-border: rgba(255,255,255,0.09);
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.1);
  --card-hover-bg: rgba(255,255,255,0.1);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.2);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #636366;
  --badge-bg: rgba(4,179,214,0.15);
  --badge-color: #2cc5e4;
  --toggle-bg: rgba(255,255,255,0.1);
  --toggle-knob: #1c1c1e;
  --input-bg: rgba(255,255,255,0.05);
}

body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; min-height:100vh; background:var(--bg); background-size:400% 400%; animation:gs 20s ease infinite; -webkit-font-smoothing:antialiased; transition:background .4s; color:var(--text-primary) }
@keyframes gs { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

nav { position:sticky; top:0; z-index:200; background:var(--nav-bg); backdrop-filter:blur(44px) saturate(180%); -webkit-backdrop-filter:blur(44px) saturate(180%); border-bottom:1px solid var(--nav-border); padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; transition:background .3s }
.nav-left { display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; overflow:hidden }
.nav-logo { height:28px; width:auto }
[data-theme="dark"] .nav-logo { filter:brightness(2.2) contrast(0.85) }
.nav-brand { font-size:16px; font-weight:700; color:var(--text-primary); letter-spacing:-.4px }
.nav-divider { width:1px; height:18px; background:var(--nav-border); margin:0 2px }
.nav-subtitle { font-size:12px; color:var(--text-secondary); font-weight:500 }
.nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0 }
.nav-back { font-size:13px; font-weight:500; color:var(--badge-color); text-decoration:none; padding:5px 10px; border-radius:8px; transition:all .2s }
.nav-back:hover { background:var(--badge-bg) }
.user-info { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--text-secondary) }
.user-dot { width:7px; height:7px; border-radius:50%; background:#30d158; flex-shrink:0 }
.logout-btn { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:8px; border:1px solid var(--card-border); background:var(--toggle-bg); backdrop-filter:blur(20px); color:var(--text-secondary); font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .2s }
.logout-btn:hover { background:var(--card-hover-bg); color:var(--text-primary) }
.theme-toggle { display:flex; align-items:center; gap:6px; cursor:pointer }
.toggle-icon { font-size:14px; line-height:1 }
.toggle-track { width:44px; height:26px; border-radius:13px; background:var(--toggle-bg); backdrop-filter:blur(20px); border:1px solid var(--card-border); position:relative; transition:all .3s }
.toggle-knob { width:20px; height:20px; border-radius:10px; background:var(--toggle-knob); position:absolute; top:2px; left:3px; transition:all .3s cubic-bezier(.4,0,.2,1); box-shadow:0 1px 4px rgba(0,0,0,.15) }
[data-theme="dark"] .toggle-knob { left:21px; background:#f5f5f7 }

.container { max-width:1280px; margin:0 auto; padding:32px 24px 60px }

.page-header { margin-bottom:24px }
.page-header h1 { font-size:28px; font-weight:700; letter-spacing:-0.5px; color:var(--text-primary) }
.page-header .subtitle { font-size:14px; color:var(--text-secondary); margin-top:4px }
.page-header code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:var(--toggle-bg); padding:2px 6px; border-radius:4px }

.card { background:var(--card-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--card-shadow); padding:20px 24px; margin-bottom:20px }

.controls { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:14px; align-items:end }
.controls .ctrl label { font-size:12px; color:var(--text-secondary); display:block; margin-bottom:4px; font-weight:500 }
.controls input, .controls select { width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--card-border); background:var(--input-bg); backdrop-filter:blur(10px); color:var(--text-primary); font-size:14px; font-family:inherit }
.controls input:focus, .controls select:focus { outline:2px solid var(--accent); outline-offset:1px }

.btn { padding:10px 20px; border-radius:10px; border:0; background:var(--toggle-bg); backdrop-filter:blur(20px); color:var(--text-primary); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .2s; white-space:nowrap }
.btn:hover { background:var(--card-hover-bg) }
.btn.primary { background:var(--accent); color:#fff }
.btn.primary:hover { background:#0392b1 }
.btn:disabled { opacity:0.5; cursor:wait }

.status-row { font-size:13px; color:var(--text-secondary); padding:6px 4px 14px; min-height:24px }
.status-row.error { color:var(--red) }

h2 { font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:14px }

.summary-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px }
.summary-tile { background:var(--badge-bg); padding:14px 16px; border-radius:12px; border:1px solid var(--card-border) }
.summary-tile .label { font-size:12px; color:var(--text-secondary); margin-bottom:4px; font-weight:500 }
.summary-tile .label .art { color:var(--badge-color); font-weight:600 }
.summary-tile .value { font-size:22px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums }
.summary-tile .delta { font-size:12.5px; margin-top:4px; font-weight:500 }
.delta.up { color:var(--red) }
.delta.down { color:var(--green) }

table { width:100%; border-collapse:collapse; font-size:13.5px }
th, td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--card-border) }
th { font-weight:600; color:var(--text-secondary); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px }
td.num { text-align:right; font-variant-numeric:tabular-nums }
tr:last-child td { border-bottom:0 }
tr:hover td { background:var(--card-hover-bg) }

canvas { max-width:100%; height:auto !important }

@media (max-width:768px) {
  .controls { grid-template-columns:1fr }
  .container { padding:20px 14px 40px }
  .summary-grid { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) }
}

/* Chart-Wrapper mit fixer Hoehe — verhindert endloses Wachsen */
.chart-wrap { position: relative; height: 360px; width: 100%; }
.chart-wrap canvas { position: absolute; inset: 0; }
@media (max-width: 768px) {
  .chart-wrap { height: 280px; }
}

/* Artikel-Toggles ueber Diagramm */
.art-toggles { display:grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap:6px; margin-bottom:14px; max-height:280px; overflow-y:auto; padding-right:4px }
.art-toggle { display:grid; grid-template-columns: 18px 14px 1fr auto auto; gap:8px; align-items:center; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12.5px; transition: background .15s; border:1px solid transparent }
.art-toggle:hover { background:var(--toggle-bg) }
.art-toggle.total { background:var(--badge-bg); border-color:var(--card-border); margin-bottom:6px }
.art-toggle input[type=checkbox] { margin:0; cursor:pointer; accent-color:var(--accent) }
.art-color { width:14px; height:14px; border-radius:3px }
.art-name { color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.art-name b { color:var(--badge-color); font-weight:600 }
.art-toggle.total .art-name b { color:var(--text-primary) }
.art-kg { color:var(--text-secondary); font-variant-numeric:tabular-nums; font-size:12px; min-width:80px; text-align:right }
.art-trend { font-size:11.5px; font-weight:500; min-width:140px; text-align:right; font-variant-numeric:tabular-nums }
.art-trend.up { color:var(--red) }
.art-trend.down { color:var(--green) }
.art-toggle-actions { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap }
.btn-mini { padding:4px 12px; border-radius:6px; border:1px solid var(--card-border); background:var(--toggle-bg); color:var(--text-primary); font-size:12px; font-weight:500; font-family:inherit; cursor:pointer }
.btn-mini:hover { background:var(--card-hover-bg) }
.art-toggle-hint { font-size:11.5px; color:var(--text-tertiary); margin-left:auto }

.total-row td { background:var(--badge-bg); font-weight:600 }

/* Granularitaets-Toggle (Monat/Woche) */
.gran-toggle { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap }
.gran-label { font-size:12px; color:var(--text-secondary); font-weight:500 }
.gran-btn { padding:5px 14px; border-radius:6px; border:1px solid var(--card-border); background:var(--toggle-bg); color:var(--text-primary); font-size:12px; font-weight:500; font-family:inherit; cursor:pointer }
.gran-btn:hover { background:var(--card-hover-bg) }
.gran-btn.active { background:var(--accent); color:#fff; border-color:var(--accent) }
.gran-info { font-size:11.5px; color:var(--text-tertiary); margin-left:8px }