/* ── GPS Tracking Platform — app.css ──────────────────────────── */
:root {
    --primary:   #29abe2;
    --sidebar-w: 260px;
    --topbar-h:  70px;
}

/* ── Layout ──────────────────────────────────────────────────── */
body { background: #f3f6f9; font-family: 'Segoe UI', sans-serif; }

#layout-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* Topbar */
#page-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h); background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    z-index: 1000;
}
.navbar-header {
    display: flex; align-items: center;
    height: var(--topbar-h); padding: 0 16px;
}
.navbar-brand-box { min-width: 240px; }
.hamburger-icon span {
    display: block; width: 22px; height: 2px;
    background: #555; margin: 4px 0; border-radius: 2px;
    transition: .2s;
}

/* Sidebar */
.app-menu {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w); background: #fff;
    z-index: 999; padding-top: var(--topbar-h);
    transition: transform .25s ease;
    box-shadow: 1px 0 8px rgba(0,0,0,.06);
}
.navbar-brand-box { padding: 10px 16px; }

/* Sidebar nav */
#navbar-nav { list-style: none; padding: 8px 0; margin: 0; }
#navbar-nav .menu-title {
    padding: 10px 20px 4px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #aaa;
}
#navbar-nav .nav-item { margin: 1px 8px; }
#navbar-nav .menu-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 8px;
    color: #444; text-decoration: none;
    font-size: 13.5px; transition: all .18s;
}
#navbar-nav .menu-link i { font-size: 17px; }
#navbar-nav .menu-link:hover { background: #f0f9ff; color: var(--primary); }
#navbar-nav .menu-link.active { background: var(--primary); color: #fff; }

/* Sub nav */
.menu-dropdown { padding-left: 36px; }
.menu-dropdown .nav-link {
    display: block; padding: 7px 12px;
    border-radius: 6px; color: #555;
    font-size: 12.5px; text-decoration: none;
    transition: all .15s;
}
.menu-dropdown .nav-link:hover { background: #f0f9ff; color: var(--primary); }

/* Main content */
.main-content {
    margin-left: var(--sidebar-w);
    padding-top: var(--topbar-h);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
.page-content { flex: 1; padding: 20px; }

/* Footer */
.footer {
    padding: 12px 20px; background: #fff;
    border-top: 1px solid #eee; font-size: 12px;
}

/* Overlay for mobile */
.vertical-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 998;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    margin-bottom: 20px;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 10px 10px 0 0 !important;
    padding: 14px 20px;
}
.card-title { font-size: 14px; font-weight: 600; color: #333; }

/* ── Status widgets (dashboard cards) ───────────────────────── */
.crm-widget .row > .col { border-right: 1px solid #f0f0f0; }
.crm-widget .row > .col:last-child { border-right: none; }

/* ── Topbar elements ─────────────────────────────────────────── */
.app-search .form-control {
    background: #f3f6f9; border: 1px solid #e8ecef;
    border-radius: 20px; padding: 6px 36px 6px 14px;
    font-size: 13px;
}
.search-widget-icon {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); color: #aaa; font-size: 15px;
}
.btn-topbar {
    background: transparent; border: none;
    padding: 8px 10px; color: #555;
}
.btn-topbar:hover { background: #f3f6f9; color: var(--primary); }
.topbar-badge {
    top: 4px !important; right: 4px !important;
    font-size: 9px; min-width: 16px; height: 16px;
    line-height: 16px; padding: 0 4px;
}

/* ── Page title ─────────────────────────────────────────────── */
.page-title-box { margin-bottom: 16px; }
.page-title-box h4 { font-size: 17px; font-weight: 600; color: #333; }
.breadcrumb { font-size: 12px; }
.breadcrumb-item a { color: var(--primary); text-decoration: none; }

/* ── Tables ─────────────────────────────────────────────────── */
.table th { font-size: 12px; font-weight: 600; vertical-align: middle; }
.table td { font-size: 12.5px; vertical-align: middle; }
.table-secondary th { background: #f3f6f9; color: #444; }

/* DataTables buttons */
.dt-buttons .btn { font-size: 12px; padding: 4px 12px; margin-right: 4px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .3px; }

/* ── Spinner overlay ─────────────────────────────────────────── */
.spinner-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(255,255,255,.65); z-index: 9999;
    align-items: center; justify-content: center;
}

/* ── Mobile sidebar toggle ──────────────────────────────────── */
@media (max-width: 768px) {
    .app-menu { transform: translateX(-100%); }
    .app-menu.show { transform: translateX(0); }
    .vertical-overlay.show { display: block; }
    .main-content { margin-left: 0; }
}

/* ── Login page ─────────────────────────────────────────────── */
.login-bg { background: linear-gradient(135deg, var(--primary) 0%, #1a7ab5 100%); }