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;
}

/* ---------- 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;
}