/* ============================================================================
   BEDROCK TRUCK BEDS - DARK THEME WITH GOLD ACCENTS
   Premium dark theme matching the provided color scheme
   ============================================================================ */

/* ROOT VARIABLES - Dark Theme with Gold */
:root {
    /* Primary Brand Colors - Gold */
    --bedrock-gold: #FFB800;           /* Primary gold */
    --bedrock-gold-hover: #FFC933;     /* Lighter gold for hover */
    --bedrock-gold-active: #E5A600;    /* Darker gold for active */
    
    /* Dark Theme Backgrounds */
    --bedrock-background: #0D0D0D;     /* Near black - main background */
    --bedrock-surface: #1F1F1F;        /* Dark gray - cards, panels */
    --bedrock-surface-hover: #2A2A2A;  /* Lighter dark gray - hover states */
    
    /* Borders and Dividers */
    --bedrock-border: #333333;         /* Dark borders */
    
    /* Text Colors */
    --bedrock-text: #FFFFFF;           /* White text */
    --bedrock-text-muted: #A0A0A0;     /* Muted gray text */
    
    /* Semantic Colors */
    --bedrock-success: #10B981;        /* Green for success */
    --bedrock-success-bg: #10B981;
    --bedrock-warning: #F59E0B;        /* Amber for warnings */
    --bedrock-warning-bg: #F59E0B;
    --bedrock-error: #EF4444;          /* Red for errors */
    --bedrock-error-bg: #EF4444;
    --bedrock-info: #3B82F6;           /* Blue for info */
    --bedrock-info-bg: #3B82F6;
    
    /* Decorative Glows */
    --bedrock-glow-gold: #FFB800;
    --bedrock-glow-orange: #FFA500;
    
    /* Legacy/Compatibility */
    --bedrock-orange: var(--bedrock-gold);
    --bedrock-black: var(--bedrock-background);
    --bedrock-white: var(--bedrock-text);
}

/* ============================================================================
   GLOBAL OVERRIDES - Dark Theme Base
   ============================================================================ */

body {
    background-color: var(--bedrock-background) !important;
    color: var(--bedrock-text) !important;
}

/* Force dark backgrounds on all major containers */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    background-color: var(--bedrock-background) !important;
}

/* Override any white/light backgrounds */
.bg-white {
    background-color: var(--bedrock-surface) !important;
    color: var(--bedrock-text) !important;
}

.bg-light {
    background-color: var(--bedrock-surface) !important;
    color: var(--bedrock-text) !important;
}

html {
    background-color: var(--bedrock-background) !important;
}

/* ============================================================================
   HEADER STYLING - Dark with Gold Accents
   ============================================================================ */

/* Force header to be pure black - strongest override */
header,
header.bg-dark {
    background-color: #0D0D0D !important;
    background: #0D0D0D !important;
    border-bottom: 1px solid var(--bedrock-border);
}

/* Override ANY Bootstrap background classes in header */
header.bg-primary,
header.bg-info,
header.bg-secondary {
    background-color: #0D0D0D !important;
    background: #0D0D0D !important;
}

/* Force all header child elements to be dark/transparent */
header *,
header .container,
header .container-fluid,
header .d-flex,
header div,
header section {
    background-color: transparent !important;
    background: transparent !important;
}

/* Remove any blue backgrounds */
header .bg-primary,
header .btn-primary {
    background-color: transparent !important;
}

/* Header title - Gold/Orange */
header h1,
header .h3 {
    color: var(--bedrock-gold) !important;
}

/* Header subtitle - White */
header p {
    color: var(--bedrock-text) !important;
}

header .btn-outline-light {
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
    background-color: transparent !important;
}

header .btn-outline-light:hover {
    background-color: var(--bedrock-gold) !important;
    border-color: var(--bedrock-gold);
    color: var(--bedrock-background);
}

/* ============================================================================
   BUTTONS - Gold Primary Theme
   ============================================================================ */

/* Primary Buttons (Gold) */
.btn-primary {
    background-color: var(--bedrock-gold);
    border-color: var(--bedrock-gold);
    color: var(--bedrock-background);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 184, 0, 0.3);
}

.btn-primary:hover {
    background-color: var(--bedrock-gold-hover);
    border-color: var(--bedrock-gold-hover);
    color: var(--bedrock-background);
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary:focus {
    background-color: var(--bedrock-gold-active);
    border-color: var(--bedrock-gold-active);
    color: var(--bedrock-background);
    box-shadow: 0 0 0 0.25rem rgba(255, 184, 0, 0.4);
}

.btn-primary:disabled {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text-muted);
    box-shadow: none;
}

/* Success Buttons */
.btn-success {
    background-color: var(--bedrock-success);
    border-color: var(--bedrock-success);
    color: var(--bedrock-text);
}

.btn-success:hover {
    background-color: #0ea472;
    border-color: #0ea472;
}

/* Secondary Buttons (Dark Surface) */
.btn-secondary {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
}

.btn-secondary:hover {
    background-color: var(--bedrock-surface-hover);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--bedrock-gold);
    border-color: var(--bedrock-gold);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--bedrock-gold);
    border-color: var(--bedrock-gold);
    color: var(--bedrock-background);
}

.btn-outline-secondary {
    color: var(--bedrock-text);
    border-color: var(--bedrock-border);
}

.btn-outline-secondary:hover {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
}

/* ============================================================================
   CARDS - Dark Theme Surfaces
   ============================================================================ */

.card {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: var(--bedrock-surface-hover);
    border-bottom-color: var(--bedrock-border);
    color: var(--bedrock-text);
}

.card-header.bg-primary {
    background-color: var(--bedrock-gold) !important;
    color: var(--bedrock-background);
    font-weight: 600;
    border-bottom-color: var(--bedrock-gold);
}

.card-body {
    background-color: var(--bedrock-surface);
}

/* ============================================================================
   ALERTS - Semantic Colors
   ============================================================================ */

.alert {
    color: var(--bedrock-text);
}

.alert-info {
    background-color: rgba(255, 184, 0, 0.15) !important;
    border-color: #FFB800 !important;
    color: #93C5FD !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: var(--bedrock-warning) !important;
    color: #FCD34D !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: var(--bedrock-error) !important;
    color: #FCA5A5 !important;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: var(--bedrock-success) !important;
    color: #6EE7B7 !important;
}

.alert-secondary {
    background-color: var(--bedrock-surface) !important;
    border-color: var(--bedrock-border) !important;
    color: var(--bedrock-text-muted) !important;
}

/* ============================================================================
   PROGRESS BAR - Gold/Orange with Glow
   ============================================================================ */

.progress {
    background-color: var(--bedrock-surface-hover);
    border: 1px solid var(--bedrock-border);
}

.progress-bar {
    background-color: #FFB800 !important;  /* Bedrock Orange - Force override */
    color: #0D0D0D !important;  /* Dark text for contrast */
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
}

/* Super specific override for the utilization bar */
#utilizationBar {
    background-color: #FFB800 !important;  /* Bedrock Orange */
    background: #FFB800 !important;  /* Bedrock Orange */
    color: #0D0D0D !important;  /* Dark text */
}

/* Override any Bootstrap color classes on progress bar */
.progress-bar.bg-primary,
.progress-bar.bg-info,
.progress-bar.bg-success,
.progress-bar.bg-warning,
.progress-bar.bg-danger,
#utilizationBar.bg-primary,
#utilizationBar.bg-info,
#utilizationBar.bg-success,
#utilizationBar.bg-warning,
#utilizationBar.bg-danger {
    background-color: #FFB800 !important;  /* Force Bedrock Orange */
    background: #FFB800 !important;  /* Force Bedrock Orange */
    color: #0D0D0D !important;
}

/* ============================================================================
   TABLES - Dark Theme
   ============================================================================ */

.table {
    color: var(--bedrock-text);
}

.table-dark {
    background-color: var(--bedrock-surface);
    color: var(--bedrock-text);
}

.table-dark th,
.table-dark td {
    border-color: var(--bedrock-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

.table-hover tbody tr:hover {
    background-color: var(--bedrock-surface-hover);
    color: var(--bedrock-text);
}

.table-secondary {
    background-color: var(--bedrock-surface-hover);
    color: var(--bedrock-text);
}

thead.table-dark {
    background-color: var(--bedrock-background);
    border-bottom: 2px solid var(--bedrock-gold);
}

/* ============================================================================
   FORM CONTROLS - Dark Theme
   ============================================================================ */

.form-control,
.form-select {
    background-color: var(--bedrock-surface) !important;
    border-color: var(--bedrock-border) !important;
    color: var(--bedrock-text) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bedrock-surface-hover) !important;
    border-color: var(--bedrock-gold) !important;
    color: var(--bedrock-text) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 184, 0, 0.25);
}

.form-control::placeholder {
    color: var(--bedrock-text-muted) !important;
}

.form-label {
    color: var(--bedrock-text) !important;
}

/* Select options */
.form-select option {
    background-color: var(--bedrock-surface) !important;
    color: var(--bedrock-text) !important;
}

/* Input text */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
    color: var(--bedrock-text) !important;
}

.form-check-input {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
}

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

.form-check-input:focus {
    border-color: var(--bedrock-gold);
    box-shadow: 0 0 0 0.25rem rgba(255, 184, 0, 0.25);
}

.form-check-label {
    color: var(--bedrock-text);
}

/* Disabled form controls */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text-muted);
    opacity: 0.5;
}

/* ============================================================================
   BADGES - Gold Theme
   ============================================================================ */

.badge {
    font-weight: 600;
}

.badge.bg-primary {
    background-color: var(--bedrock-gold) !important;
    color: var(--bedrock-background);
}

/* Badge color overrides for dark theme */
.badge {
    background-color: var(--bedrock-surface-hover);
    color: var(--bedrock-text);
}

/* ============================================================================
   FOOTER - Pure Black with Gold Accents
   ============================================================================ */

/* Force footer to be pure black - strongest override */
footer,
footer.bg-dark {
    background-color: #0D0D0D !important;
    background: #0D0D0D !important;
    border-top: 1px solid var(--bedrock-border);
}

/* Override ANY Bootstrap background classes in footer */
footer.bg-primary,
footer.bg-info,
footer.bg-secondary {
    background-color: #0D0D0D !important;
    background: #0D0D0D !important;
}

/* Force all footer child elements to be transparent */
footer *,
footer .container,
footer .container-fluid,
footer .row,
footer .col,
footer div {
    background-color: transparent !important;
    background: transparent !important;
}

footer a {
    color: var(--bedrock-gold);
    text-decoration: none;
}

footer a:hover {
    color: var(--bedrock-gold-hover);
    text-decoration: underline;
}

footer .text-white,
footer p {
    color: var(--bedrock-text) !important;
}

/* ============================================================================
   LINKS - Gold Theme
   ============================================================================ */

a {
    color: var(--bedrock-gold);
}

a:hover {
    color: var(--bedrock-gold-hover);
}

/* ============================================================================
   CUSTOM TRUCK VISUALIZER
   ============================================================================ */

.truck-container {
    background-color: var(--bedrock-surface);
    border: 2px solid var(--bedrock-border);
    border-radius: 8px;
}

#truckCanvas {
    background-color: var(--bedrock-surface);
}

/* ============================================================================
   CONTAINER BACKGROUNDS
   ============================================================================ */

.container,
.container-fluid {
    background-color: var(--bedrock-background) !important;
}

/* Override Bootstrap's default light text colors */
.text-dark {
    color: var(--bedrock-text) !important;
}

.text-secondary {
    color: var(--bedrock-text-muted) !important;
}

.text-body {
    color: var(--bedrock-text) !important;
}

.text-black-50 {
    color: var(--bedrock-text-muted) !important;
}

/* Headings in dark mode */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--bedrock-text) !important;
}

/* Lead text */
.lead {
    color: var(--bedrock-text) !important;
}

/* Force all text to be light colored */
h1, h2, h3, h4, h5, h6,
p, span, div, label, small {
    color: var(--bedrock-text) !important;
}

/* Specific text elements */
.small,
.text-muted,
.form-text {
    color: var(--bedrock-text-muted) !important;
}

/* Card text */
.card-body,
.card-header,
.card-footer,
.card-title,
.card-text {
    color: var(--bedrock-text) !important;
}

/* Table text */
table,
tbody,
thead,
tfoot,
th,
td,
tr {
    color: var(--bedrock-text) !important;
}

/* List text */
ul, ol, li {
    color: var(--bedrock-text) !important;
}

/* Strong and bold text */
strong, b {
    color: var(--bedrock-text) !important;
}

/* Override any light backgrounds */
.bg-white,
.bg-light {
    background-color: var(--bedrock-surface) !important;
    color: var(--bedrock-text) !important;
}

/* ============================================================================
   UTILITY CLASSES - Dark Theme
   ============================================================================ */

/* Gold utilities */
.bg-bedrock-gold {
    background-color: var(--bedrock-gold) !important;
    color: var(--bedrock-background) !important;
}

.text-bedrock-gold {
    color: var(--bedrock-gold) !important;
}

.border-bedrock-gold {
    border-color: var(--bedrock-gold) !important;
}

/* Dark surface utilities */
.bg-bedrock-surface {
    background-color: var(--bedrock-surface) !important;
    color: var(--bedrock-text) !important;
}

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

/* Text utilities */
.text-bedrock {
    color: var(--bedrock-text) !important;
}

.text-muted,
.text-bedrock-muted {
    color: var(--bedrock-text-muted) !important;
}

/* Border utilities */
.border-bedrock {
    border-color: var(--bedrock-border) !important;
}

/* Glow effects */
.glow-gold {
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4);
}

.glow-gold-strong {
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.6);
}

/* Legacy compatibility */
.bg-bedrock-orange,
.bg-bedrock-yellow {
    background-color: var(--bedrock-gold) !important;
    color: var(--bedrock-background) !important;
}

.text-bedrock-orange,
.text-bedrock-yellow {
    color: var(--bedrock-gold) !important;
}

.border-bedrock-orange,
.border-bedrock-yellow {
    border-color: var(--bedrock-gold) !important;
}

.bg-bedrock-black {
    background-color: var(--bedrock-background) !important;
    color: var(--bedrock-text) !important;
}

.text-bedrock-black {
    color: var(--bedrock-background) !important;
}

/* ============================================================================
   DROPDOWN MENUS - Dark Theme
   ============================================================================ */

.dropdown-menu {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
}

.dropdown-item {
    color: var(--bedrock-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bedrock-surface-hover);
    color: var(--bedrock-gold);
}

.dropdown-divider {
    border-color: var(--bedrock-border);
}

/* ============================================================================
   MODAL OVERRIDES - Dark Theme
   ============================================================================ */

.modal-content {
    background-color: var(--bedrock-surface);
    border-color: var(--bedrock-border);
    color: var(--bedrock-text);
}

.modal-header {
    background-color: var(--bedrock-background);
    border-bottom-color: var(--bedrock-border);
}

.modal-footer {
    background-color: var(--bedrock-background);
    border-top-color: var(--bedrock-border);
}

.modal-title {
    color: var(--bedrock-text);
}

.btn-close {
    filter: invert(1);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    header .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    header img {
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   SCROLLBAR STYLING - Dark Theme
   ============================================================================ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bedrock-background);
}

::-webkit-scrollbar-thumb {
    background: var(--bedrock-surface-hover);
    border-radius: 6px;
    border: 2px solid var(--bedrock-background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bedrock-gold);
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    body {
        background-color: white;
        color: black;
    }
    
    .btn,
    header,
    footer,
    .alert-info {
        display: none;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--bedrock-gold);
    outline-offset: 2px;
}

/* High contrast for better readability */
.high-contrast {
    --bedrock-gold: #FFD700;
    --bedrock-text: #FFFFFF;
}