/* ════════════════════════════════════════════════════════════════
   combined.css — Bridge OS HRS
   Merged from: style.css + fixes.css + fixes2.css + animations.css
   Generated: 2026-03-08
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   SECTION 1 — style.css (Base Styles)
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════ */
/* style.css | Bridge OS HRS | 2026-03-03 */
/* ══════════════════════════════════════════════════════════════ */


        /* رفع طبقة الإشعارات لتظهر فوق نافذة الذكاء الاصطناعي وكل النوافذ الأخرى */
        .toast, #toast-container, .notification, .alert-box {
            z-index: 999999 !important;
        }
		/* تأثير النبض لجذب الانتباه عند فتح التطبيق */
		

		.ai-hint-pulse {
			animation: ai-pulse-glow 2s infinite;
			background: rgba(56, 189, 248, 0.2) !important;
			border-radius: 5px;
		}

		#ai-taskbar-button:hover {
			background: rgba(56, 189, 248, 0.15);
		}

		/* تأثير الوميض (Glow) للفقاعة */
		

				.ai-welcome-tooltip {
			position: fixed;
			top: 25px;
			right: 25px;
			background: #1e293b;
			color: #f8fafc;
			padding: 15px;
			border-radius: 12px;
			font-size: 14px;
			border: 1px solid #38bdf8;
			box-shadow: 0 10px 30px rgba(0,0,0,0.5);
			z-index: 999999;
			opacity: 0;
			visibility: hidden;
			transform: translateX(30px);
			transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			max-width: 300px;
			direction: rtl;
		}

		.ai-tooltip-show {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
			animation: ai-glow-blink 2s infinite ease-in-out;
		}

		/* تنسيق أزرار الأكشن داخل الفقاعة */
		.ai-hint-actions {
			display: flex;
			gap: 10px;
			margin-top: 12px;
			border-top: 1px solid rgba(56, 189, 248, 0.2);
			padding-top: 10px;
		}

		.ai-btn-primary {
			background: #38bdf8;
			color: #0f172a;
			border: none;
			padding: 6px 12px;
			border-radius: 6px;
			font-size: 12px;
			font-weight: bold;
			cursor: pointer;
			flex: 1;
		}

		.ai-btn-secondary {
			background: transparent;
			color: #94a3b8;
			border: 1px solid #475569;
			padding: 6px 12px;
			border-radius: 6px;
			font-size: 12px;
			cursor: pointer;
			flex: 1;
		}

		.ai-btn-primary:hover { background: #7dd3fc; }
		.ai-btn-secondary:hover { color: #f1f5f9; border-color: #94a3b8; }

		.ai-welcome-tooltip:hover {
			background: #2d3a4f;
			transform: scale(1.05) translateY(-5px);
			border-color: white;
		}

		.ai-welcome-tooltip small {
			color: #94a3b8;
			margin-top: 4px;
			font-size: 10px;
		}

        :root {
            /* Puter.com Web OS Theme */
            --bg-primary: rgba(30, 30, 30, 0.6); 
            --bg-secondary: rgba(45, 45, 45, 0.7); 
            --bg-tertiary: rgba(60, 60, 60, 0.8);
            --text-primary: #ffffff;
            --text-secondary: #e2e8f0;
            --accent-gold: #fbbf24;
            --accent-teal: #38bdf8;
            --danger: #ef4444;
            --success: #10b981;
            --warning: #f59e0b; 
            --border-color: rgba(255, 255, 255, 0.15);
            --window-radius: 12px;
            --ticker-speed: 20s;
            --ticker-opacity: 0.9;
            /* Unified Z-Index Layers */
            --z-desktop: 10;
            --z-window: 500;
            --z-taskbar: 9999;
            --z-overlay: 10000;
            --z-modal: 10001;
            --z-dropdown: 10002;
            --z-context: 10005;
            --z-header: 9000;
            --z-toast: 10010;
            /* Default Glass Variables */
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        /* --- Aljisr Toast System --- */
        #os-notification-container {
            position: fixed;
            top: 70px; /* نقلناها للأعلى لتجنب مربع المحادثة */
            right: 20px;
            z-index: var(--z-toast);
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            max-height: calc(100vh - 100px); /* لمنع تجاوز الشاشة */
            overflow: hidden;
        }

        .os-toast {
            min-width: 280px;
            max-width: 350px;
            background: rgba(25, 25, 25, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 12px;
            padding: 15px;
            color: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            pointer-events: auto;
            animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            position: relative;
            overflow: hidden;
        }

        .os-toast::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: #38bdf8;
            width: 100%;
            animation: toastProgress 5s linear forwards;
        }

        

        

        .os-toast.error { border-color: rgba(239, 68, 68, 0.5); }
        .os-toast.error::after { background: #ef4444; }
        .os-toast.success { border-color: rgba(34, 197, 94, 0.5); }
        .os-toast.success::after { background: #22c55e; }

        .os-toast-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            color: #38bdf8;
        }
        .os-toast-content { flex-grow: 1; }
        .os-toast-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 3px; }
        .os-toast-msg { font-size: 0.8rem; opacity: 0.8; line-height: 1.4; }

        /* --- OS Context Menu --- */
        .os-context-menu {
            position: absolute;
            background: rgba(20, 20, 20, 0.75);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            padding: 5px;
            min-width: 180px;
            z-index: var(--z-context);
            display: none;
            flex-direction: column;
        }
        .os-context-menu-item {
            padding: 8px 12px;
            color: #e2e8f0;
            font-size: 0.85rem;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
        }
        .os-context-menu-item:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }
        .os-context-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 4px 0;
        }

        /* --- OS Window Controls --- */
        .os-window-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .os-win-btn {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }
        .os-win-btn:hover { transform: scale(1.1); }
        .os-win-close { background-color: #ff5f56; }
        .os-win-min { background-color: #ffbd2e; }
        .os-win-max { background-color: #27c93f; }
        .os-win-btn::before {
            content: '';
            opacity: 0;
            font-size: 9px;
            color: rgba(0,0,0,0.6);
            font-weight: bold;
            transition: opacity 0.2s;
        }
        .os-window-controls:hover .os-win-btn::before { opacity: 1; }
        .os-win-close::before { content: '✕'; }
        .os-win-min::before { content: '−'; }
        .os-win-max::before { content: '⤢'; font-size: 8px; }
        
        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
		/* Unified margin-bottom removal for header form groups globally */
        .grid-auto-fit .form-group, 
        .flex-wrap-start .form-group,
        .header-bar-std .form-group,
        .theme-card-highlight .form-group,
        .grid-filter-bar .form-group,
        .grid-budget-meta .form-group,
        .grid-budget-dates .form-group,
        .toolbar-panel .form-group {
            margin-bottom: 0;
        }
		
		/* --- Staff Table Specifics --- */
		/* Force Scrollbar & Sticky Header Styles */
		/* --- Staff Table Specifics (Flexbox Fix) --- */
		#staffTableContainer {
			flex: 1; /* يأخذ كل المساحة المتبقية المتاحة في النافذة */
			overflow: auto; /* يظهر أشرطة التمرير هنا حصراً */
			width: 100%;
            height: 100%; /* ضمان التمدد */
			border: 1px solid var(--border-color);
			border-radius: 6px;
			background: var(--bg-primary);
            position: relative; 
            margin-bottom: 5px; /* مسافة صغيرة في الأسفل */
		}

		/* تنسيق شريط التمرير ليكون عريضاً وواضحاً جداً */
		#staffTableContainer::-webkit-scrollbar {
			height: 18px; /* ارتفاع الشريط الأفقي */
			width: 18px;  /* عرض الشريط العمودي */
		}
        
		#staffTableContainer::-webkit-scrollbar-thumb {
			background-color: var(--accent-teal); 
			border-radius: 10px;
			border: 3px solid var(--bg-secondary);
		}

		#staffTableContainer::-webkit-scrollbar-track {
			background: var(--bg-tertiary);
            border-radius: 4px;
		}
        
        /* التخلص من المربع البشع لتقاطع أشرطة التمرير وجعله شفافاً أو متناسقاً */
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        #staffTableContainer::-webkit-scrollbar-corner, 
        .data-table::-webkit-scrollbar-corner,
        .module-content::-webkit-scrollbar-corner {
            background: var(--bg-primary);
        }
		
		table thead th.sticky-header-th {
            position: sticky;
            top: 0;
            z-index: 20; /* Higher than checkbox column */
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
		}

		/* --- Smart Filter Bar Styling --- */
		.smart-filter-bar {
			background: transparent;
			padding: 0 0 15px 0;
			margin-bottom: 15px;
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			align-items: center;
		}

		.smart-search-wrapper {
			position: relative;
			flex-grow: 1;
			min-width: 200px;
		}

		.toolbar-panel .smart-search-input,
        .smart-search-wrapper .smart-search-input,
        input.smart-search-input {
            padding: 6px 16px 6px 40px;
            height: 36px;
            border-radius: 20px;
            border: 1px solid var(--accent-teal);
            background: var(--bg-primary);
			color: var(--text-primary);
			transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            font-size: 0.85rem;
            width: 100%;
		}

		.smart-search-input:focus {
			box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
			outline: none;
		}

		.smart-search-icon {
			position: absolute;
			left: 14px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--accent-teal);
		}

		.toolbar-panel .smart-select,
        select.smart-select {
            padding: 6px 16px;
            height: 36px;
            border-radius: 20px;
            border: 1px solid var(--accent-gold);
            background: var(--bg-primary);
			color: var(--text-primary);
			cursor: pointer;
			font-size: 0.85rem;
			transition: border-color 0.2s, box-shadow 0.2s;
			min-width: 140px;
            box-sizing: border-box;
		}

		.smart-select:hover {
			border-color: var(--accent-gold);
			background: var(--bg-primary);
		}

		.filter-badge {
			background: var(--accent-teal);
			color: white;
			padding: 2px 8px;
			border-radius: 10px;
			font-size: 0.75rem;
			margin-left: 5px;
		}

		.results-counter {
			font-size: 0.85rem;
			color: var(--text-secondary);
			font-weight: bold;
			margin-left: auto;
			padding: 5px 10px;
			background: rgba(0,0,0,0.1);
			border-radius: 8px;
		}
		
		/* --- Universal Glow Effect (Tables & Archives) --- */
		/* Target both Table Rows and Financial Cards */
		tr.row-selected,
		.fin-row-card.row-selected,
		.archive-card.row-selected,
		.archive-list .archive-row-card.row-selected,
        .archive-row-card.row-selected[data-selected="true"] {
            box-shadow: 0 0 15px rgba(56, 178, 172, 0.6);
            background-color: rgba(56, 178, 172, 0.15);
            border-left: 4px solid var(--accent-teal);
			z-index: 50;
			position: relative;
			transition: all 0.2s ease;
		}

		/* Ensure content remains visible & overrides striping */
		tr.row-selected td,
		.fin-row-card.row-selected > div,
		.archive-row-card.row-selected > div {
			background-color: transparent;
			color: inherit;
		}
		/* --- 🔴 THEME: GOOGLE MATERIAL DESIGN --- */
		body.theme-google {
			--bg-primary: #f8f9fa;       /* Google light gray background */
			--bg-secondary: #ffffff;     /* White surfaces */
			--bg-tertiary: #f1f3f4;      /* Sidebar and hover states */
			--text-primary: #202124;     /* Standard Google text black */
			--text-secondary: #5f6368;   /* Gray descriptive text */
			--accent-gold: #fbbc04;      /* Google Yellow */
			--accent-teal: #1a73e8;      /* Google Blue (Primary) */
			--danger: #d93025;           /* Google Red */
			--success: #188038;          /* Google Green */
			--warning: #f9ab00;          /* Google Amber */
			--border-color: #dadce0;     /* Light gray borders */
			--window-radius: 8px;
			
			font-family: 'Product Sans', 'Roboto', Arial, sans-serif;
		
    /* ✅ completed theme vars */
    --ticker-opacity: 0.8;
    --ticker-speed: 18s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

		/* Material Header Style */
		body.theme-google .header {
			background: #ffffff !important;
			border-bottom: 1px solid #dadce0 !important;
			box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
		}

		/* Rounded "Pill" Buttons */
		body.theme-google .btn-primary,
		body.theme-google .btn-success,
		body.theme-google button.add-widget-btn,
        body.theme-google .add-widget-btn.button {
            border-radius: 24px;
			text-transform: none;
			font-weight: 500;
			letter-spacing: .25px;
		}

		body.theme-google .btn-primary, 
		body.theme-google .add-widget-btn {
			background: #1a73e8 !important;
			color: #ffffff !important; /* إجبار لون الخط على الأبيض لحل مشكلة التباين */
		}

		body.theme-google button.btn-success,
        body.theme-google .btn-success.button {
            background: #188038;
            color: #ffffff;
		}

		/* Card Shadow Effect */
		body.theme-google .widget-box, 
		body.theme-google .module-window.window,
        body.theme-google div.module-window {
            border: 1px solid #dadce0;
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15) !important;
			border-radius: 8px !important;
		}

		body.theme-google .btn-danger {
			color: #d93025 !important;
			border-color: #d93025 !important;
		}
		body.theme-google .btn-secondary {
			color: #1a73e8 !important;
			border-color: #1a73e8 !important;
		}

		/* Hover effects for list items */
		body.theme-google .list-item:hover {
			background-color: #f1f3f4 !important;
		}

        /* --- 💧 THEME: CLASSIC AQUA (Mac OS X Style) --- */
		body.theme-aqua {
			--bg-primary: #ffffff;
			--bg-secondary: #e8e8e8;
			--bg-tertiary: #f2f2f2;
			--text-primary: #000000;
			--text-secondary: #444444;
			--accent-gold: #f0c330;
			--accent-teal: #1e69de;
			--danger: #e63b3b;
			--success: #4cd964;
			--border-color: #b0b0b0;
			--window-radius: 8px;
			--glass-bg: rgba(255, 255, 255, 0.8);
			--glass-border: rgba(0, 0, 0, 0.1);
			
			font-family: 'Lucida Grande', 'Segoe UI', sans-serif;
			
			/* 1. خلفية الخطوط (Pinstripes) باستخدام CSS فقط */
			background-color: #e8e8e8 !important;
			background-image: repeating-linear-gradient(
				0deg,
				transparent,
				transparent 1px,
				#ffffff 1px,
				#ffffff 2px
			) !important;
			background-size: 100% 4px !important;
		
    /* ✅ completed theme vars */
    --warning: #f0a800;
    --ticker-opacity: 0.85;
    --ticker-speed: 18s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

		/* 2. تصميم النوافذ والهيدر (معدني متدرج) */
		body.theme-aqua .header, 
		body.theme-aqua .widget-header, 
		body.theme-aqua .module-header,
		body.theme-aqua .modal-header {
			background: linear-gradient(to bottom, #f0f0f0 0%, #dcdcdc 50%, #bcbcbc 51%, #a0a0a0 100%) !important;
			border-bottom: 1px solid #888 !important;
			color: #333 !important;
			text-shadow: 0 1px 0 rgba(255,255,255,0.7);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
		}

		body.theme-aqua .widget-box, 
		body.theme-aqua .module-window, 
		body.theme-aqua .modal {
			background: #ffffff !important;
			border: 1px solid #999 !important;
			box-shadow: 0 10px 35px rgba(0,0,0,0.3) !important;
			border-radius: 6px !important;
		}

		/* 3. الأزرار الزجاجية (Aqua Gel Buttons) */
		body.theme-aqua .btn-primary,
		body.theme-aqua .btn-success,
		body.theme-aqua .add-widget-btn {
			color: white !important;
			border-radius: 15px !important;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.2) !important;
			text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
			font-weight: bold !important;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		body.theme-aqua .btn-primary,
		body.theme-aqua .add-widget-btn {
			background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) !important;
			border: 1px solid #104a8e !important;
		}
		
		body.theme-aqua .btn-success {
			background: linear-gradient(to bottom, #7ce092 0%, #4cd964 50%, #28c940 51%, #1e9e30 100%) !important;
			border: 1px solid #146b1f !important;
		}

		body.theme-aqua .btn-primary:hover,
		body.theme-aqua .btn-success:hover {
			filter: brightness(1.1);
		}

		body.theme-aqua .btn-secondary, 
		body.theme-aqua .action-btn {
			background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 50%, #e0e0e0 51%, #cfcfcf 100%) !important;
			border: 1px solid #999 !important;
			color: #333 !important;
			border-radius: 15px !important;
			box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
		}

		body.theme-aqua .btn-danger {
			background: linear-gradient(to bottom, #ff8a80 0%, #e63b3b 50%, #c0392b 51%, #a93226 100%) !important;
			border: 1px solid #922b21 !important;
			color: white !important;
			border-radius: 15px !important;
		}
		/* btn-secondary - already defined above with .action-btn */

		/* 4. شريط المهام (Dock Style) */
		body.theme-aqua #taskbarContainer {
			background: rgba(255, 255, 255, 0.75) !important;
			backdrop-filter: blur(10px);
			border-top: 1px solid #aaa !important;
			box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
		}

		body.theme-aqua .taskbar-item.active {
			background: linear-gradient(to bottom, #d6e8f9 0%, #a2d2f7 100%) !important;
			border: 1px solid #7cb6e6 !important;
			color: #1e69de !important;
			box-shadow: inset 0 1px 3px rgba(255,255,255,0.8);
		}

		/* 5. الجداول والقوائم */
		body.theme-aqua .data-table th {
			background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%) !important;
			border-right: 1px solid #ccc !important;
			color: #333 !important;
		}

		body.theme-aqua .data-table tr:nth-child(even) {
			background-color: #f2f6fa !important; /* تخطيط أزرق فاتح جداً */
		}

		/* 6. أزرار التحكم بالنوافذ (Stoplights) */
		body.theme-aqua .window-btn,
		body.theme-aqua .widget-btn {
			border-radius: 50% !important;
			width: 14px !important;
			height: 14px !important;
			color: transparent !important; /* إخفاء الأيقونات لمحاكاة الماك مع إظهارها عند التحويم */
			border: 1px solid rgba(0,0,0,0.2) !important;
			box-shadow: inset 0 1px 2px rgba(255,255,255,0.6);
			margin-right: 6px !important;
            transition: color 0.2s ease;
		}
        body.theme-aqua .window-btn:hover,
        body.theme-aqua .widget-btn:hover {
            color: rgba(0,0,0,0.6) !important;
        }
		body.theme-aqua .btn-close, body.theme-aqua .win-btn-close { background: #ff5f57 !important; }
		body.theme-aqua .btn-minimize { background: #ffbd2e !important; }
		body.theme-aqua .widget-btn.pinned { background: #28c940 !important; }
		/* تأثيرات النوافذ الحركية */
		.module-window {
			position: absolute !important;
			width: 80%;
			left: 10%;
			top: 85px;
			height: 75vh;
			bottom: auto;
			margin: 0 !important;
			right: auto !important;
			background: var(--bg-primary);
			border: 1px solid var(--border-color);
			display: flex;
			flex-direction: column;
			pointer-events: auto;
			box-shadow: 0 0 50px rgba(0,0,0,0.5);
			animation: fadeIn 0.2s ease-out;
			resize: both !important;
			overflow: hidden !important;
			min-width: 350px;
			min-height: 250px;
			max-width: 100vw;
			max-height: 90vh;
			transition: box-shadow 0.1s ease;
		}
		/* توهج خفيف عند الضغط على زر الترتيب */
		
		.window-arranging {
			animation: arrange-glow 0.5s ease-out;
		}

		/* الحالة عندما تكون النافذة نشطة */
		.module-window:not(.hidden) {
			transform: scale(1) translateY(0);
			opacity: 1;
		}
		/* تأثير أثناء السحب */
		.module-window:active {
			box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
			/* transform: scale(1.02) !important; REMOVED: This caused checkboxes to miss clicks */
		}

		/* ضمان عدم خروج النافذة خلف الهيدر - handled by #windowsContainer below */

		/* تأثير عند إغلاق النافذة */
		.window-closing {
			transform: scale(0.9) translateY(20px) !important;
			opacity: 0 !important;
		}

		/* تأثير التوهج للزر النشط في شريط المهام */
		.taskbar-item.active {
			position: relative;
			overflow: hidden;
		}

		.taskbar-item.active::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 30%;
			height: 3px;
			background: var(--accent-teal);
			box-shadow: 0 0 10px var(--accent-teal);
			border-radius: 10px;
		}
		/* --- 💻 THEME: SUPER MS-DOS / CYBER TERMINAL --- */
		body.theme-dos {
			--bg-primary: #050505;       /* أسود عميق جداً */
			--bg-secondary: #0a0a0a;     /* أسود أفتح قليلاً */
			--bg-tertiary: #001a00;      /* أخضر داكن جداً للخلفيات */
			--text-primary: #00ff41;     /* أخضر الفوسفور المشع */
			--text-secondary: #008f11;   /* أخضر أغمق للنصوص الثانوية */
			--accent-gold: #f0f000;      /* أصفر نيون */
			--accent-teal: #00ffff;      /* سماوي نيون */
			--danger: #ff3333;           /* أحمر رقمي */
			--success: #00ff41;          /* الأخضر الأساسي */
			--warning: #ff00ff;          /* ماجنتا للتحذيرات */
			--border-color: #003b00;     /* حدود خضراء داكنة */
			--window-radius: 0px;        /* حواف حادة تماماً */
			
			font-family: 'Courier New', 'Consolas', monospace !important;
			letter-spacing: 0.5px;
		
    /* ✅ completed theme vars */
    --ticker-opacity: 1;
    --ticker-speed: 12s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

		/* --- DOS SCROLLBAR FIX --- */
		body.theme-dos ::-webkit-scrollbar { width: 16px; height: 16px; }
		body.theme-dos ::-webkit-scrollbar-track { background: #000; border-left: 2px solid #003b00; }
		body.theme-dos ::-webkit-scrollbar-thumb { background: #003b00; border: 1px solid #00ff41; box-shadow: inset 0 0 5px #00ff41; }
		body.theme-dos ::-webkit-scrollbar-thumb:hover { background: #00ff41; border-color: #000; }
		body.theme-dos ::-webkit-scrollbar-corner { background: #000; }

		body.theme-dos::after {
			content: " ";
			display: block;
			position: fixed;
			top: 0; left: 0; bottom: 0; 
            /* الحل: إزاحة الطبقة 20 بكسل عن اليمين لكشف شريط التمرير تماماً */
            right: 20px; 
			pointer-events: none !important;
			background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
						linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); 
			z-index: calc(var(--z-window) - 10); /* تخفيض الطبقة لتكون تحت النوافذ */
			pointer-events: none;
		}

		/* توهج النصوص (Text Bloom) */
		body.theme-dos, body.theme-dos button, body.theme-dos input, body.theme-dos select {
			text-shadow: 0 0 4px rgba(0, 255, 65, 0.5);
		}

		/* النوافذ والويدجت */
		body.theme-dos .widget-box, 
		body.theme-dos .module-window, 
		body.theme-dos .modal {
			border: 2px solid var(--text-primary) !important;
			background-color: #000000 !important;
			box-shadow: 0 0 15px rgba(0, 255, 65, 0.2) !important;
		}

		/* الهيدر العلوي */
		body.theme-dos .header {
			background: #000 !important;
			border-bottom: 2px solid var(--text-primary) !important;
		}

		/* الأزرار (Solid Blocks) */
		body.theme-dos .btn-primary, 
		body.theme-dos .btn-success,
		body.theme-dos .add-widget-btn,
		body.theme-dos .action-btn {
			background: #000000 !important;
			color: var(--text-primary) !important;
			border: 1px solid var(--text-primary) !important;
			border-radius: 0 !important;
			text-transform: uppercase;
			font-weight: bold;
			box-shadow: none !important;
			transition: 0.1s !important;
		}

		body.theme-dos .btn-primary:hover,
		body.theme-dos .btn-success:hover,
		body.theme-dos .action-btn:hover {
			background: var(--text-primary) !important; /* عكس الألوان عند التحويم */
			color: #000000 !important;
			text-shadow: none;
			box-shadow: 0 0 10px var(--text-primary) !important;
		}

		/* حقول الإدخال */
		body.theme-dos .form-input, 
		body.theme-dos .form-select, 
		body.theme-dos .search-input {
			background: #000 !important;
			border: 1px solid var(--text-secondary) !important;
			color: var(--text-primary) !important;
			border-radius: 0 !important;
			border-left: 4px solid var(--text-secondary) !important;
		}

		body.theme-dos .form-input:focus {
			border-color: var(--text-primary) !important;
			box-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
		}

		/* الجداول */
		body.theme-dos .data-table th {
			background: var(--bg-tertiary) !important;
			color: var(--accent-teal) !important;
			border-bottom: 2px solid var(--text-primary) !important;
			text-transform: uppercase;
		}

		body.theme-dos .data-table td {
			border-bottom: 1px solid var(--border-color) !important;
			border-right: 1px dashed var(--border-color) !important;
		}

		body.theme-dos tr:hover td {
			background: var(--text-primary) !important;
			color: #000 !important; /* نص أسود على خلفية خضراء */
			text-shadow: none !important;
			font-weight: bold;
		}

		/* شريط المهام */
		body.theme-dos #taskbarContainer {
			background: #000 !important;
			border-top: 2px solid var(--text-primary) !important;
		}

		body.theme-dos .taskbar-item {
			background: #000 !important;
			border: 1px solid var(--text-secondary) !important;
			color: var(--text-secondary) !important;
			border-radius: 0 !important;
		}

		body.theme-dos .taskbar-item.active {
			background: var(--text-primary) !important;
			color: #000 !important;
			box-shadow: 0 0 10px var(--text-primary);
		}

		/* --- DOS: Missing Element Coverage --- */
		body.theme-dos .module-header,
		body.theme-dos .modal-header,
		body.theme-dos .widget-header {
			background: #001a00 !important;
			border-bottom: 2px solid var(--text-primary) !important;
			color: var(--text-primary) !important;
		}
		body.theme-dos .form-input,
		body.theme-dos .form-select,
		body.theme-dos input:not([type="checkbox"]):not([type="radio"]),
		body.theme-dos select,
		body.theme-dos textarea {
			background: #000 !important;
			border: 1px solid var(--text-secondary) !important;
			color: var(--text-primary) !important;
			border-radius: 0 !important;
			font-family: 'Courier New', monospace !important;
		}
		body.theme-dos .modal {
			background: #000 !important;
			border: 2px solid var(--text-primary) !important;
		}
		body.theme-dos .dropdown-content {
			background: #050505 !important;
			border: 1px solid var(--text-primary) !important;
		}
		body.theme-dos .dropdown-item {
			color: var(--text-primary) !important;
			border-bottom: 1px solid var(--border-color) !important;
		}
		body.theme-dos .dropdown-item:hover {
			background: var(--text-primary) !important;
			color: #000 !important;
		}
		body.theme-dos .list-item {
			background: #050505 !important;
			border-color: var(--border-color) !important;
			border-left-color: var(--text-secondary) !important;
		}
		body.theme-dos .module-window {
			border: 2px solid var(--text-primary) !important;
		}

		
		/* --- ثيم "الجمال المخملي" (Velvet Bloom) --- */
        body.theme-girly {
            --bg-primary: #fff5f7; /* خلفية وردية فاتحة جداً */
            --bg-secondary: #fce4ec; /* وردي ناعم للأسطح */
            --bg-tertiary: #f8bbd0; /* وردي أعمق للعناصر */
            --text-primary: #5c2d3a; /* نص بني محمر غامق للوضوح */
            --text-secondary: #8d5d6a;
            --accent-gold: #d4a373; /* ذهبي مطفي */
            --accent-teal: #f06292; /* وردي مشرق للأزرار */
            --danger: #e91e63;
            --success: #81c784;
            --warning: #ffd54f;
            --border-color: #f48fb1;
            --window-radius: 20px; /* زوايا دائرية أكثر أنوثة */
            font-family: 'Segoe UI', cursive, sans-serif;
        
    /* ✅ completed theme vars */
    --ticker-opacity: 0.9;
    --ticker-speed: 22s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

        body.theme-girly {
            background-image: linear-gradient(135deg, #fce4ec 0%, #ffebee 100%);
            background-attachment: fixed;
        }

        /* لمسات جمالية للنوافذ */
        body.theme-girly .widget-box,
        body.theme-girly .module-window,
        body.theme-girly .modal {
            border: 2px solid #f8bbd0 !important;
            box-shadow: 0 10px 25px rgba(240, 98, 146, 0.15) !important;
            backdrop-filter: blur(10px);
        }

        /* تجميل الهيدر (Header) */
        body.theme-girly .header {
            background: rgba(252, 228, 236, 0.8) !important;
            border-bottom: 2px solid var(--accent-teal) !important;
        }

        /* تجميل الأزرار */
        body.theme-girly .btn-primary,
        body.theme-girly .btn-success,
        body.theme-girly .add-widget-btn {
            color: white !important;
            border-radius: 25px !important;
            border: none !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        body.theme-girly .btn-primary,
        body.theme-girly .add-widget-btn {
            background: linear-gradient(45deg, #f06292, #ec407a) !important;
            box-shadow: 0 4px 12px rgba(236, 64, 122, 0.3) !important;
        }

        body.theme-girly .btn-success {
            background: linear-gradient(45deg, #81c784, #4caf50) !important;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
        }

        body.theme-girly .btn-primary:hover,
        body.theme-girly .btn-success:hover {
            transform: scale(1.05);
        }
        
        body.theme-girly .btn-primary:hover {
            box-shadow: 0 6px 15px rgba(236, 64, 122, 0.4) !important;
        }

        body.theme-girly .btn-success:hover {
            box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4) !important;
        }

        body.theme-girly .btn-danger {
            background: linear-gradient(45deg, #e91e63, #c2185b) !important;
            box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
            color: white !important;
            border-radius: 25px !important;
            border: none !important;
        }
        body.theme-girly .btn-secondary {
            background: linear-gradient(45deg, #d4a373, #c8956c) !important;
            box-shadow: 0 4px 12px rgba(212, 163, 115, 0.3) !important;
            color: white !important;
            border-radius: 25px !important;
            border: none !important;
        }

        /* شريط المهام السفلي */
        body.theme-girly #taskbarContainer {
            background: rgba(248, 187, 208, 0.9) !important;
            border-top: 2px solid var(--accent-teal) !important;
        }

        body.theme-girly .taskbar-item.active {
            background: #f06292 !important;
            color: white !important;
            border-radius: 12px !important;
        }

        /* تجميل الجداول */
        body.theme-girly .data-table th {
            background: #f8bbd0 !important;
            color: #880e4f !important;
        }

        body.theme-girly .data-table tr:hover td {
            background: #fff1f5 !important;
        }
        /* تجميل حقول الإدخال */
        body.theme-girly .form-input,
        body.theme-girly .form-select,
        body.theme-girly .smart-search-input {
            border-color: var(--border-color) !important;
            background: rgba(255, 255, 255, 0.8) !important;
        }
        body.theme-girly .form-input:focus,
        body.theme-girly .form-select:focus {
            border-color: var(--accent-teal) !important;
            box-shadow: 0 0 0 2px rgba(240, 98, 146, 0.15) !important;
        }

        /* --- Girly: Missing Element Coverage --- */
        body.theme-girly .module-header,
        body.theme-girly .widget-header,
        body.theme-girly .modal-header {
            background: linear-gradient(135deg, #fce4ec, #fce4ec) !important;
            border-bottom: 2px solid var(--accent-teal) !important;
            color: var(--text-primary) !important;
        }
        body.theme-girly .module-window {
            border: 2px solid var(--border-color) !important;
            border-radius: var(--window-radius) !important;
        }
        body.theme-girly .list-item {
            background: rgba(255, 255, 255, 0.9) !important;
            border-color: var(--border-color) !important;
        }
        body.theme-girly .list-item:hover {
            border-left-color: var(--accent-teal) !important;
        }
        body.theme-girly .taskbar-item {
            color: var(--text-primary) !important;
        }
        body.theme-girly .dropdown-content {
            background: #fff5f7 !important;
            border: 1px solid var(--border-color) !important;
        }

		/* Glassmorphism Theme Implementation */
		body.theme-glass {
			background: linear-gradient(135deg, #1e1e1e 0%, #2d3748 100%); /* خلفية متدرجة عميقة */
			background-attachment: fixed;
			--glass-bg: rgba(255, 255, 255, 0.05);
			--glass-border: rgba(255, 255, 255, 0.1);
			--accent-teal: #4fd1c5;
		
    /* ✅ completed theme vars */
    --accent-gold: #fbbf24;
    --bg-primary: rgba(255, 255, 255, 0.06);
    --bg-secondary: rgba(255, 255, 255, 0.10);
    --bg-tertiary: rgba(255, 255, 255, 0.15);
    --border-color: rgba(255, 255, 255, 0.20);
    --danger: #f87171;
    --success: #34d399;
    --warning: #fbbf24;
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --window-radius: 16px;
    --ticker-opacity: 0.6;
    --ticker-speed: 25s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

		/* تأثير الزجاج على النوافذ والويدجت */
		body.theme-glass .widget-box, 
		body.theme-glass .module-window, 
		body.theme-glass .modal {
			background: var(--glass-bg) !important;
			backdrop-filter: blur(15px) saturate(180%) !important;
			-webkit-backdrop-filter: blur(15px) saturate(180%) !important;
			border: 1px solid var(--glass-border) !important;
			border-radius: 20px !important;
			box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
		}

		/* الهيدر الزجاجي */
		body.theme-glass .header {
			background: rgba(30, 30, 30, 0.7) !important;
			backdrop-filter: blur(10px) !important;
			border-bottom: 1px solid var(--glass-border) !important;
		}

		/* شريط المهام السفلي */
		body.theme-glass #taskbarContainer {
			background: rgba(255, 255, 255, 0.03) !important;
			backdrop-filter: blur(20px) !important;
			border-top: 1px solid var(--glass-border) !important;
			margin: 10px;
			border-radius: 15px;
			width: calc(100% - 20px);
		}

		/* الأزرار المتوهجة (Neon Look) */
		body.theme-glass .btn-primary,
		body.theme-glass .btn-success {
			border: none !important;
			border-radius: 12px !important;
			transition: 0.3s;
		}

		body.theme-glass .btn-primary {
			background: linear-gradient(45deg, #4fd1c5, #38b2ac) !important;
			box-shadow: 0 4px 15px rgba(79, 209, 197, 0.4) !important;
		}

		body.theme-glass .btn-success {
			background: linear-gradient(45deg, #48bb78, #38a169) !important;
			box-shadow: 0 4px 15px rgba(72, 187, 120, 0.4) !important;
		}

		body.theme-glass .btn-primary:hover,
		body.theme-glass .btn-success:hover {
			transform: translateY(-2px);
		}

		body.theme-glass .btn-primary:hover {
			box-shadow: 0 6px 20px rgba(79, 209, 197, 0.6) !important;
		}
        
		body.theme-glass .btn-success:hover {
			box-shadow: 0 6px 20px rgba(72, 187, 120, 0.6) !important;
		}

		body.theme-glass .btn-danger {
			background: linear-gradient(45deg, #f87171, #ef4444) !important;
			box-shadow: 0 4px 15px rgba(248, 113, 113, 0.4) !important;
			border: none !important;
			border-radius: 12px !important;
		}
		body.theme-glass .btn-secondary {
			background: rgba(255, 255, 255, 0.1) !important;
			border: 1px solid rgba(255, 255, 255, 0.2) !important;
			border-radius: 12px !important;
		}
		body.theme-glass .btn-secondary:hover {
			background: rgba(255, 255, 255, 0.18) !important;
			color: var(--text-primary) !important;
		}

		/* --- Glass: Missing Element Coverage --- */
		body.theme-glass .module-header,
		body.theme-glass .widget-header,
		body.theme-glass .modal-header {
			background: rgba(255, 255, 255, 0.03) !important;
			backdrop-filter: blur(10px) !important;
			border-bottom: 1px solid var(--glass-border) !important;
		}
		body.theme-glass .form-input,
		body.theme-glass .form-select,
		body.theme-glass input:not([type="checkbox"]):not([type="radio"]),
		body.theme-glass select,
		body.theme-glass textarea {
			background: rgba(255, 255, 255, 0.07) !important;
			border: 1px solid rgba(255, 255, 255, 0.15) !important;
			color: var(--text-primary) !important;
			border-radius: 12px !important;
			backdrop-filter: blur(5px) !important;
		}
		body.theme-glass .form-input:focus,
		body.theme-glass .form-select:focus {
			border-color: var(--accent-teal) !important;
			box-shadow: 0 0 0 2px rgba(79, 209, 197, 0.2) !important;
		}
		body.theme-glass .taskbar-item {
			background: rgba(255, 255, 255, 0.05) !important;
			border: 1px solid rgba(255, 255, 255, 0.08) !important;
			border-radius: 8px !important;
			backdrop-filter: blur(10px) !important;
		}
		body.theme-glass .taskbar-item.active {
			background: rgba(79, 209, 197, 0.15) !important;
			border-color: var(--accent-teal) !important;
			border-bottom: 2px solid var(--accent-teal) !important;
		}
		body.theme-glass .list-item {
			background: var(--glass-bg) !important;
			border: 1px solid var(--glass-border) !important;
			backdrop-filter: blur(5px) !important;
		}
		body.theme-glass .dropdown-content {
			background: rgba(20, 20, 40, 0.85) !important;
			backdrop-filter: blur(20px) !important;
			border: 1px solid var(--glass-border) !important;
		}

		/* الجداول الزجاجية */
		body.theme-glass .data-table tr:hover td {
			background: rgba(255, 255, 255, 0.05) !important;
		}
		/* --- Windows 98 Theme (Classic) --- */
        body.theme-win98 {
            --bg-primary: #c0c0c0; /* الرمادي الكلاسيكي */
            --bg-secondary: #ffffff; /* خلفية النصوص بيضاء */
            --bg-tertiary: #dfdfdf;
            --text-primary: #000000;
            --text-secondary: #404040;
            --accent-gold: #000080; /* الأزرق الداكن للعناوين */
            --accent-teal: #008080; /* التركوازي للخلفية */
            --danger: #ff0000;
            --success: #008000;
            --warning: #808000;
            --border-color: #808080;
            --window-radius: 0px; /* لا يوجد زوايا دائرية */
            font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
        
    /* ✅ completed theme vars */
    --ticker-opacity: 0.8;
    --ticker-speed: 15s;
    --z-context: 10005;
    --z-desktop: 10;
    --z-dropdown: 10002;
    --z-modal: 10001;
    --z-overlay: 10000;
    --z-taskbar: 9999;
    --z-toast: 10010;
    --z-window: 500;
}

        body.theme-win98 {
            background-color: #008080; /* الخلفية التركوازية الشهيرة */
            background-image: none;
        }

        /* --- WIN98 SCROLLBAR FIX --- */
        body.theme-win98 ::-webkit-scrollbar { width: 16px; height: 16px; }
        body.theme-win98 ::-webkit-scrollbar-track { background: #dfdfdf; box-shadow: inset 1px 1px 0 #fff; }
        body.theme-win98 ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px outset #fff; }
        body.theme-win98 ::-webkit-scrollbar-thumb:active { border-style: inset; }
        body.theme-win98 ::-webkit-scrollbar-corner { background: #dfdfdf; }

        /* تصميم النوافذ (Beveled 3D Look) */
        body.theme-win98 .widget-box,
        body.theme-win98 .module-window,
        body.theme-win98 .modal {
            background: #c0c0c0 !important;
            border: 2px solid #dfdfdf !important;
            border-right-color: #404040 !important;
            border-bottom-color: #404040 !important;
            box-shadow: 1px 1px 0 #000, inset 1px 1px 0 #fff !important;
            border-radius: 0 !important;
        }

        /* شريط العنوان (Gradient Blue) */
        body.theme-win98 .header,
        body.theme-win98 .widget-header,
        body.theme-win98 .module-header {
            background: linear-gradient(to right, #000080, #1084d0) !important;
            color: white !important;
            padding: 4px 8px !important;
            border: none !important;
        }
        
        body.theme-win98 .header-title,
        body.theme-win98 .widget-title,
        body.theme-win98 .modal-title {
            color: white !important;
            font-weight: bold;
            text-shadow: none;
        }

        /* الأزرار (Classic 3D Buttons) */
        body.theme-win98 .btn-primary,
        body.theme-win98 .btn-success,
        body.theme-win98 .btn-secondary,
        body.theme-win98 .add-widget-btn,
        body.theme-win98 .action-btn {
            background: #c0c0c0 !important;
            color: black !important;
            border: 2px solid #fff !important;
            border-right-color: #404040 !important;
            border-bottom-color: #404040 !important;
            box-shadow: 1px 1px 0 #000 !important;
            border-radius: 0 !important;
            font-weight: normal;
        }

        body.theme-win98 .btn-primary:active,
        body.theme-win98 .btn-success:active,
        body.theme-win98 .btn-secondary:active,
        body.theme-win98 .action-btn:active {
            border: 2px solid #404040 !important;
            border-right-color: #fff !important;
            border-bottom-color: #fff !important;
            box-shadow: none !important;
            transform: translate(1px, 1px);
        }

        /* الحقول والنصوص (Inset 3D) */
        body.theme-win98 .form-input, 
        body.theme-win98 .form-select,
        body.theme-win98 .search-input {
            background: #ffffff !important;
            border: 2px solid #404040 !important;
            border-right-color: #fff !important;
            border-bottom-color: #fff !important;
            box-shadow: inset 1px 1px 0 #000 !important;
            border-radius: 0 !important;
        }

        /* شريط المهام (Classic Grey) */
        body.theme-win98 #taskbarContainer {
            background: #c0c0c0 !important;
            border-top: 2px solid #fff !important;
            box-shadow: 0 -1px 0 #000 inset !important;
            justify-content: flex-start;
            padding: 4px;
        }

        body.theme-win98 .taskbar-item {
            background: #c0c0c0 !important;
            border: 2px solid #fff !important;
            border-right-color: #404040 !important;
            border-bottom-color: #404040 !important;
            box-shadow: 1px 1px 0 #000 !important;
            border-radius: 0 !important;
            margin-right: 4px;
            color: black !important;
            font-weight: bold;
        }

        body.theme-win98 .taskbar-item.active {
            background: #dfdfdf !important;
            border: 2px solid #404040 !important;
            border-right-color: #fff !important;
            border-bottom-color: #fff !important;
            box-shadow: none !important;
            background-image: repeating-linear-gradient(45deg, #c0c0c0 0px, #c0c0c0 2px, #fff 2px, #fff 4px); /* Dither pattern attempt */
        }

        /* القوائم المنسدلة */
        body.theme-win98 .dropdown-content {
            background: #c0c0c0 !important;
            border: 2px solid #dfdfdf !important;
            border-right-color: #404040 !important;
            border-bottom-color: #404040 !important;
            box-shadow: 2px 2px 0 #000 !important;
            border-radius: 0 !important;
        }
        
        body.theme-win98 .dropdown-item:hover {
            background: #000080 !important;
            color: white !important;
        }

        /* أزرار الإغلاق والتصغير في النوافذ */
        body.theme-win98 .window-btn,
        body.theme-win98 .widget-btn {
            background: #c0c0c0 !important;
            border: 1px solid #fff !important;
            border-right-color: #404040 !important;
            border-bottom-color: #404040 !important;
            box-shadow: 1px 1px 0 #000 !important;
            border-radius: 0 !important;
            color: black !important;
            width: 16px !important;
            height: 14px !important;
            line-height: 10px;
            font-size: 10px !important;
            font-family: sans-serif;
        }

        .news-ticker-container {
            position: fixed;
            bottom: 50px;   /* فوق شريط المهام (50px) */
            top: auto;
            left: 0;
            width: 100%;
            height: 35px;
            background: rgba(30, 30, 30, var(--ticker-opacity));
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
            z-index: 9998; /* أسفل taskbar (9999) وأسفل النوافذ المنبثقة */
            overflow: hidden;
            display: flex;
            align-items: center;
            backdrop-filter: blur(5px);
            margin-bottom: 0 !important;
        }

        /* المسار المتحرك */
        .news-ticker-track {
            display: inline-flex;
            white-space: nowrap;
            padding-right: 50px;
            animation: tickerScroll var(--ticker-speed) linear infinite;
            transform: translateX(100vw); /* يبدأ من أقصى يمين الشاشة */
        }
        
        /* إيقاف الحركة عند وضع الماوس على الشريط بالكامل */
        .news-ticker-container:hover .news-ticker-track {
            animation-play-state: paused !important;
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            margin-right: 20px;
            border-radius: 20px;
            font-size: 0.85rem;
            color: white;
            font-weight: 500;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            transition: transform 0.2s;
            cursor: default;
        }
        
        .ticker-item:hover {
            transform: scale(1.05);
            z-index: 10;
        }

        /* ألوان التنبيهات */
        .ticker-item.error {
			animation: pulse-red 2s infinite;
			background: linear-gradient(90deg, #c53030, #9b2c2c);
			border: 1px solid #742a2a;
		}

		
        .ticker-item.warning { background: linear-gradient(90deg, #d69e2e, #b7791f); border: 1px solid #975a16; }
        .ticker-item.success { background: linear-gradient(90deg, #38a169, #2f855a); border: 1px solid #276749; }
        .ticker-item.info { background: linear-gradient(90deg, #3182ce, #2b6cb0); border: 1px solid #2c5282; }

        /* زر الحذف الصغير */
        .ticker-close-btn {
            margin-left: 8px;
            background: rgba(0,0,0,0.25);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            min-width: 20px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 11px;
            line-height: 1;
            transition: background 0.2s, transform 0.15s;
            flex-shrink: 0;
            vertical-align: middle;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: all !important;
        }

        .ticker-close-btn:hover {
            background: rgba(239,68,68,0.7);
            border-color: rgba(239,68,68,0.8);
            transform: scale(1.15);
            color: white;
        }

        

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            /* --- تحسين دقة ووضوح الخطوط (Anti-aliasing) --- */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* إجبار حقول الإدخال والأزرار على وراثة الخط الواضح الجديد */
        button, input, select, textarea {
            font-family: inherit;
        }

        html {
            font-size: 12px; /* 75% من الحجم الافتراضي */
        }

        body {
            width: 100%;
            height: 100vh; 
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2064&auto=format&fit=crop') no-repeat center center fixed;
            background-size: cover;
            color: var(--text-primary);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            font-weight: 400; 
            -webkit-font-smoothing: antialiased;
        }

        /* --- OS Custom Scrollbars --- */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.4);
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
        }

        /* --- Widget Manager & Controls --- */
        #widgetDropdownMenu {
            position: absolute;
            top: 55px;
            right: 24px;
            background: rgba(30, 30, 30, 0.9);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            padding: 10px;
            z-index: 10020;
            display: none;
            flex-direction: column;
            min-width: 220px;
        }
        .widget-menu-item {
            padding: 10px 14px;
            color: #e2e8f0;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.9rem;
            margin-bottom: 2px;
        }
        .widget-menu-item:hover { 
            background: rgba(255, 255, 255, 0.1); 
            color: #fff;
        }
        .widget-menu-item.active {
            border-left: 3px solid #38bdf8;
            background: rgba(56, 189, 248, 0.1);
        }
        .widget-menu-item.active::after { content: '✔️'; font-size: 0.8rem; }
        .widget-menu-item.inactive::after { content: '➕'; font-size: 0.8rem; opacity: 0.7; }

        /* أزرار التحكم في الويدجيت (التثبيت والإغلاق) */
        .widget-os-controls {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            z-index: 1000;
            opacity: 1;
            pointer-events: all;
            margin-left: auto;
        }
        .widget-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            color: white;
            border: 1px solid rgba(255,255,255,0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            transition: all 0.2s;
            background: rgba(40, 40, 40, 0.9);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .widget-btn svg {
            pointer-events: none;
        }
        .widget-btn.close-btn-os { background: rgba(239, 68, 68, 0.9); }
        .widget-btn.close-btn-os:hover { background: #ff5f56; transform: scale(1.1); }
        .widget-btn.pin-btn-os { background: rgba(100, 100, 100, 0.9); }
        .widget-btn.pin-btn-os:hover { background: #38bdf8; transform: scale(1.1); }
        .widget-btn.pin-btn-os.active { background: #38bdf8; border-color: #fff; }
        
        /* --- Clean OS Layout Fix --- */
        /* إخفاء كافة الأزرار القديمة تماماً لضمان عدم ظهور زرين */
        .widget-header button:not(.widget-btn), .widget-card > button:not(.widget-btn), .close-widget, .remove-widget, .widget-controls, .widget-close-btn {
            display: none !important;
        }
        
        /* إلغاء الـ Grid القديم مع الحفاظ على التحكم البرمجي */
        #widgetsGrid {
            display: block; 
            pointer-events: none;
        }
        #widgetsGrid > [id^="widget-"] {
            pointer-events: auto;
        }

        /* توحيد أحجام الويدجات لتكون أنيقة ومقاس واحد بدون إجبار الظهور */
        #widgetsGrid > .widget-card, #widgetsGrid > .widget, #widgetsGrid > [id^="widget-"] {
            width: 320px;
            height: 380px;
            flex-direction: column !important;
            overflow: hidden;
            position: absolute !important;
            resize: both;
            min-width: 220px;
            min-height: 200px;
        }
        
        /* تفعيل التصميم الداخلي (Flex) فقط للويدجات التي قمت أنت بفتحها */
        #widgetsGrid > .widget-card:not([style*="display: none"]), 
        #widgetsGrid > .widget:not([style*="display: none"]), 
        #widgetsGrid > [id^="widget-"]:not([style*="display: none"]) {
            display: flex !important;
        }
        
        /* حالة التكبير القصوى للويدجات (ملاصقة تماماً للشريط العلوي والسفلي) */
        #widgetsGrid > .widget-maximized {
            width: 100vw !important;
            height: calc(100vh - 96px) !important; /* 100vh - 46px(Header) - 50px(Taskbar) */
            top: 46px !important;
            left: 0 !important;
            border-radius: 0 !important;
            z-index: 2005 !important;
            margin: 0 !important;
            transform: none !important;
        }

        .widget-btn.max-btn-os { background: rgba(39, 201, 63, 0.9); font-size: 14px; }
        .widget-btn.max-btn-os:hover { background: #27c93f; transform: scale(1.1); }

        /* --- WEB OS DESKTOP ICONS GRID --- */
        .desktop-environment {
            position: absolute;
            top: 70px; 
            left: 0;
            width: 100vw;
            height: calc(100vh - 120px);
            z-index: var(--z-desktop);
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: flex-start;
            padding: 20px;
            gap: 20px;
            pointer-events: auto;
        }

        .desktop-icon {
            width: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 8px;
            padding: 10px 5px;
            transition: background 0.2s, box-shadow 0.2s;
            text-align: center;
        }

        .desktop-icon:hover {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
        }

        .desktop-icon-img {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 8px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s;
        }

        .desktop-icon:hover .desktop-icon-img {
            transform: translateY(-5px);
        }

        .desktop-icon-text {
            color: white;
            font-size: 0.8rem;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
            font-weight: 500;
            word-wrap: break-word;
            line-height: 1.2;
        }

        /* تخفيف سماكة العناصر الأساسية في الثيم الغامق */
        input, select, textarea, button, td, div:not(.font-bold), span:not(.font-bold) {
            font-weight: 300;
        }
        h1, h2, h3, h4, th, .font-bold, strong, b {
            font-weight: 500 !important;
        }

        /* --- جعل الخطوط غامقة (Bold) في الثيمات الفاتحة --- */
        body.theme-google, 
        body.theme-aqua, 
        body.theme-win98, 
        body.theme-girly {
            font-weight: 600 !important;
            -webkit-font-smoothing: auto;
        }

        body.theme-google input, body.theme-google select, body.theme-google textarea, body.theme-google button, body.theme-google td, body.theme-google div:not(.icon-tech):not(.icon-finance):not(.icon-admin), body.theme-google span,
        body.theme-aqua input, body.theme-aqua select, body.theme-aqua textarea, body.theme-aqua button, body.theme-aqua td, body.theme-aqua div:not(.icon-tech):not(.icon-finance):not(.icon-admin), body.theme-aqua span,
        body.theme-win98 input, body.theme-win98 select, body.theme-win98 textarea, body.theme-win98 button, body.theme-win98 td, body.theme-win98 div:not(.icon-tech):not(.icon-finance):not(.icon-admin), body.theme-win98 span,
        body.theme-girly input, body.theme-girly select, body.theme-girly textarea, body.theme-girly button, body.theme-girly td, body.theme-girly div:not(.icon-tech):not(.icon-finance):not(.icon-admin), body.theme-girly span {
            font-weight: 600 !important;
        }

        body.theme-google h1, body.theme-google h2, body.theme-google h3, body.theme-google h4, body.theme-google th, body.theme-google .font-bold, body.theme-google strong, body.theme-google b,
        body.theme-aqua h1, body.theme-aqua h2, body.theme-aqua h3, body.theme-aqua h4, body.theme-aqua th, body.theme-aqua .font-bold, body.theme-aqua strong, body.theme-aqua b,
        body.theme-win98 h1, body.theme-win98 h2, body.theme-win98 h3, body.theme-win98 h4, body.theme-win98 th, body.theme-win98 .font-bold, body.theme-win98 strong, body.theme-win98 b,
        body.theme-girly h1, body.theme-girly h2, body.theme-girly h3, body.theme-girly h4, body.theme-girly th, body.theme-girly .font-bold, body.theme-girly strong, body.theme-girly b {
            font-weight: 800 !important;
        }

        /* Header - Puter OS Style (Compact) */
        .header {
            background-color: rgba(20, 20, 20, 0.5);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            padding: 8px 16px; 
            height: 46px; 
            display: flex;
            justify-content: space-between; 
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: sticky;
            top: 0;
            z-index: var(--z-header);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .header h1, .header h2, .header .logo { font-size: 1.1rem !important; margin: 0; }
        .header img { max-height: 30px; }
        .header [id*="time"], .header [id*="date"], .header [class*="time"], .header [class*="date"] { display: none !important; }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1; /* Occupy left space */
        }

        .header-center {
            display: flex;
            flex-direction: column; /* Stack Title and Time */
            align-items: center;
            justify-content: center;
            text-align: center;
            min-width: 250px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1; /* Occupy right space */
            justify-content: flex-end; /* Push buttons to edge */
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-teal), var(--accent-gold));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--bg-primary);
        }

        .user-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        .dropdown-container {
            position: relative;
        }

        .dropdown-btn {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 8px 16px;
            border-radius: 20px; /* Pill shape */
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .dropdown-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-teal);
            color: var(--accent-teal);
        }

        /* Web OS Start Menu Style (Puter.js / Win11 Aesthetic) */
        .sidebar-panel, #navDropdown {
            position: fixed !important;
            bottom: 60px !important; 
            left: 10px !important;
            top: auto !important; 
            right: auto !important; 
            width: 300px !important; 
            height: auto !important;
            max-height: 70vh !important;
            background: rgba(30, 30, 30, 0.85) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 12px !important; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
            z-index: 10010 !important; 
            opacity: 0 !important;
            transform: translateY(20px) scale(0.95) !important;
            pointer-events: none !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 10px !important; 
            overflow-y: auto !important;
            transform-origin: bottom left;
        }

        .sidebar-panel.show, #navDropdown.show {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
            pointer-events: auto !important;
        }
        
        #navDropdown .dropdown-item {
            text-align: left !important;
            padding: 10px 15px !important;
            border-radius: 8px !important;
            margin-bottom: 2px !important;
            background: transparent !important;
            color: #e2e8f0 !important;
            transition: all 0.2s !important;
            border: none !important;
            cursor: pointer !important;
            font-size: 0.95rem !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }
        
        #navDropdown .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #fff !important;
            transform: translateX(5px) !important;
            border-left: none !important;
        }
        /* Restored Default Dropdown Content (For Menus & Autocomplete) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--bg-secondary);
            min-width: 160px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            z-index: var(--z-dropdown); /* يجب أن تكون أعلى من كل شيء بما فيها النوافذ */
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow-y: auto;
        }
        .dropdown-content.show {
            display: block;
        }

        /* Sidebar Header Style */
        .sidebar-header {
            padding: 20px;
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-primary); 
        }

        /* Sidebar Items Style */
        .dropdown-item {
            padding: 14px 20px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: all 0.2s;
            color: var(--text-secondary);
            font-size: 0.95rem;
            display: flex; 
            align-items: center;
            gap: 10px;
        }

        .dropdown-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-left: 4px solid var(--accent-teal);
            padding-left: 16px; /* Offset the padding to prevent text from shifting */
        }

        /* --- FIX: Force Sidebar text for Crypto Theme --- */
        #navDropdown .dropdown-item {
            color: var(--text-secondary) !important;
            border-bottom: 1px solid var(--border-color) !important;
            background-color: transparent !important;
        }

        #navDropdown .dropdown-item:hover {
            color: var(--text-primary) !important;
            background-color: var(--bg-tertiary) !important;
            border-left: 4px solid var(--accent-teal) !important;
            padding-left: 16px !important;
        }

        .search-bar {
            flex: 1;
            max-width: 400px;
            min-width: 200px;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 8px 12px 8px 36px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-primary);
            outline: none;
        }

        .search-input:focus {
            border-color: var(--accent-teal);
        }

        .search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 14px;
        }

        .header-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--accent-teal);
            letter-spacing: 0.5px;
            line-height: 1.2;
        }

        .datetime {
            font-family: 'Courier New', monospace;
            color: var(--text-secondary);
            font-size: 0.8rem;
            opacity: 0.8;
            margin-top: 2px;
        }

        .action-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 0 16px;
            height: 36px !important;
            border-radius: 20px; /* توحيد المظهر البيضاوي */
            cursor: pointer;
            font-size: 0.9rem;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
            box-sizing: border-box;
            white-space: nowrap;
        }

        .action-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .add-widget-btn {
            background: transparent !important;
            color: var(--accent-teal) !important;
            border: 1px solid var(--accent-teal) !important;
            font-weight: bold;
        }

        .add-widget-btn:hover {
            background: rgba(6, 182, 212, 0.1) !important;
            transform: translateY(-1px);
        }

        .settings-icon, .help-icon, .export-icon {
            font-size: 16px;
        }

        /* Main Content */
        .main-content {
            padding: 20px;
            flex: 1;             /* احتلال المساحة المتبقية */
            overflow-y: auto;    /* تفعيل التمرير الداخلي */
            padding-bottom: 120px; /* مسافة أمان لشريط المهام والأخبار */
            position: relative;    /* تفعيل الطبقات */
            z-index: 10;           /* رفع المحتوى فوق الخلفيات الافتراضية */
        }

        .widgets-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
            gap: 20px; /* زيادة المسافة البينية لمحاكاة التقارير */
        }

        /* Widget Box - Applied BI Minimalist Identity */
        .widget-box {
            background: var(--bg-primary); 
            border: 1px solid var(--border-color);
            border-top: 4px solid var(--accent-teal); 
            border-radius: 8px; 
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
        }

        .widget-box:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
            border-color: var(--accent-gold);
        }

        /* تنويع ألوان الحدود العلوية للأدوات لتعطي طابع الداشبورد الاحترافي */
        #widget-history { border-top-color: var(--text-secondary); }
        #widget-todo { border-top-color: var(--accent-teal); }
        #widget-today-attendance { border-top-color: var(--success); }
        #widget-budget { border-top-color: var(--accent-gold); }
        #widget-alerts { border-top-color: var(--danger); }
        #widget-deadlines { border-top-color: var(--warning); }
        #widget-converter { border-top-color: #8b5cf6; }

        .widget-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            min-height: 40px;
            padding: 0 12px;
        }
        /* Force buttons to be visible and not shrink */
        .widget-os-controls {
            flex-shrink: 0;
            display: flex !important;
            gap: 6px;
        }
        /* Adjustments for maximized widgets */
        #widgetsGrid > .widget-maximized .widget-header {
            padding: 0 12px; /* Keep same padding when maximized */
        }

        .widget-title {
            font-weight: 800;
            font-size: 0.95rem;
            color: var(--text-secondary); /* لون هادئ للعناوين */
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .widget-body {
            padding: 16px;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            background: var(--bg-secondary); /* تباين خفيف داخل الأداة */
        }

        /* Form Elements - UNIFIED & COMPACT GLOBALLY */
        .form-group {
            margin-bottom: 14px;
        }

        .form-group label {
            display: block;
            color: var(--text-secondary);
            font-size: 0.8rem !important;
            margin-bottom: 5px !important;
            font-weight: 500;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 6px 16px !important; /* زيادة الحشوة الجانبية لتناسب الشكل الدائري */
            height: 36px !important; /* Unified uniform height */
            background: var(--bg-primary); 
            border: 1px solid var(--border-color);
            border-radius: 20px !important; /* جعل الحواف بيضاوية مطابقة للأزرار */
            color: var(--text-primary);
            outline: none;
            font-size: 0.85rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            font-family: inherit;
        }

        .form-input:focus, .form-select:focus {
            border-color: var(--accent-teal);
            box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
        }

        .btn-primary, .btn-success {
            border: 1px solid transparent;
            padding: 0 16px;
            height: 36px !important; /* Unified to match form-input */
            border-radius: 20px; /* Pill shapes to match the reference images */
            cursor: pointer;
            font-weight: 600;
            width: auto;
			min-width: 120px;
			transition: all 0.2s;
			text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.8rem;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            white-space: nowrap;
        }

        .btn-primary {
            background: transparent !important;
            color: var(--accent-teal) !important;
            border: 1px solid var(--accent-teal) !important;
        }
        .btn-primary:hover {
            background: rgba(6, 182, 212, 0.1) !important;
            transform: translateY(-1px);
        }
        
        .btn-success {
            background: transparent !important;
            color: var(--success) !important;
            border: 1px solid var(--success) !important;
        }
        .btn-success:hover {
            background: rgba(16, 185, 129, 0.1) !important;
            transform: translateY(-1px);
        }

        .btn-primary:active, .btn-success:active, .btn-secondary:active, .btn-danger:active, .action-btn:active {
            transform: scale(0.98); 
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); 
            filter: brightness(0.95);
            transition: all 0.1s ease;
        }

        .btn-danger {
            background: transparent;
            color: var(--danger);
            border: 1px solid var(--danger);
            padding: 0 16px;
            height: 36px !important;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            white-space: nowrap;
            width: auto;
            min-width: 120px;
        }
        .btn-danger:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        .btn-secondary {
            background: transparent;
            color: var(--accent-gold);
            border: 1px solid var(--accent-gold);
            padding: 0 16px;
            height: 36px !important;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.2s;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            white-space: nowrap;
            width: auto;
            min-width: 120px;
        }

        .btn-secondary:hover {
            background: rgba(139, 92, 246, 0.1);
        }

        .btn-group {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .btn-group button {
            flex: 1;
        }

        /* Lists - Applied BI Elegance */
        .list-item {
            background: var(--bg-primary); 
            padding: 12px 15px;
            margin-bottom: 10px;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--border-color);
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }

        .list-item:hover {
            border-left-color: var(--accent-teal);
            transform: translateX(3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }

        .list-item.completed {
            opacity: 0.5;
            text-decoration: line-through;
            border-left-color: var(--success);
            background: rgba(0,0,0,0.02);
        }

        .list-item.alert-high {
            border-left-color: var(--danger);
            background: rgba(229, 62, 62, 0.05);
        }

        .list-item.alert-medium {
            border-left-color: var(--warning);
            background: rgba(214, 158, 46, 0.05);
        }

        .item-content {
            flex: 1;
        }

        .item-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .item-actions {
            display: flex;
            gap: 6px;
        }

        /* Budget Bars - BI Styling */
        .budget-bar-container {
            margin: 15px 0;
        }

        .budget-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .budget-bar {
            height: 22px; 
            background: var(--bg-tertiary);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }

        .budget-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-teal), var(--accent-gold));
            border-radius: 12px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            font-size: 0.75rem;
            font-weight: 800;
            color: #ffffff; /* دائمًا أبيض للوضوح */
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        /* File Drop Zone */
        .drop-zone {
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            padding: 40px 20px;
            text-align: center;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-tertiary);
        }

        .drop-zone:hover, .drop-zone.dragover {
            border-color: var(--accent-teal);
            background: rgba(79, 209, 197, 0.1);
        }

        .drop-zone-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--accent-gold);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: var(--z-overlay);
            padding-top: 70px; /* إزاحة جميع النوافذ المنبثقة لتبدأ من أسفل الشريط العلوي */
            padding-bottom: 20px;
            box-sizing: border-box;
        }

        .modal-overlay.show {
            display: flex;
        }

        .modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            max-height: 100% !important; /* ضمان عدم تجاوز النافذة للمساحة الآمنة */
            display: flex; /* إجبار المودال على أن يكون Flexbox */
            flex-direction: column; /* لكي يبقى الهيدر ثابتاً والمحتوى يمرر */
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            animation: fadeIn 0.2s ease-out;
        }
        .modal-body {
            padding: 20px;
            overflow-y: auto; /* التمرير يحدث داخل الـ Body فقط */
            flex: 1;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.3rem;
            color: var(--accent-gold);
            font-weight: 600;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        .modal-close:hover {
            color: var(--danger);
        }

        /* Data Tables */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            font-size: 0.9rem;
        }

        .data-table th, .data-table td {
            padding: 12px 10px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.85rem;
        }

        .data-table th {
            color: var(--text-secondary);
            background: var(--bg-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .data-table tr:hover td {
            background: rgba(255, 255, 255, 0.02);
        }

        .data-table input {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-primary);
            padding: 4px;
        }

        .data-table input:focus {
            background: var(--bg-primary);
            outline: 1px solid var(--accent-teal);
        }

        /* Notifications */
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--danger);
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: bold;
        }

        /* Sort Controls */
        .sort-controls {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .sort-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .sort-btn.active {
            background: var(--accent-teal);
            color: var(--bg-primary);
            border-color: var(--accent-teal);
        }

        /* Currency Converter */
        .converter-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        .converter-result {
            background: var(--bg-tertiary);
            padding: 12px;
            border-radius: 6px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--accent-gold);
            margin-top: 8px;
        }

        /* Color Picker */
        .color-picker-group {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
        }

        input[type="color"] {
            width: 50px;
            height: 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
        }

        /* Hidden */
        .hidden {
            display: none !important;
        }

        /* --- NEW REUSABLE UTILITY CLASSES --- */
        .empty-state-msg { padding: 40px; text-align: center; opacity: 0.6; color: var(--text-secondary); }
        .flow-blocked-msg { padding: 40px; text-align: center; color: var(--danger); font-weight: bold; border: 1px dashed var(--danger); border-radius: 8px; background: rgba(229, 62, 62, 0.1); }
        
        /* Universal Panels & Utility Refactoring */
        .panel { padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
        .panel-info { background: rgba(79, 209, 197, 0.05); border: 1px solid var(--accent-teal); }
        .panel-warning { background: rgba(214, 158, 46, 0.05); border: 1px solid var(--warning); }
        .panel-danger { background: rgba(229, 62, 62, 0.05); border: 1px solid var(--danger); }
        .panel-success { background: rgba(56, 161, 105, 0.05); border: 1px solid var(--success); }
        
        /* --- SEMANTIC MODAL HEADERS & THEMED BACKGROUNDS --- */
        .modal-header-danger { background: var(--bg-secondary); border-bottom: 2px solid var(--danger); padding: 15px 25px; }
        .modal-header-success { background: var(--bg-secondary); border-bottom: 2px solid var(--success); padding: 15px 25px; }
        .modal-header-warning { background: var(--bg-secondary); border-bottom: 2px solid var(--warning); padding: 15px 25px; }
        .modal-header-teal { background: var(--bg-secondary); border-bottom: 2px solid var(--accent-teal); padding: 15px 25px; }
        .modal-header-gold { background: var(--bg-secondary); border-bottom: 2px solid var(--accent-gold); padding: 15px 25px; }
        
        .bg-danger-soft { background: rgba(229, 62, 62, 0.1) !important; border-color: var(--danger) !important; color: var(--danger); }
        .bg-warning-soft { background: rgba(214, 158, 46, 0.1) !important; border-color: var(--warning) !important; color: var(--warning); }
        .bg-success-soft { background: rgba(56, 161, 105, 0.1) !important; border-color: var(--success) !important; color: var(--success); }
        .bg-teal-soft { background: rgba(79, 209, 197, 0.1) !important; border-color: var(--accent-teal) !important; color: var(--accent-teal); }
        .bg-gold-soft { background: rgba(214, 158, 46, 0.1) !important; border-color: var(--accent-gold) !important; color: var(--accent-gold); }

        .modal-xl { width: 1000px; max-width: 95%; height: 85vh; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; }
        .modal-lg { width: 900px; max-width: 95%; height: 90vh; display: flex; flex-direction: column; }
        .modal-title-flex { display: flex; align-items: center; gap: 10px; }
        .badge-danger-sm { font-size: 0.7rem; background: var(--danger); color: white; padding: 2px 8px; border-radius: 10px; }
        .modal-body-split { flex: 1; overflow: hidden; display: flex; background: var(--bg-primary); }
        .archive-sidebar { width: 300px; background: var(--bg-tertiary); padding: 20px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
        .title-icon { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: var(--accent-teal); }
        .archive-drop-zone { padding: 30px 15px; border: 2px dashed var(--border-color); border-radius: 10px; text-align: center; cursor: pointer; transition: 0.3s; }
        .archive-drop-zone:hover, .archive-drop-zone.dragover { border-color: var(--accent-teal); }
        .text-muted-xs { font-size: 0.8rem; color: var(--text-secondary); }
        /* flex-1, w-100, mb-15 → defined in spacing utilities section */
        
        .text-teal { color: var(--accent-teal); }
        .text-gold { color: var(--accent-gold); }
        .text-danger { color: var(--danger); }
        .text-success { color: var(--success); }
        .text-warning { color: var(--warning); }
        .text-primary { color: var(--text-primary); }
        .text-muted { color: var(--text-secondary); }
        
        .font-bold { font-weight: bold; }
        .font-mono { font-family: monospace; }
        .text-sm { font-size: 0.85rem; }
        .text-xs { font-size: 0.75rem; }
        .text-center { text-align: center; }
        .text-right { text-align: right; }
        
        .flex-row { display: flex; align-items: center; }
        .gap-1 { gap: 5px; }
        .gap-2 { gap: 10px; }
        .gap-3 { gap: 15px; }
        
        .row-danger { background: rgba(229, 62, 62, 0.15) !important; color: inherit; }
        .row-warning { background: rgba(214, 158, 46, 0.15) !important; color: inherit; }
        .row-success { background: rgba(56, 161, 105, 0.15) !important; color: inherit; }
        .row-info { background: rgba(79, 209, 197, 0.15) !important; color: inherit; }
        
        .list-item-hover { transition: background 0.2s; }
        .list-item-hover:hover { background: rgba(255, 255, 255, 0.05) !important; }
        
        .input-transparent { width: 100%; background: transparent; border: none; color: inherit; font-family: inherit; padding: 5px; }
        .input-transparent:focus { outline: 1px solid var(--accent-teal); background: var(--bg-primary); }
        
        /* New Utility Classes from Refactoring */
        /* pb-5, mt-15 → defined in spacing utilities section */
        .pr-15 { padding-right: 15px; }
        .border-right-std { border-right: 1px solid var(--border-color); }
        .border-std { border: 1px solid var(--border-color); }
        .border-bottom-faint { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
        .bg-primary { background: var(--bg-primary) !important; }
        .text-black { color: black !important; }
        
        /* bg-*-light → defined in Extended Utility Colors section below (with color property) */
        
        .badge-danger-soft { background: rgba(229, 62, 62, 0.15); color: var(--danger); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; border: 1px solid rgba(229, 62, 62, 0.3); }
        .badge-success-soft { background: rgba(56, 161, 105, 0.15); color: var(--success); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; border: 1px solid rgba(56, 161, 105, 0.3); }
        
        .panel-teal-soft { background: rgba(79, 209, 197, 0.05); padding: 10px 15px; border-radius: 6px; border: 1px solid rgba(79, 209, 197, 0.3); }
        
        /* Payroll Specific Refactoring */
        .payroll-th { background:var(--bg-tertiary); color:var(--text-primary); padding:12px 8px; font-weight:600; border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color); }
        .payroll-gross { background:rgba(255,255,255,0.05); color:var(--text-primary); font-weight:bold; }
        .payroll-deduct { color:var(--danger); font-weight:bold; }
        .payroll-net { background:rgba(79, 209, 197, 0.1); color:var(--accent-teal); font-weight:bold; font-size:1rem; border-left:1px solid var(--accent-teal); }
        .payroll-input { width:100%; border:1px solid var(--border-color); border-radius:20px; padding:4px 10px; text-align:center; background:var(--bg-primary); color:var(--text-primary); font-family:monospace; }
        
        /* Payslip Specific Refactoring */
        .payslip-wrapper { background: white; color: #333; padding: 40px; font-family: 'Segoe UI', Tahoma, sans-serif; }
        .payslip-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--accent-teal); padding-bottom: 20px; margin-bottom: 20px; }
        .payslip-logo { font-size: 24px; font-weight: bold; color: #2d3748; text-transform:uppercase; }
        .payslip-card { background: #f7fafc; padding: 15px; border-radius: 4px; }
        .payslip-label { font-size:12px; color:#718096; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
        .payslip-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 1px solid #ddd; }
        .payslip-th { padding: 10px; border: 1px solid #ddd; text-align: left; color:#4a5568; }
        .payslip-td { padding: 8px; border-right: 1px solid #ddd; }
        .dropdown-item-styled { border-bottom: 1px solid var(--border-color); padding: 8px 10px; cursor: pointer; transition: background 0.2s; }
        .dropdown-item-styled:hover { background: rgba(255, 255, 255, 0.05); }
        .text-sm-muted { font-size: 0.75rem; color: var(--text-secondary); }
        .text-sm-teal { font-size: 0.85rem; color: var(--accent-teal); font-weight: bold; }
        .text-sm-gold { font-size: 0.85rem; color: var(--accent-gold); font-weight: bold; }
        .flex-row-center { display: flex; align-items: center; gap: 8px; }
        .flex-row-between { display: flex; justify-content: space-between; align-items: center; }
        .stats-card-teal { text-align: center; background: rgba(79, 209, 197, 0.1); padding: 8px; border-radius: 6px; border-bottom: 2px solid var(--accent-teal); }
        .stats-card-gold { text-align: center; background: rgba(214, 158, 46, 0.1); padding: 8px; border-radius: 6px; border-bottom: 2px solid var(--accent-gold); }
        .stats-card-danger { text-align: center; background: rgba(229, 62, 62, 0.1); padding: 8px; border-radius: 6px; border-bottom: 2px solid var(--danger); }
		/* --- COMPONENT CLASSES (Replaces Inline JS Styles) --- */
		/* Layout Utilities */
		.flex-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
		.flex-end { display: flex; justify-content: flex-end; gap: 10px; }
		.grid-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
		.grid-form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
		.grid-form-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; }
		
		/* Text Utilities */
		.text-danger-bold { color: var(--danger); font-weight: bold; }
		.text-success-bold { color: var(--success); font-weight: bold; }
		.text-warning-bold { color: var(--warning); font-weight: bold; }
		.text-teal-bold { color: var(--accent-teal); font-weight: bold; }
		.text-gold-bold { color: var(--accent-gold); font-weight: bold; }
		.text-muted-sm { font-size: 0.75rem; color: var(--text-secondary); }
		
		/* Highlight & Border Utilities */
		.border-teal { border-color: var(--accent-teal) !important; }
		.border-warning { border-color: var(--warning) !important; }
		.border-danger { border-color: var(--danger) !important; }
		.border-success { border-color: var(--success) !important; }
		.border-gold { border-color: var(--accent-gold) !important; }
		
		/* Custom Card Components */
		.budget-tabs-wrapper {
			background: var(--bg-tertiary);
			padding: 10px 10px 0 10px;
			display: flex;
			align-items: flex-end;
			gap: 4px;
			border-bottom: 1px solid var(--border-color);
			overflow-x: auto;
			white-space: nowrap;
		}
		.budget-tab {
			padding: 8px 15px;
			border-radius: 6px 6px 0 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 120px;
			transition: all 0.2s;
		}
		.budget-tab.active {
			background: var(--bg-secondary);
			color: var(--accent-gold);
			border-top: 3px solid var(--accent-gold);
			font-weight: 600;
		}
		.budget-tab.inactive {
			background: rgba(0, 0, 0, 0.2);
			color: var(--text-secondary);
			border-top: 3px solid transparent;
			font-weight: 400;
		}
		.badge-draft {
			font-size: 0.7rem;
			background: var(--accent-teal);
			color: #000;
			padding: 1px 4px;
			border-radius: 3px;
			margin-left: 5px;
		}
		.tax-bracket-row {
			display: flex;
			align-items: center;
			gap: 10px;
			background: transparent;
			padding: 0;
			border-radius: 0;
			border: none;
			width: fit-content;
            margin-bottom: 8px;
		}
		.tax-input { width: 90px; padding: 6px 12px; border-radius: 20px; text-align: center; border: 1px solid var(--accent-teal) !important; background: var(--bg-primary); }
		.tax-input-rate { width: 70px; padding: 6px 12px; border-radius: 20px; text-align: center; border: 1px solid var(--accent-gold) !important; background: var(--bg-primary); }
		.btn-delete-bracket { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.2rem; }

		.metric-card {
			padding: 15px;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			transition: 0.2s;
		}
		.metric-card.teal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-teal); }
		.metric-card.gold { background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); }
		.metric-card.standard { background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--text-secondary); }
		.metric-card.dashed { background: var(--bg-secondary); border: 1px dashed var(--accent-teal); cursor: pointer; text-align: center; }
		.metric-card.dashed:hover { background: rgba(79, 209, 197, 0.05); }
		
		.metric-title { font-size: 0.75rem; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; }
		.metric-value { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); }
		.metric-unit { font-size: 0.9rem; font-weight: normal; color: var(--text-secondary); }

		.policy-card {
			padding: 0;
			overflow: hidden;
			position: relative;
			transition: transform 0.2s;
			box-shadow: 0 2px 5px rgba(0,0,0,0.05);
			background: var(--bg-primary);
			border: 1px solid var(--border-color);
			border-radius: 10px;
		}
		.policy-card-header { padding: 15px; }
		.policy-card-meta {
			background: var(--bg-tertiary);
			padding: 10px;
			border-radius: 6px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
			font-size: 0.75rem;
			color: var(--text-secondary);
			border: 1px solid var(--border-color);
		}

		.theme-card {
			background: var(--bg-secondary);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 15px;
		}
		.theme-card-highlight {
			background: var(--bg-tertiary);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 15px;
		}
		.flex-between-center {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.grid-2-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
		.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
		.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

		/* --- THEMED ALERT CARDS --- */
		.alert-card {
			padding: 10px 15px;
			border-radius: 6px;
			margin-bottom: 15px;
			font-size: 0.85rem;
			line-height: 1.4;
			border: 1px solid transparent;
		}
		.alert-card.danger {
			background: rgba(229, 62, 62, 0.1);
			border-color: var(--danger);
			color: var(--danger);
		}
		.alert-card.warning {
			background: rgba(214, 158, 46, 0.1);
			border-color: var(--warning);
			color: var(--warning);
		}
		.alert-card.success {
			background: rgba(56, 161, 105, 0.1);
			border-color: var(--success);
			color: var(--success);
		}
		/* alert-card.info → defined below with color: var(--text-primary) override */

		/* --- THEMED BADGES --- */
		.theme-badge {
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 0.75rem;
			font-weight: bold;
			display: inline-block;
		}
		.theme-badge.teal { background: rgba(79, 209, 197, 0.15); color: var(--accent-teal); border: 1px solid rgba(79, 209, 197, 0.3); }
		.theme-badge.gold { background: rgba(214, 158, 46, 0.15); color: var(--accent-gold); border: 1px solid rgba(214, 158, 46, 0.3); }
		.theme-badge.red { background: rgba(229, 62, 62, 0.15); color: var(--danger); border: 1px solid rgba(229, 62, 62, 0.3); }
		.theme-badge.green { background: rgba(56, 161, 105, 0.15); color: var(--success); border: 1px solid rgba(56, 161, 105, 0.3); }
		
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        .flex-start { display: flex; justify-content: flex-start; align-items: center; }
        
        .module-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .badge {
            padding: 4px 10px;
            border-radius: 12px; /* Dark capsule shape matching the crypto list */
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-block;
            border: 1px solid var(--border-color);
            background: var(--bg-primary);
        }
        .badge-success { background: rgba(56, 161, 105, 0.15); color: var(--success); border: 1px solid rgba(56, 161, 105, 0.3); }
        .badge-danger { background: rgba(229, 62, 62, 0.15); color: var(--danger); border: 1px solid rgba(229, 62, 62, 0.3); }
        .badge-warning { background: rgba(214, 158, 46, 0.15); color: var(--warning); border: 1px solid rgba(214, 158, 46, 0.3); }
        .badge-info { background: rgba(79, 209, 197, 0.15); color: var(--accent-teal); border: 1px solid rgba(79, 209, 197, 0.3); }

        /* Alert Box */
        .alert-box {
            background: rgba(229, 62, 62, 0.15);
            border: 1px solid var(--danger);
            border-radius: 6px;
            padding: 12px;
            margin-top: 12px;
            color: var(--text-primary);
        }

        .alert-box.warning {
            background: rgba(214, 158, 46, 0.15);
            border-color: var(--warning);
        }

        .alert-box.success {
            background: rgba(56, 161, 105, 0.15);
            border-color: var(--success);
        }
		

        /* Window Management */
        #windowsContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: var(--z-window);
        }

        /* Puter OS Window Style */
        .module-window {
            position: absolute;
            top: 85px; 
            left: 12.5%;     
            width: 75%;      
            height: 75vh;
            bottom: auto; 
            background: rgba(30, 30, 30, 0.75);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            pointer-events: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            animation: windowOpen 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            resize: both;
            overflow: hidden;
            min-width: 350px;
            min-height: 250px;
            transition: box-shadow 0.2s, transform 0.2s ease-out;
        }

        

        .module-window.hidden {
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            display: none;
        }

        .module-header {
            background: rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            cursor: default;
        }

        .module-controls {
            display: flex;
            gap: 10px;
        }

        .window-btn {
            width: 46px; /* مساحة لمس أكبر لمحاكاة أنظمة التشغيل */
            height: 100%;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            transition: background 0.2s, color 0.2s;
            border-radius: 0 !important;
        }

        .window-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .btn-close:hover {
            background-color: #e81123 !important; /* لون الإغلاق العالمي الاحترافي */
            color: white !important;
        }

        .module-content {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            background: var(--bg-primary);
        }

        /* Taskbar - Puter OS Style */
        #taskbarContainer {
            position: fixed;
            bottom: 0; 
            left: 0;
            width: 100%;
            height: 50px; 
            background: rgba(20, 20, 20, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            padding: 0 10px;
            gap: 8px;
            z-index: var(--z-taskbar);
            box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
        }

        /* إخفاء زر ابدأ وأزرار الودجات القديمة لأن النظام يعتمد الآن على أيقونات سطح المكتب */
        /* زر القائمة الرئيسية (الجسر OS) */
        

        .taskbar-item {
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            border: 1px solid transparent;
            border-bottom: 2px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            white-space: nowrap;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            height: 36px;
            box-sizing: border-box;
        }

        .taskbar-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .taskbar-item.active {
            background: rgba(255, 255, 255, 0.15);
            color: var(--text-primary);
            border-bottom: 2px solid var(--accent-teal);
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
        }
        
        .taskbar-system-tray {
            position: absolute;
            right: 10px;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0;
            color: white;
            font-size: 0.85rem;
            direction: ltr;
        }

        .show-desktop-btn {
            width: 14px;
            height: 100%;
            border-left: 1px solid rgba(255, 255, 255, 0.15);
            cursor: pointer;
            transition: background 0.2s, box-shadow 0.2s;
            margin-left: 8px;
        }

        .show-desktop-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: inset 2px 0 5px rgba(0,0,0,0.2);
        }
        /* Aqua Taskbar Styling */
        body.theme-aqua #taskbarContainer {
            background: #d1d1d1 url('https://www.transparenttextures.com/patterns/brushed-alum.png') !important;
            border-top: 1px solid #777 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
        }

        body.theme-aqua .taskbar-item {
            background: linear-gradient(to bottom, #fdfdfd 0%, #cecece 100%) !important;
            border: 1px solid #888 !important;
            border-radius: 4px !important;
            color: #333 !important;
            font-size: 12px;
            font-weight: 500;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.1);
        }

        body.theme-aqua .taskbar-item.active {
            background: linear-gradient(to bottom, #b5b5b5 0%, #e0e0e0 100%) !important;
            border-color: #666 !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }

        /* Aqua Dropdown Styling */
        body.theme-aqua .dropdown-content {
            background: #d1d1d1 url('https://www.transparenttextures.com/patterns/brushed-alum.png') !important;
            border: 1px solid #777 !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
            border-radius: 0 0 5px 5px !important;
        }

        body.theme-aqua .dropdown-item {
            border-bottom: 1px solid rgba(0,0,0,0.1) !important;
            color: #222 !important;
            font-size: 13px;
        }

        body.theme-aqua .dropdown-item:hover {
            background: #3875d7 !important;
            color: #fff !important;
        }

        body.theme-aqua .dropdown-btn {
            background: linear-gradient(to bottom, #fdfdfd 0%, #d1d1d1 100%) !important;
            border: 1px solid #999 !important;
            color: #333 !important;
            border-radius: 4px !important;
        }

        /* Applying the glass effect to standard action buttons in the header */
        body.theme-aqua .action-btn:not(.add-widget-btn) {
            background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 50%, #d0d0d0 51%, #bcbcbc 100%) !important;
            border: 1px solid #888 !important;
            color: #333 !important;
            border-radius: 4px !important;
            box-shadow: inset 0 1px 0 #fff;
        }

        /* Blue Jelly Aqua Scrollbars */
        body.theme-aqua ::-webkit-scrollbar {
            width: 15px;
            height: 15px;
        }

        body.theme-aqua ::-webkit-scrollbar-track {
            background: #e0e0e0;
            border-left: 1px solid #9c9c9c;
            box-shadow: inset 1px 0 3px rgba(0,0,0,0.1);
        }

        body.theme-aqua ::-webkit-scrollbar-thumb {
            background: linear-gradient(to right, #7db9e8 0%, #207cca 49%, #1e5799 50%, #2989d8 100%);
            border: 1px solid #1e5799;
            border-radius: 10px;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
        }

        body.theme-aqua ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to right, #a0d4f7 0%, #3a94e0 49%, #256bbd 50%, #3e9ce6 100%);
        }

        /* Internal Pinstripe Texture with Precise Row Alignment */
        body.theme-aqua .data-table, 
        body.theme-aqua .ts-table {
            background-color: #fff !important;
            background-image: linear-gradient(rgba(172, 206, 247, 0.15) 50%, transparent 50%);
            background-size: 100% 74px; /* Matches 2x row height for alternating effect */
            border-collapse: collapse !important;
        }

        body.theme-aqua .data-table tr td, 
        body.theme-aqua .ts-table tr td {
            height: 37px; /* Fixed height to align with background pinstripes */
            padding: 4px 8px !important;
            border-bottom: 1px solid #e0e0e0 !important;
        }

        /* Glass Reflection Effect for Primary Buttons */
        body.theme-aqua .btn-primary, 
        body.theme-aqua .btn-success,
        body.theme-aqua .add-widget-btn,
        body.theme-aqua .action-btn.add-widget-btn {
            position: relative;
            color: white !important;
            border-radius: 20px !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.2);
            text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
            overflow: hidden;
            z-index: 1;
        }

        body.theme-aqua .btn-primary, 
        body.theme-aqua .add-widget-btn,
        body.theme-aqua .action-btn.add-widget-btn {
            background: linear-gradient(to bottom, #7db9e8 0%, #207cca 50%, #1e5799 51%, #2989d8 100%) !important;
            border: 1px solid #1e5799 !important;
        }
        
        body.theme-aqua .btn-success {
            background: linear-gradient(to bottom, #7ce092 0%, #4cd964 50%, #28c940 51%, #1e9e30 100%) !important;
			border: 1px solid #146b1f !important;
        }

        /* The Glossy "Reflection" Layer */
        body.theme-aqua .btn-primary::before, 
        body.theme-aqua .btn-success::before,
        body.theme-aqua .add-widget-btn::before,
        body.theme-aqua .action-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
            pointer-events: none;
            z-index: 2;
        }

        /* data-table tr td — defined above with full properties (height + padding + border) */

        body.theme-aqua .data-table th, 
        body.theme-aqua .ts-table th {
            background: linear-gradient(to bottom, #fdfdfd 0%, #d1d1d1 100%) !important;
            color: #333 !important;
            text-shadow: 0 1px 0 #fff;
            border-right: 1px solid #aaa !important;
        }

        .editable-header {
            cursor: text;
            border: 1px dashed transparent;
        }
        .editable-header:hover, .editable-header:focus {
            border-color: var(--accent-teal);
        }
        
        .filter-input {
            width: 100%;
            margin-top: 5px;
            padding: 4px 12px;
            font-size: 0.8rem;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 20px; /* مطابقة الأزرار */
            color: var(--text-primary);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .header {
                padding: 8px 12px;
                gap: 10px;
            }

            .header-title, .datetime, .search-bar {
                display: none;
            }

            .widgets-grid {
                grid-template-columns: 1fr;
            }

            .converter-grid {
                grid-template-columns: 1fr;
            }
        }
		/* =========================================================
		   📦 SPACING & UTILITY CLASSES
		   ========================================================= */
		.m-0 { margin: 0 !important; }
		.mb-0 { margin-bottom: 0; }
		.mb-5 { margin-bottom: 5px; }
		.mb-8 { margin-bottom: 8px; }
		.mb-10 { margin-bottom: 10px; }
		.mb-12 { margin-bottom: 12px; }
		.mb-15 { margin-bottom: 15px; }
		.mb-20 { margin-bottom: 20px; }
		.mb-25 { margin-bottom: 25px; }
		.mt-0 { margin-top: 0 !important; }
		.mt-5 { margin-top: 5px; }
		.mt-10 { margin-top: 10px; }
		.mt-15 { margin-top: 15px; }
		.pb-5 { padding-bottom: 5px; }
		.pb-10 { padding-bottom: 10px; }
		.pb-15 { padding-bottom: 15px; }
		.flex-wrap-start { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
		.p-10 { padding: 10px; }
		.p-15 { padding: 15px; }
		.p-20 { padding: 20px; }
		.w-100 { width: 100%; }
		.flex-1 { flex: 1; }
		.overflow-y-auto { overflow-y: auto; }
		.overflow-hidden { overflow: hidden; }
		.mt-20 { margin-top: 20px; }
		.cursor-pointer { cursor: pointer; }
		.shadow-sm { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
		.border-bottom-std { border-bottom: 1px solid var(--border-color); }
		.flex-wrap { flex-wrap: wrap; }
		.flex-column { display: flex; flex-direction: column; }
		.btn-sm { padding: 2px 8px; font-size: 0.8rem; }
		.title-header { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
		.sub-text { color: var(--text-secondary); font-size: 0.8rem; margin-top: 5px; }

		/* --- EXTRA UTILITY CLASSES --- */
		.grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
		.flex-col-100 { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-primary); }
		.header-bar-std { padding: 10px 15px; flex-shrink: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
		.grid-budget-meta { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 15px; margin-bottom: 8px; }
		.grid-budget-dates { display: grid; grid-template-columns: 1fr 1fr 1.5fr 0.5fr; gap: 15px; }
		.toolbar-actions { display: flex; gap: 8px; margin: 8px 15px; align-items: center; flex-wrap: wrap; }
		.table-container-flex { flex: 1; overflow: auto; position: relative; }
		.title-row-style { font-weight: bold; color: var(--accent-gold); text-align: center; letter-spacing: 1px; padding: 10px; }
		.weekend-toggle-btn { cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:bold; font-size:0.8rem; transition: all 0.2s ease; }
		.sim-active-badge { animation: pulse-red 2s infinite; font-size: 0.7rem; }
		.alloc-legend { display: flex; gap: 10px; margin-top: 5px; font-size: 0.75rem; }
		.alloc-filter-group { display: flex; align-items: center; height: 36px; gap: 8px; background: var(--bg-tertiary); padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-color); }
		.dropdown-title { font-weight: bold; color: var(--accent-teal); font-size: 0.85rem; }
		.dropdown-meta { font-size: 0.75rem; color: var(--text-secondary); display: flex; justify-content: space-between; margin-top: 2px; }
		.dropdown-meta-item { color: var(--accent-gold); }
		.config-panel { background: var(--bg-tertiary); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 15px; }
		.config-panel-flex { display: flex; justify-content: space-between; align-items: center; }
		.badge-counter { font-size: 0.8rem; background: rgba(79, 209, 197, 0.2); color: var(--accent-teal); padding: 4px 10px; border-radius: 20px; font-weight: bold; }
		
		/* --- EXTRACTED MODULE & TAB CLASSES --- */
		.module-tabs-container { display: flex; gap: 5px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; align-items: flex-end; padding: 0 10px; }
		.module-tab-btn { padding: 10px 15px; background: transparent; border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; color: var(--text-secondary); font-weight: normal; cursor: pointer; transition: 0.2s; }
		.module-tab-btn.active-teal { background: var(--bg-secondary); color: var(--accent-teal); font-weight: bold; border-top: 3px solid var(--accent-teal); }
		.module-tab-btn.active-warning { background: var(--bg-secondary); color: var(--warning); font-weight: bold; border-top: 3px solid var(--warning); }
		.module-tab-btn.active-gold { background: var(--bg-secondary); color: var(--accent-gold); font-weight: bold; border-top: 3px solid var(--accent-gold); }
		
		.module-tab-text-container { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
		.module-tab-text { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 5px 10px; border-bottom: 3px solid transparent; color: var(--text-secondary); font-weight: bold; transition: 0.3s; }
		.module-tab-text.active-teal { border-bottom-color: var(--accent-teal); color: var(--text-primary); }
		.module-tab-text.active-gold { border-bottom-color: var(--accent-gold); color: var(--text-primary); }
		
		.grid-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin-bottom: 15px; }
		.status-pill { font-size: 0.75rem; font-weight: bold; padding: 2px 8px; border-radius: 4px; display: inline-block; }
		.divider-dashed { margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 15px; }
		.panel-sub { background: rgba(0,0,0,0.1); padding: 10px; border-radius: 6px; }
		.alert-card.info { background: rgba(79, 209, 197, 0.1); border: 1px solid var(--accent-teal); color: var(--text-primary); }

        /* Animations */
        

        

        /* Solid Crypto Notification Panel */
        .notification-panel {
            position: fixed;
            top: 0;
            right: -380px; /* Hidden by default */
            width: 350px;
            height: 100vh;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-color);
            z-index: var(--z-toast);
            transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 30px rgba(0,0,0,0.8);
            border-radius: 25px 0 0 25px; /* جعل الحواف الداخلية ناعمة وملتفة */
            overflow: hidden; /* إخفاء الزوائد العلوية للترويسة للحفاظ على النعومة */
        }

        .notification-panel.open {
            right: 0;
        }

        .panel-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-primary);
        }
        
        .panel-header h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.1rem;
        }

        .clear-all-btn {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .clear-all-btn:hover {
            color: var(--danger);
            border-color: var(--danger);
            background: rgba(239, 68, 68, 0.1);
        }

        .notification-stack {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* Solid Crypto Notification Card */
        .notif-card {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 15px;
            display: flex;
            gap: 12px;
            animation: slideInRight 0.4s ease-out;
            transition: transform 0.2s, border-color 0.2s;
        }

        .notif-card:hover {
            border-color: var(--accent-teal);
            transform: translateY(-2px);
        }

        .notif-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        /* Icon Types */
        .icon-finance { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2); }
        .icon-admin { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2); }
        .icon-tech { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2); }

        .notif-body { flex: 1; }
        .notif-title { font-weight: bold; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 3px; }
        .notif-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
        .notif-time { font-size: 0.7rem; color: var(--accent-teal); margin-top: 5px; opacity: 0.8; font-family: monospace; }

        

        /* Print Styles */
        @media print {
            body { background: white; color: black; }
            .header, .widget-controls, .action-btn, .modal-overlay, .btn-group { display: none !important; }
            .widget-box { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
            .widget-body { max-height: none; }
        }
		/* --- PRO TO-DO LIST STYLES --- */
        .todo-header-stat {
            background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
            padding: 8px 10px;
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center; 
            justify-content: space-between;
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--accent-teal);
            position: relative;
            overflow: visible; 
            min-height: 36px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        /* السماح للنص بالالتفاف وتصغيره ليناسب المساحة */
        #todoGreeting { 
            font-size: 0.85rem !important; 
            line-height: 1.2; 
            white-space: normal; /* السماح بنزول السطر */
            max-width: 180px; /* منع التداخل مع الدائرة */
        }
        .todo-progress-circle {
            width: 50px; height: 50px; border-radius: 50%;
            background: conic-gradient(var(--accent-teal) var(--progress), transparent 0);
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        .todo-progress-circle::after {
            content: attr(data-val);
            position: absolute; width: 40px; height: 40px;
            background: var(--bg-secondary); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem; font-weight: bold; color: var(--text-primary);
        }
        .todo-input-group {
            display: flex; 
            flex-wrap: wrap;
            gap: 6px; 
            margin-bottom: 6px;
            background: var(--bg-tertiary); 
            padding: 6px 8px; 
            border-radius: 10px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .todo-input-main {
            flex: 1 1 100%; /* حجز عرض كامل (سطر مستقل) لحقل النص */
            width: 100%;
            border: none; 
            background: transparent; 
            color: var(--text-primary);
            font-size: 0.95rem; 
            padding: 5px; 
            outline: none;
            border-bottom: 1px solid rgba(255,255,255,0.1); /* خط فاصل خفيف */
            margin-bottom: 8px;
        }
        .todo-priority-select {
            flex: 1; /* تمدد لملء الفراغ في السطر الثاني */
            background: var(--bg-primary); 
            color: var(--text-secondary);
            border: 1px solid var(--border-color); 
            border-radius: 20px; /* مطابقة الأزرار */
            font-size: 0.8rem; 
            padding: 0 12px; 
            cursor: pointer;
            height: 36px; /* ارتفاع مريح للأدوات */
        }
        .todo-date-input {
            flex: 1; /* تمدد لملء الفراغ في السطر الثاني */
            background: rgba(255, 255, 255, 0.05); 
            color: var(--text-primary);
            border: 1px solid var(--border-color); 
            border-radius: 20px; /* مطابقة الأزرار */
            font-size: 0.8rem; 
            height: 36px;
            min-width: 100px;
            cursor: pointer; 
            text-align: center;
            padding: 0 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* تصحيح لون أيقونة التقويم في الوضع الداكن */
        .todo-date-input::-webkit-calendar-picker-indicator {
            filter: invert(0.8); /* تحويل اللون للأبيض */
            cursor: pointer;
            opacity: 0.7;
        }
        .todo-date-input:hover { background: rgba(255, 255, 255, 0.1); }

        .todo-add-btn {
            background: var(--accent-teal); color: white; border: none;
            width: 36px; height: 36px; border-radius: 50%; /* دائري بالكامل كباقي الأزرار */
            cursor: pointer; transition: transform 0.2s;
            display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .todo-add-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
        
        .todo-filters {
            display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: nowrap; justify-content: center; align-items: center;
        }
        /* تحسين وضوح الأزرار السفلية */
        .todo-filter-pill {
            font-size: 0.72rem; padding: 4px 10px; border-radius: 15px; line-height: 1.2;
            background: rgba(255, 255, 255, 0.1); /* خلفية أفتح لتظهر */
            color: var(--text-primary);            /* نص ناصع */
            cursor: pointer; transition: 0.2s; 
            border: 1px solid rgba(255, 255, 255, 0.1); /* حدود واضحة */
            white-space: nowrap;
            font-weight: 500;
        }
        .todo-filter-pill:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--text-secondary);
        }
        .todo-filter-pill.active {
            background: var(--accent-teal); color: white; border-color: var(--accent-teal);
            font-weight: bold; box-shadow: 0 2px 5px rgba(79, 209, 197, 0.3);
        }

        .todo-item-card {
            background: var(--bg-primary); /* أنقى */
            border: 1px solid var(--border-color);
            border-left: 4px solid transparent;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            transition: all 0.2s ease;
            position: relative;
            animation: slideInRight 0.3s ease-out;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .todo-item-card:hover {
            transform: translateX(3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.06);
            border-color: var(--accent-teal);
        }
        .todo-check {
            width: 20px; height: 20px; border-radius: 6px;
            border: 2px solid var(--text-secondary);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: 0.2s; flex-shrink: 0;
            margin-top: 3px; /* Align check box with first line of text */
        }
        .todo-check.checked {
            background: var(--success); border-color: var(--success);
            color: white; font-size: 12px;
        }
        .todo-text { 
            flex: 1; 
            font-size: 0.9rem; 
            transition: 0.2s; 
            white-space: pre-wrap; /* Force wrap */
            word-break: break-word; /* Prevent horizontal scrolling */
            line-height: 1.4;
            min-width: 0; /* Flexbox wrapping fix */
        }
        .todo-item-card.done .todo-text { text-decoration: line-through; opacity: 0.5; }
        .todo-item-card.done { background: rgba(0,0,0,0.05); border-left-color: var(--success) !important; }
        
        .todo-meta {
            display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
        }
        .tag-prio {
            font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: bold; text-transform: uppercase;
        }
        .prio-high { background: rgba(229, 62, 62, 0.15); color: var(--danger); border: 1px solid var(--danger); }
        .prio-med { background: rgba(214, 158, 46, 0.15); color: var(--warning); border: 1px solid var(--warning); }
        .prio-low { background: rgba(56, 161, 105, 0.15); color: var(--success); border: 1px solid var(--success); }
        
        .tag-date { font-size: 0.7rem; color: var(--text-secondary); display: flex; align-items: center; gap: 3px; }
        .tag-date.overdue { color: var(--danger); font-weight: bold; animation: pulse-red 2s infinite; }

        .todo-actions {
            opacity: 0; transition: 0.2s; display: flex; gap: 5px;
        }
        .todo-item-card:hover .todo-actions { opacity: 1; }
        .todo-action-btn {
            background: transparent; border: none; cursor: pointer; font-size: 0.9rem; opacity: 0.7;
        }
        .todo-action-btn:hover { opacity: 1; transform: scale(1.2); }
		/* --- Timesheet Matrix Styles --- */
		.ts-matrix-container {
			overflow: auto;
			flex: 1; /* التمدد المرن بدون تحديد ارتفاع ثابت */
            min-height: 0; /* منع تجاوز الحاوية الأم */
			border: 1px solid var(--border-color);
			background: var(--bg-secondary);
			position: relative;
		}

		.ts-table {
			border-collapse: separate;
			border-spacing: 0;
			width: 100%;
			font-size: 0.8rem;
		}

		.ts-table th, .ts-table td {
			padding: 4px;
			border-right: 1px solid var(--border-color);
			border-bottom: 1px solid var(--border-color);
			text-align: center;
			min-width: 40px;
		}

		/* Sticky Headers and First Column (Project Name) */
		.ts-table thead th {
			position: sticky;
			top: 0;
			background: var(--bg-tertiary);
			z-index: 10;
			color: var(--accent-gold);
		}

		.ts-table .sticky-col {
			position: sticky;
			left: 0;
			background: var(--bg-secondary);
			z-index: 5;
			text-align: left;
			min-width: 200px;
			border-right: 2px solid var(--accent-teal);
			font-weight: bold;
		}

		.ts-table thead th.sticky-col {
			z-index: 15; /* Top-Left corner needs highest z-index */
		}

		/* Inputs within the grid */
		.ts-input {
			width: 100%;
			min-width: 30px;
			background: transparent;
			border: none;
			color: var(--text-primary);
			text-align: center;
			font-family: monospace;
		}
		.ts-input:focus {
			background: var(--bg-primary);
			outline: 1px solid var(--accent-teal);
		}

		/* Row Types */
		.row-leave { background: rgba(229, 62, 62, 0.1); }
		.row-weekend { background: rgba(0, 0, 0, 0.2); }
		.row-total { background: var(--bg-tertiary); font-weight: bold; }
		
		/* Allocation Progress Bar */
		.alloc-progress-bg {
			background: var(--bg-primary);
			border-radius: 4px;
			height: 8px;
			width: 100%;
			margin-top: 5px;
			overflow: hidden;
			position: relative;
		}
		.alloc-progress-fill {
			height: 100%;
			transition: width 0.3s;
		}
		.alloc-tag {
			font-size: 0.75rem;
			padding: 2px 6px;
			border-radius: 4px;
			background: var(--bg-tertiary);
			border: 1px solid var(--border-color);
			margin-right: 4px;
			display: inline-block;
			margin-top: 2px;
		}

        /* --- ORGANIZATIONAL CHART TREE STYLES --- */
        .org-tree ul {
            padding-top: 20px; position: relative;
            transition: all 0.5s;
            display: flex; justify-content: center;
        }
        .org-tree li {
            float: left; text-align: center;
            list-style-type: none;
            position: relative;
            padding: 20px 5px 0 5px;
            transition: all 0.5s;
        }
        /* Connectors */
        .org-tree li::before, .org-tree li::after {
            content: ''; position: absolute; top: 0; right: 50%;
            border-top: 1px solid var(--accent-gold);
            width: 50%; height: 20px;
        }
        .org-tree li::after {
            right: auto; left: 50%;
            border-left: 1px solid var(--accent-gold);
        }
        .org-tree li:only-child::after, .org-tree li:only-child::before {
            display: none;
        }
        .org-tree li:only-child { padding-top: 0; }
        .org-tree li:first-child::before, .org-tree li:last-child::after {
            border: 0 none;
        }
        .org-tree li:last-child::before{
            border-right: 1px solid var(--accent-gold);
            border-radius: 0 5px 0 0;
        }
        .org-tree li:first-child::after{
            border-radius: 5px 0 0 0;
        }
        .org-tree ul ul::before{
            content: ''; position: absolute; top: 0; left: 50%;
            border-left: 1px solid var(--accent-gold);
            width: 0; height: 20px;
        }
        /* Node Card */
        .org-node {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            padding: 10px;
            border-radius: 8px;
            display: inline-block;
            min-width: 180px;
            position: relative;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 10;
        }
        .org-node:hover {
            transform: scale(1.05);
            border-color: var(--accent-teal);
            box-shadow: 0 8px 15px rgba(79, 209, 197, 0.2);
            z-index: 20;
        }
        .org-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--bg-tertiary);
            border: 2px solid var(--accent-teal);
            margin: 0 auto 5px auto;
            display: flex; align-items: center; justify-content: center;
            font-weight: bold; font-size: 1.2rem;
        }
        .org-role { font-size: 0.75rem; color: var(--accent-gold); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
        .org-name { font-weight: bold; font-size: 0.9rem; color: var(--text-primary); }
        .org-meta { font-size: 0.7rem; color: var(--text-secondary); margin-top: 5px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 4px; text-align: left; }
        
        .org-vacancy { border: 1px dashed var(--danger); opacity: 0.9; }
        .org-vacancy .org-avatar { border-color: var(--danger); color: var(--danger); background: rgba(229, 62, 62, 0.1); }

        /* KPI & Grade Styles */
        .grade-card {
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
            border-left: 4px solid var(--accent-teal);
            padding: 15px; margin-bottom: 10px; border-radius: 6px;
            display: flex; justify-content: space-between; align-items: center;
        }
        .kpi-bar-bg { width: 100%; height: 8px; background: var(--bg-primary); border-radius: 4px; overflow: hidden; margin-top: 5px; }
        .kpi-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
        .kpi-score-badge { 
            width: 35px; height: 35px; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            font-weight: bold; font-size: 0.8rem; border: 2px solid var(--border-color);
        }
		/* --- Advanced Calculator Styles --- */
        .calc-screen {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px;
            text-align: right;
            margin-bottom: 5px;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
        }
        .calc-history {
            font-size: 0.8rem;
            color: var(--text-secondary);
            height: 15px;
            overflow: hidden;
        }
        .calc-input {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--accent-teal);
            font-size: 1.5rem;
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: bold;
        }
        .calc-keypad {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 أعمدة للوحة الأساسية */
            gap: 8px;
        }
        .calc-btn {
            padding: 10px 0;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.1s;
            font-weight: 500;
        }
        .calc-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
        .calc-btn:active { transform: translateY(1px); }
        
        .calc-btn.sci {
            background: rgba(255, 255, 255, 0.05);
            font-size: 0.75rem;
            color: var(--accent-gold);
            grid-column: span 1; /* زر عادي في صف الوظائف العلمية */
        }
        /* جعل الصفوف العلمية تأخذ عرض 5 أعمدة */
        .calc-keypad {
            grid-template-columns: repeat(5, 1fr);
        }
        /* الأزرار القياسية تأخذ مساحة مختلفة */
        .calc-btn.num { background: var(--bg-secondary); font-weight:bold; }
        .calc-btn.op { background: rgba(79, 209, 197, 0.15); color: var(--accent-teal); }
        .calc-btn.action { background: rgba(229, 62, 62, 0.15); color: var(--danger); }
        .calc-btn.equals { 
            background: linear-gradient(135deg, var(--accent-teal), var(--accent-gold));
            color: var(--bg-primary);
            font-weight: bold;
            grid-column: span 1; 
        }

        /* --- Timesheet Matrix Styles --- */
		/* --- FIX: FORCED SCROLLBARS FOR BROKEN THEMES --- */
        
        /* 1. Google Theme Scrollbar */
        body.theme-google ::-webkit-scrollbar { width: 14px; height: 14px; }
        body.theme-google ::-webkit-scrollbar-track { background: #f1f3f4; border-left: 1px solid #dadce0; }
        body.theme-google ::-webkit-scrollbar-thumb { background: #bdc1c6; border: 3px solid #f1f3f4; border-radius: 8px; }
        body.theme-google ::-webkit-scrollbar-thumb:hover { background: #9aa0a6; }

        /* 2. Windows 98 Theme Scrollbar */
        body.theme-win98 ::-webkit-scrollbar { width: 16px; height: 16px; }
        body.theme-win98 ::-webkit-scrollbar-track { background: #dfdfdf; box-shadow: inset 1px 1px 0 #fff; }
        body.theme-win98 ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
        body.theme-win98 ::-webkit-scrollbar-corner { background: #dfdfdf; }

		
        /* Fix Text & Contrast in Light Themes */
        body.theme-google, body.theme-aqua, body.theme-win98, body.theme-girly {
            --text-primary: #000000 !important; /* أسود غامق جداً للثيمات الفاتحة */
            --text-secondary: #222222 !important;
        }
        
        body.theme-google .data-table, body.theme-aqua .data-table, body.theme-win98 .data-table, body.theme-girly .data-table {
            color: var(--text-primary);
        }

        /* إصلاح تباين الخلفيات الشفافة في الثيم الفاتح (التي تم كتابتها يدوياً بالـ JS) */
        body.theme-google td[style*="background:rgba"], 
        body.theme-aqua td[style*="background:rgba"], 
        body.theme-girly td[style*="background:rgba"],
        body.theme-google div[style*="background:rgba"], 
        body.theme-aqua div[style*="background:rgba"], 
        body.theme-girly div[style*="background:rgba"] {
            color: #000 !important; /* إجبار النصوص داخل المربعات الملونة لتكون سوداء في الثيم الفاتح */
        }

        /* --- UNIVERSAL DROPDOWN & SEARCH FIX (ALL LIGHT THEMES) --- */
        /* 1. Dropdown Container Background */
        body.theme-google .dropdown-content,
        body.theme-aqua .dropdown-content,
        body.theme-win98 .dropdown-content,
        body.theme-girly .dropdown-content {
            background: #ffffff !important;
            background-image: none !important; /* Remove Aqua texture if present */
            border: 1px solid #ccc !important;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
        }

        /* 2. Dropdown Text Items (Force Black) */
        body.theme-google .dropdown-item,
        body.theme-aqua .dropdown-item,
        body.theme-win98 .dropdown-item,
        body.theme-girly .dropdown-item {
            color: #000000 !important;
            text-shadow: none !important;
            border-bottom: 1px solid #f0f0f0 !important;
        }

        /* 3. Hover Effect */
        body.theme-google .dropdown-item:hover,
        body.theme-aqua .dropdown-item:hover,
        body.theme-win98 .dropdown-item:hover,
        body.theme-girly .dropdown-item:hover {
            background: #e8f0fe !important;
            color: #000000 !important;
        }

        /* 4. Smart Search Input Inside Dropdowns (The Fix) */
        body.theme-google .dropdown-content input,
        body.theme-aqua .dropdown-content input,
        body.theme-win98 .dropdown-content input,
        body.theme-girly .dropdown-content input,
        /* Specific targeting for search classes */
        body.theme-google .search-input,
        body.theme-aqua .search-input,
        body.theme-win98 .search-input,
        body.theme-girly .search-input {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: 1px solid #ccc !important;
            text-shadow: none !important;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
        }

        /* 5. Placeholder Text Visibility */
        body.theme-google input::placeholder,
        body.theme-aqua input::placeholder,
        body.theme-win98 input::placeholder,
        body.theme-girly input::placeholder {
            color: #777 !important;
            opacity: 1 !important;
        }

        /* --- FIX DROPDOWN MENUS IN LIGHT THEMES --- */
        body.theme-google .dropdown-content, 
        body.theme-win98 .dropdown-content, 
        body.theme-girly .dropdown-content {
            background-color: #ffffff !important;
            border: 1px solid #ccc !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        }

        body.theme-google .dropdown-item, 
        body.theme-win98 .dropdown-item, 
        body.theme-girly .dropdown-item {
            color: #000000 !important; /* Force Black Text */
            border-bottom: 1px solid #eee !important;
        }

        body.theme-google .dropdown-item:hover, 
        body.theme-win98 .dropdown-item:hover, 
        body.theme-girly .dropdown-item:hover {
            background-color: #f0f0f0 !important;
            color: #000000 !important;
        }
        
        /* Fix Search Input inside Dropdowns */
        body.theme-google .dropdown-content .search-input,
        body.theme-win98 .dropdown-content .search-input,
        body.theme-girly .dropdown-content .search-input {
            background-color: #f8f9fa !important;
            border: 1px solid #ddd !important;
            color: #000000 !important;
        }
		/* Fix All Inputs (Smart Search, Selects, Forms) in Light Themes */
		body.theme-google input:not([type="checkbox"]):not([type="radio"]), body.theme-google select, body.theme-google textarea,
		body.theme-aqua input:not([type="checkbox"]):not([type="radio"]), body.theme-aqua select, body.theme-aqua textarea,
		body.theme-win98 input:not([type="checkbox"]):not([type="radio"]), body.theme-win98 select, body.theme-win98 textarea,
		body.theme-girly input:not([type="checkbox"]):not([type="radio"]), body.theme-girly select, body.theme-girly textarea,
		body.theme-google .smart-search-input, body.theme-aqua .smart-search-input,
		body.theme-google .smart-select, body.theme-aqua .smart-select,
        body.theme-google .form-input, body.theme-aqua .form-input,
        body.theme-google .form-select, body.theme-aqua .form-select {
			color: #000000 !important;
			background-color: #ffffff !important;
			border-color: #ccc !important;
		}

        /* Ensure Placeholders are visible in Light Themes */
        body.theme-google ::placeholder, body.theme-aqua ::placeholder,
        body.theme-win98 ::placeholder, body.theme-girly ::placeholder {
            color: #666666 !important;
            opacity: 1;
        }
		
        /* =========================================
           🪟 WINDOWS 11 SETTINGS / CONTROL PANEL UI 🪟
           ========================================= */
        
        /* 1. Window Styling */
        html body div#settingsModal.modal-overlay div.modal.win-settings-modal {
            width: 95vw;
            height: 100%; /* التكيف مع المساحة الجديدة بالكامل تحت الشريط */
            max-width: 1300px;
            max-height: 100% !important;
            border-radius: 8px;
            background: var(--bg-primary);
            border: 1px solid rgba(150, 150, 150, 0.3);
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            
            /* --- Apply BI Minimalist Identity (Reports Theme) --- */
            --bg-primary: #ffffff !important;
            --bg-secondary: #f8fafc !important;
            --bg-tertiary: #f1f5f9 !important;
            --text-primary: #1e293b !important;
            --text-secondary: #64748b !important;
            --accent-teal: #0d9488 !important;
            --accent-gold: #d4af37 !important;
            --border-color: #cbd5e1 !important;
            --danger: #e11d48 !important;
            --success: #059669 !important;
            --warning: #d97706 !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            color: var(--text-primary) !important;
        }
        @media (max-width: 768px) {
            html body div#settingsModal.modal-overlay div.modal-body { flex-direction: column; overflow-y: auto; }
            html body div#settingsModal.modal-overlay div.modal-body > div:first-child { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); }
        }

        /* 2. Header */
        html body div#settingsModal.modal-overlay div.modal-header {
            background: var(--bg-primary);
            border-bottom: none;
            padding: 15px 25px;
        }

        /* 3. Layout: Sidebar + Content */
        html body div#settingsModal.modal-overlay div.modal-body {
            display: flex;
            flex: 1;
            padding: 0;
            background: var(--bg-secondary);
        }

        /* Sidebar */
        html body div#settingsModal.modal-overlay div.modal-body > div:first-child {
            width: 260px;
            background: var(--bg-primary);
            padding: 15px 10px;
            border-right: 1px solid rgba(150, 150, 150, 0.1);
        }

        /* Content Area */
        html body div#settingsModal.modal-overlay div.modal-body > div:last-child {
            flex: 1;
            padding: 30px 40px;
            background: var(--bg-secondary);
            overflow-y: auto;
        }

        /* 4. Windows Sidebar Buttons */
        html body div#settingsModal.modal-overlay button.tab-btn {
            width: 100%;
            text-align: left;
            padding: 10px 15px;
            margin-bottom: 4px;
            border-radius: 20px;
            background: transparent;
            border: none;
            color: var(--text-primary);
            transition: all 0.1s;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.95rem;
        }
        
        html body div#settingsModal.modal-overlay button.tab-btn:hover { background: rgba(150, 150, 150, 0.1); }
        html body div#settingsModal.modal-overlay button.tab-btn.active {
            background: rgba(150, 150, 150, 0.15);
            font-weight: 600;
            position: relative;
        }

        /* Left Blue Pill for Active Menu */
        html body div#settingsModal.modal-overlay button.tab-btn.active::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            height: 16px; width: 4px; background: #0078D4; border-radius: 4px;
        }

        /* 5. Sub-Tabs (Cleaned up, removed !important abuse, fixed alignment) */
        html body div.stat-hr-sub-btn, html body button.hr-sub-btn, html body button.fin-sub-nav-btn {
            background: var(--bg-tertiary); 
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 8px 20px;
            margin: 5px 10px 5px 0; 
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: 20px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
            transition: all 0.2s ease;
            cursor: pointer;
        }
        html body div.stat-hr-sub-btn:hover, html body button.hr-sub-btn:hover, html body button.fin-sub-nav-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--accent-teal);
        }
        
        html body div#settingsModal.modal-overlay div.stat-hr-sub-btn:hover, 
        html body div#settingsModal.modal-overlay button.hr-sub-btn:hover, 
        html body div#settingsModal.modal-overlay button.fin-sub-nav-btn:hover { 
            border-color: rgba(150, 150, 0.5);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        }

        /* لمنع اقتطاع الإضاءة المشعة (فك الحواف الحادة) */
        html body div.tabs-nav-bar { 
            padding-top: 10px; 
            padding-bottom: 25px; 
            margin-top: -10px; 
            overflow: visible; /* تحرير الحواف بالكامل */
            flex-wrap: wrap; /* السماح بالنزول لسطر جديد لمنع الإخفاء */
        }

        /* Active State for HR (Teal Glowing Shadow) */
        html body button.stat-hr-sub-btn[style*="bold"], 
        html body button.hr-sub-btn[style*="bold"], 
        html body button.active-tab-teal {
            background: var(--accent-teal);
            color: #000;
            border-color: var(--accent-teal);
            box-shadow: 0 0 20px rgba(79, 209, 197, 0.9); /* ظل تركوازي مضيء دائري ومتمركز */
            transform: scale(1.05); /* تكبير واضح للزر لإبرازه */
            z-index: 10;
            position: relative;
        }

        /* Active State for Finance (Gold Glowing Shadow) */
        html body button.fin-sub-nav-btn[style*="bold"], 
        html body button.active-tab-gold {
            background: var(--accent-gold);
            color: #000;
            border-color: var(--accent-gold);
            box-shadow: 0 0 20px rgba(214, 158, 46, 0.9); /* ظل ذهبي مضيء دائري ومتمركز */
            transform: scale(1.05); /* تكبير واضح للزر لإبرازه */
            z-index: 10;
            position: relative;
        }

        /* إضافة ظل تركوازي لجميع الأزرار الرئيسية في الإعدادات */
        html body div#settingsModal.modal-overlay button.btn-primary {
            box-shadow: 0 4px 15px rgba(79, 209, 197, 0.3);
            transition: all 0.3s ease;
        }
        html body div#settingsModal.modal-overlay button.btn-primary:hover {
            box-shadow: 0 6px 20px rgba(79, 209, 197, 0.6);
        }

        /* 6. Fluent Design Cards (Widgets) */
        html body div#settingsModal.modal-overlay div.settings-tab div.widget-box {
            background: var(--bg-primary);
            border: 1px solid rgba(150, 150, 150, 0.2);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            margin-bottom: 15px;
        }

        html body div#settingsModal.modal-overlay div.settings-tab h3 {
            font-size: 1.6rem; font-weight: 600;
            margin-bottom: 25px; color: var(--text-primary); border-bottom: none;
        }

        /* 7. Input Fields & Selects (Fluent Style) */
        html body div#settingsModal.modal-overlay div.settings-tab input.form-input, 
        html body div#settingsModal.modal-overlay div.settings-tab select.form-select {
            background: var(--bg-secondary);
            border: 1px solid rgba(150, 150, 150, 0.4);
            border-bottom: 2px solid rgba(150, 150, 150, 0.5);
            border-radius: 20px; /* فرض الشكل الدائري هنا أيضاً */
            padding: 6px 16px;
            transition: all 0.2s;
        }
        
        html body div#settingsModal.modal-overlay div.settings-tab input.form-input:focus, 
        html body div#settingsModal.modal-overlay div.settings-tab select.form-select:focus {
            background: var(--bg-primary);
            border-bottom-color: #0078D4;
            outline: none;
        }

        /* 8. Modern Global Toggle Switches (For Settings & Functional Actions) */
        html body input[type="checkbox"] {
            appearance: none; -webkit-appearance: none;
            width: 44px; height: 22px;
            background: rgba(150, 150, 150, 0.4); border-radius: 22px;
            position: relative; cursor: pointer; outline: none; 
            margin: 0 5px 0 0; /* مسافة أمان لكي لا يلتصق بالنص */
            transition: background 0.3s ease;
            transform: none; /* إبطال أي تكبير عشوائي قديم (Scale) */
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            border: none;
            vertical-align: middle;
            flex-shrink: 0;
        }
        
        html body input[type="checkbox"]::after {
            content: ''; position: absolute; top: 3px; left: 3px;
            width: 16px; height: 16px; background: white; border-radius: 50%;
            transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        html body input[type="checkbox"]:checked { background: var(--accent-teal); }
        html body input[type="checkbox"]:checked::after { left: 25px; }

        /* === Revert Styles for Table Row Selectors & Modals === */
        /* هذا الجزء يضمن بقاء أزرار تحديد الأسطر والجداول كمربعات عادية */
        html body table.data-table input[type="checkbox"],
        html body input#archiveSelectAll, 
        html body input.archive-check, 
        html body input.staff-row-check, 
        html body input.contract-check, 
        html body input.payroll-check,
        html body input.bulk-doc-check, 
        html body input.export-col-check, 
        html body input.sched-day {
            appearance: auto; -webkit-appearance: auto;
            width: 16px; height: 16px;
            background: initial; border-radius: 3px;
            margin: auto; box-shadow: none; cursor: pointer;
            vertical-align: middle;
        }
        
        html body table.data-table input[type="checkbox"]::after,
        html body input#archiveSelectAll::after, 
        html body input.archive-check::after, 
        html body input.staff-row-check::after, 
        html body input.contract-check::after, 
        html body input.payroll-check::after,
        html body input.bulk-doc-check::after, 
        html body input.export-col-check::after, 
        html body input.sched-day::after {
            display: none;
        }

        /* --- NEW DYNAMIC UI CLASSES (Extracted from JS) --- */
        .empty-placeholder { text-align: center; padding: 40px; color: var(--text-secondary); opacity: 0.7; border-radius: 8px; background: var(--bg-tertiary); border: 1px dashed var(--border-color); }
        .grid-header-archive { display: grid; grid-template-columns: 40px 2fr 1.5fr 1.2fr 1.5fr 1fr; padding: 12px 20px; background:var(--bg-tertiary); color: var(--text-secondary); font-size: 0.85rem; font-weight: bold; border-bottom: 1px solid var(--border-color); }
        .grid-header-financial { display: grid; grid-template-columns: 40px 2fr 1.5fr 1fr 1fr 1fr; padding: 12px 20px; background:var(--bg-tertiary); color: var(--text-secondary); font-size: 0.85rem; font-weight: bold; border-bottom: 1px solid var(--border-color); }
        .status-pill-dynamic { font-size:0.75rem; font-weight:bold; padding:2px 8px; border-radius:4px; }
        .progress-bar-bg { width:100%; height:5px; background:var(--bg-tertiary); border-radius:10px; overflow:hidden; }
        .progress-bar-fill { height:100%; transition: width 0.3s ease; }
        .flex-box-center { display: flex; justify-content: center; align-items: center; gap: 10px; }
        .flex-box-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        html body div.dropdown-result-item { padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s ease; }
        html body div.dropdown-result-item:hover { background: rgba(79, 209, 197, 0.15); border-left: 3px solid var(--accent-teal); padding-left: 7px; }
        
        /* --- EXTRACTED COMPONENT & UTILITY CLASSES --- */
        .modal-flex-col { display: flex; flex-direction: column; }
        .modal-header-gradient { background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); padding: 15px 25px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
        .header-icon-box { width: 40px; height: 40px; background: var(--accent-gold); color: black; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; }
        .header-title-text { font-size: 1.2rem; color: var(--text-primary); }
        .header-subtitle-text { font-size: 0.8rem; color: var(--text-secondary); }
        .btn-close-transparent { font-size: 1.5rem; opacity: 0.7; transition: 0.3s; background: transparent; border: none; color: var(--text-primary); cursor: pointer; }
        .sidebar-panel-left { width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border-color); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
        .content-panel-right { flex: 1; padding: 30px; overflow-y: auto; background: var(--bg-primary); position: relative; }
        html body button.btn-sidebar-item { border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; font-weight: 500; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
        html body button.btn-sidebar-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
        html body button.btn-sidebar-item.active { background: var(--bg-primary); color: var(--accent-teal); font-weight: bold; border-left: 4px solid var(--accent-teal); }
        html body button.btn-sidebar-danger { color: var(--danger); border: 1px solid var(--border-color); background: rgba(229, 62, 62, 0.05); }
        
        .modal-mig-wizard { width: 900px; max-width: 95%; height: 90vh; display: flex; flex-direction: column; }
        .modal-header-teal-border { background: var(--bg-secondary); border-bottom: 2px solid var(--accent-teal); }
        .modal-body-scrollable { padding: 20px; overflow-y: auto; flex: 1; }
        .modal-footer-right { padding: 15px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); text-align: right; }
        .mig-row-item { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
        .mig-arrow-icon { text-align: center; font-weight: bold; width: 30px; }
        
        .empty-placeholder-wide { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); opacity: 0.8; }
        .mt-20 { margin-top: 20px; }
        .p-20 { padding: 20px; }
        .p-0 { padding: 0; }
        /* flex-1 → defined in spacing utilities */
        .overflow-hidden { overflow: hidden; }
        .overflow-y-auto { overflow-y: auto; }
        .flex-center-gap15 { display: flex; align-items: center; gap: 15px; }

        /* Unified Status Badges */
        .badge-status-active { background: rgba(56, 161, 105, 0.15); color: var(--success); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(56, 161, 105, 0.3); white-space: nowrap; }
        .badge-status-warning { background: rgba(214, 158, 46, 0.15); color: var(--warning); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(214, 158, 46, 0.3); white-space: nowrap; }
        .badge-status-danger { background: rgba(229, 62, 62, 0.15); color: var(--danger); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(229, 62, 62, 0.3); white-space: nowrap; }
        .badge-status-info { background: rgba(79, 209, 197, 0.15); color: var(--accent-teal); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(79, 209, 197, 0.3); white-space: nowrap; }
        .badge-status-inactive { background: rgba(160, 160, 160, 0.15); color: var(--text-secondary); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(160, 160, 160, 0.3); white-space: nowrap; }
        
        /* Refactored JS UI Utilities */
        html body div.dropdown-item-highlight { background-color: rgba(79, 209, 197, 0.15); }
        html body tr.tr-warning-row { background: rgba(214, 158, 46, 0.05); }
        /* text-warning-bold → defined in component classes */
        html body div.bg-danger-light { background: rgba(229, 62, 62, 0.1); }
        html body div.bg-tertiary { background: var(--bg-tertiary); }
        html body div.border-danger-b { border-bottom: 2px solid var(--danger); }
        
        /* Card Items */
        .card-list-item { margin-bottom: 8px; padding: 10px; background: var(--bg-tertiary); border-radius: 6px; border: 1px solid var(--border-color); transition: transform 0.2s; }
        .card-list-item:hover { transform: translateX(2px); border-color: var(--accent-teal); }
        .retention-card-gold { padding: 20px; border: 2px solid var(--accent-gold); border-radius: 12px; background: var(--bg-secondary); box-shadow: 0 4px 15px rgba(214, 158, 46, 0.1); transition: all 0.3s ease; }
        .retention-card-gold:hover { box-shadow: 0 8px 25px rgba(214, 158, 46, 0.25); transform: translateY(-3px); }
        
        /* Table Rows */
        html body tr.tr-holiday-row { background: rgba(214, 158, 46, 0.05); color: var(--accent-gold); font-weight: bold; }
        html body tr.tr-weekend-row { background: rgba(229, 62, 62, 0.05); color: var(--danger); }
        
        /* Grid Alignment Safety */
        html body div.settings-tab > div[style*="display: grid"],
        html body div.settings-tab > div[style*="display:grid"],
        html body div.stat-hr-sub-section > div[style*="display: grid"],
        html body div.stat-hr-sub-section > div[style*="display:grid"],
        html body div.hr-sub-section > div[style*="display: grid"], 
        html body div.hr-sub-section > div[style*="display:grid"], 
        html body div.fin-sub-page > div[style*="display: grid"],
        html body div.fin-sub-page > div[style*="display:grid"] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 15px;
        }

        /* منع حاوية الأزرار من التمدد الإجباري وإصلاح اقتطاع الظل نهائياً */
        html body div.settings-tab > div[style*="display:flex"],
        html body div.settings-tab > div[style*="display: flex"] {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            overflow: visible; /* هذا السطر يلغي القص ويسمح للظل بالظهور كاملاً */
            padding: 15px 5px; /* إعطاء مساحة تنفس للظل من الأعلى والأسفل */
            margin-top: -10px; /* تعويض المسافة للحفاظ على التنسيق */
        }

        /* إجبار الأزرار الفرعية على أخذ مساحة النص فقط وإعطائها مساحة للإشعاع */
        html body button.stat-hr-sub-btn, 
        html body button.hr-sub-btn, 
        html body button.fin-sub-nav-btn {
            width: fit-content;
            flex: 0 0 auto;
            white-space: nowrap;
            margin: 5px; /* هوامش أمان لمنع اصطدام التوهج بالعناصر المجاورة */
        }

        html body div#tax_brackets_container { display: flex; flex-direction: column; gap: 10px; }
        html body div#tax_brackets_container > div { width: 100%; max-width: none; background: var(--bg-primary); border: 1px solid rgba(150,150,150,0.2); }
        
        /* --- 🪟 Advanced Reports & BI - Minimalist Professional Design --- */
        .bi-minimalist-wrapper {
            /* 1. إعادة تعريف متغيرات الألوان لتصبح فاتحة وراقية حصرياً داخل التقارير */
            --bg-primary: #ffffff !important;
            --bg-secondary: #f8fafc !important;
            --bg-tertiary: #f1f5f9 !important;
            --text-primary: #1e293b !important; /* Slate 800 */
            --text-secondary: #64748b !important; /* Slate 500 */
            --accent-teal: #0d9488 !important; /* Deep Turquoise */
            --accent-gold: #d4af37 !important; /* Elegant Gold */
            --border-color: #cbd5e1 !important;
            --danger: #e11d48 !important;
            --success: #059669 !important;
            --warning: #d97706 !important;
            
            /* 2. فرض الخلفية والخطوط */
            background-color: var(--bg-primary) !important;
            color: var(--text-primary) !important;
            padding: 25px;
            border-radius: 12px;
            min-height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            box-sizing: border-box;
        }

        /* 3. تصميم البطاقات والظلال */
        .bi-minimalist-wrapper .bi-card {
            background: var(--bg-primary) !important;
            border: 1px solid var(--border-color) !important;
            border-top: 4px solid var(--accent-teal) !important;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02) !important;
            border-radius: 8px !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            padding: 20px !important;
        }

        .bi-minimalist-wrapper .bi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
        }

        .bi-minimalist-wrapper .bi-card-title {
            color: var(--text-secondary) !important;
            font-size: 0.85rem !important;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 700;
        }

        .bi-minimalist-wrapper .bi-card-value {
            color: var(--text-primary) !important;
            font-size: 2.4rem !important;
            font-weight: 800 !important;
            margin: 10px 0;
            line-height: 1.2;
        }

        /* 4. تصميم الجداول */
        .bi-minimalist-wrapper .data-table {
            border: 1px solid var(--border-color) !important;
            border-radius: 8px !important;
            overflow: hidden;
            background: #ffffff !important;
        }

        .bi-minimalist-wrapper .data-table th {
            background-color: var(--text-primary) !important;
            color: #ffffff !important;
            font-size: 12px !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 14px 16px !important;
            border-bottom: 3px solid var(--accent-gold) !important;
            border-right: none !important;
        }

        .bi-minimalist-wrapper .data-table td {
            padding: 12px 16px !important;
            border-bottom: 1px solid var(--bg-tertiary) !important;
            border-right: none !important;
            color: #334155 !important;
            font-size: 13px !important;
            font-weight: 500;
        }

        .bi-minimalist-wrapper .data-table tr:nth-child(even) td {
            background-color: var(--bg-secondary) !important;
        }

        .bi-minimalist-wrapper .data-table tr:hover td {
            background-color: var(--bg-tertiary) !important;
        }

        .bi-minimalist-wrapper h3, 
        .bi-minimalist-wrapper h4 {
            color: var(--text-primary) !important;
            font-weight: 800 !important;
            letter-spacing: -0.5px;
        }

        /* 5. تصميم أزرار التبويبات العلوية للتقارير */
        .bi-minimalist-wrapper .report-tab-btn {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 25px;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 8px 20px;
            color: var(--text-secondary);
            font-weight: 700;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }

        .bi-minimalist-wrapper .report-tab-btn:hover {
            border-color: var(--accent-teal);
            color: var(--accent-teal);
        }

        .bi-minimalist-wrapper .report-tab-btn.active {
            background: var(--text-primary) !important;
            border-color: var(--text-primary) !important;
            color: #ffffff !important;
            box-shadow: 0 6px 10px rgba(0,0,0,0.15);
        }
        
        .bi-minimalist-wrapper .report-tab-btn.active span {
            color: var(--accent-gold) !important;
        }

        /* --- 🖨️ BI Report Print Mode --- */
        @media print {
            body.bi-print-mode .header,
            body.bi-print-mode #taskbarContainer,
            body.bi-print-mode .news-ticker-container,
            body.bi-print-mode .module-header,
            body.bi-print-mode .sidebar-panel,
            body.bi-print-mode .modal-overlay {
                display: none !important;
            }
            body.bi-print-mode {
                background: #ffffff !important;
            }
            body.bi-print-mode #windowsContainer {
                position: static !important;
                overflow: visible !important;
                height: auto !important;
            }
            body.bi-print-mode .module-window#win-donors {
                position: static !important;
                width: 100% !important;
                height: auto !important;
                box-shadow: none !important;
                border: none !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: visible !important;
                background: transparent !important;
            }
            body.bi-print-mode .module-window:not(#win-donors) {
                display: none !important;
            }
            body.bi-print-mode .module-content {
                padding: 0 !important;
                overflow: visible !important;
            }
            body.bi-print-mode .bi-minimalist-wrapper {
                padding: 0 !important;
            }
            body.bi-print-mode .bi-minimalist-wrapper > div:first-child {
                display: none !important; /* إخفاء أزرار التبويبات العلوية في الطباعة */
            }
            body.bi-print-mode .bi-minimalist-wrapper::before {
                content: "Official Performance Report | Corporate Performance Report";
                display: block;
                font-size: 20px;
                font-weight: 800;
                color: #1e293b;
                text-align: center;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #d4af37; /* لمسة ذهبية */
            }
            body.bi-print-mode .bi-minimalist-wrapper::after {
                content: "System Generated & Verified Document";
                display: block;
                font-size: 10px;
                color: #94a3b8;
                text-align: center;
                margin-top: 30px;
                padding-top: 10px;
                border-top: 1px dashed #e2e8f0;
            }
        }
    /* Phase 7: OS Notifications & Toasts */
        #toast-container {
            position: fixed;
            top: 70px; /* نقلناها للأعلى لتجنب التداخل */
            right: 20px;
            z-index: 10000; /* Stays strictly above Desktop (10), Widgets (100), Windows (500), Taskbar (9999) */
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none; /* Allows clicks to pass through empty spaces between toasts */
            max-height: calc(100vh - 100px);
            overflow: hidden;
        }
        .os-toast {
            background: rgba(30, 30, 30, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #ffffff;
            padding: 12px 20px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 14px;
            pointer-events: auto; /* Restores clickability for the toast itself */
            transform: translateX(120%);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
            opacity: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 250px;
            max-width: 350px;
        }
        .os-toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        .os-toast.hide {
            transform: translateX(120%);
            opacity: 0;
        }
        .os-toast .icon {
            font-size: 18px;
        }
        .os-toast.info .icon { color: #3b82f6; }
        .os-toast.alert .icon { color: #ef4444; }
        .os-toast .message { flex-grow: 1; word-break: break-word; }
        .os-toast .close-btn {
            cursor: pointer;
            color: #aaaaaa;
            background: none;
            border: none;
            font-size: 16px;
        }
        .os-toast .close-btn:hover { color: #ffffff; }
    /* --- Aljisr Spotlight Search --- */
        #spotlight-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: flex-start;
            padding-top: 15vh;
        }

        .spotlight-box {
            width: 600px;
            background: rgba(30, 30, 30, 0.8);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.6);
            overflow: hidden;
            animation: spotlightOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        

        .spotlight-input-wrapper {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .spotlight-input {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.2rem;
            width: 100%;
            outline: none;
            margin-left: 15px;
        }

        .spotlight-box {
			max-height: 80vh; /* تحديد أقصى ارتفاع للنافذة بـ 80% من طول الشاشة */
			display: flex;
			flex-direction: column;
		}

		.spotlight-results {
			flex: 1;
			overflow-y: auto; /* تفعيل التمرير العمودي فقط عند الحاجة */
			max-height: 500px; /* أو أي ارتفاع يتناسب مع تصميمك */
			padding-right: 5px;
		}

		/* تحسين شكل شريط التمرير ليتماشى مع Bridge OS */
		.spotlight-results::-webkit-scrollbar {
			width: 5px;
		}
		.spotlight-results::-webkit-scrollbar-thumb {
			background: rgba(56, 189, 248, 0.5);
			border-radius: 10px;
		}

        .spotlight-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s;
            color: #e2e8f0;
            gap: 15px;
        }

        .spotlight-item:hover, .spotlight-item.selected {
            background: rgba(56, 189, 248, 0.2);
            color: white;
        }

        .spotlight-shortcut {
            margin-left: auto;
            font-size: 0.7rem;
            opacity: 0.5;
            background: rgba(255,255,255,0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }
    

        .tab-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            text-align: left;
            padding: 12px 15px;
            cursor: pointer;
            border-radius: 20px;
            font-size: 0.95rem;
            transition: all 0.2s;
        }
        .tab-btn:hover {
            background: rgba(255,255,255,0.05);
            color: var(--text-primary);
        }
        .tab-btn.active {
            background: var(--bg-primary);
            color: var(--accent-teal);
            font-weight: bold;
            border-left: 3px solid var(--accent-teal);
        }
        .settings-tab {
            animation: fadeIn 0.3s ease-out;
            max-width: 1050px; /* حصر العرض الأقصى لمنع التمدد المبالغ فيه */
            margin: 0 auto;    /* توسيط المحتوى في الشاشات العريضة */
            width: 100%;
        }

        /* --- NEW EXTRACTED CLASSES (Refactored from Inline Styles) --- */
        .info-panel { background: rgba(79, 209, 197, 0.05); border: 1px dashed var(--accent-teal); border-radius: 6px; padding: 10px; margin-bottom: 15px; }
        .warning-panel { background: rgba(214, 158, 46, 0.05); border: 1px solid var(--accent-gold); border-radius: 8px; padding: 15px; margin-bottom: 15px; }
        .section-panel { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; margin-bottom: 15px; }
        .toolbar-panel { background: var(--bg-secondary); padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .table-wrapper { flex: 1; overflow: auto; border: 1px solid var(--border-color); border-radius: 6px; position: relative; }
		.modal-footer-bar { padding: 15px 20px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); display: flex; gap: 10px; justify-content: flex-end; }

        /* Fix: تحويل كل الأزرار العريضة داخل النوافذ المنبثقة إلى أزرار عادية في اليمين */
        .modal button[style*="width:100%"],
        .modal button[style*="width: 100%"],
        .modal-body button[style*="width:100%"],
        .modal-body button[style*="width: 100%"],
        .modal-overlay button[style*="width:100%"],
        .modal-overlay button[style*="width: 100%"] {
            width: auto !important;
            min-width: 140px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

        /* تحويل الأزرار داخل حاويات flex إلى يمين */
        .modal .form-group:has(button[style*="width:100%"]),
        .modal div:has(> button[style*="width:100%"]:only-child) {
            display: flex;
            justify-content: flex-end;
        }        
        .bi-card-danger { border-left: 5px solid var(--danger) !important; }
        .bi-card-success { border-left: 5px solid var(--success) !important; }
        .bi-card-gold { border-left: 5px solid var(--accent-gold) !important; background: linear-gradient(90deg, var(--bg-secondary) 0%, rgba(214, 158, 46, 0.05) 100%) !important; }
        
        .archive-row-grid { display: grid; grid-template-columns: 40px 2fr 1.5fr 1.2fr 1.5fr 1fr; align-items: center; padding: 12px 20px; transition: 0.2s; background: var(--bg-secondary); margin-bottom: 5px; border-radius: 8px; border: 1px solid var(--border-color); }
        .fin-row-grid { display: grid; grid-template-columns: 40px 2fr 1.5fr 1fr 1fr 1fr; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border-color); transition: 0.2s; background: var(--bg-secondary); }
        
        /* --- Refactored Global UI Classes --- */
        .tabs-nav-bar { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; overflow-x: auto; }
        .page-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
        .info-banner { padding: 10px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); color: var(--accent-teal); text-align: center; font-size: 0.9rem; }
        .form-group-inline { display: flex; align-items: center; gap: 10px; background: var(--bg-tertiary); padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color); }
        
        /* --- Extended Utility Colors for JS Injection --- */
        .bg-teal-light { background: rgba(79, 209, 197, 0.15); color: var(--accent-teal); }
        .bg-warning-light { background: rgba(214, 158, 46, 0.15); color: var(--warning); }
        .bg-danger-light { background: rgba(229, 62, 62, 0.15); color: var(--danger); }
        .bg-success-light { background: rgba(56, 161, 105, 0.15); color: var(--success); }
        
        .cell-holiday { background: rgba(214, 158, 46, 0.15) !important; color: var(--warning); }
        .cell-leave-paid { background: rgba(56, 161, 105, 0.15) !important; color: var(--success); }
        .cell-leave-unpaid { background: rgba(229, 62, 62, 0.15) !important; color: var(--danger); }
        .cell-weekend { background: var(--bg-tertiary) !important; }

/* ════════════════════════════════════════════════════════════════
   SECTION 2 — fixes.css (Bug Fixes & Overrides)
   ════════════════════════════════════════════════════════════════ */

.module-window {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    position: fixed !important;
    min-width: 400px !important;
    min-height: 300px !important;
    resize: both !important;
    box-sizing: border-box !important;
}

/* Maximized state — override all sizing */
.module-window.window-maximized {
    top: var(--win-max-top, 50px) !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--win-max-height, calc(100vh - 110px)) !important;
    max-height: var(--win-max-height, calc(100vh - 110px)) !important;
    border-radius: 0 !important;
    transform: none !important;
    resize: none !important;
}

/* ✅ merged 3 duplicate .module-window blocks */

/* ═══════════════════════════════════════════
   fixes.css — Bridge OS HRS
   Add in index.html after animations.css:
   <link rel="stylesheet" href="fixes.css">
   ═══════════════════════════════════════════ */

/* FIX 1: Header Buttons */
.header-right,
.header-right button,
button#btn_arrange,
button#btn_help,
button#btn_add_widget {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
}
.header-right { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 !important; justify-content: flex-end !important; }
.header-right button { height: 36px !important; padding: 0 14px !important; border-radius: 20px !important; cursor: pointer !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; box-sizing: border-box !important; font-family: inherit !important; background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
button#btn_arrange { border-color: var(--accent-teal) !important; color: var(--accent-teal) !important; background: transparent !important; }
button#btn_add_widget { background: transparent !important; color: var(--accent-teal) !important; border-color: var(--accent-teal) !important; font-weight: bold !important; }

/* FIX 2: Window Buttons */
.module-header { display: flex !important; justify-content: space-between !important; align-items: center !important; height: 40px !important; padding: 0 !important; flex-shrink: 0 !important; }
.win-controls { display: flex !important; height: 100% !important; flex-shrink: 0 !important; min-width: 138px !important; visibility: visible !important; }
.win-btn { width: 46px !important; height: 40px !important; border: none !important; background: transparent !important; color: var(--text-primary) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; border-radius: 0 !important; }
.win-btn:hover { background: rgba(255,255,255,0.1) !important; }
.win-btn-close:hover { background: #e81123 !important; color: white !important; }
.win-title { padding-left: 15px !important; font-size: 13px !important; color: var(--text-primary) !important; display: flex !important; align-items: center !important; flex-grow: 1 !important; visibility: visible !important; }

/* FIX 3: Settings Modal — now handled by fixes2.css with full theme support */
#settingsModal .modal-close { color: var(--text-secondary) !important; background: transparent !important; border: none !important; cursor: pointer !important; font-size: 1.4rem !important; display: flex !important; visibility: visible !important; opacity: 1 !important; width: 32px !important; height: 32px !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; }
#settingsModal .modal-close:hover { background: rgba(239,68,68,0.2) !important; color: #ef4444 !important; }
#settingsModal .modal-body { background: var(--bg-secondary) !important; display: flex !important; flex: 1 !important; padding: 0 !important; }
#settingsModal .modal-body > div:first-child { background: var(--bg-primary) !important; border-right: 1px solid var(--border-color) !important; width: 240px !important; padding: 12px 8px !important; }
#settingsModal button.tab-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; padding: 11px 14px !important; border-radius: 8px !important; border: none !important; background: transparent !important; color: var(--text-secondary) !important; font-size: 0.92rem !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; margin-bottom: 3px !important; text-align: left !important; font-family: inherit !important; }
#settingsModal button.tab-btn:hover { background: rgba(255,255,255,0.07) !important; color: var(--text-primary) !important; }
#settingsModal button.tab-btn.active { background: rgba(56,189,248,0.15) !important; color: #38bdf8 !important; font-weight: 600 !important; border-left: 3px solid #38bdf8 !important; }
#settingsModal .modal-body > div:last-child { flex: 1 !important; background: var(--bg-secondary) !important; padding: 25px 35px !important; overflow-y: auto !important; color: var(--text-primary) !important; }
#settingsModal .settings-tab { color: var(--text-primary) !important; display: block !important; }
#settingsModal .settings-tab h3 { color: var(--accent-teal) !important; }
#settingsModal .settings-tab h4 { color: var(--text-primary) !important; }
#settingsModal .settings-tab label { color: var(--text-secondary) !important; }
#settingsModal .theme-card, #settingsModal .theme-card-highlight { background: var(--bg-tertiary, rgba(255,255,255,0.04)) !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; padding: 18px !important; margin-bottom: 16px !important; }
#settingsModal input, #settingsModal select { background: var(--bg-tertiary, rgba(255,255,255,0.07)) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
#settingsModal input:focus, #settingsModal select:focus { border-color: var(--accent-teal) !important; outline: none !important; }

/* FIX 4: modal-overlay */
.modal-overlay { display: none; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65) !important; z-index: var(--z-modal) !important; align-items: center !important; justify-content: center !important; }
.modal-overlay.active { display: flex !important; }
.modal-close { background: transparent !important; border: none !important; cursor: pointer !important; display: flex !important; visibility: visible !important; opacity: 0.75 !important; align-items: center !important; justify-content: center !important; }
.modal-close:hover { opacity: 1 !important; color: #ef4444 !important; }

/* ══════════════════════════════════════════
   FIX 5: Buttons inside windows (Import/Export/Delete/New)
   ══════════════════════════════════════════ */

/* Cancel display:none rule on buttons inside widget-header */
.widget-header button:not(.widget-btn) {
    display: inline-flex !important;
}

/* Show full toolbar-panel inside windows */
.module-content .toolbar-panel,
.module-content .toolbar-panel button,
.module-content .toolbar-panel .btn-primary,
.module-content .toolbar-panel .btn-secondary,
.module-content .toolbar-panel .btn-danger,
.module-content .toolbar-panel .btn-success,
#content-staff .toolbar-panel button,
#content-budgets .toolbar-panel button,
#content-contracts .toolbar-panel button,
#content-leaves .toolbar-panel button,
#content-payrolls .toolbar-panel button,
#content-payslips .toolbar-panel button,
#content-archive_manager .toolbar-panel button,
#content-timesheets .toolbar-panel button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Show all buttons inside module-content generally */
.module-content button,
.module-content .btn-primary,
.module-content .btn-secondary,
.module-content .btn-danger,
.module-content .btn-success {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Prevent any display:none from affecting window buttons */
[id^="content-"] button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Exception: Buttons that must remain hidden */
[id^="content-"] button[style*="display: none"],
[id^="content-"] button[style*="display:none"] {
    display: none !important;
}

/* ══════════════════════════════════════════
   FIX 6: Import Modal - Results overflowing the window
   ══════════════════════════════════════════ */

/* Full fix for Import Modal */
#importPreviewModal {
    z-index: 10050 !important; /* Above everything including windows */
    align-items: flex-start !important;
    padding-top: 50px !important;
    padding-bottom: 20px !important;
}

#importPreviewModal .modal {
    width: 95vw !important;
    max-width: 1300px !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}

#importPreviewModal .modal-header {
    flex-shrink: 0 !important;
}

#importPreviewModal .modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    padding: 15px !important;
    min-height: 0 !important;
}

/* Top Section (Meta + Options) - No stretching */
#importMetaSection {
    flex-shrink: 0 !important;
    max-height: 140px !important;
    overflow-y: auto !important;
    margin-bottom: 10px !important;
}

/* Main Body - Left and Import */
#importPreviewModal .modal-body > div[style*="flex: 1"],
#importPreviewModal .modal-body > div:nth-child(2) {
    flex: 1 !important;
    display: flex !important;
    gap: 20px !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Left Column (Column Mapping) */
#importPreviewModal div[style*="width: 320px"],
#importPreviewModal div[style*="width:320px"] {
    width: 300px !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    max-height: 100% !important;
}

/* Preview Container - Stretches and scrolls */
#importPreviewContainer {
    flex: 1 !important;
    overflow: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    background: var(--bg-primary) !important;
}

/* Results Table */
#importPreviewTable {
    min-width: max-content !important;
}

#importPreviewTable table,
#importPreviewTable .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Bottom Buttons Bar */
#importPreviewModal .modal-body > div:last-child {
    flex-shrink: 0 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Same fix for exportPreviewModal */
#exportPreviewModal {
    z-index: 10050 !important;
    align-items: flex-start !important;
    padding-top: 50px !important;
}

#exportPreviewModal .modal {
    width: 95vw !important;
    max-width: 1300px !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}

#exportPreviewModal .modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    padding: 15px !important;
    min-height: 0 !important;
}

#exportPreviewTable {
    flex: 1 !important;
    overflow: auto !important;
    min-height: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

/* Same fix for payrollExportModal */
#payrollExportModal {
    z-index: 10050 !important;
    align-items: flex-start !important;
    padding-top: 50px !important;
}

#payrollExportModal .modal {
    width: 95vw !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}

#payrollExportModal .modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    min-height: 0 !important;
}

#payrollExportPreviewTable {
    flex: 1 !important;
    overflow: auto !important;
    min-height: 200px !important;
}

/* ══════════════════════════════════════════
   FIX 7: Checkboxes inside import windows
   Reason: html body input[type="checkbox"] turns them into a toggle switch
   ══════════════════════════════════════════ */

/* Restore all checkboxes inside Import/Export modals to original shape */
#importPreviewModal input[type="checkbox"],
#exportPreviewModal input[type="checkbox"],
#payrollExportModal input[type="checkbox"],
#importPreviewTable input[type="checkbox"],
#exportPreviewTable input[type="checkbox"],
#importPreviewContainer input[type="checkbox"],
#exportHeaderConfig input[type="checkbox"],
#exportColumnConfig input[type="checkbox"],
#importMappingContainer input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 3px !important;
    background: initial !important;
    box-shadow: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: initial !important;
    transform: none !important;
    display: inline-block !important;
}

#importPreviewModal input[type="checkbox"]::after,
#exportPreviewModal input[type="checkbox"]::after,
#payrollExportModal input[type="checkbox"]::after,
#importPreviewTable input[type="checkbox"]::after,
#exportPreviewTable input[type="checkbox"]::after,
#importPreviewContainer input[type="checkbox"]::after,
#exportHeaderConfig input[type="checkbox"]::after,
#exportColumnConfig input[type="checkbox"]::after {
    display: none !important;
    content: none !important;
}

/* ══════════════════════════════════════════
   FIX 8: Confirm/Cancel buttons at the bottom of import windows
   Reason: overflow:hidden cuts off bottom buttons
   ══════════════════════════════════════════ */

/* Comprehensive fix for modal-body in import windows */
#importPreviewModal .modal-body,
#exportPreviewModal .modal-body,
#payrollExportModal .modal-body {
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Bottom button bar - never hidden */
#importPreviewModal .modal-body > div:last-child,
#exportPreviewModal .modal-body > div:last-child,
#payrollExportModal .modal-body > div:last-child {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--border-color) !important;
    min-height: 52px !important;
    align-items: center !important;
    background: var(--bg-secondary) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* The buttons themselves inside the bottom bar */
#importPreviewModal .modal-body > div:last-child button,
#exportPreviewModal .modal-body > div:last-child button,
#payrollExportModal .modal-body > div:last-child button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 100px !important;
    height: 36px !important;
    padding: 0 20px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* Cancel Button */
#importPreviewModal .modal-body > div:last-child .btn-secondary,
#exportPreviewModal .modal-body > div:last-child .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

/* Confirm Button */
#importPreviewModal .modal-body > div:last-child .btn-primary,
#exportPreviewModal .modal-body > div:last-child .btn-success,
#payrollExportModal .modal-body > div:last-child .btn-success {
    background: transparent !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
}

/* ══════════════════════════════════════════
   FIX 9: Top Bar - Sticks to top and stretches to sides
   ══════════════════════════════════════════ */

/* --z-header now defined in style.css :root */

/* Full reset for html and body */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Header sticks to top and stretches fully to sides */
header.header,
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 50px !important;
    z-index: var(--z-header) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    background: rgba(20, 20, 20, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
    margin: 0 !important;
}

/* Main content starts after header */
body > *:not(header):not(#windowsContainer):not(#taskbar):not(script):not(style) {
    margin-top: 0 !important;
}

/* Desktop starts right after header */
#desktop,
#widgetsGrid,
.desktop,
.main-content,
.desktop-area {
    margin-top: 50px !important;
    padding-top: 0 !important;
}

/* Bottom taskbar unaffected */
#taskbar {
    bottom: 0 !important;
    top: auto !important;
}

/* ══════════════════════════════════════════
   FIX 10: Settings Modal - tab-general, tab-data, internal buttons
   ══════════════════════════════════════════ */

/* 1. Show all settings-tabs when activated
      Problem: FIX 5 overrides display:none on all buttons including tabs */

/* Reset tab hiding correctly */
.settings-tab {
    display: none !important;
}

.settings-tab.active,
#tab-hr,
#tab-finance,
#tab-general,
#tab-lists,
#tab-data {
    /* Activated only via JavaScript - do not force it here */
}

/* Only active tab is shown */
.settings-tab[style*="display: block"],
.settings-tab[style*="display:block"] {
    display: block !important;
}

/* 2. Fix size and layout of settings modal-body */
#settingsModal .modal-body {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    flex: 1 !important;
    overflow: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
}

/* Sidebar */
#settingsModal .modal-body > div:first-child {
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 15px 10px !important;
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
    overflow-y: auto !important;
}

/* Content Area */
#settingsModal .modal-body > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 25px 30px !important;
    background: var(--bg-primary) !important;
    position: relative !important;
    min-width: 0 !important;
}

/* 3. tab-btn - Show correctly */
#settingsModal .tab-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: background 0.15s !important;
    margin-bottom: 2px !important;
}

#settingsModal .tab-btn:hover {
    background: rgba(255,255,255,0.07) !important;
}

#settingsModal .tab-btn.active {
    background: rgba(56,189,248,0.12) !important;
    color: var(--accent-teal) !important;
    font-weight: 600 !important;
}

/* 4. Backup & Reset button in sidebar */
#settingsModal .modal-body > div:first-child > button:last-of-type {
    margin-top: auto !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    background: rgba(239,68,68,0.05) !important;
}

/* 5. Buttons inside settings content */
#settingsModal .settings-tab button,
#settingsModal .settings-tab .btn-primary,
#settingsModal .settings-tab .btn-secondary,
#settingsModal .settings-tab .btn-danger,
#settingsModal .settings-tab .btn-success {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 6. sub-tabs inside HR */
#settingsModal .stat-hr-sub-btn,
#settingsModal .hr-sub-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 7. hr-sub-section and stat-hr-sub-section - Show/Hide */
.hr-sub-section,
.stat-hr-sub-section {
    display: none;
}

.hr-sub-section[style*="display:block"],
.hr-sub-section[style*="display: block"],
.stat-hr-sub-section[style*="display:block"],
.stat-hr-sub-section[style*="display: block"] {
    display: block !important;
}

/* 8. tab-data - Backup section */
#tab-data {
    color: var(--text-primary) !important;
}

#tab-data h3 {
    color: var(--accent-teal) !important;
    margin-bottom: 20px !important;
}

#tab-data .widget-box {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}

#tab-data button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    height: auto !important;
    min-height: 40px !important;
}

/* 9. tab-general - User Profile */
#tab-general {
    color: var(--text-primary) !important;
}

#tab-general button,
#tab-general .btn-primary,
#tab-general .btn-secondary {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 10. Fix FIX 5 which corrupted intentionally hidden buttons */
/* Any button with style="display:none" remains hidden */
[style*="display: none"],
[style*="display:none"] {
    display: none !important;
}

/* Exception: Buttons inside windows and settings are always shown */
#settingsModal .tab-btn[style*="display: none"] {
    display: flex !important;
}

/* ══════════════════════════════════════════
   FIX 11: Scrollbars - Comprehensive appearance in all windows
   ══════════════════════════════════════════ */

/* ── 1. Define scrollbar globally ── */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    transition: background 0.2s !important;
}

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

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* ── 2. module-window: Remove overflow:hidden that cuts everything ── */


/* ── 3. module-content: Correct scrolling ── */
.module-content {
    overflow-y: auto !important;
    overflow-x: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.2) transparent !important;
}

/* ── 4. The windows themselves: correct flex column ── */


/* ── 5. Data tables - horizontal scroll ── */
.table-container-flex,
.table-responsive,
#staffTableContainer,
[id$="TableContainer"],
[id$="Container"] .data-table,
.module-content > div > .data-table {
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.2) transparent !important;
}

/* ── 6. modals: internal scroll ── */
.modal-body {
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.2) transparent !important;
}

/* ── 7. settings modal sidebar ── */
#settingsModal .modal-body > div:first-child,
#settingsModal .modal-body > div:last-child {
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
}

/* ── 8. Light themes - dark scrollbar ── */
body.theme-google ::-webkit-scrollbar-thumb,
body.theme-aqua ::-webkit-scrollbar-thumb,
body.theme-win98 ::-webkit-scrollbar-thumb,
body.theme-girly ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25) !important;
}

body.theme-google ::-webkit-scrollbar-track,
body.theme-aqua ::-webkit-scrollbar-track,
body.theme-win98 ::-webkit-scrollbar-track,
body.theme-girly ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ── 9. overflow for containers needing scroll ──
   IMPORTANT: Removed [id^="content-"] > div > div selectors — they were
   causing scrollbars to appear on buttons, headings, and table cells.
   Only target known scroll containers by class name. ── */
.hr-sub-section,
.stat-hr-sub-section,
.settings-tab,
.widget-body,
.budget-content,
.archive-list,
.panel,
.panel-body,
.list-container,
.inner-container,
.widget-box,
.sidebar-panel,
.main-panel {
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    min-height: 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

/* Only top-level content containers, not their deep children */
[id^="content-"],
.module-content > div,
.modal-body > div {
    min-height: 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

/* ── 10. Prevent overflow:hidden from hiding scroll ── */
.module-content *:not(.dropdown-content):not(.os-context-menu):not(.modal-overlay):not(.win-controls) {
    scrollbar-width: thin !important;
}

/* ══════════════════════════════════════════
   FIX 12: App Center / Desktop Environment
   Problem: .desktop-environment missing CSS
   Elements float outside boundaries without scrollbar
   ══════════════════════════════════════════ */

/* ── 1. Main Desktop Container ── */
#desktopEnvironment,
.desktop-environment {
    position: fixed !important;
    top: 50px !important;            /* Right after header */
    left: 0 !important;
    right: 0 !important;
    bottom: 50px !important;         /* Above taskbar */
    z-index: 15 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: 30px 20px 20px 20px !important;
    box-sizing: border-box !important;
    /* Smooth scroll */
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.2) transparent !important;
}

/* ── 2. Icon Layout: Regular Grid ── */
#desktopEnvironment,
.desktop-environment {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 90px) !important;
    grid-auto-rows: 100px !important;
    gap: 10px 15px !important;
    align-content: start !important;
    justify-content: start !important;
}

/* ── 3. Desktop Icon ── */
.desktop-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 5px 8px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.15s !important;
    width: 90px !important;
    height: 90px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    user-select: none !important;
    position: relative !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-2px) !important;
}

.desktop-icon:active {
    transform: scale(0.95) !important;
}

/* ── 4. Image/Symbol Icon ── */
.desktop-icon-img {
    font-size: 2.2rem !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
    flex-shrink: 0 !important;
}

/* ── 5. Icon Text ── */
.desktop-icon-text {
    font-size: 0.72rem !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    max-width: 80px !important;
}

/* ── 6. Desktop Scrollbar ── */
#desktopEnvironment::-webkit-scrollbar,
.desktop-environment::-webkit-scrollbar {
    width: 6px !important;
}

#desktopEnvironment::-webkit-scrollbar-track,
.desktop-environment::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03) !important;
}

#desktopEnvironment::-webkit-scrollbar-thumb,
.desktop-environment::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 3px !important;
}

#desktopEnvironment::-webkit-scrollbar-thumb:hover,
.desktop-environment::-webkit-scrollbar-thumb:hover {
    background: var(--accent-teal) !important;
}

/* ── 7. Prevent main-content from overlapping desktop ── */
.main-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: auto !important;
    pointer-events: none !important;
    background: transparent !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ── 8. windowsContainer stays on top ── */
#windowsContainer {
    z-index: 500 !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════
   FIX 13: Final Override for Colors and Contrast (Force Colors)
   ══════════════════════════════════════════ */
/* 1. Force light theme variables on all elements using star selector (*) */
body.theme-google, body.theme-google *,
body.theme-win98, body.theme-win98 *,
body.theme-aqua, body.theme-aqua *,
body.theme-girly, body.theme-girly * {
    --text-primary: #0f172a !important;
    --text-secondary: #475569 !important;
    --bg-primary: #ffffff !important;
    --bg-secondary: #f8fafc !important;
    --bg-tertiary: #f1f5f9 !important;
    --border-color: #cbd5e1 !important;
}

/* 2. Explicitly force text and background color on all inputs, menus, and tables in light theme */
body.theme-google input, body.theme-google select, body.theme-google textarea, body.theme-google .form-input, body.theme-google .form-select, body.theme-google td, body.theme-google .dropdown-item, body.theme-google .dropdown-content, body.theme-google .widget-body, body.theme-google .module-content, body.theme-google .list-item, body.theme-google .item-content,
body.theme-win98 input, body.theme-win98 select, body.theme-win98 textarea, body.theme-win98 .form-input, body.theme-win98 .form-select, body.theme-win98 td, body.theme-win98 .dropdown-item, body.theme-win98 .dropdown-content, body.theme-win98 .widget-body, body.theme-win98 .module-content, body.theme-win98 .list-item, body.theme-win98 .item-content,
body.theme-aqua input, body.theme-aqua select, body.theme-aqua textarea, body.theme-aqua .form-input, body.theme-aqua .form-select, body.theme-aqua td, body.theme-aqua .dropdown-item, body.theme-aqua .dropdown-content, body.theme-aqua .widget-body, body.theme-aqua .module-content, body.theme-aqua .list-item, body.theme-aqua .item-content,
body.theme-girly input, body.theme-girly select, body.theme-girly textarea, body.theme-girly .form-input, body.theme-girly .form-select, body.theme-girly td, body.theme-girly .dropdown-item, body.theme-girly .dropdown-content, body.theme-girly .widget-body, body.theme-girly .module-content, body.theme-girly .list-item, body.theme-girly .item-content {
    color: #0f172a !important;
    background-color: #ffffff !important;
    text-shadow: none !important;
}

/* 3. Color table headers to be readable in light theme (dark background, white text) */
body.theme-google th, body.theme-win98 th, body.theme-aqua th, body.theme-girly th {
    color: #ffffff !important;
    background-color: #1e293b !important;
    text-shadow: none !important;
}

/* 4. Fix faded placeholder text */
body.theme-google input::placeholder, body.theme-win98 input::placeholder, body.theme-aqua input::placeholder, body.theme-girly input::placeholder {
    color: #64748b !important;
}

/* 5. Exception and protection for Settings panel to remain dark and elegant as designed */
#settingsModal, #settingsModal *, #settingsModal .theme-card, #settingsModal input, #settingsModal select, #settingsModal .tab-btn {
    --text-primary: #e2e8f0 !important;
    --text-secondary: #94a3b8 !important;
    --bg-primary: #1c1c2e !important;
    --bg-secondary: #16213e !important;
    --bg-tertiary: #1a2744 !important;
    --border-color: rgba(255,255,255,0.12) !important;
    color: #e2e8f0 !important;
}
#settingsModal input, #settingsModal select {
    background-color: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
}

/* 6. Ensure dark themes (Dark, Glass, DOS) work correctly for text */
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) input,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) select,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) textarea,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) .dropdown-item,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) td {
    color: #ffffff !important;
}
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) input,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) select,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) textarea {
    background-color: rgba(0,0,0,0.2) !important;
}

/* ══════════════════════════════════════════
   FIX 13.5: Text Contrast Fix
   Solves white text on white background or black on black
   ══════════════════════════════════════════ */

/* 1. Force all basic texts and containers to use the active theme's text color */
body, .module-window, .modal, .widget-box, .theme-card, .data-table, .panel, .widget-body, .list-item, .item-content {
    color: var(--text-primary) !important;
}

/* 2. Fix Input and Select fields that usually cause the issue */
input, select, textarea, .form-input, .form-select, .filter-input, .smart-search-input {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
}

/* Ensure typed text is clear inside fields upon focus */
input:focus, select:focus, textarea:focus, .form-input:focus, .form-select:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* 3. Fix Dropdowns */
.dropdown-content, .dropdown-container .dropdown-content {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}
.dropdown-item, .dropdown-item.budget-smart-item {
    color: var(--text-primary) !important;
}
.dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-teal) !important;
}

/* 4. Explicit color definitions in Light Themes to ensure text isn't white */
body.theme-google,
body.theme-win98,
body.theme-aqua,
body.theme-girly {
    --text-primary: #1e293b !important;     /* Very dark gray (almost black) */
    --text-secondary: #475569 !important;   /* Readable medium gray */
    --bg-primary: #ffffff !important;        /* Pure white for backgrounds */
    --bg-secondary: #f8fafc !important;      /* Off-white for menus */
    --bg-tertiary: #f1f5f9 !important;       /* Very light gray for inputs */
    --border-color: #cbd5e1 !important;      /* Clear borders */
    color: var(--text-primary) !important;
}

/* 5. Fix data table colors in light themes */
body.theme-google .data-table td,
body.theme-win98 .data-table td,
body.theme-aqua .data-table td,
body.theme-girly .data-table td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

body.theme-google .data-table th,
body.theme-win98 .data-table th,
body.theme-aqua .data-table th,
body.theme-girly .data-table th {
    color: #ffffff !important; /* Light table headers need white text because their background is usually dark */
    background-color: #1e293b !important;
}

/* 6. Fix headings and muted texts to be readable in all themes */
h1, h2, h3, h4, h5, .widget-title, .modal-title, .win-title {
    color: var(--text-primary) !important;
}
.text-muted, .text-secondary, .text-muted-sm {
    color: var(--text-secondary) !important;
}

/* 7. Exceptions for pre-colored buttons and texts to preserve system aesthetics */
.text-gold, .text-gold-bold { color: var(--accent-gold) !important; }
.text-teal, .text-teal-bold { color: var(--accent-teal) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

/* ══════════════════════════════════════════
   FIX 14: Restore Search Boxes and Dropdowns (Contracts window, etc.)
   ══════════════════════════════════════════ */

/* 1. Protect containers from forced hiding */
.modal-body .form-group,
.modal-body .dropdown-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* 2. Show inputs, menus, and custom search buttons */
.modal-body input, 
.modal-body select, 
.modal-body textarea,
button.form-select, 
div.form-select,
input.smart-search-input {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 38px !important;
    border: 1px solid var(--border-color) !important;
}

/* 3. Fix dropdowns on click (override false hiding) */
.dropdown-content.show,
.dropdown-container.show .dropdown-content {
    display: block !important;
    z-index: 999999 !important; /* Ensure appearance above window */
}

/* 4. Ensure correct colors for search boxes in dark theme */
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) button.form-select,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) div.form-select,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) input.smart-search-input {
    color: #ffffff !important;
    background-color: rgba(0,0,0,0.4) !important;
}

/* 5. Ensure correct colors in light theme */
body.theme-google button.form-select, body.theme-win98 button.form-select, body.theme-aqua button.form-select, body.theme-girly button.form-select,
body.theme-google div.form-select, body.theme-win98 div.form-select, body.theme-aqua div.form-select, body.theme-girly div.form-select,
body.theme-google input.smart-search-input, body.theme-win98 input.smart-search-input, body.theme-aqua input.smart-search-input, body.theme-girly input.smart-search-input {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* ══════════════════════════════════════════
   FIX 15: Remove yellow line under top bar
   ══════════════════════════════════════════ */

/* 1. Remove any colored bottom border from main header */
header.header, .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-image: none !important;
}

/* 2. Hide pseudo-elements that draw decorative lines */
header.header::after, .header::after,
header.header::before, .header::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    height: 0 !important;
    border: none !important;
}

/* 3. Ensure news ticker (if empty) doesn't leave a line */
#newsTicker {
    border-top: none !important;
    border-bottom: none !important;
}

/* ══════════════════════════════════════════
   FIX 16: Fix To-Do button and delete/add button sizes
   ══════════════════════════════════════════ */

/* 1. Fix Add (+) button and show it in To-Do list */
.todo-input-group {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
}

.todo-add-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important; /* Force button to take fixed space */
    width: 38px !important;
    height: 38px !important;
    background-color: var(--accent-teal) !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important; /* Prevent other fields from swallowing button space */
}

/* 2. Fix giant button sizes in Settings (Master Lists) */
#tab-lists .widget-box button,
#donorList button,
#projectList button {
    width: auto !important; /* Prevent button from taking full screen width */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* 3. Format delete (x) buttons to be small, elegant round/square */
#donorList .btn-danger,
#projectList .btn-danger {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* 4. Format Add buttons to have consistent size */
#tab-lists .btn-primary {
    min-width: 90px !important;
    padding: 0 15px !important;
    height: 38px !important;
    border-radius: 8px !important;
}

/* ══════════════════════════════════════════
   FIX 17: Mobile & Tablet Responsiveness
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 1. Fix Settings Modal to be vertical instead of horizontal */
    #settingsModal .modal-body {
        flex-direction: column !important;
    }
    #settingsModal .modal-body > div:first-child {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 200px !important; /* Vertical scrollbar will work here thanks to previous fixes */
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* 2. Fix Import/Export Modals */
    #importPreviewModal .modal-body > div[style*="flex: 1"],
    #importPreviewModal .modal-body > div:nth-child(2) {
        flex-direction: column !important;
    }
    #importPreviewModal div[style*="width: 320px"],
    #importPreviewModal div[style*="width:320px"] {
        width: 100% !important;
        max-height: 250px !important;
        border-bottom: 1px solid var(--border-color) !important;
        margin-bottom: 10px !important;
    }

    /* 3. Fix top header to allow horizontal scroll for buttons if screen narrows */
    header.header, .header {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        scrollbar-width: none !important; /* Hide scrollbar visually while keeping touch scroll function */
    }
    header.header::-webkit-scrollbar, .header::-webkit-scrollbar {
        display: none !important;
    }
    
    /* 4. Ensure data tables maintain min-width to enable proper horizontal scroll */
    .module-content .data-table {
        min-width: 700px !important; /* Force table to stretch to show scrollbar instead of squeezing text */
    }
}

/* ══════════════════════════════════════════
   FIX 18: Scrollbar for staff list in Performance Evaluation (Left Section)
   ══════════════════════════════════════════ */

/* FIX 18 (revised): Staff list scroll — targeted only to evalStaffList */
#evalStaffList {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--accent-teal) transparent !important;
}
/* theme-card / widget-box in grade_system: no forced max-height */
#content-grade_system .theme-card,
#content-grade_system .widget-box {
    max-height: none !important;
    overflow-y: visible !important;
}

/* ══════════════════════════════════════════
   FIX 19: Forcefully remove annoying white backgrounds (Structural)
   ══════════════════════════════════════════ */

/* 1. Payroll Window - Force top container to take system theme */
#content-payrolls > div > div:first-child,
#content-payslips > div > div:first-child {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 2. Org Structure Window - Force top filter bar to take system theme */
#content-all_projects > div > div:first-child {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 3. Grade System Window - only explicit white backgrounds */
#content-grade_system div[style*="background: white"],
#content-grade_system div[style*="background:white"],
#content-grade_system div[style*="background: #fff"],
#content-grade_system div[style*="background:#fff"],
#content-grade_system div[style*="background: #ffffff"],
#content-grade_system div[style*="background:#ffffff"],
#content-grade_system .metric-card {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
/* NOTE: Removed catch-all background-color selector and div color override
   as they broke analytics grid cards and KPI builder layout */

/* 4. Universal selector to catch any div with explicit white style inside any window and override it */
[id^="content-"] div[style*="background: white"],
[id^="content-"] div[style*="background:white"],
[id^="content-"] div[style*="background: #fff"],
[id^="content-"] div[style*="background:#fff"],
[id^="content-"] div[style*="background: #ffffff"],
[id^="content-"] div[style*="background:#ffffff"],
[id^="content-"] div[style*="background-color: white"],
[id^="content-"] div[style*="background-color:white"],
[id^="content-"] div[style*="background-color: #fff"],
[id^="content-"] div[style*="background-color:#fff"],
[id^="content-"] div[style*="background-color: #ffffff"],
[id^="content-"] div[style*="background-color:#ffffff"] {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 5. Target right section in main evaluation window (First Section) */
#content-grade_system > div > div > div:last-child,
#content-grade_system .grid-2-col > div:last-child {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════
   FIX 20: Unified Toggle Switches and artifact hiding
   ══════════════════════════════════════════ */
/* Hide random white circles from normal table checkboxes */
input[type="checkbox"]:not(.icon-toggle-chk):not(.custom-tax-toggle input):not(.custom-os-toggle input)::after,
input[type="checkbox"]:not(.icon-toggle-chk):not(.custom-tax-toggle input):not(.custom-os-toggle input)::before { 
    display: none !important; 
    content: none !important; 
}

/* Smart Toggle Design */
.custom-os-toggle { position: relative; display: inline-block; width: 40px !important; height: 22px !important; flex-shrink: 0; margin-right: 8px; vertical-align: middle;}
.custom-os-toggle input[type="checkbox"] { 
    opacity: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    margin: 0 !important; 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    z-index: 10 !important; 
    appearance: none !important; 
    -webkit-appearance: none !important; 
    cursor: pointer !important; 
    pointer-events: auto !important; 
    display: block !important;
}
.custom-os-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(100,116,139,0.4); transition: .3s; border-radius: 24px; border: 1px solid var(--border-color); }
.custom-os-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }

/* Custom activation colors via classes */
.custom-os-toggle input[type="checkbox"]:checked + .custom-os-slider { background-color: var(--accent-teal); border-color: var(--accent-teal); }
.custom-os-toggle input[type="checkbox"]:checked + .custom-os-slider:before { transform: translateX(18px); }

.custom-os-toggle.toggle-warning input[type="checkbox"]:checked + .custom-os-slider { background-color: var(--warning); border-color: var(--warning); }
.custom-os-toggle.toggle-danger input[type="checkbox"]:checked + .custom-os-slider { background-color: var(--danger); border-color: var(--danger); }
.custom-os-toggle.toggle-success input[type="checkbox"]:checked + .custom-os-slider { background-color: var(--success); border-color: var(--success); }

/* Prevent scrollbars from appearing inside toggle buttons */
.custom-os-toggle, .custom-os-toggle *,
.custom-tax-toggle, .custom-tax-toggle * {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
.custom-os-toggle::-webkit-scrollbar, .custom-tax-toggle::-webkit-scrollbar {
    display: none !important;
}

/* ══════════════════════════════════════════
   FIX 21: Disable horizontal scroll for Tabs Container
   ══════════════════════════════════════════ */
.module-tabs-container {
    flex-wrap: wrap !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 40px !important;
    padding-bottom: 5px !important;
    gap: 8px !important;
}

.module-tabs-container::-webkit-scrollbar {
    display: none !important;
}

/* FIX 22: Attendance Dropdown Pop-out Fix */
#content-attendance {
    overflow: visible !important;
}

#content-attendance .module-content {
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

/* Ensure only the table scrolls, not the top container */
#content-attendance .table-wrapper {
    overflow: auto !important;
    flex: 1;
    z-index: 1; /* Lower than toolbar */
}

/* Make toolbar float above table */
#content-attendance .toolbar-actions,
#content-attendance .toolbar-panel {
    overflow: visible !important;
    z-index: 1000 !important;
    background: var(--bg-secondary);
    position: relative;
}

/* Fix search box in staff dropdown menu */
#att_emp_dropdown {
    overflow-x: hidden !important;
    border-radius: 8px !important;
}

#att_emp_dropdown_search {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* FIX 22b: Force Attendance Dropdown Visibility */

/* Allow main container to show overflowing elements (Dropdown) */
#content-attendance, 
#content-attendance .module-content {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure toolbar floats above table and isn't clipped */
#content-attendance .toolbar-actions {
    overflow: visible !important;
    z-index: 2000 !important;
    background: var(--bg-secondary);
    padding: 10px;
    border-radius: 8px;
    position: relative;
}

/* Isolate table scroll to prevent affecting dropdown */
#content-attendance .table-wrapper {
    overflow: auto !important;
    flex: 1;
    z-index: 1; 
    margin-top: 5px;
}

/* Improve dropdown to appear as an absolute top layer */
#att_emp_dropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#att_emp_list {
    background: var(--bg-primary);
}

.att-staff-item {
    padding: 10px !important;
    border-bottom: 1px solid var(--border-color);
}

/* FIX 23: Attendance Horizontal Scroll & Table Layout */
#content-attendance .table-wrapper {
    display: block !important;
    position: relative !important;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
}

/* Customize horizontal scrollbar to be clear */
#content-attendance .table-wrapper::-webkit-scrollbar {
    height: 10px !important; /* Horizontal scrollbar height */
}

#content-attendance .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-teal) !important;
    border-radius: 10px !important;
}

#content-attendance .table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Prevent text wrap inside cells to keep table wide and encourage scrolling */
#content-attendance .data-table th, 
#content-attendance .data-table td {
    white-space: nowrap !important;
}

/* Special exception for staff names to show them fully */
#content-attendance .data-table td:nth-child(2) {
    min-width: 180px !important;
    position: sticky !important; /* Optional: Pin first column on scroll */
    left: 0;
    z-index: 5;
    background: inherit;
}

/* FIX 23: Interactive Horizontal Scrollbar (Color on Click) */

/* 1. Set container to allow horizontal scrolling */
#content-attendance .table-wrapper {
    overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* For browsers not supporting webkit */
}

/* 2. Horizontal scrollbar design */
#content-attendance .table-wrapper::-webkit-scrollbar {
    height: 10px !important;
}

#content-attendance .table-wrapper::-webkit-scrollbar-track {
    background: transparent !important; /* Fully transparent background */
}

/* 3. "Thumb" is semi-transparent in normal state */
#content-attendance .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05) !important; 
    border-radius: 10px !important;
    transition: background 0.3s;
}

/* 4. Teal color appears only on hover or click (Active) */
#content-attendance .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.2) !important; /* Hint on hover */
}

#content-attendance .table-wrapper::-webkit-scrollbar-thumb:active {
    background: var(--accent-teal) !important; /* Full color on click to drag */
    box-shadow: 0 0 10px var(--accent-teal) !important;
}

/* 5. Prevent text wrap to ensure scrolling activates */
#content-attendance .data-table td, 
#content-attendance .data-table th {
    white-space: nowrap !important;
    padding: 10px 15px !important;
}

/* FIX 22: Universal Pop-out Fix (unified with FIX 27) */

/* Force dropdown to float above all elements */
.dropdown-content {
    z-index: 99999 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
    border: 1px solid var(--accent-teal) !important;
}

/* Improve smart search field appearance */
#att_emp_dropdown_search, .smart-search-input {
    border: 1px solid var(--accent-teal) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

/* FIX 26: Complete Escape from Clipping for Attendance & Timesheet */

/* Force module body to show overflowing elements (Dropdown) */
.module-window[id*="attendance"] .module-content,
.module-window[id*="timesheets"] .module-content,
#content-attendance, 
#content-timesheets {
    overflow: visible !important;
}

/* Toolbar always appears above table */
.toolbar-actions, .toolbar-panel, .toolbar-actions > div {
    overflow: visible !important;
    z-index: 9999 !important; 
    position: relative !important;
}

/* Restrict scroll to table area only */
.table-wrapper, 
#content-attendance .table-wrapper, 
#content-timesheets .table-wrapper {
    overflow: auto !important;
    position: relative !important;
    z-index: 1 !important;
    max-height: calc(100vh - 380px) !important;
}

/* ══════════════════════════════════════════
   FIX 27: Dropdown Search Always Visible
   New Structure: Search box entirely outside scroll area
   overflow on #att_emp_dropdown = visible
   Scroll restricted to #att_emp_list only
   ══════════════════════════════════════════ */

/* Main Dropdown: Without overflow to prevent cutting off search */
#att_emp_dropdown {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Search Box: Always fixed at top, doesn't move */
#att_emp_dropdown > div:first-child {
    position: static !important;
    flex-shrink: 0 !important;
    background: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--accent-teal) !important;
    padding: 12px !important;
    z-index: auto !important;
}

/* Only the list scrolls */
#att_emp_list {
    overflow-y: auto !important;
    max-height: 380px !important;
    background: var(--bg-primary);
}

/* Hide dropdown: Close display entirely */
#att_emp_dropdown[style*="display: none"],
#att_emp_dropdown[style*="display:none"] {
    display: none !important;
}

/* ══════════════════════════════════════════
   FIX 28: 🦋 Butterfly Cursor Follower
   Butterfly flies softly behind mouse cursor
   ══════════════════════════════════════════ */

#butterfly-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999999;
    width: 18px;
    height: 14px;
    transform: translate(-50%, -60%);
    transition: none;
    will-change: transform, left, top;
}

#butterfly-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 3px rgba(255, 152, 0, 0.7));
}

/* Left Wing */
#bf-wing-left {
    transform-origin: right center;
    animation: bf-flap-left 0.22s ease-in-out infinite alternate;
}

/* Right Wing */
#bf-wing-right {
    transform-origin: left center;
    animation: bf-flap-right 0.22s ease-in-out infinite alternate;
}

@keyframes bf-flap-left {
    from { transform: rotateY(0deg) scaleX(1); }
    to   { transform: rotateY(55deg) scaleX(0.3); }
}

@keyframes bf-flap-right {
    from { transform: rotateY(0deg) scaleX(1); }
    to   { transform: rotateY(-55deg) scaleX(0.3); }
}

/* Fade effect when butterfly appears */
#butterfly-cursor.bf-visible {
    opacity: 1;
}

/* ══════════════════════════════════════════
   FIX 29: AI Chat Widget Design
   Match dark glass design and Tajawal font
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

#ai-agent-widget {
  background: linear-gradient(160deg, #0d1a2e, #111f35) !important;
  border: 1px solid rgba(99, 179, 237, 0.3) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
}

#ai-agent-widget .ai-hdr {
  background: linear-gradient(135deg, #0c1a30, #142240) !important;
  border-bottom: 1px solid rgba(99, 179, 237, 0.18) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #63b3ed !important;
  padding: 14px 18px !important;
}

#ai-agent-widget .ai-close {
  color: #4a6080 !important;
  transition: all 0.2s !important;
}

#ai-agent-widget .ai-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

#ai-agent-widget .ai-msgs {
  background: transparent !important;
  padding: 16px !important;
  gap: 10px !important;
}

#ai-agent-widget .ai-msg-bot {
  background: rgba(99, 179, 237, 0.1) !important;
  border: 1px solid rgba(99, 179, 237, 0.2) !important;
  border-radius: 12px 12px 12px 4px !important;
  color: #e2e8f0 !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

#ai-agent-widget .ai-msg-user {
  background: rgba(49, 130, 206, 0.15) !important;
  border: 1px solid rgba(49, 130, 206, 0.25) !important;
  border-radius: 12px 12px 4px 12px !important;
  color: #e2e8f0 !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

#ai-agent-widget .ai-inp-area {
  border-top: 1px solid rgba(99, 179, 237, 0.12) !important;
  background: transparent !important;
  padding: 12px 14px !important;
}

#ai-agent-widget #ai-chat-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(99, 179, 237, 0.25) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.85rem !important;
}

#ai-agent-widget #ai-chat-input:focus {
  border-color: rgba(99, 179, 237, 0.5) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

#ai-agent-widget .ai-send {
  background: linear-gradient(135deg, #1a56a0, #3182ce) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(49,130,206,0.3) !important;
  transition: all 0.2s !important;
}

#ai-agent-widget .ai-send:hover {
  transform: scale(1.05) !important;
}

/* ══════════════════════════════════════════
   FIX 30: Absolute hiding of butterfly when disabled
   ══════════════════════════════════════════ */
body.butterfly-hidden #butterfly-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════
   FIX 31: Unify table colors and remove annoying alternating rows
   ══════════════════════════════════════════ */

/* 1. Strictly cancel even/odd row coloring in all tables */
.data-table tr:nth-child(even) td, 
.data-table tr:nth-child(odd) td,
table tr:nth-child(even) td,
table tr:nth-child(odd) td,
.data-table tr:nth-child(even),
table tr:nth-child(even) {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 2. Unify table and cell background color to blend with main theme */
.data-table, table, .data-table td, table td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* 3. Format table header to be prominent and elegant */
.data-table th, table th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    font-weight: bold !important;
}

/* 4. Add soft hover effect for easy row tracking */
.data-table tbody tr:hover td,
table tbody tr:hover td {
    background-color: var(--bg-tertiary) !important;
    transition: background-color 0.15s ease !important;
}

/* 5. Protect selected and warned rows from being affected by unification */
/* Soft highlight color on selection */
.data-table tr.row-selected td,
table tr.row-selected td {
    background-color: rgba(79, 209, 197, 0.15) !important; 
}

/* Light red alert color */
.data-table tr.row-danger td,
table tr.row-danger td {
    background-color: rgba(229, 62, 62, 0.15) !important; 
}

/* 6. Specifically fix Import/Export window tables */
#importPreviewTable table td,
#importPreviewTable .data-table td,
#exportPreviewTable table td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════
   FIX 32: Enable and show AI character close button
   ══════════════════════════════════════════ */

/* 1. Re-enable mouse interaction with the character drawing itself */
#ai-char-svg {
    pointer-events: auto !important;
}

/* 2. Show close button semi-transparently always (for mobile) and enable click */
#ai-char-hide {
    opacity: 0.6 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
    z-index: 2000005 !important;
    display: flex !important;
}

/* 3. Highlight button in clear red on hover over character or button */
#ai-char-root:hover #ai-char-hide,
#ai-char-hide:hover {
    opacity: 1 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

/* ══════════════════════════════════════════
   FIX 33: Final blow to dropdown menu issues (Timesheets, etc.)
   Free the menu from Overflow prison and make it float above everything
   ══════════════════════════════════════════ */

/* 1. Force all parent containers (Cards, Filters) to show overflowing elements */
#content-timesheets,
#content-timesheets .module-content,
#content-timesheets .theme-card,
#content-timesheets .grid-filter-bar,
#content-timesheets .form-group,
#content-timesheets .dropdown-container,
#content-timesheets > div:first-child {
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important; /* Raise layer level to stay above table */
}

/* 2. Free the dropdown itself and give it highest possible layer */
#content-timesheets .dropdown-content,
.dropdown-container.show .dropdown-content {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    z-index: 999999 !important; /* Absolute float */
    box-shadow: 0 15px 50px rgba(0,0,0,0.8) !important;
    max-height: 350px !important;
    overflow-y: auto !important; /* Scroll only inside list, not in container */
}

/* 3. Lower layer of tables and bottom containers so they don't cover the menu */
#content-timesheets .table-container-flex,
#content-timesheets .table-wrapper,
#content-timesheets #tsContentArea,
#tsContentArea {
    z-index: 1 !important;
    position: relative !important;
}

/* 4. Fix smart search box squishing inside menu */
.dropdown-content > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: inherit !important;
}

/* ══════════════════════════════════════════
   FIX 34: Definitive solution for list clipping in Timesheet
   ══════════════════════════════════════════ */

/* 1. Destroy any scrollbar in Timesheet top bar */
#content-timesheets > div:first-child,
#content-timesheets .theme-card,
#content-timesheets .grid-filter-bar,
#content-timesheets .toolbar-panel,
#content-timesheets .form-group {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important; /* Prevent squeezing that causes scrollbar */
}

/* 2. Free dropdown and give it fixed width so it doesn't squeeze */
#content-timesheets .dropdown-container {
    position: relative !important;
    overflow: visible !important;
}

#content-timesheets .dropdown-content {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    width: 400px !important; /* Force it to a comfortable width for search */
    max-width: 90vw !important;
    z-index: 2147483647 !important; /* Highest possible layer in browsers */
    background: var(--bg-secondary) !important;
    border: 1px solid var(--accent-teal) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.8) !important;
}

/* 3. Push bottom table slightly away so it doesn't overlap */
#content-timesheets .table-container-flex,
#content-timesheets #tsContentArea {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 15px !important;
}

/* ══════════════════════════════════════════
   FIX 35: Tactical Rollback (Fixing FIX 11 mistake)
   Unbind dropdowns in Timesheet permanently
   ══════════════════════════════════════════ */

/* 1. Remove forced scrollbar from all top containers in Timesheet */
#content-timesheets,
#content-timesheets > div,
#content-timesheets > div > div,
#content-timesheets > div > div > div,
#content-timesheets .theme-card,
#content-timesheets .grid-filter-bar,
#content-timesheets .form-group {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: static !important; /* Destroy any wall preventing list from floating */
}

/* 2. Give anchor point to dropdown only */
#content-timesheets .dropdown-container {
    position: relative !important;
}

/* 3. Force list to float outside everything */
#content-timesheets .dropdown-content {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    width: 380px !important;
    z-index: 2147483647 !important; /* Highest number in web browsers */
    box-shadow: 0 15px 50px rgba(0,0,0,0.8) !important;
}

/* 4. Confine scrollbar to the correct place (Table area only) */
#content-timesheets #tsContentArea,
#content-timesheets .table-wrapper {
    position: relative !important;
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    z-index: 1 !important;
    margin-top: 15px !important;
    min-height: 300px !important;
}
/* ══════════════════════════════════════════
   FIX 25: Evaluation Window - Complete Layout Overhaul
   ══════════════════════════════════════════ */

/* CRITICAL: Undo the overflow/max-height on .theme-card inside grade_system
   that was breaking the analytics grid by stacking cards full-width */
#content-grade_system .theme-card,
#content-grade_system .widget-box {
    overflow-y: visible !important;
    max-height: none !important;
}

/* Analytics tab - restore grid layout for stat cards */
#content-grade_system #corporate_performance_report_area > div[style*="grid-template-columns"] {
    display: grid !important;
    overflow-y: visible !important;
    max-height: none !important;
}

/* Allow the outer scrollable wrapper to scroll properly */
#content-grade_system > div > div[style*="overflow-y: auto"],
#content-grade_system > div > div[style*="overflow-y:auto"] {
    overflow-y: auto !important;
}

/* Keep staff list scrollable within evaluate tab only */
#evalStaffList {
    overflow-y: auto !important;
    max-height: none !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

/* ── KPI Builder: fix huge bottom margin from absolute footer ── */
#content-grade_system div[style*="padding-bottom: 50px"],
#content-grade_system div[style*="padding-bottom:50px"] {
    padding-bottom: 70px !important;
}

/* KPI builder button bar — reduce padding/gap */
#content-grade_system div[style*="border-bottom: 1px solid var(--border-color)"] > .flex-between-center,
#content-grade_system div[style*="border-bottom:1px solid var(--border-color)"] > .flex-between-center {
    gap: 6px !important;
    flex-wrap: wrap !important;
}
#content-grade_system div[style*="border-bottom: 1px solid var(--border-color)"] .btn-secondary,
#content-grade_system div[style*="border-bottom: 1px solid var(--border-color)"] .btn-danger {
    padding: 3px 9px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}

/* ── Performance Review: prevent delete btn from overlapping rating ── */
#eval_kpis_container > div {
    position: relative !important;
    padding-right: 36px !important;  /* room for ✕ button */
}
#eval_kpis_container > div > button.btn-danger {
    position: absolute !important;
    top: 8px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}
/* Label + score row must not bleed under the button */
#eval_kpis_container > div > div[style*="justify-content:space-between"],
#eval_kpis_container > div > div[style*="justify-content: space-between"] {
    padding-right: 0 !important;
}

/* ══════════════════════════════════════════
   FIX 26: Eliminate White Backgrounds in Module Windows
   ══════════════════════════════════════════ */

/* payslip-wrapper on screen — use theme variables instead of white */
.payslip-wrapper {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.payslip-card {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.payslip-logo,
.payslip-label {
    color: var(--text-secondary) !important;
}
.payslip-th {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.payslip-table {
    border-color: var(--border-color) !important;
}
/* Allow print to keep white */
@media print {
    .payslip-wrapper { background: white !important; color: #333 !important; }
    .payslip-card    { background: #f7fafc !important; }
}

/* Payroll & Payslips container backgrounds */
#content-payrolls .theme-card,
#content-payslips .theme-card,
#content-payslips > div {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Archive container */
#content-archive_manager .archive-header,
#content-archive_manager .archive-list-container {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
/* Archive row cards */
.archive-row-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Org Structure / All Projects */
#content-all_projects .panel,
#content-all_projects .theme-card,
#content-all_projects > div > div {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Universal catch-all for any inline white bg in module windows
   (stronger than before — covers inline style= attributes) */
[id^="content-"] .theme-card,
[id^="content-"] .panel,
[id^="content-"] .module-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Org-tree node avatars — keep them readable */
.org-avatar {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-gold) !important;
}


/* ══════════════════════════════════════════
   FIX 36: Grade System — Precise layout fix
   Uses #gs-shell wrapper added in leaves.js
   to fully isolate from FIX 11 side effects.
   ══════════════════════════════════════════ */

/* 1. Strip module-content padding/overflow for grade_system */
#content-grade_system {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. gs-shell is the authoritative flex column container */
#gs-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
    /* Undo FIX 11 on this element */
    flex-shrink: 1 !important;
}

/* 3. Nav bar — always horizontal, never wraps downward */
#gs-shell > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    min-height: 40px !important;
    max-height: none !important;
    scrollbar-width: none !important;
}
#gs-shell > div:first-child::-webkit-scrollbar { display: none !important; }

/* 4. Tab content wrapper fills remaining space */
#gs-shell > div:last-child {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* let JS inline overflow control each tab */
}

/* 5. Undo FIX 11 forced overflow on content-grade_system children */
#content-grade_system > div,
#content-grade_system > div > div {
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* 6. But gs-shell and its last child must handle scroll properly */
#gs-shell,
#gs-shell > div:last-child {
    overflow: hidden !important;
    flex-shrink: 1 !important;
}

/* 7. Undo FIX 18 which breaks evaluate tab with max-height on first card */
#content-grade_system .theme-card,
#content-grade_system .widget-box {
    max-height: none !important;
    overflow-y: visible !important;
}

/* 8. Analytics: stat cards grid must display normally */
#content-grade_system #corporate_performance_report_area {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
}

/* 9. EvalStaffList retains its scroll */
#evalStaffList {
    overflow-y: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
}


/* ── FIX 36 additions ── */

/* KPI Builder: tbody rows must not stretch beyond content */
#content-grade_system .data-table tbody tr {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    display: table-row !important;
}
#content-grade_system .data-table tbody td {
    overflow: visible !important;
    min-height: unset !important;
}

/* Analytics: 4-card grid must display as grid, not stack */
#content-grade_system #corporate_performance_report_area {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    max-height: none !important;
}
#content-grade_system #corporate_performance_report_area > div {
    overflow: visible !important;
    max-height: none !important;
    min-height: unset !important;
    flex-shrink: unset !important;
    display: block !important;
}

/* Evaluate tab: left panel (280px) must show staff list items */
#content-grade_system div[style*="width:280px"],
#content-grade_system div[style*="width: 280px"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: none !important;
    height: 100% !important;
}

/* Charts area: 2-col grid for bell curve + dept chart */
#content-grade_system div[style*="grid-template-columns:1fr 1fr"],
#content-grade_system div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow: visible !important;
    max-height: none !important;
}

/* ── Dark background fallback (prevents white flash when no wallpaper is set) ── */
html, body {
    background-color: #1a1a2e !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* ══════════════════════════════════════════
   FIX 38: Attendance Module – Responsive Nav & Toolbar
   Fixes overflow when window is small
   ══════════════════════════════════════════ */

/* Nav top bar: allow wrapping on small windows */
#content-attendance > div > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 6px !important;
}

/* Toggle group (Inactive / OT Calc / Ded. Leave): wrap and reduce gap */
#content-attendance > div > div:first-child > div:last-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
}

/* Toolbar panel inside attendance: allow wrapping */
#content-attendance .toolbar-panel {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 6px !important;
}

/* Toolbar right-side button group: wrap and shrink */
#content-attendance .toolbar-panel .flex-end {
    flex-wrap: wrap !important;
    flex: unset !important;
    gap: 4px !important;
}

/* Month selector: don't grow too wide */
#content-attendance .toolbar-panel input[type="month"] {
    min-width: 110px !important;
    width: 120px !important;
    flex-shrink: 0 !important;
}

/* Donor/Project selects: flexible width */
#content-attendance .toolbar-panel .form-select {
    min-width: 90px !important;
    width: auto !important;
    max-width: 130px !important;
}

/* Search input in filters: shrink gracefully */
#att_daily_search {
    min-width: 100px !important;
    width: 140px !important;
    max-width: 180px !important;
}

/* Day pagination: always scrollable horizontally */
#content-attendance .flex-row.gap-1.pb-8 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin !important;
    padding-bottom: 6px !important;
}

/* Compact module window size for small screens */
@media (max-width: 768px) {
    

    #content-attendance .toolbar-panel {
        padding: 6px !important;
    }

    #content-attendance .toolbar-panel button {
        padding: 3px 8px !important;
        font-size: 0.78rem !important;
    }

    /* Stack nav row vertically on very small screens */
    #content-attendance > div > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Toggles row: wrap tightly */
    #content-attendance > div > div:first-child > div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
        font-size: 0.72rem !important;
        gap: 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   FIX 37: RESPONSIVE — Small & Mobile Screens
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px): Shrink module windows to fit ── */
@media (max-width: 900px) {
    
}

/* ── Mobile (≤ 640px): Near-full-screen windows ── */
@media (max-width: 640px) {
    

    /* Toolbars must wrap on mobile */
    .toolbar-panel {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .toolbar-panel > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Attendance: top nav row wraps */
    #content-attendance > div > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Toggle labels in attendance nav stack vertically */
    #content-attendance > div > div:first-child > div:last-child {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Header: hide non-essential elements */
    .header-title,
    .datetime {
        display: none !important;
    }
    .header-right {
        gap: 6px !important;
    }
    .header-right button {
        padding: 0 8px !important;
        font-size: 0.8rem !important;
    }

    /* Settings modal full-screen on mobile */
    #settingsModal .modal-body {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    #settingsModal .modal-body > div:first-child {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 8px !important;
    }
    #settingsModal .modal-body > div:first-child button.tab-btn {
        display: inline-flex !important;
        width: auto !important;
        margin: 2px !important;
    }
    #settingsModal .modal-body > div:last-child {
        padding: 15px !important;
    }
}

/* ══════════════════════════════════════════
   FIX 39: Theme-aware UI Elements
   Makes Budget Window, App Center, Widget Menu, and Settings
   respect the active visual theme instead of staying hardcoded dark
   ══════════════════════════════════════════ */

/* ── 1. Budget Window (v-bg- classes) ── */
.v-bg-header-bar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.v-bg-top-tab {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
}

.v-bg-top-tab.active {
    color: var(--accent-teal) !important;
    border-bottom-color: var(--accent-teal) !important;
}

.v-bg-sub-tabs {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.v-bg-sub-tab {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-right: 1px solid var(--border-color) !important;
}

.v-bg-sub-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

.v-bg-sub-tab.active {
    color: var(--accent-gold) !important;
    background: var(--bg-primary) !important;
    border-top: 2px solid var(--accent-gold) !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
}

.v-bg-inputs-area {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.v-bg-label {
    color: var(--text-secondary) !important;
}

.v-bg-input {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 20px !important;
}

.v-bg-input:focus {
    border-color: var(--accent-gold) !important;
    background-color: var(--bg-primary) !important;
}

/* Budget Load Dropdown */
#budgetLoadDrop {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

#budgetLoadDrop .dropdown-item,
#budgetLoadDrop .budget-smart-item {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#budgetLoadDrop > div:first-child {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#budget-no-results {
    color: var(--text-secondary) !important;
}

/* ── 2. App Center ── */
#os-app-center {
    background: var(--bg-secondary) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

#os-app-center .window-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

#os-app-center .window-title {
    color: var(--text-primary) !important;
}

#os-app-center .window-control-close {
    color: var(--text-secondary) !important;
}

#os-app-center .window-control-close:hover {
    color: #ef4444 !important;
    background: rgba(239,68,68,0.15) !important;
    border-radius: 4px !important;
}

.app-center-item {
    color: var(--text-primary) !important;
}

.app-center-item:hover {
    background: var(--bg-tertiary) !important;
    transform: translateY(-2px) !important;
}

.app-center-search {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.app-center-search::placeholder {
    color: var(--text-secondary) !important;
}

.app-center-search:focus {
    border-color: var(--accent-teal) !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important;
}

.app-center-grid::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
}

/* ── 3. Widget Dropdown Menu ── */
#widgetDropdownMenu {
    background: var(--bg-secondary) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
}

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

.widget-menu-item:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.widget-menu-item.active {
    border-left: 3px solid var(--accent-teal) !important;
    background: rgba(56, 189, 248, 0.1) !important;
    color: var(--accent-teal) !important;
}

.widget-menu-item.inactive {
    color: var(--text-secondary) !important;
}

/* ── 4. Settings Modal - Respect active theme ── */
/* Remove forced dark and apply theme variables */
/* Override FIX 3 + FIX 13.5 exceptions for light themes */
body.theme-google #settingsModal,
body.theme-win98 #settingsModal,
body.theme-aqua #settingsModal,
body.theme-girly #settingsModal {
    --text-primary: #1e293b !important;
    --text-secondary: #475569 !important;
    --bg-primary: #ffffff !important;
    --bg-secondary: #f8fafc !important;
    --bg-tertiary: #f1f5f9 !important;
    --border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .win-settings-modal,
body.theme-win98 #settingsModal .win-settings-modal,
body.theme-aqua #settingsModal .win-settings-modal,
body.theme-girly #settingsModal .win-settings-modal {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .modal-header,
body.theme-win98 #settingsModal .modal-header,
body.theme-aqua #settingsModal .modal-header,
body.theme-girly #settingsModal .modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .modal-header *,
body.theme-google #settingsModal .modal-title,
body.theme-win98 #settingsModal .modal-header *,
body.theme-win98 #settingsModal .modal-title,
body.theme-aqua #settingsModal .modal-header *,
body.theme-aqua #settingsModal .modal-title,
body.theme-girly #settingsModal .modal-header *,
body.theme-girly #settingsModal .modal-title {
    color: #1e293b !important;
}

body.theme-google #settingsModal .modal-body,
body.theme-win98 #settingsModal .modal-body,
body.theme-aqua #settingsModal .modal-body,
body.theme-girly #settingsModal .modal-body {
    background: #f8fafc !important;
}

body.theme-google #settingsModal .modal-body > div:first-child,
body.theme-win98 #settingsModal .modal-body > div:first-child,
body.theme-aqua #settingsModal .modal-body > div:first-child,
body.theme-girly #settingsModal .modal-body > div:first-child {
    background: #f1f5f9 !important;
    border-right: 1px solid #cbd5e1 !important;
}

body.theme-google #settingsModal .modal-body > div:last-child,
body.theme-win98 #settingsModal .modal-body > div:last-child,
body.theme-aqua #settingsModal .modal-body > div:last-child,
body.theme-girly #settingsModal .modal-body > div:last-child {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .tab-btn,
body.theme-win98 #settingsModal .tab-btn,
body.theme-aqua #settingsModal .tab-btn,
body.theme-girly #settingsModal .tab-btn {
    color: #475569 !important;
    background: transparent !important;
}

body.theme-google #settingsModal .tab-btn:hover,
body.theme-win98 #settingsModal .tab-btn:hover,
body.theme-aqua #settingsModal .tab-btn:hover,
body.theme-girly #settingsModal .tab-btn:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .tab-btn.active,
body.theme-win98 #settingsModal .tab-btn.active,
body.theme-aqua #settingsModal .tab-btn.active,
body.theme-girly #settingsModal .tab-btn.active {
    background: rgba(56,189,248,0.12) !important;
    color: #0369a1 !important;
    border-left-color: #0369a1 !important;
}

body.theme-google #settingsModal .settings-tab,
body.theme-win98 #settingsModal .settings-tab,
body.theme-aqua #settingsModal .settings-tab,
body.theme-girly #settingsModal .settings-tab {
    color: #1e293b !important;
}

body.theme-google #settingsModal .settings-tab h3,
body.theme-win98 #settingsModal .settings-tab h3,
body.theme-aqua #settingsModal .settings-tab h3,
body.theme-girly #settingsModal .settings-tab h3 {
    color: #0369a1 !important;
}

body.theme-google #settingsModal .settings-tab h4,
body.theme-win98 #settingsModal .settings-tab h4,
body.theme-aqua #settingsModal .settings-tab h4,
body.theme-girly #settingsModal .settings-tab h4 {
    color: #1e293b !important;
}

body.theme-google #settingsModal .settings-tab label,
body.theme-win98 #settingsModal .settings-tab label,
body.theme-aqua #settingsModal .settings-tab label,
body.theme-girly #settingsModal .settings-tab label {
    color: #475569 !important;
}

body.theme-google #settingsModal input,
body.theme-google #settingsModal select,
body.theme-win98 #settingsModal input,
body.theme-win98 #settingsModal select,
body.theme-aqua #settingsModal input,
body.theme-aqua #settingsModal select,
body.theme-girly #settingsModal input,
body.theme-girly #settingsModal select {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .theme-card,
body.theme-google #settingsModal .theme-card-highlight,
body.theme-win98 #settingsModal .theme-card,
body.theme-win98 #settingsModal .theme-card-highlight,
body.theme-aqua #settingsModal .theme-card,
body.theme-aqua #settingsModal .theme-card-highlight,
body.theme-girly #settingsModal .theme-card,
body.theme-girly #settingsModal .theme-card-highlight {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

/* ── 5. Widget Cards on Desktop - use theme vars instead of hardcoded dark ── */
/* Note: widget.style.background is set via JS — override with CSS !important */
body.theme-google #widgetsGrid > .widget-card,
body.theme-google #widgetsGrid > .widget,
body.theme-google #widgetsGrid > [id^="widget-"],
body.theme-win98 #widgetsGrid > .widget-card,
body.theme-win98 #widgetsGrid > .widget,
body.theme-win98 #widgetsGrid > [id^="widget-"],
body.theme-aqua #widgetsGrid > .widget-card,
body.theme-aqua #widgetsGrid > .widget,
body.theme-aqua #widgetsGrid > [id^="widget-"],
body.theme-girly #widgetsGrid > .widget-card,
body.theme-girly #widgetsGrid > .widget,
body.theme-girly #widgetsGrid > [id^="widget-"] {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    color: var(--text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════╗
   ║   FIX 40 — MASTER OVERHAUL: THEMES · UI · WINDOWS      ║
   ╚══════════════════════════════════════════════════════════╝
   Issues fixed:
   1. Finance Engine — hardcoded dark colors
   2. Smart Typography — light/dark adaptive fonts & buttons
   3. AI Window — theme-aware
   4. HR Character — suit changes with theme (SVG vars)
   5. Table headers — all modules (staff/budget/archive etc.)
   6. Taskbar — theme-aware for all themes
   7. Calculator — buttons visible, correct layout
   8. Window maximize — correct height between bars
   9. Minimize — shows as taskbar button
   10. Notifications — persistent, close-only
   11. Custom alert/confirm modal (no browser popup)
   12. Help window — full professional help system
   13. Desktop menu selection hides widget menu too
══════════════════════════════════════════════════════════════ */

/* ─── 1. SMART TYPOGRAPHY ─────────────────────────────────── */
body { font-family: 'Segoe UI', 'Tajawal', Arial, sans-serif !important; }
h1,h2,h3,h4,h5,h6,
.modal-title, .widget-title, .win-title,
.section-title, .page-title { color: var(--text-primary) !important; }

/* Light-theme button text fixes */
body.theme-google .btn-secondary,
body.theme-win98 .btn-secondary,
body.theme-aqua  .btn-secondary,
body.theme-girly .btn-secondary {
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body.theme-google .btn-primary,
body.theme-win98 .btn-primary,
body.theme-aqua  .btn-primary,
body.theme-girly .btn-primary { color: #fff !important; }

/* Dark-theme buttons */
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) .btn-secondary {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Form labels */
.form-group label, .settings-tab label {
    color: var(--text-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
.form-group label small, .form-group label span.hint {
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    font-size: 0.75rem !important;
}

/* ─── 2. FINANCE ENGINE (محرك المالية) ───────────────────── */
#tab-finance, #fin-tax, #fin-rates, .fin-sub-page {
    color: var(--text-primary) !important;
}
#tab-finance .widget-box,
#tab-finance .theme-card,
#tab-finance .panel-info {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
#tab-finance label, #tab-finance h4, #tab-finance h3,
.fin-sub-page label, .fin-sub-page h4 {
    color: var(--text-primary) !important;
}
#tax_brackets_container > * {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}
.page-header-bar { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:20px !important; }

/* ─── 3. TABLE HEADERS — ALL MODULES ─────────────────────── */
/* Light themes: dark header for contrast */
body.theme-google .data-table th, body.theme-win98 .data-table th,
body.theme-aqua  .data-table th, body.theme-girly  .data-table th,
body.theme-google table th,      body.theme-win98 table th,
body.theme-aqua  table th,       body.theme-girly  table th {
    background: #1e293b !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--accent-teal) !important;
}
/* Dark themes: subtle teal tint header */
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) .data-table th,
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) table th {
    background: rgba(56,189,248,0.08) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent-teal) !important;
}

/* ─── 4. TASKBAR — ALL THEMES ────────────────────────────── */
body.theme-google #taskbarContainer {
    background: rgba(248,250,252,0.97) !important;
    border-top: 1px solid #dadce0 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1) !important;
}
body.theme-google .taskbar-item          { color:#3c4043 !important; background:rgba(0,0,0,0.04) !important; }
body.theme-google .taskbar-item:hover    { background:rgba(0,0,0,0.08) !important; }
body.theme-google .taskbar-item.active   { color:#1a73e8 !important; border-bottom-color:#1a73e8 !important; background:rgba(26,115,232,0.1) !important; }
body.theme-google .taskbar-system-tray,
body.theme-google #taskbar-clock         { color:#3c4043 !important; }

body.theme-girly #taskbarContainer {
    background: rgba(253,242,248,0.97) !important;
    border-top: 1px solid rgba(236,72,153,0.3) !important;
    box-shadow: 0 -2px 15px rgba(236,72,153,0.12) !important;
}
body.theme-girly .taskbar-item          { color:#9d174d !important; background:rgba(236,72,153,0.04) !important; }
body.theme-girly .taskbar-item:hover    { background:rgba(236,72,153,0.1) !important; }
body.theme-girly .taskbar-item.active   { color:#ec4899 !important; border-bottom-color:#ec4899 !important; background:rgba(236,72,153,0.12) !important; }
body.theme-girly .taskbar-system-tray,
body.theme-girly #taskbar-clock         { color:#9d174d !important; }

body.theme-win98 #taskbarContainer {
    background: #c0c0c0 !important;
    border-top: 2px solid #fff !important;
    box-shadow: inset 0 1px 0 #fff !important;
    backdrop-filter: none !important;
}
body.theme-win98 .taskbar-item {
    background: #c0c0c0 !important; color:#000 !important;
    border: 1px solid; border-color:#fff #808080 #808080 #fff !important;
    border-radius: 0 !important;
}
body.theme-win98 .taskbar-item.active   { border-color:#808080 #fff #fff #808080 !important; }
body.theme-win98 .taskbar-system-tray,
body.theme-win98 #taskbar-clock         { color:#000 !important; }

body.theme-aqua #taskbarContainer {
    background: #d1d1d1 !important;
    border-top: 1px solid #888 !important;
}
body.theme-aqua .taskbar-item           { color:#1a1a2e !important; }
body.theme-aqua .taskbar-item.active    { border-bottom-color:#0ea5e9 !important; }
body.theme-aqua .taskbar-system-tray,
body.theme-aqua #taskbar-clock          { color:#1a1a2e !important; }

body.theme-glass #taskbarContainer {
    background: rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
}

/* ─── 5. AI WINDOW — THEME ADAPTIVE ──────────────────────── */
#ai-agent-widget {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--accent-teal) !important;
    color: var(--text-primary) !important;
}
#ai-agent-header {
    background: rgba(56,189,248,0.1) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
#ai-agent-header span,#ai-agent-header [data-i18n] { color: var(--text-primary) !important; }
#ai-agent-header button { color: var(--text-secondary) !important; background: none !important; }
#ai-chat-history { background: transparent !important; color: var(--text-primary) !important; }
#ai-agent-widget > div:last-child { background: var(--bg-tertiary) !important; border-top: 1px solid var(--border-color) !important; }
#ai-chat-input { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
#ai-chat-input:focus { border-color: var(--accent-teal) !important; }
#ai-settings-panel { background: var(--bg-primary) !important; border-bottom: 1px solid var(--border-color) !important; }
#ai-greeting-msg { background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; }

body.theme-google #ai-agent-widget,
body.theme-win98  #ai-agent-widget,
body.theme-aqua   #ai-agent-widget,
body.theme-girly  #ai-agent-widget {
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 10px 50px rgba(0,0,0,0.18) !important;
}

/* ─── 6. HR CHARACTER — suit color with theme ─────────────── */
/* Use CSS filters to tint the SVG per theme. The SVG uses gradient fills so
   we apply a hue-rotate + saturate on the body group */
body.theme-google   #ai-body-main { filter: hue-rotate(200deg) saturate(1.5); }
body.theme-girly    #ai-body-main { filter: hue-rotate(300deg) saturate(1.6); }
body.theme-dos      #ai-body-main { filter: grayscale(0.7) brightness(0.8); }
body.theme-glass    #ai-body-main { filter: brightness(0.9) saturate(0.6); }
body.theme-aqua     #ai-body-main { filter: hue-rotate(180deg) saturate(1.3); }
body.theme-win98    #ai-body-main { filter: hue-rotate(230deg) saturate(0.8) brightness(0.8); }

/* ─── 7. CALCULATOR — buttons always visible ──────────────── */
#widget-calc {
    position: fixed !important;
    width: 320px !important;
    z-index: 999990 !important;
    flex-direction: column !important;
    overflow: visible !important;
}
#widget-calc .widget-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: visible !important;
}
.calc-keypad {
    display: grid !important;
    grid-template-columns: repeat(5,1fr) !important;
    gap: 6px !important;
}
.calc-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    transition: all 0.1s !important;
    font-weight: 500 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.calc-btn:hover { filter: brightness(1.2) !important; transform: translateY(-1px) !important; }
.calc-btn:active { transform: translateY(1px) !important; }
.calc-btn.sci   { font-size: 0.7rem !important; background: rgba(251,191,36,0.06) !important; color: var(--accent-gold) !important; }
.calc-btn.num   { background: var(--bg-secondary) !important; font-weight: bold !important; }
.calc-btn.op    { background: rgba(56,189,248,0.1) !important; color: var(--accent-teal) !important; }
.calc-btn.action{ background: rgba(239,68,68,0.1) !important; color: var(--danger) !important; }
.calc-btn.equals{
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-gold)) !important;
    color: #0f172a !important; font-weight: bold !important;
}
.calc-screen {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 12px !important;
}
.calc-input {
    background: transparent !important;
    border: none !important;
    color: var(--accent-teal) !important;
    width: 100% !important;
    text-align: right !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

/* ─── 8. WINDOW MAXIMIZE — correct space ─────────────────── */
/* Header = 50px, Taskbar = 50px, gap = calc(100vh - 100px) */
/* Applied by JS via inline style; these are fallback overrides */
#windowsContainer .module-window {
    transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease !important;
}

/* ─── 9. NOTIFICATIONS — persistent, no auto-dismiss ──────── */
#os-notification-container {
    position: fixed !important;
    bottom: 70px !important;
    right: 20px !important;
    z-index: 9999998 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: none !important;
}
.os-toast {
    pointer-events: auto !important;
    position: relative !important;
    min-width: 300px !important;
    max-width: 380px !important;
}
/* Hide the progress bar that triggered auto-dismiss */
.os-toast::after { display: none !important; content: none !important; }
/* Larger, more accessible close button */
.os-toast > button:last-child,
.os-toast .toast-close {
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    background: none !important; border: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 24px !important; height: 24px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    transition: 0.2s !important;
    opacity: 0.6 !important;
}
.os-toast > button:last-child:hover,
.os-toast .toast-close:hover {
    opacity: 1 !important;
    background: rgba(239,68,68,0.18) !important;
    color: #ef4444 !important;
}

/* ─── 10. CUSTOM OS CONFIRM / ALERT / PROMPT MODAL ────────── */
#os-dialog-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99999999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.2s ease;
}
#os-dialog-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 36px 32px 28px;
    max-width: 460px; width: 92vw;
    box-shadow: 0 25px 80px rgba(0,0,0,0.55);
    color: var(--text-primary);
    font-family: inherit;
    animation: fadeIn 0.25s ease;
    text-align: center;
}
#os-dialog-box .os-dlg-icon  { font-size: 3rem; margin-bottom: 14px; }
#os-dialog-box .os-dlg-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
#os-dialog-box .os-dlg-msg   { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 26px; line-height: 1.65; white-space: pre-wrap; }
#os-dialog-box .os-dlg-input {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border-color); background: var(--bg-tertiary);
    color: var(--text-primary); font-family: inherit; font-size: 0.95rem;
    outline: none; margin-bottom: 22px; box-sizing: border-box;
}
#os-dialog-box .os-dlg-btns  { display: flex; gap: 12px; justify-content: center; }
#os-dialog-box .os-dlg-cancel{
    padding: 10px 28px; border-radius: 20px;
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); font-family: inherit; font-size: 0.9rem;
    cursor: pointer; transition: 0.2s;
}
#os-dialog-box .os-dlg-cancel:hover { background: var(--bg-tertiary); color: var(--text-primary); }
#os-dialog-box .os-dlg-ok {
    padding: 10px 32px; border-radius: 20px; border: none;
    background: var(--accent-teal); color: #0f172a;
    font-family: inherit; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: 0.2s;
}
#os-dialog-box .os-dlg-ok.danger  { background: var(--danger) !important; color: #fff !important; }
#os-dialog-box .os-dlg-ok:hover   { filter: brightness(1.08); }

/* ─── 11. HELP WINDOW ─────────────────────────────────────── */
#os-help-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999990;
    backdrop-filter: blur(6px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    animation: fadeIn 0.25s ease;
}
#os-help-overlay.open { display: flex !important; }
#os-help-win {
    width: 900px; max-width: 96vw;
    height: calc(100vh - 130px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.25s ease;
}
#os-help-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
#os-help-head .os-help-logo {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.1rem; font-weight: 700; color: var(--accent-teal);
}
#os-help-head .os-help-logo span { font-size: 1.6rem; }
#os-help-close-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.3rem; color: var(--text-secondary);
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
#os-help-close-btn:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
#os-help-search-bar {
    padding: 14px 22px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    position: relative;
}
#os-help-search-bar svg { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); opacity: 0.5; }
#os-help-search-input {
    width: 100%; padding: 11px 16px 11px 48px;
    border-radius: 25px; border: 1px solid var(--border-color);
    background: var(--bg-tertiary); color: var(--text-primary);
    font-size: 0.92rem; font-family: inherit; outline: none; transition: 0.2s;
    box-sizing: border-box;
}
#os-help-search-input:focus { border-color: var(--accent-teal); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
#os-help-search-input::placeholder { color: var(--text-secondary); }
#os-help-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#os-help-sidebar {
    width: 210px; min-width: 210px;
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto; padding: 12px 8px; flex-shrink: 0;
}
.os-help-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 9px;
    cursor: pointer; font-size: 0.86rem; color: var(--text-secondary);
    transition: 0.15s; margin-bottom: 3px; user-select: none;
}
.os-help-nav-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.os-help-nav-item.active {
    background: rgba(56,189,248,0.12); color: var(--accent-teal);
    font-weight: 600; border-left: 3px solid var(--accent-teal);
    padding-left: 11px;
}
.os-help-nav-item .os-hn-icon { font-size: 1.1rem; flex-shrink: 0; }
#os-help-content-area { flex: 1; overflow-y: auto; padding: 28px 32px; min-width: 0; }
.os-help-section { display: none; }
.os-help-section.active { display: block; animation: fadeIn 0.2s ease; }
.os-help-section > h2 {
    color: var(--accent-teal) !important; font-size: 1.25rem;
    margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.os-help-subtitle {
    color: var(--text-secondary); font-size: 0.83rem; margin-bottom: 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
    line-height: 1.6;
}
.os-help-card {
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
}
.os-help-card h4 {
    color: var(--accent-gold) !important; margin: 0 0 12px;
    font-size: 0.93rem; display: flex; align-items: center; gap: 8px;
}
.os-help-card p, .os-help-card li {
    color: var(--text-secondary) !important; font-size: 0.83rem;
    line-height: 1.75; margin: 0 0 5px;
}
.os-help-card ul { padding-left: 18px; margin: 6px 0; }
.os-help-badge {
    display: inline-block; padding: 1px 8px;
    background: rgba(56,189,248,0.12); color: var(--accent-teal);
    border-radius: 4px; font-size: 0.72rem; font-weight: 700; margin-right: 5px;
}
.os-help-badge.gold { background: rgba(251,191,36,0.12); color: var(--accent-gold); }
.os-help-badge.pink { background: rgba(236,72,153,0.12); color: #ec4899; }
/* Search results panel */
#os-help-results { display: none; }
#os-help-results.active { display: block; animation: fadeIn 0.2s ease; }
.os-help-result-item {
    padding: 14px 18px; border-radius: 10px;
    border: 1px solid var(--border-color); margin-bottom: 10px;
    cursor: pointer; transition: 0.15s; background: var(--bg-tertiary);
}
.os-help-result-item:hover { border-color: var(--accent-teal); background: rgba(56,189,248,0.05); }
.os-hr-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-size: 0.9rem; }
.os-hr-body  { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.os-hr-tag   { font-size: 0.7rem; color: var(--accent-teal); margin-top: 4px; }
.os-help-no-results { text-align: center; padding: 40px; color: var(--text-secondary); }
.os-help-no-results .no-res-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; }

/* ─── 12. NOTIFICATION CENTER THEME-AWARE ─────────────────── */
#glassNotificationCenter {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.panel-header { background: var(--bg-tertiary) !important; border-bottom-color: var(--border-color) !important; }
.panel-header h3 { color: var(--text-primary) !important; }



/* ════════════════════════════════════════════════════════════════
   SECTION 3 — fixes2.css (Additional Fixes)
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   fixes2.css — Bridge OS HRS — Complete Visual & Behavioral Fixes
   ══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   FIX 1: SMART FONT / TEXT COLOR — Theme-Aware Typography
   All text must adapt intelligently to light and dark themes
   ──────────────────────────────────────────────────────────────── */

/* --- Dark Themes: ensure white text everywhere --- */
body:not(.theme-google):not(.theme-win98):not(.theme-aqua):not(.theme-girly) {
    --smart-text: #e2e8f0;
    --smart-text-muted: #94a3b8;
    --smart-btn-text: #e2e8f0;
    --smart-card-bg: rgba(255,255,255,0.05);
    --smart-card-border: rgba(255,255,255,0.1);
    --smart-input-bg: rgba(255,255,255,0.07);
    --smart-header-bg: rgba(15,23,42,0.95);
    --smart-hover-bg: rgba(255,255,255,0.08);
    --smart-shadow: rgba(0,0,0,0.5);
}

/* --- Light Themes: ensure dark text everywhere --- */
body.theme-google, body.theme-win98, body.theme-aqua, body.theme-girly {
    --smart-text: #1e293b;
    --smart-text-muted: #475569;
    --smart-btn-text: #1e293b;
    --smart-card-bg: #ffffff;
    --smart-card-border: #e2e8f0;
    --smart-input-bg: #ffffff;
    --smart-header-bg: #f8fafc;
    --smart-hover-bg: rgba(0,0,0,0.06);
    --smart-shadow: rgba(0,0,0,0.15);
}

/* ────────────────────────────────────────────────────────────────
   FIX 2: SETTINGS MODAL — Must Follow Active Theme
   Previously hardcoded dark colors regardless of theme
   ──────────────────────────────────────────────────────────────── */

/* Remove the old hardcoded dark-only overrides — reassign with theme variables */
#settingsModal .win-settings-modal {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    --bg-primary: var(--bg-primary);
    --bg-secondary: var(--bg-secondary);
    --bg-tertiary: var(--bg-tertiary);
    --text-primary: var(--text-primary);
    --text-secondary: var(--text-secondary);
}

#settingsModal .modal-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#settingsModal .modal-header *,
#settingsModal .modal-title {
    color: var(--text-primary) !important;
}

#settingsModal .modal-close {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

#settingsModal .modal-close:hover {
    background: rgba(239,68,68,0.2) !important;
    color: #ef4444 !important;
}

#settingsModal .modal-body {
    background: var(--bg-secondary) !important;
    display: flex !important;
    flex: 1 !important;
    padding: 0 !important;
}

#settingsModal .settings-sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color) !important;
}

#settingsModal button.tab-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 0.92rem !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    margin-bottom: 3px !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: background 0.2s, color 0.2s !important;
}

#settingsModal button.tab-btn:hover {
    background: var(--smart-hover-bg) !important;
    color: var(--text-primary) !important;
}

#settingsModal button.tab-btn.active {
    background: rgba(56,189,248,0.15) !important;
    color: var(--accent-teal) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--accent-teal) !important;
}

#settingsModal .settings-content-area {
    flex: 1 !important;
    background: var(--bg-secondary) !important;
    padding: 25px 35px !important;
    overflow-y: auto !important;
    color: var(--text-primary) !important;
}

#settingsModal .settings-tab {
    color: var(--text-primary) !important;
}

#settingsModal .settings-tab h3 {
    color: var(--accent-teal) !important;
}

#settingsModal .settings-tab h4 {
    color: var(--text-primary) !important;
}

#settingsModal .settings-tab label,
#settingsModal .settings-tab p,
#settingsModal .settings-tab span:not(.widget-btn):not(.badge) {
    color: var(--text-secondary) !important;
}

#settingsModal .settings-tab .font-bold,
#settingsModal .settings-tab h4,
#settingsModal .settings-tab strong {
    color: var(--text-primary) !important;
}

#settingsModal .theme-card,
#settingsModal .theme-card-highlight,
#settingsModal .widget-box,
#settingsModal .panel-info {
    background: var(--smart-card-bg) !important;
    border: 1px solid var(--smart-card-border) !important;
    border-radius: 10px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}

#settingsModal input,
#settingsModal select,
#settingsModal textarea {
    background: var(--smart-input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

#settingsModal input:focus,
#settingsModal select:focus,
#settingsModal textarea:focus {
    border-color: var(--accent-teal) !important;
    outline: none !important;
}

/* Light theme specific overrides for settings */
body.theme-google #settingsModal .win-settings-modal,
body.theme-win98 #settingsModal .win-settings-modal,
body.theme-aqua #settingsModal .win-settings-modal,
body.theme-girly #settingsModal .win-settings-modal {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal .modal-body,
body.theme-win98 #settingsModal .modal-body,
body.theme-aqua #settingsModal .modal-body,
body.theme-girly #settingsModal .modal-body {
    background: #f8fafc !important;
}

body.theme-google #settingsModal .settings-sidebar,
body.theme-win98 #settingsModal .settings-sidebar,
body.theme-aqua #settingsModal .settings-sidebar,
body.theme-girly #settingsModal .settings-sidebar {
    background: #ffffff !important;
    border-right-color: #e2e8f0 !important;
}

body.theme-google #settingsModal .settings-content-area,
body.theme-win98 #settingsModal .settings-content-area,
body.theme-aqua #settingsModal .settings-content-area,
body.theme-girly #settingsModal .settings-content-area {
    background: #f8fafc !important;
    color: #1e293b !important;
}

body.theme-google #settingsModal button.tab-btn,
body.theme-win98 #settingsModal button.tab-btn,
body.theme-aqua #settingsModal button.tab-btn,
body.theme-girly #settingsModal button.tab-btn {
    color: #475569 !important;
}

body.theme-google #settingsModal button.tab-btn.active,
body.theme-win98 #settingsModal button.tab-btn.active,
body.theme-aqua #settingsModal button.tab-btn.active,
body.theme-girly #settingsModal button.tab-btn.active {
    color: var(--accent-teal) !important;
    background: rgba(56,189,248,0.1) !important;
}

body.theme-google #settingsModal input,
body.theme-win98 #settingsModal input,
body.theme-aqua #settingsModal input,
body.theme-girly #settingsModal input,
body.theme-google #settingsModal select,
body.theme-win98 #settingsModal select,
body.theme-aqua #settingsModal select,
body.theme-girly #settingsModal select {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 3: FLOATING BUTTON — Theme-Aware Colors
   ──────────────────────────────────────────────────────────────── */

.os-floating-launcher {
    background: var(--bg-secondary, rgba(30,30,30,0.85)) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.2)) !important;
    color: var(--text-primary, white) !important;
    box-shadow: 0 10px 30px var(--smart-shadow, rgba(0,0,0,0.6)) !important;
    transition: transform 0.2s cubic-bezier(0.19,1,0.22,1), background 0.2s, box-shadow 0.2s !important;
}

.os-floating-launcher:hover {
    background: var(--bg-tertiary, rgba(60,60,60,0.95)) !important;
    box-shadow: 0 15px 40px var(--smart-shadow, rgba(0,0,0,0.7)) !important;
}

body.theme-google .os-floating-launcher,
body.theme-win98 .os-floating-launcher,
body.theme-aqua .os-floating-launcher,
body.theme-girly .os-floating-launcher {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 4: WINDOW MAXIMIZE — Override fixed dimensions when maximized
   The fixes.css forces module-window dimensions with !important,
   blocking the JS maximize function. This fix uses a .maximized class
   with higher specificity to override when needed.
   ──────────────────────────────────────────────────────────────── */

/* Windows not maximized still use auto/drag sizing */
.module-window:not(.window-maximized) {
    /* Keep default behavior from fixes.css */
}

/* When maximized - override everything with max specificity */
.module-window.window-maximized {
    position: fixed !important;
    top: var(--win-max-top, 50px) !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--win-max-height, calc(100vh - 110px)) !important;
    max-height: var(--win-max-height, calc(100vh - 110px)) !important;
    border-radius: 0 !important;
    transform: none !important;
    resize: none !important;
    z-index: 9999 !important;
    transition: top 0.25s cubic-bezier(0.19,1,0.22,1),
                width 0.25s cubic-bezier(0.19,1,0.22,1),
                height 0.25s cubic-bezier(0.19,1,0.22,1) !important;
}

/* Smooth transitions for non-maximized windows */
.module-window {
    transition: box-shadow 0.2s !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 5: TASKBAR ITEMS — Minimized windows show as buttons
   ──────────────────────────────────────────────────────────────── */

/* ── أزرار النوافذ: مثبتة على اليسار بموضع absolute بعيداً عن الساعة ── */
#taskbarApps,
#taskbar-items {
    position: absolute !important;
    left: 8px !important;
    right: 320px !important; /* مسافة أمان من منطقة الساعة والأيقونات */
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 0 8px !important;
    margin: 0 !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

.taskbar-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    height: 32px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    transition: background 0.15s, border-color 0.15s !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.taskbar-item:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: var(--accent-teal) !important;
}

.taskbar-item.active {
    background: rgba(56,189,248,0.15) !important;
    border-color: var(--accent-teal) !important;
    color: var(--accent-teal) !important;
}

/* Light theme taskbar items */
body.theme-google .taskbar-item,
body.theme-win98 .taskbar-item,
body.theme-aqua .taskbar-item,
body.theme-girly .taskbar-item {
    background: rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    color: #1e293b !important;
}

body.theme-google .taskbar-item.active,
body.theme-win98 .taskbar-item.active,
body.theme-aqua .taskbar-item.active,
body.theme-girly .taskbar-item.active {
    background: rgba(56,189,248,0.12) !important;
    border-color: var(--accent-teal) !important;
    color: var(--accent-teal) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 6: NOTIFICATIONS — Persistent toast (no auto-disappear)
   Style the toast to look good with close button always visible
   ──────────────────────────────────────────────────────────────── */

.os-toast-msg {
    background: var(--bg-secondary, rgba(30,30,30,0.92)) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15)) !important;
    color: var(--text-primary, white) !important;
    padding: 14px 16px !important;
    min-width: 280px !important;
    max-width: 380px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px var(--smart-shadow, rgba(0,0,0,0.5)) !important;
    position: relative !important;
    pointer-events: auto !important;
}

.os-toast-title {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
}

.os-toast-msg .os-toast-msg {
    /* inner text element — different from container */
    font-size: 0.85rem !important;
    color: var(--text-secondary, #94a3b8) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: unset !important;
    max-width: unset !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Close button on toast — always visible */
.os-toast-close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: var(--text-secondary, #94a3b8) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s, background 0.2s !important;
    flex-shrink: 0 !important;
}

.os-toast-close-btn:hover {
    opacity: 1 !important;
    background: rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
}

/* Light theme toast */
body.theme-google .os-toast-msg,
body.theme-win98 .os-toast-msg,
body.theme-aqua .os-toast-msg,
body.theme-girly .os-toast-msg {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

body.theme-google .os-toast-title,
body.theme-win98 .os-toast-title,
body.theme-aqua .os-toast-title,
body.theme-girly .os-toast-title {
    color: #1e293b !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 7: CUSTOM DIALOG (replaces native alert/confirm/prompt)
   ──────────────────────────────────────────────────────────────── */

#os-custom-dialog-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 2000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    animation: fadeInDialog 0.2s ease !important;
}

@keyframes fadeInDialog {
    from { opacity: 0; }
    to { opacity: 1; }
}

#os-custom-dialog {
    background: var(--bg-primary, #1e293b) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15)) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    min-width: 340px !important;
    max-width: 520px !important;
    width: 90vw !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6) !important;
    animation: slideUpDialog 0.25s cubic-bezier(0.16,1,0.3,1) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

body.theme-google #os-custom-dialog,
body.theme-win98 #os-custom-dialog,
body.theme-aqua #os-custom-dialog,
body.theme-girly #os-custom-dialog {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
}

@keyframes slideUpDialog {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#os-custom-dialog .dlg-icon {
    font-size: 2.2rem !important;
    margin-bottom: 16px !important;
    display: block !important;
    text-align: center !important;
}

#os-custom-dialog .dlg-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #e2e8f0) !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

#os-custom-dialog .dlg-message {
    font-size: 0.92rem !important;
    color: var(--text-secondary, #94a3b8) !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    white-space: pre-wrap !important;
}

body.theme-google #os-custom-dialog .dlg-message,
body.theme-win98 #os-custom-dialog .dlg-message,
body.theme-aqua #os-custom-dialog .dlg-message,
body.theme-girly #os-custom-dialog .dlg-message {
    color: #475569 !important;
}

#os-custom-dialog .dlg-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.2)) !important;
    background: var(--bg-tertiary, rgba(255,255,255,0.07)) !important;
    color: var(--text-primary, #e2e8f0) !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

#os-custom-dialog .dlg-input:focus {
    border-color: var(--accent-teal, #38bdf8) !important;
}

body.theme-google #os-custom-dialog .dlg-input,
body.theme-win98 #os-custom-dialog .dlg-input,
body.theme-aqua #os-custom-dialog .dlg-input,
body.theme-girly #os-custom-dialog .dlg-input {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

#os-custom-dialog .dlg-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#os-custom-dialog .dlg-btn {
    padding: 10px 28px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
    min-width: 90px !important;
}

#os-custom-dialog .dlg-btn-primary {
    background: var(--accent-teal, #38bdf8) !important;
    color: #000 !important;
}

#os-custom-dialog .dlg-btn-primary:hover {
    background: #0ea5e9 !important;
    transform: translateY(-1px) !important;
}

#os-custom-dialog .dlg-btn-danger {
    background: var(--danger, #e53e3e) !important;
    color: white !important;
}

#os-custom-dialog .dlg-btn-danger:hover {
    background: #c53030 !important;
    transform: translateY(-1px) !important;
}

#os-custom-dialog .dlg-btn-secondary {
    background: var(--bg-tertiary, rgba(255,255,255,0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15)) !important;
}

#os-custom-dialog .dlg-btn-secondary:hover {
    background: var(--bg-secondary, rgba(255,255,255,0.15)) !important;
}

body.theme-google #os-custom-dialog .dlg-btn-secondary,
body.theme-win98 #os-custom-dialog .dlg-btn-secondary,
body.theme-aqua #os-custom-dialog .dlg-btn-secondary,
body.theme-girly #os-custom-dialog .dlg-btn-secondary {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 8: WIDGET CONTROLS — RTL (Arabic) Support
   In Arabic mode, widget control buttons move to the left side
   ──────────────────────────────────────────────────────────────── */

body.lang-ar .widget-header {
    flex-direction: row-reverse !important;
}

body.lang-ar .widget-controls {
    flex-direction: row-reverse !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

body.lang-ar .widget-title {
    text-align: right !important;
}

/* RTL: Sidebar navigation in settings */
body.lang-ar #settingsModal .settings-sidebar {
    border-right: none !important;
    border-left: 1px solid var(--border-color) !important;
}

body.lang-ar #settingsModal button.tab-btn.active {
    border-left: none !important;
    border-right: 3px solid var(--accent-teal) !important;
    text-align: right !important;
}

body.lang-ar #settingsModal button.tab-btn {
    text-align: right !important;
}

/* RTL: Main menu nav dropdown */
body.lang-ar .sidebar-header {
    flex-direction: row-reverse !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 9: NOTIFICATION CENTER (Glass Panel) — Theme Aware
   ──────────────────────────────────────────────────────────────── */

.notification-panel {
    background: var(--bg-primary, rgba(15,23,42,0.97)) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12)) !important;
    color: var(--text-primary) !important;
}

.notification-panel .panel-header {
    background: var(--bg-secondary, rgba(255,255,255,0.05)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.notification-panel .panel-header h3 {
    color: var(--text-primary) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 10: HEADER BUTTONS — Theme-Aware Text Colors
   ──────────────────────────────────────────────────────────────── */

.header-right button,
button#btn_arrange,
button#btn_help,
button#btn_add_widget {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary, rgba(255,255,255,0.05)) !important;
    border: 1px solid var(--border-color) !important;
}

button#btn_arrange {
    color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    background: transparent !important;
}

button#btn_add_widget {
    color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    background: transparent !important;
}

button#btn_help {
    color: var(--text-primary) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 11: LIGHT THEME — Button Text Readability
   Dark text on light buttons in light themes
   ──────────────────────────────────────────────────────────────── */

body.theme-google .btn-secondary,
body.theme-win98 .btn-secondary,
body.theme-aqua .btn-secondary,
body.theme-girly .btn-secondary {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-google .btn-secondary:hover,
body.theme-win98 .btn-secondary:hover,
body.theme-aqua .btn-secondary:hover,
body.theme-girly .btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Ensure dark text on light theme dropdown items */
body.theme-google .dropdown-item,
body.theme-win98 .dropdown-item,
body.theme-aqua .dropdown-item,
body.theme-girly .dropdown-item {
    color: #1e293b !important;
}

body.theme-google .dropdown-item:hover,
body.theme-win98 .dropdown-item:hover,
body.theme-aqua .dropdown-item:hover,
body.theme-girly .dropdown-item:hover {
    background: rgba(0,0,0,0.06) !important;
    color: #0f172a !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 12: AI WIDGET — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

body.theme-google #ai-agent-widget,
body.theme-win98 #ai-agent-widget,
body.theme-aqua #ai-agent-widget,
body.theme-girly #ai-agent-widget {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-google #ai-agent-widget *,
body.theme-win98 #ai-agent-widget *,
body.theme-aqua #ai-agent-widget *,
body.theme-girly #ai-agent-widget * {
    color: #1e293b;
}

body.theme-google #ai-agent-header,
body.theme-win98 #ai-agent-header,
body.theme-aqua #ai-agent-header,
body.theme-girly #ai-agent-header {
    background: rgba(56,189,248,0.1) !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 13: HELP CENTER OVERLAY — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

#os-help-overlay {
    background: rgba(0,0,0,0.7) !important;
}

#os-help-win {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

#os-help-head {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

#os-help-sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color) !important;
}

.os-help-nav-item {
    color: var(--text-secondary) !important;
}

.os-help-nav-item.active,
.os-help-nav-item:hover {
    background: rgba(56,189,248,0.12) !important;
    color: var(--accent-teal) !important;
}

.os-help-section h2 {
    color: var(--text-primary) !important;
}

.os-help-subtitle {
    color: var(--text-secondary) !important;
}

.os-help-card {
    background: var(--smart-card-bg) !important;
    border: 1px solid var(--smart-card-border) !important;
    color: var(--text-primary) !important;
}

.os-help-card h4 {
    color: var(--accent-teal) !important;
}

.os-help-card p {
    color: var(--text-secondary) !important;
}

#os-help-search-bar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#os-help-search-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    outline: none !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 14: WIDGET MENU (Add Widget panel) — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

#widgetDropdownMenu {
    background: var(--bg-primary, rgba(15,23,42,0.97)) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 15px 40px var(--smart-shadow) !important;
}

.widget-menu-item {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.widget-menu-item:hover,
.widget-menu-item.active {
    background: var(--smart-hover-bg) !important;
    color: var(--text-primary) !important;
}

body.theme-google #widgetDropdownMenu,
body.theme-win98 #widgetDropdownMenu,
body.theme-aqua #widgetDropdownMenu,
body.theme-girly #widgetDropdownMenu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}

body.theme-google .widget-menu-item,
body.theme-win98 .widget-menu-item,
body.theme-aqua .widget-menu-item,
body.theme-girly .widget-menu-item {
    color: #475569 !important;
    border-bottom-color: #f1f5f9 !important;
}

body.theme-google .widget-menu-item:hover,
body.theme-win98 .widget-menu-item:hover,
body.theme-aqua .widget-menu-item:hover,
body.theme-girly .widget-menu-item:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 15: APP CENTER (Floating launcher panel) — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

#os-app-center {
    background: var(--bg-primary, rgba(15,23,42,0.97)) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.theme-google #os-app-center,
body.theme-win98 #os-app-center,
body.theme-aqua #os-app-center,
body.theme-girly #os-app-center {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.app-center-item {
    color: var(--text-secondary) !important;
}

.app-center-item:hover {
    background: var(--smart-hover-bg) !important;
    color: var(--text-primary) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 16: CONTEXT MENU — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

.os-context-menu {
    background: var(--bg-primary, rgba(15,23,42,0.97)) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 30px var(--smart-shadow) !important;
}

.os-context-menu-item {
    color: var(--text-secondary) !important;
}

.os-context-menu-item:hover {
    background: var(--smart-hover-bg) !important;
    color: var(--text-primary) !important;
}

body.theme-google .os-context-menu,
body.theme-win98 .os-context-menu,
body.theme-aqua .os-context-menu,
body.theme-girly .os-context-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.theme-google .os-context-menu-item,
body.theme-win98 .os-context-menu-item,
body.theme-aqua .os-context-menu-item,
body.theme-girly .os-context-menu-item {
    color: #475569 !important;
}

body.theme-google .os-context-menu-item:hover,
body.theme-win98 .os-context-menu-item:hover,
body.theme-aqua .os-context-menu-item:hover,
body.theme-girly .os-context-menu-item:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 17: SPOTLIGHT SEARCH — Theme-Aware
   ──────────────────────────────────────────────────────────────── */

.spotlight-box {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.spotlight-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    outline: none !important;
}

.spotlight-results {
    color: var(--text-primary) !important;
}

body.theme-google .spotlight-box,
body.theme-win98 .spotlight-box,
body.theme-aqua .spotlight-box,
body.theme-girly .spotlight-box {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.theme-google .spotlight-input,
body.theme-win98 .spotlight-input,
body.theme-aqua .spotlight-input,
body.theme-girly .spotlight-input {
    color: #1e293b !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 18: WIN BUTTONS — Theme colors in light mode
   ──────────────────────────────────────────────────────────────── */

body.theme-google .win-btn,
body.theme-win98 .win-btn,
body.theme-aqua .win-btn,
body.theme-girly .win-btn {
    color: #1e293b !important;
}

body.theme-google .win-btn:hover,
body.theme-win98 .win-btn:hover,
body.theme-aqua .win-btn:hover,
body.theme-girly .win-btn:hover {
    background: rgba(0,0,0,0.08) !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 19: MODULE WINDOW — Theme-Aware background
   ──────────────────────────────────────────────────────────────── */

.module-window {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.module-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

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

/* ────────────────────────────────────────────────────────────────
   FIX 20: TASKBAR — Theme-Aware 
   ──────────────────────────────────────────────────────────────── */

#taskbarContainer {
    background: var(--bg-secondary, rgba(10,15,28,0.95)) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important; /* ثابت LTR — الساعة دائماً يمين، الأزرار دائماً يسار */
    align-items: center !important;
    justify-content: flex-start !important;
}

body.theme-google #taskbarContainer,
body.theme-win98 #taskbarContainer,
body.theme-aqua #taskbarContainer,
body.theme-girly #taskbarContainer {
    background: #f1f5f9 !important;
    border-top-color: #e2e8f0 !important;
}

#taskbar-clock {
    color: var(--text-primary) !important;
}

.taskbar-system-tray {
    color: var(--text-primary) !important;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 4 — animations.css (Keyframes & Transitions)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   animations.css — Bridge OS HRS
   Core CSS Animations & Transitions
   ════════════════════════════════════════════════════════════════ */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide In from Top */
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide In from Bottom */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scale In */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Shake (for errors) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* Bounce */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.05); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.3); }
    50%       { box-shadow: 0 0 20px rgba(56, 189, 248, 0.7); }
}

/* Ticker Scroll */
@keyframes tickerScroll {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

/* Utility Classes */
.animate-fadeIn    { animation: fadeIn 0.3s ease-out forwards; }
.animate-scaleIn   { animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slideDown { animation: slideInDown 0.3s ease-out forwards; }
.animate-slideUp   { animation: slideInUp 0.3s ease-out forwards; }
.animate-bounce    { animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-shake     { animation: shake 0.4s ease-in-out; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }
.animate-spin      { animation: spin 1s linear infinite; }
.animate-glow      { animation: glowPulse 2s ease-in-out infinite; }

/* Module Window Entry */
.module-window {
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* News Ticker */
.news-ticker-track {
    animation: tickerScroll 30s linear infinite;
}

/* Widget Entrance */
.widget-box {
    animation: fadeIn 0.3s ease-out;
}

/* Modal Entrance */
.modal-overlay.show .modal {
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dropdown Entrance */
.sidebar-panel.show,
.dropdown-content.show {
    animation: slideInDown 0.2s ease-out;
}