/* Import other CSS files */
@import "fonts.css";
@import "colors.css";
@import "themes.css";
@import "layout.css";
@import "utilities.css";

/* Global styles */
body {
    margin: 0;
    font-family: "MaisonNeue";
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: all; /* blockiert alle Interaktionen */
}

/* Loading spinner styles */
.mud-progress-circular-circle {
    stroke: var(--base1) !important;
}

/*
 * List/table rows: avoid Safari's I-beam text cursor over cell content,
 * which incorrectly suggests the text is editable. Prefer a pointer on
 * hoverable body rows; keep interactive controls explicit.
 */
.mud-table tbody .mud-table-row {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.mud-table tbody .mud-table-cell,
.mud-table tbody .mud-table-cell .mud-typography,
.mud-table tbody .mud-table-cell span,
.mud-table tbody .mud-table-cell p {
    cursor: inherit;
}

.mud-table tbody .mud-table-cell .mud-button-root,
.mud-table tbody .mud-table-cell .mud-icon-button,
.mud-table tbody .mud-table-cell .mud-chip,
.mud-table tbody .mud-table-cell button,
.mud-table tbody .mud-table-cell a,
.mud-table tbody .mud-table-cell input,
.mud-table tbody .mud-table-cell textarea,
.mud-table tbody .mud-table-cell select {
    cursor: pointer;
    user-select: auto;
    -webkit-user-select: auto;
}

.mud-list .mud-list-item {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/*
 * Receipt detail groups — GLOBAL (MudCard ignores Blazor CSS isolation attributes).
 *
 *   Empfänger | Steller
 *   Daten     | Positionen
 *   Bank      | Weitere
 */
.receipt-document-fields-grid {
    --receipt-dense-input-height: 2.5rem;
    --receipt-dense-field-margin-top: 0.5rem;
    --receipt-field-row-gap: 0.5rem;
    --receipt-title-control-height: 1.5rem;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "recipient vendor"
        "invoice   items"
        "bank      more";
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.receipt-document-fields-grid > .receipt-card-recipient { grid-area: recipient; }
.receipt-document-fields-grid > .receipt-card-vendor { grid-area: vendor; }
.receipt-document-fields-grid > .receipt-card-invoice { grid-area: invoice; }

/*
 * Richtung + Belegart 50:50 in one Rechnungsdaten row.
 * Global: MudCard skips scoped CSS; MudSelect min-width would wrap the nested grid.
 */
.receipt-card-invoice .receipt-nested-combo-grid {
    width: 100%;
    flex-wrap: nowrap !important;
}

.receipt-card-invoice .receipt-nested-combo-grid > .mud-grid-item {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}

.receipt-card-invoice .receipt-nested-combo-grid .mud-input-control,
.receipt-card-invoice .receipt-nested-combo-grid .mud-select {
    min-width: 0 !important;
    width: 100%;
}
.receipt-document-fields-grid > .receipt-card-items { grid-area: items; }
.receipt-document-fields-grid > .receipt-card-bank { grid-area: bank; }
.receipt-document-fields-grid > .receipt-card-more { grid-area: more; }

/*
 * Side-detail layout: single column, presentation order
 *   Rechnungsdaten → Positionen → Empfänger → Steller → Bank → Infos
 */
.receipt-document-fields-grid.receipt-document-fields-grid--side {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none;
    grid-template-areas:
        "invoice"
        "items"
        "recipient"
        "vendor"
        "bank"
        "more" !important;
    align-items: start;
}

.receipt-document-fields-grid.receipt-document-fields-grid--side > .receipt-document-section-card {
    height: auto;
}

.receipt-companion-pane--under-pdf {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
 * Side-detail layout: same pairing contract as PDF|Buchungen.
 * Right column height = left column (PDF + bookings); tops flush; scroll inside.
 */
.receipt-document-component--side .receipt-document-split {
    align-items: stretch !important;
}

.receipt-document-component--side .receipt-document-split > .mud-grid-item {
    display: flex;
    flex-direction: column;
}

.receipt-document-component--side .receipt-document-split > .mud-grid-item > .mud-stack {
    flex: 1 1 auto;
    min-height: 100%;
}

.receipt-document-component--side .receipt-source-viewer-panel {
    position: static !important;
    top: auto !important;
}

.receipt-document-component--side .receipt-fields-side-panel {
    position: static !important;
    top: auto !important;
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.receipt-document-fields-grid > .receipt-document-section-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Weitere Informationen: do not stretch to Bank row height (avoids empty gap under hints). */
.receipt-document-fields-grid > .receipt-card-more {
    height: auto;
    align-self: start;
}

.receipt-document-section-card > .mud-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 0.75rem 0.8rem !important;
    box-sizing: border-box;
}

.receipt-document-section-card .receipt-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.8rem !important;
    min-height: var(--receipt-title-control-height);
    height: var(--receipt-title-control-height);
    flex: 0 0 auto;
}

.receipt-document-section-card .receipt-section-title,
.receipt-document-section-card .receipt-service-month-label {
    margin: 0 !important;
    line-height: var(--receipt-title-control-height) !important;
}

.receipt-document-section-card .receipt-section-title-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    height: var(--receipt-title-control-height);
}

.receipt-document-section-card .receipt-section-title-row .receipt-section-title-btn.mud-button-root {
    min-height: var(--receipt-title-control-height) !important;
    height: var(--receipt-title-control-height) !important;
    padding: 0 0.45rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    text-transform: none;
}

.receipt-document-section-card .receipt-section-title-row .receipt-section-title-icon-btn.mud-icon-button {
    width: var(--receipt-title-control-height) !important;
    height: var(--receipt-title-control-height) !important;
    min-width: var(--receipt-title-control-height) !important;
    min-height: var(--receipt-title-control-height) !important;
    padding: 0 !important;
}

.receipt-document-section-card .receipt-field-rows-3 {
    /* Exactly 3 dense field rows + gaps, plus a small optical correction. */
    --receipt-multiline-box-height: calc(
        3 * var(--receipt-dense-input-height) + 2 * var(--receipt-field-row-gap)
        + 0.625 * var(--receipt-dense-input-height)
    );
}

.receipt-document-section-card .receipt-field-rows-2 {
    /* Exactly 2 dense field rows + gap, plus a small optical correction. */
    --receipt-multiline-box-height: calc(
        2 * var(--receipt-dense-input-height) + 1 * var(--receipt-field-row-gap)
        + 0.625 * var(--receipt-dense-input-height)
    );
}

.receipt-document-section-card .receipt-item-text {
    flex: 0 0 auto !important;
    align-self: stretch;
    display: block;
    overflow: visible;
    height: auto !important;
    max-height: none !important;
}

.receipt-document-section-card .receipt-item-text .mud-input-control {
    margin-top: var(--receipt-dense-field-margin-top) !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
}

.receipt-document-section-card .receipt-item-text .mud-input {
    height: var(--receipt-multiline-box-height) !important;
    min-height: var(--receipt-multiline-box-height) !important;
    max-height: var(--receipt-multiline-box-height) !important;
}

.receipt-document-section-card .receipt-item-text .mud-input-control-input-container,
.receipt-document-section-card .receipt-item-text .mud-input-slot {
    height: 100% !important;
    min-height: 0 !important;
}

.receipt-document-section-card .receipt-item-text textarea {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    resize: none;
}

.receipt-document-fields-grid > .receipt-card-items {
    min-height: 0;
    overflow: visible;
}

.receipt-document-fields-grid > .receipt-card-items > .mud-card-content {
    min-height: 0;
    overflow: visible;
}

@media (max-width: 959.98px) {
    .receipt-document-fields-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "recipient"
            "vendor"
            "invoice"
            "items"
            "bank"
            "more";
    }

    .receipt-document-fields-grid.receipt-document-fields-grid--side {
        grid-template-areas:
            "invoice"
            "items"
            "recipient"
            "vendor"
            "bank"
            "more";
    }

    .receipt-document-component--side .receipt-fields-side-panel {
        position: static !important;
        height: auto;
        min-height: 0;
        max-height: none !important;
    }
}

/*
 * Receipt upload dialog is rendered in a MudBlazor portal, so size rules live here
 * (component-scoped CSS alone is unreliable for teleported dialog chrome).
 */
.mud-dialog.receipt-upload-dialog {
    max-width: min(36rem, 92vw) !important;
    width: min(36rem, 92vw) !important;
}

.mud-dialog.receipt-upload-dialog .receipt-upload-dialog-content {
    max-height: 42vh !important;
    overflow: hidden !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.mud-dialog.receipt-upload-dialog .receipt-upload-file-list {
    max-height: 28vh !important;
    overflow-y: auto !important;
}

.mud-dialog.receipt-upload-dialog .receipt-upload-file-row {
    padding: 0.1rem 0.25rem;
    line-height: 1.25;
    font-size: 0.875rem;
}

.mud-dialog.receipt-upload-dialog .receipt-upload-picker-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.mud-dialog.receipt-upload-dialog .receipt-upload-input-hidden,
.mud-dialog.receipt-upload-dialog input.receipt-upload-input-hidden[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

/*
 * Data Provider dialog is rendered in a MudBlazor portal (Administration).
 * Long Seafile probe paths must wrap inside the alert; content must scroll.
 */
.mud-dialog.data-provider-dialog {
    max-width: min(40rem, 96vw) !important;
    width: min(40rem, 96vw) !important;
}

.mud-dialog.data-provider-dialog .data-provider-dialog-content {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 0;
}

.mud-dialog.data-provider-dialog .mud-alert {
    align-items: flex-start;
    overflow: visible;
    min-width: 0;
}

.mud-dialog.data-provider-dialog .mud-alert-message,
.mud-dialog.data-provider-dialog .data-provider-connection-alert {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * AccountNumberWithNameField — GLOBAL duplicate of component CSS so RCL scoped
 * styles are not missed locally (same pattern as Hinweise overlay).
 */
.account-number-with-name {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    cursor: default;
}

.account-number-with-name > .account-number-with-name__field,
.account-number-with-name > .account-number-with-name__name {
    grid-area: 1 / 1;
}

.account-number-with-name > .account-number-with-name__field {
    width: 100%;
    min-width: 0;
    align-self: start;
    cursor: default;
}

.account-number-with-name__field .mud-input {
    cursor: default;
}

.account-number-with-name__field .mud-input-slot {
    flex: 0 0 auto !important;
    width: 5.5ch !important;
    max-width: 5.5ch !important;
    min-width: 0 !important;
    cursor: text;
}

.account-number-with-name__name {
    z-index: 1;
    align-self: center;
    justify-self: stretch;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin: 0 14px 0 calc(14px + 5.5ch + 0.5rem);
    padding: 0;
    transform: translateY(2px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    cursor: default;
    user-select: none;
    color: var(--mud-palette-text-secondary);
    font-family: var(--mud-typography-default-family, Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--mud-typography-default-size, 1rem);
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
}

/*
 * DATEV Kontenrahmen — GLOBAL scroll shell.
 * RCL scoped page CSS is easy to miss locally (styles.css cache / isolation);
 * without this the workspace tab clips and the page cannot scroll.
 */
.datev-chart-page {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    align-self: stretch;
    height: 100%;
    max-height: 100%;
    min-height: 0 !important;
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.datev-chart-page > .mud-container {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    max-width: none;
}

/*
 * Forecast layout — GLOBAL in app.css (exception, not the default).
 *
 * We do not want page layout in this file. Forecast.razor.css,
 * WorkspaceRouteHost.razor.css and MainLayout.razor.css remain the intended home
 * and still contain the same rules. They are not enough at runtime.
 *
 * Why scoped CSS does not win here:
 * 1. Jaicob-App.Shared is an RCL. Isolated *.razor.css is bundled into the host
 *    `*.styles.css` (@import of `_content/Jaicob-App.Shared/...razor.rz.scp.css`).
 *    Locally that bundle is often stale or skipped (same as DATEV Kontenrahmen,
 *    Hinweise overlay, AccountNumberWithNameField). `app.css` is loaded from
 *    `_content/Jaicob-App.Shared/app.css?v=…` and always applies.
 * 2. MudBlazor (MudLayout, MudMainContent, MudTabs) and Syncfusion (.e-spreadsheet)
 *    do not receive the Blazor scope attribute `[b-…]`. `::deep` from the RCL
 *    parent still depends on (1) actually loading. Without a global rule the
 *    workspace tab shrink-wraps to the spreadsheet intrinsic width; leftover
 *    window margins stay empty; SfSpreadsheet Width="100%" freezes that narrow
 *    pixel size on first paint.
 *
 * Proof (2026-08-21, Forecast BWA Vitasauri): width:100% / flex stretch in
 * Forecast.razor.css + WorkspaceRouteHost.razor.css had no visual effect
 * ("unverändert"). The same selectors in this file stretched the grid.
 *
 * Do not add further Forecast cosmetics here unless scoped CSS was shown not
 * to apply. Do not use this block to hide Syncfusion reserve columns P:AO.
 */
.mud-layout,
.mud-main-content,
.page-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

.workspace-route-host,
.workspace-tabs,
.workspace-tabs .mud-tabs-panels,
.workspace-tab-panel,
.workspace-tab-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0;
    align-self: stretch;
}

/* Tab strip must not shrink when the Forecast stretch rule makes the tab host a column flex.
   The underline belongs on the full-width tabbar, not on the max-content tab wrapper. */
.workspace-tabs .mud-tabs-tabbar {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: 3rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.workspace-tabs .mud-tabs-tabbar-inner,
.workspace-tabs .mud-tabs-tabbar-content {
    width: 100%;
}

.workspace-tabs .mud-tab {
    flex: 0 0 auto;
    min-width: max-content;
}

.forecast-page {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    align-self: stretch;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0;
    height: 100%;
    /* Same outer gutter as Stammdaten MudContainer pa-6 (24px). */
    padding: 1.5rem !important;
    overflow: hidden;
    box-sizing: border-box;
}

.forecast-page .forecast-chrome {
    width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
}

.forecast-page .forecast-spreadsheet-shell,
.forecast-page .forecast-spreadsheet-host {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch;
    box-sizing: border-box;
}

.forecast-page .e-spreadsheet {
    width: 100% !important;
    max-width: none !important;
}