/* Shared by Web, PWA and desktop hosts. Keep horizontal overflow in the table. */
* { scrollbar-width: auto; scrollbar-color: #8796a8 #28313c; }
*::-webkit-scrollbar { width: 14px; height: 14px; }
*::-webkit-scrollbar-track { background: #28313c; border-radius: 7px; }
*::-webkit-scrollbar-thumb { background: #8796a8; border: 2px solid #28313c; border-radius: 7px; }
*::-webkit-scrollbar-thumb:hover { background: #b7c8dc; }
*::-webkit-scrollbar-corner { background: #28313c; }
#invoice-editor { min-width: 0; max-width: 100%; }
.invoice-lines { min-width: 0; max-width: 100%; }
.invoice-lines .mud-table-container { overflow-x: auto; scrollbar-gutter: stable; padding-bottom: 6px; }
.invoice-lines .mud-table-cell { white-space: nowrap; }
.invoice-lines .mud-table-cell:nth-child(2) { white-space: normal; width: 100%; }
.invoice-lines .mud-table-cell:nth-child(6) { min-width: 115px; }
.invoice-lines .mud-table-cell:nth-child(7) { min-width: 210px; }
.invoice-lines .mud-table-cell:nth-child(8) { min-width: 160px; }
.invoice-vat { min-width: 185px; }
.invoice-vat input, .invoice-vat .mud-input-slot { white-space: nowrap; }
.invoice-vat-options { min-width: 250px !important; max-width: calc(100vw - 24px); }
.invoice-vat-options .mud-list-item-text { white-space: nowrap; }
@media (forced-colors: active) { * { scrollbar-color: auto; } }

/* On phones each invoice line becomes a labelled card, using the same inputs. */
@media (max-width: 900px) {
    #invoice-editor .d-flex.flex-row, #invoice-editor .invoice-actions {
        flex-wrap: wrap;
        min-width: 0;
    }
    #invoice-editor .mud-grid-item { flex-basis: 100% !important; max-width: 100% !important; min-width: 0; }
    #invoice-editor .mud-input-control { min-width: 0 !important; max-width: 100%; }
    #invoice-editor .invoice-actions { align-items: stretch !important; }
    #invoice-editor .invoice-actions > .mud-button-root { flex: 1 1 100%; white-space: normal; }
    #invoice-editor .invoice-actions > .mud-typography { flex: 1 1 100%; overflow-wrap: anywhere; }
    #invoice-editor .mud-button-root { min-height: 44px; }
    #invoice-editor .mud-button-label { white-space: normal; overflow-wrap: anywhere; }
    #invoice-editor .mud-paper { padding: 12px !important; }
    .invoice-scroll-hint { display: none; }
    .invoice-lines .mud-table-container { overflow: visible; scrollbar-gutter: auto; }
    .invoice-lines .mud-table-root, .invoice-lines tbody { display: block; width: 100%; }
    .invoice-lines .mud-table-root > thead,
    .invoice-lines .mud-table-root > .mud-table-head { display: none !important; }
    .invoice-lines tbody > .mud-table-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 16px;
    }
    .invoice-lines .mud-table-cell {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        border: 0;
        padding: 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100%;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .invoice-lines .mud-table-cell::before {
        content: attr(data-label);
        display: block;
        position: static;
        font-size: .8rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }
    .invoice-lines .mud-table-cell:nth-child(1),
    .invoice-lines .mud-table-cell:nth-child(2),
    .invoice-lines .mud-table-cell:nth-child(7),
    .invoice-lines .mud-table-cell:nth-child(8),
    .invoice-lines .mud-table-cell:nth-child(9),
    .invoice-lines .mud-table-cell:last-child { grid-column: 1 / -1; }
    .invoice-lines .mud-icon-button { align-self: flex-end; width: 44px; height: 44px; }
    .invoice-lines .mud-input-control, .invoice-lines .invoice-vat { min-width: 0 !important; width: 100%; }
    .invoice-lines .mud-input-slot { min-width: 0; }
}
@media (max-width: 360px) {
    .invoice-lines tbody > .mud-table-row { grid-template-columns: minmax(0, 1fr); }
}

/* Common compact mobile controls, shared by every host and page. */
.invoice-list-mobile-select { display: none; }
@media (max-width: 900px) {
    .mud-button-root.mud-button { font-size: .75rem; line-height: 1.25; padding: 4px 8px; min-height: 44px; }
    .mud-button-root .mud-button-label { white-space: normal; overflow-wrap: anywhere; }
    .mud-button-root .mud-button-icon-start { margin-left: 0; margin-right: 5px; }
    .mud-button-root .mud-button-icon-end { margin-right: 0; margin-left: 5px; }
    .mud-button-root .mud-svg-icon { font-size: 18px; }
    .mud-icon-button.mud-button-root { padding: 10px; min-width: 44px; min-height: 44px; }
    .invoice-list-actions { flex-wrap: wrap; gap: 8px !important; }
    .invoice-list-actions > .mud-typography { flex: 1 1 100%; font-size: 1.25rem; }
    .invoice-list-actions > .flex-grow-1 { display: none; }
    .invoice-list-actions > .mud-button-root { flex: 1 1 140px; min-width: 0; }
    .invoice-list-filters { padding: 12px !important; }
    .invoice-list-filters .mud-grid-item { min-width: 0; }
    .invoice-list-filters .mud-grid-item.d-flex { flex-wrap: wrap; }
    .invoice-list-filters .mud-grid-item.d-flex > .mud-button-root { flex: 1 1 70px; width: auto; }
}
@media (max-width: 600px) {
    .invoice-list-mobile-select { display: block; }
    .invoice-list .mud-table-container { overflow: visible; }
    .invoice-list .mud-table-root, .invoice-list tbody { display: block; width: 100%; }
    .invoice-list .mud-table-root > thead { display: none !important; }
    .invoice-list tbody > .mud-table-row { display: block; padding: 8px 12px; margin: 8px 0; border-bottom: 2px solid var(--mud-palette-lines-default); }
    .invoice-list tbody .mud-table-cell {
        display: flex !important; justify-content: space-between; align-items: center;
        gap: 12px; padding: 4px 0 !important; min-height: 30px;
        min-width: 0 !important; width: auto !important; border: 0;
        font-size: .875rem; text-align: right !important; white-space: normal !important; overflow-wrap: anywhere;
    }
    .invoice-list tbody .mud-table-cell::before {
        content: attr(data-label); display: block; position: static; flex: 0 0 82px;
        text-align: left; font-weight: 500; font-size: .8125rem; color: var(--mud-palette-text-secondary);
    }
    .invoice-list tbody .mud-table-cell > * { min-width: 0; max-width: 100%; }
    .invoice-list .mud-chip { margin: 0; font-size: .75rem; }
    .invoice-list .d-flex.flex-row { flex-wrap: wrap; justify-content: flex-end; }
    .invoice-list tfoot, .invoice-list tfoot .mud-table-row { display: block; }
    .invoice-list tfoot .mud-table-cell { display: block; padding: 6px 12px; text-align: left !important; }
    .invoice-list tfoot .mud-table-cell:empty { display: none; }
}

@media (max-width: 900px) {
    /* Uniform captions for all button variants, including native PWA controls. */
    button, .mud-button-root { font-size: .75rem; }
    .faktury-mobile-fullscreen { padding: 4px 8px; gap: 5px; }
    .mud-typography-caption { font-size: .6875rem; }
    .mud-button-root.mud-button .mud-button-label,
    .mud-button-root.mud-button .mud-typography { font-size: .75rem; line-height: 1.25; }
    .mud-fab.mud-button-root { font-size: .75rem; }
    .mud-button-group .mud-button-root { font-size: .75rem; }
}

/* Summary first, details on demand. Same row and inputs remain mounted. */
.mobile-summary-cell { display: none !important; }
.mobile-record-heading { display: none; }
@media (max-width: 900px) {
    .mobile-compact-table .mud-table-container { overflow: visible !important; height: auto !important; }
    .mobile-compact-table .mud-table-root, .mobile-compact-table .mud-table-body { display: block; width: 100%; }
    .mobile-compact-table .mud-table-head { display: none !important; }
    .mobile-compact-table :is(.mud-table-body, .mud-table-foot) > .mud-table-row {
        display: block; position: relative; padding: 0 !important; margin: 0 !important;
        border: 0; border-bottom: 1px solid var(--mud-palette-lines-default); border-radius: 0;
    }
    .mobile-compact-table :is(.mud-table-body, .mud-table-foot) > .mud-table-row > .mud-table-cell { display: none !important; }
    .mobile-compact-table :is(.mud-table-body, .mud-table-foot) > .mud-table-row > .mobile-summary-cell {
        display: block !important; padding: 0 !important; min-width: 0 !important; width: 100% !important; border: 0;
    }
    .mobile-summary-cell::before { display: none !important; }
    .mobile-record-summary {
        display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 10px 8px;
        border: 0; background: transparent; color: var(--mud-palette-text-primary);
        text-align: left; font: inherit; font-size: 12px; cursor: pointer;
    }
    .mobile-record-summary:has(.mobile-record-description) { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding-right: 8px !important; }
    .mobile-summary-cell:has(.mobile-record-actions button) .mobile-record-summary:has(.mobile-record-description) { grid-template-columns: minmax(0, 1fr) auto 40px; }
    .mobile-record-description { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
    .mobile-record-text { display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
    .mobile-record-text strong { font-size: 12px; flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
    .mobile-record-text strong:only-child { max-width: 100%; }
    .mobile-record-text span { min-width: 0; flex: 1; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-record-text.mobile-record-long-number { flex-direction: column; gap: 3px; align-items: stretch; }
    .mobile-record-amount { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 600; }
    .mobile-record-chevron { font-size: 24px; color: var(--mud-palette-primary); }
    .mobile-selectable .mud-table-row:has(> [data-label="Wybr."]) > .mobile-summary-cell,
    .mobile-selectable .mud-table-row:has(> [data-label="Wystaw"]) > .mobile-summary-cell { padding-left: 44px !important; }
    .mobile-selectable :is(.mud-table-body, .mud-table-foot) > .mud-table-row > :is([data-label="Wybr."],[data-label="Wystaw"]) {
        display: flex !important; position: absolute; left: 0; top: 5px; width: 44px !important; padding: 0 !important; border: 0;
    }
    .mobile-selectable :is([data-label="Wybr."],[data-label="Wystaw"])::before { display: none !important; }
    .mobile-compact-table :is(.mud-table-body, .mud-table-foot) > .mud-table-row.mobile-record-open {
        position: fixed; inset: var(--record-top, 0px) 0 auto; z-index: 1400; width: 100vw; height: var(--record-height, 100dvh);
        display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain;
        background: var(--mud-palette-surface, #fff) !important; padding: 0 16px max(24px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box; border: 0; gap: 0;
    }
    .mobile-compact-table :is(.mud-table-body, .mud-table-foot) > .mobile-record-open > .mud-table-cell {
        display: block !important; flex: 0 0 auto; position: static; padding: 10px 0 !important;
        width: 100% !important; max-width: 100%; min-width: 0 !important; border: 0;
        text-align: left !important; white-space: normal; font-size: 14px;
    }
    .mobile-record-open > .mud-table-cell::before {
        content: attr(data-label); display: block; position: static; text-align: left;
        font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 4px;
    }
    .mobile-record-open > .mobile-summary-cell {
        order: -1; position: sticky !important; top: 0; z-index: 2; background: var(--mud-palette-surface);
        padding: max(8px, env(safe-area-inset-top)) 0 8px !important;
    }
    .mobile-record-open .mobile-record-summary { display: none; }
    .mobile-record-open .mobile-record-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .mobile-record-header-actions { margin-left: auto; flex: 0 0 auto; }
    .mobile-record-header-actions:empty { display: none; }
    .mobile-record-header-actions .mobile-line-delete { min-height: 44px !important; min-width: 64px !important; }
    .mobile-record-heading:has(.mobile-line-delete) > strong { flex-basis: 100%; font-size: 14px; }
    .mobile-record-open:has(.mobile-line-delete) > [data-label="Usuń pozycję"] { display: none !important; }
    .app-back-button, #invoice-editor .invoice-actions > .app-back-button {
        display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
        min-height: 48px; width: auto; flex: 0 0 auto; padding: 8px 12px;
        color: var(--mud-palette-text-primary); border: 1px solid currentColor; border-radius: 6px;
        background: var(--mud-palette-surface); font-size: 14px !important; font-weight: 600; cursor: pointer;
    }
    .app-back-button > span[aria-hidden], .app-back-button .mud-svg-icon { font-size: 28px !important; }
    .app-back-button .mud-button-label { font-size: 14px !important; }
    /* Spin buttons stay inside their own input; row action sizing must not affect them. */
    .app-numeric-field .mud-input { position: relative; min-height: 48px; }
    .app-numeric-field .mud-input-numeric-spin button,
    .app-numeric-field .mud-input-numeric-spin .mud-icon-button {
        min-width: 28px !important; width: 28px !important; min-height: 20px !important; height: 20px !important;
        padding: 0 !important; align-self: auto !important;
    }
    .app-numeric-field input { font-size: 16px; }
    .mud-dialog:has(.mud-input-control) { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; }
    .mud-dialog .mud-dialog-content { overflow-y: auto; }
}
@media (max-width: 360px) { .mobile-record-amount { display: none; } }
@media (max-width: 900px) {
    .mobile-details-record { border-bottom: 1px solid var(--mud-palette-lines-default); }
    .mobile-details-record > .mobile-summary-cell { display: block !important; }
    .mobile-details-record > .mobile-details-content { display: none; }
    .mobile-details-record.mobile-record-open {
        position: fixed; inset: var(--record-top, 0px) 0 auto; z-index: 1400; height: var(--record-height, 100dvh); overflow-y: auto;
        background: var(--mud-palette-surface, #fff) !important; padding: 0 16px 24px; overscroll-behavior: contain;
    }
    .mobile-details-record.mobile-record-open > .mobile-details-content { display: block; }
    .mobile-record-open > .mobile-details-content::before { display: none; }
}
@media (max-width: 900px) {
    .mobile-record-actions { float: right; }
    .mobile-record-actions:empty { display: none; }
}
@media (max-width: 900px) {
    .mobile-record-actions { float: none; position: absolute; right: 0; top: 5px; z-index: 1; }
    .mobile-summary-cell:has(.mobile-record-actions button) .mobile-record-summary { padding-right: 48px; }
}

@media (max-width: 900px) {
 .mobile-compact-table .mud-table-foot { display: block; width: 100%; }
 .mobile-compact-table .mud-table-foot .mobile-record-summary { font-weight: 600; color: var(--mud-palette-primary); }
}
@media (max-width: 900px) {
    .mobile-more-button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--mud-palette-primary); font-size: 26px; cursor: pointer; }
    .mobile-record-open .mobile-record-actions { display: none; }
}

/* Keep full-screen details above the app bar, outside ancestor stacking/clipping.
   Inputs stay in the original Blazor tree. A row hover/selection must never
   make this surface translucent. Popovers and dialogs remain above details. */
@media (max-width: 900px) {
    /* Blazor may replace an ancestor class during a render. Keep the same
       protection derived from the open surface, independent of that class. */
    .mobile-record-ancestor,
    body.mobile-record-active :has(.mobile-record-open) {
        z-index: auto !important; transform: none !important; filter: none !important;
        perspective: none !important; contain: none !important; isolation: auto !important;
        will-change: auto !important; overflow: visible !important; clip-path: none !important;
    }
    body.mobile-record-active .mobile-record-open,
    body.mobile-record-active .mobile-record-open:hover {
        background-color: var(--mud-palette-surface, #fff) !important;
        background-image: none !important; opacity: 1 !important;
    }
    body.mobile-record-active .mud-popover-open { z-index: 1600 !important; }
    body.mobile-record-active .mud-dialog-container { z-index: 1500 !important; }
    .mobile-record-open .mobile-record-heading > strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}