/* Variables */
:root {
    --burgersgreen: #68AD3B;
    --burgersgreendark: #3F7817;
    --burgersprimary: #4E941C;
    --burgersgray: #323232;
    --burgersgraylight: #505050;
    --burgerscontrol: #EEEEEE;
    --burgerstertiary: #102A71;
    --burgerswarning: #E69500;
    --burgerserror: #B31900;

    --burgersgreen-rgb: 104, 173, 59;
    --burgersgreendark-rgb: 63, 120, 23;
    --burgersprimary-rgb: 78, 148, 28;
    --burgersgray-rgb: 50, 50, 50;
    --burgersgraylight-rgb: 80, 80, 80;
    --burgerstertiary-rgb: 16, 42, 113;
    --burgerswarning-rgb: 230, 149, 0;
    --burgerserror-rgb: 179, 25, 0;

    /* Aliases (Dashboards / charts) */
    --brand-primary: var(--burgersprimary);
    --brand-primary-dark: var(--burgersgreendark);
    --brand-primary-light: var(--burgersgreen);
    --brand-secondary: var(--burgersgray);
    --brand-secondary-light: var(--burgersgraylight);
    --brand-tertiary: var(--burgerstertiary);
    --brand-warning: var(--burgerswarning);
    --brand-error: var(--burgerserror);
    --brand-control: var(--burgerscontrol);
    --brand-primary-rgb: var(--burgersprimary-rgb);
    --brand-primary-dark-rgb: var(--burgersgreendark-rgb);
    --brand-secondary-rgb: var(--burgersgray-rgb);
    --brand-tertiary-rgb: var(--burgerstertiary-rgb);
    --brand-warning-rgb: var(--burgerswarning-rgb);
    --brand-error-rgb: var(--burgerserror-rgb);

    /* Bootstrap theme → Burgers brand */
    --bs-primary: var(--burgersprimary);
    --bs-primary-rgb: var(--burgersprimary-rgb);
    --bs-secondary: var(--burgersgray);
    --bs-secondary-rgb: var(--burgersgray-rgb);
    --bs-success: var(--burgersgreendark);
    --bs-success-rgb: var(--burgersgreendark-rgb);
    --bs-info: var(--burgerstertiary);
    --bs-info-rgb: var(--burgerstertiary-rgb);
    --bs-warning: var(--burgerswarning);
    --bs-warning-rgb: var(--burgerswarning-rgb);
    --bs-danger: var(--burgerserror);
    --bs-danger-rgb: var(--burgerserror-rgb);

    --bs-link-color: var(--burgersgreendark);
    --bs-link-color-rgb: var(--burgersgreendark-rgb);
    --bs-link-hover-color: var(--burgersgreen);
    --bs-link-hover-color-rgb: var(--burgersgreen-rgb);

    --bs-primary-text-emphasis: #2a5010;
    --bs-primary-bg-subtle: #e8f3dc;
    --bs-primary-border-subtle: #a8d07a;

    --bs-success-text-emphasis: #2a5010;
    --bs-success-bg-subtle: #e8f3dc;
    --bs-success-border-subtle: #a8d07a;

    --bs-info-text-emphasis: #0a163c;
    --bs-info-bg-subtle: #e8ecf4;
    --bs-info-border-subtle: #8a9bc4;

    --bs-warning-text-emphasis: #7a5000;
    --bs-warning-bg-subtle: #fff4e0;
    --bs-warning-border-subtle: #f0c66a;

    --bs-danger-text-emphasis: #6a0f00;
    --bs-danger-bg-subtle: #f8e4e0;
    --bs-danger-border-subtle: #d98a7a;

    --bs-focus-ring-color: rgba(var(--burgersprimary-rgb), 0.35);
    --bs-form-valid-color: var(--burgersgreendark);
    --bs-form-valid-border-color: var(--burgersgreendark);

    /* Shared shell width (header, main, footer) — wider than Bootstrap's 1320px container */
    --burgers-layout-max-width: 1440px;
    --burgers-layout-side-margin: 64px;

    /* App content column + side bleed (Transport / Manuals / ServiceNotes) */
    --home-bg: #F7F8F6;
    --home-page-bg: #ECEDEA;
    --home-border: #E6E8E3;
    --home-gutter: calc(var(--bs-gutter-x, 1.5rem) / 2);
    --app-sticky-top: 0px;

    --bs-form-invalid-color: var(--burgerserror);
    --bs-form-invalid-border-color: var(--burgerserror);
}

/* Base */
html {
    font-size: 14px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(var(--burgersprimary-rgb), 0.35);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
}

footer {
    font-size: 0.9rem;
}

/* Links */
a {
    color: var(--burgersgreendark);
}

    a:hover {
        color: var(--burgersgreen);
    }

.link-footer {
    color: var(--burgersgreendark) !important;
}

    .link-footer:hover {
        color: var(--burgersgreen) !important;
    }

.link-card {
    color: white !important;
}

    .link-card:hover {
        color: var(--burgerscontrol) !important;
    }

/* Controls base */
.bg-main {
    background: var(--burgersgreendark);
}

.bg-main-alt {
    background: var(--burgersgreen);
}

.bg-sub {
    background: var(--burgersgray);
}

.bg-sub-alt {
    background: var(--burgersgraylight);
}

.bg-control {
    background: var(--burgerscontrol);
}

/* Header */
.header-bar {
    margin-bottom: 0;
}

.header-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    line-height: 1;
    text-decoration: none;
    color: var(--burgersgray);
}

.header-logo-link:hover {
    color: var(--burgersgreendark);
}

.header-logo-img {
    height: auto;
    width: auto;
    max-height: 40px;
    object-fit: contain;
}

.header-app-title {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.burgers-staff-login {
    opacity: 0.72;
    font-weight: 500;
}

.burgers-staff-login:hover {
    opacity: 1;
}

/* Keep light theme when OS prefers dark mode */
html {
    color-scheme: light;
}

.burgers-app {
    background-color: #fff;
    color: #212529;
}

.burgers-app .container {
    max-width: min(var(--burgers-layout-max-width), calc(100vw - var(--burgers-layout-side-margin)));
}

.burgers-app .header-bar,
.burgers-app .dropdown-menu {
    background-color: #fff;
}

.burgers-app .btn-outline-secondary {
    --bs-btn-color: var(--burgersgray);
    --bs-btn-border-color: var(--burgersgray);
    --bs-btn-hover-bg: var(--burgersgray);
    --bs-btn-hover-border-color: var(--burgersgray);
    --bs-btn-hover-color: #fff;
}

/* Bootstrap button / utility remaps */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--burgersgreendark);
    --bs-btn-border-color: var(--burgersgreendark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--burgersgreen);
    --bs-btn-hover-border-color: var(--burgersgreen);
    --bs-btn-focus-shadow-rgb: var(--burgersgreendark-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--burgersprimary);
    --bs-btn-active-border-color: var(--burgersgreendark);
}

.btn-outline-primary {
    --bs-btn-color: var(--burgersgreendark);
    --bs-btn-border-color: var(--burgersgreendark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--burgersgreendark);
    --bs-btn-hover-border-color: var(--burgersgreendark);
    --bs-btn-focus-shadow-rgb: var(--burgersgreendark-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--burgersprimary);
    --bs-btn-active-border-color: var(--burgersgreendark);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--burgersgray);
    --bs-btn-border-color: var(--burgersgray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--burgersgraylight);
    --bs-btn-hover-border-color: var(--burgersgraylight);
    --bs-btn-focus-shadow-rgb: var(--burgersgray-rgb);
    --bs-btn-active-bg: var(--burgersgraylight);
    --bs-btn-active-border-color: var(--burgersgray);
}

.btn-outline-secondary {
    --bs-btn-color: var(--burgersgray);
    --bs-btn-border-color: var(--burgersgray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--burgersgray);
    --bs-btn-hover-border-color: var(--burgersgray);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--burgersgraylight);
    --bs-btn-active-border-color: var(--burgersgraylight);
}

.btn-danger {
    --bs-btn-bg: var(--burgerserror);
    --bs-btn-border-color: var(--burgerserror);
    --bs-btn-hover-bg: #8f1400;
    --bs-btn-hover-border-color: #8f1400;
    --bs-btn-focus-shadow-rgb: var(--burgerserror-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--burgerserror);
    --bs-btn-border-color: var(--burgerserror);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--burgerserror);
    --bs-btn-hover-border-color: var(--burgerserror);
}

.btn-warning {
    --bs-btn-color: #212529;
    --bs-btn-bg: var(--burgerswarning);
    --bs-btn-border-color: var(--burgerswarning);
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #c47f00;
    --bs-btn-hover-border-color: #c47f00;
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--burgersgreendark-rgb), var(--bs-text-opacity)) !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--burgersprimary-rgb), var(--bs-bg-opacity)) !important;
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--burgersprimary-rgb), var(--bs-border-opacity)) !important;
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}

/* Tables */
.table-container {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    border-collapse: collapse;
    position: relative;
}

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

    .table thead {
        position: relative;
    }

        .table thead th {
            position: sticky;
            top: 0;
            background-color: #fff;
        }

.table-body-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid #dee2e6;
}

.table tbody {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard */
}

/* Buttons */
.btn-main,
.btn-main:hover,
.btn-main:focus,
.btn-main:active {
    color: white !important;
    text-decoration: none;
}

.btn-main {
    background-color: var(--burgersgreendark);
    border-color: var(--burgersgreendark);
    font-family: 'MontSerrat', sans-serif;
}

    .btn-main:hover {
        background-color: var(--burgersgreen);
        border-color: var(--burgersgreen);
    }

.btn-outline-main {
    background-color: white;
    border-color: var(--burgersgreendark);
    font-family: 'MontSerrat', sans-serif;
}

    .btn-outline-main:hover {
        color: var(--burgersgreen);
        border-color: var(--burgersgreen);
    }

    .btn-main:focus, .btn-outline-main:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--burgersgreendark-rgb), 0.5);
    }

.btn-sub {
    color: white;
    background-color: var(--burgersgray);
    background-color: var(--burgersgray);
    font-family: 'MontSerrat', sans-serif;
}

    .btn-sub:hover {
        color: white;
        background-color: var(--burgersgraylight);
        border-color: var(--burgersgraylight);
    }

.btn-outline-sub {
    background-color: white;
    border-color: var(--burgersgray);
    font-family: 'MontSerrat', sans-serif;
}

    .btn-outline-sub:hover {
        color: white;
        background-color: var(--burgersgraylight);
        border-color: var(--burgersgraylight);
    }

    .btn-sub:focus, .btn-outline-sub:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--burgersgraylight-rgb), 0.5);
    }

.btn-document {
    color: var(--burgersgray);
    background: var(--burgerscontrol);
    border: 1px solid var(--burgerscontrol);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .btn-document:hover {
        background-color: #fff; /* slightly brighter */
        border-color: var(--burgersgraylight);
        color: var(--burgersgraydark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .btn-document:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(100, 100, 100, 0.25);
    }

.btn-portal,
.btn-portal:hover,
.btn-portal:focus,
.btn-portal:active {
    color: white !important;
    text-decoration: none;
}

.btn-portal {
    background-color: var(--burgersgraylight);
    border-color: var(--burgersgraylight);
    font-family: 'MontSerrat', sans-serif;
    font-size: 12pt;
}

    .btn-portal:hover {
        background-color: var(--burgersgray);
        border-color: var(--burgersgray);
    }

.btn-outline-danger {
    font-family: 'MontSerrat', sans-serif;
}

.field {
    margin-bottom: 0.5rem;
}

    .field label {
        font-size: 0.75rem;
        color: #666;
        display: block;
    }

.dropdown-item {
    color: var(--burgersgreendark) !important;
}

    .dropdown-item:hover {
        color: var(--burgersgreen);
    }

    .dropdown-item:focus {
        background-color: transparent !important;
    }

.note-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 0.75rem;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.badge-main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.8rem;
    background: var(--burgersgreendark);
}

.badge-main-alt {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.8rem;
    background: var(--burgersgray);
}

/* ===== Shared app-page shell (fill-to-footer + sticky detail chrome) ===== */

.app-page {
    background: var(--home-bg);
    /* Horizontal bleed only — vertical negative margin clips under the shell when main py is 0 */
    margin: 0 calc(var(--home-gutter) * -1);
    padding: 1.5rem var(--home-gutter) 2rem;
    min-height: calc(100vh - 180px);
    flex: 1 1 auto;
    color: var(--burgersgray);
}

.app-page:has(> .task-detail-top) {
    padding-top: 0;
}

body:has(.app-page) {
    background: var(--home-page-bg) !important;
}

body:has(.app-page) .burgers-shell-content > main,
body:has(.app-page) main {
    background: transparent;
}

body:has(.app-page) .burgers-shell-content > main > .container,
body:has(.app-page) main > .container {
    background: transparent;
}

body:has(.app-page) .burgers-shell-content > footer {
    background: #fff !important;
    border-top-color: var(--home-border);
    margin-top: 0 !important;
    flex-shrink: 0;
}

.home-divider {
    border: 0;
    border-top: 1px solid var(--home-border);
    opacity: 1;
    margin: 0 0 1.5rem;
}

.task-detail-top {
    --task-chrome-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--task-chrome-gap);
    position: sticky;
    top: var(--app-sticky-top, 0px);
    z-index: 20;
    flex-shrink: 0;
    background: var(--home-bg);
    margin-left: calc(var(--home-gutter) * -1);
    margin-right: calc(var(--home-gutter) * -1);
    margin-bottom: 0.75rem;
    padding: var(--task-chrome-gap) var(--home-gutter) var(--task-chrome-gap);
    overflow: visible;
}

.task-detail-top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: inherit;
    pointer-events: none;
}

.task-detail-top .home-divider {
    margin: 0;
    width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    height: 0;
    border: 0;
    border-top: 1px solid var(--home-border);
}

.task-detail-back {
    font-size: 15px;
    flex: 0 0 auto;
}

.task-page-id {
    min-width: 0;
    flex: 0 1 auto;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--burgersgray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In a horizontal CTA row the id should share space with actions */
.task-cta-row .task-page-id {
    flex: 1 1 8rem;
}

.task-detail-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--burgersgraylight);
    margin-bottom: 0.2rem;
}

.task-detail-field-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--burgersgray);
    word-break: break-word;
}

.task-detail-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    /*
      Side-nav apps lock body height; default app pages scroll inside main
      so the footer stays at the bottom of the viewport and content never
      paints past it. Locked internal-scroll pages (fleet-pick / swipe / gallery)
      keep their own overflow:hidden + inner scroller.
    */
    body.burgers-app:has(.app-page) {
        min-height: 100vh;
    }

    body.burgers-app:has(.app-page) > .burgers-shell {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
    }

    body.burgers-app.has-mobile-nav:has(.app-page):not(:has(.fleet-pick-page)):not(:has(.task-swipe-page)):not(:has(.image-gallery-page)) .burgers-shell-content,
    body.burgers-app:has(.app-page):not(:has(.fleet-pick-page)):not(:has(.task-swipe-page)):not(:has(.image-gallery-page)) .burgers-shell-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--home-page-bg);
    }

    body.burgers-app.has-mobile-nav:has(.app-page):not(:has(.fleet-pick-page)):not(:has(.task-swipe-page)):not(:has(.image-gallery-page)) .burgers-shell-content > main,
    body.burgers-app:has(.app-page):not(:has(.fleet-pick-page)):not(:has(.task-swipe-page)):not(:has(.image-gallery-page)) .burgers-shell-content > main {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: transparent;
    }

    body.burgers-app:has(.app-page) main > .container {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: min(var(--burgers-layout-max-width), calc(100vw - var(--burgers-layout-side-margin))) !important;
        background: transparent;
    }

    body.burgers-app:has(.app-page) .app-page {
        flex: 1 0 auto;
        min-height: 100%;
    }

    body.burgers-app.has-mobile-nav:has(.app-page) .burgers-desktop-sidenav {
        background: var(--home-bg);
        border-right-color: var(--home-border);
    }
}

@media (max-width: 767.98px) {
    body:has(.app-page) {
        background: var(--home-bg) !important;
    }

    body.burgers-app.has-mobile-nav:has(.app-page) .burgers-shell-content,
    body.burgers-app.has-mobile-nav:has(.app-page) main {
        background: var(--home-bg);
    }

    /* Flush under mobile topbar — sticky chrome supplies its own top padding */
    body.burgers-app.has-mobile-nav:has(.task-detail-top) > .burgers-shell > .burgers-shell-content > main,
    body.burgers-app.has-mobile-nav:has(.task-detail-top) > main {
        padding-top: 0 !important;
    }

    body.burgers-app.has-mobile-nav .app-page {
        --app-sticky-top: 0px;
        margin: 0;
        max-width: 100%;
        padding: 1rem var(--home-gutter) 1rem;
        min-height: 100%;
    }

    body.burgers-app.has-mobile-nav .app-page:has(> .task-detail-top) {
        padding-top: 0;
    }

    body.burgers-app.has-mobile-nav .task-detail-top {
        --task-chrome-gap: 0.5rem;
        padding-top: 0.5rem;
    }

    .home-divider {
        border-top-color: var(--home-border);
    }
}