/* =====================================================================
   Ergaenzungen fuer den Bereich "M365-Lizenzen".
   Nutzt bewusst die Variablen aus style.css, damit beide Bereiche
   identisch aussehen. style.css bleibt unveraendert.
   ===================================================================== */

/* --- Reiter in der Kopfzeile --- */
.topbar .navlink.tab { border:1px solid transparent; }
.topbar .navlink.tab.on { background:color-mix(in srgb, var(--brand) 10%, #fff);
  color:var(--brand-ink); border-color:color-mix(in srgb, var(--brand) 30%, #fff); }
.topbar .tabbadge { display:inline-block; min-width:17px; padding:0 5px; margin-left:5px;
  border-radius:9px; background:var(--warn); color:#1f2328;
  font-size:11px; line-height:17px; text-align:center; font-weight:700; }

/* --- Breite Tabellen --- */
.tablewrap { overflow-x:auto; }
.tablewrap table.grid { min-width:860px; }

/* --- Auslastungsbalken --- */
.meter { height:6px; min-width:78px; background:color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:3px; overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:3px; background:var(--series-2); }
.meter.tight > span { background:var(--warn); }
.meter.full  > span { background:var(--down); }

/* --- Kundennummer direkt in der Tabelle --- */
.knr { display:flex; gap:4px; align-items:center; margin:0; }
.knr input[type=text] { width:84px; padding:4px 7px; font-size:12.5px;
  font-variant-numeric:tabular-nums; border:1px solid var(--line);
  border-radius:7px; background:var(--surface); color:var(--text); }
.knr button { border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:6px; padding:4px 7px; font-size:12px; line-height:1; cursor:pointer; }
.knr button:hover { border-color:var(--ok); color:var(--ok); }

/* --- kleiner Link-Knopf --- */
.iconbtn { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid var(--line); border-radius:7px;
  color:var(--text2); background:var(--surface); }
.iconbtn:hover { border-color:var(--brand); color:var(--brand); text-decoration:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* --- Status-Pillen ergaenzend zu .pill --- */
.pill.gratis { background:color-mix(in srgb, var(--muted) 16%, var(--surface));
  color:var(--text2); }
.pill.voll { background:color-mix(in srgb, var(--down) 16%, var(--surface)); color:var(--down); }

/* --- Aenderungsarten --- */
.chg { display:inline-block; padding:2px 8px; border-radius:10px;
  font-size:11px; font-weight:700; white-space:nowrap; }
.chg.neu      { background:color-mix(in srgb, var(--ok) 16%, var(--surface)); color:var(--ok); }
.chg.weg      { background:color-mix(in srgb, var(--down) 16%, var(--surface)); color:var(--down); }
.chg.menge    { background:color-mix(in srgb, var(--new) 16%, var(--surface)); color:var(--new); }
.chg.zuweisung{ background:color-mix(in srgb, var(--warn) 20%, var(--surface)); color:var(--warn); }

.dlt { font-variant-numeric:tabular-nums; font-weight:700; }
.dlt.up { color:var(--up); }
.dlt.down { color:var(--down); }
.dlt.zero { color:var(--muted); }

/* --- Zwei-Spalten-Formular auf der Kundenseite --- */
.feldreihe { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin:0 0 14px; }
.feldreihe .feld { display:flex; flex-direction:column; gap:5px; }
.feldreihe label { font-size:12.5px; color:var(--text2); margin:0; }
.feldreihe input[type=text] { padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; min-width:190px; }
.feldreihe .weit input[type=text] { min-width:340px; }

/* --- aktive Unterseite und Trenner in der Kopfzeile --- */
.topbar .navlink.here { background:#f2f2f4; color:#1f2328; }
.topbar .navsep { display:inline-block; width:1px; height:20px;
  background:var(--line); margin:0 4px; }


/* --- Umsatz-Kachel grün statt rot (überschreibt style.css, das unverändert bleibt) --- */
.kpi.umsatz { background:color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); }
.kpi.umsatz .v { color:var(--ok); }

/* --- Kachel für Werte, die Aufmerksamkeit verdienen (z. B. ungenutzte Lizenzen) --- */
.kpi.achtung { background:color-mix(in srgb, var(--warn) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
.kpi.achtung .v { color:var(--warn); }


/* --- Rechnungsabgleich --- */
details.panel > summary { cursor:pointer; list-style:none; padding:2px 0;
  display:block; font-size:14.5px; }
details.panel > summary::-webkit-details-marker { display:none; }
details.panel > summary::before { content:"▸"; display:inline-block; width:16px;
  color:var(--muted); transition:transform .12s ease; }
details.panel[open] > summary::before { transform:rotate(90deg); }
details.panel > summary .pill { margin-left:8px; }
details.panel > table { margin-top:12px; }
details.panel > summary + p.sub { margin-top:8px; }

.feldreihe select { padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:14px; min-width:420px;
  max-width:100%; }
.feldreihe input[type=file] { font-size:14px; }

/* Beim Rechnungsabgleich ist "mehr" das Problem, nicht der Gewinn:
   zu viel Berechnetes wird rot, nicht Berechnetes bleibt zurückhaltend. */
.dlt.mehr    { color:var(--warn); }
.dlt.weniger { color:var(--muted); }

/* --- Marge: Verdienst grün nach oben, Verlust rot nach unten --- */
.marge { font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.marge.plus  { color:var(--ok); }
.marge.minus { color:var(--down); }
.marge.null  { color:var(--muted); }

.kpi.verlust { background:color-mix(in srgb, var(--down) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--down) 35%, var(--line)); }
.kpi.verlust .v { color:var(--down); }

/* --- Schritt-für-Schritt-Liste auf der Abrechnungsseite --- */
.schritte { display:flex; flex-direction:column; gap:10px; }
.schritt { display:flex; gap:16px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:14px 18px; }
.schritt .nummer { flex:0 0 38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:16px; background:color-mix(in srgb, var(--new) 14%, var(--surface));
  color:var(--new); border:1px solid color-mix(in srgb, var(--new) 30%, var(--line)); }
.schritt.fertig .nummer { background:color-mix(in srgb, var(--ok) 14%, var(--surface));
  color:var(--ok); border-color:color-mix(in srgb, var(--ok) 32%, var(--line)); }
.schritt .inhalt { flex:1; min-width:0; }
.schritt .inhalt h2 { margin:0 0 2px; font-size:15.5px; }
.schritt .inhalt p.sub { margin:0; }
.schritt .tat { flex:0 0 auto; }
@media (max-width:720px) {
  .schritt { flex-wrap:wrap; }
  .schritt .tat { width:100%; }
}

/* --- Verweise auf verwandte Seiten --- */
.verweise { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }

/* --- Verbundene Lexware-Rechnungen als abnehmbare Marken --- */
.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:8px; font-size:13px;
  padding:5px 6px 5px 11px; border-radius:999px; background:var(--surface);
  border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); }
.chip .muted { font-size:12px; }
.chip.leer { border-style:dashed; border-color:var(--line); color:var(--text2);
  padding:5px 11px; }
.chip button { border:none; background:color-mix(in srgb, var(--down) 12%, transparent);
  color:var(--down); border-radius:50%; width:20px; height:20px; cursor:pointer;
  font-size:12px; line-height:1; padding:0; }
.chip button:hover { background:color-mix(in srgb, var(--down) 22%, transparent); }

/* --- Fortschritt des Sammellaufs (steht auf jeder Seite) --- */
.laufbalken { background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.laufkopf { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:9px; }
.laufkopf .muted { font-size:12.5px; }
.laufspur { height:8px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--line) 60%, transparent); }
.laufwert { height:100%; width:0; border-radius:999px; background:var(--new);
  transition:width .5s ease; }
.laufbalken.fertig .laufwert { background:var(--ok); }
.laufbalken.schief .laufwert { background:var(--down); }

/* --- Sammelkunde: versorgt mehrere Firmen, deshalb blau statt schwarz --- */
.grid td.name a.sammel { color:var(--new); }
.grid td.name a.sammel:hover { text-decoration:underline; }

/* --- Unterreiter innerhalb eines Menuepunkts --- */
.reiter { display:flex; gap:4px; margin:-6px 0 18px; border-bottom:1px solid var(--line); }
.reiter a { padding:8px 14px; font-size:14px; color:var(--text2);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.reiter a:hover { color:var(--text); }
.reiter a.on { color:var(--text); font-weight:600; border-bottom-color:var(--new); }

/* --- Kundennummer aus Lexware vor dem Namen ---
   Bewusst ohne Kasten und ohne eigene Farbe: sie gehoert zum Namen dazu. */
h1 .kdnr { margin-right:.4em; }

/* --- Kachelreihe: alles nebeneinander in einer Zeile ---
   Die Kacheln teilen sich die Breite gleichmaessig und schrumpfen mit, statt
   umzubrechen. Erst auf schmalen Bildschirmen wird umgebrochen. */
.cards.reihe { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  align-items:stretch; gap:10px; }
.cards.reihe .kpi { min-width:0; padding:12px 14px; overflow-wrap:anywhere; }
.cards.reihe .kpi .v { font-size:23px; line-height:1.15; }
.cards.reihe .kpi .l { font-size:10px; line-height:1.35; }
@media (max-width:1180px) {
  .cards.reihe { grid-auto-flow:row; grid-auto-columns:auto;
    grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:680px) {
  .cards.reihe { grid-template-columns:repeat(2, minmax(0,1fr)); }
}