/** * Emirates (default) app theme — light shell, teal/navy accents. * Active when . Loaded after phase-shell.css. */ html[data-theme="emirates"] .phase-one-admin, html[data-theme="emirates"] .phase-ui { --phase-bg: #e1f7fb; --phase-surface: #ffffff; --phase-border: #dbeafe; --phase-text: #0b2530; --phase-muted: #4a6570; --phase-primary: #035167; --phase-primary-soft: #e1f7fb; --phase-success: #0f9f55; --phase-success-soft: #e9f9ef; --phase-warning: #c77a00; --phase-warning-soft: #fff3d3; --phase-danger: #c53030; --phase-danger-soft: #ffe7ea; --phase-dark: #035167; --phase-accent-red: #25abb4; --phase-black: #035167; } /* ── Unified app chrome (sidebar + top bar feel like one piece) ── */ html[data-theme="emirates"] .phase-one-admin #page-topbar, html[data-theme="emirates"] .phase-ui #page-topbar { box-shadow: none !important; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box, html[data-theme="emirates"] .phase-ui .navbar-brand-box, html[data-theme="emirates"] .phase-one-admin #page-topbar .navbar-header, html[data-theme="emirates"] .phase-ui #page-topbar .navbar-header, html[data-theme="emirates"] .phase-one-admin .vertical-menu, html[data-theme="emirates"] .phase-ui .vertical-menu { background: linear-gradient(180deg, #f4fbfc 0%, #ffffff 100%) !important; background-size: auto !important; animation: none !important; border: none !important; box-shadow: none !important; } html[data-theme="emirates"] .phase-one-admin .vertical-menu, html[data-theme="emirates"] .phase-ui .vertical-menu { box-shadow: 1px 0 0 rgba(3, 81, 103, 0.07), 8px 0 32px rgba(3, 81, 103, 0.05) !important; z-index: 1092 !important; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box, html[data-theme="emirates"] .phase-ui .navbar-brand-box { border-right: none !important; min-height: 70px; height: 100%; padding: 0 1.5rem !important; width: var(--phase-sidebar-lg, 250px) !important; flex-shrink: 0; display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar .navbar-header, html[data-theme="emirates"] .phase-ui #page-topbar .navbar-header { min-height: 70px; height: 70px; align-items: center !important; border-bottom: none !important; box-shadow: none !important; position: relative; } /* Shadow only over main content — not the sidebar column */ html[data-theme="emirates"] .phase-one-admin #page-topbar .navbar-header::after, html[data-theme="emirates"] .phase-ui #page-topbar .navbar-header::after { content: ""; position: absolute; left: var(--phase-sidebar-lg, 250px); right: 0; bottom: 0; height: 0; pointer-events: none; box-shadow: 0 4px 14px rgba(3, 81, 103, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="emirates"] body[data-sidebar-size="md"] .phase-one-admin #page-topbar .navbar-header::after, html[data-theme="emirates"] body[data-sidebar-size="md"] .phase-ui #page-topbar .navbar-header::after { left: var(--phase-sidebar-md, 160px); } html[data-theme="emirates"] body[data-sidebar-size="sm"] .phase-one-admin #page-topbar .navbar-header::after, html[data-theme="emirates"] body[data-sidebar-size="sm"] .phase-ui #page-topbar .navbar-header::after { left: var(--phase-sidebar-sm, 70px); } @media (max-width: 991.98px) { html[data-theme="emirates"] .phase-one-admin #page-topbar .navbar-header::after, html[data-theme="emirates"] .phase-ui #page-topbar .navbar-header::after { left: 0; } } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .phase-brand-logo, html[data-theme="emirates"] .phase-ui .navbar-brand-box .phase-brand-logo { background: transparent; padding: 0; box-shadow: none; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .logo.logo-light, html[data-theme="emirates"] .phase-ui .navbar-brand-box .logo.logo-light { display: none !important; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .logo.logo-dark, html[data-theme="emirates"] .phase-ui .navbar-brand-box .logo.logo-dark { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; line-height: normal !important; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .logo.logo-dark .logo-lg, html[data-theme="emirates"] .phase-ui .navbar-brand-box .logo.logo-dark .logo-lg { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar .header-item, html[data-theme="emirates"] .phase-ui #page-topbar .header-item { color: #475569 !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar .header-item:hover, html[data-theme="emirates"] .phase-ui #page-topbar .header-item:hover { color: #035167 !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar #page-header-user-dropdown, html[data-theme="emirates"] .phase-ui #page-topbar #page-header-user-dropdown { background: transparent !important; border-left: 1px solid #e2e8f0 !important; border-right: none !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar #page-header-user-dropdown .fw-medium, html[data-theme="emirates"] .phase-one-admin #page-topbar #page-header-user-dropdown i, html[data-theme="emirates"] .phase-ui #page-topbar #page-header-user-dropdown .fw-medium, html[data-theme="emirates"] .phase-ui #page-topbar #page-header-user-dropdown i { color: #334155 !important; } html[data-theme="emirates"] .phase-one-admin #page-topbar .header-profile-user, html[data-theme="emirates"] .phase-ui #page-topbar .header-profile-user { border: 1px solid #cbd5e1; } /* ── Sidebar navigation (pill style, readable hover) ── */ html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a { color: #334155 !important; border-left: none !important; border-radius: 12px !important; margin: 3px 12px !important; padding: 0.62rem 0.85rem !important; transform: none !important; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a i, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a i, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a svg, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a svg { color: #64748b !important; stroke: #64748b !important; } /* Override phase-shell dark hover (white text on light bg bug) */ html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):hover, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):hover, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):focus, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):focus { color: #023544 !important; font-weight: 600 !important; background: rgba(37, 171, 180, 0.14) !important; background-image: none !important; border-left: none !important; box-shadow: inset 0 0 0 1px rgba(37, 171, 180, 0.22) !important; transform: none !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):hover span, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):hover span, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):hover i, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):hover i, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):hover svg, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):hover svg, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):focus span, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):focus span, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a:not(.active):focus i, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a:not(.active):focus i { color: #035167 !important; stroke: #035167 !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active:hover, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active:hover { color: #ffffff !important; background: linear-gradient(135deg, #035167 0%, #25abb4 100%) !important; background-image: linear-gradient(135deg, #035167 0%, #25abb4 100%) !important; border-left: none !important; box-shadow: 0 8px 18px rgba(37, 171, 180, 0.28) !important; animation: none !important; transform: none !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active i, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active i, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active span, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active span, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active:hover i, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active:hover i, html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a.active:hover span, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a.active:hover span { color: #ffffff !important; stroke: #ffffff !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul li a .badge, html[data-theme="emirates"] .phase-ui #sidebar-menu ul li a .badge { background: #e1f7fb; color: #035167; } /* ── Sidebar sub-menus (Settings → Positions, etc.) ── */ html[data-theme="emirates"] .phase-one-admin #sidebar-menu .sub-menu.mm-collapse.mm-show, html[data-theme="emirates"] .phase-ui #sidebar-menu .sub-menu.mm-collapse.mm-show, html[data-theme="emirates"] .phase-one-admin #sidebar-menu .sub-menu.mm-show, html[data-theme="emirates"] .phase-ui #sidebar-menu .sub-menu.mm-show { display: block !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul.sub-menu, html[data-theme="emirates"] .phase-ui #sidebar-menu ul.sub-menu { padding: 0.1rem 0 0.4rem !important; margin: 0 12px 0.35rem 1.35rem !important; border-left: none !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu ul.sub-menu li a, html[data-theme="emirates"] .phase-ui #sidebar-menu ul.sub-menu li a { padding: 0.48rem 0.75rem 0.48rem 0.85rem !important; margin: 2px 0 !important; font-size: 0.8125rem !important; border-radius: 10px !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu li.mm-active > a.has-arrow, html[data-theme="emirates"] .phase-ui #sidebar-menu li.mm-active > a.has-arrow { color: #035167 !important; background: rgba(37, 171, 180, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(37, 171, 180, 0.18) !important; } html[data-theme="emirates"] .phase-one-admin #sidebar-menu li.mm-active > a.has-arrow i, html[data-theme="emirates"] .phase-ui #sidebar-menu li.mm-active > a.has-arrow i, html[data-theme="emirates"] .phase-one-admin #sidebar-menu li.mm-active > a.has-arrow svg, html[data-theme="emirates"] .phase-ui #sidebar-menu li.mm-active > a.has-arrow svg { color: #035167 !important; stroke: #035167 !important; } /* ── Sidebar user footer ── */ html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user, html[data-theme="emirates"] .phase-ui .phase-sidebar-user { margin: 0 10px 12px; padding: 0.85rem; border-radius: 14px; background: linear-gradient(180deg, #f4fbfc 0%, #ffffff 100%); border: 1px solid rgba(3, 81, 103, 0.08); box-shadow: 0 4px 14px rgba(3, 81, 103, 0.05); } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-avatar, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-avatar { background: linear-gradient(135deg, #035167 0%, #25abb4 100%); color: #fff; } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-info, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-info { color: #475569; } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-info strong, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-info strong { color: #0b2530; } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-info span, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-info span { color: #64748b; } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-actions a, html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-actions button, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-actions a, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-actions button { border: 1px solid #dbeafe; background: #ffffff; color: #64748b; } html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-actions a:hover, html[data-theme="emirates"] .phase-one-admin .phase-sidebar-user-actions button:hover, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-actions a:hover, html[data-theme="emirates"] .phase-ui .phase-sidebar-user-actions button:hover { color: #035167; border-color: #25abb4; background: #e1f7fb; } /* ── Page content + components ── */ html[data-theme="emirates"] .phase-one-admin .page-content, html[data-theme="emirates"] .phase-ui .page-content { background: radial-gradient(1100px 560px at 88% -8%, rgba(37, 171, 180, 0.12), transparent 58%), linear-gradient(180deg, #f4fcfe 0%, #e1f7fb 100%); } html[data-theme="emirates"] .phase-one-admin .phase-hero h1, html[data-theme="emirates"] .phase-ui .phase-hero h1, html[data-theme="emirates"] .phase-one-admin .page-title-box h4, html[data-theme="emirates"] .phase-ui .page-title-box h4 { color: #0b2530; } html[data-theme="emirates"] .phase-one-admin .phase-hero p, html[data-theme="emirates"] .phase-ui .phase-hero p, html[data-theme="emirates"] .phase-one-admin .page-title-box p, html[data-theme="emirates"] .phase-ui .page-title-box p { color: #4a6570; } html[data-theme="emirates"] .phase-one-admin .btn-primary, html[data-theme="emirates"] .phase-ui .btn-primary { background: linear-gradient(120deg, #035167 0%, #25abb4 100%); border-color: #035167; } html[data-theme="emirates"] .phase-one-admin .btn-primary:hover, html[data-theme="emirates"] .phase-ui .btn-primary:hover, html[data-theme="emirates"] .phase-one-admin .phase-button.dark, html[data-theme="emirates"] .phase-ui .phase-button.dark { background: linear-gradient(120deg, #035167 0%, #25abb4 100%); border-color: #035167; } html[data-theme="emirates"] .phase-one-admin .phase-button.dark:hover, html[data-theme="emirates"] .phase-ui .phase-button.dark:hover, html[data-theme="emirates"] .phase-one-admin .btn-primary:hover, html[data-theme="emirates"] .phase-ui .btn-primary:hover { box-shadow: 0 10px 20px rgba(37, 171, 180, 0.28); } html[data-theme="emirates"] .phase-one-admin .phase-panel::before, html[data-theme="emirates"] .phase-one-admin .phase-card::before, html[data-theme="emirates"] .phase-ui .phase-panel::before, html[data-theme="emirates"] .phase-ui .phase-card::before { background: linear-gradient(90deg, transparent, rgba(37, 171, 180, 0.75), transparent); } html[data-theme="emirates"] .phase-one-admin .phase-card, html[data-theme="emirates"] .phase-one-admin .phase-panel, html[data-theme="emirates"] .phase-ui .phase-card, html[data-theme="emirates"] .phase-ui .phase-panel { box-shadow: 0 10px 26px rgba(3, 81, 103, 0.06); } html[data-theme="emirates"] .phase-one-admin .phase-breadcrumb a, html[data-theme="emirates"] .phase-ui .phase-breadcrumb a { color: #25abb4; } html[data-theme="emirates"] .phase-one-admin .phase-progress-fill, html[data-theme="emirates"] .phase-ui .phase-progress-fill { background: linear-gradient(90deg, #035167, #25abb4); } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .phase-brand-logo-lg, html[data-theme="emirates"] .phase-ui .navbar-brand-box .phase-brand-logo-lg { max-width: min(200px, calc(100% - 12px)); max-height: 54px; } html[data-theme="emirates"] body[data-sidebar-size="md"] .phase-one-admin .navbar-brand-box, html[data-theme="emirates"] body[data-sidebar-size="md"] .phase-ui .navbar-brand-box { width: var(--phase-sidebar-md, 160px) !important; } html[data-theme="emirates"] body[data-sidebar-size="sm"] .phase-one-admin .navbar-brand-box, html[data-theme="emirates"] body[data-sidebar-size="sm"] .phase-ui .navbar-brand-box { width: var(--phase-sidebar-sm, 70px) !important; padding: 8px 6px !important; } html[data-theme="emirates"] .phase-one-admin .navbar-brand-box .phase-brand-logo-sm, html[data-theme="emirates"] .phase-ui .navbar-brand-box .phase-brand-logo-sm { max-width: 44px; max-height: 44px; } @media (max-width: 991.98px) { html[data-theme="emirates"] .phase-one-admin .navbar-brand-box, html[data-theme="emirates"] .phase-ui .navbar-brand-box { background: linear-gradient(180deg, #f4fbfc 0%, #ffffff 100%) !important; border-right: none !important; } } /* ── Dashboard tabs + pills (replace classic dark/red active) ── */ html[data-theme="emirates"] .phase-one-admin .phase-tab-strip, html[data-theme="emirates"] .phase-ui .phase-tab-strip { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(3, 81, 103, 0.1); box-shadow: 0 8px 24px rgba(3, 81, 103, 0.06); backdrop-filter: blur(8px); } html[data-theme="emirates"] .phase-one-admin .phase-tab-strip .phase-tab, html[data-theme="emirates"] .phase-ui .phase-tab-strip .phase-tab { color: #475569; } html[data-theme="emirates"] .phase-one-admin .phase-tab-strip .phase-tab:hover, html[data-theme="emirates"] .phase-ui .phase-tab-strip .phase-tab:hover { color: #035167; background: rgba(37, 171, 180, 0.1); } html[data-theme="emirates"] .phase-one-admin .phase-tab-strip .phase-tab.active, html[data-theme="emirates"] .phase-ui .phase-tab-strip .phase-tab.active { background: linear-gradient(135deg, #035167 0%, #25abb4 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 8px 18px rgba(37, 171, 180, 0.28) !important; } html[data-theme="emirates"] .phase-one-admin .phase-tab-strip .phase-tab.active i, html[data-theme="emirates"] .phase-ui .phase-tab-strip .phase-tab.active i { color: #ffffff !important; } html[data-theme="emirates"] .phase-one-admin .phase-page-pill.active, html[data-theme="emirates"] .phase-ui .phase-page-pill.active { background: linear-gradient(135deg, #035167 0%, #25abb4 100%) !important; border-color: #035167 !important; } /* Dashboard main tabs use a sliding indicator — keep active tab transparent */ html[data-theme="emirates"] .phase-one-admin .dashboard-main-tab-strip .dashboard-tab-indicator, html[data-theme="emirates"] .phase-ui .dashboard-main-tab-strip .dashboard-tab-indicator { background: linear-gradient(135deg, #035167 0%, #25abb4 100%); border: 1px solid rgba(37, 171, 180, 0.35); box-shadow: 0 8px 18px rgba(37, 171, 180, 0.28); } html[data-theme="emirates"] .phase-one-admin .dashboard-main-tab-strip .phase-tab.active, html[data-theme="emirates"] .phase-ui .dashboard-main-tab-strip .phase-tab.active { background: transparent !important; border: none !important; box-shadow: none !important; } html[data-theme="emirates"] .phase-one-admin .dashboard-main-tab-strip .phase-tab:not(.active):hover, html[data-theme="emirates"] .phase-ui .dashboard-main-tab-strip .phase-tab:not(.active):hover { color: #035167; background: rgba(37, 171, 180, 0.1); transform: translateY(-1px); }