:root {
            --sidebar-width: 270px;
            --header-height: 54px;
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --sidebar-bg: #fafbfc;
            --sidebar-border: #e5e7eb;
            --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            --accent: #f59e0b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 10px;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* box-sizing: our elements only — leave DevExpress untouched */
        .master-header, .master-sidebar, .master-content,
        .master-header *, .master-sidebar *, .page-toolbar-wrapper *,
        .sidebar-tree *, .mobile-menu-zone * {
            box-sizing: border-box;
        }
        body { margin: 0; font-family: 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif; background: #f1f5f9; -webkit-font-smoothing: antialiased; }
        [dir="ltr"] body { font-family: 'Inter', 'Cairo', 'Segoe UI', Tahoma, sans-serif; }

        /* ===== HEADER - Modern Dark Theme 2026 ===== */
        .master-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: var(--header-height);
            background: var(--header-bg);
            display: flex;
            align-items: center;
            padding: 0 18px;
            z-index: 1100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            backdrop-filter: blur(10px);
        }

        .header-toggle {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.15);
            color: white;
            width: 40px; height: 40px;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .header-toggle:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); transform: scale(1.05); }

        .header-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 16px;
            padding: 7px 16px;
            background: rgba(255,255,255,0.95);
            border-radius: var(--radius);
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }
        .header-brand:hover {
            background: white;
            transform: scale(1.03);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .header-brand-logo { height: 32px; width: auto; object-fit: contain; }
        .header-brand i { font-size: 1.5rem; color: white; }
        .header-brand span { font-weight: 800; font-size: 1.15rem; color: #0f172a; letter-spacing: -0.3px; }

        .header-spacer { flex: 1; }

        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            padding: 0;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            color: rgba(255,255,255,0.85);
            font-size: 1.15rem;
            cursor: pointer;
            text-decoration: none;
            transition: var(--transition);
            position: relative;
        }
        .header-btn:hover { background: rgba(255,255,255,0.22); color: white; border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
        .header-btn.has-label { width: auto; padding: 0 14px; gap: 6px; font-size: 0.84rem; font-weight: 500; }
        /* Circular user avatar in the header (from ~/Content/Photo/<user>.jpg; falls back to the icon) */
        .header-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.55); vertical-align: middle; display: inline-block; background: rgba(255,255,255,0.15); }
        .header-btn.logout { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); }
        .header-btn.logout:hover { background: rgba(239,68,68,0.85); border-color: transparent; color: white; }
        .header-btn.chatbot-btn { background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.3); }
        .header-btn.chatbot-btn:hover { background: rgba(39,174,96,0.85); color: white; border-color: transparent; }

        /* A1-Soft Logo in Header */
        .header-logo-link {
            display: flex;
            align-items: center;
            padding: 7px 14px;
            background: rgba(255,255,255,0.95);
            border-radius: var(--radius);
            margin-right: 12px;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }
        .header-logo-link:hover {
            background: white;
            transform: scale(1.03);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .header-logo-img {
            height: 30px;
            width: auto;
        }
        [dir="rtl"] .header-logo-link {
            margin-right: 0;
            margin-left: 12px;
        }

        /* Language ComboBox */
        .lang-wrap .dxeEditArea, .lang-wrap table { 
            background: rgba(255,255,255,0.2) !important; 
            border: none !important; 
            border-radius: 8px !important; 
        }
        .lang-wrap input { color: white !important; background: transparent !important; font-weight: 500 !important; }
        .lang-wrap td { background: transparent !important; }
        .lang-wrap .dxeButtonEditButton { background: transparent !important; border: none !important; }
        .lang-wrap .dxeButtonEditButton img { filter: invert(1); }

        /* ★ Language abbreviation badge ★ */
        .lang-abbr-badge {
            display: none; /* shown on mobile via media query */
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 34px;
            padding: 0 8px;
            background: rgba(255,255,255,0.25);
            border: 1.5px solid rgba(255,255,255,0.5);
            border-radius: 8px;
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background 0.15s;
            user-select: none;
        }
        .lang-abbr-badge:hover { background: rgba(255,255,255,0.35); }

        /* ★ Help button in header ★ */
        .header-help-btn {
            background: rgba(255,255,255,0.2) !important;
            border: 1.5px solid rgba(255,255,255,0.4) !important;
            width: 38px;
            height: 34px;
            padding: 0;
            min-width: unset;
            border-radius: 8px;
            font-size: 1rem;
        }
        .header-help-btn:hover { background: rgba(255,255,255,0.35) !important; }

        /* Desktop: show full lang combo, hide badge */
        @media (min-width: 993px) {
            #langComboWrap { display: block; }
            .lang-abbr-badge { display: none !important; }
        }
        /* Mobile: hide full combo, show badge */
        @media (max-width: 992px) {
            #langComboWrap { display: none; }
            .lang-abbr-badge { display: flex; }
            /* Lang combo as overlay when badge tapped */
            #langComboWrap.force-show {
                display: block !important;
                position: fixed !important;
                top: 54px !important;
                right: 60px !important;
                left: auto !important;
                z-index: 9999 !important;
                background: #1565C0 !important;
                border-radius: 10px !important;
                padding: 10px !important;
                box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
                width: 160px !important;
            }
            [dir="rtl"] #langComboWrap.force-show {
                right: auto !important;
                left: 60px !important;
            }
        }

        /* ===== SIDEBAR - Modern Light Theme 2026 ===== */
        .master-sidebar {
            position: fixed;
            top: var(--header-height);
            left: 0;
            width: var(--sidebar-width);
            height: calc(100vh - var(--header-height));
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            z-index: 1000;
            overflow-y: auto;
            overflow-x: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .master-sidebar.collapsed { transform: translateX(-100%); }
        [dir="rtl"] .master-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--sidebar-border); }
        [dir="rtl"] .master-sidebar.collapsed { transform: translateX(100%); }

        .sidebar-tree { padding: 14px 10px; }

        .tree-menu { list-style: none; margin: 0; padding: 0; }

        /* ===== SYSTEM LEVEL (Level 0) - Modern Indigo ===== */
        .tree-menu > .tree-item {
            margin-bottom: 6px;
        }
        .tree-menu > .tree-item > .tree-link {
            background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
            color: white !important;
            border-radius: var(--radius);
            padding: 12px 14px;
            font-weight: 700;
            font-size: 0.88rem;
            box-shadow: 0 2px 8px rgba(67, 56, 202, 0.35);
            transition: var(--transition);
        }
        .tree-menu > .tree-item > .tree-link:hover {
            background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
            transform: translateX(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
        }
        [dir="rtl"] .tree-menu > .tree-item > .tree-link:hover { transform: translateX(2px); }
        .tree-menu > .tree-item > .tree-link .menu-icon { color: #a5b4fc; }
        .tree-menu > .tree-item > .tree-link .expand-icon { color: rgba(255,255,255,0.7); }

        /* Common link styles */
        .tree-link {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            color: #334155;
            text-decoration: none;
            border-radius: var(--radius);
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.84rem;
            gap: 10px;
        }

        .tree-link .menu-icon {
            width: 20px;
            text-align: center;
            font-size: 0.85rem;
        }

        .tree-link .menu-text {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tree-link .expand-icon {
            font-size: 0.7rem;
            opacity: 0.6;
            transition: transform 0.2s;
        }
        .tree-link.expanded .expand-icon { transform: rotate(90deg); }
        [dir="rtl"] .tree-link .expand-icon { transform: rotate(180deg); }
        [dir="rtl"] .tree-link.expanded .expand-icon { transform: rotate(90deg); }

        /* Submenu container */
        .tree-submenu {
            list-style: none;
            margin: 0;
            padding: 4px 0 4px 12px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .tree-submenu.open { max-height: 2000px; }
        [dir="rtl"] .tree-submenu { padding: 4px 12px 4px 0; }

        /* ===== LEVEL 1 - Green ===== */
        .tree-submenu > .tree-item > .tree-link {
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            color: #047857 !important;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .tree-submenu > .tree-item > .tree-link:hover {
            background: #d1fae5;
            border-color: #6ee7b7;
        }
        .tree-submenu > .tree-item > .tree-link .menu-icon { color: #10b981; }

        /* ===== LEVEL 2 - Purple ===== */
        .tree-submenu .tree-submenu > .tree-item > .tree-link {
            background: #f5f3ff;
            border: 1px solid #ddd6fe;
            color: #7c3aed !important;
            font-weight: 500;
            margin-bottom: 3px;
            padding: 8px 12px;
            font-size: 0.82rem;
        }
        .tree-submenu .tree-submenu > .tree-item > .tree-link:hover {
            background: #ede9fe;
            border-color: #c4b5fd;
        }
        .tree-submenu .tree-submenu > .tree-item > .tree-link .menu-icon { color: #8b5cf6; }

        /* ===== LEVEL 3 - Pink ===== */
        .tree-submenu .tree-submenu .tree-submenu > .tree-item > .tree-link {
            background: #fdf2f8;
            border: 1px solid #fbcfe8;
            color: #be185d !important;
            font-weight: 500;
            padding: 6px 12px;
            font-size: 0.78rem;
        }
        .tree-submenu .tree-submenu .tree-submenu > .tree-item > .tree-link:hover {
            background: #fce7f3;
            border-color: #f9a8d4;
        }
        .tree-submenu .tree-submenu .tree-submenu > .tree-item > .tree-link .menu-icon { color: #ec4899; font-size: 0.5rem; }

        /* ===== ACTIVE / CURRENT PAGE HIGHLIGHT ===== */
        .tree-link.active-page {
            position: relative;
        }
        /* Level 0 active */
        .tree-menu > .tree-item > .tree-link.active-page {
            background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5), inset 0 0 0 2px rgba(255,255,255,0.3);
        }
        /* Level 1 active - Green */
        .tree-submenu > .tree-item > .tree-link.active-page {
            background: #d1fae5 !important;
            border-color: #34d399 !important;
            box-shadow: inset 3px 0 0 #059669, 0 1px 4px rgba(5,150,105,0.2);
        }
        [dir="rtl"] .tree-submenu > .tree-item > .tree-link.active-page {
            box-shadow: inset -3px 0 0 #059669, 0 1px 4px rgba(5,150,105,0.2);
        }
        /* Level 2 active - Purple */
        .tree-submenu .tree-submenu > .tree-item > .tree-link.active-page {
            background: #ede9fe !important;
            border-color: #a78bfa !important;
            box-shadow: inset 3px 0 0 #7c3aed, 0 1px 4px rgba(124,58,237,0.2);
        }
        [dir="rtl"] .tree-submenu .tree-submenu > .tree-item > .tree-link.active-page {
            box-shadow: inset -3px 0 0 #7c3aed, 0 1px 4px rgba(124,58,237,0.2);
        }
        /* Level 3 active - Pink */
        .tree-submenu .tree-submenu .tree-submenu > .tree-item > .tree-link.active-page {
            background: #fce7f3 !important;
            border-color: #f472b6 !important;
            box-shadow: inset 3px 0 0 #be185d, 0 1px 4px rgba(190,24,93,0.2);
        }
        [dir="rtl"] .tree-submenu .tree-submenu .tree-submenu > .tree-item > .tree-link.active-page {
            box-shadow: inset -3px 0 0 #be185d, 0 1px 4px rgba(190,24,93,0.2);
        }

        /* ===== MAIN CONTENT ===== */
        .master-content {
            margin-left: var(--sidebar-width);
            margin-top: var(--header-height);
            min-height: calc(100vh - var(--header-height));
            height: calc(100vh - var(--header-height));
            transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: #f1f5f9;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .master-content.expanded { margin-left: 0; }
        [dir="rtl"] .master-content { margin-left: 0; margin-right: var(--sidebar-width); }
        [dir="rtl"] .master-content.expanded { margin-right: 0; }
        /* login / unauthenticated: hide side menu, let content span full width */
        .login-mode { --sidebar-width: 0px !important; }
        .login-mode .master-sidebar { display: none !important; }
        .login-mode .master-content,
        [dir="rtl"].login-mode .master-content,
        [dir="rtl"] .login-mode .master-content { margin-left: 0 !important; margin-right: 0 !important; }
        .login-mode .header-toggle { display: none !important; }

        /* Content area - fills remaining height, scrolls for normal pages */
        #DivPageContent {
            flex: 1;
            overflow: auto;
            position: relative;
            height: 100%;
        }

        /* Support for DevExpress Splitter FullscreenMode */
        #DivPageContent .formLayout-container,
        .formLayout-container {
            height: 100% !important;
            background-color: white;
            margin: 0;
            max-width: 100%;
            overflow: hidden;
        }

        /* DevExpress Splitter */
        #DivPageContent .dxsplControl,
        .formLayout-container .dxsplControl {
            height: 100% !important;
            width: 100% !important;
        }

        /* Ensure grid pager is always visible within the grid */
        .dxgvCSD, .dxgvPagerBottomPanel_Glass {
            position: relative !important;
            z-index: 1 !important;
        }

        /* Make DevExpress PageControl fill its pane and scroll tab content */
        .dxsplPane .dxtcLite_Glass,
        .dxsplPaneC .dxtcLite_Glass {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
        }
        .dxsplPane .dxtc-content,
        .dxsplPaneC .dxtc-content {
            flex: 1 !important;
            overflow: auto !important;
            min-height: 0 !important;
        }

        /* Content class from Layout.css */
        .content {
            height: 100% !important;
            min-height: 100% !important;
            width: 100% !important;
        }

        /* Form element fix */
        #form1 {
            height: 100%;
        }

        /* Hide footer when page has fullscreen splitter to give more space */
        .master-footer {
            display: none;
        }

        /* ===== TOOLBAR - Use Original CSS with Sidebar Fix ===== */
        .page-toolbar-wrapper {
            flex-shrink: 0;
            position: relative !important;
            left: 0 !important;
            right: 0 !important;
            top: 0 !important;
            background-color: white !important;
            z-index: 10 !important;
        }

        .page-toolbar-panel { 
            background: white; 
        }

        /* Keep original toolbar styling from Layout.css */
        .page-toolbar {
            margin-right: auto;
            margin-left: auto;
            background-color: rgba(0, 0, 0, 0.1) !important;
            border: none !important;
            font-size: 0.93em !important;
            height: 2.69rem;
        }

        /* Title styling from toolbar.css */
        .page-toolbar .item:first-child {
            background: linear-gradient(to bottom, #fff5f5, #ffebee) !important;
            border: 2px solid #e53935 !important;
            border-radius: 6px !important;
            padding: 2px 12px !important;
            margin: 7px 8px !important;
            height: auto !important;
            line-height: 1.2 !important;
        }

        .page-toolbar .item:first-child:hover {
            background: linear-gradient(to bottom, #ffebee, #ffcdd2) !important;
        }

        .page-toolbar .item:first-child label,
        .page-toolbar .item:first-child .dxm-content {
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #c62828 !important;
            line-height: 1.2 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* RTL/LTR Title Position */
        [dir="rtl"] .page-toolbar .item:first-child {
            margin-left: auto !important;
        }
        [dir="ltr"] .page-toolbar .item:first-child {
            margin-right: auto !important;
        }

        /* Toolbar icons */
        .page-toolbar .dxm-image {
            width: 24px;
            height: 24px;
        }

        /* GotoBox styling */
        #GotoBox {
            width: 55px;
            text-align: center;
            background-color: #e0ffff;
            border: 1px solid #b0bec5;
            border-radius: 4px;
        }

        /* Total Records Label */
        #LblTotalRecords {
            min-width: 55px;
            text-align: center;
            background-color: #f5f5f5;
            border: 1px solid #b0bec5;
            border-radius: 4px;
            padding: 2px 8px;
        }

        @media print {
            .page-toolbar-wrapper {
                display: none !important;
            }
        }

        /* ===== MOBILE ===== */
        @media (max-width: 992px) {
            .master-sidebar { transform: translateX(-100%); }
            .master-sidebar.open { transform: translateX(0); }
            .master-content { margin-left: 0; }
            [dir="rtl"] .master-sidebar { transform: translateX(100%); }
            [dir="rtl"] .master-sidebar.open { transform: translateX(0); }
            [dir="rtl"] .master-content { margin-right: 0; }
            .header-btn span { display: none; }
            .header-brand span { display: none; }
            .header-brand-logo { height: 30px; }
        }

        /* ===== MOBILE BUTTON MENU ===== */
        .mobile-menu-zone {
            display: none; /* hidden on desktop */
        }

        @media (max-width: 992px) {
            .mobile-menu-zone {
                display: block;
                flex-shrink: 0;
                background: #f0f4f8;
                border-bottom: 2px solid #e2e8f0;
                overflow: hidden;
            }
            .mobile-menu-zone.collapsed .mobile-menu-inner {
                display: none;
            }
        }

        .mobile-menu-toggle-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
            color: white;
            cursor: pointer;
            user-select: none;
        }
        .mobile-menu-toggle-bar i { font-size: 1rem; transition: transform 0.3s; }
        .mobile-menu-zone.collapsed .mobile-menu-toggle-bar .mm-chevron { transform: rotate(0deg); }
        .mobile-menu-zone:not(.collapsed) .mobile-menu-toggle-bar .mm-chevron { transform: rotate(180deg); }
        .mobile-menu-toggle-bar span { font-weight: 700; font-size: 0.95rem; }

        .mobile-menu-inner {
            padding: 10px;
            max-height: 55vh;
            overflow-y: auto;
        }

        /* Back button */
        .mm-back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #334155, #475569);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.2s;
        }
        .mm-back-btn:active { transform: scale(0.97); }
        .mm-back-btn i { font-size: 1rem; }
        [dir="rtl"] .mm-back-btn i.fa-arrow-left { transform: scaleX(-1); }

        .mm-level-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            padding: 0 4px;
        }

        /* Button Grid - 2 columns */
        .mm-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            animation: mmSlideIn 0.25s ease-out;
        }
        @keyframes mmSlideIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .mm-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 8px;
            border-radius: 14px;
            border: 2px solid transparent;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s;
            min-height: 90px;
            text-align: center;
            position: relative;
        }
        .mm-tile:active { transform: scale(0.95); }
        .mm-tile .mm-tile-icon {
            width: 38px; height: 38px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
        }
        .mm-tile .mm-tile-text {
            font-size: 0.78rem; font-weight: 600;
            line-height: 1.2; word-break: break-word;
        }
        .mm-tile .mm-has-children-badge {
            position: absolute; top: 6px; right: 8px;
            font-size: 0.6rem; opacity: 0.5;
        }
        [dir="rtl"] .mm-tile .mm-has-children-badge { right: auto; left: 8px; }

        /* Level 0 - Blue */
        .mm-tile.mm-level-0 { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #1e40af; }
        .mm-tile.mm-level-0 .mm-tile-icon { background: #1e40af; color: white; }
        .mm-tile.mm-level-0:active { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }

        /* Level 1 - Green */
        .mm-tile.mm-level-1 { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; color: #047857; }
        .mm-tile.mm-level-1 .mm-tile-icon { background: #059669; color: white; }
        .mm-tile.mm-level-1:active { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }

        /* Level 2 - Purple */
        .mm-tile.mm-level-2 { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; color: #5b21b6; }
        .mm-tile.mm-level-2 .mm-tile-icon { background: #7c3aed; color: white; }
        .mm-tile.mm-level-2:active { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }

        /* Level 3 - Pink */
        .mm-tile.mm-level-3 { background: linear-gradient(135deg, #fdf2f8, #fce7f3); border-color: #f9a8d4; color: #9d174d; }
        .mm-tile.mm-level-3 .mm-tile-icon { background: #be185d; color: white; }
        .mm-tile.mm-level-3:active { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }

        /* Active tile highlight */
        .mm-tile.mm-active {
            box-shadow: 0 0 0 3px #f59e0b, 0 4px 12px rgba(245,158,11,0.35);
            border-color: #f59e0b !important;
            position: relative;
        }
        .mm-tile.mm-active::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 5px;
            left: 7px;
            font-size: 0.6rem;
            background: #f59e0b;
            color: white;
            width: 18px; height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        [dir="rtl"] .mm-tile.mm-active::after {
            left: auto;
            right: 7px;
        }

        .sidebar-overlay {
            display: none;
            position: fixed;
            top: var(--header-height);
            left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 999;
        }
        .sidebar-overlay.open { display: block; }

        /* Hide old layout elements */
        .app-header, .header-menu, .left-panel, .right-panel, .footer-wrapper { display: none !important; }

        /* Custom Alert & Confirm Dialog — must be above DevExpress popups (z-index ~10100) */
        .ca-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            display: none; align-items: center; justify-content: center;
            z-index: 100000;
            animation: caFadeIn 0.2s ease;
        }
        @keyframes caFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes caSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .ca-box {
            background: white; padding: 0; border-radius: 16px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.25); text-align: center;
            min-width: 320px; max-width: 460px; width: 90%;
            animation: caSlideIn 0.25s ease;
            overflow: hidden;
        }
        .ca-icon { padding: 24px 24px 8px; font-size: 48px; }
        .ca-icon.ca-info { color: var(--primary, #2196F3); }
        .ca-icon.ca-warn { color: #ff9800; }
        .ca-icon.ca-success { color: #4caf50; }
        .ca-icon.ca-question { color: #2196F3; }
        .ca-icon.ca-error { color: #f44336; }
        .ca-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 0 24px 8px; }
        .ca-content { padding: 0 28px 20px; color: #555; font-size: 15px; line-height: 1.6; direction: auto; white-space: pre-line; }
        .ca-buttons { display: flex; border-top: 1px solid #eee; }
        .ca-buttons button {
            flex: 1; padding: 14px; border: none; cursor: pointer;
            font-size: 15px; font-weight: 600; transition: background 0.15s;
        }
        .ca-buttons button:hover { filter: brightness(0.95); }
        .ca-btn-ok { background: var(--primary, #2196F3); color: white; }
        .ca-btn-ok:hover { background: var(--primary, #1976D2) !important; }
        .ca-btn-yes { background: #4caf50; color: white; }
        .ca-btn-yes:hover { background: #43a047 !important; }
        .ca-btn-no { background: #f5f5f5; color: #555; }
        .ca-btn-no:hover { background: #e0e0e0 !important; }
        .ca-buttons button + button { border-right: 1px solid #eee; }