/* ── Loader utility ─────────────────────────────────────────────────────── */
.no-back {
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   To retheme the entire application, change values here only.
   Every rule below references these variables — nothing else is hardcoded.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ──────────────────────────────────────────────────────────── */
    --clr-primary:          #4c2b95;   /* main brand purple                 */
    --clr-primary-light:    #7050b8;   /* selected row background           */
    --clr-primary-dark:     #3c1e6e;   /* hover states, gradient mid        */
    --clr-primary-darker:   #2a1250;   /* gradient bottom, deep shadows     */

    /* ── Text / icons on primary-coloured surfaces ──────────────────────── */
    --clr-on-primary:       #ffffff;

    /* ── Sidebar / nav tints (white at varying opacity) ─────────────────── */
    --clr-nav-text:         rgba(255, 255, 255, 0.85);
    --clr-nav-text-dim:     rgba(255, 255, 255, 0.45);  /* section labels   */
    --clr-nav-icon:         rgba(255, 255, 255, 0.70);
    --clr-nav-hover-bg:     rgba(255, 255, 255, 0.15);
    --clr-nav-active-bg:    rgba(255, 255, 255, 0.25);
    --clr-nav-divider:      rgba(255, 255, 255, 0.15);

    /* ── Light-tint surfaces ─────────────────────────────────────────────── */
    --clr-surface:          #f4f0fb;   /* toolbar, pagination bg            */
    --clr-surface-border:   #d0c8e8;   /* table / input borders             */
    --clr-row-stripe:       #f8f6fc;   /* zebra stripe                      */
    --clr-row-hover:        #ede0ff;   /* table row hover                   */
    --clr-row-selected:     #d6c8f0;   /* MudTable mud-selected-item        */

    /* ── General text ────────────────────────────────────────────────────── */
    --clr-text:             #1a1a2e;
    --clr-text-muted:       #9e9e9e;

    /* ── MudBlazor palette overrides (so Color.Primary components pick up our brand) ── */
    --mud-palette-primary:                  #4c2b95;
    --mud-palette-primary-rgb:              76,43,149;
    --mud-palette-primary-text:             #ffffff;
    --mud-palette-primary-darken:           #3c1e6e;
    --mud-palette-primary-lighten:          #7050b8;
    --mud-palette-primary-hover:            rgba(76, 43, 149, 0.08);
    --mud-palette-background:               #F4F4F4;
    --mud-palette-background-gray:          #F4F4F4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #F4F4F4 !important;
}

/* Override MudBlazor's default body/surface so all pages sit on the app bg */
body.mud-drawer-open,
.mud-application-layout,
.mud-main-content {
    background-color: #F4F4F4 !important;
}

main {
    background-color: #F4F4F4;
}

/* ── Shared content panel (white card wrapping page content) ─────────────────── */
.rt-content-panel {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.rt-summary-card {
    background-color: #f4f4f4 !important;
}

/* White background for outlined inputs sitting on the grey form bar */
.rt-input-white .mud-input-outlined,
.rt-input-white .mud-input-slot {
    background-color: #ffffff !important;
}

/* Inquiry/Review-Team dialog: cap content height and scroll vertically inside the modal */
.rt-inquiry-scroll {
    max-height: 75vh !important;
    overflow-y: auto !important;
}

/* ── Service date picker: day-of-week overlay inside the input ──────────── */
.svc-date-wrapper {
    position: relative;
}

.svc-date-day {
    position: absolute;
    left: calc(14px + 10ch + 16px);
    top: calc(50% + 4px);
    transform: translateY(-50%);
    color: var(--clr-text-muted);
    pointer-events: none;
    font-size: 1rem;
    line-height: 1;
}

/* ── Team Code field: resolved team name overlay inside the input ───────── */
.team-code-wrapper {
    position: relative;
}

.team-code-name {
    position: absolute;
    left: calc(14px + 6ch + 12px);
    right: 14px;
    top: calc(50% + 4px);
    transform: translateY(-50%);
    color: var(--clr-text-muted);
    pointer-events: none;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shared CSS spinner used in lookup dialogs and table loading states */
.lookup-loader {
    width: 65px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 9px solid;
    border-color: #4c2b95 #0000;
    animation: lookup-loader-spin 1s infinite;
}

@keyframes lookup-loader-spin {
    to { transform: rotate(.5turn); }
}

a, .btn-link {
    color: #006bb7;
}

.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;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

/* ── Dashboard header ─────────────────────────────────────────────────────── */
.dashboard-header {
    background: #f1f1f1 !important;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
    padding: 16px;
    margin-bottom: 20px;
}

.mud-paper.dashboard-header {
    background-color: #f1f1f1 !important;
}

/* ── Itinerary row status colours ─────────────────────────────────────────── */
.deleted-row td {
    background-color: #ffebee !important;
    text-decoration: line-through !important;
    color: #b71c1c !important;
}

.inserted-row td {
    background-color: transparent;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
    background: var(--clr-primary);
}

@media (min-width: 1200px) {
    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    /* Itinerary Editor — restore fixed desktop width (FullWidth:true is needed for mobile) */
    .mud-dialog.ied-dialog {
        max-width: 1200px !important;
    }
}

/* Base nav link text — white */
.sidebar .mud-nav-link {
    color: var(--clr-nav-text) !important;
}

/* Icons — always white */
.sidebar .mud-nav-link .mud-icon-root {
    color: var(--clr-on-primary) !important;
}

/* Hover */
.page .sidebar .mud-nav-link:hover {
    background-color: var(--clr-nav-hover-bg) !important;
    color: var(--clr-on-primary) !important;
    border-radius: 8px;
}

.page .sidebar .mud-nav-link:hover .mud-icon-root {
    color: var(--clr-on-primary) !important;
}

/* Active — white pill, primary text */
.page .sidebar .mud-nav-link.active {
    background-color: var(--clr-on-primary) !important;
    color: var(--clr-primary) !important;
    border-radius: 8px;
}

.page .sidebar .mud-nav-link.active .mud-icon-root {
    color: var(--clr-primary) !important;
}

/* ── MudButton filled primary ──────────────────────────────────────────────── */
.mud-button-filled-primary {
    background-color: var(--clr-primary) !important;
    color: var(--clr-on-primary) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--clr-primary-dark) !important;
}

/* ── MudChip primary ───────────────────────────────────────────────────────── */
.mud-chip.mud-chip-color-primary {
    background-color: var(--clr-primary) !important;
    color: var(--clr-on-primary) !important;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */

/* Equal-width columns: fixed layout distributes width evenly.
   Only apply when rows exist — NoRecordsContent uses a single colspan cell
   which breaks fixed layout header sizing. */
.mud-table-container table:has(.mud-table-body tr td[data-label]) {
    table-layout: fixed !important;
    width: 100% !important;
}
.mud-table-container table:not(:has(.mud-table-body tr td[data-label])) {
    width: 100% !important;
}

/* Tables that must show full column names: switch to auto layout so every
   column is as wide as its content requires. The container already has
   overflow-x: auto so the table scrolls horizontally when needed.
   The :has() mirrors the global fixed-layout rule so specificity wins. */
.rt-full-cols .mud-table-container table:has(.mud-table-body tr td[data-label]) {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}
.rt-full-cols .mud-table-head .mud-table-cell {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Last column: no right border */
.mud-table-head .mud-table-cell:last-child {
    border-right: none !important;
}

/* Review Team page: cap the content panel to the space left in the viewport so the
   PAGE never scrolls — only the tables inside it do (they each have their own fixed-
   height scrollbox below, same pattern as the employee table). 150px = everything
   ABOVE the panel's own box: dashboard header (~56) + article top padding (~18) +
   page title row (~48) + a small buffer. (The panel's own 16px padding is inside its
   border-box height, not part of this.) */
.rt-team-shell {
    max-height: calc(100vh - 150px);
    overflow: hidden;
}

/* Day + Itinerary tables (Review Team detail row): sticky-header via CSS, same
   fixed-scroll-box pattern as the employee table above them — so they scroll
   internally instead of overflowing the panel. */
.rt-full-cols .mud-table-container {
    max-height: 265px;
    overflow-y: auto;
}

.rt-full-cols .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Employee table: sticky-header via CSS (single table, no MudBlazor FixedHeader) */
.emp-table .mud-table-container {
    max-height: 215px;
    overflow-y: auto;
}

.emp-table .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Force auto layout for the employee table in BOTH states (before and after load).
   The global rule at .mud-table-container table:has(...) applies table-layout:fixed
   with specificity (0,3,3). We beat it by combining emp-table + mud-table + mud-table-container
   + table + mud-table-root for specificity (0,4,1). */
.emp-table.mud-table .mud-table-container table.mud-table-root {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 860px !important;
}

/* Allow header text to wrap instead of being clipped.
   The global rule forces nowrap+ellipsis on all headers, which causes
   "CLOSE..." / "TOT ..." truncation when columns are narrower than the text.
   Overriding here lets the header row grow taller rather than clip. */
.emp-table .mud-table-head .mud-table-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Truncate long data in body cells so content doesn't push columns wider */
.emp-table .mud-table-body .mud-table-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Volunteer table: sticky-header via CSS (single table, no MudBlazor FixedHeader) */
.vol-table .mud-table-container {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.vol-table .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.vol-table.mud-table .mud-table-container table.mud-table-root {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 1075px !important;
}

.vol-table .mud-table-head .mud-table-cell {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.vol-table .mud-table-body .mud-table-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Header: primary bg, white bold text */
.mud-table-head .mud-table-cell {
    background-color: #4c2b95 !important;
    color: var(--clr-on-primary) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-right: 1px solid var(--clr-nav-divider) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Body cells: clip overflow so fixed layout doesn't break */
.mud-table-body .mud-table-row td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Body rows */
.mud-table-body .mud-table-row td {
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    color: var(--clr-text) !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Zebra stripe */
.mud-table-body .mud-table-row:nth-child(even) td {
    background-color: var(--clr-row-stripe) !important;
}

/* Row hover */
.mud-table-body .mud-table-row:hover td {
    background-color: var(--clr-row-hover) !important;
    cursor: pointer;
}

/* MudTable built-in selected row */
.mud-table-row.mud-selected-item td {
    background-color: var(--clr-row-selected) !important;
    color: var(--clr-primary) !important;
    font-weight: 600 !important;
}

/* Container border */
.mud-table-container {
    border: 1px solid var(--clr-surface-border) !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
}

/* Toolbar */
.mud-toolbar.mud-toolbar-dense {
    background-color: var(--clr-surface) !important;
    border-bottom: 2px solid var(--clr-primary) !important;
}

/* Pagination */
.mud-table-pagination {
    background-color: var(--clr-surface) !important;
    border-top: 1px solid var(--clr-surface-border) !important;
    font-size: 0.8rem !important;
}

/* ── Custom selected-row class (used in ReviewTeam / Itinerary tables) ──────── */
/* Use full MudBlazor path to beat .mud-table-body .mud-table-row td specificity */
.mud-table-body .mud-table-row.selected-row {
    outline: 2px solid var(--clr-primary, #4c2b95);
    outline-offset: -2px;
}
.mud-table-body .mud-table-row.selected-row td {
    background-color: transparent !important;
}

/* Required-field missing indicator — placed after stripe/hover/selected rules so it wins by source order */
.mud-table-body .mud-table-row td.cell-required-missing {
    background-color: #fff0f0 !important;
}

/* ── Review Team action buttons — equal minimum width ────────────────────── */
.rt-action-btn {
    min-width: 140px;
}

/* ── Itinerary Editor table: always fixed layout so <MudTh> widths are honoured
       in both edit mode (no DataLabel on cells) and read-only mode ────────── */
.ied-table-wrap .mud-table-container table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* ── Itinerary Editor dialog buttons — consistent width + padding ────────── */
.ied-btn {
    min-width: 110px;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET  (≤ 767 px) — sidebar becomes a slide-in overlay; tables
   scroll horizontally; dialogs are capped to viewport width.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    /* ── Force tables to stay in traditional layout (no MudBlazor card mode) */
    /* These override MudBlazor's built-in responsive card-mode styles        */
    .mud-table-root .mud-table-head {
        display: table-header-group !important;
    }
    .mud-table-root .mud-table-body .mud-table-row {
        display: table-row !important;
        border: none !important;
    }
    .mud-table-root .mud-table-body .mud-table-row td {
        display: table-cell !important;
        text-align: left !important;
    }
    .mud-table-root .mud-table-body .mud-table-row td::before {
        display: none !important;
        content: none !important;
    }
    /* Auto layout so tables scroll horizontally instead of being compressed  */
    .mud-table-container table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    /* ── Content area: tighter side padding ─────────────────────────────── */
    .content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* ── Review Team action buttons: allow wrap ─────────────────────────── */
    .rt-action-btn {
        min-width: 100px !important;
        font-size: 0.72rem !important;
    }

    /* ── Itinerary Editor toolbar buttons ───────────────────────────────── */
    .ied-btn {
        min-width: 78px !important;
    }
}