/* Hanya untuk hal yang tidak nyaman ditulis sebagai utility:
   grid timetable dengan kepala & kolom lengket, serta beberapa penyesuaian kecil. */

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------- grid */

.tt-wrap {
  overflow: auto;
  max-height: calc(100vh - 15rem);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

table.tt {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
  font-size: 12.5px;
}

table.tt th,
table.tt td {
  border-right: 1px solid #e8ecf0;
  border-bottom: 1px solid #e8ecf0;
  padding: 6px 8px;
  vertical-align: middle;
}
table.tt th:last-child,
table.tt td:last-child { border-right: 0; }

/* kepala hari — lengket di atas */
table.tt thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  letter-spacing: .02em;
  white-space: nowrap;
}
table.tt thead th .d { display: block; font-weight: 500; color: #94a3b8; font-size: 10.5px; margin-top: 1px; }

/* kolom jam & waktu — lengket di kiri */
table.tt td.jam,
table.tt td.time {
  position: sticky;
  z-index: 2;
  background: #f8fafc;
  text-align: center;
  color: #64748b;
  white-space: nowrap;
}
table.tt td.jam  { left: 0;      width: 46px; font-weight: 700; color: #475569; }
table.tt td.time { left: 46px;   width: 92px; font-size: 11px; font-weight: 500; }
table.tt thead th.corner { position: sticky; z-index: 4; background: #f1f5f9; }
table.tt thead th.corner.c1 { left: 0;    width: 46px; }
table.tt thead th.corner.c2 { left: 46px; width: 92px; }

/* sel kegiatan */
td.slot { text-align: center; height: 38px; }
td.slot .act { display: block; font-weight: 700; line-height: 1.25; }
td.slot .det { display: block; font-weight: 400; font-size: 11px; line-height: 1.3; opacity: .95; margin-top: 2px; }
td.slot .room {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px;
  font-size: 10px; font-weight: 600; background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.35);
}
td.slot .iep {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; vertical-align: middle;
  background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.4);
}
td.slot { position: relative; padding: 4px 6px; }
td.slot.editable { cursor: pointer; }
td.slot.editable:hover { filter: brightness(1.05); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* kolom hari ini */
table.tt .today { background: #f1f7f5; }
table.tt thead th.today { background: #e2efeb; color: #16352F; }

/* Sel kosong juga dapat diklik (PRD §7.4), jadi ia harus terlihat begitu.
   Sebelumnya hanya sel terisi dan sel kosong di kolom libur yang punya sorotan,
   sehingga sel kosong pada hari biasa tampak mati padahal @click terpasang —
   dan itu paling terasa pada minggu yang memang masih kosong.
   Sel terisi memakai brightness() karena latarnya berwarna kategori; sel kosong
   berlatar putih, jadi ia perlu latar dan bingkai sendiri agar sorotannya kelihatan. */
table.tt td.empty.editable { cursor: pointer; }
table.tt td.empty.editable:hover { background: #f1f7f5; box-shadow: inset 0 0 0 2px #6FB3A0; }

/* hari libur */
table.tt .libur { background: #fef2f2; }
table.tt thead th.libur { background: #fee2e2; color: #b91c1c; }
table.tt thead th.libur .d { color: #dc2626; font-weight: 600; }
table.tt td.empty.libur { background: #fef2f2; }
table.tt td.empty.editable.libur:hover { background: #fee2e2; box-shadow: inset 0 0 0 2px #f87171; }

/* baris pakaian */
tr.dress td { background: #f8fafc; text-align: center; font-size: 11.5px; color: #475569; }
/* Bukan .lbl: class itu milik label form dan ber-display block, yang membuat
   sel mengabaikan colspan sehingga Senin bergeser ke kolom kedua. */
tr.dress td.dress-lbl {
  position: sticky; left: 0; z-index: 2;
  text-align: center; font-weight: 700; color: #334155; white-space: nowrap;
}

/* Sel pakaian milik SNA: kotak isian yang tampak seperti teks biasa sampai
   disentuh, agar baris ini tidak terlihat seperti form di tengah grid. */
tr.dress td.edit { padding: 3px 4px; transition: background .3s; }
.dress-input {
  width: 100%; padding: 4px 6px; border: 1px dashed transparent; border-radius: 6px;
  background: transparent; text-align: center; font: inherit; font-size: 11.5px; color: #334155;
}
.dress-input::placeholder { color: #cbd5e1; }
.dress-input:hover { border-color: #cbd5e1; }
.dress-input:focus { outline: none; border: 1px solid #6FB3A0; background: #fff; box-shadow: 0 0 0 3px rgba(111,179,160,.2); }
tr.dress td.saved { background: #ecfdf5; }
tr.dress td.failed { background: #fef2f2; }

/* ---------------------------------------------------------------- deretan minggu */

/* Pengganti dropdown minggu: status tiap minggu terlihat sekilas. Garis bawah
   membawa status; bingkai lingkaran menandai minggu yang sedang berjalan. */
.wk-strip { display: flex; align-items: stretch; gap: 6px; }
.wk-nav {
  display: grid; place-items: center; width: 34px; flex-shrink: 0;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #475569; font-size: 12px;
}
.wk-nav:hover { background: #f8fafc; }
.wk-nav.off { color: #cbd5e1; }
.wk-scroll { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; padding: 3px 2px 6px; }
.wk {
  position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
  min-width: 62px; padding: 6px 8px 9px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #334155; line-height: 1.2; transition: border-color .15s, background .15s;
}
.wk:hover { border-color: #93C3B5; }
.wk .n { font-size: 12.5px; font-weight: 700; }
.wk .n .fa-lock { font-size: 9px; color: #94a3b8; }
.wk .d { font-size: 10.5px; color: #94a3b8; }
.wk .bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 3px; }
.wk.now { box-shadow: 0 0 0 2px #6FB3A0; }
/* Pembatas term di deretan minggu; minggu sesudahnya milik term itu. */
.wk-term {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  margin-left: 6px; padding-left: 10px; border-left: 2px solid #e2e8f0;
  color: #64748b; line-height: 1.1; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.wk-term b { font-size: 15px; color: #334155; letter-spacing: 0; }
.wk-term:first-child { margin-left: 0; padding-left: 2px; border-left: 0; }

.tone-done    { background: #16a34a; }
.tone-partial { background: #f59e0b; }
.tone-todo    { background: #94a3b8; }
.tone-none    { background: transparent; }

/* Status dibawa latar + bingkai + garis, bukan garis saja: garis tipis hijau
   tenggelam di antara warna tema yang juga hijau. */
.wk .bar { height: 4px; }
.wk.tone-done    { background: #ecfdf5; border-color: #86efac; color: #14532d; }
.wk.tone-done .bar    { background: #16a34a; }
.wk.tone-partial { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.wk.tone-partial .bar { background: #f59e0b; }
.wk.tone-todo    { background: #f8fafc; border-color: #cbd5e1; }
.wk.tone-todo .bar    { background: #94a3b8; }
.wk.tone-none    { border-style: dashed; color: #94a3b8; }
.wk.tone-done .d    { color: #15803d; }
.wk.tone-partial .d { color: #b45309; }

/* Minggu terpilih berlatar gelap; garis statusnya memakai warna terang agar tetap terbaca. */
.wk.on { background: #2F6B5E; border-color: #2F6B5E; border-style: solid; color: #fff; }
.wk.on .d, .wk.on .n .fa-lock { color: #DDEDE8; }
.wk.on.tone-done .bar    { background: #86efac; }
.wk.on.tone-partial .bar { background: #fcd34d; }
.wk.on.tone-todo .bar    { background: #e2e8f0; }

.wk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11px; color: #64748b; }
.wk-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; border-radius: 3px; vertical-align: middle; }
.wk-legend i.tone-none { border: 1px dashed #cbd5e1; height: 6px; }
.wk-legend i.now-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px #6FB3A0; }

/* ---------------------------------------------------------------- panel */

.panel-enter { transition: transform .22s cubic-bezier(.32,.72,0,1); }

/* ---------------------------------------------------------------- lain */

.field {
  width: 100%; padding: 8px 11px; border: 1px solid #cbd5e1; border-radius: 8px;
  font: inherit; background: #fff; color: #1e293b; transition: border-color .12s, box-shadow .12s;
}
.field:focus { outline: none; border-color: #4C9081; box-shadow: 0 0 0 3px rgba(76,144,129,.18); }
.field::placeholder { color: #94a3b8; }
select.field { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 28px; }
.lbl { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; }

/* ---------------------------------------------------------------- pohon aktivitas
   Tiga tingkat dengan indentasi bertingkat dan garis pemandu di kiri, agar
   hubungan induk–anak terbaca tanpa harus membaca teksnya. Nama adalah input
   yang tampak seperti teks biasa sampai disentuh, supaya 500 simpul tidak
   tampil sebagai 500 kotak. */

.tree-list { list-style: none; margin: 0; padding: 0; }
.tree-list.lvl-2 { margin-left: 22px; padding-left: 14px; border-left: 1px solid #e2e8f0; min-height: 6px; }
.tree-list.lvl-3 { margin-left: 22px; padding-left: 14px; border-left: 1px dashed #e2e8f0; min-height: 6px; }
.tree-list.lvl-4 { margin-left: 22px; padding-left: 14px; border-left: 1px dashed #e2e8f0; min-height: 6px; }

.tree .node > .row {
  display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 2px 6px 2px 2px; border-radius: 8px;
}
.tree .node > .row:hover { background: #f8fafc; }
.tree .lvl-3 .node > .row { min-height: 30px; font-size: 13px; }
.tree .lvl-4 .node > .row { min-height: 28px; font-size: 12.5px; }

.tree .drag {
  width: 18px; text-align: center; color: #cbd5e1; cursor: grab; font-size: 12px;
  opacity: 0; transition: opacity .12s;
}
.tree .row:hover .drag { opacity: 1; }
.tree .drag:active { cursor: grabbing; }
.tree.is-filtering .drag { visibility: hidden; }

.tree .chev {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  color: #94a3b8; font-size: 10px; transition: transform .15s, background .12s;
}
.tree .chev:hover { background: #e2e8f0; color: #334155; }
.tree .chev.is-open { transform: rotate(90deg); }
.tree .chev.is-empty { color: #d5dbe3; }

.tree .swatch {
  position: relative; width: 16px; height: 16px; border-radius: 5px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer;
}
.tree .swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.tree .bullet { width: 22px; text-align: center; color: #cbd5e1; font-size: 11px; }

.tree input.name {
  flex: 1; min-width: 80px; padding: 4px 7px; border: 1px solid transparent; border-radius: 6px;
  font: inherit; color: #1e293b; background: transparent;
}
.tree input.name:hover { border-color: #e2e8f0; background: #fff; }
.tree input.name:focus { outline: none; border-color: #4C9081; background: #fff; box-shadow: 0 0 0 3px rgba(76,144,129,.18); }
.tree input.name::placeholder { color: #94a3b8; font-weight: 400; }

.tree .pill {
  padding: 1px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  border: 1px solid #cbd5e1; color: #94a3b8; cursor: pointer; user-select: none;
}
.tree .pill.is-on { background: #2F6B5E; border-color: #2F6B5E; color: #fff; }

.tree .meta { font-size: 11px; color: #94a3b8; white-space: nowrap; }

.tree .ico {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  color: #94a3b8; font-size: 12px; opacity: 0; transition: opacity .12s;
}
.tree .row:hover .ico { opacity: 1; }
.tree .ico:hover { background: #e2e8f0; color: #334155; }
.tree .ico.danger:hover { background: #fff1f2; color: #e11d48; }

.tree .node.is-off > .row input.name,
.tree .node.is-off > .row .meta,
.tree .node.is-off > .row .swatch { opacity: .45; }
.tree .node.is-off > .row .eye { opacity: 1; }   /* mata tetap tampak agar jelas kenapa pudar */

.tree .adder button {
  margin: 2px 0 4px 30px; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: #94a3b8;
}
.tree .adder button:hover { background: #F1F7F5; color: #2F6B5E; }
.tree .lvl-3 .adder button { margin-left: 30px; }
.tree .lvl-4 .adder button { margin-left: 30px; }

/* badge indikator: usia dan sumber, sama dengan halaman Aspek IEP */
.tree .badge { flex: none; border-radius: 999px; padding: 0 8px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.tree .badge.age { background: #f1f5f9; color: #64748b; font-weight: 500; }
.tree .badge.sheet { border: 1px solid #e2e8f0; color: #64748b; font-weight: 500; }
.tree .badge.new { background: #F1F7F5; color: #2F6B5E; font-weight: 600; }

.tree .is-ghost > .row { background: #DDEDE8; box-shadow: inset 0 0 0 2px #6FB3A0; }
.sortable-fallback { opacity: .85; }

/* keterangan kategori & aktivitas, dibuka dari tombol ℹ pada baris pohon */
.tree .keterangan {
  margin: 2px 0 6px 52px; padding: 10px 12px; max-width: 640px;
  border: 1px solid #DDEDE8; border-left: 3px solid #6FB3A0; border-radius: 10px; background: #F8FBFA;
}
.tree .keterangan .lbl { margin-bottom: 3px; font-size: 11px; }
.tree .ico.info.is-set { opacity: 1; color: #4C9081; }
.tree .ico.info.is-open { opacity: 1; background: #DDEDE8; color: #27564C; }

/* ---------------------------------------------------------------- ekspor timetable */

.tt-export-page { margin: 0; background: #e2e8f0; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; color: #1e293b; }

.tt-export-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #cbd5e1;
}
.tt-export-bar .msg { margin-left: auto; font-size: 12px; color: #64748b; }
.tt-export-bar button, .tt-export-bar a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tt-export-bar button:disabled { opacity: .5; cursor: wait; }
.tt-export-bar .btn-ghost { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.tt-export-bar .btn-ghost:hover { background: #f8fafc; }
.tt-export-bar .btn-main { border: 1px solid #2F6B5E; background: #2F6B5E; color: #fff; }
.tt-export-bar .btn-main:hover { background: #27564C; }

/* Lebar lembar dipatok; di layar sempit pratinjau digulir ke samping. */
.tt-export-scroll { overflow-x: auto; padding: 24px 16px; }
.tt-export { width: 1240px; margin: 0 auto; padding: 28px 32px 20px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.12); }

.tt-export-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid #2F6B5E; }
.tt-export-head img { width: 52px; height: 52px; object-fit: contain; }
.tt-export-head .who { flex: 1; min-width: 0; }
.tt-export-head .ttl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2F6B5E; }
.tt-export-head .nm  { font-size: 20px; font-weight: 800; line-height: 1.25; color: #0f172a; }
.tt-export-head .sub { font-size: 12.5px; color: #64748b; }
.tt-export-head .when { text-align: right; }
.tt-export-head .wk  { font-size: 15px; font-weight: 700; color: #0f172a; }

/* Grid tampil utuh: tanpa batas tinggi, tanpa kolom lengket, tanpa sorotan hari ini. */
.tt-export .tt-wrap { max-height: none; overflow: visible; }
.tt-export table.tt thead th,
.tt-export table.tt td.jam,
.tt-export table.tt td.time,
.tt-export tr.dress td.dress-lbl { position: static; }
.tt-export table.tt .today { background: #fff; }
.tt-export table.tt thead th.today { background: #f8fafc; color: #334155; }

.tt-export-empty { padding: 48px 0; text-align: center; color: #64748b; }
.tt-export-foot { margin-top: 14px; font-size: 10.5px; color: #94a3b8; text-align: right; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .tt-export-page { background: #fff; }
  .tt-export-bar { display: none; }
  .tt-export-scroll { padding: 0; overflow: visible; }
  .tt-export { box-shadow: none; padding: 0; width: auto; }
  .tt-export * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- isian guru */

.isian-card { border-color: #e2e8f0; background: #fff; }
.isian-card .isian-check { visibility: hidden; }
.isian-card.is-filled { border-color: #a7f3d0; background: #f6fdf9; }
.isian-card.is-filled .isian-check { visibility: visible; }