/* App-wide overrides on top of Bootstrap — a soft, modern admin look. */

:root {
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-body-bg: #f6f7fb;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --app-accent: #4f6df5;
    --app-sidebar-width: 272px;
    --app-sidebar-collapsed-width: 64px;
}

/* Compact, information-dense scale — an admin/POS tool needs to fit more
   on screen than a marketing page. Bootstrap's spacing/typography is
   rem-based, so shrinking the root font-size scales paddings, margins,
   and headings together consistently instead of overriding each one. */
html {
    font-size: 14px;
}

body {
    background: var(--bs-body-bg);
    color: #2b2d3a;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Cards read as soft, elevated panels rather than boxes with hard borders. */
.card {
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -12px rgba(17, 24, 39, 0.08);
    --bs-card-spacer-y: 0.85rem;
    --bs-card-spacer-x: 0.85rem;
}

/* Every page wraps its content in a Bootstrap .container/.container-fluid
   with a py-4/py-5 utility class — overriding the vertical padding here
   compacts every page at once rather than editing each view. */
.app-main .container,
.app-main .container-fluid {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.btn {
    font-weight: 500;
}

.btn-primary {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #3d59e0;
    border-color: #3d59e0;
}

.btn-outline-primary {
    color: var(--app-accent);
    border-color: var(--app-accent);
}

.btn-outline-primary:hover {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem rgba(79, 109, 245, 0.15);
}

.badge {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.table > :not(caption) > * > * {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ---- App shell: left sidebar + main content ---- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sticky + its own height/scroll: the sidebar stays put as the main
   content scrolls past it, and if the nav itself is taller than the
   viewport it scrolls independently instead of pushing the page down.
   Collapsed to icons-only by default (--app-sidebar-collapsed-width);
   hovering it — or pinning it via the button next to the brand —
   expands it to the full labeled width instead (.sidebar-expanded on
   .app-shell, toggled by the script in layouts/app.php). */
.sidebar {
    width: var(--app-sidebar-collapsed-width);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #1a1d29;
    color: #9aa0b4;
    padding: 1.25rem 0;
    transition: width 0.15s ease;
    z-index: 30;
}

.app-shell.sidebar-expanded .sidebar {
    width: var(--app-sidebar-width);
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

/* Department and location, small, under the name. */
.sidebar-brand-sub {
    display: block;
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-mark {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.sidebar-pin-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    color: #6d7288;
    cursor: pointer;
}

.sidebar-pin-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-pin-btn.active {
    color: var(--app-accent);
}

/* Collapsed: only the pin button's icon needs room, so the label side of
   the brand row (and every section) can shrink out of the way. */
.app-shell:not(.sidebar-expanded) .sidebar-brand-row {
    justify-content: center;
}

.app-shell:not(.sidebar-expanded) .sidebar-pin-btn {
    display: none;
}

.sidebar-section {
    padding: 0.5rem 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.sidebar-heading {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #8b90a8;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

/* Each section heading doubles as its accordion toggle — reset it back to
   looking like plain text, just clickable, with a chevron that flips to
   show which section (if any) is open. */
.sidebar-heading-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    margin-bottom: 0.15rem;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-heading-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #d7dae6;
}

.sidebar-toggle-chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.sidebar-heading-btn.collapsed .sidebar-toggle-chevron {
    transform: rotate(-90deg);
}

/* While the sidebar rests in its narrow icon-only state, every section's
   links stay reachable on hover regardless of which one is "open" — the
   accordion only governs which section's full text list is expanded once
   the sidebar itself is pinned/expanded. */
.app-shell:not(.sidebar-expanded) .sidebar #sidebar-accordion .collapse {
    display: block !important;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin: 0.15rem 0;
    color: #c9cddc;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: inherit;
}

/* Labels (link text, section headings, the brand's full name) only show
   once the sidebar is actually wide enough to hold them — collapsed, it's
   icons plus this one-letter brand mark and nothing else. */
.sidebar-link-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.1s ease;
}

.app-shell.sidebar-expanded .sidebar-link-text {
    opacity: 1;
    width: auto;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.sidebar-link.active {
    background: var(--app-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(79, 109, 245, 0.35);
}

/* POS / Quick Sale — money-in-hand actions, given their own accent so they
   stand out from the rest of the flat top nav list instead of blending in
   with everything else. */
.sidebar-link-pos {
    color: #f5a623;
}

.sidebar-link-pos:hover {
    background: rgba(245, 166, 35, 0.12);
    color: #ffc460;
}

.sidebar-link-pos.active {
    background: #f5a623;
    color: #1a1a1a;
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
}

/* The "Employee" section is an admin/manager's own self-service pages
   (their own time off, files, pay stubs, ...) — same pages a plain
   employee account sees — kept visually distinct (teal) from the
   business/management sections around it so the two are never confused. */
.sidebar-section-employee .sidebar-heading-btn {
    color: #5eead4;
}

.sidebar-section-employee .sidebar-heading-btn:hover {
    background: rgba(20, 184, 166, 0.12);
    color: #99f6e4;
}

.sidebar-section-employee .sidebar-link:hover {
    background: rgba(20, 184, 166, 0.12);
}

.sidebar-section-employee .sidebar-link.active {
    background: #14b8a6;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
}

.app-main {
    flex-grow: 1;
    min-width: 0;
    padding-top: 2.75rem;
}

/* Fixed (not merely sticky) so it always stays put regardless of how the
   surrounding flex layout scrolls — .app-main is padded above to make room
   for it, since a fixed element is taken out of normal document flow.
   left tracks the sidebar's current (collapsed/expanded) width so it never
   sits under — or leaves a gap next to — the sidebar. */
.app-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 2.75rem;
    padding: 0 1rem;
    background: #fff;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    position: fixed;
    top: 0;
    left: var(--app-sidebar-collapsed-width);
    right: 0;
    z-index: 20;
    transition: left 0.15s ease;
}

.app-shell.sidebar-expanded .app-topbar {
    left: var(--app-sidebar-width);
}

.notification-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    font-size: 0.6rem;
    padding: 0.25em 0.4em;
}

.notification-dropdown {
    width: 320px;
}

/* ---- Mobile hamburger nav (below --app-breakpoint-mobile) ---- */

.sidebar-hamburger-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-right: 0.75rem;
    background: transparent;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 0.5rem;
    color: #2b2d3a;
    cursor: pointer;
}

.sidebar-hamburger-btn:hover {
    background: rgba(17, 24, 39, 0.05);
}

.sidebar-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 1039;
}

@media (max-width: 768px) {
    .sidebar-hamburger-btn {
        display: inline-flex;
    }

    .app-topbar {
        left: 0 !important;
        justify-content: space-between;
    }

    /* Off-canvas: fixed and slid fully out of view by default, taken out of
       the flex flow so .app-main fills the whole width underneath it. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 82vw);
        transform: translateX(-100%);
        box-shadow: 12px 0 32px rgba(17, 24, 39, 0.25);
        z-index: 1040;
    }

    .app-shell.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    .app-shell.sidebar-mobile-open .sidebar-mobile-backdrop {
        display: block;
    }

    /* On mobile the sidebar is either fully open (this drawer) or fully
       closed — there's no icon-only rail state, so labels always show
       once it's open, regardless of the desktop hover/pin .sidebar-expanded
       class this viewport doesn't otherwise use. */
    .sidebar .sidebar-link-text,
    .sidebar .sidebar-brand-text {
        opacity: 1 !important;
        width: auto !important;
    }

    .sidebar-brand-row {
        justify-content: space-between !important;
    }

    .sidebar-pin-btn {
        display: none !important;
    }
}

/* Section headings inside a card ("Low Stock Report", "By Menu Item", etc.)
   get a rule under them so a card with several stacked sections reads as
   clearly divided, without needing a heavier bordered/boxed sub-panel. */
.card-body h2.h6 {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

/* ---- Login / register (switchable card + feature panel) ---- */

.auth-page {
    min-height: 100vh;
    background: linear-gradient(160deg, #f6f7fb 0%, #eef1fb 100%);
}

.auth-card {
    max-width: 420px;
    width: 100%;
}

.auth-tabs {
    display: flex;
    background: #f0f1f6;
    border-radius: 0.6rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    border-radius: 0.45rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #6c7280;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-tab.active {
    background: #fff;
    color: #2b2d3a;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.auth-features {
    padding-left: 3rem;
}

.feature-item {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.feature-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px -6px rgba(17, 24, 39, 0.1);
}

/* ---- Password show/hide toggle ---- */

.password-toggle-group .btn {
    color: #6c757d;
    border-color: var(--bs-border-color);
}

.password-toggle-group .btn:hover {
    color: #2b2d3a;
}

/* ---- Weekly shift grid (employees x days) ---- */

.weekly-grid th,
.weekly-grid td {
    min-width: 100px;
}

.weekly-grid th:first-child,
.weekly-grid td:first-child {
    min-width: 140px;
}

/* Compact body rows — smaller type and tight padding so more employees fit
   on screen without scrolling. */
.weekly-grid tbody,
.weekly-grid tfoot {
    font-size: 0.78rem;
    line-height: 1.2;
}

.weekly-grid tbody td,
.weekly-grid tfoot td {
    padding: 0.15rem 0.3rem;
}

.weekly-grid tbody td.p-1 {
    padding: 0.15rem !important;
}

.weekly-grid tbody .small,
.weekly-grid tfoot .small {
    font-size: 0.7rem;
}

/* The employee name column stays put while the rest of a wide week
   scrolls underneath it — needs an opaque background (matching the row's
   own) so scrolled content doesn't show through, and a divider so it
   still reads as a distinct column once other cells slide past it. */
.weekly-grid-scroll {
    max-height: calc(100vh - 260px);
    min-height: 420px;
    overflow-y: auto;
}

.weekly-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 rgba(17, 24, 39, 0.08);
}

.weekly-grid thead .sticky-col {
    z-index: 3;
    background: #f8f9fa;
}

/* The per-employee running total on the right edge — same sticky trick as
   .sticky-col, mirrored to the opposite side so it stays visible while the
   day columns scroll underneath it too. */
.weekly-grid .sticky-col-end {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -1px 0 0 rgba(17, 24, 39, 0.08);
}

.weekly-grid thead .sticky-col-end {
    z-index: 3;
    background: #f8f9fa;
}

.weekly-grid tfoot .sticky-col,
.weekly-grid tfoot .sticky-col-end {
    background: #f8f9fa;
}

/* Inside the grid's own scroll box, only the employee rows scroll: the day
   header stays pinned to the top and the four footer rows (Labour cost,
   Actual sales, Expected sale, Events) stay pinned to the bottom. The footer rows
   have a fixed height so each can sit a known distance from the bottom. */
.weekly-grid thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

.weekly-grid thead th.sticky-col,
.weekly-grid thead th.sticky-col-end {
    z-index: 6;
}

.weekly-grid tfoot tr {
    height: 1.7rem;
}

.weekly-grid tfoot td {
    position: sticky;
    z-index: 4;
    background: #f8f9fa;
    white-space: nowrap;
}

.weekly-grid tfoot tr:first-child td {
    box-shadow: inset 0 1px 0 #dee2e6;
}

.weekly-grid tfoot tr:nth-last-child(1) td { bottom: 0; }
.weekly-grid tfoot tr:nth-last-child(2) td { bottom: 1.7rem; }
.weekly-grid tfoot tr:nth-last-child(3) td { bottom: 3.4rem; }
.weekly-grid tfoot tr:nth-last-child(4) td { bottom: 5.1rem; }
.weekly-grid tfoot tr:nth-last-child(5) td { bottom: 6.8rem; }
.weekly-grid tfoot .grid-event-cell { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

.weekly-grid tfoot td.sticky-col,
.weekly-grid tfoot td.sticky-col-end {
    z-index: 6;
}

/* Vertical divider between each date column's header, so the per-day
   Predicted/Last wk/ML Predictions/Labour figures read as a distinct
   block per day instead of running together. */
.weekly-grid thead .day-col-th {
    border-left: 1px solid #dee2e6;
    vertical-align: top;
    padding-top: 0.5rem;
}

.day-col-date {
    font-weight: 600;
}

.day-metrics-box {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    background: #fbfbfd;
    text-align: left;
}

.day-metrics-box > div {
    white-space: nowrap;
}

.day-metrics-box > div + div {
    margin-top: 0.15rem;
}

.day-metric-predicted {
    color: #0d6efd;
}

.day-metric-lastwk,
.day-metric-mlpred,
.day-metric-laboryear {
    color: #212529;
    font-size: 0.75rem;
}

/* The week-range totals box in the grid's top-left corner — same shape as a
   per-day metrics box, but tinted so it visibly reads as a summary/total
   rather than another day column. */
.day-metrics-box-total {
    background: #eef2ff;
    border-color: #c7d2fe;
}

#weekly-grid-toggle {
    color: inherit;
}

.grid-toggle-chevron {
    display: inline-block;
    transition: transform 0.15s ease;
}

#weekly-grid-toggle.collapsed .grid-toggle-chevron {
    transform: rotate(-90deg);
}

.legend-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.25rem;
}

/* Department group header row inside the By Employee grid — a colored bar
   (name + per-department Publish/Unpublish + per-day scheduled/open badge)
   separating each department's employee rows. */
.department-group-header td {
    background: #0f5c52;
    color: #fff;
    font-weight: 600;
}

.department-group-header .sticky-col,
.department-group-header .sticky-col-end {
    background: #0f5c52;
    color: #fff;
}

.department-group-header form {
    display: inline-block;
    margin-left: 0.5rem;
}

.department-group-toggle .department-group-chevron {
    display: inline-block;
    transition: transform 0.15s ease;
}

.department-group-toggle.department-group-collapsed .department-group-chevron {
    transform: rotate(-90deg);
}


.department-day-badge {
    font-weight: 400;
    font-size: 0.72rem;
}

.department-group-header .btn-sm {
    padding: 0 0.4rem;
    font-size: 0.7rem;
    line-height: 1.4;
}

#grid-view-tabs .nav-link {
    cursor: pointer;
    padding: 0.2rem 0.75rem;
    font-size: 0.85rem;
}

.grid-cell-empty {
    width: 1.75rem;
    height: 1.35rem;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.5;
}

/* The "+" under a cell's existing shift(s), for adding another one that day —
   smaller and fainter so it doesn't compete with the shifts themselves. */
.grid-cell-empty.grid-cell-add-more {
    display: block;
    width: 100%;
    height: 0.95rem;
    margin-top: 1px;
    font-size: 0.7rem;
    border-style: dashed;
    opacity: 0.35;
}

.grid-cell-empty:hover {
    opacity: 1;
}

.grid-cell-shift {
    border: none;
    line-height: 1.15;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-cell-shift + .grid-cell-shift {
    margin-top: 1px;
}

.grid-cell-shift:hover {
    filter: brightness(0.92);
}

.grid-cell-label {
    font-weight: 600;
}

/* ---- Assign Shifts grid (color-coded per shift type) ---- */

.assign-grid .form-check-input {
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
}

.legend-dot,
.shift-chip {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.2rem;
}

/* ---- Temperature Checks grid (locations x reading slots) ---- */

.temp-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 rgba(17, 24, 39, 0.08);
}

.temp-grid thead .sticky-col {
    z-index: 3;
    background: #f8f9fa;
}

.temp-col-header {
    min-width: 150px;
    cursor: context-menu;
}

.temp-cell {
    min-width: 150px;
    border-radius: 0.4rem;
    transition: background-color 0.1s ease;
}

/* Out-of-range readings: cold and hot get distinct colors rather than one
   generic "error" red, so a glance says which direction it's wrong in.
   A strong left border + saturated tint, not just a faint background wash,
   so it reads clearly even at a glance or on a dim screen. */
.temp-cell-low {
    background: rgba(13, 110, 253, 0.22);
    border-left: 4px solid #0d6efd;
}

.temp-cell-high {
    background: rgba(220, 53, 69, 0.22);
    border-left: 4px solid #dc3545;
}

.temp-out-of-range-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    margin-top: 0.25rem;
    color: #fff;
}

.temp-cell-low .temp-out-of-range-badge {
    background: #0d6efd;
}

.temp-cell-high .temp-out-of-range-badge {
    background: #dc3545;
}

.temp-legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

.temp-legend-swatch.temp-out-of-range-low {
    background: rgba(13, 110, 253, 0.4);
}

.temp-legend-swatch.temp-out-of-range-high {
    background: rgba(220, 53, 69, 0.4);
}

.temp-time-input {
    max-width: 6.5rem;
}

.temp-value-input {
    min-width: 3.5rem;
}

.temp-unit-select {
    max-width: 4.5rem;
    flex: 0 0 auto;
}

.shift-chip {
    cursor: help;
}

/* ---- Stock status colors (reused across dashboard/inventory) ---- */

.oversold-stock {
    background-color: #f5d0d0 !important;
}

.low-stock {
    background-color: #fdecec !important;
}

.near-threshold {
    background-color: #fff6e0 !important;
}

/* ---- Stock page drag-and-drop reorder ---- */

.stock-drag-handle {
    cursor: grab;
    color: #9aa0b4;
    width: 1.5rem;
    text-align: center;
}

#stock-table tr[draggable="true"] {
    cursor: default;
}

#stock-table tr.dragging-row {
    opacity: 0.4;
}

.healthy-stock {
    background-color: #e8f7ee !important;
}

/* ---- Task List (daily checklist) ---- */

.task-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f3f5ff 100%);
}

.task-progress {
    height: 0.6rem;
    border-radius: 1rem;
    background: #eef0f7;
}

.task-progress .progress-bar {
    background: var(--app-accent);
    border-radius: 1rem;
    transition: width 0.2s ease;
}

.task-item {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.task-item-done {
    background: #f8faf8;
}

/* A big, tappable circular check button rather than a plain native checkbox —
   easier to hit on a phone at the counter, and the filled/empty states read
   clearly across a whole list at a glance. */
.task-check-btn {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid #c7cbdb;
    background: #fff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    padding: 0;
}

.task-check-btn:hover {
    border-color: var(--app-accent);
    transform: scale(1.08);
}

.task-check-btn-done {
    background: #2fa84f;
    border-color: #2fa84f;
}

.kds-order-card {
    border-left: 4px solid #d0a000;
}

.kds-order-completed {
    border-left-color: #2fa84f;
}

.kds-order-cancelled {
    border-left-color: #9ca3af;
    opacity: 0.6;
}

/* Schedule: compact "back to this week" reset button between the week arrows. */
.this-week-btn { line-height: 1; height: 26px; width: 26px; }
.this-week-btn .sidebar-icon { width: 14px; height: 14px; }

/* Schedule: R (Regular) / H (Hourly) badge after each employee name — colours
   deliberately outside the shift-type palette and the page's own accents. */
.employment-type-badge { font-size: .5rem; padding: .15em .35em; margin-left: 1px; color: #fff; vertical-align: super; top: -.35em; }
.employment-type-badge.is-regular { background: #8d5524; }
.employment-type-badge.is-hourly { background: #6b7a1a; }

/* Collapsible holidays & events card (dashboard): chevron flips when open. */
.markers-box-chevron { transition: transform .2s; }
[aria-expanded="true"] .markers-box-chevron { transform: rotate(180deg); }

/* Schedule grid: a sub-department's header sits under its main department's, lighter. */
.department-subgroup-header td,
.department-subgroup-header .sticky-col,
.department-subgroup-header .sticky-col-end {
    background: #3f8f84;
}
/* Employee listed in more than one department group. */
.multi-dept-marker { color: #7c3aed; }
/* Schedule: one "Skills" label per employee; hover lists them. */
.skills-hint { font-size: .62rem; cursor: help; vertical-align: middle; }
.skills-hint-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; }
.skills-tooltip .tooltip-inner { max-width: 280px; }
/* Schedule cell: the employee's shift in another of their department rows (not clickable here). */
.grid-cell-busy { font-size: .62rem; color: #6c757d; border: 1px dashed #adb5bd; border-radius: .25rem; padding: 0 .25rem; max-width: 150px; margin-left: auto; margin-right: auto; cursor: default; }
/* Rows/groups hidden by the Schedule's Filter dialog (separate from the collapse toggle's d-none). */
.grid-filter-hidden { display: none !important; }

/* Schedule: small icon-only Filter / Reset buttons. */
.schedule-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
/* Schedule filter dialog: taller, so the lists fit without much scrolling. */
.schedule-filter-dialog .modal-content { min-height: 72vh; }
.schedule-filter-dialog .modal-body { min-height: 58vh; }
/* Schedule grid spacer row (height set by fitGridToPage) — invisible. */
.weekly-grid .grid-spacer-row td { padding: 0 !important; border: 0 !important; background: transparent; }

/* App-wide date picker (layout): holidays, events, blackout/leave on the calendar. */
.flatpickr-calendar { font-family: inherit; }
.flatpickr-day.cal-holiday:not(.selected) { background: #fff3cd; border-color: #ffe08a; }
.flatpickr-day.cal-event:not(.selected) { box-shadow: inset 0 -3px 0 #0dcaf0; }
.flatpickr-day.cal-blackout { position: relative; }
.flatpickr-day.cal-blackout::after { content: ''; position: absolute; top: 3px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #dc3545; }
.flatpickr-day.cal-blackout[data-cal-count]::after { content: attr(data-cal-count); width: auto; height: auto; min-width: 12px; padding: 0 2px; top: 1px; right: 1px; font-size: 9px; line-height: 12px; color: #fff; border-radius: 6px; }
.cal-foot { border-top: 1px solid #e9ecef; padding: 6px 8px; font-size: .72rem; text-align: left; }
.cal-hint { background: #f8f9fa; border-radius: 4px; padding: 4px 6px; margin-bottom: 6px; max-height: 130px; overflow-y: auto; overscroll-behavior: contain; }
.cal-hint-head { position: sticky; top: -4px; background: #f8f9fa; padding: 2px 0; border-bottom: 1px solid #e9ecef; margin-bottom: 2px; }
.flatpickr-day.cal-marked { cursor: pointer; }
/* The day list under a month calendar (availability, time off): everything on the clicked day, scrollable. */
.cal-day-list { border: 1px solid #e9ecef; border-radius: .5rem; background: #f8f9fa; padding: .5rem .75rem; margin-top: .75rem; max-height: 220px; overflow-y: auto; font-size: .875rem; }
.cal-day-list .cal-day-list-head { font-weight: 600; position: sticky; top: -.5rem; background: #f8f9fa; padding: .25rem 0; }
.cal-day-list .cal-day-list-row { padding: .2rem 0; border-top: 1px solid #e9ecef; }
.blackout-cal-day, .bo-cal-day { cursor: pointer; }
.blackout-cal-day.is-picked, .bo-cal-day.is-picked { outline: 2px solid #0d6efd; outline-offset: -2px; }
.cal-legend { display: flex; align-items: center; gap: 4px; color: #6c757d; flex-wrap: wrap; }
.cal-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 4px; }
.cal-key-holiday { background: #fff3cd; border: 1px solid #ffe08a; }
.cal-key-event { background: #0dcaf0; }
.cal-key-blackout { background: #dc3545; border-radius: 50%; }
input.cal-input[readonly] { background-color: #fff; }

/* Photos & bills (attachments/_input, _gallery). */
.att-thumb { width: 92px; height: 92px; overflow: hidden; background: #f8f9fa; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-thumb .att-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 1.8rem; color: #6c757d; }
.att-thumb .att-remove { position: absolute; top: 2px; right: 2px; padding: 0 .35rem; line-height: 1.2; font-size: .8rem; }

/* Schedule, By Employee: all 7 days fit the screen width with no sideways
   scroll — fixed layout, the name column a set width and the day columns
   sharing the rest; larger type than the old zoomed-down grid. */
#grid-view-employee { overflow-x: hidden; }
#grid-view-employee .weekly-grid { table-layout: fixed; width: 100%; }
#grid-view-employee .weekly-grid th,
#grid-view-employee .weekly-grid td { min-width: 0; }
#grid-view-employee .weekly-grid th:first-child,
#grid-view-employee .weekly-grid td:first-child { width: 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#grid-view-employee .weekly-grid tbody,
#grid-view-employee .weekly-grid tfoot { font-size: 0.86rem; }
#grid-view-employee .weekly-grid tbody .small,
#grid-view-employee .weekly-grid tfoot .small { font-size: 0.76rem; }
#grid-view-employee .day-col-date { font-size: 0.95rem; }
#grid-view-employee .day-metrics-box { padding: 0.3rem 0.4rem; }
#grid-view-employee .day-metrics-box > div { white-space: normal; font-size: 0.76rem; line-height: 1.25; }
#grid-view-employee .grid-cell-shift { font-size: 0.78rem; white-space: normal; padding: 0.15rem 0.3rem; }
#grid-view-employee .grid-cell-shift .grid-cell-label,
#grid-view-employee .grid-cell-shift .grid-cell-time { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#grid-view-employee .grid-cell-busy { font-size: 0.7rem; max-width: 100%; }
#grid-view-employee .department-day-badge { font-size: 0.78rem; }
#grid-view-employee .multi-dept-marker { max-width: 100% !important; }

/* Dashboard "Out of Stock" card pulses red while anything is at zero. */
@keyframes stock-flash {
    0%, 100% { background-color: #f8d7da; box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    50% { background-color: #f1aeb5; box-shadow: 0 0 0 4px rgba(220, 53, 69, .45); }
}
.stock-flash { animation: stock-flash 1.2s ease-in-out infinite; }
/* …and every row of the Out of Ingredients table on the dashboard. */
@keyframes stock-flash-row {
    0%, 100% { background-color: #fbe3e5; }
    50% { background-color: #f1aeb5; }
}
.stock-flash-row > td { animation: stock-flash-row 1.2s ease-in-out infinite; }
@keyframes stock-flash-badge { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stock-flash-badge { animation: stock-flash-badge 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .stock-flash, .stock-flash-row > td, .stock-flash-badge { animation: none; } }

/* Ingredients list: spreadsheet-style editable cells. */
.xl-cell[data-xl-field] { cursor: cell; }
.xl-cell[data-xl-field]:hover { box-shadow: inset 0 0 0 1px #9ec5fe; }
.xl-cell.xl-editing { padding: 2px !important; box-shadow: inset 0 0 0 2px #0d6efd; }
.xl-cell.xl-saved { background: #d1e7dd !important; transition: background .3s; }
.xl-cell.xl-error { background: #f8d7da !important; }

/* Dashboard: sections below the chart open / close from their title. */
.dash-collapse-head { cursor: pointer; user-select: none; }
.dash-collapse-head:hover { color: var(--bs-primary); }
.dash-chevron { display: inline-block; font-size: .8em; transition: transform .15s ease; color: #6c757d; }
.dash-chevron.dash-chevron-closed { transform: rotate(-90deg); }

/* Schedule: the day figures (top) and the totals rows (bottom) open / close.
   The state sits on #shift-grid, so it survives the grid re-rendering. */
#shift-grid.grid-metrics-closed .weekly-grid thead .day-metrics-box { display: none; }
#shift-grid.grid-foot-closed .grid-foot-toggle .grid-toggle-chevron { transform: rotate(-90deg); }
/* Small round chevron: points up when open (collapse), down when closed (expand). */
.collapse-chevron { width: 22px; height: 22px; padding: 0; border: 1px solid #dee2e6; border-radius: 50%; background: #fff; color: #6c757d; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; }
.collapse-chevron:hover { color: var(--bs-primary); border-color: var(--bs-primary); }
.collapse-chevron svg { transition: transform .15s ease; }
#shift-grid.grid-metrics-closed .grid-metrics-toggle svg, #shift-budget.budget-closed .budget-toggle svg { transform: rotate(180deg); }
/* Budget bar folds into one line of figures. */
.budget-compact { display: none; }
#shift-budget.budget-closed .budget-fig { display: none !important; }
#shift-budget.budget-closed .budget-compact { display: inline; }
#shift-grid.grid-foot-closed .weekly-grid tfoot tr:not(.grid-foot-toggle-row) { display: none; }
#shift-grid.grid-foot-closed .weekly-grid tfoot tr.grid-foot-toggle-row td { bottom: 0; }
.grid-foot-toggle-row td { font-size: .78rem; }

/* Always-visible horizontal scrollbar under wide tables (layout: data-hscroll), pinned to the bottom of the screen. */
.hscroll-bar { position: sticky; bottom: 0; z-index: 6; overflow-x: scroll; overflow-y: hidden; height: 18px; background: #f8f9fa; border-top: 1px solid #dee2e6; scrollbar-width: auto; scrollbar-color: #8a94a0 #e9ecef; }
.hscroll-bar > div { height: 1px; }
.hscroll-bar::-webkit-scrollbar { -webkit-appearance: none; height: 14px; }
.hscroll-bar::-webkit-scrollbar-track { background: #e9ecef; }
.hscroll-bar::-webkit-scrollbar-thumb { background: #8a94a0; border-radius: 7px; border: 2px solid #e9ecef; }
.hscroll-bar::-webkit-scrollbar-thumb:hover { background: #6c757d; }

/* Birthday sprinkles (layout script) — shared by the Dashboard section, the Schedule strip and today's names. */
[data-bday-party] { position: relative; overflow: hidden; }
.bday-party { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.bday-bit { position: absolute; top: -24px; will-change: transform, opacity; animation: bday-fall linear forwards; }
.bday-dot { width: 6px; height: 10px; border-radius: 2px; }
@keyframes bday-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--fall), 0) rotate(var(--spin)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bday-party { display: none; } }
/* Dashboard: every card folds with the same round chevron beside its title. */
.dash-folded { display: none !important; }
.dash-fold-head { display: flex; align-items: center; flex-wrap: wrap; column-gap: .3rem; }
.dash-card-folded .dash-fold svg { transform: rotate(180deg); }
.dash-card-folded.h-100 { height: auto !important; }
/* Ingredients: par levels open the units pop-up. */
td.par-open, td.stock-open { cursor: pointer; }
td.par-open:hover, td.stock-open:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #9db4ff; }
td.par-open.xl-saved, td.stock-open.xl-saved { background: #d1e7dd !important; transition: background .3s; }
/* Top bar 🎂 button: wiggles on someone's birthday. */
.bday-head-btn.is-today { border-color: #f472b6; background: #fff1f7; animation: bday-wiggle 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bday-head-btn.is-today { animation: none; } }
/* Schedule: which budget shows under each date (ML / Allocated / all), set by the toggles in the budget card. */
.bdept { display: none; }
/* A department picked (FOH / HOH …): its own Allocated lines replace the whole store's. */
body[data-bdept] .bsrc-alloc { display: none !important; }
body[data-bsrc="ml"] .bsrc-alloc, body[data-bsrc="alloc"] .bsrc-ml { display: none !important; }
body[data-bsrc="ml"] .bsrc-btn[data-src="ml"], body[data-bsrc="alloc"] .bsrc-btn[data-src="alloc"] { background: var(--bs-primary); color: #fff; }
/* Small footer under every page. */
.app-footer { border-top: 1px solid #e9ecef; font-size: .75rem; }
.app-footer a { text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* ---- Phones & small tablets: app-wide mobile layer ----
   Page views use plain Bootstrap; these rules make the common pieces
   (top bar, headers, toolbars, tabs, tables, modals, dropdowns) behave on a
   narrow screen without editing every view. Page-specific fixes live in the
   views themselves. */
.topbar-branch-btn { max-width: 320px; }
.topbar-branch-menu { min-width: 280px; }

@media (max-width: 768px) {
    /* Top bar: hamburger on the left, the icon buttons packed on the right. */
    .app-topbar { justify-content: flex-end; padding: 0 .5rem; gap: .25rem; }
    .app-topbar .sidebar-hamburger-btn { margin-right: auto; }
    .app-topbar > .dropdown, .app-topbar > .me-2, .app-topbar .topbar-gap { margin-left: .25rem !important; margin-right: 0 !important; }
    .app-topbar .btn-sm { padding: .25rem .45rem; white-space: nowrap; }
    .topbar-branch-btn { max-width: 30vw; }
    .topbar-logout .sidebar-icon { width: 16px; height: 16px; vertical-align: -3px; }
    .topbar-branch-menu { min-width: min(280px, 92vw); }
    .notification-dropdown { width: min(320px, 94vw); }
    .app-topbar .dropdown { position: static; }
    .app-topbar .dropdown-menu { left: .5rem !important; right: .5rem !important; transform: none !important; top: 2.75rem !important; margin: 0 !important; width: auto; max-width: none; }

    /* Tighter page gutters. */
    .app-main .container,
    .app-main .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    #app-content { overflow-x: clip; }
    .card { --bs-card-spacer-x: .7rem; }

    h1, .h1 { font-size: 1.45rem; }
    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1.12rem; }

    /* 16px fields stop iOS zooming the page on focus. */
    .form-control, .form-select, .input-group-text { font-size: 16px; }
    .form-control-sm, .form-select-sm { font-size: 15px; }

    /* Header rows / toolbars wrap instead of overflowing. */
    .card-header, .modal-header, .modal-footer, .btn-toolbar, .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; }
    .card-header { row-gap: .4rem; }
    .modal-footer { gap: .4rem; }
    .modal-footer > * { margin: 0; }
    .app-main .d-flex.justify-content-between:not(.flex-nowrap),
    .app-main .d-flex.justify-content-end:not(.flex-nowrap) { flex-wrap: wrap; row-gap: .5rem; }

    /* Tabs and pills scroll sideways in one row rather than stacking. */
    .app-main .nav-tabs,
    .app-main .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .app-main .nav-tabs::-webkit-scrollbar,
    .app-main .nav-pills::-webkit-scrollbar { display: none; }
    .app-main .nav-tabs .nav-link,
    .app-main .nav-pills .nav-link { white-space: nowrap; }
    .app-main .nav-tabs .nav-item,
    .app-main .nav-pills .nav-item { flex-shrink: 0; }

    /* Tables: never wider than the screen — a wrapper scrolls sideways. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: .9rem; }
    .table > :not(caption) > * > * { padding-left: .45rem; padding-right: .45rem; }
    .table .btn-sm { white-space: nowrap; }

    /* Modals: almost full width, scroll inside. */
    .modal-dialog { margin: .5rem; max-width: none; }
    .modal-content { max-height: calc(100dvh - 1rem); }
    .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 1rem); }
    .modal-body { overflow-y: auto; }

    img, video, canvas, iframe { max-width: 100%; }
    .dropdown-menu { max-width: 94vw; }
    .alert { word-break: break-word; }
    .app-footer { justify-content: center; }
}

@media (max-width: 400px) {
    .app-topbar { gap: .15rem; padding: 0 .35rem; }
    .app-topbar > .dropdown, .app-topbar > .me-2, .app-topbar .topbar-gap { margin-left: .15rem !important; }
    .app-topbar .btn-sm { padding: .2rem .35rem; }
    .topbar-branch-btn { max-width: 24vw; }
    .sidebar-hamburger-btn { width: 30px; height: 30px; }
}

@media (max-width: 576px) {
    /* Inline-width form controls (style="width: …" / max-width) fill the row. */
    .app-main .form-control[style*="width"],
    .app-main .form-select[style*="width"] { max-width: 100% !important; }
    .app-main .row > [class*="col-"] { min-width: 0; }
    .btn:not(.text-truncate):not(.dropdown-toggle) { white-space: normal; }
    .table .btn, .nav .btn, .input-group .btn, .btn-group .btn { white-space: nowrap; }
    .pagination { flex-wrap: wrap; }
}

/* A server-paged list while its next page / search result loads (initLiveList in the layout). */
.list-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ---- Dashboard: focused admin layout (white cards, big-number tiles with an icon square,
   tinted table heads, pill range switch). Everything is scoped to #dashboard-root. ---- */
#dashboard-root {
    --dash-ink: #1f2430; --dash-muted: #7a8194; --dash-line: #e8ebf2; --dash-head: #f1f5fe;
    --dash-px: 1.15rem; --dash-py: 1rem;
    --dash-green: #22c55e; --dash-red: #ef4444; --dash-amber: #f59e0b; --dash-violet: #8b5cf6; --dash-teal: #14b8a6;
}
#dashboard-root .dash-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .9rem; }
#dashboard-root .dash-title h1 { font-size: 1.4rem; margin: 0; color: var(--dash-ink); }
#dashboard-root .dash-title .dash-date { color: var(--dash-muted); font-size: .95rem; }
#dashboard-root .card { background: #fff; border: 1px solid var(--dash-line); border-radius: 6px; box-shadow: 0 2px 10px -4px rgba(31, 36, 48, .08); }
#dashboard-root .card-body { padding: var(--dash-py) var(--dash-px); }
#dashboard-root .card-body h2.h6 { border-bottom: 0; padding-bottom: 0; font-size: 1.05rem; color: var(--dash-ink); }
/* Card header row: title left, actions right. */
#dashboard-root .dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .7rem; }
#dashboard-root .dash-head h2.h6 { margin: 0; }
#dashboard-root .dash-head .dash-sub { font-size: .85rem; color: var(--dash-muted); font-weight: 400; }
#dashboard-root .dash-link { font-size: .88rem; font-weight: 500; color: var(--app-accent); text-decoration: underline; text-underline-offset: 2px; }
#dashboard-root .dash-link:hover { color: #3651d6; }
#dashboard-root .dash-label { font-size: .82rem; color: var(--dash-muted); }
#dashboard-root .dash-figure { font-size: 1.05rem; font-weight: 600; color: var(--dash-ink); font-variant-numeric: tabular-nums; }

/* Big-number tiles: tinted icon on the left, title / value / note stacked beside it. */
#dashboard-root .kpi .card-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .9rem; row-gap: .1rem; padding: .85rem 1rem; align-items: center; }
#dashboard-root .kpi-top { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
#dashboard-root .kpi-top h2.h6 { font-size: .86rem; font-weight: 500; margin: 0; color: var(--dash-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard-root .kpi-top h2.h6.dash-fold-head { flex-wrap: nowrap; min-width: 0; }
#dashboard-root .kpi-top .collapse-chevron { width: 18px; height: 18px; flex: 0 0 18px; }
#dashboard-root .kpi-top .collapse-chevron svg { width: 10px; height: 10px; }
#dashboard-root .kpi-trend { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; padding: .15rem .45rem; border-radius: 999px; }
#dashboard-root .kpi-trend.up { color: #15803d; background: #dcfce7; } #dashboard-root .kpi-trend.down { color: #b91c1c; background: #fee2e2; }
#dashboard-root .kpi-value { grid-column: 2; grid-row: 2; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--dash-ink); margin: 0; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard-root .kpi-value.is-bad { color: var(--dash-red); }
#dashboard-root .kpi-note { grid-column: 2; grid-row: 3; font-size: .78rem; color: var(--dash-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard-root .kpi-icon { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-accent); background: #e8eeff; }
#dashboard-root .kpi-icon svg { width: 22px; height: 22px; }
#dashboard-root .kpi-icon.green { color: #16a34a; background: #dcfce7; }
#dashboard-root .kpi-icon.red { color: #dc2626; background: #fee2e2; }
#dashboard-root .kpi-icon.amber { color: #d97706; background: #fef3c7; }
#dashboard-root .kpi-icon.violet { color: #7c3aed; background: #ede9fe; }
#dashboard-root .kpi-icon.teal { color: #0d9488; background: #ccfbf1; }
#dashboard-root .kpi-icon.grey { color: #8a93a3; background: #f1f3f7; }
#dashboard-root .kpi { transition: transform .15s ease, box-shadow .15s ease; }
#dashboard-root .kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(31, 36, 48, .18); }
@media (prefers-reduced-motion: reduce) { #dashboard-root .kpi, #dashboard-root .kpi:hover { transition: none; transform: none; } }
#dashboard-root .kpi.border-dashed { border-style: dashed; box-shadow: none; background: transparent; }
#dashboard-root .dash-chart { position: relative; height: 260px; }
#dashboard-root .card.dash-card-folded .card-body { min-height: 0; }

/* Status pills (tasks, maintenance, shifts). */
#dashboard-root .dash-pill { display: inline-block; font-size: .72rem; font-weight: 500; line-height: 1; padding: .3rem .5rem; border-radius: 3px; color: #fff; white-space: nowrap; text-transform: capitalize; }
#dashboard-root .dash-pill.green { background: var(--dash-green); } #dashboard-root .dash-pill.red { background: var(--dash-red); }
#dashboard-root .dash-pill.amber { background: var(--dash-amber); } #dashboard-root .dash-pill.blue { background: var(--app-accent); }
#dashboard-root .dash-pill.teal { background: var(--dash-teal); }

/* Rows that read like the reference's task table / activity feed. */
#dashboard-root .dash-rows { margin: 0 calc(-1 * var(--dash-px)) calc(-1 * var(--dash-py)); }
#dashboard-root .dash-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .55rem var(--dash-px); border-top: 1px solid var(--dash-line); color: inherit; text-decoration: none; }
#dashboard-root a.dash-row:hover { background: #f8faff; }
#dashboard-root .dash-row-title { font-weight: 500; color: var(--dash-ink); flex: 1 1 auto; min-width: 0; }
#dashboard-root .dash-row-meta { color: var(--dash-muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
#dashboard-root .dash-group { padding: .5rem var(--dash-px); border-top: 1px solid var(--dash-line); font-weight: 500; color: #3a4050; background: #fafbfd; font-size: .9rem; }
#dashboard-root .dash-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor; }
#dashboard-root .dash-avatar.green { background: #bbf7d0; color: #16a34a; } #dashboard-root .dash-avatar.amber { background: #fde68a; color: #d97706; }
#dashboard-root .dash-avatar.red { background: #fecaca; color: #dc2626; }
#dashboard-root .dash-avatar > span { color: #1f2430; }
#dashboard-root .dash-empty { color: var(--dash-muted); font-size: .9rem; margin: 0; }

/* Tables: tinted head, roomy rows. */
#dashboard-root .dash-table { margin: 0 calc(-1 * var(--dash-px)) calc(-1 * var(--dash-py)); }
#dashboard-root .dash-table .table { margin: 0; }
#dashboard-root .dash-table thead th { background: var(--dash-head); color: #3a4050; font-weight: 600; font-size: .9rem; padding: .6rem var(--dash-px); border-top: 1px solid #dbe5fb; border-bottom: 1px solid #dbe5fb; position: sticky; top: 0; z-index: 1; }
#dashboard-root .dash-table tbody td { padding: .55rem var(--dash-px); border-color: var(--dash-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
#dashboard-root .dash-table tbody tr:last-child td { border-bottom: 0; }

/* Range switch (All / 1M / 6M / 1Y in the reference). */
#dashboard-root .dash-seg { display: inline-flex; gap: .15rem; }
#dashboard-root .dash-seg .btn { border: 0; background: transparent; color: #8fa6f8; font-weight: 500; font-size: .85rem; padding: .3rem .7rem; border-radius: 3px; }
#dashboard-root .dash-seg .btn:hover { color: var(--app-accent); }
#dashboard-root .dash-seg .btn.active { background: #e8eeff; color: var(--app-accent); }
#dashboard-root .dash-head .form-control-sm { border-color: var(--dash-line); background: #f6f8fd; }

/* Labour budget bar + menu ranking bars. */
#dashboard-root .dash-bar { height: 8px; border-radius: 4px; background: #eef1f7; overflow: hidden; }
#dashboard-root .dash-bar > div { height: 100%; border-radius: 4px; }
#dashboard-root .dash-rank { display: grid; grid-template-columns: minmax(0, 220px) 1fr 64px; align-items: center; gap: .75rem; margin-bottom: .6rem; }
#dashboard-root .dash-rank .dash-bar { height: 12px; border-radius: 2px; }
#dashboard-root .dash-rank .dash-bar > div { background: var(--app-accent); border-radius: 2px; }
#dashboard-root .dash-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
@media (max-width: 575.98px) {
    #dashboard-root { --dash-px: .9rem; --dash-py: .85rem; }
    #dashboard-root .dash-rank { grid-template-columns: minmax(0, 1fr) 1fr 48px; }
    #dashboard-root .kpi-value { font-size: 1.35rem; }
    #dashboard-root .dash-chart { height: 220px; }
}