/* common/invoice-overview.css — V105 Rechnungsübersicht
   Lockstep zwischen Talent & Admin via geteiltem Stylesheet.
   Quelle: rechnungsuebersicht-final-konzept.html (Variante A) */

.inv-shell {
  --inv-ink: #172033;
  --inv-muted: #6b7280;
  --inv-line: #e5e8ee;
  --inv-canvas: #f4f6fa;
  --inv-blue: #2463a8;
  --inv-red: #a63a3a;
  --inv-red-bg: #fff5f5;
  --inv-red-line: #f1cece;
  --inv-green: #28704b;
  --inv-green-bg: #f1faf5;
  --inv-green-line: #cce8d8;
  --inv-amber: #9a6412;
  --inv-amber-bg: #fffaf0;
  --inv-amber-line: #f0dfb7;
  --inv-blue-bg: #f5f8fc;
  --inv-blue-line: #cfdbe9;
  --inv-navy: #1e2e47;
  --inv-row-h: 44px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--inv-ink);
  font-size: 12px;
}

.inv-shell *, .inv-shell *::before, .inv-shell *::after { box-sizing: border-box; }
.inv-shell button, .inv-shell input { font: inherit; color: inherit; }

.inv-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 13px;
}
.inv-page-head h1 { margin: 0; font-size: 18px; letter-spacing: -.25px; color: var(--inv-ink); }
.inv-page-head .inv-subtitle { margin: 3px 0 0; color: var(--inv-muted); font-size: 11.5px; }

.inv-toolbar {
  min-height: 50px;
  background: white;
  border: 1px solid var(--inv-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  flex-wrap: wrap;
}
/* V105h: card-header-actions kommt aus globalem Portal-Style — nur sicherstellen dass
   die toolbar-internen actions gleichlaufen. */
.inv-toolbar .card-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
}
/* V105i Height-Alignment: search-box + btn-icon-action + btn-primary alle EXAKT 34px.
   portal-v93-professional.css hat `#dashboard-view .admin-main-section .card-header-actions
   .btn-icon-action { height: 32px !important }` mit Specificity (0,4,2). Diese Regel hier
   matched dieselbe Kaskade + lädt SPÄTER → gewinnt bei gleicher Specificity. */
/* V105i Height-Alignment: refresh-button = 34px wie search-box. portal-v93 hat
   `html body #dashboard-view .admin-main-section .card-header-actions button` (1,3,3) —
   muss mit button.btn-icon-action (1,4,3) geschlagen werden. */
html body #dashboard-view .admin-main-section .card-header-actions button.btn-icon-action,
html body #dashboard-view .admin-main-section .card-header-actions .search-box,
html body #dashboard-view .admin-main-section .card-header-actions .btn-primary,
.inv-toolbar .search-box,
.inv-toolbar .btn-icon-action,
.inv-toolbar .btn-primary {
  height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
}
/* V105y: ein globales .search-box{margin:0 0 15px} leakt in die Toolbar — der
   15px-Bottom-Margin machte die card-header-actions 49px hoch, dadurch zentrierte
   der Refresh-Button, die Suchleiste rutschte aber nach oben → 8px Versatz. Margin
   hier neutralisieren, damit Suchleiste + Refresh exakt bündig sind (beide Portale). */
.inv-toolbar .search-box { width: 220px; margin: 0 !important; }
.inv-toolbar .search-box input { height: 32px !important; }

/* V105i BUG-3 endfix: border-collapse:separate IGNORIERT tr-borders (mein V105h-Ansatz
   funktionierte daher gar nicht → Linie fehlte/abbrach). Lösung: border-bottom auf ALLE
   td (durchgehende Linie inkl. actions-cell). portal-v87 `#dashboard-view td !important`
   (1,0,1) muss mit `#dashboard-view .inv-table tbody td` (1,1,3) geschlagen werden. */
#dashboard-view .inv-table tbody td { border-bottom: 1px solid #edf0f4 !important; }
#dashboard-view .inv-table tbody tr { border-bottom: 0 !important; }
.inv-table thead th { border-bottom: 1px solid var(--inv-line) !important; }
.inv-chips { display: flex; align-items: center; gap: 6px; }
.inv-chip {
  border: 0;
  background: transparent;
  padding: 6px 9px;
  border-radius: 5px;
  color: #697386;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.inv-chip:hover { background: #f3f5f9; }
.inv-chip.active { background: #dce8f7; color: #204f82; }
.inv-chip.danger { color: #963b3b; }
.inv-chip.danger.active { background: #fbeaea; color: #7a2929; }
.inv-chip b {
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(31,41,55,.07);
  font-size: 9.5px;
  font-weight: 700;
}

.inv-toolbar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 200px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: white;
  color: #4b5563;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inv-toolbar-search:focus-within { border-color: #2463a8; box-shadow: 0 0 0 3px rgba(36,99,168,.12); }
.inv-toolbar-search svg { flex: 0 0 auto; opacity: .75; }
/* V105f BUG-1: native input border/background/padding KOMPLETT resetten —
   sonst zeigt portal-facelift.css ein zweites Rechteck IN der Suchleiste. */
.inv-toolbar-search input,
.inv-toolbar-search input[type="search"] {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  color: inherit !important;
  width: 100% !important;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
}
.inv-toolbar-search input::-webkit-search-cancel-button,
.inv-toolbar-search input::-webkit-search-decoration { -webkit-appearance: none; }
.inv-toolbar-search svg { width: 13px; height: 13px; stroke: #9ca3af; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.inv-toolbar-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 11.5px; color: inherit; }
.inv-toolbar-search input::placeholder { color: #9ca3af; }

.inv-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.inv-btn {
  height: 32px;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: white;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.inv-btn:hover { background: #f3f5f9; border-color: #b5bfce; }
.inv-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-btn.primary { background: var(--inv-navy); color: white; border-color: var(--inv-navy); }
.inv-btn.primary:hover { background: #2a3a55; border-color: #2a3a55; }
/* Drawer is appended to <body> OUTSIDE .inv-shell, so --inv-navy is undefined there:
   .inv-btn.primary's `background: var(--inv-navy)` becomes invalid-at-computed-value-time
   and falls back to transparent → invisible white-on-transparent button. Pin literal navy. */
.inv-drawer .inv-btn.primary { background: #1e2e47 !important; border-color: #1e2e47 !important; color: #fff !important; }
.inv-drawer .inv-btn.primary:hover { background: #2a3a55 !important; border-color: #2a3a55 !important; }
.inv-btn.small { height: 28px; font-size: 11px; padding: 0 10px; border-radius: 6px; }
.inv-btn.ghost { border-color: transparent; background: transparent; }

.inv-summary {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  color: #657084;
  background: #fafbfc;
  border: 1px solid var(--inv-line);
  border-bottom: 0;
  font-size: 10.5px;
}
.inv-summary strong { color: #263247; }
.inv-summary .urgent strong { color: var(--inv-red); }

.inv-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--inv-line);
  border-radius: 0 0 8px 8px;
  background: white;
  scrollbar-width: thin;
  scrollbar-color: #c6ced9 #f4f6f8;
}
.inv-table-wrap::-webkit-scrollbar { height: 8px; }
.inv-table-wrap::-webkit-scrollbar-track { background: #f4f6f8; }
.inv-table-wrap::-webkit-scrollbar-thumb { background: #c6ced9; border-radius: 8px; }

/* V105w SCROLL-FIX: min-width = exakte Summe der colgroup-Breiten (inkl. der auf
   250px verbreiterten Aktionen-Spalte). Vorher war min-width KLEINER als die
   Spalten-Summe → bei langen Primary-Buttons ("Ablehnung zurückziehen" etc.)
   ragte Button+Kebab über die scrollbare Tabellenbreite hinaus und das ⋯-Menü
   war nicht erreichbar. Jetzt gibt die längste mögliche Zeile das Maß an, jede
   Zeile lässt sich bis ganz rechts zum Kebab scrollen. */
/* V228o (Notiz 24.07.): Aktions-Spalte = nur Primäraktion + "Mehr" (Bearbeiten/Löschen ins
   Mehr-Menü verschoben) → Colgroup 340px. Die Spalte ist zusätzlich RECHTS FIXIERT (sticky-actions,
   s.u.), damit die Aktionen immer sichtbar sind und "Mehr" nie abgeschnitten wird. */
.inv-table { width: 100%; min-width: 1850px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.inv-table.has-talent-col { min-width: 1990px; }

.inv-table th {
  height: 30px;
  padding: 0 9px;
  text-align: left;
  vertical-align: middle;
  color: #788397;
  background: #f8f9fb;
  border-bottom: 1px solid var(--inv-line);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: 700;
}
.inv-table th.num, .inv-table td.num { text-align: right; }
/* V105w BÜNDIG-OBEN: Zelleninhalte oben ausrichten (vorher vertical-align:middle).
   So beginnt die erste Zeile jeder Zelle auf gleicher Höhe direkt unter dem
   Spaltennamen — auch wenn eine Zelle (Kunde+Betreff, Aktivität) zweizeilig ist
   und die Zeile höher macht, "schwimmen" die einzeiligen Zellen nicht mehr in die
   Mitte. */
.inv-table td {
  height: var(--inv-row-h);
  padding: 12px 9px;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: inherit;
}
/* V105x: portal-v87-fixes.css erzwingt `#dashboard-view td, .talent-shell td {
   vertical-align:middle !important; padding:10px 12px !important }` auf ALLE td —
   das überstimmte das gewünschte bündig-oben (Fix war nicht live). Hier mit höherer
   Spezifität + !important zurückholen, in beiden Portalen. */
#dashboard-view .inv-table td,
.talent-shell .inv-table td,
.inv-shell .inv-table td {
  vertical-align: top !important;
  padding: 12px 9px !important;
}
/* V105h fix BUG-3: Border NICHT mehr per-td (bricht bei overflow:visible actions-cell).
   Stattdessen auf TR — Linie läuft komplett durch alle Spalten. */
.inv-table td.inv-actions-cell { overflow: visible !important; }

.inv-table tbody tr {
  position: relative;
  background: white;
  border-bottom: 1px solid #edf0f4;
}
.inv-table tbody tr:last-child { border-bottom: 0; }
.inv-table tbody tr:hover { box-shadow: inset 0 0 0 1px rgba(51,65,85,.08); }

.inv-row--red    { background: var(--inv-red-bg) !important; box-shadow: inset 3px 0 0 0 var(--inv-red); }
.inv-row--green  { background: var(--inv-green-bg) !important; box-shadow: inset 3px 0 0 0 var(--inv-green); }
.inv-row--amber  { background: var(--inv-amber-bg) !important; box-shadow: inset 3px 0 0 0 #c28b2a; }
.inv-row--blue   { background: var(--inv-blue-bg) !important; box-shadow: inset 3px 0 0 0 #5884b5; }
.inv-row--gray   { background: white; }
.inv-row--cancelled .inv-money-cell,
.inv-row--cancelled .inv-num { text-decoration: line-through; opacity: 0.7; }
.inv-row--cancelled { color: #6b7280; }
.inv-row--has-dispute .inv-event-main { color: #c08017 !important; font-weight: 700; }

/* V105 fix BUG-4: hover-Variants behalten den gleichen background — kein Background-Wechsel,
   nur ein dezenter Outline-Hover via box-shadow (Background-Wechsel verursachte Flackern). */
.inv-row--red:hover    { box-shadow: inset 3px 0 0 0 var(--inv-red), inset 0 0 0 1px rgba(166,58,58,.12); }
.inv-row--green:hover  { box-shadow: inset 3px 0 0 0 var(--inv-green), inset 0 0 0 1px rgba(40,112,75,.12); }
.inv-row--amber:hover  { box-shadow: inset 3px 0 0 0 #c28b2a, inset 0 0 0 1px rgba(184,124,32,.12); }
.inv-row--blue:hover   { box-shadow: inset 3px 0 0 0 #5884b5, inset 0 0 0 1px rgba(88,132,181,.12); }

/* sticky first 3 columns */
.inv-table th.sticky, .inv-table td.sticky {
  position: sticky;
  z-index: 3;
  background: inherit;
}
.inv-table th.sticky { background: #f8f9fb; z-index: 5; }
.inv-table th.sticky-num, .inv-table td.sticky-num { left: 0; width: 160px; }
.inv-table th.sticky-stat, .inv-table td.sticky-stat {
  left: 160px;
  width: 180px;
  box-shadow: 8px 0 12px -12px rgba(15,23,42,.45);
}
.inv-row--red    td.sticky { background: var(--inv-red-bg); }
.inv-row--green  td.sticky { background: var(--inv-green-bg); }
.inv-row--amber  td.sticky { background: var(--inv-amber-bg); }
.inv-row--blue   td.sticky { background: var(--inv-blue-bg); }
.inv-row--gray   td.sticky { background: white; }

/* V228o (Notiz 24.07.): Zeilen-Hover einheitlich. Der globale Portal-Hover
   (#dashboard-view/.talent-shell tbody tr:hover -> rgba(17,24,39,.03)) faerbt nur die
   NICHT-sticky Zellen; die sticky Spalten (Rechnung/Status) behielten ihr erzwungenes
   Weiss/Farb-bg -> die ersten zwei Spalten faerbten sich nicht mit. Hier die sticky Zellen
   auf denselben Hover-Ton (weiss + rgba(17,24,39,.03) = #f8f8f9) ziehen, in beiden Portalen. */
.inv-shell .inv-table tbody tr:hover > td.sticky,
.inv-shell .inv-table tbody tr:hover > td.sticky-actions,
#dashboard-view .inv-table tbody tr:hover > td.sticky,
#dashboard-view .inv-table tbody tr:hover > td.sticky-actions,
.talent-shell .inv-table tbody tr:hover > td.sticky,
.talent-shell .inv-table tbody tr:hover > td.sticky-actions { background-color: #f8f8f9 !important; }

/* V228o (Notiz 24.07.): Aktionen-Spalte RECHTS fixiert (symmetrisch zu den sticky-left Spalten)
   → Primäraktion + "Mehr" bleiben immer sichtbar, "Mehr" wird nie am Viewport-Rand abgeschnitten. */
.inv-table th.sticky-actions, .inv-table td.sticky-actions {
  position: sticky;
  right: 0;
  z-index: 3;
  background: inherit;
  box-shadow: -8px 0 12px -12px rgba(15,23,42,.45);
}
.inv-table th.sticky-actions { background: #f8f9fb; z-index: 5; }
.inv-row--red    td.sticky-actions { background: var(--inv-red-bg); }
.inv-row--green  td.sticky-actions { background: var(--inv-green-bg); }
.inv-row--amber  td.sticky-actions { background: var(--inv-amber-bg); }
.inv-row--blue   td.sticky-actions { background: var(--inv-blue-bg); }
.inv-row--gray   td.sticky-actions { background: white; }

.inv-check { width: 16px; height: 16px; accent-color: #2b5e92; cursor: pointer; }

.inv-num-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inv-num {
  color: var(--inv-blue);
  font-weight: 700;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 12px;
}
.inv-num:hover { text-decoration: underline; }
.inv-mail-icon {
  display: inline-flex;
  align-items: center;
  color: #66778e;
  width: 14px;
  height: 14px;
}
.inv-mail-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inv-status-btn {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.inv-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #8b95a5;
  box-shadow: 0 0 0 3px rgba(139,149,165,.11);
}
.inv-status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .005em;
}
.inv-row--red    .inv-status-dot { background: var(--inv-red); box-shadow: 0 0 0 3px rgba(166,58,58,.12); }
.inv-row--red    .inv-status-label { color: #8d3636; }
.inv-row--green  .inv-status-dot { background: var(--inv-green); box-shadow: 0 0 0 3px rgba(40,112,75,.12); }
.inv-row--green  .inv-status-label { color: #256443; }
.inv-row--blue   .inv-status-dot { background: #4f78a5; box-shadow: 0 0 0 3px rgba(79,120,165,.12); }
.inv-row--blue   .inv-status-label { color: #345d88; }
.inv-row--amber  .inv-status-dot { background: #b98020; box-shadow: 0 0 0 3px rgba(185,128,32,.12); }
.inv-row--amber  .inv-status-label { color: #87580f; }

.inv-customer-cell strong { display: block; font-weight: 650; font-size: 12px; }
/* V105j: Betreff-Subline unter Kunde + Mahnstufe-Badge — mehr Info pro Zeile. */
.inv-cell-sub { display: block; margin-top: 2px; font-size: 10.5px; color: #8a929f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.inv-cell-muted { color: #b4bac4; }
.inv-stage-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 650; white-space: nowrap;
  background: #f1f0ec; color: #5f5e5a;
}
.inv-stage-reminder { background: #fdf2d7; color: #854f0b; }
.inv-stage-first    { background: #fdecd9; color: #9a5a12; }
.inv-stage-second   { background: #fae0d4; color: #993c1d; }
.inv-stage-final    { background: #fad2c6; color: #872f1a; }
.inv-stage-inkasso  { background: #2a1f1c; color: #f5f5f3; }
.inv-talent-cell { color: #4b5563; }
.inv-due-cell { font-variant-numeric: tabular-nums; }
.inv-money-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }

.inv-event-btn {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
}
.inv-event-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #5f6a7b;
  background: #edf0f4;
}
.inv-event-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-event-main { display: block; font-weight: 650; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.inv-event-meta { display: block; margin-top: 1px; color: #737f91; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.inv-event-chevron { width: 12px; height: 12px; color: #9ba4b2; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-row--red    .inv-event-icon { color: var(--inv-red); background: #f6dede; }
.inv-row--red    .inv-event-main { color: #8f3232; }
.inv-row--green  .inv-event-icon { color: var(--inv-green); background: #dcefe4; }
.inv-row--green  .inv-event-main { color: #246242; }
.inv-row--amber  .inv-event-icon { color: var(--inv-amber); background: #f6e8c8; }
.inv-row--amber  .inv-event-main { color: #815614; }
.inv-row--blue   .inv-event-icon { color: #356b9d; background: #e2ebf5; }
.inv-row--blue   .inv-event-main { color: #305d88; }

/* V105j BUG-FIX: NICHT display:flex auf dem <td> — das bricht den td aus dem
   table-cell-Modell, die Zelle schrumpft auf Button-Höhe und darunter erscheint
   ein weißer Streifen ohne Hintergrund/Border. Stattdessen td bleibt table-cell,
   Buttons werden inline-flex rechtsbündig ausgerichtet. */
.inv-actions-cell {
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
.inv-actions-cell .inv-btn { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.inv-kebab-wrap { position: relative; display: inline-flex; vertical-align: middle; align-items: center; margin-left: 4px; }
.inv-kebab {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #6e7889;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.inv-kebab:hover { border-color: #d8dde5; background: white; }

/* V105e Dropdown — position:fixed weil Parent .inv-table-wrap overflow:auto hat
   und das Menu sonst rechts/unten abgeschnitten wird. Coords werden via JS gesetzt. */
.inv-kebab-menu {
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 6px;
  background: white;
  border: 1px solid #d9dee7;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20,28,42,.18);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.inv-kebab-menu[hidden] { display: none; }
.inv-kebab-item {
  display: block;
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  white-space: normal;
  line-height: 1.35;
}
.inv-kebab-item:hover { background: #f3f5f9; }
.inv-kebab-item.primary { color: var(--inv-navy); font-weight: 700; }
.inv-kebab-item.danger { color: var(--inv-red); }
.inv-kebab-item.danger:hover { background: #fdecec; }
.inv-kebab-empty { padding: 8px 10px; color: #9aa3b1; font-size: 12px; font-style: italic; }

/* =========================================================
   DRAWER (right-side detail panel)
   ========================================================= */
.inv-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 10000;
}
.inv-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.inv-drawer {
  position: fixed;
  z-index: 10001;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(580px, 92vw);
  background: white;
  border-left: 1px solid #dce1e8;
  box-shadow: -16px 0 38px rgba(18,28,45,.14);
  transform: translateX(100%);
  transition: transform .22s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--inv-ink, #172033);
}
.inv-drawer.open { transform: translateX(0); }
.inv-drawer * { box-sizing: border-box; }

.inv-drawer__head {
  min-height: 72px;
  padding: 14px 20px;
  border-bottom: 1px solid #eaedf2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inv-drawer__title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.inv-drawer__sub { margin-top: 4px; color: #6b7280; font-size: 11px; }
.inv-drawer__close {
  width: 32px;
  height: 32px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  flex: 0 0 auto;
  padding: 0;
}
.inv-drawer__close::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center/contain no-repeat;
}
.inv-drawer__close:hover { background: #f3f5f9; }

/* V105h: contain: layout paint stoppt das Repaint-Cascade beim Scrollen im Drawer.
   Verhindert dass position:relative children (progress-step, timeline-item) auf jedem
   Scroll-Frame eine Paint-Invalidation triggern. */
.inv-drawer__scroll {
  overflow: auto;
  padding: 16px 20px 24px;
  contain: layout paint;
  -webkit-overflow-scrolling: touch;
}
/* V105i: contain entfernt von progress-step + timeline-item — clippte den
   box-shadow ring (z.B. "Geprüft" current-state). contain bleibt nur auf dem
   scroll-Container — das reicht für die Flicker-Prävention. */
/* will-change wird nur während Animation aktiv — sonst kostet es unnötig GPU-Speicher */
.inv-drawer.is-animating { will-change: transform; }
.inv-drawer-backdrop.is-animating { will-change: opacity; }

/* Hero status card — inspired by Codex-Entwurf A: state + 3 metrics in one block */
.inv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 130px 120px;
  overflow: hidden;
  border: 1px solid #eaedf2;
  border-radius: 9px;
  background: #f8fafc;
}
.inv-hero.tone-red    { border-color: var(--inv-red-line); background: var(--inv-red-bg); }
.inv-hero.tone-green  { border-color: var(--inv-green-line); background: var(--inv-green-bg); }
.inv-hero.tone-amber  { border-color: var(--inv-amber-line); background: var(--inv-amber-bg); }
.inv-hero.tone-blue   { border-color: var(--inv-blue-line); background: var(--inv-blue-bg); }

.inv-hero__main {
  padding: 14px 16px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-width: 0;
}
.inv-hero__main svg { width: 18px; height: 18px; flex: 0 0 auto; color: #4b5563; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-hero.tone-red    .inv-hero__main svg { color: var(--inv-red); }
.inv-hero.tone-green  .inv-hero__main svg { color: var(--inv-green); }
.inv-hero.tone-amber  .inv-hero__main svg { color: var(--inv-amber); }
.inv-hero.tone-blue   .inv-hero__main svg { color: #416f9d; }
.inv-hero__main strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.inv-hero.tone-red    .inv-hero__main strong { color: #823737; }
.inv-hero.tone-green  .inv-hero__main strong { color: #2a5c43; }
.inv-hero.tone-amber  .inv-hero__main strong { color: #7d5210; }
.inv-hero.tone-blue   .inv-hero__main strong { color: #335d88; }
.inv-hero__main span { display: block; margin-top: 4px; color: #5a6776; font-size: 11px; line-height: 1.5; }

.inv-hero__metric {
  padding: 14px 12px;
  border-left: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.45);
  min-width: 0;
}
.inv-hero__metric span { display: block; color: #8a929f; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.inv-hero__metric b { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

/* Dispute / Mahnsperre banners — surface sub-signals in drawer */
.inv-dispute-banner,
.inv-mahnsperre-banner {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid #e6c98b;
  background: #fff7e1;
  color: #7b5310;
}
.inv-mahnsperre-banner { border-color: #cbd5e1; background: #f1f5f9; color: #475569; }
.inv-dispute-banner strong,
.inv-mahnsperre-banner strong { display: block; font-size: 12px; font-weight: 700; }
.inv-dispute-banner span,
.inv-mahnsperre-banner span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; }

/* Nächster Schritt panel — emphasises the single primary action */
.inv-next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e0e5ec;
  border-radius: 8px;
  background: #fafbfc;
}
.inv-next-action__text { min-width: 0; }
.inv-next-action__text strong { display: block; font-size: 12.5px; font-weight: 700; }
.inv-next-action__text span { display: block; margin-top: 3px; color: #7b8494; font-size: 10.5px; line-height: 1.45; }
.inv-next-action__btn { flex: 0 0 auto; }

.inv-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #eef0f4;
}
.inv-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  /* V105z (Audit #5/#6): portal-facelift.css erzwingt h3{color/letter-spacing !important}
     → Drawer-Section-Labels wurden fast-schwarz + ohne Tracking. Zurückholen. */
  color: #5f6b7d !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

.inv-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 6px 2px 4px;
}
.inv-progress__step {
  position: relative;
  min-width: 0;
  text-align: center;
  color: #9aa4b2;
}
.inv-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(50% + 12px);
  right: calc(-50% + 12px);
  height: 1px;
  background: #dfe4ea;
}
.inv-progress__dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin: 0 auto 6px;
  border: 1px solid #d9dfe7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
}
.inv-progress__dot svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inv-progress__step.done { color: #3d6f57; }
.inv-progress__step.done .inv-progress__dot { border-color: #a9cfba; background: #edf8f1; }
.inv-progress__step.done:not(:last-child)::after { background: #b9d7c5; }
.inv-progress__step.current.tone-red    .inv-progress__dot { border-color: #d99a9a; background: #fff1f1; box-shadow: 0 0 0 3px rgba(166,58,58,.1); }
.inv-progress__step.current.tone-red    { color: #8d3636; }
.inv-progress__step.current.tone-green  .inv-progress__dot { border-color: #91c2a6; background: #eaf7ef; box-shadow: 0 0 0 3px rgba(40,112,75,.1); }
.inv-progress__step.current.tone-green  { color: #256443; }
.inv-progress__step.current.tone-blue   .inv-progress__dot { border-color: #aac1da; background: #edf4fb; box-shadow: 0 0 0 3px rgba(63,109,154,.1); }
.inv-progress__step.current.tone-blue   { color: #335d88; }
.inv-progress__step.current.tone-amber  .inv-progress__dot { border-color: #dec38e; background: #fff8e9; box-shadow: 0 0 0 3px rgba(138,92,16,.09); }
.inv-progress__step.current.tone-amber  { color: #85580f; }
.inv-progress__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

.inv-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.inv-metric {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e2e6ec;
  border-radius: 7px;
  background: #fafbfc;
}
.inv-metric span { display: block; color: #7b8697; font-size: 10px; }
.inv-metric strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; }

.inv-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  overflow: hidden;
}
.inv-detail-item {
  min-width: 0;
  min-height: 54px;
  padding: 9px 12px;
  border-bottom: 1px solid #eceff3;
  background: white;
}
.inv-detail-item:nth-child(odd) { border-right: 1px solid #eceff3; }
.inv-detail-item:nth-last-child(-n+2) { border-bottom: 0; }
.inv-detail-item span { display: block; color: #7b8696; font-size: 10px; }
.inv-detail-item strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 650; }

.inv-doc-row {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #e3e7ed;
  border-radius: 7px;
  background: #fff;
  margin-bottom: 8px;
}
.inv-doc-row:last-child { margin-bottom: 0; }
.inv-doc-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #4b6582;
  background: #edf3f8;
}
.inv-doc-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-doc-meta strong { display:block; font-size: 11.5px; font-weight: 650; }
.inv-doc-meta span { display:block; margin-top: 2px; color:#7b8696; font-size: 10px; }

.inv-timeline { padding-left: 1px; }
.inv-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  min-height: 62px;
}
.inv-timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: -2px;
  width: 1px;
  background: #dde2e8;
}
.inv-timeline-dot {
  width: 24px;
  height: 24px;
  border: 1px solid #d9dfe7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  color: #637084;
}
.inv-timeline-dot svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv-timeline-copy strong { display: block; font-size: 11.5px; font-weight: 650; }
.inv-timeline-copy span { display: block; margin-top: 2px; color: #778295; font-size: 10.5px; line-height: 1.45; }
.inv-timeline-copy time { display: block; margin-top: 3px; color: #9aa3b1; font-size: 10px; }

.inv-drawer__foot {
  min-height: 56px;
  border-top: 1px solid #eaedf2;
  padding: 11px 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
}
.inv-drawer__foot-hint { font-size: 11px; color: #9aa3b1; }

/* Page-shell utilities for the standalone preview */
.inv-preview-page {
  min-height: 100vh;
  background: var(--inv-canvas, #f4f6fa);
  padding: 28px clamp(16px, 4vw, 48px) 48px;
}
.inv-preview-page .inv-shell {
  max-width: 1480px;
  margin: 0 auto;
}

/* =========================================================
   V228o — MOBILE (Rechnungsübersicht) — N6/N7 + N15
   Alle Regeln NUR innerhalb der Mobile-Breakpoint. Desktop bleibt unberührt.
   invoice-overview.css lädt VOR portal-mobile.css → die Overrides hier müssen
   die portal-mobile-Kaskade per HÖHERER Spezifität schlagen. Trick: `.inv-shell`
   (die Klasse am Mount-Container) zusätzlich in die Selektor-Kette einfügen —
   das gibt +1 Klasse gegenüber `... #dashboard-view .inv-table ...`.
   ========================================================= */
@media (max-width: 768px) {
  /* ---- V228o (N6/N7): Toolbar kompakt — Refresh/CSV INLINE neben der Suche,
         nicht auf eigener Zeile. portal-mobile erzwang `.search-box{width:100%}`
         (Talent) → Suche belegte die ganze Zeile, Icons rutschten darunter.
         Jetzt: Suche wächst, Icon-Buttons bleiben daneben, nur die große
         "Neue Rechnung" bekommt eine eigene volle Zeile darunter. ---- */
  html body #dashboard-view .inv-shell .inv-toolbar .card-header-actions .search-box {
    flex: 1 1 120px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  html body #dashboard-view .inv-shell .inv-toolbar .card-header-actions .btn-icon-action {
    flex: 0 0 auto !important;
  }
  html body #dashboard-view .inv-shell .inv-toolbar .card-header-actions .btn-primary {
    flex: 1 1 100% !important;
  }

  /* ---- V228o (N15): Rechnungs-Karten passen in den Viewport, nichts wird
         rechts abgeschnitten, KEIN horizontaler Body-Scroll.

         Hauptursache: `.inv-status-btn{width:100%}` (Zeile 348). Die Status-Zelle
         ist im Kartenmodus `position:absolute; right:14px` (shrink-to-fit); ein
         Kind mit width:100% löst gegen die KARTE auf → die Pille wird kartenbreit,
         rechts verankert → ragt nach links aus dem Viewport ("In Prüfung"
         abgeschnitten) und erzeugt den H-Scroll, der alle rechtsbündigen Werte
         ("24.07.20", "291,") abgeschnitten wirken lässt. Fix: Pille inhaltsbreit. */
  html body #dashboard-view .inv-shell .inv-table tbody td.sticky-stat {
    max-width: 46% !important;
  }
  html body #dashboard-view .inv-shell .inv-table tbody td.sticky-stat .inv-status-btn {
    width: auto !important;
    max-width: 100% !important;
  }
  html body #dashboard-view .inv-shell .inv-table tbody td.sticky-stat .inv-status-label {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Karte klippt eigenen Überlauf → kein einzelnes Element kann den Body
     horizontal aufziehen (Absicherung zusätzlich zum width:auto-Fix oben).
     Das position:fixed-Kebab-Menü wird davon NICHT geklippt. */
  html body #dashboard-view .inv-shell .inv-table tbody tr {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Werte nie abschneiden: Wert-Zeilen dürfen umbrechen statt zu klippen. */
  html body #dashboard-view .inv-shell .inv-table tbody td.inv-due-cell,
  html body #dashboard-view .inv-shell .inv-table tbody td.inv-money-cell,
  html body #dashboard-view .inv-shell .inv-table tbody td.inv-stage-cell,
  html body #dashboard-view .inv-shell .inv-table tbody td.inv-talent-cell {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }

  /* Tabelle/Body: harte Obergrenze, damit nichts über den Viewport hinausläuft. */
  html body #dashboard-view .inv-shell .inv-table,
  html body #dashboard-view .inv-shell .inv-table tbody {
    max-width: 100% !important;
    /* V228o: die Desktop-min-width (1850px, Aktionen-Spalte) darf mobil NICHT greifen —
       sonst gewinnt min-width gegen max-width und die Karten laufen über. */
    min-width: 0 !important;
  }
  /* V228o: die rechts-fixierte Aktionen-Spalte gilt nur am Desktop — in der Karten-Ansicht
     wieder normaler Fluss (sonst klebt sie falsch/ueberlagert Karteninhalt). */
  html body #dashboard-view .inv-shell .inv-table td.sticky-actions,
  html body #dashboard-view .inv-shell .inv-table th.sticky-actions {
    position: static !important;
    right: auto !important;
    box-shadow: none !important;
  }
}

/* ===== V228o (Notiz 24.07.): Mobile — Filter-Chips (Alle/Handlungsbedarf/Offen/Erledigt) + Toolbar
   (Suche/Refresh/Download/Neue Rechnung) liefen links/rechts aus dem Bild. Jetzt umbrechen + in
   100% Breite halten, nichts abgeschnitten. ===== */
@media (max-width: 768px) {
  html body #dashboard-view .inv-shell .inv-chips {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    max-width: 100% !important;
  }
  html body #dashboard-view .inv-shell .inv-toolbar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    max-width: 100% !important;
  }
  html body #dashboard-view .inv-shell .inv-toolbar .card-header-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
    max-width: 100% !important;
  }
  html body #dashboard-view .inv-shell .inv-toolbar .btn-primary { flex: 1 1 100% !important; }
}

/* ===== V228v (Notiz 24.07., LIVE am 402px-Handy verifiziert): Rechnungsuebersicht lief mobil
   ueber (Toolbar/Summary/Table-Wrap 407px > 306px Viewport, von .talent-main overflow-x:hidden
   abgeschnitten). Ursache: .inv-shell war display:grid/schmal + Kinder nicht auf 100% begrenzt +
   .inv-chips nowrap (spezifischere Regel). Alles auf Viewport-Breite zwingen + Chips umbrechen. ===== */
@media (max-width: 768px) {
  #dashboard-view .inv-shell { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; }
  #dashboard-view .inv-page-head, #dashboard-view .inv-summary { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  #dashboard-view .inv-toolbar { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: wrap !important; }
  #dashboard-view .inv-toolbar .card-header-actions { width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; }
  #dashboard-view .inv-toolbar .btn-primary { flex: 1 1 100% !important; width: 100% !important; }
  #dashboard-view .inv-toolbar .search-box, #dashboard-view .inv-toolbar-search { flex: 1 1 140px !important; }
  #dashboard-view .inv-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  #dashboard-view .inv-summary { flex-wrap: wrap !important; row-gap: 4px !important; }
  /* Chips umbrechen (schlaegt die nowrap-Regel html body #dashboard-view.talent-shell .inv-chips) */
  html body #dashboard-view.talent-shell .inv-toolbar .inv-chips { flex-wrap: wrap !important; row-gap: 4px !important; max-width: 100% !important; }
  html body #dashboard-view.talent-shell .inv-toolbar .inv-chips .inv-chip { flex: 0 0 auto !important; }
}