/* V1.26 Preview final cascade layer. Loaded after the legacy stylesheet. */ :root{--tp-navy:#082D57;--tp-navy-2:#104A82;--tp-blue:#175FA7;--tp-gold:#F4B928;--tp-bg:#F5F7FB;--tp-ink:#10233F;--tp-muted:#66758A;--tp-line:#DFE6EF;--tp-success:#16805D;--tp-shadow:0 6px 22px rgba(8,45,87,.055)} body{background:var(--tp-bg);color:var(--tp-ink);font-family:"Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif} button,input,select,textarea{font-family:inherit} .page-kicker{display:block;margin-bottom:3px;color:var(--tp-blue);font-size:11px;font-weight:800} .login-product-lockup{display:flex;align-items:center;justify-content:center;gap:12px;direction:ltr;text-align:left} .login-product-lockup>div:last-child{display:grid;gap:1px}.login-product-lockup strong{font-size:20px;line-height:1.2}.login-product-lockup small{font-size:11px;opacity:.72} .login-kicker{display:block;margin:22px 0 7px;text-align:center;color:var(--tp-gold);font-size:12px;font-weight:800} #loginView .mini-logo{position:relative;overflow:hidden;isolation:isolate}#loginView .mini-logo::before{content:"";position:absolute;inset:7px;border:1px solid currentColor;border-radius:13px;opacity:.45}#loginView .mini-logo span{position:relative;z-index:1} @media(max-width:900px){ #loginView.login-shell:not(.hidden){padding:32px 22px max(28px,env(safe-area-inset-bottom))!important;background:radial-gradient(circle at 84% 10%,rgba(244,185,40,.16),transparent 25%),radial-gradient(circle at 12% 92%,rgba(23,95,167,.3),transparent 34%),linear-gradient(158deg,#0C4076 0%,var(--tp-navy) 54%,#061E3B 100%)!important} #loginView .login-card{width:min(100%,390px)!important;max-width:390px!important} #loginView .login-product-lockup .mini-logo{display:grid!important;width:58px!important;height:66px!important;margin:0!important;border:1.5px solid rgba(244,185,40,.9)!important;border-radius:17px 17px 21px 21px!important;background:rgba(255,255,255,.045)!important;color:var(--tp-gold)!important;font-size:18px!important} #loginView .login-product-lockup strong{color:#fff;font-size:21px}#loginView .login-product-lockup small{color:rgba(255,255,255,.72);font-size:11px} #loginView .login-card h2{font-size:25px!important}#loginView #loginIntro{font-size:13px!important;line-height:1.75!important;margin-bottom:20px!important}#loginView label{font-size:13px!important}#loginView input{height:52px!important;border-radius:14px!important} #loginView #loginBtn{height:52px!important;border-radius:14px!important;background:#fff!important;color:var(--tp-navy)!important}#loginView #loginBtn::after{content:" ←";color:var(--tp-gold)} #loginView .teacher-signup-entry{border-color:rgba(244,185,40,.42)!important;color:#FFE39A!important} body[data-role="teacher"] .app-header{height:60px!important;min-height:60px!important;padding:0 18px!important;background:linear-gradient(100deg,var(--tp-navy),var(--tp-navy-2))!important} body[data-role="teacher"] #headerScreenTitle{font-size:17px!important}body[data-role="teacher"] .content{padding:20px 18px calc(78px + env(safe-area-inset-bottom))!important} body[data-role="teacher"] .section-head{margin-bottom:16px;align-items:flex-end}body[data-role="teacher"] .section-head h2{margin:0;color:var(--tp-ink);font-size:26px;line-height:1.35;font-weight:850}body[data-role="teacher"] .section-head .muted{margin:4px 0 0;font-size:12px;line-height:1.6} body[data-role="teacher"] .teacher-mobile-nav:not(.hidden){height:calc(62px + env(safe-area-inset-bottom))!important;padding:3px 10px calc(3px + env(safe-area-inset-bottom))!important;background:rgba(8,45,87,.98)!important} body[data-role="teacher"] .teacher-mobile-nav .mobile-nav-item{height:54px!important;min-height:54px!important;max-height:54px!important;border-radius:12px!important;font-size:10px!important} body[data-role="teacher"] .teacher-mobile-nav .mobile-nav-item.active,body[data-role="teacher"] .teacher-mobile-nav .mobile-more-trigger.active{background:rgba(255,255,255,.075)!important;color:var(--tp-gold)!important} #homeSection #statsGrid{display:none!important}#homeSection #homePanels{display:block!important;margin:0!important}#homeSection .teacher-command-center{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}#homeSection .smart-dashboard{display:grid;gap:14px} #homeSection .smart-dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0 2px;background:transparent;border:0;box-shadow:none}#homeSection .smart-dashboard-hero .eyebrow,#homeSection .smart-dashboard-hero p{display:none}#homeSection .smart-dashboard-hero h3{margin:0;color:var(--tp-muted);font-size:12px;font-weight:650} #homeSection .smart-next-lesson{position:relative;order:-2;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:18px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--tp-navy),#12528F);color:#fff;box-shadow:0 12px 34px rgba(8,45,87,.10);overflow:hidden} #homeSection .smart-next-icon{grid-row:1/3;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--tp-gold);display:grid;place-items:center}#homeSection .smart-next-copy h4{margin:3px 0;color:#fff;font-size:18px}#homeSection .smart-next-copy p{display:block;margin:0;color:rgba(255,255,255,.72);font-size:11px}#homeSection .smart-next-copy span{color:rgba(255,255,255,.7);font-size:11px}#homeSection .smart-next-copy b{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:99px;background:rgba(244,185,40,.16);color:#FFE18A;font-size:10px} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{grid-column:1/-1;width:100%;min-height:44px;margin:12px 0 0;border-radius:12px;background:var(--tp-gold);color:var(--tp-navy);box-shadow:none} #homeSection .dashboard-quick-actions{order:-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}#homeSection .dashboard-quick-actions button{min-width:0;min-height:76px;padding:10px 4px;border:1px solid var(--tp-line);border-radius:15px;background:#fff;color:var(--tp-ink);box-shadow:none}#homeSection .dashboard-quick-actions button span{width:31px;height:31px;margin:auto auto 6px;border-radius:10px;background:#EDF4FC;color:var(--tp-blue);display:grid;place-items:center;font-size:16px}#homeSection .dashboard-quick-actions button b{font-size:9.5px;line-height:1.35;white-space:normal} #homeSection .smart-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}#homeSection .smart-kpis>div{min-width:0;padding:11px 6px;border:1px solid var(--tp-line);border-radius:14px;background:#fff;text-align:center}#homeSection .smart-kpis span{font-size:8.5px;color:var(--tp-muted)}#homeSection .smart-kpis b{display:block;margin-top:5px;color:var(--tp-navy);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#homeSection .dashboard-secondary-grid{display:none!important} #studentsSection #addStudentBtn{width:auto!important;min-width:118px;min-height:42px;margin:0!important;padding:10px 13px;border-radius:13px;background:var(--tp-navy);box-shadow:none;font-size:11px;white-space:nowrap}#studentsSection #addStudentBtn span{color:var(--tp-gold);font-size:15px} #studentsSection .students-list-panel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}#studentsSection .student-search-wrap{position:relative;margin:0 0 12px!important}#studentsSection .student-search-wrap .search-icon{position:absolute;right:15px;top:50%;width:16px;height:16px;border:2px solid #8290A3;border-radius:50%;transform:translateY(-60%);z-index:2}#studentsSection .student-search-wrap .search-icon::after{content:"";position:absolute;width:7px;height:2px;background:#8290A3;left:-5px;bottom:-2px;transform:rotate(45deg)} #studentsSection #studentSearch{max-width:none;width:100%;height:48px;margin:0;padding:10px 44px 10px 14px;border:1px solid var(--tp-line);border-radius:15px;background:#fff;box-shadow:none;font-size:14px} #studentsSection .students-data-table tbody{gap:10px}#studentsSection .students-data-table tr.student-row-card{grid-template-columns:minmax(0,1fr) auto!important;padding:14px!important;border-color:var(--tp-line)!important;border-radius:18px!important;box-shadow:var(--tp-shadow)!important}#studentsSection .students-data-table tr.student-row-card td[data-label="الاسم"]{display:grid!important;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px} #studentsSection .student-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#EAF2FC,#F7FAFE);border:1px solid #DCE7F4;color:var(--tp-blue);display:grid;place-items:center;font-size:14px;font-weight:850}#studentsSection .student-identity-copy{min-width:0;display:block}#studentsSection .student-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tp-ink);font-size:14px}#studentsSection .student-inline-meta{margin-top:2px;font-size:10px;color:var(--tp-muted)} #studentsSection .student-primary-actions{display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;direction:ltr}#studentsSection .student-primary-actions .action-btn{height:40px!important;min-height:40px!important;border-radius:12px!important;font-size:10px!important;direction:rtl}#studentsSection .student-primary-actions .whatsapp-action{grid-column:3;background:#ECF8F3!important;border-color:#BFE4D5!important;color:var(--tp-success)!important}#studentsSection .student-primary-actions .qr-action{grid-column:2;background:#EDF5FC!important;border-color:#CFE1F2!important;color:var(--tp-navy)!important}#studentsSection .student-primary-actions .row-more-menu{grid-column:1;grid-row:1}#studentsSection .row-more-trigger{width:42px!important;height:40px!important;border-radius:12px!important;border:1px solid var(--tp-line)!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important} } /* V1.41.25 — two-stage lesson workflow */ #lessonSection .lesson-workflow-status{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 11px!important;padding:10px 12px!important;border:1px solid #D9E5F0!important;border-radius:14px!important;background:#F7FAFD!important;color:var(--tp-navy)!important} #lessonSection .lesson-workflow-status b{font-size:11px!important}#lessonSection .lesson-workflow-status span{font-size:9px!important;color:#68778A!important} #lessonSection .lesson-workflow-status.attendance_saved{border-color:#E9CF76!important;background:#FFFAEB!important}#lessonSection .lesson-workflow-status.attendance_saved b{color:#8B6911!important} #lessonSection .lesson-workflow-status.completed{border-color:#BFE3D4!important;background:#F0FAF6!important}#lessonSection .lesson-workflow-status.completed b{color:#167153!important} #lessonSection .lesson-save-bar{display:flex!important;align-items:center!important;gap:9px!important} #lessonSection .lesson-save-actions{display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr)!important;gap:8px!important;flex:1!important} #lessonSection .lesson-save-actions button{width:100%!important;min-height:42px!important;margin:0!important;padding:8px 9px!important;border-radius:11px!important;font-size:9px!important;line-height:1.45!important} #lessonSection .lesson-save-actions .secondary-btn{background:#F3F7FB!important;border:1px solid #CAD8E6!important;color:var(--tp-navy)!important} @media(max-width:420px){#lessonSection .lesson-save-bar{align-items:stretch!important;flex-direction:column!important}#lessonSection .lesson-save-bar>div:first-child{display:none!important}#lessonSection .lesson-save-actions{width:100%!important}} /* V1.42.0 — Excel student import */ #studentsSection .students-page-head{align-items:flex-start!important;gap:14px!important} #studentsSection .student-head-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important} #studentsSection .student-head-actions button{margin:0!important;min-height:44px!important;white-space:nowrap!important} #studentsSection #importStudentsBtn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:154px!important;padding:9px 14px!important;border:1px solid #C9D9E8!important;border-radius:13px!important;background:#fff!important;color:var(--tp-navy)!important;box-shadow:0 4px 12px rgba(8,45,87,.035)!important;font-size:11px!important;font-weight:800!important;line-height:1!important;direction:rtl!important} #studentsSection #importStudentsBtn:hover{background:#F5F9FD!important;border-color:#AFC8DE!important;box-shadow:0 7px 16px rgba(8,45,87,.065)!important} #studentsSection #importStudentsBtn .import-students-icon{display:grid!important;place-items:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;border-radius:9px!important;background:#EAF3FB!important;color:var(--tp-blue)!important} #studentsSection #importStudentsBtn .import-students-icon svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important} #studentsSection #importStudentsBtn .import-students-label{display:inline-flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important} #studentsSection #importStudentsBtn .import-students-label b{font-family:inherit!important;font-weight:850!important;letter-spacing:.01em!important} body[data-role="assistant"] #studentsSection #importStudentsBtn{display:none!important} .student-import-card{width:min(760px,calc(100vw - 26px))!important;max-height:min(88dvh,820px)!important;overflow:auto!important;overscroll-behavior:contain!important;padding:22px!important} .student-import-intro{padding:15px 16px;margin-bottom:12px;border:1px solid #dbe6ef;border-radius:16px;background:linear-gradient(135deg,#f8fbfe,#fff)} .student-import-intro b{display:block;color:var(--tp-navy);font-size:15px;margin-bottom:3px}.student-import-intro p{margin:0;color:#718096;font-size:12px;line-height:1.8} .student-import-template-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.student-import-template-row .secondary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;text-decoration:none}.student-import-template-row small{color:#7b8794} .student-import-dropzone{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:132px;padding:18px!important;border:1.5px dashed #9fb7cc!important;border-radius:18px!important;background:#f7fafe!important;text-align:center;cursor:pointer}.student-import-dropzone:hover{border-color:#d3a91e!important;background:#fffdf5!important}.student-import-drop-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e7f1fa;color:#0b5f93;font-size:24px;font-weight:800}.student-import-dropzone b{color:var(--tp-navy)}.student-import-dropzone small{color:#738295;line-height:1.7} .student-import-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}.student-import-summary>div{min-width:0;padding:11px 9px;border:1px solid #dce6ef;border-radius:14px;background:#f8fafc;text-align:center}.student-import-summary span{display:block;color:#718096;font-size:9px;line-height:1.5}.student-import-summary b{display:block;margin-top:3px;color:var(--tp-navy);font-size:17px}.student-import-summary .ok{border-color:#bde4d5;background:#f2fbf7}.student-import-summary .ok b{color:#168260}.student-import-summary .bad{border-color:#f1c9cf;background:#fff7f8}.student-import-summary .bad b{color:#bd3f50} .student-import-preview-wrap{margin-top:12px}.student-import-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.student-import-preview-head b{color:var(--tp-navy)}.student-import-preview-head small{color:#7b8794}.student-import-table-wrap{max-height:270px!important;overflow:auto!important;border:1px solid #dce6ef;border-radius:15px}.student-import-table{width:100%;min-width:700px;border-collapse:collapse;background:#fff}.student-import-table th{position:sticky;top:0;z-index:1;padding:10px 9px;background:#edf4fa;color:#53677a;font-size:9px;text-align:right}.student-import-table td{padding:10px 9px;border-top:1px solid #e8eef4;color:#30475d;font-size:10px;vertical-align:top}.student-import-table td b,.student-import-table td small{display:block}.student-import-table td small{color:#8a97a5;margin-top:2px}.student-import-table tr.is-invalid td{background:#fffafb}.student-import-table tr.is-success td{background:#f7fcfa}.student-import-table tr.is-failed td{background:#fff8f8}.student-import-status{display:inline-flex;padding:4px 7px;border-radius:999px;background:#e8f6f0;color:#157b5b;font-size:8px;font-weight:800}.is-invalid .student-import-status,.is-failed .student-import-status{background:#fdecef;color:#b53c4c}.is-success .student-import-status{background:#dff5eb;color:#117552} .student-import-progress-wrap{padding:13px 14px;margin-top:14px;border:1px solid #d9e5ee;border-radius:15px;background:#f8fbfd}.student-import-progress-text{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tp-navy);font-size:11px}.student-import-progress-track{height:8px;margin:9px 0;border-radius:99px;background:#dfe8ef;overflow:hidden}.student-import-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0b4b82,#e8b92d);transition:width .2s ease}.student-import-progress-wrap small{color:#7b8794} .student-import-results{display:flex;align-items:center;gap:11px;padding:13px 14px;margin-top:13px;border:1px solid #c9e6da;border-radius:15px;background:#f2faf7}.student-import-result-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:11px;background:#daf1e7;color:#13785a;font-weight:900}.student-import-results b{color:var(--tp-navy)}.student-import-results p{margin:3px 0 0;color:#69798a;font-size:10px;line-height:1.65}.student-import-actions{position:sticky;bottom:-22px;z-index:2;margin:15px -22px -22px!important;padding:13px 22px calc(13px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96);border-top:1px solid #e2e9ef;backdrop-filter:blur(10px)}.student-import-actions button{min-height:44px!important} @media(max-width:620px){#studentsSection .student-head-actions{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}#studentsSection .student-head-actions button{width:100%!important;padding-inline:8px!important;font-size:10px!important}.student-import-card{padding:17px!important}.student-import-template-row{align-items:stretch;flex-direction:column}.student-import-template-row .secondary-btn{width:100%}.student-import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.student-import-preview-head{align-items:flex-start;flex-direction:column}.student-import-actions{bottom:-17px;margin:14px -17px -17px!important;padding-inline:17px!important;display:grid!important;grid-template-columns:1fr!important}.student-import-actions button{width:100%!important}} /* v1.34.0 final mobile cascade — unified teacher KPI cards */ @media(max-width:900px){ body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card{ position:relative!important;isolation:isolate!important;overflow:hidden!important;min-width:0!important; border:1px solid #DCE7F1!important;border-radius:16px!important; background:linear-gradient(145deg,#fff 0%,#F8FBFE 100%)!important; box-shadow:0 6px 18px rgba(11,45,87,.045)!important } body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::before, body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::after{content:none!important;display:none!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span{ display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:#65758A!important;font-weight:750!important } body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span::before{ content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:#2F78B7;box-shadow:0 0 0 3px #EAF3FA } body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card b{color:#0B3564!important;font-weight:850!important;letter-spacing:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2), body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4), body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4){border-color:#CFE9DE!important;background:linear-gradient(145deg,#fff,#F3FBF7)!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2) span::before, body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4) span::before, body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4) span::before{background:#16805D!important;box-shadow:0 0 0 3px #E5F6EF!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1){border-color:#F0D1D5!important;background:linear-gradient(145deg,#fff,#FFF7F8)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1) span::before{background:#C64752!important;box-shadow:0 0 0 3px #FBEAEC!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2){border-color:#F0DEC0!important;background:linear-gradient(145deg,#fff,#FFFAF1)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2) span::before{background:#B77816!important;box-shadow:0 0 0 3px #FFF1D8!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2){border-color:#E9D694!important;background:linear-gradient(145deg,#fff,#FFFBEF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2) span::before{background:#D9A51E!important;box-shadow:0 0 0 3px #FFF3CF!important} } @media(max-width:380px){body[data-role="teacher"] .content{padding-inline:14px!important}body[data-role="teacher"] .section-head h2{font-size:23px}#homeSection .dashboard-quick-actions{gap:6px}#studentsSection #addStudentBtn{min-width:106px;padding-inline:10px}} /* V1.26.1 — real-device stabilization. */ @media(max-width:900px){ #loginView.login-shell:not(.hidden){align-items:flex-start!important;padding-top:max(24px,env(safe-area-inset-top))!important;padding-bottom:max(22px,env(safe-area-inset-bottom))!important;overflow:auto!important} #loginView .login-product-lockup{gap:10px!important} #loginView .login-product-lockup .mini-logo{width:52px!important;height:59px!important;border-radius:15px 15px 18px 18px!important} #loginView .login-product-lockup strong{font-size:19px!important}#loginView .login-product-lockup small{font-size:10px!important} #loginView .login-kicker{margin:15px 0 4px!important;font-size:11px!important} #loginView .login-card h2{margin-bottom:3px!important;font-size:23px!important} #loginView #loginIntro{margin-bottom:13px!important;font-size:12px!important;line-height:1.55!important} #loginView label{margin-top:10px!important;font-size:12px!important} #loginView input{height:48px!important;min-height:48px!important;margin-top:5px!important;padding-block:9px!important;font-size:15px!important} #loginView #loginBtn{height:48px!important;margin-top:15px!important} #loginView #installBtn{min-height:42px!important;margin-top:8px!important} #loginView .forgot-password-entry{margin-top:10px!important}#loginView .teacher-signup-entry{margin-top:10px!important;padding:10px!important} body[data-role="teacher"] .content{padding-top:16px!important} #homeSection .home-page-head{align-items:center!important;margin-bottom:12px!important} #homeSection .home-page-head h2{margin:0!important;font-size:27px!important;line-height:1.25!important;letter-spacing:-.02em!important} #homeSection .home-page-head .muted{font-size:11px!important;max-width:245px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .home-page-head .icon-action-btn{position:relative!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important;line-height:1!important;box-shadow:none!important} #homeSection .home-page-head .icon-action-btn::before,#homeSection .home-page-head .icon-action-btn::after{display:none!important;content:none!important} #homeSection .smart-dashboard{gap:12px!important} #homeSection .smart-next-lesson{grid-template-columns:minmax(0,1fr) auto!important;gap:4px 10px!important;padding:16px!important;border-radius:18px!important} #homeSection .smart-next-lesson::after{width:110px!important;height:110px!important;inset-inline-start:-54px!important;bottom:-62px!important;border-width:18px!important;opacity:.55!important;pointer-events:none} #homeSection .smart-next-icon{display:none!important} #homeSection .smart-next-copy{grid-column:1/-1!important;min-width:0!important} #homeSection .smart-next-copy h4{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-next-copy b{max-width:100%;white-space:nowrap} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{min-height:42px!important;margin-top:9px!important} #homeSection .dashboard-quick-actions{gap:7px!important} #homeSection .dashboard-quick-actions button{min-height:70px!important;padding:8px 3px!important;border-radius:14px!important} #homeSection .dashboard-quick-actions button span{width:29px!important;height:29px!important;margin-bottom:4px!important} #homeSection .dashboard-quick-actions button b{font-size:9px!important} #homeSection .smart-dashboard-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:0!important} #homeSection .smart-dashboard-hero h3{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-dashboard-hero .secondary-btn{width:auto!important;min-width:92px!important;min-height:36px!important;margin:0!important;padding:7px 10px!important} #homeSection .smart-kpis{gap:7px!important} #homeSection .smart-kpis>div{min-width:0!important;padding:10px 4px!important;border-radius:13px!important} #homeSection .smart-kpis span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px!important} #homeSection .smart-kpis b{font-size:14px!important;direction:rtl;text-overflow:clip!important} #homeSection .smart-kpis>div:last-child b{font-size:10.5px!important;white-space:normal!important;line-height:1.25!important;max-height:27px;overflow:hidden} #homeSection .smart-alert-dashboard-card{padding:15px!important;border-radius:18px!important} #homeSection .smart-alert-dashboard-card h4{font-size:16px!important} #homeSection .smart-today-mini{padding:14px!important;border-radius:18px!important;overflow:hidden!important} #homeSection .smart-today-mini .smart-section-title{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:9px!important} #homeSection .smart-today-mini .smart-section-title b{font-size:18px!important;color:var(--tp-ink)!important} #homeSection .smart-today-mini .smart-section-title span{font-size:10px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-list{display:grid!important;gap:8px!important} #homeSection .smart-today-mini .schedule-session-card,#homeSection .smart-today-mini .schedule-session-card.compact{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:3px 10px!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #homeSection .smart-today-mini .schedule-session-time{grid-column:1!important;grid-row:1!important;padding:0!important;text-align:right!important} #homeSection .smart-today-mini .schedule-session-time b{font-size:13px!important;color:var(--tp-navy)!important}#homeSection .smart-today-mini .schedule-session-time span{font-size:9px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-session-main{grid-column:2!important;grid-row:1!important;min-width:0!important} #homeSection .smart-today-mini .schedule-session-title{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important} #homeSection .smart-today-mini .schedule-session-title h4{margin:0!important;min-width:0!important;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-today-mini .schedule-session-status{flex:0 0 auto!important;padding:4px 6px!important;font-size:7.5px!important} #homeSection .smart-today-mini .schedule-session-main p{margin:3px 0 0!important;font-size:9px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-lesson-btn{grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-height:36px!important;margin-top:7px!important;border:1px solid #EEDB9B!important;border-radius:11px!important;background:#FFF9E8!important;color:var(--tp-navy)!important;font-size:10px!important;font-weight:800!important} #studentsSection .students-page-head h2{font-size:26px!important} #studentsSection .student-avatar{width:40px!important;height:40px!important;border-radius:50%!important} #studentsSection .students-data-table tr.student-row-card{padding:13px!important} #studentsSection .students-data-table tr.student-row-card td[data-label="الاسم"]{grid-template-columns:40px minmax(0,1fr)!important} #studentsSection .students-data-table tr.student-row-card td[data-label="ولي الأمر"]{margin-top:8px!important;padding-top:8px!important} #studentsSection .students-data-table tr.student-row-card td[data-label="الإجراءات"]{margin-top:9px!important} #studentsSection .student-primary-actions{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:40px!important;align-items:stretch!important} #studentsSection .student-primary-actions .row-more-menu{grid-column:1!important;grid-row:1!important} #studentsSection .student-primary-actions .qr-action{grid-column:2!important;grid-row:1!important;width:100%!important;margin:0!important} #studentsSection .student-primary-actions .whatsapp-action{grid-column:3!important;grid-row:1!important;width:100%!important;margin:0!important} body[data-role="teacher"] .teacher-mobile-nav:not(.hidden){height:calc(58px + env(safe-area-inset-bottom))!important;padding-top:2px!important} body[data-role="teacher"] .teacher-mobile-nav .mobile-nav-item{height:50px!important;min-height:50px!important;max-height:50px!important;font-size:9px!important;gap:2px!important} body[data-role="teacher"] .teacher-mobile-nav .mobile-nav-icon,body[data-role="teacher"] .teacher-mobile-nav .mobile-nav-icon svg{width:20px!important;height:20px!important} } @media(max-width:370px){ #homeSection .home-page-head h2{font-size:24px!important} #homeSection .dashboard-quick-actions button b{font-size:8.4px!important} #homeSection .smart-kpis b{font-size:13px!important} #studentsSection #addStudentBtn{min-width:100px!important;font-size:10px!important} } /* ========================= V1.41.20 — PAGE HELP + SAFE TOUR INTERACTION ========================= */ .product-tour-spotlight{pointer-events:auto!important} .page-help-btn{display:none;width:38px;height:38px;margin:0;padding:0;border:1px solid rgba(255,255,255,.20);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font:900 17px/1 system-ui;box-shadow:none} body[data-role="teacher"] .page-help-btn:not(.hidden){display:grid;place-items:center} .page-help-layer{position:fixed;inset:0;z-index:190000;direction:rtl} .page-help-layer.hidden{display:none!important} .page-help-backdrop{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:rgba(4,17,39,.52);backdrop-filter:blur(1.5px)} .page-help-sheet{position:absolute;top:50%;left:50%;width:min(540px,calc(100% - 28px));max-height:min(720px,calc(100svh - 28px));padding:20px;border:1px solid #DCE5EF;border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(3,20,42,.32);overflow:auto;transform:translate(-50%,-50%);text-align:right} .page-help-handle{display:none;width:52px;height:5px;margin:0 auto 14px;border-radius:99px;background:#DCE4ED} .page-help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #E8EDF3} .page-help-head span{color:#9B7417;font-size:10px;font-weight:850}.page-help-head h3{margin:3px 0 0;color:#0B3564;font-size:24px;line-height:1.35} .page-help-head button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid #DCE4ED;border-radius:12px;background:#F5F8FB;color:#68788D;font-size:24px;line-height:1} .page-help-purpose,.page-help-steps,.page-help-result{margin-top:14px;padding:13px 14px;border:1px solid #E1E8F0;border-radius:15px;background:#F9FBFD} .page-help-purpose b,.page-help-steps b,.page-help-result b{display:block;margin-bottom:6px;color:#0B3B6C;font-size:11px} .page-help-purpose p,.page-help-result p{margin:0;color:#64748A;font-size:11px;line-height:1.8} .page-help-steps ol{display:grid;gap:8px;margin:0;padding:0 22px 0 0;counter-reset:pagehelp;list-style:none} .page-help-steps li{position:relative;color:#516176;font-size:11px;line-height:1.75;counter-increment:pagehelp} .page-help-steps li::before{content:counter(pagehelp);position:absolute;right:-24px;top:2px;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#E7F1FA;color:#0C5388;font-size:9px;font-weight:900} .page-help-result{border-color:#EAD999;background:#FFFBEE}.page-help-result b{color:#8A6713} .page-help-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.page-help-actions button{min-height:43px;margin:0;border-radius:12px;font-size:10px} body.page-help-open{overflow:hidden} @media(max-width:900px){ body[data-role="teacher"] .page-help-btn:not(.hidden){position:absolute!important;inset-inline-end:60px!important;top:50%!important;z-index:4!important;width:34px!important;height:34px!important;border-radius:11px!important;transform:translateY(-50%)!important} .page-help-sheet{top:auto;bottom:0;left:0;width:100%;max-height:86svh;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:24px 24px 0 0;transform:none} .page-help-handle{display:block}.page-help-head h3{font-size:20px}.page-help-head button{flex-basis:38px;width:38px;height:38px} .page-help-purpose,.page-help-steps,.page-help-result{margin-top:11px;padding:11px 12px}.page-help-actions{position:sticky;bottom:0;padding-top:10px;background:#fff} } @media(max-width:360px){body[data-role="teacher"] .page-help-btn:not(.hidden){inset-inline-end:54px!important;width:32px!important;height:32px!important}} /* ========================================================== V1.32.2 — TABEA ONE MOBILE HEADER MARK A compact brand introduction and a focused, accessible form card. ========================================================== */ @media(max-width:900px){ body:has(#loginView:not(.hidden)){ min-height:100dvh!important; background:#061f3d!important; } #loginView.login-shell:not(.hidden){ display:flex!important; min-height:100dvh!important; height:auto!important; padding:max(28px,env(safe-area-inset-top)) 20px max(30px,env(safe-area-inset-bottom))!important; align-items:center!important; justify-content:center!important; background: radial-gradient(circle at 88% 4%,rgba(39,111,165,.28) 0,transparent 28%), radial-gradient(circle at 8% 94%,rgba(242,184,36,.08) 0,transparent 27%), linear-gradient(155deg,#0d477e 0%,#082f59 48%,#061f3d 100%)!important; overflow-x:hidden!important; } #loginView.login-shell:not(.hidden)::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent 78%); } #loginView .login-brand{display:none!important} #loginView .login-card{ position:relative!important; width:min(100%,400px)!important; max-width:400px!important; margin:0 auto!important; padding:24px 20px 20px!important; border:1px solid rgba(255,255,255,.76)!important; border-radius:28px!important; background:rgba(255,255,255,.975)!important; color:#17253a!important; box-shadow:0 24px 60px rgba(1,18,38,.32),0 2px 0 rgba(255,255,255,.55) inset!important; backdrop-filter:blur(16px)!important; overflow:hidden!important; } #loginView .login-card::before{ content:""; position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg,#f2b824,#ffd76b 45%,#165c96); } #loginView .login-product-lockup{ display:flex!important; align-items:center!important; justify-content:center!important; direction:ltr!important; gap:12px!important; margin:0 0 16px!important; padding:0!important; text-align:left!important; } #loginView .mini-logo{ display:grid!important; place-items:center!important; flex:0 0 auto!important; width:58px!important; height:58px!important; margin:0!important; border:2px solid #e4b32d!important; border-radius:18px!important; background:linear-gradient(145deg,#0d477e,#072b53)!important; color:#f6c434!important; box-shadow:0 8px 20px rgba(8,45,87,.18)!important; font-size:18px!important; font-weight:900!important; } #loginView .login-product-lockup strong{ display:block!important; color:#102945!important; font-size:19px!important; font-weight:900!important; line-height:1.25!important; } #loginView .login-product-lockup small{ display:block!important; margin-top:3px!important; color:#718096!important; font-size:11px!important; } #loginView .login-kicker{ display:table!important; margin:0 auto 8px!important; padding:5px 10px!important; border-radius:999px!important; background:#fff5d7!important; color:#9a6f00!important; font-size:9.5px!important; font-weight:850!important; } #loginView .login-card h2{ margin:0!important; color:#102945!important; font-size:24px!important; font-weight:900!important; line-height:1.45!important; text-align:center!important; } #loginView #loginIntro{ max-width:310px!important; margin:4px auto 16px!important; color:#718096!important; font-size:11px!important; line-height:1.75!important; text-align:center!important; } #loginView label{ display:block!important; margin:11px 0 0!important; color:#34465c!important; font-size:10.5px!important; font-weight:800!important; text-align:right!important; } #loginView input{ width:100%!important; height:52px!important; min-height:52px!important; margin-top:6px!important; padding:11px 14px!important; border:1px solid #dce5ef!important; border-radius:14px!important; outline:0!important; background:#f7f9fc!important; color:#17253a!important; box-shadow:0 1px 0 rgba(16,41,69,.02) inset!important; font-size:13px!important; font-weight:700!important; text-align:right!important; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important; } #loginView input:focus{ border-color:#1d659f!important; background:#fff!important; box-shadow:0 0 0 4px rgba(29,101,159,.11)!important; } #loginView input::placeholder{color:#9ca8b7!important;font-weight:600!important;opacity:1!important} #loginView .password-wrap{position:relative!important} #loginView .password-wrap input{padding-left:52px!important} #loginView .password-wrap .icon-btn{ position:absolute!important; left:6px!important; top:12px!important; display:grid!important; place-items:center!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; margin:0!important; padding:0!important; border:0!important; border-radius:11px!important; background:#edf3f9!important; color:#52677f!important; box-shadow:none!important; font-size:15px!important; } #loginView #loginBtn{ position:relative!important; width:100%!important; height:52px!important; min-height:52px!important; margin:18px 0 0!important; border:0!important; border-radius:14px!important; background:linear-gradient(135deg,#0d477e,#082d57)!important; color:#fff!important; box-shadow:0 10px 22px rgba(8,45,87,.2)!important; font-size:13px!important; font-weight:900!important; } #loginView #loginBtn::after{ content:"←"; display:inline-block; margin-right:8px; color:#f5c438; font-size:14px; } #loginView #installBtn{ width:100%!important; min-height:44px!important; margin-top:9px!important; border:1px solid #dce5ef!important; border-radius:13px!important; background:#f7f9fc!important; color:#173a61!important; box-shadow:none!important; font-size:11px!important; } #loginView .forgot-password-entry{ display:block!important; width:auto!important; min-height:0!important; margin:13px auto 0!important; padding:5px!important; border:0!important; background:transparent!important; color:#315778!important; font-size:10.5px!important; font-weight:800!important; } #loginView .teacher-signup-entry{ position:relative!important; width:100%!important; min-height:46px!important; margin:13px 0 0!important; padding:11px 14px!important; border:1px solid #ead58e!important; border-radius:13px!important; background:#fffaf0!important; color:#755800!important; box-shadow:none!important; font-size:11px!important; font-weight:900!important; } #loginView .teacher-signup-entry::before{ content:"ليس لديك حساب؟"; margin-left:8px; color:#7a8797; font-weight:600; } #loginView #loginMessage{margin-top:12px!important;border-radius:12px!important;font-size:10.5px!important} #loginView #loginNote{display:none!important} body:has(#loginView:not(.hidden)) .teacher-mobile-nav, body:has(#loginView:not(.hidden)) .mobile-more-sheet, body:has(#loginView:not(.hidden)) .mobile-sheet-backdrop{display:none!important} } @media(max-width:380px){ #loginView.login-shell:not(.hidden){padding-inline:14px!important} #loginView .login-card{padding:20px 16px 17px!important;border-radius:24px!important} #loginView .login-product-lockup{margin-bottom:12px!important} #loginView .mini-logo{width:52px!important;height:52px!important;border-radius:16px!important} #loginView .login-card h2{font-size:22px!important} #loginView #loginIntro{margin-bottom:12px!important} } /* ========================================================== V1.31.0 PREVIEW — TEACHER PROFILE, HOME HERO & PARENT CARD ========================================================== */ .teacher-profile-media-editor{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding:18px;border:1px solid var(--tp-border,#dfe6ef);border-radius:20px;background:#f8fafd} .teacher-photo-preview{width:112px;height:112px;min-width:112px;display:grid;place-items:center;overflow:hidden;border:3px solid var(--gold,#e8ad22);border-radius:28px;background:linear-gradient(145deg,#eaf3fd,#fff);color:var(--navy,#0b2f66);font-size:34px;font-weight:900;box-shadow:0 10px 24px rgba(11,47,102,.12)} .teacher-photo-preview img{width:100%;height:100%;object-fit:cover}.teacher-photo-controls{flex:1}.teacher-photo-controls p{margin:5px 0 12px}.teacher-photo-controls>div{display:flex;gap:8px;flex-wrap:wrap} .teacher-home-profile-hero{position:relative;order:-3!important;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:26px 28px;overflow:hidden;border-radius:28px;background:linear-gradient(125deg,#082d66 0%,#0c4b85 74%,#0b3769 100%);color:#fff;box-shadow:0 18px 38px rgba(11,47,102,.2)} .teacher-home-profile-hero::after{content:"";position:absolute;inset:auto -70px -100px auto;width:260px;height:260px;border:44px solid rgba(232,173,34,.13);border-radius:50%} .teacher-home-photo{position:relative;z-index:1;width:124px;height:124px;display:grid;place-items:center;overflow:hidden;border:4px solid var(--gold,#e8ad22);border-radius:34px;background:#eef5fc;color:var(--navy,#0b2f66);font-size:38px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.2)} .teacher-home-photo img{width:100%;height:100%;object-fit:cover}.teacher-home-profile-copy{position:relative;z-index:1}.teacher-home-profile-copy .eyebrow{color:#ffd46b}.teacher-home-profile-copy h2{margin:4px 0 2px;color:#fff;font-size:30px}.teacher-home-profile-copy>b{color:#ffd46b}.teacher-home-profile-copy p{max-width:590px;margin:8px 0 0;color:#dbe7f5;line-height:1.8} .teacher-home-profile-contact{position:relative;z-index:1;display:grid;gap:10px;min-width:205px;padding:13px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.08)} .teacher-home-phone-block{display:flex;align-items:center;gap:10px;direction:ltr;text-align:left}.teacher-home-phone-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:12px;background:rgba(255,208,76,.16);color:#ffd04c!important;font-size:19px!important}.teacher-home-phone-block>div{display:grid;min-width:0}.teacher-home-phone-block small{color:#bdd0e6;font-size:10px}.teacher-home-phone-block a{color:#fff;text-decoration:none;font-family:Arial,Tahoma,sans-serif;font-size:17px;font-weight:850;letter-spacing:.5px;white-space:nowrap}.teacher-home-profile-contact .secondary-btn{width:100%;min-height:38px;margin:0;background:#fff;color:var(--navy,#0b2f66)} .paper-parent-card{position:relative;display:grid!important;grid-template-columns:29% 47% 24%;grid-template-rows:1fr auto;min-height:520px;overflow:hidden;border:1px solid #d8e0eb!important;border-radius:26px!important;background:#fff!important;box-shadow:0 16px 40px rgba(10,45,90,.11)!important} .paper-card-teacher{grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 18px;background:linear-gradient(155deg,#082d66,#0c4983);color:#fff;text-align:center;border-inline-end:9px solid var(--gold,#e8ad22)} .paper-card-teacher-photo{width:132px;height:132px;display:grid;place-items:center;overflow:hidden;border:5px solid var(--gold,#e8ad22);border-radius:34px;background:#edf5fd;color:var(--navy,#0b2f66);font-size:42px;font-weight:900}.paper-card-teacher-photo img{width:100%;height:100%;object-fit:cover} .paper-card-teacher strong{margin-top:20px;font-size:22px}.paper-card-teacher>b{color:#ffc83e;font-size:17px}.paper-card-teacher small{margin-top:5px;color:#dbe7f5}.paper-card-teacher i{width:70px;margin:15px;border-top:2px solid #e8ad22}.paper-card-teacher>span{font-weight:800} .paper-card-student{padding:42px 24px 20px;direction:rtl}.paper-card-student-row{display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;min-height:62px;border-bottom:2px solid #efc34e}.paper-card-student-row span{color:#0b2f66;font-weight:800}.paper-card-student-row b{font-size:19px;overflow-wrap:anywhere}.paper-card-student-row .muted-login{color:#687386;font-size:13px}.paper-card-fast-link{margin-top:24px;text-align:center;color:#0b2f66}.paper-card-fast-link span{color:#e8ad22}.paper-card-fast-link b,.paper-card-fast-link code{display:block;margin-top:8px}.paper-card-fast-link code{font-size:11px;overflow-wrap:anywhere} .paper-card-access{padding:42px 20px 20px;text-align:center}.paper-card-qr-frame{padding:13px;border:3px solid var(--gold,#e8ad22);border-radius:20px}.paper-card-qr-frame img{width:170px;height:170px;display:block;margin:auto}.paper-card-qr-frame b{display:block;color:#0b2f66}.paper-card-scan-note{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin-top:15px;padding:14px;border-radius:16px;background:#0b2f66;color:#fff;font-size:12px;line-height:1.65}.paper-card-scan-note span{color:#e8ad22;font-size:25px} .paper-card-footer{grid-column:2/4;display:flex!important;justify-content:space-between;gap:12px;padding:12px 24px!important;border-top:1px solid #dfe5ee!important;color:#687386!important;font-size:11px!important}.paper-card-footer span:last-child{max-width:70%;text-align:end} @media(max-width:760px){ .teacher-profile-media-editor{align-items:flex-start}.teacher-photo-preview{width:92px;height:92px;min-width:92px;border-radius:23px} .teacher-home-profile-hero{grid-template-columns:92px 1fr;gap:15px;padding:20px}.teacher-home-photo{width:92px;height:92px;border-radius:26px}.teacher-home-profile-copy h2{font-size:23px}.teacher-home-profile-copy p{font-size:12px}.teacher-home-profile-contact{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.teacher-home-phone-block{flex:1}.teacher-home-profile-contact .secondary-btn{width:auto;min-width:105px;flex:0 0 auto} .paper-parent-card{display:block!important}.paper-card-teacher{padding:22px;border-inline-end:0;border-bottom:7px solid var(--gold,#e8ad22)}.paper-card-teacher-photo{width:108px;height:108px}.paper-card-student{padding:24px 18px}.paper-card-student-row{grid-template-columns:105px 1fr;min-height:58px}.paper-card-access{padding:10px 18px 24px}.paper-card-qr-frame{max-width:250px;margin:auto}.paper-card-footer{display:flex!important}.paper-card-footer span:last-child{max-width:58%} } @media(max-width:430px){.teacher-profile-media-editor{display:block}.teacher-photo-preview{margin:0 auto 14px}.teacher-photo-controls{text-align:center}.teacher-photo-controls>div{justify-content:center}.paper-card-student-row{grid-template-columns:92px 1fr}.paper-card-student-row b{font-size:16px}} /* ========================================================== V1.28.0 PREVIEW — FOLLOW-UP CENTER / PHASE 3 Finance, Communication, Smart Alerts and Reports. ========================================================== */ @media(max-width:900px){ #studentFinanceSection .section-head,#communicationSection .section-head,#smartAlertsSection .section-head,#reportsSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #studentFinanceSection .section-head h2,#communicationSection .section-head h2,#smartAlertsSection .section-head h2,#reportsSection .section-head h2{margin:0!important;font-size:25px!important;line-height:1.35!important;color:var(--tp-ink)!important} #studentFinanceSection .section-head p,#communicationSection .section-head p,#smartAlertsSection .section-head p,#reportsSection .section-head p{margin:4px 0 0!important;font-size:10px!important;line-height:1.55!important} #studentFinanceSection .section-head .compact,#communicationSection .section-head .compact{width:auto!important;min-width:72px!important;min-height:38px!important;margin:0!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:10px!important} /* Student finance. */ #studentFinanceSection .student-finance-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:11px!important} #studentFinanceSection .student-finance-stats .stat-card{min-width:0!important;padding:11px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important} #studentFinanceSection .student-finance-stats span{font-size:8.5px!important}#studentFinanceSection .student-finance-stats b{margin-top:4px!important;font-size:17px!important;color:var(--tp-navy)!important} #studentFinanceSection .student-finance-toolbar-panel{padding:13px!important;margin-bottom:11px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #studentFinanceSection .student-finance-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #studentFinanceSection .student-finance-toolbar label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #studentFinanceSection .student-finance-search-label{grid-column:1/-1!important} #studentFinanceSection .student-finance-toolbar input,#studentFinanceSection .student-finance-toolbar select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #studentFinanceSection .student-finance-filter-bar{display:flex!important;gap:6px!important;margin:10px -2px 0!important;padding:2px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important} #studentFinanceSection .student-finance-filter-bar::-webkit-scrollbar{display:none} #studentFinanceSection .tenant-filter-chip{flex:0 0 auto!important;min-height:34px!important;padding:7px 10px!important;border:1px solid var(--tp-line)!important;border-radius:99px!important;background:#fff!important;color:var(--tp-muted)!important;font-size:8.5px!important;white-space:nowrap!important} #studentFinanceSection .tenant-filter-chip.active{border-color:var(--tp-navy)!important;background:var(--tp-navy)!important;color:#fff!important} #studentFinanceSection .student-finance-list{display:grid!important;gap:9px!important} #studentFinanceSection .student-finance-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-inline-start-width:4px!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #studentFinanceSection .student-finance-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important} #studentFinanceSection .student-finance-card-head h3{margin:5px 0 2px!important;font-size:15px!important;color:var(--tp-ink)!important}#studentFinanceSection .student-finance-card-head p{font-size:8.5px!important} #studentFinanceSection .student-finance-status{padding:4px 7px!important;font-size:8px!important} #studentFinanceSection .student-finance-remaining{text-align:left!important;flex:none!important}#studentFinanceSection .student-finance-remaining span{font-size:8px!important}#studentFinanceSection .student-finance-remaining b{font-size:17px!important;color:var(--tp-navy)!important} #studentFinanceSection .student-finance-numbers{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:10px 0!important} #studentFinanceSection .student-finance-numbers>div{min-width:0!important;padding:8px 5px!important;border:1px solid #EAF0F6!important;border-radius:11px!important;background:#F8FAFD!important;text-align:center!important} #studentFinanceSection .student-finance-numbers span{font-size:7.5px!important}#studentFinanceSection .student-finance-numbers b{font-size:10.5px!important;white-space:nowrap!important} #studentFinanceSection .student-finance-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} #studentFinanceSection .student-finance-card-actions .inline-btn{width:100%!important;min-height:38px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:8.5px!important} #studentFinanceSection .student-finance-card-actions .primary-btn{background:var(--tp-navy)!important} /* Parent communication. */ #communicationSection>.panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #communicationSection .communication-select-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #communicationSection .communication-select-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #communicationSection .communication-select-grid input,#communicationSection .communication-select-grid select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #communicationSection .communication-student-identity{margin-top:9px!important} #communicationSection .communication-identity-main{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important} #communicationSection .communication-identity-main>div{min-width:0!important;padding:10px!important;border:1px solid #EAF0F6!important;border-radius:12px!important;background:#F8FAFD!important} #communicationSection .communication-identity-main span{font-size:8px!important}#communicationSection .communication-identity-main b{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#communicationSection .communication-identity-main small{font-size:8px!important} #communicationSection .communication-panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:9px!important;margin-bottom:9px!important} #communicationSection .communication-panel-head .eyebrow{font-size:8px!important}#communicationSection .communication-panel-head h3{margin:2px 0 0!important;font-size:18px!important;color:var(--tp-ink)!important} #communicationSection .communication-safe-note{max-width:190px!important;font-size:8px!important;line-height:1.5!important} #communicationSection .communication-template-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} #communicationSection .communication-template{min-height:68px!important;padding:10px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;text-align:right!important;box-shadow:none!important} #communicationSection .communication-template b{margin:0 0 3px!important;font-size:12px!important;color:var(--tp-navy)!important}#communicationSection .communication-template span{font-size:8px!important;line-height:1.4!important} #communicationSection .communication-template.active{border-color:#E1BF4A!important;background:#FFF9E7!important;box-shadow:inset 0 0 0 1px rgba(225,191,74,.22)!important} #communicationSection .communication-message{width:100%!important;min-height:180px!important;margin:0!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#FBFCFE!important;font-size:11px!important;line-height:1.75!important} #communicationSection .communication-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:9px!important} #communicationSection .communication-actions .inline-btn{width:100%!important;min-height:38px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:8.5px!important} #communicationSection .communication-whatsapp-btn{grid-column:1/-1!important;min-height:42px!important;background:#16805D!important;font-size:10px!important} /* Smart alerts. */ #smartAlertsSection #runSmartAlertsBtn{width:auto!important;min-width:92px!important;min-height:40px!important;margin:0!important;padding:9px 12px!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:10px!important} #smartAlertsSection .smart-alert-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #smartAlertsSection .smart-alert-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #smartAlertsSection .smart-alert-controls label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #smartAlertsSection .smart-alert-controls input,#smartAlertsSection .smart-alert-controls select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #smartAlertsSection .smart-alert-analysis-note{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;margin-top:9px!important;padding:10px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important} #smartAlertsSection .smart-alert-analysis-note b{font-size:11px!important;color:var(--tp-navy)!important}#smartAlertsSection .smart-alert-analysis-note span{font-size:8.5px!important;line-height:1.55!important} #smartAlertsSection .smart-alert-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #smartAlertsSection .smart-alert-stats .stat-card{min-width:0!important;padding:9px 4px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;text-align:center!important;box-shadow:none!important} #smartAlertsSection .smart-alert-stats span{display:block!important;font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#smartAlertsSection .smart-alert-stats b{margin-top:4px!important;font-size:15px!important;color:var(--tp-navy)!important} #smartAlertsSection .smart-alert-filter-panel{padding:11px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #smartAlertsSection .smart-alert-filter-row{display:grid!important;gap:6px!important}#smartAlertsSection .smart-alert-filter-row+ .smart-alert-filter-row{margin-top:9px!important} #smartAlertsSection .smart-alert-filter-row>span{font-size:8.5px!important;color:var(--tp-muted)!important} #smartAlertsSection .smart-alert-filter-chips{display:flex!important;gap:5px!important;margin:0!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important} #smartAlertsSection .smart-alert-filter-chips::-webkit-scrollbar{display:none} #smartAlertsSection .tenant-filter-chip{flex:0 0 auto!important;min-height:32px!important;padding:6px 9px!important;border:1px solid var(--tp-line)!important;border-radius:99px!important;background:#fff!important;color:var(--tp-muted)!important;font-size:8px!important} #smartAlertsSection .tenant-filter-chip.active{border-color:var(--tp-navy)!important;background:var(--tp-navy)!important;color:#fff!important} #smartAlertsSection .smart-alert-list{display:grid!important;gap:9px!important} #smartAlertsSection .smart-alert-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-inline-start-width:4px!important;border-right-width:1px!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #smartAlertsSection .smart-alert-person{gap:9px!important}#smartAlertsSection .smart-alert-avatar{width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;font-size:13px!important} #smartAlertsSection .smart-alert-badges{gap:4px!important}#smartAlertsSection .smart-alert-priority,#smartAlertsSection .smart-alert-type,#smartAlertsSection .smart-alert-state{padding:4px 6px!important;font-size:7px!important} #smartAlertsSection .smart-alert-person h3{margin:5px 0 2px!important;font-size:14px!important;color:var(--tp-ink)!important}#smartAlertsSection .smart-alert-person p{font-size:8px!important} #smartAlertsSection .smart-alert-reason{margin-top:9px!important;padding:10px!important;border:1px solid #EAF0F6!important;border-radius:12px!important;background:#F8FAFD!important}#smartAlertsSection .smart-alert-reason b{font-size:11px!important}#smartAlertsSection .smart-alert-reason p{font-size:9px!important;line-height:1.6!important} #smartAlertsSection .smart-alert-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-top:9px!important} #smartAlertsSection .smart-alert-actions .inline-btn{width:100%!important;min-height:36px!important;margin:0!important;padding:7px!important;border-radius:10px!important;font-size:8px!important} /* Reports. */ #reportsSection .report-mode-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;margin-bottom:10px!important;padding:4px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#EDF3F9!important} #reportsSection .report-mode-btn{min-height:40px!important;padding:8px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--tp-muted)!important;font-size:10px!important} #reportsSection .report-mode-btn.active{background:var(--tp-navy)!important;color:#fff!important;box-shadow:none!important} #reportsSection .report-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #reportsSection .report-controls-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #reportsSection .report-controls-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #reportsSection .report-controls-grid input,#reportsSection .report-controls-grid select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #reportsSection .report-actions-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important} #reportsSection .report-actions-row .inline-btn{width:100%!important;min-height:40px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:9px!important} #reportsSection .report-actions-row .secondary-btn{background:#EDF5FC!important;color:var(--tp-navy)!important}#reportsSection .report-actions-row .primary-btn{background:var(--tp-navy)!important} #reportsSection .report-preview-wrap{margin-top:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;overflow:auto!important;box-shadow:var(--tp-shadow)!important} } @media(max-width:370px){ #studentFinanceSection .section-head h2,#communicationSection .section-head h2,#smartAlertsSection .section-head h2,#reportsSection .section-head h2{font-size:22px!important} #communicationSection .communication-safe-note{display:none!important} #smartAlertsSection #runSmartAlertsBtn{min-width:82px!important;padding-inline:9px!important} } /* V1.26.2 — login viewport fill + exact row-menu anchoring support. */ body:has(#loginView:not(.hidden)){min-height:100dvh!important;background:#061E3B!important} @media(max-width:900px){ #loginView.login-shell:not(.hidden){width:100%!important;min-height:100dvh!important;height:auto!important;background-color:#061E3B!important} .row-more-popover.row-more-portal{right:auto!important;bottom:auto!important} } /* ========================================================== V1.27.0 PREVIEW — DAILY OPERATIONS / PHASE 2 Groups, Schedule and Lesson Registration. ========================================================== */ @media(max-width:900px){ /* Shared phase-two page heads. */ #groupsSection .section-head,#scheduleSection .section-head,#lessonSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #groupsSection .section-head h2,#scheduleSection .section-head h2,#lessonSection .section-head h2{margin:0!important;font-size:26px!important;line-height:1.3!important;color:var(--tp-ink)!important} #groupsSection .section-head p,#scheduleSection .section-head p,#lessonSection .section-head p{margin:4px 0 0!important;font-size:11px!important;line-height:1.5!important} /* Groups. */ #groupsSection #addGroupBtn{width:auto!important;min-width:126px!important;min-height:42px!important;margin:0!important;padding:10px 13px!important;border-radius:13px!important;background:var(--tp-navy)!important;box-shadow:none!important;font-size:11px!important;white-space:nowrap} #groupsSection #addGroupBtn span{color:var(--tp-gold);font-size:15px} #groupsSection .groups-master-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} #groupsSection .master-group-card{padding:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important;overflow:visible!important} #groupsSection .group-card-title-row{align-items:flex-start!important;gap:10px!important} #groupsSection .group-card-title-row h3{margin:0!important;font-size:16px!important;line-height:1.45!important;color:var(--tp-ink)!important} #groupsSection .group-card-title-row p{display:flex!important;align-items:center!important;gap:6px!important;margin:4px 0 0!important;font-size:10px!important} #groupsSection .group-id-chip{padding:3px 6px!important;border-radius:7px!important;background:#F2F5F9!important;color:var(--tp-muted)!important;font-size:9px!important} #groupsSection .status{padding:5px 8px!important;border-radius:99px!important;font-size:9px!important} #groupsSection .group-summary-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:12px 0!important;padding:9px 0!important;border:1px solid #EAF0F6!important;border-radius:13px!important;background:#F8FAFD!important} #groupsSection .group-summary-strip>div{min-width:0!important;padding:0 8px!important;text-align:center!important} #groupsSection .group-summary-strip span{display:block!important;font-size:8.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #groupsSection .group-summary-strip b{display:block!important;margin-top:4px!important;font-size:12px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #groupsSection .group-schedule-preview{min-height:0!important;padding:0!important} #groupsSection .group-schedule-preview>span{font-size:9px!important;color:var(--tp-muted)!important} #groupsSection .group-schedule-chips{margin-top:6px!important;gap:5px!important} #groupsSection .group-schedule-chips b,#groupsSection .group-schedule-chips em{padding:5px 7px!important;border-radius:8px!important;background:#F1F5F9!important;color:#42566F!important;font-size:8.5px!important} #groupsSection .master-group-actions{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;margin-top:11px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important;direction:ltr} #groupsSection .master-group-actions .row-more-menu{grid-column:1!important;grid-row:1!important} #groupsSection .master-group-actions .row-more-trigger{width:42px!important;height:40px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important} #groupsSection .master-group-actions .group-lesson-btn{grid-column:2!important;grid-row:1!important;width:100%!important;min-height:40px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:10px!important;direction:rtl} /* Schedule. */ #scheduleSection .schedule-page-head .icon-action-btn{position:relative!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:21px!important;box-shadow:none!important} #scheduleSection .schedule-page-head .icon-action-btn::before,#scheduleSection .schedule-page-head .icon-action-btn::after{display:none!important;content:none!important} #scheduleSection .schedule-summary-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:0 0 13px!important} #scheduleSection .schedule-summary-grid .stat-card{min-width:0!important;padding:10px 5px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;text-align:center!important;box-shadow:none!important} #scheduleSection .schedule-summary-grid .stat-card:nth-child(4){display:none!important} #scheduleSection .schedule-summary-grid .stat-card span{display:block!important;font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #scheduleSection .schedule-summary-grid .stat-card b{margin-top:4px!important;font-size:16px!important;color:var(--tp-navy)!important} #scheduleSection .mobile-schedule-browser{display:block!important} #scheduleSection .schedule-day-selector{display:flex!important;gap:7px!important;margin-inline:-1px!important;padding:1px 1px 9px!important;direction:rtl!important} #scheduleSection .schedule-day-chip{flex:0 0 58px!important;min-height:62px!important;padding:7px 4px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;color:var(--tp-muted)!important;box-shadow:none!important} #scheduleSection .schedule-day-chip span{font-size:9px!important}#scheduleSection .schedule-day-chip b{font-size:16px!important;color:var(--tp-navy)!important} #scheduleSection .schedule-day-chip.active{border-color:#E2C45D!important;background:var(--tp-gold)!important;color:var(--tp-navy)!important} #scheduleSection .schedule-day-chip.active b{color:var(--tp-navy)!important} #scheduleSection .schedule-mobile-timeline{padding:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #scheduleSection .schedule-mobile-date{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:10px!important;padding:0 2px!important} #scheduleSection .schedule-mobile-date b{font-size:18px!important;color:var(--tp-ink)!important}#scheduleSection .schedule-mobile-date span{font-size:9px!important;color:var(--tp-muted)!important} #scheduleSection .schedule-timeline-list{display:grid!important;gap:8px!important;padding:0!important;border:0!important} #scheduleSection .schedule-timeline-list .schedule-session-card{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:3px 10px!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #scheduleSection .schedule-timeline-list .schedule-session-card::before{display:none!important} #scheduleSection .schedule-session-time{grid-column:1!important;grid-row:1!important;text-align:right!important} #scheduleSection .schedule-session-time b{font-size:13px!important;color:var(--tp-navy)!important}#scheduleSection .schedule-session-time span{font-size:9px!important} #scheduleSection .schedule-session-main{grid-column:2!important;grid-row:1!important;min-width:0!important} #scheduleSection .schedule-session-title{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important} #scheduleSection .schedule-session-title h4{margin:0!important;min-width:0!important;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #scheduleSection .schedule-session-status{flex:none!important;padding:4px 6px!important;font-size:7.5px!important} #scheduleSection .schedule-session-main p{margin:3px 0 0!important;font-size:9px!important;color:var(--tp-muted)!important} #scheduleSection .schedule-lesson-btn{grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-height:36px!important;margin-top:7px!important;border:1px solid #EEDB9B!important;border-radius:11px!important;background:#FFF9E8!important;color:var(--tp-navy)!important;font-size:10px!important;font-weight:800!important} #scheduleSection .schedule-today-panel,#scheduleSection .mobile-schedule-browser~.panel{display:none!important} /* Lesson registration. */ #lessonSection .lesson-stepper{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:0 0 14px!important} #lessonSection .lesson-step{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;color:#8996A7!important;text-align:center!important} #lessonSection .lesson-step:not(:last-child)::after{content:""!important;position:absolute!important;top:14px!important;right:calc(50% + 15px)!important;width:calc(100% - 30px)!important;height:2px!important;background:#E0E6EE!important;z-index:0!important} #lessonSection .lesson-step span{position:relative!important;z-index:1!important;width:29px!important;height:29px!important;border:1px solid #DDE5EE!important;border-radius:50%!important;background:#F4F7FA!important;color:#7B899B!important;font-size:10px!important} #lessonSection .lesson-step b{font-size:8.5px!important;white-space:nowrap!important} #lessonSection .lesson-step.active{color:var(--tp-navy)!important}#lessonSection .lesson-step.active span{border-color:#E2C45D!important;background:var(--tp-gold)!important;color:var(--tp-navy)!important} #lessonSection .lesson-step.complete{color:var(--tp-success)!important}#lessonSection .lesson-step.complete span{border-color:#BFE5D6!important;background:#EAF8F2!important;color:var(--tp-success)!important}#lessonSection .lesson-step.complete span::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;background:inherit;border-radius:50%;font-size:11px} #lessonSection .lesson-step.complete::after{background:#BFE5D6!important} #lessonSection .lesson-setup-panel{padding:14px!important;margin-bottom:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #lessonSection .lesson-setup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #lessonSection .lesson-setup-grid label{min-width:0!important;margin:0!important;font-size:10px!important;color:var(--tp-muted)!important} #lessonSection .lesson-setup-grid label:first-child,#lessonSection .lesson-title-field{grid-column:1/-1!important} #lessonSection .lesson-setup-grid input,#lessonSection .lesson-setup-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 11px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:12px!important} #lessonSection .lesson-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:12px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important} #lessonSection .lesson-id-preview{min-height:0!important;font-size:8.5px!important;color:#8996A7!important;text-align:right!important;direction:ltr!important;overflow-wrap:anywhere} #lessonSection .lesson-continue-btn{width:100%!important;min-height:42px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:11px!important} #lessonSection .lesson-roster-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:4px 1px 9px!important} #lessonSection .lesson-roster-head h3{margin:0!important;font-size:18px!important;color:var(--tp-ink)!important}#lessonSection .lesson-roster-head p{margin:2px 0 0!important;font-size:9px!important} #lessonSection .lesson-roster-head>span{padding:6px 9px!important;border-radius:99px!important;background:#EDF4FC!important;color:var(--tp-navy)!important;font-size:9px!important} #lessonSection .lesson-default-note{padding:10px 11px!important;margin-bottom:9px!important;border:1px solid #EEDB9B!important;border-radius:13px!important;background:#FFF9E8!important;color:#725515!important;font-size:9.5px!important;line-height:1.65!important} #lessonSection .lesson-roster{display:grid!important;gap:9px!important} #lessonSection .lesson-student-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #lessonSection .lesson-student-card.student-absent-card{border-color:#F0CDD2!important;background:#FFFAFA!important} #lessonSection .lesson-student-head{margin-bottom:9px!important} #lessonSection .lesson-student-head b{font-size:14px!important;color:var(--tp-ink)!important}#lessonSection .lesson-student-head span{font-size:9px!important} #lessonSection .lesson-fields-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} #lessonSection .lesson-fields-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #lessonSection .lesson-field{width:100%!important;height:40px!important;min-height:40px!important;margin-top:4px!important;padding:7px 8px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #lessonSection .absent-auto-note{margin-top:9px!important;padding:8px 9px!important;border-radius:10px!important;font-size:8.5px!important;line-height:1.5!important} #lessonSection .lesson-save-bar{position:sticky!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;z-index:20!important;margin-top:11px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 30px rgba(8,45,87,.12)!important;backdrop-filter:blur(12px)!important} #lessonSection .lesson-save-bar>div{font-size:10px!important;white-space:nowrap}#lessonSection .lesson-save-bar .primary-btn{min-height:40px!important;margin:0!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} } @media(max-width:370px){ #groupsSection .section-head h2,#scheduleSection .section-head h2,#lessonSection .section-head h2{font-size:23px!important} #groupsSection #addGroupBtn{min-width:112px!important;padding-inline:10px!important;font-size:10px!important} #scheduleSection .schedule-day-chip{flex-basis:54px!important} #lessonSection .lesson-step b{font-size:8px!important} } /* ========================================================== V1.28.1 PREVIEW — PHASE 3 POLISH / REAL-DEVICE FIXES ========================================================== */ @media(max-width:900px){ /* Finance: show every filter without a cropped trailing chip. */ #studentFinanceSection .student-finance-filter-bar{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; margin:10px 0 0!important; padding:0!important; overflow:visible!important; } #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip{ width:100%!important;min-width:0!important;min-height:34px!important;padding:6px 4px!important; overflow:hidden!important;text-overflow:ellipsis!important;font-size:8px!important } #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(4){grid-column:1/2!important} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(5){grid-column:2/4!important} #studentFinanceSection .student-finance-card{border-inline-start-width:1px!important;border-inline-end:4px solid #DDE6F0!important} #studentFinanceSection .student-finance-card.paid{border-inline-end-color:#9EDBC5!important} #studentFinanceSection .student-finance-card.partial{border-inline-end-color:#E9C85B!important} #studentFinanceSection .student-finance-card.unpaid{border-inline-end-color:#E7A8AF!important} #studentFinanceSection .student-finance-remaining b, #studentFinanceSection .student-finance-numbers b, #studentFinanceSection .student-finance-stats b{direction:rtl!important;unicode-bidi:isolate!important;white-space:nowrap!important} /* Communication: predictable select text and clean message preview. */ #communicationSection #communicationStudent{font-size:10px!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important} #communicationSection .communication-identity-main b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} #communicationSection .communication-phone-box b{direction:ltr!important;unicode-bidi:isolate!important;text-align:right!important} #communicationSection .communication-panel-head .eyebrow{color:#9B7417!important;letter-spacing:0!important} #communicationSection .communication-message{ min-height:190px!important;height:190px!important;resize:none!important;overflow:auto!important; direction:rtl!important;text-align:right!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important; caret-color:var(--tp-navy)!important } #communicationSection .communication-message::-webkit-resizer{display:none!important} #communicationSection .communication-actions{align-items:stretch!important} /* Reports: the main action must read as the next step. */ #reportsSection #loadStudentReportBtn,#reportsSection #loadGroupReportBtn{ background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important; font-weight:800!important;box-shadow:none!important } #reportsSection .report-controls-grid select,#reportsSection .report-controls-grid input{min-width:0!important} #reportsSection .report-mode-btn{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} } @media(max-width:370px){ #studentFinanceSection .student-finance-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(4){grid-column:auto!important} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(5){grid-column:1/-1!important} #communicationSection .communication-template{min-height:64px!important;padding:9px!important} #communicationSection .communication-template b{font-size:11px!important} #reportsSection .report-mode-btn{font-size:9px!important} } /* ========================================================== V1.29.0 PREVIEW — ACADEMIC GROWTH & ACCOUNT / PHASE 4 Monthly Exam, Parent Cards, Leaderboard and Account. ========================================================== */ @media(max-width:900px){ /* Shared phase-four heads. */ #examSection .section-head,#cardsSection .section-head,#leaderboardSection .section-head,#accountSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #examSection .section-head h2,#cardsSection .section-head h2,#leaderboardSection .section-head h2,#accountSection .section-head h2{margin:0!important;font-size:25px!important;line-height:1.3!important;color:var(--tp-ink)!important} #examSection .section-head p,#cardsSection .section-head p,#leaderboardSection .section-head p,#accountSection .section-head p{margin:4px 0 0!important;font-size:10px!important;line-height:1.55!important} /* Monthly exam. */ #examSection .exam-setup-panel{padding:14px!important;margin-bottom:12px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #examSection .exam-setup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #examSection .exam-setup-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #examSection .exam-setup-grid input,#examSection .exam-setup-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:11px!important} #examSection .lesson-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:11px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important} #examSection #loadExamRosterBtn{width:100%!important;min-height:42px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important;font-size:10px!important} #examSection .lesson-id-preview{font-size:8px!important;text-align:center!important;direction:ltr!important;overflow-wrap:anywhere!important} #examSection .lesson-default-note{padding:10px 11px!important;margin-bottom:9px!important;border:1px solid #EEDB9B!important;border-radius:13px!important;background:#FFF9E8!important;color:#725515!important;font-size:9px!important;line-height:1.6!important} #examSection .exam-roster{display:grid!important;gap:9px!important} #examSection .exam-student-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #examSection .exam-student-head{margin-bottom:9px!important;align-items:flex-start!important} #examSection .exam-student-head b{font-size:14px!important;color:var(--tp-ink)!important}#examSection .exam-student-head span{font-size:8.5px!important} #examSection .exam-student-fields{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:8px!important} #examSection .exam-student-fields label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #examSection .score-input-wrap{gap:5px!important}#examSection .score-input-wrap input{height:40px!important;min-height:40px!important;margin-top:4px!important;padding:7px!important;border-radius:11px!important;text-align:center!important;font-size:12px!important}#examSection .score-input-wrap span{margin-top:4px!important;font-size:9px!important} #examSection .exam-note{height:40px!important;min-height:40px!important;margin-top:4px!important;padding:8px!important;border-radius:11px!important;resize:none!important;font-size:10px!important;line-height:1.45!important} #examSection .lesson-save-bar{position:sticky!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;z-index:20!important;margin-top:11px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 30px rgba(8,45,87,.12)!important;backdrop-filter:blur(12px)!important} #examSection .lesson-save-bar .primary-btn{min-height:40px!important;margin:0!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} /* Parent follow-up cards. */ #cardsSection .cards-toolbar-panel{padding:14px!important;margin-bottom:12px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #cardsSection .cards-toolbar-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important} #cardsSection .cards-toolbar-grid label{margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #cardsSection .cards-toolbar-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:11px!important} #cardsSection .cards-link-box{padding:10px 11px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important} #cardsSection .cards-link-box span{margin-bottom:4px!important;font-size:8.5px!important}#cardsSection .cards-link-box code{font-size:8.5px!important;line-height:1.5!important;color:var(--tp-navy)!important} #cardsSection .cards-toolbar-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important} #cardsSection .cards-toolbar-actions .inline-btn{width:100%!important;min-height:40px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:9px!important} #cardsSection #generateGroupCardsBtn{background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important} #cardsSection .parent-cards-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} #cardsSection .paper-parent-card{border:1px solid var(--tp-line)!important;border-radius:18px!important;box-shadow:var(--tp-shadow)!important} #cardsSection .paper-card-top{padding:11px 12px!important;background:linear-gradient(110deg,var(--tp-navy),var(--tp-navy-2))!important} #cardsSection .paper-card-mark{width:39px!important;min-width:39px!important;height:39px!important;border-radius:11px!important;font-size:13px!important}#cardsSection .paper-card-brand strong{font-size:13px!important}#cardsSection .paper-card-brand small{font-size:8px!important}#cardsSection .paper-card-label{font-size:9px!important} #cardsSection .paper-card-body{grid-template-columns:minmax(0,1fr) 104px!important;gap:9px!important;padding:12px!important} #cardsSection .paper-card-info h3{margin:0 0 8px!important;font-size:15px!important}#cardsSection .paper-card-meta{gap:5px!important}#cardsSection .paper-card-meta>div,#cardsSection .paper-card-login-row{padding:7px!important;border-radius:9px!important}#cardsSection .paper-card-meta span,#cardsSection .paper-card-login-row span{font-size:7.5px!important}#cardsSection .paper-card-meta b,#cardsSection .paper-card-login-row b{font-size:9px!important} #cardsSection .paper-card-qr img{width:92px!important;height:92px!important;margin-bottom:3px!important;border-width:5px!important}#cardsSection .paper-card-qr b{font-size:9px!important}#cardsSection .paper-card-qr span{font-size:7px!important} #cardsSection .paper-card-footer{padding:7px 10px!important;font-size:7px!important}#cardsSection .paper-card-footer code{font-size:6.5px!important} /* Leaderboard and rewards. */ #leaderboardSection .section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important} #leaderboardSection .leaderboard-head-actions{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:105px!important} #leaderboardSection .leaderboard-head-actions .compact{width:100%!important;min-height:36px!important;margin:0!important;padding:7px 8px!important;border-radius:10px!important;font-size:8.5px!important} #leaderboardSection #runLeaderboardBtn{background:var(--tp-navy)!important} #leaderboardSection .leaderboard-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #leaderboardSection .leaderboard-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #leaderboardSection .leaderboard-controls label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #leaderboardSection .leaderboard-controls input,#leaderboardSection .leaderboard-controls select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 9px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:10px!important} #leaderboardSection .leaderboard-note{margin-top:9px!important;padding:10px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important}#leaderboardSection .leaderboard-note b{font-size:11px!important}#leaderboardSection .leaderboard-note span{font-size:8px!important;line-height:1.55!important} #leaderboardSection .leaderboard-config-summary{margin:9px 0!important}#leaderboardSection .leaderboard-config-chips{display:flex!important;gap:5px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}#leaderboardSection .leaderboard-config-chips::-webkit-scrollbar{display:none}#leaderboardSection .leaderboard-config-chips span{flex:0 0 auto!important;padding:5px 7px!important;font-size:7.5px!important} #leaderboardSection .leaderboard-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #leaderboardSection .leaderboard-stats .stat-card{min-width:0!important;padding:9px 4px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;text-align:center!important;box-shadow:none!important}#leaderboardSection .leaderboard-stats span{display:block!important;font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#leaderboardSection .leaderboard-stats b{margin-top:4px!important;font-size:14px!important;color:var(--tp-navy)!important} #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:10px 0!important} #leaderboardSection .leaderboard-winner{min-width:0!important;padding:11px 5px!important;border-radius:14px!important;box-shadow:none!important}#leaderboardSection .leaderboard-medal{font-size:23px!important}#leaderboardSection .leaderboard-winner>span{font-size:7px!important}#leaderboardSection .leaderboard-winner h3{margin:4px 0!important;font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#leaderboardSection .leaderboard-winner>b{font-size:12px!important}#leaderboardSection .leaderboard-winner>small{min-height:22px!important;margin:2px 0 6px!important;font-size:6.5px!important;line-height:1.35!important}#leaderboardSection .leaderboard-winner .inline-btn{width:100%!important;min-height:31px!important;margin:0!important;padding:5px 2px!important;border-radius:9px!important;font-size:7px!important} #leaderboardSection .leaderboard-table-panel{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important}#leaderboardSection .leaderboard-table-head{margin-bottom:8px!important}#leaderboardSection .leaderboard-table-head h3{margin:2px 0 0!important;font-size:17px!important}#leaderboardSection #printLeaderboardBtn{width:auto!important;min-height:34px!important;margin:0!important;padding:6px 8px!important;font-size:8px!important} #leaderboardSection .table-wrap{border:1px solid #EEF2F6!important;border-radius:12px!important;overflow:auto!important}#leaderboardSection .leaderboard-data-table{min-width:760px!important}#leaderboardSection .leaderboard-data-table th,#leaderboardSection .leaderboard-data-table td{padding:8px 7px!important;font-size:8px!important} /* Account, subscription and receipts. */ #accountSection .account-summary-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:11px!important} #accountSection .account-summary-card{min-width:0!important;padding:11px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important}#accountSection .account-summary-card span{margin-bottom:4px!important;font-size:8.5px!important}#accountSection .account-summary-card b{font-size:14px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountSection .teacher-renewal-panel,#accountSection .teacher-payments-panel,#accountSection .account-panel{padding:14px!important;margin-bottom:11px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #accountSection .teacher-renewal-panel{border-top:1px solid var(--tp-line)!important;border-inline-end:4px solid var(--tp-gold)!important} #accountSection .teacher-renewal-head{display:flex!important;gap:9px!important;margin-bottom:10px!important}#accountSection .teacher-renewal-head h3{margin:2px 0 3px!important;font-size:18px!important}#accountSection .teacher-renewal-head p{font-size:8.5px!important;line-height:1.5!important}#accountSection .renewal-expiry-pill{padding:6px 8px!important;font-size:8px!important} #accountSection .renewal-plan-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important}#accountSection .renewal-plan-strip>div{min-width:0!important;padding:8px 5px!important;border-radius:10px!important;text-align:center!important}#accountSection .renewal-plan-strip span{margin-bottom:3px!important;font-size:7px!important}#accountSection .renewal-plan-strip b{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountSection .renewal-current-request{padding:10px!important;margin:9px 0!important;border-radius:12px!important}#accountSection .renewal-current-request b{font-size:10px!important}#accountSection .renewal-current-request small,#accountSection .renewal-current-request p{font-size:8px!important} #accountSection #openTeacherRenewalRequestBtn{min-height:40px!important;margin-top:8px!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} #accountSection .teacher-payments-panel{border-top:1px solid var(--tp-line)!important} #accountSection .teacher-payments-head{display:flex!important;gap:9px!important;margin-bottom:10px!important}#accountSection .teacher-payments-head h3{margin:2px 0 3px!important;font-size:18px!important}#accountSection .teacher-payments-head p{font-size:8px!important}#accountSection #refreshTeacherPaymentsBtn{min-width:68px!important;min-height:34px!important;padding:6px 8px!important;border-radius:10px!important;font-size:8px!important} #accountSection .teacher-payments-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important}#accountSection .teacher-payments-summary>div{min-width:0!important;padding:8px 5px!important;border-radius:10px!important;text-align:center!important}#accountSection .teacher-payments-summary span{margin-bottom:3px!important;font-size:6.8px!important}#accountSection .teacher-payments-summary b{font-size:11px!important;white-space:nowrap!important} #accountSection .teacher-payments-list{gap:8px!important}#accountSection .teacher-payment-item{padding:11px!important;border-radius:14px!important}#accountSection .teacher-payment-main b{font-size:10px!important}#accountSection .teacher-payment-main strong{font-size:14px!important}#accountSection .teacher-payment-main small,#accountSection .payment-receipt-number{font-size:7.5px!important}#accountSection .teacher-payment-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;margin:8px 0!important}#accountSection .teacher-payment-meta>span{min-width:0!important;padding:6px!important;border-radius:8px!important;font-size:7px!important}#accountSection .teacher-payment-meta b{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#accountSection .payment-receipt-btn{min-height:36px!important;margin:0!important;padding:7px!important;border-radius:10px!important;font-size:8px!important} #accountSection .account-layout{display:grid!important;grid-template-columns:1fr!important;gap:0!important} #accountSection .account-panel-head{margin-bottom:10px!important}#accountSection .account-panel-head h3{margin:0 0 3px!important;font-size:18px!important}#accountSection .account-panel-head p{font-size:8.5px!important;line-height:1.5!important} #accountSection .account-panel label{margin-top:10px!important;font-size:9px!important;color:var(--tp-muted)!important}#accountSection .account-panel input{height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important}#accountSection .account-panel .field-help{font-size:7.5px!important} #accountSection .signup-form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}#accountSection .account-readonly-note,#accountSection .account-security-tip{padding:9px 10px!important;margin:10px 0!important;border-radius:11px!important;font-size:8.5px!important;line-height:1.6!important}#accountSection .account-password-rules{padding:9px!important;margin-top:10px!important;border-radius:11px!important}#accountSection .account-password-rules b,#accountSection .account-password-rules span{font-size:8px!important}#accountSection #saveTeacherProfileBtn,#accountSection #changeTeacherPasswordBtn{min-height:42px!important;margin-top:12px!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} } @media(max-width:370px){ #examSection .section-head h2,#cardsSection .section-head h2,#leaderboardSection .section-head h2,#accountSection .section-head h2{font-size:22px!important} #examSection .exam-student-fields{grid-template-columns:82px minmax(0,1fr)!important} #cardsSection .paper-card-body{grid-template-columns:minmax(0,1fr) 94px!important} #cardsSection .paper-card-qr img{width:82px!important;height:82px!important} #leaderboardSection .leaderboard-head-actions{width:94px!important} #accountSection .signup-form-grid{grid-template-columns:1fr!important} } /* ========================================================== V1.29.1 PREVIEW — COMPACT MOBILE LEADERBOARD CARDS ========================================================== */ @media(max-width:900px){ #leaderboardSection .leaderboard-table-panel{overflow:visible!important} #leaderboardSection .leaderboard-table-panel .table-wrap{border:0!important;border-radius:0!important;overflow:visible!important} #leaderboardSection .leaderboard-data-table{display:block!important;width:100%!important;min-width:0!important;border:0!important} #leaderboardSection .leaderboard-data-table thead{display:none!important} #leaderboardSection .leaderboard-data-table tbody{display:grid!important;width:100%!important;gap:9px!important} #leaderboardSection .leaderboard-data-table tr{ display:grid!important;grid-template-columns:46px minmax(0,1fr) minmax(74px,.72fr) minmax(74px,.72fr)!important; gap:6px!important;width:100%!important;padding:10px!important;border:1px solid var(--tp-line)!important; border-radius:15px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important } #leaderboardSection .leaderboard-data-table td{ display:block!important;width:auto!important;min-width:0!important;min-height:0!important;margin:0!important; padding:7px 8px!important;border:1px solid #EAF0F6!important;border-radius:10px!important; background:#F8FAFD!important;color:var(--tp-ink)!important;font-size:9px!important;text-align:right!important } #leaderboardSection .leaderboard-data-table td::before{ content:attr(data-label)!important;display:block!important;margin:0 0 3px!important;color:#8793A4!important; font-size:6.8px!important;font-weight:750!important;text-align:right!important;line-height:1.2!important } #leaderboardSection .leaderboard-data-table td>b{display:block!important;font-size:11px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-data-table td>small{display:block!important;margin-top:2px!important;font-size:6.8px!important;color:var(--tp-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{ grid-column:1!important;grid-row:1!important;display:grid!important;place-items:center!important;padding:5px!important; background:#FFF9E7!important;border-color:#EEDB9B!important;text-align:center!important } #leaderboardSection .leaderboard-data-table td[data-label="المركز"]::before{display:none!important} #leaderboardSection .leaderboard-rank-cell{font-size:20px!important;line-height:1!important;text-align:center!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]{grid-column:2/4!important;grid-row:1!important;background:#fff!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]::before{display:none!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]>b{font-size:12px!important} #leaderboardSection .leaderboard-data-table td[data-label="النقاط"]{grid-column:4!important;grid-row:1!important;background:#EDF5FC!important;border-color:#D5E5F3!important} #leaderboardSection .leaderboard-data-table td[data-label="النقاط"]>b{font-size:13px!important} #leaderboardSection .leaderboard-data-table td[data-label="الأداء"], #leaderboardSection .leaderboard-data-table td[data-label="الحضور"], #leaderboardSection .leaderboard-data-table td[data-label="الواجب"], #leaderboardSection .leaderboard-data-table td[data-label="التسميع"]{grid-column:span 1!important} #leaderboardSection .leaderboard-data-table td[data-label="المشاركة"]{grid-column:1/3!important} #leaderboardSection .leaderboard-data-table td[data-label="الامتحان"]{grid-column:3/5!important} #leaderboardSection .leaderboard-data-table td[data-label="الأداء"]>b{color:var(--tp-success)!important} #leaderboardSection .leaderboard-data-table td[data-label="الشهادة"]{ grid-column:1/-1!important;padding:0!important;border:0!important;background:transparent!important } #leaderboardSection .leaderboard-data-table td[data-label="الشهادة"]::before{display:none!important} #leaderboardSection .certificate-action-btn{ display:block!important;width:100%!important;min-height:36px!important;margin:0!important;padding:7px 10px!important; border:1px solid #D5E2F0!important;border-radius:10px!important;background:#EDF5FC!important;color:var(--tp-navy)!important; font-size:8.5px!important;font-weight:850!important;line-height:1.2!important;text-align:center!important;opacity:1!important } #leaderboardSection .leaderboard-data-table tr:first-child{border-color:#E8D17C!important;box-shadow:inset 3px 0 0 var(--tp-gold)!important} } @media(max-width:370px){ #leaderboardSection .leaderboard-data-table tr{grid-template-columns:42px minmax(0,1fr) minmax(66px,.7fr) minmax(66px,.7fr)!important;padding:8px!important;gap:5px!important} #leaderboardSection .leaderboard-data-table td{padding:6px!important;font-size:8.5px!important} } /* V1.29.2 — rank, empty state and dual certificate actions. */ @media(max-width:900px){ #leaderboardSection .leaderboard-rank-cell{ display:grid!important;place-items:center!important;gap:1px!important;width:100%!important;overflow:visible!important; color:var(--tp-navy)!important;font-size:17px!important;font-family:Arial,Tahoma,sans-serif!important;line-height:1!important } #leaderboardSection .leaderboard-rank-cell span{display:block!important;color:#9A7418!important;font-size:6px!important;font-family:"Cairo",Tahoma,Arial,sans-serif!important} #leaderboardSection .leaderboard-empty-row{ display:block!important;width:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important } #leaderboardSection .leaderboard-empty-row td{ display:block!important;width:100%!important;min-height:112px!important;padding:28px 18px!important;border:1px dashed #CDD7E4!important; border-radius:15px!important;background:#FBFCFE!important;color:var(--tp-muted)!important;text-align:center!important;font-size:11px!important;line-height:1.8!important } #leaderboardSection .leaderboard-empty-row td::before{display:none!important} #leaderboardSection .leaderboard-certificate-actions,#leaderboardSection .leaderboard-winner-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;width:100%!important} #leaderboardSection .leaderboard-winner-actions .inline-btn{width:100%!important;min-width:0!important} #leaderboardSection .leaderboard-certificate-actions .certificate-action-btn{min-width:0!important} #leaderboardSection .leaderboard-certificate-actions .png-action{background:#FFF9E7!important;border-color:#E8D17C!important;color:#755611!important} } /* ========================================================== V1.29.3 PREVIEW — LEADERBOARD CARD ALIGNMENT & SAFE AREA ========================================================== */ @media(max-width:900px){ #leaderboardSection{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important} #leaderboardSection .leaderboard-table-panel{margin-bottom:22px!important} #leaderboardSection .leaderboard-data-table tr{ grid-template-columns:64px minmax(0,1.35fr) minmax(72px,.72fr) minmax(72px,.72fr)!important; overflow:visible!important } #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{ width:64px!important;min-width:64px!important;min-height:78px!important;padding:7px 4px!important; overflow:hidden!important;isolation:isolate!important } #leaderboardSection .leaderboard-rank-cell{ display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; width:52px!important;height:64px!important;min-width:52px!important;margin:auto!important;padding:5px 3px!important; overflow:hidden!important;border:1px solid #E7CB66!important;border-radius:12px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF6D8 100%)!important;box-shadow:inset 0 1px 0 #fff!important } #leaderboardSection .leaderboard-rank-caption{ display:block!important;max-width:100%!important;margin:0 0 3px!important;color:#927019!important; font-family:"Cairo",Tahoma,Arial,sans-serif!important;font-size:6px!important;font-weight:750!important; line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important } #leaderboardSection .leaderboard-rank-number{ display:block!important;color:var(--tp-navy)!important;font-family:Arial,Tahoma,sans-serif!important; font-size:21px!important;font-weight:900!important;line-height:1!important } #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]{ padding-inline:9px!important;overflow:hidden!important } #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]>b{ max-width:100%!important;line-height:1.45!important } #leaderboardSection .leaderboard-certificate-actions{margin-top:2px!important} } @media(max-width:370px){ #leaderboardSection .leaderboard-data-table tr{ grid-template-columns:58px minmax(0,1.25fr) minmax(64px,.7fr) minmax(64px,.7fr)!important } #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{width:58px!important;min-width:58px!important} #leaderboardSection .leaderboard-rank-cell{width:48px!important;min-width:48px!important} } /* V1.29.4 — one clean rank badge (remove the nested double frame). */ @media(max-width:900px){ #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{ display:flex!important;align-items:center!important;justify-content:center!important; width:64px!important;min-width:64px!important;min-height:78px!important;padding:0!important; overflow:hidden!important;border:1px solid #E7CB66!important;border-radius:13px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF6D8 100%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.96)!important } #leaderboardSection .leaderboard-rank-cell{ display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; width:100%!important;height:100%!important;min-width:0!important;margin:0!important;padding:8px 4px!important; overflow:hidden!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important } #leaderboardSection .leaderboard-rank-caption{margin-bottom:5px!important;font-size:6.5px!important;line-height:1!important} #leaderboardSection .leaderboard-rank-number{font-size:22px!important;line-height:1!important} } @media(max-width:370px){ #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{width:58px!important;min-width:58px!important} #leaderboardSection .leaderboard-rank-cell{width:100%!important;min-width:0!important} } /* Keep the new parent-card anatomy authoritative over legacy mobile card rules. */ @media(max-width:900px){ body[data-role="teacher"] #homeSection>.home-page-head{display:none!important} #homeSection .teacher-home-profile-hero{order:-3!important;margin-top:0!important} #homeSection .smart-next-lesson,#homeSection .smart-next-lesson.no-schedule{order:-2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 108px!important;align-items:center!important;gap:10px 14px!important;min-height:0!important;padding:15px 16px!important;border:1px solid #D5E2EF!important;border-radius:18px!important;background:linear-gradient(135deg,#F7FBFF 0%,#EDF5FC 100%)!important;color:var(--tp-navy,#0b2f66)!important;box-shadow:0 8px 22px rgba(8,45,87,.07)!important;overflow:hidden!important} #homeSection .smart-next-lesson::before,#homeSection .smart-next-lesson::after{display:none!important;content:none!important} #homeSection .smart-next-icon{display:none!important} #homeSection .smart-next-copy{grid-column:1!important;grid-row:1!important;min-width:0!important;padding:0!important} #homeSection .smart-next-copy>span{color:#55728F!important;font-size:9px!important;font-weight:750!important} #homeSection .smart-next-copy h4{margin:3px 0 2px!important;color:var(--tp-navy,#0b2f66)!important;font-size:16px!important;line-height:1.45!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #homeSection .smart-next-copy p{margin:0!important;color:#73869A!important;font-size:9.5px!important;line-height:1.5!important} #homeSection .smart-next-copy>b{display:inline-flex!important;margin-top:7px!important;padding:5px 8px!important;border-radius:99px!important;background:#E5F0FA!important;color:#315E86!important;font-size:9px!important} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{grid-column:2!important;grid-row:1!important;width:108px!important;min-width:108px!important;min-height:42px!important;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:12px!important;background:var(--tp-navy,#0b2f66)!important;color:#fff!important;font-size:10px!important;box-shadow:none!important} #cardsSection .paper-parent-card{display:block!important;border-radius:22px!important;box-shadow:0 12px 30px rgba(10,45,90,.1)!important} #cardsSection .paper-card-teacher{padding:20px!important;border-bottom:6px solid var(--gold,#e8ad22)!important} #cardsSection .paper-card-teacher-photo{width:102px!important;height:102px!important} #cardsSection .paper-card-student{padding:22px 17px!important} #cardsSection .paper-card-access{padding:8px 17px 22px!important} #cardsSection .paper-card-footer{display:flex!important;padding:10px 17px!important;font-size:9px!important} } @media(max-width:390px){ .teacher-home-profile-contact{display:grid;grid-template-columns:1fr auto}.teacher-home-phone-block a{font-size:15px}.teacher-home-profile-contact .secondary-btn{min-width:94px;padding-inline:10px} #homeSection .smart-next-lesson,#homeSection .smart-next-lesson.no-schedule{grid-template-columns:minmax(0,1fr) 94px!important;padding:13px 14px!important} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{width:94px!important;min-width:94px!important} } /* v1.34.0 cascade lock — unified teacher KPI cards */ @media(max-width:900px){ body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-width:0!important;border:1px solid #DCE7F1!important;border-radius:16px!important;background:linear-gradient(145deg,#fff,#F8FBFE)!important;box-shadow:0 6px 18px rgba(11,45,87,.045)!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::before, body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::after{content:none!important;display:none!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:#65758A!important;font-weight:750!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:#2F78B7;box-shadow:0 0 0 3px #EAF3FA} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card b{color:#0B3564!important;font-weight:850!important;letter-spacing:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2),body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4),body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4){border-color:#CFE9DE!important;background:linear-gradient(145deg,#fff,#F3FBF7)!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2) span::before,body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4) span::before,body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4) span::before{background:#16805D!important;box-shadow:0 0 0 3px #E5F6EF!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1){border-color:#F0D1D5!important;background:linear-gradient(145deg,#fff,#FFF7F8)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1) span::before{background:#C64752!important;box-shadow:0 0 0 3px #FBEAEC!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2){border-color:#F0DEC0!important;background:linear-gradient(145deg,#fff,#FFFAF1)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2) span::before{background:#B77816!important;box-shadow:0 0 0 3px #FFF1D8!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2){border-color:#E9D694!important;background:linear-gradient(145deg,#fff,#FFFBEF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2) span::before{background:#D9A51E!important;box-shadow:0 0 0 3px #FFF3CF!important} } /* V1.34.23 — Quick Actions icon-system fix. Keep the four dashboard shortcuts visually aligned with the app's line-icon language. */ @media(max-width:900px){ body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{ display:grid!important;place-items:center!important; color:#2F6FA8!important;background:#EDF4FC!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{ width:18px!important;height:18px!important;display:block!important; fill:none!important;stroke:currentColor!important;stroke-width:1.8!important; stroke-linecap:round!important;stroke-linejoin:round!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg *{ fill:none!important;stroke:currentColor!important; } } /* V1.34.30 — SEO & identity stabilization; no visual changes. */ /* V1.34.30 — Teacher Home Premium QA refinement. Visual-only polish for quick actions, KPI cards, and dashboard controls. */ @media(max-width:900px){ body[data-role="teacher"] #homeSection .dashboard-quick-actions{ gap:10px!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button{ position:relative!important; min-height:92px!important; padding:12px 6px 11px!important; border:1px solid #dce6f0!important; border-radius:18px!important; background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important; box-shadow:0 7px 18px rgba(11,45,87,.045)!important; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button:active{ transform:scale(.98)!important; box-shadow:0 3px 10px rgba(11,45,87,.04)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{ width:42px!important; height:42px!important; margin:0 auto 8px!important; border-radius:14px!important; background:#eef5fc!important; color:#236aa5!important; box-shadow:inset 0 0 0 1px rgba(35,106,165,.035)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{ width:21px!important; height:21px!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{ color:#173454!important; font-size:11px!important; font-weight:750!important; line-height:1.35!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-primary{ border-color:#ead58b!important; background:linear-gradient(180deg,#fffef9 0%,#fff9e8 100%)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-primary .dashboard-action-icon{ background:#fff2c7!important; color:#a8750c!important; box-shadow:inset 0 0 0 1px rgba(168,117,12,.06)!important; } body[data-role="teacher"] #homeSection .smart-kpis{ gap:10px!important; } body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{ position:relative!important; min-height:94px!important; padding:11px 6px 10px!important; border:1px solid #dce6f0!important; border-radius:17px!important; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important; box-shadow:0 6px 16px rgba(11,45,87,.035)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; } body[data-role="teacher"] #homeSection .smart-kpi-icon{ width:28px!important; height:28px!important; display:grid!important; place-items:center!important; margin:0 auto 5px!important; border-radius:10px!important; background:#eef5fc!important; color:#2b71aa!important; } body[data-role="teacher"] #homeSection .smart-kpi-icon svg{ width:15px!important; height:15px!important; display:block!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body[data-role="teacher"] #homeSection .smart-kpi-label{ display:block!important; max-width:100%!important; color:#6b798b!important; font-size:8.7px!important; line-height:1.3!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{ margin-top:3px!important; color:#0b3564!important; font-size:19px!important; line-height:1.1!important; font-weight:850!important; } body[data-role="teacher"] #homeSection .smart-kpi-groups .smart-kpi-icon{ background:#eaf8f2!important;color:#16805d!important; } body[data-role="teacher"] #homeSection .smart-kpi-lessons .smart-kpi-icon{ background:#fff4dc!important;color:#b77816!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-icon{ background:#f1effb!important;color:#6753a7!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ font-size:11.5px!important; line-height:1.25!important; white-space:normal!important; max-height:30px!important; overflow:hidden!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-contact .secondary-btn{ min-height:36px!important; padding:8px 14px!important; border-radius:11px!important; font-size:11px!important; box-shadow:none!important; } body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn, body[data-role="teacher"] #homeSection .smart-next-lesson>.secondary-btn, body[data-role="teacher"] #homeSection .smart-dashboard-hero .secondary-btn.compact, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{ min-height:40px!important; border-radius:12px!important; font-size:11px!important; font-weight:750!important; box-shadow:none!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow{ letter-spacing:0!important; } } @media(max-width:390px){ body[data-role="teacher"] #homeSection .dashboard-quick-actions{gap:7px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions button{min-height:84px!important;padding-inline:3px!important;border-radius:16px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{width:38px!important;height:38px!important;border-radius:13px!important;margin-bottom:6px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{font-size:9.4px!important} body[data-role="teacher"] #homeSection .smart-kpis{gap:7px!important} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{min-height:88px!important;padding-inline:3px!important;border-radius:15px!important} body[data-role="teacher"] #homeSection .smart-kpi-label{font-size:7.7px!important} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{font-size:17px!important} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:10px!important} } /* V1.34.31 — Teacher Home final visual refinement. Visual-only: tighter quick actions/KPIs, compact smart follow-up, integrated schedule CTA. */ @media(max-width:900px){ body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{ width:45px!important;height:45px!important;border-radius:15px!important;margin-bottom:7px!important; background:linear-gradient(145deg,#f4f8fd 0%,#eaf3fb 100%)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{ width:23px!important;height:23px!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button{ border-color:#e1e8f0!important;box-shadow:0 6px 16px rgba(11,45,87,.035)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{ margin-top:-1px!important; } body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{ min-height:100px!important;padding-top:12px!important;padding-bottom:11px!important; } body[data-role="teacher"] #homeSection .smart-kpi-icon{ width:34px!important;height:34px!important;border-radius:11px!important;margin-bottom:6px!important; } body[data-role="teacher"] #homeSection .smart-kpi-icon svg{ width:19px!important;height:19px!important;stroke-width:1.9!important; } body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{ font-size:22px!important;margin-top:4px!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ font-size:13px!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero{ padding:0 2px!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero>div{ width:100%!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero h3{ font-size:13px!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero p{ display:block!important;font-size:10.5px!important;margin-top:3px!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{ padding:16px 17px!important;border-radius:20px!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow{ font-size:11.5px!important;font-weight:850!important;line-height:1.3!important;margin-bottom:4px!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:3px;margin-inline-end:6px; background:#d2a92c;box-shadow:0 0 0 4px #fff7dd;vertical-align:1px; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card h4{ font-size:17px!important;margin-top:4px!important; } body[data-role="teacher"] #homeSection .smart-today-mini{ padding:16px!important;border-radius:20px!important; } body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-title{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important; } body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading{ display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important; } body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading b{ font-size:19px!important;color:var(--tp-ink)!important;white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading span{ font-size:9.5px!important;color:var(--tp-muted)!important;white-space:nowrap!important; } body[data-role="teacher"] #homeSection .today-schedule-link{ flex:0 0 auto!important;min-height:34px!important;padding:7px 12px!important;border:1px solid #dce5ef!important; border-radius:11px!important;background:#f8fbff!important;color:#164b7f!important;font:inherit!important;font-size:10px!important;font-weight:800!important; } body[data-role="teacher"] #homeSection .today-schedule-link:active{transform:scale(.98)!important} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card.compact{ grid-template-columns:68px minmax(0,1fr)!important;gap:4px 12px!important;padding:13px!important;border-radius:16px!important; background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time{ display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time b{ font-size:14px!important;font-weight:850!important;color:#164b7f!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time span{ margin-top:2px!important;font-size:9.5px!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-title h4{ font-size:13.5px!important;font-weight:800!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{ min-height:34px!important;margin-top:8px!important;border-radius:10px!important;background:#fffaf0!important; } body[data-role="teacher"] #homeSection .today-schedule-empty{ padding:18px 12px!important;border:1px dashed #d9e3ed!important;border-radius:14px!important;background:#fbfdff!important; color:#748295!important;text-align:center!important;font-size:11px!important; } } @media(max-width:390px){ body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{width:40px!important;height:40px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{width:21px!important;height:21px!important} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{min-height:92px!important} body[data-role="teacher"] #homeSection .smart-kpi-icon{width:31px!important;height:31px!important} body[data-role="teacher"] #homeSection .smart-kpi-icon svg{width:17px!important;height:17px!important} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{font-size:19px!important} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:11px!important} body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading b{font-size:17px!important} body[data-role="teacher"] #homeSection .today-schedule-link{padding-inline:9px!important;font-size:9px!important} } /* v1.34.32 — Parent card export/preview QA refinement */ #parentCardModal #singleParentCardPreview{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important} #parentCardModal .paper-parent-card{border:0!important;box-shadow:none!important} /* ========================================================== V1.34.36 — CR80 PARENT CARD / PRINT-READY ID-1 Physical ratio 85.60 × 54.00 mm. Preview matches export. ========================================================== */ #parentCardModal .card-preview-modal{max-width:920px!important} #parentCardModal #singleParentCardPreview{padding:0!important;background:transparent!important;overflow:hidden!important} .paper-parent-card{ width:100%!important;aspect-ratio:85.6/54!important;min-height:0!important; display:grid!important;grid-template-columns:29.7% 48.5% 21.8%!important;grid-template-rows:1fr!important; overflow:hidden!important;border:0!important;border-radius:22px!important;background:#fff!important;box-shadow:none!important; } .paper-card-teacher{grid-row:1!important;position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:5.2% 5.5%!important;border:0!important;background:linear-gradient(160deg,#082f69 0%,#0b3f7d 100%)!important} .paper-card-teacher::after{content:"";position:absolute;inset:0 -10% 0 auto;width:28%;background:#e8ad22;clip-path:polygon(76% 0,100% 0,38% 100%,0 100%);opacity:.95} .paper-card-teacher-photo{position:relative;z-index:1;width:56%!important;height:auto!important;aspect-ratio:1!important;border:3px solid #f3bd2f!important;border-radius:20%!important;box-shadow:0 5px 14px rgba(0,0,0,.16)!important} .paper-card-teacher strong{position:relative;z-index:1;margin-top:5%!important;color:#fff!important;font-size:clamp(13px,2.1vw,23px)!important;line-height:1.1!important;white-space:nowrap} .paper-card-teacher>b{position:relative;z-index:1;margin-top:2%!important;color:#f3bd2f!important;font-size:clamp(11px,1.55vw,17px)!important;white-space:nowrap} .paper-card-teacher>small{position:relative;z-index:1;margin-top:1.5%!important;color:#dbe7f5!important;font-size:clamp(8px,1.05vw,11px)!important;white-space:nowrap} .paper-card-app-lockup{position:relative;z-index:1;display:flex;align-items:center;gap:7px;width:82%;margin-top:7%;direction:ltr;text-align:left} .paper-card-app-lockup>img{width:34px;height:34px;flex:0 0 34px;border-radius:9px}.paper-card-app-lockup>span{display:grid}.paper-card-app-lockup b{color:#fff;font-size:clamp(10px,1.45vw,15px);line-height:1}.paper-card-app-lockup small{margin-top:3px;color:#f3bd2f;font-size:clamp(7px,.9vw,10px);white-space:nowrap} .paper-card-phone{position:relative;z-index:1;margin-top:auto;color:#fff!important;font-family:Arial,Tahoma,sans-serif;font-size:clamp(10px,1.45vw,15px)!important;font-weight:800;letter-spacing:.25px} .paper-card-student{padding:7.5% 4.5% 5%!important;display:grid!important;grid-template-rows:repeat(5,1fr) auto!important;gap:2.7%!important;min-width:0} .paper-card-student-row{display:grid!important;grid-template-columns:31% 1fr!important;align-items:center!important;min-height:0!important;padding:0 4%!important;border:1px solid #e2e8f0!important;border-radius:10px!important;background:#fbfcfe!important;box-shadow:0 2px 7px rgba(10,45,90,.04)!important} .paper-card-student-row span{padding-inline-end:9%!important;border-inline-end:1.5px solid #e8ad22;color:#b8860b!important;font-size:clamp(8px,1vw,11px)!important;font-weight:800!important;white-space:nowrap} .paper-card-student-row b{padding-inline-start:6%!important;color:#101a2c!important;font-size:clamp(10px,1.35vw,15px)!important;line-height:1.2!important;overflow-wrap:anywhere!important} .paper-card-student-row .muted-login{font-size:clamp(7px,.9vw,10px)!important;color:#596579!important} .paper-card-fast-link{align-self:end;margin:1% 0 0!important;padding-top:3%!important;border-top:1.5px solid #e8ad22!important;color:#0b2f66!important;text-align:center!important} .paper-card-fast-link b{margin:0!important;font-size:clamp(8px,1vw,11px)!important}.paper-card-fast-link code{margin-top:1.5%!important;font-size:clamp(7px,.85vw,10px)!important} .paper-card-access{padding:7.5% 8% 5%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:center!important} .paper-card-qr-frame{padding:7%!important;border:2px solid #e8ad22!important;border-radius:14px!important;background:#fff!important} .paper-card-qr-frame img{width:100%!important;height:auto!important;aspect-ratio:1!important}.paper-card-qr-frame b{margin-top:3%!important;font-size:clamp(8px,1vw,11px)!important} .paper-card-scan-note{display:grid!important;grid-template-columns:30px 1fr!important;align-items:center!important;gap:6px!important;margin-top:8%!important;padding:8%!important;border-radius:12px!important;background:#0b376f!important;color:#fff!important;font-size:clamp(7px,.82vw,9px)!important;line-height:1.55!important} .paper-card-scan-note img{width:30px;height:30px;border-radius:8px}.paper-card-footer{display:none!important} @media(max-width:760px){ .paper-parent-card{display:grid!important;grid-template-columns:29.7% 48.5% 21.8%!important;aspect-ratio:85.6/54!important;border-radius:16px!important} .paper-card-teacher{padding:5.2% 5.5%!important;border:0!important}.paper-card-teacher-photo{width:56%!important;height:auto!important}.paper-card-student{padding:7.5% 4.5% 5%!important}.paper-card-student-row{grid-template-columns:31% 1fr!important}.paper-card-access{padding:7.5% 8% 5%!important}.paper-card-qr-frame{max-width:none!important;margin:0!important}.paper-card-footer{display:none!important} } /* ========================================================== V1.34.36 — CR80 PARENT CARD PREMIUM PRINT REFINEMENT Matches ISO ID-1 ratio and the 300-DPI export generator. ========================================================== */ .paper-parent-card{grid-template-columns:23.5% 51.2% 25.3%!important;border-radius:18px!important} .paper-card-teacher{padding:4.5% 4.5%!important} .paper-card-teacher::after{width:18%!important;inset:0 -5% 0 auto!important;clip-path:polygon(72% 0,100% 0,32% 100%,0 100%)!important} .paper-card-teacher-photo{width:61%!important;border-width:2.5px!important;border-radius:19%!important;box-shadow:0 4px 11px rgba(0,0,0,.14)!important} .paper-card-teacher strong{margin-top:4.5%!important;font-size:clamp(12px,1.75vw,20px)!important} .paper-card-teacher>b{margin-top:1.7%!important;font-size:clamp(10px,1.25vw,15px)!important} .paper-card-teacher>small{margin-top:1.2%!important;font-size:clamp(7px,.82vw,10px)!important} .paper-card-app-lockup{width:78%!important;margin-top:6%!important;gap:6px!important} .paper-card-app-lockup>img{width:29px!important;height:29px!important;flex-basis:29px!important;border-radius:8px!important} .paper-card-app-lockup b{font-size:clamp(9px,1.15vw,13px)!important}.paper-card-app-lockup small{font-size:clamp(6px,.68vw,8px)!important} .paper-card-phone{font-size:clamp(9px,1.15vw,13px)!important} .paper-card-student{padding:6.2% 3.4% 4.3%!important;gap:2.2%!important} .paper-card-student-row{grid-template-columns:29% 1fr!important;padding:0 3%!important;border-color:#e5eaf1!important;border-radius:9px!important;box-shadow:0 1px 4px rgba(10,45,90,.035)!important} .paper-card-student-row span{padding-inline-end:7%!important;border-inline-end-width:1px!important;font-size:clamp(7px,.85vw,10px)!important} .paper-card-student-row b{padding-inline-start:4.5%!important;font-size:clamp(9px,1.13vw,13px)!important}.paper-card-student-row .muted-login{font-size:clamp(6px,.72vw,8.5px)!important} .paper-card-fast-link{padding-top:2.3%!important;border-top-width:1px!important}.paper-card-fast-link b{font-size:clamp(7px,.86vw,10px)!important}.paper-card-fast-link code{font-size:clamp(6px,.72vw,8.5px)!important} .paper-card-access{padding:6.2% 7% 4.3%!important} .paper-card-qr-frame{padding:6%!important;border-width:1.5px!important;border-radius:12px!important}.paper-card-qr-frame b{font-size:clamp(7px,.84vw,10px)!important} .paper-card-scan-note{grid-template-columns:25px 1fr!important;gap:5px!important;margin-top:6%!important;padding:6%!important;border-radius:10px!important;font-size:clamp(6px,.72vw,8.5px)!important;line-height:1.35!important}.paper-card-scan-note img{width:25px!important;height:25px!important;border-radius:7px!important} @media(max-width:760px){.paper-parent-card{grid-template-columns:23.5% 51.2% 25.3%!important}} /* v1.34.36 — CR80 parent card print hierarchy refinement */ #parentCardModal .paper-parent-card, #cardsSection .paper-parent-card{grid-template-columns:24.5% 51% 24.5%!important;aspect-ratio:85.6/54!important;background:#fff!important} #parentCardModal .paper-card-teacher, #cardsSection .paper-card-teacher{padding:4.2% 4.2%!important} #parentCardModal .paper-card-teacher-photo, #cardsSection .paper-card-teacher-photo{width:64%!important;border-width:3px!important} #parentCardModal .paper-card-teacher strong, #cardsSection .paper-card-teacher strong{font-size:clamp(15px,2.05vw,24px)!important;margin-top:4%!important} #parentCardModal .paper-card-teacher>b, #cardsSection .paper-card-teacher>b{font-size:clamp(12px,1.55vw,18px)!important} #parentCardModal .paper-card-teacher>small, #cardsSection .paper-card-teacher>small{font-size:clamp(9px,1vw,12px)!important} #parentCardModal .paper-card-app-lockup, #cardsSection .paper-card-app-lockup{margin-top:8%!important} #parentCardModal .paper-card-student, #cardsSection .paper-card-student{padding:5.5% 3.5% 4%!important;display:grid!important;grid-template-rows:repeat(5,minmax(0,1fr)) auto!important;gap:2.4%!important} #parentCardModal .paper-card-student-row, #cardsSection .paper-card-student-row{grid-template-columns:31% 1fr!important;min-height:0!important;padding:0 3%!important;border-radius:10px!important} #parentCardModal .paper-card-student-row span, #cardsSection .paper-card-student-row span{font-size:clamp(10px,1.12vw,13px)!important} #parentCardModal .paper-card-student-row b, #cardsSection .paper-card-student-row b{font-size:clamp(13px,1.5vw,18px)!important} #parentCardModal .paper-card-student-row .muted-login, #cardsSection .paper-card-student-row .muted-login{font-size:clamp(9px,1vw,12px)!important} #parentCardModal .paper-card-fast-link, #cardsSection .paper-card-fast-link{margin-top:1%!important;padding-top:2%!important;border-top:1px solid #e8ad22!important} #parentCardModal .paper-card-fast-link b, #cardsSection .paper-card-fast-link b{font-size:clamp(10px,1.2vw,14px)!important} #parentCardModal .paper-card-fast-link code, #cardsSection .paper-card-fast-link code{font-size:clamp(9px,1vw,12px)!important} #parentCardModal .paper-card-access, #cardsSection .paper-card-access{padding:5.5% 6% 4%!important} #parentCardModal .paper-card-qr-frame b, #cardsSection .paper-card-qr-frame b{font-size:clamp(10px,1.05vw,13px)!important} #parentCardModal .paper-card-scan-note, #cardsSection .paper-card-scan-note{font-size:clamp(9px,.95vw,12px)!important;padding:10px!important} /* ========================================================== V1.34.39 — PARENT CARD COMPONENT REBUILD Exact CR80 / ISO ID-1 preview. The preview is the same 300-DPI render used by PNG/PDF, preventing mobile CSS drift. ========================================================== */ #parentCardModal .card-preview-modal{ width:min(96vw,980px)!important; max-width:980px!important; padding:20px!important; } #parentCardModal .modal-head{margin-bottom:14px!important} #parentCardModal #singleParentCardPreview{ width:100%!important; padding:10px!important; display:flex!important; justify-content:center!important; align-items:center!important; overflow:auto!important; background:#f4f7fb!important; border:1px solid #e3e9f1!important; border-radius:18px!important; } .paper-parent-card.paper-parent-card-render{ display:block!important; width:min(100%,856px)!important; aspect-ratio:85.6/53.98!important; min-height:0!important; overflow:hidden!important; border:0!important; border-radius:17px!important; background:#fff!important; box-shadow:0 14px 34px rgba(12,42,76,.12)!important; } .paper-parent-card-image{ display:block!important; width:100%!important; height:100%!important; object-fit:fill!important; border:0!important; margin:0!important; padding:0!important; } #cardsSection .parent-cards-grid{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))!important; gap:16px!important; } #cardsSection .paper-parent-card.paper-parent-card-render{width:100%!important} #parentCardModal .card-modal-actions{margin-top:14px!important;gap:10px!important} @media(max-width:760px){ #parentCardModal .card-preview-modal{width:100vw!important;max-width:none!important;padding:16px 12px 18px!important;border-radius:28px 28px 0 0!important} #parentCardModal #singleParentCardPreview{padding:5px!important;border-radius:15px!important} #parentCardModal .paper-parent-card.paper-parent-card-render{width:100%!important;border-radius:12px!important;box-shadow:0 8px 22px rgba(12,42,76,.10)!important} #parentCardModal .card-modal-actions{display:grid!important;grid-template-columns:1fr 1fr!important} #parentCardModal .card-modal-actions button{width:100%!important;min-width:0!important} } /* ========================================================== V1.34.39 — PARENT CARD PREMIUM CR80 The modal behaves like a real card preview, while export keeps the exact 85.60 × 53.98 mm physical ratio. ========================================================== */ #parentCardModal .card-preview-modal{ width:min(98vw,1040px)!important; max-width:1040px!important; padding:18px!important; } #parentCardModal #singleParentCardPreview{ padding:0!important; background:transparent!important; border:0!important; border-radius:18px!important; overflow:hidden!important; } #parentCardModal .paper-parent-card.paper-parent-card-render{ width:100%!important; max-width:960px!important; margin:0 auto!important; aspect-ratio:85.6/53.98!important; border-radius:18px!important; box-shadow:0 18px 44px rgba(10,47,98,.16)!important; } #parentCardModal .card-modal-actions{ justify-content:center!important; margin-top:16px!important; } #parentCardModal .card-modal-actions button{ min-width:190px!important; } @media(max-width:760px){ #parentCardModal .card-preview-modal{ width:100vw!important; max-width:none!important; padding:14px 10px 18px!important; } #parentCardModal .modal-head{margin-bottom:10px!important} #parentCardModal .paper-parent-card.paper-parent-card-render{ width:100%!important; max-width:none!important; border-radius:12px!important; box-shadow:0 10px 26px rgba(10,47,98,.12)!important; } #parentCardModal .card-modal-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } #parentCardModal .card-modal-actions button{ min-width:0!important; width:100%!important; padding-inline:8px!important; } } /* ========================================================== V1.35.7 — PREMIUM MOBILE LOGIN POLISH Visual-only refinement. Authentication flow and IDs preserved. ========================================================== */ @media(max-width:900px){ body:has(#loginView:not(.hidden)){ min-height:100dvh!important; background:#061a33!important; } #loginView.login-shell:not(.hidden){ position:relative!important; isolation:isolate!important; display:flex!important; width:100%!important; min-height:100dvh!important; padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom))!important; align-items:center!important; justify-content:center!important; overflow:auto!important; background: radial-gradient(70% 44% at 50% -3%,rgba(37,111,172,.34) 0%,rgba(16,65,110,.12) 52%,transparent 78%), radial-gradient(54% 36% at 105% 78%,rgba(232,173,34,.085) 0%,transparent 70%), linear-gradient(155deg,#0b3b70 0%,#082d57 42%,#061a33 100%)!important; } #loginView.login-shell:not(.hidden)::before{ content:""!important; position:fixed!important; inset:0!important; z-index:-2!important; pointer-events:none!important; opacity:1!important; background: linear-gradient(125deg,transparent 0 41%,rgba(255,255,255,.025) 41.2% 41.45%,transparent 41.7% 100%), linear-gradient(40deg,transparent 0 68%,rgba(244,185,40,.025) 68.2% 68.45%,transparent 68.7% 100%)!important; mask-image:none!important; } #loginView.login-shell:not(.hidden)::after{ content:""; position:fixed; inset:auto -90px -120px auto; z-index:-1; width:330px; height:330px; border:1px solid rgba(255,255,255,.055); border-radius:50%; box-shadow:0 0 0 56px rgba(255,255,255,.018),0 0 0 112px rgba(255,255,255,.012); pointer-events:none; } #loginView .login-card{ position:relative!important; width:min(100%,414px)!important; max-width:414px!important; margin:0 auto!important; padding:26px 22px 21px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.82)!important; border-radius:30px!important; background:rgba(255,255,255,.985)!important; color:#142840!important; box-shadow:0 30px 70px rgba(0,15,35,.34),0 1px 0 rgba(255,255,255,.92) inset!important; backdrop-filter:blur(18px)!important; } #loginView .login-card::before{ height:3px!important; background:linear-gradient(90deg,#efb627 0%,#ffd96f 38%,#62a0ca 100%)!important; } #loginView .login-product-lockup{ gap:13px!important; margin:0 0 14px!important; } #loginView .login-product-lockup .mini-logo{ width:64px!important; height:64px!important; flex:0 0 64px!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(232,173,34,.72)!important; border-radius:19px!important; background:#0a376c!important; box-shadow:0 10px 24px rgba(8,45,87,.2),0 0 0 4px rgba(244,185,40,.09)!important; } #loginView .login-product-lockup .mini-logo img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } #loginView .login-product-lockup strong{ font-size:21px!important; font-weight:900!important; letter-spacing:-.2px!important; color:#102d4d!important; } #loginView .login-product-lockup small{ margin-top:2px!important; font-size:10.5px!important; font-weight:700!important; letter-spacing:.55px!important; color:#8a96a7!important; } #loginView .login-kicker{ margin:0 auto 9px!important; padding:5px 11px!important; border:1px solid #f0dfaa!important; background:#fff7df!important; color:#8b6507!important; font-size:9.7px!important; font-weight:850!important; } #loginView .login-card h2{ font-size:25px!important; font-weight:900!important; letter-spacing:-.35px!important; color:#102945!important; } #loginView #loginIntro{ max-width:330px!important; margin:4px auto 18px!important; font-size:11.2px!important; line-height:1.75!important; color:#758397!important; } #loginView .login-field-label{ margin-top:12px!important; color:#31465f!important; font-size:10.8px!important; font-weight:850!important; } #loginView .login-input-wrap{ position:relative!important; display:block!important; margin-top:6px!important; } #loginView .login-input-wrap .login-field-icon{ position:absolute!important; right:14px!important; top:50%!important; z-index:2!important; width:18px!important; height:18px!important; transform:translateY(-50%)!important; fill:none!important; stroke:#7890a8!important; stroke-width:1.65!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } #loginView .login-input-wrap input{ height:54px!important; min-height:54px!important; margin:0!important; padding:11px 43px 11px 14px!important; border:1px solid #dbe4ee!important; border-radius:15px!important; background:#f8fafc!important; color:#172b44!important; box-shadow:0 1px 2px rgba(18,48,80,.025) inset!important; font-size:12.5px!important; font-weight:700!important; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important; } #loginView .login-input-wrap input:hover{border-color:#c9d6e4!important} #loginView .login-input-wrap:focus-within .login-field-icon{stroke:#145b92!important} #loginView .login-input-wrap input:focus{ border-color:#1b639c!important; background:#fff!important; box-shadow:0 0 0 4px rgba(27,99,156,.1),0 5px 14px rgba(15,69,113,.04)!important; } #loginView .password-wrap input{padding-left:48px!important} #loginView .password-wrap .icon-btn{ left:8px!important; top:50%!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; transform:translateY(-50%)!important; border:0!important; border-radius:10px!important; background:transparent!important; color:#6f8298!important; } #loginView .password-wrap .icon-btn svg{ display:block!important; width:19px!important; height:19px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; } #loginView .password-wrap .icon-btn:hover, #loginView .password-wrap .icon-btn:focus-visible{ background:#edf3f8!important; color:#174f80!important; outline:none!important; } #loginView #loginBtn{ height:54px!important; min-height:54px!important; margin-top:19px!important; border-radius:15px!important; background:linear-gradient(135deg,#0d4a82 0%,#082d57 100%)!important; box-shadow:0 12px 25px rgba(8,45,87,.22),0 1px 0 rgba(255,255,255,.12) inset!important; font-size:13px!important; font-weight:900!important; letter-spacing:.05px!important; transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important; } #loginView #loginBtn:hover{filter:brightness(1.035)!important;box-shadow:0 14px 28px rgba(8,45,87,.25)!important} #loginView #loginBtn:active{transform:translateY(1px) scale(.995)!important;box-shadow:0 7px 16px rgba(8,45,87,.18)!important} #loginView #loginBtn:disabled{opacity:.72!important;cursor:wait!important;filter:saturate(.85)!important} #loginView #loginBtn::after{margin-right:9px!important;color:#f4bf33!important;font-size:14px!important} #loginView .forgot-password-entry{ margin-top:11px!important; padding:7px 10px!important; color:#285579!important; font-size:10.6px!important; border-radius:9px!important; } #loginView .forgot-password-entry:hover{background:#f2f6fa!important;color:#123f6d!important} #loginView .teacher-signup-entry{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; min-height:58px!important; margin-top:11px!important; padding:10px 14px!important; border:1px solid #ead58d!important; border-radius:15px!important; background:linear-gradient(180deg,#fffdf7,#fff9eb)!important; color:#163b62!important; box-shadow:0 4px 14px rgba(153,108,0,.035)!important; text-align:right!important; } #loginView .teacher-signup-entry::before{display:none!important;content:none!important} #loginView .teacher-signup-entry .signup-copy{display:grid!important;gap:1px!important;text-align:right!important} #loginView .teacher-signup-entry .signup-copy small{color:#8792a1!important;font-size:9.6px!important;font-weight:650!important} #loginView .teacher-signup-entry .signup-copy strong{color:#775800!important;font-size:11.4px!important;font-weight:900!important} #loginView .teacher-signup-entry .signup-arrow{ display:grid!important; place-items:center!important; flex:0 0 32px!important; width:32px!important; height:32px!important; border-radius:10px!important; background:#fff3ca!important; color:#8e6804!important; font-size:14px!important; transition:transform .16s ease!important; } #loginView .teacher-signup-entry:hover{border-color:#dfc66f!important;background:#fffaf0!important} #loginView .teacher-signup-entry:hover .signup-arrow{transform:translateX(-2px)!important} #loginView #loginMessage{margin-top:11px!important;padding:9px 11px!important;font-size:10.5px!important} #loginView #loginNote{display:none!important} } @media(max-width:380px){ #loginView.login-shell:not(.hidden){padding-inline:13px!important} #loginView .login-card{padding:22px 16px 18px!important;border-radius:26px!important} #loginView .login-product-lockup .mini-logo{width:58px!important;height:58px!important;flex-basis:58px!important;border-radius:17px!important} #loginView .login-product-lockup strong{font-size:19.5px!important} #loginView .login-card h2{font-size:23px!important} #loginView #loginIntro{margin-bottom:15px!important} #loginView .login-input-wrap input{height:52px!important;min-height:52px!important} #loginView #loginBtn{height:52px!important;min-height:52px!important} } /* Use the actual installed TABEA ONE application icon in the mobile app header. */ @media(max-width:900px){ .mobile-platform-mark.app-icon-mark, .app-header .brand-mark.app-icon-mark{ overflow:hidden!important; padding:0!important; border:1px solid rgba(232,173,34,.58)!important; background:#0a376c!important; box-shadow:0 4px 12px rgba(8,45,87,.12)!important; } .mobile-platform-mark.app-icon-mark img, .app-header .brand-mark.app-icon-mark img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } } /* ========================================================== V1.35.8 — LOGIN FINAL VISUAL REFINEMENT Login-only visual polish. No authentication/business logic changed. ========================================================== */ @media(max-width:900px){ #loginView.login-shell:not(.hidden){ padding-inline:16px!important; background: radial-gradient(72% 38% at 50% -4%,rgba(40,116,177,.38) 0%,rgba(15,65,111,.14) 54%,transparent 78%), radial-gradient(42% 28% at 96% 72%,rgba(239,182,39,.07) 0%,transparent 72%), linear-gradient(158deg,#0b3c70 0%,#082d57 43%,#061a33 100%)!important; } #loginView .login-card{ width:min(100%,402px)!important; max-width:402px!important; padding:24px 20px 18px!important; border-radius:29px!important; border-color:rgba(255,255,255,.9)!important; background: radial-gradient(150px 92px at 50% 0,rgba(244,185,40,.055),transparent 72%), rgba(255,255,255,.992)!important; box-shadow: 0 28px 66px rgba(0,15,35,.31), 0 10px 24px rgba(7,34,65,.07), 0 1px 0 rgba(255,255,255,.95) inset!important; } #loginView .login-card::before{ height:3px!important; background:linear-gradient(90deg,#f0b522 0%,#f7ca54 36%,#77a9c9 78%,#3e7ba6 100%)!important; } #loginView .login-product-lockup{ gap:12px!important; margin-bottom:12px!important; } #loginView .login-product-lockup .mini-logo{ width:68px!important; height:68px!important; flex-basis:68px!important; border-radius:20px!important; border-color:rgba(232,173,34,.78)!important; box-shadow: 0 10px 23px rgba(8,45,87,.19), 0 0 0 4px rgba(244,185,40,.075)!important; } #loginView .login-product-lockup strong{ font-size:21.5px!important; line-height:1.15!important; color:#0e2d4e!important; } #loginView .login-product-lockup small{ margin-top:3px!important; color:#8a96a6!important; font-size:10px!important; letter-spacing:.72px!important; } #loginView .login-kicker{ margin-bottom:8px!important; padding:5px 12px!important; border-radius:999px!important; border-color:#ecd995!important; background:#fff8e5!important; color:#806007!important; font-size:9.5px!important; } #loginView .login-card h2{ margin:0!important; font-size:25.5px!important; line-height:1.35!important; color:#102a48!important; } #loginView #loginIntro{ margin:4px auto 15px!important; max-width:315px!important; color:#778599!important; font-size:11px!important; line-height:1.65!important; } #loginView .login-field-label{ margin-top:10px!important; color:#29425e!important; font-size:10.7px!important; } #loginView .login-input-wrap{margin-top:5px!important} #loginView .login-input-wrap input{ height:52px!important; min-height:52px!important; border-radius:14px!important; border-color:#d8e2ed!important; background:#f9fbfd!important; color:#17304d!important; font-size:12.2px!important; } #loginView .login-input-wrap input::placeholder{ color:#9aa7b7!important; font-weight:650!important; } #loginView .login-input-wrap .login-field-icon{ width:18px!important; height:18px!important; stroke:#8093a7!important; stroke-width:1.7!important; } #loginView .login-input-wrap:focus-within .login-field-icon{stroke:#155b92!important} #loginView .login-input-wrap input:focus{ border-color:#1b639c!important; box-shadow:0 0 0 3px rgba(27,99,156,.095),0 6px 16px rgba(15,69,113,.045)!important; } #loginView .password-wrap .icon-btn{ left:7px!important; width:36px!important; height:36px!important; border-radius:9px!important; color:#71869b!important; } #loginView #loginBtn{ height:52px!important; min-height:52px!important; margin-top:17px!important; border-radius:14px!important; background:linear-gradient(135deg,#12568e 0%,#0b3c70 48%,#082d57 100%)!important; box-shadow:0 12px 25px rgba(8,45,87,.2),0 1px 0 rgba(255,255,255,.14) inset!important; font-size:13.2px!important; } #loginView #loginBtn::after{ margin-right:8px!important; color:#f4c13a!important; font-size:13px!important; } #loginView .forgot-password-entry{ margin-top:8px!important; padding:7px 11px!important; color:#285579!important; font-size:10.4px!important; } #loginView .teacher-signup-entry{ min-height:56px!important; margin-top:8px!important; padding:9px 12px 9px 13px!important; border-radius:14px!important; border-color:#e7d083!important; background:linear-gradient(180deg,#fffdf8 0%,#fff9e9 100%)!important; box-shadow:none!important; } #loginView .teacher-signup-entry .signup-copy{gap:2px!important} #loginView .teacher-signup-entry .signup-copy small{ color:#8995a4!important; font-size:9.4px!important; } #loginView .teacher-signup-entry .signup-copy strong{ color:#765700!important; font-size:11.2px!important; } #loginView .teacher-signup-entry .signup-arrow{ width:30px!important; height:30px!important; flex-basis:30px!important; border-radius:9px!important; background:#fff2c5!important; color:#876407!important; font-size:13px!important; } } @media(max-width:380px){ #loginView .login-card{padding:21px 15px 16px!important;border-radius:25px!important} #loginView .login-product-lockup .mini-logo{width:61px!important;height:61px!important;flex-basis:61px!important;border-radius:18px!important} #loginView .login-product-lockup strong{font-size:20px!important} #loginView .login-card h2{font-size:23px!important} #loginView #loginIntro{margin-bottom:12px!important} #loginView .login-input-wrap input,#loginView #loginBtn{height:50px!important;min-height:50px!important} } /* ========================================================== V1.35.9 — LOGIN IDENTITY FINAL POLISH Visual-only refinement. Keeps authentication/business logic intact. Arabic product name is "تابع ون". ========================================================== */ @media(max-width:900px){ #loginView .login-product-lockup{ margin-bottom:8px!important; } #loginView .login-product-lockup .mini-logo{ width:74px!important; height:74px!important; flex-basis:74px!important; border-radius:21px!important; box-shadow: 0 12px 26px rgba(8,45,87,.20), 0 0 0 4px rgba(244,185,40,.085), 0 0 24px rgba(244,185,40,.07)!important; } #loginView .login-product-lockup strong{ font-size:22px!important; letter-spacing:0!important; } #loginView .login-kicker{ max-width:100%!important; margin:12px auto 5px!important; padding:5px 11px!important; font-size:9.1px!important; line-height:1.55!important; white-space:normal!important; } #loginView .login-card h2{ margin-top:-1px!important; } #loginView #loginIntro{ margin-top:2px!important; margin-bottom:14px!important; } #loginView .login-input-wrap input::placeholder{ color:#a8b3c1!important; font-weight:600!important; } #loginView #loginBtn{ position:relative!important; overflow:hidden!important; background: linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 31%), linear-gradient(135deg,#125b95 0%,#0b3e73 50%,#082d57 100%)!important; } #loginView #loginBtn:active{ transform:translateY(1px) scale(.997)!important; box-shadow:0 7px 17px rgba(8,45,87,.18),0 1px 0 rgba(255,255,255,.12) inset!important; } #loginView .teacher-signup-entry .signup-arrow{ width:27px!important; height:27px!important; flex-basis:27px!important; border-radius:8px!important; font-size:12px!important; } } @media(max-width:380px){ #loginView .login-product-lockup .mini-logo{ width:66px!important; height:66px!important; flex-basis:66px!important; border-radius:19px!important; } #loginView .login-kicker{ font-size:8.5px!important; padding-inline:9px!important; } } /* ========================================================== v1.36.3 — Teacher Home Premium Polish Dashboard-only refinement. No auth/payment/backend changes. ========================================================== */ @media(max-width:900px){ body[data-role="teacher"] #homeSection .teacher-home-profile-hero{ gap:18px!important; padding:22px 22px 20px!important; border-radius:28px!important; box-shadow:0 16px 36px rgba(8,45,87,.16)!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-copy{ align-self:center!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-copy .eyebrow{ margin-bottom:6px!important; color:#f0cf69!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-copy h2{ margin-bottom:3px!important; letter-spacing:-.25px!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-copy>b{ display:block!important; color:#ffd45a!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ background:rgba(255,255,255,.075)!important; border-color:rgba(255,255,255,.22)!important; backdrop-filter:blur(6px)!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit{ min-width:84px!important; padding-inline:11px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit>span{ font-size:14px!important; line-height:1!important; } body[data-role="teacher"] #homeSection .smart-next-lesson, body[data-role="teacher"] #homeSection .smart-next-lesson.no-schedule{ border-color:#d7e3ee!important; background:linear-gradient(135deg,#ffffff 0%,#f4f9fd 100%)!important; box-shadow:0 8px 22px rgba(8,45,87,.055)!important; } body[data-role="teacher"] #homeSection .smart-next-copy>b{ background:#eaf4fb!important; color:#164f82!important; font-weight:800!important; } body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn{ transition:transform .14s ease,filter .14s ease!important; } body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn:active{ transform:scale(.975)!important; filter:brightness(.96)!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button, body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{ transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important; } body[data-role="teacher"] #homeSection .dashboard-quick-actions button:active, body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi:active{ transform:translateY(1px) scale(.985)!important; } body[data-role="teacher"] #homeSection .dashboard-action-primary{ border-color:#ead58f!important; background:linear-gradient(180deg,#fffdf6 0%,#fff9e8 100%)!important; } body[data-role="teacher"] #homeSection .dashboard-action-primary .dashboard-action-icon{ background:linear-gradient(145deg,#fff3c6,#ffe89a)!important; color:#9a6b00!important; } body[data-role="teacher"] #homeSection .smart-kpi-next{ border-color:#dfd09b!important; background:linear-gradient(180deg,#fffdf8 0%,#fff9e9 100%)!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-icon{ background:#fff0bc!important; color:#a27308!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ color:#7c5c0c!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{ border-color:#e0e6ee!important; box-shadow:0 8px 22px rgba(8,45,87,.045)!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{ background:#f7faff!important; border-color:#dbe5ef!important; color:#174d7e!important; } body[data-role="teacher"] #homeSection .smart-today-mini{ box-shadow:0 10px 26px rgba(8,45,87,.05)!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card.compact{ border-color:#e1e8ef!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{ font-weight:850!important; transition:transform .14s ease,background .14s ease!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn:active{ transform:scale(.985)!important; background:#fff4cf!important; } } @media(max-width:390px){ body[data-role="teacher"] #homeSection .teacher-home-profile-hero{padding:19px!important;gap:14px!important} body[data-role="teacher"] #homeSection .teacher-profile-edit{min-width:76px!important;padding-inline:9px!important} } /* ========================================================== v1.36.4 — Teacher Home Final Premium Refinement Home-only visual/wording polish; no backend/payment changes. ========================================================== */ @media(max-width:900px){ body[data-role="teacher"] #homeSection .teacher-profile-edit{ width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important; padding:0!important;border-radius:13px!important;background:rgba(255,255,255,.94)!important; color:#153d69!important;border-color:rgba(255,255,255,.62)!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{ font-size:17px!important;margin:0!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit-label{display:none!important} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ grid-template-columns:minmax(0,1fr) 42px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block{min-width:0!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{overflow:hidden!important;text-overflow:ellipsis!important} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before{ content:"▶";display:inline-block;margin-inline-end:7px;color:currentColor;font-size:10px;transform:translateY(-.5px); } body[data-role="teacher"] #homeSection .smart-kpi-next{ min-height:100px!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ display:block!important;max-height:none!important;overflow:visible!important;text-overflow:clip!important; white-space:nowrap!important;font-size:12.5px!important;line-height:1.2!important;letter-spacing:-.15px!important; } body[data-role="teacher"] #homeSection .smart-alert-summary-chips{ display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:9px!important; } body[data-role="teacher"] #homeSection .smart-alert-summary-chips span{ display:inline-flex!important;align-items:center!important;min-height:25px!important;padding:4px 8px!important; border-radius:999px!important;background:#f5f8fc!important;border:1px solid #e2e8f0!important; color:#5f6f83!important;font-size:9.5px!important;font-weight:800!important;white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card.has-urgent .smart-alert-summary-chips span:first-child{ background:#fff3f3!important;border-color:#f0d4d4!important;color:#a33b46!important; } body[data-role="teacher"] #homeSection .today-schedule-link{ min-width:auto!important;padding-inline:11px!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{ content:"▶";display:inline-block;margin-inline-end:6px;font-size:9px;color:#9a700f; } body[data-role="teacher"] .app-header .brand-mark.small{ width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:13px!important; } body[data-role="teacher"] #homeSection .teacher-home-profile-hero, body[data-role="teacher"] #homeSection .smart-next-lesson, body[data-role="teacher"] #homeSection .dashboard-quick-actions, body[data-role="teacher"] #homeSection .smart-kpis, body[data-role="teacher"] #homeSection .smart-dashboard-hero, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{ animation:tabeaHomeReveal .28s ease both; } body[data-role="teacher"] #homeSection .smart-next-lesson{animation-delay:.03s} body[data-role="teacher"] #homeSection .dashboard-quick-actions{animation-delay:.05s} body[data-role="teacher"] #homeSection .smart-kpis{animation-delay:.07s} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{animation-delay:.09s} body[data-role="teacher"] #homeSection .smart-today-mini{animation-delay:.11s} } @keyframes tabeaHomeReveal{ from{opacity:.45;transform:translateY(5px)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ body[data-role="teacher"] #homeSection .teacher-home-profile-hero, body[data-role="teacher"] #homeSection .smart-next-lesson, body[data-role="teacher"] #homeSection .dashboard-quick-actions, body[data-role="teacher"] #homeSection .smart-kpis, body[data-role="teacher"] #homeSection .smart-dashboard-hero, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{animation:none!important} } @media(max-width:390px){ body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:10.5px!important} body[data-role="teacher"] .app-header .brand-mark.small{width:40px!important;height:40px!important;flex-basis:40px!important} body[data-role="teacher"] #homeSection .today-schedule-link{font-size:8.5px!important;padding-inline:8px!important} } /* ========================================================== v1.36.5 — Teacher Home RTL Text Stabilization Fixes Arabic edge clipping + compact next-session KPI only. No auth/backend/payment behavior changes. ========================================================== */ @media(max-width:900px){ /* Arabic glyphs such as the leading alef must have breathing room. Keep the block inside the home grid while allowing font overhangs. */ body[data-role="teacher"] #homeSection .smart-dashboard-hero{ width:100%!important; max-width:100%!important; padding-inline:8px!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero>div{ min-width:0!important; width:100%!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{ width:auto!important; max-width:100%!important; padding-inline:2px!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; line-height:1.75!important; } /* Keep the short KPI label/value on one clean line without clipping. */ body[data-role="teacher"] #homeSection .smart-kpi-next{ padding-inline:4px!important; overflow:hidden!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{ width:100%!important; max-width:100%!important; padding-inline:1px!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; font-size:8.2px!important; line-height:1.35!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ width:100%!important; max-width:100%!important; margin-top:4px!important; padding-inline:1px!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; direction:rtl!important; unicode-bidi:plaintext!important; text-align:center!important; font-size:10px!important; line-height:1.25!important; letter-spacing:-.2px!important; } } @media(max-width:390px){ body[data-role="teacher"] #homeSection .smart-dashboard-hero{padding-inline:7px!important} body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{font-size:7.7px!important} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:9px!important;letter-spacing:-.28px!important} } @media(max-width:350px){ body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{font-size:7.2px!important} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:8.3px!important} } /* ========================================================== v1.36.8 — Teacher Home Stabilization + Version Sync Clean override layer; fixes malformed escaped CSS from prior builds. ========================================================== */ @media (max-width:900px){ /* Contact strip: both action tiles are the exact same footprint. */ body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ --teacher-contact-action-size:42px; display:grid!important; grid-template-columns:minmax(0,1fr) var(--teacher-contact-action-size)!important; align-items:center!important; gap:10px!important; padding:12px 14px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block{ min-width:0!important; display:flex!important; align-items:center!important; gap:10px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-icon, body[data-role="teacher"] #homeSection .teacher-profile-edit{ width:var(--teacher-contact-action-size)!important; min-width:var(--teacher-contact-action-size)!important; max-width:var(--teacher-contact-action-size)!important; height:var(--teacher-contact-action-size)!important; min-height:var(--teacher-contact-action-size)!important; max-height:var(--teacher-contact-action-size)!important; flex:0 0 var(--teacher-contact-action-size)!important; box-sizing:border-box!important; border-radius:13px!important; padding:0!important; margin:0!important; display:grid!important; place-items:center!important; line-height:1!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-icon{font-size:18px!important} body[data-role="teacher"] #homeSection .teacher-profile-edit{font-size:0!important} body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{ display:block!important; margin:0!important; padding:0!important; font-size:17px!important; line-height:1!important; transform:none!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit-label{display:none!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block>div{min-width:0!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{ overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Next-session CTA alignment. */ body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{ margin:0!important; flex:0 0 auto!important; } /* Next-session KPI stays contained and readable on narrow phones. */ body[data-role="teacher"] #homeSection .smart-kpi-next{ padding:11px 6px 9px!important; overflow:hidden!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{ font-size:8px!important; line-height:1.3!important; white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:wrap!important; gap:3px 5px!important; width:100%!important; margin-top:6px!important; padding:0 2px!important; overflow:visible!important; direction:rtl!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit{ display:inline-flex!important; align-items:baseline!important; gap:2px!important; white-space:nowrap!important; color:#0b3c6c!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{ font-size:14px!important; line-height:1!important; font-weight:900!important; font-variant-numeric:tabular-nums!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{ font-size:7.5px!important; line-height:1!important; font-weight:850!important; color:#60778e!important; } /* RTL-safe date and summary text. */ body[data-role="teacher"] #homeSection .smart-dashboard-hero{ box-sizing:border-box!important; padding-inline:14px!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{ box-sizing:border-box!important; padding-inline:4px!important; overflow:visible!important; line-height:1.7!important; } body[data-role="teacher"] #homeSection .today-schedule-link{ min-height:36px!important; padding:8px 12px!important; border-radius:11px!important; white-space:nowrap!important; } } @media (max-width:390px){ body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ --teacher-contact-action-size:40px; gap:9px!important; padding-inline:12px!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{font-size:13px!important} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{font-size:7px!important} body[data-role="teacher"] #homeSection .smart-dashboard-hero{padding-inline:12px!important} } /* ========================================================== v1.36.9 — Teacher Home FINAL visual lock Final responsive polish only. No business logic changes. ========================================================== */ @media (max-width:900px){ /* Hero contact rail: one calm information row + equal 42px actions. */ body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ --teacher-contact-action-size:42px; grid-template-columns:minmax(0,1fr) var(--teacher-contact-action-size)!important; align-items:center!important; gap:10px!important; padding:11px 12px!important; border-color:rgba(255,255,255,.23)!important; background:rgba(255,255,255,.055)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block{ min-width:0!important; display:grid!important; grid-template-columns:var(--teacher-contact-action-size) minmax(0,1fr)!important; align-items:center!important; gap:10px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-icon, body[data-role="teacher"] #homeSection .teacher-profile-edit{ width:var(--teacher-contact-action-size)!important; min-width:var(--teacher-contact-action-size)!important; max-width:var(--teacher-contact-action-size)!important; height:var(--teacher-contact-action-size)!important; min-height:var(--teacher-contact-action-size)!important; max-height:var(--teacher-contact-action-size)!important; border-radius:13px!important; display:grid!important; place-items:center!important; padding:0!important; margin:0!important; box-sizing:border-box!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-icon{ background:rgba(225,178,45,.16)!important; color:#f2c33d!important; font-size:18px!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit{ border:1px solid rgba(255,255,255,.78)!important; background:rgba(255,255,255,.95)!important; color:#0b4275!important; box-shadow:0 5px 14px rgba(4,33,70,.08)!important; } body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{ font-size:17px!important; line-height:1!important; transform:none!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block>div{ min-width:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; gap:1px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block small{ font-size:10px!important; line-height:1.25!important; opacity:.82!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block a{ max-width:100%!important; font-size:17px!important; line-height:1.15!important; font-weight:900!important; letter-spacing:.35px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* Next lesson: secondary footprint stays visually subordinate. */ body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn{ min-width:0!important; width:auto!important; flex:0 0 auto!important; min-height:38px!important; padding:9px 14px!important; border-radius:12px!important; gap:5px!important; font-size:10.5px!important; box-shadow:0 5px 12px rgba(7,54,99,.09)!important; } body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before{ font-size:8px!important; } /* KPI row: countdown is a single compact horizontal expression; never wraps. */ body[data-role="teacher"] #homeSection .smart-kpi-next{ padding-inline:4px!important; } body[data-role="teacher"] #homeSection .smart-kpi-next>b{ display:flex!important; align-items:baseline!important; justify-content:center!important; flex-wrap:nowrap!important; gap:4px!important; width:100%!important; min-width:0!important; margin-top:6px!important; padding:0!important; white-space:nowrap!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit{ display:inline-flex!important; align-items:baseline!important; gap:1px!important; flex:0 0 auto!important; white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit+ .next-kpi-unit::before{ content:"·"; margin-inline:0 1px; color:#a1afbc; font-size:7px; font-weight:800; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{ font-size:13px!important; line-height:1!important; font-weight:900!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{ font-size:7px!important; line-height:1!important; font-weight:850!important; } body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-single{ font-size:11px!important; font-weight:900!important; white-space:nowrap!important; } /* Smart follow-up: priority chips are easier to scan and CTA feels lighter. */ body[data-role="teacher"] #homeSection .smart-alert-summary-chips{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:7px!important; margin-top:9px!important; } body[data-role="teacher"] #homeSection .smart-alert-summary-chips span{ min-height:28px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:5px 10px!important; border-radius:999px!important; font-size:9.5px!important; line-height:1!important; font-weight:800!important; white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{ min-height:38px!important; padding:8px 12px!important; border-radius:12px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn::after{ content:"←"; font-size:11px; line-height:1; transition:transform .16s ease; } body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn:active::after{ transform:translateX(-2px); } /* Today schedule: consistent light CTA and balanced session buttons. */ body[data-role="teacher"] #homeSection .today-schedule-link{ min-height:36px!important; padding:8px 12px!important; border-radius:11px!important; font-size:9.5px!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{ min-height:36px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; padding-inline:12px!important; white-space:nowrap!important; } body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{ content:"▶"!important; position:static!important; display:inline-block!important; margin:0!important; color:#a67c08!important; font-size:8px!important; line-height:1!important; transform:none!important; } /* Final Arabic text safety. */ body[data-role="teacher"] #homeSection .smart-dashboard-hero{ padding-inline:15px!important; overflow:visible!important; } body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{ padding-inline:5px!important; overflow:visible!important; text-overflow:clip!important; line-height:1.7!important; } } @media (max-width:390px){ body[data-role="teacher"] #homeSection .teacher-home-profile-contact{ --teacher-contact-action-size:40px; gap:8px!important; padding:10px 11px!important; } body[data-role="teacher"] #homeSection .teacher-home-phone-block{gap:8px!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{font-size:16px!important} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn{padding-inline:12px!important;font-size:10px!important} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{font-size:12px!important} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{font-size:6.8px!important} body[data-role="teacher"] #homeSection .smart-alert-summary-chips{gap:6px!important} body[data-role="teacher"] #homeSection .smart-alert-summary-chips span{min-height:27px!important;padding-inline:9px!important;font-size:9px!important} } /* ============================================================ v1.37.2 — Schedule page premium base (retained beneath v1.37.3 polish) Scope: teacher schedule only. No data or workflow changes. ============================================================ */ @media(max-width:900px){ body[data-role="teacher"] #scheduleSection{ --sch-navy:#0B3564; --sch-blue:#2F78B7; --sch-gold:#E9B72E; --sch-ink:#10233F; --sch-muted:#728196; --sch-line:#DDE6EF; --sch-soft:#F6F9FC; --sch-success:#16805D; } /* Page heading + refresh: one calm, aligned command row */ body[data-role="teacher"] #scheduleSection .schedule-page-head{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:14px!important; margin:0 0 18px!important; padding:0 2px!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head>div{min-width:0!important} body[data-role="teacher"] #scheduleSection .schedule-page-head .page-kicker{ margin-bottom:5px!important; color:#2B6FA8!important; font-size:11px!important; font-weight:850!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head h2{ margin:0!important; color:var(--sch-ink)!important; font-size:28px!important; line-height:1.22!important; letter-spacing:-.02em!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head .muted{ display:none!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn{ width:auto!important; min-width:82px!important; height:42px!important; min-height:42px!important; padding:0 13px!important; border:1px solid var(--sch-line)!important; border-radius:14px!important; background:#fff!important; color:var(--sch-navy)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; font-size:18px!important; font-weight:850!important; line-height:1!important; box-shadow:0 5px 16px rgba(11,53,100,.045)!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn::before{display:none!important} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn::after{ content:"تحديث"!important; display:inline!important; font-size:10.5px!important; color:var(--sch-navy)!important; } body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn:active{transform:scale(.975)} /* 3 high-value KPIs — readable on narrow phones, no clipping */ body[data-role="teacher"] #scheduleSection .schedule-summary-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:9px!important; margin:0 0 18px!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{ position:relative!important; min-width:0!important; min-height:108px!important; padding:14px 8px 11px!important; border:1px solid #DCE6F0!important; border-radius:20px!important; background:linear-gradient(155deg,#FFFFFF 0%,#F8FBFE 100%)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-end!important; gap:4px!important; text-align:center!important; overflow:hidden!important; box-shadow:0 8px 24px rgba(11,53,100,.045)!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card::before{ content:""!important; display:block!important; position:absolute!important; top:12px!important; left:50%!important; transform:translateX(-50%)!important; width:31px!important; height:31px!important; border-radius:11px!important; background-color:#EDF5FC!important; background-repeat:no-repeat!important; background-position:center!important; background-size:17px 17px!important; box-shadow:inset 0 0 0 1px #DDEAF5!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(1)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M13 14h3'/%3E%3C/svg%3E")!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(2)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(3)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316805D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")!important; background-color:#EAF8F2!important; box-shadow:inset 0 0 0 1px #D6EEE4!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{ display:block!important; width:100%!important; min-height:25px!important; margin:0!important; color:#6B7A8D!important; font-size:9px!important; font-weight:750!important; line-height:1.35!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span::before{display:none!important;content:none!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{ display:block!important; margin:0!important; color:var(--sch-navy)!important; font-size:22px!important; line-height:1!important; font-weight:900!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(4){display:none!important} /* Horizontal weekly date strip */ body[data-role="teacher"] #scheduleSection .mobile-schedule-browser{ display:block!important; margin:0!important; } body[data-role="teacher"] #scheduleSection .schedule-day-selector{ display:flex!important; gap:8px!important; margin:0 -2px 14px!important; padding:2px 2px 7px!important; overflow-x:auto!important; scrollbar-width:none!important; scroll-snap-type:x proximity!important; overscroll-behavior-inline:contain!important; } body[data-role="teacher"] #scheduleSection .schedule-day-selector::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip{ position:relative!important; flex:0 0 62px!important; min-width:62px!important; min-height:76px!important; padding:10px 5px 12px!important; border:1px solid #DDE5EE!important; border-radius:19px!important; background:#fff!important; color:#758398!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; scroll-snap-align:start!important; box-shadow:0 5px 16px rgba(11,53,100,.035)!important; transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip span{ font-size:10px!important; line-height:1.2!important; font-weight:800!important; color:inherit!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip b{ margin-top:2px!important; color:var(--sch-navy)!important; font-size:21px!important; line-height:1!important; font-weight:900!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip .schedule-day-dot{ position:absolute!important; bottom:7px!important; width:5px!important; height:5px!important; border-radius:50%!important; background:transparent!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip.has-sessions .schedule-day-dot{background:#6FA7D3!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.today:not(.active){border-color:#C9DCEB!important;background:#F8FBFE!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.active{ border-color:#0B3564!important; background:linear-gradient(155deg,#124A82 0%,#082D57 100%)!important; color:rgba(255,255,255,.78)!important; box-shadow:0 10px 24px rgba(8,45,87,.16)!important; transform:translateY(-1px)!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip.active b{color:#fff!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.active .schedule-day-dot{background:var(--sch-gold)!important;box-shadow:0 0 0 3px rgba(233,183,46,.16)!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip:active{transform:scale(.975)!important} /* Selected day becomes a contained timeline surface */ body[data-role="teacher"] #scheduleSection .schedule-mobile-timeline{ margin:0!important; padding:17px 15px 18px!important; border:1px solid #DDE6EF!important; border-radius:24px!important; background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%)!important; box-shadow:0 10px 30px rgba(11,53,100,.045)!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; margin:0 1px 15px!important; padding:0 2px 11px!important; border-bottom:1px solid #EEF2F6!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date b{ position:relative!important; padding-inline-start:23px!important; color:var(--sch-ink)!important; font-size:21px!important; line-height:1.2!important; font-weight:900!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date b::before{ content:""!important; position:absolute!important; inset-inline-start:0!important; top:50%!important; width:15px!important; height:15px!important; transform:translateY(-50%)!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date span{ flex:none!important; padding-bottom:1px!important; color:#7B899A!important; font-size:10px!important; line-height:1.4!important; white-space:nowrap!important; } /* True timetable cards + timeline rail */ body[data-role="teacher"] #scheduleSection .schedule-timeline-list{ position:relative!important; display:grid!important; gap:11px!important; padding-inline-start:18px!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list::before{ content:""!important; position:absolute!important; inset-inline-start:4px!important; top:27px!important; bottom:27px!important; width:2px!important; border-radius:2px!important; background:linear-gradient(#D6E2ED,#EAF0F5)!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{ position:relative!important; display:grid!important; grid-template-columns:78px minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:8px 12px!important; min-width:0!important; padding:15px!important; border:1px solid #DCE5EE!important; border-radius:19px!important; background:#fff!important; opacity:1!important; box-shadow:0 6px 18px rgba(11,53,100,.035)!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{ content:""!important; display:block!important; position:absolute!important; inset-inline-start:-19px!important; top:24px!important; width:9px!important; height:9px!important; border:3px solid #fff!important; border-radius:50%!important; background:#84A9C8!important; box-shadow:0 0 0 2px #D5E2ED!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.live{ border-color:#9ED5C1!important; background:linear-gradient(150deg,#FFFFFF,#F2FBF7)!important; box-shadow:0 8px 22px rgba(22,128,93,.08)!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.live::before{ background:#1E9B6B!important; box-shadow:0 0 0 3px #DDF5EB!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.finished{opacity:.62!important;background:#FAFBFC!important} body[data-role="teacher"] #scheduleSection .schedule-session-time{ grid-column:1!important; grid-row:1!important; align-self:start!important; min-width:0!important; padding:2px 0 0!important; text-align:start!important; direction:rtl!important; } body[data-role="teacher"] #scheduleSection .schedule-session-time b{ display:block!important; color:#155789!important; font-size:16px!important; line-height:1.25!important; font-weight:900!important; white-space:nowrap!important; } body[data-role="teacher"] #scheduleSection .schedule-session-time span{ display:block!important; margin-top:6px!important; color:#8491A1!important; font-size:10px!important; line-height:1.2!important; font-weight:650!important; white-space:nowrap!important; } body[data-role="teacher"] #scheduleSection .schedule-session-main{ grid-column:2!important; grid-row:1!important; min-width:0!important; } body[data-role="teacher"] #scheduleSection .schedule-session-title{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:7px!important; min-width:0!important; flex-wrap:wrap!important; } body[data-role="teacher"] #scheduleSection .schedule-session-title h4{ min-width:0!important; margin:0!important; color:var(--sch-ink)!important; font-size:15.5px!important; line-height:1.5!important; font-weight:850!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status{ display:inline-flex!important; align-items:center!important; gap:4px!important; flex:none!important; padding:5px 8px!important; border:1px solid #E2E8F0!important; border-radius:999px!important; background:#F4F7FA!important; color:#66758A!important; font-size:8.5px!important; line-height:1!important; font-weight:850!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status i{ display:block!important; width:5px!important; height:5px!important; border-radius:50%!important; background:#8B99AA!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-live{border-color:#CBEADD!important;background:#EAF8F2!important;color:#14734F!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-live i{background:#1E9B6B!important;box-shadow:0 0 0 2px #D6F1E6!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-next{border-color:#E9D89A!important;background:#FFF8DF!important;color:#8A6812!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-next i{background:#D4A31F!important} body[data-role="teacher"] #scheduleSection .schedule-session-meta{ display:flex!important; align-items:center!important; gap:7px!important; flex-wrap:wrap!important; margin-top:7px!important; color:#7A889A!important; font-size:9.5px!important; line-height:1.4!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span{ display:inline-flex!important; align-items:center!important; gap:4px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span+span::before{ content:"•"!important; color:#C0CAD5!important; margin-inline-end:1px!important; } body[data-role="teacher"] #scheduleSection .schedule-lesson-btn{ grid-column:1/-1!important; grid-row:2!important; width:100%!important; min-height:43px!important; margin:2px 0 0!important; padding:0 14px!important; border:1px solid #E7D28B!important; border-radius:13px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF9E6 100%)!important; color:var(--sch-navy)!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; font-size:11px!important; font-weight:900!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important; transition:transform .14s ease,background .14s ease,border-color .14s ease!important; } body[data-role="teacher"] #scheduleSection .schedule-lesson-btn .schedule-play-icon{ color:#B48714!important; font-size:9px!important; line-height:1!important; } body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn{ border-color:#B9DDCF!important; background:#EDF9F4!important; color:#126C4C!important; } body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn .schedule-play-icon{color:#16805D!important} body[data-role="teacher"] #scheduleSection .schedule-lesson-btn:active{transform:scale(.985)!important} body[data-role="teacher"] #scheduleSection .schedule-empty-state{ min-height:150px!important; padding:38px 20px!important; border:1px dashed #D8E2EC!important; border-radius:18px!important; background:#FAFCFE!important; color:#7C899A!important; display:grid!important; place-items:center!important; text-align:center!important; font-size:11px!important; line-height:1.7!important; } /* The desktop duplicate panels remain intentionally hidden on mobile. */ body[data-role="teacher"] #scheduleSection .schedule-today-panel, body[data-role="teacher"] #scheduleSection .mobile-schedule-browser~.panel{display:none!important} } @media(max-width:380px){ body[data-role="teacher"] #scheduleSection .schedule-page-head h2{font-size:25px!important} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn{min-width:74px!important;padding-inline:10px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid{gap:7px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{min-height:103px!important;padding-inline:5px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{font-size:8.4px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{font-size:20px!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip{flex-basis:58px!important;min-width:58px!important} body[data-role="teacher"] #scheduleSection .schedule-mobile-timeline{padding-inline:12px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card{grid-template-columns:70px minmax(0,1fr)!important;padding:13px!important;gap:7px 9px!important} body[data-role="teacher"] #scheduleSection .schedule-session-title h4{font-size:14.5px!important} } @media(prefers-reduced-motion:reduce){ body[data-role="teacher"] #scheduleSection .schedule-day-chip, body[data-role="teacher"] #scheduleSection .schedule-lesson-btn, body[data-role="teacher"] #scheduleSection .icon-action-btn{transition:none!important} } /* ====================================================================== v1.37.3 — Schedule final polish lock Compact action header, denser KPI cards, richer session metadata, inward timeline rail and premium state treatment. ====================================================================== */ @media(max-width:760px){ body[data-role="teacher"] #scheduleSection .schedule-page-head{ display:block!important; margin-bottom:13px!important; } body[data-role="teacher"] #scheduleSection .schedule-page-copy{width:100%!important;min-width:0!important} body[data-role="teacher"] #scheduleSection .schedule-kicker-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:5px!important; } body[data-role="teacher"] #scheduleSection .schedule-kicker-row .page-kicker{margin:0!important} body[data-role="teacher"] #scheduleSection .schedule-refresh-btn, body[data-role="teacher"] #scheduleSection .schedule-page-head .schedule-refresh-btn{ width:auto!important; min-width:78px!important; height:36px!important; min-height:36px!important; padding:0 11px!important; border:1px solid #DCE5EE!important; border-radius:12px!important; background:#fff!important; color:#155789!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; font-size:10px!important; font-weight:850!important; box-shadow:0 4px 14px rgba(11,53,100,.035)!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-btn svg{ width:15px!important; height:15px!important; fill:none!important; stroke:currentColor!important; stroke-width:2!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-btn:active{transform:scale(.97)!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid{ gap:8px!important; margin-bottom:15px!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{ min-height:96px!important; padding:12px 7px 9px!important; border-radius:18px!important; justify-content:flex-end!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card::before{ top:10px!important; width:29px!important; height:29px!important; border-radius:10px!important; background-size:16px 16px!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{ min-height:22px!important; font-size:8.4px!important; line-height:1.3!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{ font-size:23px!important; line-height:1!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card small{ display:block!important; margin-top:1px!important; color:#98A4B3!important; font-size:7.2px!important; font-weight:700!important; line-height:1.2!important; white-space:nowrap!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list{ gap:10px!important; padding-inline-start:30px!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list::before{ inset-inline-start:11px!important; width:1.5px!important; top:25px!important; bottom:25px!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{ inset-inline-start:-24px!important; top:25px!important; width:8px!important; height:8px!important; border-width:2px!important; box-shadow:0 0 0 2px #D5E2ED!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{ grid-template-columns:76px minmax(0,1fr)!important; gap:8px 11px!important; padding:14px!important; border-radius:18px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-scheduled{ border-color:#CEE8DC!important; background:#EFF9F4!important; color:#267356!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-scheduled i{background:#53A783!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-finished{ border-color:#E2E7ED!important; background:#F5F7F9!important; color:#7B8795!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-finished i{background:#9AA6B3!important} body[data-role="teacher"] #scheduleSection .schedule-session-meta{ gap:6px!important; margin-top:8px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span{ min-height:20px!important; padding:3px 7px!important; border-radius:999px!important; background:#F7F9FC!important; color:#758396!important; font-size:8.6px!important; font-weight:720!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span+span::before{display:none!important;content:none!important} body[data-role="teacher"] #scheduleSection .schedule-students-count::before{ content:""!important; width:11px!important; height:11px!important; flex:none!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23758396' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E") center/contain no-repeat!important; } body[data-role="teacher"] #scheduleSection .schedule-duration::before{ content:""!important; width:11px!important; height:11px!important; flex:none!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23758396' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat!important; } body[data-role="teacher"] #scheduleSection .schedule-lesson-btn{ min-height:42px!important; border-radius:12px!important; font-size:10.8px!important; gap:6px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn{ border-color:#D5B84F!important; background:linear-gradient(135deg,#F5D35B 0%,#E7B92F 100%)!important; color:#173451!important; box-shadow:0 7px 16px rgba(188,143,18,.15)!important; } body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn .schedule-play-icon{color:#173451!important} } @media(max-width:380px){ body[data-role="teacher"] #scheduleSection .schedule-refresh-btn, body[data-role="teacher"] #scheduleSection .schedule-page-head .schedule-refresh-btn{min-width:70px!important;height:34px!important;padding-inline:9px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{min-height:92px!important;padding-inline:5px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{font-size:21px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card small{font-size:6.8px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list{padding-inline-start:27px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list::before{inset-inline-start:9px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{inset-inline-start:-22px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card{grid-template-columns:68px minmax(0,1fr)!important;padding:12px!important;gap:7px 8px!important} body[data-role="teacher"] #scheduleSection .schedule-session-meta span{font-size:8px!important;padding:3px 6px!important} } /* ====================================================================== v1.37.4 — Schedule layout stabilization (final repair pass) Fixes: refresh control, KPI clipping, RTL wrapping, session-card rhythm, and timeline rail termination. No business logic changes. ====================================================================== */ @media(max-width:760px){ body[data-role="teacher"] #scheduleSection .schedule-kicker-row{ display:flex!important; flex-direction:row!important; direction:rtl!important; align-items:center!important; justify-content:space-between!important; min-height:42px!important; gap:14px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-btn, body[data-role="teacher"] #scheduleSection .schedule-page-head .schedule-refresh-btn{ flex:0 0 auto!important; width:86px!important; min-width:86px!important; max-width:86px!important; height:40px!important; min-height:40px!important; padding:0 12px!important; border:1px solid #D7E2EC!important; border-radius:13px!important; background:#fff!important; color:#155789!important; display:inline-flex!important; flex-direction:row!important; direction:rtl!important; align-items:center!important; justify-content:center!important; gap:7px!important; white-space:nowrap!important; overflow:hidden!important; line-height:1!important; font-size:10.5px!important; font-weight:850!important; font-family:inherit!important; box-shadow:0 5px 14px rgba(11,53,100,.045)!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-btn span{ display:block!important; flex:none!important; margin:0!important; padding:0!important; white-space:nowrap!important; overflow:visible!important; line-height:1.2!important; transform:none!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-btn svg{ flex:none!important; width:16px!important; height:16px!important; margin:0!important; transform:none!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:9px!important; margin:0 0 16px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{ min-width:0!important; min-height:108px!important; padding:14px 8px 11px!important; border-radius:18px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; overflow:visible!important; text-align:center!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card::before, body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card::after{ display:none!important; content:none!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{ display:block!important; width:100%!important; min-height:0!important; margin:0!important; padding:0 2px!important; color:#65758A!important; font-size:9.2px!important; font-weight:760!important; line-height:1.45!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; text-align:center!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span::before{display:none!important;content:none!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{ margin:1px 0 0!important; font-size:25px!important; line-height:1!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card small{ display:block!important; width:100%!important; margin:0!important; color:#98A4B3!important; font-size:7.6px!important; line-height:1.35!important; white-space:normal!important; overflow:visible!important; text-align:center!important; } body[data-role="teacher"] #scheduleSection .schedule-day-selector{ padding-inline:2px 10px!important; gap:9px!important; } body[data-role="teacher"] #scheduleSection .schedule-day-chip{ flex-basis:64px!important; min-height:72px!important; overflow:hidden!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date{ align-items:center!important; gap:10px!important; padding-inline:4px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-mobile-date b, body[data-role="teacher"] #scheduleSection .schedule-mobile-date span{ overflow:visible!important; white-space:nowrap!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list{ position:relative!important; display:grid!important; gap:11px!important; padding-inline-start:29px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list::before{ display:none!important; content:none!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{ position:relative!important; grid-template-columns:78px minmax(0,1fr)!important; gap:8px 12px!important; padding:15px 14px!important; border-radius:18px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{ display:block!important; content:""!important; position:absolute!important; inset-inline-start:-23px!important; top:27px!important; width:9px!important; height:9px!important; border:2px solid #8DB7D8!important; border-radius:50%!important; background:#fff!important; box-shadow:0 0 0 4px #E6EEF5!important; z-index:2!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card:not(:last-child)::after{ display:block!important; content:""!important; position:absolute!important; inset-inline-start:-19px!important; top:38px!important; width:1.5px!important; height:calc(100% + 11px)!important; background:#DCE6EF!important; z-index:1!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card:last-child::after{ display:none!important; content:none!important; } body[data-role="teacher"] #scheduleSection .schedule-session-time{ min-width:0!important; text-align:right!important; align-self:start!important; } body[data-role="teacher"] #scheduleSection .schedule-session-time b{ display:block!important; white-space:nowrap!important; font-size:16px!important; line-height:1.2!important; } body[data-role="teacher"] #scheduleSection .schedule-session-time span{ display:block!important; margin-top:5px!important; white-space:nowrap!important; font-size:9.5px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-main{min-width:0!important} body[data-role="teacher"] #scheduleSection .schedule-session-title{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-start!important; gap:7px!important; min-width:0!important; } body[data-role="teacher"] #scheduleSection .schedule-session-title h4{ flex:1 1 150px!important; min-width:0!important; margin:0!important; font-size:15px!important; line-height:1.5!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status{ flex:0 0 auto!important; margin:0!important; white-space:nowrap!important; font-size:8.4px!important; padding:5px 8px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:6px!important; margin-top:8px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span{ min-width:0!important; max-width:100%!important; min-height:22px!important; padding:4px 8px!important; font-size:8.5px!important; line-height:1.2!important; white-space:nowrap!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-lesson-btn{ grid-column:1/-1!important; width:100%!important; min-width:0!important; min-height:43px!important; margin:4px 0 0!important; display:inline-flex!important; direction:rtl!important; align-items:center!important; justify-content:center!important; gap:6px!important; overflow:hidden!important; white-space:nowrap!important; } body[data-role="teacher"] #scheduleSection .schedule-play-icon{ flex:none!important; display:inline-block!important; margin:0!important; font-size:9px!important; line-height:1!important; } } @media(max-width:380px){ body[data-role="teacher"] #scheduleSection .schedule-refresh-btn, body[data-role="teacher"] #scheduleSection .schedule-page-head .schedule-refresh-btn{ width:80px!important;min-width:80px!important;max-width:80px!important;height:38px!important;padding-inline:10px!important;font-size:10px!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid{gap:7px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{min-height:104px!important;padding-inline:6px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{font-size:8.5px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{font-size:23px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list{padding-inline-start:27px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{grid-template-columns:72px minmax(0,1fr)!important;padding:13px 12px!important;gap:7px 9px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{inset-inline-start:-21px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card:not(:last-child)::after{inset-inline-start:-17px!important} } /* ====================================================================== V1.37.5 — Schedule final structural lock Scope: schedule page only. No inherited icon-action layout. ====================================================================== */ @media(max-width:760px){ body[data-role="teacher"] #scheduleSection .schedule-kicker-row{ display:flex!important; direction:rtl!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-control{ appearance:none!important; -webkit-appearance:none!important; box-sizing:border-box!important; flex:0 0 118px!important; width:118px!important; min-width:118px!important; max-width:118px!important; height:48px!important; min-height:48px!important; margin:0!important; padding:0 14px!important; border:1px solid #D6E1EC!important; border-radius:16px!important; background:#FFFFFF!important; color:#155789!important; box-shadow:0 6px 18px rgba(11,53,100,.06)!important; display:flex!important; flex-direction:row!important; direction:rtl!important; align-items:center!important; justify-content:center!important; gap:9px!important; overflow:hidden!important; white-space:nowrap!important; font-family:inherit!important; font-size:12px!important; font-weight:850!important; line-height:1!important; letter-spacing:0!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-control span{ position:static!important; display:block!important; flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; transform:none!important; writing-mode:horizontal-tb!important; text-orientation:mixed!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; line-height:1.2!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-control svg{ position:static!important; display:block!important; flex:0 0 20px!important; width:20px!important; height:20px!important; margin:0!important; padding:0!important; overflow:visible!important; fill:none!important; stroke:currentColor!important; stroke-width:2!important; stroke-linecap:round!important; stroke-linejoin:round!important; transform:none!important; } body[data-role="teacher"] #scheduleSection .schedule-refresh-control:active{ transform:scale(.98)!important; } /* Stable KPI cards: no decorative overlays and no clipped Arabic labels. */ body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{ min-height:112px!important; padding:15px 9px 12px!important; overflow:hidden!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{ min-height:30px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding-inline:3px!important; font-size:9.5px!important; line-height:1.45!important; white-space:normal!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{ font-size:25px!important; line-height:1!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card small{ min-height:14px!important; font-size:7.7px!important; line-height:1.3!important; } /* Timeline stays fully outside cards and ends with the final card. */ body[data-role="teacher"] #scheduleSection .schedule-timeline-list{ padding-inline-start:34px!important; gap:14px!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{ grid-template-columns:82px minmax(0,1fr)!important; gap:8px 12px!important; padding:16px 15px!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{ inset-inline-start:-27px!important; top:28px!important; width:9px!important; height:9px!important; } body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card:not(:last-child)::after{ inset-inline-start:-23px!important; top:39px!important; height:calc(100% + 14px)!important; } /* Group name + status are one deliberate row, matching the rest of the app. */ body[data-role="teacher"] #scheduleSection .schedule-session-title{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; direction:rtl!important; align-items:center!important; column-gap:9px!important; row-gap:0!important; width:100%!important; min-width:0!important; margin:0!important; } body[data-role="teacher"] #scheduleSection .schedule-session-title h4{ min-width:0!important; width:100%!important; margin:0!important; padding:0!important; font-size:15.5px!important; line-height:1.5!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status{ position:static!important; align-self:center!important; justify-self:start!important; margin:0!important; padding:5px 9px!important; min-height:25px!important; border-radius:999px!important; white-space:nowrap!important; font-size:8.6px!important; line-height:1!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-scheduled{ border:1px solid #BFE2D2!important; background:#ECF8F2!important; color:#27775B!important; } body[data-role="teacher"] #scheduleSection .schedule-session-status.is-scheduled i{ width:6px!important; height:6px!important; background:#53A783!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta{ margin-top:9px!important; gap:7px!important; } body[data-role="teacher"] #scheduleSection .schedule-session-meta span{ min-height:24px!important; padding:5px 9px!important; border-radius:999px!important; font-size:8.7px!important; line-height:1.1!important; } body[data-role="teacher"] #scheduleSection .schedule-lesson-btn{ min-height:52px!important; margin-top:7px!important; border-radius:15px!important; gap:7px!important; } body[data-role="teacher"] #scheduleSection .schedule-play-icon{ font-size:9px!important; transform:none!important; } } @media(max-width:380px){ body[data-role="teacher"] #scheduleSection .schedule-refresh-control{ flex-basis:110px!important;width:110px!important;min-width:110px!important;max-width:110px!important;height:46px!important;min-height:46px!important;padding-inline:12px!important;font-size:11.5px!important; } body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{min-height:108px!important;padding-inline:7px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{font-size:8.9px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list{padding-inline-start:31px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{grid-template-columns:76px minmax(0,1fr)!important;padding:14px 12px!important;gap:8px 9px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{inset-inline-start:-24px!important} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card:not(:last-child)::after{inset-inline-start:-20px!important} body[data-role="teacher"] #scheduleSection .schedule-session-title h4{font-size:14.5px!important} body[data-role="teacher"] #scheduleSection .schedule-session-status{padding-inline:7px!important;font-size:8px!important} } /* ========================================================== V1.37.7 — STUDENT FINANCE IDENTITY ALIGNMENT One visual language with Home + Schedule: Navy / White / Gold. Semantic colors are limited to small status signals only. ========================================================== */ @media(max-width:900px){ body[data-role="teacher"] #studentFinanceSection{ --finance-navy:#0B3A69; --finance-blue:#17639B; --finance-gold:#DDAE2E; --finance-ink:#102F50; --finance-muted:#748397; --finance-line:#DCE6EF; --finance-soft:#F7F9FC; } /* Header action — same compact action language as the rest of TABEA ONE. */ body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:auto!important; min-width:78px!important; min-height:42px!important; margin:0!important; padding:8px 12px!important; border:1px solid var(--finance-line)!important; border-radius:14px!important; background:#fff!important; color:var(--finance-navy)!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; font-size:10px!important; font-weight:800!important; white-space:nowrap!important; } body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn>span:first-child{ font-size:17px!important; line-height:1!important; } body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn:active{transform:scale(.975)!important} /* Summary: brand-first, semantic accent only as a tiny signal. */ body[data-role="teacher"] #studentFinanceSection .student-finance-stats{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; margin:0 0 12px!important; } body[data-role="teacher"] #studentFinanceSection .finance-summary-card{ position:relative!important; min-width:0!important; min-height:104px!important; padding:15px 14px!important; overflow:hidden!important; border:1px solid var(--finance-line)!important; border-radius:18px!important; background:linear-gradient(145deg,#fff 0%,#F9FBFD 100%)!important; box-shadow:0 7px 20px rgba(11,45,87,.045)!important; text-align:right!important; } body[data-role="teacher"] #studentFinanceSection .finance-summary-card::before{ content:""!important; position:absolute!important; inset-inline-end:14px!important; top:14px!important; width:7px!important; height:7px!important; border-radius:3px!important; background:#2F78B7!important; box-shadow:0 0 0 4px #EAF3FA!important; } body[data-role="teacher"] #studentFinanceSection .finance-summary-card.collected::before{background:#16805D!important;box-shadow:0 0 0 4px #E5F6EF!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card.remaining::before{background:var(--finance-gold)!important;box-shadow:0 0 0 4px #FFF4D5!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card.settled::before{background:#2F78B7!important;box-shadow:0 0 0 4px #EAF3FA!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card>span{ display:block!important; padding-inline-end:17px!important; color:#65758A!important; font-size:9.5px!important; font-weight:760!important; line-height:1.35!important; } body[data-role="teacher"] #studentFinanceSection .finance-summary-card>b{ display:block!important; margin-top:10px!important; color:var(--finance-navy)!important; font-size:21px!important; font-weight:900!important; line-height:1.05!important; direction:rtl!important; unicode-bidi:isolate!important; white-space:nowrap!important; } body[data-role="teacher"] #studentFinanceSection .finance-summary-card>small{ display:block!important; margin-top:7px!important; color:#929EAC!important; font-size:8px!important; font-weight:650!important; line-height:1.4!important; } /* Filters: lighter, shorter and closer to the schedule/home panel rhythm. */ body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar-panel{ padding:14px!important; margin:0 0 14px!important; border:1px solid var(--finance-line)!important; border-radius:20px!important; background:#fff!important; box-shadow:0 8px 24px rgba(11,45,87,.045)!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; align-items:end!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar label{ min-width:0!important; margin:0!important; color:#647589!important; font-size:9px!important; font-weight:760!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-search-label{grid-column:1/-1!important} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar input, body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar select{ width:100%!important; height:45px!important; min-height:45px!important; margin-top:5px!important; padding:9px 12px!important; border:1px solid var(--finance-line)!important; border-radius:13px!important; background:#FAFCFE!important; color:var(--finance-ink)!important; font-size:11px!important; font-weight:700!important; outline:none!important; box-shadow:none!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar :is(input,select):focus{ border-color:#92B0CD!important; background:#fff!important; box-shadow:0 0 0 3px rgba(18,63,120,.065)!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-filter-bar{ display:flex!important; flex-wrap:nowrap!important; gap:6px!important; margin:11px 0 0!important; padding:1px 0 2px!important; overflow-x:auto!important; scrollbar-width:none!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-filter-bar::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #studentFinanceSection .tenant-filter-chip{ flex:0 0 auto!important; width:auto!important; min-height:34px!important; padding:7px 11px!important; border:1px solid var(--finance-line)!important; border-radius:999px!important; background:#fff!important; color:#647589!important; font-size:8.5px!important; font-weight:780!important; line-height:1.1!important; white-space:nowrap!important; box-shadow:none!important; } body[data-role="teacher"] #studentFinanceSection .tenant-filter-chip.active{ border-color:var(--finance-navy)!important; background:var(--finance-navy)!important; color:#fff!important; } /* Student card: neutral TABEA card, not a separate "finance theme". */ body[data-role="teacher"] #studentFinanceSection .student-finance-list{ display:grid!important; gap:12px!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card{ position:relative!important; overflow:hidden!important; padding:16px!important; border:1px solid var(--finance-line)!important; border-radius:21px!important; background:linear-gradient(180deg,#fff 0%,#FDFEFF 100%)!important; box-shadow:0 8px 24px rgba(11,45,87,.05)!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card::before{ content:""!important; position:absolute!important; top:0!important; inset-inline-end:18px!important; width:52px!important; height:3px!important; border-radius:0 0 999px 999px!important; background:linear-gradient(90deg,var(--finance-gold),#F1CB59)!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card.paid, body[data-role="teacher"] #studentFinanceSection .student-finance-card.partial, body[data-role="teacher"] #studentFinanceSection .student-finance-card.unpaid, body[data-role="teacher"] #studentFinanceSection .student-finance-card.no_fee{ border-inline-start:1px solid var(--finance-line)!important; border-inline-end:1px solid var(--finance-line)!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:start!important; gap:10px!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-identity{min-width:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-head h3{ margin:1px 0 7px!important; color:var(--finance-ink)!important; font-size:18px!important; font-weight:870!important; line-height:1.4!important; overflow-wrap:anywhere!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-meta{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:6px!important; color:#7B8898!important; font-size:9px!important; line-height:1.4!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-meta span{ min-width:0!important; max-width:100%!important; padding:0!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-meta span::after{content:none!important;display:none!important} body[data-role="teacher"] #studentFinanceSection .student-finance-code{ display:inline-flex!important; align-items:center!important; min-height:24px!important; padding:4px 8px!important; border:1px solid #DDE7F0!important; border-radius:8px!important; background:#F4F7FA!important; color:#31516F!important; font-size:10px!important; font-weight:820!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-group{ color:#60758A!important; font-weight:700!important; } /* Status is a signal only — small and quiet. */ body[data-role="teacher"] #studentFinanceSection .student-finance-status{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; width:max-content!important; max-width:116px!important; min-height:28px!important; padding:6px 9px!important; border:1px solid #E0E7EE!important; border-radius:999px!important; background:#F5F7FA!important; color:#69798A!important; font-size:8.5px!important; font-weight:820!important; line-height:1!important; white-space:nowrap!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-status i{ display:block!important; width:6px!important; height:6px!important; flex:0 0 6px!important; border-radius:50%!important; background:currentColor!important; opacity:.8!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-status.paid{background:#EFF8F4!important;border-color:#D5EBE1!important;color:#27775B!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.partial{background:#FFF9E9!important;border-color:#EFDEAA!important;color:#8A6A18!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.unpaid{background:#FFF3F4!important;border-color:#F0D3D7!important;color:#AA4D58!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.no_fee{background:#F4F6F8!important;border-color:#E1E7ED!important;color:#68788A!important} /* One integrated money strip instead of three competing cards. */ body[data-role="teacher"] #studentFinanceSection .student-finance-numbers{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:0!important; margin:15px 0 12px!important; overflow:hidden!important; border:1px solid #E0E8F0!important; border-radius:15px!important; background:#F8FAFC!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-numbers>div{ position:relative!important; min-width:0!important; min-height:72px!important; padding:11px 6px 10px!important; border:0!important; border-radius:0!important; background:transparent!important; text-align:center!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-numbers>div+div{ border-inline-start:1px solid #E0E8F0!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-numbers span{ display:block!important; margin:0 0 7px!important; color:#788698!important; font-size:8.5px!important; font-weight:720!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-numbers b{ display:block!important; color:var(--finance-navy)!important; font-size:12px!important; font-weight:880!important; line-height:1.2!important; direction:rtl!important; unicode-bidi:isolate!important; white-space:nowrap!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card.unpaid .student-finance-numbers .remaining b{color:#A94753!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card.partial .student-finance-numbers .remaining b{color:#8A6815!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card.paid .student-finance-numbers .remaining b, body[data-role="teacher"] #studentFinanceSection .student-finance-card.no_fee .student-finance-numbers .remaining b{color:#31516F!important} body[data-role="teacher"] #studentFinanceSection .student-finance-credit{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin:-2px 0 12px!important; padding:9px 11px!important; border:1px solid #DCE8F2!important; border-radius:12px!important; background:#F4F8FC!important; color:#5E7185!important; font-size:8.5px!important; font-weight:720!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-credit b{color:var(--finance-navy)!important;font-size:10.5px!important} /* Actions: same primary/secondary hierarchy used across TABEA ONE. */ body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions.has-primary .finance-pay-btn{grid-column:1/-1!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions .inline-btn{ display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; padding:9px 8px!important; border-radius:13px!important; font-size:9px!important; font-weight:820!important; line-height:1.2!important; white-space:normal!important; text-align:center!important; box-shadow:none!important; } body[data-role="teacher"] #studentFinanceSection .finance-pay-btn{ border:1px solid var(--finance-navy)!important; background:linear-gradient(135deg,#0D477B,#0A315C)!important; color:#fff!important; box-shadow:0 7px 17px rgba(11,58,105,.10)!important; } body[data-role="teacher"] #studentFinanceSection .finance-action-icon{ display:grid!important; place-items:center!important; width:22px!important; height:22px!important; flex:0 0 22px!important; border-radius:8px!important; background:rgba(255,255,255,.12)!important; color:#F2C94C!important; font-size:14px!important; line-height:1!important; } body[data-role="teacher"] #studentFinanceSection .finance-history-btn, body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-btn{ border:1px solid #D9E3ED!important; background:#F8FAFC!important; color:#17436C!important; } body[data-role="teacher"] #studentFinanceSection .finance-history-btn b{ display:grid!important; place-items:center!important; min-width:22px!important; height:22px!important; padding-inline:5px!important; border-radius:8px!important; background:#EAF1F7!important; color:#0E4779!important; font-size:8.5px!important; } body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-btn{background:#fff!important} body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-icon{ display:grid!important; place-items:center!important; width:22px!important; height:22px!important; flex:0 0 22px!important; border-radius:8px!important; background:#EDF8F3!important; color:#248060!important; font-size:10px!important; font-weight:900!important; } body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions .inline-btn:active{transform:scale(.985)!important} } @media(max-width:390px){ body[data-role="teacher"] #studentFinanceSection .finance-summary-card{min-height:98px!important;padding:13px 11px!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card>b{font-size:19px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card{padding:15px 13px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-head{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-head h3{font-size:16.5px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status{max-width:104px!important;padding-inline:8px!important;font-size:8px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers>div{min-height:68px!important;padding-inline:4px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers b{font-size:10.5px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions .inline-btn{font-size:8.5px!important;padding-inline:6px!important} } /* ========================================================== V1.37.8 — CLASSIC REFRESH + UNIFIED RECEIPT PREVIEW ========================================================== */ @media(max-width:900px){ /* Restore the compact classic text refresh action in both pages. */ body[data-role="teacher"] #scheduleSection #refreshScheduleBtn, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn{ position:static!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:68px!important; max-width:none!important; height:42px!important; min-height:42px!important; padding:8px 14px!important; margin:0!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; } body[data-role="teacher"] #scheduleSection #refreshScheduleBtn::before, body[data-role="teacher"] #scheduleSection #refreshScheduleBtn::after, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn::before, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn::after{content:none!important;display:none!important} body[data-role="teacher"] #scheduleSection .schedule-page-head{align-items:center!important} } .receipt-preview-modal{width:min(94vw,620px)!important;max-width:620px!important} .receipt-preview-body{margin-top:8px;max-height:68vh;overflow:auto;padding:10px;border:1px solid #E0E7EF;border-radius:18px;background:#F3F6FA} .receipt-preview-image{display:block;width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:0 8px 26px rgba(11,45,87,.08)} .receipt-preview-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important} .receipt-preview-actions button{width:100%!important;min-width:0!important} @media(max-width:420px){ .receipt-preview-modal{width:96vw!important;padding:16px!important} .receipt-preview-body{max-height:64vh;padding:7px} .receipt-preview-actions{grid-template-columns:1fr 1fr!important;gap:8px!important} } /* V1.37.9 — Automatic Smart Alerts: automatic refresh UX without changing alert rules. */ @media(max-width:900px){ body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note{ border-color:#D7E5F2; background:linear-gradient(145deg,#F8FBFE,#FFFFFF); } body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note b{color:#0B3564} body[data-role="teacher"] #smartAlertsSection #runSmartAlertsBtn{ min-width:92px; white-space:nowrap; } } /* ====================================================================== V1.38.0 — Unified teacher refresh placement + automatic alerts cleanup Canonical refresh location: top-left of the page heading, opposite title. Smart Alerts: no manual state/priority filter panel; professional clear state. ====================================================================== */ @media(max-width:900px){ /* One canonical heading layout for teacher pages that expose a page refresh. */ body[data-role="teacher"] :is(#scheduleSection,#studentFinanceSection,#smartAlertsSection,#communicationSection) > .section-head{ display:flex!important; flex-direction:row!important; direction:rtl!important; align-items:flex-start!important; justify-content:space-between!important; gap:14px!important; margin-bottom:15px!important; overflow:visible!important; } body[data-role="teacher"] :is(#scheduleSection,#studentFinanceSection,#smartAlertsSection,#communicationSection) > .section-head > div{ flex:1 1 auto!important; min-width:0!important; } body[data-role="teacher"] .page-refresh-btn{ position:static!important; flex:0 0 auto!important; width:auto!important; min-width:72px!important; max-width:none!important; height:42px!important; min-height:42px!important; margin:0!important; padding:8px 15px!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:0!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; opacity:1!important; } body[data-role="teacher"] .page-refresh-btn::before, body[data-role="teacher"] .page-refresh-btn::after{content:none!important;display:none!important} body[data-role="teacher"] .page-refresh-btn:disabled{opacity:.58!important;cursor:wait!important} body[data-role="teacher"] .page-refresh-btn:active{transform:scale(.98)!important} /* Schedule had older page-specific display:block overrides; this wins last. */ body[data-role="teacher"] #scheduleSection .schedule-page-head{display:flex!important;align-items:flex-start!important} /* Smart Alerts is automatic now: month/group define scope, not manual alert filtering. */ body[data-role="teacher"] #smartAlertsSection .smart-alert-controls-panel{ margin-bottom:12px!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note{ margin-top:10px!important; padding:11px 12px!important; border:1px solid #DCE8F4!important; border-radius:13px!important; background:linear-gradient(145deg,#F5F9FD,#FFFFFF)!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note b{font-size:10.5px!important;color:#0B3564!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note span{font-size:8.8px!important;line-height:1.7!important;color:#6D7B8D!important} /* Empty/current-clear state — never leave the page looking blank. */ body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state{ min-height:270px!important; padding:34px 22px!important; border:1px solid #DCE7F1!important; border-radius:22px!important; background:linear-gradient(155deg,#FFFFFF 0%,#F8FBFE 100%)!important; box-shadow:0 8px 24px rgba(11,45,87,.045)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; text-align:center!important; color:#10233F!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-icon{ width:64px!important; height:64px!important; margin-bottom:15px!important; border:1px solid #CDE9DE!important; border-radius:20px!important; background:#EFFAF5!important; color:#16805D!important; display:grid!important; place-items:center!important; box-shadow:0 7px 18px rgba(22,128,93,.08)!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-icon svg{ width:34px!important; height:34px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state h3{ margin:0 0 8px!important; color:#0B3564!important; font-size:20px!important; line-height:1.35!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state p{ max-width:440px!important; margin:0!important; color:#6D7B8D!important; font-size:11px!important; line-height:1.85!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state>span{ margin-top:14px!important; padding:6px 11px!important; border-radius:999px!important; background:#EEF5FB!important; color:#356789!important; font-size:8.5px!important; font-weight:800!important; } } @media(max-width:390px){ body[data-role="teacher"] .page-refresh-btn{min-width:68px!important;height:40px!important;min-height:40px!important;padding-inline:12px!important;font-size:10.5px!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state{min-height:245px!important;padding:28px 18px!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state h3{font-size:18px!important} } /* V1.38.0 specificity lock — ensure the canonical refresh style wins older page patches. */ @media(max-width:900px){ body[data-role="teacher"] #scheduleSection #refreshScheduleBtn.page-refresh-btn, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn.page-refresh-btn, body[data-role="teacher"] #smartAlertsSection #runSmartAlertsBtn.page-refresh-btn, body[data-role="teacher"] #communicationSection #refreshCommunicationBtn.page-refresh-btn, body[data-role="teacher"] #accountSection #refreshTeacherPaymentsBtn.page-refresh-btn{ position:static!important; width:auto!important; min-width:72px!important; max-width:none!important; height:42px!important; min-height:42px!important; margin:0!important; padding:8px 15px!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; } body[data-role="teacher"] #smartAlertsSection .smart-alert-filter-panel{display:none!important} } /* ====================================================================== V1.38.1 — HONOR BOARD + CERTIFICATE EXPORT LOCK Premium leaderboard hierarchy; preview === PNG === PDF certificate flow. ====================================================================== */ .certificate-preview-modal{width:min(96vw,900px)!important;max-width:900px!important} .certificate-preview-head>div{min-width:0} .certificate-language-badge{display:inline-flex;align-items:center;margin-top:7px;padding:5px 9px;border:1px solid #E6D38E;border-radius:999px;background:#FFF9E8;color:#876715;font-size:9px;font-weight:850} .certificate-preview-body{margin-top:12px;max-height:67vh;overflow:auto;padding:10px;border:1px solid #DDE6EF;border-radius:18px;background:#F1F5F9} .certificate-preview-image{display:block;width:100%;height:auto;margin:auto;border-radius:12px;background:#fff;box-shadow:0 10px 28px rgba(11,45,87,.10)} .certificate-preview-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important} .certificate-preview-actions button{width:100%!important;min-width:0!important} @media(max-width:900px){ body[data-role="teacher"] #leaderboardSection>.section-head{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-bottom:14px!important;overflow:visible!important} body[data-role="teacher"] #leaderboardSection>.section-head>div:first-child{min-width:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%!important;max-width:none!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions button{width:100%!important;min-width:0!important;min-height:44px!important;margin:0!important;border-radius:14px!important;font-size:10.5px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-controls-panel{padding:14px!important;border-radius:20px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-note{margin-top:10px!important;padding:11px 12px!important;border-radius:13px!important;background:linear-gradient(145deg,#F5F9FD,#FFFFFF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-note span{font-size:8.8px!important;line-height:1.75!important} /* The scoring legend scrolls cleanly instead of clipping at the viewport edge. */ body[data-role="teacher"] #leaderboardSection .leaderboard-config-summary{width:100%!important;margin:10px 0 12px!important;overflow:hidden!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips{display:flex!important;flex-wrap:nowrap!important;direction:rtl!important;gap:7px!important;width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important;padding:2px 2px 7px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips span{flex:0 0 auto!important;min-height:32px!important;padding:7px 10px!important;border-radius:999px!important;background:#FFFFFF!important;box-shadow:0 3px 10px rgba(11,45,87,.035)!important;white-space:nowrap!important} /* Podium: first place is the hero; second and third share the next row. */ body[data-role="teacher"] #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:14px 0 16px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner{min-width:0!important;padding:15px 13px!important;border-radius:20px!important;text-align:center!important;overflow:hidden!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-column:1/-1!important;display:grid!important;grid-template-columns:62px minmax(0,1fr) auto!important;grid-template-areas:"medal name score" "medal meta score" "action action action"!important;align-items:center!important;gap:3px 12px!important;padding:16px!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-medal{grid-area:medal!important;font-size:40px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>span{grid-area:meta!important;margin:0!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 h3{grid-area:name!important;margin:0!important;text-align:right!important;font-size:17px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>b{grid-area:score!important;margin:0!important;font-size:23px!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{display:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-winner-actions{grid-area:action!important;margin-top:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) h3{font-size:14px!important;line-height:1.55!important;min-height:43px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>b{font-size:20px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner-actions{display:block!important;width:100%!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner-actions .leaderboard-certificate-open-btn{width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;border-color:#D6E3EF!important;background:#EEF5FB!important;color:#0B3B6B!important;font-size:9.5px!important;font-weight:850!important} /* Full-ranking cards: one deliberate certificate CTA, not duplicated PNG/PDF buttons. */ body[data-role="teacher"] #leaderboardSection .leaderboard-certificate-actions{display:block!important;width:100%!important;margin-top:2px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-certificate-actions .leaderboard-certificate-open-btn{width:100%!important;min-width:0!important;min-height:39px!important;padding:8px 10px!important;border:1px solid #D6E3EF!important;border-radius:11px!important;background:#EEF5FB!important;color:#0B3B6B!important;font-size:9px!important;font-weight:850!important} body[data-role="teacher"] #leaderboardSection .leaderboard-table-head{align-items:center!important;gap:10px!important} body[data-role="teacher"] #leaderboardSection #printLeaderboardBtn{min-height:40px!important;padding:8px 11px!important;border-radius:12px!important;white-space:nowrap!important} .certificate-preview-modal{width:100%!important;max-width:none!important} .certificate-preview-body{max-height:58vh!important;padding:7px!important;border-radius:15px!important} .certificate-preview-image{border-radius:9px!important} .certificate-preview-actions{grid-template-columns:1fr 1fr!important;gap:8px!important} } @media(max-width:390px){ body[data-role="teacher"] #leaderboardSection .leaderboard-controls{grid-template-columns:1fr 1fr!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-template-columns:52px minmax(0,1fr)!important;grid-template-areas:"medal name" "medal score" "action action"!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>span,body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{display:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>b{text-align:right!important;font-size:19px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1){padding-inline:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) h3{font-size:12.5px!important} } /* ============================================================ V1.38.2 — Honor Board / Certificates final identity + logic UI ============================================================ */ @media (max-width: 820px){ body[data-role="teacher"] #leaderboardSection>.section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:12px!important} body[data-role="teacher"] #leaderboardSection>.section-head>div:first-child{grid-column:1/-1!important} body[data-role="teacher"] #leaderboardSection>.section-head h2{font-size:27px!important;line-height:1.35!important;margin:4px 0 5px!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection>.section-head p{font-size:10px!important;line-height:1.75!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%!important} /* No clipped scoring chips: real responsive wrapping, not edge-peeking horizontal overflow. */ body[data-role="teacher"] #leaderboardSection .leaderboard-config-summary{overflow:visible!important;margin:10px 0 13px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:7px!important;padding:0!important;direction:rtl!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips span{flex:1 1 calc(33.333% - 7px)!important;min-width:104px!important;justify-content:center!important;min-height:34px!important;padding:7px 9px!important;white-space:normal!important;text-align:center!important;line-height:1.35!important} body[data-role="teacher"] #leaderboardSection .leaderboard-eligibility-note{margin:3px 0 12px!important;padding:10px 12px!important;border:1px solid #D7E4F0!important;border-radius:14px!important;background:#F4F8FC!important;color:#63758A!important;font-size:9px!important;line-height:1.65!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-eligibility-note b{color:#0B3B6B!important;font-size:10px!important} /* Podium hierarchy: one gold winner, second/third balanced underneath. No duplicated export buttons here. */ body[data-role="teacher"] #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:14px 0 17px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner{min-height:188px!important;padding:15px 12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:20px!important;background:#FFFFFF!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-column:1/-1!important;min-height:166px!important;display:grid!important;grid-template-columns:72px minmax(0,1fr) auto!important;grid-template-areas:"medal name score" "medal place score" "medal meta score"!important;align-items:center!important;column-gap:14px!important;padding:17px!important;text-align:right!important;background:linear-gradient(145deg,#FFFDF4,#FFFFFF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-medal{grid-area:medal!important;font-size:44px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 h3{grid-area:name!important;font-size:17px!important;line-height:1.45!important;margin:0!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-place-label{grid-area:place!important;text-align:right!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>b{grid-area:score!important;font-size:22px!important;margin:0!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{grid-area:meta!important;display:block!important;text-align:right!important;margin:0!important;min-height:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) .leaderboard-medal{font-size:35px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) h3{font-size:13.5px!important;line-height:1.5!important;min-height:42px!important;margin:5px 0 2px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>b{font-size:19px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>small{font-size:8px!important;min-height:0!important;margin-top:2px!important} /* Ineligible students remain visible but cannot receive a false rank/certificate. */ body[data-role="teacher"] #leaderboardSection .leaderboard-ineligible-row{border-color:#E0E6ED!important;background:#FBFCFE!important;box-shadow:none!important;opacity:.88!important} body[data-role="teacher"] #leaderboardSection .leaderboard-ineligible-row td[data-label="المركز"]{background:#F3F5F8!important;border-color:#E1E6EC!important} body[data-role="teacher"] #leaderboardSection .leaderboard-rank-empty strong{color:#8593A3!important} body[data-role="teacher"] #leaderboardSection .leaderboard-insufficient-label{color:#8A6C18!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.45!important} body[data-role="teacher"] #leaderboardSection .leaderboard-no-certificate{display:flex!important;align-items:center!important;justify-content:center!important;min-height:39px!important;padding:7px 8px!important;border:1px dashed #D7E0EA!important;border-radius:11px!important;background:#F7F9FC!important;color:#7C8999!important;font-size:8px!important;line-height:1.45!important;text-align:center!important} .certificate-preview-modal{width:min(100%,920px)!important;max-width:920px!important} .certificate-preview-body{max-height:60vh!important;background:#EEF3F8!important;padding:8px!important} .certificate-preview-image{width:100%!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(11,45,87,.10)!important} } @media (max-width: 430px){ body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips span{flex-basis:calc(50% - 7px)!important;min-width:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-template-columns:56px minmax(0,1fr)!important;grid-template-areas:"medal name" "medal score" "place place" "meta meta"!important;row-gap:4px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-place-label,body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{text-align:center!important} } /* ============================================================ V1.38.3 — Honor Board export parity + certificate access restore Canvas preview === PNG === PDF; no about:blank printing. ============================================================ */ .leaderboard-print-preview-modal{width:min(96vw,980px)!important;max-width:980px!important} .leaderboard-print-preview-head>div{min-width:0!important} .leaderboard-print-preview-body{margin-top:12px!important;max-height:66vh!important;overflow:auto!important;padding:10px!important;border:1px solid #DDE6EF!important;border-radius:18px!important;background:#EEF3F8!important} .leaderboard-print-preview-body .report-export-preview{margin:0!important;padding:0!important;background:transparent!important} .leaderboard-print-preview-body .report-export-page{margin:0 0 12px!important;padding:0!important;background:transparent!important;box-shadow:none!important} .leaderboard-print-preview-body .report-export-page:last-child{margin-bottom:0!important} .leaderboard-print-preview-body .report-export-page img{display:block!important;width:100%!important;height:auto!important;margin:auto!important;border-radius:10px!important;background:#fff!important;box-shadow:0 8px 24px rgba(11,45,87,.10)!important} .leaderboard-print-preview-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important;position:sticky!important;bottom:0!important;background:#fff!important;padding-top:10px!important;z-index:2!important} .leaderboard-print-preview-actions button{width:100%!important;min-width:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-podium-certificate-btn{ width:100%!important;min-height:40px!important;margin-top:10px!important;padding:8px 12px!important; border:1px solid #D6E3EF!important;border-radius:12px!important;background:#EEF5FB!important;color:#0B3B6B!important; font-size:9.5px!important;font-weight:850!important;line-height:1.2!important;text-align:center!important;cursor:pointer!important } body[data-role="teacher"] #leaderboardSection .leaderboard-podium-certificate-btn:active{transform:translateY(1px)!important} @media(max-width:820px){ body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{ grid-template-areas:"medal name score" "medal place score" "medal meta score" "action action action"!important; } body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-podium-certificate-btn{grid-area:action!important;margin-top:9px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-2:last-child{grid-column:1/-1!important;width:calc(50% - 5px)!important;justify-self:center!important} .leaderboard-print-preview-modal{width:100%!important;max-width:none!important} .leaderboard-print-preview-body{max-height:58vh!important;padding:7px!important;border-radius:15px!important} .leaderboard-print-preview-actions{grid-template-columns:1fr 1fr!important;gap:8px!important} .certificate-preview-actions{position:sticky!important;bottom:0!important;background:#fff!important;padding-top:10px!important;z-index:2!important} } @media(max-width:430px){ body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{ grid-template-areas:"medal name" "medal score" "place place" "meta meta" "action action"!important; } body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-2:last-child{width:100%!important} } /* ====================================================================== V1.38.5 — DESKTOP RESPONSIVE FOUNDATION Desktop-only presentation layer. The approved mobile UI (<=900px) remains untouched. No application/auth/business logic changes. ====================================================================== */ @media (min-width:901px){ /* ---------- Desktop login: same TABEA ONE identity, real two-panel layout ---------- */ body:has(#loginView:not(.hidden)){ min-width:0!important; min-height:100vh!important; overflow:auto!important; background:#071f3d!important; } #loginView.login-shell:not(.hidden){ position:relative!important; isolation:isolate!important; display:grid!important; grid-template-columns:minmax(430px,.82fr) minmax(560px,1.18fr)!important; width:100%!important; min-height:100vh!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#f5f7fb!important; } #loginView .login-brand{ position:relative!important; min-width:0!important; min-height:100vh!important; padding:clamp(36px,4.4vw,70px)!important; overflow:hidden!important; background: radial-gradient(58% 42% at 20% 18%,rgba(28,111,179,.52) 0%,rgba(16,74,130,.18) 54%,transparent 78%), radial-gradient(48% 38% at 88% 88%,rgba(244,185,40,.10) 0%,transparent 70%), linear-gradient(145deg,#0b437d 0%,#082d57 48%,#061a33 100%)!important; color:#fff!important; display:flex!important; flex-direction:column!important; justify-content:space-between!important; gap:34px!important; } #loginView .login-brand::before{ content:""!important; position:absolute!important; inset:-12% -15% auto auto!important; width:520px!important; height:520px!important; border:1px solid rgba(255,255,255,.045)!important; border-radius:50%!important; box-shadow:0 0 0 78px rgba(255,255,255,.018),0 0 0 156px rgba(255,255,255,.012)!important; pointer-events:none!important; } #loginView .login-brand::after{ content:""!important; position:absolute!important; inset:auto -90px -150px auto!important; width:360px!important; height:360px!important; border:46px solid rgba(244,185,40,.045)!important; border-radius:50%!important; pointer-events:none!important; } #loginView .brand-row, #loginView .hero-copy, #loginView .feature-pills{position:relative!important;z-index:1!important} #loginView .brand-row{gap:14px!important;direction:rtl!important;text-align:right!important} #loginView .brand-row .brand-mark{ width:54px!important; height:54px!important; flex:0 0 54px!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(244,185,40,.62)!important; border-radius:16px!important; background:#0d3b70!important; box-shadow:0 9px 24px rgba(0,15,35,.18)!important; } #loginView .brand-row .brand-mark img{width:100%!important;height:100%!important;object-fit:cover!important} #loginView .brand-row strong{color:#fff!important;font-size:20px!important;font-weight:900!important;line-height:1.2!important} #loginView .brand-row small{display:block!important;margin-top:2px!important;color:rgba(255,255,255,.64)!important;font-size:10px!important;font-weight:750!important;letter-spacing:.65px!important} #loginView .hero-copy{max-width:680px!important;margin-block:auto!important} #loginView .hero-copy .eyebrow{ display:inline-flex!important; align-items:center!important; gap:8px!important; color:#f5c645!important; font-size:11px!important; font-weight:850!important; } #loginView .hero-copy .eyebrow::before{content:"";width:24px;height:3px;border-radius:99px;background:#f4b928} #loginView .hero-copy h1{ max-width:720px!important; margin:15px 0 12px!important; color:#fff!important; font-size:clamp(38px,4.2vw,60px)!important; line-height:1.22!important; font-weight:900!important; letter-spacing:-1px!important; } #loginView .hero-copy p{ max-width:620px!important; margin:0!important; color:rgba(234,243,252,.78)!important; font-size:clamp(13px,1.25vw,17px)!important; line-height:1.9!important; } #loginView .feature-pills{display:flex!important;flex-wrap:wrap!important;gap:8px!important} #loginView .feature-pills span{ padding:7px 11px!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:999px!important; background:rgba(255,255,255,.045)!important; color:rgba(255,255,255,.78)!important; font-size:9px!important; font-weight:750!important; } #loginView .login-card{ position:relative!important; align-self:center!important; justify-self:center!important; width:min(440px,calc(100% - 72px))!important; max-width:440px!important; max-height:none!important; margin:32px auto!important; padding:28px 30px 24px!important; overflow:visible!important; border:1px solid #dfe6ef!important; border-radius:28px!important; background: radial-gradient(160px 100px at 50% 0,rgba(244,185,40,.055),transparent 72%), #fff!important; color:#142840!important; box-shadow:0 24px 70px rgba(8,45,87,.13),0 1px 0 rgba(255,255,255,.95) inset!important; } #loginView .login-card::before{ content:""!important; position:absolute!important; top:0!important; right:22px!important; left:22px!important; height:3px!important; border-radius:0 0 99px 99px!important; background:linear-gradient(90deg,#f0b522 0%,#f5c94e 38%,#73a7c8 78%,#3d7ba6 100%)!important; } #loginView .login-product-lockup{ display:flex!important; align-items:center!important; justify-content:center!important; gap:12px!important; margin:0 0 12px!important; direction:rtl!important; text-align:right!important; } #loginView .login-product-lockup .mini-logo{ position:relative!important; display:grid!important; place-items:center!important; width:64px!important; height:64px!important; flex:0 0 64px!important; margin:0!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(232,173,34,.78)!important; border-radius:19px!important; background:#0a376c!important; box-shadow:0 10px 24px rgba(8,45,87,.16),0 0 0 4px rgba(244,185,40,.07)!important; } #loginView .login-product-lockup .mini-logo::before{display:none!important;content:none!important} #loginView .login-product-lockup .mini-logo img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important} #loginView .login-product-lockup strong{color:#102d4d!important;font-size:21px!important;font-weight:900!important;line-height:1.2!important} #loginView .login-product-lockup small{display:block!important;margin-top:3px!important;color:#8b97a6!important;font-size:9.7px!important;font-weight:750!important;letter-spacing:.7px!important} #loginView .login-kicker{ display:table!important; margin:0 auto 8px!important; padding:5px 11px!important; border:1px solid #ecd995!important; border-radius:999px!important; background:#fff8e5!important; color:#806007!important; text-align:center!important; font-size:9.4px!important; font-weight:850!important; } #loginView .login-card h2{margin:0!important;text-align:center!important;color:#102a48!important;font-size:25px!important;line-height:1.35!important;font-weight:900!important} #loginView #loginIntro{max-width:320px!important;margin:4px auto 15px!important;text-align:center!important;color:#778599!important;font-size:10.8px!important;line-height:1.65!important} #loginView .login-field-label{display:block!important;margin-top:10px!important;color:#29425e!important;font-size:10.6px!important;font-weight:850!important} #loginView .login-input-wrap{position:relative!important;display:block!important;margin-top:5px!important} #loginView .login-input-wrap .login-field-icon{ position:absolute!important; right:14px!important; top:50%!important; z-index:2!important; display:block!important; width:18px!important; height:18px!important; transform:translateY(-50%)!important; fill:none!important; stroke:#8093a7!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } #loginView .login-input-wrap input{ display:block!important; width:100%!important; height:52px!important; min-height:52px!important; margin:0!important; padding:10px 43px 10px 14px!important; border:1px solid #d8e2ed!important; border-radius:14px!important; background:#f9fbfd!important; color:#17304d!important; box-shadow:0 1px 2px rgba(18,48,80,.025) inset!important; font-size:12px!important; font-weight:700!important; text-align:right!important; outline:none!important; } #loginView .login-input-wrap input::placeholder{color:#9aa7b7!important;font-weight:650!important;opacity:1!important} #loginView .login-input-wrap:focus-within .login-field-icon{stroke:#155b92!important} #loginView .login-input-wrap input:focus{border-color:#1b639c!important;background:#fff!important;box-shadow:0 0 0 3px rgba(27,99,156,.095),0 6px 16px rgba(15,69,113,.045)!important} #loginView .password-wrap input{padding-left:48px!important} #loginView .password-wrap .icon-btn{ position:absolute!important; left:7px!important; top:50%!important; z-index:3!important; display:grid!important; place-items:center!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; margin:0!important; padding:0!important; transform:translateY(-50%)!important; border:0!important; border-radius:9px!important; background:transparent!important; color:#71869b!important; box-shadow:none!important; } #loginView .password-wrap .icon-btn svg{display:block!important;width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important} #loginView .password-wrap .icon-btn:hover,#loginView .password-wrap .icon-btn:focus-visible{background:#edf3f8!important;color:#174f80!important;outline:none!important} #loginView #loginBtn{ width:100%!important; height:52px!important; min-height:52px!important; margin:17px 0 0!important; padding:10px 16px!important; border:0!important; border-radius:14px!important; background:linear-gradient(135deg,#12568e 0%,#0b3c70 48%,#082d57 100%)!important; color:#fff!important; box-shadow:0 12px 25px rgba(8,45,87,.2),0 1px 0 rgba(255,255,255,.14) inset!important; font-size:13px!important; font-weight:900!important; } #loginView #loginBtn::after{content:"←"!important;display:inline-block!important;margin-right:8px!important;color:#f4c13a!important;font-size:13px!important} #loginView #installBtn{width:100%!important;min-height:42px!important;margin-top:8px!important;border:1px solid #dce5ef!important;border-radius:13px!important;background:#f7f9fc!important;color:#173a61!important;box-shadow:none!important;font-size:10.5px!important} #loginView .forgot-password-entry{display:block!important;width:auto!important;min-height:0!important;margin:8px auto 0!important;padding:6px 10px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#285579!important;font-size:10.3px!important;font-weight:800!important} #loginView .forgot-password-entry:hover{background:#f2f6fa!important;color:#123f6d!important} #loginView .teacher-signup-entry{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; width:100%!important; min-height:56px!important; margin:8px 0 0!important; padding:9px 12px 9px 13px!important; border:1px solid #e7d083!important; border-radius:14px!important; background:linear-gradient(180deg,#fffdf8 0%,#fff9e9 100%)!important; color:#163b62!important; box-shadow:none!important; text-align:right!important; } #loginView .teacher-signup-entry::before{display:none!important;content:none!important} #loginView .teacher-signup-entry .signup-copy{display:grid!important;gap:2px!important;text-align:right!important} #loginView .teacher-signup-entry .signup-copy small{color:#8995a4!important;font-size:9.3px!important;font-weight:650!important} #loginView .teacher-signup-entry .signup-copy strong{color:#765700!important;font-size:11px!important;font-weight:900!important} #loginView .teacher-signup-entry .signup-arrow{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:9px!important;background:#fff2c5!important;color:#876407!important;font-size:13px!important} #loginView #loginMessage{margin-top:10px!important;padding:9px 11px!important;border-radius:11px!important;font-size:10px!important} #loginView #loginNote{display:none!important} /* ---------- Desktop app chrome: one identity across teacher/parent/admin ---------- */ .app-shell:not(.hidden){min-height:100vh!important;background:#f4f7fb!important} .app-header{ position:sticky!important; top:0!important; z-index:70!important; height:72px!important; min-height:72px!important; padding:0 28px!important; border:0!important; border-bottom:1px solid rgba(255,255,255,.08)!important; background:linear-gradient(100deg,#082d57 0%,#0f4b83 100%)!important; color:#fff!important; box-shadow:0 7px 22px rgba(8,45,87,.10)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .app-header .mobile-platform-mark{display:none!important} .app-header-identity{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;direction:rtl!important} .app-header-identity .brand-mark.small{ display:block!important; width:42px!important; height:42px!important; flex:0 0 42px!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(244,185,40,.56)!important; border-radius:13px!important; background:#0b3768!important; box-shadow:0 5px 14px rgba(0,18,42,.16)!important; } .app-header-identity .brand-mark.small img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important} .app-header-copy{display:grid!important;gap:1px!important;min-width:0!important;text-align:right!important} .app-header-copy small{display:block!important;max-width:220px!important;color:#f0c84c!important;font-size:9px!important;font-weight:850!important;opacity:1!important} .app-header-copy strong,#headerScreenTitle{display:block!important;color:#fff!important;font-size:18px!important;font-weight:850!important;line-height:1.2!important} .app-header-copy span{display:block!important;max-width:300px!important;color:rgba(234,243,252,.66)!important;font-size:8.5px!important} .app-header .header-actions{display:flex!important;align-items:center!important;gap:9px!important} .app-header .role-badge{display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:7px 11px!important;border:1px solid rgba(244,185,40,.28)!important;border-radius:999px!important;background:rgba(244,185,40,.10)!important;color:#ffe08a!important;font-size:9px!important;font-weight:850!important} .app-header .app-header-logout{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;margin:0!important;padding:8px 13px!important;border:1px solid rgba(255,255,255,.17)!important;border-radius:11px!important;background:rgba(255,255,255,.07)!important;color:#fff!important;box-shadow:none!important;font-size:10px!important;font-weight:800!important} .app-header .app-header-logout:hover{background:rgba(255,255,255,.13)!important} body[data-role="teacher"] .header-notifications-btn:not(.hidden){ position:relative!important; inset:auto!important; top:auto!important; display:grid!important; place-items:center!important; width:38px!important; height:38px!important; margin-inline-start:auto!important; padding:0!important; transform:none!important; border:1px solid rgba(255,255,255,.17)!important; border-radius:11px!important; background:rgba(255,255,255,.07)!important; color:#fff!important; box-shadow:none!important; } body[data-role="teacher"] .header-notifications-btn svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important} body[data-role="teacher"] .header-notifications-badge{position:absolute!important;top:-5px!important;inset-inline-end:-5px!important;display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 4px!important;border:2px solid #0e447a!important;border-radius:99px!important;background:#d94b58!important;color:#fff!important;font-size:9px!important;font-weight:850!important;line-height:1!important} .app-body{ display:grid!important; grid-template-columns:248px minmax(0,1fr)!important; align-items:start!important; min-height:calc(100vh - 72px)!important; background:#f4f7fb!important; } .sidebar{ position:sticky!important; top:72px!important; align-self:start!important; height:calc(100vh - 72px)!important; min-height:0!important; padding:18px 12px 24px!important; overflow-y:auto!important; overscroll-behavior:contain!important; border-inline-end:1px solid rgba(255,255,255,.07)!important; background:linear-gradient(180deg,#0b3768 0%,#082d57 62%,#061f3d 100%)!important; box-shadow:10px 0 28px rgba(8,45,87,.045)!important; scrollbar-width:thin!important; scrollbar-color:rgba(255,255,255,.16) transparent!important; } .sidebar .nav-item{ position:relative!important; width:100%!important; min-height:42px!important; margin:0 0 4px!important; padding:10px 13px!important; border:1px solid transparent!important; border-radius:12px!important; background:transparent!important; color:rgba(238,244,251,.76)!important; box-shadow:none!important; text-align:right!important; font-size:11px!important; font-weight:750!important; line-height:1.35!important; transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease!important; } .sidebar .nav-item:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(255,255,255,.06)!important;transform:translateX(-1px)!important} .sidebar .nav-item.active{ border-color:rgba(244,185,40,.18)!important; background:linear-gradient(90deg,rgba(244,185,40,.17),rgba(255,255,255,.075))!important; color:#ffe083!important; } .sidebar .nav-item.active::before{content:""!important;position:absolute!important;inset-block:9px!important;inset-inline-start:0!important;width:3px!important;border-radius:99px!important;background:#f4b928!important} .sidebar .nav-count-badge{min-width:20px!important;height:20px!important;padding:0 6px!important;border-radius:99px!important;background:#d94b58!important;color:#fff!important;font-size:8px!important} .content{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:30px clamp(24px,3vw,44px) 54px!important; } .content>.section{width:min(100%,1320px)!important;margin-inline:auto!important} .section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important;margin-bottom:20px!important} .section-head>div:first-child{min-width:0!important} .section-head h2{margin:3px 0 0!important;color:#10233f!important;font-size:clamp(27px,2.2vw,34px)!important;line-height:1.25!important;font-weight:900!important;letter-spacing:-.45px!important} .section-head p{max-width:720px!important;margin:6px 0 0!important;color:#6b788a!important;font-size:11px!important;line-height:1.75!important} .page-kicker{margin-bottom:4px!important;color:#17639b!important;font-size:10px!important;font-weight:850!important} .panel,.stat-card,.group-card,.student-card{border-color:#dce5ef!important;box-shadow:0 8px 24px rgba(11,45,87,.045)!important} .panel{border-radius:20px!important} .stat-card{border-radius:18px!important} .stats-grid{gap:14px!important} .cards-grid{gap:14px!important} .primary-btn{border-radius:12px!important;background:linear-gradient(135deg,#0f4b83,#082d57)!important;color:#fff!important;box-shadow:0 7px 18px rgba(8,45,87,.10)!important} .secondary-btn,.ghost-btn{border-radius:12px!important} input,select,textarea{border-color:#dbe4ee!important;background:#fff!important} input:focus,select:focus,textarea:focus{border-color:#1b639c!important;box-shadow:0 0 0 3px rgba(27,99,156,.08)!important} /* Desktop navigation is sidebar-based. Mobile nav/sheets stay mobile-only. */ .teacher-mobile-nav,.mobile-more-sheet,.mobile-sheet-backdrop{display:none!important} /* Desktop dialogs remain centered cards, never phone-style bottom sheets. */ .modal{align-items:center!important;padding:24px!important} .modal-card{width:min(640px,calc(100vw - 48px))!important;max-width:640px!important;max-height:min(88vh,860px)!important;border-radius:24px!important;padding:22px!important} .card-preview-modal,.certificate-preview-modal,.leaderboard-print-preview-modal{max-width:min(1040px,calc(100vw - 64px))!important} } /* Compact laptop desktop: preserve the desktop shell without crowding. */ @media (min-width:901px) and (max-width:1120px){ #loginView.login-shell:not(.hidden){grid-template-columns:minmax(390px,.9fr) minmax(500px,1.1fr)!important} #loginView .login-brand{padding:38px!important} #loginView .hero-copy h1{font-size:38px!important} #loginView .hero-copy p{font-size:13px!important} #loginView .login-card{width:min(420px,calc(100% - 44px))!important;padding-inline:25px!important} .app-body{grid-template-columns:214px minmax(0,1fr)!important} .sidebar{padding-inline:9px!important} .sidebar .nav-item{padding-inline:11px!important;font-size:10px!important} .content{padding:26px 22px 48px!important} } /* Short laptop screens: keep login usable without scaling giant mobile controls. */ @media (min-width:901px) and (max-height:720px){ #loginView .login-brand{padding-block:30px!important;gap:20px!important} #loginView .hero-copy h1{margin-block:10px 8px!important;font-size:clamp(34px,3.6vw,48px)!important} #loginView .feature-pills span{padding-block:5px!important} #loginView .login-card{margin-block:18px!important;padding:21px 26px 18px!important;border-radius:24px!important} #loginView .login-product-lockup{margin-bottom:8px!important} #loginView .login-product-lockup .mini-logo{width:56px!important;height:56px!important;flex-basis:56px!important;border-radius:17px!important} #loginView .login-kicker{margin-bottom:5px!important;padding-block:4px!important} #loginView .login-card h2{font-size:22px!important} #loginView #loginIntro{margin-bottom:10px!important;line-height:1.5!important} #loginView .login-field-label{margin-top:7px!important} #loginView .login-input-wrap input,#loginView #loginBtn{height:46px!important;min-height:46px!important} #loginView #loginBtn{margin-top:12px!important} #loginView .forgot-password-entry,#loginView .teacher-signup-entry{margin-top:6px!important} #loginView .teacher-signup-entry{min-height:50px!important;padding-block:7px!important} } /* ====================================================================== V1.38.6 — DESKTOP LOGIN IDENTITY LOCK Desktop-only refinement. The approved phone UI remains byte-for-byte governed by its existing <=900px rules; these overrides start at 901px. ====================================================================== */ @media (min-width:901px){ /* One continuous TABEA ONE canvas: only the credentials card is white. */ body:has(#loginView:not(.hidden)){ background:#061e3b!important; } #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(450px,.92fr) minmax(570px,1.08fr)!important; min-height:100vh!important; padding:0!important; overflow:hidden!important; background: radial-gradient(52% 58% at 18% 22%,rgba(25,112,183,.50) 0%,rgba(13,72,129,.20) 48%,transparent 76%), radial-gradient(34% 50% at 84% 86%,rgba(31,105,168,.22) 0%,transparent 75%), radial-gradient(22% 34% at 72% 16%,rgba(244,185,40,.07) 0%,transparent 78%), linear-gradient(145deg,#0b437d 0%,#082f5b 46%,#061a33 100%)!important; color:#fff!important; font-family:"Segoe UI",Tahoma,Arial,sans-serif!important; } #loginView.login-shell:not(.hidden)::before{ content:""!important; position:absolute!important; z-index:0!important; width:620px!important; height:620px!important; inset:-250px auto auto -170px!important; border:1px solid rgba(255,255,255,.042)!important; border-radius:50%!important; box-shadow:0 0 0 88px rgba(255,255,255,.015),0 0 0 176px rgba(255,255,255,.010)!important; pointer-events:none!important; } #loginView.login-shell:not(.hidden)::after{ content:""!important; position:absolute!important; z-index:0!important; width:410px!important; height:410px!important; inset:auto 24% -265px auto!important; border:54px solid rgba(244,185,40,.035)!important; border-radius:50%!important; pointer-events:none!important; } /* Branding panel floats on the same blue canvas; no separate rectangle. */ #loginView .login-brand{ position:relative!important; z-index:1!important; min-height:100vh!important; padding:clamp(42px,4.8vw,76px)!important; display:grid!important; grid-template-rows:auto 1fr!important; align-content:stretch!important; gap:28px!important; overflow:visible!important; background:transparent!important; color:#fff!important; } #loginView .login-brand::before, #loginView .login-brand::after{display:none!important;content:none!important} #loginView .brand-row{ align-self:start!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:14px!important; direction:rtl!important; text-align:right!important; } #loginView .brand-row .brand-mark{ width:58px!important; height:58px!important; flex:0 0 58px!important; border:1px solid rgba(244,185,40,.68)!important; border-radius:17px!important; background:#0c3b70!important; box-shadow:0 12px 30px rgba(0,16,38,.24)!important; } #loginView .brand-row strong{ color:#fff!important; font-size:23px!important; font-weight:750!important; line-height:1.25!important; letter-spacing:0!important; } #loginView .brand-row small{ margin-top:3px!important; color:rgba(238,245,252,.66)!important; font-size:10px!important; font-weight:650!important; letter-spacing:.85px!important; } /* Reuse the exact approved phone messaging, redistributed for desktop. */ #loginView .desktop-login-story{ position:relative!important; z-index:1!important; align-self:center!important; justify-self:stretch!important; max-width:660px!important; margin-block:-2vh 7vh!important; text-align:right!important; } #loginView .desktop-login-story-kicker{ display:inline-flex!important; align-items:center!important; gap:10px!important; color:#f2c448!important; font-size:14px!important; font-weight:700!important; line-height:1.6!important; } #loginView .desktop-login-story-kicker::before{ content:""!important; width:28px!important; height:3px!important; flex:0 0 28px!important; border-radius:99px!important; background:#f4b928!important; box-shadow:0 0 16px rgba(244,185,40,.18)!important; } #loginView .desktop-login-story h1{ max-width:650px!important; margin:16px 0 14px!important; color:#fff!important; font-size:clamp(44px,4.35vw,64px)!important; line-height:1.16!important; font-weight:730!important; letter-spacing:-.65px!important; text-wrap:balance!important; } #loginView .desktop-login-story p{ max-width:585px!important; margin:0!important; color:rgba(236,244,252,.78)!important; font-size:17px!important; line-height:1.9!important; font-weight:400!important; } #loginView .hero-copy, #loginView .feature-pills{display:none!important} /* The card is the only white surface on desktop. */ #loginView .login-card{ position:relative!important; z-index:2!important; align-self:center!important; justify-self:center!important; width:min(468px,calc(100% - 74px))!important; max-width:468px!important; margin:28px auto!important; padding:38px 38px 34px!important; overflow:visible!important; border:1px solid rgba(220,229,239,.88)!important; border-radius:30px!important; background:#fff!important; color:#17304d!important; box-shadow:0 32px 90px rgba(0,18,43,.32),0 3px 12px rgba(0,18,43,.08),0 1px 0 rgba(255,255,255,.95) inset!important; font-family:"Segoe UI",Tahoma,Arial,sans-serif!important; } #loginView .login-card::before{ top:0!important; right:28px!important; left:28px!important; height:3px!important; border-radius:0 0 99px 99px!important; background:linear-gradient(90deg,#f0b522 0%,#f5c94e 40%,#8cb7d0 76%,#397aa7 100%)!important; } /* Product lockup / tagline / intro live in the blue brand area on desktop. */ #loginView .login-product-lockup, #loginView .login-kicker, #loginView #loginIntro{display:none!important} #loginView .login-card h2{ margin:0 0 25px!important; color:#102d4d!important; text-align:right!important; font-size:31px!important; line-height:1.32!important; font-weight:720!important; letter-spacing:-.25px!important; } #loginView .login-field-label{ display:block!important; margin-top:17px!important; color:#2c4059!important; font-size:13px!important; font-weight:650!important; line-height:1.55!important; } #loginView .login-field-label:first-of-type{margin-top:0!important} #loginView .login-input-wrap{margin-top:8px!important} #loginView .login-input-wrap .login-field-icon{ right:16px!important; width:20px!important; height:20px!important; stroke:#8799ab!important; stroke-width:1.65!important; } #loginView .login-input-wrap input{ height:56px!important; min-height:56px!important; padding:11px 48px 11px 16px!important; border:1px solid #d8e2ec!important; border-radius:15px!important; background:#f8fafc!important; color:#18334f!important; box-shadow:0 1px 2px rgba(18,48,80,.025) inset!important; font-size:14px!important; font-weight:600!important; line-height:1.2!important; } #loginView .login-input-wrap input::placeholder{ color:#9aa7b5!important; font-weight:500!important; } #loginView .password-wrap input{padding-left:52px!important} #loginView .password-wrap .icon-btn{ left:8px!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; border-radius:10px!important; } #loginView .password-wrap .icon-btn svg{width:20px!important;height:20px!important} #loginView #loginBtn{ height:56px!important; min-height:56px!important; margin-top:22px!important; border-radius:15px!important; background:linear-gradient(135deg,#12629d 0%,#0d4a80 48%,#082f5b 100%)!important; box-shadow:0 13px 28px rgba(8,45,87,.21),0 1px 0 rgba(255,255,255,.14) inset!important; font-size:15px!important; font-weight:700!important; letter-spacing:0!important; } #loginView #loginBtn::after{margin-right:9px!important;font-size:14px!important} #loginView #installBtn{ min-height:46px!important; margin-top:9px!important; border-radius:13px!important; font-size:12px!important; font-weight:650!important; } #loginView .forgot-password-entry{ margin:10px auto 0!important; padding:7px 11px!important; border-radius:10px!important; color:#285579!important; font-size:12px!important; font-weight:650!important; } #loginView .teacher-signup-entry{ min-height:64px!important; margin-top:10px!important; padding:10px 14px!important; border-radius:15px!important; background:linear-gradient(180deg,#fffdf8 0%,#fff9e9 100%)!important; } #loginView .teacher-signup-entry .signup-copy small{ color:#8390a0!important; font-size:11.5px!important; font-weight:500!important; } #loginView .teacher-signup-entry .signup-copy strong{ color:#775900!important; font-size:13px!important; font-weight:700!important; } #loginView .teacher-signup-entry .signup-arrow{ width:34px!important; height:34px!important; flex:0 0 34px!important; border-radius:10px!important; font-size:14px!important; } #loginView #loginMessage{font-size:12px!important} #loginView #loginNote{display:none!important} } /* Laptop widths: keep the blue breathing room and a full-size usable card. */ @media (min-width:901px) and (max-width:1180px){ #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(420px,.96fr) minmax(500px,1.04fr)!important; } #loginView .login-brand{padding:38px!important} #loginView .desktop-login-story{margin-block:0 4vh!important} #loginView .desktop-login-story h1{font-size:43px!important} #loginView .desktop-login-story p{font-size:15px!important} #loginView .login-card{width:min(446px,calc(100% - 46px))!important;padding-inline:32px!important} } /* Short laptop screens: compress vertical rhythm only; never scale the card like mobile. */ @media (min-width:901px) and (max-height:720px){ #loginView .login-brand{padding-block:30px!important} #loginView .brand-row .brand-mark{width:52px!important;height:52px!important;flex-basis:52px!important} #loginView .brand-row strong{font-size:21px!important} #loginView .desktop-login-story{margin-block:0 2vh!important} #loginView .desktop-login-story-kicker{font-size:12px!important} #loginView .desktop-login-story h1{margin-block:12px 10px!important;font-size:40px!important} #loginView .desktop-login-story p{font-size:14px!important;line-height:1.75!important} #loginView .login-card{margin-block:16px!important;padding:27px 32px 25px!important;border-radius:26px!important} #loginView .login-card h2{margin-bottom:17px!important;font-size:27px!important} #loginView .login-field-label{margin-top:11px!important;font-size:12px!important} #loginView .login-input-wrap{margin-top:6px!important} #loginView .login-input-wrap input,#loginView #loginBtn{height:50px!important;min-height:50px!important} #loginView #loginBtn{margin-top:16px!important} #loginView .forgot-password-entry{margin-top:6px!important;padding-block:5px!important} #loginView .teacher-signup-entry{min-height:54px!important;margin-top:6px!important;padding-block:7px!important} } /* ====================================================================== V1.38.7 — DESKTOP LOGIN FINAL BALANCE & TYPOGRAPHY Desktop-only visual pass. The approved mobile UI is intentionally left untouched: every rule below starts at 901px. ====================================================================== */ @media (min-width:901px){ #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(500px,.96fr) minmax(570px,1.04fr)!important; font-family:"Cairo","Segoe UI Variable","Segoe UI",Tahoma,Arial,sans-serif!important; font-kerning:normal!important; text-rendering:optimizeLegibility!important; } /* Give the sign-in surface desktop presence without turning it into a scaled phone card. */ #loginView .login-card{ width:min(520px,calc(100% - 64px))!important; max-width:520px!important; padding:42px 42px 38px!important; border-radius:31px!important; box-shadow:0 34px 96px rgba(0,18,43,.34),0 4px 16px rgba(0,18,43,.09),0 1px 0 rgba(255,255,255,.96) inset!important; font-family:"Cairo","Segoe UI Variable","Segoe UI",Tahoma,Arial,sans-serif!important; } #loginView .login-card::before{ right:31px!important; left:31px!important; height:3px!important; } #loginView .login-card h2{ margin-bottom:27px!important; font-size:34px!important; line-height:1.35!important; font-weight:750!important; letter-spacing:0!important; } #loginView .login-field-label{ margin-top:18px!important; font-size:14.25px!important; line-height:1.6!important; font-weight:650!important; } #loginView .login-field-label:first-of-type{margin-top:0!important} #loginView .login-input-wrap{margin-top:9px!important} #loginView .login-input-wrap .login-field-icon{ right:17px!important; width:21px!important; height:21px!important; } #loginView .login-input-wrap input{ height:58px!important; min-height:58px!important; padding:12px 50px 12px 17px!important; border-radius:16px!important; font-size:15px!important; font-weight:600!important; } #loginView .login-input-wrap input::placeholder{ font-size:14.25px!important; font-weight:500!important; } #loginView .password-wrap input{padding-left:54px!important} #loginView .password-wrap .icon-btn{ left:9px!important; width:41px!important; height:41px!important; min-width:41px!important; min-height:41px!important; } #loginView #loginBtn{ height:58px!important; min-height:58px!important; margin-top:23px!important; border-radius:16px!important; font-size:16px!important; font-weight:750!important; } #loginView .forgot-password-entry{ margin-top:11px!important; font-size:12.75px!important; line-height:1.5!important; font-weight:650!important; } #loginView .teacher-signup-entry{ min-height:68px!important; margin-top:11px!important; padding:11px 15px!important; border-radius:16px!important; } #loginView .teacher-signup-entry .signup-copy small{ font-size:12px!important; line-height:1.5!important; } #loginView .teacher-signup-entry .signup-copy strong{ font-size:14px!important; line-height:1.5!important; font-weight:750!important; } #loginView .teacher-signup-entry .signup-arrow{ width:36px!important; height:36px!important; flex-basis:36px!important; border-radius:11px!important; } /* The brand lockup gets enough visual authority to balance the card. */ #loginView .brand-row{gap:16px!important} #loginView .brand-row .brand-mark{ width:66px!important; height:66px!important; flex-basis:66px!important; border-radius:19px!important; } #loginView .brand-row strong{ font-size:25px!important; font-weight:750!important; } #loginView .brand-row small{ margin-top:4px!important; font-size:11px!important; letter-spacing:.9px!important; } /* Slightly calmer headline; stronger supporting copy = balanced two-column composition instead of a marketing panel overpowering the form. */ #loginView .desktop-login-story{ max-width:625px!important; margin-block:-1vh 6vh!important; } #loginView .desktop-login-story-kicker{ font-size:14.5px!important; font-weight:700!important; } #loginView .desktop-login-story h1{ max-width:610px!important; margin:15px 0 13px!important; font-size:clamp(42px,3.8vw,57px)!important; line-height:1.18!important; font-weight:740!important; letter-spacing:-.2px!important; } #loginView .desktop-login-story p{ max-width:560px!important; font-size:16.5px!important; line-height:1.9!important; font-weight:450!important; } } /* Standard laptop widths: maintain the same visual hierarchy without squeezing the card back to phone-like proportions. */ @media (min-width:901px) and (max-width:1180px){ #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(470px,.98fr) minmax(500px,1.02fr)!important; } #loginView .login-brand{padding-inline:42px!important} #loginView .login-card{ width:min(492px,calc(100% - 42px))!important; max-width:492px!important; padding-inline:36px!important; } #loginView .desktop-login-story h1{font-size:41px!important} #loginView .desktop-login-story p{font-size:15.5px!important} } /* Short laptop viewport: preserve readability first, then trim vertical rhythm. Width and type stay desktop-sized. */ @media (min-width:901px) and (max-height:720px){ #loginView .login-brand{padding-block:26px!important} #loginView .brand-row .brand-mark{width:58px!important;height:58px!important;flex-basis:58px!important} #loginView .brand-row strong{font-size:23px!important} #loginView .desktop-login-story{margin-block:0 1vh!important} #loginView .desktop-login-story-kicker{font-size:12.75px!important} #loginView .desktop-login-story h1{margin-block:10px 8px!important;font-size:38px!important;line-height:1.18!important} #loginView .desktop-login-story p{font-size:14.25px!important;line-height:1.7!important} #loginView .login-card{ margin-block:14px!important; padding:25px 34px 23px!important; border-radius:27px!important; } #loginView .login-card h2{margin-bottom:16px!important;font-size:29px!important} #loginView .login-field-label{margin-top:10px!important;font-size:12.75px!important} #loginView .login-input-wrap{margin-top:6px!important} #loginView .login-input-wrap input,#loginView #loginBtn{height:51px!important;min-height:51px!important} #loginView .login-input-wrap input{font-size:13.75px!important} #loginView #loginBtn{margin-top:15px!important;font-size:14.5px!important} #loginView .forgot-password-entry{margin-top:5px!important;padding-block:5px!important;font-size:11.5px!important} #loginView .teacher-signup-entry{min-height:55px!important;margin-top:5px!important;padding-block:7px!important} #loginView .teacher-signup-entry .signup-copy small{font-size:10.75px!important} #loginView .teacher-signup-entry .signup-copy strong{font-size:12.5px!important} #loginView .teacher-signup-entry .signup-arrow{width:32px!important;height:32px!important;flex-basis:32px!important} } /* ====================================================================== V1.38.8 — DESKTOP LOGIN RIGHT-PANEL SCALE Desktop-only refinement: use the available brand-side canvas more fully. The approved phone/tablet UI remains untouched; all rules start at 901px. ====================================================================== */ @media (min-width:901px){ #loginView .login-brand{ padding-inline:clamp(52px,5.2vw,86px)!important; } #loginView .brand-row{ gap:18px!important; } #loginView .brand-row .brand-mark{ width:72px!important; height:72px!important; flex-basis:72px!important; border-radius:20px!important; } #loginView .brand-row strong{ font-size:28px!important; line-height:1.18!important; font-weight:780!important; } #loginView .brand-row small{ margin-top:5px!important; font-size:12.5px!important; line-height:1.2!important; letter-spacing:1px!important; } #loginView .desktop-login-story{ width:100%!important; max-width:690px!important; margin-block:0 4vh!important; } #loginView .desktop-login-story-kicker{ gap:12px!important; font-size:16.5px!important; line-height:1.55!important; font-weight:750!important; } #loginView .desktop-login-story-kicker::before{ width:34px!important; flex-basis:34px!important; } #loginView .desktop-login-story h1{ max-width:680px!important; margin:18px 0 16px!important; font-size:clamp(54px,4.75vw,70px)!important; line-height:1.12!important; font-weight:760!important; letter-spacing:-.45px!important; } #loginView .desktop-login-story p{ max-width:625px!important; font-size:18.5px!important; line-height:1.78!important; font-weight:450!important; } } /* Typical 1366×768 / short laptop browser viewport: keep the form compact vertically, but do NOT shrink the marketing copy back to phone-like scale. */ @media (min-width:901px) and (max-height:720px){ #loginView .brand-row .brand-mark{ width:64px!important; height:64px!important; flex-basis:64px!important; } #loginView .brand-row strong{font-size:25.5px!important} #loginView .brand-row small{font-size:11.5px!important} #loginView .desktop-login-story{ max-width:650px!important; margin-block:0 1vh!important; } #loginView .desktop-login-story-kicker{ font-size:15.5px!important; line-height:1.45!important; } #loginView .desktop-login-story h1{ max-width:640px!important; margin:12px 0 10px!important; font-size:54px!important; line-height:1.1!important; } #loginView .desktop-login-story p{ max-width:590px!important; font-size:17px!important; line-height:1.65!important; } } @media (min-width:901px) and (max-width:1180px){ #loginView .login-brand{padding-inline:40px!important} #loginView .brand-row .brand-mark{ width:62px!important; height:62px!important; flex-basis:62px!important; } #loginView .brand-row strong{font-size:24px!important} #loginView .brand-row small{font-size:11px!important} #loginView .desktop-login-story-kicker{font-size:14.5px!important} #loginView .desktop-login-story h1{font-size:48px!important} #loginView .desktop-login-story p{font-size:16px!important} } /* ====================================================================== V1.38.9 — DESKTOP LOGIN COMPOSITION LOCK A true desktop composition, not a scaled mobile stack. Mobile/tablet remain governed by the existing <=900px rules without visual changes. ====================================================================== */ @media (min-width:901px){ #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(470px,.90fr) minmax(610px,1.10fr)!important; } #loginView .login-brand{ grid-template-rows:auto minmax(0,1fr)!important; padding:clamp(46px,4.7vw,76px) clamp(58px,5.5vw,92px) clamp(42px,4vw,66px)!important; gap:20px!important; } /* One visual axis: brand lockup, hero copy and footer detail all share the same right edge. */ #loginView .brand-row{ width:min(100%,680px)!important; justify-self:end!important; justify-content:flex-start!important; gap:17px!important; } #loginView .brand-row .brand-mark{ width:74px!important; height:74px!important; flex-basis:74px!important; border-radius:22px!important; box-shadow:0 16px 36px rgba(0,16,38,.28),0 0 0 1px rgba(255,255,255,.035) inset!important; } #loginView .brand-row strong{ font-family:"Segoe UI Variable Display","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:29px!important; line-height:1.16!important; font-weight:750!important; } #loginView .brand-row small{ margin-top:5px!important; font-size:12.5px!important; line-height:1.2!important; font-weight:650!important; letter-spacing:1px!important; } #loginView .desktop-login-story{ position:relative!important; align-self:stretch!important; justify-self:end!important; width:min(100%,680px)!important; max-width:680px!important; margin:0!important; display:grid!important; grid-template-rows:1fr auto!important; align-items:center!important; gap:30px!important; text-align:right!important; } #loginView .desktop-login-story-copy{ position:relative!important; align-self:center!important; padding:8px 27px 10px 0!important; } #loginView .desktop-login-story-copy::before{ content:""!important; position:absolute!important; top:9px!important; right:0!important; bottom:9px!important; width:4px!important; border-radius:99px!important; background:linear-gradient(180deg,#f6cc51 0%,#e9ad1d 72%,rgba(233,173,29,.18) 100%)!important; box-shadow:0 0 18px rgba(244,185,40,.15)!important; } #loginView .desktop-login-story-kicker{ display:block!important; margin:0!important; color:#f4c442!important; font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:18px!important; line-height:1.55!important; font-weight:700!important; } #loginView .desktop-login-story-kicker::before{display:none!important;content:none!important} #loginView .desktop-login-story h1{ max-width:none!important; margin:18px 0 18px!important; color:#fff!important; font-family:"Segoe UI Variable Display","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:clamp(60px,5.3vw,78px)!important; line-height:1.06!important; font-weight:760!important; letter-spacing:0!important; text-wrap:initial!important; } #loginView .desktop-login-story h1 span{display:block!important} #loginView .desktop-login-story h1 span+span{margin-top:3px!important} #loginView .desktop-login-story p{max-width:none!important} #loginView .desktop-login-story-lead{ margin:0!important; color:rgba(244,249,255,.92)!important; font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:21px!important; line-height:1.75!important; font-weight:500!important; } #loginView .desktop-login-story-support{ margin:8px 0 0!important; color:rgba(223,237,250,.67)!important; font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:15px!important; line-height:1.75!important; font-weight:450!important; } #loginView .desktop-login-story-features{ align-self:end!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:12px!important; padding-right:31px!important; color:rgba(232,242,252,.72)!important; font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif!important; font-size:13px!important; line-height:1.4!important; font-weight:600!important; } #loginView .desktop-login-story-features i{ display:block!important; width:5px!important; height:5px!important; flex:0 0 5px!important; border-radius:50%!important; background:#f0b826!important; box-shadow:0 0 0 4px rgba(240,184,38,.08)!important; } } /* 1366×768-class laptops: retain the desktop hierarchy while allowing the white form to fit vertically. This block intentionally appears last so older compact-laptop rules cannot shrink the right-side narrative again. */ @media (min-width:901px) and (max-width:1180px){ #loginView.login-shell:not(.hidden){ grid-template-columns:minmax(450px,.93fr) minmax(540px,1.07fr)!important; } #loginView .login-brand{ padding-inline:48px!important; } #loginView .brand-row, #loginView .desktop-login-story{width:min(100%,610px)!important;max-width:610px!important} #loginView .brand-row .brand-mark{width:66px!important;height:66px!important;flex-basis:66px!important;border-radius:19px!important} #loginView .brand-row strong{font-size:26px!important} #loginView .brand-row small{font-size:11.5px!important} #loginView .desktop-login-story-copy{padding-right:23px!important} #loginView .desktop-login-story-kicker{font-size:16px!important} #loginView .desktop-login-story h1{font-size:56px!important;line-height:1.07!important;margin-block:15px 15px!important} #loginView .desktop-login-story-lead{font-size:18px!important;line-height:1.65!important} #loginView .desktop-login-story-support{font-size:14px!important;line-height:1.65!important} #loginView .desktop-login-story-features{padding-right:27px!important;font-size:12px!important;gap:10px!important} } @media (min-width:901px) and (max-height:720px){ #loginView .login-brand{padding-block:24px 28px!important} #loginView .brand-row .brand-mark{width:62px!important;height:62px!important;flex-basis:62px!important} #loginView .brand-row strong{font-size:25px!important} #loginView .desktop-login-story{gap:18px!important} #loginView .desktop-login-story-copy{padding-block:4px!important} #loginView .desktop-login-story-kicker{font-size:15.5px!important} #loginView .desktop-login-story h1{font-size:54px!important;line-height:1.06!important;margin-block:12px 12px!important} #loginView .desktop-login-story-lead{font-size:17.5px!important;line-height:1.6!important} #loginView .desktop-login-story-support{font-size:13.5px!important;line-height:1.55!important;margin-top:6px!important} #loginView .desktop-login-story-features{font-size:11.75px!important} } /* ====================================================================== V1.40.0 — BETA IDENTITY / VERIFICATION / PIN / PAYMENT SAFETY The approved phone UI is the visual source of truth. These desktop-only rules reuse the same final component styling and preserve DOM order; the adaptation below changes only available width / column count / spacing. ====================================================================== */ @media (min-width:901px){ #homeSection #statsGrid{display:none!important} #homeSection #homePanels{display:block!important;margin:0!important} #homeSection .teacher-command-center{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #homeSection .smart-dashboard{display:grid;gap:14px} #homeSection .smart-dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0 2px;background:transparent;border:0;box-shadow:none} #homeSection .smart-dashboard-hero .eyebrow,#homeSection .smart-dashboard-hero p{display:none} #homeSection .smart-dashboard-hero h3{margin:0;color:var(--tp-muted);font-size:12px;font-weight:650} #homeSection .smart-next-lesson{position:relative;order:-2;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:18px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--tp-navy),#12528F);color:#fff;box-shadow:0 12px 34px rgba(8,45,87,.10);overflow:hidden} #homeSection .smart-next-icon{grid-row:1/3;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--tp-gold);display:grid;place-items:center} #homeSection .smart-next-copy h4{margin:3px 0;color:#fff;font-size:18px} #homeSection .smart-next-copy p{display:block;margin:0;color:rgba(255,255,255,.72);font-size:11px} #homeSection .smart-next-copy span{color:rgba(255,255,255,.7);font-size:11px} #homeSection .smart-next-copy b{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:99px;background:rgba(244,185,40,.16);color:#FFE18A;font-size:10px} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{grid-column:1/-1;width:100%;min-height:44px;margin:12px 0 0;border-radius:12px;background:var(--tp-gold);color:var(--tp-navy);box-shadow:none} #homeSection .dashboard-quick-actions{order:-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0} #homeSection .dashboard-quick-actions button{min-width:0;min-height:76px;padding:10px 4px;border:1px solid var(--tp-line);border-radius:15px;background:#fff;color:var(--tp-ink);box-shadow:none} #homeSection .dashboard-quick-actions button span{width:31px;height:31px;margin:auto auto 6px;border-radius:10px;background:#EDF4FC;color:var(--tp-blue);display:grid;place-items:center;font-size:16px} #homeSection .dashboard-quick-actions button b{font-size:9.5px;line-height:1.35;white-space:normal} #homeSection .smart-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0} #homeSection .smart-kpis>div{min-width:0;padding:11px 6px;border:1px solid var(--tp-line);border-radius:14px;background:#fff;text-align:center} #homeSection .smart-kpis span{font-size:8.5px;color:var(--tp-muted)} #homeSection .smart-kpis b{display:block;margin-top:5px;color:var(--tp-navy);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .dashboard-secondary-grid{display:none!important} #studentsSection #addStudentBtn{width:auto!important;min-width:118px;min-height:42px;margin:0!important;padding:10px 13px;border-radius:13px;background:var(--tp-navy);box-shadow:none;font-size:11px;white-space:nowrap} #studentsSection #addStudentBtn span{color:var(--tp-gold);font-size:15px} #studentsSection .students-list-panel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #studentsSection .student-search-wrap{position:relative;margin:0 0 12px!important} #studentsSection .student-search-wrap .search-icon{position:absolute;right:15px;top:50%;width:16px;height:16px;border:2px solid #8290A3;border-radius:50%;transform:translateY(-60%);z-index:2} #studentsSection .student-search-wrap .search-icon::after{content:"";position:absolute;width:7px;height:2px;background:#8290A3;left:-5px;bottom:-2px;transform:rotate(45deg)} #studentsSection #studentSearch{max-width:none;width:100%;height:48px;margin:0;padding:10px 44px 10px 14px;border:1px solid var(--tp-line);border-radius:15px;background:#fff;box-shadow:none;font-size:14px} #studentsSection .students-data-table tbody{gap:10px} #studentsSection .students-data-table tr.student-row-card{grid-template-columns:minmax(0,1fr) auto!important;padding:14px!important;border-color:var(--tp-line)!important;border-radius:18px!important;box-shadow:var(--tp-shadow)!important} #studentsSection .students-data-table tr.student-row-card td[data-label="الاسم"]{display:grid!important;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px} #studentsSection .student-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#EAF2FC,#F7FAFE);border:1px solid #DCE7F4;color:var(--tp-blue);display:grid;place-items:center;font-size:14px;font-weight:850} #studentsSection .student-identity-copy{min-width:0;display:block} #studentsSection .student-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tp-ink);font-size:14px} #studentsSection .student-inline-meta{margin-top:2px;font-size:10px;color:var(--tp-muted)} #studentsSection .student-primary-actions{display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;direction:ltr} #studentsSection .student-primary-actions .action-btn{height:40px!important;min-height:40px!important;border-radius:12px!important;font-size:10px!important;direction:rtl} #studentsSection .student-primary-actions .whatsapp-action{grid-column:3;background:#ECF8F3!important;border-color:#BFE4D5!important;color:var(--tp-success)!important} #studentsSection .student-primary-actions .qr-action{grid-column:2;background:#EDF5FC!important;border-color:#CFE1F2!important;color:var(--tp-navy)!important} #studentsSection .student-primary-actions .row-more-menu{grid-column:1;grid-row:1} #studentsSection .row-more-trigger{width:42px!important;height:40px!important;border-radius:12px!important;border:1px solid var(--tp-line)!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-width:0!important; border:1px solid #DCE7F1!important;border-radius:16px!important; background:linear-gradient(145deg,#fff 0%,#F8FBFE 100%)!important; box-shadow:0 6px 18px rgba(11,45,87,.045)!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::before, body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::after{content:none!important;display:none!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:#65758A!important;font-weight:750!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:#2F78B7;box-shadow:0 0 0 3px #EAF3FA} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card b{color:#0B3564!important;font-weight:850!important;letter-spacing:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2), body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4), body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4){border-color:#CFE9DE!important;background:linear-gradient(145deg,#fff,#F3FBF7)!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2) span::before, body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4) span::before, body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4) span::before{background:#16805D!important;box-shadow:0 0 0 3px #E5F6EF!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1){border-color:#F0D1D5!important;background:linear-gradient(145deg,#fff,#FFF7F8)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1) span::before{background:#C64752!important;box-shadow:0 0 0 3px #FBEAEC!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2){border-color:#F0DEC0!important;background:linear-gradient(145deg,#fff,#FFFAF1)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2) span::before{background:#B77816!important;box-shadow:0 0 0 3px #FFF1D8!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2){border-color:#E9D694!important;background:linear-gradient(145deg,#fff,#FFFBEF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2) span::before{background:#D9A51E!important;box-shadow:0 0 0 3px #FFF3CF!important} #homeSection .home-page-head{align-items:center!important;margin-bottom:12px!important} #homeSection .home-page-head h2{margin:0!important;font-size:27px!important;line-height:1.25!important;letter-spacing:-.02em!important} #homeSection .home-page-head .muted{font-size:11px!important;max-width:245px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .home-page-head .icon-action-btn{position:relative!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important;line-height:1!important;box-shadow:none!important} #homeSection .home-page-head .icon-action-btn::before,#homeSection .home-page-head .icon-action-btn::after{display:none!important;content:none!important} #homeSection .smart-dashboard{gap:12px!important} #homeSection .smart-next-lesson{grid-template-columns:minmax(0,1fr) auto!important;gap:4px 10px!important;padding:16px!important;border-radius:18px!important} #homeSection .smart-next-lesson::after{width:110px!important;height:110px!important;inset-inline-start:-54px!important;bottom:-62px!important;border-width:18px!important;opacity:.55!important;pointer-events:none} #homeSection .smart-next-icon{display:none!important} #homeSection .smart-next-copy{grid-column:1/-1!important;min-width:0!important} #homeSection .smart-next-copy h4{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-next-copy b{max-width:100%;white-space:nowrap} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{min-height:42px!important;margin-top:9px!important} #homeSection .dashboard-quick-actions{gap:7px!important} #homeSection .dashboard-quick-actions button{min-height:70px!important;padding:8px 3px!important;border-radius:14px!important} #homeSection .dashboard-quick-actions button span{width:29px!important;height:29px!important;margin-bottom:4px!important} #homeSection .dashboard-quick-actions button b{font-size:9px!important} #homeSection .smart-dashboard-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:0!important} #homeSection .smart-dashboard-hero h3{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-dashboard-hero .secondary-btn{width:auto!important;min-width:92px!important;min-height:36px!important;margin:0!important;padding:7px 10px!important} #homeSection .smart-kpis{gap:7px!important} #homeSection .smart-kpis>div{min-width:0!important;padding:10px 4px!important;border-radius:13px!important} #homeSection .smart-kpis span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px!important} #homeSection .smart-kpis b{font-size:14px!important;direction:rtl;text-overflow:clip!important} #homeSection .smart-kpis>div:last-child b{font-size:10.5px!important;white-space:normal!important;line-height:1.25!important;max-height:27px;overflow:hidden} #homeSection .smart-alert-dashboard-card{padding:15px!important;border-radius:18px!important} #homeSection .smart-alert-dashboard-card h4{font-size:16px!important} #homeSection .smart-today-mini{padding:14px!important;border-radius:18px!important;overflow:hidden!important} #homeSection .smart-today-mini .smart-section-title{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:9px!important} #homeSection .smart-today-mini .smart-section-title b{font-size:18px!important;color:var(--tp-ink)!important} #homeSection .smart-today-mini .smart-section-title span{font-size:10px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-list{display:grid!important;gap:8px!important} #homeSection .smart-today-mini .schedule-session-card,#homeSection .smart-today-mini .schedule-session-card.compact{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:3px 10px!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #homeSection .smart-today-mini .schedule-session-time{grid-column:1!important;grid-row:1!important;padding:0!important;text-align:right!important} #homeSection .smart-today-mini .schedule-session-time b{font-size:13px!important;color:var(--tp-navy)!important} #homeSection .smart-today-mini .schedule-session-time span{font-size:9px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-session-main{grid-column:2!important;grid-row:1!important;min-width:0!important} #homeSection .smart-today-mini .schedule-session-title{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important} #homeSection .smart-today-mini .schedule-session-title h4{margin:0!important;min-width:0!important;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeSection .smart-today-mini .schedule-session-status{flex:0 0 auto!important;padding:4px 6px!important;font-size:7.5px!important} #homeSection .smart-today-mini .schedule-session-main p{margin:3px 0 0!important;font-size:9px!important;color:var(--tp-muted)!important} #homeSection .smart-today-mini .schedule-lesson-btn{grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-height:36px!important;margin-top:7px!important;border:1px solid #EEDB9B!important;border-radius:11px!important;background:#FFF9E8!important;color:var(--tp-navy)!important;font-size:10px!important;font-weight:800!important} #studentsSection .students-page-head h2{font-size:26px!important} #studentsSection .student-avatar{width:40px!important;height:40px!important;border-radius:50%!important} #studentsSection .students-data-table tr.student-row-card{padding:13px!important} #studentsSection .students-data-table tr.student-row-card td[data-label="الاسم"]{grid-template-columns:40px minmax(0,1fr)!important} #studentsSection .students-data-table tr.student-row-card td[data-label="ولي الأمر"]{margin-top:8px!important;padding-top:8px!important} #studentsSection .students-data-table tr.student-row-card td[data-label="الإجراءات"]{margin-top:9px!important} #studentsSection .student-primary-actions{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:40px!important;align-items:stretch!important} #studentsSection .student-primary-actions .row-more-menu{grid-column:1!important;grid-row:1!important} #studentsSection .student-primary-actions .qr-action{grid-column:2!important;grid-row:1!important;width:100%!important;margin:0!important} #studentsSection .student-primary-actions .whatsapp-action{grid-column:3!important;grid-row:1!important;width:100%!important;margin:0!important} #studentFinanceSection .section-head,#communicationSection .section-head,#smartAlertsSection .section-head,#reportsSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #studentFinanceSection .section-head h2,#communicationSection .section-head h2,#smartAlertsSection .section-head h2,#reportsSection .section-head h2{margin:0!important;font-size:25px!important;line-height:1.35!important;color:var(--tp-ink)!important} #studentFinanceSection .section-head p,#communicationSection .section-head p,#smartAlertsSection .section-head p,#reportsSection .section-head p{margin:4px 0 0!important;font-size:10px!important;line-height:1.55!important} #studentFinanceSection .section-head .compact,#communicationSection .section-head .compact{width:auto!important;min-width:72px!important;min-height:38px!important;margin:0!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:10px!important} #studentFinanceSection .student-finance-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:11px!important} #studentFinanceSection .student-finance-stats .stat-card{min-width:0!important;padding:11px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important} #studentFinanceSection .student-finance-stats span{font-size:8.5px!important} #studentFinanceSection .student-finance-stats b{margin-top:4px!important;font-size:17px!important;color:var(--tp-navy)!important} #studentFinanceSection .student-finance-toolbar-panel{padding:13px!important;margin-bottom:11px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #studentFinanceSection .student-finance-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #studentFinanceSection .student-finance-toolbar label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #studentFinanceSection .student-finance-search-label{grid-column:1/-1!important} #studentFinanceSection .student-finance-toolbar input,#studentFinanceSection .student-finance-toolbar select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #studentFinanceSection .student-finance-filter-bar{display:flex!important;gap:6px!important;margin:10px -2px 0!important;padding:2px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important} #studentFinanceSection .student-finance-filter-bar::-webkit-scrollbar{display:none} #studentFinanceSection .tenant-filter-chip{flex:0 0 auto!important;min-height:34px!important;padding:7px 10px!important;border:1px solid var(--tp-line)!important;border-radius:99px!important;background:#fff!important;color:var(--tp-muted)!important;font-size:8.5px!important;white-space:nowrap!important} #studentFinanceSection .tenant-filter-chip.active{border-color:var(--tp-navy)!important;background:var(--tp-navy)!important;color:#fff!important} #studentFinanceSection .student-finance-list{display:grid!important;gap:9px!important} #studentFinanceSection .student-finance-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-inline-start-width:4px!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #studentFinanceSection .student-finance-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important} #studentFinanceSection .student-finance-card-head h3{margin:5px 0 2px!important;font-size:15px!important;color:var(--tp-ink)!important} #studentFinanceSection .student-finance-card-head p{font-size:8.5px!important} #studentFinanceSection .student-finance-status{padding:4px 7px!important;font-size:8px!important} #studentFinanceSection .student-finance-remaining{text-align:left!important;flex:none!important} #studentFinanceSection .student-finance-remaining span{font-size:8px!important} #studentFinanceSection .student-finance-remaining b{font-size:17px!important;color:var(--tp-navy)!important} #studentFinanceSection .student-finance-numbers{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:10px 0!important} #studentFinanceSection .student-finance-numbers>div{min-width:0!important;padding:8px 5px!important;border:1px solid #EAF0F6!important;border-radius:11px!important;background:#F8FAFD!important;text-align:center!important} #studentFinanceSection .student-finance-numbers span{font-size:7.5px!important} #studentFinanceSection .student-finance-numbers b{font-size:10.5px!important;white-space:nowrap!important} #studentFinanceSection .student-finance-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} #studentFinanceSection .student-finance-card-actions .inline-btn{width:100%!important;min-height:38px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:8.5px!important} #studentFinanceSection .student-finance-card-actions .primary-btn{background:var(--tp-navy)!important} #communicationSection>.panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #communicationSection .communication-select-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #communicationSection .communication-select-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #communicationSection .communication-select-grid input,#communicationSection .communication-select-grid select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #communicationSection .communication-student-identity{margin-top:9px!important} #communicationSection .communication-identity-main{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important} #communicationSection .communication-identity-main>div{min-width:0!important;padding:10px!important;border:1px solid #EAF0F6!important;border-radius:12px!important;background:#F8FAFD!important} #communicationSection .communication-identity-main span{font-size:8px!important} #communicationSection .communication-identity-main b{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #communicationSection .communication-identity-main small{font-size:8px!important} #communicationSection .communication-panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:9px!important;margin-bottom:9px!important} #communicationSection .communication-panel-head .eyebrow{font-size:8px!important} #communicationSection .communication-panel-head h3{margin:2px 0 0!important;font-size:18px!important;color:var(--tp-ink)!important} #communicationSection .communication-safe-note{max-width:190px!important;font-size:8px!important;line-height:1.5!important} #communicationSection .communication-template-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} #communicationSection .communication-template{min-height:68px!important;padding:10px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;text-align:right!important;box-shadow:none!important} #communicationSection .communication-template b{margin:0 0 3px!important;font-size:12px!important;color:var(--tp-navy)!important} #communicationSection .communication-template span{font-size:8px!important;line-height:1.4!important} #communicationSection .communication-template.active{border-color:#E1BF4A!important;background:#FFF9E7!important;box-shadow:inset 0 0 0 1px rgba(225,191,74,.22)!important} #communicationSection .communication-message{width:100%!important;min-height:180px!important;margin:0!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#FBFCFE!important;font-size:11px!important;line-height:1.75!important} #communicationSection .communication-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:9px!important} #communicationSection .communication-actions .inline-btn{width:100%!important;min-height:38px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:8.5px!important} #communicationSection .communication-whatsapp-btn{grid-column:1/-1!important;min-height:42px!important;background:#16805D!important;font-size:10px!important} #smartAlertsSection #runSmartAlertsBtn{width:auto!important;min-width:92px!important;min-height:40px!important;margin:0!important;padding:9px 12px!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:10px!important} #smartAlertsSection .smart-alert-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #smartAlertsSection .smart-alert-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #smartAlertsSection .smart-alert-controls label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #smartAlertsSection .smart-alert-controls input,#smartAlertsSection .smart-alert-controls select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #smartAlertsSection .smart-alert-analysis-note{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;margin-top:9px!important;padding:10px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important} #smartAlertsSection .smart-alert-analysis-note b{font-size:11px!important;color:var(--tp-navy)!important} #smartAlertsSection .smart-alert-analysis-note span{font-size:8.5px!important;line-height:1.55!important} #smartAlertsSection .smart-alert-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #smartAlertsSection .smart-alert-stats .stat-card{min-width:0!important;padding:9px 4px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;text-align:center!important;box-shadow:none!important} #smartAlertsSection .smart-alert-stats span{display:block!important;font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #smartAlertsSection .smart-alert-stats b{margin-top:4px!important;font-size:15px!important;color:var(--tp-navy)!important} #smartAlertsSection .smart-alert-filter-panel{padding:11px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #smartAlertsSection .smart-alert-filter-row{display:grid!important;gap:6px!important} #smartAlertsSection .smart-alert-filter-row+ .smart-alert-filter-row{margin-top:9px!important} #smartAlertsSection .smart-alert-filter-row>span{font-size:8.5px!important;color:var(--tp-muted)!important} #smartAlertsSection .smart-alert-filter-chips{display:flex!important;gap:5px!important;margin:0!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important} #smartAlertsSection .smart-alert-filter-chips::-webkit-scrollbar{display:none} #smartAlertsSection .tenant-filter-chip{flex:0 0 auto!important;min-height:32px!important;padding:6px 9px!important;border:1px solid var(--tp-line)!important;border-radius:99px!important;background:#fff!important;color:var(--tp-muted)!important;font-size:8px!important} #smartAlertsSection .tenant-filter-chip.active{border-color:var(--tp-navy)!important;background:var(--tp-navy)!important;color:#fff!important} #smartAlertsSection .smart-alert-list{display:grid!important;gap:9px!important} #smartAlertsSection .smart-alert-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-inline-start-width:4px!important;border-right-width:1px!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #smartAlertsSection .smart-alert-person{gap:9px!important} #smartAlertsSection .smart-alert-avatar{width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;font-size:13px!important} #smartAlertsSection .smart-alert-badges{gap:4px!important} #smartAlertsSection .smart-alert-priority,#smartAlertsSection .smart-alert-type,#smartAlertsSection .smart-alert-state{padding:4px 6px!important;font-size:7px!important} #smartAlertsSection .smart-alert-person h3{margin:5px 0 2px!important;font-size:14px!important;color:var(--tp-ink)!important} #smartAlertsSection .smart-alert-person p{font-size:8px!important} #smartAlertsSection .smart-alert-reason{margin-top:9px!important;padding:10px!important;border:1px solid #EAF0F6!important;border-radius:12px!important;background:#F8FAFD!important} #smartAlertsSection .smart-alert-reason b{font-size:11px!important} #smartAlertsSection .smart-alert-reason p{font-size:9px!important;line-height:1.6!important} #smartAlertsSection .smart-alert-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-top:9px!important} #smartAlertsSection .smart-alert-actions .inline-btn{width:100%!important;min-height:36px!important;margin:0!important;padding:7px!important;border-radius:10px!important;font-size:8px!important} #reportsSection .report-mode-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;margin-bottom:10px!important;padding:4px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#EDF3F9!important} #reportsSection .report-mode-btn{min-height:40px!important;padding:8px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--tp-muted)!important;font-size:10px!important} #reportsSection .report-mode-btn.active{background:var(--tp-navy)!important;color:#fff!important;box-shadow:none!important} #reportsSection .report-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #reportsSection .report-controls-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #reportsSection .report-controls-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #reportsSection .report-controls-grid input,#reportsSection .report-controls-grid select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #reportsSection .report-actions-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important} #reportsSection .report-actions-row .inline-btn{width:100%!important;min-height:40px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:9px!important} #reportsSection .report-actions-row .secondary-btn{background:#EDF5FC!important;color:var(--tp-navy)!important} #reportsSection .report-actions-row .primary-btn{background:var(--tp-navy)!important} #reportsSection .report-preview-wrap{margin-top:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;overflow:auto!important;box-shadow:var(--tp-shadow)!important} #groupsSection .section-head,#scheduleSection .section-head,#lessonSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #groupsSection .section-head h2,#scheduleSection .section-head h2,#lessonSection .section-head h2{margin:0!important;font-size:26px!important;line-height:1.3!important;color:var(--tp-ink)!important} #groupsSection .section-head p,#scheduleSection .section-head p,#lessonSection .section-head p{margin:4px 0 0!important;font-size:11px!important;line-height:1.5!important} #groupsSection #addGroupBtn{width:auto!important;min-width:126px!important;min-height:42px!important;margin:0!important;padding:10px 13px!important;border-radius:13px!important;background:var(--tp-navy)!important;box-shadow:none!important;font-size:11px!important;white-space:nowrap} #groupsSection #addGroupBtn span{color:var(--tp-gold);font-size:15px} #groupsSection .groups-master-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} #groupsSection .master-group-card{padding:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important;overflow:visible!important} #groupsSection .group-card-title-row{align-items:flex-start!important;gap:10px!important} #groupsSection .group-card-title-row h3{margin:0!important;font-size:16px!important;line-height:1.45!important;color:var(--tp-ink)!important} #groupsSection .group-card-title-row p{display:flex!important;align-items:center!important;gap:6px!important;margin:4px 0 0!important;font-size:10px!important} #groupsSection .group-id-chip{padding:3px 6px!important;border-radius:7px!important;background:#F2F5F9!important;color:var(--tp-muted)!important;font-size:9px!important} #groupsSection .status{padding:5px 8px!important;border-radius:99px!important;font-size:9px!important} #groupsSection .group-summary-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:12px 0!important;padding:9px 0!important;border:1px solid #EAF0F6!important;border-radius:13px!important;background:#F8FAFD!important} #groupsSection .group-summary-strip>div{min-width:0!important;padding:0 8px!important;text-align:center!important} #groupsSection .group-summary-strip span{display:block!important;font-size:8.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #groupsSection .group-summary-strip b{display:block!important;margin-top:4px!important;font-size:12px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #groupsSection .group-schedule-preview{min-height:0!important;padding:0!important} #groupsSection .group-schedule-preview>span{font-size:9px!important;color:var(--tp-muted)!important} #groupsSection .group-schedule-chips{margin-top:6px!important;gap:5px!important} #groupsSection .group-schedule-chips b,#groupsSection .group-schedule-chips em{padding:5px 7px!important;border-radius:8px!important;background:#F1F5F9!important;color:#42566F!important;font-size:8.5px!important} #groupsSection .master-group-actions{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;margin-top:11px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important;direction:ltr} #groupsSection .master-group-actions .row-more-menu{grid-column:1!important;grid-row:1!important} #groupsSection .master-group-actions .row-more-trigger{width:42px!important;height:40px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:22px!important} #groupsSection .master-group-actions .group-lesson-btn{grid-column:2!important;grid-row:1!important;width:100%!important;min-height:40px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:10px!important;direction:rtl} #scheduleSection .schedule-page-head .icon-action-btn{position:relative!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;color:var(--tp-navy)!important;font-size:21px!important;box-shadow:none!important} #scheduleSection .schedule-page-head .icon-action-btn::before,#scheduleSection .schedule-page-head .icon-action-btn::after{display:none!important;content:none!important} #scheduleSection .schedule-summary-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:0 0 13px!important} #scheduleSection .schedule-summary-grid .stat-card{min-width:0!important;padding:10px 5px!important;border:1px solid var(--tp-line)!important;border-radius:13px!important;background:#fff!important;text-align:center!important;box-shadow:none!important} #scheduleSection .schedule-summary-grid .stat-card:nth-child(4){display:none!important} #scheduleSection .schedule-summary-grid .stat-card span{display:block!important;font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #scheduleSection .schedule-summary-grid .stat-card b{margin-top:4px!important;font-size:16px!important;color:var(--tp-navy)!important} #scheduleSection .mobile-schedule-browser{display:block!important} #scheduleSection .schedule-day-selector{display:flex!important;gap:7px!important;margin-inline:-1px!important;padding:1px 1px 9px!important;direction:rtl!important} #scheduleSection .schedule-day-chip{flex:0 0 58px!important;min-height:62px!important;padding:7px 4px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;color:var(--tp-muted)!important;box-shadow:none!important} #scheduleSection .schedule-day-chip span{font-size:9px!important} #scheduleSection .schedule-day-chip b{font-size:16px!important;color:var(--tp-navy)!important} #scheduleSection .schedule-day-chip.active{border-color:#E2C45D!important;background:var(--tp-gold)!important;color:var(--tp-navy)!important} #scheduleSection .schedule-day-chip.active b{color:var(--tp-navy)!important} #scheduleSection .schedule-mobile-timeline{padding:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #scheduleSection .schedule-mobile-date{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:10px!important;padding:0 2px!important} #scheduleSection .schedule-mobile-date b{font-size:18px!important;color:var(--tp-ink)!important} #scheduleSection .schedule-mobile-date span{font-size:9px!important;color:var(--tp-muted)!important} #scheduleSection .schedule-timeline-list{display:grid!important;gap:8px!important;padding:0!important;border:0!important} #scheduleSection .schedule-timeline-list .schedule-session-card{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:3px 10px!important;padding:12px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important} #scheduleSection .schedule-timeline-list .schedule-session-card::before{display:none!important} #scheduleSection .schedule-session-time{grid-column:1!important;grid-row:1!important;text-align:right!important} #scheduleSection .schedule-session-time b{font-size:13px!important;color:var(--tp-navy)!important} #scheduleSection .schedule-session-time span{font-size:9px!important} #scheduleSection .schedule-session-main{grid-column:2!important;grid-row:1!important;min-width:0!important} #scheduleSection .schedule-session-title{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important} #scheduleSection .schedule-session-title h4{margin:0!important;min-width:0!important;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #scheduleSection .schedule-session-status{flex:none!important;padding:4px 6px!important;font-size:7.5px!important} #scheduleSection .schedule-session-main p{margin:3px 0 0!important;font-size:9px!important;color:var(--tp-muted)!important} #scheduleSection .schedule-lesson-btn{grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-height:36px!important;margin-top:7px!important;border:1px solid #EEDB9B!important;border-radius:11px!important;background:#FFF9E8!important;color:var(--tp-navy)!important;font-size:10px!important;font-weight:800!important} #scheduleSection .schedule-today-panel,#scheduleSection .mobile-schedule-browser~.panel{display:none!important} #lessonSection .lesson-stepper{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:0 0 14px!important} #lessonSection .lesson-step{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;color:#8996A7!important;text-align:center!important} #lessonSection .lesson-step:not(:last-child)::after{content:""!important;position:absolute!important;top:14px!important;right:calc(50% + 15px)!important;width:calc(100% - 30px)!important;height:2px!important;background:#E0E6EE!important;z-index:0!important} #lessonSection .lesson-step span{position:relative!important;z-index:1!important;width:29px!important;height:29px!important;border:1px solid #DDE5EE!important;border-radius:50%!important;background:#F4F7FA!important;color:#7B899B!important;font-size:10px!important} #lessonSection .lesson-step b{font-size:8.5px!important;white-space:nowrap!important} #lessonSection .lesson-step.active{color:var(--tp-navy)!important} #lessonSection .lesson-step.active span{border-color:#E2C45D!important;background:var(--tp-gold)!important;color:var(--tp-navy)!important} #lessonSection .lesson-step.complete{color:var(--tp-success)!important} #lessonSection .lesson-step.complete span{border-color:#BFE5D6!important;background:#EAF8F2!important;color:var(--tp-success)!important} #lessonSection .lesson-step.complete span::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;background:inherit;border-radius:50%;font-size:11px} #lessonSection .lesson-step.complete::after{background:#BFE5D6!important} #lessonSection .lesson-setup-panel{padding:14px!important;margin-bottom:14px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #lessonSection .lesson-setup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #lessonSection .lesson-setup-grid label{min-width:0!important;margin:0!important;font-size:10px!important;color:var(--tp-muted)!important} #lessonSection .lesson-setup-grid label:first-child,#lessonSection .lesson-title-field{grid-column:1/-1!important} #lessonSection .lesson-setup-grid input,#lessonSection .lesson-setup-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 11px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:12px!important} #lessonSection .lesson-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:12px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important} #lessonSection .lesson-id-preview{min-height:0!important;font-size:8.5px!important;color:#8996A7!important;text-align:right!important;direction:ltr!important;overflow-wrap:anywhere} #lessonSection .lesson-continue-btn{width:100%!important;min-height:42px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;font-size:11px!important} #lessonSection .lesson-roster-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:4px 1px 9px!important} #lessonSection .lesson-roster-head h3{margin:0!important;font-size:18px!important;color:var(--tp-ink)!important} #lessonSection .lesson-roster-head p{margin:2px 0 0!important;font-size:9px!important} #lessonSection .lesson-roster-head>span{padding:6px 9px!important;border-radius:99px!important;background:#EDF4FC!important;color:var(--tp-navy)!important;font-size:9px!important} #lessonSection .lesson-default-note{padding:10px 11px!important;margin-bottom:9px!important;border:1px solid #EEDB9B!important;border-radius:13px!important;background:#FFF9E8!important;color:#725515!important;font-size:9.5px!important;line-height:1.65!important} #lessonSection .lesson-roster{display:grid!important;gap:9px!important} #lessonSection .lesson-student-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #lessonSection .lesson-student-card.student-absent-card{border-color:#F0CDD2!important;background:#FFFAFA!important} #lessonSection .lesson-student-head{margin-bottom:9px!important} #lessonSection .lesson-student-head b{font-size:14px!important;color:var(--tp-ink)!important} #lessonSection .lesson-student-head span{font-size:9px!important} #lessonSection .lesson-fields-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} #lessonSection .lesson-fields-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #lessonSection .lesson-field{width:100%!important;height:40px!important;min-height:40px!important;margin-top:4px!important;padding:7px 8px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #lessonSection .absent-auto-note{margin-top:9px!important;padding:8px 9px!important;border-radius:10px!important;font-size:8.5px!important;line-height:1.5!important} #lessonSection .lesson-save-bar{position:sticky!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;z-index:20!important;margin-top:11px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 30px rgba(8,45,87,.12)!important;backdrop-filter:blur(12px)!important} #lessonSection .lesson-save-bar>div{font-size:10px!important;white-space:nowrap} #lessonSection .lesson-save-bar .primary-btn{min-height:40px!important;margin:0!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} #studentFinanceSection .student-finance-filter-bar{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; margin:10px 0 0!important; padding:0!important; overflow:visible!important;} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip{width:100%!important;min-width:0!important;min-height:34px!important;padding:6px 4px!important; overflow:hidden!important;text-overflow:ellipsis!important;font-size:8px!important} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(4){grid-column:1/2!important} #studentFinanceSection .student-finance-filter-bar .tenant-filter-chip:nth-child(5){grid-column:2/4!important} #studentFinanceSection .student-finance-card{border-inline-start-width:1px!important;border-inline-end:4px solid #DDE6F0!important} #studentFinanceSection .student-finance-card.paid{border-inline-end-color:#9EDBC5!important} #studentFinanceSection .student-finance-card.partial{border-inline-end-color:#E9C85B!important} #studentFinanceSection .student-finance-card.unpaid{border-inline-end-color:#E7A8AF!important} #studentFinanceSection .student-finance-remaining b, #studentFinanceSection .student-finance-numbers b, #studentFinanceSection .student-finance-stats b{direction:rtl!important;unicode-bidi:isolate!important;white-space:nowrap!important} #communicationSection #communicationStudent{font-size:10px!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important} #communicationSection .communication-identity-main b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} #communicationSection .communication-phone-box b{direction:ltr!important;unicode-bidi:isolate!important;text-align:right!important} #communicationSection .communication-panel-head .eyebrow{color:#9B7417!important;letter-spacing:0!important} #communicationSection .communication-message{min-height:190px!important;height:190px!important;resize:none!important;overflow:auto!important; direction:rtl!important;text-align:right!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important; caret-color:var(--tp-navy)!important} #communicationSection .communication-message::-webkit-resizer{display:none!important} #communicationSection .communication-actions{align-items:stretch!important} #reportsSection #loadStudentReportBtn,#reportsSection #loadGroupReportBtn{background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important; font-weight:800!important;box-shadow:none!important} #reportsSection .report-controls-grid select,#reportsSection .report-controls-grid input{min-width:0!important} #reportsSection .report-mode-btn{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #examSection .section-head,#cardsSection .section-head,#leaderboardSection .section-head,#accountSection .section-head{align-items:flex-end!important;margin-bottom:15px!important} #examSection .section-head h2,#cardsSection .section-head h2,#leaderboardSection .section-head h2,#accountSection .section-head h2{margin:0!important;font-size:25px!important;line-height:1.3!important;color:var(--tp-ink)!important} #examSection .section-head p,#cardsSection .section-head p,#leaderboardSection .section-head p,#accountSection .section-head p{margin:4px 0 0!important;font-size:10px!important;line-height:1.55!important} #examSection .exam-setup-panel{padding:14px!important;margin-bottom:12px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #examSection .exam-setup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #examSection .exam-setup-grid label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #examSection .exam-setup-grid input,#examSection .exam-setup-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:11px!important} #examSection .lesson-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:11px!important;padding-top:11px!important;border-top:1px solid #EEF2F6!important} #examSection #loadExamRosterBtn{width:100%!important;min-height:42px!important;margin:0!important;border-radius:12px!important;background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important;font-size:10px!important} #examSection .lesson-id-preview{font-size:8px!important;text-align:center!important;direction:ltr!important;overflow-wrap:anywhere!important} #examSection .lesson-default-note{padding:10px 11px!important;margin-bottom:9px!important;border:1px solid #EEDB9B!important;border-radius:13px!important;background:#FFF9E8!important;color:#725515!important;font-size:9px!important;line-height:1.6!important} #examSection .exam-roster{display:grid!important;gap:9px!important} #examSection .exam-student-card{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important} #examSection .exam-student-head{margin-bottom:9px!important;align-items:flex-start!important} #examSection .exam-student-head b{font-size:14px!important;color:var(--tp-ink)!important} #examSection .exam-student-head span{font-size:8.5px!important} #examSection .exam-student-fields{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:8px!important} #examSection .exam-student-fields label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #examSection .score-input-wrap{gap:5px!important} #examSection .score-input-wrap input{height:40px!important;min-height:40px!important;margin-top:4px!important;padding:7px!important;border-radius:11px!important;text-align:center!important;font-size:12px!important} #examSection .score-input-wrap span{margin-top:4px!important;font-size:9px!important} #examSection .exam-note{height:40px!important;min-height:40px!important;margin-top:4px!important;padding:8px!important;border-radius:11px!important;resize:none!important;font-size:10px!important;line-height:1.45!important} #examSection .lesson-save-bar{position:sticky!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;z-index:20!important;margin-top:11px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 30px rgba(8,45,87,.12)!important;backdrop-filter:blur(12px)!important} #examSection .lesson-save-bar .primary-btn{min-height:40px!important;margin:0!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} #cardsSection .cards-toolbar-panel{padding:14px!important;margin-bottom:12px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #cardsSection .cards-toolbar-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important} #cardsSection .cards-toolbar-grid label{margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #cardsSection .cards-toolbar-grid select{width:100%!important;height:44px!important;min-height:44px!important;margin-top:5px!important;padding:9px 10px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#FBFCFE!important;font-size:11px!important} #cardsSection .cards-link-box{padding:10px 11px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important} #cardsSection .cards-link-box span{margin-bottom:4px!important;font-size:8.5px!important} #cardsSection .cards-link-box code{font-size:8.5px!important;line-height:1.5!important;color:var(--tp-navy)!important} #cardsSection .cards-toolbar-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important} #cardsSection .cards-toolbar-actions .inline-btn{width:100%!important;min-height:40px!important;margin:0!important;padding:8px!important;border-radius:11px!important;font-size:9px!important} #cardsSection #generateGroupCardsBtn{background:var(--tp-navy)!important;border-color:var(--tp-navy)!important;color:#fff!important} #cardsSection .parent-cards-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} #cardsSection .paper-parent-card{border:1px solid var(--tp-line)!important;border-radius:18px!important;box-shadow:var(--tp-shadow)!important} #cardsSection .paper-card-top{padding:11px 12px!important;background:linear-gradient(110deg,var(--tp-navy),var(--tp-navy-2))!important} #cardsSection .paper-card-mark{width:39px!important;min-width:39px!important;height:39px!important;border-radius:11px!important;font-size:13px!important} #cardsSection .paper-card-brand strong{font-size:13px!important} #cardsSection .paper-card-brand small{font-size:8px!important} #cardsSection .paper-card-label{font-size:9px!important} #cardsSection .paper-card-body{grid-template-columns:minmax(0,1fr) 104px!important;gap:9px!important;padding:12px!important} #cardsSection .paper-card-info h3{margin:0 0 8px!important;font-size:15px!important} #cardsSection .paper-card-meta{gap:5px!important} #cardsSection .paper-card-meta>div,#cardsSection .paper-card-login-row{padding:7px!important;border-radius:9px!important} #cardsSection .paper-card-meta span,#cardsSection .paper-card-login-row span{font-size:7.5px!important} #cardsSection .paper-card-meta b,#cardsSection .paper-card-login-row b{font-size:9px!important} #cardsSection .paper-card-qr img{width:92px!important;height:92px!important;margin-bottom:3px!important;border-width:5px!important} #cardsSection .paper-card-qr b{font-size:9px!important} #cardsSection .paper-card-qr span{font-size:7px!important} #cardsSection .paper-card-footer{padding:7px 10px!important;font-size:7px!important} #cardsSection .paper-card-footer code{font-size:6.5px!important} #leaderboardSection .section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important} #leaderboardSection .leaderboard-head-actions{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:105px!important} #leaderboardSection .leaderboard-head-actions .compact{width:100%!important;min-height:36px!important;margin:0!important;padding:7px 8px!important;border-radius:10px!important;font-size:8.5px!important} #leaderboardSection #runLeaderboardBtn{background:var(--tp-navy)!important} #leaderboardSection .leaderboard-controls-panel{padding:13px!important;margin-bottom:10px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #leaderboardSection .leaderboard-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important} #leaderboardSection .leaderboard-controls label{min-width:0!important;margin:0!important;font-size:9px!important;color:var(--tp-muted)!important} #leaderboardSection .leaderboard-controls input,#leaderboardSection .leaderboard-controls select{width:100%!important;height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 9px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:10px!important} #leaderboardSection .leaderboard-note{margin-top:9px!important;padding:10px!important;border:1px solid #DCE8F4!important;border-radius:12px!important;background:#F4F8FC!important} #leaderboardSection .leaderboard-note b{font-size:11px!important} #leaderboardSection .leaderboard-note span{font-size:8px!important;line-height:1.55!important} #leaderboardSection .leaderboard-config-summary{margin:9px 0!important} #leaderboardSection .leaderboard-config-chips{display:flex!important;gap:5px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important} #leaderboardSection .leaderboard-config-chips::-webkit-scrollbar{display:none} #leaderboardSection .leaderboard-config-chips span{flex:0 0 auto!important;padding:5px 7px!important;font-size:7.5px!important} #leaderboardSection .leaderboard-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #leaderboardSection .leaderboard-stats .stat-card{min-width:0!important;padding:9px 4px!important;border:1px solid var(--tp-line)!important;border-radius:12px!important;background:#fff!important;text-align:center!important;box-shadow:none!important} #leaderboardSection .leaderboard-stats span{display:block!important;font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-stats b{margin-top:4px!important;font-size:14px!important;color:var(--tp-navy)!important} #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:10px 0!important} #leaderboardSection .leaderboard-winner{min-width:0!important;padding:11px 5px!important;border-radius:14px!important;box-shadow:none!important} #leaderboardSection .leaderboard-medal{font-size:23px!important} #leaderboardSection .leaderboard-winner>span{font-size:7px!important} #leaderboardSection .leaderboard-winner h3{margin:4px 0!important;font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-winner>b{font-size:12px!important} #leaderboardSection .leaderboard-winner>small{min-height:22px!important;margin:2px 0 6px!important;font-size:6.5px!important;line-height:1.35!important} #leaderboardSection .leaderboard-winner .inline-btn{width:100%!important;min-height:31px!important;margin:0!important;padding:5px 2px!important;border-radius:9px!important;font-size:7px!important} #leaderboardSection .leaderboard-table-panel{padding:13px!important;border:1px solid var(--tp-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #leaderboardSection .leaderboard-table-head{margin-bottom:8px!important} #leaderboardSection .leaderboard-table-head h3{margin:2px 0 0!important;font-size:17px!important} #leaderboardSection #printLeaderboardBtn{width:auto!important;min-height:34px!important;margin:0!important;padding:6px 8px!important;font-size:8px!important} #leaderboardSection .table-wrap{border:1px solid #EEF2F6!important;border-radius:12px!important;overflow:auto!important} #leaderboardSection .leaderboard-data-table{min-width:760px!important} #leaderboardSection .leaderboard-data-table th,#leaderboardSection .leaderboard-data-table td{padding:8px 7px!important;font-size:8px!important} #accountSection .account-summary-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:11px!important} #accountSection .account-summary-card{min-width:0!important;padding:11px!important;border:1px solid var(--tp-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important} #accountSection .account-summary-card span{margin-bottom:4px!important;font-size:8.5px!important} #accountSection .account-summary-card b{font-size:14px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountSection .teacher-renewal-panel,#accountSection .teacher-payments-panel,#accountSection .account-panel{padding:14px!important;margin-bottom:11px!important;border:1px solid var(--tp-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--tp-shadow)!important} #accountSection .teacher-renewal-panel{border-top:1px solid var(--tp-line)!important;border-inline-end:4px solid var(--tp-gold)!important} #accountSection .teacher-renewal-head{display:flex!important;gap:9px!important;margin-bottom:10px!important} #accountSection .teacher-renewal-head h3{margin:2px 0 3px!important;font-size:18px!important} #accountSection .teacher-renewal-head p{font-size:8.5px!important;line-height:1.5!important} #accountSection .renewal-expiry-pill{padding:6px 8px!important;font-size:8px!important} #accountSection .renewal-plan-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #accountSection .renewal-plan-strip>div{min-width:0!important;padding:8px 5px!important;border-radius:10px!important;text-align:center!important} #accountSection .renewal-plan-strip span{margin-bottom:3px!important;font-size:7px!important} #accountSection .renewal-plan-strip b{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountSection .renewal-current-request{padding:10px!important;margin:9px 0!important;border-radius:12px!important} #accountSection .renewal-current-request b{font-size:10px!important} #accountSection .renewal-current-request small,#accountSection .renewal-current-request p{font-size:8px!important} #accountSection #openTeacherRenewalRequestBtn{min-height:40px!important;margin-top:8px!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} #accountSection .teacher-payments-panel{border-top:1px solid var(--tp-line)!important} #accountSection .teacher-payments-head{display:flex!important;gap:9px!important;margin-bottom:10px!important} #accountSection .teacher-payments-head h3{margin:2px 0 3px!important;font-size:18px!important} #accountSection .teacher-payments-head p{font-size:8px!important} #accountSection #refreshTeacherPaymentsBtn{min-width:68px!important;min-height:34px!important;padding:6px 8px!important;border-radius:10px!important;font-size:8px!important} #accountSection .teacher-payments-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important} #accountSection .teacher-payments-summary>div{min-width:0!important;padding:8px 5px!important;border-radius:10px!important;text-align:center!important} #accountSection .teacher-payments-summary span{margin-bottom:3px!important;font-size:6.8px!important} #accountSection .teacher-payments-summary b{font-size:11px!important;white-space:nowrap!important} #accountSection .teacher-payments-list{gap:8px!important} #accountSection .teacher-payment-item{padding:11px!important;border-radius:14px!important} #accountSection .teacher-payment-main b{font-size:10px!important} #accountSection .teacher-payment-main strong{font-size:14px!important} #accountSection .teacher-payment-main small,#accountSection .payment-receipt-number{font-size:7.5px!important} #accountSection .teacher-payment-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;margin:8px 0!important} #accountSection .teacher-payment-meta>span{min-width:0!important;padding:6px!important;border-radius:8px!important;font-size:7px!important} #accountSection .teacher-payment-meta b{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountSection .payment-receipt-btn{min-height:36px!important;margin:0!important;padding:7px!important;border-radius:10px!important;font-size:8px!important} #accountSection .account-layout{display:grid!important;grid-template-columns:1fr!important;gap:0!important} #accountSection .account-panel-head{margin-bottom:10px!important} #accountSection .account-panel-head h3{margin:0 0 3px!important;font-size:18px!important} #accountSection .account-panel-head p{font-size:8.5px!important;line-height:1.5!important} #accountSection .account-panel label{margin-top:10px!important;font-size:9px!important;color:var(--tp-muted)!important} #accountSection .account-panel input{height:42px!important;min-height:42px!important;margin-top:4px!important;padding:8px 10px!important;border:1px solid var(--tp-line)!important;border-radius:11px!important;background:#FBFCFE!important;font-size:11px!important} #accountSection .account-panel .field-help{font-size:7.5px!important} #accountSection .signup-form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} #accountSection .account-readonly-note,#accountSection .account-security-tip{padding:9px 10px!important;margin:10px 0!important;border-radius:11px!important;font-size:8.5px!important;line-height:1.6!important} #accountSection .account-password-rules{padding:9px!important;margin-top:10px!important;border-radius:11px!important} #accountSection .account-password-rules b,#accountSection .account-password-rules span{font-size:8px!important} #accountSection #saveTeacherProfileBtn,#accountSection #changeTeacherPasswordBtn{min-height:42px!important;margin-top:12px!important;border-radius:11px!important;background:var(--tp-navy)!important;font-size:10px!important} #leaderboardSection .leaderboard-table-panel{overflow:visible!important} #leaderboardSection .leaderboard-table-panel .table-wrap{border:0!important;border-radius:0!important;overflow:visible!important} #leaderboardSection .leaderboard-data-table{display:block!important;width:100%!important;min-width:0!important;border:0!important} #leaderboardSection .leaderboard-data-table thead{display:none!important} #leaderboardSection .leaderboard-data-table tbody{display:grid!important;width:100%!important;gap:9px!important} #leaderboardSection .leaderboard-data-table tr{display:grid!important;grid-template-columns:46px minmax(0,1fr) minmax(74px,.72fr) minmax(74px,.72fr)!important; gap:6px!important;width:100%!important;padding:10px!important;border:1px solid var(--tp-line)!important; border-radius:15px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important} #leaderboardSection .leaderboard-data-table td{display:block!important;width:auto!important;min-width:0!important;min-height:0!important;margin:0!important; padding:7px 8px!important;border:1px solid #EAF0F6!important;border-radius:10px!important; background:#F8FAFD!important;color:var(--tp-ink)!important;font-size:9px!important;text-align:right!important} #leaderboardSection .leaderboard-data-table td::before{content:attr(data-label)!important;display:block!important;margin:0 0 3px!important;color:#8793A4!important; font-size:6.8px!important;font-weight:750!important;text-align:right!important;line-height:1.2!important} #leaderboardSection .leaderboard-data-table td>b{display:block!important;font-size:11px!important;color:var(--tp-navy)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-data-table td>small{display:block!important;margin-top:2px!important;font-size:6.8px!important;color:var(--tp-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{grid-column:1!important;grid-row:1!important;display:grid!important;place-items:center!important;padding:5px!important; background:#FFF9E7!important;border-color:#EEDB9B!important;text-align:center!important} #leaderboardSection .leaderboard-data-table td[data-label="المركز"]::before{display:none!important} #leaderboardSection .leaderboard-rank-cell{font-size:20px!important;line-height:1!important;text-align:center!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]{grid-column:2/4!important;grid-row:1!important;background:#fff!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]::before{display:none!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]>b{font-size:12px!important} #leaderboardSection .leaderboard-data-table td[data-label="النقاط"]{grid-column:4!important;grid-row:1!important;background:#EDF5FC!important;border-color:#D5E5F3!important} #leaderboardSection .leaderboard-data-table td[data-label="النقاط"]>b{font-size:13px!important} #leaderboardSection .leaderboard-data-table td[data-label="الأداء"], #leaderboardSection .leaderboard-data-table td[data-label="الحضور"], #leaderboardSection .leaderboard-data-table td[data-label="الواجب"], #leaderboardSection .leaderboard-data-table td[data-label="التسميع"]{grid-column:span 1!important} #leaderboardSection .leaderboard-data-table td[data-label="المشاركة"]{grid-column:1/3!important} #leaderboardSection .leaderboard-data-table td[data-label="الامتحان"]{grid-column:3/5!important} #leaderboardSection .leaderboard-data-table td[data-label="الأداء"]>b{color:var(--tp-success)!important} #leaderboardSection .leaderboard-data-table td[data-label="الشهادة"]{grid-column:1/-1!important;padding:0!important;border:0!important;background:transparent!important} #leaderboardSection .leaderboard-data-table td[data-label="الشهادة"]::before{display:none!important} #leaderboardSection .certificate-action-btn{display:block!important;width:100%!important;min-height:36px!important;margin:0!important;padding:7px 10px!important; border:1px solid #D5E2F0!important;border-radius:10px!important;background:#EDF5FC!important;color:var(--tp-navy)!important; font-size:8.5px!important;font-weight:850!important;line-height:1.2!important;text-align:center!important;opacity:1!important} #leaderboardSection .leaderboard-data-table tr:first-child{border-color:#E8D17C!important;box-shadow:inset 3px 0 0 var(--tp-gold)!important} #leaderboardSection .leaderboard-rank-cell{display:grid!important;place-items:center!important;gap:1px!important;width:100%!important;overflow:visible!important; color:var(--tp-navy)!important;font-size:17px!important;font-family:Arial,Tahoma,sans-serif!important;line-height:1!important} #leaderboardSection .leaderboard-rank-cell span{display:block!important;color:#9A7418!important;font-size:6px!important;font-family:"Cairo",Tahoma,Arial,sans-serif!important} #leaderboardSection .leaderboard-empty-row{display:block!important;width:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #leaderboardSection .leaderboard-empty-row td{display:block!important;width:100%!important;min-height:112px!important;padding:28px 18px!important;border:1px dashed #CDD7E4!important; border-radius:15px!important;background:#FBFCFE!important;color:var(--tp-muted)!important;text-align:center!important;font-size:11px!important;line-height:1.8!important} #leaderboardSection .leaderboard-empty-row td::before{display:none!important} #leaderboardSection .leaderboard-certificate-actions,#leaderboardSection .leaderboard-winner-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;width:100%!important} #leaderboardSection .leaderboard-winner-actions .inline-btn{width:100%!important;min-width:0!important} #leaderboardSection .leaderboard-certificate-actions .certificate-action-btn{min-width:0!important} #leaderboardSection .leaderboard-certificate-actions .png-action{background:#FFF9E7!important;border-color:#E8D17C!important;color:#755611!important} #leaderboardSection{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important} #leaderboardSection .leaderboard-table-panel{margin-bottom:22px!important} #leaderboardSection .leaderboard-data-table tr{grid-template-columns:64px minmax(0,1.35fr) minmax(72px,.72fr) minmax(72px,.72fr)!important; overflow:visible!important} #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{width:64px!important;min-width:64px!important;min-height:78px!important;padding:7px 4px!important; overflow:hidden!important;isolation:isolate!important} #leaderboardSection .leaderboard-rank-cell{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; width:52px!important;height:64px!important;min-width:52px!important;margin:auto!important;padding:5px 3px!important; overflow:hidden!important;border:1px solid #E7CB66!important;border-radius:12px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF6D8 100%)!important;box-shadow:inset 0 1px 0 #fff!important} #leaderboardSection .leaderboard-rank-caption{display:block!important;max-width:100%!important;margin:0 0 3px!important;color:#927019!important; font-family:"Cairo",Tahoma,Arial,sans-serif!important;font-size:6px!important;font-weight:750!important; line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important} #leaderboardSection .leaderboard-rank-number{display:block!important;color:var(--tp-navy)!important;font-family:Arial,Tahoma,sans-serif!important; font-size:21px!important;font-weight:900!important;line-height:1!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]{padding-inline:9px!important;overflow:hidden!important} #leaderboardSection .leaderboard-data-table td[data-label="الطالب"]>b{max-width:100%!important;line-height:1.45!important} #leaderboardSection .leaderboard-certificate-actions{margin-top:2px!important} #leaderboardSection .leaderboard-data-table td[data-label="المركز"]{display:flex!important;align-items:center!important;justify-content:center!important; width:64px!important;min-width:64px!important;min-height:78px!important;padding:0!important; overflow:hidden!important;border:1px solid #E7CB66!important;border-radius:13px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF6D8 100%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.96)!important} #leaderboardSection .leaderboard-rank-cell{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; width:100%!important;height:100%!important;min-width:0!important;margin:0!important;padding:8px 4px!important; overflow:hidden!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} #leaderboardSection .leaderboard-rank-caption{margin-bottom:5px!important;font-size:6.5px!important;line-height:1!important} #leaderboardSection .leaderboard-rank-number{font-size:22px!important;line-height:1!important} body[data-role="teacher"] #homeSection>.home-page-head{display:none!important} #homeSection .teacher-home-profile-hero{order:-3!important;margin-top:0!important} #homeSection .smart-next-lesson,#homeSection .smart-next-lesson.no-schedule{order:-2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 108px!important;align-items:center!important;gap:10px 14px!important;min-height:0!important;padding:15px 16px!important;border:1px solid #D5E2EF!important;border-radius:18px!important;background:linear-gradient(135deg,#F7FBFF 0%,#EDF5FC 100%)!important;color:var(--tp-navy,#0b2f66)!important;box-shadow:0 8px 22px rgba(8,45,87,.07)!important;overflow:hidden!important} #homeSection .smart-next-lesson::before,#homeSection .smart-next-lesson::after{display:none!important;content:none!important} #homeSection .smart-next-icon{display:none!important} #homeSection .smart-next-copy{grid-column:1!important;grid-row:1!important;min-width:0!important;padding:0!important} #homeSection .smart-next-copy>span{color:#55728F!important;font-size:9px!important;font-weight:750!important} #homeSection .smart-next-copy h4{margin:3px 0 2px!important;color:var(--tp-navy,#0b2f66)!important;font-size:16px!important;line-height:1.45!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #homeSection .smart-next-copy p{margin:0!important;color:#73869A!important;font-size:9.5px!important;line-height:1.5!important} #homeSection .smart-next-copy>b{display:inline-flex!important;margin-top:7px!important;padding:5px 8px!important;border-radius:99px!important;background:#E5F0FA!important;color:#315E86!important;font-size:9px!important} #homeSection .smart-next-lesson>.primary-btn,#homeSection .smart-next-lesson>.secondary-btn{grid-column:2!important;grid-row:1!important;width:108px!important;min-width:108px!important;min-height:42px!important;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:12px!important;background:var(--tp-navy,#0b2f66)!important;color:#fff!important;font-size:10px!important;box-shadow:none!important} #cardsSection .paper-parent-card{display:block!important;border-radius:22px!important;box-shadow:0 12px 30px rgba(10,45,90,.1)!important} #cardsSection .paper-card-teacher{padding:20px!important;border-bottom:6px solid var(--gold,#e8ad22)!important} #cardsSection .paper-card-teacher-photo{width:102px!important;height:102px!important} #cardsSection .paper-card-student{padding:22px 17px!important} #cardsSection .paper-card-access{padding:8px 17px 22px!important} #cardsSection .paper-card-footer{display:flex!important;padding:10px 17px!important;font-size:9px!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-width:0!important;border:1px solid #DCE7F1!important;border-radius:16px!important;background:linear-gradient(145deg,#fff,#F8FBFE)!important;box-shadow:0 6px 18px rgba(11,45,87,.045)!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::before, body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card::after{content:none!important;display:none!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:#65758A!important;font-weight:750!important} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card span::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:#2F78B7;box-shadow:0 0 0 3px #EAF3FA} body[data-role="teacher"] :is(#scheduleSection .schedule-summary-grid,#studentFinanceSection .student-finance-stats,#smartAlertsSection .smart-alert-stats,#leaderboardSection .leaderboard-stats) .stat-card b{color:#0B3564!important;font-weight:850!important;letter-spacing:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2),body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4),body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4){border-color:#CFE9DE!important;background:linear-gradient(145deg,#fff,#F3FBF7)!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(2) span::before,body[data-role="teacher"] #studentFinanceSection .student-finance-stats .stat-card:nth-child(4) span::before,body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(4) span::before{background:#16805D!important;box-shadow:0 0 0 3px #E5F6EF!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1){border-color:#F0D1D5!important;background:linear-gradient(145deg,#fff,#FFF7F8)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(1) span::before{background:#C64752!important;box-shadow:0 0 0 3px #FBEAEC!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2){border-color:#F0DEC0!important;background:linear-gradient(145deg,#fff,#FFFAF1)!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-stats .stat-card:nth-child(2) span::before{background:#B77816!important;box-shadow:0 0 0 3px #FFF1D8!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2){border-color:#E9D694!important;background:linear-gradient(145deg,#fff,#FFFBEF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats .stat-card:nth-child(2) span::before{background:#D9A51E!important;box-shadow:0 0 0 3px #FFF3CF!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{display:grid!important;place-items:center!important; color:#2F6FA8!important;background:#EDF4FC!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{width:18px!important;height:18px!important;display:block!important; fill:none!important;stroke:currentColor!important;stroke-width:1.8!important; stroke-linecap:round!important;stroke-linejoin:round!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg *{fill:none!important;stroke:currentColor!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions{gap:10px!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button{position:relative!important; min-height:92px!important; padding:12px 6px 11px!important; border:1px solid #dce6f0!important; border-radius:18px!important; background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important; box-shadow:0 7px 18px rgba(11,45,87,.045)!important; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button:active{transform:scale(.98)!important; box-shadow:0 3px 10px rgba(11,45,87,.04)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{width:42px!important; height:42px!important; margin:0 auto 8px!important; border-radius:14px!important; background:#eef5fc!important; color:#236aa5!important; box-shadow:inset 0 0 0 1px rgba(35,106,165,.035)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{width:21px!important; height:21px!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{color:#173454!important; font-size:11px!important; font-weight:750!important; line-height:1.35!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-primary{border-color:#ead58b!important; background:linear-gradient(180deg,#fffef9 0%,#fff9e8 100%)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-primary .dashboard-action-icon{background:#fff2c7!important; color:#a8750c!important; box-shadow:inset 0 0 0 1px rgba(168,117,12,.06)!important;} body[data-role="teacher"] #homeSection .smart-kpis{gap:10px!important;} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{position:relative!important; min-height:94px!important; padding:11px 6px 10px!important; border:1px solid #dce6f0!important; border-radius:17px!important; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important; box-shadow:0 6px 16px rgba(11,45,87,.035)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:hidden!important;} body[data-role="teacher"] #homeSection .smart-kpi-icon{width:28px!important; height:28px!important; display:grid!important; place-items:center!important; margin:0 auto 5px!important; border-radius:10px!important; background:#eef5fc!important; color:#2b71aa!important;} body[data-role="teacher"] #homeSection .smart-kpi-icon svg{width:15px!important; height:15px!important; display:block!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important;} body[data-role="teacher"] #homeSection .smart-kpi-label{display:block!important; max-width:100%!important; color:#6b798b!important; font-size:8.7px!important; line-height:1.3!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{margin-top:3px!important; color:#0b3564!important; font-size:19px!important; line-height:1.1!important; font-weight:850!important;} body[data-role="teacher"] #homeSection .smart-kpi-groups .smart-kpi-icon{background:#eaf8f2!important;color:#16805d!important;} body[data-role="teacher"] #homeSection .smart-kpi-lessons .smart-kpi-icon{background:#fff4dc!important;color:#b77816!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-icon{background:#f1effb!important;color:#6753a7!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:11.5px!important; line-height:1.25!important; white-space:normal!important; max-height:30px!important; overflow:hidden!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-contact .secondary-btn{min-height:36px!important; padding:8px 14px!important; border-radius:11px!important; font-size:11px!important; box-shadow:none!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn, body[data-role="teacher"] #homeSection .smart-next-lesson>.secondary-btn, body[data-role="teacher"] #homeSection .smart-dashboard-hero .secondary-btn.compact, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{min-height:40px!important; border-radius:12px!important; font-size:11px!important; font-weight:750!important; box-shadow:none!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow{letter-spacing:0!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon{width:45px!important;height:45px!important;border-radius:15px!important;margin-bottom:7px!important; background:linear-gradient(145deg,#f4f8fd 0%,#eaf3fb 100%)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions .dashboard-action-icon svg{width:23px!important;height:23px!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button{border-color:#e1e8f0!important;box-shadow:0 6px 16px rgba(11,45,87,.035)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{margin-top:-1px!important;} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi{min-height:100px!important;padding-top:12px!important;padding-bottom:11px!important;} body[data-role="teacher"] #homeSection .smart-kpi-icon{width:34px!important;height:34px!important;border-radius:11px!important;margin-bottom:6px!important;} body[data-role="teacher"] #homeSection .smart-kpi-icon svg{width:19px!important;height:19px!important;stroke-width:1.9!important;} body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi>b{font-size:22px!important;margin-top:4px!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{font-size:13px!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero{padding:0 2px!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero>div{width:100%!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero h3{font-size:13px!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero p{display:block!important;font-size:10.5px!important;margin-top:3px!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{padding:16px 17px!important;border-radius:20px!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow{font-size:11.5px!important;font-weight:850!important;line-height:1.3!important;margin-bottom:4px!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:3px;margin-inline-end:6px; background:#d2a92c;box-shadow:0 0 0 4px #fff7dd;vertical-align:1px;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card h4{font-size:17px!important;margin-top:4px!important;} body[data-role="teacher"] #homeSection .smart-today-mini{padding:16px!important;border-radius:20px!important;} body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important;} body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading{display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important;} body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading b{font-size:19px!important;color:var(--tp-ink)!important;white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-today-mini .smart-section-heading span{font-size:9.5px!important;color:var(--tp-muted)!important;white-space:nowrap!important;} body[data-role="teacher"] #homeSection .today-schedule-link{flex:0 0 auto!important;min-height:34px!important;padding:7px 12px!important;border:1px solid #dce5ef!important; border-radius:11px!important;background:#f8fbff!important;color:#164b7f!important;font:inherit!important;font-size:10px!important;font-weight:800!important;} body[data-role="teacher"] #homeSection .today-schedule-link:active{transform:scale(.98)!important} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card.compact{grid-template-columns:68px minmax(0,1fr)!important;gap:4px 12px!important;padding:13px!important;border-radius:16px!important; background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time b{font-size:14px!important;font-weight:850!important;color:#164b7f!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-time span{margin-top:2px!important;font-size:9.5px!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-title h4{font-size:13.5px!important;font-weight:800!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{min-height:34px!important;margin-top:8px!important;border-radius:10px!important;background:#fffaf0!important;} body[data-role="teacher"] #homeSection .today-schedule-empty{padding:18px 12px!important;border:1px dashed #d9e3ed!important;border-radius:14px!important;background:#fbfdff!important; color:#748295!important;text-align:center!important;font-size:11px!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-hero{gap:18px!important; padding:22px 22px 20px!important; border-radius:28px!important; box-shadow:0 16px 36px rgba(8,45,87,.16)!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-copy{align-self:center!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-copy .eyebrow{margin-bottom:6px!important; color:#f0cf69!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-copy h2{margin-bottom:3px!important; letter-spacing:-.25px!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-copy>b{display:block!important; color:#ffd45a!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{background:rgba(255,255,255,.075)!important; border-color:rgba(255,255,255,.22)!important; backdrop-filter:blur(6px)!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit{min-width:84px!important; padding-inline:11px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit>span{font-size:14px!important; line-height:1!important;} body[data-role="teacher"] #homeSection .smart-next-lesson, body[data-role="teacher"] #homeSection .smart-next-lesson.no-schedule{border-color:#d7e3ee!important; background:linear-gradient(135deg,#ffffff 0%,#f4f9fd 100%)!important; box-shadow:0 8px 22px rgba(8,45,87,.055)!important;} body[data-role="teacher"] #homeSection .smart-next-copy>b{background:#eaf4fb!important; color:#164f82!important; font-weight:800!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn{transition:transform .14s ease,filter .14s ease!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn:active{transform:scale(.975)!important; filter:brightness(.96)!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button, body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;} body[data-role="teacher"] #homeSection .dashboard-quick-actions button:active, body[data-role="teacher"] #homeSection .smart-kpis>div.smart-kpi:active{transform:translateY(1px) scale(.985)!important;} body[data-role="teacher"] #homeSection .dashboard-action-primary{border-color:#ead58f!important; background:linear-gradient(180deg,#fffdf6 0%,#fff9e8 100%)!important;} body[data-role="teacher"] #homeSection .dashboard-action-primary .dashboard-action-icon{background:linear-gradient(145deg,#fff3c6,#ffe89a)!important; color:#9a6b00!important;} body[data-role="teacher"] #homeSection .smart-kpi-next{border-color:#dfd09b!important; background:linear-gradient(180deg,#fffdf8 0%,#fff9e9 100%)!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-icon{background:#fff0bc!important; color:#a27308!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{color:#7c5c0c!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{border-color:#e0e6ee!important; box-shadow:0 8px 22px rgba(8,45,87,.045)!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{background:#f7faff!important; border-color:#dbe5ef!important; color:#174d7e!important;} body[data-role="teacher"] #homeSection .smart-today-mini{box-shadow:0 10px 26px rgba(8,45,87,.05)!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-session-card.compact{border-color:#e1e8ef!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{font-weight:850!important; transition:transform .14s ease,background .14s ease!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn:active{transform:scale(.985)!important; background:#fff4cf!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important; padding:0!important;border-radius:13px!important;background:rgba(255,255,255,.94)!important; color:#153d69!important;border-color:rgba(255,255,255,.62)!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{font-size:17px!important;margin:0!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit-label{display:none!important} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{grid-template-columns:minmax(0,1fr) 42px!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block{min-width:0!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{overflow:hidden!important;text-overflow:ellipsis!important} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before{content:"▶";display:inline-block;margin-inline-end:7px;color:currentColor;font-size:10px;transform:translateY(-.5px);} body[data-role="teacher"] #homeSection .smart-kpi-next{min-height:100px!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{display:block!important;max-height:none!important;overflow:visible!important;text-overflow:clip!important; white-space:nowrap!important;font-size:12.5px!important;line-height:1.2!important;letter-spacing:-.15px!important;} body[data-role="teacher"] #homeSection .smart-alert-summary-chips{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:9px!important;} body[data-role="teacher"] #homeSection .smart-alert-summary-chips span{display:inline-flex!important;align-items:center!important;min-height:25px!important;padding:4px 8px!important; border-radius:999px!important;background:#f5f8fc!important;border:1px solid #e2e8f0!important; color:#5f6f83!important;font-size:9.5px!important;font-weight:800!important;white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card.has-urgent .smart-alert-summary-chips span:first-child{background:#fff3f3!important;border-color:#f0d4d4!important;color:#a33b46!important;} body[data-role="teacher"] #homeSection .today-schedule-link{min-width:auto!important;padding-inline:11px!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{content:"▶";display:inline-block;margin-inline-end:6px;font-size:9px;color:#9a700f;} body[data-role="teacher"] #homeSection .teacher-home-profile-hero, body[data-role="teacher"] #homeSection .smart-next-lesson, body[data-role="teacher"] #homeSection .dashboard-quick-actions, body[data-role="teacher"] #homeSection .smart-kpis, body[data-role="teacher"] #homeSection .smart-dashboard-hero, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{animation:tabeaHomeReveal .28s ease both;} body[data-role="teacher"] #homeSection .smart-next-lesson{animation-delay:.03s} body[data-role="teacher"] #homeSection .dashboard-quick-actions{animation-delay:.05s} body[data-role="teacher"] #homeSection .smart-kpis{animation-delay:.07s} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card{animation-delay:.09s} body[data-role="teacher"] #homeSection .smart-today-mini{animation-delay:.11s} body[data-role="teacher"] #homeSection .smart-dashboard-hero{width:100%!important; max-width:100%!important; padding-inline:8px!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero>div{min-width:0!important; width:100%!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{width:auto!important; max-width:100%!important; padding-inline:2px!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; line-height:1.75!important;} body[data-role="teacher"] #homeSection .smart-kpi-next{padding-inline:4px!important; overflow:hidden!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{width:100%!important; max-width:100%!important; padding-inline:1px!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; font-size:8.2px!important; line-height:1.35!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{width:100%!important; max-width:100%!important; margin-top:4px!important; padding-inline:1px!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; direction:rtl!important; unicode-bidi:plaintext!important; text-align:center!important; font-size:10px!important; line-height:1.25!important; letter-spacing:-.2px!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{--teacher-contact-action-size:42px; display:grid!important; grid-template-columns:minmax(0,1fr) var(--teacher-contact-action-size)!important; align-items:center!important; gap:10px!important; padding:12px 14px!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block{min-width:0!important; display:flex!important; align-items:center!important; gap:10px!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-icon, body[data-role="teacher"] #homeSection .teacher-profile-edit{width:var(--teacher-contact-action-size)!important; min-width:var(--teacher-contact-action-size)!important; max-width:var(--teacher-contact-action-size)!important; height:var(--teacher-contact-action-size)!important; min-height:var(--teacher-contact-action-size)!important; max-height:var(--teacher-contact-action-size)!important; flex:0 0 var(--teacher-contact-action-size)!important; box-sizing:border-box!important; border-radius:13px!important; padding:0!important; margin:0!important; display:grid!important; place-items:center!important; line-height:1!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-icon{font-size:18px!important} body[data-role="teacher"] #homeSection .teacher-profile-edit{font-size:0!important} body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{display:block!important; margin:0!important; padding:0!important; font-size:17px!important; line-height:1!important; transform:none!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit-label{display:none!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block>div{min-width:0!important} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before, body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{margin:0!important; flex:0 0 auto!important;} body[data-role="teacher"] #homeSection .smart-kpi-next{padding:11px 6px 9px!important; overflow:hidden!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .smart-kpi-label{font-size:8px!important; line-height:1.3!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:wrap!important; gap:3px 5px!important; width:100%!important; margin-top:6px!important; padding:0 2px!important; overflow:visible!important; direction:rtl!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit{display:inline-flex!important; align-items:baseline!important; gap:2px!important; white-space:nowrap!important; color:#0b3c6c!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{font-size:14px!important; line-height:1!important; font-weight:900!important; font-variant-numeric:tabular-nums!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{font-size:7.5px!important; line-height:1!important; font-weight:850!important; color:#60778e!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero{box-sizing:border-box!important; padding-inline:14px!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{box-sizing:border-box!important; padding-inline:4px!important; overflow:visible!important; line-height:1.7!important;} body[data-role="teacher"] #homeSection .today-schedule-link{min-height:36px!important; padding:8px 12px!important; border-radius:11px!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{--teacher-contact-action-size:42px; grid-template-columns:minmax(0,1fr) var(--teacher-contact-action-size)!important; align-items:center!important; gap:10px!important; padding:11px 12px!important; border-color:rgba(255,255,255,.23)!important; background:rgba(255,255,255,.055)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block{min-width:0!important; display:grid!important; grid-template-columns:var(--teacher-contact-action-size) minmax(0,1fr)!important; align-items:center!important; gap:10px!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-icon, body[data-role="teacher"] #homeSection .teacher-profile-edit{width:var(--teacher-contact-action-size)!important; min-width:var(--teacher-contact-action-size)!important; max-width:var(--teacher-contact-action-size)!important; height:var(--teacher-contact-action-size)!important; min-height:var(--teacher-contact-action-size)!important; max-height:var(--teacher-contact-action-size)!important; border-radius:13px!important; display:grid!important; place-items:center!important; padding:0!important; margin:0!important; box-sizing:border-box!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-icon{background:rgba(225,178,45,.16)!important; color:#f2c33d!important; font-size:18px!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit{border:1px solid rgba(255,255,255,.78)!important; background:rgba(255,255,255,.95)!important; color:#0b4275!important; box-shadow:0 5px 14px rgba(4,33,70,.08)!important;} body[data-role="teacher"] #homeSection .teacher-profile-edit>span:first-child{font-size:17px!important; line-height:1!important; transform:none!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block>div{min-width:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; gap:1px!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block small{font-size:10px!important; line-height:1.25!important; opacity:.82!important;} body[data-role="teacher"] #homeSection .teacher-home-phone-block a{max-width:100%!important; font-size:17px!important; line-height:1.15!important; font-weight:900!important; letter-spacing:.35px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn{min-width:0!important; width:auto!important; flex:0 0 auto!important; min-height:38px!important; padding:9px 14px!important; border-radius:12px!important; gap:5px!important; font-size:10.5px!important; box-shadow:0 5px 12px rgba(7,54,99,.09)!important;} body[data-role="teacher"] #homeSection .smart-next-lesson>.primary-btn::before{font-size:8px!important;} body[data-role="teacher"] #homeSection .smart-kpi-next{padding-inline:4px!important;} body[data-role="teacher"] #homeSection .smart-kpi-next>b{display:flex!important; align-items:baseline!important; justify-content:center!important; flex-wrap:nowrap!important; gap:4px!important; width:100%!important; min-width:0!important; margin-top:6px!important; padding:0!important; white-space:nowrap!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit{display:inline-flex!important; align-items:baseline!important; gap:1px!important; flex:0 0 auto!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit+ .next-kpi-unit::before{content:"·"; margin-inline:0 1px; color:#a1afbc; font-size:7px; font-weight:800;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit strong{font-size:13px!important; line-height:1!important; font-weight:900!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-unit small{font-size:7px!important; line-height:1!important; font-weight:850!important;} body[data-role="teacher"] #homeSection .smart-kpi-next .next-kpi-single{font-size:11px!important; font-weight:900!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-alert-summary-chips{display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:7px!important; margin-top:9px!important;} body[data-role="teacher"] #homeSection .smart-alert-summary-chips span{min-height:28px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:5px 10px!important; border-radius:999px!important; font-size:9.5px!important; line-height:1!important; font-weight:800!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn{min-height:38px!important; padding:8px 12px!important; border-radius:12px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn::after{content:"←"; font-size:11px; line-height:1; transition:transform .16s ease;} body[data-role="teacher"] #homeSection .smart-alert-dashboard-card .secondary-btn:active::after{transform:translateX(-2px);} body[data-role="teacher"] #homeSection .today-schedule-link{min-height:36px!important; padding:8px 12px!important; border-radius:11px!important; font-size:9.5px!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn{min-height:36px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; padding-inline:12px!important; white-space:nowrap!important;} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-lesson-btn::before{content:"▶"!important; position:static!important; display:inline-block!important; margin:0!important; color:#a67c08!important; font-size:8px!important; line-height:1!important; transform:none!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero{padding-inline:15px!important; overflow:visible!important;} body[data-role="teacher"] #homeSection .smart-dashboard-hero h3, body[data-role="teacher"] #homeSection .smart-dashboard-hero p{padding-inline:5px!important; overflow:visible!important; text-overflow:clip!important; line-height:1.7!important;} body[data-role="teacher"] #scheduleSection{--sch-navy:#0B3564; --sch-blue:#2F78B7; --sch-gold:#E9B72E; --sch-ink:#10233F; --sch-muted:#728196; --sch-line:#DDE6EF; --sch-soft:#F6F9FC; --sch-success:#16805D;} body[data-role="teacher"] #scheduleSection .schedule-page-head{display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:14px!important; margin:0 0 18px!important; padding:0 2px!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head>div{min-width:0!important} body[data-role="teacher"] #scheduleSection .schedule-page-head .page-kicker{margin-bottom:5px!important; color:#2B6FA8!important; font-size:11px!important; font-weight:850!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head h2{margin:0!important; color:var(--sch-ink)!important; font-size:28px!important; line-height:1.22!important; letter-spacing:-.02em!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head .muted{display:none!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn{width:auto!important; min-width:82px!important; height:42px!important; min-height:42px!important; padding:0 13px!important; border:1px solid var(--sch-line)!important; border-radius:14px!important; background:#fff!important; color:var(--sch-navy)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; font-size:18px!important; font-weight:850!important; line-height:1!important; box-shadow:0 5px 16px rgba(11,53,100,.045)!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn::before{display:none!important} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn::after{content:"تحديث"!important; display:inline!important; font-size:10.5px!important; color:var(--sch-navy)!important;} body[data-role="teacher"] #scheduleSection .schedule-page-head .icon-action-btn:active{transform:scale(.975)} body[data-role="teacher"] #scheduleSection .schedule-summary-grid{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:9px!important; margin:0 0 18px!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{position:relative!important; min-width:0!important; min-height:108px!important; padding:14px 8px 11px!important; border:1px solid #DCE6F0!important; border-radius:20px!important; background:linear-gradient(155deg,#FFFFFF 0%,#F8FBFE 100%)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-end!important; gap:4px!important; text-align:center!important; overflow:hidden!important; box-shadow:0 8px 24px rgba(11,53,100,.045)!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card::before{content:""!important; display:block!important; position:absolute!important; top:12px!important; left:50%!important; transform:translateX(-50%)!important; width:31px!important; height:31px!important; border-radius:11px!important; background-color:#EDF5FC!important; background-repeat:no-repeat!important; background-position:center!important; background-size:17px 17px!important; box-shadow:inset 0 0 0 1px #DDEAF5!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M13 14h3'/%3E%3C/svg%3E")!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316805D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")!important; background-color:#EAF8F2!important; box-shadow:inset 0 0 0 1px #D6EEE4!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span{display:block!important; width:100%!important; min-height:25px!important; margin:0!important; color:#6B7A8D!important; font-size:9px!important; font-weight:750!important; line-height:1.35!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card span::before{display:none!important;content:none!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card b{display:block!important; margin:0!important; color:var(--sch-navy)!important; font-size:22px!important; line-height:1!important; font-weight:900!important;} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card:nth-child(4){display:none!important} body[data-role="teacher"] #scheduleSection .mobile-schedule-browser{display:block!important; margin:0!important;} body[data-role="teacher"] #scheduleSection .schedule-day-selector{display:flex!important; gap:8px!important; margin:0 -2px 14px!important; padding:2px 2px 7px!important; overflow-x:auto!important; scrollbar-width:none!important; scroll-snap-type:x proximity!important; overscroll-behavior-inline:contain!important;} body[data-role="teacher"] #scheduleSection .schedule-day-selector::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip{position:relative!important; flex:0 0 62px!important; min-width:62px!important; min-height:76px!important; padding:10px 5px 12px!important; border:1px solid #DDE5EE!important; border-radius:19px!important; background:#fff!important; color:#758398!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; scroll-snap-align:start!important; box-shadow:0 5px 16px rgba(11,53,100,.035)!important; transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease!important;} body[data-role="teacher"] #scheduleSection .schedule-day-chip span{font-size:10px!important; line-height:1.2!important; font-weight:800!important; color:inherit!important;} body[data-role="teacher"] #scheduleSection .schedule-day-chip b{margin-top:2px!important; color:var(--sch-navy)!important; font-size:21px!important; line-height:1!important; font-weight:900!important;} body[data-role="teacher"] #scheduleSection .schedule-day-chip .schedule-day-dot{position:absolute!important; bottom:7px!important; width:5px!important; height:5px!important; border-radius:50%!important; background:transparent!important;} body[data-role="teacher"] #scheduleSection .schedule-day-chip.has-sessions .schedule-day-dot{background:#6FA7D3!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.today:not(.active){border-color:#C9DCEB!important;background:#F8FBFE!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.active{border-color:#0B3564!important; background:linear-gradient(155deg,#124A82 0%,#082D57 100%)!important; color:rgba(255,255,255,.78)!important; box-shadow:0 10px 24px rgba(8,45,87,.16)!important; transform:translateY(-1px)!important;} body[data-role="teacher"] #scheduleSection .schedule-day-chip.active b{color:#fff!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip.active .schedule-day-dot{background:var(--sch-gold)!important;box-shadow:0 0 0 3px rgba(233,183,46,.16)!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip:active{transform:scale(.975)!important} body[data-role="teacher"] #scheduleSection .schedule-mobile-timeline{margin:0!important; padding:17px 15px 18px!important; border:1px solid #DDE6EF!important; border-radius:24px!important; background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%)!important; box-shadow:0 10px 30px rgba(11,53,100,.045)!important; overflow:visible!important;} body[data-role="teacher"] #scheduleSection .schedule-mobile-date{display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; margin:0 1px 15px!important; padding:0 2px 11px!important; border-bottom:1px solid #EEF2F6!important;} body[data-role="teacher"] #scheduleSection .schedule-mobile-date b{position:relative!important; padding-inline-start:23px!important; color:var(--sch-ink)!important; font-size:21px!important; line-height:1.2!important; font-weight:900!important;} body[data-role="teacher"] #scheduleSection .schedule-mobile-date b::before{content:""!important; position:absolute!important; inset-inline-start:0!important; top:50%!important; width:15px!important; height:15px!important; transform:translateY(-50%)!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F78B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat!important;} body[data-role="teacher"] #scheduleSection .schedule-mobile-date span{flex:none!important; padding-bottom:1px!important; color:#7B899A!important; font-size:10px!important; line-height:1.4!important; white-space:nowrap!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list{position:relative!important; display:grid!important; gap:11px!important; padding-inline-start:18px!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list::before{content:""!important; position:absolute!important; inset-inline-start:4px!important; top:27px!important; bottom:27px!important; width:2px!important; border-radius:2px!important; background:linear-gradient(#D6E2ED,#EAF0F5)!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card, body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.compact{position:relative!important; display:grid!important; grid-template-columns:78px minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:8px 12px!important; min-width:0!important; padding:15px!important; border:1px solid #DCE5EE!important; border-radius:19px!important; background:#fff!important; opacity:1!important; box-shadow:0 6px 18px rgba(11,53,100,.035)!important; overflow:visible!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card::before{content:""!important; display:block!important; position:absolute!important; inset-inline-start:-19px!important; top:24px!important; width:9px!important; height:9px!important; border:3px solid #fff!important; border-radius:50%!important; background:#84A9C8!important; box-shadow:0 0 0 2px #D5E2ED!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.live{border-color:#9ED5C1!important; background:linear-gradient(150deg,#FFFFFF,#F2FBF7)!important; box-shadow:0 8px 22px rgba(22,128,93,.08)!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.live::before{background:#1E9B6B!important; box-shadow:0 0 0 3px #DDF5EB!important;} body[data-role="teacher"] #scheduleSection .schedule-timeline-list .schedule-session-card.finished{opacity:.62!important;background:#FAFBFC!important} body[data-role="teacher"] #scheduleSection .schedule-session-time{grid-column:1!important; grid-row:1!important; align-self:start!important; min-width:0!important; padding:2px 0 0!important; text-align:start!important; direction:rtl!important;} body[data-role="teacher"] #scheduleSection .schedule-session-time b{display:block!important; color:#155789!important; font-size:16px!important; line-height:1.25!important; font-weight:900!important; white-space:nowrap!important;} body[data-role="teacher"] #scheduleSection .schedule-session-time span{display:block!important; margin-top:6px!important; color:#8491A1!important; font-size:10px!important; line-height:1.2!important; font-weight:650!important; white-space:nowrap!important;} body[data-role="teacher"] #scheduleSection .schedule-session-main{grid-column:2!important; grid-row:1!important; min-width:0!important;} body[data-role="teacher"] #scheduleSection .schedule-session-title{display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:7px!important; min-width:0!important; flex-wrap:wrap!important;} body[data-role="teacher"] #scheduleSection .schedule-session-title h4{min-width:0!important; margin:0!important; color:var(--sch-ink)!important; font-size:15.5px!important; line-height:1.5!important; font-weight:850!important;} body[data-role="teacher"] #scheduleSection .schedule-session-status{display:inline-flex!important; align-items:center!important; gap:4px!important; flex:none!important; padding:5px 8px!important; border:1px solid #E2E8F0!important; border-radius:999px!important; background:#F4F7FA!important; color:#66758A!important; font-size:8.5px!important; line-height:1!important; font-weight:850!important;} body[data-role="teacher"] #scheduleSection .schedule-session-status i{display:block!important; width:5px!important; height:5px!important; border-radius:50%!important; background:#8B99AA!important;} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-live{border-color:#CBEADD!important;background:#EAF8F2!important;color:#14734F!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-live i{background:#1E9B6B!important;box-shadow:0 0 0 2px #D6F1E6!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-next{border-color:#E9D89A!important;background:#FFF8DF!important;color:#8A6812!important} body[data-role="teacher"] #scheduleSection .schedule-session-status.is-next i{background:#D4A31F!important} body[data-role="teacher"] #scheduleSection .schedule-session-meta{display:flex!important; align-items:center!important; gap:7px!important; flex-wrap:wrap!important; margin-top:7px!important; color:#7A889A!important; font-size:9.5px!important; line-height:1.4!important;} body[data-role="teacher"] #scheduleSection .schedule-session-meta span{display:inline-flex!important; align-items:center!important; gap:4px!important;} body[data-role="teacher"] #scheduleSection .schedule-session-meta span+span::before{content:"•"!important; color:#C0CAD5!important; margin-inline-end:1px!important;} body[data-role="teacher"] #scheduleSection .schedule-lesson-btn{grid-column:1/-1!important; grid-row:2!important; width:100%!important; min-height:43px!important; margin:2px 0 0!important; padding:0 14px!important; border:1px solid #E7D28B!important; border-radius:13px!important; background:linear-gradient(180deg,#FFFDF5 0%,#FFF9E6 100%)!important; color:var(--sch-navy)!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; font-size:11px!important; font-weight:900!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important; transition:transform .14s ease,background .14s ease,border-color .14s ease!important;} body[data-role="teacher"] #scheduleSection .schedule-lesson-btn .schedule-play-icon{color:#B48714!important; font-size:9px!important; line-height:1!important;} body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn{border-color:#B9DDCF!important; background:#EDF9F4!important; color:#126C4C!important;} body[data-role="teacher"] #scheduleSection .schedule-session-card.live .schedule-lesson-btn .schedule-play-icon{color:#16805D!important} body[data-role="teacher"] #scheduleSection .schedule-lesson-btn:active{transform:scale(.985)!important} body[data-role="teacher"] #scheduleSection .schedule-empty-state{min-height:150px!important; padding:38px 20px!important; border:1px dashed #D8E2EC!important; border-radius:18px!important; background:#FAFCFE!important; color:#7C899A!important; display:grid!important; place-items:center!important; text-align:center!important; font-size:11px!important; line-height:1.7!important;} body[data-role="teacher"] #scheduleSection .schedule-today-panel, body[data-role="teacher"] #scheduleSection .mobile-schedule-browser~.panel{display:none!important} body[data-role="teacher"] #studentFinanceSection{--finance-navy:#0B3A69; --finance-blue:#17639B; --finance-gold:#DDAE2E; --finance-ink:#102F50; --finance-muted:#748397; --finance-line:#DCE6EF; --finance-soft:#F7F9FC;} body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn{display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:auto!important; min-width:78px!important; min-height:42px!important; margin:0!important; padding:8px 12px!important; border:1px solid var(--finance-line)!important; border-radius:14px!important; background:#fff!important; color:var(--finance-navy)!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; font-size:10px!important; font-weight:800!important; white-space:nowrap!important;} body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn>span:first-child{font-size:17px!important; line-height:1!important;} body[data-role="teacher"] #studentFinanceSection .finance-refresh-btn:active{transform:scale(.975)!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; margin:0 0 12px!important;} body[data-role="teacher"] #studentFinanceSection .finance-summary-card{position:relative!important; min-width:0!important; min-height:104px!important; padding:15px 14px!important; overflow:hidden!important; border:1px solid var(--finance-line)!important; border-radius:18px!important; background:linear-gradient(145deg,#fff 0%,#F9FBFD 100%)!important; box-shadow:0 7px 20px rgba(11,45,87,.045)!important; text-align:right!important;} body[data-role="teacher"] #studentFinanceSection .finance-summary-card::before{content:""!important; position:absolute!important; inset-inline-end:14px!important; top:14px!important; width:7px!important; height:7px!important; border-radius:3px!important; background:#2F78B7!important; box-shadow:0 0 0 4px #EAF3FA!important;} body[data-role="teacher"] #studentFinanceSection .finance-summary-card.collected::before{background:#16805D!important;box-shadow:0 0 0 4px #E5F6EF!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card.remaining::before{background:var(--finance-gold)!important;box-shadow:0 0 0 4px #FFF4D5!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card.settled::before{background:#2F78B7!important;box-shadow:0 0 0 4px #EAF3FA!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card>span{display:block!important; padding-inline-end:17px!important; color:#65758A!important; font-size:9.5px!important; font-weight:760!important; line-height:1.35!important;} body[data-role="teacher"] #studentFinanceSection .finance-summary-card>b{display:block!important; margin-top:10px!important; color:var(--finance-navy)!important; font-size:21px!important; font-weight:900!important; line-height:1.05!important; direction:rtl!important; unicode-bidi:isolate!important; white-space:nowrap!important;} body[data-role="teacher"] #studentFinanceSection .finance-summary-card>small{display:block!important; margin-top:7px!important; color:#929EAC!important; font-size:8px!important; font-weight:650!important; line-height:1.4!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar-panel{padding:14px!important; margin:0 0 14px!important; border:1px solid var(--finance-line)!important; border-radius:20px!important; background:#fff!important; box-shadow:0 8px 24px rgba(11,45,87,.045)!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; align-items:end!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar label{min-width:0!important; margin:0!important; color:#647589!important; font-size:9px!important; font-weight:760!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-search-label{grid-column:1/-1!important} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar input, body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar select{width:100%!important; height:45px!important; min-height:45px!important; margin-top:5px!important; padding:9px 12px!important; border:1px solid var(--finance-line)!important; border-radius:13px!important; background:#FAFCFE!important; color:var(--finance-ink)!important; font-size:11px!important; font-weight:700!important; outline:none!important; box-shadow:none!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar :is(input,select):focus{border-color:#92B0CD!important; background:#fff!important; box-shadow:0 0 0 3px rgba(18,63,120,.065)!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-filter-bar{display:flex!important; flex-wrap:nowrap!important; gap:6px!important; margin:11px 0 0!important; padding:1px 0 2px!important; overflow-x:auto!important; scrollbar-width:none!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-filter-bar::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #studentFinanceSection .tenant-filter-chip{flex:0 0 auto!important; width:auto!important; min-height:34px!important; padding:7px 11px!important; border:1px solid var(--finance-line)!important; border-radius:999px!important; background:#fff!important; color:#647589!important; font-size:8.5px!important; font-weight:780!important; line-height:1.1!important; white-space:nowrap!important; box-shadow:none!important;} body[data-role="teacher"] #studentFinanceSection .tenant-filter-chip.active{border-color:var(--finance-navy)!important; background:var(--finance-navy)!important; color:#fff!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-list{display:grid!important; gap:12px!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card{position:relative!important; overflow:hidden!important; padding:16px!important; border:1px solid var(--finance-line)!important; border-radius:21px!important; background:linear-gradient(180deg,#fff 0%,#FDFEFF 100%)!important; box-shadow:0 8px 24px rgba(11,45,87,.05)!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card::before{content:""!important; position:absolute!important; top:0!important; inset-inline-end:18px!important; width:52px!important; height:3px!important; border-radius:0 0 999px 999px!important; background:linear-gradient(90deg,var(--finance-gold),#F1CB59)!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card.paid, body[data-role="teacher"] #studentFinanceSection .student-finance-card.partial, body[data-role="teacher"] #studentFinanceSection .student-finance-card.unpaid, body[data-role="teacher"] #studentFinanceSection .student-finance-card.no_fee{border-inline-start:1px solid var(--finance-line)!important; border-inline-end:1px solid var(--finance-line)!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card-head{display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:start!important; gap:10px!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-identity{min-width:0!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-head h3{margin:1px 0 7px!important; color:var(--finance-ink)!important; font-size:18px!important; font-weight:870!important; line-height:1.4!important; overflow-wrap:anywhere!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-meta{display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:6px!important; color:#7B8898!important; font-size:9px!important; line-height:1.4!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-meta span{min-width:0!important; max-width:100%!important; padding:0!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-meta span::after{content:none!important;display:none!important} body[data-role="teacher"] #studentFinanceSection .student-finance-code{display:inline-flex!important; align-items:center!important; min-height:24px!important; padding:4px 8px!important; border:1px solid #DDE7F0!important; border-radius:8px!important; background:#F4F7FA!important; color:#31516F!important; font-size:10px!important; font-weight:820!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-group{color:#60758A!important; font-weight:700!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-status{display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; width:max-content!important; max-width:116px!important; min-height:28px!important; padding:6px 9px!important; border:1px solid #E0E7EE!important; border-radius:999px!important; background:#F5F7FA!important; color:#69798A!important; font-size:8.5px!important; font-weight:820!important; line-height:1!important; white-space:nowrap!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-status i{display:block!important; width:6px!important; height:6px!important; flex:0 0 6px!important; border-radius:50%!important; background:currentColor!important; opacity:.8!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-status.paid{background:#EFF8F4!important;border-color:#D5EBE1!important;color:#27775B!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.partial{background:#FFF9E9!important;border-color:#EFDEAA!important;color:#8A6A18!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.unpaid{background:#FFF3F4!important;border-color:#F0D3D7!important;color:#AA4D58!important} body[data-role="teacher"] #studentFinanceSection .student-finance-status.no_fee{background:#F4F6F8!important;border-color:#E1E7ED!important;color:#68788A!important} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:0!important; margin:15px 0 12px!important; overflow:hidden!important; border:1px solid #E0E8F0!important; border-radius:15px!important; background:#F8FAFC!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers>div{position:relative!important; min-width:0!important; min-height:72px!important; padding:11px 6px 10px!important; border:0!important; border-radius:0!important; background:transparent!important; text-align:center!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers>div+div{border-inline-start:1px solid #E0E8F0!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers span{display:block!important; margin:0 0 7px!important; color:#788698!important; font-size:8.5px!important; font-weight:720!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-numbers b{display:block!important; color:var(--finance-navy)!important; font-size:12px!important; font-weight:880!important; line-height:1.2!important; direction:rtl!important; unicode-bidi:isolate!important; white-space:nowrap!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card.unpaid .student-finance-numbers .remaining b{color:#A94753!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card.partial .student-finance-numbers .remaining b{color:#8A6815!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card.paid .student-finance-numbers .remaining b, body[data-role="teacher"] #studentFinanceSection .student-finance-card.no_fee .student-finance-numbers .remaining b{color:#31516F!important} body[data-role="teacher"] #studentFinanceSection .student-finance-credit{display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin:-2px 0 12px!important; padding:9px 11px!important; border:1px solid #DCE8F2!important; border-radius:12px!important; background:#F4F8FC!important; color:#5E7185!important; font-size:8.5px!important; font-weight:720!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-credit b{color:var(--finance-navy)!important;font-size:10.5px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions.has-primary .finance-pay-btn{grid-column:1/-1!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions .inline-btn{display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; padding:9px 8px!important; border-radius:13px!important; font-size:9px!important; font-weight:820!important; line-height:1.2!important; white-space:normal!important; text-align:center!important; box-shadow:none!important;} body[data-role="teacher"] #studentFinanceSection .finance-pay-btn{border:1px solid var(--finance-navy)!important; background:linear-gradient(135deg,#0D477B,#0A315C)!important; color:#fff!important; box-shadow:0 7px 17px rgba(11,58,105,.10)!important;} body[data-role="teacher"] #studentFinanceSection .finance-action-icon{display:grid!important; place-items:center!important; width:22px!important; height:22px!important; flex:0 0 22px!important; border-radius:8px!important; background:rgba(255,255,255,.12)!important; color:#F2C94C!important; font-size:14px!important; line-height:1!important;} body[data-role="teacher"] #studentFinanceSection .finance-history-btn, body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-btn{border:1px solid #D9E3ED!important; background:#F8FAFC!important; color:#17436C!important;} body[data-role="teacher"] #studentFinanceSection .finance-history-btn b{display:grid!important; place-items:center!important; min-width:22px!important; height:22px!important; padding-inline:5px!important; border-radius:8px!important; background:#EAF1F7!important; color:#0E4779!important; font-size:8.5px!important;} body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-btn{background:#fff!important} body[data-role="teacher"] #studentFinanceSection .finance-whatsapp-icon{display:grid!important; place-items:center!important; width:22px!important; height:22px!important; flex:0 0 22px!important; border-radius:8px!important; background:#EDF8F3!important; color:#248060!important; font-size:10px!important; font-weight:900!important;} body[data-role="teacher"] #studentFinanceSection .student-finance-card-actions .inline-btn:active{transform:scale(.985)!important} body[data-role="teacher"] #scheduleSection #refreshScheduleBtn, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn{position:static!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:68px!important; max-width:none!important; height:42px!important; min-height:42px!important; padding:8px 14px!important; margin:0!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important;} body[data-role="teacher"] #scheduleSection #refreshScheduleBtn::before, body[data-role="teacher"] #scheduleSection #refreshScheduleBtn::after, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn::before, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn::after{content:none!important;display:none!important} body[data-role="teacher"] #scheduleSection .schedule-page-head{align-items:center!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note{border-color:#D7E5F2; background:linear-gradient(145deg,#F8FBFE,#FFFFFF);} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note b{color:#0B3564} body[data-role="teacher"] #smartAlertsSection #runSmartAlertsBtn{min-width:92px; white-space:nowrap;} body[data-role="teacher"] :is(#scheduleSection,#studentFinanceSection,#smartAlertsSection,#communicationSection) > .section-head{display:flex!important; flex-direction:row!important; direction:rtl!important; align-items:flex-start!important; justify-content:space-between!important; gap:14px!important; margin-bottom:15px!important; overflow:visible!important;} body[data-role="teacher"] :is(#scheduleSection,#studentFinanceSection,#smartAlertsSection,#communicationSection) > .section-head > div{flex:1 1 auto!important; min-width:0!important;} body[data-role="teacher"] .page-refresh-btn{position:static!important; flex:0 0 auto!important; width:auto!important; min-width:72px!important; max-width:none!important; height:42px!important; min-height:42px!important; margin:0!important; padding:8px 15px!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:0!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; opacity:1!important;} body[data-role="teacher"] .page-refresh-btn::before, body[data-role="teacher"] .page-refresh-btn::after{content:none!important;display:none!important} body[data-role="teacher"] .page-refresh-btn:disabled{opacity:.58!important;cursor:wait!important} body[data-role="teacher"] .page-refresh-btn:active{transform:scale(.98)!important} body[data-role="teacher"] #scheduleSection .schedule-page-head{display:flex!important;align-items:flex-start!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-controls-panel{margin-bottom:12px!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note{margin-top:10px!important; padding:11px 12px!important; border:1px solid #DCE8F4!important; border-radius:13px!important; background:linear-gradient(145deg,#F5F9FD,#FFFFFF)!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note b{font-size:10.5px!important;color:#0B3564!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-auto-note span{font-size:8.8px!important;line-height:1.7!important;color:#6D7B8D!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state{min-height:270px!important; padding:34px 22px!important; border:1px solid #DCE7F1!important; border-radius:22px!important; background:linear-gradient(155deg,#FFFFFF 0%,#F8FBFE 100%)!important; box-shadow:0 8px 24px rgba(11,45,87,.045)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; text-align:center!important; color:#10233F!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-icon{width:64px!important; height:64px!important; margin-bottom:15px!important; border:1px solid #CDE9DE!important; border-radius:20px!important; background:#EFFAF5!important; color:#16805D!important; display:grid!important; place-items:center!important; box-shadow:0 7px 18px rgba(22,128,93,.08)!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-icon svg{width:34px!important; height:34px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state h3{margin:0 0 8px!important; color:#0B3564!important; font-size:20px!important; line-height:1.35!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state p{max-width:440px!important; margin:0!important; color:#6D7B8D!important; font-size:11px!important; line-height:1.85!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-clear-state>span{margin-top:14px!important; padding:6px 11px!important; border-radius:999px!important; background:#EEF5FB!important; color:#356789!important; font-size:8.5px!important; font-weight:800!important;} body[data-role="teacher"] #scheduleSection #refreshScheduleBtn.page-refresh-btn, body[data-role="teacher"] #studentFinanceSection #refreshStudentFinanceBtn.page-refresh-btn, body[data-role="teacher"] #smartAlertsSection #runSmartAlertsBtn.page-refresh-btn, body[data-role="teacher"] #communicationSection #refreshCommunicationBtn.page-refresh-btn, body[data-role="teacher"] #accountSection #refreshTeacherPaymentsBtn.page-refresh-btn{position:static!important; width:auto!important; min-width:72px!important; max-width:none!important; height:42px!important; min-height:42px!important; margin:0!important; padding:8px 15px!important; border:1px solid #DCE6EF!important; border-radius:14px!important; background:#FFFFFF!important; color:#0B3A69!important; box-shadow:0 5px 14px rgba(11,45,87,.045)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:11px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important;} body[data-role="teacher"] #smartAlertsSection .smart-alert-filter-panel{display:none!important} body[data-role="teacher"] #leaderboardSection>.section-head{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-bottom:14px!important;overflow:visible!important} body[data-role="teacher"] #leaderboardSection>.section-head>div:first-child{min-width:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%!important;max-width:none!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions button{width:100%!important;min-width:0!important;min-height:44px!important;margin:0!important;border-radius:14px!important;font-size:10.5px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-controls-panel{padding:14px!important;border-radius:20px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-note{margin-top:10px!important;padding:11px 12px!important;border-radius:13px!important;background:linear-gradient(145deg,#F5F9FD,#FFFFFF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-note span{font-size:8.8px!important;line-height:1.75!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-summary{width:100%!important;margin:10px 0 12px!important;overflow:hidden!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips{display:flex!important;flex-wrap:nowrap!important;direction:rtl!important;gap:7px!important;width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important;padding:2px 2px 7px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips::-webkit-scrollbar{display:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips span{flex:0 0 auto!important;min-height:32px!important;padding:7px 10px!important;border-radius:999px!important;background:#FFFFFF!important;box-shadow:0 3px 10px rgba(11,45,87,.035)!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:14px 0 16px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner{min-width:0!important;padding:15px 13px!important;border-radius:20px!important;text-align:center!important;overflow:hidden!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-column:1/-1!important;display:grid!important;grid-template-columns:62px minmax(0,1fr) auto!important;grid-template-areas:"medal name score" "medal meta score" "action action action"!important;align-items:center!important;gap:3px 12px!important;padding:16px!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-medal{grid-area:medal!important;font-size:40px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>span{grid-area:meta!important;margin:0!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 h3{grid-area:name!important;margin:0!important;text-align:right!important;font-size:17px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>b{grid-area:score!important;margin:0!important;font-size:23px!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{display:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-winner-actions{grid-area:action!important;margin-top:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) h3{font-size:14px!important;line-height:1.55!important;min-height:43px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>b{font-size:20px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner-actions{display:block!important;width:100%!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner-actions .leaderboard-certificate-open-btn{width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;border-color:#D6E3EF!important;background:#EEF5FB!important;color:#0B3B6B!important;font-size:9.5px!important;font-weight:850!important} body[data-role="teacher"] #leaderboardSection .leaderboard-certificate-actions{display:block!important;width:100%!important;margin-top:2px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-certificate-actions .leaderboard-certificate-open-btn{width:100%!important;min-width:0!important;min-height:39px!important;padding:8px 10px!important;border:1px solid #D6E3EF!important;border-radius:11px!important;background:#EEF5FB!important;color:#0B3B6B!important;font-size:9px!important;font-weight:850!important} body[data-role="teacher"] #leaderboardSection .leaderboard-table-head{align-items:center!important;gap:10px!important} body[data-role="teacher"] #leaderboardSection #printLeaderboardBtn{min-height:40px!important;padding:8px 11px!important;border-radius:12px!important;white-space:nowrap!important} .certificate-preview-modal{width:100%!important;max-width:none!important} .certificate-preview-body{max-height:58vh!important;padding:7px!important;border-radius:15px!important} .certificate-preview-image{border-radius:9px!important} .certificate-preview-actions{grid-template-columns:1fr 1fr!important;gap:8px!important} body[data-role="teacher"] #leaderboardSection>.section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:12px!important} body[data-role="teacher"] #leaderboardSection>.section-head>div:first-child{grid-column:1/-1!important} body[data-role="teacher"] #leaderboardSection>.section-head h2{font-size:27px!important;line-height:1.35!important;margin:4px 0 5px!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection>.section-head p{font-size:10px!important;line-height:1.75!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-head-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-summary{overflow:visible!important;margin:10px 0 13px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:7px!important;padding:0!important;direction:rtl!important} body[data-role="teacher"] #leaderboardSection .leaderboard-config-chips span{flex:1 1 calc(33.333% - 7px)!important;min-width:104px!important;justify-content:center!important;min-height:34px!important;padding:7px 9px!important;white-space:normal!important;text-align:center!important;line-height:1.35!important} body[data-role="teacher"] #leaderboardSection .leaderboard-eligibility-note{margin:3px 0 12px!important;padding:10px 12px!important;border:1px solid #D7E4F0!important;border-radius:14px!important;background:#F4F8FC!important;color:#63758A!important;font-size:9px!important;line-height:1.65!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-eligibility-note b{color:#0B3B6B!important;font-size:10px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:14px 0 17px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner{min-height:188px!important;padding:15px 12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:20px!important;background:#FFFFFF!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-column:1/-1!important;min-height:166px!important;display:grid!important;grid-template-columns:72px minmax(0,1fr) auto!important;grid-template-areas:"medal name score" "medal place score" "medal meta score"!important;align-items:center!important;column-gap:14px!important;padding:17px!important;text-align:right!important;background:linear-gradient(145deg,#FFFDF4,#FFFFFF)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-medal{grid-area:medal!important;font-size:44px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 h3{grid-area:name!important;font-size:17px!important;line-height:1.45!important;margin:0!important;text-align:right!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-place-label{grid-area:place!important;text-align:right!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>b{grid-area:score!important;font-size:22px!important;margin:0!important;white-space:nowrap!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1>small{grid-area:meta!important;display:block!important;text-align:right!important;margin:0!important;min-height:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) .leaderboard-medal{font-size:35px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1) h3{font-size:13.5px!important;line-height:1.5!important;min-height:42px!important;margin:5px 0 2px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>b{font-size:19px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1)>small{font-size:8px!important;min-height:0!important;margin-top:2px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-ineligible-row{border-color:#E0E6ED!important;background:#FBFCFE!important;box-shadow:none!important;opacity:.88!important} body[data-role="teacher"] #leaderboardSection .leaderboard-ineligible-row td[data-label="المركز"]{background:#F3F5F8!important;border-color:#E1E6EC!important} body[data-role="teacher"] #leaderboardSection .leaderboard-rank-empty strong{color:#8593A3!important} body[data-role="teacher"] #leaderboardSection .leaderboard-insufficient-label{color:#8A6C18!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.45!important} body[data-role="teacher"] #leaderboardSection .leaderboard-no-certificate{display:flex!important;align-items:center!important;justify-content:center!important;min-height:39px!important;padding:7px 8px!important;border:1px dashed #D7E0EA!important;border-radius:11px!important;background:#F7F9FC!important;color:#7C8999!important;font-size:8px!important;line-height:1.45!important;text-align:center!important} .certificate-preview-modal{width:min(100%,920px)!important;max-width:920px!important} .certificate-preview-body{max-height:60vh!important;background:#EEF3F8!important;padding:8px!important} .certificate-preview-image{width:100%!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(11,45,87,.10)!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-template-areas:"medal name score" "medal place score" "medal meta score" "action action action"!important;} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1 .leaderboard-podium-certificate-btn{grid-area:action!important;margin-top:9px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-2:last-child{grid-column:1/-1!important;width:calc(50% - 5px)!important;justify-self:center!important} .leaderboard-print-preview-modal{width:100%!important;max-width:none!important} .leaderboard-print-preview-body{max-height:58vh!important;padding:7px!important;border-radius:15px!important} .leaderboard-print-preview-actions{grid-template-columns:1fr 1fr!important;gap:8px!important} .certificate-preview-actions{position:sticky!important;bottom:0!important;background:#fff!important;padding-top:10px!important;z-index:2!important} } /* Desktop adaptation: same components, same order, more breathing room. */ @media (min-width:901px){ /* Desktop shell remains navigation-aware, but page content itself follows phone order. */ #appView .content{padding:30px clamp(24px,3vw,46px) 64px!important} #appView .content>.section{width:min(100%,1240px)!important;max-width:1240px!important;margin-inline:auto!important} #appView .content>.section>*{order:initial!important} /* Never reposition sibling page blocks into a different desktop narrative. */ /* Section visibility is controlled exclusively by the existing .hidden navigation state. */ #appView .content>.section.hidden{display:none!important} #appView :is(#homeSection,#studentsSection,#groupsSection,#scheduleSection,#studentFinanceSection,#smartAlertsSection,#leaderboardSection,#communicationSection,#lessonSection,#examSection,#cardsSection,#reportsSection,#accountSection,#studentSection) > *{grid-column:auto!important;grid-row:auto!important;order:initial!important} /* Page headings keep the phone hierarchy; only gain desktop breathing room. */ #appView .section-head{max-width:none!important;margin-inline:0!important} #appView .section-head h2{font-size:clamp(29px,2.15vw,36px)!important} #appView .section-head p{font-size:13px!important;max-width:760px!important} /* ---------- Teacher home: exact phone sequence, desktop-scale widths ---------- */ body[data-role="teacher"] #homeSection #statsGrid, body[data-role="teacher"] #homeSection #homePanels, body[data-role="teacher"] #homeSection .teacher-command-center, body[data-role="teacher"] #homeSection .smart-dashboard{display:block!important;width:100%!important;max-width:none!important} body[data-role="teacher"] #homeSection .smart-dashboard>*{order:initial!important;grid-column:auto!important;grid-row:auto!important} body[data-role="teacher"] #homeSection .teacher-home-profile-hero{width:100%!important;max-width:none!important;margin-bottom:18px!important;padding:26px 30px!important;grid-template-columns:124px minmax(0,1fr) minmax(250px,.62fr)!important;gap:24px!important} body[data-role="teacher"] #homeSection .teacher-home-photo{width:118px!important;height:118px!important} body[data-role="teacher"] #homeSection .teacher-home-profile-copy h2{font-size:31px!important} body[data-role="teacher"] #homeSection .teacher-home-profile-copy>b{font-size:21px!important} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{--teacher-contact-action-size:46px!important;min-width:0!important} body[data-role="teacher"] #homeSection .smart-next-lesson{width:100%!important;max-width:none!important;margin:0 0 18px!important;padding:22px 24px!important;grid-template-columns:auto minmax(0,1fr) auto!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions button{min-height:112px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions button b{font-size:13px!important} body[data-role="teacher"] #homeSection .smart-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:18px!important} body[data-role="teacher"] #homeSection .smart-kpis>div{min-height:116px!important} body[data-role="teacher"] #homeSection .smart-kpis span{font-size:10px!important} body[data-role="teacher"] #homeSection .smart-kpis b{font-size:28px!important} body[data-role="teacher"] #homeSection .smart-dashboard-hero, body[data-role="teacher"] #homeSection .smart-alert-dashboard-card, body[data-role="teacher"] #homeSection .smart-today-mini{width:100%!important;max-width:none!important;margin:0 0 18px!important} body[data-role="teacher"] #homeSection .smart-dashboard-hero{padding:20px 24px!important} body[data-role="teacher"] #homeSection .smart-dashboard-hero h3{font-size:22px!important} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #homeSection .dashboard-secondary-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:18px!important} /* ---------- Students: keep the approved phone student-card treatment ---------- */ body[data-role="teacher"] #studentsSection .students-list-panel{padding:18px!important} body[data-role="teacher"] #studentsSection .students-data-table tbody{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} body[data-role="teacher"] #studentsSection .students-data-table tr.student-row-card{width:100%!important;margin:0!important;min-width:0!important} body[data-role="teacher"] #studentsSection .student-search-wrap{max-width:520px!important;margin-bottom:16px!important} /* ---------- Groups: same cards and actions; only the collection widens ---------- */ body[data-role="teacher"] #groupsSection .groups-master-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} body[data-role="teacher"] #groupsSection .master-group-card{width:auto!important;margin:0!important} /* ---------- Schedule: retain phone timeline/date browser and session-card language ---------- */ body[data-role="teacher"] #scheduleSection .schedule-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important} body[data-role="teacher"] #scheduleSection .schedule-summary-grid .stat-card{min-height:122px!important;padding-inline:16px!important} body[data-role="teacher"] #scheduleSection .schedule-day-selector{gap:10px!important;padding-inline:2px!important} body[data-role="teacher"] #scheduleSection .schedule-day-chip{flex-basis:78px!important;min-width:78px!important;min-height:84px!important} body[data-role="teacher"] #scheduleSection .schedule-mobile-timeline{max-width:980px!important;margin-inline:auto!important;padding:24px 24px 26px!important} body[data-role="teacher"] #scheduleSection .schedule-session-card{max-width:none!important} body[data-role="teacher"] #scheduleSection .schedule-today-panel{display:none!important} /* ---------- Finance: same mobile card identity, responsive collection only ---------- */ body[data-role="teacher"] #studentFinanceSection .student-finance-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #studentFinanceSection .finance-summary-card{min-height:116px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-search-label{grid-column:1/-1!important} body[data-role="teacher"] #studentFinanceSection .student-finance-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} body[data-role="teacher"] #studentFinanceSection .student-finance-card{margin:0!important;min-width:0!important} /* ---------- Smart alerts: phone controls/status language, wider alert list ---------- */ body[data-role="teacher"] #smartAlertsSection .smart-alert-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} body[data-role="teacher"] #smartAlertsSection .smart-alert-card{margin:0!important;min-width:0!important} /* ---------- Leaderboard: preserve phone hierarchy (winner first, then rest) ---------- */ body[data-role="teacher"] #leaderboardSection .leaderboard-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #leaderboardSection .leaderboard-podium{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner.rank-1{grid-column:1/-1!important;width:100%!important;max-width:none!important} body[data-role="teacher"] #leaderboardSection .leaderboard-winner:not(.rank-1){width:100%!important;margin:0!important} body[data-role="teacher"] #leaderboardSection .leaderboard-table-panel{margin-top:18px!important} /* ---------- Communication: same phone flow; templates can use width ---------- */ body[data-role="teacher"] #communicationSection .communication-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #communicationSection .communication-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #communicationSection>.panel{margin-bottom:16px!important} /* ---------- Lesson / Exam: same step order and student cards ---------- */ body[data-role="teacher"] #lessonSection .lesson-stepper{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:760px!important;margin-inline:auto!important} body[data-role="teacher"] #lessonSection .lesson-setup-grid, body[data-role="teacher"] #examSection .exam-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #lessonSection .lesson-roster, body[data-role="teacher"] #examSection .exam-roster{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} body[data-role="teacher"] #lessonSection .lesson-student-card, body[data-role="teacher"] #examSection .exam-student-card{margin:0!important;min-width:0!important} /* ---------- Parent cards / reports: same controls, export preview stays dominant ---------- */ body[data-role="teacher"] #cardsSection .cards-toolbar-grid, body[data-role="teacher"] #reportsSection .report-controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #cardsSection .parent-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} body[data-role="teacher"] #reportsSection .report-preview-wrap{max-width:1040px!important;margin-inline:auto!important} /* ---------- Account: preserve phone sequence; only field groups widen ---------- */ body[data-role="teacher"] #accountSection .account-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body[data-role="teacher"] #accountSection .account-layout{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} body[data-role="teacher"] #accountSection .account-layout>*{grid-column:auto!important;grid-row:auto!important;order:initial!important} body[data-role="teacher"] #accountSection .signup-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} /* ---------- Parent portal: keep phone story order; do not create side-by-side narrative blocks ---------- */ body[data-role="parent"] #homeSection #statsGrid, body[data-role="parent"] #homeSection #homePanels, body[data-role="parent"] #studentSection #parentStudentCard{display:block!important;width:100%!important} body[data-role="parent"] #homeSection .parent-home-linked-card{max-width:980px!important;margin-inline:auto!important} body[data-role="parent"] #homeSection .parent-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body[data-role="parent"] #homeSection .parent-home-glance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important} body[data-role="parent"] #studentSection #parentStudentCard>*{grid-column:auto!important;grid-row:auto!important;order:initial!important} body[data-role="parent"] #studentSection .parent-month-panel, body[data-role="parent"] #studentSection .parent-exam-wrap, body[data-role="parent"] #studentSection .parent-finance-panel, body[data-role="parent"] #studentSection .parent-lessons-head, body[data-role="parent"] #studentSection .parent-lessons-list, body[data-role="parent"] #studentSection .parent-teacher-contact{width:100%!important;max-width:none!important;margin-top:16px!important} body[data-role="parent"] #studentSection .parent-lessons-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} /* Desktop dialogs: same content styling, only centered for mouse/keyboard usage. */ .modal{align-items:center!important;padding:28px!important} .modal-card{max-height:min(88vh,900px)!important} } /* 1366-class laptops: keep the same page order, reduce only collection columns. */ @media (min-width:901px) and (max-width:1190px){ #appView .content{padding:26px 22px 58px!important} body[data-role="teacher"] #homeSection .teacher-home-profile-hero{grid-template-columns:105px minmax(0,1fr)!important} body[data-role="teacher"] #homeSection .teacher-home-profile-contact{grid-column:1/-1!important;width:100%!important} body[data-role="teacher"] #homeSection .teacher-home-photo{width:100px!important;height:100px!important} body[data-role="teacher"] #homeSection .dashboard-quick-actions, body[data-role="teacher"] #homeSection .smart-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important} body[data-role="teacher"] #homeSection .smart-today-mini .schedule-list, body[data-role="teacher"] #studentsSection .students-data-table tbody, body[data-role="teacher"] #groupsSection .groups-master-grid, body[data-role="teacher"] #studentFinanceSection .student-finance-list, body[data-role="teacher"] #smartAlertsSection .smart-alert-list, body[data-role="teacher"] #lessonSection .lesson-roster, body[data-role="teacher"] #examSection .exam-roster, body[data-role="teacher"] #cardsSection .parent-cards-grid, body[data-role="parent"] #studentSection .parent-lessons-list{grid-template-columns:1fr!important} body[data-role="teacher"] #studentFinanceSection .student-finance-stats, body[data-role="teacher"] #smartAlertsSection .smart-alert-stats, body[data-role="teacher"] #leaderboardSection .leaderboard-stats, body[data-role="teacher"] #accountSection .account-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} body[data-role="teacher"] #communicationSection .communication-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* ========================================================= V1.40.0 — EMAIL VERIFICATION GATE New UI only; existing mobile and desktop layouts remain untouched. ========================================================= */ .teacher-verification-gate{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 28% 28%,rgba(20,132,226,.42),transparent 34%),linear-gradient(135deg,#071d40 0%,#0b3e78 54%,#06234d 100%)} .teacher-verification-gate.hidden{display:none!important} .teacher-verification-card{width:min(560px,100%);background:#fff;border:1px solid rgba(12,53,98,.12);border-radius:30px;padding:34px;box-shadow:0 28px 80px rgba(2,16,38,.34);text-align:center;direction:rtl} .verification-platform-mark{width:74px;height:74px;margin:0 auto 16px;border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(11,47,102,.18)} .verification-platform-mark img{display:block;width:100%;height:100%;object-fit:cover} .verification-kicker{display:block;color:#9b7414;font-weight:800;font-size:14px;margin-bottom:8px} .teacher-verification-card h2{margin:0;color:#0b2f66;font-size:clamp(28px,4vw,38px);line-height:1.25} .teacher-verification-card>p{margin:18px 0 6px;color:#738093} .verification-email{display:block;color:#0b2f66;font-size:18px;overflow-wrap:anywhere} .verification-info-box{display:grid;gap:6px;margin:22px 0;padding:16px 18px;border:1px solid rgba(232,173,34,.35);border-radius:18px;background:#fffaf0;color:#6d5313;text-align:right} .verification-info-box span{color:#7c8491;font-size:14px;line-height:1.7} .teacher-verification-card>.primary-btn,.teacher-verification-card>.secondary-btn{width:100%;margin-top:10px} .verification-link-btn,.verification-logout-btn{border:0;background:transparent;color:#0b4b86;font:inherit;font-weight:700;padding:12px;cursor:pointer} .verification-logout-btn{color:#8c3a46;margin-top:6px} .verification-message{margin:14px 0;padding:12px 14px;border-radius:14px;background:#eef5fb;color:#174a75;font-weight:700;line-height:1.6} .verification-message.error{background:#fff0f1;color:#9a3542}.verification-message.success{background:#edf9f4;color:#147654} .verification-change-email{margin-top:14px;padding:16px;border-radius:18px;background:#f5f8fc;text-align:right} .verification-change-email label{display:grid;gap:8px;color:#34465d;font-weight:700} .verification-change-email input{width:100%;min-height:52px;border:1px solid #d5dee8;border-radius:14px;padding:0 14px;font:inherit;direction:ltr;text-align:left;background:#fff} .verification-change-actions{display:flex;gap:10px;margin-top:12px}.verification-change-actions>*{flex:1} @media(max-width:600px){.teacher-verification-gate{padding:14px;align-items:end}.teacher-verification-card{border-radius:30px 30px 0 0;padding:28px 20px 24px;max-height:92vh;overflow:auto}.verification-change-actions{flex-direction:column}} .teacher-business-code{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:7px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em} /* V1.40.3 — contextual parent/teacher-link login actions. Later high-specificity login rules use display:...!important, so the generic .hidden utility alone cannot hide these two entries reliably. */ #loginView .forgot-password-entry.hidden, #loginView .teacher-signup-entry.hidden{ display:none!important; } /* V1.40.4 — URL-driven tenant login context. Applied at script startup so tenant/QR login never exposes teacher-only actions. */ html.tenant-login-context #loginView .forgot-password-entry, html.tenant-login-context #loginView .teacher-signup-entry, body.tenant-login-context #loginView .forgot-password-entry, body.tenant-login-context #loginView .teacher-signup-entry{ display:none!important; } /* V1.41.17 — Final group-actions cascade fix. This intentionally lives at the end of phase1.css because earlier mobile phase rules use higher-specificity !important grid declarations. */ #groupsSection .master-group-actions{ display:flex!important; flex-direction:column!important; grid-template-columns:none!important; align-items:stretch!important; gap:10px!important; width:100%!important; direction:rtl!important; } #groupsSection .master-group-actions .group-primary-action{ display:flex!important; grid-column:auto!important; grid-row:auto!important; width:100%!important; min-width:0!important; min-height:54px!important; margin:0!important; border-radius:15px!important; align-items:center!important; justify-content:center!important; font-size:12px!important; } #groupsSection .group-secondary-action-row{ display:flex!important; align-items:stretch!important; gap:10px!important; width:100%!important; min-width:0!important; direction:rtl!important; } #groupsSection .group-secondary-action-row .group-whatsapp-btn{ display:flex!important; flex:1 1 auto!important; width:auto!important; min-width:0!important; min-height:50px!important; margin:0!important; align-items:center!important; justify-content:center!important; white-space:nowrap!important; } #groupsSection .group-secondary-action-row .group-secondary-spacer{ display:block!important; flex:1 1 auto!important; min-width:0!important; } #groupsSection .group-secondary-action-row .group-more-menu{ display:block!important; flex:0 0 56px!important; grid-column:auto!important; grid-row:auto!important; width:56px!important; min-width:56px!important; } #groupsSection .group-secondary-action-row .group-more-trigger{ width:56px!important; min-width:56px!important; height:50px!important; min-height:50px!important; border-radius:15px!important; font-size:27px!important; padding:0!important; } @media(max-width:420px){ #groupsSection .group-secondary-action-row{gap:8px!important} #groupsSection .group-secondary-action-row .group-more-menu{ flex-basis:54px!important; width:54px!important; min-width:54px!important; } #groupsSection .group-secondary-action-row .group-more-trigger{ width:54px!important; min-width:54px!important; } } /* ========================================================== V1.41.18 — GLOBAL MOBILE UI CONSISTENCY Final cascade layer for the teacher portal only. Normalizes hierarchy, density, controls, sheets and safe areas without changing application behavior or the desktop/parent experiences. ========================================================== */ @media(max-width:900px){ body[data-role="teacher"]{ --tp-mobile-page-x:16px; --tp-mobile-radius:18px; --tp-mobile-control:48px; } body[data-role="teacher"] .content{ padding:16px var(--tp-mobile-page-x) calc(96px + env(safe-area-inset-bottom))!important; } body[data-role="teacher"] .section{ min-width:0!important; padding-bottom:24px!important; } /* One compact, predictable page-heading hierarchy. */ body[data-role="teacher"] .section-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:end!important; gap:12px!important; margin:0 0 14px!important; } body[data-role="teacher"] .section-head>div{min-width:0!important} body[data-role="teacher"] .section-head .page-kicker{ margin:0 0 3px!important; color:#1B659F!important; font-size:10px!important; line-height:1.4!important; } body[data-role="teacher"] .section-head h2{ margin:0!important; color:var(--tp-ink)!important; font-size:24px!important; font-weight:850!important; line-height:1.3!important; letter-spacing:-.015em!important; } body[data-role="teacher"] .section-head .muted, body[data-role="teacher"] .section-head p{ display:block!important; max-width:34ch!important; margin:3px 0 0!important; color:var(--tp-muted)!important; font-size:10px!important; line-height:1.55!important; } body[data-role="teacher"] .section-head>.icon-action-btn{ width:42px!important; min-width:42px!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0!important; border:1px solid var(--tp-line)!important; border-radius:13px!important; background:#fff!important; color:var(--tp-navy)!important; box-shadow:0 4px 14px rgba(8,45,87,.045)!important; } body[data-role="teacher"] .section-head>.compact, body[data-role="teacher"] .section-head>.secondary-btn.compact{ width:auto!important; min-width:78px!important; min-height:42px!important; margin:0!important; padding:9px 13px!important; border:1px solid var(--tp-line)!important; border-radius:13px!important; background:#fff!important; color:var(--tp-navy)!important; box-shadow:0 4px 14px rgba(8,45,87,.04)!important; font-size:10px!important; } /* Shared surface and control language. */ body[data-role="teacher"] .section>.panel, body[data-role="teacher"] .section .report-controls-panel, body[data-role="teacher"] .section .student-finance-toolbar-panel, body[data-role="teacher"] .section .leaderboard-controls-panel{ border:1px solid #DDE6EF!important; border-radius:var(--tp-mobile-radius)!important; background:#fff!important; box-shadow:0 7px 22px rgba(8,45,87,.045)!important; } body[data-role="teacher"] .section>.panel{padding:14px!important} body[data-role="teacher"] .section label{ color:#65758A!important; font-size:10px!important; line-height:1.45!important; } body[data-role="teacher"] .section input:not([type="checkbox"]):not([type="radio"]), body[data-role="teacher"] .section select{ min-height:var(--tp-mobile-control)!important; border:1px solid #D9E3EC!important; border-radius:13px!important; background:#FBFCFE!important; box-shadow:none!important; } body[data-role="teacher"] .app-select-trigger{ min-height:var(--tp-mobile-control)!important; padding:0 14px!important; border:1px solid #D9E3EC!important; border-radius:13px!important; background:#FBFCFE!important; box-shadow:none!important; font-size:11px!important; } body[data-role="teacher"] .app-select-trigger:focus-visible{ border-color:#8BAAC8!important; box-shadow:0 0 0 3px rgba(23,95,167,.09)!important; } body[data-role="teacher"] .empty{ min-height:72px!important; padding:18px 14px!important; border:1px dashed #CED9E5!important; border-radius:14px!important; background:#FAFCFE!important; color:#8491A3!important; font-size:10px!important; line-height:1.7!important; } /* KPI cards should scan as one system instead of oversized page-specific blocks. */ body[data-role="teacher"] :is( #scheduleSection .schedule-summary-grid, #studentFinanceSection .student-finance-stats, #smartAlertsSection .smart-alert-stats, #leaderboardSection .leaderboard-stats ) .stat-card{ min-height:96px!important; padding:11px 7px!important; border-radius:15px!important; box-shadow:0 5px 16px rgba(8,45,87,.04)!important; } body[data-role="teacher"] :is( #scheduleSection .schedule-summary-grid, #studentFinanceSection .student-finance-stats, #smartAlertsSection .smart-alert-stats, #leaderboardSection .leaderboard-stats ) .stat-card span{font-size:8px!important} body[data-role="teacher"] :is( #scheduleSection .schedule-summary-grid, #studentFinanceSection .student-finance-stats, #smartAlertsSection .smart-alert-stats, #leaderboardSection .leaderboard-stats ) .stat-card b{margin-top:5px!important;font-size:17px!important} /* Student cards: consistent actions and fully Arabic labels. */ body[data-role="teacher"] #studentsSection .students-data-table tr.student-row-card{ border-radius:17px!important; box-shadow:0 6px 18px rgba(8,45,87,.04)!important; } body[data-role="teacher"] #studentsSection .student-primary-actions .action-btn{ min-height:42px!important; height:42px!important; border-radius:12px!important; } /* Keep the repaired group hierarchy, with a denser premium rhythm. */ body[data-role="teacher"] #groupsSection .master-group-card{border-radius:18px!important} body[data-role="teacher"] #groupsSection .master-group-actions .group-primary-action{ min-height:50px!important; } body[data-role="teacher"] #groupsSection .group-secondary-action-row .group-whatsapp-btn, body[data-role="teacher"] #groupsSection .group-secondary-action-row .group-more-trigger{ min-height:46px!important; height:46px!important; } /* Report and communication panels should not create empty-screen monuments. */ body[data-role="teacher"] #reportsSection .report-controls-panel, body[data-role="teacher"] #studentFinanceSection .student-finance-toolbar-panel, body[data-role="teacher"] #leaderboardSection .leaderboard-controls-panel{ padding:14px!important; } body[data-role="teacher"] #communicationSection .communication-message{ min-height:150px!important; height:150px!important; border-radius:13px!important; } body[data-role="teacher"] #communicationSection .communication-template{ min-height:70px!important; border-radius:13px!important; } /* Unified app select bottom sheet. */ body[data-role="teacher"] #appSelectModal .app-select-modal-card, body[data-role="teacher"] #studentGroupPickerModal .app-picker-card{ position:fixed!important; inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px!important; width:auto!important; max-width:none!important; max-height:min(82dvh,680px)!important; padding:16px!important; border:1px solid #DCE5EF!important; border-radius:22px!important; overflow:hidden!important; } body[data-role="teacher"] :is(#appSelectModal,#studentGroupPickerModal) .modal-head{ position:relative!important; top:auto!important; flex:0 0 auto!important; margin:0 0 10px!important; padding:0 0 11px!important; background:#fff!important; } body[data-role="teacher"] :is(#appSelectModal,#studentGroupPickerModal) .modal-head h3{ margin:2px 0 0!important; font-size:20px!important; } body[data-role="teacher"] :is(#appSelectModal,#studentGroupPickerModal) .close-btn{ width:38px!important; min-width:38px!important; height:38px!important; border:1px solid #DEE6EF!important; border-radius:12px!important; background:#F6F8FB!important; } body[data-role="teacher"] .app-select-search-wrap{flex:0 0 auto!important;padding:0 0 9px!important} body[data-role="teacher"] .app-select-search-wrap input{ min-height:44px!important; margin:0!important; border-radius:12px!important; background:#F7F9FC!important; } body[data-role="teacher"] .app-picker-list{ gap:6px!important; padding:0!important; scrollbar-width:none!important; } body[data-role="teacher"] .app-picker-list::-webkit-scrollbar{display:none!important} body[data-role="teacher"] .app-picker-option{ min-height:56px!important; padding:10px 12px!important; border-radius:13px!important; gap:10px!important; } body[data-role="teacher"] .app-picker-copy b{font-size:12px!important;line-height:1.5!important} body[data-role="teacher"] .app-picker-copy small{font-size:9px!important} /* More sheet: compact two-column tool hub with a stable header/footer. */ body[data-role="teacher"] .mobile-more-sheet:not(.hidden){ inset:auto 8px 0!important; max-height:calc(88dvh - env(safe-area-inset-bottom))!important; padding:8px 12px calc(14px + env(safe-area-inset-bottom))!important; border-radius:24px 24px 0 0!important; overflow:auto!important; scrollbar-width:none!important; } body[data-role="teacher"] .mobile-more-sheet::-webkit-scrollbar{display:none!important} body[data-role="teacher"] .mobile-sheet-head{ position:sticky!important; top:-8px!important; z-index:3!important; padding:10px 2px 11px!important; background:#fff!important; } body[data-role="teacher"] .mobile-sheet-head strong{font-size:18px!important} body[data-role="teacher"] .mobile-more-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; padding:10px 0!important; } body[data-role="teacher"] .mobile-more-grid .more-menu-item{ min-height:68px!important; padding:10px!important; border-radius:14px!important; } body[data-role="teacher"] .mobile-more-grid .more-menu-item>b{font-size:11px!important} body[data-role="teacher"] .mobile-more-grid .more-menu-item>span:not(.nav-icon){ margin-top:3px!important; font-size:8px!important; line-height:1.45!important; } body[data-role="teacher"] .mobile-sheet-footer{padding:9px 2px!important;font-size:8px!important} body[data-role="teacher"] .mobile-logout-btn{min-height:42px!important;border-radius:12px!important} /* Bottom navigation and page content never compete for the last pixels. */ body[data-role="teacher"] .teacher-mobile-nav:not(.hidden){ height:calc(64px + env(safe-area-inset-bottom))!important; } } @media(max-width:370px){ body[data-role="teacher"]{--tp-mobile-page-x:13px} body[data-role="teacher"] .section-head h2{font-size:22px!important} body[data-role="teacher"] .mobile-more-grid{gap:6px!important} body[data-role="teacher"] .mobile-more-grid .more-menu-item{padding:9px!important} } /* ========================================================== V1.41.19 — USER GUIDE + INTERACTIVE PRODUCT TOUR ========================================================== */ .guide-page-head .guide-tour-start{width:auto;margin:0;white-space:nowrap} .guide-quick-start{ padding:18px;border:1px solid #D9E5EF;border-radius:20px; background:linear-gradient(145deg,#0A3768,#11528D);color:#fff; box-shadow:0 12px 30px rgba(8,45,87,.10) } .guide-quick-start>div{display:flex;align-items:flex-start;gap:12px} .guide-quick-icon{flex:0 0 38px;width:38px;height:38px;border-radius:13px;background:rgba(244,185,40,.16);color:#FFD86F;display:grid;place-items:center;font-weight:900} .guide-quick-start b{font-size:18px}.guide-quick-start p{margin:4px 0 0;color:rgba(255,255,255,.76);font-size:12px;line-height:1.7} .guide-quick-start ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none;counter-reset:quick} .guide-quick-start li{counter-increment:quick;min-width:0} .guide-quick-start li button{width:100%;min-height:64px;padding:9px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:10px;font-weight:750;line-height:1.55;text-align:right} .guide-quick-start li button::before{content:counter(quick);display:grid;place-items:center;width:20px;height:20px;margin-bottom:5px;border-radius:7px;background:#F4B928;color:#082D57;font-weight:900} .guide-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:22px 2px 11px} .guide-section-title span{color:#1B659F;font-size:10px;font-weight:800}.guide-section-title b{color:#10233F;font-size:16px} .guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .guide-card{min-width:0;border:1px solid #DDE6EF;border-radius:17px;background:#fff;box-shadow:0 6px 18px rgba(8,45,87,.035);overflow:hidden} .guide-card summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:66px;padding:12px 14px;cursor:pointer;list-style:none;color:#102F55} .guide-card summary::-webkit-details-marker{display:none}.guide-card summary b{font-size:13px}.guide-card summary i{font-style:normal;color:#718196;transition:transform .18s ease} .guide-card[open] summary{border-bottom:1px solid #EDF1F5;background:#FAFCFE}.guide-card[open] summary i{transform:rotate(180deg)} .guide-card-icon{width:34px;height:34px;border-radius:11px;background:#EDF5FC;color:#17629F;display:grid;place-items:center;font-size:16px;font-weight:900} .guide-card>div{padding:13px 14px 14px}.guide-card p{margin:0 0 7px;color:#64748A;font-size:10.5px;line-height:1.75}.guide-card p strong{color:#153D68} .guide-card>div button{width:100%;min-height:38px;margin-top:3px;border:1px solid #D4E1ED;border-radius:11px;background:#F3F7FB;color:#0B3B6C;font:inherit;font-size:10px;font-weight:800} .product-tour-layer,.context-tip-layer{position:fixed;inset:0;z-index:200000;direction:rtl;pointer-events:none} .product-tour-layer.hidden,.context-tip-layer.hidden{display:none!important} .product-tour-shade{position:fixed;z-index:1;background:rgba(4,17,39,.62);backdrop-filter:blur(1.2px);pointer-events:auto} .product-tour-spotlight{position:fixed;z-index:2;border:2px solid #F4B928;border-radius:16px;box-shadow:0 0 0 3px rgba(244,185,40,.18),0 12px 32px rgba(3,20,42,.18);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease} .product-tour-popover,.context-tip-popover{position:fixed;z-index:4;padding:16px;border:1px solid #DCE5EF;border-radius:18px;background:#fff;color:#10233F;box-shadow:0 22px 60px rgba(3,20,42,.28);overflow:auto;pointer-events:auto;text-align:right} .product-tour-progress{display:flex;align-items:center;gap:9px;margin-bottom:11px;color:#768498;font-size:9px;font-weight:800} .product-tour-progress>i{position:relative;flex:1;height:5px;border-radius:99px;background:#E9EEF4;overflow:hidden}.product-tour-progress>i>b{position:absolute;inset-block:0;right:0;border-radius:99px;background:#F4B928;transition:width .2s ease} .product-tour-kicker{display:block;color:#9B7417;font-size:9px;font-weight:850}.product-tour-popover h3,.context-tip-popover h3{margin:4px 0 6px;color:#0B3564;font-size:19px;line-height:1.4} .product-tour-popover p,.context-tip-popover p{margin:0;color:#64748A;font-size:11px;line-height:1.8} .product-tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.product-tour-actions>div{display:flex;gap:7px} .product-tour-actions button{width:auto;min-width:78px;min-height:40px;margin:0;padding:8px 12px;border-radius:11px;font-size:10px} .product-tour-actions .product-tour-skip{min-width:0;padding-inline:4px;border:0;background:transparent;color:#7B8797;font:inherit;font-size:9px;font-weight:750} .context-tip-backdrop{position:fixed;inset:0;z-index:1;background:rgba(4,17,39,.42);backdrop-filter:blur(1px);pointer-events:auto} .context-tip-spotlight{z-index:2}.context-tip-popover{z-index:3}.context-tip-popover .primary-btn{min-height:40px;margin-top:13px;border-radius:11px} @media(max-width:900px){ body[data-role="teacher"] #guideSection{padding-bottom:28px!important} body[data-role="teacher"] #guideSection .guide-page-head{align-items:end!important} body[data-role="teacher"] #guideSection .guide-tour-start{min-width:88px!important;min-height:42px!important;padding:9px 11px!important;border-radius:13px!important;font-size:9px!important} .guide-quick-start{padding:15px;border-radius:18px}.guide-quick-start b{font-size:16px}.guide-quick-start p{font-size:10px} .guide-quick-start ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px}.guide-quick-start li button{min-height:57px;font-size:9px} .guide-section-title{margin-top:19px}.guide-section-title b{font-size:14px} .guide-grid{grid-template-columns:1fr;gap:8px}.guide-card summary{min-height:60px;padding:10px 12px}.guide-card>div{padding:11px 12px 13px} .product-tour-popover,.context-tip-popover{padding:15px;border-radius:17px}.product-tour-popover h3,.context-tip-popover h3{font-size:17px}.product-tour-popover p,.context-tip-popover p{font-size:10.5px} } @media(max-width:370px){ .product-tour-actions{align-items:flex-end}.product-tour-actions>div{gap:5px}.product-tour-actions button{min-width:68px;padding-inline:9px} } /* V1.41.20 final cascade guards */ .product-tour-spotlight{pointer-events:auto!important} body[data-role="teacher"] .app-header .page-help-btn:not(.hidden){display:grid!important;place-items:center!important} @media(max-width:900px){ body[data-role="teacher"] .app-header .page-help-btn:not(.hidden){position:absolute!important;inset-inline-end:60px!important;top:50%!important;width:34px!important;height:34px!important;margin:0!important;padding:0!important;transform:translateY(-50%)!important} } /* ========================================================== V1.41.21 — PARENT PORTAL MOBILE POLISH Parent-only presentation and interaction refinements. ========================================================== */ body[data-role="parent"] #homePanels>.panel:empty, body[data-role="parent"] :is(.tenant-parent-banner,.parent-teacher-banner):empty{display:none!important} body[data-role="parent"] .parent-home-profile-slot{margin-bottom:10px!important} body[data-role="parent"] .parent-home-linked-card{padding:15px 17px!important;gap:13px!important;border-radius:19px!important} body[data-role="parent"] .parent-home-student-row, body[data-role="parent"] .parent-home-teacher-row{min-height:68px!important} body[data-role="parent"] .parent-home-student-avatar{width:54px!important;height:54px!important} body[data-role="parent"] .parent-home-teacher-row .parent-contact-teacher-avatar{width:48px!important;height:48px!important} body[data-role="parent"] .parent-home-linked-card b{font-size:15px!important} body[data-role="parent"] .parent-home-linked-card small{font-size:10px!important} body[data-role="parent"] .parent-home-glance-grid{gap:8px!important} body[data-role="parent"] .parent-home-update-card, body[data-role="parent"] .parent-home-finance-compact{min-height:92px!important;padding:13px!important;border-radius:15px!important} body[data-role="parent"] .parent-home-details-cta{border-radius:19px!important} body[data-role="parent"] .parent-finance-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px} body[data-role="parent"] .parent-finance-breakdown>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px;border:1px solid #DFE7F0;border-radius:14px;background:#F8FAFD} body[data-role="parent"] .parent-finance-breakdown span{color:#718095;font-size:9.5px;font-weight:750} body[data-role="parent"] .parent-finance-breakdown b{color:#0B3564;font-size:16px} body[data-role="parent"] .parent-finance-breakdown small{color:#748297;font-size:8.5px;line-height:1.6} body[data-role="parent"] .parent-finance-summary .has-remaining{border-color:#E8D18B!important;background:#FFFAEC!important} body[data-role="parent"] .parent-finance-summary .has-remaining b{color:#946E12!important} body[data-role="parent"] .parent-finance-summary .is-settled{border-color:#BFE4D6!important;background:#F0FAF6!important} body[data-role="parent"] .parent-payment-item .secondary-btn{min-width:92px!important} body[data-role="parent"] .parent-lessons-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:12px!important} body[data-role="parent"] .parent-lessons-head h3{margin:0 0 3px!important} body[data-role="parent"] .parent-lessons-head>div:first-child{min-width:0} body[data-role="parent"] .parent-lesson-filters{display:flex;gap:5px;padding:4px;border:1px solid #DFE6EF;border-radius:12px;background:#fff} body[data-role="parent"] .parent-lesson-filters button{min-width:54px;min-height:32px;padding:6px 9px;border:0;border-radius:9px;background:transparent;color:#728095;font:inherit;font-size:9px;font-weight:800} body[data-role="parent"] .parent-lesson-filters button.active{background:#0F477E;color:#fff} body[data-role="parent"] .parent-lesson-card{padding:0!important;overflow:hidden!important;border-right-width:4px!important} body[data-role="parent"] .parent-lesson-toggle{display:block;width:100%;margin:0;padding:14px 15px;border:0;background:#fff;color:inherit;text-align:right} body[data-role="parent"] .parent-lesson-toggle .parent-lesson-head{margin:0!important} body[data-role="parent"] .parent-lesson-status-wrap{display:flex;align-items:center;gap:8px} body[data-role="parent"] .parent-lesson-status-wrap i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#F2F6FA;color:#617187;font-style:normal;font-size:15px;transition:transform .18s ease} body[data-role="parent"] .parent-lesson-card.is-open .parent-lesson-status-wrap i{transform:rotate(180deg)} body[data-role="parent"] .parent-lesson-details{display:none;padding:0 15px 15px;border-top:1px solid #EDF1F5} body[data-role="parent"] .parent-lesson-card.is-open .parent-lesson-details{display:block} body[data-role="parent"] .parent-lesson-card:not(.is-open) .parent-lesson-toggle{padding-block:12px} body[data-role="parent"] .parent-lesson-card:not(.is-open) .parent-lesson-head>div>span{margin-top:2px} body[data-role="parent"] .parent-lesson-details .attendance-explicit{margin-top:12px!important} body[data-role="parent"] .parent-lesson-grid.compact-items{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:8px!important} body[data-role="parent"] .parent-lesson-absent-note{margin-top:8px;padding:11px 12px;border:1px solid #F0D4D8;border-radius:12px;background:#FFF6F7;color:#9B4A54;font-size:9.5px;line-height:1.7} body[data-role="parent"] .parent-contact-nav-btn .nav-icon{display:inline-grid;place-items:center} body[data-role="parent"] .parent-contact-nav-btn .nav-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body[data-role="parent"] .parent-teacher-contact{scroll-margin-top:18px;scroll-margin-bottom:104px} body[data-role="parent"] .app-header .page-help-btn:not(.hidden){display:grid!important;place-items:center!important} @media(max-width:900px){ body[data-role="parent"] .app-header .page-help-btn:not(.hidden){position:absolute!important;inset-inline-end:94px!important;top:50%!important;z-index:4!important;width:34px!important;height:34px!important;margin:0!important;padding:0!important;transform:translateY(-50%)!important} body[data-role="parent"] .sidebar{gap:5px!important;padding-inline:8px!important} body[data-role="parent"] .sidebar .nav-item{flex:1 1 0!important;width:auto!important;max-width:132px!important} body[data-role="parent"] #homeSection .home-page-head{margin-bottom:10px!important} body[data-role="parent"] #homeSection .parent-home-refresh-btn{min-width:84px!important;min-height:42px!important} body[data-role="parent"] .parent-month-panel{padding:14px!important} body[data-role="parent"] .parent-summary-grid>div:not(.empty){min-height:102px!important;padding:12px!important} body[data-role="parent"] .parent-lessons-head{align-items:stretch!important;flex-direction:column!important} body[data-role="parent"] .parent-lesson-filters{width:100%;display:grid;grid-template-columns:repeat(3,1fr)} body[data-role="parent"] .parent-lesson-filters button{width:100%} } @media(min-width:520px) and (max-width:900px){ body[data-role="parent"] .parent-home-linked-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:center!important} body[data-role="parent"] .parent-home-link-divider{width:1px!important;height:58px!important;position:absolute!important;right:50%!important} } @media(max-width:519px){ body[data-role="parent"] .parent-home-link-divider{margin-block:1px!important} body[data-role="parent"] .parent-lesson-grid.compact-items{grid-template-columns:1fr!important} body[data-role="parent"] .parent-finance-breakdown{grid-template-columns:1fr} body[data-role="parent"] .app-header .page-help-btn:not(.hidden){inset-inline-end:90px!important;width:32px!important;height:32px!important} } /* V1.41.23 — Parent header action spacing guard */ @media(max-width:900px){ body[data-role="parent"] .app-header .header-actions{ inset-inline-end:10px!important; gap:0!important; } body[data-role="parent"] .app-header .app-header-logout{ min-width:68px!important; min-height:34px!important; padding:6px 8px!important; border-radius:10px!important; font-size:9px!important; white-space:nowrap!important; } body[data-role="parent"] .app-header .page-help-btn:not(.hidden){ inset-inline-end:94px!important; width:32px!important; height:32px!important; border-radius:10px!important; } } @media(max-width:360px){ body[data-role="parent"] .app-header .header-actions{inset-inline-end:8px!important} body[data-role="parent"] .app-header .app-header-logout{min-width:66px!important;padding-inline:7px!important} body[data-role="parent"] .app-header .page-help-btn:not(.hidden){inset-inline-end:88px!important;width:30px!important;height:30px!important} } /* V1.41.25 final cascade guard */ #lessonSection .lesson-save-bar{display:flex!important;align-items:center!important;gap:9px!important} #lessonSection .lesson-save-actions{display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr)!important;gap:8px!important;flex:1!important} #lessonSection .lesson-save-actions button{width:100%!important;min-height:42px!important;margin:0!important;padding:8px 9px!important;border-radius:11px!important;font-size:9px!important;line-height:1.45!important} #lessonSection .lesson-save-actions .secondary-btn{background:#F3F7FB!important;border:1px solid #CAD8E6!important;color:var(--tp-navy)!important} @media(max-width:420px){#lessonSection .lesson-save-bar{align-items:stretch!important;flex-direction:column!important}#lessonSection .lesson-save-bar>div:first-child{display:none!important}#lessonSection .lesson-save-actions{width:100%!important}} /* V1.42.1 — Excel import parser namespace fix + polished import action */ @media(max-width:620px){#studentsSection #importStudentsBtn{min-width:0!important;padding:7px 8px!important;gap:6px!important;font-size:9.5px!important}#studentsSection #importStudentsBtn .import-students-icon{width:27px!important;height:27px!important;flex-basis:27px!important;border-radius:8px!important}#studentsSection #importStudentsBtn .import-students-icon svg{width:15px!important;height:15px!important}}