/* Suchtreffer-Markierung in den Grids (Belegeingang, Reconciliation, Mapping, Kontenrahmen). */
mark.grid-search-hit {
    background-color: var(--bp-yellow);
    color: var(--bp-black);
    padding: 0 1px;
    border-radius: 2px;
}

/* CI-Status-Chips (SfChip) — wiederverwendbar über CssClass am ChipItem. Farben aus den Tokens,
   scharfe Kanten per CI. !important überstimmt das generierte Syncfusion-Dark-Theme. */
.e-chip-list .e-chip.bp-chip--active {
    background-color: var(--bp-blue) !important;
    color: var(--bp-white) !important;
    border-radius: var(--bp-radius-ctl) !important;
}

.e-chip-list .e-chip.bp-chip--custom {
    background-color: var(--bp-yellow) !important;
    color: var(--bp-black) !important;
    border-radius: var(--bp-radius-ctl) !important;
}

.e-chip-list .e-chip.bp-chip--muted {
    background-color: transparent !important;
    color: var(--bp-grey) !important;
    border: 1px solid rgba(253, 252, 252, 0.3) !important;
    border-radius: var(--bp-radius-ctl) !important;
}

/* Leerzustand für Grids/Listen (Syncfusion EmptyRecordTemplate). Ruhige, zentrierte Darstellung
   mit Icon + Text — wiederverwendbar, tokenbasiert, kein Extra-CSS je Seite. */
.bp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bp-space-2);
    padding: var(--bp-space-5) var(--bp-space-3);
    color: rgba(253, 252, 252, 0.7);
    text-align: center;
}

    .bp-empty .bp-empty-icon {
        font-size: 34px;
        color: var(--bp-yellow);
    }

    .bp-empty .bp-empty-text {
        font-size: 15px;
    }

/* Seitenweites Drag&Drop im Belegeingang (SfUploader DropArea): sichtbares Feedback,
   sobald eine Datei über der Fläche schwebt — Syncfusion setzt die Hover-Klasse selbst. */
.invoice-detail-container.e-upload-drag-hover {
    outline: 2px dashed var(--bp-yellow);
    outline-offset: -2px;
}

/* CI-Farb-Utilities im Bootstrap-Stil — die betterprojects-Palette, die Bootstrap nicht mitbringt.
   Damit setzen wir Marken-Akzente mit reinen Utility-Klassen (statt eigener Komponenten-Klassen);
   Layout/Abstände/Kanten kommen komplett aus Bootstrap (d-flex, row/col, gap-*, p-*, border, rounded-0 …). */
.bg-bp-yellow { background-color: var(--bp-yellow) !important; }
.bg-bp-blue { background-color: var(--bp-blue) !important; }
.text-bp-black { color: var(--bp-black) !important; }
.text-bp-yellow { color: var(--bp-yellow) !important; }
.border-bp-yellow { border-color: var(--bp-yellow) !important; }

/* Hover-Zustände nur für CI-Buttons/-Links (Bootstrap deckt eigene Farbwechsel nicht ab). */
.btn.bg-bp-yellow:hover { background-color: var(--bp-white) !important; }
.btn.bg-bp-blue:hover { background-color: var(--bp-black) !important; }


/* ============================================================
   Auth-Seiten (Anmeldung/Registrierung) — CI betterprojects (Referenz /ki-referenz):
   Gelb-Akzent auf Schwarz, scharfe Kanten, Weißraum schafft Fokus. */
.bp-auth-card .e-card {
    border-radius: var(--bp-radius);
    border-top: 4px solid var(--bp-yellow);
}

    .bp-auth-card .e-card .e-card-content {
        padding: var(--bp-space-4);
    }

.bp-auth-title {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: var(--bp-space-1);
}

.bp-auth-subtitle {
    text-align: center;
    opacity: 0.65;
    margin-bottom: var(--bp-space-4);
}

/* Sekundär-Navigation unter der Karte (liegt auf dem schwarzen Seitenhintergrund). */
.bp-auth-links {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--bp-space-2);
    margin-top: var(--bp-space-4);
    color: rgba(253, 252, 252, 0.7);
}

    .bp-auth-links a {
        color: var(--bp-yellow);
        font-weight: 600;
        text-decoration: none;
    }

        .bp-auth-links a:hover {
            text-decoration: underline;
        }

/* Schritt-Anzeige der geführten Registrierung. */
.bp-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bp-space-3);
    margin-bottom: var(--bp-space-4);
    font-family: var(--bp-font-head);
    font-weight: 600;
}

.bp-step {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    opacity: 0.45;
}

.bp-step--active,
.bp-step--done {
    opacity: 1;
}

.bp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--bp-yellow);
    border-radius: var(--bp-radius);
}

.bp-step--active .bp-step-num {
    background-color: var(--bp-yellow);
    color: var(--bp-black);
}

.bp-step-line {
    flex: 0 0 3rem;
    height: 2px;
    background-color: currentColor;
    opacity: 0.3;
}


/* Textbox Layout */
.detail-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
}

    .detail-row label {
        flex: 0 0 120px;
    }

.detail-big-column {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-grow: 1;
    /* Text vertical center */
    align-items: center;
}

.detail-small-column {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-shrink: 1;
    /* Text vertical center */
    align-items: center;
}

    .detail-small-column label {
        flex: 0 0 auto;
        min-width: fit-content;
    }

.detail-column {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-basis: 50%;
    /* Text vertical center */
    align-items: center;
}



.position-row {
    display: flex;
    gap: 0.5rem;
    padding: 3px;
}

    .position-row .ctm-describiton {
        flex-basis: 450%;
    }







.BugReportFeatureIcon {
    content: url("/Icons/Bug--Streamline-Sharp-Remix.svg");
}

/* Glocke des Benachrichtigungs-Buttons in der Topbar (HeaderMenu). */
.CustomNotificationsIcon {
    content: url("/Icons/Bell-Notification--Streamline-Sharp-Remix.svg");
}


/*I Important changes for the sfGrid filter dialog*/
/* Removes the hidden overflow property, so the dialog is visible */
.e-card {
    overflow: visible;
}
    .e-card .e-card-content {
        overflow: visible !important;
    }


    /* Removes the "Zurücksetzen" Button in the sfUploader*/
.e-upload-actions .e-file-clear-btn {
    display: none;
}

/* ============================================================
   Übergangs-Shim Bootstrap→Tailwind (löschen, sobald alle Seiten migriert sind).
   Stellt die Bootstrap-Semantik der noch im Bestand genutzten LAYOUT-Utilities wieder her —
   ungelayertes CSS schlägt Tailwinds @layer utilities, daher greifen die Regeln auch bei
   Namenskollisionen (w-100 = 100 %, nicht 25rem; border-3 = Breiten-Modifikator, kein Vollrahmen).
   Bewusst NICHT geshimmt: Bootstrap-Komponenten (btn-*, form-*, alert, badge) — die Seiten,
   die sie nutzen (v. a. Account), werden beim Redesign auf Syncfusion/Tailwind umgestellt. */

/* Größen (Prozent-Semantik) */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.vh-100 { height: 100vh !important; }

/* Display & Flex */
.d-flex { display: flex; }
.d-none { display: none; }
.d-block { display: block; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-fill { flex: 1 1 auto; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-evenly { justify-content: space-evenly; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

/* Grid (vereinfachtes Bootstrap-5-Raster: nur die im Bestand genutzten Spalten) */
.row {
    --shim-gutter-x: 1.5rem;
    --shim-gutter-y: 0rem;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-0.5 * var(--shim-gutter-x));
    margin-right: calc(-0.5 * var(--shim-gutter-x));
    margin-top: calc(-1 * var(--shim-gutter-y));
}

    .row > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-left: calc(0.5 * var(--shim-gutter-x));
        padding-right: calc(0.5 * var(--shim-gutter-x));
        margin-top: var(--shim-gutter-y);
    }

.g-3, .gx-3 { --shim-gutter-x: 1rem; }
.g-3, .gy-3 { --shim-gutter-y: 1rem; }
.col { flex: 1 0 0%; }
.col-4 { width: 33.3333%; }
.col-6 { width: 50%; }
.col-8 { width: 66.6667%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

@media (min-width: 768px) {
    .col-md-1 { width: 8.3333%; }
    .col-md-2 { width: 16.6667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.6667%; }
    .col-md-10 { width: 83.3333%; }
}

@media (min-width: 992px) {
    .col-lg-4 { width: 33.3333%; }
    .col-lg-5 { width: 41.6667%; }
    .col-lg-6 { width: 50%; }
}

/* Text */
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.text-end { text-align: right; }
.text-muted { color: var(--bp-text-muted, #8296A9); }
.text-danger { color: var(--bp-debit, #F26D5B); }
.text-success { color: var(--bp-success, #42C06B); }
.small { font-size: 0.875em; }

/* Rahmen (Bootstrap-Semantik: border-3 moduliert nur die Breite vorhandener Kanten) */
.border { border: 1px solid var(--bp-panel-border, rgba(255, 255, 255, 0.08)); }
.border-start { border-left: 1px solid var(--bp-panel-border, rgba(255, 255, 255, 0.08)); }
.border-bottom { border-bottom: 1px solid var(--bp-panel-border, rgba(255, 255, 255, 0.08)); }
.border-start.border-3 { border-left-width: 3px; }
.rounded-0 { border-radius: 0; }