/* ==========================================================================
   PASKAL+ V2 — Penyelarasan layar & komponen lama ke sistem desain V2
   (jadwal sentuh, tombol ringkas, kartu, tabel, isian, lencana)
   ========================================================================== */

/* ---------- Jadwal pelajaran (sentuh) ---------------------------------- */
.jd-palet { position: sticky; left: 0; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 10px; }
.jd-palet-kepala { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.jd-palet-kepala b { color: var(--ink); font-size: 13.5px; }
.jd-palet-kepala b i { color: var(--primary); margin-right: 4px; }
.jd-palet-kepala label { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }
.jd-palet-kepala select { height: 34px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 700; background: var(--surface); }
.jd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; touch-action: manipulation; transition: all .15s var(--ease); }
.jd-chip:hover { border-color: var(--primary); }
.jd-chip.aktif { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px -8px var(--primary); }
.jd-chip.jd-istirahat.aktif { background: #64748b; border-color: #64748b; }
.jd-chip.jd-pembiasaan.aktif { background: #8b5cf6; border-color: #8b5cf6; }
.jd-chip.jd-hapus { color: var(--bad); border-color: #f3c2cb; }
.jd-chip.jd-hapus.aktif { background: var(--bad); border-color: var(--bad); color: #fff; }
.jd-chip.jd-selesai { background: var(--good-soft); border-color: #a7e3c4; color: #0b6b40; }
.jd-kosong { font-size: 12.5px; color: var(--ink-4); }
.jd-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jd-tabel { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.jd-tabel th { position: sticky; top: 0; z-index: 1; padding: 10px 6px; background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.jd-tabel td { height: 26px; padding: 0; border-bottom: 1px solid #eef2fa; border-right: 1px solid #eef2fa; }
.jd-tabel tr.jam-penuh td { border-top: 1px solid var(--line); }
.jd-tabel .jd-waktu { width: 64px; text-align: center; font-weight: 700; color: var(--ink-4); font-size: 11px; background: var(--surface); position: sticky; left: 0; z-index: 1; }
.jd-sel { cursor: pointer; touch-action: manipulation; transition: background .12s var(--ease); }
.jd-sel:hover, .jd-sel:focus-visible { background: var(--primary-soft); outline: none; }
.jd-sel:active { background: #cddcff; }
.jd-sel.kunci { cursor: default; background: none; }
.mode-isi .jd-sel { background-image: radial-gradient(circle at center, #2458e626 1.5px, transparent 2px); background-size: 12px 12px; }
.jd-slot { padding: 6px 8px !important; border-radius: 10px; color: #fff; vertical-align: top; cursor: pointer; border: 2px solid var(--surface) !important; touch-action: manipulation; transition: filter .15s var(--ease), transform .15s var(--ease); }
.jd-slot:hover, .jd-slot:focus-visible { filter: brightness(1.06); outline: none; }
.jd-slot b { display: block; font-size: 11.5px; line-height: 1.2; }
.jd-slot small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; opacity: .9; }
.mode-hapus .jd-slot { outline: 2px dashed #fff; outline-offset: -5px; }
.jd-s-intra { background: #56657f; }
.jd-s-rpp-ok { background: #047857; }
.jd-s-rpp-draft { background: #9a4508; }
.jd-s-koku { background: var(--teal); }
.jd-s-istirahat { background: #e2e8f0; color: #475569 !important; }
.jd-s-pembiasaan { background: #6d28d9; }
.jd-batal { margin-left: auto; border: 0; border-radius: 99px; padding: 6px 12px; background: #ffffff26; color: inherit; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; pointer-events: auto; }
@media (max-width: 760px) { .jd-tabel td { height: 30px; } .jd-palet-kepala label { margin-left: 0; } }

/* ---------- RPP Agent: alur terpadu ------------------------------------ */
.alur-otomatis { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, #0d2560, #2458e6 70%, #4b3fd6); color: #fff; box-shadow: var(--sh-2); }
.alur-otomatis-ikon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #ffffff22; color: var(--brand-yellow); font-size: 18px; flex: none; }
.alur-otomatis-teks { flex: 1; min-width: 0; }
.alur-otomatis-teks b { display: block; font-size: 15px; }
.alur-otomatis-teks span { display: block; font-size: 12.5px; color: #d7e2ff; line-height: 1.45; }
.alur-otomatis .v2-btn-primary { background: #fff; color: var(--primary); box-shadow: none; }
.alur-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid #d9d2ff; background: #f6f3ff; }
.alur-panel b { display: block; font-size: 14px; color: #3b2c9e; }
.alur-panel b i { margin-right: 6px; }
.alur-panel span { display: block; font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }
.alur-panel-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.alur-konteks { margin: 0 0 12px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; }
.alur-konteks-kepala b { display: block; font-size: 13.5px; }
.alur-konteks-kepala small { display: block; font-size: 11.5px; color: var(--ink-4); }
.alur-konteks label span { display: block; font-size: 11px; font-weight: 800; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.alur-konteks textarea { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); font: inherit; font-size: 13px; background: var(--surface); }
.alur-saran { justify-self: start; border: 1px dashed #b9a8ff; background: #fff; color: #4b3fd6; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.alur-blok { margin-top: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid #d9d2ff; background: #fff; }
.alur-blok-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.alur-blok-kepala b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #4b3fd6; }
.alur-blok-kepala label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.alur-blok-kepala input { width: 58px; padding: 5px; border-radius: 8px; border: 1.5px solid var(--line-2); text-align: center; font: inherit; font-weight: 800; }
.alur-soal-daftar { display: grid; gap: 10px; }
.alur-soal { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; }
.alur-soal-kepala { display: flex; align-items: center; gap: 8px; }
.alur-soal-kepala span { font-weight: 800; font-size: 12.5px; }
.alur-soal-kepala select { height: 32px; border-radius: 8px; border: 1.5px solid var(--line-2); padding: 0 8px; font: inherit; font-size: 12px; font-weight: 700; background: #fff; }
.alur-soal-kepala button { margin-left: auto; border: 0; background: none; color: var(--bad); cursor: pointer; padding: 6px; }
.alur-soal label > span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 3px; }
.alur-soal textarea, .alur-opsi input[type=text] { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1.5px solid var(--line-2); font: inherit; font-size: 12.5px; background: #fff; }
.alur-opsi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.alur-opsi label { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; border: 1.5px solid transparent; }
.alur-opsi label.benar { border-color: #9ee0bd; background: var(--good-soft); }
.alur-opsi b { width: 18px; text-align: center; font-size: 12px; }
.alur-kosong { margin: 0; padding: 12px; text-align: center; color: var(--ink-4); font-size: 12.5px; }
.alur-cek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.alur-cek li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.alur-cek li > i { font-size: 18px; }
.alur-cek li.ok > i { color: var(--good); }
.alur-cek li.kurang { border-color: #f3d48a; background: #fffaf0; }
.alur-cek li.kurang > i { color: var(--warn); }
.alur-cek span { flex: 1; min-width: 0; }
.alur-cek b { display: block; font-size: 13.5px; }
.alur-cek small { display: block; font-size: 12px; color: var(--ink-3); }
.alur-cek button { border: 0; border-radius: 99px; padding: 6px 12px; background: var(--warn-soft); color: #8a5a00; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.alur-kirim { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid #bfd3ff; background: var(--primary-soft); cursor: pointer; }
.alur-kirim input { margin-top: 3px; accent-color: var(--primary); width: 16px; height: 16px; }
.alur-kirim b { display: block; font-size: 13.5px; }
.alur-kirim small { display: block; font-size: 12px; color: var(--ink-3); }
@media (max-width: 760px) { .alur-cek { grid-template-columns: 1fr; } .alur-opsi { grid-template-columns: 1fr; } .alur-otomatis { flex-wrap: wrap; } }

/* ==========================================================================
   TOMBOL RINGKAS — varian untuk tombol layar lama (diberi kelas oleh
   js/40-v2-poles.js). Spesifisitas dinaikkan (.lb.lb) agar menang atas
   utilitas Tailwind lama tanpa !important.
   ========================================================================== */
body.v2-poles .lb.lb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; height: auto; padding: 6px 14px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
  box-shadow: none; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--spring);
}
body.v2-poles .lb.lb i { font-size: 12.5px; margin: 0; }
body.v2-poles .lb.lb:not(:disabled):hover { transform: translateY(-1px); }
body.v2-poles .lb.lb:not(:disabled):active { transform: scale(.97); }
body.v2-poles .lb.lb:disabled { opacity: .5; cursor: not-allowed; transform: none; }
body.v2-poles .lb.lb:focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; }
body.v2-poles .lb.lb-kecil { min-height: 30px; padding: 4px 11px; font-size: 12px; }
body.v2-poles .lb.lb-penuh { width: 100%; min-height: 42px; }

body.v2-poles .lb.lb-utama { background: linear-gradient(120deg, #2458e6, #1f4fd0 55%, #4b3fd6); background-size: 160% 100%; color: #fff; box-shadow: 0 6px 16px -10px #2458e6; }
body.v2-poles .lb.lb-utama:not(:disabled):hover { background-position: 100% 0; box-shadow: 0 10px 22px -10px #2458e6; color: #fff; }
body.v2-poles .lb.lb-baik { background: var(--good); color: #fff; box-shadow: 0 6px 16px -10px var(--good); }
body.v2-poles .lb.lb-baik:not(:disabled):hover { background: #0b7f4b; color: #fff; }
body.v2-poles .lb.lb-bahaya { background: var(--bad); color: #fff; }
body.v2-poles .lb.lb-bahaya:not(:disabled):hover { background: #bd1f3b; color: #fff; }
body.v2-poles .lb.lb-peringatan { background: #b45309; color: #fff; }
body.v2-poles .lb.lb-peringatan:not(:disabled):hover { background: #92400e; color: #fff; }
body.v2-poles .lb.lb-sekunder { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
body.v2-poles .lb.lb-sekunder:not(:disabled):hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
body.v2-poles .lb.lb-lembut { background: var(--primary-soft); color: var(--primary); }
body.v2-poles .lb.lb-lembut:not(:disabled):hover { background: #d6e3ff; color: var(--primary-hover); }
body.v2-poles .lb.lb-bahaya-lembut { background: var(--bad-soft); color: #b3183a; }
body.v2-poles .lb.lb-bahaya-lembut:not(:disabled):hover { background: var(--bad); color: #fff; }
body.v2-poles .lb.lb-teks { background: transparent; color: var(--ink-3); padding-left: 8px; padding-right: 8px; }
body.v2-poles .lb.lb-teks:not(:disabled):hover { background: var(--surface-3); color: var(--primary); }

/* Tombol ikon saja: bulat 34 px */
body.v2-poles .lb.lb-ikon { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 10px; }
body.v2-poles .lb.lb-ikon.lb-kecil { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
body.v2-poles .lb.lb-ikon.lb-teks { color: var(--ink-4); }
body.v2-poles .lb.lb-ikon.lb-bahaya-lembut, body.v2-poles .lb.lb-ikon.lb-teks:has(.fa-trash) { color: var(--bad); background: transparent; }
body.v2-poles .lb.lb-ikon.lb-teks:has(.fa-trash):hover { background: var(--bad-soft); }

/* ---------- Kepala halaman lama → gaya kepala V2 ------------------------ */
body.v2-poles #app-view .lb-kepala { margin-bottom: 22px !important; }
body.v2-poles #app-view .lb-kepala h1 { margin: 0; font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.15; color: var(--ink) !important; }
body.v2-poles #app-view .lb-kepala h1 + p, body.v2-poles #app-view .lb-kepala p.text-sm { margin-top: 8px !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--ink-3) !important; max-width: 72ch; }
body.v2-poles #app-view .lb-kepala .v2-eyebrow { margin-bottom: 6px; }

/* ---------- Kartu, isian, dan teks tebal lama --------------------------- */
body.v2-poles #app-view .rounded-\[2rem\], body.v2-poles .modal-box .rounded-\[2rem\] { border-radius: var(--r-lg); }
body.v2-poles #app-view .bg-surface.shadow-soft { border-color: var(--line); box-shadow: var(--sh-1); }
body.v2-poles #app-view :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea):is(.rounded-2xl, .rounded-xl, .rounded-full),
body.v2-poles .modal-box :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea):is(.rounded-2xl, .rounded-xl, .rounded-full) {
  border-radius: 12px; border: 1.5px solid var(--line-2); background-color: var(--surface); font-weight: 600; color: var(--ink);
}
body.v2-poles #app-view :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select).p-3,
body.v2-poles .modal-box :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select).p-3 { padding: 9px 12px; min-height: 42px; font-size: 14px; }
body.v2-poles #app-view select.rounded-full, body.v2-poles #app-view input.rounded-full { border-radius: 999px; }
body.v2-poles #app-view .font-black { font-weight: 800; }
body.v2-poles #app-view label.text-xs.font-extrabold, body.v2-poles .modal-box label.text-xs.font-extrabold { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
body.v2-poles #app-view .text-\[10px\].font-black.uppercase { letter-spacing: .08em; }

/* Tombol lama di atas panel gelap */
body.v2-poles .lb.lb-terang { background: #ffffff1f; color: #fff; border-color: #ffffff40; }
body.v2-poles .lb.lb-terang:not(:disabled):hover { background: #ffffff33; color: #fff; }

/* ==========================================================================
   PANAH DROPDOWN — lingkaran lembut + chevron tipis, berjarak dari tepi.
   Ukuran mengikuti ukuran huruf (em) sehingga pas di select kecil maupun besar.
   ========================================================================== */
body.v2 select:not([multiple]):not([size]),
body.v2 .v2-field select,
body.v2 select.pb-select-ikon {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23e3ebfb'/%3E%3Cpath d='M9.5 12.2l4.5 4.5 4.5-4.5' fill='none' stroke='%23283b64' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .5em center !important;
  background-size: 1.75em 1.75em !important;
  padding-right: 2.75em !important;
  text-overflow: ellipsis; cursor: pointer;
}
body.v2 select:not([multiple]):not([size]):hover,
body.v2 .v2-field select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23d3e0fb'/%3E%3Cpath d='M9.5 12.2l4.5 4.5 4.5-4.5' fill='none' stroke='%231c46c0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.v2 select:not([multiple]):not([size]):disabled { cursor: not-allowed; opacity: .7; }
body.v2 select::-ms-expand { display: none; }
/* Select di sel tabel: tetap berjarak dari garis tabel */
body.v2 td > select, body.v2 th > select { max-width: calc(100% - 4px); margin: 2px; }
/* Select di atas latar gelap (mis. panel manajer/intervensi) */
body.v2 .lb-terang ~ select, body.v2 .v2-sidebar select { color-scheme: dark; }


/* ==========================================================================
   KONTRAS — varian teks & latar yang memenuhi WCAG AA (4,5:1)
   Utilitas Tailwind lama (500/600, slate-300/400) terlalu terang untuk teks.
   ========================================================================== */
body.v2 .text-slate-300 { color: #6b7a9e; }
body.v2 .text-slate-400 { color: #5f6f93; }
body.v2 :is(.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-green-500, .text-green-600) { color: #047857; }
body.v2 :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-yellow-500, .text-yellow-600, .text-orange-400, .text-orange-500) { color: #9a4d06; }
body.v2 :is(.text-rose-400, .text-rose-500, .text-red-400, .text-red-500) { color: #be123c; }
body.v2 :is(.text-sky-500, .text-sky-600, .text-blue-400, .text-blue-500) { color: #0b5ea8; }
body.v2 :is(.text-violet-400, .text-violet-500, .text-purple-500, .text-indigo-400, .text-indigo-500) { color: #5b21b6; }
body.v2 :is(.text-teal-500, .text-teal-600, .text-cyan-600) { color: #0b6b66; }
body.v2 .text-pink-500 { color: #be185d; }
body.v2 .text-accent { color: #8a5a00; }
body.v2 .text-secondary { color: #0b6b66; }
/* Latar berwarna yang memuat teks putih */
body.v2 .text-white:is(.bg-emerald-400, .bg-emerald-500, .bg-green-500) { background-color: #047857; }
body.v2 .text-white:is(.bg-amber-400, .bg-amber-500, .bg-yellow-500, .bg-orange-400, .bg-orange-500) { background-color: #b45309; }
body.v2 .text-white:is(.bg-rose-400, .bg-rose-500, .bg-red-400) { background-color: #d42a47; }
body.v2 .text-white:is(.bg-sky-400, .bg-sky-500, .bg-blue-400) { background-color: #0369a1; }
body.v2 .text-white:is(.bg-violet-400, .bg-violet-500, .bg-purple-500) { background-color: #6d28d9; }
body.v2 .text-white:is(.bg-teal-400, .bg-teal-500) { background-color: #0f766e; }
body.v2 .text-white:is(.bg-slate-300, .bg-slate-400) { background-color: #5b6a8a; }