/* ============================================================
   FLEET MANAGER PRO - Custom Styles
   ============================================================ */
:root {
    --fm-primary:    #1a3c5e;
    --fm-secondary:  #2c6fad;
    --fm-accent:     #f0a500;
    --fm-sidebar-bg: #0f2a42;
    --fm-sidebar-w:  260px;
    --fm-navbar-h:   56px;
    --fm-text-muted: #8a99a8;
    --fm-border:     rgba(255,255,255,0.07);
    --fm-hover:      rgba(255,255,255,0.08);
}

/* ---- Base ---- */
body { background:#f0f2f5; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; font-size:14px; }

/* ---- Navbar ---- */
.fm-navbar { background:linear-gradient(135deg,var(--fm-primary),var(--fm-secondary)) !important; height:var(--fm-navbar-h); z-index:1040; }
.fm-navbar .navbar-brand { font-size:1.1rem; letter-spacing:.5px; }

/* ---- Layout ---- */
.fm-wrapper { display:flex; min-height:100vh; padding-top:var(--fm-navbar-h); }

/* ---- Sidebar (Change 1: proper scrolling all screens) ---- */
.fm-sidebar {
    width: var(--fm-sidebar-w);
    background: var(--fm-sidebar-bg);
    position: fixed;
    top: var(--fm-navbar-h);
    left: 0;
    bottom: 0;                   /* fills to bottom of viewport */
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .25s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
    /* ensures inner content can scroll, not the page */
    display: flex;
    flex-direction: column;
}
.fm-sidebar::-webkit-scrollbar { width:4px; }
.fm-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }

.fm-sidebar.collapsed { transform:translateX(calc(-1 * var(--fm-sidebar-w))); }

.fm-sidebar-inner { padding:16px 0 32px; flex:1; }

.fm-sidebar-section { padding:0 10px; margin-bottom:4px; }

.fm-sidebar-label {
    font-size:10px; font-weight:700; letter-spacing:1.2px;
    color:var(--fm-text-muted); text-transform:uppercase;
    padding:14px 20px 4px;
}

/* Sidebar nav links */
.fm-sidebar .nav-link {
    color:rgba(255,255,255,.75); border-radius:8px;
    padding:8px 14px; font-size:13.5px;
    transition:all .15s ease; margin-bottom:2px;
}
.fm-sidebar .nav-link:hover,.fm-sidebar .nav-link:focus { background:var(--fm-hover); color:#fff; }
.fm-sidebar .nav-link.active { background:var(--fm-secondary); color:#fff; font-weight:600; }

.fm-group-toggle { cursor:pointer; }
.fm-chevron { font-size:11px; transition:transform .2s ease; }
.fm-group-toggle:not(.collapsed) .fm-chevron { transform:rotate(90deg); }

.fm-sub-menu .nav-link { font-size:13px; padding:6px 12px; color:rgba(255,255,255,.6); }
.fm-sub-menu .nav-link:hover { color:#fff; }
.fm-sub-menu .nav-link.active { background:rgba(44,111,173,.4); color:#fff; }

/* ---- Main Content ---- */
.fm-content {
    margin-left: var(--fm-sidebar-w);
    flex: 1;
    transition: margin-left .25s ease;
    min-height: calc(100vh - var(--fm-navbar-h));
}
.fm-content.expanded { margin-left:0; }

/* ---- Page Header ---- */
.fm-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.fm-page-header h1 { font-size:1.4rem; font-weight:700; color:var(--fm-primary); margin:0; }
.fm-breadcrumb { font-size:12px; color:var(--fm-text-muted); }

/* ---- Cards ---- */
.fm-card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.07); border:none; overflow:hidden; }
.fm-card .card-header { background:linear-gradient(135deg,var(--fm-primary),var(--fm-secondary)); color:#fff; border:none; padding:14px 20px; font-weight:600; font-size:.95rem; }

/* ---- Stat Cards ---- */
.stat-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 6px rgba(0,0,0,.06); display:flex; align-items:center; gap:16px; transition:transform .15s,box-shadow .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.1); }
.stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.stat-icon.blue   { background:#e8f0fe; color:#1a73e8; }
.stat-icon.green  { background:#e6f4ea; color:#1e8e3e; }
.stat-icon.orange { background:#fef3e2; color:#f09300; }
.stat-icon.red    { background:#fce8e6; color:#d93025; }
.stat-icon.purple { background:#f3e8fd; color:#9334e6; }
.stat-icon.teal   { background:#e0f4f4; color:#007b7b; }
.stat-value { font-size:1.5rem; font-weight:700; color:#1a1a2e; line-height:1; }
.stat-label { font-size:12px; color:var(--fm-text-muted); margin-top:3px; }

/* ---- Tables ---- */
.table-wrapper { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); padding:20px; }
.dataTables_wrapper .dataTables_filter input { border-radius:8px; }
.dataTables_wrapper .dataTables_length select { border-radius:8px; }
table.dataTable thead th { background:var(--fm-primary); color:#fff; font-size:12.5px; }
table.dataTable tbody tr:hover { background:#f5f8ff !important; }

/* ---- Forms ---- */
.fm-form-section { background:#fff; border-radius:12px; padding:24px; margin-bottom:20px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.fm-form-section-title { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--fm-secondary); border-bottom:2px solid var(--fm-secondary); padding-bottom:8px; margin-bottom:18px; }
.form-label { font-weight:600; font-size:13px; color:#444; }
.form-control,.form-select { border-radius:8px; font-size:13.5px; border-color:#dde1e7; }
.form-control:focus,.form-select:focus { border-color:var(--fm-secondary); box-shadow:0 0 0 3px rgba(44,111,173,.15); }

/* ---- Bilty Row Colors ---- */
.bilty-danger  { background:rgba(220,53,69,.07) !important; border-left:3px solid #dc3545; }
.bilty-success { background:rgba(25,135,84,.07) !important; border-left:3px solid #198754; }

/* ---- Badges ---- */
.badge { font-size:11px; font-weight:600; letter-spacing:.3px; padding:4px 10px; border-radius:20px; }

/* ---- Expenditure Rows ---- */
.expenditure-row { background:#f8faff; border:1px solid #e3e8f0; border-radius:8px; padding:10px 14px; margin-bottom:8px; }
.driver-exp-row  { background:#fff8f0; border:1px solid #f0dfc0; border-radius:8px; padding:10px 14px; margin-bottom:8px; }

/* ---- Service Alert Badges ---- */
.service-due   { color:#d93025; font-weight:700; }
.service-ok    { color:#1e8e3e; }

/* ---- Responsive (Change 1) ---- */
@media (max-width:991.98px) {
    .fm-sidebar {
        transform: translateX(calc(-1 * var(--fm-sidebar-w)));
        z-index: 1050;
    }
    .fm-sidebar.open { transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,.3); }
    .fm-content { margin-left:0 !important; }
    /* Overlay when sidebar open on mobile */
    .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1049; }
    .sidebar-overlay.active { display:block; }
}
@media (min-width:992px) {
    .fm-sidebar { transform:none !important; }
    .fm-sidebar.collapsed { transform:translateX(calc(-1 * var(--fm-sidebar-w))) !important; }
}
@media (max-width:576px) {
    .stat-card { padding:14px; }
    .stat-value { font-size:1.1rem; }
    .fm-page-header h1 { font-size:1.1rem; }
    .fm-form-section { padding:16px; }
}

/* ---- Login Page ---- */
.login-page { min-height:100vh; background:linear-gradient(135deg,#0f2a42 0%,#1a3c5e 50%,#2c6fad 100%); display:flex; align-items:center; justify-content:center; }
.login-card { background:rgba(255,255,255,.97); border-radius:18px; padding:40px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo .logo-icon { font-size:3rem; color:var(--fm-primary); }
.login-logo h3 { font-weight:800; color:var(--fm-primary); margin:4px 0 0; }

/* ---- Misc ---- */
.text-primary-fm { color:var(--fm-primary) !important; }
.bg-primary-fm   { background:var(--fm-primary) !important; }
.btn-primary-fm  { background:var(--fm-primary); border-color:var(--fm-primary); color:#fff; border-radius:8px; }
.btn-primary-fm:hover { background:var(--fm-secondary); border-color:var(--fm-secondary); color:#fff; }
.action-btns .btn { padding:4px 10px; font-size:12px; border-radius:6px; }
.profit { color:#1e8e3e; font-weight:700; }
.loss   { color:#d93025; font-weight:700; }