/* ====================================================
   Martini Garage System — Custom Stylesheet
   Mobile-first, simu-friendly
   ==================================================== */

/* ── Variables ────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --sidebar-collapsed: 60px;
    --color-purple: #6f42c1;
    --bottom-nav-h: 64px;
    --topbar-h: 52px;
}

/* ── Base ─────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-text-size-adjust: 100%;
    /* Epuka zoom isiyotakiwa kwenye iOS */
}

/* Inputs: zuia iOS auto-zoom (font-size lazima ≥ 16px) */
input, select, textarea, .form-control, .form-select {
    font-size: 16px !important;
}
.form-control-lg, .form-select-lg { font-size: 16px !important; }

#wrapper { min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    transition: width .25s ease;
    flex-shrink: 0;
    overflow-x: hidden;
}
#sidebar .nav-link {
    border-radius: 8px;
    font-size: .875rem;
    padding: .5rem .75rem;
    transition: background .15s;
    white-space: nowrap;
    overflow: hidden;
    min-height: 44px;
    display: flex;
    align-items: center;
}
#sidebar .nav-link:hover  { background: rgba(255,255,255,.1); }
#sidebar .nav-link.active { background: rgba(255,193,7,.85); color: #000 !important; font-weight: 600; }

/* Collapsed state (desktop only) */
#wrapper.sidebar-collapsed #sidebar { width: var(--sidebar-collapsed); }
#wrapper.sidebar-collapsed #sidebar .nav-link span,
#wrapper.sidebar-collapsed .sidebar-header div { display: none; }
#wrapper.sidebar-collapsed #sidebar .sidebar-header { justify-content: center; }

/* ── Sidebar overlay (mobile) ─────────────────────── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
}
#wrapper.mobile-open #sidebar-overlay { display: block; }

/* ── Stat Cards ───────────────────────────────────── */
.stat-card { border-left: 4px solid transparent !important; }
.stat-blue   { border-left-color: #0d6efd !important; }
.stat-orange { border-left-color: #ffc107 !important; }
.stat-green  { border-left-color: #198754 !important; }
.stat-purple { border-left-color: var(--color-purple) !important; }
.stat-icon { font-size: 2rem; opacity: .3; }
.text-purple { color: var(--color-purple) !important; }

/* ── Tables ───────────────────────────────────────── */
.table { font-size: .875rem; }
.table thead th { font-weight: 600; letter-spacing: .03em; font-size: .8rem; text-transform: uppercase; }
.table-hover tbody tr { cursor: default; }

/* ── Cards ────────────────────────────────────────── */
.card { border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; font-size: .9rem; }

/* ── Font Mono ────────────────────────────────────── */
.font-monospace { font-family: 'Courier New', monospace !important; }

/* ── Badges ───────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .02em; }

/* ── Navbar ───────────────────────────────────────── */
.navbar-brand { font-size: .95rem; }

/* ── Content ──────────────────────────────────────── */
#content-wrapper { min-width: 0; }

/* ── Form Controls ────────────────────────────────── */
.form-control:focus,
.form-select:focus { border-color: #ffc107; box-shadow: 0 0 0 .2rem rgba(255,193,7,.25); }

/* Touch-friendly: vitufe vyote viwe na ukubwa wa kutosha */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }
.btn-sm { min-height: 36px; }
a, button, .nav-link { touch-action: manipulation; }

/* ── Bottom Navigation (mobile only) ─────────────── */
#bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: #fff;
    border-top: 1px solid #dee2e6;
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
}
#bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6c757d;
    font-size: .65rem;
    padding: 6px 2px;
    min-height: 44px;
    gap: 2px;
    transition: color .15s, background .15s;
    border-radius: 0;
    -webkit-tap-highlight-color: rgba(255,193,7,.3);
}
#bottom-nav a i { font-size: 1.35rem; line-height: 1; }
#bottom-nav a.active { color: #d39e00; font-weight: 600; }
#bottom-nav a:active { background: #fff8e1; }

/* Kitufe kikubwa cha kuingiza gari (center) */
#bottom-nav .btn-add {
    flex: 1.2;
    position: relative;
    color: #fff;
    background: #ffc107;
    border-radius: 16px 16px 0 0;
    min-height: var(--bottom-nav-h);
    margin: 0;
}
#bottom-nav .btn-add i { font-size: 1.6rem; color: #212529; }
#bottom-nav .btn-add span { color: #212529; font-weight: 700; font-size: .67rem; }
#bottom-nav .btn-add.active { background: #e0a800; }

/* ── Print ────────────────────────────────────────── */
@media print {
    #sidebar, .navbar, .btn, nav, #bottom-nav { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #aaa; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ── Sticky top ───────────────────────────────────── */
.sticky-top { top: 0; z-index: 10; }

/* ════════════════════════════════════════════════════
   MOBILE  ≤ 767px
   ════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Onyesha bottom nav, ficha sidebar ya kawaida */
    #bottom-nav { display: flex; }

    /* Sidebar - drawer kutoka kushoto */
    #sidebar {
        position: fixed;
        z-index: 1050;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        width: 260px !important;
    }
    #wrapper.mobile-open #sidebar { transform: translateX(0); }

    /* Content - padding ya chini zaidi (bottom nav) */
    .content {
        padding: .75rem !important;
        padding-bottom: calc(var(--bottom-nav-h) + .75rem) !important;
    }

    /* Topbar - rahisi zaidi */
    .navbar { padding: .4rem .75rem !important; }
    .navbar-brand { font-size: .85rem; }

    /* Footer - ficha kwenye simu (bottom nav inachukua nafasi) */
    footer { display: none; }

    /* Tables - scroll horizontal bila kuvunjika */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: .78rem; min-width: 480px; }
    .table td, .table th { padding: .4rem .5rem !important; }

    /* Futa td.d-flex gap kwenye simu - tumia wrap badala */
    td .d-flex.gap-1 { flex-wrap: wrap; gap: 4px !important; }

    /* Vitufe kwenye jedwali - vidogo lakini vinavyoweza kubonyezwa */
    .table .btn-sm {
        min-height: 34px;
        min-width: 34px;
        padding: 0 6px;
    }

    /* Cards - punguza border-radius */
    .card { border-radius: 8px; }

    /* Modals - inyoooshe zaidi kwenye simu */
    .modal-dialog { margin: .5rem; }
    .modal-dialog:not(.modal-sm):not(.modal-lg) { max-width: 100%; }

    /* Badges - simu */
    .badge { font-size: .7rem; }

    /* Row za form - zitimie column moja kwa simu */
    .row.g-3 > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }

    /* Stat cards - mbili kwa safu */
    .row .col-md-3 { flex: 0 0 50%; max-width: 50%; }

    /* Pagination - vidogo */
    .pagination { flex-wrap: wrap; }
    .page-link { padding: .3rem .55rem; font-size: .8rem; min-height: 36px; }

    /* Flash messages */
    .alert { font-size: .85rem; padding: .6rem .9rem; }

    /* Vitufe vikubwa kwenye form (rahisi kugusa) */
    .btn-lg { min-height: 52px; font-size: 1rem !important; }
    .form-control, .form-select, textarea { padding: .6rem .8rem; }

    /* Dropdown ya fundi */
    #techDropdown { max-height: 180px; }
    .tech-option { padding: .7rem .9rem !important; min-height: 44px; }

    /* Input groups (simu + namba) */
    .input-group-text { font-size: .85rem; padding: .5rem .7rem; }

    /* Ficha maandishi ya ziada kwenye topbar */
    .d-none.d-md-inline { display: none !important; }

    /* Tathmini ya mwisho wa ukurasa wa magari */
    .col-md-5, .col-md-7 { flex: 0 0 100%; max-width: 100%; }
}

/* ════════════════════════════════════════════════════
   TABLET  768px – 991px
   ════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
    #sidebar { width: 200px; }
    .content { padding: 1rem !important; }
    .table { font-size: .82rem; }
    .stat-icon { font-size: 1.6rem; }
}

/* ════════════════════════════════════════════════════
   DESKTOP  ≥ 992px
   ════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    #bottom-nav { display: none !important; }
}