/* =============================================================================
   amadee CRM - style.css (Altbestand aus dem CashManager)

   Enthält zweierlei: die Anpassungen des PrimeFaces-Themes (Abschnitt "Helles
   Theme") und die fachlichen Regeln des CashDesks (Übersicht, Importe,
   Auswertungen). Neue Regeln kommen NICHT hierher, sondern nach
   crm/components.css (wiederverwendbar) bzw. in das Stylesheet ihres Moduls.
   Siehe docs/CONVENTIONS.md, Abschnitt CSS.

   Die Tokens (:root) stehen seit 11/2026 in crm/tokens.css.
   ============================================================================= */

/* =============================================================================
   Utility-Klassen
   Ersetzen wiederkehrende style="..."-Attribute im Markup. Die Breiten
   entsprechen den Werten, die vorher vielfach inline standen (z.B. width:140px
   allein 18-mal) - eine Änderung wirkt jetzt an einer Stelle statt an achtzehn.
   ============================================================================= */
.cm-w-full {
    width: 100%;
}

.cm-mb-sm {
    margin-bottom: .75rem;
}

.cm-strong {
    font-weight: 600;
}

.cm-muted {
    color: var(--text-color-secondary, #6c757d);
    font-size: .9em;
}

/* Zeile aus Eingabefeldern mit einheitlichem Abstand (Grobplanung, Filterzeilen) */
.cm-row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Tabellenspalten - Breiten aus dem bisherigen Inline-Markup übernommen */
/* Die Breite ist nur ein Richtwert: Wo eine dritte Schaltflaeche dazukommt (Mitarbeiter:
   Aktiv/Deaktiviert umschalten), wären 110 px zu wenig und die letzte Schaltflaeche
   rutschte in eine zweite Zeile. nowrap haelt sie zusammen und die Spalte weitet sich. */
.cm-col-actions {
    width: 110px;
    text-align: center;
    white-space: nowrap;
}

/* Auch die Ueberschrift zentrieren: PrimeFaces richtet Spaltenkoepfe ueber eigene,
   spezifischere Regeln aus, gegen die eine einzelne Klasse nicht ankommt. */
body .ui-datatable thead th.cm-col-actions {
    text-align: center;
    justify-content: center;
}

.cm-col-year {
    width: 140px;
    text-align: center;
}

/* Buchungs-/Leistungsjahr im Journal: Kopf auf "BJ"/"LJ" gekuerzt, die Breite richtet sich
   jetzt nach dem Filter-Auswahlfeld darunter, nicht mehr nach der Ueberschrift. */
.cm-col-year-short {
    width: 6rem;
}

.cm-col-amount {
    width: 140px;
}

.cm-col-sm {
    width: 9rem;
}

.cm-col-md {
    width: 11rem;
}

/* Eingabefelder in Formularzeilen */
/* =============================================================================
   Login
   ============================================================================= */
.login-card .p-fluid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-card .p-field {
    display: flex;
    flex-direction: column;
}

.login-card .p-field label {
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--text-color);
}

.login-card .p-inputtext,
.login-card .p-password input {
    width: 100%;
    box-sizing: border-box;
}

.login-card .p-button {
    width: 100%;
    margin-top: .5rem;
}

.login-card .info-text {
    margin-bottom: 1rem;
    text-align: center;
}

/* =============================================================================
   Fachliche Wertefarben
   ============================================================================= */
.val-green {
    color: var(--cm-pos-strong);
    font-weight: 600;
}

.val-red {
    color: var(--cm-neg-strong);
    font-weight: 600;
}

.white {
    color: var(--cm-neutral);
    font-weight: 500;
}

/* Klickbare Beträge in der Übersicht - springen vorgefiltert ins Buchungsjournal. */
.cm-drill-link {
    text-decoration: none;
    cursor: pointer;
}

.cm-drill-link:hover {
    text-decoration: underline;
}

/* =============================================================================
   Zeilenzustände (Kontoauszug-/Rechnungsimport)
   ============================================================================= */
/* Zeilen ohne zugeordnete Ausgabeart hervorheben */
.cm-row-unassigned > td {
    background-color: var(--cm-warn-bg) !important;
}

/* Ignorierte Zeilen (z.B. Kreditkarten-Überträge) ausgegraut anzeigen */
.cm-row-ignored > td {
    opacity: 0.5;
}

/* Geplante Buchungen im Journal ("Plan gebucht": noch ohne Buchungsjahr). Sanftes Gelb -
   sie sind kein Fehler, sondern erwartete, noch offene Vorgaenge, und sollen sich von den
   erledigten abheben, ohne die Liste unruhig zu machen. */
.cm-row-planned > td {
    background-color: #FFFBEF !important;
}

.ui-datatable tbody tr.cm-row-planned:hover > td {
    background-color: #FDF3D9 !important;
}

/* Zugaenge - verkaufte Module, neu hinzugekommene Positionen. Sanftes Gruen: Das ist eine
   gute Nachricht und soll sich von den Hinweiszeilen (gelb) und den Abgaengen (rot)
   unterscheiden. */
.cm-row-sold > td {
    background-color: #F1F8F4 !important;
}

.ui-datatable tbody tr.cm-row-sold:hover > td {
    background-color: #DFEFE6 !important;
}

/* Stammdaten, deren Deaktivierungsjahr erreicht ist: gedecktes Pastellrot. Sie stehen
   weiterhin in der Liste - die Buchungen der Vorjahre haengen daran -, sollen aber auf einen
   Blick von den aktiven zu unterscheiden sein. Ein kuenftiges Deaktivierungsjahr faerbt
   nicht: bis dahin ist der Eintrag regulaer in Gebrauch. */
.cm-row-disabled > td {
    background-color: #FBEDEC !important;
}

/* Beim Ueberfahren etwas kraeftiger - sonst verschluckt die Hover-Farbe der Tabelle die
   Kennzeichnung und die Zeile sieht ploetzlich aus wie jede andere. */
.ui-datatable tbody tr.cm-row-disabled:hover > td {
    background-color: #F6DEDC !important;
}

/* Nicht (mehr) auswählbare Zeilen (bereits importiert/ignoriert) */
.cm-row-locked > td {
    opacity: 0.6;
}

.cm-row-locked .ui-chkbox-box.ui-state-disabled {
    cursor: not-allowed;
}

/* =============================================================================
   Spaltenbreiten der Übersichts-/Analytics-Tabellen
   ============================================================================= */
.col-typeName {
    width: 28rem;
    text-align: left;
}

/* Analytics-Baumtabellen: Jahres-Spalten (Betrag + YoY%) neben der breiten Label-Spalte */
.col-year {
    width: 11rem;
    min-width: 11rem;
    text-align: right;
}

.col-bj {
    width: 7rem;
    text-align: right;
    padding-right: 0.5rem; /* konsistent mit anderen numerischen Spalten */
}

.col-lj,
.col-plan-next,
.col-plan,
.col-open {
    width: 10rem;
    text-align: right;
}

.col-note {
    width: 50rem;
    text-align: left;
}

.col-plan-booked {
    width: 10rem;
    text-align: right;
}

/* Top-5 Kunden: Income-Group-Spalte schmaler als col-typeName */
.col-group-top5 {
    width: 18rem;
    max-width: 18rem;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

/* Einnahmen-Tabelle etwas schmaler als Ausgaben, damit die Grobplanung daneben mehr
   Platz bekommt - nur hier, Ausgaben-Tabelle bleibt bei den regulären Breiten. */
.income-panel .col-typeName {
    width: 20rem;
}

/* Einheitliche Zell-Ausrichtung (basierend auf <colgroup>) */
table col.col-typeName ~ tbody td:nth-child(1),
table col.col-bj ~ tbody td:nth-child(2),
table col.col-lj ~ tbody td:nth-child(3),
table col.col-plan-next ~ tbody td:nth-child(4),
table col.col-plan ~ tbody td:nth-child(5),
table col.col-open ~ tbody td:nth-child(6),
table col.col-note ~ tbody td:nth-child(7) {
    padding: 0.35rem 0.5rem;
}

/* Rechtsbündigkeit für numerische Spalten */
table col.col-lj ~ tbody td:nth-child(3),
table col.col-plan-next ~ tbody td:nth-child(4),
table col.col-plan ~ tbody td:nth-child(5),
table col.col-open ~ tbody td:nth-child(6) {
    text-align: right;
    white-space: nowrap;
}

/* Kopfzeilen-Ausrichtung passend zu den Daten */
table thead th:nth-child(3),
table thead th:nth-child(4),
table thead th:nth-child(5),
table thead th:nth-child(6) {
    text-align: right;
}

/* =============================================================================
   Tabellen-Grundlayout
   ============================================================================= */
/* Wichtig für sticky: keine collapse, sondern separate + spacing 0 */
table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* stabilisiert Spaltenbreiten im Scroll */
}

table tbody td,
table thead th {
    line-height: 1.2;
}

/* Spaltenabstand */
table thead th:not(:last-child),
table tbody td:not(:last-child) {
    padding-right: 0.6rem;
}

table thead th:nth-child(n+2) {
    padding-left: 0;
}

/* PrimeFaces-DataTable: kompakte Zellen */
.ui-datatable tbody tr td {
    padding: 2px 6px !important;
    line-height: 1.2 !important;
}

.ui-datatable thead th {
    padding: 4px 6px !important;
}

.ui-datatable table tbody td,
.ui-datatable table thead th {
    padding: 0.35rem 0.5rem;
}

.ui-datatable table thead th:not(:last-child),
.ui-datatable table tbody td:not(:last-child) {
    padding-right: 0.6rem;
}

.ui-datatable table thead th + th,
.ui-datatable table tbody td + td {
    padding-left: 0;
}

/* =============================================================================
   Gruppenzeilen
   ============================================================================= */
.group-row > td {
    background-color: var(--cm-group-bg);
    font-weight: 600;
    color: var(--cm-text-group);
    padding-top: 0.40rem;
    padding-bottom: 0.40rem;
    border-top: 1px solid var(--cm-group-border);
    border-bottom: 1px solid var(--cm-group-border);
}

.group-row > td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    padding-left: 0.85rem;
}

.group-row > td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.group-row > td:first-child::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background: linear-gradient(180deg, var(--cm-accent-neutral-from) 0%, var(--cm-accent-neutral-to) 100%);
    border-radius: 2px;
}

.group-row .group-value,
.group-row .col-lj,
.group-row .col-plan-next,
.group-row .col-plan,
.group-row .col-open {
    text-align: right;
    white-space: nowrap;
}

.group-row > td:not(:last-child) {
    padding-right: 0.6rem;
}

tbody tr.group-row:hover > td {
    background-color: var(--cm-group-bg-hover);
}

/* --- Ausgaben-Gruppen --- */
/* Beide Selektoren nötig: der zweite gewinnt gegen die Zell-Regeln, die PrimeFaces
   für .ui-datatable mitbringt. Deshalb bewusst dieselbe Deklaration zweimal, statt
   sie mit !important zu erzwingen. */
.group-row.outcome > td,
.ui-datatable table tbody tr.group-row.outcome > td {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background-color: var(--cm-outcome-bg);
    border-top-color: var(--cm-outcome-border);
    border-bottom-color: var(--cm-outcome-border);
}

.group-row.outcome > td:first-child::before,
.ui-datatable table tbody tr.group-row.outcome > td:first-child::before {
    background: linear-gradient(180deg, var(--cm-accent-outcome-from) 0%, var(--cm-accent-outcome-to) 100%);
    width: 4px;
}

.group-row.outcome .group-value .val-red {
    color: var(--cm-neg);
}

.group-row.outcome .group-value .val-green {
    color: var(--cm-pos);
}

/* --- Einnahmen-Gruppen --- */
.group-row.income > td:first-child::before {
    background: linear-gradient(180deg, var(--cm-accent-income-from) 0%, var(--cm-accent-income-to) 100%);
}

/* --- PrimeFaces-Kapselung der Gruppen-Innenabstände --- */
.ui-datatable table tbody tr.group-row > td {
    padding-top: 0.40rem;
    padding-bottom: 0.40rem;
}

.ui-datatable table tbody tr.group-row.outcome > td:not(:last-child) {
    padding-right: 0.6rem;
}

/* =============================================================================
   Numerische Ausrichtung
   ============================================================================= */
.num-right {
    text-align: right !important;
    white-space: nowrap;
}

.num-left {
    text-align: left !important;
}

.num-input {
    text-align: right !important;
}

/* =============================================================================
   Eingabefelder kompakt
   ============================================================================= */
input[type="text"],
input[type="number"],
input[type="password"],
.ui-inputfield,
.p-inputtext {
    height: var(--cm-input-height);
    line-height: 26px;
    padding: 2px var(--cm-input-pad-x);
    font-size: var(--cm-input-font-size);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.p-inputnumber .p-inputtext,
.ui-inputnumber .ui-inputfield {
    height: var(--cm-input-height) !important;
    line-height: 26px !important;
    padding: 2px var(--cm-input-pad-x) !important;
    font-size: var(--cm-input-font-size) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    text-align: right;
}

/* Wertefarben auch in InputNumber-Feldern durchsetzen (PrimeFaces setzt dort eine
   eigene Textfarbe auf dem inneren Input). */
.p-inputnumber .p-inputtext.val-green,
.ui-inputnumber .ui-inputfield.val-green {
    color: var(--cm-pos) !important;
    font-weight: 600;
}

.p-inputnumber .p-inputtext.val-red,
.ui-inputnumber .ui-inputfield.val-red {
    color: var(--cm-neg) !important;
    font-weight: 600;
}

.p-inputnumber .p-inputtext.white,
.ui-inputnumber .ui-inputfield.white {
    color: var(--cm-neutral) !important;
    font-weight: 500;
}

/* DatePicker kompakt */
.cm-date .p-inputtext,
.cm-date .ui-inputfield {
    height: var(--cm-input-height);
    line-height: calc(var(--cm-input-height) - 2px);
    font-size: var(--cm-input-font-size);
}

/* Datumsfeld mit Kalender-Knopf in einer Zeile (Preiserhöhung, "Gültig ab"). Die globale Regel
   width:100% für Eingabefelder schob den Knopf sonst unter das Feld. */
.cm-date.cm-date-inline {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cm-date.cm-date-inline .p-inputtext,
.cm-date.cm-date-inline .ui-inputfield {
    width: 8rem;
}

/* Vorschlagsliste der Autovervollständigung: Ohne Höhenbegrenzung lief sie bei 15 Treffern
   unten aus dem Fenster, und die letzten Einträge waren nicht erreichbar. */
.ui-autocomplete-panel,
.p-autocomplete-panel {
    max-height: 22rem;
    overflow-y: auto !important;
}

/* Kalender-Panel auf feste Breite. Ohne Angabe zog es sich über die ganze Seitenbreite - bei
   einem Feld mit width:100% (Dialoge im Journal) übernimmt das Panel dessen Breite oder mehr.
   Gilt deshalb für jedes Datumsfeld; eingebettete Kalender (inline) gibt es nicht. */
.p-datepicker,
.ui-datepicker {
    width: 20rem !important;
    min-width: 0 !important;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.p-button,
.ui-button {
    height: var(--cm-input-height);
    line-height: 26px;
    padding: 0 10px;
    font-size: var(--cm-input-font-size);
    border-radius: var(--border-radius, 4px);
    min-width: 0;
}

.p-button .p-button-label,
.ui-button .ui-button-text {
    white-space: nowrap;
    position: relative;
    top: -6px;
}

.p-button .pi,
.ui-button .ui-icon {
    font-size: 14px;
    margin-right: 6px;
}

.p-button.p-button-icon-only,
.ui-button.ui-button-icon-only {
    width: 24px;
    height: 24px;
    padding: 0;
}

.p-button + .p-button {
    margin-left: .5rem;
}

/* Abstand zwischen den Neu-Buttons der Aktionsleiste */
#actionForm .p-button {
    margin-right: .5rem;
}

/* Schnellwahl-Buttons der Datumsfilter */
.cm-quick-btn {
    height: var(--cm-input-height);
    line-height: calc(var(--cm-input-height) - 2px);
    font-size: .85rem;
    padding: 0 10px;
    background: var(--cm-quick-bg) !important;
    border: 1px solid var(--cm-quick-border) !important;
    color: var(--cm-text-dim) !important;
    border-radius: var(--border-radius, 4px);
    transition: background 0.2s ease;
}

.cm-quick-btn:hover {
    background: var(--cm-quick-bg-hover) !important;
}

/* =============================================================================
   Dropdowns (PrimeFaces 14 + Arya, UI-Legacy-kompatibel)
   ============================================================================= */
.p-dropdown,
.ui-selectonemenu {
    height: var(--cm-input-height);
    box-sizing: border-box;
}

.p-dropdown .p-dropdown-label,
.ui-selectonemenu-label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--cm-trigger-width) 0 var(--cm-input-pad-x); /* Platz rechts für Caret */
    font-size: var(--cm-input-font-size);
    line-height: 1.2;
    box-sizing: border-box;
    min-height: 0;
}

.p-dropdown .p-dropdown-trigger,
.ui-selectonemenu-trigger {
    width: var(--cm-trigger-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-dropdown .p-dropdown-trigger .pi,
.ui-selectonemenu-trigger .ui-icon {
    font-size: 14px;
    margin: 0;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item,
.ui-selectonemenu-panel .ui-selectonemenu-item {
    padding: 4px var(--cm-input-pad-x);
    line-height: 1.2;
    font-size: var(--cm-input-font-size);
}

.p-dropdown .p-dropdown-label.p-inputtext {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important; /* Flex übernimmt die vertikale Ausrichtung */
}

/* Anwendungseigene Dropdowns (.cm-select): etwas kleinere Schrift und feste Höhe.
   Zusammengeführt aus drei früher getrennten, einander überschreibenden Blöcken -
   übernommen sind die Werte, die sich durchgesetzt hatten. */
.cm-select .p-dropdown-label,
.cm-select .ui-selectonemenu-label {
    display: flex;
    align-items: center;
    height: var(--cm-input-height);
    line-height: normal;
    padding: 0 var(--cm-trigger-width) 0 var(--cm-input-pad-x);
    font-size: 0.90rem;
    box-sizing: border-box;
}

/* Kein Versatz mehr: die Flex-Ausrichtung oben zentriert den Text bereits. Das frueher
   hier stehende "top: -2px" stammt aus dem dunklen Theme und liess den Text im hellen
   schief im Feld sitzen. */
.cm-select .p-dropdown-label > span,
.cm-select .ui-selectonemenu-label > span {
    position: static;
}

.cm-select .p-dropdown-trigger,
.cm-select .ui-selectonemenu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cm-input-height);
}

/* =============================================================================
   Filterzeile
   ============================================================================= */
.cm-filter-label {
    color: var(--cm-text-dim);
    font-weight: 500;
    font-size: .95rem;
    margin-right: .35rem;
}

/* =============================================================================
   Bilanz-Hervorhebungen
   ============================================================================= */
.bilanz-differenz-row td {
    font-weight: 700;
    background-color: var(--cm-balance-bg);
    color: var(--cm-neutral);
}

table tfoot tr.bilanz-sum-row > td {
    background-color: var(--cm-balance-sum-bg);
    color: var(--cm-neutral);
    font-weight: 650;
    border-top: 1px solid var(--cm-balance-border);
    padding-top: 0.40rem;
    padding-bottom: 0.40rem;
}

.group-table tfoot td {
    line-height: 1.2;
    padding: 0.35rem 0.5rem;
}

/* =============================================================================
   Sticky Tabellenkopf
   Kein eigener Scroll-Kontext (doppeltes Scrollen wäre verwirrend): nur die
   Gesamtseite scrollt, sticky wirkt dadurch gegen den Viewport.
   ============================================================================= */
.group-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--cm-sticky-bg);
    color: var(--cm-text-dim);
    border-bottom: 1px solid var(--cm-sticky-border);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   Panel
   ============================================================================= */
.ui-panel-titlebar {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 1rem 1.2rem;
    height: auto;
    line-height: 1.6rem;
}

/* =============================================================================
   AutoComplete (breite Vorschlagsliste)
   ============================================================================= */
.cm-ac-panel-wide {
    min-width: 40rem;
    width: auto;
}

.cm-ac-panel-wide .ui-autocomplete-items {
    white-space: normal;
    word-break: break-word;
}

.cm-ac-panel-wide .ui-autocomplete-item {
    padding: .5rem .75rem;
}

/* =============================================================================
   Analytics
   ============================================================================= */
/* Kompakte TreeTable-Zeilen */
.p-treetable.compact .p-treetable-thead th,
.ui-treetable.compact .ui-treetable-thead th {
    padding: 4px 6px !important;
    line-height: 1.2;
}

.p-treetable.compact .p-treetable-data > tr > td,
.ui-treetable.compact .ui-treetable-data > tr > td {
    padding: 2px 6px !important;
    line-height: 1.1 !important;
}

.p-treetable.compact .cm-cell {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.p-treetable.compact .cm-val {
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
}

.p-treetable.compact .cm-pct {
    font-size: 0.90rem;
    line-height: 1.1;
    white-space: nowrap;
}

/* Prozentfarben (Anzeigeelement .cm-pct) - hellerer Satz als .val-* auf Textflächen */
.cm-pct.val-green {
    color: var(--cm-pos) !important;
    font-weight: 600;
}

.cm-pct.val-red {
    color: var(--cm-neg) !important;
    font-weight: 600;
}

.cm-pct.white {
    color: var(--cm-neutral) !important;
    font-weight: 500;
}

/* Small Multiples (Entwicklung je Gruppe einzeln) */
.cm-small-multiple {
    padding: 0.5rem;
}

.cm-small-multiple h3 {
    margin: 0 0 .35rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Erklärungs-Hinweistext (z.B. bei der Kostenquote) */
.cm-hint {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

/* KPI-Kopfzeile */
.cm-kpi-panel {
    margin-bottom: 1rem;
}

.cm-kpi-col {
    text-align: center;
}

.cm-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.cm-kpi h3 {
    margin: 0 0 .25rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.85;
}

.cm-kpi-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cm-neutral);
}

.cm-kpi-val.val-green {
    color: var(--cm-pos);
}

.cm-kpi-val.val-red {
    color: var(--cm-neg);
}

/* =============================================================================
   Hover-Hervorhebung
   Nur Body-Zeilen, keine RowGroup-Header/Subheader.
   ============================================================================= */
.ui-datatable.compact tbody > tr:hover > td,
.p-datatable.compact .p-datatable-tbody > tr:hover > td,
.ui-treetable.compact .ui-treetable-data > tr:hover > td,
.p-treetable.compact .p-treetable-tbody > tr:hover > td {
    background-color: var(--cm-hover-bg);
    transition: background-color 120ms ease-in-out;
}

/* Gruppenkopf-/Subheader-Zeilen explizit NICHT hervorheben */
.ui-datatable tbody > tr.ui-datatable-subheader:hover > td,
.ui-datatable tbody > tr.ui-rowgroup-header:hover > td,
.p-datatable .p-rowgroup-header:hover > td {
    background-color: transparent;
}

/* Leicht abgerundete Kanten für ein weicheres Gefühl */
.ui-datatable.compact tbody > tr:hover > td:first-child,
.p-datatable.compact .p-datatable-tbody > tr:hover > td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ui-datatable.compact tbody > tr:hover > td:last-child,
.p-datatable.compact .p-datatable-tbody > tr:hover > td:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Aktives Selection-Styling der TreeTable nicht überschreiben */
.ui-treetable .ui-treetable-row.ui-state-highlight > td:hover {
    background-color: inherit;
}

/* =============================================================================
   Erfassungsstand je Konto (Buchungsjournal)
   ============================================================================= */
.cm-account-status td {
    vertical-align: middle;
}

/* =============================================================================
   Weitere Utility-Klassen, ersetzen die häufigsten Inline-Styles im Markup
   ============================================================================= */
.cm-ta-left {
    text-align: left;
}

.cm-ta-right {
    text-align: right;
}

.cm-ta-center {
    text-align: center;
}

/* Die Ausrichtung muss im Tabellenkopf mit mehr Gewicht nachgezogen werden: PrimeFaces richtet
   Spaltenkoepfe ueber eigene, spezifischere Regeln aus, gegen die eine einzelne Klasse aus
   headerStyleClass nicht ankommt - die Ueberschrift stand dann nicht ueber ihrem Inhalt.
   justify-content deckt die Kopfzeilen ab, die PrimeFaces als Flex-Container rendert
   (sortierbare Spalten mit Sortier-Icon). */
body .ui-datatable thead th.cm-ta-left {
    text-align: left;
    justify-content: flex-start;
}

body .ui-datatable thead th.cm-ta-right {
    text-align: right;
    justify-content: flex-end;
}

body .ui-datatable thead th.cm-ta-center {
    text-align: center;
    justify-content: center;
}

.cm-bold {
    font-weight: 700;
}

/* Diagramm-Container in fester Höhe (Analytics) */
.cm-chart {
    width: 100%;
    height: 300px;
}

.cm-chart-sm {
    width: 100%;
    height: 180px;
}

.cm-col-year-center {
    width: 140px;
    text-align: center;
}

.cm-col-amount-right {
    width: 140px;
    text-align: right;
}

.cm-col-narrow-right {
    width: 120px;
    text-align: right;
}

/* Ersatzdatum im Journal (Altbestand ohne Buchungsdatum): deutlich als Nicht-Fachwert
   erkennbar - Farbe allein genügt dafür nicht, deshalb zusaetzlich kursiv. Der Wert
   selbst steht in Klammern (siehe bookings_journal.xhtml). */
.cm-fallback-date {
    color: var(--text-color-secondary, #6c757d);
    font-style: italic;
    opacity: .75;
}

/* =============================================================================
   Hilfeseite
   ============================================================================= */
.cm-help-h {
    margin: 1.2rem 0 .4rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cm-text-group);
}

.cm-help-h:first-child {
    margin-top: 0;
}

#helpForm p,
#helpForm li {
    line-height: 1.55;
    max-width: 70rem;
}

#helpForm ul {
    margin: .4rem 0 .8rem 0;
    padding-left: 1.3rem;
}

/* Ergaenzender Hinweis - ruhig, aber abgesetzt */
.cm-help-note {
    border-left: 3px solid var(--cm-accent-neutral-to);
    padding: .5rem .8rem;
    background: var(--cm-group-bg);
    border-radius: 0 4px 4px 0;
}

/* Warnung - dieselbe Signalfarbe wie hervorgehobene Importzeilen */
.cm-help-warn {
    border-left: 3px solid var(--cm-accent-outcome-from);
    padding: .5rem .8rem;
    background: var(--cm-outcome-bg);
    border-radius: 0 4px 4px 0;
}

/* Jahresauswahl: breit genug, dass die vierstellige Jahreszahl samt Caret passt */
.cm-year-select {
    min-width: 8rem;
}

/* =============================================================================
   Helles Theme (Rivals-Optik)

   Farbsystem des RivalsDataImporter
   (src/main/resources/de/amadee/importer/ui/styles/main.css), damit beide
   Anwendungen zusammengehoerig wirken - aber luftiger umgesetzt: weisse Karten
   mit weichem Schatten und runden Ecken statt flaechiger Rahmen, Markenfarbe als
   Akzent statt als grosser dunkler Balken.

   Die Regeln sind bewusst mit "body" praefixiert. Ohne das gewinnen die
   Theme-eigenen Selektoren (z.B. ".ui-panel .ui-panel-titlebar", Spezifitaet
   0-2-0) gegen einklassige Regeln - die Anpassung bliebe wirkungslos. Genau
   daran ist der erste Versuch gescheitert.

   Rueckkehr zu dunkel: diesen Abschnitt loeschen, in der web.xml wieder
   "arya-blue" eintragen und in template.xhtml, login.xhtml und 2fa.xhtml wieder
   amadee-logo.png statt amadee-logo-dark.png eintragen.
   ============================================================================= */
body {
    font-family: var(--font-family);
    font-size: 13px;
    background: var(--surface-ground);
    color: var(--text-color);
}

/* --- Panels als Karten --- */
body .ui-panel,
body .ui-fieldset,
body .ui-accordion .ui-accordion-content {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(3, 69, 98, 0.05);
    margin-bottom: 1rem;
}

body .ui-panel .ui-panel-titlebar,
body .ui-fieldset .ui-fieldset-legend,
body .ui-accordion .ui-accordion-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--surface-border);
    border-radius: 10px 10px 0 0;
    color: var(--cm-brand);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .85rem 1.1rem;
    line-height: 1.3;
}

body .ui-accordion .ui-accordion-header a,
body .ui-panel .ui-panel-titlebar .ui-icon {
    color: var(--cm-brand);
}

body .ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--cm-brand-tint);
}

body .ui-panel .ui-panel-content {
    padding: 1rem 1.1rem;
}

/* --- Buttons: exakt die Rivals-Systematik. Solide Flaeche mit weisser, fetter
       Schrift für Aktionen; neutrales Grau für alles Uebrige. Bewusst kein
       Pastell-Hintergrund mit farbiger Schrift - das wirkt kraftlos und ist auch
       nicht das, was der Importer macht (siehe dessen .btn-action/.btn-primary). --- */
body .ui-button,
body .p-button {
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    color: #333333;
    border-radius: 4px;
    font-weight: 600;
    padding: 0 14px;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}

body .ui-button:hover,
body .p-button:hover {
    background: #E0E0E0;
    border-color: #BDBDBD;
    color: #222222;
}

/* Bestaetigende Aktionen (Hinzufuegen, Speichern, Uebernehmen): Akzentgruen */
body .p-button.p-button-success,
body .ui-button.p-button-success {
    background: #0B8E78;
    border-color: #0B8E78;
    color: #FFFFFF;
}

body .p-button.p-button-success:hover,
body .ui-button.p-button-success:hover {
    background: #09796A;
    border-color: #09796A;
    color: #FFFFFF;
}

/* Drei gleichwertige Entscheidungen (z.B. "Planung ueberholt?") - untereinander, gleich breit,
   damit keine ueber die Beschriftungslaenge zufaellig groesser wirkt als die andere. */
.cm-choice-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

body .cm-choice-btn.ui-button {
    width: 100%;
    justify-content: center;
}

/* Hauptaktion einer Seite: Markenblau */
body .cm-btn-primary.ui-button,
body .cm-btn-primary.p-button {
    background: #034562;
    border-color: #034562;
    color: #FFFFFF;
}

body .cm-btn-primary.ui-button:hover,
body .cm-btn-primary.p-button:hover {
    background: #377BA0;
    border-color: #377BA0;
    color: #FFFFFF;
}

body .p-button.p-button-danger,
body .ui-button.p-button-danger {
    background: #E53935;
    border-color: #E53935;
    color: #FFFFFF;
}

body .p-button.p-button-danger:hover,
body .ui-button.p-button-danger:hover {
    background: #C62828;
    border-color: #C62828;
    color: #FFFFFF;
}

body .p-button.p-button-warning,
body .ui-button.p-button-warning {
    background: #FB8C00;
    border-color: #FB8C00;
    color: #FFFFFF;
}

body .p-button.p-button-secondary,
body .ui-button.p-button-secondary {
    background: #FFFFFF;
    border-color: #CCCCCC;
    color: #555555;
}

/* Reine Symbol-Knoepfe (Papierkorb, Stift) stehen in jeder Zeile und duerfen sie
   nicht beherrschen - deshalb zurueckgenommen, Farbe erst beim Darueberfahren. */
body .ui-button.ui-button-icon-only,
body .p-button.p-button-icon-only,
body .ui-button.icon-only,
body .p-button.p-button-text,
body .p-button.p-button-rounded.p-button-text {
    background: transparent;
    border: 1px solid transparent;
    color: #777777;
    padding: 0;
}

body .ui-button.ui-button-icon-only:hover,
body .p-button.p-button-icon-only:hover,
body .ui-button.icon-only:hover,
body .p-button.p-button-text:hover {
    background: #F0F0F0;
    border-color: #DDDDDD;
    color: #333333;
}

body .p-button.p-button-danger.p-button-text,
body .p-button.p-button-danger.p-button-rounded.p-button-text {
    background: transparent;
    border-color: transparent;
    color: #B0B0B0;
}

body .p-button.p-button-danger.p-button-text:hover,
body .p-button.p-button-danger.p-button-rounded.p-button-text:hover {
    background: #FFEBEE;
    border-color: #EF9A9A;
    color: #C62828;
}

/* --- Eingabefelder --- */
body .ui-inputfield,
body .p-inputtext,
body .ui-selectonemenu {
    background: #FFFFFF;
    border: 1px solid var(--cm-neutral-border);
    border-radius: 6px;
    color: var(--text-color);
}

body .ui-inputfield:focus,
body .p-inputtext:focus {
    border-color: var(--cm-brand-hover);
    box-shadow: 0 0 0 3px rgba(55, 123, 160, 0.15);
    outline: none;
}

/* --- Tabellen: feine Linien statt Gitter --- */
body .ui-datatable thead th,
body .group-table thead th {
    background: #F2F6F8;
    color: #47555F;
    font-weight: 600;
    border-bottom: 1px solid var(--surface-border);
}

body .ui-datatable tbody tr td,
body .ui-treetable .ui-treetable-data > tr > td {
    border-bottom: 1px solid #EEF2F5;
}

body .ui-datatable tbody tr:hover > td {
    background: var(--cm-hover-bg);
}

/* Zeilen-Hervorhebung in den Uebersichts-Tabellen. Die sind keine PrimeFaces-DataTables,
   sondern normale <table> mit ui:repeat - die .ui-datatable-Regeln greifen dort also nicht.
   Gruppenzeilen haben ihre eigene, kraeftigere Hervorhebung und bleiben ausgenommen. */
body .group-table tbody tr:hover > td {
    background-color: var(--cm-hover-bg);
}

body .group-table tbody tr.group-row:hover > td {
    background-color: var(--cm-group-bg-hover);
}

/* Die Eingabefelder in der Zeile sollen den Hover mittragen, sonst wirkt die Zeile zerrissen */
body .group-table tbody tr:hover .ui-inputfield {
    border-color: #C3CBD3;
}

/* Login-/2FA-Karte: die Ueberschrift steht mittig ueber dem zentrierten Logo und
   Formular - linksbuendig wirkt sie dort verrutscht. Nur diese Karte, nicht alle Panels. */
body .login-card > .ui-panel-titlebar {
    text-align: center;
    justify-content: center;
}

/* Login-Button: fuellt die Kartenbreite. Ohne diese Regel klebt das Symbol links
   und die Beschriftung steht in der Mitte - beides soll als Einheit zentriert stehen. */
body .login-card .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 34px;
    line-height: 1;
}

body .login-card .ui-button .ui-button-text,
body .login-card .ui-button .p-button-label {
    position: static;
    top: auto;
}

body .login-card .ui-button .ui-icon,
body .login-card .ui-button .pi {
    margin-right: 0;
}

/* =============================================================================
   Bilanz: drei umrahmte Bloecke nebeneinander
   ============================================================================= */
.cm-balance-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.cm-balance-block {
    flex: 1 1 320px;
    min-width: 300px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: .85rem 1rem 1rem 1rem;
    background: var(--surface-card);
}

.cm-balance-block-title {
    margin: 0 0 .6rem 0;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--surface-border);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.cm-balance-table {
    width: 100%;
    table-layout: auto;
}

.cm-balance-table td {
    padding: .3rem .25rem;
    vertical-align: middle;
}

.cm-balance-table td:first-child {
    white-space: normal;
}

/* Betragsspalte schmal halten, damit die Bezeichnung den Platz bekommt */
.cm-balance-table td.num-right {
    width: 11rem;
}

.cm-balance-table tfoot td {
    padding-top: .5rem;
    border-top: 1px solid var(--surface-border);
}

/* =============================================================================
   Filterleiste des Buchungsjournals
   ============================================================================= */
.cm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
}

.cm-filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cm-filter-group-end {
    margin-left: auto;
    align-self: flex-end;
}

.cm-filter-inline {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.cm-filter-summary {
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--surface-border);
    font-size: .92rem;
    color: var(--text-color-secondary);
}

/* "Neue Ausgabe": bewusst kein Orange (Warnfarbe - eine Ausgabe zu erfassen ist keine
   Warnung) und nicht das Signalrot des Loeschen-Knopfes (#E53935). Stattdessen ein stark
   entsaettigtes Altrot: liest sich als Gegenstück zum gruenen Einnahme-Knopf, ohne zu
   schreien oder mit einer Warnung verwechselt zu werden. */
body .cm-btn-outcome.ui-button,
body .cm-btn-outcome.p-button {
    background: #AA5854;
    border-color: #AA5854;
    color: #FFFFFF;
}

body .cm-btn-outcome.ui-button:hover,
body .cm-btn-outcome.p-button:hover {
    background: #934A46;
    border-color: #934A46;
    color: #FFFFFF;
}

/* Eingabefelder in der Bilanz kompakt halten: links stehen Felder, rechts nur Text -
   ohne das sind die linken Zeilen sichtbar hoeher und die Bloecke laufen auseinander. */
body .cm-balance-table .ui-inputfield,
body .cm-balance-table .ui-inputnumber .ui-inputfield {
    height: 24px !important;
    line-height: 22px !important;
    padding: 0 .5rem !important;
    font-size: .95rem !important;
}

body .cm-balance-table td {
    padding-top: .18rem;
    padding-bottom: .18rem;
    height: 30px;
}

/* Kontoauszug-Import: mehrfach identische Eintraege innerhalb eines Auszugs. Kein Fehler -
   deshalb dezenter als die Warnfarbe für nicht zugeordnete Zeilen, aber sichtbar. */
.cm-row-duplicate > td {
    background-color: #EEF4F8 !important;
    box-shadow: inset 3px 0 0 0 #7FA9D8;
}

/* "Datei auswaehlen" der Upload-Felder ist eine bestaetigende Aktion wie Hinzufuegen oder
   Speichern - deshalb dieselbe Akzentfarbe statt des neutralen Grau, das PrimeFaces vergibt. */
body .ui-fileupload-choose,
body .ui-fileupload .ui-fileupload-choose.ui-button {
    background: #0B8E78;
    border-color: #0B8E78;
    color: #FFFFFF;
}

body .ui-fileupload-choose:hover,
body .ui-fileupload .ui-fileupload-choose.ui-button:hover {
    background: #09796A;
    border-color: #09796A;
    color: #FFFFFF;
}

body .ui-fileupload-choose .ui-button-text,
body .ui-fileupload-choose .ui-icon {
    color: #FFFFFF;
}

/* Kontoauszug-Import: Datum schmal, Ausgabeart breit - die Bezeichnungen sind lang
   ("Gebaeude - Reinigung ..."), das Datum braucht dagegen kaum Platz. */
.cm-col-date {
    width: 5.5rem;
}

.cm-col-type {
    width: 44rem;
}

/* Der Verwendungszweck einer Bankbuchung passt selten in eine Zeile - breiter als vorher,
   auf Kosten von .cm-col-date, das kaum Platz braucht. */
.cm-col-purpose {
    width: 28rem;
}

/* Notiz deutlich schmaler als frueher (eine feste Breite gab es vorher gar nicht - die
   Spalte nahm sich, was von den anderen uebrig blieb). Der so freiwerdende Platz geht an
   .cm-col-type: dort muss der Text immer vollstaendig lesbar sein, hier reicht ein kurzes
   Stichwort. */
.cm-col-note {
    width: 7rem;
}

/* Gegenkonto hatte bislang ebenfalls keine feste Breite und schluckte deshalb bei
   table-layout:fixed jeden Platz, der bei .cm-col-note frei wurde - nicht .cm-col-type,
   obwohl genau dafür gedacht. Mit eigener Breite bleibt der gewonnene Platz dort, wo er
   hingehoert. */
.cm-col-counterparty {
    width: 16rem;
}

/* Beschriftungen in Auswahlfeldern nicht abschneiden, sondern das Feld ausnutzen */
body .ui-datatable .ui-selectonemenu,
body .ui-datatable .ui-selectonemenu-label {
    width: 100%;
    max-width: 100%;
}

/* Lange Bezeichnungen duerfen in jeder Tabelle umbrechen statt abgeschnitten zu werden -
   die Breite allein reicht bei sehr langen Eintraegen nicht, und ohne diese Regel
   verschwindet der Rest des Texts spurlos (kein Tooltip, keine Auslassungspunkte). Nur
   innerhalb von Tabellen ueberschrieben: die feste Zeilenhoehe der Auswahlfelder ausserhalb
   (Filter, Dialoge) ist bewusst. */
body .ui-datatable .ui-selectonemenu,
body .ui-datatable .p-dropdown {
    height: auto;
    min-height: var(--cm-input-height);
}

body .ui-datatable .ui-selectonemenu-label,
body .ui-datatable .p-dropdown-label {
    height: auto;
    min-height: var(--cm-input-height);
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Text in Eingabe- und Auswahlfeldern sauber mittig - ohne das wirken die Zeilen versetzt */
body .ui-datatable .ui-selectonemenu-label,
body .ui-datatable .ui-inputfield {
    display: flex;
    align-items: center;
    line-height: normal;
}

/* =============================================================================
   Liquiditätsreserve in der Kopfzeile der Planungsseite
   ============================================================================= */
.cm-overview-head {
    justify-content: space-between;
    width: 100%;
}

.cm-runway {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-left: auto;
    padding: .35rem .9rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--cm-brand-tint);
}

.cm-runway-label {
    font-weight: 600;
    color: var(--cm-brand);
}

.cm-runway-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cm-brand);
}

.cm-runway-unit {
    font-weight: 600;
    color: var(--cm-brand);
}

.cm-runway-hint {
    color: var(--text-color-secondary);
    font-size: .85rem;
}

/* Warte-Hinweis: Symbol und Text nebeneinander in einer Zeile */
.cm-ajax-status-body {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.4rem;
    white-space: nowrap;
}

.cm-ajax-status-body .pi {
    font-size: 1.6rem;
}

/* =============================================================================
   Startseite: Begruessung und Kennzahlen
   ============================================================================= */
.cm-hero {
    background: linear-gradient(135deg, #034562 0%, #0A5B7D 55%, #0B8E78 100%);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(3, 69, 98, 0.18);
}

.cm-hero-greeting h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #FFFFFF;
}

.cm-hero-date {
    margin-top: .2rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.85);
}

.cm-hero-kw {
    margin-left: .6rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: .8rem;
}

.cm-hero-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1.2rem;
}

.cm-tile {
    flex: 1 1 200px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cm-tile-label {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.8);
}

/* Die Wertefarben aus dem Rest der Anwendung sind für hellen Grund gedacht und wären
   hier kaum lesbar - auf dem dunklen Verlauf deshalb eigene, hellere Toene. */
.cm-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
}

.cm-tile .cm-tile-value.val-green {
    color: #8BE0B4;
}

.cm-tile .cm-tile-value.val-red {
    color: #FFB4AC;
}

.cm-tile-hint {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}

/* Knoepfe auf dem dunklen Verlauf: heller Rahmen statt Flaeche */
body .cm-hero-actions .ui-button {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

body .cm-hero-actions .ui-button:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
}

body .cm-hero-actions .ui-button .ui-button-text,
body .cm-hero-actions .ui-button .ui-icon {
    color: #FFFFFF;
}

/* Kontoauszug-Import: Zeilen aus einer aufgeteilten Bankbuchung */
.cm-row-split > td {
    background-color: #F3F8F6 !important;
    box-shadow: inset 3px 0 0 0 #7EC2AC;
}

/* Zeilen, zu denen es bereits eine Handbuchung geben koennte - deutlicher als die
   uebrigen Hinweise, weil hier eine Doppelbuchung droht. */
.cm-row-manual-duplicate > td {
    background-color: #FFF8E1 !important;
    box-shadow: inset 3px 0 0 0 #FB8C00;
}

.cm-row-note {
    margin-top: .25rem;
    font-size: .82rem;
    color: var(--text-color-secondary);
    line-height: 1.3;
}

.cm-row-note-warn {
    color: #B35300;
    font-weight: 600;
}

/* Herkunft der vorgeschlagenen Ausgabeart. Absichtlich klein und unter dem Auswahlfeld:
   Es geht um "muss ich hier hinsehen?", nicht um den Wert selbst. Gruen heisst bestaetigt,
   Grau geraten-aber-plausibel, Warnton geraten-und-duenn. */
/* Offene Einnahmen zu einem Zahlungseingang: Ankreuzbox links, Bezeichnung dazwischen,
   Betrag rechts auf einer Flucht. Vorher lief alles im rechtsbuendigen Fliesstext mit,
   dadurch stand jede Ankreuzbox woanders. */
.cm-cand {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

.cm-cand-label {
    flex: 1 1 auto;
    text-align: left;
}

.cm-cand-amount {
    flex: 0 0 auto;
    min-width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-src-box {
    padding: .35rem .45rem .3rem;
    border-left: 4px solid transparent;
    border-radius: 3px;
}

.cm-src-box.cm-src-fixed {
    background: #E6F4EF;
    border-left-color: #0B8E78;
}

.cm-src-box.cm-src-history {
    background: #EEF2F6;
    border-left-color: #93A3B0;
}

.cm-src-box.cm-src-weak {
    background: #FFF0DC;
    border-left-color: #E08A00;
}

.cm-src-box.cm-src-none {
    background: #FCE8E8;
    border-left-color: #E53935;
}

.cm-src {
    margin-top: .2rem;
    font-size: .75rem;
    line-height: 1.2;
}

.cm-src-box.cm-src-fixed .cm-src {
    color: #08705E;
    font-weight: 600;
}

.cm-src-box.cm-src-history .cm-src {
    color: #566673;
}

.cm-src-box.cm-src-weak .cm-src {
    color: #A34C00;
    font-weight: 600;
}

/* Betrag passt zu keinem hinterlegten erwarteten Wert - unabhängig von der Box-Farbe der
   Zuordnung selbst (auch bei "Feste Zuordnung"), denn die prueft nur die Identitaet, nie
   den Betrag. Rot statt der Box-Farbe: In der gruenen Box einer festen Zuordnung ging der
   Hinweis sonst als weitere Bestaetigungszeile durch - genau dort muss er aber auffallen.
   Die Selektoren sind absichtlich spezifischer als `.cm-src-box.cm-src-fixed .cm-src`,
   sonst gewinnt deren Farbe. */
.cm-src.cm-src-mismatch,
.cm-src-box .cm-src.cm-src-mismatch {
    color: #C62828;
    font-weight: 700;
}

/* Erstattung: ein seltener Sonderfall. Der Knopf steht in jeder Zeile und darf sie
   deshalb nicht beherrschen - zurueckgenommen, Farbe erst beim Darueberfahren. */
body .cm-act-refund.ui-button,
body .cm-act-refund.ui-button.ui-state-default {
    background: transparent;
    border-color: transparent;
    color: #90A4AE;
}

body .cm-act-refund.ui-button:hover {
    background: #E6F4EF;
    border-color: #0B8E78;
    color: #0B8E78;
}

.cm-src-note {
    font-size: .75rem;
    color: #08705E;
    font-weight: 600;
}

.cm-src-summary {
    margin-bottom: .6rem;
    padding: .45rem .7rem;
    border-left: 3px solid #B35300;
    background: #FFF6EC;
    color: #7A3A00;
    font-size: .85rem;
}

/* Status "Pruefen": Aufforderung, kein Fehler - deshalb Warnton statt Rot */
.cm-status-check {
    color: #B35300;
    font-weight: 600;
}

/* Zuordnungshilfe: Beispiele aus bereits gebuchten Ausgaben derselben Art */
.cm-examples {
    margin-top: .3rem;
    min-height: 1.1rem;
    font-size: .82rem;
    color: var(--text-color-secondary);
    line-height: 1.35;
}

/* =============================================================================
   Waagerechte Scrollleiste für breite Tabellen

   Das Buchungsjournal ist breiter als das Fenster. Seine eigene Scrollleiste sitzt am
   unteren Ende aller 50 Zeilen - also weit ausserhalb des Sichtbereichs.

   Ein Scrollkasten mit begrenzter Hoehe loest das nicht: Die Tabelle beginnt erst nach
   Kontostand, Schaltflaechen, Filterleiste und Blaetterleiste, sodass die Unterkante des
   Kastens trotzdem unterhalb des Fensterrands liegt - und man haette zusaetzlich einen
   zweiten senkrechten Rollbalken neben dem der Seite.

   Stattdessen eine zweite, leere Scrollleiste am unteren Fensterrand, deren Position mit
   der Tabelle synchron gehalten wird. Die Seite scrollt weiterhin als Ganzes.

   position:fixed und nicht sticky: Ein sticky-Element klebt nur, solange sein umgebender
   Block noch Platz darunter bietet. Die Leiste ist das letzte Element im Formular - dort
   gibt es keinen Platz mehr, sie blieb einfach am Tabellenende stehen. Links und Breite
   setzt das Skript in der Seite, damit der Rollweg exakt dem der Tabelle entspricht.
   ============================================================================= */
/* Kein eigenes overflow: Die DataTable scrollt in ihrem eigenen
   .ui-datatable-tablewrapper. Dieser Rahmen dient nur noch als Anker für die Regeln
   unten. */
.cm-table-scroll {
    position: relative;
}

.cm-hscroll {
    position: fixed;
    bottom: 0;
    z-index: 50;
    overflow-x: auto;
    overflow-y: hidden;
    /* Ohne feste Hoehe wäre der Kasten so hoch wie sein Inhalt - und das ist der 1 Pixel
       hohe Platzhalter darunter. In einen 1 Pixel hohen Kasten passt keine Rollleiste, sie
       war deshalb vorhanden, aber unsichtbar. Der Wert deckt die Leistenhoehe unter Windows
       (rund 17 px) samt Oberkante ab. */
    height: 19px;
    box-sizing: border-box;
    /* Die Leiste liegt ueber dem Seiteninhalt - ohne eigenen Hintergrund schiene er durch. */
    background: var(--surface-a, #ffffff);
    border-top: 1px solid var(--surface-border, #dee2e6);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .08);
}

/* Traegt nur die Breite; sichtbar ist allein der Rollbalken darunter. */
.cm-hscroll-inner {
    height: 1px;
}

/* =============================================================================
   Aktionsspalte am rechten Rand andocken

   Bearbeiten/Loeschen standen ganz rechts in einer Tabelle, die doppelt so breit ist
   wie das Fenster - für jede Zeile erst quer scrollen zu muessen, macht die haeufigste
   Aktion zur muehsamsten. Die Spalte bleibt jetzt beim waagerechten Scrollen stehen.
   ============================================================================= */
.cm-table-scroll .ui-datatable-tablewrapper thead th:last-child,
.cm-table-scroll .ui-datatable-tablewrapper tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    border-left: 1px solid var(--surface-border, #E4E9ED);
    /* Schattenkante nach links: macht sichtbar, dass die Spalte ueber dem Inhalt liegt
       und dort nicht etwa Daten fehlen. */
    box-shadow: -5px 0 6px -5px rgba(0, 0, 0, .18);
}

/* Erbt die Zeilenfarbe - damit stimmt der Hintergrund auch beim Ueberfahren der Zeile,
   ohne dass jede Zustandsfarbe einzeln nachgezogen werden muss. */
.cm-table-scroll .ui-datatable-tablewrapper tbody td:last-child {
    background-color: inherit;
}

.cm-table-scroll .ui-datatable-tablewrapper thead th:last-child {
    background-color: #F2F6F8;
}

/* =============================================================================
   Aktionsschaltflaechen im Buchungsjournal

   Vorher waren es reine Text-Schaltflaechen: drei graue Symbole ohne Umrandung, bei
   denen Loeschen genauso aussah wie Bearbeiten. Jetzt umrandet und in der Farbe ihrer
   Bedeutung - Rot bleibt dem Loeschen vorbehalten.

   PrimeFaces' eigene Modifikatoren (p-button-outlined, p-button-danger) greifen hier
   nicht: Die Schaltflaechen werden mit den Legacy-Klassen (ui-button ui-state-default)
   gerendert, gegen die die p-Klassen nicht ankommen. Deshalb eigene Klassen, und
   ui-state-default im Selektor, weil dessen Regel sonst die Rahmenfarbe zurueckdreht.
   ============================================================================= */
body .cm-act-btn.ui-button {
    background: transparent;
}

body .cm-act-btn.ui-button.ui-state-default {
    border-width: 1px;
    border-style: solid;
}

body .cm-act-edit.ui-button.ui-state-default {
    border-color: #0093DD;
}

body .cm-act-edit.ui-button {
    color: #0093DD;
}

body .cm-act-edit.ui-button:hover {
    background: rgba(0, 147, 221, .12);
    color: #0093DD;
}

body .cm-act-delete.ui-button.ui-state-default {
    border-color: #E53935;
}

body .cm-act-delete.ui-button {
    color: #E53935;
}

body .cm-act-delete.ui-button:hover {
    background: rgba(229, 57, 53, .12);
    color: #E53935;
}

/* Speichern in den Stammdatenlisten - dasselbe Gruen wie die Erfolgs-Schaltflaechen. */
body .cm-act-save.ui-button.ui-state-default {
    border-color: #0B8E78;
}

body .cm-act-save.ui-button {
    color: #0B8E78;
}

body .cm-act-save.ui-button:hover {
    background: rgba(11, 142, 120, .12);
    color: #0B8E78;
}

/* Neutral: das Setzen des Buchungsjahrs ist weder Warnung noch Hauptaktion. */
body .cm-act-plan.ui-button.ui-state-default {
    border-color: #7A8A94;
}

body .cm-act-plan.ui-button {
    color: #55636B;
}

body .cm-act-plan.ui-button:hover {
    background: rgba(122, 138, 148, .15);
    color: #55636B;
}

/* =============================================================================
   Blaetterleiste

   PrimeFaces gibt den Seitenschaltflaechen dieselbe Groesse wie normalen Buttons -
   ueber einer dichten Tabelle wirkt die Leiste dadurch wuchtiger als der Inhalt, den
   sie blaettert. Hier durchgehend eine Stufe kleiner und ruhiger.
   ============================================================================= */
body .ui-paginator,
body .ui-datatable .ui-paginator {
    padding: .25rem .5rem;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    gap: .15rem;
}

body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last,
body .ui-paginator .ui-paginator-page {
    min-width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1.75rem;
}

/* Das Auswahlfeld ist ein natives select. Es erbt das Innenabstand-Muster der
   Eingabefelder (8 px ringsum) - bei 1.75rem Hoehe bleibt für die Zeile zu wenig Platz
   und die Zahl rutschte nach unten aus der Mitte. Deshalb hier nur seitlicher Abstand. */
body .ui-paginator .ui-paginator-rpp-options,
body .ui-paginator .ui-paginator-jtp-select {
    height: 1.75rem;
    min-width: 4rem;
    font-size: .85rem;
    padding: 0 .4rem;
    line-height: normal;
    box-sizing: border-box;
}

body .ui-paginator .ui-paginator-current {
    font-size: .85rem;
    color: var(--text-color-secondary, #6c757d);
    margin-left: .75rem;
}

/* Die Pfeilsymbole sassen eine Spur zu gross in den kleineren Schaltflaechen. */
body .ui-paginator .ui-icon,
body .ui-paginator .pi {
    font-size: .8rem;
}

/* Fragezeichen hinter einem Befund: Verweis in die Hilfe. Bewusst unauffaellig - es soll
   erreichbar sein, ohne die Zeile zu dominieren. */
.cm-help-link {
    margin-left: .35rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-color-secondary, #6c757d);
}

.cm-help-link:hover {
    color: var(--cm-brand, #034562);
}

/* Lange Zellinhalte (z.B. Notizen im Buchungsjournal): eine Zeile mit
   Auslassungspunkten. Der vollstaendige Text steckt im title-Attribut und
   erscheint beim Darueberfahren mit der Maus. */
.cm-cell-clip {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Ignorieren" und "Fest merken" in der Kontoauszug-Vorschau sind Schaltflaechen und
   keine Ankreuzfelder (Begründung in statement_import.xhtml). Damit der Unterschied
   niemandem auffaellt, wird ihnen hier die Knopf-Optik wieder abgenommen. */
body .cm-check-toggle.ui-button,
body .cm-check-toggle.ui-button.ui-state-default {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: .15rem .3rem;
    color: #8a8a8a;
}

body .cm-check-toggle.ui-button:hover {
    background: rgba(0, 0, 0, .06);
    color: #333;
}

body .cm-check-toggle .ui-button-icon {
    font-size: 1.1rem;
    margin: 0;
}

/* Angehakt: dieselbe Akzentfarbe wie die uebrigen Ankreuzfelder. */
body .cm-check-toggle.cm-check-on.ui-button {
    color: #0093DD;
}

/* Übertrag zwischen eigenen Konten: keine Ausgabe, aber auch kein uebergangener
   Vorgang - eine eigene, ruhige Faerbung, damit beim Durchsehen sofort klar ist, dass
   hier nichts gebucht wird. */
.cm-row-transfer > td {
    background: #f3f6fb;
}

/* =============================================================================
   Grobplanung: eine Zeile pro Schaetzung
   ============================================================================= */

/* Bewusst nowrap: Mit dem Jahr und dem Kunden wurde die Zeile so breit, dass der
   Loeschen-Knopf umbrach und unter der naechsten Zeile zu stehen schien - man loescht
   dann leicht die falsche. */
.rough-plan-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.rough-plan-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body .rough-plan-label { width: 220px; }
body .rough-plan-amount { width: 130px; }
body .rough-plan-year { width: 96px; }
body .rough-plan-customer { width: 190px; }

/* "unsicher" an der Grobplanungs-Zeile: Haken samt Beschriftung ohne Umbruch, die Zeile selbst
   kursiv und blasser - eine Hoffnung soll nicht aussehen wie ein laufender Vertrag. */
body .rough-plan-uncertain-flag { white-space: nowrap; }
body .rough-plan-uncertain .rough-plan-label input,
body .rough-plan-uncertain .rough-plan-amount input {
    font-style: italic;
    color: #6c757d;
}

/* Zeilen "unsicher" in der Bilanz: kursiv und blasser als die sichere Rechnung - sie zählen in
   den Summen nicht mit und sollen auch nicht danach aussehen. */
.cm-balance-table tr.cm-balance-uncertain-row td {
    font-style: italic;
    opacity: 0.8;
}

/* PrimeFaces setzt die Beschriftung eines Auswahlfeldes ohne feste Zeilenhoehe - neben
   einem Eingabefeld sass sie dadurch sichtbar zu tief. */
body .rough-plan-row .ui-selectonemenu {
    display: inline-flex;
    align-items: center;
}

body .rough-plan-row .ui-selectonemenu .ui-selectonemenu-label {
    display: flex;
    align-items: center;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}

/* =============================================================================
   Uebersicht: Einnahmen gruen, Ausgaben rot - schon an der Kopfzeile erkennbar
   ============================================================================= */

body .income-panel > .ui-panel-titlebar {
    background: #d9f0e1;
    border-bottom: 1px solid #a8d8bc;
}

body .income-panel > .ui-panel-titlebar .ui-panel-title {
    color: #1d6b42;
}

body .outcome-panel > .ui-panel-titlebar {
    background: #fbdedd;
    border-bottom: 1px solid #f0b5b2;
}

body .outcome-panel > .ui-panel-titlebar .ui-panel-title {
    color: #9b2c27;
}

/* Die Buchungskontrolle steht jetzt ueber dem Buchungsjournal und nicht mehr in der
   Bilanz-Spaltengruppe - dort brauchte sie keine eigene Breite, hier schon. */
body .cm-booking-control .cm-balance-table {
    max-width: 560px;
}

/* =============================================================================
   Growl-Meldungen
   ============================================================================= */
/* Der Kasten waechst mit dem Text, statt ihn in eine feste Breite von 301px zu pressen.
   Anlass sind die Dateinamen der Kontoauszuege
   ("12 konto 01_07_2026-31_07_2026_C52_DE79478601250131366600_EUR.xml") - auf drei Zeilen
   umgebrochen sind sie kaum wiederzuerkennen.

   Bewusst ueber die Breite geloest und nicht per white-space: nowrap: Das galt für jede
   Meldung, und die langen Sammelmeldungen des Kontoauszug-Imports wären dann einzeilig
   abgeschnitten worden. So bricht weiterhin alles um, was breiter als die Obergrenze ist -
   nur eben spaeter. */
body .ui-growl {
    width: auto;
    max-width: min(46rem, calc(100vw - 2.5rem));
    /* Ueber dem Overlay eines offenen p:dialog - sonst landet die Meldung sichtbar dahinter,
       wenn ein Dialog beim Ausloesen der Aktion noch offen ist (z.B. E-Mail-Entwurf-Dialog). */
    z-index: 100001 !important;
}

/* Untergrenze wie bisher, damit kurze Meldungen ("Gespeichert.") keine Miniaturkaesten werden. */
body .ui-growl-item-container {
    min-width: 301px;
}

/* Ohne float und feste Breite richtet sich der Textblock nach dem Inhalt; der linke Abstand
   haelt den Platz des 32px-Symbols frei, das weiterhin links schwebt. */
body .ui-growl-message {
    width: auto;
    float: none;
    margin-left: 2.75rem;
}

/* =========================================================
   Planungs-Posten der Ausgaben
   ========================================================= */

/* Der Planbetrag ist kein Eingabefeld mehr, sondern der Weg zu seiner Aufstellung.
   Er soll trotzdem wie eine Zahl in der Spalte stehen und nicht wie ein Link im Fliesstext -
   deshalb rechtsbuendig, in Zahlenbreite, und die Unterstreichung erst beim Ueberfahren. */
.cm-plan-link {
    display: inline-block;
    width: 100%;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    padding: .15rem .25rem;
    border-radius: 3px;
}

/* Der Planbetrag ist ein Link, wird aber wie jede andere Zahl der Uebersicht eingefaerbt:
   negativ rot, positiv gruen. Die val-*-Klassen haengen bereits an ihm, kaemen hier aber
   nicht durch - sie stehen weiter oben im Stylesheet und haben dieselbe Spezifitaet, und
   ein <a> bringt ausserdem seine eigene Linkfarbe mit. Deshalb hier nochmal, spezifischer. */
.cm-plan-link.val-red {
    color: var(--cm-neg-strong);
    font-weight: 600;
}

.cm-plan-link.val-green {
    color: var(--cm-pos-strong);
    font-weight: 600;
}

/* Nichts geplant: kein Wert, also keine Wertefarbe. */
.cm-plan-link.val-white {
    color: inherit;
}

.cm-plan-link:hover {
    text-decoration: underline;
    background: rgba(0, 0, 0, .04);
}

/* Jahreswahl im Kopf des Monats-Pickers. Die Regel in Zeile 559 gibt jedem Eingabefeld
   width:100% - auch dem kleinen Jahresfeld zwischen den Blaetter-Pfeilen, das sich dadurch
   unter sie schiebt. Das Panel hängt je nach Lage ausserhalb des Dialogs im DOM, deshalb
   hängt diese Regel am Picker selbst und nicht an .cm-plan-dialog. */
.ui-datepicker-header input,
.ui-datepicker-header select,
.ui-datepicker-header .ui-inputfield,
.p-datepicker-header input,
.p-datepicker-header select,
.p-datepicker-header .p-inputtext {
    width: auto;
    max-width: 6rem;
    margin: 0 .4rem;
    text-align: center;
}

/* Mehrzeilige Notiz. Ohne diese Regel zieht .ui-inputfield (Zeile 559) auch eine Textarea auf
   28px feste Hoehe mit 26px Zeilenhoehe - rows="3" bliebe wirkungslos und das Feld sieht aus
   wie ein einzeiliges. */
.cm-plan-dialog textarea.ui-inputfield,
.cm-plan-dialog textarea.p-inputtext {
    height: auto;
    line-height: 1.35;
    padding: 6px var(--cm-input-pad-x);
    resize: vertical;
}

/* Der Text im Dropdown sass zu tief: Das Label traegt bei PrimeFaces auch die Klasse
   ui-inputfield, und die setzt line-height: 26px bei 28px Hoehe und 2px Innenabstand. Eine
   feste Zeilenhoehe schiebt den Text nach unten, statt ihn zu zentrieren. Hier deshalb ueber
   die Flexbox mittig, unabhängig von der Zeilenhoehe.

   Bewusst nur in den Planungs-Dialogen und nicht projektweit: Die Regel in Zeile 559 gilt fuer
   jedes Eingabefeld der Anwendung, und was sie anderswo traegt, ist von hier aus nicht zu
   ueberblicken. */
.cm-plan-dialog .ui-selectonemenu-label,
.cm-plan-dialog .p-dropdown-label {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
}

/* Kopfzeile des Planungs-Dialogs: Name der Ausgabeart links, "Posten hinzufuegen" rechts.
   Der Knopf gehoert nach oben zur Liste, nicht unter ein Formular - er legt etwas an, das
   in der Liste erscheint. */
.cm-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}

.cm-plan-head .cm-plan-title {
    margin: 0;
}

/* Notiz im Bearbeiten-Dialog: Label darueber, Feld ueber die volle Breite. */
.cm-plan-note {
    margin-top: .75rem;
}

.cm-plan-note label {
    display: block;
    margin-bottom: .3rem;
}

/* Knopfzeile am Fuss der Bearbeiten-Dialoge. */
.cm-plan-actions {
    margin-top: .9rem;
    display: flex;
    justify-content: flex-end;
}

.cm-plan-hint {
    display: block;
    margin-top: .5rem;
}

/* Der Name der Ausgabeart steht im Formular, nicht im Dialog-Header - der liegt ausserhalb
   und wird beim Ajax-Update nicht mitgezeichnet. */
.cm-plan-title {
    margin: 0 0 .6rem 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.cm-plan-dialog .cm-plan-items {
    margin-bottom: .5rem;
}

/* Summenblock unter der Aufstellung: vier Spalten, damit Plan und Folgejahr nebeneinander
   stehen und nicht untereinander gesucht werden muessen. */
.cm-plan-totals {
    width: 100%;
    margin-top: .25rem;
}

.cm-plan-totals td {
    padding: .2rem .4rem;
}

.cm-plan-edit {
    background: rgba(0, 0, 0, .02);
}

/* Hinweis unter einem Eingabefeld: erklärt, was ein leeres Feld bedeutet.
   display:block mit voller Breite ist der Punkt - als inline-Element zieht ein solcher Satz
   den Dialog auf seine Textlänge auf, und p-fluid streckt dann jedes Feld darin mit. */
.cm-field-hint {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--text-color-secondary, #6c757d);
    white-space: normal;
}

/* Planbetrag, der gerechnet und nicht gepflegt wird (Umsatzsteuer-Zeile). Sieht aus wie die
   anderen Planzahlen, ist aber bewusst kein Link - es gibt nichts zu öffnen. Der gepunktete
   Unterstrich zeigt, dass am Mauszeiger eine Erklärung hängt. */
.cm-plan-computed {
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Planungsposten, dessen Gültigkeit vor dem angezeigten Jahr endete. Er wird nur auf Wunsch
   eingeblendet und dann abgesetzt, damit die 0,00 € in den Jahresspalten nicht wie ein
   Versäumnis aussehen. Künftige Posten bleiben normal dargestellt - sie sind kein Sonderfall,
   sondern der Zweck der Planung. */
.cm-plan-item-expired > td {
    opacity: .55;
    font-style: italic;
}

/* Die Zeile darunter, die sie ein- und ausblendet. Dezent, weil sie im Normalfall nichts
   Wichtiges ankündigt. */
.cm-plan-expired-hint {
    margin-top: 6px;
    font-size: .8rem;
}

.cm-plan-expired-hint a {
    color: var(--text-color-secondary, #6c757d);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.cm-plan-expired-hint a:hover {
    color: var(--primary-color, #0b5c8a);
}

/* Hinweis an einer Import-Zeile, deren Betrag vom Planbetrag abweicht. Warnfarbe, aber keine
   Sperre: Eine Abweichung kann eine Nachzahlung sein, und eine Pruefung, die den Import
   verhindert, wird umgangen statt gelesen. */
.cm-plan-deviation {
    margin-top: 4px;
    padding: 4px 6px;
    border-left: 3px solid #d98207;
    background: rgba(217, 130, 7, .08);
    font-size: .8rem;
    line-height: 1.4;
}

.cm-plan-deviation .pi {
    color: #d98207;
}

.cm-plan-deviation-btn {
    display: block;
    margin-top: 2px;
    padding: 0;
    font-size: .8rem;
}

/* Planungsposten mit negativem Betrag - eine Erstattung, die den Plan mindert. Im Dialog
   stehen Kosten positiv da; ein Minus fällt dort aus der Darstellung und sähe ohne
   Kennzeichnung nach Vorzeichenfehler aus. Grün, weil es die Kosten senkt. */
.cm-plan-item-credit > td {
    color: #1a7f37;
}

/* =============================================================================
   Bemerkungsspalte der Ausgaben-Übersicht füllt die Restbreite
   ============================================================================= */
/* Die Tabelle trug bisher keine Breite. Bei table-layout:fixed heisst das: Sie wird so breit
   wie die Summe ihrer Spalten - mit der 50rem breiten Notizspalte waren das rund 125rem, also
   deutlich mehr als der Bildschirm. Die Bemerkung lief damit rechts aus dem Bild.

   Jetzt bekommt die Tabelle die volle Breite und die Bemerkungsspalte keine eigene: Bei
   table-layout:fixed fällt der gesamte Rest an die einzige Spalte ohne Breitenangabe. Die
   Zahlenspalten behalten ihr Mass, die Bemerkung wächst mit dem Fenster.

   Bewusst nur im Ausgaben-Panel: Die Einnahmen-Tabelle hat keine solche Spalte, dort würde die
   Restbreite auf die Zahlenspalten verteilt und sie unnötig auseinanderziehen. */
.outcome-panel .group-table {
    width: 100%;
}

.outcome-panel .col-note {
    width: auto;
    min-width: 16rem;
}

/* =============================================================================
   Overlay für gescheiterte Ajax-Aktionen (cm.js)
   ============================================================================= */
/* Bewusst eigenes Markup statt p:dialog: Wenn eine Ajax-Antwort scheitert, kann PrimeFaces
   selbst betroffen sein. Der z-index liegt ueber allen Dialogen der Anwendung. */
.cm-fehler-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    padding: 1rem;
}

.cm-fehler-box {
    max-width: 44rem;
    max-height: 80vh;
    overflow: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    padding: 1.25rem 1.5rem;
    font-size: .9rem;
    line-height: 1.5;
}

.cm-fehler-box h2 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    color: #b3261e;
}

.cm-fehler-box details {
    margin-top: .75rem;
}

.cm-fehler-box summary {
    cursor: pointer;
    color: var(--text-color-secondary, #6c757d);
}

.cm-fehler-box pre {
    margin: .5rem 0 0;
    padding: .5rem;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 16rem;
    overflow: auto;
}

.cm-fehler-actions {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.cm-fehler-btn {
    padding: .4rem .9rem;
    border: 1px solid var(--surface-border, #ced4da);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: .85rem;
}

.cm-fehler-btn-primary {
    background: #0b5c8a;
    border-color: #0b5c8a;
    color: #fff;
}

/* =============================================================================
   Grobplanung: die Zeilen aus der Vertragsliste
   ============================================================================= */
/* Bewusst schmaler und ohne Eingabefelder als die Zeilen von Hand - sie werden beim naechsten
   Import ersetzt, sind also nichts, woran man hier etwas ändert. */
.rough-plan-imported-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--surface-border, #dee2e6);
    padding-top: .35rem;
}

.rough-plan-imported-sum {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rough-plan-imported {
    margin-top: .5rem;
}

/* Die immer sichtbare Summenzeile je Vertragsart. */
.rough-plan-imported-group {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    padding: .3rem .5rem;
    border-top: 1px solid var(--surface-border, #dee2e6);
}

.rough-plan-imported-group-label {
    flex: 1 1 auto;
    font-weight: 600;
}

.rough-plan-imported-group-count {
    flex: 0 0 auto;
    color: var(--text-color-secondary, #6c757d);
    font-size: .82rem;
}

.rough-plan-imported-group-amount {
    flex: 0 0 9rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rough-plan-imported-list {
    max-height: 22rem;
    overflow: auto;
    margin: 0 0 .35rem 1.25rem;
    padding: .25rem;
    background: var(--surface-ground, #f8f9fa);
    border-radius: 4px;
}

.rough-plan-imported-hint {
    display: block;
    margin-top: .5rem;
}

.rough-plan-imported-row {
    display: flex;
    gap: .75rem;
    padding: .12rem .35rem;
    font-size: .85rem;
}

.rough-plan-imported-row:nth-child(even) {
    background: rgba(0, 0, 0, .025);
}

.rough-plan-imported-customer {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rough-plan-imported-amount {
    flex: 0 0 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Einnahmen-Gesamtsummen: warum sich die drei Spalten nicht addieren
   ============================================================================= */
.income-totals-note {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--primary-color, #0b5c8a);
    background: var(--surface-ground, #f8f9fa);
    border-radius: 0 4px 4px 0;
    font-size: .82rem;
    line-height: 1.45;
}

.income-totals-note .pi {
    margin-top: .15rem;
    flex: 0 0 auto;
}

/* =============================================================================
   Vertragsliste: Zeilen, deren Vertragsart nicht zur Bezeichnung passt
   ============================================================================= */
/* Bewusst eine Warnung und keine Fehlermeldung: Die Zahlen sind richtig, nur anders
   einsortiert - der Import bleibt moeglich. */
.contract-type-warning {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid #d98600;
    background: #fff8ec;
    border-radius: 0 4px 4px 0;
}

.contract-type-warning-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #8a5a00;
}

.contract-type-warning p {
    margin: .4rem 0 .5rem;
    font-size: .85rem;
    line-height: 1.45;
}

.contract-type-warning ul {
    margin: 0;
    padding-left: 1.25rem;
    max-height: 16rem;
    overflow: auto;
    font-size: .85rem;
}

/* =============================================================================
   Plan bis Jahresende: zwei Wertspalten (Buchungs- und Leistungsjahr)
   ============================================================================= */
.cm-balance-table-two thead th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-color-secondary, #6c757d);
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--surface-border, #dee2e6);
    white-space: nowrap;
}

.cm-balance-table-two td.num-right,
.cm-balance-table-two th.num-right {
    min-width: 8.5rem;
}

/* Die Differenz ist das Ergebnis des ganzen Blocks - sie darf nicht aussehen wie eine
   Zwischenzeile. */
.cm-balance-highlight td {
    background: var(--surface-ground, #eef2f7);
    border-top: 2px solid var(--primary-color, #0b5c8a);
    border-bottom: 2px solid var(--primary-color, #0b5c8a);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.cm-balance-highlight td:first-child {
    font-size: .95rem;
}

.cm-balance-highlight .cm-bold {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Zeilen, die es in dieser Spalte nicht gibt - ein Strich statt einer Zahl, die dort nichts
   zu suchen hat. Eine 0,00 stünde für "nichts vorhanden" und wäre eine andere Aussage. */
.cm-balance-na {
    color: var(--text-color-secondary, #9aa4ae);
}

.cm-balance-na-text {
    font-size: .78rem;
    font-style: italic;
}

/* Einstellungen der Preiserhöhung: Der E-Mail-Text ist das eigentliche Arbeitsfeld des Dialogs
   und liegt deshalb über die volle Breite statt in der schmalen zweiten Spalte des Rasters. */
.cm-settings-dlg .ui-dialog-content {
    max-height: 80vh;
    overflow: auto;
}

.cm-settings-dlg textarea {
    font-family: inherit;
    line-height: 1.45;
}

/* Kundenblöcke in der Preiserhöhungs-Liste (p:subTable): Kopf- und Fußzeile je Kunde deutlich
   größer und fett, damit der Kundenwechsel auch beim schnellen Scrollen auffällt - die Kopfzeile
   trägt zusätzlich aktuell/Vorschlag als Gesamtsumme (siehe cm-customer-header), die Fußzeile
   die Erhöhung dieses Kunden. */
.ui-datatable-subtable-header,
.ui-datatable-subtable-footer {
    font-size: 1.05rem;
    font-weight: 700;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Übersprungene Position leicht ausgegraut; ist alles eines Kunden übersprungen, auch Kopf- und
   Fußzeile seines Blocks. Die Zelle mit dem Haken selbst bleibt voll lesbar (nur der
   Hintergrund), damit man sieht, wo man ihn wieder herausnimmt. */
td.cm-skipped,
td.cm-skipped-bg {
    background: rgba(0, 0, 0, .035);
}

td.cm-skipped > *,
div.cm-skipped {
    opacity: .45;
}

/* Erledigte Position hellgrün, und der ganze Kundenblock samt Kopf- und Fußzeile, sobald alles
   Nicht-Übersprungene erledigt ist - dann ist die Mail an diesen Kunden raus. Kopf-/Fußzeile
   über :has(), weil das Kennzeichen am inneren div hängt, die Farbe aber die ganze Zelle füllen
   soll. */
td.cm-done {
    background: #f1f9f3;
}

/* Selektor so lang wie der des Themes (body .ui-datatable .ui-datatable-data>tr>td.
   ui-datatable-subtable-header), sonst gewinnt dessen Grau. */
body .ui-datatable .ui-datatable-data > tr > td.ui-datatable-subtable-header:has(.cm-block-done),
body .ui-datatable .ui-datatable-data > tr > td.ui-datatable-subtable-footer:has(.cm-block-done) {
    background: #e3f2e7;
}

/* Raster statt space-between: Mit drei Elementen (Name samt "seit", Info, TecArt) landete das
   mittlere je nach Länge der anderen woanders. Feste Spalten halten es untereinander. Abgekürzt
   wird nichts - alles muss lesbar bleiben; nur ein wirklich langer Text bricht innerhalb seiner
   Spalte um. */
.cm-customer-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 34rem);
    align-items: baseline;
    gap: 16px;
}

.cm-customer-header .cm-customer-tecart {
    text-align: right;
}

@media (max-width: 900px) {
    .cm-customer-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* Betrag und Einheit gehören zusammen: "1.716,17 € / Monat" über zwei Zeilen gebrochen liest
   sich als zwei Angaben statt als eine. */
.cm-nowrap {
    white-space: nowrap;
}

/* Fortschrittsbalken: Das Theme setzt die Prozentzahl weiß mittig auf die Leiste - auf dem
   hellgrauen, noch leeren Teil war sie kaum zu lesen, und das ist bis 50 % der ganze Lauf.
   Dunkle Schrift liest sich auf beiden Hälften, grau wie blau. Ohne Schatten: Ein heller
   Rand (text-shadow) ließ die Zahl auf dem blauen Teil verschwommen aussehen. */
body .ui-progressbar .ui-progressbar-label {
    color: #1a1a1a;
    text-shadow: none;
    font-weight: 600;
}

/* Preiserhöhung: "aktuell/Monat" unter dem Listenpreis - ganz leicht rot hinterlegt. */
body .ui-datatable .ui-datatable-data > tr > td.cm-below-list {
    background-color: #fdecec;
}

/* Erinnerung im Kunden-Dialog der Preiserhöhung: Der Entwurf setzt keinen Absender, support@
   muss in Outlook von Hand gewählt werden. Rot, damit man es nicht überliest. */
.cm-from-reminder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid #e57373;
    border-radius: 4px;
    background: #fdecea;
    color: #b71c1c;
}