/* ============================================
   Theme Overrides for Learning Styles Page
   تحسينات بصرية شاملة مع الالتزام بالهوية الموحدة
   تم التحديث: 2026-01-01
   ============================================ */

/* ========================================
   0. إصلاح Body و Header بشكل إجباري
   ======================================== */

/* إصلاح خلفية Body */
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 45%, var(--bg-tertiary) 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    line-height: 1.7 !important;
}

/* إصلاح الهيدر */
.header {
    background: linear-gradient(135deg, var(--surface-elevated), var(--surface)) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 32px 24px 48px !important;
}

.header h1 {
    background: linear-gradient(120deg, var(--primary), var(--secondary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}

.header p {
    color: var(--text-secondary) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
}

/* تحسين شعار المدرسة */
.school-logo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    box-shadow: var(--shadow-md) !important;
    border: 2px solid var(--border) !important;
    transition: all 0.3s ease !important;
}

.school-logo:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ========================================
   1. إصلاح الألوان الثابتة - الأولوية القصوى
   ======================================== */

/* إصلاح نصوص بيضاء في الوضع الفاتح (ما عدا الأزرار) */
body.light-theme [style*="color: #fff"]:not(button):not(.btn):not([class*="button"]),
body.light-theme [style*="color: white"]:not(button):not(.btn):not([class*="button"]),
body.light-theme [style*="color: #ffffff"]:not(button):not(.btn):not([class*="button"]),
body.light-theme [style*="color: rgba(255,255,255"]:not(button):not(.btn):not([class*="button"]) {
    color: var(--text-primary) !important;
}

/* إصلاح نصوص داكنة في الوضع الداكن */
body:not(.light-theme) [style*="color: #000"]:not(button),
body:not(.light-theme) [style*="color: black"]:not(button),
body:not(.light-theme) [style*="color: #2c3e50"]:not(button) {
    color: var(--text-primary) !important;
}

/* إصلاح خلفيات ثابتة بيضاء */
[style*="background: white"],
[style*="background:white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
    background: var(--surface) !important;
}

/* إصلاح خلفيات داكنة في الوضع الفاتح */
body.light-theme [style*="background: rgba(0,"],
body.light-theme [style*="background: rgb(0,"] {
    background: var(--surface) !important;
}

/* الأزرار تبقى بيضاء دائماً */
button,
button *,
.btn,
.btn *,
.refresh-btn,
.refresh-btn *,
.action-button,
.action-button *,
thead th,
thead th * {
    color: white !important;
}

/* ألوان أنماط التعلم تبقى كما هي */
.visual-strong { color: var(--style-visual-strong) !important; }
.auditory-strong { color: var(--style-auditory-strong) !important; }
.kinesthetic-strong { color: var(--style-kinesthetic-strong) !important; }
.reading-strong { color: var(--style-reading-strong) !important; }

/* ========================================
   2. تحسين البطاقات والإحصائيات
   ======================================== */

/* البطاقات الرئيسية */
.info-card,
.result-card,
.analysis-card,
.recommendation-card,
.learning-style-card,
.statistics-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
}

.info-card:hover,
.result-card:hover,
.analysis-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
    border-color: var(--accent) !important;
}

/* بطاقات الإحصائيات */
.stat-card {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
    background: var(--surface-hover) !important;
}

.stat-card .stat-label {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.stat-card .stat-number {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* بطاقات الطلاب */
.student-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.student-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
    border-color: var(--accent) !important;
}

.student-card h3 {
    color: var(--text-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.student-card p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* ========================================
   3. تحسين الأزرار
   ======================================== */

/* الزر الرئيسي (تحديث البيانات) */
.refresh-btn,
.action-btn,
.primary-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.refresh-btn:hover,
.action-btn:hover,
.primary-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
    filter: brightness(1.1) !important;
}

.refresh-btn:active,
.action-btn:active,
.primary-btn:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

.refresh-btn i,
.action-btn i,
.primary-btn i {
    color: white !important;
    font-size: 1.2rem !important;
}

/* الأزرار الثانوية */
.secondary-btn,
.outline-btn {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.secondary-btn:hover,
.outline-btn:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   4. تحسين النصوص والتسلسل البصري
   ======================================== */

/* العناوين الرئيسية */
h1, h2 {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}

h1 {
    font-size: 2.5rem !important;
    margin-bottom: 16px !important;
}

h2 {
    font-size: 2rem !important;
    margin-bottom: 14px !important;
}

/* العناوين الفرعية */
h3, h4 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

h3 {
    font-size: 1.5rem !important;
    margin-bottom: 12px !important;
}

h4 {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
}

/* النصوص العادية */
p, span:not(.material-icons):not(.fa):not(.fas):not(.far), div {
    color: var(--text-primary) !important;
    line-height: 1.7 !important;
    font-size: 1rem !important;
}

/* النصوص الثانوية */
.subtitle,
.description,
.hint,
small {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* النصوص الباهتة */
.muted,
.note {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

/* تحسين القوائم */
ul, ol {
    color: var(--text-primary) !important;
    line-height: 1.8 !important;
    padding-right: 24px !important;
}

li {
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
}

/* تحسين الروابط */
a {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--secondary) !important;
    text-decoration: underline !important;
}

/* ========================================
   5. تحسين عناصر النماذج والإدخال
   ======================================== */

/* حقول الإدخال */
input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.3s ease !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(32, 163, 159, 0.1) !important;
    background: var(--surface) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

/* Labels */
label {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* تحسين Checkboxes و Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--border) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    border-color: var(--accent) !important;
}

/* ========================================
   6. Buttons with Fixed Colors
   ======================================== */

.refresh-btn {
    background: linear-gradient(135deg, var(--secondary), var(--accent)) !important;
    border-color: var(--border) !important;
    color: white !important;
}

.refresh-btn:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 15px 35px var(--shadow-color) !important;
}

.refresh-btn.loading {
    background: linear-gradient(135deg, var(--text-secondary), var(--surface-strong)) !important;
}

/* All action buttons */
.action-button,
.style-btn,
.submit-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    border-color: var(--border) !important;
    color: white !important;
}

.action-button:hover,
.style-btn:hover,
.submit-btn:hover {
    box-shadow: 0 8px 20px var(--shadow-color) !important;
}

/* ========================================
   7. Form Inputs and Controls
   ======================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="file"],
select,
textarea {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--chip-bg) !important;
}

/* ========================================
   8. Tables
   ======================================== */

table {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

thead {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
}

thead th {
    color: white !important;
    border-color: var(--border) !important;
}

tbody tr {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

tbody tr:nth-child(even) {
    background: var(--surface-elevated) !important;
}

tbody tr:hover {
    background: var(--surface-hover) !important;
}

tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ========================================
   9. Charts and Visualization
   ======================================== */

.chart-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

.chart-title {
    color: var(--text-primary) !important;
}

.chart-legend {
    color: var(--text-secondary) !important;
}

/* Chart labels */
.chart-label,
.axis-label {
    color: var(--text-primary) !important;
}

/* ========================================
   10. Progress Bars
   ======================================== */

.progress-bar {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border) !important;
}

.progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

/* ========================================
   11. Badges and Tags
   ======================================== */

.badge,
.tag,
.chip {
    background: var(--chip-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* Learning style badges with their specific colors */
.visual-badge {
    background: linear-gradient(135deg, var(--style-visual-strong), var(--style-visual-dark)) !important;
    color: white !important;
}

.auditory-badge {
    background: linear-gradient(135deg, var(--style-auditory-strong), var(--style-auditory-dark)) !important;
    color: white !important;
}

.kinesthetic-badge {
    background: linear-gradient(135deg, var(--style-kinesthetic-strong), var(--style-kinesthetic-dark)) !important;
    color: white !important;
}

.reading-badge {
    background: linear-gradient(135deg, var(--style-reading-strong), var(--style-reading-dark)) !important;
    color: white !important;
}

/* ========================================
   12. Modal Dialogs
   ======================================== */

.modal,
.dialog {
    background: rgba(0, 0, 0, 0.85) !important;
}

.modal-content,
.dialog-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
}

.modal-header {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    border-color: var(--border) !important;
}

.modal-header h2,
.modal-header h3 {
    color: white !important;
}

.modal-body {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
}

/* ========================================
   13. Tooltips and Popovers
   ======================================== */

.tooltip,
.popover {
    background: var(--surface-strong) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}

.tooltip::after,
.popover::after {
    border-color: var(--surface-strong) transparent transparent transparent !important;
}

/* ========================================
   14. Alerts and Notifications
   ======================================== */

.alert,
.notification {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    background: var(--success-bg) !important;
    border-color: var(--success-border) !important;
    color: var(--success-text) !important;
}

.alert-warning {
    background: var(--warning-bg) !important;
    border-color: var(--warning-border) !important;
    color: var(--warning-text) !important;
}

.alert-danger,
.alert-error {
    background: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
    color: var(--danger-text) !important;
}

.alert-info {
    background: var(--info-bg) !important;
    border-color: var(--info-border) !important;
    color: var(--info-text) !important;
}

/* ========================================
   15. Dropdowns and Menus
   ======================================== */

.dropdown,
.dropdown-menu,
.context-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item,
.menu-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.menu-item:hover {
    background: var(--surface-hover) !important;
}

.dropdown-divider {
    border-color: var(--border) !important;
}

/* ========================================
   16. Panels and Sections
   ======================================== */

.panel,
.section,
.container-box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.panel-header,
.section-header {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    border-color: var(--border) !important;
    color: white !important;
}

.panel-body,
.section-body {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.panel-footer,
.section-footer {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
}

/* ========================================
   17. Statistics Cards
   ======================================== */

.stat-card,
.summary-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.stat-card:hover,
.summary-card:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--accent) !important;
}

.stat-value,
.summary-value {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.stat-label,
.summary-label {
    color: var(--text-primary) !important;
}

.stat-icon,
.summary-icon {
    color: var(--accent) !important;
}

/* ========================================
   18. File Upload Area
   ======================================== */

.file-upload-area,
.dropzone {
    background: var(--surface) !important;
    border: 2px dashed var(--border) !important;
    color: var(--text-secondary) !important;
}

.file-upload-area:hover,
.dropzone:hover {
    border-color: var(--accent) !important;
    background: var(--surface-hover) !important;
}

.file-upload-area.active,
.dropzone.active {
    border-color: var(--secondary) !important;
    background: var(--chip-bg) !important;
}

/* ========================================
   19. Result Display Cards
   ======================================== */

.result-item,
.analysis-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

.result-header {
    background: var(--surface-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
}

.result-body {
    background: var(--surface) !important;
}

.result-footer {
    background: var(--surface-elevated) !important;
    border-top: 1px solid var(--border) !important;
}

/* ========================================
   20. Special Effects - Shimmer and Loading
   ======================================== */

.shimmer,
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface) 0%,
        var(--surface-hover) 50%,
        var(--surface) 100%
    ) !important;
}

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* ========================================
   21. Scrollbars (Webkit browsers)
   ======================================== */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--surface-elevated) !important;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent) !important;
    border-radius: 6px;
    border: 2px solid var(--surface-elevated) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary) !important;
}

/* ========================================
   22. Semantic Color Variables
   ======================================== */

:root {
    /* Success colors */
    --success-bg: rgba(46, 204, 113, 0.1);
    --success-border: rgba(46, 204, 113, 0.3);
    --success-text: var(--text-primary);
    
    /* Warning colors */
    --warning-bg: rgba(246, 185, 59, 0.1);
    --warning-border: rgba(246, 185, 59, 0.3);
    --warning-text: var(--text-primary);
    
    /* Danger colors */
    --danger-bg: rgba(231, 76, 60, 0.1);
    --danger-border: rgba(231, 76, 60, 0.3);
    --danger-text: var(--text-primary);
    
    /* Info colors */
    --info-bg: rgba(52, 152, 219, 0.1);
    --info-border: rgba(52, 152, 219, 0.3);
    --info-text: var(--text-primary);
    
    /* Shadow color based on theme */
    --shadow-color: rgba(0, 0, 0, 0.15);
}

body.light-theme {
    /* Success colors for light theme */
    --success-bg: rgba(46, 204, 113, 0.15);
    --success-border: rgba(46, 204, 113, 0.4);
    --success-text: #1e8449;
    
    /* Warning colors for light theme */
    --warning-bg: rgba(246, 185, 59, 0.15);
    --warning-border: rgba(246, 185, 59, 0.4);
    --warning-text: #d35400;
    
    /* Danger colors for light theme */
    --danger-bg: rgba(231, 76, 60, 0.15);
    --danger-border: rgba(231, 76, 60, 0.4);
    --danger-text: #c0392b;
    
    /* Info colors for light theme */
    --info-bg: rgba(52, 152, 219, 0.15);
    --info-border: rgba(52, 152, 219, 0.4);
    --info-text: #2874a6;
    
    /* Shadow color for light theme */
    --shadow-color: rgba(0, 0, 0, 0.08);
}

/* ========================================
   23. Hover and Focus States
   ======================================== */

/* All interactive elements */
button:hover,
.btn:hover,
a:hover {
    filter: brightness(1.1);
}

button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* Remove default outline for mouse users */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   24. Accessibility Improvements
   ======================================== */

/* High contrast for important elements */
.important-text,
.highlight {
    font-weight: 600;
    color: var(--text-primary) !important;
}

/* Focus indicators */
*:focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   25. Fixed Color Overrides - Force Theme Colors
   ======================================== */

/* Fix white text that should use theme colors */
body.light-theme [style*="color: white"],
body.light-theme [style*="color: #fff"],
body.light-theme [style*="color: #ffffff"] {
    color: var(--text-primary) !important;
}

/* Fix dark text in dark mode */
body:not(.light-theme) [style*="color: #2c3e50"],
body:not(.light-theme) [style*="color: #000"],
body:not(.light-theme) [style*="color: black"] {
    color: var(--text-primary) !important;
}

/* Keep button text white always */
button,
.btn,
.refresh-btn,
.action-button,
.style-btn,
[class*="button"] {
    color: white !important;
}

/* Fix backgrounds that are hardcoded */
body.light-theme [style*="background: rgba(0,"],
body.light-theme [style*="background: rgba(0 ,"],
body.light-theme [style*="background: rgb(0,"],
body.light-theme [style*="background: #0"],
body.light-theme [style*="background: #1"],
body.light-theme [style*="background: #2"] {
    background: var(--surface) !important;
}

/* ========================================
   26. Print Styles
   ======================================== */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .no-print,
    .refresh-btn,
    .action-button,
    button {
        display: none !important;
    }
    
    .card,
    .panel,
    .section {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* ========================================
   27. تحسينات إضافية - الرسوم البيانية
   ======================================== */

/* حاويات الرسوم البيانية */
.chart-container,
.charts-section {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 24px !important;
}

.chart-container h3,
.charts-section h3 {
    color: var(--text-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

/* Grid layouts */
.stats-grid,
.charts-grid,
.students-grid {
    display: grid !important;
    gap: 20px !important;
}

/* تحسين Mini Bars */
.mini-bars {
    display: grid !important;
    gap: 12px !important;
}

.mini-bar {
    background: var(--surface-elevated) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
}

.mini-bar:hover {
    background: var(--surface-hover) !important;
    transform: translateX(-3px) !important;
}

.mini-bar-label {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.mini-bar-fill {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
    border-radius: 6px !important;
    height: 8px !important;
    transition: width 0.5s ease !important;
}

/* ========================================
   28. تحسين التباعد والمحاذاة
   ======================================== */

/* Sections */
.data-section,
.stats-overview,
.students-section,
.analysis-section {
    margin-bottom: 32px !important;
}

.section-title {
    color: var(--text-primary) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border) !important;
}

/* Spacing utilities */
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }

.p-1 { padding: 8px !important; }
.p-2 { padding: 16px !important; }
.p-3 { padding: 24px !important; }
.p-4 { padding: 32px !important; }

/* ========================================
   29. تحسين Loading و Modal
   ======================================== */

.loading-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

.loading-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 20px !important;
    padding: 32px !important;
}

.loading-content h3,
.loading-content p {
    color: var(--text-primary) !important;
}

.loading-spinner {
    border: 4px solid var(--surface-elevated) !important;
    border-top-color: var(--secondary) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
}

/* Modal */
.modal {
    background: var(--overlay) !important;
    backdrop-filter: blur(8px) !important;
}

.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-xl) !important;
    padding: 32px !important;
}

.modal-header {
    border-bottom: 2px solid var(--border) !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
}

.modal-footer {
    border-top: 2px solid var(--border) !important;
    padding-top: 16px !important;
    margin-top: 24px !important;
}

/* ========================================
   30. تحسين التحليل التفصيلي للطلاب - Grid System
   3 students per row on desktop, 1 on mobile
   ======================================== */

/* Grid للطلاب - 3 في كل صف */
.students-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    padding: 16px 0 !important;
}

/* Desktop: 3 students per row */
@media (min-width: 1200px) {
    .students-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
    }
}

/* Tablet: 2 students per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .students-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* Mobile: 1 student per row */
@media (max-width: 767px) {
    .students-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Student Card Improvements */
.student-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.student-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.student-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

.student-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.student-info h4 {
    color: var(--text-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
}

.student-info p {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

/* ========================================
   31. تحسين Charts Section - توزيع أنماط التعلم
   Side by side on large screens, stacked on small
   ======================================== */

/* Charts Grid Container */
.charts-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 40px !important;
}

/* Desktop: 2 charts side by side */
@media (min-width: 1024px) {
    .charts-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

/* Tablet: still 2 side by side but smaller gap */
@media (min-width: 768px) and (max-width: 1023px) {
    .charts-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* Mobile: 1 chart per row */
@media (max-width: 767px) {
    .charts-section {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Chart Container Enhancement */
.chart-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
}

.chart-container:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
}

.chart-container h3 {
    color: var(--text-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border) !important;
    text-align: center !important;
}

.chart-container canvas {
    max-height: 350px !important;
    margin: auto !important;
}

/* ========================================
   32. تحسين لوحة المؤشرات الرئيسة - Stats Overview
   3+ cards per row with attractive colors
   ======================================== */

/* Stats Grid - 3 or more per row */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 24px !important;
    padding: 20px 0 !important;
}

/* Desktop: minimum 3 per row */
@media (min-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 28px !important;
    }
}

/* Tablet: 2-3 per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 24px !important;
    }
}

/* Mobile: 1 per row */
@media (max-width: 767px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Stat Card - مستطيلات جذابة بألوان متنوعة */
.stat-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    opacity: 0.8 !important;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ألوان متنوعة وجذابة للكروت */
.stat-card:nth-child(4n+1) {
    background: linear-gradient(135deg, rgba(4, 89, 119, 0.12), rgba(4, 89, 119, 0.05)) !important;
    border-color: rgba(4, 89, 119, 0.3) !important;
}

.stat-card:nth-child(4n+1)::before {
    background: linear-gradient(90deg, #045977, #067994) !important;
}

.stat-card:nth-child(4n+2) {
    background: linear-gradient(135deg, rgba(7, 155, 144, 0.12), rgba(7, 155, 144, 0.05)) !important;
    border-color: rgba(7, 155, 144, 0.3) !important;
}

.stat-card:nth-child(4n+2)::before {
    background: linear-gradient(90deg, #079b90, #09c2b3) !important;
}

.stat-card:nth-child(4n+3) {
    background: linear-gradient(135deg, rgba(32, 163, 159, 0.12), rgba(32, 163, 159, 0.05)) !important;
    border-color: rgba(32, 163, 159, 0.3) !important;
}

.stat-card:nth-child(4n+3)::before {
    background: linear-gradient(90deg, #20a39f, #2dc9c3) !important;
}

.stat-card:nth-child(4n+4) {
    background: linear-gradient(135deg, rgba(9, 121, 105, 0.12), rgba(9, 121, 105, 0.05)) !important;
    border-color: rgba(9, 121, 105, 0.3) !important;
}

.stat-card:nth-child(4n+4)::before {
    background: linear-gradient(90deg, #097969, #0b9c88) !important;
}

/* Light Mode Adjustments for Stats */
body.light-theme .stat-card:nth-child(4n+1) {
    background: linear-gradient(135deg, rgba(4, 89, 119, 0.08), rgba(4, 89, 119, 0.03)) !important;
}

body.light-theme .stat-card:nth-child(4n+2) {
    background: linear-gradient(135deg, rgba(7, 155, 144, 0.08), rgba(7, 155, 144, 0.03)) !important;
}

body.light-theme .stat-card:nth-child(4n+3) {
    background: linear-gradient(135deg, rgba(32, 163, 159, 0.08), rgba(32, 163, 159, 0.03)) !important;
}

body.light-theme .stat-card:nth-child(4n+4) {
    background: linear-gradient(135deg, rgba(9, 121, 105, 0.08), rgba(9, 121, 105, 0.03)) !important;
}

/* Stat Number and Label */
.stat-number {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.stat-label {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* Icon في الكرت */
.stat-card i,
.stat-label i {
    font-size: 1.3em !important;
    margin-left: 8px !important;
    opacity: 0.85 !important;
}

/* Wide stat card option */
.stat-card--wide {
    grid-column: span 2 !important;
}

@media (max-width: 767px) {
    .stat-card--wide {
        grid-column: span 1 !important;
    }
}

/* Special styling for main stat card */
.stat-card.main-stat {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border: none !important;
    color: white !important;
}

.stat-card.main-stat .stat-number {
    color: white !important;
    font-size: 3.5rem !important;
    text-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

.stat-card.main-stat .stat-label {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.15rem !important;
}

.stat-card.main-stat::before {
    background: rgba(255, 255, 255, 0.2) !important;
    height: 6px !important;
}

/* ========================================
   33. تحسين عرض أنماط التعلم داخل بطاقة الطالب
   Enhanced Learning Styles Display - Full Card Design
   ======================================== */

/* تعريف ألوان أنماط التعلم */
:root {
    --visual-color: #e74c3c;        /* أحمر للبصري */
    --visual-light: #ec7063;
    --visual-dark: #c0392b;
    --visual-bg: rgba(231, 76, 60, 0.15);
    
    --auditory-color: #3498db;       /* أزرق للسمعي */
    --auditory-light: #5dade2;
    --auditory-dark: #2980b9;
    --auditory-bg: rgba(52, 152, 219, 0.15);
    
    --kinesthetic-color: #f39c12;    /* برتقالي للحركي */
    --kinesthetic-light: #f5b041;
    --kinesthetic-dark: #e67e22;
    --kinesthetic-bg: rgba(243, 156, 18, 0.15);
    
    --reading-color: #27ae60;        /* أخضر للقرائي */
    --reading-light: #52be80;
    --reading-dark: #229954;
    --reading-bg: rgba(39, 174, 96, 0.15);
}

/* ========================================
   بطاقة الطالب - تصميم كامل بلون النمط السائد
   ======================================== */

/* البطاقة الأساسية */
.student-card {
    background: var(--surface) !important;
    border: 2px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    transition: all 0.4s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Header البطاقة - بلون النمط السائد */
.student-card-header,
.student-header,
.student-card > div:first-child {
    padding: 24px !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Content البطاقة */
.student-card-content,
.student-card > div:last-child {
    padding: 20px 24px !important;
    background: var(--surface) !important;
    flex: 1 !important;
}

/* اسم الطالب */
.student-card h3,
.student-card h4,
.student-name {
    color: white !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* معلومات الطالب (الشعبة، إلخ) */
.student-class,
.student-section,
.student-info p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* أيقونة/صورة الطالب */
.student-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    flex-shrink: 0 !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================
   ألوان البطاقات حسب النمط السائد
   ======================================== */

/* البطاقة البصرية */
.student-card.visual .student-card-header,
.student-card.visual .student-header,
.student-card[data-dominant="visual"] > div:first-child {
    background: linear-gradient(135deg, var(--visual-color) 0%, var(--visual-dark) 100%) !important;
}

.student-card.visual {
    background: var(--visual-bg) !important;
    border-color: var(--visual-color) !important;
    box-shadow: 0 8px 24px rgba(231, 76, 60, 0.25) !important;
}

.student-card.visual:hover {
    box-shadow: 0 12px 32px rgba(231, 76, 60, 0.35) !important;
    border-color: var(--visual-light) !important;
}

.student-card.visual .student-card-content,
.student-card.visual > div:last-child {
    background: var(--visual-bg) !important;
}

/* البطاقة السمعية */
.student-card.auditory .student-card-header,
.student-card.auditory .student-header,
.student-card[data-dominant="auditory"] > div:first-child {
    background: linear-gradient(135deg, var(--auditory-color) 0%, var(--auditory-dark) 100%) !important;
}

.student-card.auditory {
    background: var(--auditory-bg) !important;
    border-color: var(--auditory-color) !important;
    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.25) !important;
}

.student-card.auditory:hover {
    box-shadow: 0 12px 32px rgba(52, 152, 219, 0.35) !important;
    border-color: var(--auditory-light) !important;
}

.student-card.auditory .student-card-content,
.student-card.auditory > div:last-child {
    background: var(--auditory-bg) !important;
}

/* البطاقة الحركية */
.student-card.kinesthetic .student-card-header,
.student-card.kinesthetic .student-header,
.student-card[data-dominant="kinesthetic"] > div:first-child {
    background: linear-gradient(135deg, var(--kinesthetic-color) 0%, var(--kinesthetic-dark) 100%) !important;
}

.student-card.kinesthetic {
    background: var(--kinesthetic-bg) !important;
    border-color: var(--kinesthetic-color) !important;
    box-shadow: 0 8px 24px rgba(243, 156, 18, 0.25) !important;
}

.student-card.kinesthetic:hover {
    box-shadow: 0 12px 32px rgba(243, 156, 18, 0.35) !important;
    border-color: var(--kinesthetic-light) !important;
}

.student-card.kinesthetic .student-card-content,
.student-card.kinesthetic > div:last-child {
    background: var(--kinesthetic-bg) !important;
}

/* البطاقة القرائية */
.student-card.reading .student-card-header,
.student-card.reading .student-header,
.student-card[data-dominant="reading"] > div:first-child {
    background: linear-gradient(135deg, var(--reading-color) 0%, var(--reading-dark) 100%) !important;
}

.student-card.reading {
    background: var(--reading-bg) !important;
    border-color: var(--reading-color) !important;
    box-shadow: 0 8px 24px rgba(39, 174, 96, 0.25) !important;
}

.student-card.reading:hover {
    box-shadow: 0 12px 32px rgba(39, 174, 96, 0.35) !important;
    border-color: var(--reading-light) !important;
}

.student-card.reading .student-card-content,
.student-card.reading > div:last-child {
    background: var(--reading-bg) !important;
}

/* ========================================
   عرض النسب - شريط أفقي في الأسفل
   ======================================== */

/* Container للشريط */
.learning-styles-bar,
.styles-breakdown-bar,
.student-percentages-bar {
    display: flex !important;
    height: 8px !important;
    width: 100% !important;
    border-radius: 0 0 18px 18px !important;
    overflow: hidden !important;
    margin-top: 16px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* كل قسم من الشريط */
.style-segment,
.percentage-segment {
    height: 100% !important;
    transition: all 0.6s ease !important;
    position: relative !important;
}

.style-segment:hover,
.percentage-segment:hover {
    filter: brightness(1.15) !important;
    transform: scaleY(1.5) !important;
    z-index: 10 !important;
}

.style-segment.visual,
.percentage-segment[data-style="visual"] {
    background: var(--visual-color) !important;
}

.style-segment.auditory,
.percentage-segment[data-style="auditory"] {
    background: var(--auditory-color) !important;
}

.style-segment.kinesthetic,
.percentage-segment[data-style="kinesthetic"] {
    background: var(--kinesthetic-color) !important;
}

.style-segment.reading,
.percentage-segment[data-style="reading"] {
    background: var(--reading-color) !important;
}

/* ========================================
   عرض النسب - نقاط دائرية ملونة في صفين
   ======================================== */

/* Container للنقاط */
.learning-styles-dots,
.styles-dots-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
    margin-top: 16px !important;
    padding: 16px !important;
    background: var(--surface-elevated) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
}

/* كل نقطة داخل إطار خاص */
.style-dot,
.percentage-dot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 12px !important;
    background: var(--surface) !important;
    border-radius: 12px !important;
    border: 2px solid var(--border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.style-dot:hover,
.percentage-dot:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--dot-color) !important;
}

/* الدائرة نفسها */
.dot-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    border: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.dot-circle::before {
    content: '' !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    padding: 3px !important;
    background: conic-gradient(
        var(--dot-color) 0deg,
        var(--dot-color) calc(var(--percentage) * 3.6deg),
        transparent calc(var(--percentage) * 3.6deg)
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0.4 !important;
}

.style-dot.visual .dot-circle,
.percentage-dot[data-style="visual"] .dot-circle {
    background: linear-gradient(135deg, var(--visual-color), var(--visual-dark)) !important;
    --dot-color: var(--visual-color) !important;
}

.style-dot.visual,
.percentage-dot[data-style="visual"] {
    background: var(--visual-bg) !important;
}

.style-dot.visual:hover,
.percentage-dot[data-style="visual"]:hover {
    border-color: var(--visual-color) !important;
    background: var(--visual-bg) !important;
}

.style-dot.auditory .dot-circle,
.percentage-dot[data-style="auditory"] .dot-circle {
    background: linear-gradient(135deg, var(--auditory-color), var(--auditory-dark)) !important;
    --dot-color: var(--auditory-color) !important;
}

.style-dot.auditory,
.percentage-dot[data-style="auditory"] {
    background: var(--auditory-bg) !important;
}

.style-dot.auditory:hover,
.percentage-dot[data-style="auditory"]:hover {
    border-color: var(--auditory-color) !important;
    background: var(--auditory-bg) !important;
}

.style-dot.kinesthetic .dot-circle,
.percentage-dot[data-style="kinesthetic"] .dot-circle {
    background: linear-gradient(135deg, var(--kinesthetic-color), var(--kinesthetic-dark)) !important;
    --dot-color: var(--kinesthetic-color) !important;
}

.style-dot.kinesthetic,
.percentage-dot[data-style="kinesthetic"] {
    background: var(--kinesthetic-bg) !important;
}

.style-dot.kinesthetic:hover,
.percentage-dot[data-style="kinesthetic"]:hover {
    border-color: var(--kinesthetic-color) !important;
    background: var(--kinesthetic-bg) !important;
}

.style-dot.reading .dot-circle,
.percentage-dot[data-style="reading"] .dot-circle {
    background: linear-gradient(135deg, var(--reading-color), var(--reading-dark)) !important;
    --dot-color: var(--reading-color) !important;
}

.style-dot.reading,
.percentage-dot[data-style="reading"] {
    background: var(--reading-bg) !important;
}

.style-dot.reading:hover,
.percentage-dot[data-style="reading"]:hover {
    border-color: var(--reading-color) !important;
    background: var(--reading-bg) !important;
}

/* اسم النمط تحت الدائرة */
.dot-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Tooltip للنسبة */
.dot-circle[data-percentage]::after {
    content: attr(data-percentage) !important;
    position: absolute !important;
    top: -32px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: transform 0.3s ease !important;
    z-index: 100 !important;
}

.style-dot:hover .dot-circle[data-percentage]::after,
.percentage-dot:hover .dot-circle[data-percentage]::after {
    transform: translateX(-50%) scale(1) !important;
}

/* ========================================
   شارة النمط السائد
   ======================================== */

.dominant-badge,
.primary-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    color: white !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
}

.dominant-badge i,
.primary-badge i {
    font-size: 1.1em !important;
}

/* ========================================
   أيقونات الأنماط
   ======================================== */

.style-icon {
    font-size: 1.8rem !important;
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    transform: translateY(-50%) !important;
    opacity: 0.2 !important;
    color: white !important;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 767px) {
    .learning-styles-dots,
    .styles-dots-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .style-dot,
    .percentage-dot {
        padding: 10px !important;
    }
    
    .dot-circle {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }
    
    .dot-label {
        font-size: 0.75rem !important;
    }
    
    .student-card-header,
    .student-header,
    .student-card > div:first-child {
        padding: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .learning-styles-dots,
    .styles-dots-container {
        gap: 16px 12px !important;
    }
}

/* ========================================
   END OF THEME OVERRIDES
   ======================================== */