::deep .mud-input {
    z-index: 10 !important;
}

::deep .mud-picker {
    z-index: 10 !important;
}

::deep .mud-picker-open {
    z-index: 1500 !important;
}

::deep .mud-overlay {
    z-index: 1400 !important;
}

::deep .mud-popover {
    z-index: 1500 !important;
}

.modal-backdrop.show {
    z-index: 99 !important;
}

    .modal-backdrop.show.backdrop-nested {
        z-index: 999 !important;
    }

.modal.show {
    z-index: 999 !important;
}

.modal.modal-nested.show {
    z-index: 9999 !important;
}

.main-content {
    padding: 34px 45px;
    flex: 1; /* Take up the remaining space */
    display: flex;
    flex-direction: column;
    position: relative;
}

    .main-content .loaderWrapper {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(236, 236, 236, 0.9); /* Adjusted background color */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Ensure the loader is on top */
    }

#loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ecececb5;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
}

.filter-select {
    width: 85px;
    padding-left: 6px !important;
    padding-right: 0px !important;
}

.custom-datepicker .mud-input-control {
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 5px;
    background: white;
    width: 175px !important;
    height: 41px;
    border-radius: 8px !important;
}

.textSmall {
    width: 110px !important;
}

.custom-datepicker .mud-button-root {
    display: none !important;
}

.mud-shrink + .mud-input-label {
    display: none !important;
}

.custom-datepicker .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0px !important;
}

.custom-datepicker .mud-input.mud-input-underline:before {
    border-bottom: none !important;
}

.custom-datepicker .mud-input-label-inputcontrol {
    transform: translate(5px, 5px) scale(1) !important;
}

.custom-datepicker .mud-input-control.mud-input-control-margin-dense {
    margin: 0px 0px !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-datepicker .mud-icon-size-medium {
    font-size: 14px !important;
    margin-left: 0px !important;
    margin-right: 10px !important;
    margin-top: 2px !important;
}

.mud-picker-inline.mud-picker-input-button .mud-input:focus, .mud-picker-inline.mud-picker-input-button .mud-input .mud-input-root:focus {
    font-family: 'DM Sans', sans-serif !important;
    color: #212529
}

    .mud-picker-inline.mud-picker-input-button .mud-input, .mud-picker-inline.mud-picker-input-button .mud-input .mud-input-root:focus::placeholder {
        color: #212529 !important
    }

input::placeholder, textarea::placeholder {
    color: #212529 !important;
}

.custom-datepicker input {
    font-size: 14px !important;
    padding-bottom: 0px !important;
}

.custom-datepicker .mud-input-adornment {
    display: none !important;
}

.custom-datepicker .mud-input-control > .mud-input-control-input-container {
    left: 5px;
}

.custom-datepicker .mud-input.mud-input-underline:after {
    display: none !important;
}

.custom-datepicker .mud-button-root.mud-input-clear-button {
    display: block !important;
    position: relative;
    left: -9%;
}

@media (min-width:992px) {
    .w-lg-60 {
        width: 60% !important;
    }

    .w-lg-200px {
        width: 200px !important;
    }
}

#barChartId .chart-legend {
    display: none !important;
}

.form-check-input:checked {
    background-color: #000 !important;
}

input[type="checkbox"]:not(.form-check-input) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line, #dcd8d2) !important;
    border-radius: 6px !important; /* design rounded box — warm tokens (fall back off-scope) */
    background-color: var(--surface, #fff) !important;
    cursor: pointer;
    position: relative;
    flex: none;
    transition: background-color .12s, border-color .12s;
}

    /* Checked state — accent box + white checkmark (design) */
    input[type="checkbox"]:not(.form-check-input):checked {
        background-color: var(--accent, #c65a2e) !important;
        border-color: var(--accent, #c65a2e) !important;
    }
    input[type="checkbox"]:not(.form-check-input):checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 6px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Hover */
    input[type="checkbox"]:not(.form-check-input):hover {
        border-color: var(--accent, #c65a2e);
    }


    input[type="checkbox"]:not(.form-check-input):disabled {
        opacity: 0.3 !important;
    }



.blazored-toast-container {
    z-index: 1050 !important;
}

.modal .modal-header h5 {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 32px !important;
}

.form-check-input:checked {
    background-color: #000 !important;
}

input[type="checkbox"]:not(.form-check-input) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line, #dcd8d2) !important;
    border-radius: 6px !important; /* design rounded box — warm tokens (fall back off-scope) */
    background-color: var(--surface, #fff) !important;
    cursor: pointer;
    position: relative;
    flex: none;
    transition: background-color .12s, border-color .12s;
}

    /* Checked state — accent box + white checkmark (design) */
    input[type="checkbox"]:not(.form-check-input):checked {
        background-color: var(--accent, #c65a2e) !important;
        border-color: var(--accent, #c65a2e) !important;
    }
    input[type="checkbox"]:not(.form-check-input):checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 6px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Hover */
    input[type="checkbox"]:not(.form-check-input):hover {
        border-color: var(--accent, #c65a2e);
    }


    input[type="checkbox"]:not(.form-check-input):disabled {
        opacity: 0.3 !important;
    }

/* Higher-specificity guard (0,4,1): the rule above (0,2,1) was being beaten on some pages by a
   later framework stylesheet, leaving native accent-color checkboxes — the Roles page only looked
   right because its .dcheck rule out-specified that override. These extra :not() guards raise
   specificity above it so appearance:none wins on EVERY bare checkbox, matching the .dcheck box.
   Excludes real framework checkboxes (.form-check-input, MudBlazor, role=switch toggles). */
input[type="checkbox"]:not(.form-check-input):not(.mud-checkbox-input):not([role="switch"]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;   /* match the Roles .dcheck box exactly so the tick lines up */
    height: 20px !important;
    flex: none;
    border: 2px solid var(--line, #dcd8d2) !important;
    border-radius: 6px !important;
    background-color: var(--surface, #fff) !important;
    position: relative;
}
    input[type="checkbox"]:not(.form-check-input):not(.mud-checkbox-input):not([role="switch"]):checked {
        background-color: var(--accent, #c65a2e) !important;
        border-color: var(--accent, #c65a2e) !important;
    }
    input[type="checkbox"]:not(.form-check-input):not(.mud-checkbox-input):not([role="switch"]):checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 6px;
        width: 5px;
        height: 10px;
        border: solid #fff !important;
        border-width: 0 2px 2px 0 !important;
        border-radius: 0;
        transform: rotate(45deg);
        background: none;
    }
    input[type="checkbox"]:not(.form-check-input):not(.mud-checkbox-input):not([role="switch"]):hover {
        border-color: var(--accent, #c65a2e) !important;
    }

input[type=radio] {
    accent-color: #000 !important;
    height: 17px !important;
    width: 17px !important;
}


/*flat date picker css*/
.flatpickr-months .flatpickr-month {
    background: #000000 !important;
    color: rgb(250 250 250 / 90%) !important;
    fill: rgba(0, 0, 0, 0.9) !important;
    height: 70px !important;
}

.flatpickr-day.selected {
    background: #000000 !important;
    color: #fff !important;
    border-color: #212121 !important;
}
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
    -webkit-transition: fill .1s !important;
    transition: fill .1s !important;
    fill: rgb(255 255 255) !important;
}
.flatpickr-current-month {
    top: 17px !important;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    top: 20px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgb(0 0 0) !important;
}.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: rgb(0 0 0) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: rgb(255 255 255) !important;
}
.numInputWrapper span.arrowUp {
    opacity: 1 !important;
}
.numInputWrapper span.arrowDown {
    opacity: 1 !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: rgb(255 255 255) !important;
}
/* ============================================================
   TOUCH / TABLET GLOBAL RULES (iPad review, 2026-07-05)
   ============================================================ */

/* iOS Safari auto-zooms the whole page when a focused control's font-size is
   under 16px — hugely disruptive in modals. Touch devices only; desktop keeps
   the designed sizes. Covers flatpickr altInputs and MudBlazor inputs too. */
@media (pointer: coarse) {
    input, select, textarea {
        font-size: max(16px, 1em) !important;
    }

    /* Custom-styled checkboxes/radios are 17-18px — too small for fingers.
       Scale them (and the drawn checkmark) up on touch devices. */
    input[type="checkbox"]:not(.form-check-input) {
        width: 28px !important;
        height: 28px !important;
    }

    input[type="checkbox"]:not(.form-check-input):checked::after {
        font-size: 20px !important;
    }

    input[type="radio"]:not(.form-check-input) {
        width: 26px !important;
        height: 26px !important;
    }

    /* Bootstrap modal close X is ~32px bare; pad it to a proper target. */
    .modal .btn-close {
        padding: .75rem !important;
    }
}

/* Touch sizing for shared controls (applies on tablets only). */
@media (pointer: coarse) {
    /* Pager buttons in the shared table components (ServerDataTable + siblings): the row is
       identified by its Previous/Next arrow images; sizes every button in that row incl. page numbers. */
    div:has(> button > img[alt="Previous"]) > button {
        min-width: 44px;
        min-height: 44px;
    }

    /* MudBlazor row-action kebab triggers + their menu items. */
    td .mud-icon-button,
    .mud-menu-activator .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .mud-menu-item,
    .mud-list-item {
        min-height: 44px !important;
    }
}

/* ============================================================
   Sticky "Actions" column helper (touch / tablet only)
   ============================================================
   Wide tables scroll horizontally on tablets, pushing the row-action
   buttons out of view. Add .sticky-actions-cell to a table's Actions
   <td> (and, where the page owns the header markup, the Actions <th>)
   to pin that cell to the right edge of the scrolling wrapper while
   the rest of the row slides beneath it. The box-shadow doubles as the
   "more columns underneath" cue. Desktop (fine pointer) is untouched.

   ServerDataTable renders arbitrary RowTemplates, so it cannot apply
   this generically; pages opt their actions <td> in and the table:has()
   rule below pins the component-rendered last header cell to match.

   Reference implementations: WorkingDays/Index.razor (Operating Days
   table th+td, Exception Days RowTemplate td). TemperatureLog/Index.razor
   uses the same idea for its left-pinned unit column via its
   page-local .sticky-col. */
@media (pointer: coarse) {
    .sticky-actions-cell {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #fff;
        box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .15);
    }

    /* Header cells sit on the grey thead band, not row-white. */
    th.sticky-actions-cell {
        background: #F7F7F7;
        z-index: 2;
    }

    /* When a row template opts its actions <td> in, pin the table's last
       header cell too (ServerDataTable owns that <th>, so pages can't
       class it directly). Only fires on tables that actually contain a
       sticky actions cell, so tables that haven't adopted the helper are
       completely unaffected. */
    table:has(td.sticky-actions-cell) > thead > tr > th:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background: #F7F7F7;
        box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .15);
    }
}

/* Right-edge scroll cue (touch only): a soft fade pinned to the right edge
   of horizontally scrolling table wrappers hints that more columns exist.
   How it works: the wrapper becomes a flex row so its ::after — a
   position:sticky, net-zero-width gradient strip placed after the table —
   stays pinned to the visible right edge while the table scrolls under it.
   Scoped to .overflow-x-auto wrappers whose ONLY child is a table (the
   shared grid pattern) and skipped when the table already has a sticky
   actions cell, whose box-shadow is the cue there. Note the fade is
   static (CSS cannot cheaply know scroll position), so it also shows
   when the table happens to fit — kept very subtle for that reason. */
@media (pointer: coarse) {
    .overflow-x-auto:has(> table:only-child):not(:has(.sticky-actions-cell)) {
        display: flex;
    }

    .overflow-x-auto:has(> table:only-child):not(:has(.sticky-actions-cell))::after {
        content: "";
        flex: 0 0 28px;
        width: 28px;
        margin-left: -28px; /* net zero width: adds no scroll extent */
        position: sticky;
        right: 0;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .08));
    }
}

/* The Deliveries product-entry table stacks into cards below 1280px (its own page CSS) —
   no horizontal scrolling exists there, so the cue would just paint a phantom fade over
   the cards. Above 1280px the wide table genuinely scrolls and keeps the cue. */
@media (pointer: coarse) and (max-width: 1279.98px) {
    .overflow-x-auto:has(.product-entry-table) {
        display: block;
    }

    .overflow-x-auto:has(.product-entry-table)::after {
        content: none;
    }
}

/* ============================================================
   COLLAPSIBLE SIDEBAR (user portal, md+ only)
   ------------------------------------------------------------
   Parallels the admin portal rail. State lives in MainLayout
   (persisted, DEFAULT collapsed); #sidebar carries
   .sidebar-collapsed and elements marked .usr-hide-collapsed
   disappear. Below 768px the off-canvas hamburger behaviour is
   untouched and always shows the full menu. All selectors use
   the #sidebar id so they out-specify Tailwind utilities
   regardless of stylesheet order.
   ============================================================ */
.sidebar-rail { width: 3rem; }           /* <md: sliver for the hamburger bar (was w-12) */

.sidebar-collapse-toggle { display: none; }  /* md+ only */

@media (min-width: 768px) {
    .sidebar-rail {
        width: 13rem;                    /* was md:w-52 */
        transition: width .2s ease;
        flex: none;
    }

    .sidebar-rail.rail-collapsed { width: 4.5rem; }

    #sidebar { width: 13rem; transition: width .2s ease; }
    #sidebar.sidebar-collapsed { width: 4.5rem; }

    #sidebar.sidebar-collapsed .usr-hide-collapsed { display: none !important; }

    #sidebar.sidebar-collapsed .sidebar-logo-img { width: 48px; height: 42px; }

    #sidebar.sidebar-collapsed .menu-item a {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    #sidebar.sidebar-collapsed .settings-entry { justify-content: center; }
    #sidebar.sidebar-collapsed .settings-entry .fa-gear { margin-right: 0 !important; padding-right: 0 !important; }

    #sidebar.sidebar-collapsed .user-profile { justify-content: center; }
    #sidebar.sidebar-collapsed .sidebar-user-wrap { width: auto; }

    /* Collapsed rail: the account popup goes icon-only — its 224px card would
       overflow the 4.5rem rail and render the labels squashed. Tooltips (title
       attributes on the items) carry the text. calc(4.5rem - 1rem): the popup's
       wrapper has mx-2, so a full-rail-width card juts 8px past the rail's right
       edge — inset it 8px each side instead. */
    #sidebar.sidebar-collapsed .profileDropdown { width: calc(4.5rem - 1rem); }
    #sidebar.sidebar-collapsed .profileDropdown > h6,
    #sidebar.sidebar-collapsed .profileDropdown > p,
    #sidebar.sidebar-collapsed .profileDropdown li span { display: none !important; }
    #sidebar.sidebar-collapsed .profileDropdown li,
    #sidebar.sidebar-collapsed .profileDropdown li a { justify-content: center; }

    .sidebar-collapse-toggle {
        position: absolute;
        top: 20px;
        right: -13px;
        z-index: 60;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #4b5563;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        padding: 0;
    }

        .sidebar-collapse-toggle:hover {
            color: #000;
            border-color: #9ca3af;
        }
}

/* Bigger toggle on touch devices (26px is a mouse target, not a finger one). */
@media (min-width: 768px) and (pointer: coarse) {
    .sidebar-collapse-toggle {
        width: 36px;
        height: 36px;
        right: -18px;
    }
}

/* ============================================================
   MOMENTUM TOUCH SCROLLING (tablets / iPads — issue #67)
   ------------------------------------------------------------
   Every scrollable surface in the portal — the page region, the
   nav list, table wrappers, tall modals and any inline
   overflow:auto box — must scroll with a finger and carry iOS's
   momentum ("flick") physics. The default WebKit touch-scroll is
   the old non-momentum kind on some iPad Safari builds; adding
   -webkit-overflow-scrolling:touch opts the box into the smooth
   momentum scroller. The property is INERT on desktop and on
   Android/Chrome, so a single unconditional rule is safe — it
   never changes layout, never changes WHICH axis scrolls, and
   does nothing on a box that isn't actually scrolling.

   These selectors deliberately match only overflow CONTAINERS
   (the Tailwind overflow utilities, bare <main>, the design
   modals, Bootstrap modal bodies, and elements whose inline
   style declares overflow). They never match a swipe row
   (.prow[data-swipe]) — those are overflow:hidden rows, not
   scroll containers — so the swipe pages' own touch-action:pan-y
   is left completely intact (see the guard rule further down).
   ============================================================ */
.overflow-auto,
.overflow-x-auto,
.overflow-y-auto,
.overflow-scroll,
.overflow-x-scroll,
.overflow-y-scroll,
main,
.modal-body,
.pmodal,
[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
}

/* Safety net: a box that CAN overflow horizontally but was only given a
   height/width cap (e.g. inline max-height + overflow) still needs the
   momentum hint; the [style*="overflow"] selector above already covers the
   inline cases, and the utility classes cover the Tailwind ones. Nothing
   here forces overflow:auto onto elements that don't ask for it — pages
   opt in by using an overflow utility or inline overflow, exactly as today. */

/* Swipe-row guard (touch devices only).
   The row-swipe pages (Deliveries / Suppliers / Team Users / VisitorLogs /
   Tracker) each set `.<scope> .prow[data-swipe] { touch-action: pan-y }` so a
   VERTICAL finger drag scrolls the list while a HORIZONTAL drag is claimed by
   the swipe JS. This global block must never regress that, so it re-asserts
   pan-y here as belt-and-braces. It is intentionally the ONLY global
   touch-action rule in this file: nothing above sets touch-action:auto/none on
   a broad selector that could cascade onto these rows. Do not add one. */
@media (pointer: coarse) {
    .prow[data-swipe] {
        touch-action: pan-y;
    }
}


/* FocusOnNavigate (Routes.razor) moves keyboard focus to the page <h1> after every navigation so
   screen readers announce where you landed. Keep the focus, lose the paint: submitting the login
   form with the Enter key makes the browser treat the arrival as keyboard navigation and draw its
   focus rectangle around the first page's title ("the dark box around Audit"). */
h1:focus,
h1:focus-visible {
    outline: none;
    box-shadow: none;
}