/* =========================================================================
   Mengenplan — Design-Token-System
   Subjekt: ein Buchhaltungs-/Planungs-Raster (Ledger). Soll = Ocker-Tinte,
   Ist = Tannen-Tinte — angelehnt an die alte Konvention unterschiedlicher
   Tintenfarben für geplante vs. tatsächliche Werte in Kassenbüchern.
   Akzent = Siegel-/Stempelfarbe (Violett) für Aktionen, aktive Filter und
   den aktiv-Status einer Zeile.
   ========================================================================= */

   :root {
    --ink-900:   #161E27;   /* Chrome, Primärtext */
    --paper-0:   #FAFAF8;   /* Seiten-/Tabellenhintergrund, kühles Weiß */
    --paper-100: #F1F0EC;   /* leicht abgesetzte Flächen / Metadaten-Spalten */
    --line-200:  #DDE0DC;   /* Haarlinie / Tabellenraster */
    --soll-600:  #9C6B22;   /* Soll-Tinte (Ocker) */
    --soll-100:  #F3E8D6;
    --ist-600:   #1E6F5C;   /* Ist-Tinte (Tanne) */
    --ist-100:   #DDEEE9;
    --flag-600:  #B23A2E;   /* negative Abweichung / löschen */
    --accent-600: #6B4A8C;  /* Siegel-Violett: Aktionen, aktive Filter, aktive Zeilen */
    --accent-100: #EFE6F5;
    --accent-700: #523770;
    --chrome-green:       #1B4332; /* Kopfleiste + Summenzeile */
    --chrome-green-light: #2D6A4F; /* Buttons/Ränder auf der Kopfleiste */
  
    --font-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  
    --col-cat-w:        118px;  /* Bereich */
    --col-aktiv-w:        46px; /* Aktiv (Checkbox) */
    --col-name-w:        150px; /* Geschäftspartner bzw. Anlage */
    --col-vertrag-w:      98px; /* Vertragsnummer */
    --col-debkred-w:     118px; /* Debitoren-/Kreditorennummer */
    --col-qualitaet-w:    98px; /* Qualität */
    --col-bonus-w:       112px; /* Aufbereitungsbonus */
    --col-evk-w:          98px; /* EVK */
    --col-abrechnung-w:  112px; /* Abrechnungsart */
    --col-navarro-w:      84px; /* NawaRo */
    --col-wdr-w:          84px; /* WD */
    --col-data-w:         64px; /* Soll/Ist-Zelle */
  
    --radius: 6px;
  }
  
  * { box-sizing: border-box; }
  
  html, body {
    margin: 0;
    padding: 0;
    background: var(--paper-0);
    color: var(--ink-900);
    font-family: var(--font-ui);
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
    min-height: 100vh;
  }
  
  button {
    font-family: inherit;
  }
  
  /* ---- Topbar ------------------------------------------------------------ */
  
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--chrome-green);
    color: var(--paper-0);
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--soll-600), var(--accent-600) 50%, var(--ist-600)) 1;
  }
  
  .topbar__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
  }
  
  .topbar__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  
  .topbar__subtitle {
    font-size: 11.5px;
    color: #9AA3AC;
    font-weight: 400;
  }
  
  .year-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  
  .year-nav__btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    border: 1px solid var(--chrome-green-light);
    background: var(--chrome-green-light);
    color: var(--paper-0);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  
  .year-nav__btn:hover { background: var(--accent-600); border-color: var(--accent-600); }
  
  .year-nav__year {
    font-family: var(--font-data);
    font-weight: 600;
    font-size: 15px;
    min-width: 48px;
    text-align: center;
  }
  
  /* ---- Filterleiste (kompakt, immer sichtbar) ------------------------------ */
  
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line-200);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  
  .filter-select {
    border: 1px solid var(--line-200);
    background: var(--paper-0);
    color: var(--ink-900);
    font-family: var(--font-ui);
    font-size: 11.5px;
    padding: 6px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    max-width: 132px;
    cursor: pointer;
  }
  
  .filter-select--active {
    border-color: var(--accent-600);
    background: var(--accent-100);
    color: var(--accent-700);
    font-weight: 600;
  }
  
  .filter-reset {
    flex-shrink: 0;
    border: 1px solid var(--flag-600);
    background: var(--paper-0);
    color: var(--flag-600);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
  }
  
  .filter-reset:hover { background: #FBEAE8; }
  
  .stammdaten-toggle {
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid var(--line-200);
    background: var(--paper-0);
    color: var(--ink-900);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
  }
  
  .stammdaten-toggle:hover { border-color: var(--accent-600); color: var(--accent-700); }
  .stammdaten-toggle.is-open { background: var(--accent-600); border-color: var(--accent-600); color: var(--paper-0); }
  
  /* ---- Stammdaten-Verwaltung (ausklappbar, standardmäßig verborgen) -------- */
  
  .stammdaten {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-200);
    background: var(--paper-100);
  }
  
  /* Wichtig: [hidden] allein wird von der display:flex-Regel oben
     überschrieben (Autorenstyles schlagen das UA-Default [hidden]{display:none}),
     darum hier explizit erzwingen. */
  .stammdaten[hidden] { display: none; }
  
  .stammdaten__group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .stammdaten__label {
    font-size: 10.5px;
    font-weight: 600;
    color: #8A8378;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 92px;
    flex-shrink: 0;
  }
  
  .chip-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: thin;
  }
  
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line-200);
    background: var(--paper-0);
    color: var(--ink-900);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .chip__remove {
    border: none;
    background: none;
    color: #8A8378;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
  }
  
  .chip__remove:hover { color: var(--flag-600); }
  
  .chip--add {
    cursor: pointer;
    border-style: dashed;
    border-color: var(--accent-600);
    color: var(--accent-700);
    font-weight: 600;
    flex-shrink: 0;
    background: var(--paper-0);
  }
  
  .chip--add:hover { background: var(--accent-100); }
  
  /* ---- Scroll-Hinweis ------------------------------------------------------ */
  
  .scroll-hint {
    margin: 8px 16px 0;
    font-size: 11.5px;
    color: #8A8378;
    text-align: center;
  }
  
  @media (min-width: 900px) {
    .scroll-hint { display: none; }
  }
  
  /* ---- Tabellen-Grundgerüst ------------------------------------------------ */
  
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0 0;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
  }
  
  table.grid {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 12.5px;
  }
  
  .grid th, .grid td {
    border-bottom: 1px solid var(--line-200);
    border-right: 1px solid var(--line-200);
    padding: 0;
  }
  
  /* ---- Kopfzeilen ----------------------------------------------------------- */
  
  .grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--paper-0);
    font-weight: 600;
    padding: 8px 8px;
    text-align: left;
    white-space: nowrap;
    font-size: 11.5px;
  }
  
  .lead-th {
    text-align: center !important;
    white-space: normal;
    line-height: 1.25;
    background: var(--paper-100);
  }
  
  .month-th {
    text-align: center !important;
    color: var(--ink-900);
    border-bottom: 1px solid transparent !important;
    font-size: 12.5px;
  }
  
  .subhead-th {
    text-align: center !important;
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 0 6px !important;
    width: var(--col-data-w);
  }
  
  .subhead-th--soll { color: var(--soll-600); box-shadow: inset 0 -2px 0 var(--soll-600); }
  .subhead-th--ist  { color: var(--ist-600);  box-shadow: inset 0 -2px 0 var(--ist-600); }
  
  /* ---- Spaltenbreiten (scrollende Metadaten-Spalten) ------------------------ */
  
  .w-vertrag    { width: var(--col-vertrag-w);    min-width: var(--col-vertrag-w); }
  .w-debkred    { width: var(--col-debkred-w);    min-width: var(--col-debkred-w); }
  .w-qualitaet  { width: var(--col-qualitaet-w);  min-width: var(--col-qualitaet-w); }
  .w-bonus      { width: var(--col-bonus-w);      min-width: var(--col-bonus-w); }
  .w-evk        { width: var(--col-evk-w);        min-width: var(--col-evk-w); }
  .w-abrechnung { width: var(--col-abrechnung-w); min-width: var(--col-abrechnung-w); }
  .w-navarro    { width: var(--col-navarro-w);    min-width: var(--col-navarro-w); }
  .w-wdr        { width: var(--col-wdr-w);        min-width: var(--col-wdr-w); }
  
  /* ---- Sticky Spalten (Bereich / Aktiv / Geschäftspartner) ------------------ */
  
  .sticky-col {
    position: sticky;
    z-index: 1;
    background: var(--paper-0);
  }
  
  .sticky-col--cat {
    left: 0;
    width: var(--col-cat-w);
    min-width: var(--col-cat-w);
  }
  
  .sticky-col--aktiv {
    left: var(--col-cat-w);
    width: var(--col-aktiv-w);
    min-width: var(--col-aktiv-w);
  }
  
  .sticky-col--name {
    left: calc(var(--col-cat-w) + var(--col-aktiv-w));
    width: var(--col-name-w);
    min-width: var(--col-name-w);
    border-right: 1px solid var(--line-200) !important;
  }
  
  .th-label {
    display: inline-block;
    padding-right: 20px;
  }
  
  .meta-toggle {
    position: absolute;
    top: 6px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--accent-600);
    background: var(--paper-0);
    color: var(--accent-700);
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  
  .meta-toggle:hover { background: var(--accent-100); }
  .meta-toggle[aria-expanded="true"] { background: var(--accent-600); color: var(--paper-0); }
  
  /* Spalten-Kollaps (wie Excel-Gruppierung): blendet alle Zellen mit Klasse
     .meta-col (Kopf- UND Datenzeilen) aus. Bewusst über display:none auf den
     einzelnen Zellen statt über <colgroup>/visibility:collapse gelöst, da
     Browser Letzteres bei border-collapse:separate inkonsistent behandeln. */
  .grid.meta-collapsed .meta-col { display: none; }
  
  thead .sticky-col { z-index: 4; }
  
  /* ---- Datenzeilen ----------------------------------------------------------- */
  
  .grid tbody tr:hover td:not(.sticky-col) { background: var(--paper-100); }
  .grid tbody tr:hover td.sticky-col { background: var(--paper-100); }
  .grid tbody tr:hover td.lead-cell { background: #EAE8E1; }
  
  .cat-cell, .name-cell, .lead-cell {
    padding: 4px 6px;
    background: var(--paper-0);
  }
  
  .lead-cell { background: var(--paper-100); }
  
  /* Aktiv-Status farblich kennzeichnen: aktive Zeilen (zählen in die Summe)
     bekommen einen Tanne-Akzentrand, inaktive einen neutralen, blassen Rand
     und werden insgesamt etwas zurückgenommen. */
  .sticky-col--cat { box-shadow: inset 3px 0 0 var(--line-200); }
  tr.line-active .sticky-col--cat { box-shadow: inset 3px 0 0 var(--ist-600); }
  tr.line-inactive { opacity: 0.6; }
  tr.line-inactive .data-input, tr.line-inactive .lead-numeric-input { color: #9A9488 !important; }
  
  .aktiv-cell {
    padding: 4px 0;
    text-align: center;
  }
  
  .aktiv-checkbox {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--ist-600);
    vertical-align: middle;
  }
  
  .lookup-select, .field-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-900);
    padding: 5px 4px;
    border-radius: 4px;
    text-align: center;
  }
  
  .name-cell .field-input { text-align: left; }
  
  .lead-numeric-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--ink-900);
    text-align: right;
    padding: 5px 6px;
    border-radius: 4px;
    -moz-appearance: textfield;
  }
  
  .lead-numeric-input::-webkit-outer-spin-button,
  .lead-numeric-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .lead-numeric-input:hover { border-color: var(--line-200); }
  
  .lead-numeric-input:focus-visible {
    outline: 2px solid var(--accent-600);
    outline-offset: -1px;
    background: var(--paper-0);
  }
  
  .lookup-select:hover, .field-input:hover { border-color: var(--line-200); }
  
  .lookup-select:focus-visible, .field-input:focus-visible {
    outline: 2px solid var(--accent-600);
    outline-offset: -1px;
    background: var(--paper-0);
  }
  
  .data-cell {
    width: var(--col-data-w);
    min-width: var(--col-data-w);
    padding: 0;
  }
  
  .data-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 12.5px;
    padding: 7px 8px;
    -moz-appearance: textfield;
  }
  
  .data-input::-webkit-outer-spin-button,
  .data-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .data-input--soll { color: var(--soll-600); }
  .data-input--ist  { color: var(--ist-600); }
  
  .data-input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    background: var(--paper-100);
  }
  
  .row-actions {
    padding: 4px 6px;
    text-align: center;
  }
  
  .row-delete {
    border: none;
    background: none;
    color: #B7AFA0;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    line-height: 1;
  }
  
  .row-delete:hover { color: var(--flag-600); }
  
  /* ---- Ghost-Zeile: "+ Neue Zeile" ------------------------------------------- */
  
  .ghost-row td {
    border-top: 1px dashed #C9C2B2;
    border-bottom: none;
    background: var(--paper-0);
  }
  
  .ghost-row__trigger-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper-0);
  }
  
  .ghost-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px !important;
  }
  
  .ghost-row__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--accent-700);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .ghost-row__trigger:hover { color: var(--accent-600); }
  
  .ghost-row__plus {
    font-family: var(--font-data);
    font-size: 14px;
  }
  
  .ghost-row--editing td { border-top: 1px solid var(--accent-600); }
  
  .ghost-save {
    border: 1px solid var(--accent-600);
    background: var(--accent-600);
    color: var(--paper-0);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .ghost-save:hover { background: var(--accent-700); }
  
  .ghost-cancel {
    border: none;
    background: none;
    color: #8A8378;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 4px;
  }
  
  /* ---- Summenzeile ------------------------------------------------------------ */
  
  tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--chrome-green);
    color: var(--paper-0);
    border-color: var(--chrome-green-light) !important;
    font-family: var(--font-data);
    font-weight: 600;
    font-size: 12px;
    padding: 9px 8px;
    text-align: right;
    white-space: nowrap;
  }
  
  .sticky-col--foot {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--chrome-green);
    text-align: left;
    font-family: var(--font-ui);
  }
  
  .totals-hint {
    display: block;
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 400;
    color: #9AA3AC;
    white-space: normal;
  }
  
  .sum-ist--up   { color: #6FD3B6; }
  .sum-ist--down { color: #E08B7D; }
  
  /* ---- Reduced motion ------------------------------------------------------------ */
  
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }
  
  /* ---- Größere Screens: etwas mehr Luft --------------------------------------- */
  
  @media (min-width: 900px) {
    .grid { font-size: 13px; }
    .topbar { padding: 16px 24px; }
    .filter-bar { padding: 8px 24px; }
    .stammdaten { padding: 10px 24px; }
    .scroll-hint { display: none; }
  }