/* =========================================================================
   My-Viba Backoffice – Layout (Redesign: Navy + Gold, mehr Tiefe & Leben)
   Shell, KPIs, Panels & Tabellen neu; Formulare/Buttons/Badges kompatibel.
   ========================================================================= */
:root{
  /* Marken-Shell */
  --ozean-1:#0a2747;        /* Header tief   */
  --ozean-2:#103a6b;        /* Header hell   */
  --ozean-3:#16498a;        /* Nav-Hover     */
  --gold-1:#e7a93b;
  --gold-2:#d4882a;
  --logo-rot:#e23a2e;

  /* Basis */
  --bg:#eef3f9;
  --panel:#ffffff;
  --ink:#16273d;
  --muted:#5d6e85;
  --leise:#8a99ad;
  --line:#e3e9f2;
  --line-stark:#d2dbe8;

  --brand:#0f4c81;
  --brand-dark:#0b3a63;
  --blau:#1f6fb2;
  --accent:#e7a93b;

  /* Semantik + Tints */
  --ok-bg:#e7f6ec;  --ok-ink:#1d6b3a;
  --warn-bg:#fdf3e4; --warn-ink:#92600a;
  --err-bg:#fbe3e3;  --err-ink:#9b2222;
  --blau-tint:#eaf2fb;

  --radius:13px;
  --radius-s:9px;
  --schatten-s:0 1px 2px rgba(16,40,75,.05), 0 2px 6px rgba(16,40,75,.04);
  --schatten-m:0 4px 14px rgba(16,40,75,.07), 0 1px 3px rgba(16,40,75,.05);
  --schatten-l:0 14px 36px rgba(16,40,75,.14);

  --maxbreite:1600px;
  --side-ink:#c4d2e0;
  --side-ink-dim:#8aa0b6;
  --font-display:"Bricolage Grotesque","Manrope","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope","Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
  background-image:
    radial-gradient(1100px 460px at 80% -200px, rgba(31,111,178,.10), transparent 70%),
    radial-gradient(900px 380px at 5% -160px, rgba(212,136,42,.07), transparent 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------- App-Shell: Top-Navigation (volle Breite) ---------------- */
.app{display:flex; flex-direction:column; min-height:100vh}
.nav-overlay{display:none}

.topnav{
  position:sticky; top:0; z-index:30; color:#fff;
  background:linear-gradient(120deg,var(--ozean-1),var(--ozean-2));
  border-bottom:3px solid var(--gold-1);
  box-shadow:0 6px 24px rgba(10,39,71,.26);
}
/* dezentes Flugbahn-Punktraster im Header */
.topnav::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(95deg, transparent 52%, #000 100%);
          mask-image:linear-gradient(95deg, transparent 52%, #000 100%);
  opacity:.5;
}
.topnav-haupt{
  position:relative; z-index:40;
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:var(--maxbreite); margin:0 auto; padding:13px 24px;
}

/* Marke: echtes Logo in weißem Chip + Gold-Label */
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand,.brand:hover{text-decoration:none}
.brand-logo{height:46px; width:auto; display:block; background:#fff; padding:5px 10px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.25)}
.brand-wort{line-height:1.1; display:block}
.brand-wort b{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.2px; color:#fff; display:block}
.brand-wort small{display:block; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.82); margin-top:2px; font-weight:600}

/* Globale Suche (auf dunklem Header) */
.suche-global{position:relative; flex:1; max-width:430px; display:flex; align-items:center}
.suche-global .such-ico{position:absolute; left:14px; color:rgba(255,255,255,.7); display:flex; pointer-events:none}
.suche-global .such-ico svg{width:17px; height:17px}
.suche-global input{
  width:100%; height:44px; padding:0 14px 0 40px; border-radius:12px;
  background:rgba(255,255,255,.13); color:#fff; font:inherit; font-size:14px;
  border:1px solid rgba(255,255,255,.16); outline:none; transition:.18s;
}
.suche-global input::placeholder{color:rgba(255,255,255,.62)}
.suche-global input:focus{
  background:rgba(255,255,255,.22); border-color:var(--gold-1);
  box-shadow:0 0 0 4px rgba(231,169,59,.20);
}
.suche-panel{
  position:absolute; top:52px; left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:13px; box-shadow:0 16px 38px rgba(15,30,50,.20); overflow:auto; max-height:72vh;
  display:none; z-index:60; color:var(--ink);
}
.suche-panel.auf{display:block}
.such-gruppe{font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:11px 16px 5px}
.such-treffer{display:flex; flex-direction:column; gap:1px; padding:9px 16px; color:var(--ink); border-left:3px solid transparent}
.such-treffer:hover,.such-treffer.markiert{background:var(--blau-tint); text-decoration:none; border-left-color:var(--brand)}
.such-treffer .st-haupt{font-weight:600; font-size:13.5px}
.such-treffer .st-neben{font-size:12px; color:var(--muted)}
.such-leer{padding:16px; color:var(--muted); font-size:13px}

/* CTA „Neue Rechnung" – Gold-Verlauf */
.nav-primary{
  flex:0 0 auto; padding:0 18px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#3a2406;
  font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(212,136,42,.40); transition:.18s; border:none;
}
.nav-primary:hover{transform:translateY(-1px); text-decoration:none; color:#3a2406; box-shadow:0 10px 24px rgba(212,136,42,.5)}
.nav-primary .ico{display:flex}
.nav-primary .ico svg{width:16px; height:16px}

.topbar-rechts{flex:0 0 auto; display:flex; align-items:center; gap:12px}
.topbar-firma{font-size:12.5px; color:rgba(255,255,255,.66); font-weight:600}
.topbar-user{font-size:13px; color:#fff; font-weight:700}
.topbar-rechts .btn.sek{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.30)}
.topbar-rechts .btn.sek:hover{background:rgba(255,255,255,.14)}

.burger{display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px; width:auto}
.burger svg{width:22px; height:22px}

/* Menüleiste mit Hover-Rollout (im Navy verschmolzen) */
.menubar{position:relative; z-index:20; border-top:1px solid rgba(255,255,255,.10)}
.menubar-inner{display:flex; gap:2px; width:100%; max-width:var(--maxbreite); margin:0 auto; padding:0 16px}
.mgroup{position:relative}
.mtrigger{
  display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.82);
  font-weight:600; font-size:13.5px; padding:13px 16px; cursor:pointer; white-space:nowrap; line-height:1;
  border-bottom:3px solid transparent; transition:.15s;
}
.mtrigger .ico{display:flex; opacity:.85}
.mtrigger .ico svg{width:16px; height:16px}
.mtrigger .pfeil{display:flex; opacity:.55; margin-left:-3px}
.mtrigger .pfeil svg{width:11px; height:11px}
.mgroup:hover > .mtrigger,.mtrigger:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.mgroup.aktiv > .mtrigger{color:#fff; border-bottom-color:var(--gold-1)}
.mdrop{
  display:none; position:absolute; top:100%; left:0; min-width:240px;
  background:var(--panel); border:1px solid var(--line); border-top:none;
  border-radius:0 0 13px 13px; box-shadow:0 18px 38px rgba(15,30,50,.20);
  padding:8px; z-index:50;
}
.mgroup:hover > .mdrop{display:block}
.mgroup:last-child .mdrop{left:auto; right:0}
.mdrop a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  color:var(--ink); font-weight:500; font-size:13.5px; white-space:nowrap;
}
.mdrop a:hover{background:var(--blau-tint); text-decoration:none}
.mdrop a.aktiv{background:rgba(15,76,129,.10); color:var(--brand); font-weight:700}
.mdrop a .ico{display:flex; opacity:.7}
.mdrop a .ico svg{width:16px; height:16px}

.content{flex:1; min-width:0; display:flex; flex-direction:column}
.content-inner{max-width:var(--maxbreite); width:100%; margin:28px auto; padding:0 24px}

h1{font-family:var(--font-display); font-size:28px; margin:0 0 4px; font-weight:800; letter-spacing:-.4px}
h2{
  font-family:var(--font-display); font-size:18px; margin:28px 0 12px; font-weight:700;
  position:relative; padding-left:14px;
}
h2::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:4px;
  background:linear-gradient(var(--gold-1),var(--gold-2));
}
.unterzeile{color:var(--muted); margin:0 0 22px}

@media (max-width:980px){
  .topnav-haupt{padding:11px 14px; gap:10px}
  .brand-wort{display:none}
  .topbar-firma{display:none}
  .suche-global{max-width:none}
  .burger{display:inline-flex; order:-1}
  .menubar{display:none}
  .app.nav-offen .nav-overlay{display:block; position:fixed; inset:0; background:rgba(8,20,33,.5); z-index:35}
  .app.nav-offen .menubar{
    display:block; position:fixed; top:0; left:0; bottom:0; width:286px; overflow-y:auto;
    z-index:40; padding:14px 0; box-shadow:0 0 40px rgba(0,0,0,.4);
    background:linear-gradient(180deg,var(--ozean-2),var(--ozean-1));
  }
  .app.nav-offen .menubar-inner{flex-direction:column; align-items:stretch; max-width:none; padding:8px 12px; gap:3px}
  .mgroup{position:static}
  .app.nav-offen .mtrigger{border-radius:8px; padding:11px 12px; border-bottom:none}
  .app.nav-offen .mgroup.aktiv > .mtrigger{background:rgba(29,111,176,.30)}
  .app.nav-offen .mdrop{
    display:block; position:static; min-width:0; background:transparent;
    border:none; box-shadow:none; border-radius:0; padding:2px 0 8px 30px;
  }
  .app.nav-offen .mdrop a{color:var(--side-ink)}
  .app.nav-offen .mdrop a:hover{background:rgba(255,255,255,.08)}
  .app.nav-offen .mdrop a.aktiv{background:rgba(29,111,176,.28); color:#fff}
  .content-inner{padding:0 16px; margin:20px auto}
  h1{font-size:24px}
}

/* ----------------------------- Panels ----------------------------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:22px;
  box-shadow:inset 3px 0 0 var(--blau), var(--schatten-m);
}

/* ----------------------------- KPI-Karten ----------------------------- */
.kpi-reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px; margin-bottom:10px}
.kpi{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 16px; box-shadow:var(--schatten-m); transition:.2s;
  animation:kpiAuf .5s both;
}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--schatten-l)}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.kpi .label{color:var(--muted); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding-right:48px}
.kpi .wert{font-family:var(--font-display); font-size:29px; font-weight:800; letter-spacing:-.6px; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums}
.kpi .sub{margin-top:9px; font-size:12px; color:var(--muted)}
.kpi-ico{position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center}
.kpi-ico svg{width:22px; height:22px}

/* Standard = Blau (Umsatz) */
.kpi::before{background:linear-gradient(var(--blau),#15579a)}
.kpi-ico{background:var(--blau-tint); color:var(--blau)}
/* Grün (Verdienst) */
.kpi.gruen::before{background:linear-gradient(#1f9d6b,#137c52)}
.kpi.gruen .kpi-ico{background:var(--ok-bg); color:var(--ok-ink)}
/* Rot (Forderungen) */
.kpi.rot::before{background:linear-gradient(#d94a45,#b8332e)}
.kpi.rot .kpi-ico{background:var(--err-bg); color:var(--err-ink)}
/* Gold (Veranstalter) */
.kpi.gelb::before{background:linear-gradient(var(--gold-1),var(--gold-2))}
.kpi.gelb .kpi-ico{background:var(--warn-bg); color:var(--warn-ink)}

.kpi-reihe .kpi:nth-child(1){animation-delay:.04s}
.kpi-reihe .kpi:nth-child(2){animation-delay:.10s}
.kpi-reihe .kpi:nth-child(3){animation-delay:.16s}
.kpi-reihe .kpi:nth-child(4){animation-delay:.22s}
.kpi-reihe .kpi:nth-child(5){animation-delay:.28s}
@keyframes kpiAuf{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ----------------------------- Tabellen ----------------------------- */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line)}
th{background:var(--blau-tint); color:var(--brand); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--blau-tint)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabelle-leer{color:var(--muted); padding:20px 12px}

/* ----------------------------- Badges / Pills ----------------------------- */
.badge{display:inline-flex; align-items:center; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; line-height:1.5}
.badge.offen{background:var(--warn-bg); color:var(--warn-ink)}
.badge.bezahlt{background:var(--ok-bg); color:var(--ok-ink)}
.badge.teilbezahlt{background:#e6eefb; color:#234a8a}
.badge.storniert{background:#eceef0; color:#6b7280}
.badge.entwurf{background:#eceef0; color:#6b7280}
.badge.faellig{background:var(--err-bg); color:var(--err-ink)}

/* ----------------------------- Formulare ----------------------------- */
label{display:block; font-weight:600; font-size:12.5px; margin:0 0 4px; color:#3a4550}
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line-stark); border-radius:9px;
  font:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,76,129,.14)}
.feldgruppe{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:14px}
.feld-voll{grid-column:1/-1}

/* ----------------------------- Buttons ----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:#fff; border:none; cursor:pointer;
  padding:9px 18px; border-radius:9px; font:inherit; font-weight:600; transition:.15s;
}
.btn:hover{background:var(--brand-dark); text-decoration:none}
.btn.sek{background:#fff; color:var(--brand); border:1px solid var(--line-stark)}
.btn.sek:hover{background:var(--blau-tint); border-color:var(--brand)}
.btn.klein{padding:6px 12px; font-size:12.5px; border-radius:8px}
.btn-reihe{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}

/* ----------------------------- Flash / Hinweise ----------------------------- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-weight:500}
.flash-ok{display:none}  /* Erfolgs-Bestätigungen ausgeblendet; Fehler (rot) bleiben sichtbar */
.flash-fehler{background:var(--err-bg); color:var(--err-ink)}
.flash-info{background:#e6eefb; color:#234a8a}

.hinweis{background:#fff8e6; border:1px solid #f0deb0; color:#7a5b12; padding:12px 15px; border-radius:10px; font-size:13px; margin-bottom:18px}
.hinweis:not(.warn){display:none}  /* Erklär-Hinweise ausgeblendet; echte Warnungen (.warn) bleiben sichtbar */
.werkzeugleiste{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.suchfeld{display:flex; gap:8px; max-width:420px; flex:1}
.summen{margin-left:auto; max-width:340px}
.summen td{border:none; padding:5px 8px}
.summen tr.gesamt td{border-top:2px solid var(--ink); font-weight:700; font-size:15px}

/* ----------------------------- Positions-/Flugzeilen ----------------------------- */
.positionszeile{border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; background:#fafbfc}
.pos-grid{display:grid; gap:10px; grid-template-columns:1.4fr 1fr 1fr .8fr .8fr .7fr auto; align-items:end}
.flugzeile{display:grid; gap:10px 12px; grid-template-columns:1fr 1.3fr .8fr 1fr .8fr 1fr auto; align-items:end; margin-bottom:18px}
.flugzeile > div{position:relative}
.flugzeile .ort-hint{position:absolute; left:0; top:100%; margin-top:2px; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis}
.mini{font-size:11px; color:var(--muted); margin-top:4px}

/* Summenzeile in Tabellen + Checkbox-Label */
tr.summenzeile td{border-top:2px solid var(--line); background:#f7f9fc}
label.check{display:inline-flex; align-items:center; gap:8px; font-weight:500; cursor:pointer}
label.check input{width:auto; margin:0}

/* Überzahlungen / Guthaben / Rückforderungen */
.num.gutschrift,.gutschrift{color:#b00020}
.hinweis.warn{border-color:#e0a800; background:#fff8e1}

/* Zentrierter Bestätigungs-Dialog (ersetzt window.confirm) */
.mv-confirm{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(10,39,71,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:20px; }
.mv-confirm.offen{ display:flex; animation:mvFade .15s ease; }
@keyframes mvFade{ from{opacity:0} to{opacity:1} }
.mv-confirm-card{ width:100%; max-width:420px; background:#fff; border-radius:16px; padding:26px 26px 22px;
  text-align:center; box-shadow:0 24px 60px rgba(10,39,71,.35); border-top:5px solid #103a6b;
  animation:mvPop .18s cubic-bezier(.2,.8,.3,1.2); }
.mv-confirm.gefahr .mv-confirm-card{ border-top-color:#103a6b; }
@keyframes mvPop{ from{transform:translateY(10px) scale(.96); opacity:0} to{transform:none; opacity:1} }
.mv-confirm-ico{ width:54px; height:54px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#103a6b,#0a2747); color:#fff; }
.mv-confirm.gefahr .mv-confirm-ico{ background:linear-gradient(135deg,#e2574c,#c0392b); }
.mv-confirm-ico svg{ width:28px; height:28px; }
.mv-confirm-titel{ font-family:var(--font-display, inherit); font-weight:800; font-size:19px; color:#0f2a4a; margin-bottom:6px; }
.mv-confirm-text{ font-size:14.5px; color:#46586c; line-height:1.5; margin-bottom:20px; }
.mv-confirm-btns{ display:flex; gap:10px; justify-content:center; }
.mv-confirm-btns button{ font:inherit; font-weight:700; font-size:14px; padding:11px 20px; border-radius:10px; cursor:pointer; border:1px solid transparent; }
.mv-btn-no{ background:#4B5563; color:#fff; border-color:#4B5563; }
.mv-btn-no:hover{ filter:brightness(1.08); }
.mv-btn-yes{ background:#0F766E; color:#fff; box-shadow:0 4px 12px rgba(15,118,110,.32); }
.mv-btn-yes:hover{ filter:brightness(1.08); }