#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ---- VAT-REF application styles ----
   Everything below is layered on top of MudBlazor's own theme (see Theme/VatRefTheme.cs and
   MainLayout.razor) - it only fills gaps Mud's components don't cover (the pre-Blazor-boot
   loading screen, and a few grid/table tweaks specific to this app's editable Section E/F
   tables). Anywhere a color is needed, it references Mud's own theme-aware CSS custom
   properties (--mud-palette-*) rather than a hardcoded value, so it follows the light/dark
   toggle automatically instead of needing separate light/dark rules of its own. */

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    /* Falls back to plain colors before MudThemeProvider has injected its <style> block on
       first paint; var() silently uses the fallback until the custom property exists. */
    background: var(--mud-palette-background, #fff);
    color: var(--mud-palette-text-primary, #1c1e21);
}

/* Renders before Blazor has booted (no MudBlazor theme/dark-mode preference available yet), so
   colors are hardcoded to match VatRefTheme.cs's light/dark palettes rather than referencing
   --mud-palette-* custom properties, which don't exist until MudThemeProvider has rendered. */
.initial-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    text-align: center;
    background: #f4f6f9;
}

.initial-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(27, 77, 126, 0.15);
    border-top-color: #1b4d7e;
    animation: initial-loading-spin 0.8s linear infinite;
}

/* font-family set explicitly (matching body's own stack) rather than left to inherit: MudBlazor's
   own stylesheet resets plain, unclassed <p> tags back to the browser default serif font, and
   this loading screen intentionally has no MudBlazor component wrapping it. */
.initial-loading-title,
.initial-loading-text {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.initial-loading-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1b4d7e;
}

.initial-loading-text {
    margin: 0;
    font-size: 0.9rem;
    color: #54677a;
}

@keyframes initial-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .initial-loading-spinner {
        animation-duration: 2.4s;
    }
}

@media (prefers-color-scheme: dark) {
    .initial-loading {
        background: #10161d;
    }

    .initial-loading-spinner {
        border-color: rgba(121, 178, 232, 0.2);
        border-top-color: #79b2e8;
    }

    .initial-loading-title {
        color: #79b2e8;
    }

    .initial-loading-text {
        color: #9fb0c0;
    }
}

/* MudAppBar Elevation="0" keeps the modern "flat" look but still needs a hairline to separate it
   from the page content beneath it. */
.mud-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-footer {
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 2rem;
}

/* Used by LinkButton (and PrivacySettingsButton) app-wide in place of MudLink/<a> - a real,
   keyboard-focusable <button> restyled to read as plain inline link text wherever it appears,
   whether inline in a sentence or among the footer's other link buttons. */
.link-button {
    padding: 0;
    min-width: 0;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
    color: var(--mud-palette-primary);
}

    .link-button:hover {
        text-decoration: underline;
        background: transparent;
    }

/* Fixed to the viewport bottom rather than a modal: it must never trap keyboard focus, and
   dismissing it isn't itself a consent action - see ConsentBanner.razor. Kept below MudBlazor's
   own dialog/overlay z-index range so an opened "Dostosuj ustawienia" dialog still renders on top.
   pointer-events:none on the full-width wrapper (re-enabled only on the visible card) is
   deliberate: without it, this fixed strip spans the ENTIRE viewport width at the bottom of the
   screen and silently blocks clicks on whatever page content happens to sit underneath its empty
   flex padding, even though nothing is visibly there - a real interaction bug on narrower
   viewports/short pages, not just a test-automation nuisance. */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 1rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

    .consent-banner .mud-paper {
        width: 100%;
        max-width: 900px;
        pointer-events: auto;
    }

/* Single scroll owner for the grid: bounded height so both scrollbars sit at the edge of this
   box and stay reachable without scrolling the whole page down past every row first. MudSimpleTable's
   own inner .mud-table-container normally scrolls independently (see override below) - that would
   otherwise create a second, nested horizontal scrollbar positioned below all the rows again. */
.grid-wrapper {
    overflow: auto;
    max-height: 65vh;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* MudSimpleTable puts the Class="..." given to it on its OUTER wrapper <div>, not on the
   <table> element itself - this is a deliberately descendant selector, not `table.section-e-grid`.
   (The nested goods-lines-table below is plain HTML, not MudSimpleTable, so its class IS on the
   <table> tag directly - see the comment on that rule.) */
.section-e-grid .mud-table-container {
    overflow: visible;
    max-height: none;
}

.section-e-grid table {
    min-width: 1600px;
    font-size: 0.85rem;
}

/* Applied once column widths are frozen for resizing (see grid-columns.js) - table-layout:auto
   ignores explicit <col> widths, so dragging a handle only has a visible effect after this
   switches on. Left off otherwise so columns keep their normal content-based auto sizing. */
.grid-wrapper.layout-fixed .section-e-grid table {
    table-layout: fixed;
}

    .section-e-grid th,
    .section-e-grid td {
        padding: 0.25rem;
        white-space: nowrap;
    }

    .section-e-grid th {
        position: relative;
        background: var(--mud-palette-background-gray);
    }

    /* Sticky relative to .grid-wrapper (the scroll owner above), so column headers stay visible
       while scrolling down through rows. */
    .section-e-grid thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Stays inside its own <th>'s box (not overlapping the neighbor's) deliberately: thead th is
       position:sticky, which creates a stacking context per column - an overlapping handle would
       be painted over by the next column's th (same z-index, later in DOM order) and become
       unclickable despite a higher z-index of its own. */
    .col-resize-handle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 6px;
        cursor: col-resize;
        z-index: 3;
        touch-action: none;
    }

        .col-resize-handle:hover,
        .col-resize-handle:active {
            background: var(--mud-palette-primary);
            opacity: 0.6;
        }

    /* Grid cells are plain HTML inputs/selects, not MudTextField/MudSelect - see the comment in
       SectionEGrid.razor/SectionFGrid.razor for why (performance with dozens of rows). Styled by
       hand here to still look reasonably at home next to the rest of the Mud-themed app. Inputs
       stay borderless until hover/focus (a light "spreadsheet cell" feel); selects always show a
       visible box - see the rule below for why. */
    .section-e-grid input {
        width: 100%;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font-family: inherit;
    }

        .section-e-grid input:hover {
            border-color: var(--mud-palette-lines-inputs);
        }

    /* <select> elements MUST get an explicit, opaque background-color here (not "transparent" or
       left unset): a bare <select> keeps its browser/OS-native background (usually opaque white)
       behind whatever text color we apply. In dark mode that meant light-colored text painted on
       a native white box - invisible except for the browser's own dropdown arrow glyph, which
       isn't part of our styling and stayed visible regardless. appearance:none plus a hand-drawn
       chevron (recolored per theme below) replaces that native arrow so it also follows the
       palette instead of being stuck at the browser/OS default. */
    /* input.code-cell is a searchable code cell (country columns - see CodeCell.razor). It is a
       text input, not a <select>, but must read as the same kind of control, so it shares every
       rule below - including the hand-drawn chevron, which is the only hint that the cell has a
       list behind it. */
    .section-e-grid select,
    .section-e-grid input.code-cell,
    table.goods-lines-table select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        /* appearance:none drops the browser's native intrinsic-width reservation for the
           dropdown arrow, so an auto-sized column as narrow as a 2-letter country code can shrink
           the whole control down to just its padding - leaving room for the chevron but nothing
           else, which reproduces the exact "only the arrow is visible" bug this styling exists to
           fix. min-width guarantees a couple of characters are always visible next to it. */
        min-width: 60px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-radius: 4px;
        padding: 0.3rem 1.6rem 0.3rem 0.4rem;
        font-size: 0.85rem;
        background-color: var(--mud-palette-surface);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354677a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.35rem center;
        background-size: 14px;
        color: var(--mud-palette-text-primary);
        font-family: inherit;
        cursor: pointer;
    }

        .section-e-grid select:hover,
        .section-e-grid input.code-cell:hover,
        table.goods-lines-table select:hover {
            border-color: var(--mud-palette-primary);
        }

    /* Chevron recolored to match dark mode's TextSecondary - see MainLayout.razor, which sets
       this class on the app root based on the current theme. */
    .theme-dark .section-e-grid select,
    .theme-dark .section-e-grid input.code-cell,
    .theme-dark table.goods-lines-table select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }

    /* Dropdown cells (country/currency/document-type codes etc.) are short values, but a native
       <select>'s own intrinsic width is driven by its WIDEST option text, not the selected value
       - without a cap here, one long option (e.g. "Niemiecki numer podatkowy") inflates the whole
       column even though most rows show a 2-3 letter code.

       NOTE this is a descendant selector and the goods-lines-table is rendered *inside* this same
       MudSimpleTable, so it catches those selects too - they are exempted explicitly below rather
       than by wishful thinking. */
    .section-e-grid select,
    .section-e-grid input.code-cell {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .section-e-grid input:disabled,
    .section-e-grid select:disabled,
    table.goods-lines-table input:disabled,
    table.goods-lines-table select:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* The "Towary" column opens a detail panel rather than editing inline, so its content is a
       variable-length summary, not a value worth widening the grid for - kept small and truncated
       instead of being stretchable via drag-resize (no handle is rendered for it, see
       SectionEGrid.razor/SectionFGrid.razor). */
    .goods-summary-btn {
        max-width: 170px;
        justify-content: flex-start;
    }

        /* Ellipsis has to land on the inner label span, not the flex button itself, and needs
           min-width:0 so the flex item is actually allowed to shrink below its text's natural width. */
        .goods-summary-btn .mud-button-label {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }

        .section-e-grid input:focus,
        .section-e-grid select:focus {
            border-color: var(--mud-palette-primary);
            outline: 2px solid var(--mud-palette-primary-lighten);
            outline-offset: -1px;
        }

        .section-e-grid input.cell-invalid,
        .section-e-grid select.cell-invalid {
            background-color: var(--mud-palette-error-lighten);
            border-color: var(--mud-palette-error);
        }

        /* Non-blocking issues (e.g. a duplicate document/invoice reference number) - amber rather
           than the error red, since these don't prevent XML generation, just flag something worth
           a second look. */
        .section-e-grid input.cell-warning,
        .section-e-grid select.cell-warning {
            background-color: var(--mud-palette-warning-lighten);
            border-color: var(--mud-palette-warning);
        }

/* ---- Code-cell dropdown panel (CodeCell.razor) ----
   Deliberately mirrors MudBlazor's own popover surface (elevation-8 shadow, surface background,
   4px radius) so a grid cell's dropdown reads as the same control as the MudSelect/MudAutocomplete
   dropdowns elsewhere in the app, even though it is hand-rolled rather than a Mud component.

   position:fixed is load-bearing, not a style choice: .grid-wrapper is the scroll owner
   (overflow:auto), so an absolutely positioned panel would be clipped at the wrapper's edge -
   precisely where a dropdown on one of the last visible rows needs to open. Coordinates are set by
   vatRefInterop.anchorDropdown, which also keeps them in sync while scrolling. */
.code-cell-panel {
    position: fixed;
    /* Above MudSimpleTable's sticky header (z-index 2) and the grid wrapper, below Mud's own
       modal/popover layer so a dialog opened over the grid still covers it. */
    z-index: 1200;
    /* The panel lists every match, not a truncated slice, so this height is what makes a 400-entry
       list navigable rather than overwhelming - the list scrolls, and
       vatRefInterop.scrollOptionIntoView keeps the keyboard highlight inside it. */
    max-height: 320px;
    overflow-y: auto;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    /* No vertical padding on purpose: scrollOptionIntoView positions rows arithmetically as
       index * OptionHeightPx, and padding here would offset every row from that calculation. */
    padding: 0;
    font-size: 0.85rem;
}

/* height (not padding) is load-bearing: the list renders through Blazor's <Virtualize>, which sizes
   its spacers from a fixed ItemSize - CodeDropdownBase.OptionHeightPx. If these two ever disagree,
   the scrollbar and the keyboard highlight drift apart from what is on screen. Keep them in step. */
.code-cell-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    height: 32px;
    padding: 0 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
}

    /* Hover and keyboard highlight share one appearance on purpose: arrowing down and moving the
       mouse must not produce two competing "current item" indicators. */
    .code-cell-option:hover,
    .code-cell-option.highlighted {
        background-color: var(--mud-palette-action-default-hover);
    }

.code-cell-option-code {
    font-family: monospace;
    font-weight: 600;
    min-width: 2.5em;
}

.code-cell-option-label {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The form-field variant (CodeAutocomplete) sits in a MudGrid column, so its panel should track the
   field's width rather than the grid cell's few characters. anchorDropdown sets min-width from the
   anchor; this keeps a long tax-office name from stretching the panel past it. */
.code-autocomplete + .code-cell-panel {
    max-width: min(32rem, 90vw);
}

.row-num-cell {
    text-align: center;
    background: var(--mud-palette-background-gray);
    font-variant-numeric: tabular-nums;
}

pre.xml-preview {
    margin: 0;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Section E/F goods-lines master-detail */

tr.goods-detail-row td {
    background: var(--mud-palette-background-gray);
    padding: 0.75rem;
}

.goods-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Plain HTML <table class="goods-lines-table">, so this class sits directly on the table itself
   (unlike .section-e-grid above, which is MudSimpleTable's outer wrapper div). */
table.goods-lines-table {
    border-collapse: collapse;
    /* Fills the detail panel rather than shrink-wrapping its content, so the columns below have
       real width to distribute. */
    width: 100%;
    min-width: 640px;
    font-size: 0.85rem;
    background: var(--mud-palette-surface);
}

    /* Undoes the 140px cap that .section-e-grid select imposes on every <select> nested anywhere
       inside the outer grid (see the note on that rule). The goods columns hold descriptive labels
       like "3 - Paliwo do środków transportu", not 2-letter codes, so they take whatever width
       their column has instead. Wins on specificity: (0,1,2) here vs (0,1,1) there. */
    table.goods-lines-table select {
        max-width: none;
    }

    /* Explicit widths because table-layout is auto: left to itself the browser hands nearly all the
       spare width to the free-text "Opis towaru" column and leaves the two code columns at their
       content width, which is the "selects don't fill the cell" the widths below fix. */
    table.goods-lines-table th:nth-child(1),
    table.goods-lines-table td:nth-child(1) {
        width: 26%;
    }

    table.goods-lines-table th:nth-child(2),
    table.goods-lines-table td:nth-child(2) {
        width: 26%;
    }

    table.goods-lines-table th:nth-child(4),
    table.goods-lines-table td:nth-child(4) {
        width: 10%;
    }

    /* The trailing delete-button column should stay exactly as wide as its icon. */
    table.goods-lines-table th:last-child,
    table.goods-lines-table td:last-child {
        width: 1%;
        white-space: nowrap;
    }

    table.goods-lines-table th,
    table.goods-lines-table td {
        border: 1px solid var(--mud-palette-lines-default);
        padding: 0.3rem;
    }

    table.goods-lines-table th {
        background: var(--mud-palette-background-gray);
        text-align: left;
        font-size: 0.78rem;
    }

    /* table.goods-lines-table select is styled by the shared rule up above (next to
       .section-e-grid select), so only the plain-text input needs its own rule here. */
    table.goods-lines-table input {
        min-width: 140px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-radius: 4px;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font-family: inherit;
    }

    table.goods-lines-table select {
        min-width: 140px;
    }

        table.goods-lines-table input.cell-invalid,
        table.goods-lines-table select.cell-invalid {
            background-color: var(--mud-palette-error-lighten);
            border-color: var(--mud-palette-error);
        }

/* ---- Legal pages (Informacje prawne / Regulamin / Polityka prywatności / Licencje) ----
   Kept readable at a comfortable line length and, since these are meant to be printed/saved
   rather than trapped in a modal, styled to still look reasonable via the browser's own
   print-to-PDF (see the @media print rule below) rather than requiring a dedicated export button. */
.legal-page {
    line-height: 1.6;
}

.license-table-wrapper {
    overflow-x: auto;
}

.license-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

    .license-table th,
    .license-table td {
        border: 1px solid var(--mud-palette-lines-default);
        padding: 0.5rem;
        text-align: left;
        vertical-align: top;
    }

    .license-table th {
        background: var(--mud-palette-background-gray);
    }

/* Numbered "ustępy" inside a § of the Regulamin (and the lettered sub-points beneath them).
   Deliberately a real <ol> rather than MudList: the cross-references in the legal text are written
   as "§ 12 ust. 4", so the numbering the reader sees has to be the actual list numbering - an
   unnumbered list would make every one of those references unverifiable on screen. */
.legal-list {
    margin: 0 0 0 1.25rem;
    padding: 0;
    font-size: 0.875rem;
}

    .legal-list > li {
        margin-bottom: 0.4rem;
    }

    .legal-list ol {
        list-style-type: lower-latin;
        margin: 0.35rem 0 0.35rem 1.25rem;
        padding: 0;
    }

@media print {
    .mud-appbar,
    .app-footer,
    .consent-banner,
    .legal-page a[href="/"] {
        display: none !important;
    }

    .legal-page {
        color: #000;
    }
}