/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Büro-Oberflaeche (Buchhaltung, spaeter CRM) im Look von invoice-gateway.com.

   Entscheidung des Nutzers am 13.10.2026: Die Buero-Funktionen ziehen aus eRechnung nach BusinessOS,
   die Oberflaeche wird dabei NICHT neu erfunden. Vorlage ist das Angular-Portal
   (eRechnung: src/frontend/src/styles.scss und features/bank-import) — dessen helles Theme, dieselbe
   Dichte, dieselben Bausteine: Filterleiste mit kleinen Grossbuchstaben-Labels, Zeitraum-Knoepfe,
   dichte Tabelle mit einer Zeile je Datensatz, Konto-Auswahl in der Zeile, Status-Plaketten,
   Symbol-Knoepfe fuer Belege.

   Alles haengt unter `.ig` — die uebrige Verwaltung (CMS) bleibt, wie sie ist.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.ig {
    --ig-bg-card: #ffffff;
    --ig-bg-input: #ffffff;
    --ig-bg-elevated: #f8fafc;
    --ig-border: #e2e8f0;
    --ig-border-subtle: #f1f5f9;
    --ig-text: #0f172a;
    --ig-text-2: #475569;
    --ig-muted: #94a3b8;
    --ig-accent: #2563eb;
    --ig-accent-hover: #1d4ed8;
    --ig-accent-light: #3b82f6;
    --ig-success: #16a34a;
    --ig-danger: #dc2626;
    --ig-warning: #d97706;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ig-text);
    line-height: 1.5;
    /* Tabellen brauchen die Breite — nicht die 1100px der CMS-Seiten. */
    max-width: none !important;
    padding: 0 2rem 2rem !important;
}

.ig h1 { font-family: inherit; font-size: 1.5rem; font-weight: 700; color: var(--ig-text); margin: 0 0 .25rem; letter-spacing: 0; }
.ig h2 { font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ig-text); margin: 0 0 .75rem; }
.ig h3 { font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--ig-text); margin: 1.25rem 0 .5rem; }
.ig .ig-sub { color: var(--ig-muted); font-size: .875rem; margin: 0 0 1.5rem; max-width: none; }
.ig a { color: var(--ig-accent); }

/* ── Meldungen ── */
.ig-ok, .ig-err, .ig-warn { padding: .625rem .875rem; border-radius: 6px; font-size: .875rem; margin-bottom: 1rem; }
.ig-ok { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); color: #166534; }
.ig-err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: #991b1b; }
.ig-warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); color: #92400e; white-space: pre-line; }

/* ── Karten ── */
.ig-card { background: var(--ig-bg-card); border: 1px solid var(--ig-border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
/* Auf breiten Bildschirmen darf die Karte ueberlaufen — sonst schnitte sie die Aufklapp-Felder (Belege,
   Aufteilen) ab. Erst wenn die Tabelle nicht mehr passt, scrollt sie waagerecht. */
.ig-card--table { padding: 0; overflow: visible; }
@media (max-width: 1100px) { .ig-card--table { overflow-x: auto; } }

/* ── Knoepfe ── */
.ig-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem; border: 1px solid transparent; border-radius: 6px;
          cursor: pointer; font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ig-btn--primary { background: var(--ig-accent); color: #fff; }
.ig-btn--primary:hover { background: var(--ig-accent-hover); color: #fff; }
.ig-btn--secondary { background: var(--ig-bg-elevated); color: var(--ig-text-2); border-color: var(--ig-border); }
.ig-btn--secondary:hover { color: var(--ig-text); border-color: var(--ig-muted); }
.ig-btn--danger { background: transparent; color: var(--ig-danger); border-color: rgba(239,68,68,.35); }
.ig-btn--danger:hover { background: rgba(239,68,68,.08); }
.ig-btn--sm { padding: .25rem .625rem; font-size: .75rem; }
.ig-btn:disabled { opacity: .5; cursor: not-allowed; }
.ig-link { background: none; border: none; padding: 0; color: var(--ig-accent); cursor: pointer; font: inherit; font-size: .75rem; text-decoration: underline; }

/* Zeitraum-Knoepfe wie „Letzter Monat | Dieser Monat" */
.ig-period { display: flex; gap: .25rem; align-self: flex-end; }
.ig-period a { padding: .375rem .75rem; font-size: .8125rem; border: 1px solid var(--ig-border); border-radius: 6px;
               background: var(--ig-bg-elevated); color: var(--ig-text-2); text-decoration: none; white-space: nowrap; }
.ig-period a:hover { color: var(--ig-text); }
.ig-period a.is-active { background: var(--ig-accent); border-color: var(--ig-accent); color: #fff; }

/* ── Filterleiste ── */
.ig-filter { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.ig-filter__row { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.ig-field { display: flex; flex-direction: column; gap: .25rem; }
.ig-field > label, .ig-label { font-size: .6875rem; color: var(--ig-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.ig-check { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--ig-text-2); padding-bottom: .4rem; white-space: nowrap; }
.ig-check input { width: auto; margin: 0; }

.ig input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.ig-notes),
.ig select {
    padding: .375rem .75rem; background: var(--ig-bg-input); border: 1px solid var(--ig-border); border-radius: 6px;
    color: var(--ig-text); font: inherit; font-size: .875rem; width: auto; max-width: 100%; min-height: 0; box-shadow: none;
}
.ig input:focus, .ig select:focus { outline: none; border-color: var(--ig-accent); }
.ig-field--wide select, .ig-field--wide input { min-width: 260px; }
.ig input[type=file] { font-size: .8125rem; color: var(--ig-text-2); }

/* Monat mit Pfeilen in EINER Zeile: ‹ [Oktober 2026] › */
.ig-month { display: inline-flex; align-items: stretch; }
.ig-month a { display: inline-flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--ig-border); background: var(--ig-bg-elevated);
              color: var(--ig-text-2); text-decoration: none; font-size: 1rem; line-height: 1; }
.ig-month a:first-child { border-radius: 6px 0 0 6px; border-right: none; }
.ig-month a:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.ig-month a:hover { color: var(--ig-text); background: var(--ig-border-subtle); }
.ig .ig-month input { border-radius: 0 !important; }

/* ── Tabelle ── */
.ig-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ig-table th { text-align: left; font-size: .6875rem; font-weight: 600; color: var(--ig-muted); text-transform: uppercase;
               padding: .625rem; border-bottom: 1px solid var(--ig-border); white-space: nowrap; }
.ig-derived { color: var(--ig-muted); font-style: italic; }
.ig-table td { padding: .5rem .625rem; border-bottom: 1px solid var(--ig-border-subtle); color: var(--ig-text-2); vertical-align: middle; }
.ig-table tbody tr:hover td { background: var(--ig-bg-elevated); }
.ig-table tr.is-muted td { opacity: .55; }
.ig-table tr.is-muted td.ig-actions { opacity: 1; }
.ig-num { text-align: right !important; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ig-text); white-space: nowrap; }
.ig .ig-num--in { color: var(--ig-success); }
.ig .ig-num--out { color: var(--ig-danger); }
.ig-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ig-nowrap { white-space: nowrap; }
.ig-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; color: var(--ig-text); }
.ig-small { font-size: .75rem; color: var(--ig-muted); }
.ig-ellipsis { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-actions { white-space: nowrap; text-align: right; }
.ig-total td { font-weight: 600; color: var(--ig-text); border-top: 1px solid var(--ig-border); border-bottom: none; }

/* Verwendungszweck einzeilig, „vollständig" klappt auf — nur die aufgeklappte Zeile wird hoeher. */
.ig-ref { display: flex; align-items: baseline; gap: .375rem; max-width: 280px; }
.ig-ref > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ig-ref details { flex-shrink: 0; }
.ig-ref details[open] { flex-shrink: 1; }
.ig-ref summary { list-style: none; cursor: pointer; color: var(--ig-accent-light); font-size: .6875rem; text-decoration: underline; }
.ig-ref summary::-webkit-details-marker { display: none; }
.ig-ref details[open] summary { display: none; }
.ig-ref details[open] + span, .ig-ref:has(details[open]) > span { display: none; }
.ig-ref details[open] > div { white-space: normal; overflow-wrap: anywhere; }

/* Konto-Auswahl in der Zeile */
.ig .ig-acct { width: 100%; min-width: 200px; max-width: 260px; padding: .25rem .375rem; font-size: .75rem; border-radius: 4px; }
.ig .ig-acct.is-suggested { border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.06); }
.ig-acct-fixed { font-size: .75rem; color: var(--ig-text-2); white-space: nowrap; }
.ig input.ig-notes { width: 100%; min-width: 100px; padding: .2rem .4rem; background: transparent; border-color: transparent; border-radius: 4px;
                color: var(--ig-text-2); font-size: .75rem; }
.ig input.ig-notes:hover { border-color: var(--ig-border); }
.ig input.ig-notes:focus { outline: none; border-color: var(--ig-accent); background: var(--ig-bg-input); }

/* ── Plaketten ── */
.ig-badge { display: inline-block; padding: .125rem .5rem; border-radius: 4px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.ig-badge--ok { background: rgba(34,197,94,.15); color: var(--ig-success); }
.ig-badge--open { background: rgba(245,158,11,.15); color: var(--ig-warning); }
.ig-badge--danger { background: rgba(239,68,68,.12); color: var(--ig-danger); }
.ig-badge--info { background: rgba(59,130,246,.12); color: var(--ig-accent); }
.ig-badge--muted { background: var(--ig-border-subtle); color: var(--ig-muted); }
.ig-suggested { display: inline-block; margin-left: .375rem; padding: .0625rem .375rem; border: 1px dashed rgba(245,158,11,.6); border-radius: 4px;
                background: rgba(245,158,11,.12); color: #b45309; font-size: .6875rem; font-weight: 600; white-space: nowrap; }

/* ── Symbol-Knoepfe (Beleg ansehen / anhaengen / entfernen, bestaetigen) ── */
.ig-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 5px;
           border: 1px solid var(--ig-border); background: var(--ig-bg-input); color: var(--ig-muted); cursor: pointer; text-decoration: none;
           vertical-align: middle; list-style: none; }
.ig-icon::-webkit-details-marker { display: none; }
.ig-icon:hover { color: var(--ig-text); background: var(--ig-bg-elevated); }
.ig-icon--view { color: var(--ig-accent-light) !important; border-color: rgba(59,130,246,.3); }
.ig-icon--view:hover { background: rgba(59,130,246,.1); }
.ig-icon--del { color: var(--ig-danger) !important; border-color: rgba(239,68,68,.3); }
.ig-icon--del:hover { background: rgba(239,68,68,.1); }
.ig-icon--ok { color: var(--ig-success) !important; border-color: rgba(34,197,94,.35); }
.ig-icon--ok:hover { background: rgba(34,197,94,.1); }
.ig-icon--done { color: #fff !important; background: var(--ig-success); border-color: var(--ig-success); }
.ig-icon--done:hover { background: var(--ig-success); opacity: .85; }
.ig-icon svg { width: 14px; height: 14px; }
.ig-icons { display: inline-flex; align-items: center; gap: .375rem; }
.ig-count { font-size: .6875rem; color: var(--ig-muted); }

/* Kleines Aufklapp-Feld an einem Symbol (Belege einer Zeile) — haelt die Zeile niedrig. */
.ig-pop { position: relative; display: inline-block; }
.ig-pop > div { position: absolute; right: 0; top: 30px; z-index: 20; min-width: 300px; padding: .75rem; background: var(--ig-bg-card);
                border: 1px solid var(--ig-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); text-align: left; white-space: normal; }
.ig-pop__item { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .8125rem; }
.ig-pop__item a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ig-pop form { margin: 0; }
.ig-pop form + form { margin-top: .25rem; }
.ig-pop__upload { border-top: 1px solid var(--ig-border-subtle); margin-top: .5rem; padding-top: .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Upload-Feld wie „Bankdaten importieren" */
.ig-drop { border: 2px dashed var(--ig-border); border-radius: 8px; padding: 2.5rem 2rem; text-align: center; }
.ig-drop p { color: var(--ig-text-2); font-size: .875rem; margin: 0 auto 1.25rem; max-width: 60ch; }
.ig-drop form { display: inline-flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; justify-content: center; }

/* Werkzeugleiste ueber Tabellen (Suche links, Aktionen rechts) */
.ig-toolbar { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ig-toolbar__end { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.ig-summary { display: flex; align-items: center; gap: 1rem; font-size: .8125rem; color: var(--ig-muted); flex-wrap: wrap; margin-bottom: .75rem; }
.ig-summary strong { color: var(--ig-text); font-weight: 600; }
.ig-summary__end { margin-left: auto; }

/* Kennzahlen-Leiste (Eingang/Ausgang) */
.ig-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ig-stat { background: var(--ig-bg-card); border: 1px solid var(--ig-border); border-radius: 8px; padding: .75rem 1.25rem; flex: 1; min-width: 140px; }
.ig-stat strong { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ig-text); font-variant-numeric: tabular-nums; }
.ig-stat span { font-size: .6875rem; color: var(--ig-muted); text-transform: uppercase; font-weight: 600; }
.ig-stat--in { border-color: rgba(34,197,94,.5); }
.ig-stat--out { border-color: rgba(239,68,68,.5); }

/* Karten mit Meta-Feldern (Bankverbindungen) */
.ig-conn { padding: 1.25rem; margin-bottom: .75rem; }
.ig-conn__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ig-conn__name { font-weight: 600; color: var(--ig-text); margin-right: .5rem; }
.ig-conn__meta { display: flex; gap: 2rem; margin-top: .75rem; flex-wrap: wrap; font-size: .8125rem; color: var(--ig-text-2); }
.ig-conn__meta > div { display: flex; flex-direction: column; gap: .125rem; }

/* Formular-Raster (Anlegen/Bearbeiten) */
.ig-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1rem; align-items: end; }
.ig-form .ig-field input, .ig-form .ig-field select { width: 100%; }
/* Breites Feld im Formular-Raster (Kunde, Projekt, Projektname): zwei Spalten statt fester Mindestbreite —
   ig-field--wide schob im Raster das Feld daneben zu (Projekt anlegen, 15.10.2026). */
.ig-form .ig-field--span2 { grid-column: span 2; }

/* Positionen einer Rechnung: Eingaben fuellen die Zelle, die Beschreibung bekommt den Platz. */
.ig-positionen input, .ig-positionen select { width: 100%; }
.ig-positionen td:first-child { min-width: 280px; width: 45%; }
.ig-positionen .ig-pos-herkunft { display: block; margin-top: .125rem; }
.ig-positionen td.ig-num input { text-align: right; }
.ig-form__actions { display: flex; gap: .5rem; justify-content: flex-end; grid-column: 1 / -1; }

.ig-empty { text-align: center; padding: 3rem 1rem; color: var(--ig-muted); font-size: .875rem; }
.ig-empty strong { display: block; color: var(--ig-text); font-size: 1rem; margin-bottom: .375rem; }

/* Zwei Karten nebeneinander (Summen je Person / je Projekt), schmal untereinander */
.ig-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* Ohne JavaScript bleibt je Zeile ein Speichern-Knopf; mit JavaScript speichert schon die Auswahl. */
.js .ig-nojs { display: none !important; }

@media (max-width: 768px) {
    .ig { padding: 0 1rem 1rem !important; }
    .ig-table { font-size: .75rem; }
    .ig .ig-acct { min-width: 140px; }
    .ig-field--wide select, .ig-field--wide input { min-width: 0; width: 100%; }
    .ig-form .ig-field--span2 { grid-column: 1 / -1; }
}

/* Aufklapp-Knoepfe (<summary>) ohne Browser-Dreieck */
.ig summary.ig-btn, .ig summary.ig-icon { list-style: none; display: inline-flex; }
.ig summary.ig-btn::-webkit-details-marker, .ig summary.ig-icon::-webkit-details-marker { display: none; }
.ig details.ig-card[open] > summary { margin-bottom: .25rem; }

/* Auswahl und Vorschlag-Plakette nebeneinander — die Zeile bleibt einzeilig. */
.ig-acct-cell { display: flex; align-items: center; gap: .375rem; }
.ig-acct-cell .ig-acct { flex: 1 1 auto; min-width: 160px; }
.ig-acct-cell .ig-suggested { margin-left: 0; cursor: pointer; font-family: inherit; }

/* Knoepfe, die Links sind: die Linkfarbe von `.ig a` darf ihre Schrift nicht ueberdecken. */
.ig a.ig-btn--primary, .ig a.ig-btn--primary:hover { color: #fff; }
.ig a.ig-btn--secondary { color: var(--ig-text-2); }
.ig a.ig-btn { text-decoration: none; }

/* Aufteilen: Teilkonto und Betrag paarweise nebeneinander */
.ig-form--paare { grid-template-columns: 1fr 1fr; min-width: 340px; }

/* Datei-Knoepfe: <label> als Knopf, das eigentliche <input type=file> versteckt */
.ig label.ig-btn { cursor: pointer; }
.ig-drop form label.ig-btn input[type=file] { display: none; }

/* ── Forecast (Liquiditaetsvorschau) ── breite Monatstabelle: scrollt waagerecht, die ersten Spalten bleiben stehen. */
.ig-forecast__scroll { overflow-x: auto; }
.ig-forecast__tab th, .ig-forecast__tab td { white-space: nowrap; }
.ig-forecast__tab .ig-forecast__tag { width: 2.5rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; }
.ig-forecast__tab .ig-forecast__name { min-width: 12rem; color: var(--ig-text); }
.ig-forecast__tab .ig-forecast__name .ig-small { margin-left: .375rem; }
.ig-forecast__auto td { background: rgba(59,130,246,.035); }
.ig-forecast__am { margin-right: .375rem; font-size: .6875rem; font-weight: 500; color: var(--ig-muted); }
.ig-forecast__name .ig-badge { margin-left: .375rem; vertical-align: 1px; }
.ig-forecast__saldo td { color: var(--ig-muted); font-style: italic; }
.ig-forecast__tab .ig-forecast__summe { border-left: 1px solid var(--ig-border); background: var(--ig-bg-elevated); }
.ig-forecast__diff td { border-top: 1px dashed var(--ig-border); }
.ig-forecast__ende td { background: var(--ig-bg-elevated); }
.ig-forecast__bank { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; margin-bottom: .75rem; }
.ig .ig-forecast__kopf input[readonly] { background: var(--ig-bg-elevated); color: var(--ig-text-2); }
.ig-forecast__kopf { grid-template-columns: repeat(3, minmax(0, 12rem)); margin-bottom: 1rem; }
.ig-forecast__edit { width: auto; }
.ig-forecast__edit td { padding: .2rem .2rem; }
/* !important nur hier: die allgemeine Eingaberegel der Bueroseiten (.ig input:not(...)…) ist spezifischer und
   setzt Breite und Innenabstand zurueck — im Raster sollen die Felder schmal und dicht sein. */
.ig .ig-forecast__edit .ig-fc { box-sizing: border-box; padding: .3rem .45rem !important; font-size: .8125rem !important;
    border-radius: 5px !important; }
.ig .ig-forecast__edit .ig-fc--bez { width: 13rem !important; }
.ig .ig-forecast__edit .ig-fc--art { width: 7rem !important; padding-right: 1.4rem !important; }
.ig .ig-forecast__edit .ig-fc--mwst { width: 4.75rem !important; padding-right: 1.2rem !important; }
/* Monatswert als Platzhalter: hell und kursiv, damit er nicht wie ein eigener Eintrag aussieht. */
.ig .ig-forecast__edit .ig-fc--wert::placeholder { color: #b6c0cc; font-style: italic; opacity: 1; }
.ig-forecast__konto { margin-left: .25rem; color: var(--ig-accent); cursor: help; }
.ig .ig-forecast__edit .ig-fc--klein { width: 3.75rem !important; }
.ig .ig-forecast__edit .ig-fc--wert { width: 5.25rem !important; text-align: right; font-variant-numeric: tabular-nums; }
.ig-forecast__edit input:focus, .ig-forecast__edit select:focus { outline: 2px solid var(--ig-accent-light); outline-offset: -1px; border-color: transparent; }
.ig-forecast__edit input:invalid { border-color: var(--ig-danger); }
.ig-forecast__edit .is-vor { background: var(--ig-bg-elevated); }
.ig-forecast__edit th.is-vor { color: var(--ig-border); }
.ig-forecast__neu input[type=text]::placeholder { color: var(--ig-muted); font-style: italic; }