/* ==================================================================
   Gaya Sistem Absensi Polsek Tanjung Senang
   ==================================================================

   Dibangun di atas Bootstrap 5.3 yang dipasang lokal, tetapi bukan
   Bootstrap apa adanya. Yang digantikan sistem ini adalah daftar hadir
   bergaris di kertas, dan di situ arah tampilannya diambil:

   - Penata isi adalah GARIS, bukan bayangan kartu. Tidak ada satu pun
     bayangan di seluruh sistem ini.
   - Angka jam adalah tokoh utama, sebab absensi pada dasarnya bukti
     waktu. Angkanya tabular agar jam di baris berbeda berdiri lurus.
   - Warna diambil dari seragam dan lambang: biru tua dan kuningan.
     Kuningan dipakai di tiga tempat saja — penanda menu aktif, garis
     bawah angka jam utama, dan satu tindakan utama per halaman.
   - Huruf sempit (lebar 75%) untuk kepala kolom dan nama aplikasi,
     meniru huruf pada formulir cetak yang harus memuat banyak kolom.

   Status selalu tertulis sebagai kata, tidak pernah hanya warna.
   ================================================================== */

/* ---- Huruf -------------------------------------------------------
   Satu berkas, dua sumbu: tebal 100–700 dan lebar 75–100%. Dipasang
   sendiri karena CSP menetapkan style-src 'self'. Lihat
   vendor/plex/VERSI.txt. */

@font-face {
    font-family: 'Plex';
    font-style: normal;
    font-display: swap;
    font-weight: 100 700;
    font-stretch: 75% 100%;
    src: url('vendor/plex/ibm-plex-sans-latin-wdth-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
    /* Biru tua seragam. Bukan biru cerah bawaan Bootstrap, yang
       terasa seperti aplikasi niaga. */
    --navy: #102a43;
    --navy-muda: #28455f;

    /* Kuningan lambang. Digelapkan sampai terbaca sebagai teks di
       atas putih; kuning asli lambang tidak lolos kontras. */
    --kuningan: #8c6410;
    --kuningan-samar: #f3ecdd;

    --tinta: #16202b;
    --tinta-lembut: #5a6878;
    --tinta-samar: #8696a6;

    --kertas: #ffffff;
    --bidang: #e7ecf1;
    --garis: #cbd5df;
    --garis-tegas: #9fb0c0;

    /* Warna keadaan, diredam agar sepadan dengan nada kedinasan dan
       tetap terbaca bila dicetak hitam putih. */
    --hadir: #1c6b4a;
    --hadir-samar: #e6f0ea;
    --telat: #8a5a0b;
    --telat-samar: #f8eedb;
    --tolak: #a3281f;
    --tolak-samar: #f7e7e5;

    /* Ukuran sentuh terkecil yang masih nyaman ditekan dengan ibu
       jari, termasuk saat berdiri di lapangan. */
    --sentuh: 44px;

    /* ---- Penyesuaian token Bootstrap ---- */
    --bs-body-bg: var(--bidang);
    --bs-body-color: var(--tinta);
    --bs-body-font-family: 'Plex', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.55;
    --bs-border-color: var(--garis);

    /* Sudut membulat untuk tombol, kolom masukan, dan pesan. Panel
       memakai sudut yang lebih besar lagi, lihat .panel. */
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 10px;

    --bs-link-color: var(--navy);
    --bs-link-color-rgb: 16, 42, 67;
    --bs-link-hover-color: var(--kuningan);
    --bs-link-hover-color-rgb: 140, 100, 16;

    --bs-secondary-color: var(--tinta-lembut);
    --bs-emphasis-color: var(--tinta);
    --bs-emphasis-color-rgb: 22, 32, 43;
}

body {
    font-stretch: 100%;
}

/* ---- Skala huruf -------------------------------------------------
   Perbandingan 1,25 dari dasar 16 piksel. */

h1, .h1 { font-size: 1.5rem;    font-weight: 600; letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.25rem;   font-weight: 600; letter-spacing: -0.005em; }
h3, .h3 { font-size: 1.0625rem; font-weight: 600; }

/* ---- Panel: pengganti kartu berbayang ----------------------------
   Permukaan putih dengan satu garis tepi, tanpa bayangan. Isi
   dipisahkan garis, seperti baris pada daftar hadir. */

.panel {
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: 12px;

    /* Isi dipotong mengikuti sudut panel, agar sudut tabel dan tajuk
       di dalamnya tidak menonjol melewati lengkungannya. */
    overflow: hidden;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Tanggapan saat disentuh tetikus: garis tepi berganti kuningan dan
 * sedikit bayangan.
 *
 * Dibatasi pada perangkat yang benar-benar punya tetikus. Di layar
 * sentuh, keadaan hover menempel setelah disentuh dan tidak hilang
 * sampai bagian lain disentuh — sehingga panel tampak tersorot tanpa
 * sebab. Absensi dilakukan dari ponsel, jadi pembatasan ini bukan
 * perkara kecil.
 */
@media (hover: hover) and (pointer: fine) {
    .panel:hover {
        border-top-color: var(--kuningan);
        border-right-color: var(--kuningan);
        border-bottom-color: var(--kuningan);
        box-shadow: 0 2px 12px rgba(16, 42, 67, 0.09);
    }

    /* Panel tanpa penanda keadaan: keempat sisinya ikut berganti. */
    .panel:not(.panel-tanda):hover {
        border-left-color: var(--kuningan);
    }
}

.panel + .panel {
    margin-top: 1.25rem;
}

.panel-isi {
    padding: 1.25rem;
}

.panel-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--garis);
}

.panel-kepala h2,
.panel-kepala .panel-judul {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Garis tepi kiri penanda keadaan. Tipis: ia menandai, bukan
   menguasai. */
.panel-tanda {
    border-left: 3px solid var(--garis-tegas);
}

.panel-tanda-hadir  { border-left-color: var(--hadir); }
.panel-tanda-tunggu { border-left-color: var(--navy); }
.panel-tanda-telat  { border-left-color: var(--telat); }
.panel-tanda-tolak  { border-left-color: var(--tolak); }

/* ---- Jam utama: tokoh halaman beranda ----------------------------
   Angka jam diset besar karena itulah bukti yang dicari orang saat
   membuka halaman ini. Garis kuningan di bawahnya satu-satunya
   penekanan warna di halaman. */

.jam-utama {
    display: block;
    font-size: clamp(2.5rem, 13vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
}

.jam-utama-garis {
    display: inline-block;
    padding-bottom: 0.375rem;
    border-bottom: 3px solid var(--kuningan);
}

.jam-nama {
    font-size: 0.9375rem;
    color: var(--tinta-lembut);
}

/* ---- Deret keterangan -------------------------------------------- */

.deret {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1px;
    background: var(--garis);
    border-top: 1px solid var(--garis);
}

.deret > div {
    padding: 0.75rem 1.25rem;
    background: var(--kertas);
}

.deret dt {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--tinta-lembut);
}

.deret dd {
    margin: 0.125rem 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---- Deret angka ringkasan di dashboard --------------------------
   Satu jalur angka rapat, seperti baris jumlah di kaki daftar hadir
   cetak. Bukan enam kotak melayang. */

.jumlah {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1px;
    background: var(--garis);
    border: 1px solid var(--garis);
    border-radius: 12px;
    overflow: hidden;
}

.jumlah > div,
.jumlah > a {
    padding: 0.875rem 1.25rem;
    background: var(--kertas);
}

/*
 * Satu angka boleh menjadi tautan: yang menunggu validasi perlu
 * dibuka, bukan hanya dilihat. Ia tidak digayakan seperti tautan agar
 * jalur angkanya tetap satu jalur rapat, dan tanggapan sentuhnya
 * datang dari latarnya.
 */
.jumlah > a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .jumlah > a:hover {
        background: var(--kuningan-samar);
    }
}

.jumlah-nilai {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.jumlah-nama {
    display: block;
    font-size: 0.8125rem;
    color: var(--tinta-lembut);
}

.jumlah-hadir .jumlah-nilai { color: var(--hadir); }
.jumlah-telat .jumlah-nilai { color: var(--telat); }
.jumlah-tolak .jumlah-nilai { color: var(--tolak); }
.jumlah-tunggu .jumlah-nilai { color: var(--navy); }

/* ---- Tabel ------------------------------------------------------- */

/*
 * Latar sel tabel disetel tegas ke putih.
 *
 * Bootstrap menetapkan --bs-table-bg: var(--bs-body-bg), dan karena
 * --bs-body-bg di sistem ini adalah biru kelabu pucat warna latar
 * halaman, seluruh sel tabel ikut berwarna itu — sehingga tabel di
 * dalam panel putih terbaca seperti lubang yang menembus panelnya.
 */
.table {
    --bs-table-bg: var(--kertas);
    --bs-table-color: var(--tinta);
    --bs-table-border-color: var(--garis);
    margin-bottom: 0;
}

/* Kepala kolom memakai huruf sempit, meniru formulir cetak yang
   harus memuat banyak kolom dalam lebar terbatas. */
.table > thead th {
    font-stretch: 75%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tinta-lembut);
    border-bottom: 1px solid var(--garis-tegas);
    white-space: nowrap;
}

.table > tbody td {
    vertical-align: middle;
}

.angka {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.btn {
    min-height: var(--sentuh);
    font-weight: 500;
}

.btn-sm {
    min-height: 34px;
}

.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-muda);
    --bs-btn-hover-border-color: var(--navy-muda);
    --bs-btn-active-bg: var(--navy-muda);
    --bs-btn-active-border-color: var(--navy-muda);
    --bs-btn-disabled-bg: var(--tinta-samar);
    --bs-btn-disabled-border-color: var(--tinta-samar);
}

/* Satu tindakan utama per halaman memakai kuningan. Ini penekanan
   warna ketiga dan terakhir di sistem ini. */
.btn-kuningan {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kuningan);
    --bs-btn-border-color: var(--kuningan);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #74530d;
    --bs-btn-hover-border-color: #74530d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #74530d;
    --bs-btn-active-border-color: #74530d;
}

.btn-outline-secondary {
    --bs-btn-color: var(--tinta);
    --bs-btn-border-color: var(--garis-tegas);
    --bs-btn-hover-bg: var(--bidang);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-hover-border-color: var(--garis-tegas);
    --bs-btn-active-bg: var(--bidang);
    --bs-btn-active-color: var(--tinta);
}

.form-control,
.form-select {
    min-height: var(--sentuh);
    border-color: var(--garis-tegas);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(16, 42, 67, 0.12);
}

.form-label {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

/* ---- Bilah atas -------------------------------------------------- */

.bilah {
    background: var(--navy);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 3px solid var(--kuningan);
}

.bilah .navbar-brand {
    padding: 0;
    line-height: 1.15;
}

.bilah-nama {
    display: block;
    font-stretch: 75%;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.bilah-instansi {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.bilah .nav-link {
    --bs-nav-link-color: rgba(255, 255, 255, 0.78);
    --bs-nav-link-hover-color: #fff;
    position: relative;
    font-weight: 500;
}

.bilah .nav-link.active {
    color: #fff;
}

/* Penanda menu aktif berupa garis kuningan. Penekanan warna pertama
   dari tiga. */
@media (min-width: 992px) {
    .bilah .nav-link.active::after {
        content: '';
        position: absolute;
        right: 0.5rem;
        bottom: -0.625rem;
        left: 0.5rem;
        height: 3px;
        background: var(--kuningan);
    }
}

.bilah-pengguna {
    line-height: 1.25;
}

.bilah-pengguna-nama {
    display: block;
    font-weight: 600;
    color: #fff;
}

.bilah-pengguna-peran {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Halaman tanpa navigasi: masuk, keluar, galat ---------------- */

.laman-tunggal {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.laman-tunggal main {
    width: 100%;
    max-width: 23rem;
}

.tajuk-tunggal {
    padding: 1.5rem 1.25rem 1.25rem;
    color: #fff;
    background: var(--navy);
    border-bottom: 3px solid var(--kuningan);
}

.tajuk-tunggal h1 {
    margin: 0;
    font-stretch: 75%;
    font-size: 1.375rem;
}

.tajuk-tunggal p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}

/* ---- Tanda keadaan ----------------------------------------------- */

.tanda {
    display: inline-block;
    padding: 0.125rem 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid;
    border-radius: 6px;
    white-space: nowrap;
}

.tanda-telat { color: var(--telat); border-color: #d9bd82; background: var(--telat-samar); }
.tanda-tolak { color: var(--tolak); border-color: #dda8a2; background: var(--tolak-samar); }
.tanda-hadir { color: var(--hadir); border-color: #9cc4b1; background: var(--hadir-samar); }
.tanda-netral { color: var(--tinta-lembut); border-color: var(--garis); background: var(--bidang); }

/* ---- Pesan ------------------------------------------------------- */

.alert {
    border-radius: 8px;
    border-width: 1px;
    border-left-width: 3px;
}

.alert-success { color: var(--hadir); background: var(--hadir-samar); border-color: #9cc4b1; border-left-color: var(--hadir); }
.alert-danger  { color: var(--tolak); background: var(--tolak-samar); border-color: #dda8a2; border-left-color: var(--tolak); }
.alert-warning { color: var(--telat); background: var(--telat-samar); border-color: #d9bd82; border-left-color: var(--telat); }
.alert-info    { color: var(--navy);  background: #e8eef4;            border-color: #a9bed1; border-left-color: var(--navy); }

/* ---- Tahap pada halaman absensi ----------------------------------
   Ketiga tahap memang berurutan, jadi penomorannya menerangkan isi,
   bukan menghias. */

.tahap-mati {
    opacity: 0.5;
}

.tahap-mati input,
.tahap-mati button,
.tahap-mati label {
    pointer-events: none;
}

.tahap-nomor {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--navy);
    border-radius: 6px;
}

.tahap-mati .tahap-nomor {
    background: var(--tinta-samar);
}

.berkas-pilih {
    display: block;
    padding: 0.875rem;
    border: 1px dashed var(--garis-tegas);
    border-radius: 8px;
    background: var(--bidang);
    cursor: pointer;
}

.berkas-pilih:focus-within {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pratinjau {
    display: block;
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
    background: var(--bidang);
    border: 1px solid var(--garis);
    border-radius: 8px;
}

/* ---- Kaki halaman ------------------------------------------------ */

.kaki {
    padding: 2rem 0 1.5rem;
    font-size: 0.8125rem;
    color: var(--tinta-lembut);
}

.kaki-ukur {
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-samar);
}

/* ---- Kartu validasi ----------------------------------------------
   Satu kartu untuk satu catatan absensi. Kotak centangnya berada di
   lajur sendiri di kiri, supaya mata menuruni satu garis lurus saat
   memilih beberapa kartu berurutan, bukan mencari-cari posisinya di
   tiap kartu. */

.kartu-validasi {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.kartu-validasi-isi {
    min-width: 0;
    flex: 1;
}

/* Sasaran sentuh selebar jempol. Kotak centang bawaan terlalu kecil
   untuk dipakai dari ponsel. */
.kartu-validasi-pilih {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sentuh);
    min-height: var(--sentuh);
    margin: -0.5rem 0 0 -0.5rem;
}

.kartu-validasi-pilih .form-check-input {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border-color: var(--garis-tegas);
}

.kartu-validasi-pilih .form-check-input:checked {
    background-color: var(--navy);
    border-color: var(--navy);
}

/*
 * Keterangan dan foto berdampingan begitu layarnya cukup lebar.
 *
 * Bukan hiasan: satu kartu yang menumpuk foto di bawah teks tingginya
 * hampir dua kali lipat, dan daftar ini dapat berisi tiga puluh kartu.
 * Di ponsel keduanya tetap bertumpuk, sebab di sana tidak ada ruang
 * mendatar yang tersisa.
 */
.kartu-validasi-rinci {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kartu-validasi-teks {
    min-width: 0;
    flex: 1;
}

.kartu-validasi-foto {
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .kartu-validasi-rinci {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Foto bukti. Tingginya dibatasi supaya satu kartu tidak memenuhi
   layar sendirian dan daftar tetap dapat digulir cepat; lebarnya
   dibatasi supaya foto tegak dari ponsel tidak melebar dipaksakan. */
.bukti-foto {
    display: block;
    max-width: 100%;
    width: 15rem;
    max-height: 20rem;
    object-fit: cover;
    border: 1px solid var(--garis);
    border-radius: 8px;
    background: var(--bidang);
}

/* Keterangan yang menerangkan angka di atasnya, bukan menambah data
   baru. Garis kiri menandai bahwa ia catatan, bukan isi. */
.catatan-akurasi,
.catatan-penolakan {
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid var(--garis-tegas);
    border-radius: 0 6px 6px 0;
    font-size: 0.875rem;
}

.catatan-akurasi {
    border-left-color: var(--telat);
    background: var(--telat-samar);
    color: var(--telat);
}

.catatan-penolakan {
    border-left-color: var(--tolak);
    background: var(--tolak-samar);
    color: var(--tolak);
}

/* ---- Penolakan --------------------------------------------------
   Dibuka dengan <details>, tanpa JavaScript. Penandanya disembunyikan
   dan rangkumannya digayakan seperti tombol, karena bagi yang memakai
   itulah fungsinya. */

.tolak-tombol {
    display: inline-block;
    min-height: var(--sentuh);
    padding: 0.625rem 1rem;
    border: 1px solid var(--garis-tegas);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
}

.tolak-tombol::-webkit-details-marker {
    display: none;
}

.tolak[open] .tolak-tombol {
    border-color: var(--tolak);
    color: var(--tolak);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tolak-isi {
    padding: 1rem;
    border: 1px solid var(--tolak);
    border-top: 0;
    border-radius: 0 8px 8px 8px;
    background: var(--kertas);
}

.tolak-isi legend {
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
}

.btn-tolak {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tolak);
    --bs-btn-border-color: var(--tolak);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #87211a;
    --bs-btn-hover-border-color: #87211a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #87211a;
    --bs-btn-active-border-color: #87211a;
}

/* Panel tindakan di kaki daftar. Dipisahkan jaraknya supaya tidak
   terbaca sebagai bagian dari kartu terakhir. */
.panel-aksi {
    margin-top: 1.75rem;
}

/* ---- Keterbacaan ------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--kuningan);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}