/* MyFleet — susun atur panel pentadbiran.
   Struktur mengikut corak Velzon: bar sisi gelap tetap, bar atas, dan kawasan
   kandungan berlatar kelabu lembut.

   ── TEMA ──────────────────────────────────────────────────────────────────
   Setiap warna ialah token pada :root, ditulis semula di bawah
   [data-bs-theme="dark"]. Atribut itu ialah cara rasmi Bootstrap 5.3 menukar
   tema, jadi komponen Bootstrap dan gaya MyFleet bertukar serentak.

   Bar sisi kekal hijau gelap dalam KEDUA-DUA tema. Itu disengajakan: jenama
   kekal tetap, dan satu varian logo putih mencukupi. */

:root {
    color-scheme: light;

    --mf-jenama: #12603f;
    --mf-jenama-gelap: #0d4a30;
    --mf-jenama-cair: #e8f3ee;

    --mf-sidebar: #14322a;
    --mf-sidebar-teks: rgba(255, 255, 255, 0.62);
    --mf-sidebar-hover: rgba(255, 255, 255, 0.08);
    --mf-sidebar-aktif: #ffffff;
    --mf-sidebar-tajuk: rgba(255, 255, 255, 0.4);

    --mf-topbar: #ffffff;
    --mf-topbar-teks: #5c6b64;

    --mf-latar: #f3f4f6;
    --mf-permukaan: #ffffff;
    --mf-sempadan: #e4e7e6;

    --mf-teks-lembut: #6b7a73;
    --mf-teks-label: #4a574f;
    --mf-jadual-kepala: #f7f8f8;
    --mf-baris-kumpulan: #f2f4f3;

    --mf-amaran: #b45309;
    --mf-amaran-latar: #fdf6ee;
    --mf-amaran-sempadan: #f0c9a0;

    --mf-formula-latar: #f7faf8;

    --mf-lebar-sisi: 250px;
    --mf-tinggi-atas: 64px;
}

:root[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Hijau dicerahkan: #12603f di atas latar gelap tidak mencapai nisbah
       kontras yang boleh dibaca. */
    --mf-jenama: #2e9d6b;
    --mf-jenama-gelap: #268a5c;
    --mf-jenama-cair: #16302a;

    --mf-sidebar: #0f2620;
    --mf-sidebar-teks: rgba(255, 255, 255, 0.6);
    --mf-sidebar-hover: rgba(255, 255, 255, 0.07);
    --mf-sidebar-aktif: #ffffff;
    --mf-sidebar-tajuk: rgba(255, 255, 255, 0.36);

    --mf-topbar: #1b1f23;
    --mf-topbar-teks: #9aa8a1;

    --mf-latar: #15191c;
    --mf-permukaan: #1d2226;
    --mf-sempadan: #2b3238;

    --mf-teks-lembut: #98a5ad;
    --mf-teks-label: #b6c2bb;
    --mf-jadual-kepala: #232a2f;
    --mf-baris-kumpulan: #232a2f;

    --mf-amaran: #e0a458;
    --mf-amaran-latar: #2a2118;
    --mf-amaran-sempadan: #5a4526;

    --mf-formula-latar: #171c20;
}

body {
    background-color: var(--mf-latar);
    font-size: 0.9rem;
}

/* ── Rangka susun atur ─────────────────────────────────────────────────── */

.mf-sisi {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--mf-lebar-sisi);
    background: var(--mf-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.2s ease;
}

.mf-kandungan {
    margin-left: var(--mf-lebar-sisi);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mf-atas {
    position: sticky;
    top: 0;
    height: var(--mf-tinggi-atas);
    background: var(--mf-topbar);
    border-bottom: 1px solid var(--mf-sempadan);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    z-index: 1030;
}

.mf-halaman {
    flex: 1;
    padding: 1.5rem 1.25rem 2.5rem;
}

/* Tudung gelap ketika bar sisi dibuka pada telefon. */
.mf-tudung {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1035;
    display: none;
}

body.mf-sisi-buka .mf-tudung {
    display: block;
}

@media (max-width: 991.98px) {
    .mf-sisi {
        transform: translateX(-100%);
    }

    body.mf-sisi-buka .mf-sisi {
        transform: translateX(0);
    }

    .mf-kandungan {
        margin-left: 0;
    }
}

/* ── Bar sisi ──────────────────────────────────────────────────────────── */

.mf-sisi-jenama {
    height: var(--mf-tinggi-atas);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.mf-sisi-jenama a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
}

.mf-logo {
    height: 34px;
    width: auto;
    display: block;
}

/* Nama sistem dieja di sebelah lambang. Teks di dalam lambang itu hanya 13%
   daripada tingginya, jadi pada 34px ia menjadi grafik semata-mata dan nama
   sistem tidak terbaca tanpa wordmark ini. */
.mf-jenama-nama {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
}

.mf-jenama-nama strong {
    font-weight: 800;
}

.mf-sisi-menu {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0 2rem;
}

.mf-sisi-tajuk {
    color: var(--mf-sidebar-tajuk);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 1.5rem 0.4rem;
}

.mf-sisi-menu a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1.5rem;
    color: var(--mf-sidebar-teks);
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
}

.mf-sisi-menu a:hover {
    color: var(--mf-sidebar-aktif);
    background: var(--mf-sidebar-hover);
}

.mf-sisi-menu a.aktif {
    color: var(--mf-sidebar-aktif);
    background: var(--mf-sidebar-hover);
    border-left-color: var(--mf-jenama);
    font-weight: 600;
}

.mf-sisi-menu svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

.mf-sisi-kira {
    margin-left: auto;
    background: #d97706;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
}

/* ── Bar atas ──────────────────────────────────────────────────────────── */

.mf-butang-menu,
.mf-suis-tema {
    background: transparent;
    border: 0;
    color: var(--mf-topbar-teks);
    padding: 0.45rem;
    border-radius: 0.375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.mf-butang-menu:hover,
.mf-suis-tema:hover,
.mf-butang-menu:focus,
.mf-suis-tema:focus {
    background: var(--mf-latar);
    color: var(--mf-jenama);
}

.mf-butang-menu svg,
.mf-suis-tema svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mf-butang-menu {
    display: none;
}

@media (max-width: 991.98px) {
    .mf-butang-menu {
        display: inline-flex;
    }
}

.mf-atas-tajuk {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

.mf-atas-kanan {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Hanya satu ikon dipaparkan — ikon menunjukkan tema yang akan DIPILIH jika
   ditekan, bukan tema semasa. */
.mf-ikon-gelap { display: none; }
[data-bs-theme="dark"] .mf-ikon-cerah { display: none; }
[data-bs-theme="dark"] .mf-ikon-gelap { display: block; }

.mf-pengguna {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
}

.mf-pengguna:hover {
    background: var(--mf-latar);
    color: inherit;
}

.mf-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mf-jenama);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mf-pengguna-nama {
    line-height: 1.2;
}

.mf-pengguna-nama strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.mf-pengguna-nama span {
    font-size: 0.72rem;
    color: var(--mf-teks-lembut);
}

@media (max-width: 575.98px) {
    .mf-pengguna-nama { display: none; }
    .mf-atas { padding: 0 0.75rem; }
    .mf-halaman { padding: 1rem 0.75rem 2rem; }
}

/* ── Kepala halaman ────────────────────────────────────────────────────── */

.mf-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Tajuk halaman berada pada bar atas yang melekat, jadi ia TIDAK diulang di
   sini. Blok ini hanya membawa keterangan halaman dan butang tindakan. */
.mf-kepala p {
    margin: 0;
    color: var(--mf-teks-lembut);
    font-size: 0.85rem;
}

/* Ucapan pada papan pemandu. Ia tidak mengulang tajuk bar atas ("Papan
   Pemuka"), jadi ia dikekalkan — tetapi sebagai <h2>, kerana <h1> halaman
   sudah berada pada bar atas dan satu halaman sepatutnya mempunyai satu
   sahaja. */
.mf-ucapan {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.mf-kepala-tindakan {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Tajuk seksyen di dalam halaman. Mesti lebih kecil daripada tajuk halaman
   pada bar atas (1rem) — kelas .h5 Bootstrap ialah 1.25rem dan menjadikan
   seksyen kelihatan lebih penting daripada halaman yang memuatkannya. */
.mf-tajuk-seksyen {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

/* Kepala kad: tajuk dan keterangan di dalam kad yang sama dengan jadualnya,
   supaya keduanya kelihatan sebagai satu unit dan bukan tajuk terapung di
   atas kotak yang tidak berkaitan. */
.mf-jadual-kepala {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--mf-sempadan);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mf-jadual-kepala h2 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.mf-jadual-kepala p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--mf-teks-lembut);
}

/* Borang tapis di dalam kepala kad tidak sepatutnya mengambil lebar penuh. */
.mf-jadual-kepala form {
    margin: 0;
}

/* Kotak carian dan penapis status, bersebelahan pada desktop dan bertindan
   pada telefon. Carian diberi ruang untuk berkembang kerana ia yang ditaip;
   penapis status ialah kotak pilihan yang lebarnya tetap. */
.mf-jadual-alat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.mf-jadual-alat .mf-carian {
    width: 16rem;
}

.mf-jadual-alat .form-select {
    width: auto;
}

@media (max-width: 767.98px) {
    /* Pada telefon kedua-duanya mengambil lebar penuh dan bertindan. Kotak
       carian separuh lebar bermakna teks yang ditaip menatal keluar dari
       pandangan, dan pengguna hilang jejak apa yang mereka cari. */
    .mf-jadual-alat {
        width: 100%;
        margin-left: 0;
    }

    .mf-jadual-alat .mf-carian,
    .mf-jadual-alat .form-select,
    .mf-jadual-alat form {
        width: 100%;
    }
}

/* ── Kad ───────────────────────────────────────────────────────────────── */

.mf-stat,
.mf-jadual,
.mf-borang {
    background: var(--mf-permukaan);
    border: 1px solid var(--mf-sempadan);
    border-radius: 0.375rem;
}

.mf-stat {
    padding: 1.1rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mf-stat-atas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mf-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--mf-teks-lembut);
    margin-bottom: 0.75rem;
}

.mf-stat-nilai {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.mf-stat-nota {
    font-size: 0.8rem;
    color: var(--mf-teks-lembut);
    margin-top: 0.35rem;
}

.mf-stat-kaki {
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: 0.82rem;
}

/* Jubin ikon di penjuru kanan kad statistik. */
.mf-jubin {
    width: 44px;
    height: 44px;
    border-radius: 0.375rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mf-jubin svg {
    width: 22px;
    height: 22px;
}

.mf-jubin-hijau { background: var(--mf-jenama-cair); color: var(--mf-jenama); }
.mf-jubin-biru   { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.mf-jubin-kuning { background: rgba(217, 119, 6, 0.14);  color: #d97706; }
.mf-jubin-merah  { background: rgba(220, 38, 38, 0.14);  color: #dc2626; }

.mf-stat-perhatian {
    border-color: var(--mf-amaran-sempadan);
}

.mf-stat-perhatian .mf-stat-nilai {
    color: var(--mf-amaran);
}

/* ── Jadual ────────────────────────────────────────────────────────────── */

.mf-jadual {
    overflow: hidden;
}

.mf-jadual table {
    margin-bottom: 0;
}

.mf-jadual thead th {
    background: var(--mf-jadual-kepala);
    border-bottom: 1px solid var(--mf-sempadan);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--mf-teks-label);
    white-space: nowrap;
}

/* Baris tajuk kumpulan dalam jadual formula. Menggantikan .bg-light Bootstrap,
   yang kekal cerah dalam tema gelap dan menghasilkan teks gelap di atas latar
   cerah di tengah-tengah jadual gelap. */
.mf-baris-kumpulan td {
    background: var(--mf-baris-kumpulan);
    color: var(--mf-teks-label);
}

.mf-jumlah td {
    background: var(--mf-jadual-kepala);
    font-weight: 600;
}

/* Nombor sejajar supaya digit boleh dibandingkan pantas menegak. */
.mf-nombor {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mf-kosong {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--mf-teks-lembut);
}

/* ── Borang ────────────────────────────────────────────────────────────── */

.mf-borang {
    padding: 1.5rem;
}

.mf-borang .form-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.mf-borang .form-text {
    font-size: 0.8rem;
}

.mf-seksyen {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mf-teks-label);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--mf-sempadan);
    margin: 1.75rem 0 1rem;
}

.mf-seksyen:first-child {
    margin-top: 0;
}

/* Medan input besar pada telefon — pemandu mengisi borang ini di stesen
   minyak, selalunya dengan satu tangan. */
@media (max-width: 576px) {
    .mf-borang .form-control,
    .mf-borang .form-select {
        font-size: 1rem;
        padding: 0.6rem 0.75rem;
    }
}

/* ── Penyata bulanan ───────────────────────────────────────────────────── */

.mf-penyata-baris {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mf-sempadan);
}

.mf-penyata-baris:last-child {
    border-bottom: 0;
}

.mf-penyata-baris .mf-label {
    color: var(--mf-teks-label);
}

.mf-penyata-baris .mf-nilai {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mf-penyata-jumlah {
    background: var(--mf-jenama-cair);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.mf-formula {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--mf-teks-label);
    background: var(--mf-formula-latar);
    border-left: 3px solid var(--mf-jenama);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    overflow-x: auto;
}

.mf-amaran {
    border-left: 3px solid var(--mf-amaran);
    background: var(--mf-amaran-latar);
    color: var(--mf-teks-label);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

/* ── Butang jenama ─────────────────────────────────────────────────────── */

.btn-jenama {
    background-color: var(--mf-jenama);
    border-color: var(--mf-jenama);
    color: #fff;
}

.btn-jenama:hover,
.btn-jenama:focus {
    background-color: var(--mf-jenama-gelap);
    border-color: var(--mf-jenama-gelap);
    color: #fff;
}

/* ── Halaman log masuk ─────────────────────────────────────────────────── */

.mf-log-masuk-jenama {
    text-align: center;
    margin-bottom: 1.5rem;
}

.mf-log-masuk-jenama .mf-logo {
    height: 72px;
    margin: 0 auto 0.75rem;
}

.mf-log-masuk-jenama h1 {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--mf-jenama);
    margin: 0;
}

.mf-log-masuk-jenama h1 strong {
    font-weight: 800;
}

.mf-log-masuk-jenama p {
    color: var(--mf-teks-lembut);
    margin: 0.35rem 0 0;
}

/* Varian logo mengikut tema, pada halaman yang latarnya bertukar. Dipilih oleh
   CSS dan bukan JavaScript supaya varian yang betul hadir pada lukisan
   pertama, tanpa kilatan logo yang salah warna. */
.mf-logo-gelap { display: none; }
[data-bs-theme="dark"] .mf-logo-cerah { display: none; }
[data-bs-theme="dark"] .mf-logo-gelap { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   PAPARAN TELEFON

   Kebanyakan pemandu Bahagian Pengangkutan sudah berumur, dan mereka merekod
   di tempat kejadian — di pam minyak, di pondok pengawal, di dalam kenderaan
   yang sudah berhenti — bukan di meja pejabat. Tiga keputusan mengikut daripada
   itu, dan setiap satunya menyimpang daripada paparan desktop dengan sengaja:

     1. Teks lebih besar dan sasaran sentuh lebih besar. Skrin desktop dibaca
        pada 60cm dalam pejabat bercahaya; telefon dibaca sambil berdiri di
        bawah matahari, selalunya tanpa cermin mata membaca.

     2. Jadual menjadi kad. Jadual yang menatal mendatar bermakna nombor
        odometer berada di luar skrin, dan pengguna perlu tahu ia boleh ditolak
        ke tepi sebelum ia dijumpai. Kad menunjukkan segalanya tanpa gerak isyarat
        yang perlu dipelajari.

     3. Navigasi turun ke bawah skrin. Menu hamburger di penjuru atas kiri ialah
        bahagian skrin yang paling sukar dicapai oleh ibu jari pada telefon
        besar, dan ia memerlukan dua ketikan untuk sampai ke mana-mana.

   Ambang 991.98px sepadan dengan ambang bar sisi yang sedia ada, supaya
   "telefon atau tablet" bermaksud perkara yang sama di seluruh fail ini.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Keutamaan saiz teks ───────────────────────────────────────────────── */

/*
 * Diletakkan pada <html> dan bukan pada <body>: hampir setiap ukuran dalam
 * fail ini dan dalam Bootstrap ditulis dalam rem, jadi menukar punca rem
 * menskalakan keseluruhan antara muka secara berkadar — teks, ruang, tinggi
 * butang, jejari bucu — dan bukan hanya perkataan, yang akan menghasilkan
 * tulisan besar yang tersepit dalam kotak bersaiz lama.
 *
 * Ini BUKAN zum pelayar. Zum turut membesarkan lebar susun atur dan memaksa
 * skrol mendatar; menskala punca rem mengekalkan lebar skrin dan membiarkan
 * susun atur mengalir semula. Pilihan pengguna juga kekal antara lawatan,
 * yang tetapan zum setiap tapak tidak sentiasa lakukan.
 */
html                            { font-size: 100%; }
html[data-mf-saiz="besar"]        { font-size: 112.5%; }
html[data-mf-saiz="sangat-besar"] { font-size: 125%; }

/* ── Suis saiz teks pada bar atas ──────────────────────────────────────── */

.mf-suis-saiz {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1em;
    min-width: 2.75rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--mf-sempadan);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--mf-topbar-teks);
    font-weight: 600;
    line-height: 1;
}

.mf-suis-saiz:hover { background: var(--mf-jenama-cair); }

.mf-suis-saiz .kecil { font-size: 0.75em; }
.mf-suis-saiz .besar { font-size: 1.05em; }

/* Titik penunjuk: menunjukkan tetapan mana yang sedang aktif tanpa perlu
   membaca apa-apa teks. */
.mf-suis-saiz-titik {
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    margin-left: 0.15rem;
    border-radius: 50%;
    background: var(--mf-jenama);
    align-self: center;
    opacity: 0;
}

html[data-mf-saiz="besar"] .mf-suis-saiz-titik,
html[data-mf-saiz="sangat-besar"] .mf-suis-saiz-titik { opacity: 1; }

/* ── Carian segera ─────────────────────────────────────────────────────── */

/*
 * Menapis baris yang SUDAH berada pada halaman dan tidak menghantar apa-apa ke
 * pelayan. Data mudah alih di stesen minyak selalunya perlahan, dan menunggu
 * halaman dimuat semula bagi setiap huruf yang ditaip menjadikan carian tidak
 * berguna di tempat ia paling diperlukan.
 */
.mf-carian {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.mf-carian svg {
    position: absolute;
    left: 0.85rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--mf-teks-lembut);
    pointer-events: none;
}

.mf-carian input {
    padding-left: 2.6rem;
    padding-right: 2.6rem;
}

.mf-carian-kosong {
    position: absolute;
    right: 0.4rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mf-teks-lembut);
    font-size: 1.25rem;
    line-height: 1;
}

.mf-carian.ada-teks .mf-carian-kosong { display: inline-flex; }
.mf-carian-kosong:hover { background: var(--mf-baris-kumpulan); }

/* Dipaparkan bila carian tidak menemui apa-apa. Berasingan daripada
   .mf-kosong, yang bermaksud "tiada rekod langsung" — dua keadaan yang
   berbeza dan memerlukan tindakan yang berbeza daripada pengguna. */
.mf-carian-tiada {
    display: none;
    padding: 2rem 1.1rem;
    text-align: center;
    color: var(--mf-teks-lembut);
}

.mf-carian-tiada.papar { display: block; }

/* ── Bar navigasi pantas ───────────────────────────────────────────────── */

/*
 * Empat destinasi yang paling kerap digunakan, satu ketikan jauhnya.
 *
 * Melekat di bawah bar atas dan BUKAN di kaki skrin. Kedudukan kaki dicuba
 * dahulu atas alasan jangkauan ibu jari, tetapi ujian pada telefon sebenar
 * menunjukkan ia lebih sukar dicapai di sana — bar isyarat sistem berada tepat
 * di bawahnya, dan ketikan di tepi kawasan itu kerap tersasar atau mencetuskan
 * gerak isyarat sistem.
 *
 * Dua bar melekat memakan ruang menegak, jadi bar ini lebih pendek daripada
 * versi kaki (3rem berbanding 3.5rem) dan hamburger bar atas disembunyikan,
 * kerana butang "Menu" di sini melakukan kerja yang sama.
 */
.mf-nav-pantas { display: none; }

@media (max-width: 991.98px) {
    .mf-nav-pantas {
        position: sticky;

        /* Tepat di bawah bar atas, yang melekat pada 0. Kedua-duanya bertindan
           dan bukan bertindih. */
        top: var(--mf-tinggi-atas);
        z-index: 1029;
        display: flex;
        background: var(--mf-permukaan);
        border-bottom: 1px solid var(--mf-sempadan);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mf-nav-pantas a,
    .mf-nav-pantas button {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;

        /* 3rem menskala bersama keutamaan saiz teks; pada saiz lalai ia 48px,
           iaitu sasaran sentuh yang disyorkan Material dan melepasi minimum
           WCAG 2.5.5 (44px). */
        min-height: 3rem;
        padding: 0.35rem 0.15rem;
        border: 0;
        background: transparent;
        color: var(--mf-teks-lembut);
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    .mf-nav-pantas svg {
        width: 1.35rem;
        height: 1.35rem;
        flex: none;
    }

    .mf-nav-pantas .aktif {
        color: var(--mf-jenama);
    }

    /* Petunjuk halaman semasa yang tidak bergantung pada warna sahaja —
       pemandu yang buta warna tetap nampak yang mana satu terpilih. Garis di
       BAWAH item, kerana bar kini berada di atas kandungan yang dirujuknya. */
    .mf-nav-pantas .aktif::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--mf-jenama);
    }

    /* Lencana kiraan pada item navigasi. */
    .mf-nav-pantas-kira {
        position: absolute;
        top: 0.15rem;
        left: 50%;
        margin-left: 0.3rem;
        min-width: 1.15rem;
        height: 1.15rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: #b45309;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1.15rem;
        text-align: center;
    }

    /* Hamburger bar atas disembunyikan: butang "Menu" bar ini membuka bar sisi
       yang sama, dan dua butang yang melakukan perkara yang sama pada satu
       skrin hanya menimbulkan persoalan mana satu yang betul. Ambang media
       kedua-duanya sama, jadi tiada lebar yang kehilangan kedua-duanya. */
    .mf-butang-menu {
        display: none !important;
    }
}

/* ── Pelarasan telefon ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* 1rem dan bukan 0.9rem seperti desktop. Perbezaan 14.4px lawan 16px
       kelihatan kecil pada tangkapan skrin dan sangat besar pada skrin
       telefon yang dipegang sebelah tangan di luar bangunan. */
    body { font-size: 1rem; }

    .mf-halaman {
        padding: 1.25rem 1rem 2.5rem;
    }

    /* Sasaran sentuh. 2.75rem = 44px pada saiz lalai, iaitu minimum WCAG 2.5.5;
       butang utama diberi lebih. `btn-sm` sengaja dinaikkan sama besar — saiz
       "kecil" masuk akal pada tetikus, tidak pada ibu jari. */
    .mf-halaman .btn,
    .mf-halaman .btn-sm {
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }

    .mf-halaman .btn-jenama {
        min-height: 3rem;
        font-size: 1rem;
    }

    /* Butang tindakan utama mengambil lebar penuh. Butang selebar skrin lebih
       mudah dikenakan daripada butang yang perlu disasarkan. */
    .mf-kepala > div:last-child .btn,
    .mf-tindakan-utama .btn {
        width: 100%;
    }

    .mf-kepala > div:last-child,
    .mf-tindakan-utama {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
    }

    /* Medan borang. Saiz fon MESTI sekurang-kurangnya 16px: Safari iOS
       mengezum masuk secara automatik pada medan yang lebih kecil daripada itu
       apabila difokus, dan halaman kekal terzum selepas pengguna selesai
       menaip. */
    .mf-borang .form-control,
    .mf-borang .form-select,
    .mf-carian input {
        min-height: 3rem;
        font-size: 1rem;
        padding: 0.65rem 0.85rem;
    }

    .mf-borang textarea.form-control { min-height: 5rem; }

    .mf-borang .form-label {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }

    .mf-borang .form-text { font-size: 0.85rem; }

    .mf-seksyen { font-size: 0.95rem; }

    .mf-kepala p { font-size: 0.95rem; }
    .mf-ucapan { font-size: 1.35rem; }
    .mf-jadual-kepala h2 { font-size: 1rem; }
    .mf-jadual-kepala p { font-size: 0.9rem; }

    /* Lencana status pada telefon: sedikit lebih besar supaya perkataan
       "Menunggu Semakan" boleh dibaca sepintas lalu. */
    .badge { font-size: 0.8rem; padding: 0.4em 0.65em; }
}

/* ── Jadual menjadi kad pada telefon ───────────────────────────────────── */

/*
 * Dihidupkan dengan menambah kelas `mf-kad-telefon` pada <table>, dan setiap
 * <td> membawa `data-label` dengan perkataan yang sama seperti <th>-nya.
 *
 * Opt-in dan bukan automatik: sesetengah jadual pentadbiran benar-benar
 * berbentuk jadual — penyata bulanan dibaca dengan membandingkan lajur yang
 * sama merentasi belasan kenderaan — dan memecahkannya menjadi kad memusnahkan
 * perbandingan itu. Yang bertukar ialah skrin yang pemandu guna.
 */
@media (max-width: 767.98px) {
    table.mf-kad-telefon thead { display: none; }

    table.mf-kad-telefon,
    table.mf-kad-telefon tbody,
    table.mf-kad-telefon tr,
    table.mf-kad-telefon td {
        display: block;
        width: 100%;
    }

    table.mf-kad-telefon tr {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--mf-sempadan);
    }

    table.mf-kad-telefon tr:last-child { border-bottom: 0; }

    table.mf-kad-telefon td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        border: 0;
        text-align: right;
    }

    table.mf-kad-telefon td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--mf-teks-lembut);
        font-size: 0.85rem;
        font-weight: 600;
        text-align: left;
    }

    /* Sel tanpa label — biasanya butang tindakan — mengambil lebar penuh dan
       berada di bawah, tempat ibu jari sampai. */
    table.mf-kad-telefon td:not([data-label]) {
        display: block;
        margin-top: 0.6rem;
        text-align: left;
    }

    table.mf-kad-telefon td:not([data-label]) .btn { width: 100%; }

    table.mf-kad-telefon td:not([data-label]) form {
        display: block !important;
        margin-top: 0.5rem;
    }

    /* Sel utama: dijadikan tajuk kad dan bukan sepasang label-nilai. */
    table.mf-kad-telefon td[data-utama] {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: left;
    }

    table.mf-kad-telefon td[data-utama]::before { content: none; }

    /* Nombor kekal dijajarkan kanan dan menggunakan angka lebar tetap supaya
       bacaan odometer boleh dibandingkan sepintas lalu antara kad. */
    table.mf-kad-telefon td.mf-nombor {
        font-variant-numeric: tabular-nums;
        font-size: 1.05rem;
    }

    /* Bekas .table-responsive tidak lagi perlu menatal apabila jadual di
       dalamnya sudah menjadi kad; skrol mendatar yang tinggal hanya
       menghasilkan pergerakan yang mengelirukan. */
    .table-responsive:has(> table.mf-kad-telefon) { overflow-x: visible; }
}

/* Pengguna yang meminta kurang pergerakan tidak sepatutnya menerima peralihan
   bar sisi yang meluncur. */
@media (prefers-reduced-motion: reduce) {
    .mf-sisi { transition: none; }
}

/* ── Kamera odometer ───────────────────────────────────────────────────── */

/*
 * Butang kamera berada di bawah medan nombor, bukan menggantikannya. Menaip
 * kekal sebagai jalan utama; ini pembantu yang boleh diabaikan sepenuhnya.
 */
.mf-odo {
    margin-top: 0.5rem;
}

/* Dua butang, dibenarkan membalut. Pada telefon sempit ia bertindan menjadi
   dua baris penuh, yang lebih baik daripada dua sasaran sempit bersebelahan
   untuk ibu jari. */
.mf-odo-butang {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mf-odo-butang .btn {
    flex: 1 1 12rem;
}

.mf-odo-buka svg,
.mf-odo-pilih svg {
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.35rem;
    vertical-align: -0.2em;
}

.mf-odo-status {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--mf-teks-lembut);
}

.mf-odo-status.ralat { color: var(--bs-danger); }

/* --- Dialog --- */

.mf-odo-dialog {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
}

.mf-odo-dialog[hidden] { display: none; }

/* Menghalang halaman di belakang daripada menatal semasa dialog terbuka —
   menatal latar belakang semasa menyeret kotak potong ialah punca kekeliruan
   yang mudah dielakkan. */
body.mf-odo-buka-dialog { overflow: hidden; }

.mf-odo-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;
    max-height: 100%;
    background: var(--mf-permukaan);
    border-radius: 0.5rem;
    overflow: hidden;
}

.mf-odo-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--mf-sempadan);
}

.mf-odo-tutup {
    border: 0;
    background: transparent;
    color: var(--mf-teks-lembut);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 0.5rem;
    min-height: 2.75rem;
}

.mf-odo-isi {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Rangka gambar: hitam supaya tepi gambar jelas walaupun gambar itu gelap. */
.mf-odo-rangka {
    position: relative;
    background: #000;
    border-radius: 0.375rem;
    overflow: hidden;
    line-height: 0;
}

.mf-odo-gambar {
    width: 100%;
    height: auto;
    display: block;

    /* Had tinggi supaya gambar menegak tidak menolak butang keluar skrin. */
    max-height: 45vh;
    object-fit: contain;
}

/*
 * Kotak potong. Bahagian luar digelapkan melalui box-shadow yang sangat besar
 * dan bukan empat elemen bertindih — satu elemen, dan lubangnya sentiasa
 * sepadan dengan kotak tanpa penyelarasan.
 */
.mf-odo-kotak {
    position: absolute;
    border: 2px solid #ffd43b;
    border-radius: 2px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

/* Bucu penanda: memberitahu ia boleh digerakkan tanpa perlu teks arahan. */
.mf-odo-kotak::after {
    content: "";
    position: absolute;
    inset: 0.25rem;
    border: 1px dashed rgba(255, 255, 255, 0.5);
}

.mf-odo-arahan {
    margin: 0.75rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--mf-teks-lembut);
}

.mf-odo-saiz {
    display: flex;
    gap: 0.5rem;
}

.mf-odo-saiz .btn { flex: 1 1 0; }

/* --- Kemajuan muat turun enjin --- */

/*
 * Enjin OCR ~5 MB pada muatan pertama. Tanpa bar ini telefon kelihatan
 * tergantung, dan pengguna menekan butang berulang kali — yang menjadikan
 * keadaan lebih teruk.
 */
.mf-odo-kemajuan {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--mf-teks-lembut);
}

.mf-odo-kemajuan[hidden] { display: none; }

.mf-odo-bar {
    height: 0.5rem;
    width: 0;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: var(--mf-jenama);
    transition: width 0.2s ease;
}

/* --- Hasil bacaan --- */

.mf-odo-hasil {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--mf-sempadan);
    border-radius: 0.375rem;
    background: var(--mf-jenama-cair);
    text-align: center;
}

.mf-odo-hasil[hidden] { display: none; }

/*
 * Potongan gambar yang OCR baca, dipaparkan terus di atas medan edit.
 *
 * `sticky` bukan hiasan. Medan itu berada di bawah gambar dalam kandungan yang
 * menatal, dan sebaik papan kekunci telefon terbuka, pelayar menatal medan itu
 * ke dalam pandangan — menolak gambar keluar dari skrin, iaitu tepat pada saat
 * pemandu memerlukannya. Melekatkannya pada atas kawasan menatal bermakna
 * digit yang sedang dibetulkan dan digit pada panel sentiasa kelihatan serentak.
 *
 * Latar legap diperlukan: tanpa itu, teks yang menatal di belakangnya kelihatan
 * menembusi gambar.
 */
.mf-odo-semakan {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: 7rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    object-fit: contain;
    background: var(--mf-jenama-cair);
    border-bottom: 1px solid var(--mf-sempadan);
}

.mf-odo-semakan[hidden] { display: none; }

.mf-odo-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mf-teks-lembut);
}

/*
 * Digit dijarakkan dan besar. Ia wujud untuk disemak satu per satu terhadap
 * panel sebenar — nombor enam digit yang dicetak rapat sukar disemak
 * sepintas lalu, dan menyemak inilah keseluruhan tujuan langkah ini.
 *
 * Ia medan input dan bukan teks: digit yang tersalah baca dibetulkan di sini,
 * di sebelah gambar yang masih terpapar, dan bukan dengan menutup dialog dan
 * menaip semula keenam-enam digit daripada ingatan.
 *
 * Jarak antara digit datang daripada letter-spacing dan bukan daripada ruang
 * dalam nilai — ruang sebenar akan menjadi sebahagian daripada apa yang
 * disunting dan disimpan.
 */
.mf-odo-nombor {
    display: block;
    width: 100%;
    margin: 0.35rem 0;
    padding: 0.3rem 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: inherit;
    background: var(--mf-latar);
    border: 2px solid var(--mf-sempadan);
    border-radius: 0.5rem;
}

.mf-odo-nombor:focus {
    outline: none;
    border-color: var(--mf-jenama);
    box-shadow: 0 0 0 0.2rem var(--mf-jenama-cair);
}

.mf-odo-nota {
    font-size: 0.85rem;
    color: var(--mf-teks-lembut);
}

.mf-odo-nota .amaran { color: var(--mf-amaran); font-weight: 600; }
.mf-odo-nota .ralat  { color: var(--bs-danger); font-weight: 600; }

/* Dua model OCR membaca nombor yang sama. Ini satu-satunya nota hijau dalam
   dialog: ia bermakna dua enjin bebas bersetuju, iaitu isyarat yang jauh lebih
   kuat daripada peratus keyakinan mana-mana satu daripadanya. */
.mf-odo-nota .sah { color: var(--bs-success); font-weight: 600; }

.mf-odo-kaki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--mf-sempadan);
}

.mf-odo-kaki .btn { flex: 1 1 8rem; }
.mf-odo-kaki .btn[hidden] { display: none; }

@media (max-width: 991.98px) {
    /* Sasaran sentuh penuh dalam dialog juga — ia digunakan berdiri di tepi
       kenderaan, bukan di meja. */
    .mf-odo-kaki .btn,
    .mf-odo-saiz .btn {
        min-height: 3rem;
        font-size: 1rem;
    }

    .mf-odo-nombor { font-size: 2.4rem; }
}

/* Pautan gambar dalam senarai: ikon kecil di sebelah bacaan odometer, hadir
   hanya apabila gambar benar-benar wujud. Ketiadaannya bermakna bacaan itu
   ditaip tanpa bukti sokongan — maklumat yang berguna kepada admin. */
.mf-foto-pautan {
    margin-left: 0.3rem;
    text-decoration: none;
    font-size: 0.95em;
}

/* Gambar yang sudah dilampirkan, ditunjukkan pada borang suntingan. */
.mf-odo-sedia {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.mf-odo-lekap {
    width: 4.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 1px solid var(--mf-sempadan);
    border-radius: 0.25rem;
    display: block;
}

.mf-odo-sedia-nota {
    font-size: 0.8rem;
    color: var(--mf-teks-lembut);
}

/* ── Cetakan laporan ───────────────────────────────────────────────────── */
/* Laporan dicetak untuk fail Bahagian Pengangkutan. Warna tema gelap
   menghasilkan blok hitam pekat pada kertas, jadi cetakan sentiasa
   menggunakan latar putih dengan teks hitam tanpa mengira tema skrin. */

@media print {
    :root,
    :root[data-bs-theme="dark"] {
        --mf-latar: #fff;
        --mf-permukaan: #fff;
        --mf-sempadan: #999;
        --mf-teks-lembut: #333;
        --mf-teks-label: #000;
        --mf-jadual-kepala: #f0f0f0;
        --mf-baris-kumpulan: #f0f0f0;
        --mf-formula-latar: #f7f7f7;
        --mf-amaran-latar: #f7f7f7;
        --mf-jenama-cair: #f0f0f0;
    }

    .mf-sisi,
    .mf-atas,
    .mf-nav-pantas,
    .mf-tudung,
    .mf-carian,
    .mf-tanpa-cetak,
    .btn {
        display: none !important;
    }

    .mf-kandungan {
        margin-left: 0;
    }

    body {
        background: #fff;
        color: #000;
    }

    .mf-jadual,
    .mf-borang {
        border: 1px solid #999;
    }
}