/* Main app styles — extracted from index.html */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--purple:#5B4FCF;
--purple-dark:#3d3399;
--purple-light:#EEF0FB;
--sidebar-bg:#5305fc; /* unified solid color for student + teacher left panels */
--white:#fff;
--gray:#F5F6FA;
--text:#1a1a2e;
--muted:#7a7a9d;
--border:#E8E8F0;
--green:#22b573;
--orange:#f7941d;
--pink:#e91e8c;
--blue:#1976d2;
--sidebar-w:255px;
/* layered, brand-tinted shadow system (hue of #5B4FCF ≈ rgb 40,30,90) */
--shadow-card:0 1px 2px rgba(40,30,90,0.04),0 4px 14px rgba(40,30,90,0.06);
--shadow-md:0 2px 6px rgba(40,30,90,0.05),0 10px 24px rgba(40,30,90,0.09);
--shadow-lg:0 6px 16px rgba(40,30,90,0.10),0 18px 40px rgba(40,30,90,0.14);
--shadow-topbar:0 1px 0 rgba(40,30,90,0.05),0 4px 14px rgba(40,30,90,0.05);
--ring:0 0 0 3px rgba(91,79,207,0.14);
--border-soft:rgba(40,30,90,0.07);
/* ── Site fonts: Nunito (body/content) + Poppins (UI/headings) ── */
--font-nunito:'Nunito',sans-serif;
--font-poppins:'Poppins',sans-serif;
--font-body:'Nunito','Poppins',system-ui,-apple-system,sans-serif;
--font-ui:'Poppins','Nunito',system-ui,-apple-system,sans-serif;
--font-heading:'Poppins','Nunito',system-ui,-apple-system,sans-serif;
--font-stack:'Nunito','Poppins',system-ui,-apple-system,sans-serif;
}
html{
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body{
font-family:var(--font-body);
background:var(--gray);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
}
/* Headings / labels → Poppins */
h1,h2,h3,h4,h5,h6,
.modal-title,.form-label,.sb-brand-text h2,.page-title,
.login-form h1,.login-logo span,.admin-section-header h2{
font-family:var(--font-heading) !important;
}
/* Buttons / nav / UI chrome → Poppins */
button,.btn,.nav-item,.tab-btn,.seg-btn,.sb-nav a,.sb-nav button,
.mob-nav-item,.mob-nav-label{
font-family:var(--font-ui) !important;
}
/* Inputs / content / tables → Nunito first */
input,textarea,select,.form-input,.card p,.note-inner,.note-point-body,
.stTheoryBody,.stPracBody,td,th,p,li,label,.subtitle{
font-family:var(--font-body) !important;
}
/* ========== FORCE NUNITO + POPPINS (Student + Teacher + Admin + Login) ========== */
#studentApp, #teacherApp, #adminPanel,
.iti-layout, .iti-main, .iti-topbar, .iti-sidebar, .iti-welcome, .iti-stats, .iti-card, .iti-quick, .iti-lower,
.edu-app, .edu-sidebar, .edu-main, .edu-topbar, .edu-content, .edu-welcome, .edu-stats, .edu-card,
.admin-panel, .admin-header, .admin-container, .admin-section, .admin-card, .admin-stat-card, .admin-quick-card,
.modal, .login-split, .login-promo, .login-auth, .login-form, .login-wrap,
.app, .page-section, .card, .form-input, .btn, table, .nav-item, .sb-nav,
.en-modal, .en-pt, .en-preview {
font-family: var(--font-stack) !important;
}
/* ===== LOGIN ===== */
.login-wrap{
display:flex;align-items:center;justify-content:center;
min-height:100vh;
background:linear-gradient(135deg,#4a3fc0 0%,#2d2080 60%,#6c3de8 100%);
position:relative;overflow:hidden;
}
.login-wrap::before{content:'';position:absolute;width:500px;height:500px;background:rgba(255,255,255,0.04);border-radius:50%;top:-100px;left:-100px;}
.login-wrap::after{content:'';position:absolute;width:300px;height:300px;background:rgba(255,255,255,0.04);border-radius:50%;bottom:-50px;right:-50px;}
.login-box{
background:#fff;border-radius:24px;padding:44px 40px;width:400px;
box-shadow:0 24px 70px rgba(20,12,60,0.4),0 4px 16px rgba(20,12,60,0.2);position:relative;z-index:1;
}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo .logo-icon{
width:70px;height:70px;border-radius:18px;
background:linear-gradient(135deg,#4a3fc0,#6c3de8);
display:flex;align-items:center;justify-content:center;
margin:0 auto 14px;font-size:32px;
}
.login-logo h1{font-size:22px;font-weight:800;color:var(--text);}
.login-logo p{font-size:13px;color:var(--purple);font-weight:600;margin-top:2px;}
.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;}
.role-tab{
padding:14px 10px;border-radius:12px;border:2px solid var(--border);
background:#fff;cursor:pointer;font-family:var(--font-stack);
font-size:13px;font-weight:600;color:var(--muted);text-align:center;
transition:all 0.2s;
}
.role-tab .icon{font-size:22px;display:block;margin-bottom:4px;}
.role-tab:hover{border-color:var(--purple);color:var(--purple);}
.role-tab.active{border-color:var(--purple);background:var(--purple-light);color:var(--purple);}
.lbl{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
.inp{
width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;
font-size:13px;font-family:var(--font-stack);color:var(--text);outline:none;
transition:border-color 0.2s;margin-bottom:14px;
}
.inp:focus{border-color:var(--purple);box-shadow:var(--ring);}
.login-btn{
width:100%;padding:13px;border:none;border-radius:12px;
background:linear-gradient(135deg,#4a3fc0,#6c3de8);
color:#fff;font-size:14px;font-weight:700;cursor:pointer;
font-family:var(--font-stack);transition:opacity 0.2s,box-shadow 0.2s,transform 0.15s;margin-top:4px;
letter-spacing:0.3px;box-shadow:0 4px 14px rgba(91,79,207,0.4);
}
.login-btn:hover{opacity:0.95;box-shadow:0 6px 20px rgba(91,79,207,0.5);}
.login-btn:active{transform:translateY(1px);}
/* ===== APP ===== */
.app{display:none;min-height:100vh;}
.app.active{display:flex;}
/* ========== HIDE TEACHER DASHBOARD & SECTIONS ON INITIAL LOAD (LOGIN PAGE) ========== */
/* Prevents teacher dashboard / t-* tables / forms / stats from leaking below the login screen.
.app rule already hides #teacherApp, but we add explicit for the stray page-sections
that live outside #teacherApp in source order. */
#teacherApp,
.page-section[id^="t-"] {
display: none;
}
/* JS will override with element.style.display when moving a section into view.
The .app.active rule handles showing the whole teacherApp container. */
#teacherApp.active {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== SIDEBAR ===== */
.sidebar{
width:var(--sidebar-w);
background:#5305fc !important;
height:100vh;position:fixed;left:0;top:0;
display:flex;flex-direction:column;z-index:200;
overflow:hidden;
}
/* decorative laptop illustration at bottom */
.sidebar::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:160px;
background:none !important; /* removed decorative element to keep pure solid color */
pointer-events:none;
display:none !important;
}
.sb-header{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,0.1);}
.sb-brand{display:flex;align-items:center;gap:12px;}
.sb-icon{
width:44px;height:44px;border-radius:12px;
background:rgba(255,255,255,0.15);
display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.sb-brand-text h2{color:#fff;font-size:16px;font-weight:800;line-height:1.2;}
.sb-brand-text span{color:#f7941d;font-size:12px;font-weight:600;}
.sb-nav{flex:1;padding:10px 14px;overflow-y:auto;}
.sb-nav::-webkit-scrollbar{width:0;}
.sb-nav .nav-item{color:#ffffff;}
.sb-nav .nav-item:hover{color:#f97316;}
.sb-nav .nav-item.active{color:#dc2626;}
.nav-item{
display:flex;align-items:center;gap:12px;
padding:11px 14px;border-radius:10px;
color:#ffffff;cursor:pointer;
font-size:13px;font-weight:500;margin-bottom:3px;
transition:all 0.2s;
}
.nav-item .nav-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0;color:#ffffff;}
.nav-item:hover{background:rgba(255,255,255,0.1);color:#f97316;}
.nav-item.active{background:rgba(255,255,255,0.18);color:#dc2626;font-weight:600;}
.nav-divider{height:1px;background:rgba(255,255,255,0.1);margin:10px 0;}
.sb-footer{padding:14px;border-top:1px solid rgba(255,255,255,0.1);}
.site-copyright{font-size:10px;line-height:1.45;text-align:center;}
.site-copyright a{color:inherit;text-decoration:underline;}
.sb-footer .site-copyright{color:rgba(255,255,255,0.55);padding:0 4px 10px;}
.iti-sidebar .iti-sidebar-copy{margin-top:auto;padding:12px 16px 6px;color:rgba(255,255,255,0.6);}
/* login copyright: see .ig-login .login-copyright below (no absolute positioning) */
.app-main-footer{margin-top:auto;padding:18px 28px;text-align:center;font-size:11px;color:#94a3b8;border-top:1px solid var(--border-soft);}
.admin-copyright{text-align:center;padding:20px 16px 28px;font-size:11px;color:#94a3b8;}
.dash-card-hd{background:transparent;padding:10px 14px;margin:0 0 12px 0;font-weight:700;font-size:14px;color:#334155;border-bottom:1px solid #e0e7ff;text-align:center;}
.tt-page{font-family:var(--font-stack);color:var(--text);max-width:100%;}
.tt-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:16px 18px;background:linear-gradient(135deg,#fff 0%,#f5f3ff 100%);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-card);}
.tt-hero-left{display:flex;align-items:center;gap:14px;min-width:0;}
.tt-hero-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--purple),#6c3de8);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 14px rgba(91,79,207,.25);flex-shrink:0;}
.tt-hero-title{margin:0;font-size:18px;font-weight:800;color:var(--text);line-height:1.2;}
.tt-hero-sub{margin:3px 0 0;font-size:12px;color:var(--muted);font-weight:500;}
.tt-hero-badge{padding:7px 12px;border-radius:999px;background:var(--purple-light);color:var(--purple);font-size:11px;font-weight:700;white-space:nowrap;border:1px solid rgba(91,79,207,.12);}
.tt-edit-panel{background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:4px;margin-bottom:16px;box-shadow:var(--shadow-card);}
.tt-details{border:1px solid var(--border);border-radius:12px;margin:10px;background:#fafbff;overflow:hidden;}
.tt-details summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:#334155;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(180deg,#fff,#f8fafc);user-select:none;}
.tt-details summary::-webkit-details-marker{display:none;}
.tt-details summary::after{content:'▼';font-size:9px;color:#94a3b8;transition:transform .2s;}
.tt-details[open] summary::after{transform:rotate(180deg);}
.tt-details-body{padding:0 14px 14px;}
.tt-edit-banner{display:none;align-items:center;gap:8px;margin:10px 10px 0;padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:12px;font-weight:600;}
.tt-edit-banner::before{content:'✏️';}
.tt-edit-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.tt-edit-row .form-input{font-size:12px;padding:9px 11px;border-radius:10px;border-color:var(--border);transition:border-color .2s,box-shadow .2s;}
.tt-edit-row .form-input:focus{border-color:var(--purple);box-shadow:var(--ring);}
.tt-edit-field{flex:1;min-width:100px;}
.tt-edit-field label{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.tt-type-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.tt-type-pill{padding:7px 12px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font-stack);}
.tt-type-pill:hover{border-color:var(--purple);color:var(--purple);}
.tt-type-pill.active.theory{border-color:#7c3aed;background:#ede9fe;color:#5b21b6;}
.tt-type-pill.active.practical{border-color:#10b981;background:#d1fae5;color:#065f46;}
.tt-type-pill.active.lab{border-color:#f59e0b;background:#fef3c7;color:#92400e;}
.tt-slot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tt-slot-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;background:#fff;border:1px solid var(--border);border-radius:999px;font-size:11px;font-weight:600;color:#334155;box-shadow:0 1px 2px rgba(40,30,90,.04);}
.tt-slot-chip.break{background:#f1f5f9;border-style:dashed;color:#64748b;}
.tt-slot-chip-actions{display:inline-flex;gap:2px;margin-left:2px;}
.tt-slot-chip-actions button{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);background:#fff;color:#64748b;font-size:10px;cursor:pointer;padding:0;line-height:20px;transition:all .15s;}
.tt-slot-chip-actions button:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-light);}
.tt-slot-chip-actions button.tt-chip-del:hover{border-color:#fca5a5;color:#b91c1c;background:#fef2f2;}
.tt-slot-empty{font-size:12px;color:#94a3b8;padding:8px 0;font-style:italic;}
.tt-board-wrap{margin-bottom:10px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border-soft);background:#fff;}
.tt-board{font-size:11px;min-width:0;}
.tt-board-hd{display:flex;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:1px solid var(--border);font-weight:700;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.5px;}
.tt-board-hd>div{flex:1;text-align:center;padding:10px 4px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:4px;min-height:38px;}
.tt-board-hd>div:last-child{border-right:none;}
.tt-board-hd .tt-today{background:linear-gradient(180deg,#ede9fe,#e9e5ff);color:var(--purple);position:relative;}
.tt-today-dot{width:6px;height:6px;border-radius:50%;background:var(--purple);animation:ttPulse 2s ease infinite;}
@keyframes ttPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.tt-tcol{width:72px;flex:none!important;background:#f8fafc;font-size:10px;font-weight:700;color:#64748b;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px;position:sticky;left:0;z-index:3;box-shadow:2px 0 8px rgba(40,30,90,.05);}
.tt-board-row{display:flex;border-bottom:1px solid var(--border);min-height:64px;align-items:stretch;transition:background .15s;}
.tt-board-row:hover{background:rgba(248,250,252,.6);}
.tt-board-row:last-child{border-bottom:none;}
.tt-board-cell{flex:1;padding:6px 5px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:60px;transition:background .15s;}
.tt-board-cell:last-child{border-right:none;}
.tt-board-cell.tt-today{background:rgba(237,233,254,.35);}
.tt-break-row{background:repeating-linear-gradient(-45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px);padding:10px;text-align:center;font-size:11px;font-weight:700;color:#64748b;border-bottom:1px solid var(--border);letter-spacing:.3px;}
.tt-break-row::before{content:'☕ ';opacity:.7;}
.tt-class-card{width:96%;max-width:128px;border-radius:12px;position:relative;border:1px solid transparent;display:flex;overflow:hidden;min-height:50px;box-shadow:0 1px 3px rgba(40,30,90,.06);transition:transform .18s ease,box-shadow .18s ease;}
.tt-class-card:not(.tt-add-slot):hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(40,30,90,.1);}
.tt-class-card.editable{cursor:pointer;}
.tt-card-accent{width:4px;flex-shrink:0;background:var(--tt-accent,#7c3aed);}
.tt-card-body{padding:7px 8px 6px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.tt-class-card .tt-subj{font-weight:700;font-size:10px;line-height:1.25;word-break:break-word;}
.tt-class-card .tt-cat{display:inline-block;margin-top:4px;font-size:7px;font-weight:800;padding:2px 5px;border-radius:4px;letter-spacing:.4px;text-transform:uppercase;align-self:flex-start;}
.tt-class-card .tt-cat.theory{background:rgba(124,58,237,.18);color:#5b21b6;}
.tt-class-card .tt-cat.practical{background:rgba(16,185,129,.18);color:#065f46;}
.tt-class-card .tt-cat.lab{background:rgba(245,158,11,.2);color:#92400e;}
.tt-class-card .tt-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:6px;background:#fff;color:#b91c1c;border:1px solid #fecaca;font-size:10px;line-height:16px;text-align:center;cursor:pointer;display:none;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:all .15s;}
.tt-class-card.editable:hover .tt-del{display:block;}
.tt-class-card .tt-del:hover{background:#fef2f2;border-color:#f87171;}
.tt-add-slot{flex-direction:column;gap:3px;border:2px dashed #d8dee9!important;background:#fafbfc!important;color:#94a3b8!important;font-size:10px;font-weight:600;box-shadow:none!important;}
.tt-add-slot:hover{border-color:var(--purple)!important;color:var(--purple)!important;background:var(--purple-light)!important;transform:none!important;}
.tt-add-slot span{font-size:14px;line-height:1;font-weight:400;}
.tt-foot-legend{display:flex;gap:18px;justify-content:center;padding:10px 14px;font-size:10px;font-weight:600;color:#64748b;background:linear-gradient(180deg,#f8fafc,#fff);border-top:1px solid var(--border);flex-wrap:wrap;}
.tt-foot-legend span{display:flex;align-items:center;gap:6px;text-transform:capitalize;}
.tt-foot-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.8);}
.tt-empty{padding:32px 20px;text-align:center;color:#94a3b8;font-size:13px;line-height:1.5;}
.tt-empty-icon{font-size:28px;display:block;margin-bottom:8px;opacity:.5;}
.tt-hint{margin:0 0 0;font-size:11px;color:var(--muted);line-height:1.45;}
.tt-compact .tt-hero{padding:10px 12px;margin-bottom:10px;border-radius:12px;}
.tt-compact .tt-hero-icon{width:36px;height:36px;font-size:16px;border-radius:10px;}
.tt-compact .tt-hero-title{font-size:14px;}
.tt-compact .tt-hero-sub,.tt-compact .tt-hero-badge{display:none;}
.tt-compact .tt-board-wrap{box-shadow:var(--shadow-card);}
.tt-compact .tt-board-row{min-height:52px;}
.tt-compact .tt-board-cell{min-height:48px;padding:4px;}
.tt-compact .tt-class-card{max-width:108px;min-height:42px;border-radius:10px;}
.tt-compact .tt-foot-legend{display:none;}
.tt-compact .tt-tcol{width:58px;font-size:9px;}
@media(max-width:900px){
.tt-hero{flex-direction:column;align-items:flex-start;}
.tt-board-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tt-board{min-width:680px;}
.tt-edit-row .btn{width:100%;}
}
.qb-card{background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-card);transition:box-shadow .2s,transform .15s;}
.qb-card:hover{box-shadow:var(--shadow-md);}
.qb-card-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.qb-num{font-size:11px;font-weight:800;color:var(--purple);background:var(--purple-light);padding:3px 8px;border-radius:6px;}
.qb-subj{font-size:11px;font-weight:600;color:#334155;background:#f1f5f9;padding:3px 10px;border-radius:6px;}
.qb-type{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;}
.qb-type.theory{background:#ede9fe;color:#5b21b6;}
.qb-type.practical{background:#d1fae5;color:#065f46;}
.qb-actions{margin-left:auto;display:flex;gap:6px;}
.qb-q{font-size:14px;font-weight:700;color:var(--text);line-height:1.45;margin-bottom:8px;}
.qb-topic{font-size:11px;color:var(--muted);margin-bottom:8px;}
.qb-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.qb-opt{font-size:12px;padding:8px 10px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);color:#475569;}
.qb-opt.correct{background:#ecfdf5;border-color:#22c55e;color:#065f46;font-weight:700;display:flex;align-items:center;gap:8px;}
.qb-opt-tick{width:20px;height:20px;border-radius:50%;background:#22c55e;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;line-height:1;}
.qb-ans-lbl{font-size:10px;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:.4px;margin:8px 0 6px;}
.qb-exp{margin-top:10px;font-size:11px;color:#64748b;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 10px;}
.qb-empty{text-align:center;padding:48px 20px;color:#94a3b8;}
.qb-empty span{font-size:40px;display:block;margin-bottom:10px;opacity:.6;}
.qb-subjects-bar{margin-bottom:14px;padding:14px 16px;}
.qb-subject-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:28px;}
.qb-sub-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--purple-light);color:var(--purple);border:1px solid rgba(91,79,207,.12);border-radius:999px;font-size:12px;font-weight:600;}
.qb-sub-chip button{width:18px;height:18px;border-radius:50%;border:none;background:rgba(91,79,207,.12);color:var(--purple);cursor:pointer;font-size:10px;line-height:18px;padding:0;transition:all .15s;}
.qb-sub-chip button:hover{background:#fee2e2;color:#b91c1c;}
.qb-sub-empty{font-size:12px;color:#94a3b8;font-style:italic;}
.qb-subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.qb-subject-card{background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:18px 16px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow-card);}
.qb-subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.qb-subject-card .qb-sub-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px;}
.qb-subject-card .qb-sub-count{font-size:26px;font-weight:800;line-height:1;margin-bottom:4px;}
.qb-subject-card .qb-sub-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:6px;line-height:1.3;}
.qb-subject-card .qb-sub-meta{font-size:11px;color:var(--muted);line-height:1.45;}
@media(max-width:700px){.qb-opts{grid-template-columns:1fr;}.qb-subject-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
.sb-logout{
display:flex;align-items:center;gap:12px;
padding:11px 14px;border-radius:10px;
color:#ffffff;cursor:pointer;
font-size:13px;font-weight:500;
transition:all 0.2s;border:none;background:none;
width:100%;font-family:var(--font-stack);
}
.sb-logout:hover{color:#f97316;}
.sb-logout:hover{background:rgba(239,68,68,0.15);color:#f87171;}
/* ===== MAIN ===== */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
/* ===== TOPBAR ===== */
.topbar{
height:65px;background:#fff;
border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;padding:0 28px;
position:sticky;top:0;z-index:100;
box-shadow:var(--shadow-topbar);
}
.topbar-ham{
width:38px;height:38px;border-radius:8px;border:1px solid var(--border);
background:#fff;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:5px;cursor:pointer;margin-right:auto;
}
.topbar-ham span{width:18px;height:2px;background:var(--muted);border-radius:2px;display:block;}
.topbar-right{display:flex;align-items:center;gap:16px;}
.notif-btn{
position:relative;width:42px;height:42px;border-radius:50%;
background:var(--gray);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:18px;
}
.notif-badge{
position:absolute;top:4px;right:4px;
width:18px;height:18px;border-radius:50%;
background:#e91e8c;color:#fff;
font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;
border:2px solid #fff;
}
.user-profile{display:flex;align-items:center;gap:10px;cursor:pointer;}
.user-avatar{
width:42px;height:42px;border-radius:50%;
object-fit:cover;border:2px solid var(--purple-light);
background:linear-gradient(135deg,#4a3fc0,#6c3de8);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:16px;flex-shrink:0;
}
.user-info-top h4{font-size:14px;font-weight:700;color:var(--text);}
.user-info-top p{font-size:11px;color:var(--muted);}
.chevron{color:var(--muted);font-size:12px;}
/* ===== PAGE ===== */
.page-content{padding:28px;flex:1;}
.page-section{display:none;}
.page-section.active{display:block;}
/* ===== WELCOME SECTION ===== */
.welcome-row{display:grid;grid-template-columns:1fr auto;gap:16px;margin-bottom:28px;align-items:center;}
.welcome-text h1{font-size:26px;font-weight:800;color:var(--text);}
.welcome-text p{font-size:13px;color:var(--muted);margin-top:4px;}
.iti-card{
background:#ffffff;
border-radius:16px;
padding:18px 20px;
border:1px solid #e0e7ff;
box-shadow:0 3px 6px -1px rgba(0,0,0,0.08),0 2px 4px -2px rgba(0,0,0,0.06);
display:flex;
align-items:center;
gap:14px;
min-width:220px;
transition: all 0.2s ease;
}
.iti-card:hover{
border-color:#0008ff;
box-shadow:0 8px 20px -4px rgba(0,8,255,0.15);
}
.iti-card .iti-img{font-size:38px; color:#0008ff;}
.iti-card h3{font-size:15px;font-weight:700; color:#1e293b;}
.iti-card p{font-size:12px;color:#64748b;}
.iti-card p strong{color:#0008ff;}
/* ===== QUICK ACCESS ===== */
.section-title{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text);}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
@media(max-width:1100px){.quick-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.quick-grid{grid-template-columns:1fr;}}
.quick-card{
background:#ffffff;
border-radius:18px;
padding:24px 18px;
border:1px solid #e0e7ff;
text-align:center;
box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor:pointer;
position:relative;
overflow:hidden;
}
.quick-card::before{
content:'';
position:absolute;
inset:0;
opacity:0;
transition:opacity 0.2s;
background:linear-gradient(135deg, rgba(0,8,255,0.04), rgba(0,8,255,0.08));
}
.quick-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 20px 25px -5px rgba(0, 8, 255, 0.1), 0 8px 10px -6px rgba(0, 8, 255, 0.1);
border-color:#0008ff;
}
.quick-card:hover::before{opacity:1;}
.qc-img{
width:80px;height:80px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin:0 auto 14px;font-size:36px;
position:relative;
background:#f0f4ff;
border:3px solid #e0e7ff;
transition:transform 0.2s, border-color 0.2s;
}
.quick-card:hover .qc-img{
transform:scale(1.05);
border-color:#0008ff;
}
.qc-img .dots{
position:absolute;width:8px;height:8px;border-radius:50%;
top:8px;right:8px;
background:#ff0000;
}
.quick-card h3{
font-size:15px;
font-weight:700;
margin-bottom:6px;
color:#1e293b;
}
.quick-card p{
font-size:12px;
color:#64748b;
line-height:1.4;
margin-bottom:14px;
}
.qc-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 22px;border-radius:8px;border:none;
font-size:13px;font-weight:700;cursor:pointer;
font-family:var(--font-stack);transition:transform 0.15s,box-shadow 0.2s,opacity 0.2s;
color:#fff;
}
.qc-btn:hover{opacity:0.94;transform:translateY(-1px);}
.qc-btn:active{transform:translateY(0);}
.qc-btn.blue{background:var(--purple);}
.qc-btn.green{background:var(--green);}
.qc-btn.purple{background:#9c27b0;}
.qc-btn.orange{background:var(--orange);}
.qc-btn.teal{background:#00897b;}
.qc-btn.pink{background:var(--pink);}
/* ===== BOTTOM GRID ===== */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:768px){.bottom-grid{grid-template-columns:1fr;}}
.info-card{
background:#ffffff;
border-radius:16px;
border:1px solid #e0e7ff;
box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
overflow:hidden;
transition:all 0.2s ease;
}
.info-card:hover{
border-color:#0008ff;
box-shadow:0 10px 15px -3px rgba(0,8,255,0.1);
}
.info-card-header{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;
border-bottom:1px solid #f1f5f9;
background:#f8fafc;
}
.info-card-header h3{
font-size:14px;
font-weight:700;
display:flex;align-items:center;
gap:8px;
color:#1e293b;
}
.view-all{
font-size:12px;
color:#0008ff;
font-weight:600;
cursor:pointer;
display:flex;align-items:center;
gap:3px;
text-decoration:none;
transition:color 0.2s;
}
.view-all:hover{
color:#0006cc;
text-decoration:underline;
}
.upcoming-item{
display:flex;align-items:flex-start;gap:12px;
padding:14px 20px;border-bottom:1px solid rgba(0,0,0,0.04);
}
.upcoming-item:last-child{border-bottom:none;}
.ui-icon{
width:32px;height:32px;border-radius:8px;
background:var(--purple-light);display:flex;align-items:center;justify-content:center;
font-size:15px;flex-shrink:0;margin-top:1px;
}
.ui-title{font-size:13px;font-weight:600;margin-bottom:3px;}
.ui-meta{font-size:11px;color:var(--muted);}
.notice-item{padding:14px 20px;border-bottom:1px solid rgba(0,0,0,0.04);display:flex;gap:10px;align-items:flex-start;}
.notice-item:last-child{border-bottom:none;}
.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--purple);flex-shrink:0;margin-top:5px;}
.notice-text p{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:3px;}
.notice-date{font-size:11px;color:var(--purple);font-weight:600;}
/* ===== STAT CARDS ===== */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{
background:#ffffff;
border-radius:16px;
border:1px solid #e0e7ff;
padding:18px;
box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.stat-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 15px -3px rgba(0,8,255,0.1);
border-color:#0008ff;
}
.sc-icon{
width:42px;
height:42px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
margin-bottom:10px;
background:#f0f4ff;
color:#0008ff;
}
.sc-val{
font-size:26px;
font-weight:800;
font-family:var(--font-stack);
letter-spacing:-0.5px;
color:#1e293b;
}
.sc-lbl{
font-size:12px;
color:#64748b;
margin-top:2px;
font-weight:500;
}
/* ===== TABLE ===== */
.card{
background:#ffffff;
border-radius:16px;
border:1px solid #e0e7ff;
box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
overflow:hidden;
margin-bottom:20px;
transition:all 0.2s ease;
}
.card:hover{
border-color:#0008ff;
box-shadow:0 10px 15px -3px rgba(0,8,255,0.1);
}
.card-hd{
padding:14px 18px;
border-bottom:1px solid #f1f5f9;
display:flex;align-items:center;justify-content:space-between;
background:#f8fafc;
}
.card-hd h3{
font-size:14px;
font-weight:700;
color:#1e293b;
}
table{width:100%;border-collapse:collapse;}
thead th{background:var(--gray);padding:10px 16px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);border-bottom:1px solid var(--border);}
tbody td{padding:12px 16px;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.04);color:var(--text);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--gray);}
/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-success{background:#e8f5e9;color:#2e7d32;}
.badge-warning{background:#fff8e1;color:#f57f17;}
.badge-danger{background:#ffebee;color:#c62828;}
.badge-purple{background:var(--purple-light);color:var(--purple);}
.badge-orange{background:#fff3e0;color:#e65100;}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-stack);transition:all 0.2s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 2px 6px rgba(91,79,207,0.32);}
.btn-primary:hover{background:var(--purple-dark);box-shadow:0 4px 12px rgba(91,79,207,0.4);}
.btn-outline{background:#fff;color:var(--muted);border:1px solid var(--border);}
.btn-outline:hover{background:var(--gray);}
.btn-success{background:var(--green);color:#fff;}
.btn-sm{padding:5px 12px;font-size:11px;}
/* FORM */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:6px;}
.form-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:var(--font-stack);color:var(--text);outline:none;transition:border-color 0.2s;}
.form-input:focus{border-color:var(--purple);box-shadow:var(--ring);}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7a9d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
textarea.form-input{resize:vertical;min-height:90px;}
/* Daily Diary table — yellow header (official format) */
#dailyDiaryTable .dd-hdr th{
background:#FFEB3B;
border:2px solid #111;
padding:8px 10px;
font-weight:800;
text-align:left;
color:#111;
}
#dailyDiaryTable td,#dailyDiaryTable th{border:1px solid #111;}
#dailyDiaryTable .dd-cell{
min-height:28px;
min-width:180px;
outline:none;
padding:6px 8px;
cursor:text;
line-height:1.45;
}
#dailyDiaryTable .dd-hint{
font-size:10px;
color:#888;
margin-top:3px;
padding:0 8px 6px;
line-height:1.35;
}
/* RTE — teacher मजकूर editor */
.rte-wrap{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s;}
.rte-wrap:focus-within{border-color:var(--purple);box-shadow:var(--ring);}
.rte-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px 8px;background:var(--gray);border-bottom:1px solid var(--border);}
.rte-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font-size:13px;font-family:var(--font-stack);cursor:pointer;transition:background .15s,border-color .15s;}
.rte-btn:hover{background:#fff;border-color:var(--border);}
.rte-btn:active{background:#EEF0FB;}
.rte-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;}
.rte-color{width:28px;height:28px;padding:2px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;flex-shrink:0;}
.rte-editor{min-height:120px;max-height:280px;overflow-y:auto;border:none!important;border-radius:0!important;box-shadow:none!important;padding:12px 14px;font-size:13px;line-height:1.65;outline:none;}
.rte-editor:empty:before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;}
.rte-content{word-break:break-word;}
.rte-content p,.rte-content div{margin:0 0 .5em;}
.rte-content p:last-child,.rte-content div:last-child{margin-bottom:0;}
/* ═══════════════════════════════════════════════════════════
Note Edit Modal — polished UI/UX (Theory / Practical)
═══════════════════════════════════════════════════════════ */
.en-modal{
width:min(720px,96vw) !important;
max-height:min(92vh,880px) !important;
display:flex !important;
flex-direction:column !important;
border-radius:18px !important;
overflow:hidden !important;
overflow-y:hidden !important;
box-shadow:0 25px 60px rgba(15,23,42,.22) !important;
}
.en-modal-hd{
padding:16px 20px !important;
background:linear-gradient(135deg,#f8f7ff 0%,#fff 60%) !important;
border-bottom:1px solid #eef2ff !important;
flex-shrink:0;
}
.en-modal-hd-left{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.en-kind-pill{
flex-shrink:0;
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
font-size:11px;
font-weight:800;
letter-spacing:.02em;
background:#5B4FCF;
color:#fff;
text-transform:uppercase;
}
.en-kind-pill.is-prac{
background:#0f766e;
}
.en-modal-sub{
font-size:12px;
color:#64748b;
margin-top:2px;
font-weight:500;
line-height:1.35;
}
.en-modal-body{
flex:1;
overflow-y:auto !important;
padding:16px 18px 20px !important;
background:#f4f6fb;
display:flex;
flex-direction:column;
gap:14px;
}
.en-modal-ft{
flex-shrink:0;
padding:12px 18px !important;
background:#fff !important;
border-top:1px solid #e8ecf4 !important;
display:flex !important;
justify-content:flex-end;
gap:10px;
box-shadow:0 -4px 16px rgba(15,23,42,.04);
}
.en-btn-cancel{ min-width:100px; }
.en-btn-save{
min-width:140px;
font-weight:700 !important;
padding-left:22px !important;
padding-right:22px !important;
}
/* Cards inside modal */
.en-card{
background:#fff;
border:1px solid #e8ecf4;
border-radius:14px;
padding:14px 16px;
box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.en-card-label{
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:#64748b;
margin-bottom:10px;
}
.en-meta-grid{
display:grid;
grid-template-columns:100px 1fr;
gap:12px 14px;
}
.en-field-full{ grid-column:1 / -1; }
.en-field{ min-width:0; }
.en-lbl{
display:block;
font-size:12px;
font-weight:600;
color:#334155;
margin-bottom:5px;
}
.en-lbl .req{ color:#e11d48; }
.en-lbl .en-opt{ color:#94a3b8; font-weight:500; }
.en-inp{
height:42px !important;
border-radius:10px !important;
border:1.5px solid #e2e8f0 !important;
font-size:14px !important;
background:#fafbfc !important;
}
.en-inp:focus{
background:#fff !important;
border-color:#5B4FCF !important;
box-shadow:0 0 0 3px rgba(91,79,207,.12) !important;
}
/* Points section */
.en-points-sec{ padding-bottom:12px; }
.en-points-sec-hd{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
flex-wrap:wrap;
}
.en-hint{
font-size:12px;
color:#94a3b8;
margin-top:3px;
line-height:1.4;
}
.en-points-sec-actions{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}
.en-count-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:36px;
height:32px;
padding:0 10px;
border-radius:10px;
background:#eef0fb;
color:#5B4FCF;
font-size:13px;
font-weight:800;
}
.en-add-btn{
border-radius:10px !important;
font-weight:700 !important;
box-shadow:0 2px 8px rgba(91,79,207,.2);
}
.en-points-box{
display:flex;
flex-direction:column;
gap:12px;
max-height:min(38vh,340px);
overflow-y:auto;
padding:2px 4px 4px 2px;
margin:0 -2px;
scrollbar-width:thin;
scrollbar-color:#c7d2fe transparent;
}
.en-points-box:empty:before{
content:'Loading…';
display:block;
text-align:center;
padding:28px;
color:#94a3b8;
font-size:13px;
}
/* Single point row */
.en-pt{
display:grid;
grid-template-columns:48px 1fr;
gap:0 12px;
align-items:stretch;
background:#fafbff;
border:1.5px solid #e8ecf4;
border-radius:14px;
padding:12px 12px 10px;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.en-pt:focus-within,
.en-pt.is-active{
background:#fff;
border-color:#a5b4fc;
box-shadow:0 0 0 3px rgba(91,79,207,.1), 0 4px 14px rgba(91,79,207,.08);
}
.en-pt-side{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
padding-top:2px;
}
.en-pt-num{
width:36px;
height:36px;
border-radius:11px;
background:linear-gradient(145deg,#5B4FCF,#4338ca);
color:#fff;
font-size:14px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 6px rgba(91,79,207,.3);
flex-shrink:0;
}
.en-pt-move{
display:flex;
flex-direction:column;
gap:3px;
}
.en-pt-move button{
width:28px;
height:24px;
border:1px solid #e2e8f0;
border-radius:6px;
background:#fff;
color:#64748b;
cursor:pointer;
font-size:10px;
line-height:1;
padding:0;
display:flex;
align-items:center;
justify-content:center;
}
.en-pt-move button:hover{
background:#eef0fb;
color:#5B4FCF;
border-color:#c7d2fe;
}
.en-pt-main{
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
}
.en-pt-editor{
min-height:64px;
max-height:140px;
overflow-y:auto;
padding:10px 12px;
font-size:14.5px;
line-height:1.65;
outline:none;
color:#0f172a;
background:#fff;
border:1.5px solid #e8ecf4;
border-radius:10px;
transition:border-color .15s;
}
.en-pt:focus-within .en-pt-editor{
border-color:#c7d2fe;
}
.en-pt-editor:empty:before{
content:attr(data-placeholder);
color:#b0b8c9;
pointer-events:none;
font-size:13.5px;
}
.en-pt-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:wrap;
}
.en-fmt{
display:inline-flex;
align-items:center;
gap:2px;
padding:3px;
background:#f1f5f9;
border-radius:10px;
border:1px solid #e2e8f0;
}
.en-fmt-btn{
min-width:34px;
height:32px;
padding:0 8px;
border:none;
border-radius:8px;
background:transparent;
color:#334155;
font-size:13px;
font-family:inherit;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background .12s, color .12s;
}
.en-fmt-btn:hover{
background:#fff;
color:#5B4FCF;
box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.en-fmt-btn b{ font-weight:800; font-size:14px; }
.en-fmt-btn i{ font-style:italic; font-family:Georgia,serif; font-size:14px; }
.en-fmt-btn u{ font-size:13px; }
.en-fmt-color{
width:32px;
height:28px;
padding:2px;
border:1px solid #e2e8f0;
border-radius:7px;
background:#fff;
cursor:pointer;
margin:0 2px;
}
.en-fmt-sep{
width:1px;
height:18px;
background:#cbd5e1;
margin:0 3px;
}
.en-pt-del{
height:32px;
padding:0 12px;
border:1px solid #fecaca;
border-radius:8px;
background:#fff5f5;
color:#dc2626;
font-size:12px;
font-weight:600;
font-family:inherit;
cursor:pointer;
white-space:nowrap;
}
.en-pt-del:hover{
background:#fee2e2;
border-color:#f87171;
}
/* Add another point */
.en-add-foot{
width:100%;
margin-top:12px;
padding:12px;
border:1.5px dashed #c7d2fe;
border-radius:12px;
background:#f8f7ff;
color:#5B4FCF;
font-size:13.5px;
font-weight:700;
font-family:inherit;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
transition:background .15s, border-color .15s;
}
.en-add-foot:hover{
background:#eef0fb;
border-color:#5B4FCF;
}
.en-add-foot-icon{
width:22px;
height:22px;
border-radius:6px;
background:#5B4FCF;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
line-height:1;
}
/* Preview */
.en-preview-sec{ background:#fafbff; }
.en-preview-tag{
font-size:10px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
color:#059669;
background:#d1fae5;
padding:3px 8px;
border-radius:999px;
}
.en-preview{
min-height:72px;
max-height:min(22vh,180px);
overflow-y:auto;
border:1px solid #e8ecf4;
border-radius:12px;
padding:12px;
background:#fff;
}
.en-preview:empty:before{
content:'Points लिहिल्यावर इथे students preview दिसेल';
display:block;
text-align:center;
color:#94a3b8;
font-size:12.5px;
padding:16px 8px;
}
/* Display: point-wise notes (library + students) */
.note-points-view{
display:flex;
flex-direction:column;
gap:10px;
max-width:100%;
}
.note-point{
display:flex;
gap:12px;
align-items:flex-start;
padding:12px 14px;
background:#fff;
border:1px solid #eef2f7;
border-radius:12px;
border-left:4px solid #5B4FCF;
box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.note-point-n{
flex-shrink:0;
min-width:28px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:800;
color:#fff;
background:#5B4FCF;
border-radius:8px;
}
.note-point-body{
flex:1;
font-size:14px;
line-height:1.7;
color:#0f172a;
word-break:break-word;
}
.note-point-body b,.note-point-body strong{font-weight:700}
.note-point-body i,.note-point-body em{font-style:italic}
.note-point-body u{text-decoration:underline}
.note-point-body p{margin:0 0 .35em}
.note-point-body p:last-child{margin-bottom:0}
.note-inner .note-points-view{margin-top:4px}
.theory-full-notes.note-points-view,
.prac-full-notes.note-points-view{padding:2px 0}
@media (max-width:560px){
.en-modal{ width:100vw !important; max-height:100vh !important; border-radius:0 !important; }
.en-meta-grid{ grid-template-columns:1fr; }
.en-pt{ grid-template-columns:40px 1fr; padding:10px; }
.en-pt-num{ width:32px; height:32px; font-size:13px; border-radius:9px; }
.en-modal-body{ padding:12px !important; gap:12px; }
.en-points-box{ max-height:min(42vh,300px); }
.en-pt-tools{ flex-direction:column; align-items:stretch; }
.en-fmt{ justify-content:center; }
.en-pt-del{ width:100%; }
}
/* ATT */
.att-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:16px;}
.att-day{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.att-day.p{background:#e8f5e9;color:#2e7d32;}
.att-day.a{background:#ffebee;color:#c62828;}
.att-day.h{background:var(--gray);color:var(--muted);}
.att-day.hd{background:transparent;color:var(--muted);font-size:11px;}
/* STUDENT ROW */
.s-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,0.05);}
.s-row:last-child{border-bottom:none;}
.s-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
/* ATT TOGGLE */
.att-toggle{display:flex;gap:5px;}
.att-btn{width:30px;height:30px;border-radius:6px;border:1.5px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all 0.15s;}
.att-btn.p-on{background:#e8f5e9;border-color:#2e7d32;color:#2e7d32;}
.att-btn.a-on{background:#ffebee;border-color:#c62828;color:#c62828;}
/* PROGRESS */
.prog-bar{height:6px;background:var(--gray);border-radius:3px;overflow:hidden;margin-top:5px;}
.prog-fill{height:100%;border-radius:3px;}
/* MODAL */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
.modal-ov.show{display:flex;}
.modal{background:#fff;border-radius:20px;width:520px;max-width:95vw;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);}
.modal-hd{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1;border-radius:20px 20px 0 0;}
.modal-title{font-size:16px;font-weight:700;}
.modal-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
.modal-body{padding:24px;}
.modal-ft{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
/* TABS */
.tabs{display:flex;gap:4px;background:var(--gray);border-radius:10px;padding:4px;margin-bottom:20px;}
.tab-btn{flex:1;padding:8px 10px;border-radius:7px;border:none;background:transparent;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);font-family:var(--font-stack);transition:all 0.2s;}
.tab-btn.active{background:#fff;color:var(--purple);box-shadow:0 1px 4px rgba(0,0,0,0.08);}
/* TOAST */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
.toast{background:#1a1a2e;color:#fff;padding:12px 16px;border-radius:10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,0.25);animation:toastIn 0.3s ease;min-width:260px;}
@keyframes toastIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes toastOut{from{transform:translateX(0);opacity:1;}to{transform:translateX(100%);opacity:0;}}
.toast.ok{border-left:3px solid var(--green);}
.toast.warn{border-left:3px solid var(--orange);}
/* UPLOAD ZONE */
.upload-zone{border:2px dashed var(--border);border-radius:14px;padding:28px;text-align:center;cursor:pointer;transition:all 0.2s;}
.upload-zone:hover{border-color:var(--purple);background:var(--purple-light);}
/* PROFILE */
.profile-hero{background:linear-gradient(135deg,#4a3fc0,#6c3de8);border-radius:16px;padding:28px;color:#fff;display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.profile-av-lg{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;border:3px solid rgba(255,255,255,0.3);}
/* NOTICE BOARD in sidebar */
.notice-board-widget{margin:12px;background:rgba(255,255,255,0.07);border-radius:10px;padding:12px;}
/* ===== TEACHER specific ===== */
.teacher-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;background:rgba(247,148,29,0.18);color:var(--orange);font-size:10px;font-weight:600;}
/* grid flex utils */
.flex{display:flex;}.ic{align-items:center;}.jb{justify-content:space-between;}
.gap8{gap:8px;}.gap12{gap:12px;}.gap16{gap:16px;}
.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}.mb20{margin-bottom:20px;}.mb24{margin-bottom:24px;}
.f1{flex:1;}
/* DB status dot */
.db-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:6px;}
.db-dot.online{background:#22b573;box-shadow:0 0 0 2px #c8f5e4;}
.db-dot.offline{background:#e53935;box-shadow:0 0 0 2px #ffd0cd;}
/* spinner inside button */
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:5px;}
/* profile photo ring */
#photoPreviewWrap{transition:border-color 0.2s;}
/* teacher student profile grid */
.t-profile-card{transition:transform 0.18s,box-shadow 0.18s;}
.t-profile-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
/* DB dot */
.db-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:4px;vertical-align:middle;}
.db-dot.online{background:#22b573;box-shadow:0 0 0 2px #c8f5e4;}
.db-dot.offline{background:#ccc;}
/* Spinner */
.btn-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Login error */
#loginErr{animation:fadeIn 0.2s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
/* DB dot */
.db-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:4px;vertical-align:middle;}
.db-dot.online{background:#22b573;box-shadow:0 0 0 2px #c8f5e4;}
.db-dot.offline{background:#bbb;}
/* Spinner */
.btn-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Login error shake */
#loginErr{animation:fadeInDown 0.2s ease;}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
/* Dashboard lock banner flex */
#dashLockBanner{display:none;}
#dashLockBanner.show{display:flex!important;}
/* Student profile incomplete — mobile + desktop nav lock */
body.student-profile-locked #mobBottomNav .mob-nav-item.nav-locked{
opacity:0.35 !important;
pointer-events:none !important;
filter:grayscale(0.4);
}
body.student-profile-locked #mobBottomNav .mob-nav-item:not(.nav-locked){
opacity:1 !important;
pointer-events:auto !important;
}
body.student-profile-locked #mobMoreMenu [onclick].nav-locked{
opacity:0.35 !important;
pointer-events:none !important;
filter:grayscale(0.4);
}
body.student-profile-locked #studentApp .nav-item.nav-locked{
opacity:0.3 !important;
pointer-events:none !important;
}
/* Lock overlay above mobile bottom nav */
#dashLockBanner{
z-index:1200 !important;
padding:16px;
box-sizing:border-box;
}
#dashLockBanner > div{
max-height:min(90vh,520px);
overflow-y:auto;
}
/* gap-12 */
.gap-12{gap:12px;}
/* Teacher card */
.t-profile-card{transition:transform 0.18s,box-shadow 0.18s;}
.t-profile-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
/* Attendance step buttons */
#markAttCard video { border: 3px solid var(--purple); }
#capturedPhoto { border: 3px solid var(--green); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.gps-checking { animation: pulse 1s infinite; }
/* tokens referenced by content renderers */
:root{ --border-light:rgba(40,30,90,0.07); --success-light:#ECFDF5; --warning-light:#FFFBEB; }
.badge-primary{background:var(--purple-light);color:var(--purple);}
/* ===== ASSIGN-TO targeting control ===== */
.seg-assign{display:flex;gap:8px;background:var(--gray);padding:4px;border-radius:10px;}
.seg-btn{flex:1;padding:9px 10px;border:none;background:transparent;border-radius:7px;font-family:var(--font-stack);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.18s;}
.seg-btn.active{background:#fff;color:var(--purple);box-shadow:0 1px 4px rgba(40,30,90,0.12);}
.assign-student-list{margin-top:10px;max-height:200px;overflow-y:auto;border:1px solid var(--border-soft);border-radius:10px;padding:6px;}
.assign-tools{display:flex;align-items:center;gap:10px;margin-bottom:6px;padding:4px 6px;}
.assign-tools .mini-link{font-size:11px;font-weight:600;color:var(--purple);cursor:pointer;}
.assign-row{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:8px;cursor:pointer;transition:background 0.15s;}
.assign-row:hover{background:var(--purple-light);}
.assign-row input{width:16px;height:16px;accent-color:var(--purple);cursor:pointer;}
.assign-row .ar-av{width:28px;height:28px;border-radius:50%;background:var(--purple-light);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.assign-row .ar-name{font-size:12px;font-weight:600;}
.assign-row .ar-roll{font-size:10px;color:var(--muted);}
.aud-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:600;background:#EEF0FB;color:var(--purple);}
.aud-chip.all{background:#E8F5E9;color:#2e7d32;}
/* submission rows in teacher modal */
.sub-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border-light);}
.sub-row:last-child{border-bottom:none;}
.sub-marks-inp{width:74px;height:34px;padding:0 8px;text-align:center;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-stack);font-size:13px;outline:none;}
.sub-marks-inp:focus{border-color:var(--purple);box-shadow:var(--ring);}
/* ===== Theory Notes / Theory Book — premium UI ===== */
:root{
--tn-ink:#0f172a;
--tn-muted:#64748b;
--tn-soft:#f1f5f9;
--tn-line:#e2e8f0;
--tn-indigo:#4f46e5;
--tn-indigo-2:#6366f1;
--tn-violet:#7c3aed;
--tn-sky:#0ea5e9;
--tn-emerald:#059669;
--tn-amber:#d97706;
--tn-rose:#e11d48;
--tn-grad:linear-gradient(135deg,#4338ca 0%,#5b4fcf 42%,#7c3aed 100%);
--tn-grad-soft:linear-gradient(145deg,#eef2ff 0%,#f5f3ff 55%,#f8fafc 100%);
--tn-shadow:0 8px 28px rgba(67,56,202,.10),0 2px 8px rgba(15,23,42,.04);
--tn-font-ui:var(--font-poppins),var(--font-heading),system-ui,sans-serif;
--tn-font-body:var(--font-nunito),var(--font-body),system-ui,sans-serif;
}
#t-theory.active,
#t-theory-book.active,
#teacherApp .iti-main #t-theory,
#teacherApp .iti-main #t-theory-book{
font-family:var(--tn-font-body);
color:var(--tn-ink);
}
#t-theory h2,
#t-theory-book h2,
#t-theory h3,
.tn-page-hero h1,
.tn-page-hero h2,
.tn-toolbar-title,
.mod-title,
.book-ui-title{
font-family:var(--tn-font-ui) !important;
letter-spacing:-0.02em;
}
/* Page hero */
.tn-page-hero{
position:relative;
overflow:hidden;
border-radius:20px;
padding:22px 22px 20px;
margin-bottom:16px;
color:#fff;
background:var(--tn-grad);
box-shadow:var(--tn-shadow);
}
.tn-page-hero::before{
content:'';
position:absolute;inset:auto -20% -60% auto;width:280px;height:280px;
background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
pointer-events:none;
}
.tn-page-hero::after{
content:'';
position:absolute;left:-40px;top:-40px;width:160px;height:160px;
background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
pointer-events:none;
}
.tn-page-hero-inner{
position:relative;z-index:1;
display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px;
}
.tn-page-hero h2{
margin:0 0 6px;font-size:22px;font-weight:800;color:#fff !important;
}
.tn-page-hero p{
margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.9);max-width:560px;
}
.tn-hero-stats{
display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.tn-hero-stat{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
font-size:11px;font-weight:700;color:#fff;
font-family:var(--tn-font-ui);
backdrop-filter:blur(6px);
}
.tn-hero-actions{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.tn-hero-actions .btn{
border-radius:11px !important;
font-family:var(--tn-font-ui) !important;
font-weight:700 !important;
box-shadow:0 4px 14px rgba(15,23,42,.12);
}
.tn-hero-actions .btn-primary,
.tn-hero-actions .btn.btn-primary{
background:#fff !important;color:#4338ca !important;border:none !important;
}
.tn-hero-actions .btn-outline,
.tn-hero-actions .btn.btn-outline{
background:rgba(255,255,255,.12) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.35) !important;
}
.tn-hero-actions .btn-success{
background:linear-gradient(135deg,#10b981,#059669) !important;
color:#fff !important;border:none !important;
}
.tn-hero-actions .btn-danger-soft{
background:rgba(254,226,226,.2) !important;
color:#fecaca !important;
border:1px solid rgba(254,202,202,.45) !important;
}
/* Toolbar under hero */
.tn-toolbar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:14px;padding:14px 16px;
background:#fff;
border:1px solid var(--tn-line);
border-radius:16px;
box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.tn-toolbar-title{
font-size:14px;font-weight:800;color:var(--tn-ink);margin:0 0 3px;
}
.tn-toolbar-sub{font-size:12px;color:var(--tn-muted);margin:0;line-height:1.45;}
.tn-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.tn-toolbar-actions .btn{
border-radius:10px !important;
font-family:var(--tn-font-ui) !important;
font-weight:650 !important;
font-size:12px !important;
}
.tn-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.tn-chip{
display:inline-flex;align-items:center;gap:4px;
font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;
font-family:var(--tn-font-ui);
letter-spacing:.01em;
}
.tn-chip-indigo{background:#eef2ff;color:#4338ca;}
.tn-chip-violet{background:#f5f3ff;color:#6d28d9;}
.tn-chip-emerald{background:#ecfdf5;color:#047857;}
.tn-chip-amber{background:#fffbeb;color:#b45309;}
.tn-chip-sky{background:#e0f2fe;color:#0369a1;}
.tn-chip-rose{background:#fff1f2;color:#be123c;}
.tn-chip-slate{background:#f1f5f9;color:#475569;}
.tn-chip-orange{background:#ffedd5;color:#9a3412;}
/* Module cards */
.tn-mod-list{display:flex;flex-direction:column;gap:12px;}
.mod-card{
background:#ffffff;
border:1px solid #e0e7ff;
border-radius:18px;
box-shadow:0 4px 14px rgba(67,56,202,.06);
overflow:hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mod-card:hover {
border-color: #a5b4fc;
box-shadow: 0 12px 28px rgba(79,70,229,.12);
transform: translateY(-1px);
}
.mod-card.open{
border-color:#818cf8;
box-shadow:0 14px 36px rgba(79,70,229,.14);
}
.mod-head{
display:flex;
align-items:center;
gap:14px;
padding:14px 16px;
cursor:pointer;
transition:background .15s;
background:linear-gradient(180deg,#fafbff 0%,#fff 100%);
}
.mod-head:hover{background:linear-gradient(180deg,#eef2ff 0%,#fafbff 100%);}
.mod-badge{
width:52px;
height:52px;
border-radius:14px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
font-weight:800;
font-size:16px;
line-height:1;
flex-shrink:0;
background: var(--tn-grad);
box-shadow:0 6px 16px rgba(79,70,229,.28);
font-family:var(--tn-font-ui);
}
.mod-badge small{
font-size:8px;
font-weight:700;
opacity:.92;
margin-top:3px;
letter-spacing:.6px;
}
.mod-title{
font-size:15px;font-weight:800;color:var(--tn-ink);line-height:1.35;
}
.mod-sub{font-size:11.5px;color:var(--tn-muted);margin-top:3px;line-height:1.4;}
.mod-chev{
color:#94a3b8;transition:transform .25s,background .15s,color .15s;
font-size:12px;flex-shrink:0;
width:30px;height:30px;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;
background:#f1f5f9;
}
.mod-card.open .mod-chev{
transform:rotate(180deg);
background:#e0e7ff;color:var(--tn-indigo);
}
.mod-body{
padding:0 18px 18px;
font-size:14px;
line-height:1.75;
color:var(--tn-ink);
border-top:1px solid #e0e7ff;
background:linear-gradient(180deg,#fcfcff 0%,#f8fafc 100%);
font-family:var(--tn-font-body);
}
.mod-body .note-inner{padding-top:16px;}
.mod-actions{
display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.mod-actions .btn{
border-radius:10px !important;
font-family:var(--tn-font-ui) !important;
font-weight:650 !important;
}
.note-pub{
font-size:10px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;
font-family:var(--tn-font-ui);
}
.note-pub.on{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.note-pub.off{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;}
.tn-empty{
text-align:center;padding:48px 24px;
background:var(--tn-grad-soft);
border:1px dashed #c7d2fe;border-radius:18px;
}
.tn-empty-ico{font-size:48px;margin-bottom:12px;line-height:1;}
.tn-empty-title{
font-size:16px;font-weight:800;color:var(--tn-ink);margin:0 0 8px;
font-family:var(--tn-font-ui);
}
.tn-empty-msg{
font-size:13px;color:var(--tn-muted);line-height:1.6;max-width:440px;margin:0 auto 16px;
}
.diagram-wrap{background:#FAFAFE;border:1px solid var(--border-soft);border-radius:12px;padding:16px;margin-top:14px;}
.svg-diagram{max-width:100%;height:auto;display:block;margin:0 auto;}
.diagram-cap{font-size:10px;color:var(--muted);text-align:center;margin-top:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
/* Theory Book page */
.book-ui{
max-width:1280px;
font-family:var(--tn-font-body);
}
.book-ui-hero{
border-radius:20px;padding:22px 22px 18px;margin-bottom:16px;
background:var(--tn-grad);color:#fff;box-shadow:var(--tn-shadow);
position:relative;overflow:hidden;
}
.book-ui-hero h3{
margin:0 0 6px;font-size:22px;font-weight:800;color:#fff;
font-family:var(--tn-font-ui);
}
.book-ui-hero p{margin:0;font-size:13px;color:rgba(255,255,255,.9);line-height:1.5;}
.book-ui-card{
background:#fff;border:1px solid #e0e7ff;border-radius:18px;
padding:18px 18px 16px;margin-bottom:16px;
box-shadow:0 4px 16px rgba(67,56,202,.06);
}
.book-ui-card h3{
margin:0 0 10px;font-size:16px;font-weight:800;color:var(--tn-ink);
font-family:var(--tn-font-ui);
}
.book-ui-help{
margin:0 0 14px;padding:12px 14px;
background:linear-gradient(90deg,#eef2ff,#f5f3ff);
border:1px solid #c7d2fe;border-radius:12px;
font-size:12.5px;color:#3730a3;line-height:1.55;
}
.book-ui .form-input,
.book-ui textarea.form-input{
border-radius:12px !important;
border:1.5px solid #e2e8f0 !important;
font-family:var(--tn-font-body) !important;
transition:border-color .15s, box-shadow .15s;
}
.book-ui .form-input:focus,
.book-ui textarea.form-input:focus{
border-color:#818cf8 !important;
box-shadow:0 0 0 3px rgba(99,102,241,.15) !important;
outline:none;
}
.book-ui .btn-primary{
border-radius:12px !important;
font-family:var(--tn-font-ui) !important;
font-weight:700 !important;
background:var(--tn-grad) !important;
border:none !important;
box-shadow:0 6px 16px rgba(79,70,229,.25);
}
/* Theory book study view (opened note) */
.theory-book-study{
max-width:100%;
font-family:var(--tn-font-body);
}
.theory-book-study-head{
background:var(--tn-grad);
color:#fff;padding:16px 18px;border-radius:14px;margin-bottom:16px;
box-shadow:0 8px 22px rgba(67,56,202,.2);
}
.theory-book-study-head .tbh-kicker{
font-size:11px;opacity:.92;font-weight:700;letter-spacing:.04em;
font-family:var(--tn-font-ui);text-transform:uppercase;
}
.theory-book-study-head .tbh-title{
font-size:18px;font-weight:800;margin-top:4px;
font-family:var(--tn-font-ui);
}
.theory-book-study-head .tbh-sub{font-size:12px;opacity:.9;margin-top:4px;}
.theory-book-page{
margin:0 0 20px;padding:14px 14px 16px;
background:#fff;border:1px solid #e0e7ff;border-radius:14px;
box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.theory-book-page-label{
font-size:12px;font-weight:800;color:var(--tn-indigo);
margin-bottom:10px;font-family:var(--tn-font-ui);
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;background:#eef2ff;border-radius:999px;
}
.theory-page-text{
margin-top:12px;padding:14px 16px;
background:linear-gradient(180deg,#f8fafc,#f1f5f9);
border:1px solid #e2e8f0;border-radius:12px;
font-size:14px;line-height:1.8;color:var(--tn-ink);
white-space:pre-wrap;word-break:break-word;
}
.theory-book-page img{
max-width:100%;height:auto;border:1px solid #cbd5e1;border-radius:10px;
box-shadow:0 6px 18px rgba(15,23,42,.08);background:#fff;display:block;margin:0 auto;
}
/* Publish / share card on theory page */
#t-theory .card[style*="border:2px solid"]{
border:1px solid #c7d2fe !important;
border-radius:18px !important;
box-shadow:0 4px 16px rgba(67,56,202,.06);
background:linear-gradient(180deg,#fff,#fafbff);
}
#t-theory .rte-wrap{
border-radius:12px;overflow:hidden;border:1px solid #e0e7ff;
}
#t-theory .rte-toolbar{background:#eef2ff;border-bottom:1px solid #e0e7ff;}
/* rich note content */
.note-inner .nsec, .stTheoryBody .nsec{
display:flex;align-items:center;gap:8px;
font-size:13.5px;font-weight:800;color:var(--tn-indigo);
margin:18px 0 8px;padding-bottom:6px;
border-bottom:2px solid #e0e7ff;
font-family:var(--tn-font-ui);
}
.note-inner .nsec:first-child, .stTheoryBody .nsec:first-child{margin-top:2px;}
.note-inner .nsec::before, .stTheoryBody .nsec::before{
content:'';width:4px;height:16px;background:var(--tn-grad);border-radius:2px;
}
.note-inner p, .stTheoryBody p{margin:7px 0;line-height:1.75;}
.note-inner ul, .stTheoryBody ul{margin:6px 0;padding-left:20px;}
.note-inner li, .stTheoryBody li{margin:5px 0;}
.note-inner .term, .stTheoryBody .term{color:var(--tn-ink);font-weight:700;}
.note-inner .ex, .stTheoryBody .ex{
background:linear-gradient(90deg,#fffbeb,#fff7ed);
border-left:4px solid #f59e0b;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13px;
}
.note-inner .keypt, .stTheoryBody .keypt{
background:linear-gradient(90deg,#ecfdf5,#f0fdf4);
border-left:4px solid #10b981;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13px;
}
.note-inner code, .stTheoryBody code{
background:#eef2ff;color:var(--tn-indigo);padding:2px 7px;border-radius:6px;font-size:12px;font-family:ui-monospace,monospace;
}
.note-inner table.ntab, .stTheoryBody table.ntab{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px;border-radius:10px;overflow:hidden;}
.note-inner table.ntab td, .note-inner table.ntab th, .stTheoryBody table.ntab td, .stTheoryBody table.ntab th{
border:1px solid #e0e7ff;padding:8px 10px;text-align:left;
}
.note-inner table.ntab th, .stTheoryBody table.ntab th{
background:var(--tn-grad);color:#fff;font-weight:700;font-family:var(--tn-font-ui);
}
.note-points-view .note-point{
border-left-color:var(--tn-indigo);
background:linear-gradient(90deg,#fff,#fafbff);
}
.note-point-n{background:var(--tn-grad);}
@media (max-width:720px){
.tn-page-hero{padding:16px;}
.tn-page-hero h2{font-size:18px;}
.mod-head{flex-wrap:wrap;}
.mod-actions{width:100%;}
.note-pub{order:5;}
}
/* Student note complete tick */
.st-note-summary{
font-size:13px;font-weight:600;color:#475569;margin:0 0 12px;padding:10px 14px;
background:linear-gradient(135deg,#f8faff,#eef2ff);border:1px solid #e0e7ff;border-radius:12px;
}
.st-note-done-chip{
display:inline-flex;align-items:center;gap:4px;background:#ecfdf5;color:#047857;
padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;
border:1px solid #a7f3d0;max-width:min(220px,42vw);overflow:hidden;text-overflow:ellipsis;
}
.st-note-complete-bar{
margin-top:16px;padding:12px 14px;border-radius:12px;border:1.5px dashed #c7d2fe;
background:linear-gradient(180deg,#f8faff,#fff);display:flex;flex-direction:column;gap:6px;
}
.st-note-complete-bar.is-done{
border-style:solid;border-color:#86efac;background:linear-gradient(180deg,#f0fdf4,#fff);
}
.st-note-complete-lbl{
display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:700;color:#1e293b;
user-select:none;margin:0;
}
.st-note-complete-cb{
width:18px;height:18px;accent-color:#16a34a;cursor:pointer;flex-shrink:0;
}
.st-note-complete-meta{
font-size:11.5px;color:#64748b;padding-left:28px;line-height:1.4;
}
.st-note-complete-bar.is-done .st-note-complete-meta{color:#047857;font-weight:600;}
.stTheoryCard.is-note-done,.stPracCard.is-note-done{box-shadow:0 0 0 1px rgba(34,197,94,.15);}
/* AI syllabus plan hint bar */
.lp-ai-hint{
margin:10px 0 14px;padding:10px 14px;border-radius:12px;font-size:12.5px;line-height:1.45;color:#4338ca;
background:linear-gradient(135deg,#f5f3ff,#eef2ff);border:1px solid #c4b5fd;
}
/* ===== LESSON PLAN & DEMONSTRATION PLAN — Nunito + Poppins ===== */
.lp-scope,.dp-scope,
#t-lesson-plan,#t-lesson-name,#t-demo-name,#t-demo-plan,
#dynamic-t-lesson-plan,#dynamic-t-lesson-name,#dynamic-t-demo-name,#dynamic-t-demo-plan{
font-family:var(--font-stack);
}
.lp-scope input,.lp-scope textarea,.lp-scope select,.lp-scope button,
.dp-scope input,.dp-scope textarea,.dp-scope select,.dp-scope button,
.lp-scope .btn,.lp-scope .form-input,.lp-scope .form-select,
.dp-scope .btn,.dp-scope .form-input,.dp-scope .form-select,
.lp-scope h1,.lp-scope h2,.lp-scope h3,.lp-scope h4,.lp-scope h5,
.dp-scope h1,.dp-scope h2,.dp-scope h3,.dp-scope h4,.dp-scope h5,
.lp-scope table,.dp-scope table,.lp-scope th,.lp-scope td,.dp-scope th,.dp-scope td{
font-family:var(--font-stack);
}
.lp-scope h1,.lp-scope h2,.lp-scope h3,.lp-scope h4,.lp-scope h5,
.dp-scope h1,.dp-scope h2,.dp-scope h3,.dp-scope h4,.dp-scope h5{
font-family:var(--font-heading) !important;
}
/* ===== DEMONSTRATION PLAN (POT FORMAT) ===== */
.dp-page-header{background:linear-gradient(135deg,#0d9488 0%,#059669 55%,#10b981 100%);border-radius:20px;padding:22px 24px;box-shadow:0 10px 32px rgba(13,148,136,.28);margin-bottom:20px}
.dp-page-header h3{margin:0 0 6px;font-size:22px;font-weight:900;color:#fff;letter-spacing:.3px}
.dp-page-header p{margin:0;font-size:13px;color:rgba(255,255,255,.9);line-height:1.5}
.dp-doc-title{text-align:center;font-size:22px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:22px;padding:14px 16px;background:linear-gradient(135deg,#0d9488,#059669);border-radius:12px;box-shadow:0 6px 20px rgba(13,148,136,.25)}
.dp-step-table th{background:linear-gradient(135deg,#0d9488 0%,#10b981 50%,#059669 100%)!important}
.dp-illustrations{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.dp-illustrations figure{margin:0;padding:10px;background:#f0fdfa;border:1px solid #99f6e4;border-radius:12px;page-break-inside:avoid}
.dp-illustrations img{max-width:100%;height:auto;max-height:280px;display:block;margin:0 auto;border-radius:8px;object-fit:contain}
.dp-illustrations figcaption{font-size:11px;font-weight:700;color:#0f766e;text-align:center;margin-top:8px;line-height:1.4}
.dp-prac-ref{font-size:12px;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:10px 12px;margin-bottom:14px;line-height:1.5}
/* ===== LESSON PLAN (POT FORMAT) ===== */
.lp-page-header{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#a855f7 100%);border-radius:20px;padding:22px 24px;box-shadow:0 10px 32px rgba(79,70,229,.28);margin-bottom:14px}
.lp-page-header h3{margin:0 0 6px;font-size:22px;font-weight:900;color:#fff;letter-spacing:.3px}
.lp-page-header p{margin:0;font-size:13px;color:rgba(255,255,255,.88);line-height:1.5}
.lp-tip-bar{
margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;color:#4338ca;
background:linear-gradient(90deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;
}
.lp-count-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:800;padding:6px 14px;border-radius:20px;margin-top:12px;backdrop-filter:blur(4px)}
.lp-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;width:100%}
.lp-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lp-search{min-width:220px;flex:1;max-width:300px;border-radius:10px!important;background:#fff!important}
.lp-list{display:flex;flex-direction:column;gap:12px}
.lp-card{background:#fff;border:none;border-radius:16px;margin-bottom:0;overflow:hidden;box-shadow:0 2px 12px rgba(15,23,42,.06);transition:transform .2s,box-shadow .2s}
.lp-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(91,79,207,.12)}
.lp-card.open{box-shadow:0 10px 28px rgba(91,79,207,.16)}
.lp-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;background:linear-gradient(135deg,#fafbff,#fff)}
.lp-badge{min-width:54px;height:54px;border-radius:14px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;font-weight:800;line-height:1;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.lp-badge small{font-size:8px;font-weight:700;opacity:.9;letter-spacing:.6px;margin-top:2px}
.lp-title{font-size:15px;font-weight:800;color:#1e293b;line-height:1.35}
.lp-sub{font-size:12px;color:#64748b;margin-top:4px}
.lp-saved{font-size:10px;font-weight:700;color:#16a34a;background:#dcfce7;padding:4px 10px;border-radius:20px;flex-shrink:0}
.lp-saved.draft{color:#b45309;background:#fef3c7}
.lp-print-btn{flex-shrink:0;border-radius:10px!important}
.lp-chev{font-size:13px;color:#94a3b8;transition:transform .25s;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border-radius:8px}
.lp-card.open .lp-chev{transform:rotate(180deg);background:#ede9fe;color:#5B4FCF}
.lp-body{padding:4px 20px 22px;background:#fcfcff}
.lp-doc{background:transparent;padding:8px 4px 4px;font-size:13px;color:#0f172a;line-height:1.6}
.lp-doc-title{text-align:center;font-size:22px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:22px;padding:14px 16px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:12px;box-shadow:0 6px 20px rgba(79,70,229,.25)}
.lp-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 16px;margin-bottom:22px;padding:18px;background:linear-gradient(135deg,#f5f3ff,#eff6ff);border-radius:16px;border:none}
.lp-meta-grid .lp-iti-field{grid-column:1/-1;background:linear-gradient(135deg,#e0e7ff,#ede9fe);padding:14px;border-radius:12px;border-left:4px solid #4f46e5}
.lp-meta-grid .lp-instructor-field{grid-column:1/-1;background:linear-gradient(135deg,#ede9fe,#dbeafe);padding:14px;border-radius:12px;border-left:4px solid #7c3aed}
.lp-field label{display:block;font-size:11px;font-weight:800;color:#5b21b6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.lp-field input,.lp-field textarea,.lp-field select,.lp-sec textarea,.lp-sec input[type=text],.lp-sec input[type=number],.lp-sec input[type=date]{width:100%;border:none!important;border-radius:12px;padding:12px 14px;font-size:13.5px;font-family:inherit;background:#f1f5f9;color:#1e293b;transition:background .2s,box-shadow .2s;resize:vertical}
.lp-field input:focus,.lp-field textarea:focus,.lp-field select:focus,.lp-sec textarea:focus,.lp-sec input:focus{outline:none;background:#eef2ff;box-shadow:0 0 0 3px rgba(91,79,207,.15)}
/* Pretty multi-line text boxes — alignment, line breaks, readability */
.lp-doc-pretty .lp-ta,
.lp-scope textarea.lp-ta,
.lp-sec textarea,
.lp-pres-table textarea{
white-space:pre-wrap !important;
word-break:break-word;
overflow-wrap:anywhere;
text-align:left !important;
text-justify:auto;
line-height:1.7 !important;
letter-spacing:0.01em;
font-size:13.5px !important;
font-family:var(--font-nunito),var(--font-body),system-ui,sans-serif !important;
color:#0f172a;
min-height:88px;
box-sizing:border-box;
}
.lp-doc-pretty .lp-ta-topic{min-height:72px;font-weight:700;color:#3730a3;}
.lp-doc-pretty .lp-ta-info{min-height:110px;background:#fff !important;border:1px solid #e0e7ff !important;}
.lp-doc-pretty .lp-ta-hints{min-height:72px;font-size:12.5px !important;color:#475569;}
.lp-sec{margin:18px 0;padding:14px 14px 14px 16px;border-left:4px solid #c7d2fe;border-radius:0 12px 12px 0;background:linear-gradient(90deg,rgba(237,233,254,.45),transparent)}
.lp-sec.roman-sec{border-left-color:#7c3aed;background:linear-gradient(90deg,rgba(237,233,254,.65),transparent)}
.lp-sec.lp-sec-card{
margin:16px 0;
padding:16px 16px 16px 18px;
border:1px solid #e0e7ff;
border-left:5px solid #6366f1;
border-radius:16px;
background:linear-gradient(145deg,#ffffff 0%,#f8fafc 55%,#f5f3ff 100%);
box-shadow:0 4px 18px rgba(79,70,229,.07);
}
.lp-sec.lp-sec-card.roman-sec{border-left-color:#7c3aed;background:linear-gradient(145deg,#fff 0%,#faf5ff 100%)}
.lp-sec-h{font-size:13px;font-weight:800;color:#1e293b;margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lp-sec-h strong{color:#4f46e5;font-weight:900}
.lp-sec-h.roman{font-size:14px}
.lp-sec-h.roman strong{color:#7c3aed}
.lp-sec-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:11px;font-weight:900;border-radius:8px}
.lp-sec-num.roman{background:linear-gradient(135deg,#7c3aed,#a855f7);font-size:10px;letter-spacing:.3px}
.lp-sec-sub{font-size:11px;font-weight:600;color:#64748b}
.lp-sub-lbl{font-size:12px;font-weight:800;color:#5b21b6;margin:12px 0 6px}
.lp-title-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.lp-title-row b{font-size:12px;color:#4f46e5;flex-shrink:0;font-weight:900}
.lp-title-row input{flex:1;min-width:180px;min-height:auto!important}
.lp-doc-pretty{padding:6px 2px 8px}
.lp-doc-pretty .lp-doc-title{
display:flex;align-items:center;justify-content:center;gap:10px;
letter-spacing:3px;font-size:20px;padding:16px 18px;
background:linear-gradient(135deg,#4338ca 0%,#6d28d9 50%,#7c3aed 100%);
box-shadow:0 10px 28px rgba(67,56,202,.28);
}
.lp-doc-title-ico{font-size:22px;letter-spacing:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.lp-source-bar{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
background:linear-gradient(90deg,#f8fafc,#eef2ff)!important;
border:1px solid #c7d2fe!important;border-radius:12px!important;
padding:12px 14px!important;margin-bottom:16px!important;font-size:12.5px!important;
}
.lp-ref-ok{display:inline-flex;align-items:center;gap:4px;background:#dcfce7;color:#166534;font-weight:800;padding:3px 10px;border-radius:999px;font-size:11px}
.lp-ref-warn{display:inline-flex;align-items:center;gap:4px;background:#fef3c7;color:#92400e;font-weight:800;padding:3px 10px;border-radius:999px;font-size:11px}
.lp-pres-wrap{margin-top:10px;border-radius:16px;overflow:hidden;background:#fff;border:2px solid #a5b4fc;box-shadow:0 8px 28px rgba(79,70,229,.12)}
.lp-pres-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.lp-pres-table th,.lp-pres-table td{border:1px solid #a5b4fc;padding:10px 12px;vertical-align:top}
.lp-pres-table th{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#7c3aed 100%);font-weight:800;text-align:center;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:14px 10px}
.lp-pres-table th:nth-child(1){width:24%}
.lp-pres-table th:nth-child(2){width:44%}
.lp-pres-table th:nth-child(3){width:24%}
.lp-pres-table tbody tr:nth-child(even){background:#f8fafc}
.lp-pres-table tbody tr:hover{background:#eef2ff}
.lp-pres-table td:first-child{font-weight:700;color:#4338ca;background:rgba(238,242,255,.65)}
.lp-pres-table textarea{width:100%;min-height:90px;border:1px solid transparent!important;border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;background:#fff;line-height:1.7;white-space:pre-wrap}
.lp-pres-table textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px rgba(91,79,207,.28);border-color:#a5b4fc!important}
.lp-pres-table .lp-rm-col{width:48px;text-align:center;background:#faf5ff;border-left:2px solid #e9d5ff;vertical-align:middle}
.lp-pres-table .lp-rm-row{background:#fee2e2;border:none;color:#b91c1c;width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:13px;transition:background .15s,transform .1s}
.lp-pres-table .lp-rm-row:hover{background:#fecaca;transform:scale(1.05)}
.lp-add-row{margin-top:12px;border-radius:10px!important}
.lp-sign-row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:28px;padding:20px 8px 8px;border-top:2px dashed #c7d2fe}
.lp-sign-block{flex:1;max-width:42%}
.lp-sign-line{height:52px;border-bottom:2px solid #334155;margin-bottom:10px}
.lp-sign-lbl{font-size:12px;font-weight:800;color:#4f46e5;text-align:center;letter-spacing:.3px}
.lp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:16px 8px 8px;background:linear-gradient(180deg,transparent,#f1f5f9);border-radius:0 0 12px 12px;position:sticky;bottom:0;z-index:2}
.lp-actions .btn{border-radius:10px!important;font-weight:700}
.lp-card{border:1px solid #e2e8f0}
.lp-card.open{border-color:#c4b5fd;box-shadow:0 12px 36px rgba(79,70,229,.14)}
.lp-body{padding:8px 18px 24px;background:linear-gradient(180deg,#fcfcff 0%,#f8fafc 100%)}
@media (max-width:720px){
.lp-pres-wrap{overflow-x:auto}
.lp-pres-table{min-width:640px}
.lp-actions{position:static}
}
/* ===== TEACHER VIDEO LEARNING ===== */
.tvid-page{max-width:1280px;margin:0 auto}
.tvid-published-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.tvid-published-header h3{margin:0}
.tvid-count-pill{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ede9fe,#dbeafe);color:#4f46e5;font-size:12px;font-weight:800;padding:6px 14px;border-radius:20px}
.tvid-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tvid-filters .tvidf{padding:8px 16px;border-radius:24px;border:1.5px solid #e2e8f0;background:#fff;color:#334155;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.tvid-filters .tvidf:hover{border-color:#c7d2fe;background:#f5f3ff}
.tvid-filters .tvidf.on{background:linear-gradient(135deg,#5B4FCF,#7c3aed);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(91,79,207,.35)}
.tvid-grid{display:grid;grid-template-columns:1fr;gap:20px;width:100%}
@media(min-width:640px){.tvid-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.tvid-grid{grid-template-columns:repeat(3,1fr)}}
.tvid-card{background:#fff;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;box-shadow:0 4px 22px rgba(15,23,42,.07);border:1px solid rgba(226,232,240,.9);transition:transform .28s ease,box-shadow .28s ease}
.tvid-card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(91,79,207,.2)}
.tvid-thumb{height:168px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tvid-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.55) 100%);pointer-events:none}
.tvid-play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;box-shadow:0 10px 28px rgba(0,0,0,.32);position:relative;z-index:2;transition:transform .22s}
.tvid-card:hover .tvid-play{transform:scale(1.12)}
.tvid-body{padding:15px 16px 17px;background:linear-gradient(180deg,#fff,#fafbff)}
.tvid-subject{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;margin-bottom:6px}
.tvid-title{font-size:14px;font-weight:800;line-height:1.45;color:#1e293b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.tvid-meta{font-size:11px;color:#64748b;margin-top:8px;font-weight:600}
.tvid-tag{position:absolute;z-index:3;font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;color:#fff;line-height:1.3}
.tvid-tag-notes{top:10px;left:10px;background:rgba(15,23,42,.72);backdrop-filter:blur(4px)}
.tvid-tag-file{bottom:10px;left:10px;background:linear-gradient(135deg,#0f766e,#14b8a6)}
.tvid-tag-blocked{bottom:10px;left:10px;background:linear-gradient(135deg,#dc2626,#b91c1c)}
.tvid-del{position:absolute;top:10px;right:10px;z-index:4;background:rgba(220,38,38,.92);color:#fff;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.tvid-card:hover .tvid-del{opacity:1}
.tvid-del:hover{transform:scale(1.08)}
.tvid-empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:#64748b;background:linear-gradient(135deg,#fafbff,#f5f3ff);border-radius:16px;border:2px dashed #c7d2fe}
/* ===== TEACHER MY PROFILE ===== */
.tp-lock-banner{padding:20px 18px;margin-bottom:14px;border-radius:14px;border:2px dashed #fcd34d;background:linear-gradient(135deg,#fffbeb,#fef3c7);text-align:center}
.tp-progress-badge{font-size:11px;font-weight:800;color:#7c3aed;background:#ede9fe;padding:6px 12px;border-radius:20px;white-space:nowrap}
.tp-progress-track{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-top:4px}
.tp-progress-fill{height:100%;background:linear-gradient(90deg,#5B4FCF,#7c3aed);border-radius:99px;transition:width .25s}
.tp-form-layout{display:grid;grid-template-columns:140px 1fr;gap:20px;margin-top:18px;align-items:start}
@media (max-width:640px){.tp-form-layout{grid-template-columns:1fr}}
.tp-photo-col{display:flex;flex-direction:column;align-items:stretch}
.tp-photo-wrap{position:relative;width:100%;aspect-ratio:3/4;max-height:180px;border-radius:16px;border:2px dashed #c7d2fe;background:linear-gradient(160deg,#f8faff,#eef2ff);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tp-photo-wrap:hover{border-color:#818cf8;background:#eef2ff}
.tp-photo-ph{text-align:center;padding:12px;pointer-events:none}
.tp-photo-overlay{position:absolute;inset:0;background:rgba(15,23,42,.45);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border-radius:14px}
.tp-section-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6366f1;margin:0 0 10px;font-family:var(--font-ui)}
.tp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.tp-grid-2{grid-template-columns:1fr}}
.tp-field-full{grid-column:1/-1}
.tp-pass-card{border:1px solid #e0e7ff;background:linear-gradient(180deg,#fafbff,#fff)}
.tp-view-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tp-view-lbl{display:block;font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.tp-view-val{font-size:14px;font-weight:700;color:#1e293b;line-height:1.45;word-break:break-word}
.tp-view-head{display:flex;align-items:center;gap:14px}
.tp-view-photo{width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;overflow:hidden;flex-shrink:0;box-shadow:0 6px 16px rgba(79,70,229,.25)}
.tp-view-name{font-size:18px;font-weight:800;color:#0f172a;font-family:var(--font-ui)}
.tp-view-sub{font-size:12px;font-weight:700;color:#6366f1;margin-top:3px;font-family:ui-monospace,monospace}
/* ===== PURPLE REFERENCE OVERRIDES ===== */
/* sidebar */
.sidebar,
.iti-sidebar {
background: #5305fc !important;
}
#teacherApp .iti-sidebar,
#teacherApp .edu-sidebar {
background: #5305fc !important;
}
.sidebar::after,
.sidebar::before,
.iti-sidebar::after,
.iti-sidebar::before,
.edu-sidebar::after,
.edu-sidebar::before {
display: none !important;
background: none !important;
content: none !important;
}
.sb-brand-text h2{font-size:16px;letter-spacing:.3px;text-transform:uppercase;}
.sb-nav{padding-top:6px;}
.nav-item{font-size:13px;margin-bottom:2px;}
.nav-item.active{background:rgba(255,255,255,0.18);color:#dc2626;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,0.16);}
.nav-badge{margin-left:auto;background:#e91e8c;color:#fff;font-size:10px;font-weight:700;padding:1px 8px;border-radius:10px;line-height:1.6;}
/* topbar additions */
.topbar{gap:18px;}
.topbar-ham{margin-right:0;}
.topbar-title{font-size:18px;font-weight:800;color:#5B4FCF;letter-spacing:.5px;text-transform:uppercase;margin-right:auto;white-space:nowrap;}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--gray);border:1px solid var(--border);border-radius:24px;padding:9px 16px;width:300px;color:var(--muted);flex-shrink:0;}
.topbar-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;color:var(--text);width:100%;}
.user-avatar{overflow:hidden;}
.user-avatar img{width:100%;height:100%;object-fit:cover;}
/* dashboard grid */
.dash-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start;}
.dash-left,.dash-main{display:flex;flex-direction:column;gap:18px;min-width:0;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.duo{display:grid;grid-template-columns:1.05fr 0.95fr;gap:18px;align-items:start;}
/* hero */
.hero-card{background:linear-gradient(135deg,#8f71ff 0%,#9d8fff 45%,#8bffff 100%);border-radius:20px;padding:24px;color:#fff;position:relative;overflow:hidden;display:flex;gap:14px;box-shadow:0 14px 34px rgba(143,113,255,0.35);}
.hero-card::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.08);top:-60px;right:-40px;}
.hero-text{flex:1;z-index:1;min-width:0;}
.hero-text h1{font-size:21px;font-weight:800;line-height:1.2;}
.hero-text p{font-size:13px;opacity:.9;margin-top:6px;}
.hero-quote{font-size:11.5px;font-style:italic;opacity:.9;margin-top:14px;border-left:3px solid rgba(255,255,255,.4);padding-left:10px;line-height:1.45;}
.hero-chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.hero-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:12px;padding:8px 11px;font-size:11px;}
.hero-chip b{font-size:12px;display:block;}
.hero-chip small{opacity:.85;font-size:10px;}
.hero-illus{width:110px;flex-shrink:0;align-self:flex-end;height:150px;z-index:1;}
/* stat card */
.stat-card2{background:#fff;border-radius:14px;border:1px solid var(--border-soft);box-shadow:var(--shadow-card);padding:11px 13px;transition:transform .2s,box-shadow .2s;}
.stat-card2:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.sc2-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.sc2-label{font-size:12px;font-weight:700;color:var(--text);}
.sc2-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.sc2-body{display:flex;align-items:center;gap:9px;}
.sc2-ring{position:relative;width:50px;height:50px;flex-shrink:0;}
.sc2-ring svg{width:50px;height:50px;transform:rotate(-90deg);}
.sc2-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.sc2-meta{min-width:0;}
.sc2-meta b{font-size:15px;font-weight:800;display:block;line-height:1.15;}
.sc2-meta span{font-size:10px;color:var(--muted);line-height:1.35;display:block;}
.sc2-streak{font-size:30px;line-height:1;flex-shrink:0;}
/* quick access */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:6px 2px 2px;}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:14px;cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid var(--border-soft);background:#fff;}
.qa-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.qa-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;}
.qa-label{font-size:11px;font-weight:600;text-align:center;color:var(--text);line-height:1.25;}
/* my learning feature cards */
.feat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:1100px){.feat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:430px){.feat-grid{grid-template-columns:1fr;}}
.feat-card{
display:flex;
flex-direction:column;
gap:10px;
padding:18px 16px;
border-radius:18px;
cursor:pointer;
background:#ffffff;
border:1px solid #e0e7ff;
box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s, border-color 0.2s;
position:relative;
overflow:hidden;
}
.feat-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 20px 25px -5px rgba(0,8,255,0.1),0 8px 10px -6px rgba(0,8,255,0.1);
border-color:#0008ff;
}
.feat-ic{
width:48px;
height:48px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
background:#f0f4ff;
color:#0008ff;
transition:transform 0.2s, background 0.2s;
}
.feat-card:hover .feat-ic{
transform:scale(1.1);
background:#ff0000;
color:#fff;
}
.feat-title{
font-size:14px;
font-weight:700;
color:#1e293b;
line-height:1.2;
}
.feat-hint{
font-size:11.5px;
color:#64748b;
font-weight:500;
margin-top:2px;
}
.feat-tag{
position:absolute;
top:12px;
right:12px;
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
padding:3px 7px;
border-radius:20px;
background:#e0e7ff;
color:#0008ff;
}
.feat-arrow{
margin-top:auto;
font-size:13px;
font-weight:700;
color:#0008ff;
display:flex;
align-items:center;
gap:4px;
}
@media(max-width:1100px){.feat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
/* today classes */
.tc-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid rgba(0,0,0,.04);}
.tc-row:last-child{border-bottom:none;}
.tc-time{font-size:11px;font-weight:700;color:var(--purple);white-space:nowrap;}
.tc-sub{font-size:13px;font-weight:600;flex:1;}
.tc-type{font-size:10px;font-weight:600;padding:2px 8px;border-radius:8px;white-space:nowrap;}
/* course progress */
.cp-pct{font-size:18px;font-weight:800;color:var(--purple);}
.cp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11px;color:var(--muted);gap:8px;}
/* announcements */
.an-row{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid rgba(0,0,0,.04);}
.an-row:last-child{border-bottom:none;}
.an-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.an-txt{flex:1;font-size:12.5px;font-weight:500;}
.an-when{font-size:11px;color:var(--muted);white-space:nowrap;}
/* recent test result */
.rtr{display:flex;align-items:center;gap:16px;padding:18px;}
.rtr-trophy{font-size:46px;}
.rtr-name{font-size:14px;font-weight:700;}
.rtr-stats{display:flex;gap:24px;margin-top:10px;}
.rtr-stat b{font-size:18px;font-weight:800;color:var(--purple);display:block;}
.rtr-stat span{font-size:10px;color:var(--muted);}
/* next test */
.next-test-card{background:linear-gradient(135deg,#fff5f9,#fdeef6);border:1px solid #f8d7e8;border-radius:16px;padding:18px;position:relative;overflow:hidden;}
.ntc-h{font-size:13px;font-weight:700;color:#e91e8c;display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ntc-name{font-size:15px;font-weight:800;}
.ntc-meta{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.ntc-btn{margin-top:14px;background:#e91e8c;color:#fff;border:none;border-radius:10px;padding:10px 18px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 16px rgba(233,30,140,.3);}
.ntc-btn:hover{background:#d11a7d;}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr !important;}.stat-row{grid-template-columns:repeat(2,1fr);}.duo{grid-template-columns:1fr !important;}}
/* ===== STUDENT DASHBOARD — PREMIUM UI/UX ===== */
#studentApp{
--md-font:var(--font-stack);
--md-font-ui:var(--font-ui);
--md-font-body:var(--font-body);
--md-orange:#ff7b2e;--md-orange-2:#f97316;--md-orange-glow:rgba(255,123,46,0.28);
--md-navy:#08111f;--md-navy-2:#0f1b2e;--md-cream:#fdf3ec;--md-surface:#fff;
--md-text:#0f172a;--md-muted:#64748b;--md-border:rgba(15,23,42,0.06);
--md-radius:22px;--md-radius-sm:14px;
--md-shadow:0 1px 2px rgba(15,23,42,0.03),0 10px 36px rgba(15,23,42,0.07);
--md-shadow-hover:0 16px 48px rgba(255,123,46,0.14),0 6px 20px rgba(15,23,42,0.08);
font-family:var(--md-font)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#studentApp, #studentApp *{font-family:var(--font-stack)!important;}
#studentApp h1,#studentApp h2,#studentApp h3,#studentApp h4,#studentApp h5,#studentApp h6,
#studentApp .btn,#studentApp button,#studentApp .nav-item,#studentApp .sb-brand-text{
font-family:var(--font-ui)!important;
}
#studentApp p,#studentApp .card,#studentApp input,#studentApp textarea,#studentApp td{
font-family:var(--font-body)!important;
}
/* Teacher + Admin — same Nunito / Poppins stack */
#teacherApp, #teacherApp *,
#adminPanel, #adminPanel *{
font-family:var(--font-stack)!important;
}
#teacherApp h1,#teacherApp h2,#teacherApp h3,#teacherApp h4,#teacherApp h5,#teacherApp h6,
#teacherApp .btn,#teacherApp button,#teacherApp .nav-item,
#adminPanel h1,#adminPanel h2,#adminPanel h3,#adminPanel h4,#adminPanel .btn,#adminPanel button{
font-family:var(--font-ui)!important;
}
#teacherApp p,#teacherApp input,#teacherApp textarea,#teacherApp td,
#adminPanel p,#adminPanel input,#adminPanel textarea,#adminPanel td{
font-family:var(--font-body)!important;
}
.login-split, .login-split *, .login-wrap, .login-wrap *{
font-family:var(--font-stack)!important;
}
.login-auth-title, .login-promo-title, .login-promo-name{
font-family:var(--font-heading)!important;
}
#studentApp .sidebar{
width:268px!important;background:linear-gradient(175deg,#060e1a 0%,#0c1628 42%,#0a1322 100%)!important;
border-right:1px solid rgba(255,255,255,0.04)!important;box-shadow:8px 0 40px rgba(0,0,0,0.18);
}
#studentApp .main{margin-left:268px!important;}
#studentApp .sb-header{padding:24px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.05);}
#studentApp .sb-brand-text h2{font-size:15px;font-weight:800;letter-spacing:1.8px;color:#fff;}
#studentApp .sb-brand-text span{color:var(--md-orange)!important;font-size:11px;font-weight:600;letter-spacing:.4px;}
#studentApp .sb-icon{
width:46px;height:46px;border-radius:14px;
background:linear-gradient(135deg,var(--md-orange),var(--md-orange-2))!important;
box-shadow:0 6px 20px var(--md-orange-glow);font-size:22px!important;font-weight:900!important;
}
.sd-sb-profile{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:20px 18px 22px;margin:0 12px 8px;
background:rgba(255,255,255,0.03);border-radius:18px;border:1px solid rgba(255,255,255,0.06);
}
.sd-sb-avatar{
width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,#3b82f6,#6366f1);
display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:800;color:#fff;overflow:hidden;
border:3px solid rgba(255,255,255,0.14);margin-bottom:12px;
box-shadow:0 8px 24px rgba(59,130,246,0.25);
}
.sd-sb-avatar img{width:100%;height:100%;object-fit:cover;}
.sd-sb-name{font-size:14px;font-weight:700;color:#f8fafc;line-height:1.35;letter-spacing:-.2px;}
.sd-sb-roll{font-size:11px;color:rgba(255,255,255,0.42);margin-top:4px;font-weight:500;}
.sd-menu-lbl{
font-size:10px;font-weight:700;color:rgba(255,255,255,0.28);
letter-spacing:1.6px;padding:16px 18px 8px;text-transform:uppercase;
}
#studentApp .nav-item{
color:rgba(255,255,255,0.62)!important;font-weight:500!important;
padding:11px 16px!important;border-radius:12px!important;margin:2px 10px!important;
transition:all .22s cubic-bezier(.4,0,.2,1)!important;position:relative;
}
#studentApp .nav-item .nav-icon{
width:20px!important;height:20px!important;font-size:0!important;
display:flex!important;align-items:center;justify-content:center;
}
#studentApp .nav-item .nav-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
#studentApp .nav-item:hover{background:rgba(255,255,255,0.07)!important;color:#fff!important;transform:translateX(2px);}
#studentApp .nav-item.active{
background:linear-gradient(90deg,rgba(255,123,46,0.22),rgba(255,123,46,0.08))!important;
color:var(--md-orange)!important;font-weight:700!important;box-shadow:inset 3px 0 0 var(--md-orange)!important;
}
#studentApp .sb-logout{
background:linear-gradient(135deg,var(--md-orange),var(--md-orange-2))!important;
color:#fff!important;border:none!important;border-radius:14px!important;
font-weight:700!important;font-size:13px!important;letter-spacing:.2px;
width:calc(100% - 8px)!important;padding:13px 16px!important;margin:8px 4px 0!important;
box-shadow:0 8px 24px var(--md-orange-glow)!important;cursor:pointer;
transition:transform .2s,box-shadow .2s!important;
}
#studentApp .sb-logout:hover{transform:translateY(-1px)!important;box-shadow:0 12px 32px var(--md-orange-glow)!important;}
#studentApp.dash-mode .topbar{display:none!important;}
#studentApp.dash-mode .page-content{
padding:0!important;
background:var(--md-cream);
background-image:
radial-gradient(ellipse 80% 50% at 10% 0%,rgba(255,123,46,0.09),transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 10%,rgba(99,102,241,0.06),transparent 50%),
linear-gradient(160deg,#fdeee3 0%,#fdf6f0 30%,#fffaf7 65%,#ffffff 100%);
}
#studentApp #s-dash{margin:0;padding:0;}
#studentApp #s-dash .md-wrap{display:flex;gap:0;min-height:100vh;align-items:stretch;}
#studentApp #s-dash .md-center{flex:1;padding:32px 28px 40px;min-width:0;}
#studentApp #s-dash .md-panel{
width:310px;flex-shrink:0;background:rgba(255,255,255,0.88);
backdrop-filter:blur(12px);border-left:1px solid rgba(240,224,210,0.8);
padding:36px 26px 32px;display:flex;flex-direction:column;gap:20px;
box-shadow:-8px 0 32px rgba(15,23,42,0.04);
}
@keyframes mdFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes mdBarGrow{from{width:0!important} }
@keyframes mdPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,123,46,0.3)}50%{box-shadow:0 0 0 8px rgba(255,123,46,0)}}
.md-welcome{
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(15,23,42,0.06);
animation:mdFadeUp .45s ease both;
}
.md-welcome h1{font-size:26px;font-weight:800;color:var(--md-text);letter-spacing:-.6px;line-height:1.2;}
.md-welcome h1 span{color:var(--md-orange);}
.md-welcome p{font-size:13px;color:var(--md-muted);margin-top:6px;font-weight:500;}
.md-chips{display:flex;gap:10px;flex-wrap:wrap;}
.md-chip{
display:flex;align-items:center;gap:8px;padding:10px 16px;
background:var(--md-surface);border-radius:99px;
box-shadow:var(--md-shadow);border:1px solid var(--md-border);
font-size:12px;font-weight:700;color:var(--md-text);
transition:transform .2s,box-shadow .2s;
}
.md-chip:hover{transform:translateY(-2px);box-shadow:var(--md-shadow-hover);}
.md-chip-ic{
width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;
}
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.md-card{
background:var(--md-surface);border-radius:var(--md-radius);
box-shadow:var(--md-shadow);padding:24px 24px 22px;
border:1px solid var(--md-border);
transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;
animation:mdFadeUp .5s ease both;
}
.md-card:nth-child(1){animation-delay:.06s}.md-card:nth-child(2){animation-delay:.1s}
.md-card:nth-child(3){animation-delay:.14s}.md-card:nth-child(4){animation-delay:.18s}
.md-card:nth-child(5){animation-delay:.22s}.md-card:nth-child(6){animation-delay:.26s}
.md-card:hover{transform:translateY(-4px);box-shadow:var(--md-shadow-hover);}
.md-card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;}
.md-card-title{font-size:16px;font-weight:800;color:var(--md-text);letter-spacing:-.3px;}
.md-card-sub{font-size:12px;color:var(--md-muted);margin-bottom:16px;line-height:1.5;font-weight:500;}
.md-card-edit{
width:30px;height:30px;border-radius:10px;background:#f8fafc;
display:flex;align-items:center;justify-content:center;
font-size:13px;color:#94a3b8;cursor:pointer;transition:background .15s,color .15s;
}
.md-card-edit:hover{background:#fff7ed;color:var(--md-orange);}
.md-radar-wrap{display:flex;align-items:center;justify-content:center;padding:10px 0 6px;}
.md-bar-item{margin-bottom:18px;}
.md-bar-item:last-child{margin-bottom:0;}
.md-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.md-bar-label{font-size:13px;font-weight:700;color:var(--md-text);letter-spacing:-.1px;}
.md-bar-pct{font-size:11px;font-weight:800;color:var(--md-muted);}
.md-bar-track{height:11px;background:#f1f5f9;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);}
.md-bar-fill{
height:100%;border-radius:99px;
transition:width 1s cubic-bezier(.4,0,.2,1);
box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.md-donut-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0;}
.md-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.md-donut-total{font-size:14px;font-weight:800;color:var(--md-text);line-height:1.25;text-align:center;letter-spacing:-.3px;}
.md-donut-legend{display:flex;gap:20px;margin-top:16px;justify-content:center;}
.md-leg-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--md-muted);}
.md-leg-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.12);}
.md-course{
display:flex;align-items:center;border-radius:var(--md-radius-sm);overflow:hidden;
background:linear-gradient(90deg,#fafafa,#fff);margin-bottom:11px;cursor:pointer;
border:1px solid var(--md-border);transition:all .22s;
}
.md-course:last-child{margin-bottom:0;}
.md-course:hover{transform:translateX(4px);box-shadow:var(--md-shadow);border-color:rgba(255,123,46,0.2);}
.md-course-bar{width:6px;align-self:stretch;flex-shrink:0;border-radius:6px 0 0 6px;}
.md-course-body{flex:1;padding:13px 14px;min-width:0;}
.md-course-title{font-size:13px;font-weight:700;color:var(--md-text);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.md-course-date{font-size:11px;color:var(--md-muted);margin-top:3px;font-weight:500;}
.md-course-arrow{
width:28px;height:28px;border-radius:50%;background:#f8fafc;margin-right:12px;
display:flex;align-items:center;justify-content:center;
color:var(--md-muted);font-size:16px;transition:background .15s,color .15s;
}
.md-course:hover .md-course-arrow{background:#fff7ed;color:var(--md-orange);}
.md-teachers-row{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0;}
.md-tch-wrap{display:flex;flex-direction:column;align-items:center;transition:transform .2s;}
.md-tch-wrap:hover{transform:translateY(-3px);}
.md-tch-av{
width:60px;height:60px;border-radius:50%;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:800;color:#fff;overflow:hidden;
border:3px solid #fff;box-shadow:0 6px 18px rgba(99,102,241,0.25);
}
.md-tch-av img{width:100%;height:100%;object-fit:cover;}
.md-tch-name{font-size:10px;font-weight:700;color:var(--md-muted);text-align:center;margin-top:6px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-reward-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:10px 0;}
.md-reward-icon{
width:44px;height:44px;border-radius:14px;background:#f8fafc;
border:1px solid #e8edf2;display:flex;align-items:center;justify-content:center;
font-size:20px;opacity:.3;filter:grayscale(1);transition:all .25s;cursor:default;
}
.md-reward-icon.earned{
opacity:1;filter:none;background:linear-gradient(135deg,#fff7ed,#ffedd5);
border-color:#fed7aa;box-shadow:0 4px 14px rgba(251,146,60,0.22);
animation:mdPulse 2s ease infinite;
}
.md-panel-avatar{
width:118px;height:118px;border-radius:50%;margin:0 auto;
background:linear-gradient(135deg,var(--md-orange),var(--md-orange-2));
display:flex;align-items:center;justify-content:center;
font-size:34px;font-weight:800;color:#fff;overflow:hidden;
border:5px solid #fff;box-shadow:0 12px 36px var(--md-orange-glow);
position:relative;
}
.md-panel-avatar::after{
content:'';position:absolute;inset:-6px;border-radius:50%;
border:2px solid rgba(255,123,46,0.2);pointer-events:none;
}
.md-panel-avatar img{width:100%;height:100%;object-fit:cover;}
.md-panel-name{font-size:19px;font-weight:800;color:var(--md-text);text-align:center;margin-top:16px;letter-spacing:-.4px;}
.md-panel-user{font-size:13px;color:var(--md-muted);text-align:center;margin-top:4px;font-weight:600;}
.md-panel-line{height:1px;background:linear-gradient(90deg,transparent,#f0e0d0,transparent);margin:8px 0;}
.md-info-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--md-text);line-height:1.5;}
.md-info-ic{
width:36px;height:36px;border-radius:50%;
background:linear-gradient(135deg,#fff7ed,#ffedd5);
color:var(--md-orange);display:flex;align-items:center;justify-content:center;
font-size:15px;flex-shrink:0;box-shadow:0 3px 10px rgba(255,123,46,0.15);
}
.md-about-title{font-size:14px;font-weight:800;color:var(--md-text);margin-bottom:10px;letter-spacing:-.2px;}
.md-about-text{font-size:12px;color:var(--md-muted);line-height:1.75;font-weight:500;}
.md-guardian{
background:linear-gradient(155deg,#060e1a,#0f1b2e);border-radius:18px;
padding:18px;margin-top:auto;border:1px solid rgba(255,255,255,0.06);
box-shadow:0 8px 28px rgba(0,0,0,0.2);
}
.md-guardian-lbl{font-size:10px;font-weight:700;color:rgba(255,255,255,0.38);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px;}
.md-guardian-av{
width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.1);
display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
border:2px solid rgba(255,255,255,0.08);
}
.md-guardian-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.md-guardian-sub{font-size:11px;color:rgba(255,255,255,0.5);margin-top:3px;font-weight:500;}
@media(max-width:1200px){
#studentApp #s-dash .md-wrap{flex-direction:column;}
#studentApp #s-dash .md-panel{width:100%;border-left:none;border-top:1px solid #f0e6de;}
.md-welcome{flex-direction:column;align-items:flex-start;}
}
@media(max-width:980px){#studentApp .main{margin-left:0!important;}}
@media(max-width:820px){
.md-grid{grid-template-columns:1fr;}
#studentApp #s-dash .md-center{padding:20px 16px 28px;}
.md-welcome h1{font-size:22px;}
.md-reward-grid{grid-template-columns:repeat(4,1fr);}
#studentApp.dash-mode .topbar{display:flex!important;}
}
/* ════════════════════════════════════════════════════════════════
RESPONSIVE — off-canvas drawer + bottom navigation bar
════════════════════════════════════════════════════════════════ */
/* backdrop + bottom-nav base (hidden on desktop) */
.nav-backdrop{position:fixed;inset:0;background:rgba(20,15,50,.46);backdrop-filter:blur(2px);z-index:180;opacity:0;visibility:hidden;transition:opacity .28s ease;}
.bottom-nav{display:none;}
/* desktop: hamburger not needed */
@media(min-width:981px){ .topbar-ham{display:none !important;} }
/* ───────── TABLET & BELOW: sidebar becomes a slide-in drawer ───────── */
@media(max-width:980px){
.sidebar{
width:270px;max-width:84vw;
transform:translateX(-104%);
transition:transform .3s cubic-bezier(.4,0,.2,1);
z-index:200;box-shadow:none;
}
.app.drawer-open .sidebar{transform:translateX(0);box-shadow:14px 0 48px rgba(20,15,50,.34);}
.app.drawer-open .nav-backdrop{opacity:1;visibility:visible;}
.main{margin-left:0;}
.topbar-ham{display:flex !important;}
.topbar-search{display:none !important;}
.topbar{padding:0 16px;gap:12px;height:60px;}
.topbar-title{font-size:15px;letter-spacing:.3px;}
.page-content{padding:20px 16px;}
}
/* ───────── PHONES & SMALL TABLETS: add bottom nav ───────── */
@media(max-width:820px){
.bottom-nav{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:160;
background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);
border-top:1px solid var(--border-soft);
box-shadow:0 -6px 24px rgba(40,30,90,.08);
padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
}
.bn-item{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:5px 2px;border:none;background:none;cursor:pointer;font-family:inherit;
color:var(--muted);border-radius:12px;transition:color .15s,background .15s;min-width:0;
}
.bn-item .bn-ic{font-size:20px;line-height:1;transition:transform .15s;}
.bn-item .bn-lb{font-size:10px;font-weight:600;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bn-item.active{color:var(--purple);}
.bn-item.active .bn-ic{transform:translateY(-1px) scale(1.08);}
.bn-item.active .bn-lb{font-weight:700;}
.bn-item:active{background:var(--purple-light);}
/* clear the fixed bar so nothing hides behind it */
.page-content{padding-bottom:84px;}
.sb-footer{margin-bottom:6px;}
}
/* ───────── PHONE FINE-TUNING ───────── */
@media(max-width:620px){
.user-info-top, .chevron{display:none !important;}
.topbar-right{gap:10px;}
.topbar-title{font-size:14px;}
.page-content{padding:16px 13px 84px;}
.stat-row{grid-template-columns:repeat(2,1fr) !important;}
/* teacher "+ add" button compact */
#teacherApp .topbar-right .btn-primary{padding:9px 14px;font-size:12px;}
}
/* ───────── DASHBOARD on phones: clean single-column rhythm ───────── */
@media(max-width:820px){
.dash-grid{grid-template-columns:1fr !important;gap:14px !important;}
.dash-left,.dash-main{gap:14px !important;}
.stat-row{gap:12px !important;}
.feat-grid{gap:11px !important;}
/* feature cards: tighter, no clipping, comfy tap target */
.feat-card{padding:15px 13px;border-radius:16px;}
.feat-ic{width:44px;height:44px;border-radius:13px;font-size:22px;}
.feat-title{font-size:13.5px;}
.feat-hint{font-size:11px;}
.feat-arrow{font-size:12px;}
/* quick-access tiles: 4 across is too tight on a phone → 3 */
.qa-grid{grid-template-columns:repeat(3,1fr) !important;gap:10px;}
}
@media(max-width:430px){
.stat-row{grid-template-columns:repeat(2,1fr) !important;}
.feat-grid{grid-template-columns:repeat(2,1fr) !important;}
.qa-grid{grid-template-columns:repeat(3,1fr) !important;}
.card{border-radius:16px;}
.card-hd h3{font-size:15px;}
}
/* wide tables scroll inside their card on small screens */
@media(max-width:820px){
.card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch;}
.card:has(table) table{min-width:520px;}
}
/* modals fit the viewport on mobile */
@media(max-width:680px){
.modal{width:auto !important;max-width:calc(100vw - 22px) !important;max-height:calc(100vh - 28px);}
.modal-body{overflow-y:auto;}
/* monthly-test runner padding trim */
#mtRunHead,#mtRunFoot{padding:11px 14px !important;}
}
/* ========== ADMIN PANEL - PREMIUM DASHBOARD ========== */
.admin-panel {
min-height: 100vh;
min-height: 100dvh;
background:
radial-gradient(1200px 480px at 10% -10%, rgba(99,102,241,.14), transparent 55%),
radial-gradient(900px 400px at 100% 0%, rgba(14,165,233,.10), transparent 50%),
linear-gradient(180deg, #f4f6ff 0%, #eef2ff 40%, #f8fafc 100%);
font-family: var(--font-stack);
color: #0f172a;
}
.admin-header {
background: linear-gradient(125deg, #0b1026 0%, #1e1b4b 42%, #312e81 78%, #4338ca 100%);
color: #fff;
padding: 14px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 8px 28px rgba(15,23,42,.22);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-header-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.admin-brand {
display: flex;
align-items: center;
gap: 14px;
}
.admin-brand .brand-logo-admin {
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
background: #fff;
}
.admin-brand-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .72;
margin-bottom: 2px;
font-family: var(--font-ui);
}
.admin-brand h1 {
margin: 0;
font-size: 22px;
font-weight: 800;
letter-spacing: -.4px;
font-family: var(--font-ui);
line-height: 1.15;
}
.admin-brand p {
margin: 3px 0 0;
opacity: .78;
font-size: 12.5px;
max-width: 420px;
line-height: 1.35;
}
.admin-user {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
padding: 8px 10px 8px 8px;
backdrop-filter: blur(8px);
}
.admin-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #818cf8, #6366f1);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.admin-user-info { line-height: 1.2; min-width: 0; }
.admin-user-info #adminName {
font-weight: 700;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.admin-role {
font-size: 11px;
opacity: .7;
font-weight: 600;
}
.admin-logout {
background: rgba(255,255,255,.14);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
padding: 9px 14px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .15s ease, transform .15s ease;
}
.admin-logout:hover { background: rgba(255,255,255,.24); }
.admin-logout:active { transform: scale(.98); }
.admin-container {
max-width: 1180px;
margin: 0 auto;
padding: 22px 16px 48px;
}
/* Hero welcome strip */
.admin-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 20px 22px;
border-radius: 20px;
background:
linear-gradient(135deg, rgba(255,255,255,.95), rgba(238,242,255,.92)),
#fff;
border: 1px solid rgba(99,102,241,.12);
box-shadow: 0 10px 30px rgba(79,70,229,.06);
}
.admin-hero-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 800;
letter-spacing: -.4px;
font-family: var(--font-ui);
color: #1e1b4b;
}
.admin-hero-title span { color: #4f46e5; }
.admin-hero-sub {
margin: 0;
font-size: 13.5px;
color: #64748b;
max-width: 560px;
line-height: 1.45;
}
.admin-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-hero-outline {
background: #fff !important;
border-color: #c7d2fe !important;
color: #4338ca !important;
}
.admin-hero-outline:hover {
background: #eef2ff !important;
border-color: #a5b4fc !important;
}
/* Stats */
.admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 26px;
}
.admin-stat-card {
background: #fff;
border-radius: 18px;
padding: 16px 16px 16px 14px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 8px 24px rgba(15,23,42,.05);
border: 1px solid rgba(226,232,240,.9);
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.admin-stat-card::after {
content: '';
position: absolute;
inset: auto -20% -40% auto;
width: 90px;
height: 90px;
border-radius: 50%;
opacity: .12;
pointer-events: none;
}
.admin-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(15,23,42,.08);
}
.stat-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-icon { font-size: 22px; line-height: 1; }
.stat-info { min-width: 0; }
.stat-value {
font-size: 28px;
font-weight: 800;
line-height: 1.05;
font-family: var(--font-ui);
letter-spacing: -.5px;
color: #0f172a;
}
.stat-label {
font-size: 12px;
color: #64748b;
font-weight: 600;
margin-bottom: 4px;
letter-spacing: .01em;
}
.admin-stat-students .stat-icon-wrap { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.admin-stat-students::after { background: #3b82f6; }
.admin-stat-teachers .stat-icon-wrap { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); }
.admin-stat-teachers::after { background: #6366f1; }
.admin-stat-portfolios .stat-icon-wrap { background: linear-gradient(135deg,#d1fae5,#a7f3d0); }
.admin-stat-portfolios::after { background: #10b981; }
.admin-stat-active .stat-icon-wrap { background: linear-gradient(135deg,#ffedd5,#fed7aa); }
.admin-stat-active::after { background: #f59e0b; }
/* Sections */
.admin-section { margin-bottom: 28px; }
.admin-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.admin-section-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #4f46e5;
background: #eef2ff;
border: 1px solid #c7d2fe;
padding: 3px 9px;
border-radius: 999px;
margin-bottom: 6px;
font-family: var(--font-ui);
}
.admin-section-badge-teal {
color: #0f766e;
background: #ccfbf1;
border-color: #99f6e4;
}
.admin-section-badge-amber {
color: #b45309;
background: #fef3c7;
border-color: #fde68a;
}
.admin-section-header h2 {
margin: 0 0 4px;
font-size: 19px;
font-weight: 800;
letter-spacing: -.3px;
font-family: var(--font-ui);
color: #1e1b4b;
}
.admin-section-header p {
margin: 0;
font-size: 13px;
color: #64748b;
max-width: 520px;
line-height: 1.4;
}
.admin-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 8px 28px rgba(15,23,42,.045);
border: 1px solid rgba(226,232,240,.95);
overflow: hidden;
}
.admin-card-elevated {
box-shadow: 0 12px 36px rgba(79,70,229,.06);
}
/* Toolbar + search */
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(180deg, #fafbff, #fff);
}
.admin-search-wrap {
position: relative;
flex: 1 1 240px;
max-width: 420px;
display: flex;
align-items: center;
}
.admin-search-wrap-lg { max-width: 520px; }
.admin-search-ic {
position: absolute;
left: 12px;
font-size: 14px;
opacity: .7;
pointer-events: none;
}
.admin-search-input {
width: 100%;
border: 1.5px solid #e2e8f0;
background: #fff;
border-radius: 12px;
padding: 11px 38px 11px 38px;
font-size: 14px;
font-family: var(--font-body);
color: #0f172a;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-search-input::placeholder { color: #94a3b8; }
.admin-search-input:focus {
border-color: #818cf8;
box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.admin-search-clear {
position: absolute;
right: 8px;
width: 28px;
height: 28px;
border: none;
border-radius: 8px;
background: #f1f5f9;
color: #64748b;
cursor: pointer;
font-size: 12px;
font-weight: 700;
}
.admin-search-clear:hover { background: #e2e8f0; color: #0f172a; }
.admin-toolbar-meta {
font-size: 12.5px;
font-weight: 700;
color: #64748b;
white-space: nowrap;
}
.admin-hint {
margin: 0;
padding: 12px 16px 16px;
font-size: 12px;
color: #64748b;
line-height: 1.45;
border-top: 1px solid #f1f5f9;
background: #fafbff;
}
.admin-empty-cell {
text-align: center;
padding: 30px !important;
color: #94a3b8;
}
.admin-empty-state {
text-align: center;
padding: 36px 20px;
color: #64748b;
}
.admin-empty-ic { font-size: 36px; margin-bottom: 8px; }
.admin-empty-title {
font-weight: 800;
font-size: 15px;
color: #334155;
margin-bottom: 4px;
font-family: var(--font-ui);
}
.admin-empty-state p { margin: 0; font-size: 13px; }
.admin-loading-block {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 16px;
color: #64748b;
font-size: 14px;
font-weight: 600;
}
/* Teacher-wise cards */
.admin-teacher-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
padding: 16px;
}
.admin-teacher-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
border: 1.5px solid #e8eef9;
border-radius: 16px;
padding: 16px;
background: linear-gradient(165deg, #ffffff 0%, #f8faff 100%);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
font-family: inherit;
color: inherit;
width: 100%;
}
.admin-teacher-card:hover {
transform: translateY(-3px);
border-color: #a5b4fc;
box-shadow: 0 14px 32px rgba(79,70,229,.12);
}
.admin-teacher-card:focus-visible {
outline: 3px solid rgba(99,102,241,.35);
outline-offset: 2px;
}
.admin-tc-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.admin-tc-avatar {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(79,70,229,.28);
font-family: var(--font-ui);
}
.admin-tc-info { min-width: 0; flex: 1; }
.admin-tc-name {
font-weight: 800;
font-size: 15px;
color: #1e1b4b;
line-height: 1.25;
margin: 0 0 4px;
font-family: var(--font-ui);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-tc-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11.5px;
font-weight: 700;
color: #6366f1;
background: #eef2ff;
border: 1px solid #c7d2fe;
padding: 2px 8px;
border-radius: 6px;
display: inline-block;
}
.admin-tc-count {
margin-left: auto;
text-align: center;
min-width: 52px;
padding: 6px 8px;
border-radius: 12px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
}
.admin-tc-count.zero {
background: #f8fafc;
border-color: #e2e8f0;
}
.admin-tc-count-n {
display: block;
font-size: 20px;
font-weight: 800;
line-height: 1;
color: #047857;
font-family: var(--font-ui);
}
.admin-tc-count.zero .admin-tc-count-n { color: #94a3b8; }
.admin-tc-count-l {
display: block;
font-size: 10px;
font-weight: 700;
color: #059669;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
.admin-tc-count.zero .admin-tc-count-l { color: #94a3b8; }
.admin-tc-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed #e2e8f0;
}
.admin-tc-trade {
font-size: 12px;
font-weight: 700;
color: #0f766e;
background: #ccfbf1;
border: 1px solid #99f6e4;
padding: 3px 9px;
border-radius: 999px;
}
.admin-tc-cta {
font-size: 12.5px;
font-weight: 800;
color: #4f46e5;
font-family: var(--font-ui);
}
.admin-teacher-card:hover .admin-tc-cta { color: #312e81; }
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-table {
width: 100%;
border-collapse: collapse;
min-width: 680px;
}
.admin-table th,
.admin-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid #f1f5f9;
font-size: 13.5px;
}
.admin-table th {
background: #f8fafc;
font-weight: 700;
color: #475569;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .45px;
font-family: var(--font-ui);
}
.admin-table tbody tr {
transition: background .12s ease;
}
.admin-table tbody tr:hover { background: #f8faff; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.is-hidden { display: none; }
.admin-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.admin-quick-card {
background: #fff;
border: 1.5px solid #e8eef9;
border-radius: 16px;
padding: 16px;
display: flex;
gap: 14px;
align-items: center;
cursor: pointer;
transition: all .2s ease;
text-align: left;
width: 100%;
font-family: inherit;
color: inherit;
box-shadow: 0 4px 16px rgba(15,23,42,.03);
}
.admin-quick-card:hover {
border-color: #a5b4fc;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(99,102,241,.1);
}
.admin-quick-card .q-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.q-icon-blue { background: #dbeafe; }
.q-icon-violet { background: #e0e7ff; }
.q-icon-teal { background: #ccfbf1; }
.q-icon-red { background: #fee2e2; }
.q-icon-slate { background: #e2e8f0; }
.admin-quick-card .q-title {
font-weight: 800;
font-size: 14.5px;
font-family: var(--font-ui);
color: #1e293b;
}
.admin-quick-card .q-desc {
font-size: 12px;
color: #64748b;
line-height: 1.35;
margin-top: 2px;
}
.admin-quick-card .q-arrow {
margin-left: auto;
color: #94a3b8;
font-weight: 700;
font-size: 16px;
transition: transform .15s ease, color .15s ease;
}
.admin-quick-card:hover .q-arrow {
color: #4f46e5;
transform: translateX(3px);
}
.admin-quick-danger {
border-color: #fecaca;
background: linear-gradient(135deg, #fff7f7, #fff);
}
.admin-quick-danger .q-title { color: #b91c1c; }
.admin-quick-danger:hover {
border-color: #f87171;
box-shadow: 0 12px 28px rgba(185,28,28,.1);
}
/* Modal polish for teacher students */
.admin-ts-modal-hd {
align-items: flex-start !important;
gap: 12px;
}
.admin-ts-modal-hd .modal-title {
margin-bottom: 4px;
}
.admin-ts-meta {
font-size: 13px;
color: #64748b;
font-weight: 500;
line-height: 1.4;
}
.btn-lg {
padding: 11px 20px;
font-size: 14px;
font-weight: 700;
}
.admin-copyright {
margin-top: 8px;
text-align: center;
padding: 18px 8px 4px;
font-size: 12px;
color: #94a3b8;
}
/* Login screen responsiveness */
@media (max-width: 900px) {
.admin-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.login-box { margin: 12px; padding: 22px 18px; border-radius: 16px; }
.role-tabs { gap: 6px; }
.role-tab { padding: 8px 12px; font-size: 13px; }
.admin-header-inner { flex-direction: column; align-items: flex-start; }
.admin-user { width: 100%; justify-content: space-between; }
.admin-hero { padding: 16px; }
.admin-hero-title { font-size: 18px; }
.admin-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-value { font-size: 22px; }
.admin-teacher-grid { grid-template-columns: 1fr; padding: 12px; }
.admin-search-wrap { max-width: none; }
}
/* Extra small phones */
@media (max-width: 380px) {
.admin-stats { grid-template-columns: 1fr; }
.admin-quick-grid { grid-template-columns: 1fr; }
}
/* Login role tabs - fully responsive */
.role-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
@media (max-width: 420px) {
.role-tabs { gap: 6px; }
.role-tab {
flex: 1 1 auto;
min-width: 88px;
justify-content: center;
padding: 9px 10px;
font-size: 13px;
}
}
/* ITI LMS Dashboard - matching the provided image style */
.iti-topbar {
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-stack);
}
.iti-topbar .hamburger {
display: none;
font-size: 20px;
cursor: pointer;
margin-right: 12px;
}
@media (max-width: 768px) {
.iti-topbar .hamburger {
display: block;
}
.mobile-hamburger {
display: block;
}
/* Force actual responsive sidebar (slide-in drawer only, hidden by default on mobile) */
.iti-layout {
display: block !important;
position: relative !important;
}
.iti-sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 260px !important;
height: 100vh !important;
z-index: 1001 !important;
transform: translateX(-100%) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25) !important;
overflow-y: auto !important;
background: #5305fc !important;
display: flex !important;
flex-direction: column !important;
}
.iti-sidebar.open {
transform: translateX(0) !important;
}
/* Backdrop for better UX when sidebar open on mobile */
.iti-sidebar.open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.5);
z-index: -1;
pointer-events: none;
}
.iti-main {
margin-left: 0 !important;
width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Other adjustments for mobile */
.iti-stats {
grid-template-columns: repeat(3, 1fr);
}
.iti-grid {
grid-template-columns: 1fr;
}
.iti-quick {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.iti-quick .quick-card {
padding: 10px 6px;
border-radius: 12px;
}
.iti-quick .quick-card .icon {
font-size: 17px;
margin-bottom: 4px;
}
.iti-quick .quick-card div {
font-size: 10.5px;
line-height: 1.2;
}
.iti-quick .quick-card small {
font-size: 8.5px;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.student-mob-nav #studentApp .sidebar { display: none !important; }
body.student-mob-nav #studentApp .main { margin-left: 0 !important; width: 100% !important; }
body.student-mob-nav #studentApp .topbar { display: none !important; }
body.student-mob-nav #studentApp .page-content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
body.student-mob-nav #mobBottomNav { display: flex !important; }
body.teacher-mob-nav #teacherApp .iti-sidebar { display: none !important; }
body.teacher-mob-nav #teacherApp .mobile-hamburger { display: none !important; }
body.teacher-mob-nav #teacherApp .iti-main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
body.teacher-mob-nav #teacherMobBottomNav { display: flex !important; }
}
.mob-bottom-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid #f0f0f0;
padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 1002;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.mob-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px 0; }
.mob-nav-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 18px; transition: all 0.2s; }
.mob-nav-item.active .mob-nav-icon { background: #5305fc; color: #fff; }
.mob-nav-label { font-size: 10px; font-weight: 500; color: #9ca3af; }
.mob-nav-item.active .mob-nav-label { color: #5305fc; font-weight: 700; }
.iti-logo {
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.iti-logo .logo-icon {
width: 28px;
height: 28px;
background: linear-gradient(135deg, #f97316, #22c55e);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
.iti-search {
flex: 1;
max-width: 400px;
margin: 0 20px;
position: relative;
}
.iti-search input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.iti-search::before {
content: "🔍";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.iti-user {
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
}
.iti-user .notif, .iti-user .msg {
position: relative;
cursor: pointer;
}
.iti-user .user-info {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.iti-user .user-info img {
width: 32px;
height: 32px;
border-radius: 50%;
}
.iti-user .user-info .role {
font-size: 12px;
color: #6b7280;
}
.iti-layout {
display: flex;
flex: 1;
width: 100%;
min-width: 0;
height: 100vh;
min-height: 100vh;
font-family: var(--font-stack);
}
.iti-sidebar {
width: 240px;
flex-shrink: 0;
background: #5305fc !important;
color: white;
padding: 16px 0;
overflow-y: auto;
display: flex;
flex-direction: column;
min-height: 0; /* allow flex child to shrink for scrolling if needed */
}
.iti-sidebar::after,
.iti-sidebar::before {
display: none !important;
background: none !important;
}
.iti-sidebar .nav-item {
padding: 10px 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
color: #ffffff;
}
.iti-sidebar .nav-item:hover {
background: rgba(255,255,255,0.1);
color: #f97316;
}
.iti-sidebar .nav-item.active {
background: #3b82f6;
border-radius: 6px;
margin: 0 8px;
color: #dc2626;
font-weight: 600;
}
.iti-sidebar .nav-item .ic {
width: 20px;
text-align: center;
color: inherit;
}
.iti-sidebar .iti-logout {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.15);
color: #f87171;
}
.iti-sidebar .iti-logout:hover {
background: rgba(239, 68, 68, 0.15);
}
/* Hamburger + mobile drawer for iti teacher (vyavasthit on all devices) */
.iti-topbar .hamburger {
display: none;
background: none;
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 18px;
line-height: 1;
padding: 4px 8px;
border-radius: 6px;
margin-right: 8px;
cursor: pointer;
}
/* Mobile hamburger inside main content (for when topbar is removed) */
.mobile-hamburger {
display: none;
position: absolute;
top: 16px;
left: 16px;
z-index: 40;
background: #5305fc;
color: white;
border: none;
font-size: 20px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Make sure on desktop the sidebar is always the clean left edge, no extra left elements */
#teacherApp .iti-layout {
margin: 0;
padding: 0;
flex: 1;
width: 100%;
min-width: 0;
}
/* Old open rule removed - mobile slide handled inside the 768px media query above for proper responsive drawer */
.iti-main {
flex: 1;
width: 100%;
min-width: 0;
max-width: none;
padding: 24px 24px 24px 24px;
background: #f0f4ff; /* light blue tint - different from white cards for better contrast */
overflow-x: hidden;
overflow-y: auto;
position: relative; /* for mobile-hamburger absolute positioning */
}
/* On mobile the hamburger sits near the top-left edge of main content */
@media (max-width: 768px) {
.mobile-hamburger {
top: 12px;
left: 12px;
}
.iti-main {
padding-top: 52px; /* space for the floating hamburger */
}
}
.iti-welcome h1 {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin: 0 0 4px;
}
.iti-welcome p {
color: #6b7280;
font-size: 14px;
margin: 0 0 20px;
}
.iti-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 12px;
}
.iti-stats .stat-card {
background: #ffffff;
border-radius: 14px;
padding: 16px 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
border: 1px solid #e0e7ff;
transition: all 0.2s ease;
cursor: pointer;
}
.iti-stats .stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 8, 255, 0.1);
border-color: #0008ff;
}
.iti-stats .stat-card .icon {
font-size: 22px;
margin-bottom: 6px;
color: #0008ff;
}
.iti-stats .stat-card .value {
font-size: 26px;
font-weight: 800;
color: #0f172a;
line-height: 1;
}
.iti-stats .stat-card .label {
font-size: 12px;
color: #475569;
margin-top: 3px;
font-weight: 500;
}
.iti-stats .stat-card .trend {
font-size: 11.5px;
margin-top: 4px;
font-weight: 600;
}
.iti-stats .stat-card .trend.up { color: #16a34a; }
.iti-stats .stat-card .trend.down { color: #dc2626; }
.iti-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.iti-card {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e7ff;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.iti-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
border-color: #0008ff;
}
.iti-card h3 {
font-size: 15px;
font-weight: 700;
margin: 0 0 14px;
color: #1e293b;
display: flex;
align-items: center;
gap: 8px;
}
.iti-card .donut {
display: flex;
align-items: center;
gap: 16px;
}
.iti-card .legend {
font-size: 12.5px;
line-height: 1.6;
}
.iti-card .legend .present { color: #16a34a; font-weight: 600; }
.iti-card .legend .absent { color: #dc2626; font-weight: 600; }
.iti-card .legend .leave { color: #64748b; }
.iti-card .bar-chart {
display: flex;
align-items: flex-end;
height: 90px;
gap: 10px;
margin-top: 12px;
padding: 4px 0;
}
.iti-card .bar-chart .bar {
flex: 1;
background: linear-gradient(180deg, #0008ff, #0006cc);
border-radius: 6px 6px 0 0;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
color: white;
font-size: 10px;
font-weight: 700;
transition: filter 0.2s;
}
.iti-card .bar-chart .bar:hover {
filter: brightness(1.1);
}
.iti-card .bar-chart .bar span {
position: absolute;
top: -18px;
font-size: 10px;
color: #334155;
font-weight: 600;
}
.iti-card .labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 10px;
color: #64748b;
font-weight: 500;
}
.iti-card ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 13.5px;
}
.iti-card ul li {
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.15s;
}
.iti-card ul li:hover {
background: #f8fafc;
margin: 0 -4px;
padding-left: 4px;
padding-right: 4px;
border-radius: 6px;
}
.iti-card ul li:last-child {
border-bottom: none;
}
.iti-card ul li .icon {
font-size: 17px;
color: #0008ff;
}
.iti-card ul li small {
color: #64748b;
margin-left: auto;
font-size: 11.5px;
font-weight: 500;
}
.iti-card ul li .count {
color: #0008ff;
font-weight: 700;
margin-left: auto;
background: #e0e7ff;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
}
.iti-card .activity-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
}
.iti-card .activity-list .avatar {
width: 26px;
height: 26px;
background: linear-gradient(135deg, #0008ff, #0006cc);
color: white;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid #e0e7ff;
}
.iti-quick {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.iti-quick .quick-card {
background: #ffffff;
border-radius: 14px;
padding: 14px 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
border: 1px solid #e0e7ff;
font-size: 13px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 6px;
}
.iti-quick .quick-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 8, 255, 0.12);
border-color: #0008ff;
}
.iti-quick .quick-card .icon {
font-size: 20px;
color: #0008ff;
margin-bottom: 2px;
}
.iti-quick .quick-card div {
font-weight: 600;
color: #1e293b;
line-height: 1.3;
}
.iti-quick .quick-card small {
color: #64748b;
font-size: 11px;
line-height: 1.3;
}
.iti-quick .quick-card .icon {
font-size: 18px;
margin-bottom: 6px;
}
.iti-quick .quick-card div {
font-weight: 600;
color: #1f2937;
}
.iti-quick .quick-card small {
color: #6b7280;
font-size: 11px;
}
.iti-lower {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Responsive for teacher mobile: charts horizontal on desktop, stack on mobile */
.iti-charts-row {
display: flex;
gap: 16px;
}
.iti-charts-row > .iti-card {
flex: 1;
}
.iti-bottom-row,
.iti-bottom-2col {
display: flex;
gap: 16px;
}
@media (max-width: 768px) {
.iti-charts-row,
.iti-bottom-row,
.iti-bottom-2col {
flex-direction: column;
}
.iti-charts-row > .iti-card {
flex: none !important;
width: 100%;
}
.iti-bottom-row > div,
.iti-bottom-2col > .iti-card {
width: 100%;
}
.iti-lower {
display: block; /* fallback for injected content */
}
.iti-charts-row .iti-card,
.iti-bottom-row > div {
margin-bottom: 8px;
}
}
/* Legacy page-sections are moved into .iti-main on demand to restore exact old HTML */
#teacherApp #tSectionParking .page-section,
#teacherApp > .page-section { display: none !important; }
#teacherApp .iti-main > .page-section.active {
display: block !important;
width: 100%;
max-width: 100%;
min-height: calc(100vh - 48px);
box-sizing: border-box;
}
/* Styles for injected sections to display properly */
#teacherApp .iti-main .iti-card {
background: #ffffff;
border-radius: 16px;
padding: 18px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e7ff;
margin-bottom: 16px;
transition: all 0.2s ease;
}
#teacherApp .iti-main .iti-card:hover {
border-color: #0008ff;
box-shadow: 0 10px 15px -3px rgba(0, 8, 255, 0.15);
}
#teacherApp .iti-main table {
width: 100%;
border-collapse: collapse;
}
#teacherApp .iti-main th, #teacherApp .iti-main td {
padding: 8px 12px;
border: 1px solid #e5e7eb;
text-align: left;
font-size: 13px;
}
#teacherApp .iti-main th {
background: #f8fafc;
font-weight: 600;
}
#teacherApp .iti-main .card {
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}
#teacherApp .iti-main table {
font-size: 13px;
}
#teacherApp .iti-main th {
background: #f1f5f9;
font-weight: 600;
color: #374151;
}
/* Additional for charts in new design */
.donut-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#22c55e 0deg calc(var(--percent, 96) * 3.6deg), #ef4444 calc(var(--percent, 96) * 3.6deg) 360deg);
position: relative;
}
.donut-chart .hole {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.bar-container {
display: flex;
align-items: flex-end;
height: 80px;
gap: 4px;
margin-top: 10px;
}
.bar {
flex: 1;
background: #3b82f6;
border-radius: 4px 4px 0 0;
position: relative;
}
.bar span {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: #374151;
}
.line-chart {
height: 80px;
position: relative;
margin-top: 10px;
}
.line-chart svg {
width: 100%;
height: 100%;
}
/* ========== CRYPTOBASE-STYLE TEACHER DASHBOARD (new image) ========== */
.crypto-topbar {
background: #0066ff;
color: #fff;
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 13px;
gap: 16px;
flex-wrap: wrap;
}
.crypto-topbar .logo {
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.crypto-topbar .nav-links {
display: flex;
gap: 16px;
font-size: 13px;
}
.crypto-topbar .nav-links a, .crypto-topbar .nav-links span {
color: rgba(255,255,255,0.85);
cursor: pointer;
}
.crypto-topbar .nav-links a:hover { color: #fff; }
.crypto-topbar .right-controls {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.crypto-topbar .search {
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
width: 220px;
font-size: 13px;
}
.crypto-topbar .search::placeholder { color: rgba(255,255,255,0.6); }
.crypto-container {
display: flex;
min-height: calc(100vh - 48px);
background: #f8f9fc;
}
.crypto-sidebar {
width: 64px;
background: #fff;
border-right: 1px solid #eee;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12px;
gap: 8px;
}
.crypto-sidebar .icon-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 18px;
color: #555;
cursor: pointer;
}
.crypto-sidebar .icon-btn.active {
background: #e6f0ff;
color: #0066ff;
}
.crypto-sidebar .icon-btn:hover {
background: #f0f4ff;
}
.crypto-main {
flex: 1;
padding: 16px 20px;
overflow: auto;
}
.crypto-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.crypto-header .title {
font-size: 22px;
font-weight: 700;
color: #111;
}
.crypto-header .subtitle {
font-size: 13px;
color: #666;
}
.crypto-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.crypto-card {
background: #fff;
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border: 1px solid #eee;
}
.crypto-card.highlight {
border: 2px solid #0066ff;
box-shadow: 0 2px 8px rgba(0,102,255,0.15);
}
.crypto-card .label {
font-size: 12px;
color: #666;
display: flex;
align-items: center;
gap: 6px;
}
.crypto-card .value {
font-size: 22px;
font-weight: 700;
margin: 4px 0 2px;
color: #111;
}
.crypto-card .change {
font-size: 12px;
font-weight: 600;
}
.crypto-card .change.up { color: #16a34a; }
.crypto-card .change.down { color: #dc2626; }
.crypto-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.crypto-panel {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border: 1px solid #eee;
}
.crypto-panel h4 {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #111;
}
.crypto-chart {
height: 160px;
background: linear-gradient(#f0f7ff, #fff);
border-radius: 8px;
position: relative;
display: flex;
align-items: flex-end;
padding: 10px;
border: 1px solid #e0e7ff;
}
.crypto-chart .bar {
flex: 1;
margin: 0 6px;
background: #0066ff;
border-radius: 4px 4px 0 0;
position: relative;
}
.crypto-chart .bar-label {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: #666;
white-space: nowrap;
}
.crypto-right {
display: flex;
flex-direction: column;
gap: 12px;
}
.crypto-account {
background: #fff;
border-radius: 12px;
padding: 14px;
border: 1px solid #eee;
}
.crypto-account .acc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.crypto-account .acc-header .title {
font-weight: 600;
font-size: 13px;
}
.crypto-list {
font-size: 12px;
}
.crypto-list .item {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #f1f5f9;
}
.crypto-list .item:last-child { border-bottom: none; }
.crypto-tasks .task {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
padding: 4px 0;
}
.crypto-tasks .task input {
margin-top: 2px;
}
.crypto-btn {
background: #0066ff;
color: #fff;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.crypto-btn.secondary {
background: #f1f5f9;
color: #111;
}
/* ========== EDU-CENTER STYLE TEACHER DASHBOARD (new image) ========== */
.edu-app {
display: flex;
min-height: 100vh;
background: #f8f9fc;
font-family: var(--font-stack);
}
.edu-sidebar {
width: 240px;
background: #5305fc;
color: #fff;
display: flex;
flex-direction: column;
padding: 20px 0;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.edu-sidebar .logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px 20px;
font-size: 20px;
font-weight: 700;
}
.edu-sidebar .logo .icon {
width: 36px;
height: 36px;
background: #fff;
color: #6b46c1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.edu-sidebar .menu-label {
font-size: 11px;
font-weight: 600;
opacity: 0.7;
padding: 0 20px 8px;
letter-spacing: 0.5px;
}
.edu-sidebar .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.edu-sidebar .nav-item {
color: #ffffff;
}
.edu-sidebar .nav-item:hover {
background: rgba(255,255,255,0.15);
color: #f97316;
}
.edu-sidebar .nav-item.active {
background: rgba(255,255,255,0.15);
color: #dc2626;
font-weight: 600;
}
.edu-sidebar .nav-item .ic {
width: 20px;
font-size: 16px;
}
.edu-sidebar .bottom {
margin-top: auto;
padding: 0 20px;
}
.edu-sidebar .user {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.1);
padding: 8px;
border-radius: 10px;
margin-top: 12px;
}
.edu-sidebar .user .avatar {
width: 32px;
height: 32px;
background: #fff;
color: #6b46c1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
.edu-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.edu-topbar {
background: #fff;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid #eee;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.edu-topbar .search {
flex: 1;
max-width: 300px;
background: #f1f5f9;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-size: 14px;
}
.edu-topbar .top-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.edu-content {
padding: 20px 24px;
flex: 1;
overflow: auto;
}
.edu-welcome {
margin-bottom: 16px;
}
.edu-welcome h1 {
font-size: 22px;
font-weight: 700;
color: #1a202c;
margin: 0;
}
.edu-welcome p {
color: #718096;
font-size: 14px;
margin: 4px 0 0;
}
.edu-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.edu-stat {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.edu-stat .num {
font-size: 26px;
font-weight: 700;
color: #1a202c;
}
.edu-stat .label {
font-size: 12px;
color: #718096;
margin-top: 2px;
}
.edu-stat .change {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
}
.edu-stat .change.up { background: #c6f6d5; color: #276749; }
.edu-stat .change.down { background: #fed7d7; color: #c53030; }
.edu-motiv {
background: linear-gradient(135deg, #6b46c1, #553c9a);
color: #fff;
border-radius: 12px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.edu-motiv .text {
flex: 1;
}
.edu-motiv .text h3 {
margin: 0 0 4px;
font-size: 15px;
}
.edu-motiv .text p {
font-size: 12px;
opacity: 0.85;
}
.edu-motiv .btn {
background: #fff;
color: #6b46c1;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.edu-charts {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.edu-card {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.edu-card h4 {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #2d3748;
}
.edu-line-chart {
height: 140px;
position: relative;
background: #f7fafc;
border-radius: 8px;
padding: 10px;
}
.edu-events {
font-size: 13px;
}
.edu-events .event {
padding: 8px 0;
border-bottom: 1px solid #edf2f7;
display: flex;
justify-content: space-between;
}
.edu-events .event:last-child {
border-bottom: none;
}
.edu-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.edu-calendar {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.edu-finance {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.edu-finance .bars {
display: flex;
align-items: flex-end;
height: 80px;
gap: 8px;
margin-top: 8px;
}
.edu-finance .bar {
flex: 1;
background: #48bb78;
border-radius: 4px 4px 0 0;
}
.edu-finance .bar.exp {
background: #ed8936;
}
/* Base for responsive - mobile btn hidden on desktop, sidebar normal */
#teacherApp .edu-topbar .mobile-menu-btn {
display: none;
}
#teacherApp .edu-sidebar {
width: 240px;
}
/* Fully Responsive for all devices - Teacher Dashboard Edu-Center style */
@media (max-width: 1024px) {
#teacherApp .edu-sidebar {
width: 200px;
}
#teacherApp .edu-stats {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
#teacherApp {
flex-direction: column;
}
#teacherApp .edu-sidebar {
position: fixed;
top: 0;
left: -260px;
width: 240px;
height: 100vh;
z-index: 1001;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0,0,0,0.2);
overflow-y: auto;
}
#teacherApp .edu-sidebar.open {
left: 0;
}
#teacherApp .edu-main {
margin-left: 0;
}
#teacherApp .edu-topbar .mobile-menu-btn {
display: block;
font-size: 20px;
background: none;
border: none;
color: #333;
cursor: pointer;
padding: 5px;
}
#teacherApp .edu-stats {
grid-template-columns: repeat(2, 1fr);
}
#teacherApp .edu-charts {
grid-template-columns: 1fr;
}
#teacherApp .edu-bottom {
grid-template-columns: 1fr;
}
#teacherApp .edu-content {
padding: 10px 15px;
}
#teacherApp .edu-topbar {
padding: 10px 15px;
}
#teacherApp .edu-topbar .search {
max-width: 150px;
}
#teacherApp table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
#teacherApp .edu-card {
padding: 12px;
}
}
@media (max-width: 480px) {
#teacherApp .edu-stats {
grid-template-columns: 1fr;
}
#teacherApp .edu-topbar .search {
max-width: 100px;
font-size: 12px;
}
#teacherApp .edu-welcome h1 {
font-size: 18px;
}
#teacherApp .edu-content h2, #teacherApp .edu-content h3 {
font-size: 16px;
}
#teacherApp .edu-card .num {
font-size: 20px;
}
#teacherApp .edu-sidebar {
width: 85%;
}
}
/* ========== ITI Guru login (design match) ========== */
.login-split.ig-login,
.ig-login {
display: flex;
width: 100%;
max-width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
background: #0b1220;
font-family: var(--font-stack);
overflow: hidden;
box-sizing: border-box;
}
/* LEFT promo — original layout (content top-aligned) */
.login-promo {
flex: 1 1 56%;
min-width: 0;
min-height: 0;
height: 100%;
max-height: 100%;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: max(20px, env(safe-area-inset-top)) 36px 20px 36px;
overflow: hidden;
overflow-y: auto;
color: #fff;
box-sizing: border-box;
}
.login-promo-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 15% 20%, rgba(56,189,248,0.12) 0%, transparent 50%),
radial-gradient(ellipse 60% 45% at 85% 80%, rgba(249,115,22,0.14) 0%, transparent 50%),
linear-gradient(155deg, #0b1220 0%, #111c33 42%, #0f172a 100%);
}
.login-promo-bg::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.35;
background-image:
linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
}
.login-promo-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
margin: 0;
padding-top: 4px;
}
.login-promo-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.brand-logo-promo {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.login-promo-name {
font-size: 22px;
font-weight: 800;
font-family: var(--font-heading);
letter-spacing: -0.02em;
line-height: 1.1;
}
.ig-iti { color: #f97316; }
.ig-guru { color: #e2e8f0; }
.login-promo-tag {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
margin-top: 3px;
letter-spacing: 0.04em;
}
.login-promo-title {
margin: 0 0 10px;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
font-family: var(--font-heading);
white-space: nowrap;
text-align: center;
width: 100%;
}
.login-promo-title .t-white { color: #f8fafc; }
.login-promo-title .t-orange { color: #f97316; }
.login-promo-title .t-teal { color: #2dd4bf; }
.login-promo-title span { white-space: nowrap; }
.login-promo-tagline {
margin: 0 auto 12px;
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 600;
line-height: 1.4;
color: #e2e8f0;
font-family: var(--font-ui);
letter-spacing: 0.01em;
text-align: center;
width: 100%;
max-width: 520px;
}
.login-promo-desc {
margin: 0 auto 28px;
font-size: 15px;
line-height: 1.6;
color: #94a3b8;
max-width: 480px;
font-family: var(--font-body);
text-align: center;
width: 100%;
}
/* Feature section — left promo */
.login-feat-section {
margin-bottom: 22px;
}
.login-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #94a3b8;
font-family: var(--font-ui);
}
.login-section-label-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #f97316, #2dd4bf);
box-shadow: 0 0 10px rgba(45,212,191,0.45);
}
.login-feat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.login-feat-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 15px;
border-radius: 16px;
background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
backdrop-filter: blur(10px);
transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
position: relative;
overflow: hidden;
}
.login-feat-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: 16px 0 0 16px;
opacity: 0.95;
}
.login-feat-card:hover {
transform: translateY(-3px);
background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
border-color: rgba(255,255,255,0.2);
box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
.login-feat-ic {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.login-feat-ic svg {
display: block;
}
.login-feat-text { min-width: 0; }
.login-feat-blue::before { background: #3b82f6; }
.login-feat-green::before { background: #22c55e; }
.login-feat-orange::before { background: #f97316; }
.login-feat-purple::before { background: #a855f7; }
.login-feat-blue .login-feat-ic {
background: rgba(59,130,246,0.22);
color: #93c5fd;
box-shadow: inset 0 0 0 1px rgba(147,197,253,0.2);
}
.login-feat-green .login-feat-ic {
background: rgba(34,197,94,0.2);
color: #86efac;
box-shadow: inset 0 0 0 1px rgba(134,239,172,0.2);
}
.login-feat-orange .login-feat-ic {
background: rgba(249,115,22,0.2);
color: #fdba74;
box-shadow: inset 0 0 0 1px rgba(253,186,116,0.22);
}
.login-feat-purple .login-feat-ic {
background: rgba(168,85,247,0.2);
color: #d8b4fe;
box-shadow: inset 0 0 0 1px rgba(216,180,254,0.22);
}
.login-feat-title {
font-size: 14px;
font-weight: 800;
color: #f8fafc;
font-family: var(--font-ui);
letter-spacing: -0.01em;
line-height: 1.2;
}
.login-feat-sub {
font-size: 11.5px;
color: #94a3b8;
margin-top: 3px;
font-family: var(--font-body);
font-weight: 600;
}
/* Trust block — left promo */
.login-promo-trust {
margin-top: 2px;
padding: 16px;
border-radius: 18px;
background:
linear-gradient(160deg, rgba(30,41,59,0.75), rgba(15,23,42,0.65));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 36px rgba(0,0,0,0.18);
backdrop-filter: blur(12px);
}
.login-promo-trust-hd {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 14px;
}
.login-promo-trust-badge {
width: 28px;
height: 28px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(45,212,191,0.28), rgba(59,130,246,0.28));
color: #5eead4;
border: 1px solid rgba(94,234,212,0.25);
flex-shrink: 0;
}
.login-promo-trust-title {
text-align: center;
font-size: 13.5px;
font-weight: 800;
color: #f8fafc;
margin: 0;
font-family: var(--font-ui);
letter-spacing: 0.01em;
}
.login-promo-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.login-promo-trust-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px 11px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
min-height: 56px;
box-sizing: border-box;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.login-promo-trust-item:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.14);
transform: translateY(-1px);
}
.login-promo-trust-item .login-trust-tx {
color: #e2e8f0;
font-size: 11.5px;
line-height: 1.4;
font-weight: 600;
text-align: left;
font-family: var(--font-body);
}
.login-promo-trust-item .login-trust-ic-blue {
background: rgba(59, 130, 246, 0.28);
color: #93c5fd;
}
.login-promo-trust-item .login-trust-ic-green {
background: rgba(34, 197, 94, 0.22);
color: #86efac;
}
.login-promo-trust-item .login-trust-ic-orange {
background: rgba(249, 115, 22, 0.22);
color: #fdba74;
}
.login-promo-trust-item .login-trust-ic-purple {
background: rgba(168, 85, 247, 0.22);
color: #d8b4fe;
}
.login-preview-hidden { display: none !important; }
/* RIGHT auth — clean premium form card (fit viewport) */
.login-auth {
flex: 1 1 44%;
min-width: 0;
min-height: 0;
height: 100%;
max-height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding:
max(12px, env(safe-area-inset-top))
max(18px, env(safe-area-inset-right))
max(12px, env(safe-area-inset-bottom))
max(18px, env(safe-area-inset-left));
background:
radial-gradient(ellipse 90% 70% at 100% 0%, rgba(99,102,241,0.14), transparent 55%),
radial-gradient(ellipse 70% 50% at 0% 100%, rgba(249,115,22,0.09), transparent 50%),
linear-gradient(165deg, #eef2ff 0%, #f8fafc 45%, #eef2f7 100%);
overflow: hidden;
box-sizing: border-box;
}
.login-auth-bg {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0 1px, transparent 1.5px),
radial-gradient(circle at 70% 60%, rgba(99,102,241,0.07) 0 1px, transparent 1.5px);
background-size: 28px 28px, 36px 36px;
opacity: 0.65;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 80%);
}
.login-auth-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
max-height: calc(100% - 8px);
background: #ffffff;
border-radius: 24px;
border: 1px solid rgba(226,232,240,0.95);
padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2.4vw, 30px) clamp(14px, 1.8vh, 20px);
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 2px 4px rgba(15,23,42,0.03),
0 20px 48px rgba(79,70,229,0.11),
0 8px 20px rgba(15,23,42,0.05);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(148,163,184,0.35) transparent;
}
.login-auth-accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 24px 24px 0 0;
background: linear-gradient(90deg, #f97316 0%, #7c3aed 48%, #2dd4bf 100%);
box-shadow: 0 3px 14px rgba(124,58,237,0.28);
}
.login-auth-brand {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: clamp(12px, 1.6vh, 18px);
text-align: left;
flex-shrink: 0;
}
.login-auth-logo-wrap {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 2px solid #eef2ff;
box-shadow: 0 6px 18px rgba(99,102,241,0.14);
flex-shrink: 0;
overflow: hidden;
}
.brand-logo-auth {
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
object-fit: contain;
flex-shrink: 0;
}
.login-auth-brand-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.login-auth-brand-name {
font-size: 20px;
font-weight: 800;
font-family: var(--font-heading);
letter-spacing: -0.02em;
line-height: 1.15;
}
.login-auth-brand-name .ig-iti { color: #f97316; }
.login-auth-brand-name .ig-guru-dark { color: #0f172a; }
.login-auth-brand-tag {
font-size: 11px;
font-weight: 700;
color: #64748b;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--font-ui);
}
.login-auth-head {
margin-bottom: clamp(12px, 1.6vh, 16px);
text-align: left;
flex-shrink: 0;
}
.login-auth-badge {
display: none; /* cleaner card — less chrome */
}
.login-auth-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
}
.login-auth-title {
margin: 0 0 6px;
font-size: clamp(24px, 3.2vh, 30px);
font-weight: 800;
color: #0f172a;
letter-spacing: -0.03em;
font-family: var(--font-heading);
line-height: 1.15;
background: none;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: #0f172a;
}
.login-auth-sub {
margin: 0;
max-width: none;
font-size: 13.5px;
line-height: 1.5;
color: #64748b;
font-family: var(--font-body);
}
.login-hero { display: none !important; }
/* ── Premium ITI Dashboard board (login right) ── */
.lp-board {
width: 100%;
background: #fff;
border-radius: 20px;
box-shadow:
0 4px 6px rgba(15,23,42,0.04),
0 24px 48px rgba(15,23,42,0.18),
0 0 0 1px rgba(255,255,255,0.35) inset;
overflow: hidden;
color: #0f172a;
flex: 0 1 auto;
}
.lp-board-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
}
.lp-board-hd-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.lp-live-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34,197,94,0.28);
flex-shrink: 0;
animation: lpPulse 2s ease-in-out infinite;
}
@keyframes lpPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.28); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.12); }
}
.lp-board-title {
font-size: 14px;
font-weight: 700;
font-family: var(--font-ui);
letter-spacing: 0.01em;
}
.lp-board-pill {
flex-shrink: 0;
padding: 5px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.14);
font-size: 11px;
font-weight: 700;
color: #e2e8f0;
font-family: var(--font-ui);
}
.lp-board-body {
padding: 16px 18px 14px;
background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
}
.lp-board-sub {
margin: 0 0 14px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #64748b;
font-family: var(--font-body);
}
.lp-board-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.lp-board-loading,
.lp-board-empty {
grid-column: 1 / -1;
text-align: center;
padding: 28px 16px;
font-size: 13px;
color: #64748b;
font-family: var(--font-body);
}
.lp-board-empty span {
display: block;
margin-top: 4px;
font-size: 12px;
color: #94a3b8;
}
.lp-board-error { color: #b91c1c; }
.lp-panel {
background: #fff;
border: 1px solid #e8ecf4;
border-radius: 16px;
padding: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
min-height: 200px;
display: flex;
flex-direction: column;
}
.lp-panel-att { border-top: 3px solid #22c55e; }
.lp-panel-test { border-top: 3px solid #5B4FCF; }
.lp-panel-hd {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.lp-panel-ic {
width: 36px;
height: 36px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.lp-panel-ic-att { background: #fff7ed; }
.lp-panel-ic-test { background: #eef0fb; }
.lp-panel-title {
font-size: 13px;
font-weight: 800;
color: #0f172a;
font-family: var(--font-ui);
line-height: 1.25;
}
.lp-panel-meta {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
font-family: var(--font-body);
}
.lp-panel-list {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.lp-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #f1f5f9;
transition: background .15s, box-shadow .15s, transform .15s;
}
.lp-row:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
transform: translateY(-1px);
}
.lp-rank {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
font-family: var(--font-ui);
}
.lp-rank-att { background: linear-gradient(145deg, #22c55e, #16a34a); }
.lp-rank-test { background: linear-gradient(145deg, #5B4FCF, #4338ca); }
.lp-av {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #e2e8f0;
}
.lp-av-ini {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #5B4FCF, #6366f1);
color: #fff;
font-size: 12px;
font-weight: 800;
font-family: var(--font-ui);
}
.lp-row-info { flex: 1; min-width: 0; }
.lp-row-name {
font-size: 13px;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-ui);
line-height: 1.25;
}
.lp-row-sub {
font-size: 11px;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-body);
}
.lp-row-sub b { color: #0f172a; font-weight: 700; }
.lp-row-empty {
font-size: 12px;
color: #94a3b8;
padding: 12px;
text-align: center;
}
.lp-board-ft {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
flex-wrap: wrap;
}
.lp-board-ft-hint {
font-size: 11px;
color: #94a3b8;
font-family: var(--font-body);
}
.lp-board-ft-link {
font-size: 12px;
font-weight: 700;
color: #5B4FCF;
font-family: var(--font-ui);
}
.login-field { margin-bottom: 14px; flex-shrink: 0; }
.login-label {
display: block;
font-size: 12.5px;
font-weight: 700;
color: #334155;
margin-bottom: 7px;
font-family: var(--font-ui);
letter-spacing: 0.01em;
}
.login-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.login-input-ic {
position: absolute;
left: 13px;
color: #94a3b8;
display: flex;
align-items: center;
pointer-events: none;
z-index: 1;
transition: color .15s ease;
}
.login-input,
.login-form .inp.login-input {
width: 100%;
margin: 0;
padding: 12px 44px 12px 42px !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 12px !important;
font-size: 14.5px;
font-family: var(--font-body);
color: #0f172a;
background: #f8fafc !important;
transition: border-color .18s, box-shadow .18s, background .18s;
box-sizing: border-box;
min-height: 46px;
}
.login-input::placeholder,
.login-form .inp.login-input::placeholder {
color: #94a3b8;
font-weight: 500;
}
.login-input:hover,
.login-form .inp.login-input:hover {
border-color: #cbd5e1 !important;
background: #fff !important;
}
.login-input:focus,
.login-form .inp.login-input:focus {
outline: none;
background: #fff !important;
border-color: #818cf8 !important;
box-shadow:
0 0 0 4px rgba(99,102,241,0.14),
0 8px 18px rgba(99,102,241,0.08) !important;
}
.login-input-wrap:focus-within .login-input-ic {
color: #6366f1;
}
.login-pass-toggle {
position: absolute;
right: 8px;
width: 34px;
height: 34px;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: color .15s, background .15s;
}
.login-pass-toggle:hover {
color: #4f46e5;
background: #eef2ff;
}
.login-check {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-size: clamp(11.5px, 1.45vh, 12.5px);
font-weight: 600 !important;
color: #475569;
cursor: pointer;
margin: 0 !important;
user-select: none;
}
.login-check input {
width: 15px;
height: 15px;
accent-color: #4f46e5;
border-radius: 4px;
}
.login-link {
color: #4f46e5;
font-weight: 700;
text-decoration: none;
font-size: clamp(11.5px, 1.45vh, 12.5px);
font-family: var(--font-ui);
transition: color .15s;
}
.login-link:hover {
color: #312e81;
text-decoration: underline;
}
.login-err {
display: none;
align-items: flex-start;
gap: 8px;
background: linear-gradient(135deg, #fef2f2, #fff1f2);
border: 1px solid #fecaca;
border-radius: 11px;
padding: clamp(8px, 1.1vh, 11px) 12px;
margin-bottom: clamp(8px, 1.1vh, 12px);
font-size: clamp(12px, 1.5vh, 13px);
color: #b91c1c;
line-height: 1.4;
font-family: var(--font-body);
flex-shrink: 0;
}
.login-err-ic { flex-shrink: 0; }
.login-err-tx { flex: 1; min-width: 0; }
.login-role-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-bottom: 16px;
padding: 5px;
background: #f1f5f9;
border-radius: 14px;
border: 1px solid #e2e8f0;
box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
flex-shrink: 0;
}
.login-role-tabs .role-tab {
min-height: 42px;
border: none;
border-radius: 11px;
background: transparent;
font-size: 13px;
font-weight: 700;
font-family: var(--font-ui);
color: #64748b;
cursor: pointer;
touch-action: manipulation;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background .18s, color .18s, box-shadow .18s;
}
.login-role-tabs .role-tab .role-tab-ic {
font-size: 14px;
line-height: 1;
opacity: 0.95;
}
.login-role-tabs .role-tab:hover {
color: #334155;
background: rgba(255,255,255,0.8);
}
.login-role-tabs .role-tab.active {
background: #ffffff !important;
color: #4f46e5 !important;
box-shadow:
0 2px 10px rgba(79,70,229,0.14),
0 0 0 1px rgba(99,102,241,0.14);
transform: none;
}
.login-trust {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eef2f7;
}
.login-trust-title {
display: block;
text-align: center;
font-size: 12px;
font-weight: 800;
color: #0f172a;
margin: 0 0 12px;
font-family: var(--font-ui);
letter-spacing: 0.02em;
}
.login-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.login-trust-item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e8ecf4;
min-height: 56px;
box-sizing: border-box;
}
.login-trust-ic {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.login-trust-ic svg {
display: block;
width: 16px;
height: 16px;
}
.login-trust-ic-blue {
background: #dbeafe;
color: #2563eb;
}
.login-trust-ic-green {
background: #dcfce7;
color: #16a34a;
}
.login-trust-ic-orange {
background: #ffedd5;
color: #ea580c;
}
.login-trust-ic-purple {
background: #ede9fe;
color: #7c3aed;
}
.login-trust-tx {
flex: 1;
min-width: 0;
margin: 0;
padding: 0;
font-size: 11px;
line-height: 1.4;
color: #475569;
font-weight: 600;
font-family: var(--font-body);
text-align: left;
}
/* ── ITIGuru brand logo (site-wide) ── */
.brand-logo {
display: block;
object-fit: contain;
flex-shrink: 0;
background: transparent;
}
.brand-logo-login {
width: 64px;
height: 64px;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
background: #fff;
}
.brand-logo-hero {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow:
0 10px 32px rgba(15, 23, 42, 0.25),
0 0 0 4px rgba(255, 255, 255, 0.22);
background: #fff;
}
.brand-logo-admin {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.brand-logo-sidebar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.brand-logo-on-dark {
background: #fff;
}
.login-hero-logo-wrap {
display: flex;
justify-content: flex-start;
margin-bottom: 4px;
}
.admin-brand .brand-logo-admin {
margin-right: 4px;
}
.sb-brand .brand-logo-sidebar {
margin-right: 2px;
}
.login-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.login-logo-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.login-logo-name {
font-weight: 800;
font-size: 20px;
line-height: 1.2;
color: #0f172a;
letter-spacing: -0.02em;
font-family: var(--font-heading);
}
.login-logo-tag {
font-weight: 600;
font-size: 12px;
line-height: 1.35;
color: #64748b;
font-family: var(--font-body);
}
/* legacy icon fallback (hidden if logo img present) */
.login-logo .icon {
width: 32px;
height: 32px;
background: #6366f1;
border-radius: 8px;
display: none;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
flex-shrink: 0;
}
.login-logo span {
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: #111;
letter-spacing: -0.01em;
}
.login-options {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
margin: 2px 0 16px;
flex-shrink: 0;
}
.login-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 48%, #4338ca 100%);
color: #fff;
border: none;
padding: 14px 18px;
border-radius: 13px;
font-size: 15px;
font-weight: 800;
font-family: var(--font-ui);
letter-spacing: 0.01em;
cursor: pointer;
margin-bottom: 10px;
min-height: 48px;
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 10px 26px rgba(79,70,229,0.38);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
flex-shrink: 0;
}
.login-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .5s ease;
}
.login-btn:hover {
filter: brightness(1.04);
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 14px 32px rgba(79,70,229,0.45);
transform: translateY(-1px);
}
.login-btn:hover::before { transform: translateX(120%); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled {
opacity: 0.7;
cursor: wait;
transform: none;
}
.login-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255,255,255,0.16);
transition: transform .15s ease, background .15s ease;
}
.login-btn:hover .login-btn-arrow {
transform: translateX(2px);
background: rgba(255,255,255,0.22);
}
.login-register {
text-align: center;
font-size: 12.5px;
margin-top: 4px;
margin-bottom: 10px;
color: #64748b;
line-height: 1.45;
flex-shrink: 0;
font-family: var(--font-body);
}
.login-register a {
color: #4f46e5;
font-weight: 700;
text-decoration: none;
}
.login-register a:hover {
text-decoration: underline;
color: #312e81;
}
.login-secure-row {
display: none !important; /* keep form clean */
align-items: center;
justify-content: center;
gap: 6px;
margin-top: clamp(8px, 1.2vh, 12px);
padding: 7px 10px;
border-radius: 10px;
background: linear-gradient(135deg, #f0fdf4, #ecfeff);
border: 1px solid #d1fae5;
color: #0f766e;
font-size: clamp(10px, 1.25vh, 11px);
font-weight: 700;
font-family: var(--font-ui);
letter-spacing: 0.01em;
flex-shrink: 0;
}
.login-secure-ic { font-size: 12px; line-height: 1; }
/* Login card footer — fixed layout (desktop + mobile), compact for fit */
.ig-login .login-copyright,
.login-auth-card .login-copyright,
.login-form.login-auth-card .login-copyright {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
width: 100% !important;
max-width: 100% !important;
margin: clamp(6px, 1vh, 10px) 0 0 !important;
padding: clamp(6px, 1vh, 10px) 4px 0 !important;
border-top: 1px solid #eef2f7 !important;
text-align: center !important;
font-size: clamp(10px, 1.25vh, 11px) !important;
line-height: 1.35 !important;
color: #94a3b8 !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.ig-login .login-copy-line,
.ig-login .login-copy-by,
.login-auth-card .login-copy-line,
.login-auth-card .login-copy-by {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
float: none !important;
}
.ig-login .login-copy-line {
font-size: inherit;
font-weight: 500;
color: #94a3b8;
font-family: var(--font-body);
}
.ig-login .login-copy-by {
font-size: inherit;
font-weight: 700;
color: #64748b;
font-family: var(--font-ui);
letter-spacing: 0.01em;
}
.ig-login .login-copyright a,
.login-auth-card .login-copyright a {
color: #4f46e5 !important;
text-decoration: none !important;
font-weight: 700 !important;
}
.ig-login .login-copyright a:hover {
text-decoration: underline !important;
}
.ig-login .login-copyright.site-copyright {
position: static !important;
}
/* Responsive — login form first, left promo cards BELOW (scrollable) */
@media (max-width: 980px) {
.ig-login {
flex-direction: column !important;
background: #eef2f7;
height: auto !important;
max-height: none !important;
min-height: 100dvh;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* Form on top */
.login-auth {
order: 1 !important;
flex: 0 0 auto !important;
width: 100%;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
background: #eef2f7;
padding: max(12px, env(safe-area-inset-top)) 14px 16px;
overflow: visible !important;
}
/* Left-side toppers / promo cards — always show BELOW form on mobile */
.login-promo {
order: 2 !important;
display: flex !important;
visibility: visible !important;
flex: 0 0 auto !important;
width: 100%;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
align-items: flex-start;
justify-content: flex-start;
padding: 8px 14px max(28px, env(safe-area-inset-bottom));
overflow: visible !important;
overflow-y: visible !important;
}
.login-auth-card {
max-width: 420px;
max-height: none;
margin: 0 auto;
padding: clamp(16px, 2.5vh, 24px) clamp(16px, 4vw, 24px) clamp(14px, 2vh, 18px);
}
.login-promo-inner {
max-width: 520px;
margin: 0 auto;
width: 100%;
}
.login-promo-brand { justify-content: center; }
.login-promo-title {
text-align: center;
font-size: clamp(16px, 4.2vw, 24px);
white-space: normal;
}
.login-promo-title span { white-space: normal; }
.login-promo-tagline {
text-align: center;
font-size: 14px;
}
.login-promo-desc {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
}
/* Toppers board: stack cards full width under form */
.ig-login .lp-board,
.lp-board-dark {
display: block !important;
margin-top: 8px;
margin-bottom: 8px;
}
.lp-board-dark .lp-board-grid,
.ig-login .lp-board-grid {
grid-template-columns: 1fr !important;
gap: 12px;
}
}
@media (max-width: 640px) {
.login-auth {
min-height: 0 !important;
padding: max(10px, env(safe-area-inset-top)) 12px 12px;
}
.login-promo {
padding: 4px 12px max(24px, env(safe-area-inset-bottom));
}
.login-auth-card {
max-height: none;
padding: 14px 16px 12px;
border-radius: 18px;
}
.login-auth-brand { margin-bottom: 8px; gap: 8px; }
.brand-logo-auth { width: 42px; height: 42px; }
.login-auth-brand-name { font-size: 18px; }
.login-auth-brand-tag { font-size: 10.5px; }
.login-auth-title { font-size: 22px; }
.login-auth-sub { font-size: 12px; }
/* 16px inputs avoid iOS zoom */
.login-input, .login-form .inp.login-input {
font-size: 16px !important;
padding: 10px 42px 10px 42px !important;
}
.login-role-tabs .role-tab { font-size: 12px; min-height: 36px; }
.login-btn { padding: 11px 14px; font-size: 14px; }
.login-register { margin-top: 6px; font-size: 11.5px; }
}
/* Extra-short desktop / laptop windows */
@media (min-width: 981px) and (max-height: 760px) {
.login-auth {
padding: 8px 14px;
}
.login-auth-card {
padding: 12px 18px 10px;
border-radius: 16px;
}
.login-auth-sub {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.login-register {
margin-top: 4px;
}
}
@media (min-width: 981px) and (max-height: 640px) {
.login-auth-brand { margin-bottom: 4px; }
.login-auth-head { margin-bottom: 4px; }
.login-auth-title { font-size: 18px; }
.login-role-tabs { margin-bottom: 6px; }
.login-role-tabs .role-tab { min-height: 30px; font-size: 11.5px; }
.login-field { margin-bottom: 6px; }
.login-label { margin-bottom: 3px; font-size: 11px; }
.login-input, .login-form .inp.login-input {
padding: 7px 40px 7px 40px !important;
font-size: 13px;
}
.login-options { margin-bottom: 6px; font-size: 11px; }
.login-btn { padding: 8px 12px; font-size: 13px; margin-bottom: 2px; }
.login-register { font-size: 10.5px; margin-top: 2px; }
.ig-login .login-copyright {
margin-top: 4px !important;
padding-top: 4px !important;
gap: 1px !important;
font-size: 10px !important;
}
}
@media (max-width: 400px) {
.login-feat-grid { grid-template-columns: 1fr; }
.login-promo-title {
font-size: 15px;
white-space: normal;
line-height: 1.35;
}
.login-promo-tagline { font-size: 13px; }
}
/* Landscape phone: still show promo below if stacked; hide only when very short row layout */
@media (max-height: 420px) and (orientation: landscape) and (max-width: 900px) {
.login-promo { display: none !important; }
.login-auth {
flex: 1 1 100%;
min-height: 100dvh;
padding: 12px 16px;
}
}
@media (min-width: 1400px) and (min-height: 800px) {
.login-auth-card { max-width: 420px; }
.login-promo-inner { max-width: 600px; }
}
/* Active state for role pills (fallback) */
.role-tab.active {
background: linear-gradient(180deg, #fff, #f8faff) !important;
color: #4f46e5 !important;
}
/* Short height: hide secondary chrome so form stays fit */
@media (min-width: 981px) and (max-height: 700px) {
.login-auth-badge,
.login-secure-row {
display: none !important;
}
.login-auth-title {
-webkit-text-fill-color: #0f172a;
background: none;
color: #0f172a;
}
}
@media (max-width: 640px) {
.login-role-tabs .role-tab .role-tab-ic { display: none; }
.login-secure-row { font-size: 10px; padding: 6px 8px; }
}
#loginWrap.login-split,
#loginWrap {
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
html, body {
max-width: 100vw;
overflow-x: hidden;
}
/* Desktop: lock document scroll only while login screen is open */
@media (min-width: 981px) {
body.login-open {
height: 100%;
overflow: hidden;
}
}
/* Ensure admin panel is visible when JS sets display:block */
#adminPanel.admin-panel {
position: relative;
z-index: 50;
}
#adminPanel[style*="display: block"],
#adminPanel[style*="display:block"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Login left: dark leaderboard board (Top 5 Test + Attendance) */
.lp-board-dark,
.ig-login .lp-board {
display: block !important;
background: linear-gradient(165deg, rgba(15,23,42,0.72), rgba(15,23,42,0.55));
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
box-shadow: 0 16px 40px rgba(0,0,0,0.28);
overflow: hidden;
color: #e2e8f0;
margin-top: 4px;
max-width: 100%;
}
.lp-board-dark .lp-board-hd {
background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.9));
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-board-dark .lp-board-title {
font-size: 13.5px;
color: #f8fafc;
}
.lp-board-dark .lp-board-pill {
background: rgba(45,212,191,0.12);
border-color: rgba(45,212,191,0.28);
color: #5eead4;
font-size: 10.5px;
padding: 4px 10px;
}
.lp-board-dark .lp-board-body {
padding: 12px;
background: transparent;
}
.lp-board-dark .lp-board-grid {
gap: 10px;
}
.lp-board-dark .lp-panel {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
padding: 12px;
min-height: 0;
box-shadow: none;
}
.lp-board-dark .lp-panel-title { color: #f1f5f9; font-size: 12.5px; }
.lp-board-dark .lp-panel-meta { color: #94a3b8; font-size: 10.5px; }
.lp-board-dark .lp-panel-ic-att { background: rgba(34,197,94,0.16); }
.lp-board-dark .lp-panel-ic-test { background: rgba(99,102,241,0.18); }
.lp-board-dark .lp-panel-list { gap: 7px; }
.lp-board-dark .lp-row,
.lp-board-dark .lp-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 8px 9px;
gap: 8px;
}
.lp-board-dark .lp-row:hover {
background: rgba(255,255,255,0.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.lp-board-dark .lp-row-name {
color: #f8fafc;
font-size: 12.5px;
}
.lp-board-dark .lp-row-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
font-size: 10.5px;
color: #94a3b8;
line-height: 1.3;
font-family: var(--font-body);
}
.lp-board-dark .lp-meta-trade {
color: #5eead4;
font-weight: 700;
}
.lp-board-dark .lp-meta-dot { opacity: 0.5; }
.lp-board-dark .lp-meta-iti {
color: #cbd5e1;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.lp-board-dark .lp-av {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.lp-board-dark .lp-av-ini {
background: linear-gradient(135deg, #6366f1, #4f46e5);
font-size: 11px;
}
.lp-board-dark .lp-rank {
width: 22px;
height: 22px;
font-size: 10px;
}
.lp-score {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
font-family: var(--font-ui);
padding: 4px 7px;
border-radius: 8px;
line-height: 1;
}
.lp-score-att {
background: rgba(34,197,94,0.18);
color: #86efac;
border: 1px solid rgba(34,197,94,0.28);
}
.lp-score-test {
background: rgba(99,102,241,0.2);
color: #c4b5fd;
border: 1px solid rgba(129,140,248,0.3);
}
.lp-board-dark .lp-row-empty {
color: #94a3b8;
font-size: 11.5px;
padding: 16px 8px;
}
.lp-board-dark .lp-board-loading,
.lp-board-dark .lp-board-empty {
color: #94a3b8;
padding: 28px 14px;
font-size: 13px;
}
.lp-board-dark .lp-board-empty span {
color: #64748b;
}
@media (max-width: 900px) {
.lp-board-dark .lp-board-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.lp-board-dark .lp-meta-iti { max-width: 180px; }
.lp-board-dark .lp-av { width: 36px; height: 36px; }
}
@media (max-width: 400px) {
.lp-board-dark .lp-board-grid { grid-template-columns: 1fr; }
}
/* ═══ Teacher module UX polish (all sidebar pages) ═══ */
#teacherApp .iti-sidebar {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.25) transparent;
}
#teacherApp .iti-sidebar .nav-item {
border-radius: 10px;
margin: 2px 8px;
padding: 9px 12px;
transition: background 0.15s ease, transform 0.12s ease, color 0.12s ease;
}
#teacherApp .iti-sidebar .nav-item:hover {
transform: translateX(2px);
}
#teacherApp .iti-sidebar .nav-item.active {
background: rgba(255,255,255,0.2);
box-shadow: inset 3px 0 0 #f7941d;
}
#teacherApp .iti-main > .page-section.active {
padding: 12px 16px 28px;
animation: tPageIn 0.22s ease;
}
@keyframes tPageIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
#teacherApp .t-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border, #e8e8f0);
}
#teacherApp .t-empty-state {
text-align: center;
padding: 36px 20px;
color: var(--muted, #7a7a9d);
background: #fff;
border: 1px dashed #d4d4e8;
border-radius: 14px;
}
#teacherApp .t-empty-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; }
#teacherApp .t-empty-title { font-size: 15px; font-weight: 800; color: #334155; margin-bottom: 6px; }
#teacherApp .t-empty-msg { font-size: 13px; line-height: 1.55; max-width: 420px; margin: 0 auto; }
#teacherApp .t-stest-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
#teacherApp .t-stest-card table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #64748b;
background: #f8fafc;
}
#teacherApp .iti-main .card {
border-radius: 14px;
border: 1px solid var(--border-soft, rgba(40,30,90,0.07));
box-shadow: var(--shadow-card);
}
#teacherApp .iti-main h2 {
letter-spacing: -0.02em;
color: #0f172a;
}
#teacherApp #tTheoryBookRoot,
#teacherApp #tPracBookRoot,
#teacherApp #tLessonNameRoot,
#teacherApp #tLessonPlanRoot,
#teacherApp #tDemonstrationNameRoot,
#teacherApp #tDemonstrationPlanRoot,
#teacherApp #tVideosRoot,
#teacherApp #timetableTeacherRoot {
min-height: 120px;
}
@media (max-width: 768px) {
#teacherApp .iti-main > .page-section.active {
padding: 8px 10px 100px;
}
#teacherApp .t-page-head h2 { font-size: 17px !important; }
}