* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
#app-wrapper { display: flex; height: 100vh; overflow: hidden; font-family: 'Segoe UI', sans-serif; }
/* ── Sidebar (desktop) ── */
#sidebar { width: 260px; background-color: #2C2D3F; color: white; display: flex; flex-direction: column; flex-shrink: 0; z-index: 200; transition: transform 0.3s ease; }
#sidebar-header { padding: 1.5rem; border-bottom: 1px solid #3C3D4F; }
#sidebar-header .brand { display: flex; align-items: center; gap: 0.75rem; }
#sidebar-header h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
#sidebar-nav { flex: 1; padding: 1rem; overflow-y: auto; }
.nav-item-custom {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.75rem 1rem; border-radius: 0.5rem;
color: #D1D5DB; background-color: transparent;
cursor: pointer; margin-bottom: 0.25rem; transition: all 0.2s; user-select: none;
}
.nav-item-custom:hover { background-color: #3C3D4F; color: white; }
.nav-item-custom.active { background-color: #3C3D4F; color: white; }
.nav-item-custom i { font-size: 1.25rem; flex-shrink: 0; }
.nav-item-custom span { text-transform: capitalize; font-size: 1rem; }
#sidebar-footer { padding: 1rem; border-top: 1px solid #3C3D4F; }
.user-avatar {
width: 40px; height: 40px; border-radius: 50%;
background-color: #EF4444; display: flex; align-items: center;
justify-content: center; font-weight: 600; color: white; flex-shrink: 0;
}
/* ── Main ── */
#main-content { flex: 1; overflow-y: auto; background-color: #F9FAFB; }
/* ── Tabs ── */
.nav-tabs .nav-link { color: #6c757d; cursor: pointer; border: none; background-color: transparent; white-space: nowrap; }
.nav-tabs .nav-link.active { color: #EF4444 !important; background-color: white !important; border: none !important; border-bottom: 2px solid #EF4444 !important; }
.nav-tabs .nav-link:hover:not(.active) { color: #EF4444; border-color: transparent; }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar { display: none; }
/* ── Cards ── */
.card-clickable { cursor: pointer; transition: box-shadow 0.15s; }
.card-clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
/* ── Views ── */
.view { display: none; }
.view.active { display: block; }
/* ── Enrollment input ── */
.enrollment-input { max-width: 100px; }
/* ── Mobile top bar (hidden on desktop) ── */
#mobile-topbar {
display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px;
background-color: #2C2D3F; color: white; z-index: 300;
align-items: center; padding: 0 1rem; gap: 1rem;
}
#mobile-topbar .brand { display: flex; align-items: center; gap: 0.6rem; flex: 1; }
#mobile-topbar h1 { font-size: 1rem; font-weight: 600; margin: 0; }
#mobile-user { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* ── Mobile user dropdown ── */
#mobile-user-dropdown {
display: none; position: fixed; top: 56px; right: 0; z-index: 299;
min-width: 180px;
}
#mobile-user-dropdown.show { display: block; }
#mobile-dropdown-inner {
background: #2C2D3F; border: 1px solid #3C3D4F;
border-radius: 0 0 0 0.5rem; overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#mobile-dropdown-inner button {
display: flex; align-items: center; gap: 0.6rem;
width: 100%; padding: 0.75rem 1rem; background: none;
border: none; color: #D1D5DB; font-size: 0.875rem;
cursor: pointer; text-align: left; transition: background 0.15s;
}
#mobile-dropdown-inner button:hover { background: #3C3D4F; color: white; }
#mobile-dropdown-inner button + button { border-top: 1px solid #3C3D4F; }
/* ── Bottom nav (mobile only) ── */
#bottom-nav {
display: none; position: fixed; bottom: 0; left: 0; right: 0;
background: #2C2D3F; border-top: 1px solid #3C3D4F;
z-index: 300; height: 60px;
}
#bottom-nav .bnav-inner { display: flex; height: 100%; }
.bnav-item {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px; cursor: pointer;
color: #9CA3AF; transition: color 0.15s; padding: 6px 2px; user-select: none;
}
.bnav-item.active { color: #EF4444; }
.bnav-item i { font-size: 1.25rem; line-height: 1; }
.bnav-item span { font-size: 0.6rem; text-transform: capitalize; letter-spacing: 0.02em; }
/* ── Mobile breakpoint ── */
@media (max-width: 767px) {
#sidebar { display: none; }
#mobile-topbar { display: flex; }
#bottom-nav { display: block; }
#app-wrapper { flex-direction: column; padding-top: 56px; padding-bottom: 60px; }
#main-content { width: 100%; }
.container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
.container-fluid .row.mb-4 > .col-auto { width: 100%; margin-top: 0.75rem; }
.container-fluid .row.mb-4 > .col-auto .d-flex { flex-wrap: wrap; gap: 0.5rem !important; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.display-5 { font-size: 1.5rem !important; }
.card-body .d-flex.gap-2 { flex-wrap: wrap; }
.enrollment-input { max-width: 80px; }
.nav-tabs { border-bottom: 1px solid #dee2e6; }
#students-header-btns { align-items: stretch !important; }
#students-header-btns .d-flex { width: 100%; }
#students-header-btns .d-flex > * { flex: 1; justify-content: center; }
}
.btn-purple { color:#7c3aed;border:1px solid #7c3aed;background:transparent; }
.btn-purple:hover, .btn-purple:focus { background:#7c3aed;color:white;border-color:#7c3aed; }
.btn-purple:active { background:#6d28d9;color:white;border-color:#6d28d9; }
/* Material type toggle */
.type-toggle { display:flex; gap:8px; }
.type-toggle input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.type-toggle label { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
padding:9px 14px; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer;
border:2px solid transparent; transition:all .15s; user-select:none; }
.type-toggle label.lbl-book { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.type-toggle label.lbl-book:hover { background:#e0e7ff; border-color:#a5b4fc; }
.type-toggle input#type-book:checked + label.lbl-book { background:#4f46e5; color:#fff; border-color:#4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.35); }
.type-toggle label.lbl-material { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.type-toggle label.lbl-material:hover { background:#fef3c7; border-color:#fcd34d; }
.type-toggle input#type-material:checked + label.lbl-material { background:#d97706; color:#fff; border-color:#d97706; box-shadow:0 2px 8px rgba(217,119,6,.35); }
/* ── Login screen ── */
#login-screen {
position:fixed; inset:0; z-index:9999;
background:#F9FAFB; display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
#login-screen.d-none { display:none !important; }
.login-card-admin { width:100%; max-width:420px; }
.btn-otp-submit { width:100%;background:#EF4444;color:#fff;border:none;border-radius:8px;padding:13px;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center;gap:8px; }
.btn-otp-submit:hover { background:#dc2626; }
.btn-otp-submit:disabled { opacity:.65;cursor:not-allowed; }
.btn-otp-back { background:none;border:none;color:#6b7280;font-size:.8rem;cursor:pointer;padding:0;text-decoration:underline; }
.btn-otp-back:hover { color:#374151; }
.otp-sent-banner { background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 14px;margin-bottom:18px;display:flex;align-items:center;gap:10px; }
.otp-dev-notice { background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:10px 13px;margin-bottom:18px;font-size:.78rem;color:#92400e;display:flex;gap:8px;align-items:flex-start; }
@keyframes spin { to { transform:rotate(360deg); } }