h1:focus { outline: none; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box;
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Tables */
.duplicate-row td { background: #fff4d6 !important; }
.table-scroll { overflow-x: auto; }
.records-table th, .records-table td { white-space: nowrap; }
.summary-table th, .summary-table td { white-space: nowrap; }
.summary-table td.num, .summary-table th.num { text-align: right; }
.summary-table tr.section td { background: #ececec; font-weight: 600; }
.summary-table td.total, .summary-table th.total { background: #f4f4f4; font-weight: 600; }
/* Rows hidden from client accounts (admins still see them) */
.summary-table tr.hidden-row td { color: #9a9a9a; }
.summary-label { display: inline-flex; align-items: center; gap: 2px; }
.summary-label .mud-icon-button { padding: 2px; }

/* Plain (non-interactive) pages: login and BA form */
.plain-page {
    min-height: calc(100vh - 64px); background: #f5f5f5; display: flex; justify-content: center; align-items: flex-start;
    padding: 24px 12px; box-sizing: border-box;
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; color: #1d1d1d;
}
.card {
    background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 24px;
    width: 100%; max-width: 520px; box-sizing: border-box;
}
.card h1 { font-size: 1.4rem; margin: 0 0 4px; }
.card .subtitle { color: #5f6b66; margin: 0 0 20px; font-size: .95rem; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: .95rem; }
.field .hint { color: #6b7280; font-size: .82rem; margin-top: 4px; }
/* Text fields start as one line and grow with each new line (app.js) */
.field textarea { resize: none; overflow-y: hidden; line-height: 1.25; }
/* Edit Record: the multi-line Text box is one line high until it holds more lines (browsers without field-sizing show 2 lines) */
.text-autosize textarea { field-sizing: content; min-height: 1lh; max-height: 12lh; resize: none; }
.field input, .field select, .field textarea {
    width: 100%; box-sizing: border-box; font-size: 1rem; padding: 10px 12px; border: 1px solid #c9d1cd;
    border-radius: 6px; background: #fff; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #1c1c1c; border-color: #1c1c1c; }
.required { color: #b91c1c; }
.btn {
    display: inline-block; width: 100%; padding: 12px; font-size: 1rem; font-weight: 600; border: 0; border-radius: 6px;
    background: #1c1c1c; color: #fff; cursor: pointer; text-align: center; text-decoration: none; box-sizing: border-box;
}
.btn:hover { background: #000000; }
.btn-secondary { background: #ececec; color: #1c1c1c; }
.btn-secondary:hover { background: #dcdcdc; }
.alert { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; font-size: .95rem; }
.alert-error { background: #fdecea; color: #8a1c12; }
.alert-success { background: #e6f4ea; color: #1e5b33; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Import */
.file-button { position: relative; display: inline-flex; align-items: center; padding: 6px 16px; border: 1px solid #1c1c1c; border-radius: 6px; color: #1c1c1c; font-weight: 500; cursor: pointer; text-transform: uppercase; font-size: .875rem; }
.file-button:hover { background: #f0f0f0; }
.file-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.preview-list { max-height: 160px; overflow-y: auto; font-size: .85rem; background: #f6f7f6; border-radius: 6px; padding: 8px 10px; }
/* Text columns size to their content; text longer than 480px wraps instead of widening the table */
.records-table .text-cell { width: max-content; max-width: 480px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Text and file cells grow downwards, so every cell lines up at the top of its row */
.records-table td { vertical-align: top; }

/* Site header with logo (plain pages) and app bar logo (admin/client pages) */
.site-header {
    height: 64px; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; box-sizing: border-box; font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
}
.site-logo { display: inline-flex; align-items: center; height: 100%; }
.site-logo img { height: 52px; width: auto; display: block; }
.app-header .site-logo img { height: 52px; }
.site-header-actions { display: flex; align-items: center; gap: 12px; }
.header-link { color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem; }
.header-link:hover { text-decoration: underline; }
.btn.btn-header { width: auto; padding: 8px 20px; background: #fff; color: #000; }
.btn.btn-header:hover { background: #e6e6e6; }

/* Landing page (placeholder content) */
.landing { text-align: center; max-width: 640px; margin: 8vh auto 0; }
.landing-logo { width: 180px; height: auto; border-radius: 12px; }
.landing h1 { font-size: 2rem; margin: 24px 0 8px; }
.landing p { color: #555; font-size: 1.05rem; margin: 0 0 28px; }
.btn.landing-cta { width: auto; padding: 12px 40px; }

/* Cover image behind the landing and login pages (blurred on login) */
.plain-page:has(> .cover) { position: relative; overflow: hidden; background: #0b0708; align-items: center; }
.cover { position: absolute; inset: 0; background: #0b0708 url(../images/cover.jpg) center / cover no-repeat; }
.cover-blurred { filter: blur(10px) brightness(.75); transform: scale(1.06); animation: cover-blur .4s ease-out; }
@keyframes cover-blur { from { filter: blur(0) brightness(1); transform: scale(1); } }
@media (max-aspect-ratio: 1/1) { .cover { background-size: contain; } }

/* Login */
.card.login-card {
    position: relative; max-width: 420px; padding: 32px; border-radius: 12px; border-top: 4px solid #941b1e;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}

/* Input labels stay above the field (ShrinkLabel) without the float animation. */
.mud-input-control .mud-input-label { transition: none !important; }

/* Top navigation: "EVENTS | MANAGE REGIONS | ..." */
.top-nav { display: flex; align-items: center; }
.top-nav-separator { color: rgba(255, 255, 255, 0.45); padding: 0 6px; user-select: none; }

/* Date filters on View Event / View Summary */
.filter-date { width: 170px; }

/* Sortable column headers (records and summary) */
.sort-header { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; user-select: none; white-space: nowrap; }
.sort-header .sort-icon { opacity: .35; font-size: 1rem !important; }
.sort-header.sorted .sort-icon, .sort-header:hover .sort-icon { opacity: 1; }
.sort-header:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 2px; }
.summary-table th.num .sort-header { justify-content: flex-end; }

/* Uploaded files */
.file-thumb { height: 48px; width: 48px; object-fit: cover; border-radius: 4px; display: block; border: 1px solid #ddd; }
.file-name { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.file-button.file-button-small { padding: 4px 10px; font-size: .8125rem; }
.file-list { display: flex; flex-wrap: wrap; gap: 4px; }
.file-chip { display: inline-flex; align-items: center; gap: 2px; }

/* Running days on Create/Edit Event */
.day-picker { display: flex; flex-wrap: wrap; gap: 4px; }

/* BA form: files upload as soon as they are picked (built by app.js) */
.file-items { list-style: none; margin: 0; padding: 0; }
.file-items:not(:empty) { margin-bottom: 8px; }
.file-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d6d6d6; border-radius: 6px; margin-bottom: 6px; font-size: .92rem; }
.file-item-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.file-item progress { flex: 1 1 100%; height: 6px; order: 3; }
.file-item.failed { border-color: #e0a39c; background: #fdf3f2; }
.file-item-error { color: #8a1c12; font-size: .85rem; flex: 1 1 100%; order: 2; }
.file-remove { border: 0; background: none; color: #8a1c12; font: inherit; font-weight: 500; cursor: pointer; padding: 0 2px; }

/* BA form: date calendar (built by app.js) */
.date-picker { position: relative; }
.date-picker-button {
    display: flex; justify-content: flex-start; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 10px 12px; text-align: left;
    border: 1px solid #c9d1cd; border-radius: 6px; background: #fff; color: inherit; cursor: pointer;
}
.date-picker-button.empty { color: #6b7280; }
.date-picker-button.invalid { border-color: #b91c1c; }
.date-picker-button:focus { outline: 2px solid #1c1c1c; border-color: #1c1c1c; }
.date-picker-popup {
    position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box;
    background: #fff; border: 1px solid #c9d1cd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 10px;
}
.date-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.date-picker-head button { border: 0; background: none; font-size: 1.4rem; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: inherit; }
.date-picker-head button:hover:not(:disabled) { background: #f0f0f0; }
.date-picker-head button:disabled { opacity: .3; cursor: default; }
.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-picker-dow { font-size: .75rem; color: #6b7280; padding: 4px 0; }
.date-picker-day { border: 0; background: none; font: inherit; height: 36px; border-radius: 50%; cursor: pointer; color: inherit; }
.date-picker-day:hover:not(:disabled) { background: #f0f0f0; }
.date-picker-day.today { box-shadow: inset 0 0 0 1px #1c1c1c; }
.date-picker-day.selected { background: #1c1c1c; color: #fff; }
.date-picker-day:disabled { color: #c4c4c4; cursor: default; text-decoration: line-through; }

/* BA pages: header, forms list */
.header-user { color: #fff; font-size: .9rem; opacity: .85; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-logout { margin: 0; }
.header-logout .btn.btn-header { padding: 6px 14px; }
.form-list { display: flex; flex-direction: column; gap: 10px; }
.form-link {
    display: block; padding: 14px 16px; border: 1px solid #d6d6d6; border-radius: 8px; text-decoration: none; color: inherit;
}
.form-link:hover, .form-link:focus { border-color: #1c1c1c; background: #fafafa; }
.form-link-name { display: block; font-weight: 600; font-size: 1.05rem; }
.form-link-dates { display: block; color: #5f6b66; font-size: .9rem; margin-top: 2px; }

/* BA form: outlet search box (built by app.js) */
.combo { position: relative; }
.combo-list {
    position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
    background: #fff; border: 1px solid #c9d1cd; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
    max-height: 280px; overflow-y: auto;
}
.combo-list li { padding: 10px 12px; cursor: pointer; font-size: .95rem; }
.combo-list li.active, .combo-list li[data-id]:hover { background: #f0f0f0; }
.combo-list li.combo-empty { color: #6b7280; cursor: default; }
.field input:disabled { background: #f3f3f3; color: #888; }
.field input[type=file] { padding: 8px; }
.form-actions { position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; margin-top: 8px; }

/* Stock */
.stock-negative, .stock-negative b { color: #b3261e !important; }
.stock-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stock-tile { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.stock-tile span { color: #5f6b66; font-size: .85rem; }
.stock-tile b { font-size: 1.5rem; font-weight: 600; }
.stock-tile-closing { border-color: #1c1c1c !important; }
.stock-history td.num, .stock-history th.num { text-align: right; white-space: nowrap; }
.stock-history tr.stock-balance td { background: #f4f4f4; font-weight: 600; }
.opening-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; }
.stock-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; }

/* Frozen headings on data tables (records, summaries, stock history). The table scrolls inside its own box,
   so the header row stays on top while scrolling down and still moves sideways with its columns.
   On PCs the first column (what each row is) also stays put; phones only keep the header row. */
/* The box is shorter than the screen by the top bar plus whatever sits below the table (pager, caption), so even
   with the page scrolled to the bottom the header row is never hidden behind the top bar. */
.freeze-table { --freeze-gap: 104px; }
.freeze-table.records-table { --freeze-gap: 152px; }
.freeze-table.stock-summary { --freeze-gap: 140px; }
.freeze-table .mud-table-container { max-height: calc(100vh - var(--freeze-gap)); max-height: calc(100dvh - var(--freeze-gap)); overflow: auto; }
.freeze-table thead th { position: sticky; top: 0; z-index: 3; background: #fff; box-shadow: inset 0 -1px 0 #e0e0e0; }
.freeze-table.summary-table thead th.total { background: #f4f4f4; }
@media (min-width: 600px) {
    .freeze-table th:first-child, .freeze-table td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: inset -1px 0 0 #e0e0e0; }
    .freeze-table thead th:first-child { z-index: 4; box-shadow: inset -1px -1px 0 #e0e0e0; }
    .freeze-table tr.section td:first-child { background: #ececec; }
    .freeze-table tr.stock-balance td:first-child { background: #f4f4f4; }
    .freeze-table .duplicate-row td:first-child { background: #fff4d6 !important; }
}

/* Filters fold away on phones */
.filter-toggle { display: none; }

/* ---------- Phones ---------- */
@media (max-width: 599.98px) {
    .mud-main-content > .mud-container { padding-left: 10px; padding-right: 10px; padding-top: 12px !important; }
    .mud-main-content h5, .mud-main-content .mud-typography-h5 { font-size: 1.25rem; }

    .filter-toggle { display: block; }
    .filter-bar { padding: 4px 8px !important; }
    .filter-bar:not(.open) .filter-body { display: none !important; }
    .filter-bar.open .filter-body { padding: 8px 4px; }
    .filter-body > * { flex: 1 1 100%; min-width: 0 !important; width: 100%; }
    .filter-date { width: 100%; }

    /* Pager and caption wrap onto more lines on phones */
    .freeze-table.records-table { --freeze-gap: 200px; }
    .freeze-table.stock-summary { --freeze-gap: 170px; }

    /* Metric names wrap so the week columns come into view sooner */
    .summary-table tbody tr:not(.section) td:first-child, .summary-table thead th:first-child {
        white-space: normal; min-width: 130px; max-width: 160px;
    }
    .records-table .text-cell { max-width: 240px; }

    .mud-dialog { margin: 8px !important; max-height: calc(100% - 16px) !important; }
    .mud-dialog .mud-dialog-actions { flex-wrap: wrap; }

    /* Tables not already in a .table-scroll wrapper still scroll instead of widening the page */
    .mud-simple-table .mud-table-container { overflow-x: auto; }
    .mud-table-pagination-toolbar { flex-wrap: wrap; height: auto !important; padding: 4px 8px !important; }
    .mud-table-pagination-toolbar .mud-table-pagination-caption { margin-left: 0; }
    .file-name { max-width: 140px; }

    /* Plain pages (login, BA forms) */
    .plain-page { padding: 12px 8px; }
    .card { padding: 18px 16px; }
    .card.login-card { padding: 22px 18px; }
    .site-header { padding: 0 10px; }
    .site-logo img { height: 44px; }
    .site-header-actions { gap: 8px; }
    .header-user { display: none; }
}