/* ============================================================
   Sistem Pengurusan Enrolmen Murid — SK Sultan Ismail
   Tema Pendidikan & Sekolah: biru tua, biru diraja, putih, emas
   Tanpa CDN, framework, font atau imej luaran — system font sahaja
   ============================================================ */

:root {
    --biru-tua:    #0d2244;
    --biru-gelap:  #132f5e;
    --biru-diraja: #1e4fa3;
    --biru-cerah:  #2d63c8;
    --emas:        #c9a227;
    --emas-cerah:  #e3bd45;
    --putih:       #ffffff;
    --latar:       #f2f5fa;
    --teks:        #1b2430;
    --teks-samar:  #5a6472;
    --garis:       #d7dee8;
    --ralat-latar: #fdecec;
    --ralat-teks:  #8f2323;
    --ralat-garis: #efc4c4;
    --hijau:       #1d7a3f;
    --fokus:       #b8860b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--latar);
    color: var(--teks);
    min-height: 100vh;
    line-height: 1.5;
}

/* Fokus keyboard jelas untuk semua elemen interaktif */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
}

/* ---------- Logo sekolah ---------- */
.logo {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}

.logo-login {
    height: 110px;
    width: auto;
}

.logo-header {
    height: 52px;
    width: auto;
}

/* ============================================================
   HALAMAN LOGIN
   ============================================================ */

.login-latar {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--biru-tua) 0%, var(--biru-diraja) 100%);
}

.login-bekas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 880px;
    background: var(--putih);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(6, 16, 35, .35);
}

.panel-identiti {
    background: linear-gradient(200deg, var(--biru-gelap) 0%, var(--biru-tua) 70%);
    color: var(--putih);
    padding: 2.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .9rem;
    border-bottom: 4px solid var(--emas);
}

.panel-identiti h1 {
    font-size: 1.45rem;
    letter-spacing: .02em;
}

.panel-tajuk {
    color: var(--emas-cerah);
    font-weight: 600;
    font-size: 1rem;
}

.panel-sub {
    color: #c6d2e6;
    font-size: .88rem;
}

.kad-login {
    padding: 2.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kad-login h2 {
    font-size: 1.2rem;
    margin-bottom: .25rem;
}

.pengenalan {
    color: var(--teks-samar);
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

input[type=text],
input[type=password] {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--garis);
    border-radius: 8px;
    font-size: .95rem;
    margin-bottom: 1rem;
    background: var(--putih);
    color: var(--teks);
}

input[type=text]:focus,
input[type=password]:focus {
    border-color: var(--biru-diraja);
}

button {
    font: inherit;
    cursor: pointer;
}

.kad-login button[type=submit] {
    width: 100%;
    padding: .65rem;
    background: var(--biru-diraja);
    color: var(--putih);
    border: 0;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
}

.kad-login button[type=submit]:hover {
    background: var(--biru-tua);
}

.ralat {
    background: var(--ralat-latar);
    color: var(--ralat-teks);
    border: 1px solid var(--ralat-garis);
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.langkau {
    position: absolute;
    left: -9999px;
    background: var(--emas-cerah);
    color: var(--biru-tua);
    padding: .5rem 1rem;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    z-index: 10;
}

.langkau:focus {
    left: 0;
    top: 0;
}

.app-header {
    background: var(--biru-tua);
    color: var(--putih);
    padding: .8rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--emas);
}

.jenama {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.jenama-teks {
    display: flex;
    flex-direction: column;
}

.jenama-nama {
    font-weight: 700;
    font-size: 1rem;
}

.jenama-sub {
    font-size: .78rem;
    color: #b9c6dc;
}

.admin-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-nama {
    font-size: .88rem;
}

.btn-logout {
    background: transparent;
    color: var(--putih);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .85rem;
    font-weight: 600;
}

.btn-logout:hover {
    background: var(--emas);
    border-color: var(--emas);
    color: var(--biru-tua);
}

.nav {
    background: var(--putih);
    border-bottom: 1px solid var(--garis);
    padding: 0 1.25rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
}

.nav-item {
    padding: .75rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--teks-samar);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.nav-item.semasa {
    color: var(--biru-diraja);
    border-bottom-color: var(--emas);
}

.nav-item.dinyahaktif {
    color: #9aa4b1;
    cursor: not-allowed;
}

.kandungan {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem;
}

.kandungan h1 {
    font-size: 1.35rem;
}

.kad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.25rem 0;
}

.kad {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 4px rgba(13, 34, 68, .06);
}

.kad h2 {
    font-size: .88rem;
    color: var(--teks-samar);
    font-weight: 600;
}

.statistik {
    border-top: 3px solid var(--biru-diraja);
}

.nilai {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--biru-tua);
    margin: .3rem 0 .1rem;
}

.nota {
    font-size: .78rem;
    color: var(--teks-samar);
}

.dua-lajur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.senarai-status {
    list-style: none;
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .88rem;
}

.titik {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .35rem;
}

.titik.aktif { background: var(--hijau); }
.titik.menunggu { background: var(--emas); }

.tindakan {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin: .75rem 0 .6rem;
}

.tindakan button {
    padding: .5rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--garis);
    background: var(--latar);
    color: var(--teks-samar);
    font-size: .85rem;
    font-weight: 600;
}

.tindakan button:disabled {
    cursor: not-allowed;
    opacity: .75;
}

.borang-sync {
    display: inline-flex;
}

.tindakan .btn-sync {
    background: var(--biru-diraja);
    border-color: var(--biru-diraja);
    color: var(--putih);
    min-height: 44px; /* sasaran sentuh mesra telefon */
}

.tindakan .btn-sync:hover:not(:disabled) {
    background: var(--biru-tua);
    border-color: var(--biru-tua);
}

.tindakan .btn-sync:disabled {
    cursor: wait;
    opacity: .7;
}

.makluman.berjaya {
    background: #e8f5ec;
    color: #1c5c34;
    border: 1px solid #bfe2cb;
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.makluman.amaran {
    background: #fdf6e3;
    color: #7a5b13;
    border: 1px solid #ecd9a5;
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.kad-snapshot {
    margin-top: 1rem;
}

.borang-snapshot {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: .75rem 0 .6rem;
}

.medan-snapshot {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.medan-snapshot label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--teks-samar);
}

.borang-snapshot input[type=month] {
    font: inherit;
    padding: .5rem .7rem;
    border: 1px solid var(--garis);
    border-radius: 8px;
    min-height: 44px; /* sasaran sentuh mesra telefon */
}

.borang-snapshot input[type=month]:focus {
    border-color: var(--biru-diraja);
}

.borang-snapshot .btn-snapshot {
    padding: .5rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--biru-diraja);
    background: var(--biru-diraja);
    color: var(--putih);
    font-size: .85rem;
    font-weight: 600;
    min-height: 44px;
}

.borang-snapshot .btn-snapshot:hover:not(:disabled) {
    background: var(--biru-tua);
    border-color: var(--biru-tua);
}

.borang-snapshot .btn-snapshot:disabled {
    cursor: wait;
    opacity: .7;
}

.btn-snapshot.btn-kunci {
    background: var(--emas);
    border-color: var(--emas);
    color: var(--biru-tua);
}

.btn-snapshot.btn-kunci:hover:not(:disabled) {
    background: var(--emas-cerah);
    border-color: var(--emas-cerah);
}

/* Senarai versi snapshot */
.snapshot-pemisah {
    border: 0;
    border-top: 1px solid var(--garis);
    margin: 1.25rem 0 1rem;
}

.snapshot-subtajuk {
    font-size: 1rem;
    margin: 0 0 .5rem;
    color: var(--biru-tua);
}

.borang-snapshot-lihat {
    margin-top: 0;
}

.snapshot-senarai {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.snapshot-item {
    border: 1px solid var(--garis);
    border-radius: 10px;
    padding: .8rem .9rem;
    background: var(--putih);
}

.snapshot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    font-size: .85rem;
    margin-bottom: .4rem;
}

.status-lencana {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-lencana.status-draft {
    background: #fdf6e3;
    color: #7a5b13;
    border-color: #ecd9a5;
}

.status-lencana.status-verified {
    background: #e8f5ec;
    color: #1c5c34;
    border-color: #bfe2cb;
}

.status-lencana.status-locked {
    background: var(--biru-tua);
    color: var(--emas-cerah);
    border-color: var(--biru-tua);
}

.snapshot-butiran,
.snapshot-statistik {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: .8rem;
    color: var(--teks-samar);
    margin-bottom: .4rem;
}

.snapshot-statistik {
    color: var(--teks);
}

.snapshot-tindakan {
    margin-top: .3rem;
}

.borang-tindakan-snapshot {
    display: inline-flex;
    margin: 0;
}

/* Butang tindakan dalam senarai — konsisten dengan .borang-snapshot .btn-snapshot.
   Biru asas untuk "Sahkan Snapshot"; .btn-kunci mengekalkan warna emas. */
.borang-tindakan-snapshot .btn-snapshot {
    padding: .5rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--biru-diraja);
    background: var(--biru-diraja);
    color: var(--putih);
    font-size: .85rem;
    font-weight: 600;
    min-height: 44px;
    cursor: pointer;
}

.borang-tindakan-snapshot .btn-snapshot:hover:not(:disabled) {
    background: var(--biru-tua);
    border-color: var(--biru-tua);
}

.borang-tindakan-snapshot .btn-snapshot:disabled {
    cursor: wait;
    opacity: .7;
}

/* Kekalkan warna emas bagi butang "Kunci Snapshot" dalam senarai
   (spesifisiti lebih tinggi daripada gaya biru asas di atas). */
.borang-tindakan-snapshot .btn-snapshot.btn-kunci {
    background: var(--emas);
    border-color: var(--emas);
    color: var(--biru-tua);
}

.borang-tindakan-snapshot .btn-snapshot.btn-kunci:hover:not(:disabled) {
    background: var(--emas-cerah);
    border-color: var(--emas-cerah);
}

.label-dikunci {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--biru-tua);
}

.app-footer {
    background: var(--biru-tua);
    color: #b9c6dc;
    text-align: center;
    font-size: .8rem;
    padding: .8rem 1.25rem;
    border-top: 3px solid var(--emas);
}

/* ============================================================
   RESPONSIF — tablet dan telefon
   ============================================================ */

@media (max-width: 900px) {
    .kad-grid { grid-template-columns: repeat(2, 1fr); }
    .dua-lajur { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .login-bekas { grid-template-columns: 1fr; }
    .logo-login { height: 88px; }
    .panel-identiti { padding: 2rem 1.5rem; }
    .kad-login { padding: 2rem 1.5rem; }
    .app-header { flex-direction: column; align-items: flex-start; }
    .admin-bar { width: 100%; justify-content: space-between; }
    .kandungan { padding: 1.25rem 1rem; }
    .kad-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LAPORAN BULANAN — paparan rasmi & cetakan
   ============================================================ */

.pautan-laporan {
    display: inline-block;
    margin-left: .6rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--biru-diraja);
    text-decoration: underline;
}

.pautan-laporan:hover { color: var(--biru-tua); }

.laporan-halaman {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--putih);
    color: var(--teks);
}

.laporan-tindakan {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.btn-kembali,
.btn-cetak {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    min-height: 44px;
    line-height: 1.9;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--biru-diraja);
}

.btn-kembali { background: var(--putih); color: var(--biru-diraja); }
.btn-kembali:hover { background: var(--latar); }
.btn-cetak { background: var(--biru-diraja); color: var(--putih); }
.btn-cetak:hover { background: var(--biru-tua); border-color: var(--biru-tua); }

.laporan-tajuk {
    text-align: center;
    margin-bottom: 1rem;
}

.laporan-tajuk h1 {
    font-size: 1.15rem;
    color: var(--biru-tua);
    margin: 0 0 .3rem;
    text-transform: uppercase;
}

.laporan-tajuk h2 {
    font-size: .95rem;
    color: var(--teks);
    margin: 0;
    font-weight: 600;
}

.laporan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--teks);
    margin-bottom: 1rem;
}

.jadual-laporan-bingkai {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.jadual-laporan {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.jadual-laporan th,
.jadual-laporan td {
    border: 1px solid var(--biru-tua);
    padding: .35rem .3rem;
    text-align: center;
    vertical-align: middle;
}

.jadual-laporan thead th {
    background: var(--biru-tua);
    color: var(--putih);
    font-weight: 700;
}

.jadual-laporan .sel-label {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.jadual-laporan .baris-khas { background: #fdf6e3; }

.jadual-laporan .baris-jumlah {
    background: var(--emas-cerah);
    font-weight: 700;
}

.laporan-pengesahan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.blok-tandatangan {
    font-size: .82rem;
    line-height: 1.5;
}

.blok-tandatangan p { margin: 0; }

.peranan-label {
    font-weight: 600;
    margin-bottom: .3rem !important;
}

.ruang-tandatangan {
    height: 60px;
    border-bottom: 1px solid var(--teks);
    margin-bottom: .4rem;
}

.nama-pegawai { font-weight: 700; }

@media (max-width: 640px) {
    .laporan-pengesahan { grid-template-columns: 1fr; }
    .jadual-laporan { font-size: .7rem; }
}

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { background: #fff; }
    .no-print { display: none !important; }
    .laporan-halaman { max-width: none; margin: 0; padding: 0; }
    .jadual-laporan-bingkai { overflow: visible; }
    .jadual-laporan th,
    .jadual-laporan td { border: 1px solid #000; }
    .jadual-laporan thead { display: table-header-group; }
    .jadual-laporan tr { page-break-inside: avoid; }
    .laporan-pengesahan { page-break-inside: avoid; }
    .jadual-laporan thead th,
    .jadual-laporan .baris-khas,
    .jadual-laporan .baris-jumlah {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================================
   TETAPAN PENANDATANGAN
   ============================================================ */

.borang-tetapan {
    margin-top: 1rem;
    max-width: 640px;
}

.tetapan-blok {
    border: 1px solid var(--garis);
    border-radius: 10px;
    padding: 1rem 1.1rem 1.15rem;
    margin: 0 0 1rem;
}

.tetapan-blok legend {
    font-size: .95rem;
    font-weight: 700;
    color: var(--biru-tua);
    padding: 0 .4rem;
}

.medan-tetapan {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .75rem;
}

.medan-tetapan:last-child {
    margin-bottom: 0;
}

.medan-tetapan label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--teks-samar);
}

.borang-tetapan input[type=text] {
    font: inherit;
    padding: .5rem .7rem;
    border: 1px solid var(--garis);
    border-radius: 8px;
    background: var(--putih);
    color: var(--teks);
    min-height: 44px; /* sasaran sentuh mesra telefon */
}

.borang-tetapan input[type=text]:focus {
    border-color: var(--biru-diraja);
}

.btn-simpan-tetapan {
    padding: .6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--biru-diraja);
    background: var(--biru-diraja);
    color: var(--putih);
    font-size: .9rem;
    font-weight: 600;
    min-height: 44px;
    cursor: pointer;
}

.btn-simpan-tetapan:hover {
    background: var(--biru-tua);
    border-color: var(--biru-tua);
}