/* TLS Variables */
:root {
    --tls-text: #1f2937;
    --tls-text-muted: #6b7280;
    --tls-surface: #ffffff;
    --tls-border: #e5e7eb;
}
.dark {
    --tls-text: #f3f4f6;
    --tls-text-muted: #9ca3af;
    --tls-surface: #1f2937;
    --tls-border: #374151;
}

/* TLS Variables */
:root {
    --tls-text: #1f2937;
    --tls-text-muted: #6b7280;
    --tls-surface: #ffffff;
    --tls-border: #e5e7eb;
}
.dark {
    --tls-text: #f3f4f6;
    --tls-text-muted: #9ca3af;
    --tls-surface: #1f2937;
    --tls-border: #374151;
}

/**
 * TLS ERP - Unified Theme System V2
 */

/* ═══════════════════════════════════════════════════════════ */
/* TOPBAR                                                      */
/* ═══════════════════════════════════════════════════════════ */
.fi-topbar {
    background: var(--tls-primary) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}
.dark .fi-topbar {
    background: var(--tls-primary-dark) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
.fi-topbar nav { background: transparent !important; }

/* اللوجو */
.fi-topbar .fi-logo img {
    filter: brightness(0) invert(1) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* TOPBAR TEXT - أبيض فقط للعناصر المباشرة                     */
/* ═══════════════════════════════════════════════════════════ */
/* النص في topbar فقط - ليس في dropdown */
.fi-topbar > nav > div > div:first-child,
.fi-topbar > nav > div > div:first-child span,
.fi-topbar > nav > div > div:first-child a,
.fi-topbar .fi-logo,
.fi-topbar .fi-logo span {
    color: #ffffff !important;
}

/* أيقونات الـ topbar */
.fi-topbar .fi-icon-btn {
    color: #ffffff !important;
}
.fi-topbar .fi-icon-btn svg {
    color: #ffffff !important;
}
.fi-topbar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* DROPDOWN - ألوان طبيعية متكيفة مع الثيم                     */
/* ═══════════════════════════════════════════════════════════ */
.fi-dropdown-panel {
    background: var(--tls-surface, #ffffff) !important;
    border: 1px solid var(--tls-border, #e5e7eb) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}
.fi-dropdown-list-item-button {
    color: var(--tls-text, #374151) !important;
}
.fi-dropdown-list-item-button span {
    color: var(--tls-text, #374151) !important;
}
.fi-dropdown-list-item-button svg {
    color: var(--tls-text-muted, #6b7280) !important;
}
.fi-dropdown-list-item-button:hover {
    background: var(--tls-surface-hover, #f3f4f6) !important;
}
.fi-dropdown-header-label {
    color: var(--tls-text, #1f2937) !important;
}

/* Dark dropdown */
.dark .fi-dropdown-panel {
    background: var(--tls-surface, #242220) !important;
    border-color: var(--tls-border, #3d3835) !important;
}
.dark .fi-dropdown-list-item-button,
.dark .fi-dropdown-list-item-button span {
    color: var(--tls-text, #f1f5f9) !important;
}
.dark .fi-dropdown-list-item-button svg {
    color: var(--tls-text-muted, #94a3b8) !important;
}
.dark .fi-dropdown-list-item-button:hover {
    background: var(--tls-surface-hover, #2e2a27) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SIDEBAR                                                     */
/* ═══════════════════════════════════════════════════════════ */
.fi-sidebar {
    background: var(--tls-surface) !important;
    border-left: 1px solid var(--tls-border) !important;
}
.fi-sidebar-header {
    background: var(--tls-primary) !important;
    padding: 16px !important;
}
.dark .fi-sidebar-header {
    background: var(--tls-primary-dark) !important;
}
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar-header p { 
    color: #ffffff !important; 
}
.fi-sidebar-header img { 
    filter: brightness(0) invert(1); 
}

/* عناصر القائمة الجانبية - ألوان متكيفة */
.fi-sidebar-item-button {
    color: var(--tls-text-muted) !important;
    margin: 2px 8px !important;
    border-radius: var(--tls-radius-sm, 8px) !important;
}
.fi-sidebar-item-button span {
    color: inherit !important;
}
.fi-sidebar-item-button:hover {
    background: var(--tls-primary-lighter) !important;
    color: var(--tls-primary) !important;
}
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--tls-primary-light) !important;
    color: var(--tls-primary) !important;
    border-right: 4px solid var(--tls-primary) !important;
    font-weight: 600 !important;
}
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--tls-primary) !important;
}

/* عناوين الأقسام في sidebar */
.fi-sidebar-group-label {
    color: var(--tls-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* BODY                                                        */
/* ═══════════════════════════════════════════════════════════ */
body, .fi-body {
    background: var(--tls-bg) !important;
    color: var(--tls-text) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* CARDS & WIDGETS - ألوان متكيفة                              */
/* ═══════════════════════════════════════════════════════════ */
.fi-section,
.fi-widget,
.fi-wi-stats-overview-stat {
    background: var(--tls-surface) !important;
    border-color: var(--tls-border) !important;
    color: var(--tls-text) !important;
}

/* النصوص داخل الكروت */
.fi-section *:not(.fi-btn):not(.fi-badge):not([class*="bg-"]),
.fi-widget *:not(.fi-btn):not(.fi-badge):not([class*="bg-"]) {
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════ */
/* TABLES                                                      */
/* ═══════════════════════════════════════════════════════════ */
.fi-ta-table {
    background: var(--tls-surface) !important;
}
.fi-ta-row {
    color: var(--tls-text) !important;
}
.fi-ta-row:hover {
    background: var(--tls-surface-hover) !important;
}
.fi-ta-cell {
    color: var(--tls-text) !important;
}
.fi-ta-header-cell {
    color: var(--tls-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FORMS                                                       */
/* ═══════════════════════════════════════════════════════════ */
input, select, textarea {
    background: var(--tls-surface) !important;
    border-color: var(--tls-border) !important;
    color: var(--tls-text) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--tls-primary) !important;
}

/* Labels */
label {
    color: var(--tls-text) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* BUTTONS                                                     */
/* ═══════════════════════════════════════════════════════════ */
.fi-btn-primary {
    background: var(--tls-primary) !important;
    color: #ffffff !important;
}
.fi-btn-primary:hover {
    background: var(--tls-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* MODALS                                                      */
/* ═══════════════════════════════════════════════════════════ */
.fi-modal {
    background: var(--tls-surface) !important;
    border-color: var(--tls-border) !important;
    color: var(--tls-text) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* TEXT COLORS - تصحيح للألوان المتكيفة                        */
/* ═══════════════════════════════════════════════════════════ */
.text-gray-900,
.text-gray-800,
.text-gray-700 {
    color: var(--tls-text) !important;
}
.text-gray-600,
.text-gray-500,
.text-gray-400 {
    color: var(--tls-text-muted) !important;
}

/* استثناء topbar */
.fi-topbar > nav .text-gray-900,
.fi-topbar > nav .text-gray-800,
.fi-topbar > nav .text-gray-700,
.fi-topbar > nav .text-gray-600,
.fi-topbar > nav .text-gray-500 {
    color: #ffffff !important;
}

/* استثناء dropdown */
.fi-dropdown-panel .text-gray-900,
.fi-dropdown-panel .text-gray-800,
.fi-dropdown-panel .text-gray-700 {
    color: var(--tls-text) !important;
}
.fi-dropdown-panel .text-gray-600,
.fi-dropdown-panel .text-gray-500,
.fi-dropdown-panel .text-gray-400 {
    color: var(--tls-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* UTILITY                                                     */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --tls-transition: 0.2s ease-out;
}
.fi-section,
.fi-widget,
.fi-card,
.fi-modal,
.fi-dropdown-panel {
    border-radius: var(--tls-radius, 12px) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* TOPBAR NOTIFICATIONS ICON - أيقونة الجرس بيضاء              */
/* ═══════════════════════════════════════════════════════════ */
.fi-topbar [class*="notification"],
.fi-topbar [class*="notification"] svg,
.fi-topbar button[class*="notification"],
.fi-topbar .fi-dropdown-trigger,
.fi-topbar .fi-dropdown-trigger svg,
.fi-topbar a svg,
.fi-topbar button svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Badge الإشعارات */
.fi-topbar [class*="badge"] {
    background: #ffffff !important;
    color: var(--tls-primary) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* TOPBAR ICONS HOVER EFFECTS - تأثيرات احترافية               */
/* ═══════════════════════════════════════════════════════════ */

/* إزالة القواعد السابقة وإعادة كتابتها بشكل أفضل */
.fi-topbar .fi-icon-btn,
.fi-topbar button:not(.fi-dropdown-list-item-button) {
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    border-radius: 0.5rem !important;
    position: relative;
}

.fi-topbar .fi-icon-btn svg,
.fi-topbar button:not(.fi-dropdown-list-item-button) svg {
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* Hover Effect - تأثير عند مرور الماوس */
.fi-topbar .fi-icon-btn:hover,
.fi-topbar button:not(.fi-dropdown-list-item-button):hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

.fi-topbar .fi-icon-btn:hover svg,
.fi-topbar button:not(.fi-dropdown-list-item-button):hover svg {
    color: var(--tls-primary-light, #fef7ed) !important;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5)) !important;
}

/* Active/Focus Effect */
.fi-topbar .fi-icon-btn:active,
.fi-topbar button:not(.fi-dropdown-list-item-button):active {
    transform: scale(0.95) !important;
}

/* Badge الإشعارات مع pulse animation */
.fi-topbar [class*="badge"],
.fi-topbar .fi-badge {
    background: #ffffff !important;
    color: var(--tls-primary-dark, #c98a2a) !important;
    font-weight: 700 !important;
    animation: badge-pulse 2s infinite !important;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); }
}

/* Ring effect عند الـ Focus */
.fi-topbar .fi-icon-btn:focus,
.fi-topbar button:not(.fi-dropdown-list-item-button):focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* PRIMARY ACTION BUTTONS ONLY - أزرار الإجراء الرئيسية فقط    */
/* ═══════════════════════════════════════════════════════════ */

/* زر إنشاء جديد في الـ Header */
.fi-header-actions > .fi-ac-action > button.fi-btn,
.fi-page-header-actions > .fi-ac-action > button.fi-btn {
    background: var(--tls-primary) !important;
    border-color: var(--tls-primary) !important;
    color: #ffffff !important;
}

.fi-header-actions > .fi-ac-action > button.fi-btn:hover,
.fi-page-header-actions > .fi-ac-action > button.fi-btn:hover {
    background: var(--tls-primary-dark) !important;
    border-color: var(--tls-primary-dark) !important;
}

/* زر Submit في Forms */
button[type="submit"].fi-btn.fi-btn-color-primary {
    background: var(--tls-primary) !important;
    border-color: var(--tls-primary) !important;
    color: #ffffff !important;
}

button[type="submit"].fi-btn.fi-btn-color-primary:hover {
    background: var(--tls-primary-dark) !important;
}

/* أزرار Modal الرئيسية */
.fi-modal-footer-actions .fi-btn.fi-btn-color-primary {
    background: var(--tls-primary) !important;
    border-color: var(--tls-primary) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FILAMENT ACTION BUTTONS - جميع أزرار الإجراءات              */
/* ═══════════════════════════════════════════════════════════ */

/* أزرار Header الرئيسية */
.fi-header-actions .fi-btn,
.fi-ac-action .fi-btn,
[class*="header-actions"] .fi-btn,
.fi-page-header-actions .fi-btn {
    background: var(--tls-primary) !important;
    border-color: var(--tls-primary) !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.fi-header-actions .fi-btn:hover,
.fi-ac-action .fi-btn:hover,
[class*="header-actions"] .fi-btn:hover,
.fi-page-header-actions .fi-btn:hover {
    background: var(--tls-primary-dark) !important;
    border-color: var(--tls-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--tls-primary-rgb), 0.25) !important;
}

/* أزرار color primary */
.fi-btn.fi-color-primary,
.fi-btn[wire\:loading\.attr="disabled"].fi-color-primary,
button.fi-btn.fi-color-primary {
    background: var(--tls-primary) !important;
    border-color: var(--tls-primary) !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--tls-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEMANTIC COLORS - ألوان ثابتة للحالات                       */
/* ═══════════════════════════════════════════════════════════ */
:root {
    /* Success - أخضر */
    --tls-success: #10b981;
    --tls-success-light: #d1fae5;
    --tls-success-dark: #065f46;
    
    /* Danger - أحمر */
    --tls-danger: #dc2626;
    --tls-danger-light: #fee2e2;
    --tls-danger-dark: #991b1b;
    
    /* Warning - برتقالي */
    --tls-warning: #f59e0b;
    --tls-warning-light: #fef3c7;
    --tls-warning-dark: #92400e;
    
    /* Info - سماوي */
    --tls-info: #0891b2;
    --tls-info-light: #cffafe;
    --tls-info-dark: #155e75;
}

/* Dark Mode - تعديل طفيف للألوان */
.dark {
    --tls-success: #34d399;
    --tls-success-light: rgba(16, 185, 129, 0.2);
    --tls-success-dark: #6ee7b7;
    
    --tls-danger: #f87171;
    --tls-danger-light: rgba(220, 38, 38, 0.2);
    --tls-danger-dark: #fca5a5;
    
    --tls-warning: #fbbf24;
    --tls-warning-light: rgba(245, 158, 11, 0.2);
    --tls-warning-dark: #fcd34d;
    
    --tls-info: #22d3ee;
    --tls-info-light: rgba(8, 145, 178, 0.2);
    --tls-info-dark: #67e8f9;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEMANTIC COLORS WITH OPACITY - ألوان شفافة للخلفيات        */
/* ═══════════════════════════════════════════════════════════ */
:root {
    /* Success Shades */
    --tls-success-10: rgba(16, 185, 129, 0.1);
    --tls-success-20: rgba(16, 185, 129, 0.2);
    --tls-success-30: rgba(16, 185, 129, 0.3);
    
    /* Danger Shades */
    --tls-danger-10: rgba(239, 68, 68, 0.1);
    --tls-danger-20: rgba(239, 68, 68, 0.2);
    --tls-danger-30: rgba(239, 68, 68, 0.3);
    
    /* Warning Shades */
    --tls-warning-10: rgba(245, 158, 11, 0.1);
    --tls-warning-20: rgba(245, 158, 11, 0.2);
    --tls-warning-30: rgba(245, 158, 11, 0.3);
    
    /* Info Shades */
    --tls-info-10: rgba(59, 130, 246, 0.1);
    --tls-info-20: rgba(59, 130, 246, 0.2);
    --tls-info-30: rgba(59, 130, 246, 0.3);
    
    /* Gray Shades */
    --tls-gray-10: rgba(107, 114, 128, 0.1);
    --tls-gray-20: rgba(107, 114, 128, 0.2);
    --tls-gray-30: rgba(107, 114, 128, 0.3);
    
    /* Violet Shades */
    --tls-violet: #8b5cf6;
    --tls-violet-10: rgba(139, 92, 246, 0.1);
    --tls-violet-20: rgba(139, 92, 246, 0.2);
    --tls-violet-light: #f3e8ff;
    --tls-violet-dark: #6b21a8;
}

/* Dark Mode - ألوان أقوى للوضع الليلي */
.dark {
    --tls-success-10: rgba(52, 211, 153, 0.15);
    --tls-success-20: rgba(52, 211, 153, 0.25);
    --tls-success-30: rgba(52, 211, 153, 0.35);
    
    --tls-danger-10: rgba(248, 113, 113, 0.15);
    --tls-danger-20: rgba(248, 113, 113, 0.25);
    --tls-danger-30: rgba(248, 113, 113, 0.35);
    
    --tls-warning-10: rgba(251, 191, 36, 0.15);
    --tls-warning-20: rgba(251, 191, 36, 0.25);
    --tls-warning-30: rgba(251, 191, 36, 0.35);
    
    --tls-info-10: rgba(96, 165, 250, 0.15);
    --tls-info-20: rgba(96, 165, 250, 0.25);
    --tls-info-30: rgba(96, 165, 250, 0.35);
    
    --tls-gray-10: rgba(156, 163, 175, 0.15);
    --tls-gray-20: rgba(156, 163, 175, 0.25);
    --tls-gray-30: rgba(156, 163, 175, 0.35);
    
    --tls-violet-10: rgba(167, 139, 250, 0.15);
    --tls-violet-20: rgba(167, 139, 250, 0.25);
    --tls-violet-light: rgba(139, 92, 246, 0.2);
    --tls-violet-dark: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════ */
/* STAT CARDS - كروت الإحصائيات                                */
/* ═══════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--tls-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

.dark .stat-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark .stat-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* STATUS BADGES - شارات الحالة المتكيفة                       */
/* ═══════════════════════════════════════════════════════════ */
.status-badge-pending {
    background: var(--tls-warning-20) !important;
    color: var(--tls-warning-dark, #92400e) !important;
}
.status-badge-progress {
    background: var(--tls-info-20) !important;
    color: var(--tls-info-dark, #1e40af) !important;
}
.status-badge-review {
    background: var(--tls-violet-light) !important;
    color: var(--tls-violet-dark) !important;
}
.status-badge-completed {
    background: var(--tls-success-20) !important;
    color: var(--tls-success-dark, #065f46) !important;
}
.status-badge-cancelled {
    background: var(--tls-danger-20) !important;
    color: var(--tls-danger-dark, #991b1b) !important;
}

.dark .status-badge-pending { color: var(--tls-warning) !important; }
.dark .status-badge-progress { color: var(--tls-info) !important; }
.dark .status-badge-review { color: var(--tls-violet) !important; }
.dark .status-badge-completed { color: var(--tls-success) !important; }
.dark .status-badge-cancelled { color: var(--tls-danger) !important; }

/* ═══════════════════════════════════════════════════════════ */
/* WORK CARDS - كروت الأعمال                                   */
/* ═══════════════════════════════════════════════════════════ */
.work-card {
    background: var(--tls-surface);
    border: 1px solid var(--tls-border);
    transition: all 0.3s ease;
}

.work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.dark .work-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark .work-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Card Header */
.work-card-header {
    background: linear-gradient(135deg, var(--tls-surface-hover), var(--tls-bg));
    border-bottom: 1px solid var(--tls-border);
}

/* Card dengan status berbeda */
.work-card-delayed {
    background: linear-gradient(to left, var(--tls-danger-10), var(--tls-surface)) !important;
}

.work-card-warning {
    background: linear-gradient(to left, var(--tls-warning-10), var(--tls-surface)) !important;
}

.work-card-success {
    background: linear-gradient(to left, var(--tls-success-10), var(--tls-surface)) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* LIGHT COLORS - ألوان الخلفيات الفاتحة                       */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --tls-warning-light: #fffbeb;
    --tls-info-light: #dbeafe;
    --tls-violet-light: #f3e8ff;
    
    --tls-warning-dark: #92400e;
    --tls-info-dark: #1e40af;
    --tls-violet-dark: #6b21a8;
}

.dark {
    --tls-warning-light: rgba(251, 191, 36, 0.15);
    --tls-info-light: rgba(96, 165, 250, 0.15);
    --tls-violet-light: rgba(167, 139, 250, 0.15);
    
    --tls-warning-dark: #fbbf24;
    --tls-info-dark: #60a5fa;
    --tls-violet-dark: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════ */
/* SHADOWS SYSTEM - نظام الظلال الموحد                         */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.dark {
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════ */
/* SPACING SYSTEM - نظام المسافات الموحد                       */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
}

/* ═══════════════════════════════════════════════════════════ */
/* RADIUS SYSTEM - نظام الزوايا الموحد                         */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* ═══════════════════════════════════════════════════════════ */
/* 🎨 CALMER COLORS - ألوان هادئة واحترافية                    */
/* ═══════════════════════════════════════════════════════════ */

/* تخفيف حدة ألوان الكروت الإحصائية */
:root {
    /* Success - أخضر هادئ */
    --tls-success: #059669;
    --tls-success-10: rgba(5, 150, 105, 0.08);
    --tls-success-20: rgba(5, 150, 105, 0.15);
    --tls-success-light: #ecfdf5;
    
    /* Danger - أحمر هادئ */
    --tls-danger: #dc2626;
    --tls-danger-10: rgba(220, 38, 38, 0.08);
    --tls-danger-20: rgba(220, 38, 38, 0.12);
    --tls-danger-light: #fef2f2;
    
    /* Warning - برتقالي هادئ */
    --tls-warning: #d97706;
    --tls-warning-10: rgba(217, 119, 6, 0.08);
    --tls-warning-20: rgba(217, 119, 6, 0.12);
    --tls-warning-light: #fffbeb;
    
    /* Info - أزرق هادئ */
    --tls-info: #2563eb;
    --tls-info-10: rgba(37, 99, 235, 0.08);
    --tls-info-20: rgba(37, 99, 235, 0.12);
    --tls-info-light: #eff6ff;
    
    /* Gray - رمادي متوازن */
    --tls-gray-10: rgba(107, 114, 128, 0.08);
    --tls-gray-20: rgba(107, 114, 128, 0.12);
}

/* Dark Mode - ألوان ناعمة للوضع الليلي */
.dark {
    --tls-success: #34d399;
    --tls-success-10: rgba(52, 211, 153, 0.1);
    --tls-success-20: rgba(52, 211, 153, 0.18);
    --tls-success-light: rgba(52, 211, 153, 0.12);
    
    --tls-danger: #f87171;
    --tls-danger-10: rgba(248, 113, 113, 0.1);
    --tls-danger-20: rgba(248, 113, 113, 0.18);
    --tls-danger-light: rgba(248, 113, 113, 0.12);
    
    --tls-warning: #fbbf24;
    --tls-warning-10: rgba(251, 191, 36, 0.1);
    --tls-warning-20: rgba(251, 191, 36, 0.18);
    --tls-warning-light: rgba(251, 191, 36, 0.12);
    
    --tls-info: #60a5fa;
    --tls-info-10: rgba(96, 165, 250, 0.1);
    --tls-info-20: rgba(96, 165, 250, 0.18);
    --tls-info-light: rgba(96, 165, 250, 0.12);
    
    --tls-gray-10: rgba(156, 163, 175, 0.1);
    --tls-gray-20: rgba(156, 163, 175, 0.18);
}

/* ═══════════════════════════════════════════════════════════ */
/* STAT CARDS - كروت بألوان أهدأ                               */
/* ═══════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

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

/* تخفيف حدة ألوان الأرقام */
.stat-card p:first-child {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════ */
/* WORK CARDS - كروت الأعمال بألوان أنعم                       */
/* ═══════════════════════════════════════════════════════════ */

/* تخفيف الظلال */
[style*="box-shadow: 0 4px 12px"] {
    box-shadow: var(--shadow-sm) !important;
}

/* الخلفيات المتدرجة أخف */
[style*="linear-gradient"] {
    opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════ */
/* BADGES - شارات بألوان أهدأ                                  */
/* ═══════════════════════════════════════════════════════════ */
[style*="border-radius: 24px"],
[style*="border-radius: 20px"] {
    font-weight: 600 !important;
}

/* تنعيم ألوان الشارات */
span[style*="background:"][style*="color: white"] {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════ */
/* BUTTONS - أزرار أكثر أناقة                                  */
/* ═══════════════════════════════════════════════════════════ */
button[style*="linear-gradient"] {
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

button[style*="linear-gradient"]:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════ */
/* GENERAL SOFTENING - تنعيم عام                               */
/* ═══════════════════════════════════════════════════════════ */

/* تخفيف حدة الحدود الملونة */
[style*="border-right: 4px solid"],
[style*="border-right: 5px solid"] {
    border-right-width: 3px !important;
}

/* مساحات بيضاء أكثر */
[dir="rtl"] > div:first-child {
    padding: 8px 0;
}

/* تحسين قراءة النصوص */
[style*="font-size: 11px"] {
    font-size: 12px !important;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════ */
/* ANIMATIONS - حركات أخف                                      */
/* ═══════════════════════════════════════════════════════════ */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* إلغاء الحركات المزعجة */
[style*="animation: pulse"] {
    animation: pulse 3s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* VIOLET COLOR - اللون البنفسجي للأزرار                       */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --tls-violet: #8b5cf6;
    --tls-violet-dark: #7c3aed;
    --tls-violet-light: #ede9fe;
    --tls-violet-10: rgba(139, 92, 246, 0.1);
    --tls-violet-20: rgba(139, 92, 246, 0.2);
}

.dark {
    --tls-violet: #a78bfa;
    --tls-violet-dark: #8b5cf6;
    --tls-violet-light: rgba(167, 139, 250, 0.15);
    --tls-violet-10: rgba(167, 139, 250, 0.1);
    --tls-violet-20: rgba(167, 139, 250, 0.2);
}

/* ═══════════════════════════════════════════════════════════ */
/* 📅 CALENDAR PAGE - تحسينات التقويم                          */
/* ═══════════════════════════════════════════════════════════ */

/* خلايا التقويم */
[dir="rtl"] > div > div[style*="grid-template-columns: repeat(7"] > div {
    background: var(--tls-surface) !important;
    border-color: var(--tls-border) !important;
    transition: all 0.2s ease;
}

[dir="rtl"] > div > div[style*="grid-template-columns: repeat(7"] > div:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* اليوم الحالي */
[dir="rtl"] > div > div[style*="grid-template-columns: repeat(7"] > div[style*="isToday"] {
    background: var(--tls-primary-light) !important;
    border-color: var(--tls-primary) !important;
}

/* الأحداث داخل التقويم */
[dir="rtl"] [style*="border-right: 3px solid"] {
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

[dir="rtl"] [style*="border-right: 3px solid"]:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* تحسين ألوان الأحداث - أكثر وضوحاً */
.dark [dir="rtl"] [style*="border-right: 3px solid"] {
    background: rgba(255,255,255,0.08) !important;
}

/* فلاتر التقويم */
[dir="rtl"] label[style*="border-radius: 20px"] {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

[dir="rtl"] label[style*="border-radius: 20px"]:hover {
    transform: scale(1.02);
}

/* النقاط الملونة - أكبر وأوضح */
[dir="rtl"] label span[style*="●"] {
    font-size: 14px !important;
    text-shadow: 0 0 4px currentColor;
}

/* أزرار التنقل */
[dir="rtl"] button[style*="→"],
[dir="rtl"] button[style*="←"] {
    font-size: 18px;
    font-weight: bold;
    min-width: 40px;
    transition: all 0.2s ease;
}

[dir="rtl"] button[style*="→"]:hover,
[dir="rtl"] button[style*="←"]:hover {
    background: var(--tls-primary-light) !important;
    color: var(--tls-primary);
}

/* رقم اليوم */
[dir="rtl"] [style*="font-size: 20px"][style*="font-weight: 700"] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Modal التفاصيل */
[dir="rtl"] [style*="max-width: 450px"] {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border);
}

.dark [dir="rtl"] [style*="max-width: 450px"] {
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT BADGES - شارات الأحداث المحسنة                        */
/* ═══════════════════════════════════════════════════════════ */

/* حجوزات */
[style*="border-right"][style*="primary"] {
    border-right-color: var(--tls-primary) !important;
}

/* مهام */
[style*="border-right"][style*="info"] {
    border-right-color: var(--tls-info) !important;
}

/* أعمال */
[style*="border-right"][style*="violet"] {
    border-right-color: var(--tls-violet) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* CALENDAR GRID ENHANCEMENT                                   */
/* ═══════════════════════════════════════════════════════════ */

/* تحسين عرض الشبكة */
[style*="grid-template-columns: repeat(7, 1fr)"] {
    background: var(--tls-bg);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--tls-border);
}

/* تحسين الأيام الفارغة */
[style*="min-height: 200px"]:empty::after {
    content: "لا توجد أحداث";
    color: var(--tls-text-muted);
    font-size: 12px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE CALENDAR                                         */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(7, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="min-height: 200px"] {
        min-height: 150px !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* 📅 CALENDAR EVENTS - كروت الأحداث المميزة                   */
/* ═══════════════════════════════════════════════════════════ */

/* Base Event Card */
.calendar-event,
[dir="rtl"] div[wire\:click*="openDetail"] {
    position: relative;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
    overflow: hidden;
}

/* Hover Effect */
[dir="rtl"] div[wire\:click*="openDetail"]:hover {
    transform: translateX(-3px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT TYPES - أنواع الأحداث                                  */
/* ═══════════════════════════════════════════════════════════ */

/* 📅 الحجوزات - ذهبي/برتقالي */
[dir="rtl"] div[wire\:click*="openDetail('booking"] {
    background: linear-gradient(135deg, var(--tls-primary-light), rgba(var(--tls-primary-rgb, 226, 165, 62), 0.1)) !important;
    border-right-color: var(--tls-primary) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('booking"] > div:first-child {
    color: var(--tls-primary-dark, #b8860b) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('booking"] {
    background: linear-gradient(135deg, rgba(var(--tls-primary-rgb, 226, 165, 62), 0.2), rgba(var(--tls-primary-rgb, 226, 165, 62), 0.1)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('booking"] > div:first-child {
    color: var(--tls-primary) !important;
}

/* 📋 المهام - أزرق */
[dir="rtl"] div[wire\:click*="openDetail('task"] {
    background: linear-gradient(135deg, var(--tls-info-light, #eff6ff), var(--tls-info-10)) !important;
    border-right-color: var(--tls-info) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('task"] > div:first-child {
    color: var(--tls-info-dark, #1e40af) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('task"] {
    background: linear-gradient(135deg, var(--tls-info-20), var(--tls-info-10)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('task"] > div:first-child {
    color: var(--tls-info) !important;
}

/* 💼 الأعمال - بنفسجي */
[dir="rtl"] div[wire\:click*="openDetail('work"] {
    background: linear-gradient(135deg, var(--tls-violet-light, #ede9fe), var(--tls-violet-10)) !important;
    border-right-color: var(--tls-violet) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('work"] > div:first-child {
    color: var(--tls-violet-dark, #6b21a8) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('work"] {
    background: linear-gradient(135deg, var(--tls-violet-20), var(--tls-violet-10)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('work"] > div:first-child {
    color: var(--tls-violet) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* STATUS INDICATORS - مؤشرات الحالة                           */
/* ═══════════════════════════════════════════════════════════ */

/* مكتمل */
[dir="rtl"] div[wire\:click*="openDetail"][style*="success"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="#10b981"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="#22c55e"] {
    border-right-color: var(--tls-success) !important;
}

/* قيد التنفيذ */
[dir="rtl"] div[wire\:click*="openDetail"][style*="warning"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="#f59e0b"] {
    border-right-color: var(--tls-warning) !important;
}

/* متأخر/ملغي */
[dir="rtl"] div[wire\:click*="openDetail"][style*="danger"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="#ef4444"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="#dc2626"] {
    border-right-color: var(--tls-danger) !important;
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT ICONS - أيقونات الأحداث                               */
/* ═══════════════════════════════════════════════════════════ */

/* إضافة أيقونة قبل العنوان */
[dir="rtl"] div[wire\:click*="openDetail('booking"] > div:first-child::before {
    content: "📅 ";
    font-size: 10px;
}

[dir="rtl"] div[wire\:click*="openDetail('task"] > div:first-child::before {
    content: "📋 ";
    font-size: 10px;
}

[dir="rtl"] div[wire\:click*="openDetail('work"] > div:first-child::before {
    content: "💼 ";
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════ */
/* TIME & SUBTITLE - الوقت والتفاصيل                           */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] div[wire\:click*="openDetail"] > div:nth-child(2),
[dir="rtl"] div[wire\:click*="openDetail"] > div:nth-child(3) {
    color: var(--tls-text-muted) !important;
    font-size: 10px !important;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════ */
/* DAY CELLS ENHANCEMENT - تحسين خلايا الأيام                  */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] [style*="min-height: 200px"] {
    background: var(--tls-surface) !important;
    transition: all 0.2s ease;
}

[dir="rtl"] [style*="min-height: 200px"]:hover {
    background: var(--tls-surface-hover) !important;
}

/* اليوم الحالي - تمييز أقوى */
[dir="rtl"] [style*="isToday"][style*="true"] {
    background: var(--tls-primary-light) !important;
    border: 2px solid var(--tls-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--tls-primary-rgb, 226, 165, 62), 0.2);
}

/* ═══════════════════════════════════════════════════════════ */
/* FILTER BUTTONS ENHANCEMENT - تحسين أزرار الفلاتر           */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] label[style*="border-radius: 20px"] {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border) !important;
    transition: all 0.2s ease;
}

[dir="rtl"] label[style*="border-radius: 20px"]:hover {
    border-color: var(--tls-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* فلتر نشط */
[dir="rtl"] label[style*="primary"][style*="20"],
[dir="rtl"] label[style*="showBookings ? "][style*="20"] {
    background: var(--tls-primary-light) !important;
    border-color: var(--tls-primary) !important;
}

[dir="rtl"] label[style*="infoColor"][style*="20"] {
    background: var(--tls-info-light) !important;
    border-color: var(--tls-info) !important;
}

[dir="rtl"] label[style*="violetColor"][style*="20"] {
    background: var(--tls-violet-light) !important;
    border-color: var(--tls-violet) !important;
}

[dir="rtl"] label[style*="success"][style*="20"] {
    background: var(--tls-success-light) !important;
    border-color: var(--tls-success) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 📅 CALENDAR FILTERS - فلاتر التقويم المحسنة                  */
/* ═══════════════════════════════════════════════════════════ */

.cal-filter {
    position: relative;
    overflow: hidden;
}

.cal-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s;
}

.cal-filter:hover::before {
    opacity: 0.05;
}

.cal-filter:hover {
    transform: translateY(-1px);
}

/* فلتر مفعّل */
.cal-filter-active {
    font-weight: 600 !important;
}

.cal-filter-booking.cal-filter-active {
    background: linear-gradient(135deg, var(--tls-primary-light), var(--tls-surface)) !important;
}

.cal-filter-task.cal-filter-active {
    background: linear-gradient(135deg, var(--tls-info-light), var(--tls-surface)) !important;
}

.cal-filter-work.cal-filter-active {
    background: linear-gradient(135deg, var(--tls-violet-light), var(--tls-surface)) !important;
}

.cal-filter-mine.cal-filter-active {
    background: linear-gradient(135deg, var(--tls-success-light), var(--tls-surface)) !important;
}

/* Dark Mode للفلاتر */
.dark .cal-filter {
    background: var(--tls-surface) !important;
}

.dark .cal-filter-booking.cal-filter-active {
    background: linear-gradient(135deg, rgba(226,165,62,0.15), var(--tls-surface)) !important;
}

.dark .cal-filter-task.cal-filter-active {
    background: linear-gradient(135deg, rgba(37,99,235,0.15), var(--tls-surface)) !important;
}

.dark .cal-filter-work.cal-filter-active {
    background: linear-gradient(135deg, rgba(139,92,246,0.15), var(--tls-surface)) !important;
}

.dark .cal-filter-mine.cal-filter-active {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), var(--tls-surface)) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 📅 CALENDAR EVENTS - كروت الأحداث المحسنة                   */
/* ═══════════════════════════════════════════════════════════ */

/* Base Event Style */
[dir="rtl"] div[wire\:click*="openDetail"] {
    position: relative;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    border-right: 4px solid !important;
    overflow: hidden;
}

[dir="rtl"] div[wire\:click*="openDetail"]:hover {
    transform: translateX(-2px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT TYPE: BOOKING - الحجوزات                              */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] div[wire\:click*="openDetail('booking"] {
    background: linear-gradient(135deg, 
        rgba(226, 165, 62, 0.12), 
        rgba(226, 165, 62, 0.06)) !important;
    border-right-color: var(--tls-primary) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('booking"] > div:first-child {
    color: var(--tls-primary-dark, #b8860b) !important;
    font-weight: 600 !important;
}

[dir="rtl"] div[wire\:click*="openDetail('booking"]::before {
    content: "📅";
    margin-left: 4px;
    font-size: 11px;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('booking"] {
    background: linear-gradient(135deg, 
        rgba(226, 165, 62, 0.2), 
        rgba(226, 165, 62, 0.1)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('booking"] > div:first-child {
    color: var(--tls-primary) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT TYPE: TASK - المهام                                   */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] div[wire\:click*="openDetail('task"] {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.12), 
        rgba(37, 99, 235, 0.06)) !important;
    border-right-color: var(--tls-info) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('task"] > div:first-child {
    color: var(--tls-info-dark, #1e40af) !important;
    font-weight: 600 !important;
}

[dir="rtl"] div[wire\:click*="openDetail('task"]::before {
    content: "📋";
    margin-left: 4px;
    font-size: 11px;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('task"] {
    background: linear-gradient(135deg, 
        rgba(96, 165, 250, 0.2), 
        rgba(96, 165, 250, 0.1)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('task"] > div:first-child {
    color: var(--tls-info) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT TYPE: WORK - الأعمال                                  */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] div[wire\:click*="openDetail('work"] {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.12), 
        rgba(139, 92, 246, 0.06)) !important;
    border-right-color: var(--tls-violet) !important;
}

[dir="rtl"] div[wire\:click*="openDetail('work"] > div:first-child {
    color: var(--tls-violet-dark, #6b21a8) !important;
    font-weight: 600 !important;
}

[dir="rtl"] div[wire\:click*="openDetail('work"]::before {
    content: "💼";
    margin-left: 4px;
    font-size: 11px;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('work"] {
    background: linear-gradient(135deg, 
        rgba(167, 139, 250, 0.2), 
        rgba(167, 139, 250, 0.1)) !important;
}

.dark [dir="rtl"] div[wire\:click*="openDetail('work"] > div:first-child {
    color: var(--tls-violet) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* EVENT STATUS - حالات الأحداث                                */
/* ═══════════════════════════════════════════════════════════ */

/* مكتمل - شريط أخضر */
[dir="rtl"] div[wire\:click*="openDetail"][style*="10b981"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="22c55e"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="success"] {
    border-right-color: var(--tls-success) !important;
}

[dir="rtl"] div[wire\:click*="openDetail"][style*="10b981"]::after,
[dir="rtl"] div[wire\:click*="openDetail"][style*="success"]::after {
    content: "✓";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    background: var(--tls-success);
    color: white;
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* قيد التنفيذ - شريط برتقالي */
[dir="rtl"] div[wire\:click*="openDetail"][style*="f59e0b"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="warning"] {
    border-right-color: var(--tls-warning) !important;
}

/* متأخر - شريط أحمر + نبض */
[dir="rtl"] div[wire\:click*="openDetail"][style*="ef4444"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="dc2626"],
[dir="rtl"] div[wire\:click*="openDetail"][style*="danger"] {
    border-right-color: var(--tls-danger) !important;
    animation: event-pulse 2s ease-in-out infinite;
}

@keyframes event-pulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* DAY CELLS - خلايا الأيام                                    */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] [style*="min-height: 200px"] {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border) !important;
    transition: all 0.2s ease;
}

[dir="rtl"] [style*="min-height: 200px"]:hover {
    background: var(--tls-surface-hover) !important;
    box-shadow: var(--shadow-sm);
}

/* رأس اليوم */
[dir="rtl"] [style*="min-height: 200px"] > div:first-child {
    border-bottom: 1px solid var(--tls-border) !important;
}

/* رقم اليوم */
[dir="rtl"] [style*="font-size: 20px"][style*="font-weight: 700"] {
    color: var(--tls-text) !important;
}

/* اليوم الحالي */
[dir="rtl"] [style*="min-height"][style*="isToday ? "] {
    background: var(--tls-primary-light) !important;
    border-color: var(--tls-primary) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* NAVIGATION BUTTONS - أزرار التنقل                           */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] button[style*="→"],
[dir="rtl"] button[style*="←"] {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border) !important;
    color: var(--tls-text) !important;
    font-size: 16px !important;
    min-width: 38px;
    transition: all 0.2s ease;
}

[dir="rtl"] button[style*="→"]:hover,
[dir="rtl"] button[style*="←"]:hover {
    background: var(--tls-surface-hover) !important;
    border-color: var(--tls-primary) !important;
    color: var(--tls-primary) !important;
}

/* زر اليوم */
[dir="rtl"] button[style*="اليوم"] {
    background: linear-gradient(135deg, var(--tls-primary), var(--tls-primary-dark)) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(226, 165, 62, 0.3);
    transition: all 0.2s ease;
}

[dir="rtl"] button[style*="اليوم"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(226, 165, 62, 0.4);
}

/* ═══════════════════════════════════════════════════════════ */
/* MODAL - نافذة التفاصيل                                      */
/* ═══════════════════════════════════════════════════════════ */

[dir="rtl"] [style*="max-width: 450px"] {
    background: var(--tls-surface) !important;
    border: 1px solid var(--tls-border) !important;
}

.dark [dir="rtl"] [style*="max-width: 450px"] {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 📅 CALENDAR GRID SIZE - حجم ثابت للتقويم                    */
/* ═══════════════════════════════════════════════════════════ */

/* حجم ثابت لخلايا الأيام */
[dir="rtl"] [style*="grid-template-columns: repeat(7"] > div {
    min-height: 220px !important;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* منطقة الأحداث تأخذ المساحة المتبقية */
[dir="rtl"] [style*="grid-template-columns: repeat(7"] > div > div:last-child {
    flex: 1;
    min-height: 150px;
}

/* رسالة عندما لا توجد أحداث */
[dir="rtl"] [style*="grid-template-columns: repeat(7"] > div > div:last-child:empty::after {
    content: "لا توجد أحداث";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--tls-text-muted);
    font-size: 12px;
    opacity: 0.5;
}

/* الشبكة الرئيسية */
[dir="rtl"] [style*="grid-template-columns: repeat(7, 1fr)"] {
    min-height: 250px;
}

/* Responsive - الشاشات الصغيرة */
@media (max-width: 768px) {
    [dir="rtl"] [style*="grid-template-columns: repeat(7"] > div {
        min-height: 180px !important;
    }
    
    [dir="rtl"] [style*="grid-template-columns: repeat(7"] > div > div:last-child {
        min-height: 120px;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* 🔘 CARD ACTION BUTTONS - أزرار الكروت الثلاثة                */
/* ═══════════════════════════════════════════════════════════ */

/* زر المراحل - بنفسجي */
[dir="rtl"] button[wire\:click*="openStagesModal"] {
    background: linear-gradient(135deg, var(--tls-violet), var(--tls-violet-dark)) !important;
    border: none !important;
    color: white !important;
}

[dir="rtl"] button[wire\:click*="openStagesModal"]:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-1px);
}

/* زر التعيين - بنفسجي (أو أحمر إذا غير معين) */
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="flex: 1"] {
    background: linear-gradient(135deg, var(--tls-violet), var(--tls-violet-dark)) !important;
    border: none !important;
    color: white !important;
}

[dir="rtl"] button[wire\:click*="openAssignModal("][style*="flex: 1"]:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-1px);
}

/* زر التعيين عندما يكون أحمر (غير معين) */
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="animation: pulse"],
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="#dc2626"] {
    background: linear-gradient(135deg, var(--tls-danger), var(--tls-danger-dark, #b91c1c)) !important;
}

[dir="rtl"] button[wire\:click*="openAssignModal("][style*="animation: pulse"]:hover,
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="#dc2626"]:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* زر المهام - بنفسجي */
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="flex: 1"] {
    background: linear-gradient(135deg, var(--tls-violet), var(--tls-violet-dark)) !important;
    border: none !important;
    color: white !important;
}

[dir="rtl"] button[wire\:click*="openTasksModal("][style*="flex: 1"]:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-1px);
}

/* زر المهام عندما يكون أحمر (متأخرة) */
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="animation: pulse"],
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="#dc2626"] {
    background: linear-gradient(135deg, var(--tls-danger), var(--tls-danger-dark, #b91c1c)) !important;
}

[dir="rtl"] button[wire\:click*="openTasksModal("][style*="animation: pulse"]:hover,
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="#dc2626"]:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SMALL BUTTONS IN MODALS - الأزرار الصغيرة في المودال         */
/* ═══════════════════════════════════════════════════════════ */

/* زر + تعيين الصغير */
button[wire\:click*="openAssignModal"][style*="font-size: 10px"] {
    background: var(--tls-info-20) !important;
    color: var(--tls-info) !important;
    border: 1px solid var(--tls-info-20) !important;
    transition: all 0.2s ease;
}

button[wire\:click*="openAssignModal"][style*="font-size: 10px"]:hover {
    background: var(--tls-info) !important;
    color: white !important;
}

/* زر عرض المهام الصغير */
button[wire\:click*="openTasksModal"][style*="font-size: 10px"] {
    background: var(--tls-violet-20) !important;
    color: var(--tls-violet) !important;
    border: 1px solid var(--tls-violet-20) !important;
    transition: all 0.2s ease;
}

button[wire\:click*="openTasksModal"][style*="font-size: 10px"]:hover {
    background: var(--tls-violet) !important;
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* DARK MODE ADJUSTMENTS                                       */
/* ═══════════════════════════════════════════════════════════ */

.dark [dir="rtl"] button[wire\:click*="openStagesModal"],
.dark [dir="rtl"] button[wire\:click*="openAssignModal("][style*="flex: 1"],
.dark [dir="rtl"] button[wire\:click*="openTasksModal("][style*="flex: 1"] {
    background: linear-gradient(135deg, var(--tls-violet), var(--tls-violet-dark)) !important;
}

.dark button[wire\:click*="openAssignModal"][style*="font-size: 10px"] {
    background: var(--tls-info-20) !important;
    color: var(--tls-info) !important;
}

.dark button[wire\:click*="openTasksModal"][style*="font-size: 10px"] {
    background: var(--tls-violet-20) !important;
    color: var(--tls-violet) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 🔘 CARD ACTION BUTTONS - أزرار الكروت بلون الثيم             */
/* ═══════════════════════════════════════════════════════════ */

/* جميع أزرار الكروت الرئيسية - لون الثيم */
[dir="rtl"] button[wire\:click*="openStagesModal"],
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="flex: 1"],
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="flex: 1"] {
    background: linear-gradient(135deg, var(--tls-primary), var(--tls-primary-dark)) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(var(--tls-primary-rgb, 226, 165, 62), 0.25);
    transition: all 0.2s ease !important;
}

[dir="rtl"] button[wire\:click*="openStagesModal"]:hover,
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="flex: 1"]:hover,
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="flex: 1"]:hover {
    box-shadow: 0 4px 12px rgba(var(--tls-primary-rgb, 226, 165, 62), 0.4) !important;
    transform: translateY(-2px) !important;
}

/* زر التعيين - أحمر إذا غير معين */
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="animation: pulse"],
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="#dc2626"] {
    background: linear-gradient(135deg, var(--tls-danger), var(--tls-danger-dark, #b91c1c)) !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

[dir="rtl"] button[wire\:click*="openAssignModal("][style*="animation: pulse"]:hover,
[dir="rtl"] button[wire\:click*="openAssignModal("][style*="#dc2626"]:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5) !important;
}

/* زر المهام - أحمر إذا متأخرة */
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="animation: pulse"],
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="#dc2626"] {
    background: linear-gradient(135deg, var(--tls-danger), var(--tls-danger-dark, #b91c1c)) !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

[dir="rtl"] button[wire\:click*="openTasksModal("][style*="animation: pulse"]:hover,
[dir="rtl"] button[wire\:click*="openTasksModal("][style*="#dc2626"]:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SMALL BUTTONS - الأزرار الصغيرة بلون الثيم                   */
/* ═══════════════════════════════════════════════════════════ */

/* زر + تعيين الصغير */
button[wire\:click*="openAssignModal"][style*="font-size: 10px"] {
    background: rgba(var(--tls-primary-rgb, 226, 165, 62), 0.15) !important;
    color: var(--tls-primary) !important;
    border: 1px solid rgba(var(--tls-primary-rgb, 226, 165, 62), 0.3) !important;
    transition: all 0.2s ease;
}

button[wire\:click*="openAssignModal"][style*="font-size: 10px"]:hover {
    background: var(--tls-primary) !important;
    color: white !important;
}

/* زر عرض المهام الصغير */
button[wire\:click*="openTasksModal"][style*="font-size: 10px"] {
    background: rgba(var(--tls-primary-rgb, 226, 165, 62), 0.15) !important;
    color: var(--tls-primary) !important;
    border: 1px solid rgba(var(--tls-primary-rgb, 226, 165, 62), 0.3) !important;
    transition: all 0.2s ease;
}

button[wire\:click*="openTasksModal"][style*="font-size: 10px"]:hover {
    background: var(--tls-primary) !important;
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 🌓 THEME TOGGLE BUTTON - زر تبديل الوضع                     */
/* ═══════════════════════════════════════════════════════════ */

/* في الوضع النهاري - أيقونة بلون الثيم */
:root:not(.dark) .fi-topbar [x-ref="lightModeButton"],
:root:not(.dark) .fi-topbar [x-ref="darkModeButton"],
:root:not(.dark) .fi-topbar button[x-on\:click*="theme"],
:root:not(.dark) .fi-topbar [class*="theme-switcher"],
:root:not(.dark) .fi-topbar [class*="color-scheme"],
:root:not(.dark) .fi-topbar button[aria-label*="theme"],
:root:not(.dark) .fi-topbar button[aria-label*="mode"],
:root:not(.dark) .fi-topbar button[aria-label*="dark"],
:root:not(.dark) .fi-topbar button[aria-label*="light"] {
    color: var(--tls-primary-dark, #c98a2a) !important;
}

:root:not(.dark) .fi-topbar [x-ref="lightModeButton"] svg,
:root:not(.dark) .fi-topbar [x-ref="darkModeButton"] svg,
:root:not(.dark) .fi-topbar button[x-on\:click*="theme"] svg,
:root:not(.dark) .fi-topbar [class*="theme-switcher"] svg,
:root:not(.dark) .fi-topbar button[aria-label*="theme"] svg,
:root:not(.dark) .fi-topbar button[aria-label*="mode"] svg,
:root:not(.dark) .fi-topbar button[aria-label*="dark"] svg,
:root:not(.dark) .fi-topbar button[aria-label*="light"] svg {
    color: var(--tls-primary-dark, #c98a2a) !important;
}

/* في الوضع الليلي - أيقونة بيضاء/ذهبية */
.dark .fi-topbar [x-ref="lightModeButton"],
.dark .fi-topbar [x-ref="darkModeButton"],
.dark .fi-topbar button[x-on\:click*="theme"],
.dark .fi-topbar [class*="theme-switcher"],
.dark .fi-topbar button[aria-label*="theme"] {
    color: #fbbf24 !important;
}

.dark .fi-topbar [x-ref="lightModeButton"] svg,
.dark .fi-topbar [x-ref="darkModeButton"] svg,
.dark .fi-topbar button[x-on\:click*="theme"] svg,
.dark .fi-topbar [class*="theme-switcher"] svg,
.dark .fi-topbar button[aria-label*="theme"] svg {
    color: #fbbf24 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 🔔 NOTIFICATIONS DROPDOWN - قائمة الإشعارات                  */
/* ═══════════════════════════════════════════════════════════ */

/* القائمة المنسدلة للإشعارات */
.fi-topbar .fi-dropdown-panel,
[class*="notifications"] .fi-dropdown-panel,
.fi-dropdown-panel[class*="notification"],
.fi-notification-dropdown,
div[wire\:id][class*="notification"] .fi-dropdown-panel {
    background: var(--tls-surface, #ffffff) !important;
    border: 1px solid var(--tls-border, #e5e7eb) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* العناوين في قائمة الإشعارات */
.fi-topbar .fi-dropdown-panel h3,
.fi-topbar .fi-dropdown-panel h4,
.fi-topbar .fi-dropdown-panel [class*="header"],
.fi-dropdown-header,
.fi-dropdown-header-label {
    color: var(--tls-text, #374151) !important;
    background: var(--tls-surface-hover, #f3f4f6) !important;
}

/* عناصر الإشعارات */
.fi-topbar .fi-dropdown-panel a,
.fi-topbar .fi-dropdown-panel button,
.fi-topbar .fi-dropdown-panel span,
.fi-topbar .fi-dropdown-panel p,
.fi-topbar .fi-dropdown-panel div,
.fi-dropdown-list-item,
.fi-dropdown-list-item-button {
    color: var(--tls-text, #374151) !important;
}

.fi-topbar .fi-dropdown-panel a:hover,
.fi-topbar .fi-dropdown-panel button:hover,
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item-button:hover {
    background: var(--tls-surface-hover, #f3f4f6) !important;
    color: var(--tls-text, #374151) !important;
}

/* النص الثانوي */
.fi-topbar .fi-dropdown-panel .text-gray-500,
.fi-topbar .fi-dropdown-panel .text-gray-400,
.fi-topbar .fi-dropdown-panel [class*="muted"],
.fi-topbar .fi-dropdown-panel small,
.fi-topbar .fi-dropdown-panel time {
    color: var(--tls-text-muted, #6b7280) !important;
}

/* أيقونات داخل القائمة */
.fi-topbar .fi-dropdown-panel svg,
.fi-dropdown-list-item svg,
.fi-dropdown-list-item-button svg {
    color: var(--tls-text-muted, #6b7280) !important;
}

/* Dark Mode للقائمة */
.dark .fi-topbar .fi-dropdown-panel,
.dark [class*="notifications"] .fi-dropdown-panel {
    background: var(--tls-surface, #1f2937) !important;
    border-color: var(--tls-border, #374151) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

.dark .fi-topbar .fi-dropdown-panel a,
.dark .fi-topbar .fi-dropdown-panel button,
.dark .fi-topbar .fi-dropdown-panel span,
.dark .fi-topbar .fi-dropdown-panel p,
.dark .fi-topbar .fi-dropdown-panel div,
.dark .fi-dropdown-list-item,
.dark .fi-dropdown-list-item-button {
    color: var(--tls-text, #f3f4f6) !important;
}

.dark .fi-topbar .fi-dropdown-panel a:hover,
.dark .fi-topbar .fi-dropdown-panel button:hover,
.dark .fi-dropdown-list-item:hover,
.dark .fi-dropdown-list-item-button:hover {
    background: var(--tls-surface-hover, #374151) !important;
}

.dark .fi-topbar .fi-dropdown-panel .text-gray-500,
.dark .fi-topbar .fi-dropdown-panel .text-gray-400,
.dark .fi-topbar .fi-dropdown-panel small,
.dark .fi-topbar .fi-dropdown-panel time {
    color: var(--tls-text-muted, #9ca3af) !important;
}

.dark .fi-topbar .fi-dropdown-panel svg,
.dark .fi-dropdown-list-item svg {
    color: var(--tls-text-muted, #9ca3af) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 👤 USER MENU DROPDOWN - قائمة المستخدم                       */
/* ═══════════════════════════════════════════════════════════ */

.fi-user-menu .fi-dropdown-panel {
    background: var(--tls-surface, #ffffff) !important;
    border: 1px solid var(--tls-border, #e5e7eb) !important;
}

.fi-user-menu .fi-dropdown-panel * {
    color: var(--tls-text, #374151) !important;
}

.fi-user-menu .fi-dropdown-panel a:hover,
.fi-user-menu .fi-dropdown-panel button:hover {
    background: var(--tls-surface-hover, #f3f4f6) !important;
}

.dark .fi-user-menu .fi-dropdown-panel {
    background: var(--tls-surface, #1f2937) !important;
    border-color: var(--tls-border, #374151) !important;
}

.dark .fi-user-menu .fi-dropdown-panel * {
    color: var(--tls-text, #f3f4f6) !important;
}

.dark .fi-user-menu .fi-dropdown-panel a:hover,
.dark .fi-user-menu .fi-dropdown-panel button:hover {
    background: var(--tls-surface-hover, #374151) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIX: استثناء القوائم المنسدلة من لون topbar الأبيض          */
/* ═══════════════════════════════════════════════════════════ */

/* قائمة الإشعارات المخصصة - الوضع النهاري */
.fi-topbar .bg-white .text-gray-900,
.fi-topbar .bg-white .text-gray-800,
.fi-topbar .bg-white .text-gray-700,
.fi-topbar .bg-white .font-medium,
.fi-topbar .bg-white .font-bold {
    color: #1f2937 !important;
}

.fi-topbar .bg-white .text-gray-600,
.fi-topbar .bg-white .text-gray-500,
.fi-topbar .bg-white .text-gray-400,
.fi-topbar .bg-white .text-xs {
    color: #6b7280 !important;
}

/* widget الإشعارات بـ x-data */
[x-data] .bg-white .text-gray-900,
[x-data] .bg-white .font-medium.text-gray-900 {
    color: #1f2937 !important;
}

[x-data] .bg-white .text-gray-500,
[x-data] .bg-white .text-gray-400 {
    color: #6b7280 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIX: الوضع الليلي - قائمة الإشعارات                         */
/* ═══════════════════════════════════════════════════════════ */

/* خلفية القائمة */
.dark [x-data] .dark\:bg-gray-800 {
    background-color: #1f2937 !important;
}

/* النصوص الرئيسية - فاتحة */
.dark [x-data] .dark\:bg-gray-800 .text-gray-900,
.dark [x-data] .dark\:bg-gray-800 .font-medium,
.dark [x-data] .dark\:bg-gray-800 .font-bold,
.dark [x-data] .dark\:bg-gray-800 .dark\:text-white {
    color: #f3f4f6 !important;
}

/* النصوص الثانوية */
.dark [x-data] .dark\:bg-gray-800 .text-gray-500,
.dark [x-data] .dark\:bg-gray-800 .text-gray-400,
.dark [x-data] .dark\:bg-gray-800 .dark\:text-gray-400,
.dark [x-data] .dark\:bg-gray-800 .dark\:text-gray-500,
.dark [x-data] .dark\:bg-gray-800 .text-xs {
    color: #9ca3af !important;
}

/* الهيدر والفوتر */
.dark [x-data] .dark\:bg-gray-900\/50 {
    background-color: rgba(17, 24, 39, 0.5) !important;
}

.dark [x-data] .dark\:bg-gray-900\/50 .font-bold,
.dark [x-data] .dark\:bg-gray-900\/50 span {
    color: #f3f4f6 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIX: أزرار تبديل الوضع (Theme Switcher)                     */
/* ═══════════════════════════════════════════════════════════ */

/* الوضع النهاري - الأزرار */
.fi-theme-switcher-btn {
    color: #6b7280 !important;
}

.fi-theme-switcher-btn svg {
    color: #6b7280 !important;
}

.fi-theme-switcher-btn:hover {
    background-color: #f3f4f6 !important;
}

/* الزر النشط */
.fi-theme-switcher-btn.fi-active {
    color: #e2a53e !important;
    background-color: rgba(226, 165, 62, 0.15) !important;
}

.fi-theme-switcher-btn.fi-active svg {
    color: #e2a53e !important;
}

/* الوضع الليلي */
.dark .fi-theme-switcher-btn {
    color: #9ca3af !important;
}

.dark .fi-theme-switcher-btn svg {
    color: #9ca3af !important;
}

.dark .fi-theme-switcher-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .fi-theme-switcher-btn.fi-active {
    color: #e2a53e !important;
    background-color: rgba(226, 165, 62, 0.2) !important;
}

.dark .fi-theme-switcher-btn.fi-active svg {
    color: #e2a53e !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIX: أزرار تبديل الوضع داخل dropdown - الوضع النهاري        */
/* ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                    TOPBAR FIX v2 - 2024-12-15                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.fi-topbar { background: var(--tls-primary, #e2a53e) !important; border-bottom: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important; }
.fi-topbar, .fi-topbar a, .fi-topbar span, .fi-topbar button, .fi-topbar [class*="brand"] { color: #ffffff !important; }
.fi-topbar svg, .fi-topbar .fi-icon-btn svg { color: #ffffff !important; stroke: #ffffff !important; }
.fi-topbar button:hover, .fi-topbar a:hover { background: rgba(255,255,255,0.15) !important; border-radius: 8px !important; }

:root:not(.dark) .fi-dropdown-panel, :root:not(.dark) [x-float-container] > div { background: #ffffff !important; border: 1px solid #e5e7eb !important; }
:root:not(.dark) .fi-dropdown-panel .fi-dropdown-list-item, :root:not(.dark) .fi-dropdown-panel .fi-dropdown-list-item span { color: #374151 !important; }
:root:not(.dark) .fi-dropdown-panel svg, :root:not(.dark) .fi-dropdown-list-item svg { color: #6b7280 !important; stroke: #6b7280 !important; }
:root:not(.dark) .fi-dropdown-list-item:hover { background: #f3f4f6 !important; }

.dark .fi-dropdown-panel, .dark [x-float-container] > div { background: #1f2937 !important; border: 1px solid #374151 !important; }
.dark .fi-dropdown-panel *, .dark .fi-dropdown-list-item span { color: #e5e7eb !important; }
.dark .fi-dropdown-panel svg, .dark .fi-dropdown-list-item svg { color: #e5e7eb !important; stroke: #e5e7eb !important; }
.dark .fi-dropdown-list-item:hover { background: #374151 !important; }

.fi-topbar > * > span, .fi-topbar [class*="brand"] span, .fi-topbar .flex span { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                    CHECKBOX & RADIO FIX - 2024-12-16                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* الوضع النهاري - Checkbox */
input[type="checkbox"],
.fi-checkbox-input {
    accent-color: #e2a53e !important;
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

input[type="checkbox"]:checked,
.fi-checkbox-input:checked {
    background-color: #e2a53e !important;
    border-color: #e2a53e !important;
}

/* الوضع النهاري - Radio */
input[type="radio"],
.fi-radio-input {
    accent-color: #e2a53e !important;
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

input[type="radio"]:checked,
.fi-radio-input:checked {
    background-color: #e2a53e !important;
    border-color: #e2a53e !important;
}

/* الوضع الليلي - Checkbox */
.dark input[type="checkbox"],
.dark .fi-checkbox-input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

.dark input[type="checkbox"]:checked,
.dark .fi-checkbox-input:checked {
    background-color: #e2a53e !important;
    border-color: #e2a53e !important;
}

/* الوضع الليلي - Radio */
.dark input[type="radio"],
.dark .fi-radio-input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

.dark input[type="radio"]:checked,
.dark .fi-radio-input:checked {
    background-color: #e2a53e !important;
    border-color: #e2a53e !important;
}

/* Toggle Switch */
.fi-toggle-input:checked {
    background-color: #e2a53e !important;
}

.dark .fi-toggle-input {
    background-color: #374151 !important;
}

.dark .fi-toggle-input:checked {
    background-color: #e2a53e !important;
}

/* Select/Dropdown checkmark */
.fi-select-option-check-icon,
[data-selected="true"] svg {
    color: #e2a53e !important;
}

.dark .fi-select-option-check-icon,
.dark [data-selected="true"] svg {
    color: #e2a53e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                    CHECKBOX & RADIO CURSOR FIX - 2024-12-16                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* إظهار شكل اليد على جميع عناصر الاختيار */
input[type="checkbox"],
input[type="radio"],
.fi-checkbox-input,
.fi-radio-input,
.fi-toggle-input,
[role="checkbox"],
[role="radio"],
[role="switch"],
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    cursor: pointer !important;
}

/* Labels المرتبطة */
.fi-checkbox label,
.fi-radio label,
.fi-toggle label,
.fi-fo-checkbox label,
.fi-fo-radio label,
.fi-fo-toggle label {
    cursor: pointer !important;
}

/* الجداول - أعمدة الاختيار */
.fi-ta-checkbox,
.fi-ta-checkbox input,
.fi-ta-checkbox label,
td:has(input[type="checkbox"]),
th:has(input[type="checkbox"]) {
    cursor: pointer !important;
}