/* Das echte Dashboard: Werte, Klassennamen und Aufbau 1:1 aus den echten
   Design-Dateien des Dashboards. Flache Flaechen, Haarlinien, Farbe nur als
   Bedeutung, kein Leuchten. Alles unter .dash, weil die Landing eigene
   Klassen gleichen Namens hat. */
.dash {
  --bg: #101113;
  --bg-2: #141619;
  --bg-3: #1a1d21;
  --bg-4: #212429;
  --ink: #f2f4f8;
  --text: rgba(235, 238, 244, .86);
  --muted: rgba(235, 238, 244, .64);
  --dim: rgba(235, 238, 244, .52);
  --faint: rgba(235, 238, 244, .36);
  --silver: #8b93a4;
  --pale: #b4bac6;
  --success: #46d68b;
  --amber: #f0b45c;
  --danger: #f97070;
  --line-in: #46d68b;
  --border: rgba(255, 255, 255, .07);
  --border-2: rgba(255, 255, 255, .11);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .22);
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --ctl-sm: 28px; --ctl-md: 36px;
  --rail: 266px; --foot-pad: 20px; --rail-in: 226px; --hair: 1px;

  position: relative;
  overflow: hidden;
  color: var(--text);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  letter-spacing: .004em;
  background: var(--bg);
}

/* Fester Bau, per Faktor auf die Spalte gerechnet: das Fenster ist auf jeder
   Breite VOLLSTAENDIG zu sehen statt angeschnitten.
   KEIN `will-change` — eine eigene Ebene wird als Bild skaliert, und weil der
   Faktor nie glatt aufgeht (Rahmen!), war die Vorschau dadurch sichtbar
   weichgezeichnet. `contain` allein haelt sie aus dem Seitenlayout heraus. */
.dash .dash-scale {
  position: absolute; top: 0; left: 0;
  width: 1180px; height: 720px;
  transform: scale(var(--k, 1)); transform-origin: top left;
  contain: layout paint style;
}
/* `minmax(0, 1fr)` als Zeile ist der Unterschied zwischen App-Geruest und
   Zettel: ohne sie waechst die Zeile mit der Bestellliste, die Schiene wird
   mitgezogen und unten abgeschnitten. So bleibt die Schiene IMMER ganz
   sichtbar und nur der Arbeitsbereich endet am Fensterrand — wie im echten
   Dashboard. */
.dash .dash-shell {
  display: grid; height: 100%;
  grid-template-columns: calc(var(--rail) + var(--hair)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.dash .side, .dash .work { min-height: 0; overflow: hidden; }

/* ── Schiene ────────────────────────────────────────────────────────────── */
.dash .side { display: flex; flex-direction: column; height: 100%; background: var(--bg-2); border-right: var(--hair) solid var(--border); }
.dash .side-top { position: relative; flex: 0 0 auto; height: 64px; display: flex; align-items: center; padding-left: 25px; border-bottom: 1px solid var(--border); }
.dash .side .brand { display: flex; align-items: center; gap: 11px; }
.dash .side .brand img { width: 26px; height: 26px; border-radius: 7px; }
.dash .side .brand strong { font-size: 1.09rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dash .nav-collapse { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-sm); color: var(--silver); }
.dash .nav-collapse svg { width: 18px; height: 18px; }

.dash .nav { display: flex; flex-direction: column; gap: 3px; padding: 18px 0 10px; }
.dash .nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 28px; color: var(--muted); font-size: .93rem; font-weight: 500; }
.dash .nav-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--silver); display: grid; place-items: center; }
.dash .nav-ic svg { width: 20px; height: 20px; }
.dash .nav-lbl { white-space: nowrap; }
.dash .nav-item.is-active { color: var(--ink); background: rgba(255, 255, 255, .065); font-weight: 600; }
.dash .nav-item.is-active .nav-ic { color: var(--ink); }
.dash .nav-count { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-pill); font-size: .62rem; font-weight: 650; color: var(--dim); background: var(--bg-3); }

.dash .side-spacer { flex: 1 1 auto; }
.dash .side-foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px var(--foot-pad) 18px; }
.dash .side-meters { align-self: flex-start; }
.dash .side-meters-in { display: flex; flex-direction: column; gap: 16px; width: var(--rail-in); }
.dash .meter { width: var(--rail-in); }
.dash .meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.dash .meter-head span { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.dash .meter-head strong { font-size: .8rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .meter-bar { width: var(--rail-in); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dash .meter-bar span { display: block; height: 100%; border-radius: 3px; background: var(--success); }
.dash .meter-sub { margin-top: 8px; font-size: .7rem; color: var(--faint); white-space: nowrap; }

.dash .bot {
  --bot-dot: 9px;
  position: relative; display: flex; align-items: center; gap: 17.5px;
  width: var(--rail-in); height: 52px; padding: 0 14px 0 17.5px;
  border-radius: var(--r-lg); background: var(--bg-3); border: var(--hair) solid var(--border);
}
.dash .bot-dot { flex: 0 0 auto; width: var(--bot-dot); height: var(--bot-dot); border-radius: 50%; background: var(--success); animation: ob-breathe 3.6s ease-in-out infinite; }
@keyframes ob-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.dash .bot-copy { flex: 1 1 auto; text-align: left; }
.dash .bot-copy strong { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 650; color: var(--text); }
.dash .switch { position: absolute; left: 168px; top: 50%; transform: translateY(-50%); --knob: 19px; width: 44px; height: 25px; border-radius: var(--r-pill); background: rgba(70, 214, 139, .4); border: 1px solid transparent; }
.dash .switch::after { content: ""; position: absolute; top: 2px; left: calc(100% - 2px - var(--knob)); width: var(--knob); height: var(--knob); border-radius: 50%; background: #eef1f6; }

/* ── Arbeitsbereich ─────────────────────────────────────────────────────── */
.dash .work { --wpad: 34px; min-width: 0; padding: 0 var(--wpad) 40px; }
.dash .page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; margin: 0 calc(-1 * var(--wpad)) 20px; padding: 0 var(--wpad);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
/* Die Landing setzt eigene Ueberschriften-Schriften; im Dashboard hat davon
   nichts zu suchen — es soll aussehen wie das echte, nicht wie die Seite. */
.dash h1, .dash h2, .dash h3, .dash h4 { font-family: inherit; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.dash .page-head h1 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.dash .head-meta { display: flex; gap: 16px; margin-right: 6px; }
.dash .head-meta span { display: flex; align-items: baseline; gap: 5px; font-size: .78rem; }
.dash .head-meta strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.dash .head-meta em { font-style: normal; color: var(--dim); }
.dash .olist { display: flex; flex-direction: column; gap: 10px; }

/* ── Bestellkarte ───────────────────────────────────────────────────────── */
.dash .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.dash .order-card { padding: 15px 18px; }
.dash .oc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 30px; }
.dash .oc-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 196px; }
.dash .knum { font-size: 1.14rem; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; }
.dash .ksep { flex: 0 0 auto; width: 1px; height: 22px; border-radius: 1px; background: rgba(255, 255, 255, .16); }
.dash .oc-title { font-size: .94rem; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .oc-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.dash .oc-mid svg {
  flex: 1 1 auto; min-width: 0; height: 24px; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.dash .oc-top-right { display: flex; align-items: center; gap: 12px; flex: 0 0 266px; justify-content: flex-end; }
.dash .order-card:not(.is-open) .oc-top-right { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
.dash .oc-mini-deals { font-size: .77rem; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 68px; text-align: right; }
.dash .oc-runtime { display: inline-flex; white-space: nowrap; align-items: center; gap: 5px; font-size: .71rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.dash .oc-runtime svg { width: 12px; height: 12px; }
.dash .oc-actions { display: flex; gap: 2px; }
.dash .oc-actions span { display: grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-sm); color: var(--dim); }
.dash .oc-actions svg { width: 15px; height: 15px; }
.dash .krow-chev { flex: 0 0 auto; display: grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); color: var(--faint); border-radius: var(--r-sm); transform: rotate(-90deg); }
.dash .order-card.is-open .krow-chev { transform: rotate(0deg); }
.dash .krow-chev svg { width: 17px; height: 17px; }
.dash .oc-divider { height: 1px; margin: 12px 0; background: linear-gradient(90deg, transparent, rgba(235, 238, 244, .11) 16%, rgba(235, 238, 244, .11) 84%, transparent); }
.dash .oc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dash .oc-st-l1 { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; }
.dash .oc-st-l1 b { font-weight: 600; color: var(--text); }
.dash .oc-st-l1 .dtl { color: var(--dim); font-size: .76rem; }
.dash .oc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; }
.dash .oc-dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(70, 214, 139, .14); }
.dash .oc-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(240, 180, 92, .14); }
.dash .oc-deals {
  display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-sm); padding: 0 10px;
  border-radius: var(--r-sm); font-size: .77rem; font-weight: 600; color: var(--text);
  background: var(--bg-3); border: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.dash .oc-deals svg { width: 14px; height: 14px; color: var(--faint); }
.dash .oc-dealnum { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.dash .oc-deals .track { width: 52px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.dash .oc-deals .track span { display: block; height: 100%; border-radius: 2px; background: var(--success); }
.dash .oc-deals.zero { color: var(--faint); background: transparent; font-weight: 500; }
.dash .oc-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash .oc-sec { display: block; width: 100%; text-align: left; padding: 11px 13px; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid transparent; }
.dash .oc-seclabel { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dash .oc-seclabel svg { width: 12px; height: 12px; }
.dash .oc-funnel { display: flex; align-items: center; gap: 7px; }
.dash .oc-funnel > svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 auto; }
.dash .oc-fstat b { display: block; font-size: .87rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .oc-fstat em { display: block; font-style: normal; font-size: .65rem; color: var(--faint); }
.dash .oc-chats-head { display: flex; gap: 12px; margin-bottom: 8px; font-size: .74rem; color: var(--dim); }
.dash .oc-chats-head b { display: inline-block; min-width: 2ch; text-align: right; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.dash .oc-pbar { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: 7px; }
.dash .oc-pbar span { border-radius: 1px; }
.dash .oc-legend { display: flex; gap: 10px; font-size: .66rem; color: var(--dim); }
.dash .oc-leg { display: inline-flex; align-items: center; gap: 4px; }
.dash .oc-leg i { width: 6px; height: 6px; border-radius: 2px; }
.dash .oc-leg b { color: var(--text); font-variant-numeric: tabular-nums; }
.dash .oc-graph svg { display: block; width: 100%; height: 34px; }
.dash .oc-graphcap { display: block; margin-top: 5px; font-size: .64rem; color: var(--faint); }

/* ── Schmaler Bau (Handy) ─────────────────────────────────────────────────
   Kein Ausschnitt des Rechner-Layouts, sondern das Gesicht, das das echte
   Dashboard am Telefon hat: Kopfzeile mit Menuezeichen statt Schiene, Kacheln
   zu zweit, Flaechen untereinander. Ueber eine KLASSE gesteuert, nicht ueber
   eine Medienabfrage — der Bau ist fest 392 breit, seine Innerei darf nicht
   von der Fensterbreite abhaengen. */
.dash .is-schmal { display: flex; flex-direction: column; height: 100%; }
.dash .mtop {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 18px; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.dash .mtop .brand { display: flex; align-items: center; gap: 10px; }
.dash .mtop .brand img { width: 24px; height: 24px; border-radius: 7px; }
.dash .mtop .brand strong { font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dash .mburger { display: grid; gap: 4px; width: 22px; }
.dash .mburger i { height: 2px; border-radius: 2px; background: var(--silver); }
.dash .is-schmal .work { --wpad: 16px; flex: 1 1 auto; padding-bottom: 0; }
.dash .is-schmal .page-head { height: 58px; margin-bottom: 14px; }
.dash .is-schmal .head-meta { gap: 12px; }
.dash .is-schmal .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash .is-schmal .kpi b { font-size: 1.35rem; }
.dash .is-schmal .panel > svg { height: 78px; }
.dash .is-schmal .row .pill { display: none; }

.dash .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash .kpi { padding: 14px 16px; }
.dash .kpi em { display: block; font-style: normal; font-size: .72rem; color: var(--dim); }
.dash .kpi b { display: block; margin-top: 7px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .kpi i { display: block; margin-top: 5px; font-style: normal; font-size: .68rem; color: var(--faint); }
.dash .panel { margin-top: 10px; padding: 15px 18px; }
.dash .panel-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dash .panel-top h2 { font-size: .87rem; font-weight: 650; color: var(--ink); }
.dash .panel-top span { font-size: .7rem; color: var(--faint); }
.dash .panel > svg { display: block; width: 100%; height: 104px; }

.dash .rows { display: flex; flex-direction: column; }
.dash .row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: .82rem; }
.dash .row + .row { border-top: 1px solid var(--border); }
.dash .row img { width: 30px; height: 30px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; }
.dash .row-t { min-width: 0; flex: 1 1 auto; }
.dash .row-t strong { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .row-t em { font-style: normal; font-size: .7rem; color: var(--faint); }
.dash .row-v { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .pill { flex: 0 0 auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-3); font-size: .68rem; color: var(--dim); }
.dash .pill.ok { background: rgba(70, 214, 139, .13); color: var(--success); }