/* =========================================================
   Perbaikan sistemik aksesibilitas dan kontras
   Dimuat terakhir setelah semua CSS view supaya aturan di sini
   menang tanpa mengubah material atau tata letak dasar.
   ========================================================= */

/* Teks salah pada editor. Warna lama 4.00 sampai 4.02:1; warna baru
   mencapai 5.06:1 di tema terang dan 5.31:1 di tema gelap pada latar
   salah yang sama. Garis bawah ikut diwarnai supaya penanda tidak
   tertinggal di warna lama. */
[data-theme="light"] .char.incorrect,
[data-theme="light"] .bugfix-code-viewport .char.incorrect {
  color: #b91c1c !important;
  text-decoration-color: #b91c1c !important;
}

[data-theme="dark"] .char.incorrect,
:root:not([data-theme]) .char.incorrect,
[data-theme="dark"] .bugfix-code-viewport .char.incorrect,
:root:not([data-theme]) .bugfix-code-viewport .char.incorrect {
  color: #f87171 !important;
  text-decoration-color: #f87171 !important;
}

/* Komentar kode di tema terang. Warna lama 4.12:1 pada editor; warna
   baru 4.93:1 untuk token ber-opacity 0.9 dan 6.19:1 untuk komentar
   modal penjelasan yang opak. */
[data-theme="light"] .char.tok-comment,
[data-theme="light"] .bugfix-code-viewport .char.tok-comment,
[data-theme="light"] #explanation-modal .tok-comment,
[data-theme="light"] .debug-editor .tok-comment {
  color: #3e653f !important;
}

/* Ikon kode TypeScript dan C++ di tema terang. Warna merek lama hanya
   2.19 sampai 2.60:1 pada latar kertas; versi gelap ini mencapai
   5.86:1 pada latar dasar dan 6.39:1 pada permukaan. */
[data-theme="light"] .color-ts {
  color: #1d4e89 !important;
}

[data-theme="light"] .color-cpp {
  color: #2f5f8f !important;
}

/* Ikon TypeScript di tema gelap. Warna merek #3178C6 hanya 3.99:1 pada
   latar gelap; versi terang ini mencapai 6.13:1 di latar dasar dan
   5.45:1 di permukaan. */
[data-theme="dark"] .color-ts,
:root:not([data-theme]) .color-ts {
  color: #5c9bd6 !important;
}

/* Lencana reaksi memakai teks putih. Biru lama (--accent-blue tema gelap)
   hanya 2.41:1; biru tua ini mencapai 8.17:1 di kedua tema. */
.notification-reaction {
  background: #23527c !important;
  color: #ffffff !important;
}

/* Baris notifikasi tetap transparan sesuai desain yang disetujui, tetapi
   ditulis eksplisit karena token --bg-main tidak pernah ada. */
.notification-container {
  background: transparent;
}

/* Fokus papan ketik memakai outline, bukan box-shadow, karena sistem
   tombol pil global mematikan box-shadow pada tombol bersebelahan.
   Warna --brand-indigo terukur 7.19:1 di tema terang dan 8.94:1 di
   tema gelap, jadi cincin tetap terlihat di permukaan kaca. */
:is(button, a[href], summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--brand-indigo) !important;
  outline-offset: 3px !important;
}

/* Tombol segmen punya aturan outline:none dengan selektor ID. Aturan ini
   mengembalikan cincin khusus saat fokus keyboard tanpa mengubah fokus mouse. */
#admin-view .seg-btn:focus-visible {
  outline: 3px solid var(--brand-indigo) !important;
  outline-offset: 3px !important;
}

/* Sakelar admin menyembunyikan input checkbox (opacity 0). Cincin harus
   dipasang pada slider yang terlihat, bukan pada input tak terlihat. */
.admin-switch input:focus-visible + .admin-switch-slider {
  outline: 3px solid var(--brand-indigo) !important;
  outline-offset: 3px !important;
}

/* Stage 4 sudah punya cincin dua lapis berwarna aksen panel. Awalan ID
   dipakai supaya aturan ini menang atas cincin global di atas. */
#admin-view .stage4-fullscreen-app button:focus-visible {
  outline: 2px solid var(--bugfix-brand) !important;
  outline-offset: 2px !important;
}

/* Slider aspek Stage 4: tinggi input 44px supaya target sentuh memenuhi
   batas, sementara jalur yang terlihat tetap 6px di tengah. */
.stage4-aspect-slider {
  height: 44px !important;
  min-height: 44px;
  padding: 0;
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--bugfix-line), var(--bugfix-line)),
    linear-gradient(var(--bugfix-bg), var(--bugfix-bg));
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 8px, 100% 6px;
  border: 0 !important;
  border-radius: 0;
  box-sizing: border-box;
}

.stage4-aspect-slider:focus-visible {
  outline: 2px solid var(--bugfix-brand) !important;
  outline-offset: 2px !important;
}

/* Aksi baris tabel admin memakai ikon 34px dari aturan global
   `button.btn-icon`. Di layar sentuh lebarkan menjadi 44px agar target
   jari tidak meleset; tinggi sudah 44px dari aturan mobile lain. */
@media (max-width: 820px) {
  #admin-view .admin-table .btn-icon {
    width: 44px !important;
    min-width: 44px !important;
  }
}