html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: #b71c1c;
    color: #ffffff;
    font-weight: 500;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 2.5rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .reload {
        color: #ffffff;
        font-weight: 700;
        text-decoration: underline;
    }

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

.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: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 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");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Display-only fields carry the explicit "readonly-field" class. MudBlazor gives a read-only
   MudTextField no distinct styling and adds no .mud-readonly class to plain text inputs (only
   selects/checkboxes/switches), and its readonly markup also covers interactive selects/date-pickers
   — so we opt fields in by name. Lock at the START so it never clashes with an end-adornment; text
   stays selectable. .readonly-field is on the .mud-input-control root. */
.readonly-field .mud-input {
    background-color: rgba(128, 128, 128, .07);
}

.readonly-field input,
.readonly-field textarea {
    color: var(--mud-palette-text-secondary);
    cursor: text;
    padding-left: 1.6rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.3rem center;
    background-size: 1rem;
}

/* Shared fill-remaining layout for the POS screens (order / settle / restaurant).
   The page body flexes to fill the viewport below the app bar so the sticky bottom
   nav bar sits at the true screen bottom (no dead band) and the inner panes scroll
   rather than the page. Replaces the per-screen magic-number calc(100vh - 250/260/
   160px) guesses with ONE consistent offset. 120px ~= dense MudAppBar (48) + the
   MudContainer pa-4 top/bottom (32) + the breadcrumb row (~40). 100dvh tracks the
   *visible* mobile viewport (100vh counts the area behind the Android/iOS URL bar,
   which is what left a gap/scrollbar); the 100vh line is a fallback for old engines. */
.pos-fill-root {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
}

/* Responsive button-menu grid for the full-width landing pages (Back Office,
   Reports home). FullWidth buttons in these cells fill the column, so a menu of
   buttons uses the whole desktop width (auto-fill packs as many ~240px columns as
   fit) yet collapses to a single column on a phone — instead of one skinny centred
   stack that left most of a wide screen empty. */
.btn-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

/* CollapsibleCard (report sections): MudBlazor gives an OPEN collapse overflow-y:auto, so a chart's
   fraction-of-a-pixel overflow (slanted axis labels) drew a scrollbar's arrows down the card. The
   body is sized to its content, so clip instead. (Not "visible": beside MudBlazor's overflow-x:hidden
   that computes back to auto.) */
.collapsible-card__body.mud-collapse-entered .mud-collapse-wrapper {
    overflow-y: hidden;
}

/* ReportChartGrid: MudChart draws its legend ~3px past the chart box, hence the margin; and it
   right-aligns the y-axis labels 20px into its svg, so a wider one ("1,5k") lost its first characters
   at the svg's edge — let the labels draw past it. Inside a CollapsibleCard the collapse wrapper
   clips at the chart's own left edge (MudGrid's negative margin eats the item padding), so the box
   keeps 8px of room for them. */
.report-chart {
    margin-bottom: 4px;
    padding-left: 8px;
}

.report-chart svg {
    overflow: visible;
}

/* A report's receipt text (Report Sets' Receipt tab, FullSummaryView / EOD Range "Report" tabs).
   The POS lays it out in 42-character thermal lines; the font scales with the box so a line always
   fits — full size on a wide screen, down to 8px on a phone (100cqw / 26 ≈ 42 monospace characters
   at 0.6em each, with a little slack). The few longer lines (the FILTERS header, a paid-in comment)
   wrap instead of forcing a sideways scroll. The first font-size is the fallback for a browser
   without container units. */
.receipt-text {
    container-type: inline-size;
}

.receipt-text pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    line-height: 1.3;
    font-size: 0.78rem;
    font-size: clamp(8px, calc(100cqw / 26), 0.78rem);
}

/* Reports on a phone (below MudBlazor's sm, 600px). Nested cards leave a 375px screen ~230px for a
   report table, so: SectionTable cells get 6px sides instead of 16/24, and no room is held for the
   sort arrow (invisible until hovered, which a touch screen never does). The report output tab
   strips (.report-tabs) drop their icons and let tabs shrink to the text — MudTabs pins
   min-width:160px INLINE, hence !important — so Web / Receipt / PDF / Excel all show instead of one
   tab behind a scroll arrow. */
@media (max-width: 599.98px) {
    .section-table .mud-table-dense .mud-table-row .mud-table-cell {
        padding-left: 6px;
        padding-right: 6px;
        padding-inline-start: 6px;
        padding-inline-end: 6px;
    }

    .section-table .mud-table-sort-label-icon.mud-direction-none {
        display: none;
    }

    /* a several-series chart legend (ReportChartGrid) wraps to a second line, ~45px past the box */
    .report-chart--legend {
        margin-bottom: 48px;
    }

    .report-tabs .mud-tab {
        min-width: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .report-tabs .mud-tab .mud-icon-root {
        display: none;
    }

    /* A MudButtonGroup never wraps, so three icon buttons (Report Sets' Business Days / Calendar
       Days / Clock In/Out) ran off the card: split the width evenly instead, no icons, labels wrap. */
    .phone-fill-group {
        display: flex;
        width: 100%;
    }

    .phone-fill-group .mud-button-root {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .phone-fill-group .mud-button-icon-start {
        display: none;
    }
}