/* =====================================================================
   Fleet Manager — Global Professional Theme
   Loaded app-wide via includes/header.php (after Bootstrap + inline CSS).
   Uses Bootstrap 5.3 theme variables (--bs-*) so it adapts to dark mode.
   Purely visual polish — no layout-structure changes.
   ===================================================================== */

:root {
    --fm-radius:        14px;
    --fm-radius-sm:     10px;
    --fm-shadow-sm:     0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --fm-shadow:        0 4px 16px rgba(16, 24, 40, .08);
    --fm-shadow-lg:     0 12px 32px rgba(16, 24, 40, .12);
}

/* ---------- Typography ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.small, small { font-size: 0.82rem; }
.text-uppercase { letter-spacing: 0.04em; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card.shadow, .card.shadow-sm { box-shadow: var(--fm-shadow) !important; }
.card-header {
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
    font-weight: 600;
}
.card-header:first-child { border-radius: var(--fm-radius) var(--fm-radius) 0 0; }
.rounded-4 { border-radius: var(--fm-radius) !important; }
.rounded-top-4 { border-radius: var(--fm-radius) var(--fm-radius) 0 0 !important; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--fm-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: all .18s ease;
}
.btn:not(.btn-link):hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }
.btn.rounded-pill { border-radius: 999px !important; }
.btn.rounded-circle { border-radius: 50% !important; }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--fm-radius-sm);
    font-size: .92rem;
    border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.input-group-text {
    border-radius: var(--fm-radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}
.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}

/* ---------- Tables ---------- */
.table > thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * {
    background: var(--bs-tertiary-bg);
}

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.rounded-pill { padding-inline: .7em; }

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--fm-radius-sm);
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
}

/* ---------- Dropdowns / modals ---------- */
.dropdown-menu { border-radius: 12px; box-shadow: var(--fm-shadow-lg); }
.modal-content { border-radius: var(--fm-radius); box-shadow: var(--fm-shadow-lg); }

/* ---------- Scrollbar (subtle, desktop) ---------- */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb {
        background: var(--bs-border-color);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color); background-clip: content-box; }
}

/* =====================================================================
   RESPONSIVE — mobile & tablet refinements (app-wide)
   ===================================================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .card-body { padding: 1rem; }
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.4rem; }
    h3, .h3 { font-size: 1.2rem; }
}

/* Phone */
@media (max-width: 575.98px) {
    .main-container { padding-left: 10px; padding-right: 10px; }
    .card { border-radius: 12px; }
    .card-body { padding: .85rem; }
    .card-header { padding: .75rem 1rem; }

    /* Comfortable tap targets */
    .btn { padding: .5rem .9rem; }
    .btn-sm { padding: .4rem .75rem; }
    .form-control, .form-select { font-size: 16px; } /* prevents iOS zoom-on-focus */

    /* Tables scroll smoothly instead of squashing */
    .table { font-size: .82rem; }
    .table > thead th, .table > tbody td { padding: .55rem .6rem; }

    /* Buttons that sit in a row wrap nicely */
    .d-flex.gap-2 { flex-wrap: wrap; }
    h1, .h1 { font-size: 1.4rem; }
    h2, .h2 { font-size: 1.25rem; }
}