/* =====================================================================
   POPUP B (pb2-) — modal Closing, Booking, Kewangan, Follow-up, Harga,
   Pelanggan, Notifikasi, T&C dll. Hanya token tema (.x-t-* -> --tb/--tf/--ts).
   Kotak asas = mk-modal (ui.css). Fail ini cuma tambah tona bahagian
   dinamik (.detail-seksyen dirender app.js), medan seragam & sentuhan.
   ===================================================================== */
.pb2-modal{max-width:640px}
.pb2-modal.modal-besar{max-width:720px}

/* medan seragam (sentuhan 46px, 15px elak zum iOS) */
.pb2-modal .modal-isi .input-group{margin:0;min-width:0}
.pb2-modal .modal-isi .input-group>label{font-size:12.5px;font-weight:700;color:var(--teks2)}
.pb2-modal .modal-isi input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.pb2-modal .modal-isi select,.pb2-modal .modal-isi textarea{min-height:46px;font-size:15px;max-width:100%;min-width:0}
.pb2-modal .modal-isi textarea{min-height:84px}
.pb2-modal .modal-isi input[type=checkbox]{width:22px!important;height:22px;flex:none}
.pb2-modal .modal-isi .borang-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
@media(min-width:560px){.pb2-modal .modal-isi .borang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pb2-modal .modal-isi label:has(>input[type=checkbox]){min-height:44px;align-items:center}
.pb2-modal .btn-kecil{min-height:44px}
.pb2-modal .modal-isi .ralat-field:empty{display:none}

/* bahagian dinamik (render app.js guna .detail-seksyen > h4) = kad bertajuk berwarna */
.pb2-modal .modal-isi .detail-seksyen{margin:0;padding:0 12px 12px;border:var(--tebal-garis,1px) solid var(--garis-kad);border-radius:14px;overflow:hidden;background:var(--panel);min-width:0}
.pb2-modal .modal-isi .detail-seksyen>h4{margin:0 -12px 10px;padding:9px 12px;border:0;background:var(--tb);color:var(--tf);font-size:13px;font-weight:800;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.pb2-modal .modal-isi .baris-detail{padding:9px 12px;border-radius:11px;background:var(--bg3);border-bottom:0;margin-bottom:6px}
.pb2-modal .modal-isi .detail-seksyen .baris-detail{background:var(--bg3)}

/* tab (Notifikasi, My Checklist, Booking Reminder) */
.pb2-modal>.tabs{flex:none;overflow-x:auto;padding:8px 12px;gap:6px;border-bottom:1px solid var(--line-halus);scrollbar-width:none}
.pb2-modal>.tabs::-webkit-scrollbar{display:none}
.pb2-modal .tabs .tab{min-height:44px;white-space:nowrap;flex:none}
.pb2-modal .modal-isi>.tabs{overflow-x:auto;scrollbar-width:none}
.pb2-modal .modal-isi>.tabs .tab{min-height:44px;white-space:nowrap}

/* kepala dengan butang tambahan (Notifikasi) */
.pb2-mh-aksi{display:flex;align-items:center;gap:8px;flex:none}
.pb2-modal .mk-mh .btn{min-height:44px;background:color-mix(in srgb,var(--tf) 12%,transparent);color:var(--tf);border-color:transparent;font-weight:700}

/* nota kaki / ringkasan */
.pb2-nota{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.55;color:var(--teks2);background:var(--bg3);border-radius:12px;padding:10px 12px}
.pb2-nota i{margin-top:3px;color:var(--ts)}
.pb2-nota>div{min-width:0;overflow-wrap:anywhere}
.pb2-nota b{color:var(--teks)}
.pb2-ringkas{padding:11px 13px;border-radius:12px;background:var(--tb);color:var(--teks);border:1px solid color-mix(in srgb,var(--ts) 40%,transparent);font-size:13px;line-height:1.7;overflow-wrap:anywhere;min-width:0}
.pb2-ringkas:empty{display:none}

/* kad senarai dalam modal (tugas-grid, kad-r) tak melimpah */
.pb2-modal .tugas-grid{min-width:0}
.pb2-modal .modal-isi img,.pb2-modal .modal-isi table{max-width:100%}
.pb2-modal .modal-isi .jadual-bekas,.pb2-modal .modal-isi .jadual-wrap{overflow-x:auto}
.pb2-modal .mk-kaki-lekat{flex-wrap:wrap}
.pb2-modal .mk-kaki-lekat .btn{flex:1 1 auto}
@media(prefers-reduced-motion:no-preference){.pb2-modal .btn:active,.pb2-modal .tab:active{transform:scale(.97);transition:transform .1s ease-out}}