/* ====================================================================
   SIMAKSI — lembar gaya utama
   Palet: hijau akademik (identitas kampus) + aksen kuningan.
   Judul memakai serif, isi memakai sans — tanpa font unduhan
   agar tetap tampil normal saat XAMPP dijalankan tanpa internet.
   ==================================================================== */

:root {
    --hijau-tua:  #12291E;
    --hijau-tua2: #1A3A2A;
    --hijau:      #1D7A4C;
    --hijau-gelap:#15603B;
    --hijau-muda: #E6F1EA;
    --kuningan:   #A97C1C;
    --kuningan-muda:#FBF2DC;
    --kertas:     #F1F3EF;
    --surface:    #FFFFFF;
    --garis:      #DCE3DA;
    --garis-tipis:#EBEFE8;
    --tinta:      #15211B;
    --redup:      #5F6C64;
    --merah:      #A63329;
    --merah-muda: #FBEAE8;
    --biru:       #2C6E8F;
    --biru-muda:  #E7F0F5;
    --kuning-muda:#FDF3D8;
    --kuning-tua: #8A6410;

    --sans: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --r: 8px;
    --sidebar: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--kertas);
}

a { color: var(--hijau-gelap); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0; }

::selection { background: var(--hijau-muda); }

:focus-visible {
    outline: 2px solid var(--hijau);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- */
/* Kerangka halaman                                                   */
/* ---------------------------------------------------------------- */

.sisi {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: var(--hijau-tua);
    color: #C9D6CD;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sisi-merek {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sisi-merek img { width: 36px; height: 36px; object-fit: contain; }
.sisi-merek b { display: block; font-family: var(--serif); font-size: 19px; color: #fff; letter-spacing: .2px; }
.sisi-merek span { display: block; font-size: 11px; color: #8FA697; margin-top: 1px; }

.sisi-nav { flex: 1; overflow-y: auto; padding: 14px 10px 20px; }
.sisi-grup { margin: 16px 0 6px; padding: 0 10px; font-size: 11px; color: #7E9686; letter-spacing: .3px; }
.sisi-grup:first-child { margin-top: 0; }

.sisi-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: 6px;
    color: #C9D6CD;
    text-decoration: none;
    font-size: 13.5px;
    transition: background .14s ease, color .14s ease;
}
.sisi-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sisi-nav a.aktif { background: var(--hijau); color: #fff; font-weight: 600; }
.sisi-nav a.aktif svg { opacity: 1; }
.sisi-nav svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.sisi-nav .hitung {
    margin-left: auto;
    background: rgba(255,255,255,.13);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.sisi-nav a.aktif .hitung { background: rgba(0,0,0,.22); }

.sisi-kaki {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11.5px;
    color: #7E9686;
}

.utama { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }

.bar-atas {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--garis);
    padding: 13px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.bar-atas h1 { font-size: 21px; }
.bar-atas .jejak { font-size: 12px; color: var(--redup); margin-bottom: 1px; }
.bar-atas .kanan { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.tombol-menu { display: none; background: none; border: 1px solid var(--garis); border-radius: 6px; padding: 6px 9px; cursor: pointer; }

.akun { display: flex; align-items: center; gap: 9px; }
.akun .inisial {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--hijau); color: #fff;
    display: grid; place-items: center;
    font-weight: 600; font-size: 13px;
}
.akun .nama { font-size: 13px; font-weight: 600; line-height: 1.2; }
.akun .peran { font-size: 11.5px; color: var(--redup); }

.isi { padding: 22px 26px 60px; max-width: 1560px; width: 100%; }

/* ---------------------------------------------------------------- */
/* Komponen dasar                                                     */
/* ---------------------------------------------------------------- */

.kartu {
    background: var(--surface);
    border: 1px solid var(--garis);
    border-radius: var(--r);
    margin-bottom: 18px;
}
.kartu-kepala {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--garis-tipis);
}
.kartu-kepala h2 { font-size: 16.5px; }
.kartu-kepala p { margin: 2px 0 0; font-size: 12.5px; color: var(--redup); }
.kartu-kepala .kanan { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kartu-isi { padding: 18px; }
.kartu-isi.rapat { padding: 0; }

/* Tombol */
.tbl {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--hijau);
    border-radius: 6px;
    background: var(--hijau);
    color: #fff;
    font: 600 13px/1 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.tbl:hover { background: var(--hijau-gelap); border-color: var(--hijau-gelap); }
.tbl svg { width: 15px; height: 15px; }

.tbl-garis { background: #fff; color: var(--tinta); border-color: var(--garis); }
.tbl-garis:hover { background: #F6F8F5; border-color: #C4CFC0; }

.tbl-kuningan { background: var(--kuningan); border-color: var(--kuningan); }
.tbl-kuningan:hover { background: #8E6714; border-color: #8E6714; }

.tbl-merah { background: var(--merah); border-color: var(--merah); }
.tbl-merah:hover { background: #8C2820; border-color: #8C2820; }

.tbl-mini { padding: 5px 10px; font-size: 12px; }
.tbl-lebar { width: 100%; justify-content: center; }
.tbl[disabled], .tbl.mati { opacity: .5; pointer-events: none; }

.tautan-aksi {
    background: none; border: 0; padding: 2px 0;
    color: var(--hijau-gelap); font: 600 12.5px/1.4 var(--sans);
    cursor: pointer; text-decoration: none;
}
.tautan-aksi:hover { text-decoration: underline; }
.tautan-aksi.bahaya { color: var(--merah); }

/* Isian form */
label.label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #3B4A41; }
label.label .opsional { font-weight: 400; color: var(--redup); }

.isian, select.isian, textarea.isian {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--garis);
    border-radius: 6px;
    font: 14px/1.5 var(--sans);
    color: var(--tinta);
    background: #fff;
}
.isian:focus { border-color: var(--hijau); outline: none; box-shadow: 0 0 0 3px rgba(29,122,76,.12); }
textarea.isian { resize: vertical; min-height: 76px; }
select.isian { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%235F6C64' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; padding-right: 30px; }

.baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.baris .penuh { grid-column: 1 / -1; }
.kolom { margin-bottom: 14px; }
.bantuan { font-size: 12px; color: var(--redup); margin: 5px 0 0; }

/* Lencana status */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-hijau  { background: var(--hijau-muda);  color: #14603A; }
.badge-kuning { background: var(--kuning-muda); color: var(--kuning-tua); }
.badge-merah  { background: var(--merah-muda);  color: var(--merah); }
.badge-biru   { background: var(--biru-muda);   color: #1E556F; }
.badge-abu    { background: #ECEFEA;            color: #56615A; }

.tanda-kuningan {
    display: inline-block; padding: 1px 8px; border-radius: 4px;
    background: var(--kuningan-muda); color: var(--kuningan);
    font-size: 11.5px; font-weight: 600;
}

/* Notifikasi */
.notif {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 15px; border-radius: var(--r);
    margin-bottom: 16px; font-size: 13.5px;
    border: 1px solid;
}
.notif-sukses { background: var(--hijau-muda); border-color: #BEDCC9; color: #14603A; }
.notif-gagal  { background: var(--merah-muda); border-color: #EFC7C2; color: var(--merah); }
.notif-info   { background: var(--biru-muda);  border-color: #C3DAE6; color: #1E556F; }
.notif svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* Tabel */
.bungkus-tabel { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--garis-tipis); }
table.data thead th {
    position: sticky; top: 0; z-index: 2;
    background: #F7F9F6;
    font-size: 12px; font-weight: 600; color: #46544B;
    border-bottom: 1px solid var(--garis);
    white-space: nowrap;
}
table.data tbody tr:hover { background: #FAFCF9; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.angka { font-variant-numeric: tabular-nums; }
table.data .npm { font-family: var(--mono); font-size: 12px; color: var(--redup); }
.nama-utama { font-weight: 600; color: var(--tinta); }

.kosong { padding: 46px 20px; text-align: center; color: var(--redup); }
.kosong h3 { font-size: 16px; margin-bottom: 5px; color: var(--tinta); }
.kosong p { margin: 0 0 14px; font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Pita periode — penanda konteks utama sistem                        */
/* ---------------------------------------------------------------- */

.pita-periode {
    background: var(--hijau-tua);
    color: #DCE7E0;
    border-radius: var(--r);
    padding: 18px 22px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    border-left: 5px solid var(--kuningan);
}
.pita-periode .judul { font-family: var(--serif); font-size: 22px; color: #fff; }
.pita-periode .rentang { font-size: 12.5px; color: #93A99B; margin-top: 2px; }
.pita-periode .pisah { width: 1px; align-self: stretch; background: rgba(255,255,255,.12); }
.pita-periode .angka-besar { font-family: var(--serif); font-size: 27px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.pita-periode .ket { font-size: 11.5px; color: #93A99B; margin-top: 3px; }
.pita-periode .kanan { margin-left: auto; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.meter { height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; min-width: 190px; }
.meter i { display: block; height: 100%; background: var(--kuningan); }
.meter-ket { font-size: 11.5px; color: #93A99B; margin-top: 6px; }

/* Ringkasan angka */
.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ringkas .sel {
    background: var(--surface); border: 1px solid var(--garis);
    border-radius: var(--r); padding: 15px 17px;
}
.ringkas .sel .nilai { font-family: var(--serif); font-size: 29px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ringkas .sel .label { font-size: 12.5px; color: var(--redup); margin-top: 3px; }
.ringkas .sel .catatan { font-size: 11.5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--garis-tipis); color: var(--redup); }
.ringkas .sel.tekan { border-left: 3px solid var(--hijau); }

/* Daftar beban dosen */
.beban { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.beban .sel { border: 1px solid var(--garis); border-radius: 7px; padding: 12px 14px; background: #fff; }
.beban .sel .nama { font-weight: 600; font-size: 13.5px; }
.beban .sel .nip { font-family: var(--mono); font-size: 11px; color: var(--redup); margin-top: 1px; }
.beban .bar { height: 6px; border-radius: 3px; background: #EDF1EA; margin: 10px 0 7px; overflow: hidden; }
.beban .bar i { display: block; height: 100%; background: var(--hijau); }
.beban .sel.penuh .bar i { background: var(--merah); }
.beban .sel.hampir .bar i { background: var(--kuningan); }
.beban .rinci { display: flex; justify-content: space-between; font-size: 12px; color: var(--redup); }
.beban .rinci b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Garis waktu riwayat */
.linimasa { position: relative; padding-left: 26px; }
.linimasa::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--garis); }
.linimasa .butir { position: relative; padding: 0 0 20px; }
.linimasa .butir::before {
    content: ''; position: absolute; left: -23px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid var(--hijau);
}
.linimasa .butir.abu::before { border-color: #B6C1B8; }
.linimasa .butir.kuningan::before { border-color: var(--kuningan); }
.linimasa .butir.merah::before { border-color: var(--merah); }
.linimasa .waktu { font-size: 11.5px; color: var(--redup); }
.linimasa .isi-butir { margin-top: 2px; }
.linimasa .isi-butir b { font-size: 13.5px; }

/* Kotak judul pada halaman pengajuan */
.pilihan-judul { border: 1px solid var(--garis); border-radius: 7px; padding: 11px 13px; margin-bottom: 9px; background: #fff; }
.pilihan-judul.terpilih { border-color: var(--hijau); background: #F5FAF7; box-shadow: inset 3px 0 0 var(--hijau); }
.pilihan-judul .kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pilihan-judul .kepala span { font-size: 12px; font-weight: 600; color: #46544B; }
.pilihan-judul .teks { font-size: 13px; line-height: 1.5; }
.pilihan-judul input[type=radio] { accent-color: var(--hijau); width: 15px; height: 15px; }

/* Panel geser (dialog) */
.tirai {
    position: fixed; inset: 0; background: rgba(12,26,19,.45);
    display: none; z-index: 60;
}
.tirai.buka { display: block; }
.dialog {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%);
    background: var(--surface); z-index: 61;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s ease;
    box-shadow: -14px 0 40px rgba(12,26,19,.16);
}
.dialog.buka { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .dialog { transition: none; } }
.dialog-kepala { padding: 16px 20px; border-bottom: 1px solid var(--garis); display: flex; align-items: flex-start; gap: 12px; }
.dialog-kepala h2 { font-size: 18px; }
.dialog-kepala p { margin: 3px 0 0; font-size: 12.5px; color: var(--redup); }
.dialog-tutup { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--redup); cursor: pointer; padding: 0 4px; }
.dialog-isi { padding: 20px; overflow-y: auto; flex: 1; }
.dialog-kaki { padding: 14px 20px; border-top: 1px solid var(--garis); display: flex; gap: 10px; justify-content: flex-end; background: #FAFBF9; }

/* Saring / pencarian */
.saring { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.saring .isian { width: auto; min-width: 190px; }
.kotak-cari { position: relative; }
.kotak-cari svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--redup); }
.kotak-cari .isian { padding-left: 32px; min-width: 250px; }

.cuil { display: inline-flex; align-items: center; gap: 6px; background: #EEF2EC; border-radius: 20px; padding: 3px 10px; font-size: 12px; color: #46544B; }
.cuil a { color: var(--redup); text-decoration: none; font-weight: 700; }

/* Tab */
.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 18px; overflow-x: auto; }
.tab a {
    padding: 9px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--redup); text-decoration: none;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab a:hover { color: var(--tinta); }
.tab a.aktif { color: var(--hijau-gelap); border-bottom-color: var(--hijau); }

/* Halaman masuk */
.masuk-latar {
    min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
    background: var(--hijau-tua);
}
.masuk-kiri { padding: 54px 58px; color: #CBD8CF; display: flex; flex-direction: column; justify-content: space-between; }
.masuk-kiri .merek { display: flex; align-items: center; gap: 13px; }
.masuk-kiri .merek img { width: 46px; }
.masuk-kiri .merek b { font-family: var(--serif); font-size: 23px; color: #fff; display: block; }
.masuk-kiri .merek span { font-size: 12px; color: #8FA697; }
.masuk-kiri h2 { font-size: 38px; color: #fff; max-width: 15ch; line-height: 1.18; }
.masuk-kiri .keterangan { max-width: 46ch; margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: #A8BCAF; }
.masuk-kiri .catatan-kaki { font-size: 12px; color: #7E9686; }
.masuk-daftar { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; max-width: 42ch; }
.masuk-daftar li { display: flex; gap: 10px; font-size: 13.5px; color: #BDCDC2; }
.masuk-daftar li b { color: #fff; font-weight: 600; }
.masuk-daftar .nomor { font-family: var(--serif); color: var(--kuningan); font-size: 15px; }

.masuk-kanan { background: var(--surface); display: grid; place-items: center; padding: 40px 28px; }
.masuk-kotak { width: min(390px, 100%); }
.masuk-kotak h1 { font-size: 27px; margin-bottom: 6px; }
.masuk-kotak .sub { color: var(--redup); font-size: 13.5px; margin: 0 0 24px; }
.masuk-kotak .kolom { margin-bottom: 15px; }
.akun-contoh { margin-top: 22px; border: 1px dashed var(--garis); border-radius: 7px; padding: 12px 14px; font-size: 12.5px; color: var(--redup); }
.akun-contoh b { color: var(--tinta); }
.akun-contoh code { font-family: var(--mono); background: #F1F4F0; padding: 1px 5px; border-radius: 3px; }

/* ---------------------------------------------------------------- */
/* Layar kecil                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1000px) {
    .sisi { transform: translateX(-100%); transition: transform .2s ease; }
    .sisi.buka { transform: translateX(0); }
    .utama { margin-left: 0; }
    .tombol-menu { display: inline-flex; }
    .isi { padding: 18px 16px 50px; }
    .bar-atas { padding: 11px 16px; }
    .masuk-latar { grid-template-columns: 1fr; }
    .masuk-kiri { display: none; }
}

@media (max-width: 640px) {
    .pita-periode { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pita-periode .kanan { margin-left: 0; }
    .pita-periode .pisah { display: none; }
    .bar-atas h1 { font-size: 18px; }
}

/* ---------------------------------------------------------------- */
/* Cetak                                                              */
/* ---------------------------------------------------------------- */

@media print {
    .sisi, .bar-atas, .tanpa-cetak { display: none !important; }
    .utama { margin-left: 0; }
    body { background: #fff; }
    .kartu { border: 0; }
}