/*!
 * BACIMO Brand CSS — Full Visual Design System for BaciScout
 *
 * Source of truth: BacimoWeb/docs/bacimo-brand-dna.md
 * Applies the BACIMO Brand DNA (fonts, gold/navy, radii, motion, focus rings)
 * on top of Bootstrap 5.3. This file MUST load AFTER all other CSS so it wins.
 *
 * Works with data-bs-theme="light" and data-bs-theme="dark".
 *
 * Structure:
 *   1.  Design Tokens (CSS custom properties)
 *   2.  Theme-specific overrides (light/dark)
 *   3.  Base Typography & Body
 *   4.  Links & Selection
 *   5.  Focus Rings
 *   6.  Buttons
 *   7.  Forms & Inputs
 *   8.  Cards & Surfaces
 *   9.  Badges & Progress
 *  10.  Navbar & Navigation
 *  11.  Footer
 *  12.  Dropdowns
 *  13.  Pagination
 *  14.  Alerts & Accordion
 *  15.  Tables
 *  16.  Nav-tabs & List-groups
 *  17.  Offcanvas
 *  18.  Modals
 *  19.  ── Signature Components ──
 *       .bacimo-eyebrow, .bacimo-divider, .bacimo-hero-bg,
 *       .bacimo-feature-card, .bacimo-stat, .bacimo-link,
 *       .bacimo-section, .bacimo-surface-alt, .bacimo-logo,
 *       .auth-card, .filter-sidebar, .tender-card, .score-badge,
 *       .skip-link
 *  20.  Utility helpers
 *  21.  Reduced Motion
 *  22.  Print Styles
 */

/* =========================================================================
   1. Design Tokens
   ========================================================================= */
:root {
    /* ── Signature Colors: Gold ── */
    --bacimo-gold: #ffc200;
    --bacimo-gold-light: #ffd86a;
    --bacimo-gold-dark: #d8a10a;
    --bacimo-gold-subtle: rgba(255, 194, 0, 0.15);

    /* ── Signature Colors: Navy ── */
    --bacimo-navy-deep: #001e47;
    --bacimo-navy: #002552;
    --bacimo-navy-soft: #17355c;

    /* ── Semantic Subtle Backgrounds ── */
    --bacimo-success-subtle: rgba(25, 135, 84, 0.12);

    /* ── Typography ── */
    --bacimo-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --bacimo-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* ── Line Heights ── */
    --bacimo-line-copy: 1.78;
    --bacimo-line-copy-tight: 1.68;
    --bacimo-line-heading: 1.2;

    /* ── Corner Radii (4-tier system) ── */
    --bacimo-radius-sm: 4px;
    --bacimo-radius-md: 8px;
    --bacimo-radius-lg: 12px;
    --bacimo-radius-xl: 20px;

    /* ── Motion ── */
    --bacimo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --bacimo-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --bacimo-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --bacimo-duration-fast: 150ms;
    --bacimo-duration-base: 250ms;
    --bacimo-duration-slow: 400ms;

    /* ── Focus Ring ── */
    --bacimo-focus-ring: 0 0 0 3px rgba(255, 194, 0, 0.5);

    /* ── Spacing (0.25rem base) ── */
    --bacimo-space-1: 0.25rem;
    --bacimo-space-2: 0.5rem;
    --bacimo-space-3: 0.75rem;
    --bacimo-space-4: 1rem;
    --bacimo-space-5: 1.25rem;
    --bacimo-space-6: 1.5rem;
    --bacimo-space-8: 2rem;
    --bacimo-space-10: 2.5rem;
    --bacimo-space-12: 3rem;
    --bacimo-space-16: 4rem;
    --bacimo-space-20: 5rem;
    --bacimo-space-24: 6rem;

    /* ── Shadows ── */
    --bacimo-shadow-sm: 0 2px 8px rgba(0, 30, 71, 0.06);
    --bacimo-shadow-md: 0 4px 16px rgba(0, 30, 71, 0.10);
    --bacimo-shadow-lg: 0 8px 24px rgba(0, 30, 71, 0.14);

    /* ── Bootstrap primary override → GOLD ──
       Re-points Bootstrap's primary so text-bg-primary, .link-primary,
       .btn-primary, .border-primary, .bg-primary, etc. all pick up the
       brand accent automatically. */
    --bs-primary: #ffc200;
    --bs-primary-rgb: 255, 194, 0;
    --bs-primary-text-emphasis: #d8a10a;
    --bs-primary-bg-subtle: rgba(255, 194, 0, 0.15);
    --bs-primary-border-subtle: rgba(255, 194, 0, 0.4);
}

/* =========================================================================
   2. Theme-Specific Overrides
   ========================================================================= */

/* ── Light mode: navy text on white, gold accents ── */
[data-bs-theme="light"] {
    --bacimo-body-bg: #ffffff;
    --bacimo-body-color: var(--bacimo-navy-deep);
    --bacimo-heading-color: var(--bacimo-navy-deep);
    --bacimo-link-color: var(--bacimo-navy);
    --bacimo-link-hover-color: var(--bacimo-gold-dark);
    --bacimo-surface-bg: #ffffff;
    --bacimo-surface-alt-bg: #f8f9fa;
    --bacimo-surface-border: rgba(0, 30, 71, 0.12);
    --bacimo-muted-text: #495057;
    --bacimo-navbar-bg: var(--bacimo-navy-deep);
    --bacimo-navbar-text: rgba(255, 255, 255, 0.85);
    --bacimo-navbar-text-hover: #ffffff;
    --bacimo-footer-bg: var(--bacimo-navy-deep);
    --bacimo-footer-text: rgba(255, 255, 255, 0.7);
}

/* ── Dark mode: gold accents on navy backgrounds ── */
[data-bs-theme="dark"] {
    --bacimo-body-bg: var(--bacimo-navy-deep);
    --bacimo-body-color: #f5f8fc;
    --bacimo-heading-color: #f5f8fc;
    --bacimo-link-color: var(--bacimo-gold);
    --bacimo-link-hover-color: var(--bacimo-gold-light);
    --bacimo-surface-bg: var(--bacimo-navy-soft);
    --bacimo-surface-alt-bg: var(--bacimo-navy-soft);
    --bacimo-surface-border: rgba(255, 194, 0, 0.22);
    --bacimo-muted-text: #9fb0c4;
    --bacimo-navbar-bg: var(--bacimo-navy-deep);
    --bacimo-navbar-text: rgba(255, 255, 255, 0.85);
    --bacimo-navbar-text-hover: var(--bacimo-gold-light);
    --bacimo-footer-bg: #000914;
    --bacimo-footer-text: rgba(255, 255, 255, 0.6);

    /* In dark mode the gold primary needs dark text for contrast */
    --bs-primary: #ffc200;
    --bs-primary-rgb: 255, 194, 0;
}

/* =========================================================================
   3. Base Typography & Body
   ========================================================================= */
body {
    font-family: var(--bacimo-font-body);
    line-height: var(--bacimo-line-copy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color var(--bacimo-duration-base) var(--bacimo-ease-out),
        color var(--bacimo-duration-base) var(--bacimo-ease-out);
}

[data-bs-theme="light"] body {
    color: var(--bacimo-body-color);
    background-color: var(--bacimo-body-bg);
}

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

/* Headings → Outfit */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bacimo-font-display);
    line-height: var(--bacimo-line-heading);
    font-weight: 600;
}

[data-bs-theme="light"] h1, [data-bs-theme="light"] h2, [data-bs-theme="light"] h3,
[data-bs-theme="light"] h4, [data-bs-theme="light"] h5, [data-bs-theme="light"] h6,
[data-bs-theme="light"] .h1, [data-bs-theme="light"] .h2, [data-bs-theme="light"] .h3,
[data-bs-theme="light"] .h4, [data-bs-theme="light"] .h5, [data-bs-theme="light"] .h6 {
    color: var(--bacimo-heading-color);
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 {
    color: var(--bacimo-heading-color);
}

/* Tight copy (labels, short descriptions) */
.lead { line-height: var(--bacimo-line-copy-tight); }
small, .small { line-height: var(--bacimo-line-copy-tight); }

/* Muted text */
.text-muted { color: var(--bacimo-muted-text) !important; }

/* =========================================================================
   4. Links & Selection
   ========================================================================= */
a {
    color: var(--bacimo-link-color);
    text-decoration: none;
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
a:hover {
    color: var(--bacimo-link-hover-color);
}

/* Generic links (not buttons/nav/etc.) → navy with gold hover */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.badge):not(.bacimo-link) {
    color: var(--bacimo-navy);
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.badge):not(.bacimo-link):hover {
    color: var(--bacimo-gold-dark);
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.badge):not(.bacimo-link) {
    color: var(--bacimo-gold);
}

/* Bootstrap primary utilities */
.text-primary { color: var(--bacimo-gold-dark) !important; }
.link-primary { color: var(--bacimo-navy) !important; }
[data-bs-theme="dark"] .link-primary { color: var(--bacimo-gold) !important; }

/* Keep muted links muted, gold on hover */
.text-muted a,
a.text-muted { color: var(--bacimo-muted-text) !important; }
.text-muted a:hover,
a.text-muted:hover { color: var(--bacimo-gold) !important; }

/* Selection */
::selection {
    background: var(--bacimo-gold);
    color: var(--bacimo-navy-deep);
}

/* =========================================================================
   5. Focus Rings (gold — Brand DNA requirement)
   ========================================================================= */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--bacimo-focus-ring);
    border-radius: var(--bacimo-radius-sm);
}

/* =========================================================================
   6. Buttons
   ========================================================================= */
.btn {
    font-family: var(--bacimo-font-body);
    font-weight: 500;
    border-radius: var(--bacimo-radius-md);
    transition:
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        box-shadow var(--bacimo-duration-fast) var(--bacimo-ease-out),
        transform var(--bacimo-duration-fast) var(--bacimo-ease-out);
}

/* Primary → GOLD background, NAVY text (high contrast) */
.btn-primary {
    --bs-btn-bg: var(--bacimo-gold);
    --bs-btn-border-color: var(--bacimo-gold);
    --bs-btn-color: var(--bacimo-navy-deep);
    --bs-btn-hover-bg: var(--bacimo-gold-light);
    --bs-btn-hover-border-color: var(--bacimo-gold-light);
    --bs-btn-hover-color: var(--bacimo-navy-deep);
    --bs-btn-active-bg: var(--bacimo-gold-dark);
    --bs-btn-active-border-color: var(--bacimo-gold-dark);
    --bs-btn-active-color: var(--bacimo-navy-deep);
    --bs-btn-disabled-bg: var(--bacimo-gold);
    --bs-btn-disabled-border-color: var(--bacimo-gold);
    --bs-btn-disabled-color: var(--bacimo-navy-deep);
    --bs-btn-focus-shadow-rgb: 255, 194, 0;
    font-weight: 600;
}
.btn-primary:hover { transform: translateY(-1px); }

/* Outline-primary → gold outline on light, solid gold fill in dark */
.btn-outline-primary {
    --bs-btn-color: var(--bacimo-navy);
    --bs-btn-border-color: var(--bacimo-gold-dark);
    --bs-btn-hover-bg: var(--bacimo-gold);
    --bs-btn-hover-border-color: var(--bacimo-gold);
    --bs-btn-hover-color: var(--bacimo-navy-deep);
    --bs-btn-active-bg: var(--bacimo-gold-dark);
    --bs-btn-active-border-color: var(--bacimo-gold-dark);
    --bs-btn-active-color: var(--bacimo-navy-deep);
    --bs-btn-disabled-color: var(--bacimo-gold-dark);
    --bs-btn-disabled-border-color: var(--bacimo-gold-dark);
    --bs-btn-focus-shadow-rgb: 255, 194, 0;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bacimo-gold);
    --bs-btn-border-color: var(--bacimo-gold);
    --bs-btn-hover-color: var(--bacimo-navy-deep);
}

/* Outline-secondary → subtle navy outline */
.btn-outline-secondary {
    border-color: #dee2e6;
    color: var(--bacimo-navy);
}
.btn-outline-secondary:hover {
    background-color: rgba(0, 37, 82, 0.05);
    border-color: var(--bacimo-navy);
    color: var(--bacimo-navy);
}

/* Active button state gets a subtle settle */
.btn:active { transform: translateY(0); }

/* =========================================================================
   7. Forms & Inputs
   ========================================================================= */
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--bacimo-radius-sm);
}

/* Gold focus instead of Bootstrap blue */
.form-control:focus,
.form-select:focus {
    border-color: var(--bacimo-gold);
    box-shadow: 0 0 0 0.25rem rgba(255, 194, 0, 0.35);
}

.form-check-input:focus {
    border-color: var(--bacimo-gold);
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.15);
}

.form-check-input:checked {
    background-color: var(--bacimo-gold);
    border-color: var(--bacimo-gold-dark);
}

/* Form labels → Outfit, navy */
.form-label,
.form-check-label {
    font-weight: 500;
    color: var(--bacimo-heading-color);
}

/* =========================================================================
   8. Cards & Surfaces
   ========================================================================= */
.card {
    border-radius: var(--bacimo-radius-lg);
    border: 1px solid rgba(0, 30, 71, 0.08);
    box-shadow: var(--bacimo-shadow-sm);
    transition:
        box-shadow var(--bacimo-duration-base) var(--bacimo-ease-out),
        transform var(--bacimo-duration-base) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-base) var(--bacimo-ease-out);
}

[data-bs-theme="dark"] .card {
    background-color: var(--bacimo-surface-bg);
    border-color: var(--bacimo-surface-border);
}

.card:hover {
    box-shadow: var(--bacimo-shadow-md);
}

/* Clickable cards lift on hover */
a.card:hover,
a.list-group-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--bacimo-shadow-md) !important;
}
[data-bs-theme="dark"] a.card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Stat cards */
.stat-card {
    transition: transform var(--bacimo-duration-fast) var(--bacimo-ease-out),
                box-shadow var(--bacimo-duration-fast) var(--bacimo-ease-out);
    cursor: pointer;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bacimo-shadow-lg) !important;
}

/* Modal radius */
.modal-content {
    border-radius: var(--bacimo-radius-lg);
}

/* =========================================================================
   9. Badges & Progress
   ========================================================================= */
.badge {
    border-radius: var(--bacimo-radius-sm);
    font-family: var(--bacimo-font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Gold accent badge */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--bacimo-gold) !important;
    color: var(--bacimo-navy-deep) !important;
}

/* Keep semantic badge colors */
.badge.text-bg-success { background-color: #198754 !important; }
.badge.text-bg-danger  { background-color: #dc3545 !important; }

/* Progress bars → gold fill */
.progress-bar {
    background-color: var(--bacimo-gold);
}
.progress-bar.bg-primary {
    background-color: var(--bacimo-gold) !important;
}

/* =========================================================================
   10. Navbar & Navigation
   ========================================================================= */
.navbar {
    background-color: var(--bacimo-navbar-bg) !important;
}

.navbar-brand {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
}

/* Brand logo in navbar */
.bacimo-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--bacimo-space-2);
    text-decoration: none;
}
.bacimo-logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
}
.logo-text {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: #ffffff;
    line-height: 1;
}
.brand-accent {
    color: var(--bacimo-gold);
}

/* Nav links */
.navbar .nav-link,
.navbar .navbar-nav a {
    color: var(--bacimo-navbar-text);
    border-radius: var(--bacimo-radius-md);
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
    color: var(--bacimo-navbar-text-hover);
    background-color: rgba(255, 194, 0, 0.08);
}

/* Active nav link → gold text + gold underline */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link {
    color: var(--bacimo-gold) !important;
    position: relative;
}
.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: var(--bacimo-space-3);
    right: var(--bacimo-space-3);
    bottom: 2px;
    height: 2px;
    background: var(--bacimo-gold);
    border-radius: 1px;
}

/* Nav-tabs (Bootstrap component, distinct from navbar) */
.nav-tabs {
    border-bottom-color: var(--bacimo-surface-border);
}
.nav-tabs .nav-link {
    color: var(--bacimo-muted-text);
    border-radius: var(--bacimo-radius-md) var(--bacimo-radius-md) 0 0;
    border-color: transparent;
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.nav-tabs .nav-link:hover {
    color: var(--bacimo-gold-dark);
    border-color: transparent;
    background-color: rgba(255, 194, 0, 0.05);
}
.nav-tabs .nav-link.active {
    color: var(--bacimo-navy-deep);
    background-color: transparent;
    border-color: var(--bacimo-surface-border) var(--bacimo-surface-border) #fff;
    font-weight: 600;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bacimo-gold);
    border-color: var(--bacimo-surface-border) var(--bacimo-surface-border) var(--bacimo-navy-deep);
}

/* =========================================================================
   11. Footer
   ========================================================================= */
footer {
    background-color: var(--bacimo-footer-bg) !important;
    color: var(--bacimo-footer-text);
}
footer a {
    color: var(--bacimo-footer-text) !important;
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        text-decoration var(--bacimo-duration-fast) var(--bacimo-ease-out);
    text-decoration: none;
}
footer a:hover {
    color: var(--bacimo-gold-light) !important;
    text-decoration: underline;
}
footer h5, footer h4, footer h6 {
    font-family: var(--bacimo-font-display);
    color: #ffffff;
}

/* Footer branded wordmark */
.footer-brand {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: var(--bacimo-space-2);
}
.footer-brand .brand-accent {
    color: var(--bacimo-gold);
}

/* Muted footer links get gold on hover */
footer a.text-muted:hover,
footer .text-muted a:hover {
    color: var(--bacimo-gold) !important;
}

/* =========================================================================
   12. Dropdowns
   ========================================================================= */
.dropdown-menu {
    border-radius: var(--bacimo-radius-md);
    border-color: var(--bacimo-surface-border);
    box-shadow: var(--bacimo-shadow-md);
    transition:
        opacity var(--bacimo-duration-fast) var(--bacimo-ease-out),
        transform var(--bacimo-duration-fast) var(--bacimo-ease-out);
}

.dropdown-item {
    transition:
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.dropdown-item:hover {
    background-color: rgba(255, 194, 0, 0.1);
}

/* Active dropdown items → navy (for in-app dropdowns on light backgrounds) */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bacimo-navy);
    color: white;
}
/* When inside navbar (already dark), gold is better for active state */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background-color: var(--bacimo-gold);
    color: var(--bacimo-navy-deep);
}
.dropdown-item:focus-visible {
    background-color: rgba(255, 194, 0, 0.15);
}

/* =========================================================================
   13. Pagination
   ========================================================================= */
.page-link {
    color: var(--bacimo-navy);
    border-color: #dee2e6;
    border-radius: var(--bacimo-radius-sm);
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.page-link:hover {
    color: var(--bacimo-gold-dark);
    background-color: rgba(255, 194, 0, 0.05);
}
.page-item.active .page-link {
    background-color: var(--bacimo-gold);
    border-color: var(--bacimo-gold);
    color: var(--bacimo-navy-deep);
}

/* =========================================================================
   14. Alerts & Accordion
   ========================================================================= */
.alert {
    border-radius: var(--bacimo-radius-lg);
}
.alert .btn-close {
    transition: opacity var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.alert .btn-close:hover { opacity: 1; }

/* Brand-tinted info alert */
.alert-info {
    background-color: rgba(0, 37, 82, 0.05);
    border-color: rgba(0, 37, 82, 0.15);
    color: var(--bacimo-navy-deep);
}
.alert-info .alert-link { color: var(--bacimo-navy); }

/* Accordion — gold active states */
.accordion-button:not(.collapsed) {
    background-color: rgba(255, 194, 0, 0.08);
    color: var(--bacimo-navy-deep);
    box-shadow: inset 0 -1px 0 rgba(255, 194, 0, 0.2);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--bacimo-gold-light);
}
.accordion-button:focus {
    border-color: var(--bacimo-gold);
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.15);
}
.accordion-item {
    border-radius: var(--bacimo-radius-lg) !important;
}

/* =========================================================================
   15. Tables
   ========================================================================= */
.table thead th {
    color: var(--bacimo-navy-deep);
    font-weight: 600;
    border-bottom: 2px solid var(--bacimo-navy);
}
[data-bs-theme="dark"] .table thead th {
    color: var(--bacimo-heading-color);
    border-bottom-color: var(--bacimo-gold);
}

.table > :not(caption) > * > * {
    transition: background-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 194, 0, 0.04);
}

/* =========================================================================
   16. List-Groups
   ========================================================================= */
.list-group-item {
    border-radius: var(--bacimo-radius-sm);
    transition:
        background-color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.list-group-item-action:hover {
    background-color: rgba(255, 194, 0, 0.05);
}
.list-group-item.active {
    background-color: var(--bacimo-navy);
    border-color: var(--bacimo-navy);
}

/* =========================================================================
   17. Offcanvas
   ========================================================================= */
.offcanvas {
    background-color: var(--bacimo-surface-bg);
}

.offcanvas-header,
.offcanvas-footer {
    border-color: var(--bacimo-surface-border);
}

.offcanvas-title {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
}

/* =========================================================================
   18. Modals
   ========================================================================= */
.modal-header,
.modal-footer {
    border-color: var(--bacimo-surface-border);
}
.modal-title {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
}

/* =========================================================================
   19. Signature Components
   ========================================================================= */

/* ── Eyebrow label (small uppercase gold text above headings) ── */
.bacimo-eyebrow {
    font-family: var(--bacimo-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: var(--bacimo-gold-dark);
    margin-bottom: var(--bacimo-space-2);
}
[data-bs-theme="dark"] .bacimo-eyebrow { color: var(--bacimo-gold); }

/* ── Form section title (wizard step / form section divider) ── */
.form-section-title {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
    color: var(--bacimo-heading-color);
    padding-bottom: var(--bacimo-space-3);
    margin-bottom: var(--bacimo-space-4);
    border-bottom: 1px solid var(--bacimo-surface-border);
}

/* ── Divider (gold accent line) ── */
.bacimo-divider {
    width: 60px;
    height: 4px;
    background: var(--bacimo-gold);
    border: none;
    border-radius: var(--bacimo-radius-sm);
    margin: var(--bacimo-space-4) 0;
}

/* ── Hero background (subtle navy gradient with gold accent glow) ── */
.bacimo-hero-bg {
    background:
        radial-gradient(ellipse at top right, rgba(255, 194, 0, 0.08), transparent 50%),
        linear-gradient(135deg, var(--bacimo-navy-deep) 0%, var(--bacimo-navy) 100%);
    color: #ffffff;
    border-radius: var(--bacimo-radius-xl);
    padding: var(--bacimo-space-24) var(--bacimo-space-16);
}
[data-bs-theme="light"] .bacimo-hero-bg {
    background:
        radial-gradient(ellipse at top right, rgba(255, 194, 0, 0.12), transparent 60%),
        linear-gradient(135deg, var(--bacimo-navy-deep) 0%, var(--bacimo-navy-soft) 100%);
}
[data-bs-theme="dark"] .bacimo-hero-bg {
    background:
        radial-gradient(ellipse at top right, rgba(255, 194, 0, 0.06), transparent 50%),
        linear-gradient(135deg, var(--bacimo-navy-deep) 0%, var(--bacimo-navy) 100%);
    border: 1px solid var(--bacimo-surface-border);
}
.bacimo-hero-bg h1,
.bacimo-hero-bg h2 {
    color: #ffffff;
}
.bacimo-hero-bg .bacimo-eyebrow {
    color: var(--bacimo-gold-light);
}

/* ── Feature card (marketing/landing page cards) ── */
.bacimo-feature-card {
    background-color: var(--bacimo-surface-bg);
    border: 1px solid var(--bacimo-surface-border);
    border-radius: var(--bacimo-radius-lg);
    padding: var(--bacimo-space-8);
    box-shadow: var(--bacimo-shadow-sm);
    transition:
        transform var(--bacimo-duration-base) var(--bacimo-ease-out),
        box-shadow var(--bacimo-duration-base) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-base) var(--bacimo-ease-out);
}
.bacimo-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bacimo-shadow-lg);
    border-color: var(--bacimo-gold);
}
.bacimo-feature-card .feature-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bacimo-radius-md);
    background-color: var(--bacimo-primary-bg-subtle);
    color: var(--bacimo-gold-dark);
    font-size: 1.5rem;
    margin-bottom: var(--bacimo-space-4);
}
[data-bs-theme="dark"] .bacimo-feature-card .feature-icon {
    color: var(--bacimo-gold);
}

/* ── Stat (large number display) ── */
.bacimo-stat {
    text-align: center;
}
.bacimo-stat .stat-value {
    font-family: var(--bacimo-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bacimo-gold-dark);
}
[data-bs-theme="dark"] .bacimo-stat .stat-value {
    color: var(--bacimo-gold);
}
.bacimo-stat .stat-label {
    font-family: var(--bacimo-font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bacimo-muted-text);
    margin-top: var(--bacimo-space-1);
}

/* ── Link (brand-styled inline link) ── */
.bacimo-link {
    color: var(--bacimo-navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition:
        color var(--bacimo-duration-fast) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.bacimo-link:hover {
    color: var(--bacimo-gold-dark);
    border-bottom-color: var(--bacimo-gold);
}
[data-bs-theme="dark"] .bacimo-link {
    color: var(--bacimo-gold);
}
[data-bs-theme="dark"] .bacimo-link:hover {
    color: var(--bacimo-gold-light);
}

/* ── Section wrapper (generous vertical rhythm) ── */
.bacimo-section {
    padding-top: var(--bacimo-space-16);
    padding-bottom: var(--bacimo-space-16);
}

/* ── Surface-alt (alternate background section) ── */
.bacimo-surface-alt {
    background-color: var(--bacimo-surface-alt-bg);
}

/* ── Auth card (login, register, password reset) ── */
.auth-card {
    max-width: 440px;
    margin: 0 auto;
    border-radius: var(--bacimo-radius-xl);
    box-shadow: var(--bacimo-shadow-md);
    border: none;
}
.auth-card .card-body {
    padding: var(--bacimo-space-8);
}

/* ── Auth page title (Outfit, branded color) ── */
.auth-title {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
    color: var(--bacimo-navy-deep);
    line-height: var(--bacimo-line-heading);
}
[data-bs-theme="dark"] .auth-title {
    color: var(--bacimo-heading-color);
}

/* ── Auth page logo (centered, fixed size) ── */
.auth-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* ── Auth page links ── */
.auth-links a,
a.auth-link {
    color: var(--bacimo-navy);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
.auth-links a:hover,
a.auth-link:hover {
    color: var(--bacimo-gold-dark);
    text-decoration: underline;
}
[data-bs-theme="dark"] .auth-links a,
[data-bs-theme="dark"] a.auth-link {
    color: var(--bacimo-gold);
}

/* ── Filter sidebar (tender inbox, bookmarks) ── */
.filter-sidebar {
    border-radius: var(--bacimo-radius-lg);
    border: 1px solid var(--bacimo-surface-border);
    background-color: var(--bacimo-surface-bg);
    padding: var(--bacimo-space-4);
}
[data-bs-theme="dark"] .filter-sidebar {
    background-color: var(--bacimo-surface-bg);
}
.filter-sidebar .filter-section {
    margin-bottom: var(--bacimo-space-4);
    padding-bottom: var(--bacimo-space-4);
    border-bottom: 1px solid var(--bacimo-surface-border);
}
.filter-sidebar .filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ── Tender card (inbox, tracked tenders, bookmarks) ── */
.tender-card {
    border-radius: var(--bacimo-radius-lg);
    border: 1px solid var(--bacimo-surface-border);
    box-shadow: var(--bacimo-shadow-sm);
    transition:
        box-shadow var(--bacimo-duration-base) var(--bacimo-ease-out),
        transform var(--bacimo-duration-base) var(--bacimo-ease-out),
        border-color var(--bacimo-duration-base) var(--bacimo-ease-out);
}
.tender-card:hover {
    box-shadow: var(--bacimo-shadow-md);
    border-color: rgba(255, 194, 0, 0.3);
}
[data-bs-theme="dark"] .tender-card {
    background-color: var(--bacimo-surface-bg);
    border-color: var(--bacimo-surface-border);
}

/* Tender card sub-components (tracked_tenders_card.html) */
.tender-card-header {
    font-family: var(--bacimo-font-display);
    font-weight: 600;
    color: var(--bacimo-heading-color);
}
.tender-card-body { color: var(--bacimo-body-color); }
.tender-card-footer { border-top: 1px solid var(--bacimo-surface-border); }

/* ── Score badge (match score display) ── */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bacimo-radius-md);
    font-family: var(--bacimo-font-display);
    font-weight: 700;
    font-size: 1rem;
    padding: 0 var(--bacimo-space-2);
}
/* Score tiers: high (green), medium (gold), low (muted) */
.score-badge.high {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}
[data-bs-theme="dark"] .score-badge.high { color: #4ade80; }
.score-badge.medium {
    background-color: rgba(255, 194, 0, 0.15);
    color: var(--bacimo-gold-dark);
}
[data-bs-theme="dark"] .score-badge.medium { color: var(--bacimo-gold); }
.score-badge.low {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--bacimo-muted-text);
}

/* ── Skip-to-content link (WCAG 2.4.1) ── */
/* Overrides the base version from accessibility.css with brand colors */
.skip-link {
    position: absolute;
    top: -60px;
    left: 0;
    background: var(--bacimo-gold);
    color: var(--bacimo-navy-deep) !important;
    padding: var(--bacimo-space-2) var(--bacimo-space-4);
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 var(--bacimo-radius-md) 0;
    font-family: var(--bacimo-font-body);
    font-weight: 600;
    transition: top var(--bacimo-duration-base) var(--bacimo-ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: var(--bacimo-focus-ring);
    box-shadow: none;
}

/* =========================================================================
   20. Utility Helpers
   ========================================================================= */
.bg-primary {
    background-color: var(--bacimo-gold) !important;
    color: var(--bacimo-navy-deep) !important;
}
.border-primary { border-color: var(--bacimo-gold) !important; }

/* Text highlight (gold mark) */
mark,
.bacimo-highlight {
    background: rgba(255, 194, 0, 0.3);
    color: inherit;
    border-radius: var(--bacimo-radius-sm);
    padding: 0.1em 0.3em;
}

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity var(--bacimo-duration-base) var(--bacimo-ease-out);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Empty state */
.empty-state,
.empty-state-container {
    padding: var(--bacimo-space-12) var(--bacimo-space-4);
    text-align: center;
}
.empty-state > i,
.empty-state-icon > i {
    font-size: 3rem;
    color: var(--bacimo-muted-text);
    opacity: 0.5;
    margin-bottom: var(--bacimo-space-4);
    display: block;
}
.empty-state > p,
.empty-state-description {
    color: var(--bacimo-muted-text);
    font-size: 1.05rem;
}

/* Notification bell */
#notification-bell {
    transition: transform var(--bacimo-duration-fast) var(--bacimo-ease-out);
}
#notification-bell:hover {
    transform: scale(1.1);
}

/* Settings section spacing */
.settings-section {
    margin-bottom: var(--bacimo-space-8);
}
.settings-section:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   21. Reduced Motion (Brand DNA accessibility requirement)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   22. Print Styles
   ========================================================================= */
@media print {
    /* Hide non-essential UI elements */
    .navbar,
    .mobile-bottom-nav,
    .offcanvas-main-nav,
    .offcanvas-main-nav-backdrop,
    #notification-bell,
    #theme-toggle,
    #diagnostics-toggle-btn,
    .skip-link,
    .btn,
    .btn-close,
    footer .row:last-child,
    .footer-language-dropdown,
    #footer-language-dropdown {
        display: none !important;
    }

    /* White background, navy text for print */
    body {
        background: #ffffff !important;
        color: #001e47 !important;
        font-size: 11pt;
    }

    /* Full-width containers */
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Cards become flat with visible borders */
    .card,
    .tender-card,
    .bacimo-feature-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }

    /* Links show URL after text */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    /* Don't show URL for internal/anchor links */
    a[href^="#"]::after,
    a[href^="/"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* Headings: clear dark color */
    h1, h2, h3, h4, h5, h6 {
        color: #001e47 !important;
        page-break-after: avoid;
    }

    /* Score badges: outline only */
    .score-badge {
        border: 1px solid #999 !important;
        background: transparent !important;
        color: #001e47 !important;
    }

    /* Expand accordions */
    .accordion-collapse {
        display: block !important;
    }
    .accordion-button::after {
        display: none !important;
    }

    /* Footer: show copyright line only */
    footer {
        background: transparent !important;
        color: #001e47 !important;
        border-top: 1px solid #ccc;
        padding-top: 10px;
        margin-top: 20px;
    }
}

/* =========================================================================
   27. BACIMO Component Classes (Brand DNA)
   ========================================================================= */

/* Gold divider — short centered gold rule */
.bacimo-divider {
    width: 60px;
    height: 3px;
    background: var(--bacimo-gold, #ffc200);
    border-radius: 2px;
    margin: 1rem 0;
}
.bacimo-divider.center {
    margin-left: auto;
    margin-right: auto;
}

/* Hero/CTA background — BACIMO navy gradient */
.bacimo-hero-bg {
    background: linear-gradient(135deg, var(--bacimo-navy-deep, #001e47) 0%, var(--bacimo-navy, #002552) 100%);
}

/* Skip-to-content link (Brand DNA accessibility requirement) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    padding: 0.75rem 1.25rem;
    background: var(--bacimo-gold, #ffc200);
    color: var(--bacimo-navy-deep, #001e47) !important;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 var(--bacimo-radius-md, 8px) 0;
    transition: top var(--bacimo-duration-fast, 150ms) var(--bacimo-ease-out, ease);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: none;
    box-shadow: var(--bacimo-focus-ring);
}

/* Logo text — branded wordmark */
.logo-text {
    font-family: var(--bacimo-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.brand-accent {
    color: var(--bacimo-gold, #ffc200);
}

/* Navbar logo image styling */
.bacimo-logo {
    height: 2rem;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Footer branded wordmark */
.footer-brand {
    font-family: var(--bacimo-font-display, 'Outfit', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.footer-brand .brand-accent {
    color: var(--bacimo-gold, #ffc200);
}