/* ==========================================================================
   Premiere Educandum — Journal style sheet
   Untuk tema premiereEducandum (OJS 3.3). Menggantikan styleSheet.css lama.

   Cara kerja
   ----------
   HTML kustom (deskripsi jurnal, halaman statis, blok sidebar) menulis warna
   sebagai  var(--pea-nama, warna-cadangan),  misalnya
       color: var(--pea-ink, #1a2233);
   Stylesheet ini mengisi token --pea-* sesuai mode terang atau gelap.

   Tema sengaja memaksa panel konten kustom tetap terang di mode gelap, agar
   HTML lama yang warnanya tetap tidak menjadi gelap-di-atas-gelap. Aturan di
   bagian 2 hanya membalik paksaan itu untuk panel yang isinya sudah memakai
   token --pea-*. Panel berisi HTML lama otomatis tetap terang.

   Pemasangan
   ----------
   1. Website → Appearance → Advanced → Journal style sheet: unggah file ini.
   2. Website → Appearance → Theme: hilangkan centang
      "Do not load the uploaded journal stylesheet", lalu Save.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token warna konten
   -------------------------------------------------------------------------- */

/* Mode terang: sama dengan palet tema, ikut opsi Brand colour & Accent colour */
:root {
  --pea-ink: #1a2233;            /* teks isi */
  --pea-muted: #566176;          /* teks sekunder, label */
  --pea-heading: var(--pe-brand, #1b2c5e);      /* judul, teks tebal, angka */
  --pea-link: #2c4488;           /* tautan dalam tabel */
  --pea-link-line: rgba(44, 68, 136, .35);
  --pea-surface: #ffffff;        /* kartu, tabel, kotak */
  --pea-alt: #f4f6fa;            /* baris selang-seling, chip */
  --pea-soft: #e9edf7;           /* kutipan, strip fakta, chip indeks */
  --pea-soft-line: #d3dbec;
  --pea-line: #dde3ec;           /* garis & pembatas */
  --pea-circle: var(--pe-brand, #1b2c5e);       /* lingkaran nomor */
  --pea-accent: var(--pe-accent, #ffd017);      /* kuning aksen */
  --pea-accent-ink: var(--pe-accent-ink, #14203f);
  --pea-sdg4: #c5192d;           /* merah SDG 4 */
  --pea-shadow: 0 1px 2px rgba(20, 34, 72, .06), 0 8px 24px rgba(20, 34, 72, .07);
}

/* Mode gelap */
:root[data-theme="dark"] {
  --pea-ink: #e8ecf4;
  --pea-muted: #a6b1c6;
  --pea-heading: #f4f6fb;
  --pea-link: #b4c6f6;
  --pea-link-line: rgba(180, 198, 246, .4);
  --pea-surface: #1f2945;
  --pea-alt: #243050;
  --pea-soft: #283561;
  --pea-soft-line: #3a497b;
  --pea-line: #2f3b5e;
  --pea-circle: #2c4488;
  --pea-sdg4: #ff7a86;
  --pea-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}


/* --------------------------------------------------------------------------
   2. Panel konten kustom ikut gelap
      Berlaku hanya bila isinya memakai token --pea-* (atau kelas .pe-about).
   -------------------------------------------------------------------------- */

/* Deskripsi jurnal di beranda ("About the Journal") */
:root[data-theme="dark"] .pe-theme .pe-prose:has(.pe-about),
:root[data-theme="dark"] .pe-theme .pe-prose:has([style*="--pea-"]),

/* Halaman biasa: About, Editorial Team, halaman statis, dll. */
:root[data-theme="dark"] .pe-theme .pe-main > .page:not(.page_article):not(.page_issue):not(.page_issue_archive):has(.pe-about),
:root[data-theme="dark"] .pe-theme .pe-main > .page:not(.page_article):not(.page_issue):not(.page_issue_archive):has([style*="--pea-"]),

/* Halaman sistem tanpa warna tetap di HTML-nya: Login, Lupa password,
   Register, Pencarian, Kontak, Privasi, Pengumuman, pesan error.
   Halaman yang isinya masih memakai warna tetap (style="color/background…")
   tidak ikut, supaya tetap terbaca. */
:root[data-theme="dark"] .pe-theme .pe-main > .page:not(.page_article):not(.page_issue):not(.page_issue_archive):not(:has([style*="color" i], [style*="background" i])),

/* Blok kustom di sidebar */
:root[data-theme="dark"] .pe-theme .pe-sidebar .block_custom:has(.pe-about),
:root[data-theme="dark"] .pe-theme .pe-sidebar .block_custom:has([style*="--pea-"]) {
  background: #182036;
  border-color: #2b3652;
  color: #e8ecf4;
  color-scheme: dark;

  /* kembalikan token tema ke nilai gelap untuk elemen bawaan tema di dalam
     panel (judul halaman, breadcrumb, tautan Edit) */
  --pe-ink: #e8ecf4;
  --pe-muted: #a6b1c6;
  --pe-line: #2b3652;
  --pe-link: #b4c6f6;
  --pe-brand-soft: #222d4c;
}


/* --------------------------------------------------------------------------
   3. Formulir di halaman sistem yang gelap (Login, Lupa password, Pencarian)
      Kolom isian dibuat lebih gelap dari panel agar terlihat, dan tombol
      utama dibuat lebih terang agar tidak menyatu dengan latar.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .pe-theme .pe-main > .page:not(:has([style*="color" i], [style*="background" i])) .cmp_form :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input:not([type]), select, textarea) {
  background: #0f1524;
  border-color: #3a4669;
  color: #e8ecf4;
}

/* isian otomatis browser (Chrome/Edge) tidak lagi berlatar abu-abu terang */
:root[data-theme="dark"] .pe-theme .pe-main > .page:not(:has([style*="color" i], [style*="background" i])) .cmp_form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0f1524 inset;
  -webkit-text-fill-color: #e8ecf4;
  caret-color: #e8ecf4;
}

:root[data-theme="dark"] .pe-theme .pe-main > .page:not(:has([style*="color" i], [style*="background" i])) :is(.cmp_button, .cmp_form .buttons button, .pkp_button, .cmp_form .submit):not(:hover):not(:focus) {
  background: #2c4488;
  border-color: #4a63b0;
  color: #ffffff;
}