/* ============================================================================
   Anträge (Proposals)
   Einheitliche Darstellung aller Antragsansichten (Dienstreise, Abrechnung,
   Homeoffice, Zeitausgleich, Bestellung). Die Razor-Dateien setzen ausschließlich
   diese Klassen – keine Inline-Styles.
   Eingebunden in BissBlazorApp/Components/App.razor direkt nach app.css.
   ============================================================================ */

/* Pillen-Darstellung für Status-Chips (Palette analog QMS-Watcher). */
.vwt-pill {
    --rz-chip-border-radius: 999px;
    border-radius: 999px !important;
}

.vwt-pill.rz-chip-info {
    background-color: #e0e8f0 !important;
}

    .vwt-pill.rz-chip-info,
    .vwt-pill.rz-chip-info * {
        color: #4a6d8c !important;
    }

.vwt-pill.rz-chip-warning {
    background-color: #f0e9db !important;
}

    .vwt-pill.rz-chip-warning,
    .vwt-pill.rz-chip-warning * {
        color: #8a6d3b !important;
    }

.vwt-pill.rz-chip-success {
    background-color: #cfebd8 !important;
}

    .vwt-pill.rz-chip-success,
    .vwt-pill.rz-chip-success * {
        color: #1e7d3a !important;
    }

.vwt-pill.rz-chip-danger {
    background-color: #f8d2d2 !important;
}

    .vwt-pill.rz-chip-danger,
    .vwt-pill.rz-chip-danger * {
        color: #c0392b !important;
    }

.vwt-pill.rz-chip-light {
    background-color: #eceff2 !important;
}

    .vwt-pill.rz-chip-light,
    .vwt-pill.rz-chip-light * {
        color: #55606b !important;
    }

.vwt-pill.rz-chip-primary {
    background-color: #dfe6f5 !important;
}

    .vwt-pill.rz-chip-primary,
    .vwt-pill.rz-chip-primary * {
        color: #33518f !important;
    }


/* Antragsansichten setzen Texte ohne Standard-Außenabstand. */
.vwt-proposal :is(p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

/* --- Karten und Flächen --- */
.vwt-proposal-card {
    padding: 0.75rem 1rem !important;
}

.vwt-proposal-card--accent {
    border-left: 4px solid var(--rz-primary);
}


.vwt-proposal-card--info {
    width: 100%;
    background-color: var(--rz-info-lighter) !important;
    border-left: 4px solid var(--rz-info);
}

.vwt-proposal-placeholder {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100) !important;
}

/* --- Kennzahl, z.B. verfügbares Reisebudget --- */
.vwt-proposal-metric {
    padding: 0.4rem 0.75rem !important;
    background: var(--rz-base-100) !important;
    border-left: 4px solid var(--rz-success);
}

.vwt-proposal-metric--over {
    border-left-color: var(--rz-danger);
}

.vwt-proposal-metric__value {
    font-size: 1.15rem !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rz-text-color) !important;
}

.vwt-proposal-metric--over .vwt-proposal-metric__hint {
    color: var(--rz-danger) !important;
}

/* --- Zusammenfassungs-Panel --- */
.vwt-summary-panel {
    position: sticky;
    top: 1rem;
    width: 100%;
    max-width: 30rem;
    padding: 1.1rem 1.25rem !important;
}

.vwt-summary-panel__title {
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vwt-summary-section {
    flex: 1 1 100%;
}

/* Kostenzeilen verteilen sich innerhalb ihres Abschnitts auf zwei Spalten. */
.vwt-summary-section--columns {
    flex: 1 1 45%;
    min-width: 11rem;
}


.vwt-summary-section__title {
    font-weight: 600 !important;
    letter-spacing: .06em;
    color: var(--rz-text-secondary-color);
}

.vwt-summary-row__label {
    font-weight: 300 !important;
    white-space: nowrap;
}

.vwt-summary-row__value {
    font-weight: 600 !important;
    text-align: right;
}

.vwt-summary-route {
    font-weight: 600;
    text-align: left;
}

/* Klickbare Zeile, die in den zugehörigen Schritt springt. */
.vwt-summary-link {
    cursor: pointer;
    border-radius: var(--corner-radius-medium);
    padding: 0.3rem .25rem;
    margin: 0 -.25rem;
}

.vwt-summary-link:hover {
    background-color: var(--rz-base-200, rgba(0, 0, 0, .06));
}

.vwt-summary-total {
    padding: 0.7rem 1rem !important;
    background: var(--rz-primary) !important;
    color: var(--rz-on-primary, #fff) !important;
}

.vwt-summary-total__label {
    font-weight: 600;
    color: inherit !important;
}

.vwt-summary-total__value {
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1.2;
    color: inherit !important;
}

.vwt-summary-budget {
    margin: 0 !important;
    padding: 0.6rem 0.9rem !important;
}

.vwt-summary-budget__icon {
    font-size: 18px;
}

.vwt-summary-budget__value {
    font-size: 1.1rem !important;
    font-weight: 700;
    line-height: 1.2;
    color: inherit !important;
}

.vwt-summary-budget__hint {
    color: inherit !important;
}

/* --- Vergleichstabelle beantragt/Ist (Abrechnung) --- */
.vwt-summary-compare__label {
    flex: 1 1 auto;
    color: var(--rz-text-secondary-color) !important;
}

.vwt-summary-compare__column {
    width: 5rem;
    text-align: right;
}

.vwt-summary-compare__column--muted {
    color: var(--rz-text-secondary-color) !important;
}

.vwt-summary-compare__column--value {
    font-weight: 600;
}

/* --- Formularbausteine --- */
.vwt-proposal-textarea {
    width: 100%;
    height: 110px;
}

.vwt-proposal-textarea--small {
    height: 100px;
}

.vwt-proposal-amount {
    min-width: 7rem;
}

/* Unsichtbares Ankerfeld für Sammel-Validatoren. */
.vwt-proposal-anchor {
    display: none !important;
}

.vwt-proposal-multiline {
    white-space: pre-line;
}

/* Abweichung der Ist-Spalte: Mehrkosten rot, Minderkosten grün. */
.vwt-summary-compare__column--over {
    color: var(--rz-danger) !important;
}

.vwt-summary-compare__column--under {
    color: var(--rz-success) !important;
}

/* Kopfzeile des Soll/Ist-Vergleichs, bündig zu den klickbaren Zeilen. */
.vwt-summary-compare__header {
    padding: 0 .25rem;
}

/* Hinweiszeile unter dem Panel. */
.vwt-summary-note {
    color: var(--rz-text-secondary-color) !important;
}

.vwt-proposal-muted {
    font-weight: 200;
}

.vwt-proposal-inherit {
    color: inherit !important;
}

.vwt-proposal-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* Lange, leerzeichenlose Werte (z.B. eingefügte URLs) sollen umbrechen,
   statt die Antragsansicht in die Breite zu ziehen. */
.vwt-proposal-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vwt-proposal-clickable {
    cursor: pointer;
}

.vwt-proposal-self-start {
    align-self: flex-start;
}

.vwt-proposal-column {
    width: 7rem;
    text-align: right;
}

/* --- Hinweisbanner --- */
.vwt-proposal-card--warning {
    background-color: var(--rz-warning-lighter) !important;
    border-left: 4px solid var(--rz-warning);
}

.vwt-proposal-card--danger {
    background-color: var(--rz-danger-lighter) !important;
    border-left: 4px solid var(--rz-danger);
}

.vwt-proposal-card--primary {
    background: var(--rz-primary) !important;
    color: var(--rz-on-primary, #fff) !important;
}

/* --- Symbole --- */
.vwt-proposal-icon {
    font-size: 1.5rem;
    color: var(--rz-primary);
}

.vwt-proposal-icon--large {
    font-size: 2rem;
    color: var(--rz-text-secondary-color);
}

.vwt-proposal-icon--info {
    color: var(--rz-info);
}

.vwt-proposal-icon--warning {
    color: var(--rz-warning);
}

/* --- Dialoge --- */
.vwt-proposal-dialog {
    min-width: 400px;
}

/* Aufzählung in der Antrags-Zusammenfassung. */
.vwt-proposal-list {
    margin: 0;
    padding-left: 1.25rem;
}

/* Aktuelle Stufe der Antrags-Fortschrittsanzeige. */
.vwt-proposal-step--current {
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   Seitenlayout eines Antrags
   Der Antrag wird auf eine lesbare Breite begrenzt und zentriert; Formularspalte
   und Zusammenfassung teilen sich diese Breite. Die Schriftgrößen entsprechen
   denen der übrigen Antragsansichten (Homeoffice, Zeitausgleich, Bestellung).
   ---------------------------------------------------------------------------- */
.vwt-proposal-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.vwt-proposal-step__form {
    max-width: 60rem;
}

/* Tabs des Antragscontainers: ein Icon im Tab-Kopf gibt es nur als Hinweis auf fehlende
   Pflichtangaben, daher wird es durchgehend in der Warnfarbe dargestellt. */
.vwt-wizard-tabs .rz-tabview-nav .rz-tabview-title + i,
.vwt-wizard-tabs .rz-tabview-nav i.rzi {
    color: var(--rz-danger);
}

/* Antragsweite Aktionen (Abbrechen, Prüfen, Entwurf, Einreichen) unter der
   Schrittnavigation. Auf schmalen Fenstern brechen die Buttons um. */
.vwt-proposal-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-300);
}

/* Tabellen der Antragsansichten bleiben in ihrer Spalte: schmale Fenster erhalten
   einen horizontalen Bildlauf statt abgeschnittener Spalten. */
.vwt-proposal-table {
    width: 100%;
    overflow-x: auto;
}

/* Symbolschaltflächen in Antragstabellen bleiben kompakt und werden nicht
   abgeschnitten. */
.vwt-proposal-table .rz-button.rz-button-icon-only {
    min-width: 2rem;
    padding: 0.25rem;
}

.vwt-proposal-table .rz-data-grid,
.vwt-proposal-table .rz-datatable {
    width: 100%;
}