/* Tema dashboard admin (desktop + mobile). Dimuat selepas app.css. Sentiasa cerah. */
body.adm{--bg:#f5f6fa;--card:#fff;--tx:#111c34;--mut:#6b7280;--bd:#e5e7eb;--navy:#0f1b33;--navy2:#12244a;--blue:#1e40af;--g:#166534;
  background:var(--bg);color:var(--tx);color-scheme:light;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.adm a{color:var(--blue)}
.adm .input,.adm select.input{background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:9px 12px;font-size:.9rem}
.adm .input:focus{outline:2px solid #93a4c9;border-color:#93a4c9}
.adm .btn{background:var(--navy);color:#fff;border-radius:8px;font-weight:600;font-size:.9rem;padding:9px 14px}
.adm .btn:active{background:#000}
.adm .btn.out{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.adm .btn.sec{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.adm .btn.bad{background:#fff;color:#b91c1c;border:1px solid #fecaca}
.adm .btn:disabled{opacity:.45}
.adm .card,.adm .panel{background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:none}
.adm .muted{color:var(--mut)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Lencana status */
.bdg{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:600;background:#eef0f4;color:#4b5563;white-space:nowrap}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.DELIVERED{background:#e3f4ea;color:#166534}.bdg.PAID{background:#e3ebfb;color:#1e40af}.bdg.INTERESTED{background:#fdf0d5;color:#92400e}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:700;background:#eef0f4;color:#4b5563}
.av{width:30px;height:30px;border-radius:50%;background:#e8ecf4;color:#475569;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex:none}
.adm .live{background:#9ca3af}.adm .live.on{background:#16a34a}

/* ===== Desktop ===== */
.adm .dsk{display:flex;min-height:100vh}
.adm .side{width:240px;background:var(--navy2);color:#c3cde0;padding:18px 14px;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.15rem;margin:0 4px 18px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--navy2);display:flex;align-items:center;justify-content:center}
.ws{border:1px solid #2a3d66;border-radius:10px;padding:10px 12px;margin-bottom:18px}
.ws b{display:block;color:#fff;font-size:.82rem}.ws small{font-size:.72rem;color:#8fa0c0}
.nav-h{font-size:.68rem;letter-spacing:.06em;color:#7d8fb3;margin:14px 8px 6px;font-weight:700}
.adm .side a{display:flex;align-items:center;gap:10px;color:#c3cde0;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.88rem;margin-bottom:2px}
.adm .side a:hover{background:#1a3057;color:#fff}.adm .side a.on{background:#1f3a6b;color:#fff}
.adm .side .cnt{margin-left:auto;font-size:.72rem;background:#2a4a85;color:#fff;border-radius:99px;padding:0 7px}
.side .grow{flex:1}
.me{display:flex;align-items:center;gap:10px;border-top:1px solid #2a3d66;padding-top:14px;color:#fff}
.me .av{background:#2a4a85;color:#fff}.me b{display:block;font-size:.82rem}.me small{font-size:.7rem;color:#8fa0c0}
.me button{margin-left:auto;background:none;border:0;color:#8fa0c0;cursor:pointer;padding:4px}
.adm .content{flex:1;min-width:0}
.topbar{height:48px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:.82rem;color:var(--mut)}
.topbar b{color:var(--tx)}
.adm .main{padding:22px 28px 40px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:16px}
.pagehead h1{margin:0 0 4px;font-size:1.6rem;font-weight:600}.pagehead p{margin:0;font-size:.85rem;color:var(--mut)}
.pagehead .st{text-align:right;font-size:.78rem;color:var(--mut)}.pagehead .st b{color:#15803d;font-weight:600}
.adm .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.adm .metric{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px 18px;position:relative}
.adm .metric small{color:var(--mut);font-size:.8rem;display:block;margin-bottom:6px}
.adm .metric b{font-size:2rem;font-weight:500;line-height:1.1}.adm .metric .u{font-size:.85rem;color:var(--mut);margin-left:6px}
.adm .metric .sub{font-size:.72rem;color:var(--mut);border-top:1px solid #f0f1f5;margin-top:12px;padding-top:9px}
.metric .ico{position:absolute;right:16px;top:16px;color:#6b7280}
.panel{padding:0}
.panel-h{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 0;gap:12px}
.panel-h h2{margin:0;font-size:1.05rem;font-weight:600}.panel-h p{margin:2px 0 0;font-size:.78rem;color:var(--mut)}
.panel-h .acts{display:flex;gap:10px}
.panel-h .btn{display:inline-flex;align-items:center;gap:8px}
.tabsx{display:flex;gap:22px;padding:0 20px;margin-top:16px;border-bottom:1px solid var(--bd)}
.tabsx button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 0;font:inherit;font-size:.85rem;color:var(--mut);cursor:pointer;margin-bottom:-1px}
.tabsx button.on{color:var(--blue);border-color:var(--blue);font-weight:600}
.tabsx .pill{margin-left:6px}
.adm .toolbar{padding:14px 20px;margin:0}
.adm .toolbar .input{min-width:0}
.sbox{position:relative;flex:0 1 300px}.sbox .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9ca3af;width:16px;height:16px}
.sbox .input{padding-left:34px;width:100%}
.adm .tw{border-top:1px solid var(--bd)}
.adm table.t{border:0;border-radius:0;background:#fff}
.adm table.t th{background:#f8f9fc;color:#6b7280;font-size:.7rem;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--bd)}
.adm table.t td{padding:10px 12px;border-bottom:1px solid #eef0f4;font-size:.85rem}
.adm table.t tbody tr:hover{background:#fafbfd}
.pcell{display:flex;align-items:center;gap:10px}
.adm .name-in{font-weight:600;color:var(--tx);font-size:.85rem;min-width:120px}
.adm .name-in::placeholder{color:#9ca3af;font-weight:400}
.ratio{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mbar{width:56px;height:5px;background:#e5e7eb;border-radius:9px;overflow:hidden;display:inline-block}.mbar i{display:block;height:100%;background:var(--navy)}
.adm select.bk{appearance:none;-webkit-appearance:none;border:0;border-radius:99px;padding:4px 24px 4px 10px;font-size:.75rem;font-weight:600;background:#eef0f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;color:#4b5563;cursor:pointer}
.adm select.bk.INTERESTED{background-color:#fdf0d5;color:#92400e}.adm select.bk.PAID{background-color:#e3ebfb;color:#1e40af}.adm select.bk.DELIVERED{background-color:#e3f4ea;color:#166534}
.adm .sq button{width:21px;height:21px;border-radius:5px;border:1px solid #d5d9e2;color:#6b7280;background:#fff}
.adm .sq button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.adm .sq button.cur{outline:2px solid #d97706;outline-offset:1px}
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--bd);font-size:.8rem;color:var(--mut);gap:12px;flex-wrap:wrap}
.pager .l,.pager .r{display:flex;align-items:center;gap:10px}
.pager select{width:auto;padding:6px 10px}
.pager button.pg{min-width:32px;height:32px;border:1px solid var(--bd);background:#fff;border-radius:7px;font:inherit;font-size:.8rem;cursor:pointer;padding:0 10px;color:var(--tx)}
.pager button.pg.on{background:var(--navy);color:#fff;border-color:var(--navy)}.pager button.pg:disabled{opacity:.4;cursor:default}
.foot-note{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut);margin:12px 4px 0}
.qrcard{padding:20px;max-width:640px;margin-bottom:14px}
.adm .qrbox{padding:20px}
/* Siri & Kod QR: 2 lajur — jadual siri kiri, kod QR kanan */
.two-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:16px;align-items:start}
.two-col .qrcard{max-width:none;margin-bottom:0}
@media (max-width:1180px){.two-col{grid-template-columns:1fr}.two-col .qrcard{margin-bottom:14px}}
@media (max-width:1180px){.adm .metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.adm .side{display:none}}

/* ===== Mobile admin ===== */
.m{max-width:480px;margin:0 auto;padding:0 0 90px}
.m-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 4px;font-size:.7rem;letter-spacing:.04em;color:var(--mut);text-transform:uppercase}
.m-top .lv{display:flex;align-items:center;gap:4px;color:#15803d;text-transform:none;font-size:.8rem;font-weight:600;letter-spacing:0}
.m-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 16px}
.mc{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px}
.mc h3{margin:0 0 6px;font-size:.9rem;font-weight:600}.mc .n{font-size:2.3rem;font-weight:500;line-height:1}.mc .n small{font-size:.85rem;color:var(--mut);margin-left:6px}
.mc p{margin:8px 0 0;font-size:.72rem;color:var(--mut)}
.strip{border-left:3px solid var(--navy2);padding:2px 0 2px 12px;margin:6px 16px 14px}.strip b{display:block;font-size:.95rem}.strip small{color:var(--mut);font-size:.75rem}
.m-sec{padding:14px 16px;background:#fff;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.m-sec h2{margin:0 0 10px;font-size:1rem}
.m-search{position:relative;margin:0 16px 14px}.m-search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6b7280}
.m-search .input{padding:14px 14px 14px 44px;border-radius:12px;font-size:1rem}
.m-h{display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:6px 0 10px}.m-h h2{margin:0;font-size:1.15rem;font-weight:600}.m-h span{font-size:.8rem;color:var(--mut)}
.chp{display:flex;gap:8px;padding:0 16px 12px}
.chp button{font:inherit;font-size:.8rem;font-weight:600;padding:9px 14px;border-radius:8px;border:1px solid var(--bd);background:#fff;color:var(--tx)}
.chp button.on{background:#e3ebfb;color:var(--blue);border-color:#e3ebfb}
.plist{padding:0 16px}
.pc{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}
.pc .r1{display:flex;justify-content:space-between;align-items:center}.pc .ph{font-size:1.1rem;font-weight:600}
.pc .nm{font-size:.78rem;color:var(--mut);margin:2px 0 12px}
.pc .acts{display:flex;flex-direction:column;gap:8px}
.mbtn{width:100%;border:0;border-radius:8px;padding:13px;font:inherit;font-weight:600;font-size:.9rem;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.mbtn.out{background:#fff;color:var(--tx);border:1px solid var(--bd);padding:10px;font-size:.82rem}
.mbtn.done{background:#e3f4ea;color:#166534}
.mbtn:disabled{opacity:.5}
.m-more{display:block;text-align:center;padding:10px;font-weight:600;color:var(--blue);background:none;border:0;font:inherit;font-weight:600;width:100%}
.bnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--bd);display:flex;justify-content:center;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.bnav>div{display:flex;width:100%;max-width:480px}
.bnav button{flex:1;background:none;border:0;font:inherit;font-size:.7rem;font-weight:600;color:#6b7280;padding:8px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bnav button span.i{padding:4px 16px;border-radius:8px;display:flex}
.bnav button.on{color:var(--navy2)}.bnav button.on span.i{background:#e3ebfb}
.adm .chips button{border-radius:8px}.adm .chips button.on{background:var(--navy);border-color:var(--navy)}
.adm .overlay{background:#f5f6fa}

/* ===== Cetak A4 portrait ===== */
@media print{
  .two-col{display:block}
  body.adm{background:#fff}
  .adm .side,.topbar,.pagehead,.adm .metrics,.tabsx,.adm .toolbar,.pager,.foot-note,.panel-h,.av,.mbar,.bnav{display:none!important}
  .adm .content,.adm .main{padding:0}.adm .panel{border:0}
  body.adm table.t{table-layout:fixed;width:100%;font-size:9px}
  body.adm table.t th,body.adm table.t td{padding:3px 2px;border-bottom:1px solid #999}
  body.adm table.t th:nth-child(1){width:auto}body.adm table.t th:nth-child(2){width:84px}body.adm table.t th:nth-child(3){width:38px}
  body.adm table.t th:nth-child(4){width:200px}body.adm table.t th:nth-child(5){width:150px}
  .adm .tw{border:0}
  .adm .name-in{font-size:9px;font-weight:400}
  .adm .sq button{width:14px;height:14px;font-size:7px;border:1px solid #555;color:#000;background:#fff}
  .adm .sq button.on{background:#0f1b33;color:#fff}
  .adm .sq button.cur{outline:1.5px solid #000;outline-offset:0}
  .adm select.bk{background:none!important;color:#000!important;padding:0;font-size:9px;font-weight:400;width:100%}
  .ratio{display:block}
}
.adm .metric .sub b{font-size:inherit;font-weight:700;color:var(--tx)}
.adm .chips button{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.adm .chips button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.m .chips{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.m .chips button{padding:12px 0;border-radius:10px}
.adm .pc,.adm .mc{color:var(--tx)}
@media print{
  body.adm table.t th,body.adm table.t td{font-size:9px}
  body.adm table.t th{background:none;color:#000}
  body.adm table.t td.ph{white-space:nowrap}
  body.adm table.t th:nth-child(2){width:78px}body.adm table.t th:nth-child(3){width:56px}
  .adm .sq{gap:1px}
}

/* ===== Peserta (/) ===== */
.idc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px;margin:6px 16px 12px}
.idc .av{width:44px;height:44px;font-size:.95rem;background:var(--navy2);color:#fff}
.idc .who{flex:1;min-width:0}.idc .who b{display:block;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.idc .who small{color:var(--mut);font-size:.85rem}
.idc .lnk{background:none;border:0;color:var(--blue);font:inherit;font-weight:600;font-size:.85rem;padding:6px}
.edp{margin:-4px 16px 12px;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px}
.edp label{display:block;font-size:.78rem;font-weight:600;color:var(--mut);margin:0 0 4px}.edp .input{width:100%;margin-bottom:10px;padding:12px;font-size:1rem}
.edp .row{display:flex;gap:8px}.edp .row .btn{flex:1;padding:12px}
.pcard{margin:0 16px 12px;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px}
.pcard h2{margin:0 0 8px;font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.pcard .okc h2{color:#166534}
.sech{display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:16px 0 8px}.sech h2{margin:0;font-size:1.05rem;font-weight:600}.sech .pill{font-size:.75rem}
.mat{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px;margin:0 16px 10px}
.mat .r1{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.mat .nm{font-weight:600;font-size:.98rem}
.mat .meta{font-size:.8rem;color:var(--mut);margin-top:6px;line-height:1.5}.mat .meta b{color:var(--tx);font-weight:600}
.mat .mbtn{margin-top:10px}
.mat.rec{border-left:3px solid #16a34a}
.empty{margin:0 16px 10px;text-align:center;color:var(--mut);font-size:.85rem;padding:14px;border:1px dashed var(--bd);border-radius:12px}
.pgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.pgrid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#eef0f4;color:#6b7280;font-weight:700;font-size:.85rem}
.pgrid span.on{background:var(--navy);color:#fff}.pgrid span.cur{outline:2px solid #d97706;outline-offset:1px}
.adm .bar{background:#e5e7eb}.adm .bar>i{background:var(--navy)}
.adm .big{font-size:2.2rem;font-weight:500}
.adm .install{background:var(--navy)}

/* Kad peserta per-bahan */
.pc .mrw{border-top:1px solid #eef0f4;padding-top:10px;margin-top:10px}
.pc .mrw:first-of-type{margin-top:0}
.pc .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pc .mh b{font-size:.92rem}.pc .mh small{color:var(--mut);font-weight:400;margin-left:4px}
.pc .mi{font-size:.75rem;color:var(--mut);margin:0 0 8px}

/* Sejarah peristiwa */
details.hist{margin-top:10px;border-top:1px dashed var(--bd);padding-top:8px;font-size:.78rem}
details.hist summary{cursor:pointer;color:var(--blue);font-weight:600;list-style:none}
details.hist summary::-webkit-details-marker{display:none}
details.hist summary::before{content:"\25B8  "}details.hist[open] summary::before{content:"\25BE  "}
.he{display:flex;gap:10px;padding:4px 0;color:var(--tx)}.he .t{flex:none;width:112px;color:var(--mut);font-variant-numeric:tabular-nums}.he small{color:var(--mut)}
.hl .muted{margin:4px 0}
td.dt{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Lajur bahan (desktop) */
.mrow{display:flex;align-items:center;gap:8px;margin:2px 0}
.mrow .mn{flex:1;min-width:0;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;color:var(--mut)}
@media print{
  .mrow{gap:4px}
  .mrow .mn{max-width:70px;font-size:9px;color:#000}
  body.adm table.t th:nth-child(5){width:190px}
}
.adm td.ph{white-space:nowrap}
@media print{.adm .mrow select.bk{width:auto;flex:none}.mrow .mn{flex:1 1 auto;max-width:none}}

/* Jadual siri */
.sched-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.sched-h .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.adm table.sched{border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.adm table.sched td{padding:6px 12px}.adm table.sched .sd{padding:6px 10px;width:170px}
.adm table.sched tr.hari_ini{background:#f1faf4}
.adm table.sched tr.lepas{color:var(--mut)}
.adm .bdg .ico{margin-right:2px}
.adm .danger{border-color:#fecaca;background:#fffafa}
.adm .btn .ico{width:16px;height:16px}

/* Jadual siri (mobile) */
.sl{margin-top:12px}
.sr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #eef0f4;font-size:.85rem}
.sr b{width:64px}.sr span:nth-child(2){flex:1;color:var(--mut)}
.sr.lepas{color:var(--mut)}.sr.hari_ini{background:#f1faf4;margin:0 -14px;padding:8px 14px}
.adm .btn .ico{vertical-align:-3px}.adm .toolbar .btn .ico,.adm .btn.block .ico{margin-right:6px}

/* Popup SweetAlert2 (peserta, check-in ditutup, dialog admin) */
body.is-closed .m-top{visibility:hidden}
.swal2-popup{font-family:inherit;border-radius:16px;color:var(--tx)}
.swal2-title{font-size:1.3rem}
/* SweetAlert2 bertema (buttonsStyling:false; lihat SWAL_CLASS dalam common.js) */
.sk-popup.swal2-popup{background:var(--card);color:var(--tx);padding:22px 20px 20px}
.sk-popup .swal2-title{color:var(--tx);padding:0 4px}
.sk-popup .swal2-html-container{color:var(--tx);margin:12px 4px 0}
.sk-popup .swal2-actions{gap:8px;margin:18px 0 0}
.adm .sk-popup .swal-btn{min-width:96px;padding:10px 18px;font-size:.92rem;margin:0}
.adm .btn.danger{background:#b91c1c;color:#fff;border:1px solid #b91c1c}
.sk-popup .swal2-validation-message{background:#fef2f2;color:#b91c1c;border-radius:8px;margin:12px 4px 0}
.sk-center .swal2-title,.sk-center .swal2-html-container{text-align:center}
/* Borang dalam dialog (tambah kursus, bayaran, nama, input teks): tajuk kiri, medan lebar penuh, label sejajar */
.sk-popup:not(.sk-center) .swal2-title{text-align:left;font-size:1.2rem}
.sk-popup:not(.sk-center) .swal2-actions{justify-content:flex-end;width:100%;padding:0 4px;box-sizing:border-box}
.sk-popup .swal2-html-container{overflow:visible;padding:0}
.sk-popup .swl-lbl{margin:14px 0 6px;font-size:.8rem;color:var(--mut)}
.sk-popup .swal2-input,.sk-popup .swal2-select,.sk-popup .swal2-textarea{display:block;width:100%;max-width:none;min-width:0;box-sizing:border-box;margin:0!important;height:auto;padding:11px 12px;font-family:inherit;font-size:.95rem;font-weight:500;line-height:1.3;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:10px;box-shadow:none}
.sk-popup .swal2-input:focus,.sk-popup .swal2-select:focus,.sk-popup .swal2-textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,27,51,.12);outline:none}
.sk-popup .swal2-input::placeholder{color:#9aa3b2}
.sk-popup .swal2-input:disabled{background:#f3f5fa;color:var(--mut);cursor:not-allowed}
.sk-popup .swl-hint{display:flex;gap:6px;margin:6px 0 0;font-size:.78rem;color:var(--mut);text-align:left}
.sk-popup .swl-hint::before{content:'\1F512';font-size:.8em}
.sk-popup>.swal2-input{width:calc(100% - 8px);margin:14px 4px 0!important}
.sk-popup .pay-sub{text-align:left!important;background:#f3f5fa;border-radius:10px;padding:10px 12px;margin:0 0 4px!important;color:var(--tx);line-height:1.45}
.sk-popup .pay-m{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin-bottom:0!important}
.sk-popup .pay-m label{padding:11px 12px;border-radius:10px;cursor:pointer}
.sk-popup .pay-m label.off{cursor:not-allowed}
.sk-popup .pay-m small{display:block;font-size:.72rem}
@media (max-width:420px){.sk-popup .pay-m{grid-template-columns:1fr}}
.sk-popup .rcpt{font-family:ui-monospace,Consolas,monospace;font-size:1.05em;letter-spacing:.02em}
/* Ikon tick kejayaan ikut tema. Bulatan/penutup ikon asal SweetAlert2 berwarna putih tegar:
   ditukar kepada warna latar popup supaya tiada tompok putih bila latar popup bukan putih. */
.sk-popup .swal2-icon.swal2-success{border-color:var(--g);color:var(--g)}
.sk-popup .swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(22,101,52,.25)}
.sk-popup .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--g)}
.sk-popup .swal2-icon.swal2-success [class^=swal2-success-circular-line],.sk-popup .swal2-icon.swal2-success .swal2-success-fix{background-color:var(--card)}
.sk-popup .swal2-timer-progress-bar{background:var(--g);opacity:.35}
/* Animasi buka/tutup dialog (showClass/hideClass dalam common.js). Sengaja tidak dimatikan oleh "reduce motion". */
@keyframes sk-in{0%{opacity:0;transform:translateY(18px) scale(.94)}60%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes sk-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes sk-sheet-in{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.swal2-popup.sk-show{animation:sk-in .32s cubic-bezier(.2,.8,.2,1)}
.swal2-popup.sk-hide{animation:sk-out .18s ease-in forwards}
.swal2-container.swal2-backdrop-show{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
@media (max-width:520px){.swal2-popup.sk-show{animation:sk-sheet-in .3s cubic-bezier(.2,.8,.2,1)}}
/* Kurangkan gerakan: hanya animasi app sendiri. Animasi tick SweetAlert2 SENGAJA tidak disentuh. */
@media (prefers-reduced-motion:reduce){.toast,.adm .bar>i,.bar>i{animation:none;transition:none}}
.swl-lbl{display:block;text-align:left;font-size:.78rem;font-weight:600;color:var(--mut);margin:10px 0 4px}
.swl-check{display:flex;align-items:center;gap:8px;text-align:left;font-size:.85rem;color:var(--tx);margin:8px 0;cursor:pointer}
.swl-check input{width:16px;height:16px;accent-color:var(--navy)}
.cf-geo{display:grid;grid-template-columns:1fr 1fr 110px;gap:6px}
.cf-geo .swal2-input{margin:0;width:auto;font-size:.85rem;padding:8px 10px}
.sp-time{white-space:nowrap}
.sp-time .input{width:88px;padding:6px 8px;font-size:.82rem}
.sp-time span{color:var(--mut);padding:0 2px}
.sp-tl{font-size:.72rem;color:var(--mut);line-height:1.3}

/* Tema admin sentiasa cerah: halang peraturan mod gelap app.css (cth latar gelap bila hover/fokus) */
.adm .name-in:hover,.adm .name-in:focus{background:#fff;color:var(--tx);border-color:#cbd5e1}
.adm .name-in:focus{outline:2px solid #93a4c9}
.adm .install{background:var(--navy);color:#fff}

/* Dialog bayaran tunai */
.swal2-html-container{text-align:left}
.pay-m{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.pay-m label{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;font-size:.92rem;font-weight:500;color:var(--tx)}
.pay-m label.on{border-color:var(--navy);background:#f3f5fa}
.pay-m label.off{opacity:.55;background:#f8f9fb}.pay-m small{color:var(--mut)}
.pay-b{display:flex;gap:8px;margin-top:6px}.pay-b .btn{flex:1;padding:12px}
.swal.pay .err{margin:0 0 8px}
.adm table.t tr.voided td{color:var(--mut)}.adm table.t tr.voided td b{text-decoration:line-through}.adm table.t tr.voided td .bdg{text-decoration:none}
.adm table.t tr.cur td{background:#f0f4ff}.crs{cursor:pointer}

/* ===== Popup Jadual / QR / status siri ===== */
.bdg.bad{background:#fee2e2;color:#b91c1c}
.sk-popup.sk-wide{max-width:96vw}
.sk-popup .sp-wrap{overflow-x:auto;margin:12px 0 0;max-height:46vh;overflow-y:auto;border:1px solid var(--bd);border-radius:10px}
.sk-popup table.sched{border:0;border-radius:0;width:100%;font-size:.88rem}
.sk-popup table.sched th{position:sticky;top:0;background:#f3f5fa;text-align:left;padding:8px 12px;z-index:1}
.sk-popup table.sched td{padding:6px 12px;text-align:left;vertical-align:middle;border-top:1px solid var(--bd)}
.sk-popup table.sched .sd{width:160px;padding:6px 10px}
.sk-popup table.sched tr.hari_ini{background:#f1faf4}
.sk-popup table.sched tr.lepas{color:var(--mut)}
.sk-popup table.sched tr.batal td{background:#fef7f7}
.sk-popup .sp-why{font-size:.75rem;color:var(--mut);margin-top:2px;white-space:normal;max-width:220px}
.sk-popup .sp-act{white-space:nowrap;text-align:right}
.sk-popup .sp-auto{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:.82rem}
.sk-popup .sp-auto .input{width:auto}
.sk-popup .sp-note{font-size:.78rem;margin:8px 0 0;text-align:left}
.sk-popup .sp-form{margin:12px 0 0;padding:12px;border:1px solid var(--bd);border-radius:10px;background:#f8f9fc;display:flex;flex-direction:column;gap:8px;text-align:left}
.sk-popup .sp-form .input{width:100%;box-sizing:border-box}
.sk-popup .sp-btns{display:flex;justify-content:flex-end;gap:8px}
.sk-popup .sp-log{max-height:150px;overflow:auto;font-size:.8rem;margin-top:6px}
.sk-popup details{margin:12px 0 0;text-align:left;font-size:.85rem}.sk-popup summary{cursor:pointer;color:var(--mut)}
.sk-popup .sp-reset{text-align:left;margin-top:12px}
.sk-popup .sched-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left}
.sk-popup .err{color:#b91c1c;font-size:.82rem;margin:8px 0 0;text-align:left;min-height:0}
.sk-popup .qr-pop svg{width:min(300px,100%);height:auto;margin:6px auto;display:block}
.sk-popup .qr-url{word-break:break-all;margin:6px 0}
.sk-popup .swl-note{margin:6px 0 0;font-size:.8rem;color:var(--mut);text-align:left}
.adm .sq button.x{background:repeating-linear-gradient(45deg,#fff1f1,#fff1f1 3px,#ffe0e0 3px,#ffe0e0 6px);color:#b91c1c;border-color:#f3b4b4}
.adm .sq button.x.on{background:var(--navy);color:#fff;box-shadow:0 0 0 2px #f3b4b4}
.linkdanger{background:none;border:0;color:#b91c1c;font:inherit;font-size:.85rem;cursor:pointer;padding:2px 0;text-decoration:underline}
.pgrid span.x{background:repeating-linear-gradient(45deg,#fff1f1,#fff1f1 3px,#ffe0e0 3px,#ffe0e0 6px);color:#b91c1c}
.pgrid span.x.on{background:var(--navy);color:#fff;box-shadow:0 0 0 2px #f3b4b4}

.crs-act{display:flex;flex-wrap:wrap;gap:6px;min-width:150px;max-width:190px}
.crs-act .btn{white-space:nowrap}
.adm .pagehead .btn{white-space:nowrap}

.crs-act{min-width:150px;max-width:175px}.crs-act .btn.sm{padding:5px 9px}
.sk-popup table.sched{min-width:640px}
.sk-popup table.sched td:first-child{white-space:nowrap}
.sk-popup .sched-h{flex-wrap:wrap}
@media (max-width:520px){.sk-popup .sp-auto .input{flex:1 1 130px}.sk-popup .sp-act .btn{margin:2px 0}}
/* Lajur tindakan kursus: butang sebaris, lajur melebar mengikut kandungan */
.crs-act{flex-wrap:nowrap;min-width:max-content;max-width:none}
#courseTable th:last-child,#courseTable td:last-child{width:1%;white-space:nowrap}
#courseTable td,#courseTable th{padding-left:10px;padding-right:10px}

/* ============ Fasa 1: devin-v2 ============ */
/* Skrin permulaan peserta + borang Daftar */
.bigbtn{display:block;width:100%;padding:16px;font-size:1.02rem;margin:10px 0}
.btn.out.bigbtn{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.reg-note{background:#fdf0d5;color:#92400e;border-radius:8px;padding:8px 10px;font-size:.82rem;margin-bottom:10px}

/* Kad kursus (halaman utama /desktop) */
.chp2{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chp2 button{font:inherit;font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:99px;border:1px solid var(--bd);background:#fff;cursor:pointer}
.chp2 button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ccard{position:relative;text-align:left;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:16px;font:inherit;color:var(--tx);cursor:pointer;transition:box-shadow .15s,transform .15s;display:flex;flex-direction:column;gap:6px}
.ccard:hover{box-shadow:0 6px 18px rgba(15,27,51,.10);transform:translateY(-1px)}
.ccard.add{align-items:center;justify-content:center;border:1px dashed var(--bd);background:#f8f9fc;color:var(--mut);min-height:170px;gap:4px;font-weight:600}
.ccard.add .ico{width:34px;height:34px}
.cc-t{display:flex;justify-content:flex-start;align-items:center;gap:10px;font-size:1.02rem;padding-right:36px;flex-wrap:wrap}
.cc-sub{font-size:.8rem;color:var(--mut)}
.cc-sub code{background:#eef0f4;border-radius:5px;padding:1px 6px;font-size:.78rem}
.cc-dates{font-size:.82rem;color:var(--mut);white-space:nowrap}
.cc-prog{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--mut)}
.cc-prog .bar{flex:1;height:6px;margin:0}
.cc-meta{font-size:.85rem;font-weight:600}
.cc-rib{margin-top:4px;font-size:.78rem;font-weight:700;border-radius:8px;padding:5px 9px}
.cc-rib.ok{background:#e3f4ea;color:#166534}
.cc-rib.bad{background:#fee2e2;color:#b91c1c}
.cc-rib.warn{background:#fdf0d5;color:#92400e}
.cc-edit{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mut)}
.cc-edit:hover{background:#eef0f4;color:var(--navy)}

/* Sidebar: item lumpuh + blok navigasi sub kursus */
.side a.dis{opacity:.5;cursor:default}
.side a.dis:hover{background:none;color:#c3cde0}
.side a.dis .cnt{margin-left:auto;font-size:.68rem;background:#233150;color:#8fa4cc;border-radius:99px;padding:2px 8px}
.side a.back{font-weight:700;color:#fff}
.crs-h{padding:8px 12px;margin-bottom:6px;border:1px solid #2a3d66;border-radius:10px;cursor:pointer}
.crs-h:hover{border-color:#3b5490}
.crs-h b{display:block;color:#fff;font-size:.9rem;margin-bottom:4px}
.crs-h .bdg{font-size:.68rem}

/* Halaman Jadual & Kod QR (sub kursus) — gaya jadual seperti popup lama */
#v-jadualqr .sp-wrap{overflow:auto;margin:12px 0 0;max-height:62vh;border:1px solid var(--bd);border-radius:10px;scrollbar-gutter:stable}
#v-jadualqr .sp-wrap::-webkit-scrollbar{width:10px;height:10px}
#v-jadualqr .sp-wrap::-webkit-scrollbar-thumb{background:#c7ccd6;border-radius:8px;border:2px solid #f3f5fa}
#v-jadualqr .sp-wrap::-webkit-scrollbar-track{background:#f3f5fa}
#v-jadualqr table.sched{border:0;border-radius:0;width:100%;font-size:.88rem;min-width:0}
#v-jadualqr table.sched th{position:sticky;top:0;background:#f3f5fa;text-align:left;padding:8px 10px;z-index:1}
#v-jadualqr table.sched td{padding:6px 10px;text-align:left;vertical-align:middle;border-top:1px solid var(--bd)}
#v-jadualqr table.sched td:first-child{white-space:nowrap}
#v-jadualqr table.sched .sd{width:138px;padding:5px 8px}
/* Panel kiri sedikit lebih lebar supaya jadual muat tanpa skrol mendatar pada desktop ~1280px */
#v-jadualqr .two-col{grid-template-columns:minmax(0,1.6fr) minmax(270px,.9fr)}
/* Skrin sempit (telefon): benarkan skrol mendatar seperti biasa */
@media (max-width:1180px){#v-jadualqr table.sched{min-width:560px}#v-jadualqr .two-col{grid-template-columns:1fr}}
#v-jadualqr table.sched tr.hari_ini{background:#f1faf4}
#v-jadualqr table.sched tr.lepas{color:var(--mut)}
#v-jadualqr table.sched tr.batal td{background:#fef7f7}
#v-jadualqr .sp-why{font-size:.75rem;color:var(--mut);margin-top:2px;white-space:normal;max-width:220px}
#v-jadualqr .sp-act{white-space:nowrap;text-align:right}
#v-jadualqr .sp-act .btn{margin:2px 0}
#v-jadualqr .sp-auto{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:.82rem}
#v-jadualqr .sp-auto .input{width:auto}
#v-jadualqr .sp-form{margin:12px 0 0;padding:12px;border:1px solid var(--bd);border-radius:10px;background:#f8f9fc;display:flex;flex-direction:column;gap:8px}
#v-jadualqr .sp-form .input{width:100%;box-sizing:border-box}
#v-jadualqr .sp-btns{display:flex;justify-content:flex-end;gap:8px}
#v-jadualqr .sp-log{max-height:150px;overflow:auto;font-size:.8rem;margin-top:6px}
#v-jadualqr details{margin:12px 0 0;font-size:.85rem}
#v-jadualqr summary{cursor:pointer;color:var(--mut)}
#v-jadualqr .err{color:#b91c1c;font-size:.82rem;margin:8px 0 0;min-height:0}
@media (max-width:520px){#v-jadualqr .sp-auto .input{flex:1 1 130px}}

/* Fasa 2: assistant - elemen admin sahaja disembunyikan (server tetap menguatkuasakan 403) */
body.asst .adm-only{display:none !important}

/* Fasa 3: kebenaran bersepadu can[...], log audit, dialog Akaun Saya */
.admhint{font-size:.78rem;color:#b45309;font-weight:600}
[data-cap].capped .admhint{display:inline}
[data-cap]:not(.capped) > .admhint{display:none}
.asstban{margin:0 0 14px;padding:10px 14px;border:1px solid #fcd34d;background:#fffbeb;color:#92400e;border-radius:10px;font-size:.84rem;font-weight:600}
.capped{opacity:.65}
.cc-edit.capped{cursor:not-allowed;color:#cbd2dd}
.cc-edit.capped:hover{background:transparent;color:#cbd2dd}
.ccard.add.capped{cursor:not-allowed;color:#c9cfdc;border-style:dashed}
#v-audit table.t td{vertical-align:top}
#v-audit #audBody tr:hover{background:#f8f9fc}
.ses-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;text-align:left}
.ses-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;font-size:.84rem}
.ses-row .ses-i{min-width:0}
.ses-row .btn{white-space:nowrap;flex-shrink:0}
#accBtn{flex-shrink:0}
@media (max-width:520px){#accName{display:none}}