/* filename: assets/css/custom.css */

/* IMPORT FONTS (self-hosted — see assets/vendor/googlefonts/) */
@import url('../vendor/googlefonts/fonts.css');

:root {
    /* PRIMARY */
    --forest: #2e7d32;
    --slate: #3d4a52;

    /* ACCENTS */
    --sage: #7cb342;
    --earth: #8b7355;
    --terracotta: #c85a3e;
    
    /* NEUTRALS */
    --cream: #f7f5f0;
    --gray-light: #e8eaed;
    --charcoal: #2d3748;
    --white: #ffffff;
}

body {
    background-color: var(--cream);
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--forest);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Inside dark/white-text containers (e.g. .card-header.bg-dark, navbar, modals
   with dark headers), let headings inherit the container's text color instead
   of forcing the global forest-green which becomes unreadable on dark bg. */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6 {
    color: inherit;
}

/* Inventory Goals variety subtotal rows — render as a quiet summary line,
   not another data row. Soft forest-tinted highlight marks the row as a
   summary; strong top border separates it from the variety's data; italic
   muted text removes the visual weight of bold. */
tr.variety-subtotal td {
    background-color: rgba(46, 125, 50, 0.08) !important;
    border-top: 2px solid var(--forest, #2e7d32) !important;
    border-bottom: none !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-style: italic;
    font-weight: 400 !important;
    color: #6c757d;
}
/* The % Goal cell keeps its color coding so the bonus number remains scannable. */
tr.variety-subtotal td.text-success,
tr.variety-subtotal td.text-warning,
tr.variety-subtotal td.text-danger {
    color: inherit;
}
/* Visible gap between consecutive variety groups (using a transparent border
   so it inherits the card background and looks like negative space). */
table#goalsTable > tbody.variety-group + tbody.variety-group {
    border-top: 8px solid transparent;
}

/* Tabular figures across all numeric cells in the goals table so digits
   line up column-by-column regardless of width. */
table#goalsTable td.text-end,
table#goalsTable th.text-end,
table#goalsTable .goal-input {
    font-variant-numeric: tabular-nums;
}

/* The Goal column edits via an input — make the input look like plain
   right-aligned text by default so data rows and the subtotal align visually.
   Hover and focus reveal the editable affordance. */
table#goalsTable .goal-input {
    border: 1px solid #e9ecef;
    background-color: transparent;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
table#goalsTable .goal-input:hover {
    border-color: #adb5bd;
    background-color: #fff;
}
table#goalsTable .goal-input:focus {
    border-color: #86b7fe;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}
/* Subtotal row's Goal cell sits as plain text — match the input's right
   padding so the digits land in the same column as the editable values. */
tr.variety-subtotal td:nth-child(5) {
    padding-right: calc(0.5rem + 1px + 0.5rem); /* cell pad + input border + input pad */
}

/* Reserve a fixed-width slot for the optional info icon next to % Goal so the
   percentage number lands in the same column whether the icon is shown or not. */
.pct-icon-slot {
    display: inline-block;
    width: 18px;
    text-align: left;
    padding-left: 4px;
}

/* --- OVERRIDES --- */

/* Navbar: Forest Green */
.navbar-dark.bg-dark {
    background-color: var(--forest) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* Cards */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    background-color: var(--white);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: var(--white);
    border-bottom: 2px solid var(--gray-light);
    color: var(--forest);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
}

/* Buttons */
.btn-primary {
    background-color: var(--terracotta);
    border-color: var(--terracotta);
    font-weight: 600;
}
.btn-primary:hover {
    background-color: #b04a30;
    border-color: #b04a30;
}

.btn-success {
    background-color: var(--forest);
    border-color: var(--forest);
}
.btn-success:hover {
    background-color: #1b5e20;
}

.btn-secondary, .btn-outline-secondary {
    background-color: var(--slate);
    border-color: var(--slate);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: #2c363c;
}

/* Tables */
.table thead th {
    background-color: var(--slate);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(232, 234, 237, 0.3);
}

/* Forms */
.form-label {
    color: var(--slate);
    font-weight: 600;
    font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 0.25rem rgba(124, 179, 66, 0.25);
}

/* Badges */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.5em 0.75em;
}
.bg-primary { background-color: var(--forest) !important; }
.bg-secondary { background-color: var(--slate) !important; }
.bg-warning { background-color: var(--earth) !important; color: white !important; }
.bg-info { background-color: var(--sage) !important; color: #1a3c00 !important; }
.bg-success { background-color: var(--forest) !important; }

/* Utility Text Colors */
.text-forest { color: var(--forest) !important; }
.text-slate { color: var(--slate) !important; }
.text-earth { color: var(--earth) !important; }
.text-terracotta { color: var(--terracotta) !important; }

/* User Avatar */
.user-avatar {
    width: 32px;
    height: 32px;
    background-color: rgba(255,255,255,0.2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
}

/* --- SELECT2 (Searchable Dropdown) STYLING --- */
/* Match Bootstrap Input Height */
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 5px 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    color: var(--charcoal) !important;
}
/* Focus State */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--sage) !important;
    box-shadow: 0 0 0 0.25rem rgba(124, 179, 66, 0.25);
}
/* Dropdown Results */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--forest) !important;
    color: white !important;
}

/* Mobile Table Cards (Responsive) */
@media screen and (max-width: 768px) {
    .table-mobile-responsive thead { display: none; }
    .table-mobile-responsive, .table-mobile-responsive tbody, .table-mobile-responsive tr, .table-mobile-responsive td { display: block; width: 100%; }
    .table-mobile-responsive tr { margin-bottom: 15px; background-color: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding: 10px; }
    .table-mobile-responsive td { text-align: right; padding-left: 50%; position: relative; border-bottom: 1px solid #f1f5f9; }
    .table-mobile-responsive td:last-child { border-bottom: 0; }
    .table-mobile-responsive td::before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: 700; color: var(--slate); font-size: 0.85rem; text-transform: uppercase; }
}

/* --- PRICING TIER OVERRIDE STYLING (NEW) --- */
#tierSelect {
    background-color: #f0f9ff; /* Light blue to stand out */
    border: 2px solid var(--terracotta); /* DISTINCT border */
    color: var(--slate);
    font-weight: 700;
}

#tierSelect:focus {
    box-shadow: 0 0 0 0.25rem rgba(200, 90, 62, 0.25);
}

/* --- UNSAVED CHANGES INDICATOR --- */
.unsaved-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--terracotta);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    animation: slideIn 0.3s ease-out;
}

.unsaved-indicator.show {
    display: flex;
}

.unsaved-indicator i {
    font-size: 1.1rem;
}

@keyframes slideIn {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse animation for unsaved indicator */
.unsaved-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 90, 62, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(200, 90, 62, 0); }
}

/* Forest green button styles */
.btn-forest {
    background-color: var(--forest);
    border-color: var(--forest);
    color: white;
}
.btn-forest:hover {
    background-color: #1b5e20;
    border-color: #1b5e20;
    color: white;
}
.btn-forest:disabled {
    background-color: #94a894;
    border-color: #94a894;
    color: white;
}

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

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

/* ============================================
   UI COMPONENTS - Toast, Loading, Modals
   ============================================ */

/* --- TOAST NOTIFICATIONS --- */
.toast-container {
    z-index: 9999 !important;
}

.toast {
    border-radius: 8px;
    min-width: 300px;
}

.toast-success {
    background-color: var(--forest) !important;
    color: white;
}

.toast-success .toast-header {
    background-color: rgba(0,0,0,0.1);
    color: white;
}

.toast-danger {
    background-color: var(--terracotta) !important;
    color: white;
}

.toast-danger .toast-header {
    background-color: rgba(0,0,0,0.1);
    color: white;
}

.toast-warning {
    background-color: var(--earth) !important;
    color: white;
}

.toast-warning .toast-header {
    background-color: rgba(0,0,0,0.1);
    color: white;
}

.toast-info {
    background-color: var(--slate) !important;
    color: white;
}

.toast-info .toast-header {
    background-color: rgba(0,0,0,0.1);
    color: white;
}

.toast-icon-success { color: #a3d9a5 !important; }
.toast-icon-error { color: #ffb4a2 !important; }
.toast-icon-warning { color: #ffd89b !important; }
.toast-icon-info { color: #a0c4e8 !important; }

/* --- LOADING OVERLAY --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    backdrop-filter: blur(2px);
}

.loading-spinner {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.loading-text {
    color: var(--slate);
    font-weight: 600;
    font-size: 0.9rem;
}

.spinner-border.text-forest {
    color: var(--forest) !important;
}

/* --- SCROLLABLE MODALS --- */
/* A <form> wrapping modal-header/body/footer breaks .modal-dialog-scrollable:
   Bootstrap's height cap sits on .modal-content (a flex column), but the form
   in between has a natural height, so the body clips at the viewport instead
   of scrolling. Make the form relay the flex column layout. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* --- CONFIRMATION MODAL --- */
#confirmModal .modal-content {
    border-radius: 12px;
}

#confirmModal .modal-header {
    padding: 1.25rem 1.5rem 0.5rem;
}

#confirmModal .modal-body {
    padding: 0.5rem 1.5rem 1rem;
}

#confirmModal .modal-footer {
    padding: 0.5rem 1.5rem 1.25rem;
}

/* ============================================
   EMPTY STATE COMPONENT
   ============================================ */
.empty-state {
    padding: 3rem 1rem;
}

.empty-state-icon {
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.empty-state-message {
    max-width: 300px;
    margin: 0 auto;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb-nav {
    background: transparent;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.breadcrumb-item a {
    color: var(--forest);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    color: var(--terracotta);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--slate);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--gray-light);
    content: "/";
}

/* ============================================
   PROGRESS STEPPER
   ============================================ */
.stepper-container {
    padding: 1rem 0;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 80px;
}

.stepper-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background-color: var(--gray-light);
    color: var(--slate);
    border: 3px solid var(--gray-light);
}

.stepper-step.active .stepper-circle {
    background-color: var(--forest);
    color: white;
    border-color: var(--forest);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.2);
}

.stepper-step.complete .stepper-circle {
    background-color: var(--forest);
    color: white;
    border-color: var(--forest);
}

.stepper-step.pending .stepper-circle {
    background-color: white;
    color: var(--slate);
    border-color: var(--gray-light);
}

.stepper-label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate);
    text-align: center;
}

.stepper-step.active .stepper-label {
    color: var(--forest);
}

.stepper-step.complete .stepper-label {
    color: var(--forest);
}

.stepper-line {
    flex: 1;
    height: 3px;
    background-color: var(--gray-light);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s ease;
    min-width: 40px;
    max-width: 100px;
}

.stepper-line.complete {
    background-color: var(--forest);
}

/* ============================================
   FORM VALIDATION FEEDBACK
   ============================================ */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--terracotta);
    background-image: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 0.25rem rgba(200, 90, 62, 0.25);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--forest);
    background-image: none;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
}

.invalid-feedback {
    color: var(--terracotta);
    font-size: 0.8rem;
    font-weight: 500;
}

.valid-feedback {
    color: var(--forest);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================================
   MOBILE TABLE CARDS
   ============================================ */
@media screen and (max-width: 768px) {
    .table-cards thead {
        display: none;
    }

    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards tr {
        margin-bottom: 1rem;
        background-color: #fff;
        border: 1px solid var(--gray-light);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        padding: 0.75rem;
        overflow: visible;
    }

    .table-cards td {
        text-align: right;
        padding: 0.5rem 0.75rem;
        padding-left: 45%;
        position: relative;
        border-bottom: 1px solid #f1f5f9;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .table-cards td:last-child {
        border-bottom: 0;
    }

    .table-cards td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 40%;
        padding-right: 0.5rem;
        text-align: left;
        font-weight: 700;
        color: var(--slate);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* Actions column styling for mobile */
    .table-cards td:last-child {
        justify-content: center;
        padding-left: 0.75rem;
    }

    .table-cards td:last-child::before {
        display: none;
    }

    .table-cards .btn-group,
    .table-cards .d-flex {
        justify-content: center;
    }
}

/* ============================================
   BUTTON STANDARDIZATION
   ============================================ */
.btn-action {
    font-weight: 600;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-action:active {
    transform: translateY(0);
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.btn-icon i {
    margin: 0;
}

/* Ensure button spinner alignment */
.btn .spinner-border {
    vertical-align: middle;
}

/* ============================================
   TABLE DROPDOWN FIX
   Only override overflow on tables with action dropdowns
   ============================================ */
.table-responsive.has-dropdown {
    overflow: visible !important;
}
@media (max-width: 768px) {
    .table-responsive.has-dropdown {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* ============================================
   CURSOR UTILITIES
   ============================================ */
.cursor-pointer {
    cursor: pointer;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* --- 768px breakpoint: tablets and phones --- */
@media (max-width: 768px) {
    /* Shipping queue: stack action buttons vertically */
    .table-cards td[data-label="Actions"] {
        flex-direction: column;
        gap: 0.5rem;
        padding-left: 0.75rem;
    }
    .table-cards td[data-label="Actions"] .btn {
        width: 100%;
    }
    .table-cards td.text-nowrap {
        white-space: normal !important;
    }

    /* On Hold sidebar: stack btn-group vertically */
    .list-group-item .btn-group {
        flex-direction: column;
        gap: 0.25rem;
    }
    .list-group-item .btn-group .btn {
        border-radius: 6px !important;
    }

    /* Bigger tap targets */
    .btn-icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    .btn-sm {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Navbar avatar: slightly larger tap target */
    .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

/* --- 576px breakpoint: phones only --- */
@media (max-width: 576px) {
    /* Stack page headers (title + action buttons) */
    .container-fluid > .d-flex.justify-content-between,
    .dash-shell > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .container-fluid > .d-flex.justify-content-between > .d-flex.gap-2,
    .dash-shell > .d-flex.justify-content-between > .d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
    }
    .container-fluid > .d-flex.justify-content-between > .d-flex.gap-2 .btn,
    .dash-shell > .d-flex.justify-content-between > .d-flex.gap-2 .btn {
        flex: 1;
        min-width: 0;
    }

    /* Reduce horizontal padding on phones */
    .container-fluid.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Smaller form labels on phones */
    .form-label {
        font-size: 0.8rem;
    }

    /* Smaller status pills on phones */
    .status-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    /* Stack KPI cards 1-per-row on narrow phones */
    .row > .col-6.col-md-3 {
        width: 100%;
    }

    /* Dropdown menus: ensure visible on narrow screens */
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* Modals: near full-width on phones */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-lg {
        max-width: calc(100vw - 1rem);
    }
}

/* --- 400px breakpoint: very narrow phones --- */
@media (max-width: 400px) {
    /* Tighter table-cards label area */
    .table-cards td {
        padding-left: 38% !important;
    }
    .table-cards td::before {
        width: 33%;
        font-size: 0.7rem;
    }
}

/* ============================================
   ORDER STATUS COLORS
   Dedicated classes so badges, filter pills,
   and dashboard all render identically.
   ============================================ */

/* --- Status Pill (filter toggle buttons) --- */
.status-pill {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    transition: all 0.2s;
    border-width: 1px;
}
.status-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* -- Quote: Indigo #6610f2 -- */
.bg-status-quote { background-color: #6610f2 !important; color: #fff !important; }
.text-status-quote { color: #6610f2 !important; }
.btn-outline-status-quote { color: #6610f2; border-color: #6610f2; }
.btn-outline-status-quote:hover { background-color: #6610f2; color: #fff; border-color: #6610f2; }
.btn-check:checked + .btn-outline-status-quote { background-color: #6610f2; color: #fff; border-color: #6610f2; }

/* -- Approved: Blue #2c7be5 -- */
.bg-status-approved { background-color: #2c7be5 !important; color: #fff !important; }
.text-status-approved { color: #2c7be5 !important; }
.btn-outline-status-approved { color: #2c7be5; border-color: #2c7be5; }
.btn-outline-status-approved:hover { background-color: #2c7be5; color: #fff; border-color: #2c7be5; }
.btn-check:checked + .btn-outline-status-approved { background-color: #2c7be5; color: #fff; border-color: #2c7be5; }

/* -- Hold: Amber #e6a817 -- */
.bg-status-hold { background-color: #e6a817 !important; color: #000 !important; }
.text-status-hold { color: #e6a817 !important; }
.btn-outline-status-hold { color: #e6a817; border-color: #e6a817; }
.btn-outline-status-hold:hover { background-color: #e6a817; color: #000; border-color: #e6a817; }
.btn-check:checked + .btn-outline-status-hold { background-color: #e6a817; color: #000; border-color: #e6a817; }

/* -- Shipped: Teal-blue #17a2b8 -- */
.bg-status-shipped { background-color: #17a2b8 !important; color: #fff !important; }
.text-status-shipped { color: #17a2b8 !important; }
.btn-outline-status-shipped { color: #17a2b8; border-color: #17a2b8; }
.btn-outline-status-shipped:hover { background-color: #17a2b8; color: #fff; border-color: #17a2b8; }
.btn-check:checked + .btn-outline-status-shipped { background-color: #17a2b8; color: #fff; border-color: #17a2b8; }

/* -- Delivered: Teal-green #20c997 -- */
.bg-status-delivered { background-color: #20c997 !important; color: #fff !important; }
.text-status-delivered { color: #20c997 !important; }
.btn-outline-status-delivered { color: #20c997; border-color: #20c997; }
.btn-outline-status-delivered:hover { background-color: #20c997; color: #fff; border-color: #20c997; }
.btn-check:checked + .btn-outline-status-delivered { background-color: #20c997; color: #fff; border-color: #20c997; }

/* -- Completed: Forest Green #2e7d32 -- */
.bg-status-completed { background-color: #2e7d32 !important; color: #fff !important; }
.text-status-completed { color: #2e7d32 !important; }
.btn-outline-status-completed { color: #2e7d32; border-color: #2e7d32; }
.btn-outline-status-completed:hover { background-color: #2e7d32; color: #fff; border-color: #2e7d32; }
.btn-check:checked + .btn-outline-status-completed { background-color: #2e7d32; color: #fff; border-color: #2e7d32; }

/* -- Cancelled: Red #dc3545 -- */
.bg-status-cancelled { background-color: #dc3545 !important; color: #fff !important; }
.text-status-cancelled { color: #dc3545 !important; }
.btn-outline-status-cancelled { color: #dc3545; border-color: #dc3545; }
.btn-outline-status-cancelled:hover { background-color: #dc3545; color: #fff; border-color: #dc3545; }
.btn-check:checked + .btn-outline-status-cancelled { background-color: #dc3545; color: #fff; border-color: #dc3545; }

/* -- Expired: Muted Gray #6c757d -- */
.bg-status-expired { background-color: #6c757d !important; color: #fff !important; }
.text-status-expired { color: #6c757d !important; }
.btn-outline-status-expired { color: #6c757d; border-color: #6c757d; }
.btn-outline-status-expired:hover { background-color: #6c757d; color: #fff; border-color: #6c757d; }
.btn-check:checked + .btn-outline-status-expired { background-color: #6c757d; color: #fff; border-color: #6c757d; }

/* ============================================
   QUOTE REQUEST STATUS COLORS
   ============================================ */

/* -- QR Pending: Amber #e6a817 -- */
.bg-status-qr-pending { background-color: #e6a817 !important; color: #000 !important; }
.text-status-qr-pending { color: #e6a817 !important; }
.btn-outline-status-qr-pending { color: #e6a817; border-color: #e6a817; }
.btn-outline-status-qr-pending:hover { background-color: #e6a817; color: #000; border-color: #e6a817; }
.btn-check:checked + .btn-outline-status-qr-pending { background-color: #e6a817; color: #000; border-color: #e6a817; }

/* -- QR Reviewed: Blue #2c7be5 -- */
.bg-status-qr-reviewed { background-color: #2c7be5 !important; color: #fff !important; }
.text-status-qr-reviewed { color: #2c7be5 !important; }
.btn-outline-status-qr-reviewed { color: #2c7be5; border-color: #2c7be5; }
.btn-outline-status-qr-reviewed:hover { background-color: #2c7be5; color: #fff; border-color: #2c7be5; }
.btn-check:checked + .btn-outline-status-qr-reviewed { background-color: #2c7be5; color: #fff; border-color: #2c7be5; }

/* -- QR Converted: Forest Green #2e7d32 -- */
.bg-status-qr-converted { background-color: #2e7d32 !important; color: #fff !important; }
.text-status-qr-converted { color: #2e7d32 !important; }
.btn-outline-status-qr-converted { color: #2e7d32; border-color: #2e7d32; }
.btn-outline-status-qr-converted:hover { background-color: #2e7d32; color: #fff; border-color: #2e7d32; }
.btn-check:checked + .btn-outline-status-qr-converted { background-color: #2e7d32; color: #fff; border-color: #2e7d32; }

/* -- QR Declined: Red #dc3545 -- */
.bg-status-qr-declined { background-color: #dc3545 !important; color: #fff !important; }
.text-status-qr-declined { color: #dc3545 !important; }
.btn-outline-status-qr-declined { color: #dc3545; border-color: #dc3545; }
.btn-outline-status-qr-declined:hover { background-color: #dc3545; color: #fff; border-color: #dc3545; }
.btn-check:checked + .btn-outline-status-qr-declined { background-color: #dc3545; color: #fff; border-color: #dc3545; }

/* -- QR Expired: Gray #6c757d -- */
.bg-status-qr-expired { background-color: #6c757d !important; color: #fff !important; }
.text-status-qr-expired { color: #6c757d !important; }
.btn-outline-status-qr-expired { color: #6c757d; border-color: #6c757d; }
.btn-outline-status-qr-expired:hover { background-color: #6c757d; color: #fff; border-color: #6c757d; }
.btn-check:checked + .btn-outline-status-qr-expired { background-color: #6c757d; color: #fff; border-color: #6c757d; }

/* ============================================
   PULL SHEET STATUS COLORS
   ============================================ */

/* -- PS Pending: Slate Gray (secondary) -- */
.bg-status-ps-pending { background-color: #6c757d !important; color: #fff !important; }

/* -- PS In Progress: Blue #2c7be5 -- */
.bg-status-ps-in-progress { background-color: #2c7be5 !important; color: #fff !important; }

/* -- PS QC Pending: Amber #e6a817 -- */
.bg-status-ps-qc-pending { background-color: #e6a817 !important; color: #000 !important; }

/* -- PS Staged: Teal-green #20c997 -- */
.bg-status-ps-staged { background-color: #20c997 !important; color: #fff !important; }

/* -- PS Completed: Forest Green #2e7d32 -- */
.bg-status-ps-completed { background-color: #2e7d32 !important; color: #fff !important; }

/* -- PS Cancelled: Red #dc3545 -- */
.bg-status-ps-cancelled { background-color: #dc3545 !important; color: #fff !important; }

/* ============================================
   ARBRE TREE STATUS COLORS
   ============================================ */

/* -- In Progress: Amber #e6a817 -- */
.bg-arbre-in-progress { background-color: #e6a817 !important; color: #000 !important; }
.text-arbre-in-progress { color: #e6a817 !important; }
.btn-outline-arbre-in-progress { color: #e6a817; border-color: #e6a817; }
.btn-outline-arbre-in-progress:hover { background-color: #e6a817; color: #000; border-color: #e6a817; }
.btn-check:checked + .btn-outline-arbre-in-progress { background-color: #e6a817; color: #000; border-color: #e6a817; }

/* -- Ready to Bump: Orange #fd7e14 -- */
.bg-arbre-ready-bump { background-color: #fd7e14 !important; color: #fff !important; }
.text-arbre-ready-bump { color: #fd7e14 !important; }
.btn-outline-arbre-ready-bump { color: #fd7e14; border-color: #fd7e14; }
.btn-outline-arbre-ready-bump:hover { background-color: #fd7e14; color: #fff; border-color: #fd7e14; }
.btn-check:checked + .btn-outline-arbre-ready-bump { background-color: #fd7e14; color: #fff; border-color: #fd7e14; }

/* -- Ready for Sale: Green #198754 -- */
.bg-arbre-ready-sale { background-color: #198754 !important; color: #fff !important; }
.text-arbre-ready-sale { color: #198754 !important; }
.btn-outline-arbre-ready-sale { color: #198754; border-color: #198754; }
.btn-outline-arbre-ready-sale:hover { background-color: #198754; color: #fff; border-color: #198754; }
.btn-check:checked + .btn-outline-arbre-ready-sale { background-color: #198754; color: #fff; border-color: #198754; }

/* -- Tagged For Sale: Blue #0d6efd -- */
.bg-arbre-tagged-sale { background-color: #0d6efd !important; color: #fff !important; }
.text-arbre-tagged-sale { color: #0d6efd !important; }
.btn-outline-arbre-tagged-sale { color: #0d6efd; border-color: #0d6efd; }
.btn-outline-arbre-tagged-sale:hover { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }
.btn-check:checked + .btn-outline-arbre-tagged-sale { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }

/* -- Shipped: Teal #17a2b8 -- */
.bg-arbre-shipped { background-color: #17a2b8 !important; color: #fff !important; }
.text-arbre-shipped { color: #17a2b8 !important; }
.btn-outline-arbre-shipped { color: #17a2b8; border-color: #17a2b8; }
.btn-outline-arbre-shipped:hover { background-color: #17a2b8; color: #fff; border-color: #17a2b8; }
.btn-check:checked + .btn-outline-arbre-shipped { background-color: #17a2b8; color: #fff; border-color: #17a2b8; }

/* -- Culled: Red #dc3545 -- */
.bg-arbre-culled { background-color: #dc3545 !important; color: #fff !important; }
.text-arbre-culled { color: #dc3545 !important; }
.btn-outline-arbre-culled { color: #dc3545; border-color: #dc3545; }
.btn-outline-arbre-culled:hover { background-color: #dc3545; color: #fff; border-color: #dc3545; }
.btn-check:checked + .btn-outline-arbre-culled { background-color: #dc3545; color: #fff; border-color: #dc3545; }

/* -- Dead: Dark Red #b02a37 -- */
.bg-arbre-dead { background-color: #b02a37 !important; color: #fff !important; }
.text-arbre-dead { color: #b02a37 !important; }
.btn-outline-arbre-dead { color: #b02a37; border-color: #b02a37; }
.btn-outline-arbre-dead:hover { background-color: #b02a37; color: #fff; border-color: #b02a37; }
.btn-check:checked + .btn-outline-arbre-dead { background-color: #b02a37; color: #fff; border-color: #b02a37; }

/* -- Lost Tag: Gray #6c757d -- */
.bg-arbre-lost-tag { background-color: #6c757d !important; color: #fff !important; }
.text-arbre-lost-tag { color: #6c757d !important; }
.btn-outline-arbre-lost-tag { color: #6c757d; border-color: #6c757d; }
.btn-outline-arbre-lost-tag:hover { background-color: #6c757d; color: #fff; border-color: #6c757d; }
.btn-check:checked + .btn-outline-arbre-lost-tag { background-color: #6c757d; color: #fff; border-color: #6c757d; }

/* -- Ground: Dark Gray #495057 -- */
.bg-arbre-ground { background-color: #495057 !important; color: #fff !important; }
.text-arbre-ground { color: #495057 !important; }
.btn-outline-arbre-ground { color: #495057; border-color: #495057; }
.btn-outline-arbre-ground:hover { background-color: #495057; color: #fff; border-color: #495057; }
.btn-check:checked + .btn-outline-arbre-ground { background-color: #495057; color: #fff; border-color: #495057; }

/* -- Newton 2026: Indigo #6610f2 -- */
.bg-arbre-newton-2026 { background-color: #6610f2 !important; color: #fff !important; }
.text-arbre-newton-2026 { color: #6610f2 !important; }
.btn-outline-arbre-newton-2026 { color: #6610f2; border-color: #6610f2; }
.btn-outline-arbre-newton-2026:hover { background-color: #6610f2; color: #fff; border-color: #6610f2; }
.btn-check:checked + .btn-outline-arbre-newton-2026 { background-color: #6610f2; color: #fff; border-color: #6610f2; }

/* -- Newton 2027: Purple #6f42c1 -- */
.bg-arbre-newton-2027 { background-color: #6f42c1 !important; color: #fff !important; }
.text-arbre-newton-2027 { color: #6f42c1 !important; }
.btn-outline-arbre-newton-2027 { color: #6f42c1; border-color: #6f42c1; }
.btn-outline-arbre-newton-2027:hover { background-color: #6f42c1; color: #fff; border-color: #6f42c1; }
.btn-check:checked + .btn-outline-arbre-newton-2027 { background-color: #6f42c1; color: #fff; border-color: #6f42c1; }

/* -- Newton Contract Grow Old: Slate Blue #485fc7 -- */
.bg-arbre-newton-contract { background-color: #485fc7 !important; color: #fff !important; }
.text-arbre-newton-contract { color: #485fc7 !important; }
.btn-outline-arbre-newton-contract { color: #485fc7; border-color: #485fc7; }
.btn-outline-arbre-newton-contract:hover { background-color: #485fc7; color: #fff; border-color: #485fc7; }
.btn-check:checked + .btn-outline-arbre-newton-contract { background-color: #485fc7; color: #fff; border-color: #485fc7; }

/* -- Arbre status pill checkmark: CSS-driven toggle -- */
.status-pill .fa-check { display: none; }
.btn-check:checked + .status-pill .fa-check { display: inline; }

/* -- Sticky table header (JS-driven fixed clone) --
   The page-wide stickyTableHeader script (in includes/footer.php) clones any
   <thead class="sticky-table-thead">, positions the clone fixed just below
   the sticky navbar, and shows it only while the original has scrolled past.
   No position:sticky here on purpose — Bootstrap card/table-responsive
   containers create overflow/clip contexts that break sticky in this layout. */
.sticky-thead-clone {
    position: fixed !important;
    z-index: 1019; /* just below Bootstrap's sticky-top navbar (1020) */
    margin: 0 !important;
    border-collapse: separate !important;
    table-layout: fixed !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* subtle drop shadow as the "floating" cue */
}
/* No th-cell overrides — the clone inherits the project's `.table thead th`
   styling (slate background, white text) so it looks identical to the
   original column header row in the table. */
.sticky-thead-clone[hidden] { display: none !important; }