/* ═══════════════════════════════════════════════════
   TAMBAHAN BARU — Auth, role-based nav, toast, dll
   (Kelas asal dari gg/ggview dikekalkan dlm style.css;
   fail ni cuma tambah apa yang tiada.)
   ═══════════════════════════════════════════════════ */

.auth-box{display:flex;align-items:center;}
.auth-loading{color:rgba(255,255,255,.75);font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:6px;}
.btn-auth{display:flex;align-items:center;gap:8px;background:#fff;color:var(--navy);border:none;border-radius:20px;padding:8px 16px;font-weight:800;font-size:.78rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
.btn-auth:active{opacity:.85;}
.user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:5px 8px 5px 5px;}
.user-photo{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;}
.user-meta{display:flex;flex-direction:column;line-height:1.2;max-width:120px;}
.user-name{color:#fff;font-size:.72rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-name.on-duty{color:#fb923c;}
.drawer-profile .user-name{color:var(--navy);}
.drawer-profile .user-name.on-duty{color:#ea580c;}
.user-role{color:rgba(255,255,255,.6);font-size:.62rem;font-weight:600;text-transform:uppercase;}
.btn-logout{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:.85rem;padding:4px;}
.btn-logout:active{color:#fff;}

.modal-x{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 6px;}
.modal-box-sm{max-width:400px;}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f2044;color:#fff;padding:12px 20px;border-radius:12px;font-size:.82rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:400;max-width:90vw;text-align:center;}
.toast.error{background:#dc2626;}
.toast.success{background:#059669;}

.status-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:.75rem;font-weight:800;}
.status-chip.draft{background:#fffbeb;color:#d97706;border:1px solid #fde68a;}
.status-chip.confirmed{background:#f0fdf4;color:#059669;border:1px solid #86efac;}

/* Confirm modal — SATU-SATUNYA definisi (elak konflik dgn CSS lain) */
.confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;}
.confirm-box{position:relative;background:#ffffff;border-radius:20px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:confirmPop .2s cubic-bezier(.34,1.56,.64,1) forwards;padding:26px 24px 22px;text-align:center;}
@keyframes confirmPop{from{opacity:0;transform:scale(.88);}to{opacity:1;transform:scale(1);}}
.confirm-icon{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.3rem;background:#eef4ff;color:#0f2044;}
.confirm-icon.warn{background:#fef2f2;color:#dc2626;}
.confirm-icon.primary{background:#eef9ff;color:#0d9488;}
.confirm-title{position:relative;z-index:2;font-size:1.05rem;font-weight:900;color:#0f2044;margin-bottom:8px;text-align:center;}
.confirm-msg{position:relative;z-index:2;font-size:.85rem;color:#6b7c9e;line-height:1.55;text-align:center;margin-bottom:22px;}
.confirm-actions{position:relative;z-index:2;display:flex;gap:10px;}
.confirm-btn{flex:1;height:46px;border-radius:12px;border:none;font-size:.85rem;font-weight:800;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.confirm-btn-cancel{background:#f1f5f9;color:#0f2044;}
.confirm-btn-cancel:active{background:#e2e8f0;}
.confirm-btn-ok{background:#0f2044;color:#ffffff;}
.confirm-btn-ok.warn{background:#dc2626;}
.confirm-btn-ok.primary{background:#0d9488;}
.confirm-btn-ok:active{opacity:.85;}

.assign-period-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.assign-period-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.assign-period-relief{margin-top:8px;padding:8px 10px;background:#f0fdf4;border:1px solid #86efac;border-radius:8px;font-size:.78rem;color:#059669;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.assign-period-empty{margin-top:8px;padding:8px 10px;background:#fef2f2;border:1px dashed #fecaca;border-radius:8px;font-size:.78rem;color:#dc2626;text-align:center;cursor:pointer;font-weight:700;}

.user-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.user-row:last-child{border-bottom:none;}
.user-row img{width:34px;height:34px;border-radius:50%;flex-shrink:0;}
.user-row .u-meta{flex:1;min-width:0;}
.user-row .u-email{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-row select{border:1.5px solid var(--border);border-radius:8px;padding:6px 8px;font-size:.75rem;font-weight:700;font-family:inherit;}

@media (min-width:640px){
  .tab-bar-inner{overflow-x:visible;}
}
.tab-bar-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ═══════════════════════════════════════════════════
   PAGE NAV (multi-page) — desktop horizontal, drawer utk tablet/phone
   ═══════════════════════════════════════════════════ */
.navbar-inner{display:flex;align-items:center;gap:14px;}
.hamburger-btn{display:none;background:none;border:none;color:#fff;font-size:1.15rem;cursor:pointer;padding:4px 6px;flex-shrink:0;}
.page-nav-desktop{display:flex;gap:4px;flex:1;}
.page-link{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.72);text-decoration:none;font-size:.8rem;font-weight:700;padding:8px 12px;border-radius:10px;transition:all .15s;white-space:nowrap;}
.page-link:hover{color:#fff;background:rgba(255,255,255,.08);}
.page-link.active{color:#fff;background:rgba(255,255,255,.16);}

.drawer-overlay{position:fixed;inset:0;background:rgba(15,32,68,.55);z-index:299;opacity:0;pointer-events:none;transition:opacity .2s;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;background:#fff;z-index:300;transform:translateX(-100%);transition:transform .25s ease;box-shadow:6px 0 24px rgba(0,0,0,.2);display:flex;flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1.5px solid var(--border);}
.drawer-close{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:6px;}
.page-nav-drawer{display:flex;flex-direction:column;padding:10px;}
.drawer-link{display:flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;font-size:.88rem;font-weight:700;padding:13px 12px;border-radius:10px;}
.drawer-link i{width:18px;text-align:center;color:var(--teal);}
.drawer-link:hover,.drawer-link.active{background:#eef4ff;}

@media (max-width:899px){
  .hamburger-btn{display:block;}
  .page-nav-desktop{display:none;}
  #auth-box{display:none;}
}

/* Desktop dropdown */
.page-link-wrap{position:relative;}
.page-link-btn{background:none;border:none;cursor:pointer;font-family:inherit;}
.dd-chevron{font-size:.6rem;margin-left:2px;transition:transform .15s;}
.page-link-btn.open .dd-chevron,.page-dropdown.open ~ .page-link-btn .dd-chevron{transform:rotate(180deg);}
.page-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);min-width:200px;padding:8px;display:none;z-index:250;}
.page-dropdown.open{display:block;}
.dd-item-link{display:block;padding:10px 12px;border-radius:8px;color:var(--navy);text-decoration:none;font-size:.82rem;font-weight:600;}
.dd-item-link:hover{background:#eef4ff;}
.dd-item-link.active{background:var(--teal);color:#fff;}

/* Drawer accordion */
.drawer-group-head{width:100%;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;}
.acc-chevron{margin-left:auto;font-size:.65rem;transition:transform .2s;color:var(--muted);}
.drawer-group-head.open .acc-chevron{transform:rotate(180deg);}
.drawer-sublist{max-height:0;overflow:hidden;transition:max-height .2s ease;padding-left:30px;}
.drawer-sublist.open{max-height:400px;}
.drawer-sublink{display:block;padding:10px 12px;color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:700;border-radius:8px;}
.drawer-sublink:hover{background:#f3f6fb;}
.drawer-sublink.active{background:#fbbf24;color:#78350f;}

.drawer{display:flex;flex-direction:column;}
.page-nav-drawer{flex:1;overflow-y:auto;}
.drawer-footer{border-top:1.5px solid var(--border);padding:14px;flex-shrink:0;}
.drawer-profile{display:flex;align-items:center;gap:10px;}
.drawer-profile .user-photo{width:38px;height:38px;}
.drawer-profile .u-meta{flex:1;min-width:0;}
.drawer-profile .user-name{color:var(--navy);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-logout{background:none;border:none;color:var(--danger);font-size:.72rem;font-weight:700;cursor:pointer;padding:2px 0;}
.drawer-login-wrap{padding:2px 0;}
/* ═══════════════════════════════════════════════════
   SKELETON LOADING — shimmer, gantikan spinner untuk
   senarai/kad/jadual yang bentuknya dah dijangka
   ═══════════════════════════════════════════════════ */
/* Kad carian nama (Pilih Nama Anda) — jangan potong dropdown yg melimpah keluar kad */
#saya-pickname.card{overflow:visible;}

/* Modal "Pilih Nama" — redesign penuh. Anchor ke ATAS skrin (elak papan
   kekik), tinggi dihadkan dgn munasabah + scroll dalaman (BUKAN max-height:none
   — versi lepas tu punca modal "melimpah keluar skrin tanpa scroll"). */
#pickNameModal{align-items:flex-start !important;padding-top:16px;}
#pickNameModal .modal-box{border-radius:20px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;}
#pickNameModal .modal-body{overflow-y:auto;flex:1;min-height:0;}
#pick-name-search-outer{position:static;}
#pick-name-ddwrap{position:static;display:none;max-height:none;border:none;box-shadow:none;margin-top:10px;background:#f8fafc;border-radius:12px;overflow:hidden;}
#pick-name-ddwrap.open{display:block;}
@media (max-width:640px){
  #pickNameModal{padding-top:8px;}
  #pickNameModal .modal-box{max-height:calc(100vh - 16px);}
}

/* Item dropdown — singkatan diletak SEBAGAI SUB-TEKS di bawah nama (struktur
   HTML baru, bukan lagi badge terapung sebelah) — kukuh untuk nama panjang */
#pick-name-ddwrap .dd-item-info{flex:1;min-width:0;}
#pick-name-ddwrap .dd-item-short-line{font-size:.68rem;font-weight:700;color:var(--muted);margin-top:2px;}
.drawer-copyright{margin-top:12px;font-size:.65rem;color:#94a3b8;text-align:center;}

/* Warna ikut sebab ketidakhadiran — konsisten merentas app */
.reason-rasmi{background:#e0f2fe;color:#0369a1;border-color:#93c5fd;}
.reason-cuti{background:#f0fdf4;color:#059669;border-color:#86efac;}
.reason-keluar{background:#fffbeb;color:#d97706;border-color:#fde68a;}
.reason-lain{background:#f1f5f9;color:#64748b;border-color:#cbd5e1;}
.reason-chip{display:inline-block;padding:1px 7px;border-radius:8px;border:1px solid;font-weight:800;font-size:.66rem;}

.slot-icon-btn{width:38px;height:38px;border-radius:10px;border:2px solid var(--border);background:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.slot-icon-btn.active{border-color:var(--teal);background:#eef9ff;}

@keyframes skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.sk-bar{background:linear-gradient(90deg,#eef1f6 25%,#e2e8f0 37%,#eef1f6 63%);background-size:800px 100%;animation:skeleton-shimmer 1.4s ease infinite;border-radius:6px;}
.sk-circle{border-radius:50%;flex-shrink:0;}

.sk-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;}
.sk-grp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#f8fafc;}
.sk-grow{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);}
.sk-grow:last-child{border-bottom:none;}

.sk-table-row{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);}

.sk-grid-wrap{padding:12px;}
.sk-grid-row{display:flex;gap:4px;margin-bottom:4px;}

/* ═══════════════════════════════════════════════════
   RESPONSIVE WIDTH — ikut saiz skrin sebenar (bukan kunci 900px)
   ═══════════════════════════════════════════════════ */
.main{width:100%;max-width:1800px;margin:0 auto;padding:16px 24px 70px;box-sizing:border-box;}
.navbar-inner{max-width:1800px;}

@media (max-width:640px){
  .main{padding:14px 12px 70px;}
  .navbar-inner{padding:0 12px;}
}
@media (min-width:641px) and (max-width:1023px){
  .main{max-width:94%;}
}
@media (min-width:1024px){
  .main{max-width:97%;padding:18px 26px 70px;}
}
@media (min-width:1600px){
  .main{max-width:1800px;}
}

/* ═══════════════════════════════════════════════════
   BAR TINDAKAN TETAP DI BAWAH (Jana PDF / Sahkan Tapak)
   ═══════════════════════════════════════════════════ */
#confirm-card{
  position:fixed;left:0;right:0;bottom:0;
  max-width:1800px;margin:0 auto;border-radius:0;
  z-index:150;box-shadow:0 -6px 20px rgba(15,32,68,.15);
  border-left:none;border-right:none;border-bottom:none;
}
#sub-papan{padding-bottom:88px;}
@media (max-width:640px){
  #confirm-card .card-body{flex-direction:column;align-items:stretch !important;gap:10px;}
  #confirm-card .card-body > div:last-child{display:flex;gap:8px;}
  #confirm-card .card-body > div:last-child button{flex:1;}
  #sub-papan{padding-bottom:104px;}
}

/* ═══════════════════════════════════════════════════
   DATE-ROW responsif — elak terkeluar bingkai di phone
   bila ada >2 item (tarikh + Muat Semula + Jana PDF)
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   SENARAI GURU GANTI — versi padat (bukan jadual 7 lajur)
   elak scroll kiri-kanan, lebih pendek menegak
   ═══════════════════════════════════════════════════ */
.date-row{flex-wrap:wrap;}
/* ═══════════════════════════════════════════════════
   SENARAI GURU GANTI — dikumpulkan ikut guru tidak hadir
   ═══════════════════════════════════════════════════ */
.grp-list{display:grid;grid-template-columns:1fr;gap:14px;padding:14px;background:#eef1f6;align-items:start;}
@media (min-width:720px){ .grp-list{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1180px){ .grp-list{grid-template-columns:repeat(3,1fr);} }
.grp-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;}
.grp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#f8fafc;}
.grp-av{width:34px;height:34px;border-radius:50%;background:#fef2f2;color:#b91c1c;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;flex-shrink:0;}
.grp-name{font-weight:800;font-size:.85rem;color:#b91c1c;}
.grp-meta{font-size:.68rem;color:var(--muted);}
.grow{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);}
.grow:last-of-type{border-bottom:none;}
.gnum-col{flex-shrink:0;width:56px;text-align:center;}
.gnum{width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--navy);margin:0 auto 4px;}
.gtime{font-size:.58rem;color:var(--muted);font-family:'JetBrains Mono',monospace;line-height:1.35;}
.l-class{font-size:.68rem;color:#0369a1;font-weight:800;}
.l-subj{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);margin-top:2px;}
.l-subj i{font-size:.72rem;color:#0d9488;flex-shrink:0;}
.l-name{font-weight:800;font-size:.85rem;color:#111827;margin-top:3px;}
.grow-note{margin-top:4px;font-size:.66rem;color:#92400e;background:#fffbeb;border-radius:6px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px;}

/* ═══════════════════════════════════════════════════
   GRID JADUAL INDUK — kotak dikecilkan + bucu bulat
   ═══════════════════════════════════════════════════ */
.tt-slot{height:50px;}
.tt-slot-inner{margin:3px;border-radius:9px;padding:4px 6px;height:calc(100% - 6px);}
.tt-slot:not(.s-empty):not(.s-rehat):not(.s-override) .tt-slot-inner{box-shadow:0 4px 10px rgba(0,0,0,0.32),0 1px 2px rgba(0,0,0,0.25);transform:translateY(-1px);}
.tt-slot.s-override{outline:none;}
.tt-slot.s-override .tt-slot-inner{box-shadow:0 0 0 3px #ea580c,0 4px 10px rgba(0,0,0,0.32),0 1px 2px rgba(0,0,0,0.25);transform:translateY(-1px);}
.tt-head-period{min-width:62px;width:62px;}
.tt-head-rehat{min-width:42px;width:42px;}
.tt-guru-cell{min-width:96px;width:96px;padding:7px 8px;}
.tt-head-guru{min-width:96px;width:96px;}
.tt-slot-subj{font-size:.58rem;}
.tt-slot-class{font-size:.52rem;}

/* Desktop = jadual 7-lajur asal; Mobile/tablet = grouping baru.
   (Guna di Sejarah — js/page-penyelaras.js. Jadual Ganti/index.html guna
   .grp-list terus tanpa toggle ni — rujuk blok "JADUAL GANTI" di bawah.) */
.desktop-table-view{display:none;}
.mobile-grouped-view{display:block;}
@media (min-width:900px){
  .desktop-table-view{display:block;}
  .mobile-grouped-view{display:none;}
}
@media (min-width:640px){
  .grow{padding:11px 20px;}
}
@media (max-width:520px){
  .date-row{flex-direction:column;align-items:stretch;}
  .date-row > *{width:100%;margin-left:0 !important;justify-content:center;}
}

/* ═══════════════════════════════════════════════════
   JADUAL GANTI (index.html) — paparan dikumpulkan ikut guru
   tidak hadir SAMA pada desktop & mobile (jadual 7-lajur
   lama dibuang terus, tiada toggle ikut saiz skrin).
   ═══════════════════════════════════════════════════ */
.jg-grouped-view{display:block;}