/* ═══════════════════════════════════════════════════
   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;}
.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-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;}
.confirm-actions{display:flex;border-top:1.5px solid var(--border);}

.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;}

.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;}