/* Fleet Tracking Portal — brand theme.
   Signature-red / white / near-black palette, pill-shaped controls.
   Overrides Bootstrap 5.3's CSS custom properties — no Sass rebuild needed. */

:root {
    --bs-primary: #e30016;
    --bs-primary-rgb: 227, 0, 22;
    --bs-primary-text-emphasis: #99000f;
    --bs-primary-bg-subtle: #fbe0e2;
    --bs-primary-border-subtle: #f2a3a9;
    --bs-link-color: #e30016;
    --bs-link-color-rgb: 227, 0, 22;
    --bs-link-hover-color: #a80010;
    --bs-link-hover-color-rgb: 168, 0, 16;

    --brand-red: #e30016;
    --brand-red-dark: #a80010;
    --brand-black: #1a1a1a;
}

body {
    background-color: #f7f7f7;
}

/* Navbar: solid brand red, replaces the default bg-dark utility */
.navbar.bg-brand {
    background-color: var(--brand-red) !important;
}

.navbar.bg-brand .navbar-brand,
.navbar.bg-brand .nav-link {
    color: #fff;
}

.navbar.bg-brand .nav-link.active {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.navbar.bg-brand .nav-link:hover {
    color: #ffe3e5;
}

/* Pill-shaped buttons and form controls, Coca-Cola bottle-cap curve */
.btn {
    border-radius: 50rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.btn-sm {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.form-control,
.form-select {
    border-radius: 50rem;
}

.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: #fff;
    border-bottom: 2px solid var(--brand-red);
    font-weight: 600;
}

.table thead {
    background-color: var(--brand-black);
    color: #fff;
}

.badge {
    border-radius: 50rem;
    font-weight: 500;
}

/* Login screen: centered branded card instead of a bare form */
.login-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.login-card .login-card-header {
    background-color: var(--brand-red);
    color: #fff;
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
}

.login-card .login-card-body {
    padding: 1.75rem 1.5rem;
    background-color: #fff;
}