/* X-Rev Water Testing - Custom Styles */
/* Built on Bootstrap 5.3.2 with custom X-Rev branding */

:root {
    /* X-Rev Primary Colors - aligned with X-Revolution / HTH look.
       Flat (no gradients) — lighter than the deep-navy pass, still
       solid/rich rather than the legacy system's pale sidebar blue. */
    --xrev-primary: #026690;
    /* Flat teal-blue: buttons, accents, headers — was #0284C7, swapped as a
       preview to the sidebar's darker tone per request. */
    --xrev-secondary: #01516f;
    /* Darker still: sidebar backdrop, hovers and active states — keeps a
       two-tone relationship with --xrev-primary now that primary is darker. */
    --xrev-dark: #026690;
    --xrev-light: #BBDEFB;
    /* Light blue tint for subtle highlights */
    --xrev-input-bg: #fff;
    /* Field background (was a pale cyan tint; now plain white) */
    --xrev-header-color: #026690;
    /* Card/modal/table headers — same as --xrev-primary */

    /* Several templates use Bootstrap's raw bg-primary/text-primary/border-primary
       utility classes directly (instead of our .card-header/.modal-header rules),
       and those utilities carry !important with Bootstrap's own default blue —
       so they never picked up any of our color changes above. Overriding
       Bootstrap's own variables here fixes every one of those spots at once,
       everywhere in the app, instead of hunting down each template.
       --bs-primary-rgb must stay the RGB of --xrev-primary above (#026690). */
    --bs-primary: var(--xrev-primary);
    --bs-primary-rgb: 2, 102, 144;

    /* Typography */
    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Button Colors - flat, no gradients */
    --btn-primary-bg: #026690;
    --btn-primary-hover: #01516f;
    --btn-shadow: 0 3px 6px rgba(2, 102, 144, 0.3);
    --btn-shadow-hover: 0 6px 12px rgba(2, 102, 144, 0.4);

    /* Status Colors */
    --status-success: #4CAF50;
    --status-warning: #FF9800;
    --status-error: #F44336;
    --status-info: #2196F3;

    /* Measured (via JS) real height of the dismissible launch banner, 0 when
       it's absent/dismissed. .top-header is fixed right below it (banner
       height is its "top"); .main-content and .sub-sidebar add the header's
       own fixed 64px on top of this to know where real content starts.
       Never applied to the primary .sidebar, which stays full-height
       regardless of the header or banner. */
    --xrev-banner-height: 0px;
    --xrev-header-fixed-height: 64px;
}

/* Superadmin pages share this stylesheet (see base_superadmin.html) but run
   their own teal Solenis theme (superadmin.css), not this X-Rev blue one.
   card-header/modal-header/table-primary are scoped to body:not(.superadmin)
   below so they don't paint superadmin's plain cards blue at all (falls back
   to Bootstrap's own default header). This block resets the remaining
   tokens — the generic .btn-primary rule and raw Bootstrap
   bg-primary/border-primary utilities via --bs-primary — that aren't tied to
   a single selector and so can't be scoped that way. */
body.superadmin {
    --xrev-primary: #2196F3;
    --xrev-secondary: #1E88E5;
    --xrev-dark: #1976D2;
    --xrev-input-bg: #E1F5FE;
    --btn-primary-bg: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    --btn-primary-hover: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    --btn-shadow: 0 3px 6px rgba(33, 150, 243, 0.3);
    --btn-shadow-hover: 0 6px 12px rgba(33, 150, 243, 0.4);
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
}

/* ===== GLOBAL TYPOGRAPHY ===== */
body {
    font-family: var(--font-family-primary);
}

/* ===== SIDEBAR NAVIGATION ===== */
.sidebar {
    background: var(--xrev-secondary);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 160px;
    z-index: 1000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    /* Scrolling lives on .flex-grow-1 below, not here — a scrollbar on this
       outer box double-reserves width and pushes .xrev-nav-btn's right
       margin past the sidebar's edge, clipping it asymmetrically. */
    overflow: visible;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.18s ease;
}

/* Discrete pill-button nav items (Test Water / Manage / Reporting /
   Administration) — a nod to the legacy desktop app's big standalone blue
   buttons, modernized: each item is its own rounded chip with breathing
   room around it instead of a flush row, brighter than the sidebar's own
   backdrop so it reads as a raised control rather than a highlighted link.
   Same markup renders on the dark sidebar and the light mobile offcanvas,
   so the fill/hover/active colors are scoped per background. */
.xrev-nav-btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.8rem 0.5rem;
    margin: 0 0.75rem 0.6rem;
    text-align: center;
}

.sidebar .xrev-nav-btn {
    background: linear-gradient(160deg, #0389bb, var(--xrev-primary));
    box-shadow: 0 2px 5px rgba(1, 24, 46, 0.25);
}

.sidebar .xrev-nav-btn:hover {
    background: linear-gradient(160deg, #04a5d4, #0389bb);
    color: white;
    box-shadow: 0 4px 10px rgba(1, 24, 46, 0.3);
    transform: translateY(-1px);
}

.sidebar .xrev-nav-btn.active {
    background: #fff;
    color: var(--xrev-primary);
    box-shadow: 0 2px 5px rgba(1, 24, 46, 0.25);
}

.offcanvas-body .xrev-nav-btn {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.offcanvas-body .xrev-nav-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.offcanvas-body .xrev-nav-btn.active {
    background: var(--xrev-primary);
    color: #fff;
}

.offcanvas-body .xrev-nav-btn.active i {
    color: #fff;
}

/* Ensure sidebar content is properly contained */
.sidebar .flex-grow-1 {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Flex items default to min-width:auto, so a long label (e.g.
   "Administration") in a bold, centered pill won't shrink below its own
   content width — it silently overflows past the sidebar's right edge
   instead of wrapping. min-width:0 lets it shrink and wrap normally. */
.sidebar li.nav-item {
    min-width: 0;
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ===== MAIN LAYOUT ===== */
.main-content {
    margin-left: 160px;
    min-height: 100vh;
    padding-top: calc(var(--xrev-banner-height, 0px) + var(--xrev-header-fixed-height));
}

.main-content.has-sub-sidebar {
    margin-left: 310px;
}

/* Clicking a nav button whose own destination is the current page toggles
   this (see the click handler in base.html) to collapse the second sidebar
   without leaving the page. */
body.sub-sidebar-collapsed .sub-sidebar {
    display: none;
}

body.sub-sidebar-collapsed .main-content.has-sub-sidebar {
    margin-left: 160px;
}

/* ===== SUB-SIDEBAR (Reporting / Administration second-level nav) =====
   Plain in-page nav list, not a floating card — blends into the page
   instead of reading as a separate widget. */
.sub-sidebar {
    position: fixed;
    top: calc(var(--xrev-banner-height, 0px) + var(--xrev-header-fixed-height));
    left: 160px;
    width: 150px;
    height: calc(100vh - var(--xrev-banner-height, 0px) - var(--xrev-header-fixed-height));
    z-index: 999;
    overflow-y: auto;
    padding: 1rem 0.9rem 0.9rem 0.9rem;
    background: white;
    border-right: 1px solid #eee;
}

/* Small round toggle tab sitting on the sub-sidebar's top-right corner (its own
   fixed position, not nudged over when the sub-sidebar collapses to display:none -
   it moves to the primary sidebar's edge instead, via the body class below). */
.sub-sidebar-toggle-btn {
    position: fixed;
    top: calc(var(--xrev-banner-height, 0px) + var(--xrev-header-fixed-height) + 0.6rem);
    left: 296px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    color: var(--xrev-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: left 0.18s ease;
}

.sub-sidebar-toggle-btn:hover {
    background: var(--xrev-primary);
    color: #fff;
    border-color: var(--xrev-primary);
}

body.sub-sidebar-collapsed .sub-sidebar-toggle-btn {
    left: 146px;
}

.sub-sidebar-heading {
    text-transform: uppercase;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    margin-top: 3.2rem;
    padding: 0 0.5rem;
}

.sub-sidebar .list-group-item {
    border: none !important;
    padding: 0.7rem 0.75rem;
    border-radius: 10px !important;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    color: #33475b;
    transition: all 0.18s ease;
}

.sub-sidebar .list-group-item-action:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--xrev-primary);
}

.sub-sidebar .list-group-item-action.active {
    background: var(--xrev-primary);
    color: white;
    box-shadow: 0 2px 5px rgba(1, 24, 46, 0.2);
}

.sub-sidebar .list-group-divider {
    border-top: 1px solid #eee;
    margin: 0.5rem 0.5rem;
}

/* ===== TOP HEADER =====
   Fixed in place, same as the sidebars — stays visible while the page
   scrolls. Left offset always clears the primary sidebar (160px), which
   also covers the sub-sidebar's column when it's showing since a fixed
   element doesn't care about .main-content's margin either way. Its top
   offset is the banner's real (possibly zero) height, so it docks right
   below the banner instead of overlapping it. */
.top-header {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: var(--xrev-banner-height, 0px);
    left: 160px;
    right: 0;
    height: var(--xrev-header-fixed-height);
    display: flex;
    align-items: center;
    /* Below Bootstrap's modal-backdrop (1050) and modal (1055), so opening
       a modal properly covers this bar instead of it staying on top. */
    z-index: 1010;
}

/* No primary sidebar on these pages (login, hide_chrome) — header spans
   from the left edge instead of clearing a 210px column that isn't there. */
.main-content.full-width .top-header,
.main-content.full-width .cc-launch-banner {
    left: 0;
}

/* ===== HEADER: STORE PILL + USER PILL =====
   Styled like the sidebar's .xrev-nav-btn chips (10px corners, blue gradient,
   bold white text, lift on hover) so the header reads as part of the same nav. */
.top-header .store-pill,
.top-header .user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid #d7dee4;
    color: #1f2d36;
    background: #fff;
    transition: all 0.18s ease;
}
.top-header .store-pill:hover,
.top-header .user-pill:hover,
.top-header .store-pill.show,
.top-header .user-pill.show {
    color: #1f2d36;
    border-color: var(--xrev-primary);
    background: #f3f8fb;
}
.top-header .store-pill:focus-visible,
.top-header .user-pill:focus-visible {
    outline: 2px solid var(--xrev-primary);
    outline-offset: 2px;
}
.top-header .store-pill-icon { color: var(--xrev-primary); font-size: 1rem; }
.top-header .store-pill-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Superadmin with no store selected: amber, so "All stores" is never mistaken for a store */
.top-header .store-pill-all { border-color: #e6b64c; background: #fff8e6; }
.top-header .store-pill-all .store-pill-icon { color: #b27b00; }
.top-header .store-pill-all:hover, .top-header .store-pill-all.show { border-color: #b27b00; background: #fff3d6; }
.top-header .store-pill-static { cursor: default; }
.top-header .store-pill-static:hover { border-color: #d7dee4; background: #fff; }
.top-header .store-pill-primary { color: #e0a800; font-size: 0.7rem; }
.top-header .store-pill-hint { display: block; white-space: normal; max-width: 260px; font-size: 0.75rem; padding-top: 0; }
.top-header .dropdown-toggle.store-pill::after,
.top-header .dropdown-toggle.user-pill::after { margin-left: 0.15rem; opacity: 0.6; }

.top-header .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--xrev-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.top-header .user-menu .user-avatar-lg {
    width: 38px; height: 38px; font-size: 0.9rem;
}
.top-header .user-pill { padding-left: 0.45rem; }

.top-header .store-pill-menu,
.top-header .user-menu {
    min-width: 250px;
    padding: 0.35rem 0;
    border: 1px solid #e0e6eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 35, 50, 0.12);
}
.top-header .store-pill-menu .dropdown-item,
.top-header .user-menu .dropdown-item { padding: 0.5rem 1rem; font-size: 0.875rem; }
.top-header .store-pill-menu .dropdown-item.active,
.top-header .user-menu .dropdown-item.active { background: var(--xrev-primary); color: #fff; }
.top-header .store-pill-menu .dropdown-item.active .store-pill-primary { color: #ffe08a; }
.top-header .store-pill-menu .dropdown-header {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7a86; padding-bottom: 0.25rem;
}
.top-header .user-menu-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 1rem 0.35rem; }
.top-header .user-menu-name { font-weight: 600; font-size: 0.9rem; color: #1f2d36; }
.top-header .user-menu-meta { font-size: 0.75rem; color: #6b7a86; }

@media (max-width: 767.98px) {
    .top-header .store-pill-label,
    .top-header .user-pill-name { display: none; }
    .top-header .store-pill,
    .top-header .user-pill { padding: 0 0.6rem; }
}

/* ===== CUSTOMER TABS ===== */
.customer-tabs {
    background: white;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.customer-tabs .nav-link {
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    border-radius: 0;
}

.customer-tabs .nav-link:hover {
    color: var(--xrev-dark);
    background: #f8f9fa;
}

.customer-tabs .nav-link.active {
    color: var(--xrev-primary);
    border-bottom-color: var(--xrev-primary);
    font-weight: 600;
    background: transparent;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: var(--btn-primary-bg);
    border: none;
    box-shadow: var(--btn-shadow);
    color: white;
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover);
    border: none;
    color: white;
}

.btn-primary:focus,
.btn-primary:active {
    background: var(--btn-primary-hover);
    border: none;
    box-shadow: var(--btn-shadow);
    color: white;
}

/* Green buttons match the water testing submit button. Scoped to
   body:not(.superadmin) — superadmin pages share this stylesheet
   (body.superadmin, see base_superadmin.html) but must stay untouched. */
body:not(.superadmin) .btn-success {
    background-color: #1E8A5F;
    border-color: #1E8A5F;
}

body:not(.superadmin) .btn-success:hover,
body:not(.superadmin) .btn-success:focus,
body:not(.superadmin) .btn-success:active {
    background-color: #17714C !important;
    border-color: #17714C !important;
}

body:not(.superadmin) .btn-outline-success {
    color: #1E8A5F;
    border-color: #1E8A5F;
}

body:not(.superadmin) .btn-outline-success:hover {
    background-color: #1E8A5F;
    border-color: #1E8A5F;
    color: white;
}

/* Bootstrap scopes .btn-outline-primary's colors to its own --bs-btn-*
   variables, hardcoded to stock Bootstrap blue (#0d6efd) at build time —
   they don't chain to the --bs-primary override above. Raw .btn-outline-primary
   usage (e.g. the report filters' All/None toggles) needs its own override
   to pick up the brand blue, same as .btn-outline-success above. */
body:not(.superadmin) .btn-outline-primary {
    --bs-btn-color: var(--xrev-primary);
    --bs-btn-border-color: var(--xrev-primary);
    --bs-btn-hover-bg: var(--xrev-primary);
    --bs-btn-hover-border-color: var(--xrev-primary);
    --bs-btn-active-bg: var(--xrev-primary);
    --bs-btn-active-border-color: var(--xrev-primary);
    --bs-btn-disabled-color: var(--xrev-primary);
    --bs-btn-disabled-border-color: var(--xrev-primary);
}

/* Pagination defaults to stock Bootstrap blue; bring it in line with the
   brand teal used everywhere else (buttons, table headers). */
body:not(.superadmin) .page-link {
    color: var(--xrev-primary);
}

body:not(.superadmin) .page-link:hover {
    color: var(--xrev-secondary);
}

body:not(.superadmin) .page-item.active .page-link {
    background-color: var(--xrev-primary);
    border-color: var(--xrev-primary);
    color: white;
}

/* ===== TABLE STYLING ===== */
body:not(.superadmin) .table-primary {
    --bs-table-bg: var(--xrev-header-color);
    --bs-table-color: white;
}

body:not(.superadmin) .table-primary th {
    background: var(--xrev-header-color);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--xrev-header-color);
}

/* ===== CARDS ===== */
.card {
    border: 1px solid #C2C2C2;
    box-shadow: none;
    border-radius: 6px;
}

body:not(.superadmin) .card-header {
    background: var(--xrev-header-color);
    color: white;
    font-weight: 600;
    border-bottom: none;
}

/* Light-background card headers (e.g. "Customer List") don't get the colored
   fill above, so they need dark text instead of the white it's paired with. */
.card-header.bg-light,
.card-header.bg-white {
    color: #212529;
}

/* Muted subtitle text inside colored headers — Bootstrap's default muted gray has
   poor contrast against the dark header fill, so lighten it instead. */
.card-header .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 400;
}

/* Outline buttons inside colored headers — make them light so they stay visible
   against the blue background (otherwise blue-on-blue makes them disappear). */
.card-header .btn-outline-primary,
.card-header .btn-outline-secondary,
.card-header .btn-outline-info,
.card-header .btn-outline-danger,
.modal-header .btn-outline-primary,
.modal-header .btn-outline-secondary,
.modal-header .btn-outline-info,
.modal-header .btn-outline-danger,
.table-primary th .btn-outline-primary,
.table-primary th .btn-outline-secondary,
.table-primary th .btn-outline-info,
.table-primary th .btn-outline-danger {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
}
.card-header .btn-outline-primary:hover,
.card-header .btn-outline-secondary:hover,
.card-header .btn-outline-info:hover,
.card-header .btn-outline-danger:hover,
.modal-header .btn-outline-primary:hover,
.modal-header .btn-outline-secondary:hover,
.modal-header .btn-outline-info:hover,
.modal-header .btn-outline-danger:hover,
.table-primary th .btn-outline-primary:hover,
.table-primary th .btn-outline-secondary:hover,
.table-primary th .btn-outline-info:hover,
.table-primary th .btn-outline-danger:hover {
    color: var(--xrev-primary);
    background-color: #fff;
    border-color: #fff;
}

/* Solid primary/info buttons inside colored headers — same problem as the
   outline ones above (blue button on blue header), fixed the same way:
   flip to a white pill with colored text instead of matching the header. */
body:not(.superadmin) .card-header .btn-primary,
body:not(.superadmin) .card-header .btn-info,
body:not(.superadmin) .modal-header .btn-primary,
body:not(.superadmin) .modal-header .btn-info,
body:not(.superadmin) .table-primary th .btn-primary,
body:not(.superadmin) .table-primary th .btn-info {
    color: var(--xrev-primary);
    background-color: #fff;
    border-color: #fff;
}
body:not(.superadmin) .card-header .btn-primary:hover,
body:not(.superadmin) .card-header .btn-info:hover,
body:not(.superadmin) .modal-header .btn-primary:hover,
body:not(.superadmin) .modal-header .btn-info:hover,
body:not(.superadmin) .table-primary th .btn-primary:hover,
body:not(.superadmin) .table-primary th .btn-info:hover {
    color: var(--xrev-primary);
    background-color: #e9f5fc;
    border-color: #e9f5fc;
}

/* ===== DASHBOARD STATS ===== */
.stat-card {
    background: white;
    border-radius: 6px;
    padding: 1.5rem;
    border: 1px solid #C2C2C2;
    box-shadow: none;
    border-left: 4px solid var(--xrev-primary);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--xrev-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* ===== FORM CONTROLS ===== */
/* Pale cyan tint on all inputs/selects to match X-Revolution look. */
.form-control,
.form-select {
    background-color: var(--xrev-input-bg);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--xrev-input-bg);
    border-color: var(--xrev-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-control.required {
    border-color: #E91E63;
}

.form-control.required:focus {
    border-color: #E91E63;
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
}

/* ===== STATUS BADGES ===== */
.badge.bg-success {
    background-color: var(--status-success) !important;
}

/* "Active" etc. badges use the same soft mint green as the water test
   history "Completed" badge, instead of a solid saturated green — superadmin
   pages excluded, same as the button rules above. Scoped to .badge
   specifically — buttons like Submit Water Test use .btn-success, not
   .bg-success, so they're untouched. */
body:not(.superadmin) .badge.bg-success {
    background-color: #d1e7dd !important;
    color: #0a3622 !important;
}

.badge.bg-warning {
    background-color: var(--status-warning) !important;
}

.badge.bg-danger {
    background-color: var(--status-error) !important;
}

.badge.bg-info {
    background-color: var(--status-info) !important;
}

/* Role/info badges (e.g. "Store_Admin", "Regular User") use a soft tint of the
   app's own primary teal instead of Bootstrap's bright cyan-blue, so they read
   as part of the same palette as the header bars and avatar circles next to
   them — superadmin pages excluded, same as the success/warning badge rules. */
body:not(.superadmin) .badge.bg-info,
body:not(.superadmin) .badge.bg-primary {
    background-color: var(--xrev-light) !important;
    color: var(--xrev-primary) !important;
}

.avatar-initial {
    color: #fff;
}

/* Toggle switches / checkboxes use the sidebar's teal instead of Bootstrap's
   default blue when checked — superadmin pages excluded, same as above. */
body:not(.superadmin) .form-check-input:checked {
    background-color: var(--xrev-primary);
    border-color: var(--xrev-primary);
}

/* Breadcrumb nav links use the sidebar's teal instead of Bootstrap's default
   link blue — superadmin pages excluded, same as above. */
body:not(.superadmin) .breadcrumb-item a {
    color: var(--xrev-primary);
}

/* ===== WATER TESTING INTERFACE ===== */
.parameter-input {
    text-align: center;
    font-weight: 600;
}

.parameter-input.parameter-good {
    border-color: var(--status-success);
    background-color: rgba(76, 175, 80, 0.1);
}

.parameter-input.parameter-warning {
    border-color: var(--status-warning);
    background-color: rgba(255, 152, 0, 0.1);
}

.parameter-input.parameter-critical {
    border-color: var(--status-error);
    background-color: rgba(244, 67, 54, 0.1);
}

/* ===== CUSTOMER NOTES ===== */
.customer-notes-container {
    max-width: 1200px;
    margin: 0 auto;
}

.notes-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.note-item {
    background: white;
    border-radius: 6px;
    padding: 1.5rem;
    border: 1px solid #C2C2C2;
    box-shadow: none;
    border-left: 4px solid var(--xrev-primary);
}

.note-header {
    margin-bottom: 1rem;
}

.note-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.note-date {
    font-weight: 600;
    color: var(--xrev-dark);
}

.note-author {
    color: #6c757d;
    font-size: 0.875rem;
}

.note-type {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.note-type.service {
    background: #E8F5E8;
    color: #2E7D32;
}

.note-type.maintenance {
    background: #E3F2FD;
    color: #1976D2;
}

.note-type.billing {
    background: #FFF3E0;
    color: #F57C00;
}

.note-type.issue {
    background: #FFEBEE;
    color: #D32F2F;
}

.note-content p {
    color: var(--xrev-dark);
    line-height: 1.6;
    margin: 0;
}

.customer-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.summary-card {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid #C2C2C2;
    box-shadow: none;
}

.summary-card h3 {
    color: var(--xrev-dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--xrev-primary);
    padding-bottom: 0.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item label {
    font-weight: 600;
    color: #6c757d;
}

.summary-item span {
    color: var(--xrev-dark);
    text-align: right;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active {
    background: #E8F5E8;
    color: #2E7D32;
}

.status-badge.inactive {
    background: #FFF3E0;
    color: #F57C00;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--xrev-light);
    border-radius: 6px;
}

.no-customer {
    text-align: center;
    padding: 3rem;
}

.no-customer h3 {
    color: var(--xrev-dark);
    margin-bottom: 1rem;
}

.no-customer p {
    color: #6c757d;
    margin-bottom: 2rem;
}

/* ===== CONTAINER MANAGEMENT =====
   Light tint + dark text reads fine on a white card body (container detail
   page); the same badge also sits inside a blue card-header in the
   container grid, where that dark text on a near-blue tint is nearly
   invisible — so that context gets a solid fill + white text instead. */
.container-type.pool {
    background: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--xrev-primary);
}

.container-type.spa {
    background: rgba(0, 137, 123, 0.2);
    color: #00695C;
}

.card-header .container-type.pool,
.card-header .container-type.spa {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

/* ===== SETTINGS PAGE ===== */
.settings-container {
    max-width: 800px;
    margin: 0 auto;
}

.settings-section {
    background: white;
    border-radius: 6px;
    border: 1px solid #C2C2C2;
    box-shadow: none;
    padding: 2rem;
    margin-bottom: 2rem;
}

.settings-section h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--xrev-dark);
    border-bottom: 2px solid var(--xrev-primary);
    padding-bottom: 0.5rem;
}

.settings-section h3 {
    margin-bottom: 1rem;
    color: var(--xrev-dark);
}

.parameter-ranges {
    margin-bottom: 1.5rem;
}

.range-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.range-group label {
    min-width: 150px;
    font-weight: 600;
    color: var(--xrev-dark);
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.range-inputs input {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
}

.range-inputs span {
    color: #6c757d;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 0.75rem;
    transform: scale(1.2);
}

.data-actions {
    display: grid;
    gap: 1.5rem;
}

.action-group {
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f9fa;
}

.action-group.danger-zone {
    border-color: var(--status-error);
    background: #fff5f5;
}

.action-group h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.action-group p {
    margin-bottom: 1rem;
    color: #6c757d;
}

.about-info {
    color: #6c757d;
    line-height: 1.6;
}

.about-info p {
    margin-bottom: 0.5rem;
}

.about-info strong {
    color: var(--xrev-dark);
}

/* ===== TEST DETAIL PAGE ===== */
.test-detail-container {
    max-width: 800px;
    margin: 0 auto;
}

.info-card {
    background: white;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 6px;
    border: 1px solid #C2C2C2;
    box-shadow: none;
}

.actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

/* ===== CONTAINER DETAIL PAGE ===== */
.container-detail-container {
    max-width: 1000px;
    margin: 0 auto;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
}

.simple-table th,
.simple-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.simple-table th {
    background: #f8f9fa;
    font-weight: 600;
}

/* ===== CUSTOMER DETAIL PAGE ===== */
.customer-detail-container {
    max-width: 1000px;
    margin: 0 auto;
}

.container-item {
    border: 1px solid #eee;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

/* ===== CUSTOMER OPTIONS PAGE ===== */
.customer-options-container {
    max-width: 1000px;
    margin: 0 auto;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.option-card {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid #C2C2C2;
    box-shadow: none;
}

.option-card h3 {
    color: var(--xrev-dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--xrev-primary);
    padding-bottom: 0.5rem;
}

.option-item {
    margin-bottom: 1rem;
}

.option-item:last-child {
    margin-bottom: 0;
}

.option-item label {
    display: block;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 0.5rem;
}

.checkbox-label {
    font-weight: 500;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sub-sidebar {
        display: none;
    }

    .main-content,
    .main-content.has-sub-sidebar {
        margin-left: 0;
    }

    .top-header,
    .cc-launch-banner {
        left: 0;
    }

    .customer-tabs .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .stat-card {
        margin-bottom: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .options-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .range-inputs {
        flex-direction: column;
        align-items: stretch;
    }

    .range-inputs span {
        text-align: center;
        margin: 0.25rem 0;
    }
}

@media (max-width: 576px) {
    .customer-tabs {
        padding: 0;
    }

    .customer-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .settings-container {
        margin: 0 1rem;
    }

    .settings-section {
        padding: 1.5rem;
    }

    .range-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .range-group label {
        min-width: auto;
    }

    .range-inputs {
        align-self: stretch;
        justify-content: center;
    }

    .range-inputs input {
        flex: 1;
        max-width: 100px;
    }
}

@media (max-width: 1024px) {
    .notes-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .customer-summary {
        order: -1;
    }
}

@media (max-width: 768px) {
    .note-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .summary-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .summary-item span {
        text-align: left;
    }
}

/* ===== NOTIFICATION SYSTEM ===== */
.notification-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 400px;
}

.notification {
    margin-bottom: 0.75rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-out;
    overflow: hidden;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
}

.notification-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-message {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.notification-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Notification Types */
.notification-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.notification-error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.notification-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.notification-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.alert {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

/* ===== MODAL CUSTOMIZATION ===== */
.modal-content {
    border: 1px solid #C2C2C2;
    box-shadow: none;
    border-radius: 6px;
}

body:not(.superadmin) .modal-header {
    background: var(--xrev-header-color);
    color: white;
    border-bottom: none;
}

/* Shared lighter, near-white warning treatment (left-accent-bar border instead
   of Bootstrap's stock saturated, all-sides-bordered .alert-warning) — used by
   the Customer Alerts card, the Customer Alert popup, and the water testing
   page's warning banners. */
.alert-soft-warning {
    background-color: #f8efce;
    border: none;
    border-left: 4px solid #ffbb0082;
    border-radius: 0.25rem;
    color: #664d03;
}

.modal-header .btn-close {
    filter: invert(1);
}

/* ===== LIGHT SECTION HEADERS ===== */
.gradient-header {
    background: #B9D9F8;
    color: #003366;
    font-weight: 600;
    padding: 1rem 1.5rem;
    margin: 0;
    border-radius: 6px 6px 0 0;
}

/* ===== UTILITY CLASSES ===== */
.text-xrev {
    color: var(--xrev-primary) !important;
}

.bg-xrev {
    background-color: var(--xrev-primary) !important;
}

.border-xrev {
    border-color: var(--xrev-primary) !important;
}

.text-xrev-dark {
    color: var(--xrev-dark) !important;
}

.bg-xrev-dark {
    background-color: var(--xrev-dark) !important;
}

/* ===== LOADING STATES ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner-border-xrev {
    color: var(--xrev-primary);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ===== FOCUS STATES ===== */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ===== ZENDESK WIDGET POSITIONING ===== */
/* Move Zendesk widget up to avoid overlapping with pagination controls */
/* Scoped to Zendesk-specific selectors only to avoid affecting other fixed overlays */
#launcher,
#webWidget,
iframe[id^="webWidget"],
iframe[id^="launcher"],
iframe[name*="zendesk"],
iframe[src*="zendesk"],
iframe[title="Message from company"],
iframe[title="Close message"],
.zEWidget,
.zEWidget-launcher,
.zEWidget-launcherFrame,
.zEWidget-button,
.zd-widget,
.EmbeddableMessenger,
[data-garden-id^="messenger"],
[data-garden-id^="channels"],
[data-testid="messengerLauncher"],
[data-test-id="messengerLauncher"],
[data-testid*="zendesk"],
[aria-label*="Zendesk"],
[aria-label*="Need any help"],
[class*="zendesk"][class*="launcher"],
[class*="EmbeddableMessenger"] {
    bottom: 80px !important;
}

/* ===== PRINT STYLES ===== */
@media print {

    .sidebar,
    .sub-sidebar,
    .customer-tabs,
    .top-header,
    .cc-launch-banner {
        display: none !important;
    }


    .main-content,
    .main-content.has-sub-sidebar {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}

/* ===== NESTED RECOMMENDATIONS ===== */
.nested-steps {
    margin-top: 8px;
    padding-left: 60px;
    border-left: 3px solid #eee;
    margin-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.nested-step {
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #555;
    display: flex;
    align-items: center;
}
.nested-step.multi-line {
    align-items: flex-start; 
}

.nested-step > i {
    margin-right: 8px;
    color: var(--xrev-primary);
    font-size: 1em;
    /* Match text size roughly but bold */
    margin-top: 3px;
    flex-shrink: 0;
}

.nested-step:last-child {
    margin-bottom: 0;
}

/* Sub-step inline drag/edit/delete — mirrors parent step-actions, smaller. */
.nested-step .step-content {
    flex: 1;
    min-width: 0;
}

.nested-drag-handle {
    cursor: grab;
    padding: 5px;
    font-size: 1.2rem;
    color: #6c757d !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nested-drag-handle:active {
    cursor: grabbing;
}

.nested-drag-handle:hover {
    color: #495057;
}

.nested-step-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.treatment-step:hover .nested-step-actions,
.maintenance-step:hover .nested-step-actions,
.maintenance-step-clean:hover .nested-step-actions {
    opacity: 1;
}

.nested-step-actions .btn {
    min-width: 26px;
    min-height: 26px;
    padding: 2px 6px;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Modal B sub-rows section. */
.modal-subrows-section {
    margin-top: 35px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.modal-subrows-label {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 6px;
}

.sub-row-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 145px;
    overflow-y: auto;
    padding-right: 4px;
}

.sub-row-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub-row-input-group .sub-row-drag-handle {
    cursor: grab;
    color: #999;
}

.sub-row-input-group .sub-row-input {
    flex: 1 1 auto;
}

#addSubRowBtn {
    margin-top: 8px;
}

/* Hide the floating Zendesk Help launcher — it overlaps table row actions
   and sticky action bars (e.g. Test History, System Options). Support is
   still reachable from the About X-Rev page's chat buttons (openZendeskChat). */
#launcher,
iframe[id^="launcher"],
.zEWidget-launcher,
.zEWidget-launcherFrame {
    display: none !important;
}