/**
 * SIMFONI - components.css
 *
 * Komponen bersama SIMFONI. Berkas ini menampung definisi yang sebelumnya
 * DISALIN-TEMPEL identik ke banyak halaman. Nama kelasnya sengaja tidak
 * diubah sehingga markup halaman tidak perlu disentuh sama sekali.
 *
 * Dimuat SETELAH simfoni.css dan SEBELUM CSS per halaman, sehingga halaman
 * tetap dapat menimpanya persis seperti sebelumnya.
 *
 * @filename    components.css
 * @description Komponen bersama: kepala modul, wadah konten, lencana status
 * @author      Syams
 * @created     August 26, 2026
 * @license     SIMFONI Dual License (GPL v3 / Commercial)
 * @version     2.3
 * @project     SIMFONI - Sistem Informasi Monitoring dan Evaluasi Kearsipan
 */

/* ── Kepala modul ────────────────────────────────────────────────────────
   Sebelumnya didefinisikan identik di 12 berkas page/master/. */
.master-auditor-header {
    background: var(--grad-brand);
    color: white;
    border-radius: var(--radius-panel);
    padding: 20px;
    margin-bottom: 25px;
}

/* CATATAN: .content-container sengaja TIDAK dipindah ke sini.
   Definisinya berbeda antar halaman — beranda.php memakai
   (margin:0 auto; padding:0; max-width:1200px) sementara empat halaman master
   memakai (margin:20px; padding:15px; min-height:calc(100vh - 200px)).
   Menyatukannya akan mengubah tampilan salah satunya. Ditangani lewat
   page-scope pada fase 7. */

/* ── Penukar Periode Evaluasi & pita modus baca ─────────────────────────────
   Kerangka, bukan halaman: selectornya sengaja tidak berawalan `.page--*`.
   Dipakai partials/navbar.php di SETIAP layar. */

.periode-pemilih {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

.periode-pemilih__nama   { font-weight: 600; }
.periode-pemilih__status {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .85;
}

/* Periode yang tidak menerima penulisan dibedakan di kerangka, bukan hanya di
   pita: penukar inilah yang terlihat di setiap layar. */
.periode-pemilih--baca {
  border-color: #ffc107;
  background: rgba(255, 193, 7, .18);
}

.periode-menu { min-width: 15rem; }

.periode-menu__butir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.periode-menu__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #e9ecef;
  color: #495057;
}

.periode-menu__label--berjalan { background: #d1e7dd; color: #0f5132; }
.periode-menu__label--draf     { background: #e2e3e5; color: #41464b; }
.periode-menu__label--selesai  { background: #fff3cd; color: #664d03; }
.periode-menu__label--arsip    { background: #f8d7da; color: #58151c; }

.periode-pita {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .45rem 1rem;
  background: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
  font-size: .875rem;
}

.periode-pita--pindah {
  background: #cff4fc;
  color: #055160;
  border-bottom-color: #9eeaf9;
}

/* Pita adalah keadaan layar, bukan bagian dokumen. */
@media print {
  .periode-pita,
  .periode-pemilih { display: none !important; }
}