/* ============================================================
   style-v2.css — Invoxa Redesign, Schritt 1: Sidebar & Branding
   Wird NACH style.css geladen. Enthält bewusst nur das, was für
   die neue Sidebar-Navigation gebraucht wird. Weitere Bausteine
   (Hero-Banner, Karten, Formulare, Charts) kommen in den
   nächsten Schritten dazu, sobald die jeweiligen Seiten-
   Templates angepasst werden.
   ============================================================ */

:root{
  --iv-brand:#307792;
  --iv-brand-dark:#1f4f61;
  --iv-sidebar-text:#a6acb6;
  --iv-sidebar-text-active:#ffffff;
  --mm-teal:#307792; /* überschreibt die bisherige Akzentfarbe app-weit */
}

/* --- Mosaik-Hintergrundmuster ausblenden --- */
.mm-sidebar-mosaic{ display:none; }

/* --- Logo: Invoxa-Wortmarke + Media-Mosaic-Kennzeichnung --- */
.mm-sidebar-logo-combo{ display:flex; }
.mm-sidebar-logo-combo .mm-logo-link{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
}
.iv-brand-name{
  font-size:20px; font-weight:700; color:#fff; letter-spacing:.2px; line-height:1;
}
.iv-brand-sub{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--iv-sidebar-text);
}
.iv-mm-mark-img{ width:16px; height:16px; border-radius:4px; object-fit:contain; }
.iv-mm-fallback{
  display:none; width:16px; height:16px; border-radius:4px; background:var(--iv-brand);
  color:#fff; font-size:8px; font-weight:700; align-items:center; justify-content:center;
}

/* --- Nav-Links (ersetzt die alten .mm-nav-item für die Sidebar) --- */
.mm-sidebar-nav{ display:flex; flex-direction:column; }
.nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--iv-sidebar-text); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:2px; border-left:3px solid transparent;
}
.nav-link i{ font-size:16px; width:18px; text-align:center; }
.nav-link:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.nav-link.active{
  background:rgba(48,119,146,0.3); color:var(--iv-sidebar-text-active);
  border-left-color:var(--iv-brand);
}

/* --- Gruppen mit Untermenü (Rechnungen, Angebote, Finanzen, Einstellungen) --- */
.nav-group{ margin-bottom:2px; }
.nav-group-header{ display:flex; align-items:center; gap:2px; }
.nav-group-header .nav-link{ flex:1; margin-bottom:0; }
.nav-toggle{
  background:none; border:none; color:var(--iv-sidebar-text); width:30px; height:34px;
  flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:8px;
}
.nav-toggle:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.nav-toggle i{ font-size:12px; transition:transform .15s ease; }
.nav-group.open .nav-toggle i{ transform:rotate(180deg); }
.nav-children{
  display:none; padding-left:30px; border-left:1px solid rgba(255,255,255,0.09);
  margin:2px 0 6px 19px;
}
.nav-group.open .nav-children{ display:block; }
.nav-children .nav-link{ font-size:12.5px; padding:7px 10px; border-left:none; }
.nav-children .nav-link.active{
  background:rgba(48,119,146,0.3); color:#fff; border-left:3px solid var(--iv-brand);
  margin-left:-3px; padding-left:7px;
}

/* --- Platzhalter für noch nicht existierende Routen --- */
.nav-link-soon{ cursor:default; opacity:.55; }
.nav-link-soon:hover{ background:none; color:var(--iv-sidebar-text); }
.soon-badge{
  margin-left:auto; font-size:9.5px; font-weight:600; background:rgba(255,255,255,0.12);
  padding:1px 7px; border-radius:999px;
}

/* --- CTA-Button in der Markenfarbe statt bisheriger Akzentfarbe --- */
.mm-new-btn{
  background:var(--iv-brand) !important; border-color:var(--iv-brand) !important;
}
.mm-new-btn:hover{ background:var(--iv-brand-dark) !important; }

/* ============================================================
   Schritt 2 — Hero-Banner, Karten, Status-Pills (Dashboard)
   ============================================================ */

/* --- Hero-Banner: gro\u00df (Dashboard, Foto-Skins) vs. schlank (Formular/Liste/Auswertung, Verlauf) --- */
.hero-zone{
  position:relative; overflow:hidden; border-radius:16px;
}
.hero-zone-lg{
  padding:26px 28px 0;
  background:linear-gradient(120deg, var(--iv-brand) 0%, #6c5ce7 100%);
  background-size:cover; background-position:center;
}
.hero-zone-lg::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,0.14), transparent 42%),
    linear-gradient(165deg, rgba(8,12,16,0.12), rgba(8,12,16,0.5));
}
.hero-inner{ position:relative; z-index:1; }
.hero-zone-lg.iv-skin-orange{ background-image:url('/static/hero/Hintergrundbild_Orange.png'); }
.hero-zone-lg.iv-skin-blau{ background-image:url('/static/hero/Hintergrundbild_Blau.png'); }
.hero-zone-lg.iv-skin-grau{ background-image:url('/static/hero/Hintergrundbild_grau.png'); }
.hero-zone-lg.iv-skin-magenta{ background-image:url('/static/hero/Hintergrundbild_magenta.png'); }
.hero-zone-lg.iv-skin-gelb{ background-image:url('/static/hero/Hintergrundbild_gelb.png'); }

/* Schlanker Hero: Lavendel-zu-Navy-Verlauf, dunkle Schrift, kein Foto */
.hero-zone-sm{
  padding:18px 26px;
  background:linear-gradient(135deg, #a89bd9 0%, #5b4ea3 45%, #161029 100%);
}

.glass-card{
  background:rgba(255,255,255,0.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.5); border-radius:16px; box-shadow:0 8px 28px rgba(15,23,42,0.14);
}

/* Titel + Aktionen: gro\u00df = wei\u00df auf Foto, schlank = dunkel auf Verlauf */
.hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; }
.hero-top.sm{ align-items:center; padding-bottom:0; }
.hero-eyebrow{ margin:0 0 6px; font-size:12.5px; color:rgba(255,255,255,0.78); font-weight:500; }
.hero-title{ margin:0; font-size:24px; font-weight:700; color:#fff; }
.hero-title.sm{ font-size:19px; color:#ffffff; display:flex; align-items:center; gap:10px; }
.hero-sub{ margin:6px 0 0; font-size:13.5px; color:rgba(255,255,255,0.85); }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.hero-badge{
  display:inline-block; font-size:12px; font-weight:600; color:#3f3a52;
  background:rgba(255,255,255,0.75); padding:3px 12px; border-radius:999px;
}

/* Glas-Streifen mit Kennzahlen, schneidet unten ins Foto (nur gro\u00dfer Hero) */
.hero-stat-strip{
  display:flex; flex-wrap:wrap; background:rgba(13,18,24,0.45);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,0.14); margin:0 -28px; padding:16px 28px;
}
.hero-stat{ flex:1; min-width:140px; padding:0 18px; border-left:1px solid rgba(255,255,255,0.14); }
.hero-quick-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; color:#fff; padding:14px 8px; min-height:64px;
}
.hero-quick-link i{ font-size:22px; }
.hero-quick-link:hover{ color:#fff; opacity:.82; }
.hero-stat:first-child{ border-left:none; padding-left:0; }
.hs-label{ display:block; font-size:11.5px; color:rgba(255,255,255,0.72); font-weight:500; margin-bottom:4px; }
.hs-value{ display:block; font-size:21px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.hs-value.hs-danger{ color:#ff9b8f; }
.hs-meta{ display:block; font-size:11px; color:rgba(255,255,255,0.62); margin-top:2px; }

.btn-ghost-glass{
  display:inline-flex; align-items:center; gap:7px; border-radius:8px; font-size:13.5px; font-weight:500;
  padding:9px 16px; cursor:pointer; border:1px solid rgba(255,255,255,0.6); text-decoration:none;
  background:rgba(255,255,255,0.55); color:#161a1f;
}
.btn-ghost-glass:hover{ background:rgba(255,255,255,0.75); color:#161a1f; }
.btn-primary-iv{
  display:inline-flex; align-items:center; gap:7px; border-radius:8px; font-size:13.5px; font-weight:500;
  padding:9px 16px; cursor:pointer; border:none; text-decoration:none;
  background:var(--iv-brand); color:#fff; box-shadow:0 3px 8px rgba(31,79,97,0.35);
}
.btn-primary-iv:hover{ background:var(--iv-brand-dark); color:#fff; }

.content-pad{ padding-top:20px; }

/* --- KPI-Karten --- */
.iv-kpi{ border-radius:16px !important; box-shadow:0 4px 16px rgba(15,23,42,0.07); border:none !important; }
.iv-kpi .fs-4{ font-size:25px !important; letter-spacing:-.2px; }

/* --- Status-Übersicht (anklickbare Kacheln im Dashboard) --- */
.iv-status-card{ border-radius:12px !important; border:none !important; transition:transform .1s ease; }
.iv-status-card:hover{ transform:translateY(-1px); }
.iv-status-card .small, .iv-status-card .fs-5{ color:inherit; }
.iv-status-entwurf{ background:#eef0f2; color:#5b6470; }
.iv-status-geplant{ background:#e9eefb; color:#3354b8; }
.iv-status-versendet{ background:#e1eef2; color:#236478; }
.iv-status-bezahlt{ background:#e5f6ea; color:#1f8a44; }
.iv-status-offen{ background:#fdecec; color:#c2362c; }
.iv-status-storniert{ background:#eceef1; color:#4b5563; }

/* --- Status-Badges (z.B. in "Letzte Rechnungen") --- */
.badge-status.badge-entwurf{ background:#eef0f2; color:#5b6470; }
.badge-status.badge-geplant{ background:#e9eefb; color:#3354b8; }
.badge-status.badge-versendet{ background:#e1eef2; color:#236478; }
.badge-status.badge-bezahlt{ background:#e5f6ea; color:#1f8a44; }
.badge-status.badge-offen{ background:#fdecec; color:#c2362c; }
.badge-status.badge-storniert{ background:#eceef1; color:#4b5563; }
.badge-overdue{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:600; background:#fdecec; color:#c2362c; }

/* --- Allgemeine "weiche" Karten (Chart, Top Kunden, USt-Vorschau, etc.) --- */
.iv-card-soft{ border-radius:16px !important; box-shadow:0 4px 16px rgba(15,23,42,0.07); border:none !important; }

/* ============================================================
   Schritt 3 — Globale Formular- und Karten-Veredelung
   Wirkt auf JEDE Seite, die Standard-Bootstrap-Klassen nutzt
   (.card, .form-control, .form-select, .btn-primary, ...) —
   bewusst OHNE !important auf border/Hintergrund, damit lokale
   Inline-Styles (z.B. der farbige Rand der Einrichtungs-Karte
   im Dashboard) nicht überschrieben werden.
   ============================================================ */

.btn-dashed{
  background:none; border:1.5px dashed #d7dadf; color:#475569; border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.btn-dashed:hover{ border-color:var(--iv-brand); color:var(--iv-brand-dark); }

.mm-content{ background-color:#eef1f4; }

.card{
  background-color:#ffffff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,0.05);
  box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 18px 34px -10px rgba(15,23,42,0.16);
  transition:box-shadow .18s ease, transform .18s ease;
}
.card-header{ border-bottom-color:rgba(15,23,42,0.06); background:transparent; }
.card-footer{ border-top-color:rgba(15,23,42,0.06); background:transparent; }
a.card:hover, .iv-status-card:hover{
  box-shadow:0 2px 4px rgba(15,23,42,0.05), 0 22px 38px -10px rgba(15,23,42,0.2);
  transform:translateY(-2px);
}

.form-control, .form-select{
  border-radius:8px; border-color:#dfe3e7;
  box-shadow:0 1px 3px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color:var(--iv-brand);
  box-shadow:0 0 0 3px rgba(48,119,146,0.16);
}
.form-label{ font-size:13px; font-weight:500; color:#475569; }

.btn-primary{
  background-color:var(--iv-brand); border-color:var(--iv-brand);
  box-shadow:0 3px 8px rgba(31,79,97,0.3);
}
.btn-primary:hover, .btn-primary:focus{ background-color:var(--iv-brand-dark); border-color:var(--iv-brand-dark); }
.btn-outline-primary{ color:var(--iv-brand); border-color:var(--iv-brand); }
.btn-outline-primary:hover{ background-color:var(--iv-brand); border-color:var(--iv-brand); color:#fff; }

/* --- Kunden-/Adressvorschau im Rechnungsformular --- */
.addr-preview{
  background:rgba(48,119,146,0.06); border:1px solid rgba(48,119,146,0.18);
  border-radius:10px; padding:12px 14px; font-size:13px; color:#475569; line-height:1.65;
}
.totals-box{ border-top-color:#e7e9ec; width:280px; }
.line-total{ font-weight:600; color:var(--iv-brand-dark); }

/* ============================================================
   Schritt 4 — Karten-Struktur exakt nach Vorgabe
   (Kunde / Rechnungsdetails getrennt, Positionen ohne Tabelle)
   ============================================================ */
.panel-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#181225; margin:0 0 14px; }
.panel-title i{ color:var(--iv-brand); font-size:15px; }
.badge-auto{
  font-size:10.5px; font-weight:600; color:var(--iv-brand-dark);
  background:rgba(48,119,146,0.12); padding:1px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.field-hint{ font-size:11.5px; color:#9aa1ab; margin:8px 0 0; }

.pos-table{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pos-row{ display:grid; grid-template-columns:2.4fr 0.7fr 0.9fr 1fr 0.8fr 1fr 32px; gap:10px; align-items:center; }
.pos-head{ font-size:11px; font-weight:600; color:#8c93a0; text-transform:uppercase; letter-spacing:.4px; padding:0 2px; }
.pos-row .form-control, .pos-row .form-select{ padding:8px 10px; font-size:13.5px; min-height:auto; }
.pos-row textarea.form-control{ resize:vertical; }
.pos-num{ text-align:right; }
.btn-icon{
  background:none; border:none; color:#9aa1ab; font-size:15px; cursor:pointer;
  padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.btn-icon:hover{ background:rgba(194,54,44,0.1); color:#c2362c; }

/* ============================================================
   Schritt 5 — Tabellenköpfe & Modals (wirkt überall, wo genutzt)
   ============================================================ */
.card thead th{
  font-size:11px; font-weight:600; color:#8c93a0; text-transform:uppercase;
  letter-spacing:.3px; border-bottom-width:1px;
}
.card tfoot td{ border-top:1px solid #e7e9ec; }
.modal-content{ border-radius:16px; border:none; box-shadow:0 20px 50px rgba(15,23,42,0.25); }

/* ============================================================
   Schritt 6 — Auswertung: Stat-Cards mit Tiefe + Donut-Legende
   ============================================================ */
.stat-card{
  background:#ffffff; border-radius:16px; border:1px solid #e2e6ea;
  box-shadow:0 10px 26px rgba(15,23,42,0.09); padding:20px 22px; height:100%;
}
.stat-card .label{ font-size:12.5px; color:#8c93a0; font-weight:500; margin-bottom:8px; }
.stat-card .value{ font-size:26px; font-weight:700; letter-spacing:-.3px; }
.stat-card .value.teal{ color:var(--iv-brand); }
.stat-card .value.dark{ color:#181225; }
.stat-card .value.red{ color:#c2362c; }
.stat-card .sub{ font-size:11.5px; color:#9aa1ab; margin-top:4px; }

.donut-legend{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.donut-legend .leg-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.donut-legend .leg-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.donut-legend .leg-name{ flex:1; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donut-legend .leg-amt{ font-weight:600; color:#181225; }

/* ============================================================
   Schritt 7 — Tabs, Drop-Zonen, Schritt-Badges (Import & ggf. weitere Seiten)
   ============================================================ */
.nav-tabs{ border-bottom:1px solid #e2e6ea; gap:4px; }
.nav-tabs .nav-link{
  border:1px solid transparent; border-radius:10px 10px 0 0; color:#8c93a0;
  font-weight:500; font-size:13.5px; padding:10px 18px; margin-bottom:-1px;
  transition:color .15s ease, background .15s ease;
}
.nav-tabs .nav-link:hover{ color:var(--iv-brand); background:rgba(48,119,146,0.05); border-color:transparent; }
.nav-tabs .nav-link.active{
  color:var(--iv-brand); background:#fff; font-weight:600;
  border-color:#e2e6ea #e2e6ea #fff;
}

.dropzone{
  border:2px dashed #d7dadf !important; border-radius:14px !important; padding:42px 24px;
  text-align:center; cursor:pointer; background:#fafbfc;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover{ border-color:var(--iv-brand) !important; background:rgba(48,119,146,0.04); }
.dropzone.dragover{ border-color:var(--iv-brand) !important; background:rgba(48,119,146,0.08); }
.dropzone i{ color:#9aa1ab; }

.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:rgba(48,119,146,0.12); color:var(--iv-brand-dark);
  font-size:11px; font-weight:700; flex-shrink:0;
}