/* =========================================================================
   TAMPILAN BARU SIAKAD — gaya lapisan navigasi (lihat tampilan-baru.js)
   Warna mengikuti prototipe: marun #4f141d / #7b2330, emas #e2b46f,
   latar #f7f2ed, kartu #fffdfb, garis #eadfd9.
   Semua aturan diawali html.tb supaya "Tampilan lama" kembali utuh.
   ========================================================================= */
html.tb body{background:#f7f2ed;}
html.tb #sidebar{background:#4f141d;width:264px;}
html.tb .sb-brand{border-bottom-color:rgba(255,255,255,.1);}
html.tb .sb-user{margin:12px 12px 4px;padding:10px 12px;}
html.tb .sb-user .who{margin-bottom:0;}
html.tb #rolePillsWrap{display:none !important;}
html.tb .sb-menu{padding:8px 10px 12px;display:flex;flex-direction:column;gap:2px;}

.tb-sb-ruang{width:100%;border:0;background:transparent;color:#f0dcd2;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 12px;min-height:42px;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;}
.tb-sb-ruang span{flex:1;min-width:0;}
.tb-sb-ruang i{font-style:normal;font-size:11px;color:#d8ad91;font-weight:600;}
.tb-sb-ruang:hover{background:rgba(255,255,255,.07);}
.tb-sb-ruang.aktif{background:rgba(215,163,94,.24);color:#fff8ec;font-weight:700;}
.tb-sb-sub{display:flex;flex-direction:column;gap:1px;margin:4px 0 8px 22px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16);}
.tb-sb-sub button{width:100%;border:0;background:transparent;color:#e9d3c8;border-radius:8px;padding:0 10px;min-height:34px;font:inherit;font-size:13px;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.tb-sb-sub button:hover{background:rgba(255,255,255,.07);}
.tb-sb-sub button.aktif{background:rgba(255,255,255,.12);color:#fff8ec;font-weight:700;}
.tb-wadah-btn{border:0;background:transparent;padding:2px 0;min-height:26px;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12.5px;font-weight:700;color:#f2d293;cursor:pointer;}
html.tb #sidebar button:focus-visible{outline:2px solid #e2b46f;outline-offset:2px;}

/* ---------- topbar ---------- */
html.tb #topbar{background:#fffdfb;border-bottom:1px solid #eadfd9;backdrop-filter:none;}
html.tb .top-avatar{display:none;}
html.tb .top-right{display:flex;align-items:center;gap:10px;}
.tb-top{display:flex;align-items:center;gap:8px;}
.tb-cari{display:flex;align-items:center;gap:8px;background:#fbf7f3;border:1px solid #dfd1cb;border-radius:12px;padding:0 10px 0 12px;height:42px;width:min(420px,34vw);box-sizing:border-box;}
.tb-cari:focus-within{border-color:#7b2330;box-shadow:0 0 0 3px #f0d5d2;}
.tb-cari .tb-ic{color:#756966;display:flex;}
.tb-cari input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:#2c2220;}
.tb-ikon{position:relative;width:44px;height:44px;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#4a3b38;cursor:pointer;}
.tb-ikon:hover{background:#f7f2ed;}
#tbBtnCari{display:none;}
.tb-badge{position:absolute;top:6px;right:6px;min-width:17px;height:17px;border-radius:9px;background:#b42318;color:#fffdfb;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box;}
.tb-avatar{width:38px;height:38px;border:0;border-radius:50%;background:#7b2330;color:#fffdfb;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
html.tb #topbar button:focus-visible{outline:2px solid #7b2330;outline-offset:2px;}

/* ---------- panel (cari, lonceng, akun, lainnya) ---------- */
.tb-panel{display:none;}
.tb-panel.buka{display:block;position:fixed;top:72px;right:20px;width:400px;max-width:calc(100vw - 24px);max-height:min(620px,calc(100vh - 96px));overflow-y:auto;background:#fffdfb;border:1px solid #eadfd9;border-radius:16px;box-shadow:0 24px 48px -20px rgba(75,17,27,.45);z-index:2400;color:#2c2220;font-size:13px;}
.tb-panel-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid #eadfd9;position:sticky;top:0;background:#fffdfb;z-index:1;}
.tb-panel-kepala b{font-size:15px;font-weight:800;}
.tb-tutup{width:34px;height:34px;border:0;background:#f4ece7;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4a3b38;}
.tb-link{border:0;background:transparent;color:#7b2330;font:inherit;font-size:12.5px;font-weight:700;min-height:36px;cursor:pointer;}
.tb-sub{padding:10px 14px 4px;font-size:11.5px;font-weight:700;color:#756966;}
.tb-catatan{padding:10px 14px 14px;font-size:11.5px;color:#857773;line-height:1.5;}
.tb-kosong{padding:20px 14px;text-align:center;color:#756966;}
.tb-garis{height:1px;background:#f4ece7;margin:6px 0;}
.tb-hasil button,.tb-baris-btn{width:100%;border:0;border-bottom:1px solid #f4ece7;background:transparent;display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.tb-hasil button:hover,.tb-baris-btn:hover,.tb-wadah-pil:hover{background:#fbf5f1;}
.tb-hasil b,.tb-baris-btn b{display:block;font-size:13.5px;font-weight:700;}
.tb-baris-btn{border-bottom:0;min-height:44px;font-size:13px;font-weight:600;}
.tb-baris-btn.besar{border-bottom:1px solid #f4ece7;}
.tb-baris-btn.besar>span:nth-child(2){flex:1;min-width:0;}
.tb-baris-btn i{font-style:normal;font-size:12px;font-weight:700;color:#756966;white-space:nowrap;}
.tb-baris-btn.merah{color:#a3261b;}
.tb-wadah-pil{width:calc(100% - 12px);margin:2px 6px;border:0;background:transparent;border-radius:10px;display:block;padding:8px 10px;text-align:left;font:inherit;color:#2c2220;cursor:pointer;}
.tb-wadah-pil b{display:block;font-size:13px;}
.tb-wadah-pil span{display:block;font-size:11px;color:#756966;line-height:1.35;}
.tb-wadah-pil.aktif{background:#f7e9e9;}
.tb-cari-hp{display:none;margin:10px 14px 0;width:auto;}
.tb-notif{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid #f4ece7;}
.tb-notif.baru{background:#fdf5f0;}
.tb-notif b{display:block;font-size:13.5px;margin-top:2px;}
.tb-kat{display:block;font-size:11px;font-weight:700;}
.tb-kat.warning{color:#7a5200;} .tb-kat.info{color:#1d5b94;}
.tb-d{display:block;font-size:12px;color:#756966;line-height:1.45;margin-top:2px;}

/* ---------- kotak ikon & kartu ---------- */
.tb-kotak{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f7e9e9;color:#651b28;}
.tb-kotak.lihat{background:#f4ece7;color:#5e4f4b;}
.tb-kotak.warning{background:#fbf0d4;color:#7a5200;}
.tb-kotak.info{background:#e6eff9;color:#1d5b94;}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.tb-kartu{border:1px solid #eadfd9;background:#fffdfb;border-radius:14px;display:flex;align-items:flex-start;gap:12px;padding:14px;text-align:left;min-height:84px;font:inherit;color:#2c2220;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.tb-kartu:hover{border-color:#d8b8ad;box-shadow:0 14px 26px -22px rgba(75,17,27,.5);}
.tb-kartu:focus-visible{outline:2px solid #7b2330;outline-offset:2px;}
.tb-isi{flex:1;min-width:0;}
.tb-baris{display:flex;align-items:center;gap:6px;justify-content:space-between;}
.tb-baris b{font-size:14px;font-weight:700;line-height:1.35;}
.tb-baris i{font-style:normal;font-size:11px;font-weight:700;color:#756966;background:#f4ece7;border-radius:7px;padding:2px 7px;white-space:nowrap;}
.tb-kartu .tb-d{font-size:12.5px;line-height:1.4;margin-top:3px;}
.tb-h{margin:0 0 8px;font-size:13px;font-weight:800;color:#651b28;}
.tb-h.lihat{color:#5e4f4b;}
.tb-h-baris{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.tb-h-baris span{font-size:12px;color:#756966;}
.tb-ruang{display:flex;flex-direction:column;gap:18px;}
.tb-ruang-d{margin:0;font-size:13.5px;color:#756966;line-height:1.5;}

/* ---------- beranda ---------- */
.tb-beranda{display:flex;flex-direction:column;gap:18px;margin-bottom:24px;}
.tb-sholat{background:#fffdfb;border:1px solid #eadfd9;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.tb-sholat-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.tb-sholat-kepala b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#2c2220;}
.tb-sholat-kepala b svg{color:#7b2330;}
.tb-sholat-kepala span{font-size:12px;font-weight:700;color:#16653e;background:#e3f3e9;padding:3px 9px;border-radius:8px;}
.tb-sholat-isi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
.tb-sholat-isi div{border-radius:10px;padding:8px 2px;text-align:center;background:#f7f2ed;color:#2c2220;}
.tb-sholat-isi div span{display:block;font-size:11px;font-weight:600;}
.tb-sholat-isi div b{display:block;font-size:15px;font-weight:800;margin-top:2px;}
.tb-sholat-isi div.lewat{background:transparent;color:#857773;}
.tb-sholat-isi div.next{background:#7b2330;color:#fff8ec;}
.tb-sembunyi{display:none !important;}

/* ---------- buka layar ini sebagai ---------- */
.tb-sudut{background:#fbf0d4;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin:18px 32px 0;color:#7a5200;}
.tb-sudut b{font-size:13px;font-weight:800;}
.tb-sudut div{display:flex;flex-wrap:wrap;gap:6px;}
.tb-sudut button{border:1px solid #dfd1cb;border-radius:10px;padding:0 12px;min-height:36px;font:inherit;font-size:12.5px;font-weight:700;background:#fffdfb;color:#5e4f4b;cursor:pointer;}
.tb-sudut button.aktif{background:#7b2330;color:#fff8ec;border-color:#7b2330;}
.tb-sudut span{font-size:12px;line-height:1.45;}

/* ---------- menu bawah (HP) ---------- */
.tb-bawah{display:none;}
.tb-coba{position:fixed;right:14px;bottom:14px;z-index:3000;background:#7b2330;color:#fff8ec;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 12px 24px -12px rgba(75,17,27,.6);}

@media (max-width:860px){
  html.tb .tb-bawah{display:flex;}
  .tb-bawah{position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fffdfb;border-top:1px solid #eadfd9;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;box-shadow:0 -10px 24px -20px rgba(75,17,27,.45);}
  .tb-bawah button{flex:1;min-width:0;border:0;background:transparent;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:52px;font:inherit;font-size:11px;font-weight:600;color:#5e4f4b;cursor:pointer;}
  .tb-bawah button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tb-bawah button.aktif{color:#651b28;font-weight:700;background:#f6e3d3;}
  html.tb .content{padding-bottom:96px;}
  .tb-cari{display:none;}
  #tbBtnCari{display:flex;}
  .tb-cari-hp{display:flex;}
  html.tb .date-chip{display:none;}
  .tb-panel.buka{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:78vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom);}
  .tb-sudut{margin:14px 16px 0;}
  .tb-sholat-isi div b{font-size:13.5px;}
}
/* Bar bawah & panel hanya saat sudah masuk (#app.active) */
html.tb #app:not(.active) ~ #tbBawah,html.tb #app:not(.active) ~ #tbPanel{display:none !important;}

@media print{
  .tb-bawah,.tb-panel,.tb-top,.tb-sudut,.tb-coba{display:none !important;}
}
@media (max-width:600px){.tb-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.tb-kartu{transition:none;}}

/* Naskah Ujian dipindah ke lonceng (13 Okt 2026) */
html.tb #dashNaskah{display:none !important;}
html.tb button.tb-notif{width:100%;text-align:left;font:inherit;color:inherit;background:#fff;border:0;border-bottom:1px solid #f4ece7;cursor:pointer;}
html.tb button.tb-notif.baru{background:#fdf5f0;}
html.tb button.tb-notif:hover{background:#f8efe9;}

/* Simpan tanpa menunggu: layar tunggu penyimpanan jadi tanda kecil, tidak mengunci */
html.tb #layarSibuk.tb-latar{inset:auto;left:12px;bottom:52px;background:none;pointer-events:none;}
html.tb #layarSibuk.tb-latar .sibuk-kotak{padding:9px 14px;font-size:12.5px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
@media (max-width:860px){html.tb #layarSibuk.tb-latar{bottom:120px;}}