/* ============================================
   Freight Wranglers TMS — Brand Theme
   Derived from the Freight Wranglers logo:
   Navy blues (truck), warm coppers (text),
   charcoals, and warm grays.
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Brand palette */
    --fw-primary:       #2E3F5C;
    --fw-primary-light: #455D80;
    --fw-primary-dark:  #212C3F;
    --fw-accent:        #BA8353;
    --fw-accent-light:  #CF9560;

    /* Bootstrap overrides */
    --fw-info:          #5B7B9A;
    --fw-success:       #3D7B5F;
    --fw-warning:       #C4922A;
    --fw-danger:        #B94A3E;
    --fw-secondary:     #6B7280;
    --fw-dark:          #1E2A3A;

    /* Surfaces */
    --fw-body-bg:       #F8F7F5;
    --fw-card-bg:       #FFFFFF;
    --fw-top-bar-bg:    #F5F3F0;
    --fw-top-bar-border:#E0DCD6;

    /* Text */
    --fw-body-color:    #2D3748;
    --fw-muted:         #718096;

    /* Sidebar */
    --fw-sidebar-from:  #1A2332;
    --fw-sidebar-to:    #2E3F5C;
    --fw-sidebar-active:rgba(186,131,83,0.25);

    /* Links */
    --fw-link:          #2E3F5C;
    --fw-link-hover:    #455D80;
    --fw-focus:         #5A749C;

    /* Bootstrap CSS variable overrides */
    --bs-primary:       #2E3F5C;
    --bs-primary-rgb:   46,63,92;
    --bs-info:          #5B7B9A;
    --bs-info-rgb:      91,123,154;
    --bs-success:       #3D7B5F;
    --bs-success-rgb:   61,123,95;
    --bs-warning:       #C4922A;
    --bs-warning-rgb:   196,146,42;
    --bs-danger:        #B94A3E;
    --bs-danger-rgb:    185,74,62;
    --bs-secondary:     #6B7280;
    --bs-secondary-rgb: 107,114,128;
    --bs-dark:          #1E2A3A;
    --bs-dark-rgb:      30,42,58;
    --bs-body-bg:       #F8F7F5;
    --bs-body-color:    #2D3748;
    --bs-link-color:    #2E3F5C;
    --bs-link-hover-color: #455D80;
    --bs-link-color-rgb:46,63,92;
    --bs-link-hover-color-rgb:69,93,128;
    --bs-border-color:  #E0DCD6;
}

/* --- Body --- */
body {
    background-color: var(--fw-body-bg);
    color: var(--fw-body-color);
}

/* --- Links --- */
a, .btn-link {
    color: var(--fw-link);
}

a:hover, .btn-link:hover {
    color: var(--fw-link-hover);
}

/* --- Background utilities --- */
.bg-primary   { background-color: var(--fw-primary) !important; }
.bg-info      { background-color: var(--fw-info) !important; }
.bg-success   { background-color: var(--fw-success) !important; }
.bg-warning   { background-color: var(--fw-warning) !important; }
.bg-danger    { background-color: var(--fw-danger) !important; }
.bg-secondary { background-color: var(--fw-secondary) !important; }
.bg-dark      { background-color: var(--fw-dark) !important; }

/* --- Text utilities --- */
.text-primary   { color: var(--fw-primary) !important; }
.text-info      { color: var(--fw-info) !important; }
.text-success   { color: var(--fw-success) !important; }
.text-warning   { color: var(--fw-warning) !important; }
.text-danger    { color: var(--fw-danger) !important; }
.text-secondary { color: var(--fw-secondary) !important; }
.text-dark      { color: var(--fw-dark) !important; }
.text-muted     { color: var(--fw-muted) !important; }

/* --- Border utilities --- */
.border-primary   { border-color: var(--fw-primary) !important; }
.border-info      { border-color: var(--fw-info) !important; }
.border-success   { border-color: var(--fw-success) !important; }
.border-warning   { border-color: var(--fw-warning) !important; }
.border-danger    { border-color: var(--fw-danger) !important; }
.border-secondary { border-color: var(--fw-secondary) !important; }
.border-dark      { border-color: var(--fw-dark) !important; }

/* --- Buttons: Solid variants --- */
.btn-primary {
    --bs-btn-bg: #2E3F5C;
    --bs-btn-border-color: #25334A;
    --bs-btn-hover-bg: #455D80;
    --bs-btn-hover-border-color: #2E3F5C;
    --bs-btn-active-bg: #212C3F;
    --bs-btn-active-border-color: #1A2332;
    --bs-btn-disabled-bg: #2E3F5C;
    --bs-btn-disabled-border-color: #2E3F5C;
    color: #fff;
}

.btn-info {
    --bs-btn-bg: #5B7B9A;
    --bs-btn-border-color: #4E6D8A;
    --bs-btn-hover-bg: #4E6D8A;
    --bs-btn-hover-border-color: #5B7B9A;
    --bs-btn-active-bg: #426080;
    --bs-btn-active-border-color: #426080;
    --bs-btn-disabled-bg: #5B7B9A;
    --bs-btn-disabled-border-color: #5B7B9A;
    color: #fff;
}

.btn-success {
    --bs-btn-bg: #3D7B5F;
    --bs-btn-border-color: #336B52;
    --bs-btn-hover-bg: #336B52;
    --bs-btn-hover-border-color: #3D7B5F;
    --bs-btn-active-bg: #2A5B45;
    --bs-btn-active-border-color: #2A5B45;
    --bs-btn-disabled-bg: #3D7B5F;
    --bs-btn-disabled-border-color: #3D7B5F;
    color: #fff;
}

.btn-warning {
    --bs-btn-bg: #C4922A;
    --bs-btn-border-color: #B08324;
    --bs-btn-hover-bg: #B08324;
    --bs-btn-hover-border-color: #C4922A;
    --bs-btn-active-bg: #9C741F;
    --bs-btn-active-border-color: #9C741F;
    --bs-btn-disabled-bg: #C4922A;
    --bs-btn-disabled-border-color: #C4922A;
    color: #fff;
}

.btn-danger {
    --bs-btn-bg: #B94A3E;
    --bs-btn-border-color: #A54036;
    --bs-btn-hover-bg: #A54036;
    --bs-btn-hover-border-color: #B94A3E;
    --bs-btn-active-bg: #91362E;
    --bs-btn-active-border-color: #91362E;
    --bs-btn-disabled-bg: #B94A3E;
    --bs-btn-disabled-border-color: #B94A3E;
    color: #fff;
}

.btn-secondary {
    --bs-btn-bg: #6B7280;
    --bs-btn-border-color: #5E6470;
    --bs-btn-hover-bg: #5E6470;
    --bs-btn-hover-border-color: #6B7280;
    --bs-btn-active-bg: #515761;
    --bs-btn-active-border-color: #515761;
    --bs-btn-disabled-bg: #6B7280;
    --bs-btn-disabled-border-color: #6B7280;
    color: #fff;
}

.btn-dark {
    --bs-btn-bg: #1E2A3A;
    --bs-btn-border-color: #152130;
    --bs-btn-hover-bg: #152130;
    --bs-btn-hover-border-color: #1E2A3A;
    --bs-btn-active-bg: #0D1826;
    --bs-btn-active-border-color: #0D1826;
    --bs-btn-disabled-bg: #1E2A3A;
    --bs-btn-disabled-border-color: #1E2A3A;
    color: #fff;
}

/* --- Buttons: Outline variants --- */
.btn-outline-primary {
    --bs-btn-color: #2E3F5C;
    --bs-btn-border-color: #2E3F5C;
    --bs-btn-hover-bg: #2E3F5C;
    --bs-btn-hover-border-color: #2E3F5C;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #212C3F;
    --bs-btn-active-border-color: #212C3F;
    --bs-btn-active-color: #fff;
}

.btn-outline-info {
    --bs-btn-color: #5B7B9A;
    --bs-btn-border-color: #5B7B9A;
    --bs-btn-hover-bg: #5B7B9A;
    --bs-btn-hover-border-color: #5B7B9A;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #4E6D8A;
    --bs-btn-active-border-color: #4E6D8A;
    --bs-btn-active-color: #fff;
}

.btn-outline-success {
    --bs-btn-color: #3D7B5F;
    --bs-btn-border-color: #3D7B5F;
    --bs-btn-hover-bg: #3D7B5F;
    --bs-btn-hover-border-color: #3D7B5F;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #336B52;
    --bs-btn-active-border-color: #336B52;
    --bs-btn-active-color: #fff;
}

.btn-outline-warning {
    --bs-btn-color: #C4922A;
    --bs-btn-border-color: #C4922A;
    --bs-btn-hover-bg: #C4922A;
    --bs-btn-hover-border-color: #C4922A;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #B08324;
    --bs-btn-active-border-color: #B08324;
    --bs-btn-active-color: #fff;
}

.btn-outline-danger {
    --bs-btn-color: #B94A3E;
    --bs-btn-border-color: #B94A3E;
    --bs-btn-hover-bg: #B94A3E;
    --bs-btn-hover-border-color: #B94A3E;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #A54036;
    --bs-btn-active-border-color: #A54036;
    --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: #6B7280;
    --bs-btn-border-color: #6B7280;
    --bs-btn-hover-bg: #6B7280;
    --bs-btn-hover-border-color: #6B7280;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5E6470;
    --bs-btn-active-border-color: #5E6470;
    --bs-btn-active-color: #fff;
}

.btn-outline-dark {
    --bs-btn-color: #1E2A3A;
    --bs-btn-border-color: #1E2A3A;
    --bs-btn-hover-bg: #1E2A3A;
    --bs-btn-hover-border-color: #1E2A3A;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #152130;
    --bs-btn-active-border-color: #152130;
    --bs-btn-active-color: #fff;
}

/* --- Focus rings --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--fw-focus);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fw-focus);
}

/* --- Table dark header --- */
.table-dark {
    --bs-table-bg: #1E2A3A;
    --bs-table-border-color: #2E3F5C;
    --bs-table-color: #fff;
}

/* --- Pagination --- */
.page-link {
    color: var(--fw-primary);
}

.page-link:hover {
    color: var(--fw-primary-dark);
}

.page-item.active .page-link {
    background-color: var(--fw-primary);
    border-color: var(--fw-primary);
    color: #fff;
}

/* --- Alerts --- */
.alert-primary {
    --bs-alert-bg: #e8ecf2;
    --bs-alert-border-color: #c5ceda;
    --bs-alert-color: #1E2A3A;
}

.alert-info {
    --bs-alert-bg: #e6eef4;
    --bs-alert-border-color: #c0d2e0;
    --bs-alert-color: #2E4A61;
}

.alert-success {
    --bs-alert-bg: #e4f0ea;
    --bs-alert-border-color: #b8d8c7;
    --bs-alert-color: #1F4A36;
}

.alert-warning {
    --bs-alert-bg: #f7efe0;
    --bs-alert-border-color: #e8d4ac;
    --bs-alert-color: #6B4F15;
}

.alert-danger {
    --bs-alert-bg: #f5e5e3;
    --bs-alert-border-color: #e4bfba;
    --bs-alert-color: #6B2520;
}

/* --- Badges (ensure white text on colored backgrounds) --- */
.badge.bg-primary,
.badge.bg-info,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-secondary,
.badge.bg-dark {
    color: #fff !important;
}

/* --- Cards --- */
.card {
    background-color: var(--fw-card-bg);
}

/* --- Nav tabs/pills active --- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fw-primary);
    border-bottom-color: var(--fw-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--fw-primary);
    color: #fff;
}

/* --- Progress bar --- */
.progress-bar {
    background-color: var(--fw-primary);
}

/* --- List group active --- */
.list-group-item.active {
    background-color: var(--fw-primary);
    border-color: var(--fw-primary);
}

/* --- Login/Account page card --- */
.account-card {
    border: none;
    border-top: 3px solid var(--fw-accent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
}

.account-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: 1.5rem;
}