/* STC XXI Technical Report: tampilan ringkas saat dibuka sebagai aplikasi terpasang (PWA).
   Hanya aktif jika <html> memiliki kelas "pwa" (diatur di index.html sebelum halaman tampil),
   sehingga tampilan di browser biasa tidak berubah. */

html.pwa body { font-size: 14px; }
html.pwa #main header { padding: 8px 12px; min-height: 0; }
html.pwa #ptitle { font-size: 16px !important; }
html.pwa #psub { display: none !important; }
html.pwa .hlogo { height: 26px !important; width: auto !important; }
html.pwa .thm,
html.pwa .sbtn,
html.pwa #bell { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; }
html.pwa .thm .ic, html.pwa #bell .ic { width: 16px !important; height: 16px !important; }
html.pwa .uh-tg, html.pwa #uhtg { gap: 4px; }
html.pwa #av, html.pwa .av { width: 30px !important; height: 30px !important; font-size: 12px !important; }
html.pwa .uh-who b { font-size: 12px; }
html.pwa .uh-who .badge { font-size: 10px; padding: 1px 6px; }
html.pwa #hname { font-size: 12px; }

/* Area konten */
html.pwa #view { padding: 10px 12px 96px !important; }
html.pwa .dx { gap: 0 !important; }
html.pwa .dx > * + * { margin-top: 10px !important; }

/* Sapaan */
html.pwa .dx-top { padding: 0 !important; }
html.pwa .dx-top small { font-size: 10px !important; letter-spacing: .08em !important; }
html.pwa .dx-top h1 { font-size: 17px !important; line-height: 1.25 !important; margin: 2px 0 0 !important; }
html.pwa .dx-sum { font-size: 12px !important; padding: 4px 10px !important; margin-top: 6px !important; }

/* Sorotan: carousel dibuat pendek */
html.pwa .dsl-w .sh h2 { font-size: 13px !important; }
html.pwa .dsl-w .sh { margin-bottom: 6px !important; }
html.pwa .dsl-v, html.pwa .dsl { height: 112px !important; min-height: 0 !important; }
html.pwa .dsl { border-radius: 12px !important; }
html.pwa .dsl-x { padding: 10px 12px !important; }
html.pwa .dsl-x small { font-size: 9px !important; letter-spacing: .08em !important; }
html.pwa .dsl-x b { font-size: 14px !important; line-height: 1.25 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.pwa .dsl-x > span, html.pwa .dsl-x > .kbh, html.pwa .dsl-x .kbg { display: none !important; }
html.pwa .dsl-art, html.pwa .dsl-im, html.pwa .seatart, html.pwa .dx-img, html.pwa .lens-glow { display: none !important; }
html.pwa .dsl-b { width: 26px !important; height: 26px !important; font-size: 16px !important; }
html.pwa .dsl-d { bottom: 6px !important; }

/* Chip navigasi kategori */
html.pwa .dsl-tabs { gap: 6px !important; }
html.pwa .dsl-tabs button, html.pwa .dsl-tabs a { font-size: 12px !important; padding: 4px 10px !important; }

/* Pencarian */
html.pwa .dsx { margin: 0 !important; }
html.pwa .dsr-b { height: 40px !important; border-radius: 12px !important; padding: 0 10px !important; }
html.pwa .dsr-lb { display: none !important; }
html.pwa .dsr-b input, html.pwa #dq { font-size: 13px !important; }
html.pwa .dsr-b .ic { width: 16px !important; height: 16px !important; }

/* Catat cepat */
html.pwa .dx-lb { font-size: 10px !important; letter-spacing: .08em !important; margin: 0 0 6px !important; }
html.pwa .dx-qg { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html.pwa .dx-q { flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 8px !important; border-radius: 12px !important; text-align: left !important; min-height: 0 !important; }
html.pwa .dx-q i { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 9px !important; }
html.pwa .dx-q i svg, html.pwa .dx-q svg { width: 16px !important; height: 16px !important; }
html.pwa .dx-q b { font-size: 12px !important; line-height: 1.2 !important; display: block; }
html.pwa .dx-q small { font-size: 10px !important; line-height: 1.2 !important; display: block; margin-top: 1px; }
html.pwa .dx-q > span { min-width: 0; }

/* Kartu ringkasan */
html.pwa .dx-kpi { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html.pwa .dx-k { padding: 8px 10px !important; border-radius: 12px !important; gap: 2px !important; min-height: 0 !important; }
html.pwa .dx-k .dx-ki { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 8px !important; }
html.pwa .dx-k .dx-ki svg { width: 14px !important; height: 14px !important; }
html.pwa .dx-k .l { font-size: 11px !important; line-height: 1.2 !important; }
html.pwa .dx-k .n { font-size: 18px !important; line-height: 1.1 !important; }
html.pwa .dx-k small { font-size: 9px !important; line-height: 1.2 !important; }

/* Bagian (section) */
html.pwa .dx-sec { padding: 10px 12px !important; border-radius: 12px !important; }
html.pwa .dx-sec .sh { margin-bottom: 6px !important; gap: 8px !important; }
html.pwa .dx-sec .sh h2 { font-size: 13px !important; line-height: 1.3 !important; }
html.pwa .lnk { font-size: 11px !important; padding: 2px 4px !important; }
html.pwa .dx-cols { gap: 10px !important; }
html.pwa .dx-col { gap: 10px !important; min-width: 0; }

/* Tiket ATS */
html.pwa .tk { gap: 8px !important; padding: 8px !important; }
html.pwa .tk-poster { width: 46px !important; height: auto !important; border-radius: 6px !important; }
html.pwa .tk .tl b { font-size: 13px !important; }
html.pwa .tk .tl small { font-size: 11px !important; }
html.pwa .tk .tm span { font-size: 11px !important; }
html.pwa .tk .pri { font-size: 9px !important; padding: 1px 6px !important; }

/* Aktivitas & pengumuman */
html.pwa .dx-ai { padding: 8px 10px !important; gap: 8px !important; border-radius: 10px !important; }
html.pwa .dx-ai .m b { font-size: 13px !important; }
html.pwa .dx-ai .m small { font-size: 10px !important; }
html.pwa .dx-ai .kat { font-size: 9px !important; padding: 2px 6px !important; }
html.pwa .dx-ai em { font-size: 16px !important; }
html.pwa .dx-al { gap: 6px !important; }

/* Kapasitas studio */
html.pwa .dstu-b { gap: 8px !important; }
html.pwa .dstu-card { padding: 8px 10px !important; border-radius: 12px !important; gap: 2px !important; }
html.pwa .dstu-card strong { font-size: 18px !important; line-height: 1.1 !important; }
html.pwa .dstu-card .nm { font-size: 11px !important; }
html.pwa .dstu-card small { font-size: 9px !important; }
html.pwa .dstu-icon { display: none !important; }
html.pwa .dstu-t { padding: 8px 10px !important; font-size: 12px !important; }
html.pwa .dstu-t strong { font-size: 14px !important; }

/* Tombol dan kartu umum di halaman lain */
html.pwa .btn { padding: 8px 12px !important; font-size: 13px !important; border-radius: 10px !important; }
html.pwa .card { padding: 12px !important; border-radius: 12px !important; }
html.pwa .empty { padding: 12px !important; font-size: 12px !important; }
html.pwa .empty b { font-size: 13px !important; }
html.pwa input, html.pwa select, html.pwa textarea { font-size: 14px; }
html.pwa h2 { font-size: 16px !important; }

/* Navigasi bawah: lebih rendah dan ringkas */
/* Bilah bawah: tinggi tetap memperhitungkan area aman (safe-area) di HP agar tidak ada celah hijau di bawahnya */
html.pwa #tabs { height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; background: var(--card) !important; }
html.pwa #tabs a.pl .pl-b { margin-top: -28px !important; width: 52px !important; height: 52px !important; }
html.pwa #nav a, html.pwa #tabs a { font-size: 10px !important; }
html.pwa #nav svg, html.pwa #tabs svg { width: 18px !important; height: 18px !important; }

/* Sorotan (carousel informasi) disembunyikan agar beranda lebih ringkas */
html.pwa .dsl-w { display: none !important; }
html.pwa .dx-k { text-align: left !important; align-items: flex-start !important; }
html.pwa .dx-k.day .dx-ki { background: rgba(255,255,255,.18) !important; }

/* Monitoring AC: kartu per ruangan dibuat ringkas */
html.pwa .dac-b { gap: 6px !important; }
html.pwa .dac-c { padding: 6px 8px !important; border-radius: 10px !important; min-height: 0 !important; gap: 0 !important; }
html.pwa .dac-c b { font-size: 12px !important; line-height: 1.2 !important; letter-spacing: .04em !important; }
html.pwa .dac-c span { font-size: 11px !important; line-height: 1.2 !important; }
html.pwa .dac-c i, html.pwa .dac-c .dot { width: 6px !important; height: 6px !important; }
html.pwa .dac-c small { font-size: 10px !important; }
html.pwa .dac-grid, html.pwa .dac-b > div { gap: 6px !important; }
html.pwa .dac-c { padding-right: 22px !important; position: relative; }

/* ==========================================================================
   PENYEMPURNAAN UI/UX BERANDA (mode aplikasi terpasang)
   Prinsip: satu skala jarak (4/8/12/16px), hierarki jelas, target sentuh
   minimal 44px, umpan balik saat ditekan, dan label yang konsisten.
   ========================================================================== */

/* Header: tetap di atas, sedikit transparan, jarak lebih rapi */
html.pwa #main > header {
  position: sticky; top: 0; z-index: 20;
  padding: 10px 16px !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html.pwa #ptitle { font-size: 17px !important; letter-spacing: .01em; }
html.pwa .thm, html.pwa .sbtn, html.pwa #bell {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 12px !important;
}
html.pwa #av, html.pwa .av { width: 34px !important; height: 34px !important; }

/* Ruang konten */
html.pwa #view { padding: 12px 16px 104px !important; }
html.pwa .dx > * + * { margin-top: 16px !important; }

/* Sapaan: eyebrow tanggal, nama, lalu ringkasan status sebagai tombol */
html.pwa .dx-top small {
  display: block; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase; opacity: .85;
}
html.pwa .dx-top h1 { font-size: 22px !important; line-height: 1.2 !important; margin: 4px 0 0 !important; font-weight: 700 !important; }
html.pwa .dx-sum {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px !important; font-weight: 600 !important; padding: 8px 14px !important;
  border-radius: 999px !important; margin-top: 12px !important;
}

/* Pencarian: lebih tinggi, mudah disentuh */
html.pwa .dsx { margin: 0 !important; }
html.pwa .dsr-b {
  height: 48px !important; border-radius: 14px !important; padding: 0 14px !important;
  gap: 10px; box-shadow: none !important;
}
html.pwa .dsr-b input, html.pwa #dq { font-size: 15px !important; }
html.pwa #dq::placeholder { font-size: 14px; }

/* Label bagian (eyebrow) konsisten di semua bagian */
html.pwa .dx-lb,
html.pwa .dx-sec .sh h2,
html.pwa .dx-kpi-lb {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase; margin: 0 0 10px !important; opacity: .8;
}

/* Catat cepat: kartu aksi dengan ikon, teks, dan umpan balik tekan */
html.pwa .dx-qg { gap: 10px !important; }
html.pwa .dx-q {
  min-height: 60px !important; padding: 12px !important; gap: 12px !important;
  border-radius: 16px !important; align-items: center !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
html.pwa .dx-q:active { transform: scale(.98); }
html.pwa .dx-q i {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border-radius: 12px !important;
}
html.pwa .dx-q i svg { width: 18px !important; height: 18px !important; }
html.pwa .dx-q b { font-size: 14px !important; font-weight: 700 !important; }
html.pwa .dx-q small { font-size: 12px !important; line-height: 1.3 !important; margin-top: 2px !important; opacity: .8; }

/* Ringkasan: satu tile utama (hari ini) dan tile status yang jelas */
html.pwa .dx-kpi { gap: 10px !important; }
html.pwa .dx-k {
  min-height: 96px !important; padding: 14px !important; border-radius: 16px !important;
  justify-content: space-between !important;
}
html.pwa .dx-k .l { font-size: 13px !important; font-weight: 600 !important; }
html.pwa .dx-k .n { font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important; margin-top: 6px; }
html.pwa .dx-k small { font-size: 12px !important; margin-top: 6px; opacity: .8; }
html.pwa .dx-k .dx-ki { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; }

/* Bagian: kartu rata dengan bayangan lembut */
html.pwa .dx-sec {
  padding: 16px !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
html.pwa .dx-sec .sh { margin-bottom: 12px !important; display: flex; align-items: center; justify-content: space-between; }
html.pwa .dx-sec .sh h2 { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important; margin: 0 !important; }
html.pwa .lnk { font-size: 13px !important; font-weight: 600 !important; min-height: 32px; padding: 4px 8px !important; }

/* Daftar aktivitas dan ATS: baris dengan pemisah halus */
html.pwa .dx-al { gap: 0 !important; }
html.pwa .dx-ai {
  min-height: 56px !important; padding: 12px 4px !important; border-radius: 0 !important;
  border-bottom: 1px solid rgba(127,127,127,.18); background: transparent !important;
}
html.pwa .dx-ai:last-child { border-bottom: 0; }
html.pwa .dx-ai .m b { font-size: 14px !important; font-weight: 600 !important; }
html.pwa .dx-ai .m small { font-size: 12px !important; }
html.pwa .dx-ai em { font-size: 20px !important; opacity: .5; }

/* Kapasitas studio: kartu angka yang mudah dibaca */
html.pwa .dstu-card { min-height: 72px; padding: 12px !important; border-radius: 14px !important; }
html.pwa .dstu-card strong { font-size: 22px !important; font-weight: 700 !important; }
html.pwa .dstu-card .nm { font-size: 12px !important; font-weight: 600 !important; }
html.pwa .dstu-t { border-radius: 14px !important; padding: 12px 14px !important; font-size: 13px !important; }

/* Monitoring AC: kartu ruangan dengan status jelas */
html.pwa .dac-c { min-height: 60px !important; padding: 10px 12px !important; border-radius: 14px !important; }
html.pwa .dac-c b { font-size: 13px !important; font-weight: 700 !important; }
html.pwa .dac-c span { font-size: 12px !important; margin-top: 2px; }

/* Tiket ATS */
html.pwa .tk { padding: 12px 0 !important; border-bottom: 1px solid rgba(127,127,127,.18); }
html.pwa .tk:last-child { border-bottom: 0; }
html.pwa .tk-poster { width: 52px !important; border-radius: 10px !important; }
html.pwa .tk .tl b { font-size: 14px !important; font-weight: 600 !important; }
html.pwa .tk .tl small { font-size: 12px !important; }

/* Keadaan kosong: tetap jelas dan tidak memakan tempat */
html.pwa .empty { padding: 16px !important; border-radius: 14px !important; text-align: center; }
html.pwa .empty b { font-size: 14px !important; display: block; margin-bottom: 4px; }

/* Bilah bawah: tombol + sejajar, label jelas, area sentuh cukup */
html.pwa #tabs a { min-height: 44px; font-size: 11px !important; font-weight: 600 !important; }
html.pwa #tabs a[aria-current=page] { font-weight: 700 !important; }

/* Gerakan dikurangi bila pengguna memintanya */
@media (prefers-reduced-motion: reduce) {
  html.pwa *, html.pwa *::before, html.pwa *::after { transition: none !important; animation: none !important; }
}

/* Catat cepat: ikon di atas, judul dan keterangan di bawah agar teks tidak terlalu sempit */
html.pwa .dx-q { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
html.pwa .dx-q > span { display: block; width: 100%; }
html.pwa .dx-q i { margin-bottom: 2px; }
html.pwa .dx-qg > .dx-q:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; }

/* ==========================================================================
   PADAT & RAPI (mode aplikasi terpasang): ruang lebih sedikit, tetap modern
   ========================================================================== */
html.pwa #main > header { padding: 8px 14px !important; }
html.pwa #view { padding: 10px 14px 96px !important; }
html.pwa .dx > * + * { margin-top: 12px !important; }
html.pwa .dx-top h1 { font-size: 20px !important; }
html.pwa .dx-sum { margin-top: 8px !important; padding: 6px 12px !important; font-size: 12px !important; }
html.pwa .dsx { margin-top: 0 !important; }
html.pwa .dsr-b { height: 44px !important; }
html.pwa .dx-lb, html.pwa .dx-sec .sh h2 { margin-bottom: 8px !important; }

/* Catat cepat: dua kolom lebih ringkas, judul satu baris */
html.pwa .dx-qg { gap: 8px !important; }
html.pwa .dx-q { min-height: 0 !important; padding: 10px !important; gap: 6px !important; border-radius: 14px !important; }
html.pwa .dx-q i { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 10px !important; margin-bottom: 0 !important; }
html.pwa .dx-q b { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pwa .dx-q small { font-size: 11px !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html.pwa .dx-qg > .dx-q:last-child:nth-child(odd) { padding: 10px 12px !important; }

/* Ringkasan: tile lebih pendek */
html.pwa .dx-kpi { gap: 8px !important; }
html.pwa .dx-k { min-height: 0 !important; padding: 10px 12px !important; border-radius: 14px !important; gap: 0 !important; }
html.pwa .dx-k .dx-ki { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 9px !important; }
html.pwa .dx-k .n { font-size: 22px !important; margin-top: 4px !important; }
html.pwa .dx-k small { margin-top: 2px !important; font-size: 11px !important; }

/* Bagian: padding lebih kecil */
html.pwa .dx-sec { padding: 12px !important; border-radius: 14px !important; }
html.pwa .dx-sec .sh { margin-bottom: 8px !important; }
html.pwa .dx-ai { min-height: 0 !important; padding: 9px 2px !important; }
html.pwa .tk { padding: 9px 0 !important; }
html.pwa .dstu-card { min-height: 0 !important; padding: 10px !important; }
html.pwa .dac-c { min-height: 0 !important; padding: 8px 10px !important; }
html.pwa .dx-k .dx-ki { margin-bottom: 6px !important; }

/* Menu samping (drawer) di mode terpasang: tombol tutup tidak menimpa judul */
html.pwa #side .brand { position: relative; padding-right: 60px !important; }
html.pwa #side .sb-close { position: absolute !important; top: 50%; right: 12px; transform: translateY(-50%); width: 40px !important; height: 40px !important; border-radius: 12px !important; }
html.pwa #side .brand img { width: 46px !important; }
html.pwa #side .brand b { font-size: 15px !important; }

/* Bilah navigasi bawah: beri ruang minimum 16px di bawah label agar tidak tertutup strip navigasi sistem */
html.pwa #tabs {
  height: calc(60px + max(env(safe-area-inset-bottom, 0px), 16px)) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
}
html.pwa #tabs a { padding-bottom: 4px !important; }

/* Sheet "Buat laporan baru": sembunyikan garis scroll yang mengganggu; tetap bisa digulir dengan sentuhan */
html.pwa #nsheet, html.pwa #nsheet *, html.pwa #nsbox, html.pwa #nsgrid, html.pwa #npanel {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.pwa #nsheet::-webkit-scrollbar, html.pwa #nsheet *::-webkit-scrollbar,
html.pwa #nsbox::-webkit-scrollbar, html.pwa #nsgrid::-webkit-scrollbar {
  width: 0 !important; height: 0 !important; display: none !important;
}

/* Menu samping di HP: hilangkan handle geser (khusus PC) dan garis tepi kanan yang mengganggu */
html.pwa #side .sb-rz { display: none !important; }
html.pwa #side { box-shadow: none !important; border-right: 0 !important; }
html.pwa #side::after { display: none !important; }