html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f3f4f6;
}

a, .btn-link {
    color: #1d4ed8;
}

/* ============================================================
   TOMBOL — GAYA BAKU SELURUH APLIKASI

   Bentuknya diambil dari tombol aksi pada halaman Tugas Saya, yang memang
   dirancang untuk dipakai driver sambil berdiri di pinggir jalan: tinggi,
   sudut membulat, dan warna bergradasi yang terlihat jelas di bawah matahari.

   Ditulis sebagai penimpaan kelas Bootstrap, BUKAN sebagai kelas baru.
   Alasannya: seluruh halaman sudah memakai .btn-primary dan kawan-kawannya.
   Membuat kelas baru berarti menyunting puluhan berkas, dan satu tombol yang
   terlewat akan tetap tampil dengan gaya lama tanpa ada yang menyadarinya.
   Dengan cara ini, tombol yang belum ditulis pun otomatis ikut seragam.

   Berkas ini dimuat SETELAH bootstrap.min.css, sehingga aturan di sini menang
   tanpa perlu !important. CSS milik komponen dimuat setelahnya lagi, jadi
   penyesuaian setempat — tombol ikon pada baris tabel, tombol simpan yang
   melayang di form invoice — tetap bisa menimpanya.
   ============================================================ */

/*
    Warna tombol ditaruh di :root, bukan di dalam .btn. Halaman Tugas Saya
    menyusun tombolnya sendiri karena bentuknya khusus — melebar penuh dengan
    panah di ujung kanan — tetapi warnanya harus tetap sama persis. Token di
    sini yang memastikannya: mengubah warna tombol utama cukup di satu baris,
    dan tidak mungkin ada dua biru navy yang sedikit berbeda.
*/
:root {
    --ams-navy: linear-gradient(135deg, #1b4285 0%, #0b1f3f 100%);
    --ams-navy-hover: linear-gradient(135deg, #1d4a94 0%, #0d2549 100%);
    --ams-navy-shadow: 0 .375rem .875rem rgba(18, 48, 94, .28);

    --ams-amber: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    --ams-amber-shadow: 0 .375rem .875rem rgba(180, 83, 9, .3);

    --ams-green: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --ams-green-hover: linear-gradient(135deg, #18b352 0%, #166135 100%);
    --ams-green-shadow: 0 .375rem .875rem rgba(21, 128, 61, .28);

    --ams-red: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    --ams-red-hover: linear-gradient(135deg, #ea2f2f 0%, #a92020 100%);
    --ams-red-shadow: 0 .375rem .875rem rgba(153, 27, 27, .26);

    --ams-muted-bg: #eef2f8;
    --ams-muted-ink: #33405e;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Jarak antara ikon dan tulisan. Hampir semua tombol di aplikasi ini
       berisi <i> diikuti teks; tanpa gap keduanya menempel. */
    gap: .5rem;

    /* 44px adalah ukuran sasaran sentuh terkecil yang masih nyaman bagi jari.
       min-height, bukan height, supaya tombol yang tulisannya membungkus ke
       dua baris ikut memanjang alih-alih terpotong. */
    min-height: 2.75rem;
    padding: .5rem 1.25rem;

    border: 1px solid transparent;
    border-radius: .75rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:disabled,
.btn.disabled {
    opacity: .6;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------- Tombol utama ---------- */

.btn-primary {
    color: #fff;
    background: var(--ams-navy);
    border-color: transparent;
    box-shadow: var(--ams-navy-shadow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff;
    background: var(--ams-navy-hover);
    border-color: transparent;
}

.btn-success {
    color: #fff;
    background: var(--ams-green);
    border-color: transparent;
    box-shadow: var(--ams-green-shadow);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: #fff;
    background: var(--ams-green-hover);
    border-color: transparent;
}

.btn-danger {
    color: #fff;
    background: var(--ams-red);
    border-color: transparent;
    box-shadow: var(--ams-red-shadow);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #fff;
    background: var(--ams-red-hover);
    border-color: transparent;
}

/* Dipakai untuk hal yang mendesak, seperti tugas yang belum dijawab driver. */
.btn-warning {
    color: #fff;
    background: var(--ams-amber);
    border-color: transparent;
    box-shadow: var(--ams-amber-shadow);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: #fff;
    background: linear-gradient(135deg, #fbaa1c 0%, #c25c0a 100%);
    border-color: transparent;
}

/* ---------- Tombol pendamping ----------

   Rata, tanpa bayangan, tanpa gradasi. Bedanya dengan tombol utama harus
   terlihat sekilas: pada satu layar hanya boleh ada satu tindakan yang
   tampak paling menonjol, selebihnya mendampingi. Karena itu "Batal" dan
   "Kembali" sengaja tidak diberi warna penuh.
*/

.btn-secondary,
.btn-outline-secondary {
    color: var(--ams-muted-ink);
    background: var(--ams-muted-bg);
    border-color: transparent;
    box-shadow: none;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:focus,
.btn-secondary:active,
.btn-outline-secondary:active {
    color: #12305e;
    background: #e2e8f4;
    border-color: transparent;
}

.btn-outline-primary {
    color: #1b4285;
    background: #e7eefb;
    border-color: transparent;
    box-shadow: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #12305e;
    background: #d8e3f8;
    border-color: transparent;
}

/* Aksi merusak dibiarkan tenang sampai disentuh, supaya tidak menarik
   perhatian lebih dulu daripada aksi yang memang sering dipakai. */
.btn-outline-danger {
    color: #b42318;
    background: #fef3f2;
    border-color: transparent;
    box-shadow: none;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: #fff;
    background: #b42318;
    border-color: transparent;
}

/* Kuning tidak pernah punya aturannya sendiri, dan itu terlihat: .btn di atas
   memasang `border: 1px solid transparent` untuk SEMUA tombol supaya kotaknya
   sama besar, sehingga varian yang tidak diberi warna tepi berakhir sebagai
   tulisan kuning yang mengambang tanpa bentuk. Di layar telepon, tempat tombol
   ini melebar sampai setengah baris, batasnya hilang sama sekali.

   Berbeda dari saudara-saudaranya, yang ini diberi tepi yang benar-benar
   terlihat - bukan transparan. Alasannya ada di papan jadwal: tombol keep kecil
   di dalam sel memakai tepi kuning yang sama, dan dua kendali yang mengerjakan
   hal yang sama harus terlihat sama. */
.btn-outline-warning {
    color: #7a5c05;
    background: #fdf6e3;
    border-color: #e3cd8a;
    box-shadow: none;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: #fff;
    background: #8a6a09;
    border-color: #8a6a09;
}

/* ---------- Ukuran kecil ---------- */

.btn-sm {
    min-height: 2.25rem;
    padding: .3125rem .75rem;
    border-radius: .5rem;
    font-size: .8125rem;
}

/* ---------- Sorotan fokus ----------

   Diperlukan agar tombol tetap bisa ditelusuri dengan papan ketik. Memakai
   :focus-visible, bukan :focus, supaya cincinnya tidak muncul saat tombol
   ditekan dengan tetikus atau jari — di sana ia hanya terlihat seperti cacat.
*/

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .1875rem rgba(37, 99, 235, .35);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/*
    Tombol dan kolom isian diperbesar lagi di layar HP (aturan 6). Ukuran yang
    nyaman ditunjuk tetikus belum tentu nyaman ditekan ibu jari sambil berjalan.
*/
@media (max-width: 767.98px) {

    .btn {
        min-height: 3rem;
        border-radius: .75rem;
        font-size: .9375rem;
    }

    .btn-sm {
        min-height: 2.5rem;
        font-size: .875rem;
    }

    .form-control,
    .form-select {
        min-height: 2.875rem;
        /* 16px mencegah iOS otomatis memperbesar tampilan saat kolom disentuh. */
        font-size: 16px;
    }

    .table-responsive {
        font-size: 0.9rem;
    }
}

/* Kartu module pada Dashboard. */
.module-card {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.module-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background-color: #e0e7ff;
    color: #1d4ed8;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Terjadi kesalahan pada aplikasi."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ==========================================================================
   Isi sel tabel
   ==========================================================================

   Kelas bantu untuk isi <td>. Ditaruh global, bukan di CSS masing-masing
   halaman, karena persoalannya sama di semua daftar: teks yang panjangnya
   tidak terduga harus dipotong pada lebar kolomnya, bukan melebarkan kolom.

   Bentuk pil ikon+teks TIDAK ada di sini melainkan di komponen DataChip.
   Yang di sini hanya yang tidak layak jadi komponen sendiri.
*/

/*
    Memotong teks pada lebar sel dengan elipsis.

    Perlu display:block karena <td> bukan flex container, sehingga span inline
    biasa tidak pernah mendapat lebar untuk dipotong — ia justru mendorong
    kolomnya melebar, persis kebalikan dari yang diinginkan.

    Selalu pasangkan dengan title= berisi teks lengkapnya. Isi yang terpotong
    tanpa cara melihat versi utuhnya bukan penghematan ruang, melainkan
    kehilangan informasi.
*/
.cell-clip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Baris waktu: ikon jam kecil, lalu tanggal yang tidak boleh terpotong. */
.cell-time {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    font-weight: 500;
}

.cell-time > .bi {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #667085;
}

/* Baris keterangan di bawah nilai utama: alamat, kode, nomor telepon. */
.cell-sub {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.1875rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: #667085;
}

.cell-sub > .bi {
    flex-shrink: 0;
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* Angka di dalam tabel. Tabular figures membuat digit sejajar antar baris,
   sehingga ribuan bisa dibandingkan tanpa membacanya satu per satu. */
.cell-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   PENYEGARAN TAMPILAN MENYELURUH

   Ditulis sebagai lapisan di atas Bootstrap, bukan sebagai penggantinya.
   Alasannya bukan kemalasan: aplikasi ini punya puluhan halaman yang sudah
   jadi, dan menyentuhnya satu per satu berarti puluhan kesempatan merusak
   halaman yang sudah bekerja. Yang diubah di sini hanya lapisan permukaannya —
   warna, jarak, sudut, bayangan — sehingga seluruh halaman lama ikut terangkat
   tanpa satu pun barisnya disunting.

   Prinsip warnanya satu: TINTA GELAP DI ATAS LATAR MUDA. Tulisan putih hanya
   dipakai di atas warna pekat yang kontrasnya memang cukup — tombol utama,
   tombol bahaya. Label berwarna dengan tulisan putih di atas kuning atau abu
   muda adalah sumber keluhan yang paling sering, dan di sini diperbaiki sekali
   untuk semua halaman.
   ============================================================ */

:root {
    /* ---- Permukaan dan garis ---- */
    --ams-bg: #f4f6fb;
    --ams-surface: #ffffff;
    --ams-surface-sunk: #f7f9fc;
    --ams-line: #e2e7f0;
    --ams-line-strong: #cdd7e6;

    /* ---- Tinta ----
       Abu di sini dibiaskan sedikit ke biru, mengikuti navy merek. Abu netral
       murni terlihat seperti warna bawaan yang tidak dipilih siapa pun. */
    --ams-ink: #101a33;
    --ams-ink-soft: #46536e;
    --ams-ink-faint: #7c879b;

    /* ---- Warna keadaan, sebagai pasangan latar + tinta ---- */
    --ams-ok-bg: #dcf6e6;
    --ams-ok-line: #a7e3c3;
    --ams-ok-ink: #10603b;

    --ams-info-bg: #e2eafc;
    --ams-info-line: #b6c9f2;
    --ams-info-ink: #1c3d78;

    --ams-warn-bg: #fdf0d6;
    --ams-warn-line: #f0d091;
    --ams-warn-ink: #7c4a03;

    --ams-bad-bg: #fbe4e4;
    --ams-bad-line: #e7bcbc;
    --ams-bad-ink: #8a1f1f;

    --ams-mute-bg: #e8ecf3;
    --ams-mute-line: #cdd5e2;
    --ams-mute-ink: #3b4661;

    /* ---- Bentuk ---- */
    --ams-radius: .75rem;
    --ams-radius-sm: .55rem;
    --ams-shadow: 0 .35rem 1rem rgba(18, 48, 94, .07);
    --ams-shadow-lift: 0 .6rem 1.5rem rgba(18, 48, 94, .12);
}

body {
    background: var(--ams-bg);
    color: var(--ams-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- Kartu ----
   border-radius dan bayangan saja. Lebar garis tepi sengaja tidak disetel,
   supaya utility .border-0 yang dipakai halaman-halaman lama tetap menang. */
.card {
    border-color: var(--ams-line);
    border-radius: var(--ams-radius);
    box-shadow: var(--ams-shadow);
}

.card.shadow-sm {
    box-shadow: var(--ams-shadow) !important;
}

/* ---- Isian ----
   Tinggi 2.75rem menyamai tombol. Kolom isian yang lebih pendek daripada
   tombol di sebelahnya membuat satu baris form terlihat miring. */
.form-control,
.form-select {
    min-height: 2.75rem;
    border-color: var(--ams-line-strong);
    border-radius: var(--ams-radius-sm);
    color: var(--ams-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: #b3c1d8;
}

.form-control:focus,
.form-select:focus {
    border-color: #4f7fd4;
    box-shadow: 0 0 0 .1875rem rgba(37, 99, 235, .18);
}

.form-control::placeholder {
    color: #9aa5b8;
}

.form-label {
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ams-ink-soft);
}

.form-text {
    font-size: .78rem;
    color: var(--ams-ink-faint);
}

/* ---- Label keadaan ----
   Seluruh varian text-bg-* dijadikan latar muda bertinta gelap. Bawaan
   Bootstrap menulisnya putih di atas warna penuh, dan hasilnya pada kuning
   maupun abu muda nyaris tidak terbaca. */
.badge {
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.badge.text-bg-success {
    background: var(--ams-ok-bg) !important;
    border-color: var(--ams-ok-line);
    color: var(--ams-ok-ink) !important;
}

.badge.text-bg-primary,
.badge.text-bg-info {
    background: var(--ams-info-bg) !important;
    border-color: var(--ams-info-line);
    color: var(--ams-info-ink) !important;
}

.badge.text-bg-warning {
    background: var(--ams-warn-bg) !important;
    border-color: var(--ams-warn-line);
    color: var(--ams-warn-ink) !important;
}

.badge.text-bg-danger {
    background: var(--ams-bad-bg) !important;
    border-color: var(--ams-bad-line);
    color: var(--ams-bad-ink) !important;
}

.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark {
    background: var(--ams-mute-bg) !important;
    border-color: var(--ams-mute-line);
    color: var(--ams-mute-ink) !important;
}

/* ---- Pemberitahuan ---- */
.alert {
    border-radius: var(--ams-radius-sm);
    border-width: 1px;
    font-size: .88rem;
}

.alert-success { background: var(--ams-ok-bg);   border-color: var(--ams-ok-line);   color: var(--ams-ok-ink); }
.alert-info    { background: var(--ams-info-bg); border-color: var(--ams-info-line); color: var(--ams-info-ink); }
.alert-warning { background: var(--ams-warn-bg); border-color: var(--ams-warn-line); color: var(--ams-warn-ink); }
.alert-danger  { background: var(--ams-bad-bg);  border-color: var(--ams-bad-line);  color: var(--ams-bad-ink); }

/* ---- Tabel ----
   Kepala tabel dibuat menempel saat digulir. Tabel panjang yang kehilangan
   nama kolomnya di tengah gulungan memaksa orang menggulir balik ke atas hanya
   untuk mengingat kolom keempat itu apa. */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: var(--ams-ink);
}

.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ams-surface-sunk);
    border-bottom: 1px solid var(--ams-line);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ams-ink-faint);
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid #eef1f6;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

@media (hover: hover) {
    .table > tbody > tr:hover > td {
        background: #f7f9fd;
    }
}

/* Angka dalam kolom disejajarkan lebarnya. Kolom rupiah yang lebarnya
   berbeda-beda per baris tidak bisa dibandingkan sekilas. */
.table td,
.table th {
    font-variant-numeric: tabular-nums;
}

/* ---- Judul halaman ---- */
h1, h2, h3, h4, h5, h6 {
    color: var(--ams-ink);
    text-wrap: balance;
}


/* ============================================================
   TOKEN PAPAN JADWAL ARMADA

   Ditaruh di sini, bukan di berkas berlingkup milik halamannya, karena CSS
   berlingkup menambahkan penanda lingkup pada selektor terakhir - ":root" di
   sana akan menjadi ":root[b-xxxx]" dan tidak pernah cocok dengan elemen html.
   Tokennya akan mati diam-diam, dan halamannya kehilangan seluruh warna serta
   ukuran tanpa satu pun galat yang menandainya.
   ============================================================ */
:root {
    /* Tinggi sentuh. 2.75rem = 44px, ukuran terkecil yang masih nyaman ditekan
       ibu jari; 2.25rem untuk kendali sekunder di dalam sel yang padat. */
    --fs-touch: 2.75rem;
    --fs-touch-sm: 2.25rem;

    /* Lengkung: permukaan, kendali, pil. */
    --fs-r-surface: .85rem;
    --fs-r-control: .55rem;
    --fs-r-pill: 2rem;

    /* Bayangan: satu untuk permukaan diam, satu untuk yang mengambang. */
    --fs-shadow: 0 .2rem .7rem rgba(16, 26, 51, .06);
    --fs-shadow-float: 0 .5rem 1.1rem rgba(16, 26, 51, .12);

    --fs-line: #e4e9f2;
    --fs-line-soft: #eef1f6;
    --fs-ink: #101a33;
    --fs-ink-soft: #5b6478;
    --fs-ink-mute: #8a93a5;

    --fs-free: #0f7a4a;
    --fs-free-bg: #e8f5ee;
    --fs-rental: #1c3d78;
    --fs-rental-bg: #e6edfb;
    --fs-hold: #8a6a09;
    --fs-hold-bg: #fdf6e3;
    --fs-trip: #4c2f8f;
    --fs-trip-bg: #efeafc;
    --fs-off: #8a1c1c;
    --fs-off-bg: #fdecec;
    --fs-accent: #1d4ed8;

    /* Lebar kolom papan. Dipakai DUA pihak yang harus sepakat: berkas gaya
       halamannya, dan perhitungan lebar minimum tabel di markup. Dua angka
       terpisah yang harus sama cepat atau lambat akan berbeda - dan bedanya
       berupa kolom yang tidak lagi sama besar. */
    --fs-unit-col: 12rem;
    --fs-day-col: 7rem;
}

@media (max-width: 48rem) {
    :root {
        --fs-unit-col: 9rem;
        --fs-day-col: 6rem;
    }
}

/* ============================================================
   Vehicle Handover - daftar tugas dan bukti serah-terima

   Ditaruh di berkas global, bukan sebagai gaya berlingkup, karena DUA halaman
   memakainya: daftar tugas dan halaman buktinya. Gaya berlingkup menempel pada
   satu berkas komponen, sehingga dua halaman yang berbagi bentuk akan menuntut
   dua salinan aturan yang harus tetap sama - dan yang harus tetap sama, cepat
   atau lambat, tidak lagi sama.

   Dirancang untuk JEMPOL lebih dulu. Yang memakainya berdiri di halaman parkir
   sambil memegang kunci: tiap sasaran sentuh setinggi jempol, tulisan penting
   sebesar yang terbaca sambil bergerak, dan tidak ada kendali yang menuntut
   ketepatan lebih dari satu sentuhan.
   ============================================================ */

.hv__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    margin-bottom: .6rem;
    padding: .55rem .8rem;
    border: 1px solid #e4e9f2;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 .2rem .7rem rgba(16, 26, 51, .06);
}

.hv__bar-title {
    flex: 1 1 14rem;
    min-width: 0;
}

.hv__bar-title h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #101a33;
}

.hv__bar-title p {
    margin: 0;
    font-size: .78rem;
    color: #5b6478;
}

.hv__bar-tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 16rem;
    justify-content: flex-end;
}

.hv__search {
    position: relative;
    flex: 1 1 auto;
    max-width: 18rem;
}

.hv__search i {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    color: #8a93a5;
    font-size: .85rem;
    pointer-events: none;
}

.hv__search .form-control {
    height: 2.75rem;
    padding-left: 2rem;
    border-radius: .55rem;
}

.hv__reload {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cdd5e2;
    border-radius: .55rem;
    background: #fff;
    color: #101a33;
    cursor: pointer;
}

.hv__reload:hover:not(:disabled) {
    background: #f3f7ff;
    border-color: #9fb9ee;
}

/* ---- Dua arah, selalu terlihat ---- */

.hv__tabs {
    display: flex;
    gap: .3rem;
    margin-bottom: .7rem;
    padding: .3rem;
    border: 1px solid #e4e9f2;
    border-radius: 2rem;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fc 100%);
    box-shadow: inset 0 1px 2px rgba(16, 26, 51, .04);
    overflow-x: auto;
}

.hv__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 2.4rem;
    padding: .3rem .9rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    color: #5b6478;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hv__tab:hover {
    background: #eef3fd;
    color: #101a33;
}

.hv__tab.is-on {
    background: #fff;
    border-color: #b6c9f2;
    color: #1c3d78;
    box-shadow: 0 .15rem .5rem rgba(16, 26, 51, .1);
}

/* ---- Kabar tugas yang barusan selesai ---- */

.hv__done {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    padding: .6rem .8rem;
    border: 1px solid #a9dcc3;
    border-radius: .6rem;
    background: #e8f5ee;
    color: #0f7a4a;
    font-size: .85rem;
}

/* ---- Daftar tugas ---- */

.hv__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hv__row {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .3rem .75rem;
    padding: .7rem .8rem;
    border: 1px solid #e4e9f2;
    border-left: .3rem solid #cdd5e2;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .15rem .5rem rgba(16, 26, 51, .04);
}

/* Yang sudah lewat jamnya diberi tepi merah - satu-satunya warna kuat di
   daftar ini, supaya yang terlambat tidak pernah tenggelam di antara yang
   belum waktunya. */
.hv__row.is-late {
    border-left-color: #b42318;
    background: #fffbfa;
}

.hv__when {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
}

.hv__when-day {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a5;
}

.hv__when-time {
    font-size: 1.35rem;
    font-weight: 700;
    color: #101a33;
    font-variant-numeric: tabular-nums;
}

.hv__when-date {
    font-size: .7rem;
    color: #5b6478;
}

.hv__row.is-late .hv__when-time {
    color: #b42318;
}

.hv__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.hv__unit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
}

.hv__unit strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #101a33;
}

.hv__unit span {
    font-size: .78rem;
    color: #5b6478;
}

.hv__who {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: #33405e;
}

.hv__who i {
    color: #8a93a5;
    font-size: .8rem;
}

.hv__late {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    color: #b42318;
}

.hv__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
}

.hv__call,
.hv__wa {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .25rem .7rem;
    border: 1px solid;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.hv__call {
    border-color: #b6c9f2;
    background: #eef3fd;
    color: #1c3d78;
}

.hv__wa {
    border-color: #a9dcc3;
    background: #e8f5ee;
    color: #0f7a4a;
}

.hv__call:hover { background: #dfe9fb; }
.hv__wa:hover   { background: #d6efe1; }

/* Tombol tugasnya selebar baris di telepon: satu sasaran besar, dan tidak ada
   yang perlu dibidik. */
.hv__go {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    margin-top: .2rem;
    padding: .4rem .9rem;
    border-radius: .6rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.hv__go span {
    flex: 1 1 auto;
    text-align: center;
}

.hv__go--out {
    background: linear-gradient(180deg, #2f5bd8 0%, #1d4ed8 100%);
    box-shadow: 0 .15rem .45rem rgba(29, 78, 216, .32);
}

.hv__go--in {
    background: linear-gradient(180deg, #0d8ba8 0%, #0e7490 100%);
    box-shadow: 0 .15rem .45rem rgba(14, 116, 144, .32);
}

.hv__go:hover {
    color: #fff;
    filter: brightness(1.06);
}

.hv__foot {
    margin: .7rem 0 0;
    font-size: .78rem;
    color: #6b7280;
}

.hv__empty {
    padding: 2rem 1rem;
    border: 1px dashed #cdd5e2;
    border-radius: .85rem;
    background: #fbfcfe;
    text-align: center;
    color: #5b6478;
}

.hv__empty i {
    font-size: 1.8rem;
    color: #9aa5b8;
}

.hv__empty p {
    margin: .5rem 0 0;
    font-size: .9rem;
}

/* ---- Halaman bukti ---- */

.hv__proof-top {
    margin-bottom: .5rem;
}

.hv__back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.4rem;
    padding: .3rem .7rem .3rem .5rem;
    border-radius: .55rem;
    color: #33405e;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.hv__back:hover {
    background: #eef3fd;
    color: #1c3d78;
}

/* Kepala tugas: satu-satunya tempat kru memastikan ia berdiri di depan unit
   yang benar, jadi nopolnya dibuat sebesar mungkin. */
.hv__task {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding: .8rem .9rem;
    border: 1px solid #e4e9f2;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 .2rem .7rem rgba(16, 26, 51, .06);
}

.hv__task-label {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a93a5;
}

.hv__task-plate strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    color: #101a33;
}

.hv__task-desc {
    display: block;
    font-size: .82rem;
    color: #5b6478;
}

.hv__task-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}

.hv__fact {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: #33405e;
    text-decoration: none;
}

.hv__fact i {
    color: #8a93a5;
    font-size: .8rem;
}

.hv__fact--call {
    min-height: 2.25rem;
    padding: .25rem .7rem;
    border: 1px solid #b6c9f2;
    border-radius: 2rem;
    background: #eef3fd;
    color: #1c3d78;
    font-weight: 600;
}

.hv__fact--call i { color: #1c3d78; }

.hv__wrong {
    display: flex;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid #f0d9a8;
    border-radius: .75rem;
    background: #fffaf0;
    color: #8a5b00;
}

.hv__wrong i {
    font-size: 1.2rem;
}

.hv__wrong p {
    margin: .25rem 0 .6rem;
    font-size: .85rem;
}

.hv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .6rem;
    margin-bottom: .6rem;
}

.hv__check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    margin-bottom: .4rem;
}

/* Kotak jaminan dan peringatan keadaan unit: dua hal yang harus dibaca, bukan
   dilewati, jadi keduanya diberi permukaan sendiri. */
.hv__hold {
    margin-bottom: .7rem;
    padding: .7rem .8rem;
    border: 1px solid #e4e9f2;
    border-radius: .7rem;
    background: #f7f9fd;
}

.hv__hold--warn {
    border-color: #f0d9a8;
    background: #fffaf0;
    color: #8a5b00;
}

.hv__hold-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
}

.hv__hold-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    margin: .2rem 0 0;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.hv__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3.25rem;
    margin-top: .3rem;
    border: 0;
    border-radius: .7rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.hv__submit--out {
    background: linear-gradient(180deg, #2f5bd8 0%, #1d4ed8 100%);
    box-shadow: 0 .25rem .7rem rgba(29, 78, 216, .32);
}

.hv__submit--in {
    background: linear-gradient(180deg, #0d8ba8 0%, #0e7490 100%);
    box-shadow: 0 .25rem .7rem rgba(14, 116, 144, .32);
}

.hv__submit:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.hv__submit-note {
    margin: .45rem 0 0;
    font-size: .76rem;
    color: #6b7280;
    text-align: center;
}

@media (min-width: 48rem) {
    .hv__row {
        grid-template-columns: 5rem 1fr auto;
        align-items: center;
    }

    /* Di layar lebar tombolnya kembali ke ujung kanan barisnya sendiri, tidak
       lagi melebar - jempol bukan lagi alat utamanya di sana. */
    .hv__go {
        grid-column: auto;
        margin-top: 0;
        min-width: 12rem;
    }
}