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

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