/* ===================================================================
   Brand Palette & Bootstrap Token Remapping
   =================================================================== */
:root {
    /* Brand palette */
    --porcelain: #fffffa;
    --stormy-teal: #0d5c63;
    --tropical-teal: #44a1a0;
    --pearl-aqua: #78cdd7;
    --teal: #247b7b;
    /* Semantic brand tokens mapped to palette */
    --rk-blue-slate: var(--stormy-teal);
    --rk-slate-grey: var(--tropical-teal);
    --rk-grey-olive: var(--teal);
    --rk-dry-sage: var(--pearl-aqua);
    --rk-alabaster: var(--pearl-aqua);
    /* Remap Bootstrap semantic tokens — all bg-*, text-*, border-*
       utility classes that reference these variables update automatically */
    --bs-dark: var(--rk-blue-slate);
    --bs-dark-rgb: 13, 92, 99;
    --bs-primary: var(--rk-slate-grey);
    --bs-primary-rgb: 68, 161, 160;
    --bs-secondary: var(--rk-grey-olive);
    --bs-secondary-rgb: 36, 123, 123;
    --bs-body-bg: var(--porcelain);
    --bs-body-color: #2c2c2c;
    --bs-border-color: var(--rk-alabaster);
    --bs-link-color: var(--rk-slate-grey);
    --bs-link-hover-color: var(--rk-blue-slate);
}

/* ===================================================================
   Bootstrap 5 utility polyfills — gap-* and d-grid are not in Bootstrap 4
   =================================================================== */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.d-grid { display: grid !important; }

/* ===================================================================
   Typography
   =================================================================== */
html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===================================================================
   Buttons — Bootstrap compiles btn-* with hardcoded values so each
   component's scoped variables must be overridden directly.
   =================================================================== */
.btn-dark {
    --bs-btn-bg: var(--rk-blue-slate);
    --bs-btn-border-color: var(--rk-blue-slate);
    --bs-btn-hover-bg: #0b4e54;
    --bs-btn-hover-border-color: #0b4e54;
    --bs-btn-active-bg: #094045;
    --bs-btn-active-border-color: #094045;
    --bs-btn-disabled-bg: var(--rk-blue-slate);
    --bs-btn-disabled-border-color: var(--rk-blue-slate);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rk-slate-grey);
    --bs-btn-border-color: var(--rk-slate-grey);
    --bs-btn-hover-bg: #368180;
    --bs-btn-hover-border-color: #368180;
    --bs-btn-active-bg: #307170;
    --bs-btn-active-border-color: #307170;
    --bs-btn-disabled-bg: var(--rk-slate-grey);
    --bs-btn-disabled-border-color: var(--rk-slate-grey);
    --bs-btn-focus-shadow-rgb: 68, 161, 160;
}

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

/* ===================================================================
   Tables — Bootstrap compiles table-dark/table-light with hardcoded
   color values so the :root overrides above won't reach them directly.
   =================================================================== */
.table-dark {
    background-color: var(--stormy-teal);
    color: #fff;
    --bs-table-bg: var(--rk-blue-slate);
    --bs-table-border-color: #0b4e54;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
}

.table-dark th,
.table-dark td {
    border-color: #0b4e54;
}

.table-light {
    --bs-table-bg: #e4f5f3;
    --bs-table-border-color: var(--rk-alabaster);
}

/* ===================================================================
   Dropdown (admin navigation)
   =================================================================== */
.dropdown-menu-dark {
    --bs-dropdown-bg: #0b4e54;
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.12);
    --bs-dropdown-link-color: rgba(255, 255, 255, 0.85);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-dropdown-link-active-bg: var(--rk-slate-grey);
}

/* ===================================================================
   Navbar — lighten nav-link text above Bootstrap's default 50% opacity
   =================================================================== */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.95);
}

/* ===================================================================
   Table row action button (⋮)
   =================================================================== */
.btn-row-action {
    color: var(--teal);
}

.btn-row-action:hover,
.btn-row-action:focus {
    color: var(--stormy-teal);
    background-color: rgba(13, 92, 99, 0.08);
}

/* ===================================================================
   Cards
   =================================================================== */
.card {
    border-color: var(--rk-alabaster);
}

.card-header {
    background-color: #e4f5f3;
    border-bottom-color: var(--rk-alabaster);
}

/* ===================================================================
   Code — used for VIN display in order tables and detail pages
   =================================================================== */
code {
    color: var(--rk-blue-slate);
    background-color: rgba(13, 92, 99, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
}

/* ===================================================================
   Blazor error UI
   =================================================================== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }