:root { --merek: #83d2d9; --latar: #f2fafb; --kartu: #ffffff; --teks: #1d1e20; --teks-redup: #5a6670; --garis: #d6e8ea; --aksen-tautan: #17808a; --aksen-lembut: #def3f5; --galat: #b42318;
  --biru: var(--aksen-tautan); --abu: var(--latar); --redup: var(--teks-redup); --merah: var(--galat); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--teks); background: var(--abu); }
h2 { margin: 0 0 6px; font-size: 22px; }
h3 { margin: 22px 0 8px; font-size: 17px; }
.tengah { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kartu { background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: 20px; width: 100%; max-width: 380px; }
.kartu.lebar { max-width: 760px; margin-bottom: 14px; }
.kartu h1 { font-size: 20px; margin: 0 0 4px; }
.kartu h3 { margin: 0 0 6px; }
.kecil { color: var(--redup); font-size: 14px; margin: 0 0 12px; }
.kosong { color: var(--redup); font-style: italic; }
label { display: block; font-size: 14px; margin-bottom: 12px; }
label.centang { display: inline-block; margin: 0 16px 6px 0; }
input[type=text], input[type=email], input[type=password], input[type=date] { padding: 8px 10px; border: 1px solid var(--garis); border-radius: 6px; font-size: 15px; background: #fff; }
label > input[type=text], label > input[type=email], label > input[type=password] { display: block; width: 100%; margin-top: 4px; }
fieldset { border: 1px solid var(--garis); border-radius: 8px; margin: 0 0 12px; padding: 8px 12px 4px; }
legend { font-size: 13px; color: var(--redup); padding: 0 6px; }
button { padding: 8px 14px; border: 0; border-radius: 6px; background: var(--biru); color: #fff; font-size: 15px; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
button.sekunder { background: #fff; color: var(--teks); border: 1px solid var(--garis); }
.pesan { color: var(--merah); font-size: 14px; min-height: 20px; margin: 10px 0 0; }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--garis); }
.menu-atas { display: flex; gap: 6px; flex: 1; }
.menu-atas a, .subnav a { padding: 6px 12px; border-radius: 6px; color: var(--teks); text-decoration: none; font-size: 15px; }
.menu-atas a:hover, .subnav a:hover { background: var(--abu); }
.menu-atas a.aktif, .subnav a.aktif { background: var(--aksen-lembut); color: var(--aksen-tautan); font-weight: 600; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.kanan { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--redup); }
.isi { max-width: 960px; margin: 0 auto; padding: 20px; }
.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.menu .kartu { max-width: none; }
.mati { opacity: .65; }
a.tautan { color: inherit; text-decoration: none; display: block; }
a.tautan:hover { border-color: var(--biru); }
.tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--garis); font-size: 14px; vertical-align: middle; }
.tabel th { background: #f9fafb; color: var(--redup); font-weight: 600; }
.tabel input[type=text] { width: 100%; min-width: 60px; }
.tabel tr.redup td { color: var(--redup); }
.baris-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.lencana { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #e5e7eb; color: var(--teks); }
.lencana.aktif, .lencana.pasti { background: #dcfce7; color: #166534; }
.lencana.perkiraan { background: #fef3c7; color: #92400e; }
.lencana.selesai { background: #e5e7eb; color: var(--redup); }
.tabel a { color: var(--biru); }
.daftar { margin: 0; padding-left: 22px; line-height: 1.7; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; max-width: 90vw; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.tampak { opacity: 1; }
.toast.galat { background: var(--merah); }
@media (max-width: 640px) { .isi { padding: 16px; } }

.lencana.IDEAL { background: #dcfce7; color: #166534; }
.lencana.OK { background: #fef3c7; color: #92400e; }
.lencana.LATE { background: #fee2e2; color: #991b1b; }
.jadwal { font-size: 13px; line-height: 1.5; }
.peringatan { padding-left: 18px; font-size: 14px; }
.peringatan li.bahaya { color: var(--merah); font-weight: 600; }

label > select, label > input[type=date], label > input[type=month] { display: block; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 6px; font-size: 15px; background: #fff; max-width: 320px; }
input[type=month], select { padding: 8px 10px; border: 1px solid var(--garis); border-radius: 6px; font-size: 15px; background: #fff; }
.form-kartu { background: #f9fafb; border: 1px solid var(--garis); border-radius: 8px; padding: 12px 14px; margin: 8px 0 14px; }
.baris-form label { margin-bottom: 0; }
.tabel.papan td { vertical-align: top; }
.tabel td.aksi { white-space: nowrap; }
.tabel td.aksi button { padding: 4px 8px; font-size: 13px; }
button.kecil-tombol { padding: 2px 8px; font-size: 12px; }
button.bahaya { color: var(--merah); border-color: var(--merah); }
.lencana.paket { background: var(--aksen-lembut); color: var(--aksen-tautan); }
.jadwal .masalah { color: var(--merah); font-weight: 600; margin-top: 2px; }
.catatan { background: #fef3c7; padding: 6px 8px; border-radius: 6px; }

/* ===== Papan feed grid (docs/10 A) ===== */
.feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 540px; margin-bottom: 14px; }
.kartu-feed { aspect-ratio: 3 / 4; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; position: relative; font-size: clamp(9px, 2.3vw, 13px); line-height: 1.25; border: 2px solid transparent; background: #e5e7eb; color: #111827; min-width: 0; }
.feed-grid:not(.statis) .kartu-feed:not(.pengisi) { cursor: pointer; }
.kartu-feed:focus-visible { outline: 3px solid var(--biru); }
.kf-atas { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.kf-nomor { font-weight: 700; background: rgba(255, 255, 255, .75); border-radius: 8px; padding: 0 6px; }
.kf-jenis { font-weight: 700; font-size: 1.55em; line-height: 1.1; margin-top: 2px; }
.kf-pemateri { font-weight: 600; word-break: break-word; }
.kf-kecil { opacity: .75; font-size: .9em; }
.kf-tayang { font-size: .95em; margin-top: 2px; }
.kf-bawah { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: .9em; }
.kf-chip { border-radius: 8px; padding: 0 5px; background: rgba(255, 255, 255, .8); font-size: .9em; }
.kf-chip.perkiraan { background: #fef3c7; color: #92400e; }
.kf-chip.masalah { background: #fee2e2; color: #991b1b; font-weight: 700; }
.kartu-feed .lencana { font-size: .8em; padding: 0 6px; }
.kartu-feed.pengisi { background: #f3f4f6; border: 2px dashed #9ca3af; color: #4b5563; justify-content: center; align-items: center; text-align: center; }
.kartu-feed.pengisi .kf-jenis { font-size: 1.2em; }
.kartu-feed.dipilih { border-color: var(--biru); }
.kartu-feed.sorot { outline: 4px solid #f59e0b; }
.kartu-feed.diseret { opacity: .4; }
.kartu-feed.sasaran { outline: 3px dashed var(--biru); }
.kf-geser { display: flex; justify-content: space-between; gap: 4px; }
.kf-tombol { padding: 1px 6px; font-size: .85em; background: rgba(255, 255, 255, .8); color: #111827; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; }
.kartu-feed.pengisi .kf-hapus { position: absolute; top: 3px; right: 3px; }
.kartu-feed.pengisi .kf-geser { position: absolute; left: 4px; right: 4px; bottom: 4px; }
.feed-grid:not(.statis) .kartu-feed.pengisi { cursor: grab; }
.kf-centang { margin: 0; }
.wp0 { background: #dbeafe; } .wp1 { background: #fce7f3; } .wp2 { background: #dcfce7; } .wp3 { background: #fef3c7; } .wp4 { background: #ede9fe; }
.wp5 { background: #ffedd5; } .wp6 { background: #cffafe; } .wp7 { background: #fee2e2; } .wp8 { background: #e0e7ff; } .wp9 { background: #ecfccb; }
.slot-ubah { max-width: 760px; }
@media (max-width: 640px) {
  .feed-grid { max-width: none; }
  .slot-ubah.terbuka { position: fixed; inset: 0; z-index: 50; background: #fff; overflow: auto; padding: 14px; max-width: none; }
}

/* ===== Kalender (docs/10 B) ===== */
.kal-wadah { overflow-x: auto; }
.kal-saringan { background: #fff; border: 1px solid var(--garis); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; }
.kal-saringan label { margin-bottom: 6px; }
.kal-bulan { background: #fff; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; margin-bottom: 10px; min-width: 640px; }
.kal-judul { margin: 0; padding: 8px 10px; font-size: 16px; background: #f9fafb; border-bottom: 1px solid var(--garis); }
.kal-kepala { padding-left: 30px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #f9fafb; font-size: 12px; font-weight: 600; color: var(--redup); text-align: center; }
.kal-kepala div { padding: 4px 0; border-right: 1px solid var(--garis); }
.kal-minggu { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--garis); }
.kal-hari { border-right: 1px solid var(--garis); background: #fff; }
.kal-hari.akhirpekan { background: #f9fafb; }
.kal-hari.luar { background: #f3f4f6; }
.kal-hari.libur { background: #fee2e2; }
.kal-hari.hariini { box-shadow: inset 0 0 0 2px var(--aksen-tautan); background: var(--aksen-lembut); }
.kal-nomor { font-size: 11px; font-weight: 600; padding: 2px 4px; color: var(--teks); overflow-wrap: anywhere; }
.kal-nomor.luar { color: #9ca3af; }
.kal-libur-nama { color: #991b1b; font-weight: 400; font-size: 10px; }
.kal-batang { font-size: 11px; line-height: 1.35; padding: 2px 5px; margin: 2px; border-radius: 4px; white-space: normal; overflow-wrap: anywhere; min-width: 0; border-left: 4px solid transparent; color: #fff; }
.kal-batang.bisa-klik { cursor: pointer; }
.kal-batang.bisa-klik:hover { filter: brightness(.92); }
.kal-batang.potong-kiri { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.kal-batang.potong-kanan { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.kal-batang.perkiraan { opacity: .75; font-style: italic; }
.kj-script { background: #2563eb; }
.kj-design { background: #f59e0b; color: #111827; }
.kj-tayang { background: #7c3aed; }
.kj-webinar { background: #059669; }
.kj-batas { background: #fff; color: #b91c1c; outline: 1px solid #b91c1c; outline-offset: -1px; font-weight: 700; }
.kj-cuti { background: repeating-linear-gradient(45deg, #9ca3af, #9ca3af 6px, #d1d5db 6px, #d1d5db 12px); color: #111827; }
.kj-libur { background: #fee2e2; }
.kj-hariini { background: #eff6ff; box-shadow: inset 0 0 0 2px var(--biru); }
.br-DL { border-left-color: #1e3a8a; }
.br-ML { border-left-color: #065f46; }
.kal-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 2px; font-size: 12px; color: var(--redup); }
.kal-leg { display: inline-flex; align-items: center; gap: 5px; }
.kal-kotak { display: inline-block; width: 14px; height: 12px; border-radius: 3px; border: 1px solid var(--garis); border-left-width: 4px; }
.kal-kotak.kj-batas { border-color: #b91c1c; }
.kal-ringkasan div { margin: 3px 0; }

/* ===== Cetak / PDF (docs/10 C) ===== */
#area-cetak { display: none; }
.cetak-tabel { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 11px; }
.cetak-tabel th, .cetak-tabel td { border: 1px solid #9ca3af; padding: 3px 6px; text-align: left; }
.cetak-tabel th { background: #f3f4f6; }
.cetak-dok h1 { font-size: 22px; margin: 0 0 4px; }
.cetak-dok h2 { font-size: 16px; margin: 0 0 8px; }
.cetak-dok h3 { font-size: 13px; margin: 10px 0 2px; }
@media print {
  @page { size: A4; margin: 12mm; }
  @page lebar { size: A4 landscape; margin: 10mm; }
  html, body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #layar-utama, #layar-login, .toast { display: none !important; }
  #area-cetak { display: block; font-size: 10pt; color: #000; }
  .cetak-bagian.pisah { break-before: page; }
  .cetak-jaga, .cetak-tabel tr, .kartu-feed, .kal-baris, .cetak-dok h2, .cetak-dok h3 { break-inside: avoid; }
  .cetak-dok h2, .cetak-dok h3 { break-after: avoid; }
  .cetak-dok .kal-bulan { min-width: 0; border-radius: 0; }
  .cetak-dok .kal-batang { font-size: 7.5pt; }
  .cetak-bagian.lebar { page: lebar; }
  .cetak-gabungan .kal-saringan, .cetak-gabungan .baris-form { display: none; }
  .cetak-gabungan .gantt-bungkus { overflow: visible; }
  .cetak-dok .kal-nomor { font-size: 8pt; }
  .cetak-dok .feed-grid { max-width: 140mm; }
  .cetak-dok .kartu-feed { font-size: 8pt; }
}

/* ===== Tambahan: nomor minggu, konten siap, orang berwarna, Gantt ===== */
.kal-baris { display: grid; grid-template-columns: 30px minmax(0, 1fr); border-top: 1px solid var(--garis); }
.kal-baris .kal-minggu { border-top: 0; }
.kal-wn { font-size: 10px; font-weight: 700; color: var(--teks-redup); background: var(--latar); border-right: 1px solid var(--garis); padding: 4px 0; text-align: center; }
.kj-siap { background: #17808a; }
.lencana-orang { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #1d1e20; }
.gantt-bungkus { overflow-x: auto; background: #fff; border: 1px solid var(--garis); border-radius: 8px; margin-bottom: 10px; }
.gantt-dalam { display: inline-block; min-width: 100%; }
.gantt-baris { display: flex; border-bottom: 1px solid var(--garis); }
.gantt-kepala { background: var(--latar); }
.gantt-seri { background: var(--aksen-lembut); }
.gantt-label { flex: 0 0 200px; position: sticky; left: 0; z-index: 5; background-color: #fff; border-right: 1px solid var(--garis); padding: 6px 10px; font-size: 13px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.gantt-kepala .gantt-label, .gantt-seri .gantt-label { background-color: var(--latar); }
.gantt-seri .gantt-label { background-color: var(--aksen-lembut); }
.gantt-badan { position: relative; flex: 0 0 auto; background-image: linear-gradient(to right, var(--garis) 1px, transparent 1px); background-size: 154px 100%; }
.gantt-minggu { height: 26px; }
.kal-batang.lanjut { opacity: .85; font-size: 10px; padding: 1px 5px; }
.gantt-tik { position: absolute; top: 0; bottom: 0; font-size: 11px; color: var(--teks-redup); padding: 5px 4px; border-left: 1px solid var(--garis); }
.gantt-batang { position: absolute; height: 16px; border-radius: 4px; border-left: 4px solid transparent; z-index: 1; }
.gantt-teks { position: absolute; height: 16px; line-height: 16px; font-size: 11px; white-space: nowrap; z-index: 2; color: var(--teks); }
.gantt-teks.bisa-klik { cursor: pointer; }
.gantt-teks.bentrok { color: var(--galat); font-weight: 600; }
.gantt-batang.bisa-klik { cursor: pointer; }
.gantt-batang:hover { filter: brightness(.92); }
.gantt-batang.perkiraan { opacity: .65; }
.gantt-batang.bentrok { outline: 2px solid var(--galat); }
.kal-kotak.bentrok { outline: 2px solid var(--galat); background: #fff; }
.gantt-hariini { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--galat); opacity: .6; z-index: 3; pointer-events: none; }
.gabungan-tautan { max-width: 760px; margin-bottom: 10px; padding: 12px 16px; }

/* Konten siap: warna per jenis konten (docs/10 G2.3). Legenda memakai kelas yang sama. */
.kal-batang.jk-gtk, .kal-kotak.kj-jk-gtk { background: #17808a; color: #fff; }
.kal-batang.jk-reels, .kal-kotak.kj-jk-reels { background: #c2410c; color: #fff; }




/* ===== Beranda ikon aplikasi, bilah aplikasi, tampilan HP (docs/11) ===== */
.judul-portal { color: var(--teks); text-decoration: none; }
.roda-gigi { font-size: 22px; text-decoration: none; color: var(--teks); padding: 4px 8px; border-radius: 8px; line-height: 1; }
.roda-gigi:hover, .roda-gigi.aktif { background: var(--aksen-lembut); }
.grid-aplikasi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; max-width: 560px; margin-top: 18px; }
.ikon-aplikasi { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--teks); }
.ikon-gambar { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: var(--merek); font-size: 34px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.ikon-nama { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ikon-ket { font-size: 12px; color: var(--teks-redup); }
a.ikon-aplikasi:hover .ikon-gambar { filter: brightness(.95); }
.ikon-aplikasi.mati { opacity: .75; cursor: default; }
.ikon-aplikasi.mati .ikon-gambar { background: #d1d5db; filter: grayscale(1); box-shadow: none; }
.bar-aplikasi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 20px; background: var(--aksen-lembut); border-bottom: 1px solid var(--garis); }
.kembali-aplikasi { color: var(--aksen-tautan); text-decoration: none; font-weight: 600; padding: 6px 4px; }
.tombol-menu { display: none; }
.agenda-hari { padding: 8px 10px; border-bottom: 1px solid var(--garis); }
.agenda-hari.libur { background: #fee2e2; }
.agenda-hari.hariini { box-shadow: inset 4px 0 0 var(--aksen-tautan); background: var(--aksen-lembut); }
.agenda-tanggal { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.agenda .kal-batang { margin: 3px 0; font-size: 14px; }
.kal-bulan.agenda { min-width: 0; }

@media screen and (max-width: 640px) {
  body { font-size: 15px; }
  .bar { padding: 10px 16px; }
  .kanan { font-size: 14px; }
  .bar-aplikasi { padding: 8px 16px; }
  .bar-aplikasi .nama-aplikasi { flex: 1; }
  .tombol-menu { display: inline-block; }
  .bar-aplikasi .menu-atas { display: none; flex: 0 0 100%; flex-direction: column; }
  .bar-aplikasi .menu-atas.terbuka { display: flex; }
  .menu-atas a, .subnav a, .kembali-aplikasi, .roda-gigi { min-height: 44px; display: inline-flex; align-items: center; }
  /* Tombol dan isian minimal 44px (grid feed dan batang kalender dikecualikan: kecil agar muat). */
  button:not(.kf-tombol), input[type=text], input[type=email], input[type=password], input[type=date], input[type=month], select { min-height: 44px; font-size: 16px; }
  input[type=checkbox] { width: 22px; height: 22px; }
  label { font-size: 15px; }
  .grid-aplikasi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .ikon-gambar { width: 64px; height: 64px; font-size: 30px; }
  /* Tabel menjadi kartu bertumpuk: tiap sel "label: nilai" (label diisi app.js dari judul kolom). */
  .tabel { display: block; border: 0; background: transparent; }
  .tabel thead { display: none; }
  .tabel tbody { display: block; }
  .tabel tr { display: block; background: #fff; border: 1px solid var(--garis); border-radius: 8px; margin-bottom: 10px; padding: 6px 12px; }
  .tabel td { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed var(--garis); padding: 6px 0; text-align: right; overflow-wrap: anywhere; }
  .tabel td:last-child { border-bottom: 0; }
  .tabel td::before { content: attr(data-label); flex: 0 0 38%; font-weight: 600; color: var(--teks-redup); text-align: left; }
  .tabel td[colspan]::before, .tabel td:not([data-label])::before { content: none; }
  .tabel td.aksi { white-space: normal; flex-wrap: wrap; justify-content: flex-end; }
  .tabel td.aksi button { min-height: 44px; }
  /* Isian tambah/ubah tampil penuh layar; tombol Simpan/Batal tetap terlihat di bawah. */
  .form-kartu:not(.kal-ringkasan):not(.biasa) { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; overflow: auto; padding: 16px 16px 0; background: #fff; }
  .form-kartu:not(.kal-ringkasan):not(.biasa) > .baris-form:last-child { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--garis); margin: 12px -16px 0; padding: 10px 16px; }
  .slot-ubah.terbuka { position: static; padding: 0; background: transparent; }
  /* Feed: tetap 3 kolom; teks kecil dan webinar disembunyikan agar tidak terpotong (detail lengkap saat kartu diklik). */
  .feed-grid { gap: 2px; }
  .kartu-feed { padding: 4px; font-size: 9px; }
  .kartu-feed .kf-kecil { display: none; }
  .kf-jenis { font-size: 1.35em; }
  .kf-tombol { padding: 0 5px; min-height: 0; font-size: 10px; }
  /* Timeline: geser ke samping, kolom nama menempel di kiri. */
  .gantt-label { flex-basis: 110px; font-size: 12px; padding: 6px; }
  .kal-saringan { flex-direction: column; align-items: stretch; }
  .kal-saringan select { max-width: none; width: 100%; }
}