/* ════════════════════════════════════════════
   HANDO-INSPIRED DESIGN SYSTEM
   Akzentfarbe: Schema Arctic Blue (Standard, intern weiter „petrol“) / Blau / Sand — data-accent auf <html>, je hell + dunkel
   Font: Plus Jakarta Sans
   ════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root {
    --bg-base: #131920;
    --bg-surface: #1c2433;
    --bg-card: #1c2433;
    --bg-hover: #243044;
    --bg-input: #131920;
    --border: #2a3547;
    --border-subtle: #1f2c3d;
    --text-primary: #e2e8f0;          /* Dark Mode: kein reines Weiss (blendet) — vorher #f8fafc */
    --text-secondary: #c2ccd8;        /* leicht abgesenkt, Abstand zur Hauptschrift bleibt — vorher #cbd5e1 */
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    /* Akzent: nur --primary / --primary-hover / --on-primary je Schema setzen, der Rest wird abgeleitet */
    --primary: #3E9DC4;             /* Arctic Blue — im Dark Mode etwas heller */
    --primary-hover: #55AED2;
    --on-primary: #04202B;          /* Schrift auf Akzentflächen (dunkel im Dark Mode) */
    --primary-light: color-mix(in srgb, var(--primary) 18%, transparent);
    --primary-glow: color-mix(in srgb, var(--primary) 35%, transparent);
    --primary-ring: color-mix(in srgb, var(--primary) 14%, transparent);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    /* status */
    --s-success-bg: rgba(34,197,94,.12);
    /*--s-success-text: #15803d;*/
    --s-success-text: #1EB356;
    --s-warn-bg: rgba(251,191,36,.12);
    --s-warn-text: #d6a31c;
    --s-info-bg: rgba(20,184,166,.15);
    --s-info-text: #2dd4bf;
    --s-danger-bg: rgba(248,113,113,.12);
    --s-danger-text: #f87171;
    --sidebar-w: 260px;
}

/* ── Light theme ── */
    :root.light {
        --bg-base: #f0f4f8;
        --bg-surface: #ffffff;
        --bg-card: #ffffff;
        --bg-hover: #f1f5f9;
        --bg-input: #f8fafc;
        --border: #e2e8f0;
        --border-subtle: #f1f5f9;
        --primary: #2280A5;             /* Arctic Blue — im Light Mode etwas dunkler (besserer Kontrast für weisse Schrift) */
        --primary-hover: #1B6A8A;
        --on-primary: #ffffff;
        --primary-light: color-mix(in srgb, var(--primary) 12%, transparent);
        --primary-glow: color-mix(in srgb, var(--primary) 30%, transparent);
        --primary-ring: color-mix(in srgb, var(--primary) 12%, transparent);
        --text-primary: #020617;
        --text-secondary: #1e293b;
        --text-muted: #475569;
        --text-faint: #94a3b8;
        --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
        --shadow-md: 0 4px 16px rgba(15,23,42,.08);
        --shadow-lg: 0 8px 32px rgba(15,23,42,.1);
        --s-success-bg: rgba(22,163,74,.1);
        --s-success-text: #15803d;
        --s-warn-bg: rgba(202,138,4,.1);
        --s-warn-text: #d6a31c;
        --s-info-bg: rgba(13,148,136,.1);
        --s-info-text: #0f766e;
        --s-danger-bg: rgba(220,38,38,.1);
        --s-danger-text: #b91c1c;
    }

/* ── Akzent-Schemata (Kontraste geprüft: Schrift ≥ 4.5:1) ── */
:root[data-accent="blue"] {
    --primary: #2196F3;
    --primary-hover: #42A5F5;
    --on-primary: #0A1929;
}
:root.light[data-accent="blue"] {
    --primary: #1976D2;
    --primary-hover: #1565C0;
    --on-primary: #ffffff;
}
:root[data-accent="sand"] {
    --primary: #DBCFC3;
    --primary-hover: #E8DFD6;
    --on-primary: #1A140E;
    --primary-light: color-mix(in srgb, var(--primary) 16%, transparent);
}
:root.light[data-accent="sand"] {
    --primary: #7A5C3E;             /* Mokka für Knöpfe/Schrift … */
    --primary-hover: #634A31;
    --on-primary: #ffffff;
    --primary-light: color-mix(in srgb, #DBCFC3 60%, transparent);   /* … Sand für Auswahl/Hover */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
html.light { color-scheme: light; }

body {
  background: var(--bg-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-primary);
  margin: 0;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Smooth theme crossfade */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .1s ease, box-shadow .2s ease;
}
svg, svg * { transition: none; }

/* ── LAYOUT ── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 40;
  overflow: hidden;
  flex-shrink: 0;
  transition: width .26s cubic-bezier(.4,0,.2,1), min-width .26s cubic-bezier(.4,0,.2,1),
              transform .26s cubic-bezier(.4,0,.2,1),
              background-color .2s ease, border-color .2s ease;
}
/* Zugeklappt (Desktop): schmale Icon-Leiste statt ganz ausgeblendet; auf dem Handy weiterhin ausgeblendet (siehe unten) */
@media (min-width: 901px) { .sidebar.collapsed { width: 68px; min-width: 68px; } }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 64px; left: 0; height: calc(100vh - 64px);
    width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.5);
    z-index: 45;
    transform: translateX(-100%);
  }
  /* Handy: eigener Zustand (unabhängig von der Icon-Leiste am PC) — startet zu, schliesst nach Menüwahl / Tippen daneben */
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,.5), 0 0 0 100vmax rgba(0,0,0,.35); }
  .sidebar-overlay { display: block !important; top: 64px; }
}

/* Sidebar brand */
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 12px 14px;   /* Logo-Mitte = Icon-Spalte der Menüeinträge */
  
  flex-shrink: 0;
}
.sidebar-logo {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;   /* gleich hoch wie ein Menüeintrag */
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.sidebar-wordmark { overflow: hidden; white-space: nowrap; }
/* Fusszeile der Seitenleiste: Produkt, Version, Hersteller */
.sidebar-footer { flex-shrink: 0; padding: 10px 16px 12px; border-top: 1px solid var(--border-subtle);
                  font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer a { color: inherit; text-decoration: none; }
.sidebar-footer a:hover { color: var(--primary); text-decoration: underline; }
.sidebar-wordmark-name {
  font-weight: 800; font-size: 16px; letter-spacing: -.4px;
  color: var(--text-primary); line-height: 1.2;
}
.sidebar-wordmark-sub {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--primary); margin-top: 1px; text-decoration: none;
}
a.sidebar-wordmark-sub:hover { text-decoration: underline; }

/* Nav section labels */
.nav-section {
  padding: 20px 16px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
  overflow: hidden; white-space: nowrap;
}

/* Nav items */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  margin: 2px 8px; cursor: pointer;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  text-decoration: none; position: relative; overflow: hidden;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.nav-item .nav-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Handy-Menü: nur Module für das Handy (.nav-m, Liste MobileStart.Pages), Rest per „Alle Module anzeigen“ (.m-all) */
.nav-m-toggle { display: none; }
.nav-item.nav-mob { display: none; }          /* Eintrag nur fürs Handy (z.B. Termine → Liste statt Kalender) */
@media (max-width: 640px) {
  .nav-item.nav-mob { display: flex; }
  .nav-item.nav-desk { display: none; }       /* PC-Variante desselben Eintrags, auch bei „Alle Module“ */
  .nav-root:not(.m-all) > :not(.nav-m) { display: none; }
  .nav-m-toggle { display: flex; width: calc(100% - 16px); border: none; background: none; font: inherit;
                  color: var(--primary); font-weight: 600; text-align: left; }
  .nav-root:not(.m-all) .nav-m-toggle { margin-top: 10px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 14px; }
}

/* Hide labels when collapsed — nur Icon-Leiste am PC; die Handy-Schublade ist immer voll breit */
@media (min-width: 901px) {
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-wordmark,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .sidebar-user-text,
.sidebar.collapsed .nav-chevron { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
.sidebar.collapsed .nav-item::before { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0 14px; gap: 0; }
.sidebar.collapsed .nav-sub-item { display: none; }
.sidebar.collapsed .nav-group-header { justify-content: center; padding: 10px 0; gap: 0; }
.sidebar.collapsed .nav-chevron { margin: 0; }
.sidebar.collapsed .nav-submenu { display: none; }
/* Zahl (z.B. offene Anliegen) als kleiner Punkt mit Zahl oben rechts am Icon */
.sidebar.collapsed .nav-badge { position: absolute; top: 3px; right: 9px; margin: 0 !important; padding: 0 5px !important;
  font-size: 9.5px !important; line-height: 15px; min-width: 15px; text-align: center; pointer-events: none; }
.sidebar.collapsed .nav-sub-sep { display:none; }
}

/* Submenu */
.nav-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; margin: 2px 8px;
  cursor: pointer; color: var(--text-muted); font-size: 14px; font-weight: 500;
  user-select: none;
}
.nav-group-header:hover { background: var(--bg-hover); color: var(--text-secondary); }
.nav-group-header.open { color: var(--text-primary); }
.nav-chevron {
  margin-left: auto; width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .2s cubic-bezier(.4,0,.2,1) !important;
}
.nav-chevron.rotated { transform: rotate(90deg); }
.nav-submenu { overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .26s cubic-bezier(.4,0,.2,1) !important, opacity .2s ease !important; }
.nav-submenu.open { max-height: 400px; opacity: 1; }
.nav-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 42px; border-radius: 8px; margin: 1px 8px;
  cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.nav-sub-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
.nav-sub-item.active { color: var(--primary); font-weight: 600; }
.nav-sub-sep { height:1px;background:var(--border);margin:5px 14px 5px 40px; }
.nav-sub-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .6; }
.nav-sub-item.active .nav-sub-dot { opacity: 1; background: var(--primary); }

/* Sidebar user */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--on-primary);
}
.sidebar-user-text { overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sidebar-user-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Mobile overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 30; backdrop-filter: blur(2px);
}

/* ── TOPBAR ── */
.topbar {
  height: 64px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 12px;
  flex-shrink: 0;
  /* über der Belegansicht von Offerte/Auftrag (.doc-overlay z 100), damit Glocke/Benutzermenü/Darstellung
     ihre Klappmenüs darüber zeigen; unter den Dialogen (ab z 200) */
  position: relative; z-index: 150;
}
.topbar-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0;
}
.topbar-btn:hover { border-color: var(--primary); color: var(--primary); }
.ham-line {
  display: block; width: 16px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}

/* Search bar */
.topbar-search {
  flex: 1; max-width: 340px; position: relative;
}
.topbar-search input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text-primary);
  padding: 8px 14px 8px 36px; font-size: 13.5px; font-family: inherit;
  outline: none;
}
.topbar-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); }

/* Breadcrumb */
.topbar-breadcrumb { flex: 1; min-width: 0; }
/* Seitentitel: nicht grösser als der Firmenname oben links (.sidebar-wordmark-name 16px) — vorher 17px */
.topbar-page-title { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.topbar-page-sub   { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Notification badge */
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}

/* Avatar */
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--on-primary); flex-shrink: 0; cursor: default;
}

/* ── MAIN CONTENT ── */
.main-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.main-content { flex: 1; overflow-y: auto; padding: var(--main-pad-top) 28px 40px; background: var(--bg-base); position: relative; }
/* Klebende Aktionsleisten (Formulare) kleben an der Oberkante des Scrollbereichs, nicht unter dem Innenabstand */
:root { --main-pad-top: 28px; }

/* Kennzeichen (Badges + Suchfelder): weiss wie ein Nummernschild, in beiden Designs gleich. Rahmen/Schrift bewusst
   nicht ganz schwarz (abgeschwächt), hier zentral nachjustieren. */
:root { --plate-border: #6b7280; --plate-text: #374151;            /* Suchfelder */
        --plate-list-border: #9ca3af; --plate-list-text: #4b5563; }   /* Badges in Listen (noch dezenter) */
/* Kennzeichen-Hintergrund: hell = weiss; dunkel leicht gedämpft (reines Weiss blendet im Dark Mode) */
:root { --plate-bg: #dfe5ec; }
:root.light { --plate-bg: #ffffff; }

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-glow), var(--shadow-md); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-header-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.card-body { padding: 0; }

/* Handy-Formulare (Kundenanliegen, Schnellerfassung): eine Karte, die nur das ganze Formular einrahmt, verliert auf
   schmalen Bildschirmen Rahmen/Schatten/Innenabstand → volle Breite. Mehrere solche Karten untereinander werden durch
   eine Linie getrennt. Doppelte Klasse = höhere Spezifität als die seitenlokalen Kartenstile (.qo-card, .cn-card). */
@media (max-width: 640px) {
  .m-flat.m-flat, .m-flat.m-flat:hover {
    background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 4px 0;
  }
  .m-flat.m-flat + .m-flat.m-flat { border-top: 1px solid var(--border); padding-top: 16px; }
}

/* ── KENNZEICHEN-BADGE ── immer weiss mit dunklem Rahmen wie ein echtes Nummernschild (auch im Dark Mode).
   Zentral für alle Listen/Trefferanzeigen; Seiten passen höchstens die Grösse an (z.B. .qo .license-plate). */
.license-plate {
  display: inline-block; padding: 2px 8px; border-radius: 5px; border: 1.5px solid var(--plate-list-border); background: var(--plate-bg); color: var(--plate-list-text);
  font-family: monospace; font-weight: 600; font-size: 13px; letter-spacing: .06em; line-height: 1.3; white-space: nowrap;
}

/* ── STAT CARDS ── */
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.stat-card:hover { border-color: var(--primary); }
.stat-icon-wrap {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.stat-value { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -.5px; line-height: 1; }
.stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
.stat-delta { font-size: 12px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.stat-delta.up   { color: #4ade80; }
.stat-delta.warn { color: #d6a31c; }

/* ── DATA TABLE ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody td {
  padding: 13px 18px; font-size: 13.5px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);   /* alle Listen: einheitliche Textfarbe in den Spalten */
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── STATUS BADGES ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.badge-success { background: var(--s-success-bg); color: var(--s-success-text); }
.badge-warning { background: var(--s-warn-bg);    color: var(--s-warn-text);    }
.badge-info    { background: var(--s-info-bg);    color: var(--s-info-text);    }
.badge-danger  { background: var(--s-danger-bg);  color: var(--s-danger-text);  }
.badge-muted   { background: rgba(100,116,139,.12); color: var(--text-muted);   }

/* ── INPUTS ── */
.form-group { margin-bottom: 0; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text-primary);
  padding: 9px 13px; font-size: 14.5px; font-family: inherit; outline: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.form-input::placeholder { color: var(--text-faint); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 14px; padding-right: 34px !important; appearance: none;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--on-primary); border: none; cursor: pointer;
  background: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary); border: 1px solid var(--border);
  background: var(--bg-input); cursor: pointer;
}
.btn-secondary:hover { color: var(--text-primary); border-color: var(--primary); }

/* ── AVATAR ── */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; color: #fff;
}

/* ── FORM SECTION TITLE ── */
.form-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── ANIMATIONS ── */
/* Endzustand „transform:none“ (nicht translateY(0)): sonst bleibt ein Transform stehen, und position:fixed-Elemente
   darin (Toasts, Dialoge) richten sich nach diesem Container statt nach dem Fenster. */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.fade-up { animation: fadeUp .32s ease both; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
.slide-in { animation: slideIn .28s ease both; }

/* ── KANBAN ── */
.kanban-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 11px; padding: 14px 16px; box-shadow: var(--shadow-sm); cursor: pointer;
}
.kanban-card:hover { border-color: var(--primary); }

/* ── BLAZOR ERRORS ── */
#blazor-error-ui {
  background: rgba(248,113,113,.1); border-top: 1px solid rgba(248,113,113,.3);
  color: #f87171; bottom: 0; left: 0; padding: .6rem 1.5rem;
  position: fixed; width: 100%; z-index: 9999; display: none; font-size: .85rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

/* Horizontal stat card variant */
.stat-card.flex-row { flex-direction: row; align-items: center; }
.stat-card.flex-row .stat-icon-wrap { flex-shrink: 0; }

/* Toggle switch */
.toggle-btn {
  position: relative; display: inline-flex; align-items: center;
  width: 44px; height: 24px; border-radius: 12px; cursor: pointer;
  border: none; transition: background .2s;
}
.toggle-btn.on  { background: var(--primary); }
.toggle-btn.off { background: var(--border); }
.toggle-thumb {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s;
}
.toggle-btn.on  .toggle-thumb { transform: translateX(22px); }
.toggle-btn.off .toggle-thumb { transform: translateX(3px); }

/* ── Listen-Paginierung (Termine/Offerten/Aufträge/Rechnungen) ───────── */
.page-btn { min-width:32px;height:32px;padding:0 6px;border-radius:7px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s; }
.page-btn:hover:not(:disabled) { border-color:var(--primary);color:var(--primary); }
.page-btn.active { background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700;box-shadow:0 2px 8px var(--primary-glow); }
.page-btn:disabled { opacity:.35;cursor:not-allowed; }
.page-ellipsis { padding:0 4px;color:var(--text-muted);font-size:13px;line-height:32px; }

/* ── Gemeinsame Filterleiste der Listen ─────────────────────────────── */
.list-filterbar { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border-subtle); }
.list-filterbar .lf-label { color:var(--text-muted);font-size:13px;white-space:nowrap; }
.lf-search { position:relative;display:flex;align-items:center;min-width:210px; }
.lf-search > svg { position:absolute;left:10px;width:14px;height:14px;color:var(--text-muted);pointer-events:none; }
.lf-search input { width:100%;padding:7px 28px 7px 32px;border-radius:6px;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-primary);font-size:.85rem;outline:none;box-sizing:border-box; }
.lf-clear { position:absolute;right:6px;background:none;border:none;cursor:pointer;padding:2px;color:var(--text-muted);display:flex;align-items:center; }
.lf-clear svg { width:14px;height:14px; }
.lf-date { position:relative;display:flex;align-items:center; }
.lf-date input { padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-primary);font-size:.85rem;outline:none;box-sizing:border-box;width:150px; }
.lf-btn { height:34px;padding:0 12px;font-size:13px; }
.lf-pagination { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--border-subtle);background:var(--bg-hover); }
.lf-pagination .lf-count { color:var(--text-muted);font-size:12.5px; }
.lf-pagination .lf-count strong { color:var(--text-primary); }

/* ══ Bearbeitungsformular (gemeinsam: Kunden, …) — gleiche Optik wie der Artikelstamm ══
   Aktionsleiste oben (bleibt beim Scrollen), eine Karte mit nummerierten Abschnitten, kompakte Felder,
   Neu-Modus grün markiert. */
.ed-bar { position:sticky;top:calc(-1 * var(--main-pad-top));z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
          padding:10px 0 12px;margin-top:calc(-1 * var(--main-pad-top));margin-bottom:12px;background:var(--bg-base);border-bottom:1px solid var(--border-subtle); }
.ed-bar-back { height:34px;padding:0 12px; }
.ed-bar-title { flex:1;min-width:180px;display:flex;flex-direction:column;line-height:1.25; }
.ed-bar-kicker { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted); }
.ed-bar-name { font-size:17px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ed-bar-nr { font-family:ui-monospace,monospace;font-size:14px;font-weight:700;color:var(--primary);margin-right:8px; }
.ed-bar-placeholder { color:var(--text-muted);font-weight:500;font-style:italic; }
.ed-bar-actions { display:flex;gap:8px;flex-wrap:wrap; }
.ed-bar-actions button, .ed-bar-actions label.btn-secondary { height:36px; }
/* „+ Neu“ in den Formular-Kopfleisten: blau (#007bff) für Rahmen und Schrift; „Löschen“ bleibt rot */
.ed-bar-new { color:#007bff;border-color:#007bff; }
.ed-bar-del { color:#dc2626;border-color:rgba(220,38,38,.35); }
.ed-bar-new:hover { background:rgba(0,123,255,.08);border-color:#007bff;color:#007bff; }
.ed-bar-del:hover { background:rgba(220,38,38,.08);border-color:#dc2626;color:#dc2626; }
.ed-new-pill { align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
               background:rgba(22,163,74,.15);color:#16a34a;border:1px solid rgba(22,163,74,.35);letter-spacing:.04em; }
.ed-card { padding:0;overflow:hidden; }
.ed-card.is-new { border-color:rgba(22,163,74,.55);box-shadow:inset 0 3px 0 #16a34a, 0 0 0 3px rgba(22,163,74,.08); }
/* Hebebühnen-Icon (LiftIcon) inline im Text: so gross wie die Schrift, auf der Grundlinie */
.lift-ico { display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0; }
.mic-ico  { display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0; }
.phone-ico { display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0; }

/* Standard-Symbolfarbe = Farbe der Menü-Symbole (inaktiver Menüeintrag). Für Symbole neben Text in Listen/Formularen
   die Klasse .icon-std verwenden; Symbole in farbigen Knöpfen/Status erben weiter currentColor. */
:root { --icon-color: var(--text-muted); }
.icon-std { color: var(--icon-color); }

/* Waagrechte Scrollleiste der Planer-Raster (Werkstatt-/Terminplaner, ab 4 Mitarbeitern): höher als die globale 5px-Leiste,
   mit Abstand zum Raster, umrandet und mit Pfeil links/rechts. Nur WebKit/Blink-Pseudo-Elemente → kein scrollbar-width setzen. */
.ap-grid, .sched-grid { padding-bottom: 8px; }
:root.light .ap-grid, :root.light .sched-grid { --plan-thumb: #c3c9d1; }   /* Griff: hell im Light, gedämpft im Dark (Standard) */
.ap-grid::-webkit-scrollbar, .sched-grid::-webkit-scrollbar { height: 14px; }
.ap-grid::-webkit-scrollbar-track, .sched-grid::-webkit-scrollbar-track { background: var(--bg-input); border: 1px solid var(--border); border-radius: 0; }
.ap-grid::-webkit-scrollbar-thumb, .sched-grid::-webkit-scrollbar-thumb { background: var(--plan-thumb, #6b7686); border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; }
.ap-grid::-webkit-scrollbar-thumb:hover, .sched-grid::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: padding-box; }
.ap-grid::-webkit-scrollbar-button:single-button, .sched-grid::-webkit-scrollbar-button:single-button {
    display: block; width: 18px; height: 14px; background-color: var(--bg-input); border: 1px solid var(--border);
    background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
.ap-grid::-webkit-scrollbar-button:single-button:horizontal:decrement, .sched-grid::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-radius: 6px 0 0 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6.5 1.5 3 5l3.5 3.5' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap-grid::-webkit-scrollbar-button:single-button:horizontal:increment, .sched-grid::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-radius: 0 6px 6px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5 7 5 3.5 8.5' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ap-grid::-webkit-scrollbar-button:single-button:hover, .sched-grid::-webkit-scrollbar-button:single-button:hover { background-color: var(--bg-hover); }
.ap-grid::-webkit-scrollbar-button:vertical, .sched-grid::-webkit-scrollbar-button:vertical { display: none; }

/* Abschnitte 1, 2, 3 …: mehr Luft und kräftigere Trennlinie, damit die Bereiche klar getrennt sind */
.ed-sec { padding:22px 22px 24px; }
.ed-sec + .ed-sec { border-top:1px solid var(--border); }
.ed-sec-head { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.ed-sec-no { width:24px;height:24px;border-radius:50%;background:var(--primary-light);color:var(--primary);
             font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ed-sec-title { font-size:14.5px;font-weight:700;color:var(--text-primary); }
.ed-grid { display:grid;gap:10px 14px;grid-template-columns:1fr; }
@media (min-width: 720px) { .ed-grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); } .ed-span-2 { grid-column:span 2; } .ed-span-3 { grid-column:span 3; } }
.ed-card .form-input { padding:6px 11px;font-size:13.5px;border-radius:8px; }
.ed-card .form-select { padding-right:30px; }
.ed-card .form-label { margin-bottom:3px;font-size:12px; }
.ed-hint { font-size:11px;color:var(--text-muted);margin-top:2px; }
.ed-err { color:#f87171;font-size:11px;margin-top:3px; }
.ed-card .form-input.error { border-color:#f87171; }
/* Schalter */
.ed-switch { display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border:1px solid var(--border-subtle);border-radius:10px;cursor:pointer; }
.ed-switch:hover { border-color:var(--border); }
.ed-switch input { position:absolute;opacity:0;pointer-events:none; }
.ed-switch-track { flex-shrink:0;width:34px;height:20px;border-radius:999px;background:var(--border);position:relative;transition:background .15s;margin-top:1px; }
.ed-switch-thumb { position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s; }
.ed-switch input:checked + .ed-switch-track { background:var(--primary); }
.ed-switch input:checked + .ed-switch-track .ed-switch-thumb { left:16px; }
.ed-switch input:focus-visible + .ed-switch-track { outline:2px solid var(--primary);outline-offset:2px; }
.ed-switch-text { display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--text-primary); }
.ed-switch-text span { font-size:11.5px;color:var(--text-muted); }
/* Hinweis-Leisten unter der Aktionsleiste (z.B. Scan-Status, Duplikat-Warnung) */
.ed-notice { margin-bottom:12px; }

/* ══ Beleg-Formular (Auftrag, Offerte): Formular-Design statt „Papier“ — gleiche Abschnitte/Optik wie Kunde/Termin,
   Theme-Farben (Dark Mode) und tablet-tauglich (grössere Felder, Positionen als Karten auf schmalen Bildschirmen).
   Die bestehenden doc-*-Bausteine bleiben; hier werden nur ihre Papier-Farben auf Theme-Tokens umgestellt. ══ */
/* Linksbündig; jeder Abschnitt als eigene Karte mit Abstand (statt einer Karte mit Trennlinien) */
.of-form { max-width:1100px;margin:0;color:var(--text-primary); }
.of-form .ed-card { overflow:visible;background:transparent;border:none;box-shadow:none;padding:0; }
.of-form .ed-sec { padding:16px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:20px; }
.of-form .ed-sec + .ed-sec { border-top:1px solid var(--border); }
.of-form .ed-card.is-new .ed-sec:first-child { border-color:rgba(22,163,74,.55);box-shadow:inset 0 3px 0 #16a34a; }
/* Sprungleiste unter der Kopfleiste (horizontal scrollbar auf schmalen Geräten); aktiver Abschnitt via docJump.js */
.of-jump { display:flex;gap:6px;padding:8px 22px;border-bottom:1px solid var(--border);background:var(--bg-card);
           overflow-x:auto;flex-shrink:0;scrollbar-width:none; }
.of-jump::-webkit-scrollbar { display:none; }
.of-jump button { display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 8px;border-radius:999px;
                  border:1px solid var(--border-subtle);background:var(--bg-hover);color:var(--text-secondary);
                  font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0; }
.of-jump button:hover { border-color:var(--primary);color:var(--primary); }
.of-jump button.active { background:var(--primary);border-color:var(--primary);color:var(--on-primary); }
.of-jump-no { width:20px;height:20px;border-radius:50%;background:var(--primary-light);color:var(--primary);
              font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center; }
.of-jump button.active .of-jump-no { background:rgba(255,255,255,.25);color:var(--on-primary); }
/* Zuklappbare Nebenabschnitte: ganze Kopfzeile ist Tippfläche; zugeklappt nur Kopf + Zusammenfassung */
.of-sec-toggle { width:100%;min-height:36px;background:none;border:none;padding:0;text-align:left;cursor:pointer;
                 font:inherit;color:inherit;flex-wrap:nowrap !important; }
.of-sec-sum { flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--text-muted);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.of-chev { margin-left:auto;width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
           border-radius:8px;color:var(--text-muted);transition:transform .15s ease; }
.of-chev svg { width:18px;height:18px; }
.of-sec-toggle:hover .of-chev { background:var(--bg-hover);color:var(--primary); }
.ed-sec.is-collapsed > :not(.ed-sec-head) { display:none !important; }
.ed-sec.is-collapsed .ed-sec-head { margin-bottom:0; }
.ed-sec.is-collapsed .of-chev { transform:rotate(-90deg); }
@media (max-width:820px) { .of-jump { padding:8px 14px; } }
@media print { .of-jump { display:none !important; } }
/* Kunde + Fahrzeug in der Kopfleiste — bleiben beim Scrollen sichtbar */
.doc-ctx { display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary);min-width:0; }
.doc-ctx-item { display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--bg-hover);border:1px solid var(--border-subtle);
                max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.doc-ctx-item svg { width:13px;height:13px;flex-shrink:0;color:var(--text-muted); }
/* Kennzeichen wie in der Kundenliste (.license-plate), Text daneben auf gleicher Mittellinie */
.doc-ctx-plate { display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;border:1.5px solid var(--border);background:var(--bg-input);
                 font-family:monospace;font-weight:700;font-size:12px;line-height:1;letter-spacing:.06em;color:var(--text-primary);flex-shrink:0; }
.doc-ctx-text { line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.doc-ctx-label { color:var(--text-muted);font-weight:400;margin-right:-2px; }   /* „Kunde:“ vor dem Namen (Auftrag/Offerte/Rechnung) */
/* „✚ Neuer Auftrag“ im Beleg-Banner: gleiche Grösse wie die Kunden-/Fahrzeug-Badges (.doc-ctx-item) */
.doc-toolbar-meta .ed-new-pill { align-self:center;font-size:12.5px;font-weight:600;padding:3px 9px;line-height:1.35;letter-spacing:0;white-space:nowrap; }
/* Kennzeichen im Banner: weiss mit Rahmen (Kennzeichen-Stil) */
.doc-ctx-plate { background:var(--plate-bg);border-color:var(--plate-list-border);color:var(--plate-list-text);font-weight:600;
                 /* Nur Grossbuchstaben/Ziffern (keine Unterlängen) → wirkten zu hoch: 3px oben ausgleichen (verschiebt den Text um ~1.5px nach unten), Text optisch mittig */
                 padding-top:3px; }
.of-form .ed-sec-head { flex-wrap:wrap; }
.of-sec-actions { margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.of-sec-state { margin-left:auto;font-size:11.5px;color:var(--text-muted);font-weight:600; }
.of-sec-state.ok { color:#16a34a; }
.of-subhead { font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:8px; }
.of-grid-2 { display:grid;gap:14px 22px;grid-template-columns:1fr; }
@media (min-width: 820px) { .of-grid-2 { grid-template-columns:1fr 1fr; } }
.of-static { padding:8px 0;font-size:14px;color:var(--text-secondary); }
.of-inline-pair { display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start; }
.of-num-sm { width:80px !important; }
.of-alert-err { background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#dc2626;padding:8px 12px;border-radius:8px;margin-bottom:10px;font-size:12.5px; }

/* Meldung mit Schliessen-X (Komponente CloseX): Text links, X rechts oben */
.msg-closable { display:flex;align-items:flex-start;gap:8px; }
.msg-closable > .msg-text { flex:1;min-width:0; }
.close-x { flex-shrink:0;width:22px;height:22px;margin:-2px -4px -2px 0;padding:0;border:none;border-radius:5px;background:none;
           color:inherit;opacity:.75;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
.close-x:hover { opacity:1;background:color-mix(in srgb, currentColor 12%, transparent); }   /* hell wie dunkel passend */
.close-x svg { width:15px;height:15px; }
.of-form .req { color:#f87171; }

/* Felder: Theme statt Papierweiss, auf Tablets gut bedienbar */
.of-form .doc-input { background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:14px;min-height:38px; }
.of-form .doc-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring, rgba(20,184,166,.2)); }
.of-form .doc-input:disabled { opacity:.6; }
.of-form .doc-textarea { min-height:70px; }
.of-form .doc-input-cell { padding:6px 8px;font-size:13.5px;border-color:var(--border-subtle);min-height:36px; }
/* Positions-Suchfeld mit Vorschlagsliste (datalist): Chrome zeigt beim Hover einen Dropdown-Pfeil, der die Lupe verdeckt →
   ausblenden. Die Vorschläge erscheinen weiterhin beim Tippen. */
.doc-input-cell::-webkit-calendar-picker-indicator { display:none !important; }
.of-form .doc-muted, .of-form .doc-employee-empty, .of-form .doc-employee-hint { color:var(--text-muted); }
.of-form .doc-address-block { color:var(--text-secondary);margin-top:8px; }
.of-form .doc-mini-label { color:var(--text-muted); }
.of-form .doc-icon-btn { background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;min-height:38px; }
.of-form .doc-icon-btn:hover { background:var(--border-subtle);color:var(--text-primary); }
.of-form .doc-employee-display { background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;min-height:38px; }
.of-form .doc-tireset-hint { background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.35);color:var(--text-primary); }
.of-form .doc-section-internal { background:rgba(234,179,8,.07);border:1px dashed rgba(234,179,8,.45);border-radius:10px;padding:12px 14px; }
.of-form .of-internal { background:rgba(234,179,8,.06); }

/* Annahme */
.of-form .doc-fuel-buttons { border-color:var(--border);border-radius:8px; }
.of-form .doc-fuel-btn { background:var(--bg-card);color:var(--text-secondary);border-right-color:var(--border);padding:9px 16px;font-size:14px; }
.of-form .doc-fuel-btn:hover { background:var(--bg-hover); }
.of-form .doc-fuel-btn.active { background:var(--primary);color:var(--on-primary); }
.of-form .doc-checkbox, .of-form .doc-upload-btn { background:var(--bg-card);border-color:var(--border);color:var(--text-primary);border-radius:8px;min-height:38px; }
.of-form .doc-checkbox:hover, .of-form .doc-upload-btn:hover { background:var(--bg-hover); }
.of-form .doc-photo-empty { background:var(--bg-hover);border-color:var(--border);color:var(--text-muted); }
.of-form .doc-photo-thumb { background:var(--bg-hover);border-color:var(--border); }

/* Positionen + Totals */
.of-form .doc-positions th { background:var(--bg-hover);color:var(--text-muted);border-bottom-color:var(--border); }
.of-form .doc-positions td { border-bottom-color:var(--border-subtle); }
.of-form .doc-pos-total-cell { color:var(--text-primary); }
.of-form .doc-positions-empty { color:var(--text-muted); }
.of-form .doc-pos-search { color:var(--text-muted); }
.of-form .doc-pos-search:hover { color:var(--text-primary); }
.of-form .doc-pos-remove, .of-form .doc-pos-insert { color:var(--text-muted);font-size:17px;padding:6px 8px; }
.of-form .doc-add-btn { background:var(--bg-card);border-color:var(--border);color:var(--text-secondary);padding:7px 12px;font-size:12.5px; }
.of-form .doc-add-btn:hover { background:var(--bg-hover);color:var(--text-primary); }
.of-form .doc-totals { max-width:340px; }
.of-form .doc-total-row { color:var(--text-secondary); }
.of-form .doc-total-row-sub { color:var(--text-muted); }
.of-form .doc-total-final { color:var(--text-primary);border-top-color:var(--text-primary); }
.of-form .vo-alt, .of-form .vo-ok, .of-form .vo-cand { background:var(--bg-card); }

/* Meldungen, Status, Rechnung */
.of-form .doc-report { background:var(--bg-hover);border-color:var(--border); }
.of-form .doc-report.is-open { background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.55); }
.of-form .doc-report-desc { color:var(--text-primary); }
.of-form .doc-report-meta { color:var(--text-muted); }
.of-form .doc-report-reject { background:var(--bg-card);border-color:var(--border);color:var(--text-muted); }
.of-form .doc-status-flow { border-color:var(--border);border-radius:10px; }
.of-form .doc-status-step { background:var(--bg-card);color:var(--text-muted);border-right-color:var(--border);min-height:44px; }
.of-form .doc-status-step:hover, .of-form .doc-status-step-static:hover { background:var(--bg-hover);color:var(--text-secondary); }
.of-form .doc-status-step.active { color:var(--text-primary);background:color-mix(in srgb, var(--step-color, #94a3b8) 22%, var(--bg-card)); }
.of-form .doc-status-step.done   { color:var(--text-secondary);background:color-mix(in srgb, var(--step-color, #94a3b8) 12%, var(--bg-card)); }
.of-form .doc-status-step-circle { background:var(--border);color:var(--text-muted); }

/* Schmale Bildschirme (Tablet hochkant, Handy): Positionen als Karten statt breiter Tabelle */
@media (max-width: 820px) {
    .of-form .ed-sec { padding:14px 14px; }
    .of-form .doc-positions thead { display:none; }
    .of-form .doc-positions, .of-form .doc-positions tbody { display:block;width:100%; }
    .of-form .doc-positions tr { display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:8px 10px;padding:12px 4px;border-bottom:1px solid var(--border-subtle); }
    .of-form .doc-positions td { display:block;border:none !important;padding:0 !important; }
    .of-form .doc-positions td:first-child { grid-column:1 / -1; }
    .of-form .doc-positions td[data-label]::before { content:attr(data-label);display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:3px; }
    .of-form .doc-positions td.doc-positions-empty { grid-column:1 / -1; }
    .of-form .doc-pos-total-cell { text-align:left !important;font-size:15px;padding-top:6px !important; }
    .of-form .doc-pos-actions-cell { grid-column:1 / -1;justify-content:flex-end !important; }
    .of-form .doc-totals { max-width:none; }
    .doc-toolbar { padding:10px 12px; }
    .doc-toolbar-actions { margin-left:0;flex-wrap:wrap; }
}

/* Sprungleiste auf normalen Seiten (z.B. Einstellungen): klebt oben im Inhaltsbereich.
   Der Schatten nach oben deckt die Innenabstand-Zone des Scroll-Containers ab. */
.of-jump.st-jump { position:sticky;top:calc(-1 * var(--main-pad-top) + 8px);z-index:20;border:1px solid var(--border);border-radius:12px;padding:8px 10px;
                   box-shadow:0 -28px 0 var(--bg-base); }
.of-jump.st-jump button { padding:0 14px; }

/* Plattform: Hinweis auf neue Support-Meldungen der Betriebe (Kopfleiste) */
.topbar-tickets { display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
                  border:1px solid var(--primary);color:var(--primary);background:var(--primary-light);
                  font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;margin-right:8px; }
.topbar-tickets:hover { background:var(--primary);color:var(--on-primary); }
/* Hinweiszahl im Menü (z.B. neue Antwort des Supports) */
.nav-count { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;
             border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:10.5px;font-weight:700; }

/* Stammdaten-Formular mit Datensatz-Liste rechts (RecordSideList: Kunden, Lieferanten, Hebebühnen, Mitarbeiter, Fuhrpark) */
.rsl-layout { display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start;max-width:1440px; }
@media (min-width: 1100px) { .rsl-layout { grid-template-columns:minmax(0,1fr) 320px;align-items:stretch; } }
.rsl-layout > .card { max-width:none; }
/* Kopfleiste über Formular + Liste: rechte Kante bündig mit dem Formular (linke Spalte von .rsl-layout = Breite − Liste − Abstand) */
.ed-bar.rsl-bar, .sp-bar.rsl-bar { max-width:min(100%, 1440px); }
@media (min-width: 1100px) { .ed-bar.rsl-bar, .sp-bar.rsl-bar { max-width:calc(min(100%, 1440px) - 336px); } }
/* Formular ohne Liste (z.B. Kunden, Reiter „Fahrzeuge“): eine Spalte in voller Breite */
@media (min-width: 1100px) { .rsl-layout.no-side { grid-template-columns:minmax(0,1fr); } }

/* ── Toasts („… gespeichert“ usw.) einheitlich oben zentriert ──
   Die Seiten definieren ihre Toasts selbst (unten rechts). „body“ davor = höhere Spezifität, damit diese Position
   gewinnt. Zentriert über left/right/margin (nicht transform) — so bleiben die Einblend-Animationen der Seiten intakt. */
body .toast-success, body .settings-toast, body .doc-toast, body .dr-toast, body .wf-toast, body .ap-toast {
  top: 16px; bottom: auto; left: 0; right: 0;
  margin: 0 auto; width: max-content; max-width: calc(100% - 32px);
}

/* Toasts sanft ein- und ausblenden. Einblenden: hier. Ausblenden: js/toastFade.js setzt beim Entfernen eine Kopie mit
   .iq-toast-leaving ein, die ausblendet. Ersetzt die seiteneigenen Einblend-Animationen (gleiche Wirkung überall). */
@keyframes iqToastIn  { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes iqToastOut { from { opacity:1; transform:translateY(0); }     to { opacity:0; transform:translateY(-10px); } }
body .toast-success, body .settings-toast, body .doc-toast, body .dr-toast, body .wf-toast {   /* .ap-toast (Planer) ohne Animation: blendet per Klasse .is-hidden + transition */
  animation: iqToastIn .5s ease-out both;
}
body .iq-toast-leaving { animation: iqToastOut .6s ease-in forwards; pointer-events: none; }

/* Leere Datumsfelder: Platzhalter „TT.MM.JJJJ“ ausblenden (Klasse setzt js/dateEmpty.js). Beim Fokus wieder sichtbar,
   damit man das Datum eintippen kann; das Kalender-Symbol bleibt. */
input[type="date"].date-empty:not(:focus) { color: transparent; }
input[type="date"].date-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }

/* ── Beleg-Kopf (Auftrag, Offerte/KVA): Belegnummer als Badge in der Sprungleiste, Status als Badge neben „Zurück“ ── */
.of-jump.of-jump-doc { padding:8px 16px; }                 /* gleicher linker Rand wie die Karten */
.of-jump-row { display:flex;gap:6px;align-items:center;min-width:max-content; }
/* Nummern-Badge: Optik/Höhe wie die Sprungmarken (.of-jump button), aber nicht klickbar */
.of-jump-nr { display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;flex-shrink:0;
              margin-left:12px;   /* zusammen mit gap 6px ≈ 3× Abstand der Sprungmarken untereinander */
              border:1px solid transparent;background:var(--primary-light);color:var(--primary);   /* wie .of-jump-no */
              font-size:13px;font-weight:600;white-space:nowrap;cursor:default; }
.of-jump-nr-val { color:var(--text-primary); }
/* Status-Badge der Offerte im Banner: Grösse wie Kunde/Fahrzeug (.doc-ctx-item) — wie beim Auftrag */
.doc-toolbar-meta .of-badge { padding:3px 9px;font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap; }

/* Gesperrt-Hinweis oben im Beleg (Auftrag verrechnet, Offerte übernommen, KVA umgewandelt) — Theme-Farben (auch Dark Mode) */
.doc-lock-banner { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;border-radius:8px;
                   border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
                   background:var(--primary-light);color:var(--primary);font-size:13px;font-weight:600; }
.doc-lock-banner a, .doc-lock-banner .of-link-btn { color:var(--primary);text-decoration:underline;background:none;border:none;padding:0;font:inherit;cursor:pointer; }

/* ── Kunden-/Fahrzeug-Dialog aus Auftrag und Offerte (CustomerEditDialog, VehicleEditDialog) ── */
.ced-backdrop { position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem 1rem;
                background:rgba(0,0,0,.55);backdrop-filter:blur(4px); }
.ced-dialog   { width:min(900px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--bg-card);
                border:1px solid var(--border);border-radius:14px;box-shadow:0 25px 60px rgba(0,0,0,.35);overflow:hidden; }
.ced-head     { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--border);flex-shrink:0; }
.ced-title    { flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.ced-name     { font-size:15px;font-weight:700;color:var(--text-primary);display:inline-flex;align-items:center;gap:8px;min-width:0; }
.ced-name .ed-bar-placeholder { font-weight:500; }
.ced-close    { width:32px;height:32px;border-radius:8px;border:none;background:none;color:var(--text-muted);font-size:18px;cursor:pointer; }
.ced-close:hover { background:var(--bg-hover);color:var(--text-primary); }
.ced-body     { overflow-y:auto;flex:1;min-height:0; }
.ced-notices  { display:flex;flex-direction:column;gap:8px;padding:12px 18px 0; }
.ced-notices:empty { display:none; }
.ced-ok       { padding:9px 12px;border-radius:8px;background:rgba(22,163,74,.10);color:#16a34a;font-size:13px;font-weight:600; }
.ced-err      { padding:9px 12px;border-radius:8px;background:rgba(220,38,38,.08);color:#dc2626;font-size:13px; }
.ced-info     { padding:9px 12px;border-radius:8px;background:var(--bg-hover);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12.5px; }
.ced-prompt   { padding:12px 14px;border-radius:10px;border:1.5px solid rgba(245,158,11,.45);background:rgba(245,158,11,.08);font-size:12.5px;color:var(--text-secondary);line-height:1.5; }
.ced-prompt strong { display:block;color:var(--text-primary);font-size:13.5px;margin-bottom:3px; }
.ced-prompt-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:10px; }
.ced-prompt-actions button { height:32px;padding:0 14px;font-size:12.5px; }
.ced-cand     { display:flex;align-items:flex-start;gap:8px;padding:3px 0;color:var(--text-primary);cursor:pointer; }
.ced-cand input { margin-top:3px;accent-color:var(--primary); }
.ced-subhead  { display:flex;align-items:center;gap:10px;padding:14px 22px 0;border-top:1px solid var(--border); }
.ced-actions  { display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0; }
.ced-actions button { height:36px;padding:0 18px;font-size:13.5px; }
@media (max-width: 640px) { .ced-backdrop { padding:0; } .ced-dialog { max-height:100vh;height:100%;border-radius:0; } }

/* Werkstattplaner: Viertelstunde unter dem Mauszeiger (js/laneHover.js) — gleich wie die Vorschau im Terminplaner (.sched-sel) */
.lane-hover { position:fixed;z-index:40;pointer-events:none;box-sizing:border-box;display:none;
              background:var(--primary-light);border:1px solid var(--primary);border-radius:4px;
              color:var(--primary);font-size:10.5px;font-weight:700;line-height:1;padding:2px 4px;overflow:hidden;white-space:nowrap; }

/* „Abo abschliessen“ (SubscribeDialog: Testphasen-Banner, Sperrseite, Einstellungen → Abo) — grün, überall gleich */
.btn-subscribe { display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#198754;color:#fff;border:1px solid #198754;
                 border-radius:8px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s, border-color .15s; }
.btn-subscribe:hover, .btn-subscribe:focus-visible { background:#157347;border-color:#157347;color:#fff; }