@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

/* =====================================================================
   Dasar tampilan bersama — Sistem Informasi SMA Plus Merdeka Soreang
   =====================================================================
   Berkas ini SALINAN SERUPA di lima repositori:
     data_induk/assets/  kehadiran_guru/assets/  absen_ekskul/assets/
     induk_pembiayaan/assets/  Tryout_Guru/assets/
   Bila diubah di satu tempat, salin ke empat tempat lainnya. Perintah
   pembandingnya ditulis tanpa tanda bintang-garis miring, karena urutan
   itu MENUTUP komentar CSS dan membuat sisa keterangan ini terbaca sebagai
   aturan:

     md5sum  tiap-aplikasi/assets/dasar.css   # kelimanya harus sama

   Isinya sengaja HANYA token dan dasar yang benar-benar sama di semua
   aplikasi. Nama kelas komponen berbeda-beda antar aplikasi (.tbl di
   Absensi Ekskul, .btn di Data Induk), jadi komponennya tetap ditulis di
   style.css masing-masing — tetapi warna, jarak, dan lapisannya wajib
   mengambil dari sini. Dengan begitu mengubah palet cukup sekali, dan
   tidak ada aplikasi yang diam-diam menyimpang seperti dulu terjadi pada
   tarif dan nama penanda tangan.

   Dimuat SEBELUM style.css aplikasi:
     <link rel="stylesheet" href="assets/dasar.css?v=1">
     <link rel="stylesheet" href="assets/style.css?v=...">

   ---------------------------------------------------------------------
   Empat aturan yang berlaku di seluruh aplikasi
   ---------------------------------------------------------------------
   1. Tidak ada angka lepas. Warna, jarak, sudut, bayang, ukuran huruf,
      dan tingkat lapisan semuanya bernama di sini, lalu dipakai lewat
      var(). Angka lepas yang tersebar adalah asal-mula tampilan yang
      tidak rapi — dan, pada kasus lapisan, asal-mula dialog yang
      tertimbun toolbar sampai tombolnya tidak bisa ditekan.

   2. Jarak berirama kelipatan 4 px, diambil dari satu tangga jarak,
      supaya unsur yang sejajar benar-benar sejajar.

   3. Warna selalu berarti sesuatu, tidak pernah menjadi hiasan. Emas dari
      lambang sekolah adalah aksen utama — penanda "di sini kamu berada"
      dan "ini tindakan utamanya". Selebihnya hanya dua macam makna:

        keadaan    hijau hadir · merah tidak hadir · biru sakit · emas izin
        pekerjaan  hijau mencatat · biru membaca · emas mengelola

      Tidak ada rona ketujuh yang ditambahkan supaya tampak ramai —
      deretan warna tanpa arti membuat yang penting tenggelam.

   4. Setiap pasangan tulisan dan latar wajib memenuhi ambang keterbacaan
      WCAG (4,5:1 untuk teks biasa). Itulah sebabnya ada DUA emas: yang
      terang untuk bidang, yang gelap untuk tulisan kecil.
   ===================================================================== */

:root{
  /* ---- Warna dasar: diturunkan dari lambang sekolah, dilembutkan ---- */
  --kertas:#FAF7F0;            /* latar halaman */
  --kertas-2:#FFFFFF;          /* permukaan kartu */
  --kertas-3:#F6F2E8;          /* permukaan kedua: kepala tabel, baris jumlah */
  /* ---- Chrome gelap: topbar, bilah samping, bilah aksi, kendali terpilih ----
     Sengaja TERPISAH dari --tinta walau dulu nilainya kebetulan sama.
     Keduanya peran yang berbeda: yang satu latar perkakas, yang satu warna
     tulisan. Menyatukannya membuat warna header tidak bisa diubah tanpa
     ikut mengubah warna seluruh tulisan. */
  --gelap:#1D2A3A;             /* biru tua: topbar dan bilah samping */
  --gelap-2:#33445A;           /* garis dan sorotan di atas chrome gelap */

  --tinta:#221E17;             /* teks utama */
  --tinta-2:#5E5548;           /* teks keterangan */
  --tinta-3:#8B8173;           /* teks paling redup */
  --tinta-terang:#F7F3E9;      /* teks utama di atas chrome gelap */
  --tinta-terang-2:#BDB3A0;    /* teks keterangan di atas chrome gelap */
  --tinta-terang-3:#978F80;    /* teks paling redup di atas chrome gelap.
                                  Ada tersendiri karena --tinta-3 adalah abu
                                  untuk latar TERANG: dipakai di atas chrome
                                  gelap rasionya cuma 3,8:1, di bawah ambang.
                                  Ini yang paling redup yang masih lolos. */

  --garis:#E7E0D1;             /* garis pemisah */
  --garis-2:#D6CCB6;           /* garis yang perlu lebih tegas */

  /* ---- Aksen tunggal: emas lambang ---- */
  --emas:#C29433;              /* bidang: tombol utama, penanda terpilih */
  --emas-tua:#A67C1E;          /* tepi, dan teks di atas emas muda */
  --emas-teks:#8F6B1A;         /* emas untuk TULISAN KECIL di latar terang.
                                  Emas terang hanya 2,3:1 dengan putih dan
                                  emas tua 3,8:1 — keduanya di bawah ambang.
                                  Ini yang paling terang yang masih lolos,
                                  jadi tetap terbaca emas, bukan cokelat. */
  --emas-muda:#FFF6D2;       /* Sengaja dimudakan dari #F6E8C6: dengan yang lama,
                                  --emas-teks di atasnya hanya 4,03:1 — di bawah
                                  ambang. Sekarang 4,52:1. Warna ini menjadi latar
                                  lencana dan pesan, jadi tulisannya harus terbaca. */
  --emas-kabut:#FBF5E6;

  /* ---- Tindakan utama ----
     Latar DAN warna tulisan di atasnya selalu berpasangan. Tanpa ini,
     aplikasi yang dulu berlatar hijau tua dengan tulisan putih akan
     mewarisi tulisan putih di atas emas terang — 2,3:1, tidak terbaca. */
  --utama:var(--emas);
  --utama-tua:var(--emas-tua);
  --utama-teks:#2A2114;

  /* ---- Warna keadaan: status kehadiran ---- */
  --hadir:#3F6B4F;   --hadir-muda:#E4EFE7;   --hadir-tua:#2B4B37;
  --absen:#A8432E;   --absen-muda:#F7E4DF;   --absen-tua:#7C2F1F;
  --sakit:#2F5D7C;   --sakit-muda:#E3EDF3;   --sakit-tua:#234A63;
  --netral-muda:#EDE8DD;

  /* ---- Warna pekerjaan: jenis tindakan sebuah halaman atau tombol ----
     Sengaja memakai rona YANG SAMA dengan warna keadaan di atas. Palet
     tetap berisi tiga warna; yang bertambah hanya maknanya. */
  --kerja-catat:var(--hadir);      /* mengisi atau mengubah data  */
  --kerja-baca:var(--sakit);       /* melihat, merekap, mengunduh */
  --kerja-kelola:var(--emas-teks); /* mengelola daftar induk      */

  /* ---- Tangga jarak: kelipatan 4 px ---- */
  --j1:4px; --j2:8px; --j3:12px; --j4:16px; --j5:24px; --j6:32px; --j7:48px;

  /* ---- Sudut ---- */
  --r1:8px;    /* isian, tombol kecil */
  --r2:10px;   /* tombol */
  --r3:14px;   /* kartu */
  --r-bulat:999px;

  /* ---- Bayang: sangat tipis, hanya untuk memisahkan permukaan ---- */
  --bayang-1:0 1px 2px rgba(34,30,23,.05);
  --bayang-2:0 1px 2px rgba(34,30,23,.06), 0 6px 18px rgba(34,30,23,.05);
  --bayang-atas:0 -4px 14px rgba(34,30,23,.07);

  /* ---- Ukuran huruf ---- */
  --h-xs:12px; --h-s:13px; --h-m:14px; --h-n:15px; --h-b:16px;
  --h-judul-s:18px; --h-judul:23px; --h-judul-b:26px;

  /* ---- Ukuran sentuh terkecil (pedoman aksesibilitas) ---- */
  --sentuh:44px;

  /* ---- Tingkat lapisan ----
     Satu tangga untuk seluruh aplikasi. Urutannya mutlak: pesan di atas
     tirai, tirai di atas navigasi, navigasi di atas isi. Angka z-index
     yang dipilih sendiri-sendiri di tengah berkas pernah membuat dialog
     PIN kebagian 20 sementara toolbar 60 — tombol Batal di dalam dialog
     tertimbun dan tidak bisa ditekan.

     Di DALAM satu tabel yang melekat saat digulung, tingkat 1–4 dipakai
     apa adanya: itu urutan antar-sel sebuah tabel (isi < kolom kiri <
     kepala < sudut kiri-atas), bukan urutan antar-bagian halaman.
     Semuanya jauh di bawah topbar, jadi tidak ikut diberi nama. */
  --lapis-isi:2;               /* unsur kecil di atas isi kartunya */
  --lapis-topbar:30;
  --lapis-bar:35;              /* bilah aksi mengambang */
  --lapis-nav:40;
  --lapis-saran:70;            /* kotak saran pencarian */
  --lapis-tirai:200;           /* dialog, layar kunci */
  --lapis-sibuk:250;           /* tirai "sedang bekerja" — menutupi dialog */
  --lapis-pesan:300;           /* pesan sekilas — selalu paling atas */
}

/* ---------------------------------------------------------------------
   Dasar yang sama di semua aplikasi
   --------------------------------------------------------------------- */
*{box-sizing:border-box}

/* Satu cincin fokus untuk seluruh sistem. Tidak pernah dihilangkan:
   sebagian pengguna memakai papan ketik, dan tanpa cincin ini mereka
   kehilangan jejak posisi di halaman. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(194,148,51,.45);
  outline-offset:2px;
}

/* Angka pada kolom jumlah, rupiah, dan jam ditulis dengan lebar yang sama
   supaya kolomnya berbaris lurus ke bawah; tanpa ini digit 1 lebih sempit
   dan deretan angkanya terlihat bergelombang. */
.angka,.rp,.jumlah,td.angka,th.angka{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   Tombol unduh dan unggah — satu rupa di kelima aplikasi (29 September 2026)
   ---------------------------------------------------------------------
   Pengecualian yang disengaja dari "komponen di style.css masing-masing":
   tombol unduh harus terbaca sama di mana pun, jadi rupanya ditulis sekali
   di sini dan TIDAK bergantung pada .btn / .tbl / .ghost milik aplikasi.

     <button class="btn-unduh" data-fmt="xlsx">Unduh rekap</button>
     <button class="btn-unduh utama" data-fmt="xlsx">Unduh rekap</button>
     <button class="btn-unduh unggah" data-fmt="xlsx">Unggah isian</button>

   Dua tingkat:
     .btn-unduh        garis emas di latar krem — unduhan pendukung
                       (template, blanko, kuitansi, cadangan)
     .btn-unduh.utama  emas penuh — SATU per halaman, laporan pokoknya
   Ikon panah dan lencana format (XLSX, DOCX, …) digambar CSS dari
   data-fmt, bukan ditulis di label. Karena itu label cukup "Unduh rekap",
   tanpa "(xlsx)", dan bila skrip mengganti tulisan tombol sementara
   ("Menyiapkan…") ikon dan lencananya tidak ikut hilang.
   Warna lencana memakai makna yang sudah ada: hijau untuk lembar kerja
   (xlsx, csv), biru untuk dokumen (docx), netral untuk lainnya. */
.btn-unduh{
  display:inline-flex;align-items:center;gap:var(--j2);
  padding:var(--j2) var(--j3);
  border:1px solid var(--emas-tua);border-radius:var(--r1);
  background:var(--emas-kabut);color:var(--emas-teks);
  font:inherit;font-size:var(--h-s);font-weight:600;line-height:1.2;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:var(--bayang-1);
  transition:background-color .15s,border-color .15s,box-shadow .15s,transform .05s;
}
.btn-unduh:hover{background:var(--emas-muda);box-shadow:var(--bayang-2)}
.btn-unduh:active{transform:translateY(1px)}
.btn-unduh::before{
  content:"";flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ikon-unduh) center/contain no-repeat;
          mask:var(--ikon-unduh) center/contain no-repeat;
}
.btn-unduh.unggah::before{
  -webkit-mask-image:var(--ikon-unggah);mask-image:var(--ikon-unggah);
}
.btn-unduh[data-fmt]::after{
  content:attr(data-fmt);text-transform:uppercase;
  padding:1px var(--j2);border-radius:var(--j1);
  font-size:var(--h-xs);font-weight:700;letter-spacing:.04em;line-height:1.35;
  background:var(--netral-muda);color:var(--tinta-2);
}
.btn-unduh:is([data-fmt="xlsx"],[data-fmt="csv"])::after{background:var(--hadir-muda);color:var(--hadir-tua)}
.btn-unduh[data-fmt="docx"]::after{background:var(--sakit-muda);color:var(--sakit-tua)}
.btn-unduh.utama{
  background:var(--utama);border-color:var(--utama-tua);color:var(--utama-teks);
  box-shadow:var(--bayang-2);
}
.btn-unduh.utama:hover{background:var(--utama);filter:brightness(1.07)}   /* lebih terang, bukan lebih gelap: tulisan gelapnya tetap di atas 4,5:1 */
.btn-unduh:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn-unduh:disabled:hover{background:var(--emas-kabut)}
.btn-unduh.utama:disabled:hover{filter:none}
/* Di layar sentuh setinggi ukuran sentuh terkecil. */
@media (pointer:coarse){ .btn-unduh{min-height:var(--sentuh)} }
:root{
  --ikon-unduh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --ikon-unggah:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 20h14'/%3E%3C/svg%3E");
}