/* ============================================================
   Spot Logistics — brand theme
   Loaded AFTER Bootstrap 5,
   so it wins for shared elements. Tweak the hex values in :root
   below to re-skin the whole app.
   ============================================================ */

:root {
    /* ---- Brand palette (edit these) ---- */
    --brand-ink:        #10243E; /* deep navy — primary surfaces & headings */
    --brand-ink-700:    #1B3A5C;
    --brand-ink-900:    #0B1A2E;
    --brand-accent:     #2F6BFF; /* electric blue — links, CTAs, focus */
    --brand-accent-600: #1E52D6;
    --brand-surface:    #F7F9FC; /* app background */
    --brand-line:       #E6EAF0; /* borders / separators */
    --brand-muted:      #6B7A90; /* secondary text */
    --brand-body:       #1A2230; /* body text */

    /* ---- Map onto Bootstrap 5.3 variables ---- */
    --bs-primary:            var(--brand-ink);
    --bs-primary-rgb:        16, 36, 62;
    --bs-link-color:         var(--brand-accent);
    --bs-link-color-rgb:     47, 107, 255;
    --bs-link-hover-color:   var(--brand-accent-600);
    --bs-body-bg:            var(--brand-surface);
    --bs-body-color:         var(--brand-body);
    --bs-secondary-color:    var(--brand-muted);
    --bs-border-color:       var(--brand-line);
    --bs-border-radius:      0.6rem;
    --bs-border-radius-sm:   0.4rem;
    --bs-border-radius-lg:   0.9rem;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* ---- Semantic / status colors ---- */
    --bs-success: #17A67B; --bs-success-rgb: 23, 166, 123;
    --bs-warning: #E0A100; --bs-warning-rgb: 224, 161, 0;
    --bs-danger:  #E5484D; --bs-danger-rgb:  229, 72, 77;
    --bs-info:    #2F6BFF; --bs-info-rgb:    47, 107, 255;
}

/* ---- Base typography ---- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; color: var(--brand-ink); }

/* Tabular figures so codes/numbers line up on data screens */
.table, .tabular, code, .service-code { font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn { border-radius: var(--bs-border-radius-sm); transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn-primary {
    --bs-btn-bg: var(--brand-ink); --bs-btn-border-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-ink-700); --bs-btn-hover-border-color: var(--brand-ink-700);
    --bs-btn-active-bg: var(--brand-ink-900); --bs-btn-active-border-color: var(--brand-ink-900);
}
.btn-outline-primary { --bs-btn-color: var(--brand-ink); --bs-btn-border-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand-ink); }
.text-accent { color: var(--brand-accent) !important; }
.bg-accent { background: var(--brand-accent) !important; color: #fff !important; }

/* ---- Focus ring (replaces the template white+blue ring) ---- */
.btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 107, 255, .30);
    border-color: var(--brand-accent);
}

/* ---- Cards: single, consistent elevation ---- */
.card {
    border: 1px solid var(--brand-line);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 2px rgba(16, 36, 62, .04), 0 1px 3px rgba(16, 36, 62, .06);
}
.card-header { background: #fff; border-bottom: 1px solid var(--brand-line); font-weight: 600; }
.shadow-sm { box-shadow: 0 1px 2px rgba(16, 36, 62, .06) !important; }

/* ---- Tables: denser, sticky header, subtle zebra/hover ---- */
.table { --bs-table-border-color: var(--brand-line); }
.table thead th {
    background: #F1F4F9; color: var(--brand-ink);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--brand-line); white-space: nowrap;
}
.table-responsive thead th { position: sticky; top: 0; z-index: 2; }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table-hover > tbody > tr:hover > * { background: rgba(47, 107, 255, .05); }

/* ---- Nav ---- */
.navbar { border-bottom: 1px solid var(--brand-line); }
.nav-tabs .nav-link.active { color: var(--brand-ink); border-bottom: 2px solid var(--brand-accent); font-weight: 600; }
.dropdown-menu { border-color: var(--brand-line); box-shadow: 0 6px 24px rgba(16, 36, 62, .10); border-radius: var(--bs-border-radius); }

/* ---- Forms ---- */
.form-control, .form-select { border-color: var(--brand-line); border-radius: var(--bs-border-radius-sm); }
.form-label, label { font-weight: 500; color: #34435A; }

/* ---- Status badges (pairs with the StatusBadge component) ---- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .6em; border-radius: .5rem; }

/* ---- Links ---- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Dashboard stat cards ---- */
.card .fs-4.fw-bold { color: var(--brand-ink); }