/* CenterHub split/mobile fixes - generated from 32.zip as clean base. هدف الملف: تصغير أيقونات الموبايل، منع اختفاء نصوص الأزرار، وتوحيد شكل الصفحات المنفصلة. */ :root{--cdx-mobile-radius:18px} html,body{max-width:100%;overflow-x:hidden!important} body[data-page-tab] .tab-content.hidden{display:none!important} body[data-page-tab] .tab-content[data-split-stub="1"]{display:none!important} .sidebar-link{position:relative}.cd-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:21px;padding:0 7px;border-radius:999px;background:#ef4444;color:#fff;font-size:12px;font-weight:900;margin-inline-start:7px;box-shadow:0 8px 18px rgba(239,68,68,.25);line-height:1}.cd-nav-badge.hidden{display:none!important}.sidebar-link.has-new-requests{box-shadow:0 10px 28px rgba(239,68,68,.14)!important;border-color:#fecaca!important} button,.btn,.btn-primary,.btn-secondary,.btn-success,.btn-warning,.btn-danger,.btn-info,.btn-sm,.mode-btn,.action-btn{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%}button i,.btn i,.btn-primary i,.btn-secondary i,.btn-success i,.btn-warning i,.btn-danger i,.btn-info i,.btn-sm i,.mode-btn i,.action-btn i{flex:0 0 auto!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;margin:0!important;line-height:1!important}.card-header h3,.card-header h2{line-height:1.45!important}.table-responsive{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important} /* جدول الحضور: تضييق الاسم/الكود/الهاتف وتوسيع عمود الحالة */ #tab-attendance #attTableArea table{table-layout:fixed!important;width:100%!important;min-width:760px!important} #tab-attendance #attTableArea table th:nth-child(1),#tab-attendance #attTableArea table td:nth-child(1){width:160px!important;max-width:160px!important;white-space:normal!important;overflow:hidden!important;text-overflow:ellipsis!important} #tab-attendance #attTableArea table th:nth-child(2),#tab-attendance #attTableArea table td:nth-child(2){width:82px!important;max-width:82px!important;text-align:center!important} #tab-attendance #attTableArea table th:nth-child(3),#tab-attendance #attTableArea table td:nth-child(3){width:118px!important;max-width:118px!important;text-align:center!important;font-size:12.5px!important} #tab-attendance #attTableArea table th:nth-child(4),#tab-attendance #attTableArea table td:nth-child(4){width:320px!important;min-width:320px!important;max-width:320px!important;text-align:center!important} #tab-attendance #attTableArea table th:nth-child(5),#tab-attendance #attTableArea table td:nth-child(5){width:82px!important;max-width:82px!important;text-align:center!important} #tab-attendance #attTableArea .cd-att-actions-v3,#tab-attendance #attTableArea .cdx-att-actions-compact{display:grid!important;grid-template-columns:repeat(4,minmax(55px,1fr))!important;gap:6px!important;min-width:285px!important;max-width:310px!important;margin:auto!important}#tab-attendance #attTableArea .cd-att-btn-v3,#tab-attendance #attTableArea .cdx-att-actions-compact button[data-att-status]{height:33px!important;min-height:33px!important;padding:5px 6px!important;border-radius:12px!important;font-size:11.5px!important;white-space:nowrap!important}#tab-attendance #attTableArea .att-wa-btn-v3,#tab-attendance #attTableArea .att-wa-btn{grid-column:1/-1!important;min-height:31px!important} @media(max-width:900px){.sidebar{max-width:calc(100vw - 24px)!important}.main-content{width:100%!important}.container{max-width:100%!important}.cd-form-grid,.form-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}.card-header{gap:9px!important}.card-header i{flex:0 0 auto!important}.modal-content,.modal .modal-content{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:88vh!important;overflow:auto!important}} @media(max-width:760px){ .main-content{padding:72px 9px 18px!important}.container{padding:0!important}.card,.cd-card{padding:14px!important;border-radius:var(--cdx-mobile-radius)!important;margin-bottom:12px!important}.card-header{margin-bottom:12px!important;align-items:flex-start!important}.card-header h3,.card-header h2{font-size:1rem!important;line-height:1.45!important}.card-header i,.card-header .icon{width:32px!important;height:32px!important;min-width:32px!important;border-radius:11px!important;font-size:1rem!important;padding:0!important}.teacher-welcome-strip{padding:13px!important;gap:10px!important;border-radius:var(--cdx-mobile-radius)!important;margin-bottom:12px!important}.teacher-welcome-logo,#teacherWelcomeLogo{width:44px!important;height:44px!important;min-width:44px!important;border-radius:14px!important}.teacher-welcome-title{font-size:1rem!important;line-height:1.35!important}.teacher-welcome-sub,.teacher-pill{font-size:.78rem!important}.stats-grid,.stat-grid,.dashboard-stats{grid-template-columns:1fr!important;gap:10px!important}.stat-card{min-height:auto!important;padding:14px 12px!important;border-radius:var(--cdx-mobile-radius)!important}.stat-card .icon{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;font-size:1.18rem!important}.stat-card .number{font-size:1.45rem!important}.stat-card h4,.stat-card p{font-size:.86rem!important}button,.btn,.btn-primary,.btn-secondary,.btn-success,.btn-warning,.btn-danger,.btn-info,.mode-btn,.action-btn{min-height:39px!important;padding:8px 10px!important;font-size:.82rem!important;border-radius:12px!important}button i,.btn i,.btn-primary i,.btn-secondary i,.btn-success i,.btn-warning i,.btn-danger i,.btn-info i,.mode-btn i,.action-btn i{font-size:.95em!important}.btn-sm{min-height:33px!important;padding:6px 8px!important;font-size:.74rem!important;border-radius:10px!important}input,select,textarea{font-size:16px!important;min-height:39px!important;padding:8px 10px!important;border-radius:12px!important;max-width:100%!important}.sidebar-link{padding:10px 12px!important;font-size:.9rem!important;min-height:43px!important;border-radius:14px!important}.sidebar-link i{width:25px!important;height:25px!important;min-width:25px!important;border-radius:9px!important;font-size:.9rem!important}.user-info{min-height:72px!important;padding:11px!important}.teacher-side-logo,#teacherSideLogo{width:46px!important;height:46px!important;min-width:46px!important;border-radius:15px!important}.sidebar-header img{width:46px!important;height:46px!important;border-radius:15px!important}.sidebar-header h3{font-size:1.05rem!important}.cd-pro-actions,.quick-actions,.action-grid{grid-template-columns:1fr!important;gap:9px!important}.cd-pro-actions button,.quick-actions button,.action-grid button{min-height:auto!important;padding:11px!important;justify-content:flex-start!important}.cd-hero-card{padding:14px!important;border-radius:18px!important;gap:10px!important}.cd-hero-card h2{font-size:1.08rem!important}.cd-hero-icon{width:50px!important;height:50px!important;min-width:50px!important;font-size:1.2rem!important}table{font-size:12px!important}.table-responsive{border-radius:14px!important}#tab-attendance #attTableArea table{min-width:720px!important}#tab-attendance #attTableArea table th:nth-child(1),#tab-attendance #attTableArea table td:nth-child(1){width:145px!important;max-width:145px!important}#tab-attendance #attTableArea table th:nth-child(3),#tab-attendance #attTableArea table td:nth-child(3){width:105px!important;max-width:105px!important}#tab-attendance #attTableArea table th:nth-child(4),#tab-attendance #attTableArea table td:nth-child(4){width:295px!important;min-width:295px!important;max-width:295px!important} } @media(max-width:430px){.main-content{padding-inline:7px!important}.card,.cd-card{padding:12px!important}.card-header h3,.card-header h2{font-size:.94rem!important}.card-header i,.card-header .icon{width:29px!important;height:29px!important;min-width:29px!important;font-size:.9rem!important}.stat-card .icon{width:38px!important;height:38px!important;min-width:38px!important}.stat-card .number{font-size:1.28rem!important}button,.btn,.btn-primary,.btn-secondary,.btn-success,.btn-warning,.btn-danger,.btn-info,.mode-btn,.action-btn{font-size:.76rem!important;padding:7px 8px!important;gap:5px!important}.btn-sm{font-size:.7rem!important}.sidebar{width:calc(100vw - 22px)!important;right:-105vw!important}.sidebar.active{right:11px!important}.teacher-welcome-logo,#teacherWelcomeLogo{width:40px!important;height:40px!important;min-width:40px!important}.teacher-welcome-title{font-size:.92rem!important}.cd-hero-icon{width:44px!important;height:44px!important;min-width:44px!important}.cd-hero-card h2{font-size:1rem!important}} /* ========================================================= إصلاح نهائي للموبايل: تابة الطلاب + الغياب والحضور تاريخ: 2026-06-17 الهدف: منع تكسير النصوص، تحويل الجداول لكروت واضحة، وتصليح أزرار الاستيراد والتصدير. ========================================================= */ @media (max-width: 760px){ /* مساحة الصفحة لا تتأثر بزر القائمة العائم */ .mobile-menu-toggle{ width:56px!important; height:56px!important; border-radius:18px!important; font-size:1.05rem!important; top:68px!important; right:13px!important; } /* ================= صفحة الطلاب ================= */ #tab-students > .card{ overflow:visible!important; } /* نموذج الطالب: كل الحقول صف واحد عمودي مضبوط */ #tab-students .student-form-three-rows .student-form-row{ display:grid!important; grid-template-columns:1fr!important; gap:9px!important; padding:10px!important; } #tab-students input, #tab-students select, #tab-students textarea{ width:100%!important; min-width:0!important; } /* فلتر قائمة الطلاب: صفين منظمين بدل الخنقة */ #tab-students div:has(> #filterGrade), #tab-students div:has(> #filterCenter), #tab-students div:has(> #filterGroup), #tab-students div:has(> #searchStudent){ display:grid!important; grid-template-columns:1fr 1fr!important; gap:9px!important; margin-bottom:14px!important; } #tab-students #searchStudent{ grid-column:1 / -1!important; } /* أزرار الاستيراد والتصدير: 2 في الصف بنص ظاهر */ #tab-students .card:has(button[onclick="exportStudentsToExcel()"]) > div[style*="display: flex"], #tab-students .card:has(button[onclick="importFromExcel()" ]) > div[style*="display: flex"]{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:9px!important; align-items:stretch!important; } #tab-students button[onclick="exportStudentsToExcel()"], #tab-students button[onclick="importFromExcel()"], #tab-students button[onclick="openBackupRestore()"], #tab-students button[onclick="openCardsModal()"], #tab-students button[onclick="openCertificatesModal()"], #tab-students button[onclick="codeAllStudents()"]{ width:100%!important; min-width:0!important; min-height:50px!important; padding:9px 7px!important; font-size:12.5px!important; line-height:1.35!important; white-space:normal!important; text-align:center!important; gap:5px!important; } #tab-students button[onclick="exportStudentsToExcel()"] i, #tab-students button[onclick="importFromExcel()"] i, #tab-students button[onclick="openBackupRestore()"] i, #tab-students button[onclick="openCardsModal()"] i, #tab-students button[onclick="openCertificatesModal()"] i, #tab-students button[onclick="codeAllStudents()"] i{ font-size:14px!important; } /* شريط إجمالي الطلاب والتنقل */ #tab-students div:has(> #totalStudents){ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; justify-items:stretch!important; } #tab-students #totalStudents{ width:100%!important; text-align:center!important; font-size:13px!important; } #tab-students div:has(> #prevBtn){ width:100%!important; display:grid!important; grid-template-columns:1fr auto 1fr!important; gap:8px!important; } #tab-students #prevBtn, #tab-students #nextBtn{ width:100%!important; min-height:42px!important; font-size:13px!important; } /* جدول الطلاب يتحول لكروت موبايل بدل سكرول/تكسير */ #tab-students #stListArea, #tab-students #stListArea.table-responsive{ overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; } #tab-students .students-excel-table{ display:block!important; min-width:0!important; width:100%!important; background:transparent!important; border:0!important; table-layout:auto!important; } #tab-students .students-excel-table thead{display:none!important;} #tab-students .students-excel-table tbody{display:block!important;width:100%!important;} #tab-students .students-excel-table tr{ display:block!important; width:100%!important; margin:0 0 12px!important; padding:10px 12px!important; border:1px solid #dbe4ff!important; border-radius:20px!important; background:#fff!important; box-shadow:0 8px 22px rgba(15,23,42,.055)!important; overflow:hidden!important; } #tab-students .students-excel-table td{ display:grid!important; grid-template-columns:96px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; width:100%!important; min-width:0!important; max-width:none!important; padding:8px 0!important; border:0!important; border-bottom:1px solid #edf2ff!important; background:transparent!important; font-size:13px!important; line-height:1.55!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; text-align:right!important; } #tab-students .students-excel-table td:last-child{border-bottom:0!important;} #tab-students .students-excel-table td::before{ content:attr(data-label)!important; color:#243b84!important; font-weight:900!important; text-align:right!important; min-width:0!important; width:auto!important; white-space:normal!important; line-height:1.5!important; } #tab-students .students-excel-table td[colspan]{ display:block!important; width:100%!important; padding:26px 12px!important; border:0!important; text-align:center!important; color:#64748b!important; font-weight:900!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; } #tab-students .students-excel-table td[colspan]::before{display:none!important;content:""!important;} #tab-students .students-excel-table tr:has(td[colspan]){ padding:0!important; border-style:dashed!important; background:#f8fbff!important; } #tab-students .students-excel-table .student-name-cell{ width:auto!important; max-width:none!important; min-width:0!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; line-height:1.7!important; font-size:15px!important; color:#0f172a!important; } #tab-students .students-excel-table .student-code-badge{ width:max-content!important; max-width:100%!important; min-width:0!important; font-size:13px!important; } #tab-students .students-excel-table .student-actions-cell{ display:grid!important; grid-template-columns:96px 1fr!important; width:100%!important; max-width:none!important; min-width:0!important; white-space:normal!important; } #tab-students .students-excel-table .student-actions-cell .btn-sm{ width:38px!important; height:34px!important; min-height:34px!important; padding:0!important; margin:0 3px!important; } /* ================= صفحة الغياب والحضور ================= */ #tab-attendance #attTableArea, #tab-attendance #attTableArea.table-responsive{ overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; } #tab-attendance #attTableArea table, #tab-attendance #attTableArea .attendance-excel-table, #tab-attendance #attTableArea .cdx-attendance-table{ display:block!important; min-width:0!important; width:100%!important; background:transparent!important; border:0!important; table-layout:auto!important; } #tab-attendance #attTableArea thead{display:none!important;} #tab-attendance #attTableArea tbody{display:block!important;width:100%!important;} #tab-attendance #attTableArea tr.cd-att-row{ display:block!important; width:100%!important; margin:0 0 12px!important; padding:10px 12px!important; border:1px solid #dbe4ff!important; border-radius:20px!important; background:#fff!important; box-shadow:0 8px 22px rgba(15,23,42,.055)!important; overflow:hidden!important; } #tab-attendance #attTableArea tr.cd-att-row td{ display:grid!important; grid-template-columns:90px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; width:100%!important; min-width:0!important; max-width:none!important; padding:8px 0!important; border:0!important; border-bottom:1px solid #edf2ff!important; background:transparent!important; text-align:right!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; line-height:1.6!important; } #tab-attendance #attTableArea tr.cd-att-row td:last-child{border-bottom:0!important;} #tab-attendance #attTableArea tr.cd-att-row td::before{ content:attr(data-label)!important; color:#243b84!important; font-weight:900!important; text-align:right!important; min-width:0!important; width:auto!important; white-space:normal!important; } #tab-attendance #attTableArea .attendance-name-cell{ width:auto!important; max-width:none!important; min-width:0!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; line-height:1.75!important; font-size:15px!important; color:#0f172a!important; } #tab-attendance #attTableArea .attendance-name-cell div{ margin-top:2px!important; font-size:12px!important; color:#64748b!important; } #tab-attendance #attTableArea .attendance-phone-cell{ direction:ltr!important; text-align:right!important; font-size:14px!important; } #tab-attendance #attTableArea tr.cd-att-row td:nth-child(4){ display:block!important; } #tab-attendance #attTableArea tr.cd-att-row td:nth-child(4)::before{ display:block!important; margin:0 0 9px!important; padding-bottom:7px!important; border-bottom:1px dashed #dbe4ff!important; } #tab-attendance #attTableArea .cd-att-actions-v3, #tab-attendance #attTableArea .cdx-att-actions-compact{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; } #tab-attendance #attTableArea .cd-att-btn-v3, #tab-attendance #attTableArea .cdx-att-actions-compact button[data-att-status]{ width:100%!important; min-width:0!important; min-height:38px!important; height:auto!important; padding:8px 6px!important; font-size:12px!important; border-radius:12px!important; white-space:normal!important; } #tab-attendance #attTableArea .att-wa-btn-v3, #tab-attendance #attTableArea .att-wa-btn{ grid-column:1 / -1!important; width:100%!important; min-height:38px!important; margin:0!important; border-radius:12px!important; font-size:13px!important; } #tab-attendance #attTableArea .student-status-badge{ width:max-content!important; max-width:100%!important; min-width:66px!important; justify-self:start!important; padding:7px 12px!important; font-size:13px!important; } #tab-attendance #attActions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } #tab-attendance #attActions.hidden{display:none!important;} #tab-attendance #attActions button{ width:100%!important; min-height:44px!important; font-size:12.5px!important; } } @media (max-width: 390px){ #tab-students .students-excel-table td, #tab-attendance #attTableArea tr.cd-att-row td{ grid-template-columns:82px minmax(0,1fr)!important; gap:8px!important; font-size:12.5px!important; } #tab-students .students-excel-table .student-actions-cell{grid-template-columns:82px 1fr!important;} #tab-students .card:has(button[onclick="exportStudentsToExcel()"]) > div[style*="display: flex"]{ grid-template-columns:1fr 1fr!important; } #tab-students button[onclick="exportStudentsToExcel()"], #tab-students button[onclick="importFromExcel()"], #tab-students button[onclick="openBackupRestore()"], #tab-students button[onclick="openCardsModal()"], #tab-students button[onclick="openCertificatesModal()"], #tab-students button[onclick="codeAllStudents()"]{ font-size:11.5px!important; } }