/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */

:root {
    --lq-brand: #003366;
    --lq-brand-dark: #002855;
    --lq-brand-light: #cfe2ff;
    /* Subtle badge fallbacks — Bootstrap 5.3 custom properties may not resolve
       when the color-mode layer isn't fully initialised in this configuration. */
    --lq-badge-secondary-bg: #e2e3e5;
    --lq-badge-secondary-text: #41464b;
    --lq-badge-secondary-border: #c4c8cb;
    --lq-badge-primary-bg: #cfe2ff;
    --lq-badge-primary-text: #084298;
    --lq-badge-primary-border: #9ec5fe;
    --lq-badge-success-bg: #d1e7dd;
    --lq-badge-success-text: #0a3622;
    --lq-badge-success-border: #a3cfbb;
    --lq-badge-warning-bg: #fff3cd;
    --lq-badge-warning-text: #664d03;
    --lq-badge-warning-border: #ffe69c;
    --lq-badge-danger-bg: #f8d7da;
    --lq-badge-danger-text: #58151c;
    --lq-badge-danger-border: #f1aeb5;
    --lq-badge-info-bg: #cff4fc;
    --lq-badge-info-text: #055160;
    --lq-badge-info-border: #9eeaf9;
}

/* Dark-mode badge token values (Bootstrap 5.3 dark subtle defaults). Without these the
   subtle-badge fallbacks in section 5 would stay light in dark mode, since they're applied
   with !important and would otherwise win over Bootstrap's themed variables. */
[data-bs-theme="dark"] {
    --lq-badge-secondary-bg: #343a40;
    --lq-badge-secondary-text: #dee2e6;
    --lq-badge-secondary-border: #495057;
    --lq-badge-primary-bg: #031633;
    --lq-badge-primary-text: #6ea8fe;
    --lq-badge-primary-border: #084298;
    --lq-badge-success-bg: #051b11;
    --lq-badge-success-text: #75b798;
    --lq-badge-success-border: #0f5132;
    --lq-badge-warning-bg: #332701;
    --lq-badge-warning-text: #ffda6a;
    --lq-badge-warning-border: #997404;
    --lq-badge-danger-bg: #2c0b0e;
    --lq-badge-danger-text: #ea868f;
    --lq-badge-danger-border: #842029;
    --lq-badge-info-bg: #032830;
    --lq-badge-info-text: #6edff6;
    --lq-badge-info-border: #087990;
}

/* ── 2. Base & Layout ─────────────────────────────────────────────────────── */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

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


/* ── 3. Focus Rings ───────────────────────────────────────────────────────── */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}


/* ── 4. Navigation ────────────────────────────────────────────────────────── */

.navbar {
    background-color: var(--lq-brand) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .navbar .nav-link,
    .navbar .nav-link i,
    .navbar .navbar-brand {
        color: #fff !important;
    }

        /* Active nav item — underline on the current section */
        .navbar .nav-link.active {
            color: #fff !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.75);
            padding-bottom: calc(0.5rem - 2px); /* compensate for border so height stays even */
        }

        .navbar .nav-link i.bi-bell-fill,
        .navbar .nav-link i.bi-bell {
            font-size: 1.2rem;
        }


/* ── 5. Badges ────────────────────────────────────────────────────────────── */

/* Bootstrap 5.3 subtle variants — explicit fallbacks so rendering is
   guaranteed regardless of custom property resolution order. */

.badge.bg-secondary-subtle {
    background-color: var(--lq-badge-secondary-bg) !important;
    color: var(--lq-badge-secondary-text) !important;
    border-color: var(--lq-badge-secondary-border) !important;
}

.badge.bg-primary-subtle {
    background-color: var(--lq-badge-primary-bg) !important;
    color: var(--lq-badge-primary-text) !important;
    border-color: var(--lq-badge-primary-border) !important;
}

.badge.bg-success-subtle {
    background-color: var(--lq-badge-success-bg) !important;
    color: var(--lq-badge-success-text) !important;
    border-color: var(--lq-badge-success-border) !important;
}

.badge.bg-warning-subtle {
    background-color: var(--lq-badge-warning-bg) !important;
    color: var(--lq-badge-warning-text) !important;
    border-color: var(--lq-badge-warning-border) !important;
}

.badge.bg-danger-subtle {
    background-color: var(--lq-badge-danger-bg) !important;
    color: var(--lq-badge-danger-text) !important;
    border-color: var(--lq-badge-danger-border) !important;
}

.badge.bg-info-subtle {
    background-color: var(--lq-badge-info-bg) !important;
    color: var(--lq-badge-info-text) !important;
    border-color: var(--lq-badge-info-border) !important;
}

/* Ingredient type — solid badge used where subtle variants aren't appropriate */
.badge.badge-ingredient-type {
    background-color: #6c757d !important;
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, .15);
    font-weight: 600;
}

/* Status dot indicators (freshness / sync state) */
.status-indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.fresh-green {
    background-color: #28a745;
}

.medium-yellow {
    background-color: #ffc107;
}

.stale-red {
    background-color: #dc3545;
}


/* ── 6. Forms & Inputs ────────────────────────────────────────────────────── */

/* Ensures narrow inputs don't collapse below readable width */
.input-wide {
    min-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ingredient search — full-width with scrollable results dropdown */
#ingredient-search,
#ingredient-search-box {
    width: 100% !important;
}

#ingredient-search-results {
    width: 100% !important;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    position: relative;
    z-index: 1000;
}


/* ── 7. Buttons ───────────────────────────────────────────────────────────── */

/* Legacy custom button classes — prefer Bootstrap utilities (btn-primary,
   btn-danger, etc.) in new views. Retained for backward compatibility. */

.btn-delete {
    background-color: #dc3545;
    color: #fff;
    border: none;
}

    .btn-delete:hover {
        background-color: #b02a37;
        color: #fff;
    }

.btn-submit,
.btn-edit {
    background-color: var(--lq-brand) !important;
    color: #fff !important;
    border: none;
}

    .btn-submit:hover,
    .btn-edit:hover {
        background-color: var(--lq-brand-dark) !important;
        color: #fff !important;
    }


/* ── 8. Search Results Container ──────────────────────────────────────────── */

/* Prevents the AJAX-replaced partial from collapsing margin */
#search-results {
    margin-bottom: 0;
    overflow: visible;
}


/* ── 9. Modals ────────────────────────────────────────────────────────────── */

/* CoA modal — fixed header/footer, scrollable body */
#coaModal .modal-dialog {
    height: calc(100% - var(--bs-modal-margin) * 2);
}

#coaModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#coaModal .modal-header,
#coaModal .modal-footer {
    flex: 0 0 auto;
}

#coaModal .modal-body {
    flex: 1 1 auto;
    min-height: 0; /* required for inner scroll to activate */
    overflow-y: auto;
}

#coaModal .table-responsive {
    max-height: none;
    overflow: visible;
}

#coaModal thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg, #fff);
}


/* ── 10. Feature: Procurement PO Table ───────────────────────────────────── */

.procurement-po-table thead th {
    vertical-align: bottom;
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
}

    .procurement-po-table thead th.text-end {
        text-align: right;
    }

.procurement-po-table tbody td {
    vertical-align: middle;
}


/* ── 11. Dark-mode compatibility ──────────────────────────────────────────── */

/* Many views use the fixed-color utilities bg-white / bg-light / text-dark / table-light,
   which do NOT follow data-bs-theme (unlike bg-body*, text-body, and Bootstrap's own
   components). Remap them under dark mode so cards, panels, and table headers stay
   consistent with the rest of the themed UI. Use bg-body-*/text-body in new views. */

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

/* .table-light pins a light header even in dark mode — re-point its table CSS vars. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

/* ---- Sortable table headers (client-side table-sort.js + server-side sort links) ---- */
th.sortable,
th.sortable a {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

th.sortable:hover {
    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), .04);
}

.sort-caret {
    font-size: .7em;
    line-height: 1;
    opacity: .7;
}