/* ============================================================
   FleetMan — application theme (authored for this app)
   Layered on top of Bootstrap 5.3. Fixed left sidebar + topbar.
   ============================================================ */

:root {
    --fm-accent:        #0e7490;   /* cyan-700 — primary brand */
    --fm-accent-strong: #155e75;   /* cyan-800 */
    --fm-sidebar-bg:    #0f172a;   /* slate-900 */
    --fm-sidebar-bg-2:  #1e293b;   /* slate-800 */
    --fm-sidebar-fg:    #cbd5e1;   /* slate-300 */
    --fm-sidebar-muted: #64748b;   /* slate-500 */
    --fm-content-bg:    #f1f5f9;   /* slate-100 */
    --fm-sidebar-w:     250px;
    --fm-topbar-h:      58px;
    --bs-primary:       #0e7490;
}

/* Bootstrap primary button override to match the brand accent */
.btn-primary {
    --bs-btn-bg: var(--fm-accent);
    --bs-btn-border-color: var(--fm-accent);
    --bs-btn-hover-bg: var(--fm-accent-strong);
    --bs-btn-hover-border-color: var(--fm-accent-strong);
    --bs-btn-active-bg: var(--fm-accent-strong);
    --bs-btn-active-border-color: var(--fm-accent-strong);
}
.text-primary { color: var(--fm-accent) !important; }
a { color: var(--fm-accent); }

body { background: var(--fm-content-bg); }

/* ── App shell ───────────────────────────────────────────────────────────── */
.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--fm-sidebar-w);
    background: linear-gradient(180deg, var(--fm-sidebar-bg) 0%, var(--fm-sidebar-bg-2) 100%);
    color: var(--fm-sidebar-fg);
    display: flex; flex-direction: column;
    z-index: 1040;
}

.sidebar-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1rem 1.15rem; text-decoration: none;
    color: #fff; font-weight: 700; font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--fm-accent); color: #fff; font-size: 1.1rem;
}

.sidebar-nav { padding: .75rem .65rem; flex-grow: 1; overflow-y: auto; }
.sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; margin-bottom: .15rem;
    border-radius: 8px; text-decoration: none;
    color: var(--fm-sidebar-fg); font-weight: 500; font-size: .94rem;
    transition: background .12s, color .12s;
}
.sidebar-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: var(--fm-sidebar-muted); }
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link:hover i { color: var(--fm-sidebar-fg); }
.sidebar-link.active { background: var(--fm-accent); color: #fff; }
.sidebar-link.active i { color: #fff; }

.sidebar-footer { padding: .85rem; border-top: 1px solid rgba(255,255,255,.07); }
.user-row { display: flex; align-items: center; gap: .6rem; }
.user-avatar {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
    background: var(--fm-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.user-info { min-width: 0; }
.user-name { color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.25); --bs-btn-color: var(--fm-sidebar-fg); }

.sidebar-backdrop { display: none; }

/* ── Main column ─────────────────────────────────────────────────────────── */
.main { margin-left: var(--fm-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    height: var(--fm-topbar-h);
    background: #fff; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    position: sticky; top: 0; z-index: 1030;
}
.topbar-toggle { display: none; background: none; border: 0; font-size: 1.4rem; color: #334155; }
.topbar .breadcrumb { font-size: .95rem; }
.topbar .breadcrumb a { color: var(--fm-accent); text-decoration: none; }
.topbar .breadcrumb-item.active { color: #475569; font-weight: 600; }

.content { padding: 1.5rem; flex-grow: 1; }
@media (min-width: 1200px) { .content { padding: 1.75rem 2rem; } }

/* Cards get a soft, modern surface */
.card { border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef2f7; font-weight: 600; }

/* Favourite ("my vehicle") star toggle */
.favorite-star { font-size: 1.1rem; line-height: 1; text-decoration: none; vertical-align: middle; }
.favorite-star:hover { color: #f59e0b !important; }
.favorite-star.text-secondary { opacity: .55; }
.favorite-star.text-secondary:hover { opacity: 1; }

/* Status helpers reused by fleet pages (maintenance state colours) */
.status-ok       { color: #15803d; }
.status-due_soon { color: #b45309; }
.status-overdue  { color: #b91c1c; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--fm-sidebar-bg) 0%, var(--fm-accent-strong) 100%);
    padding: 1.5rem;
}
.login-card {
    width: 100%; max-width: 380px; background: #fff;
    border-radius: 16px; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 14px;
    background: var(--fm-accent); color: #fff; font-size: 1.8rem; margin-bottom: .75rem;
}
.login-brand h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: #0f172a; }
.login-brand p { color: #64748b; font-size: .85rem; margin: .25rem 0 0; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.is-open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar-toggle { display: inline-flex; }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(15,23,42,.5);
        z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .sidebar-backdrop.is-open { display: block; opacity: 1; pointer-events: auto; }
}