/* ============================================ STARSHIP ADMIN THEME - Slick UI Enhancements ============================================ Features: - Colorful sidebar navigation icons - Modern gradient buttons with hover effects - Light/Dark theme support (auto-detects system preference) - Readable text on any background ============================================ */ /* ============================================ CSS VARIABLES - Theme Colors ============================================ */ :root { /* Primary palette */ --admin-primary: #4a90d9; --admin-primary-hover: #357abd; --admin-primary-light: rgba(74, 144, 217, 0.1); /* Success/Create actions */ --admin-success: #10b981; --admin-success-hover: #059669; --admin-success-light: rgba(16, 185, 129, 0.1); /* Warning */ --admin-warning: #f59e0b; --admin-warning-hover: #d97706; --admin-warning-light: rgba(245, 158, 11, 0.1); /* Danger/Delete actions */ --admin-danger: #ef4444; --admin-danger-hover: #dc2626; --admin-danger-light: rgba(239, 68, 68, 0.1); /* Info */ --admin-info: #06b6d4; --admin-info-hover: #0891b2; --admin-info-light: rgba(6, 182, 212, 0.1); /* Secondary/Neutral */ --admin-secondary: #6b7280; --admin-secondary-hover: #4b5563; --admin-secondary-light: rgba(107, 114, 128, 0.1); /* Sidebar icon colors */ --icon-home: #f59e0b; --icon-inventory: #8b5cf6; --icon-prefetch: #06b6d4; --icon-import: #ec4899; --icon-products: #10b981; --icon-mappings: #6366f1; --icon-forex: #f97316; --icon-orders: #3b82f6; --icon-payouts: #14b8a6; --icon-clients: #8b5cf6; --icon-vendors: #f43f5e; --icon-providers: #0ea5e9; --icon-guide: #a855f7; --icon-history: #64748b; --icon-jobs: #84cc16; --icon-profile: #6366f1; --icon-admin-users: #f59e0b; --icon-logout: #ef4444; /* Theme base colors */ --admin-bg: #f4f5f7; --admin-card-bg: #ffffff; --admin-text: #1f2937; --admin-text-muted: #6b7280; --admin-border: #e5e7eb; --admin-shadow: rgba(0, 0, 0, 0.1); --admin-shadow-hover: rgba(0, 0, 0, 0.15); } /* Dark theme tokens — the single source. Dark applies ONLY when the admin has explicitly toggled it (data-theme="dark" is stamped by the bootstrap in views/layouts/admin/base.jet). Light is the default; OS preference is not followed. */ :root[data-theme="dark"] { --admin-bg: #0f172a; --admin-card-bg: #1e293b; --admin-text: #f1f5f9; --admin-text-muted: #94a3b8; --admin-border: #334155; --admin-shadow: rgba(0, 0, 0, 0.4); --admin-shadow-hover: rgba(0, 0, 0, 0.5); } /* --------------------------------------------------------------------------- BOOTSTRAP 5.3.2 BRIDGE (added with the data-bs-theme switch-on) assets/css/style.css:8494 ships Bootstrap's genuine [data-bs-theme=dark] block, which the bootstrap in views/layouts/admin/base.jet now activates. Left alone it disagrees with us on every surface: Bootstrap paints --bs-body-bg #212529 and --bs-secondary-bg #343a40, while our components use #0f172a / #1e293b — two different dark greys on the same page. This block re-points Bootstrap's surface tokens at ours so there is exactly one palette. Brand/accent hues (--bs-primary and the Aurora scale, style.css:8370) are deliberately NOT re-pointed here: fills and text need different lightness on a dark ground, so they are handled as separate tokens in the palette pass. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bs-body-bg: var(--admin-bg); --bs-body-bg-rgb: 15, 23, 42; --bs-body-color: var(--admin-text); --bs-body-color-rgb: 241, 245, 249; --bs-emphasis-color: var(--admin-text); --bs-emphasis-color-rgb: 241, 245, 249; --bs-secondary-color: var(--admin-text-muted); --bs-secondary-bg: var(--admin-card-bg); --bs-secondary-bg-rgb: 30, 41, 59; --bs-tertiary-color: var(--admin-text-muted); --bs-tertiary-bg: #273449; --bs-tertiary-bg-rgb: 39, 52, 73; --bs-border-color: var(--admin-border); } /* Dark mode - Global overrides */ :root[data-theme="dark"], :root[data-theme="dark"] body { background-color: var(--admin-bg) !important; color: var(--admin-text); } :root[data-theme="dark"] .main-panel { background-color: var(--admin-bg) !important; } :root[data-theme="dark"] .content-wrapper { background-color: var(--admin-bg) !important; } :root[data-theme="dark"] .card { background-color: var(--admin-card-bg) !important; border-color: var(--admin-border) !important; box-shadow: 0 4px 6px var(--admin-shadow) !important; } :root[data-theme="dark"] .card-title, :root[data-theme="dark"] .card-header, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--admin-text) !important; } :root[data-theme="dark"] .text-muted { color: var(--admin-text-muted) !important; } :root[data-theme="dark"] .table { color: var(--admin-text); } :root[data-theme="dark"] .table thead th { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; color: #e2e8f0 !important; border-color: #475569 !important; } :root[data-theme="dark"] .table tbody tr { background-color: var(--admin-card-bg); border-color: var(--admin-border); } :root[data-theme="dark"] .table tbody tr:hover { background-color: #334155 !important; } :root[data-theme="dark"] .table tbody td { border-color: var(--admin-border); color: var(--admin-text); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: #1e293b !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: #1e293b !important; border-color: #3b82f6 !important; color: var(--admin-text) !important; } :root[data-theme="dark"] .form-control::placeholder { color: #64748b !important; } :root[data-theme="dark"] .dropdown-menu { background-color: #1e293b !important; border-color: var(--admin-border) !important; } :root[data-theme="dark"] .dropdown-item { color: var(--admin-text) !important; } :root[data-theme="dark"] .dropdown-item:hover { background-color: #334155 !important; } :root[data-theme="dark"] .modal-content { background-color: var(--admin-card-bg) !important; border-color: var(--admin-border) !important; } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--admin-border) !important; } :root[data-theme="dark"] .badge.bg-light { background-color: #334155 !important; color: var(--admin-text) !important; } :root[data-theme="dark"] .border { border-color: var(--admin-border) !important; } :root[data-theme="dark"] .bg-white { background-color: var(--admin-card-bg) !important; } :root[data-theme="dark"] .bg-light { background-color: #1e293b !important; } /* Dark mode sidebar adjustments */ :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important; } :root[data-theme="dark"] .navbar { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; border-color: var(--admin-border) !important; } /* Dark mode - User dropdown specific */ :root[data-theme="dark"] .navbar .user-dropdown .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-header.text-center { background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important; border-color: #334155 !important; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-header.text-center::before { background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%); } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-header .fw-semibold, :root[data-theme="dark"] .navbar .user-dropdown .dropdown-header p { color: #f1f5f9 !important; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-header .text-muted { color: #94a3b8 !important; } :root[data-theme="dark"] .navbar .user-dropdown .toggle-section { background: #0f172a; border-color: #334155; } :root[data-theme="dark"] .navbar .user-dropdown .toggle-row { background: #1e293b; } :root[data-theme="dark"] .navbar .user-dropdown .toggle-row:hover { background-color: #334155 !important; } :root[data-theme="dark"] .navbar .user-dropdown .toggle-row .toggle-label { color: #e2e8f0; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-item { color: #e2e8f0 !important; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-item:hover { background-color: #334155 !important; color: #f1f5f9 !important; } :root[data-theme="dark"] .navbar .user-dropdown .dropdown-divider { border-color: #334155 !important; } /* Dark mode - Notification dropdown specific */ :root[data-theme="dark"] .navbar .notification-dropdown { background-color: #1e293b !important; border-color: #334155 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .dropdown-header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; border-color: #334155 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .dropdown-header .fw-semibold { color: #f1f5f9 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .notification-items { background: #1e293b; } :root[data-theme="dark"] .navbar .notification-dropdown .notification-item { background-color: #1e293b !important; border-color: #334155 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .notification-item:hover { background-color: #334155 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .notification-item.bg-light, :root[data-theme="dark"] .navbar .notification-dropdown .notification-item.unread { background-color: rgba(59, 130, 246, 0.15) !important; border-left-color: #60a5fa; } :root[data-theme="dark"] .navbar .notification-dropdown .notification-item .fw-semibold { color: #f1f5f9 !important; } :root[data-theme="dark"] .navbar .notification-dropdown .dropdown-footer { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; } /* ============================================ COLORFUL SIDEBAR NAVIGATION ICONS ============================================ */ /* Base icon enhancement */ .sidebar .nav-link .menu-icon { transition: all 0.2s ease; } /* Landing/Home */ .sidebar .nav-item a[href="/admin/landing"] .menu-icon { color: var(--icon-home) !important; } /* Inventory section */ .sidebar .nav-item a[href="/admin/inventory"] .menu-icon { color: var(--icon-inventory) !important; } .sidebar .nav-item a[href="/admin/prefetch"] .menu-icon { color: var(--icon-prefetch) !important; } /* Catalog section */ .sidebar .nav-item a[href="/admin/products"] .menu-icon { color: var(--icon-products) !important; } .sidebar .nav-item a[href="/admin/product-matches"] .menu-icon { color: var(--icon-mappings) !important; } .sidebar .nav-item a[href="/admin/forex"] .menu-icon { color: var(--icon-forex) !important; } /* Orders section */ .sidebar .nav-item a[href="/admin/orders"] .menu-icon { color: var(--icon-orders) !important; } .sidebar .nav-item a[href="/admin/payouts/list"] .menu-icon { color: var(--icon-payouts) !important; } /* Partners section */ .sidebar .nav-item a[href="/admin/clients"] .menu-icon { color: var(--icon-clients) !important; } .sidebar .nav-item a[href="/admin/vendors"] .menu-icon { color: var(--icon-vendors) !important; } .sidebar .nav-item a[href="/admin/payouts/providers"] .menu-icon { color: var(--icon-providers) !important; } /* Help & Learning */ .sidebar .nav-item a[href="/admin/guide"] .menu-icon { color: var(--icon-guide) !important; } /* Account section */ .sidebar .nav-item a[href="/admin/admin-users"] .menu-icon { color: var(--icon-admin-users) !important; } .sidebar .nav-item a[href="/admin/history"] .menu-icon { color: var(--icon-history) !important; } .sidebar .nav-item a[href="/admin/job-executions"] .menu-icon { color: var(--icon-jobs) !important; } .sidebar .nav-item a[href="/admin/profile"] .menu-icon { color: var(--icon-profile) !important; } /* Logout */ .sidebar .nav-item form[hx-post="/admin/logout"] .menu-icon { color: var(--icon-logout) !important; } /* Hover effects for sidebar icons */ .sidebar .nav-item:hover .menu-icon { transform: scale(1.15); } .sidebar .nav-item.active .menu-icon { transform: scale(1.1); filter: brightness(1.2); } /* ============================================ SLICK MODERN BUTTONS ============================================ */ /* Base button improvements */ .btn { font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.2s ease; border: none; position: relative; overflow: hidden; } .btn:active { transform: scale(0.98); } /* Primary Button - Blue gradient */ .btn-primary { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(74, 144, 217, 0.35); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #357abd 0%, #2868a5 100%); box-shadow: 0 4px 12px rgba(74, 144, 217, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-primary:disabled, .btn-primary.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Success Button - Green gradient (Create/Add actions) */ .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35); } .btn-success:hover, .btn-success:focus { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-success:disabled, .btn-success.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Danger Button - Red gradient (Delete/Remove actions) */ .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35); } .btn-danger:hover, .btn-danger:focus { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-danger:disabled, .btn-danger.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Warning Button - Orange/Yellow gradient */ .btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35); } .btn-warning:hover, .btn-warning:focus { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-warning:disabled, .btn-warning.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Info Button - Cyan gradient */ .btn-info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35); } .btn-info:hover, .btn-info:focus { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-info:disabled, .btn-info.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Secondary Button - Gray gradient */ .btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(107, 114, 128, 0.35); } .btn-secondary:hover, .btn-secondary:focus { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); box-shadow: 0 4px 12px rgba(107, 114, 128, 0.45); transform: translateY(-1px); color: #ffffff !important; } .btn-secondary:disabled, .btn-secondary.disabled { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: none; opacity: 0.7; } /* Dark Button */ .btn-dark { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: #ffffff !important; box-shadow: 0 2px 8px rgba(31, 41, 55, 0.35); } .btn-dark:hover, .btn-dark:focus { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); box-shadow: 0 4px 12px rgba(31, 41, 55, 0.45); transform: translateY(-1px); color: #ffffff !important; } /* Light Button */ .btn-light { background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%); color: #374151 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; } .btn-light:hover, .btn-light:focus { background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); color: #1f2937 !important; } /* ============================================ OUTLINE BUTTONS - Modern style ============================================ */ .btn-outline-primary { background: transparent; color: var(--admin-primary); border: 2px solid var(--admin-primary); box-shadow: none; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--admin-primary); color: #ffffff !important; box-shadow: 0 4px 12px rgba(74, 144, 217, 0.35); transform: translateY(-1px); } .btn-outline-success { background: transparent; color: var(--admin-success); border: 2px solid var(--admin-success); box-shadow: none; } .btn-outline-success:hover, .btn-outline-success:focus { background: var(--admin-success); color: #ffffff !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); transform: translateY(-1px); } .btn-outline-danger { background: transparent; color: var(--admin-danger); border: 2px solid var(--admin-danger); box-shadow: none; } .btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--admin-danger); color: #ffffff !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); transform: translateY(-1px); } .btn-outline-warning { background: transparent; color: var(--admin-warning); border: 2px solid var(--admin-warning); box-shadow: none; } .btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--admin-warning); color: #ffffff !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35); transform: translateY(-1px); } .btn-outline-info { background: transparent; color: var(--admin-info); border: 2px solid var(--admin-info); box-shadow: none; } .btn-outline-info:hover, .btn-outline-info:focus { background: var(--admin-info); color: #ffffff !important; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35); transform: translateY(-1px); } .btn-outline-secondary { background: transparent; color: var(--admin-secondary); border: 2px solid var(--admin-secondary); box-shadow: none; } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--admin-secondary); color: #ffffff !important; box-shadow: 0 4px 12px rgba(107, 114, 128, 0.35); transform: translateY(-1px); } .btn-outline-dark { background: transparent; color: #374151; border: 2px solid #374151; box-shadow: none; } .btn-outline-dark:hover, .btn-outline-dark:focus { background: #374151; color: #ffffff !important; box-shadow: 0 4px 12px rgba(55, 65, 81, 0.35); transform: translateY(-1px); } .btn-outline-light { background: transparent; color: #6b7280; border: 2px solid #e5e7eb; box-shadow: none; } .btn-outline-light:hover, .btn-outline-light:focus { background: #f9fafb; color: #374151 !important; border-color: #d1d5db; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } /* ============================================ BUTTON SIZES ============================================ */ .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; border-radius: 6px; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 10px; } /* ============================================ BUTTON LOADING STATES - CRUD UX ============================================ */ /* Loading state for buttons during async operations */ .btn-loading { position: relative; pointer-events: none; opacity: 0.75; cursor: wait !important; } .btn-loading .spinner-border { display: inline-block; width: 0.875rem; height: 0.875rem; vertical-align: -0.125em; border-width: 0.15em; } .btn-loading .btn-text { display: inline; } .btn-loading:disabled { opacity: 0.75; } /* Prevent layout shift by maintaining min-width */ .btn[data-loading-text] { min-width: fit-content; } /* HTMX request indicator */ .htmx-request { pointer-events: none; opacity: 0.75; } .htmx-request::after { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-left: 0.5rem; vertical-align: -0.125em; border: 0.125em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spinner 0.75s linear infinite; } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* Double-click protected indicator (visual feedback) */ .btn[data-double-click-protected]:active { transform: scale(0.98); } /* ============================================ ICON BUTTONS - Enhanced ============================================ */ .btn .mdi, .btn .fa, .btn i { transition: transform 0.2s ease; } .btn:hover .mdi, .btn:hover .fa, .btn:hover i { transform: scale(1.1); } /* Icon-only buttons */ .btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .btn-icon.btn-sm { width: 32px; height: 32px; border-radius: 6px; } .btn-icon.btn-lg { width: 48px; height: 48px; border-radius: 10px; } /* ============================================ SPECIAL BUTTON VARIANTS ============================================ */ /* Soft/Light background buttons */ .btn-soft-primary { background: var(--admin-primary-light); color: var(--admin-primary); border: none; } .btn-soft-primary:hover { background: var(--admin-primary); color: #ffffff !important; } .btn-soft-success { background: var(--admin-success-light); color: var(--admin-success); border: none; } .btn-soft-success:hover { background: var(--admin-success); color: #ffffff !important; } .btn-soft-danger { background: var(--admin-danger-light); color: var(--admin-danger); border: none; } .btn-soft-danger:hover { background: var(--admin-danger); color: #ffffff !important; } .btn-soft-warning { background: var(--admin-warning-light); color: var(--admin-warning); border: none; } .btn-soft-warning:hover { background: var(--admin-warning); color: #ffffff !important; } .btn-soft-info { background: var(--admin-info-light); color: var(--admin-info); border: none; } .btn-soft-info:hover { background: var(--admin-info); color: #ffffff !important; } /* ============================================ BUTTON GROUPS ============================================ */ .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-radius: 8px 0 0 8px; } .btn-group .btn:last-child { border-radius: 0 8px 8px 0; } .btn-group .btn:only-child { border-radius: 8px; } /* ============================================ FORM CONTROLS ENHANCEMENT ============================================ */ .form-control { border-radius: 8px; border: 1px solid var(--admin-border); transition: all 0.2s ease; } .form-control:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px var(--admin-primary-light); } .form-select { border-radius: 8px; border: 1px solid var(--admin-border); transition: all 0.2s ease; } .form-select:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px var(--admin-primary-light); } /* ============================================ BADGES ENHANCEMENT ============================================ */ .badge { font-weight: 500; padding: 0.4em 0.65em; border-radius: 6px; } .badge.bg-primary { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%) !important; } .badge.bg-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; } .badge.bg-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; } .badge.bg-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #ffffff !important; } .badge.bg-info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; } .badge.bg-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; } /* ============================================ CARDS ENHANCEMENT ============================================ */ .card { border-radius: 12px; border: 1px solid var(--admin-border); box-shadow: 0 1px 3px var(--admin-shadow); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 2px 6px var(--admin-shadow); } .card-header { border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--admin-border); } /* ============================================ TABLE ENHANCEMENTS ============================================ */ .table { border-radius: 8px; overflow: visible; /* Changed from hidden to allow dropdowns to overflow */ table-layout: fixed; /* Fix column widths to prevent resizing */ } /* Ensure dropdown menus in tables appear above other content */ .table .dropdown-menu { z-index: 1050; } /* Dark gradient table headers - high specificity to override all template styles */ .table thead th, .table.select-table thead th, .table.table-hover thead th, .table.table-striped thead th, .card .table thead th, .card-body .table thead th, .table-responsive .table thead th, table.table thead th { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; border-bottom: 2px solid #475569 !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 12px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sortable table headers */ .table thead th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 32px; /* Space for icons - reduced from 48px */ } .table thead th.sortable:hover { background: linear-gradient(135deg, #334155 0%, #475569 100%) !important; color: #93c5fd; } /* Static sortable indicator icon (twin-sided arrow) - always visible on right */ .table thead th.sortable::after { content: '\F05D9'; /* mdi-swap-vertical - twin-sided arrow */ font-family: 'Material Design Icons'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #94a3b8; opacity: 0.5; } /* Active sort direction indicator (single arrow) - only when sorted */ .table thead th.sortable::before { content: ''; font-family: 'Material Design Icons'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #fbbf24; opacity: 0; } /* Ascending sort - clean up arrow */ .table thead th.sortable.sort-asc::before { content: '\F0143'; /* mdi-chevron-up */ opacity: 1; } /* Descending sort - clean down arrow */ .table thead th.sortable.sort-desc::before { content: '\F0140'; /* mdi-chevron-down */ opacity: 1; } /* Active sorted column background */ .table thead th.sortable.sort-asc, .table thead th.sortable.sort-desc { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important; color: #ffffff; } /* Dim the static icon when column is actively sorted */ .table thead th.sortable.sort-asc::after, .table thead th.sortable.sort-desc::after { opacity: 0.3; } /* Sortable-local (AJAX tables) - same styling as sortable */ .table thead th.sortable-local { cursor: pointer; user-select: none; position: relative; padding-right: 32px; /* Space for icons - reduced from 48px */ } .table thead th.sortable-local:hover { background: linear-gradient(135deg, #334155 0%, #475569 100%) !important; color: #93c5fd; } /* Static sortable-local indicator icon (twin-sided arrow) - always visible on right */ .table thead th.sortable-local::after { content: '\F05D9'; /* mdi-swap-vertical - twin-sided arrow */ font-family: 'Material Design Icons'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #94a3b8; opacity: 0.5; } /* Active sort direction indicator (single arrow) - only when sorted */ .table thead th.sortable-local::before { content: ''; font-family: 'Material Design Icons'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #fbbf24; opacity: 0; } /* Ascending sort - clean up arrow */ .table thead th.sortable-local.sort-asc::before { content: '\F0143'; /* mdi-chevron-up */ opacity: 1; } /* Descending sort - clean down arrow */ .table thead th.sortable-local.sort-desc::before { content: '\F0140'; /* mdi-chevron-down */ opacity: 1; } /* Active sorted column background */ .table thead th.sortable-local.sort-asc, .table thead th.sortable-local.sort-desc { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important; color: #ffffff; } /* Dim the static icon when column is actively sorted */ .table thead th.sortable-local.sort-asc::after, .table thead th.sortable-local.sort-desc::after { opacity: 0.3; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(248, 250, 252, 0.5); } .table tbody tr { transition: background-color 0.15s ease; } .table tbody tr:hover { background-color: var(--admin-primary-light) !important; } .table tbody td { padding: 12px 16px; vertical-align: middle; } /* ============================================ ALERTS ENHANCEMENT ============================================ */ .alert { border-radius: 10px; border: none; box-shadow: 0 2px 8px var(--admin-shadow); } .alert-primary { background: linear-gradient(135deg, rgba(74, 144, 217, 0.15) 0%, rgba(53, 122, 189, 0.15) 100%); color: #1e40af; } .alert-success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%); color: #065f46; } .alert-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%); color: #991b1b; } .alert-warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #78350f; } .alert-warning strong, .alert-warning .mdi, .alert-warning i, .alert-warning .fa, .alert-warning p, .alert-warning span, .alert-warning div { color: #78350f !important; } .alert-info { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%); color: #0e7490; } /* ============================================ MODAL ENHANCEMENTS ============================================ */ .modal-content { border-radius: 16px; border: none; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .modal-header { border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--admin-border); } .modal-footer { border-radius: 0 0 16px 16px; border-top: 1px solid var(--admin-border); } /* ============================================ PAGINATION ENHANCEMENT ============================================ */ .pagination { gap: 4px; margin: 0; } .pagination .page-item { margin: 0; } .pagination .page-link { border-radius: 8px; margin: 0; border: 1px solid #e5e7eb; color: #4b5563; transition: all 0.2s ease; padding: 8px 14px; font-weight: 500; font-size: 0.875rem; min-width: 38px; text-align: center; display: flex; align-items: center; justify-content: center; } .pagination .page-link:hover { background: #f3f4f6; border-color: #d1d5db; color: #1f2937; transform: translateY(-1px); } .pagination .page-item.active .page-link { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); border-color: transparent; color: #ffffff; box-shadow: 0 2px 8px rgba(74, 144, 217, 0.35); } .pagination .page-item.active .page-link:hover { background: linear-gradient(135deg, #357abd 0%, #2868a5 100%); transform: translateY(-1px); } .pagination .page-item.disabled .page-link { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } /* Prev/Next button icons */ .pagination .page-link .mdi { font-size: 18px; line-height: 1; } /* First/Last buttons with double arrows */ .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { font-weight: 600; } /* Pagination info text */ .pagination-info { color: #6b7280; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; } .pagination-info strong { color: #1f2937; } /* ============================================ DROPDOWN ENHANCEMENT ============================================ */ .dropdown-menu { border-radius: 12px; border: 1px solid var(--admin-border); box-shadow: 0 10px 40px var(--admin-shadow-hover); padding: 8px; } .dropdown-item { border-radius: 8px; padding: 8px 12px; transition: all 0.15s ease; } .dropdown-item:hover { background: var(--admin-primary-light); color: var(--admin-primary); } .dropdown-item.active, .dropdown-item:active { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); color: #ffffff; } /* ============================================ TOOLTIP ENHANCEMENT ============================================ */ /* Keep tooltips above table content, sticky headers and modals (which sit at ~1080). Combined with container:'body' in the JS init, this prevents clipping inside overflow:hidden / overflow-x:auto / transformed table containers. */ .tooltip { z-index: 9999 !important; } .tooltip-inner { border-radius: 8px; padding: 8px 12px; background: #1f2937; font-size: 0.8125rem; } /* ============================================ LOADING/SPINNER BUTTONS ============================================ */ .btn-loading { position: relative; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: btn-spinner 0.6s linear infinite; } .btn-loading > * { visibility: hidden; } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* ============================================ NAVBAR ENHANCEMENTS ============================================ */ .navbar { box-shadow: 0 1px 3px var(--admin-shadow); } /* Navbar hide on scroll - target fixed-top navbar specifically */ nav.navbar.fixed-top { transition: transform 0.3s ease-in-out !important; will-change: transform; } nav.navbar.fixed-top.navbar-hidden { transform: translateY(-100%) !important; pointer-events: none; } /* Show navbar on hover near top of page */ .navbar-trigger-zone { position: fixed; top: 0; left: 0; right: 0; height: 20px; z-index: 10000; pointer-events: auto; /* background: rgba(255,0,0,0.1); */ /* Uncomment to debug */ } /* ============================================ NAVBAR DROPDOWNS - MODERN CLIENT-APP STYLE Matches the frontend/client Material-UI look ============================================ */ /* Base dropdown menu - clean modern style */ .navbar .navbar-menu-wrapper .dropdown-menu, .navbar .user-dropdown .dropdown-menu, .navbar .nav-item.dropdown .dropdown-menu.navbar-dropdown, .navbar .nav-item.dropdown .dropdown-menu { min-width: 280px; padding: 8px 0; background-color: #ffffff !important; background-image: none !important; color: #1f2937 !important; border: none !important; border-radius: 12px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; overflow: hidden; animation: dropdownFadeIn 0.15s ease-out; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* User dropdown - modern spacious design */ .navbar .user-dropdown .dropdown-menu { min-width: 340px; border-radius: 16px !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08) !important; border: 1px solid #e5e7eb !important; overflow: hidden; padding: 0 !important; } /* Notification dropdown - modern, spacious design */ .navbar .notification-dropdown { width: 420px !important; max-height: 520px; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08) !important; border: 1px solid #e5e7eb !important; overflow: hidden; } /* Dropdown header - clean flat style */ .navbar .dropdown-menu .dropdown-header { padding: 16px 20px; margin: 0; background: transparent !important; border-bottom: 1px solid #f3f4f6; color: #1f2937 !important; } /* User profile header in dropdown - modern card style */ .navbar .user-dropdown .dropdown-menu .dropdown-header.text-center { padding: 20px 20px 16px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important; border-bottom: 1px solid #e5e7eb; position: relative; } /* Decorative gradient accent at top */ .navbar .user-dropdown .dropdown-menu .dropdown-header.text-center::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); } /* Hide avatar icon in dropdown */ .navbar .user-dropdown .dropdown-menu .dropdown-header i.mdi-account-circle { display: none !important; } .navbar .user-dropdown .dropdown-menu .dropdown-header p, .navbar .user-dropdown .dropdown-menu .dropdown-header .fw-semibold, .navbar .user-dropdown .dropdown-menu .dropdown-header span { color: #1e293b !important; font-size: 15px; font-weight: 600; } .navbar .user-dropdown .dropdown-menu .dropdown-header p.text-muted, .navbar .user-dropdown .dropdown-menu .dropdown-header .fw-light { color: #64748b !important; font-size: 13px; font-weight: 400; } /* Dropdown items - modern hover effect */ .navbar .dropdown-menu .dropdown-item { padding: 10px 20px; min-height: 44px; color: #374151 !important; background-color: transparent !important; background-image: none !important; font-size: 14px; font-weight: 450; display: flex; align-items: center; gap: 12px; transition: all 0.15s ease; border: none; border-radius: 0; margin: 0; } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus { background-color: #f3f4f6 !important; background-image: none !important; color: #1f2937 !important; } .navbar .dropdown-menu .dropdown-item:active { background-color: #e5e7eb !important; color: #1f2937 !important; } /* Dropdown item icons - consistent size and color */ .navbar .dropdown-menu .dropdown-item i, .navbar .dropdown-menu .dropdown-item i.dropdown-item-icon { font-size: 20px !important; width: 24px; text-align: center; color: #6b7280 !important; transition: color 0.15s ease; } .navbar .dropdown-menu .dropdown-item:hover i, .navbar .dropdown-menu .dropdown-item:hover i.dropdown-item-icon { color: #4a90d9 !important; } /* Preserve specific icon colors */ .navbar .dropdown-menu .dropdown-item i.text-warning { color: #f59e0b !important; } .navbar .dropdown-menu .dropdown-item i.text-primary { color: #4a90d9 !important; } .navbar .dropdown-menu .dropdown-item i.text-danger, .navbar .dropdown-menu .dropdown-item i.mdi-power { color: #ef4444 !important; } /* Dropdown divider - subtle line */ .navbar .dropdown-menu .dropdown-divider { margin: 8px 0; border-color: #f3f4f6 !important; opacity: 1; } /* Footer section */ .navbar .dropdown-menu .dropdown-footer { padding: 12px 20px; background: #fafafa; border-top: 1px solid #f3f4f6; } .navbar .dropdown-menu .dropdown-footer a, .navbar .dropdown-menu .text-muted { color: #6b7280 !important; font-size: 13px; } .navbar .dropdown-menu .dropdown-footer a:hover { color: #4a90d9 !important; } .navbar .dropdown-menu a.text-primary { color: #4a90d9 !important; font-weight: 500; } .navbar .dropdown-menu a.text-primary:hover { color: #2563eb !important; } /* Notification dropdown specific - header */ .navbar .dropdown-menu.notification-dropdown .dropdown-header { padding: 18px 20px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; } .navbar .dropdown-menu.notification-dropdown .dropdown-header .fw-semibold { font-size: 15px; font-weight: 600; color: #1e293b !important; letter-spacing: -0.01em; } .navbar .dropdown-menu.notification-dropdown .dropdown-header a.text-primary { font-size: 13px; font-weight: 500; color: #3b82f6 !important; text-decoration: none; transition: color 0.15s ease; } .navbar .dropdown-menu.notification-dropdown .dropdown-header a.text-primary:hover { color: #1d4ed8 !important; } /* Notification items container */ .navbar .dropdown-menu.notification-dropdown .notification-items { max-height: 380px; overflow-y: auto; background: #ffffff; } /* Individual notification items */ .navbar .dropdown-menu.notification-dropdown .notification-item { padding: 14px 20px; background-color: #ffffff !important; border-bottom: 1px solid #f1f5f9; transition: background-color 0.15s ease; } .navbar .dropdown-menu.notification-dropdown .notification-item:hover { background-color: #f8fafc !important; } .navbar .dropdown-menu.notification-dropdown .notification-item:last-child { border-bottom: none; } /* Unread notification styling */ .navbar .dropdown-menu.notification-dropdown .notification-item.bg-light, .navbar .dropdown-menu.notification-dropdown .notification-item.unread { background-color: #eff6ff !important; border-left: 3px solid #3b82f6; } .navbar .dropdown-menu.notification-dropdown .notification-item.bg-light:hover, .navbar .dropdown-menu.notification-dropdown .notification-item.unread:hover { background-color: #dbeafe !important; } /* Notification text styling */ .navbar .dropdown-menu.notification-dropdown .notification-item .fw-semibold { color: #1e293b !important; font-weight: 600; line-height: 1.4; } .navbar .dropdown-menu.notification-dropdown .notification-item .text-muted { color: #64748b !important; } /* Footer styling */ .navbar .dropdown-menu.notification-dropdown .dropdown-footer { padding: 14px 20px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-top: 1px solid #e2e8f0; } .navbar .dropdown-menu.notification-dropdown .dropdown-footer a { color: #64748b !important; font-size: 13px; font-weight: 500; text-decoration: none; transition: color 0.15s ease; } .navbar .dropdown-menu.notification-dropdown .dropdown-footer a:hover { color: #3b82f6 !important; } /* Empty state styling */ .navbar .dropdown-menu.notification-dropdown .notification-items .text-center { padding: 40px 20px; } .navbar .dropdown-menu.notification-dropdown .notification-items .text-center i { color: #cbd5e1; } .navbar .dropdown-menu.notification-dropdown .notification-items .text-center p, .navbar .dropdown-menu.notification-dropdown .notification-items .text-center div { color: #94a3b8 !important; font-size: 14px; } /* Custom scrollbar for notification list */ .navbar .dropdown-menu.notification-dropdown .notification-items::-webkit-scrollbar { width: 6px; } .navbar .dropdown-menu.notification-dropdown .notification-items::-webkit-scrollbar-track { background: #f8fafc; } .navbar .dropdown-menu.notification-dropdown .notification-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .navbar .dropdown-menu.notification-dropdown .notification-items::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ============================================ MODERN TOGGLE SWITCHES WITH ICONS ============================================ */ /* Toggle row container - consistent height with dropdown items */ .navbar .user-dropdown .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #ffffff; cursor: default; transition: background-color 0.15s ease; min-height: 44px; } .navbar .user-dropdown .toggle-row:hover { background-color: #f3f4f6 !important; } .navbar .user-dropdown .toggle-row .toggle-label { display: flex; align-items: center; gap: 12px; color: #374151; font-size: 14px; font-weight: 450; } .navbar .user-dropdown .toggle-row .toggle-label i { font-size: 20px; width: 24px; text-align: center; } /* Custom animated toggle switch */ .toggle-switch { position: relative; width: 52px; height: 28px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch .toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #e2e8f0; border-radius: 14px; transition: background-color 0.3s ease; } .toggle-switch .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); transition: transform 0.3s cubic-bezier(0.68, -0.15, 0.32, 1.25); display: flex; align-items: center; justify-content: center; } .toggle-switch .toggle-thumb i { font-size: 14px; transition: all 0.3s ease; } /* View Only Toggle - Eye icons */ .toggle-switch.view-only-toggle .toggle-thumb i.icon-off { color: #94a3b8; } .toggle-switch.view-only-toggle .toggle-thumb i.icon-on { display: none; color: #f59e0b; } .toggle-switch.view-only-toggle input:checked + .toggle-track { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } .toggle-switch.view-only-toggle input:checked + .toggle-track + .toggle-thumb { transform: translateX(24px); } .toggle-switch.view-only-toggle input:checked + .toggle-track + .toggle-thumb i.icon-off { display: none; } .toggle-switch.view-only-toggle input:checked + .toggle-track + .toggle-thumb i.icon-on { display: block; } /* Dark Mode Toggle - Sun/Moon icons */ .toggle-switch.dark-mode-toggle .toggle-thumb i.icon-off { color: #fbbf24; } .toggle-switch.dark-mode-toggle .toggle-thumb i.icon-on { display: none; color: #6366f1; } .toggle-switch.dark-mode-toggle input:checked + .toggle-track { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); } .toggle-switch.dark-mode-toggle input:checked + .toggle-track + .toggle-thumb { transform: translateX(24px); } .toggle-switch.dark-mode-toggle input:checked + .toggle-track + .toggle-thumb i.icon-off { display: none; } .toggle-switch.dark-mode-toggle input:checked + .toggle-track + .toggle-thumb i.icon-on { display: block; } /* Hover effects for toggles */ .toggle-switch:hover .toggle-track { background: #cbd5e1; } .toggle-switch.view-only-toggle input:checked + .toggle-track:hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .toggle-switch.dark-mode-toggle input:checked + .toggle-track:hover { background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); } /* Auto-Hide Navbar Toggle - Default/Generic toggle styles */ .toggle-switch .toggle-thumb i.icon-off { color: #94a3b8; } .toggle-switch .toggle-thumb i.icon-on { display: none; color: #10b981; } .toggle-switch input:checked + .toggle-track { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); } .toggle-switch input:checked + .toggle-track + .toggle-thumb { transform: translateX(24px); } .toggle-switch input:checked + .toggle-track + .toggle-thumb i.icon-off { display: none; } .toggle-switch input:checked + .toggle-track + .toggle-thumb i.icon-on { display: block; } .toggle-switch input:checked + .toggle-track:hover { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } /* Focus ring for accessibility */ .toggle-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } /* Toggle section separator */ .navbar .user-dropdown .toggle-section { background: #ffffff; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; padding: 0; } /* Legacy form-check-input support (fallback) */ .navbar .dropdown-menu .form-check-input { width: 36px; height: 20px; background-color: #e5e7eb; border: none; cursor: pointer; transition: background-color 0.15s ease; } .navbar .dropdown-menu .form-check-input:checked { background-color: #4a90d9; } .navbar .dropdown-menu .form-check-input:focus { box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2); } /* ============================================ FORM SWITCH TOGGLES (Global) Theme-consistent styling for Bootstrap form-switch Uses !important to override Bootstrap's CSS variable-based background-color: var(--bs-form-check-bg) on .form-check-input ============================================ */ .form-check.form-switch { padding-left: 3.2em; } .form-check.form-switch .form-check-input { width: 2.5em !important; height: 1.35em !important; margin-left: -3.2em; margin-top: 0.2em; background-color: #d1d5db !important; border: none !important; border-color: transparent !important; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .form-check.form-switch .form-check-input:checked { background-color: #4a90d9 !important; } .form-check.form-switch .form-check-input:focus { background-image: var(--bs-form-switch-bg); box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2) !important; } .form-check.form-switch .form-check-input:not(:checked):hover { background-color: #b0b7c3 !important; } .form-check.form-switch .form-check-input:checked:hover { background-color: #357abd !important; } :root[data-theme="dark"] .form-check.form-switch .form-check-input { background-color: #475569 !important; } :root[data-theme="dark"] .form-check.form-switch .form-check-input:checked { background-color: #60a5fa !important; } :root[data-theme="dark"] .form-check.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important; } /* Sign out button styling - consistent height */ .navbar .user-dropdown form { margin: 0; } .navbar .user-dropdown form .dropdown-item { padding: 10px 20px; min-height: 44px; color: #374151 !important; } .navbar .user-dropdown form .dropdown-item:hover { background-color: #fef2f2 !important; color: #dc2626 !important; } .navbar .user-dropdown form .dropdown-item:hover i { color: #dc2626 !important; } /* ============================================ RIPPLE EFFECT FOR BUTTONS (Optional) ============================================ */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .btn-ripple:active::before { width: 300px; height: 300px; } /* ============================================ DARK THEME SPECIFIC OVERRIDES ============================================ */ /* Dark theme component overrides. Was @media (prefers-color-scheme: dark), which fired for OS-dark users even when the panel was in light mode, producing a half-dark page. Now scoped to the explicit theme attribute, and re-based from the gray family (#1f2937/#374151) onto the slate palette used by the main dark block above, so the two stop competing. The `.table thead th` rule that lived here was dropped: it duplicated `:root[data-theme="dark"] .table thead th` in the wrong palette. */ :root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(51, 65, 85, 0.3); } :root[data-theme="dark"] .alert-primary { background: linear-gradient(135deg, rgba(74, 144, 217, 0.2) 0%, rgba(53, 122, 189, 0.2) 100%); color: #93c5fd; } :root[data-theme="dark"] .alert-success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%); color: #6ee7b7; } :root[data-theme="dark"] .alert-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%); color: #fca5a5; } :root[data-theme="dark"] .alert-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%); color: #fcd34d; } :root[data-theme="dark"] .alert-info { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(8, 145, 178, 0.2) 100%); color: #67e8f9; } :root[data-theme="dark"] .btn-light { background: linear-gradient(135deg, #334155 0%, #475569 100%); color: #f1f5f9 !important; border-color: #475569; } :root[data-theme="dark"] .btn-light:hover { background: linear-gradient(135deg, #475569 0%, #64748b 100%); color: #ffffff !important; } /* NOTE: Navbar dropdowns are EXCLUDED from dark mode - they always use light theme */ :root[data-theme="dark"] .searchable-select-dropdown { background: #1e293b; border-color: #334155; } :root[data-theme="dark"] .searchable-select-search { background: #1e293b; border-color: #334155; } :root[data-theme="dark"] .searchable-select-option:hover { background-color: #334155; } /* Manual dark theme class overrides */ body.theme-dark .table thead th { background: linear-gradient(135deg, #1f2937 0%, #374151 100%); color: #e5e7eb; } body.theme-dark .btn-light { background: linear-gradient(135deg, #374151 0%, #4b5563 100%); color: #f9fafb !important; border-color: #4b5563; } /* ============================================ UTILITY CLASSES ============================================ */ .shadow-soft { box-shadow: 0 2px 15px var(--admin-shadow); } .shadow-medium { box-shadow: 0 4px 25px var(--admin-shadow-hover); } .rounded-lg { border-radius: 12px; } .rounded-xl { border-radius: 16px; } /* Gradient text */ .text-gradient-primary { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ PAGE-SPECIFIC FIXES ============================================ */ /* Landing page - Recent orders table cell padding */ .select-table tbody td { padding: 10px 16px !important; } /* Add left padding to first column in all tables */ .table tbody td:first-child, .table thead th:first-child { padding-left: 16px !important; } /* Note: select-table header styling is now handled by the main table thead th rule above */ /* Inventory page - Clean minimal look without heavy shadows/borders */ .inventory-minimal .card { box-shadow: none !important; border: none !important; background: transparent !important; } .inventory-minimal .card .card-body { background: #fff; border-radius: 8px; } /* Product Detail page - Reduced shadows for cleaner look */ .product-detail-minimal .card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; border: 1px solid #e5e7eb !important; } /* Table header link fix - ensure visibility with sortable links */ /* Use very high specificity to override Bootstrap text-dark class */ .table thead th a, .table thead th a.text-decoration-none, .table thead th a.text-dark, .table.table-striped thead th a, .table.table-striped thead th a.text-decoration-none, .table.table-striped thead th a.text-dark, table thead th a.text-dark, table thead th a.text-decoration-none, th a.text-dark, th a.text-decoration-none { color: #ffffff !important; font-weight: 600 !important; } .table thead th a:hover, .table thead th a.text-decoration-none:hover, .table thead th a.text-dark:hover, table thead th a.text-dark:hover, table thead th a.text-decoration-none:hover, th a.text-dark:hover, th a.text-decoration-none:hover { color: #93c5fd !important; } /* Ensure icons in table headers are also visible */ .table thead th a i, .table thead th a .mdi, table thead th a i, table thead th a .mdi, th a i, th a .mdi { color: inherit !important; } /* Fix muted icons in sortable headers */ .table thead th a i.text-muted, table thead th a i.text-muted, th a i.text-muted { color: #94a3b8 !important; } /* ============================================ COLLAPSIBLE SIDEBAR ============================================ */ :root { --sidebar-width-expanded: 190px; --sidebar-width-collapsed: 70px; --sidebar-transition-duration: 0.3s; --sidebar-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); } /* Override sidebar width from Aurora theme */ .sidebar { width: var(--sidebar-width-expanded) !important; min-width: var(--sidebar-width-expanded) !important; max-width: var(--sidebar-width-expanded) !important; } /* Only enable smooth scroll after initial load (no-transition removed) */ .sidebar:not(.no-transition) { scroll-behavior: smooth; } /* Hide scrollbar but keep scrolling functional */ .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } :root:not([data-theme="dark"]) body .sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); } :root:not([data-theme="dark"]) body .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* Match navbar brand wrapper to sidebar width */ .navbar .navbar-brand-wrapper { width: var(--sidebar-width-expanded) !important; } /* ============================================ COMPACT NAVBAR - Thinner default height Using the smaller 70px height as default ============================================ */ .navbar .navbar-brand-wrapper, .navbar .navbar-menu-wrapper { height: 70px !important; } .navbar .navbar-menu-wrapper { padding-top: 15px !important; padding-bottom: 15px !important; } .navbar .navbar-brand-wrapper { padding-top: 12px !important; padding-bottom: 12px !important; } /* Adjust page body wrapper padding to match compact navbar */ .page-body-wrapper { padding-top: 70px !important; } /* Adjust welcome text for compact navbar */ .navbar .navbar-menu-wrapper .navbar-nav .nav-item .welcome-text { font-size: 1rem !important; line-height: 1.3 !important; margin: 0 !important; display: block !important; } .with-welcome-text .navbar .navbar-menu-wrapper .navbar-nav .nav-item .welcome-text { display: block !important; } /* Adjust sidebar and main panel heights for compact navbar */ .sidebar { min-height: calc(100vh - 70px) !important; height: auto !important; max-height: none !important; overflow: visible !important; } .main-panel { min-height: calc(100vh - 70px) !important; } .sidebar .nav { max-height: none !important; overflow: visible !important; } @media screen and (max-width: 991px) { .sidebar-offcanvas { max-height: none !important; top: 70px !important; overflow: visible !important; } } /* Expand main content to fill available space */ .main-panel { width: calc(100% - var(--sidebar-width-expanded)) !important; max-width: none !important; margin-left: 0 !important; transition: none !important; } /* Disable transitions on page load to prevent flickering */ .sidebar, .navbar .navbar-brand-wrapper, .content-wrapper { transition: none !important; } /* Re-enable smooth transitions only for user-initiated sidebar toggle */ body.sidebar-transitioning .sidebar, body.sidebar-transitioning .main-panel, body.sidebar-transitioning .navbar .navbar-brand-wrapper { transition: width 0.25s ease !important; } /* Reduce content wrapper padding to use more horizontal space */ .content-wrapper { padding: 1.25rem 1.5rem 1.25rem 1.5rem !important; } /* Collapsed sidebar adjustments */ body.sidebar-icon-only .sidebar { width: var(--sidebar-width-collapsed) !important; min-width: var(--sidebar-width-collapsed) !important; max-width: var(--sidebar-width-collapsed) !important; } body.sidebar-icon-only .main-panel { width: calc(100% - var(--sidebar-width-collapsed)) !important; } body.sidebar-icon-only .navbar .navbar-brand-wrapper { width: var(--sidebar-width-collapsed) !important; } /* Responsive - full width on mobile */ @media (max-width: 991px) { .main-panel { width: 100% !important; margin-left: 0 !important; } .content-wrapper { padding: 1rem !important; } } /* Sidebar collapse toggle button - fixed position so it's always visible */ .sidebar-collapse-toggle { position: fixed; left: calc(var(--sidebar-width-expanded) - 14px); top: 120px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(74, 144, 217, 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: left var(--sidebar-transition-duration) var(--sidebar-transition-timing), transform 0.2s ease, box-shadow 0.2s ease; color: #fff; font-size: 14px; } /* Adjust toggle position when sidebar is collapsed */ body.sidebar-icon-only .sidebar-collapse-toggle { left: calc(var(--sidebar-width-collapsed) - 14px); /* Hide by default when collapsed - show on hover */ opacity: 0; pointer-events: none; transition: left var(--sidebar-transition-duration) var(--sidebar-transition-timing), transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease; } /* Show expand button when hovering over the collapsed sidebar area */ body.sidebar-icon-only.sidebar-hover-active .sidebar-collapse-toggle { opacity: 1; pointer-events: auto; } /* Rotate icon when collapsed */ body.sidebar-icon-only .sidebar-collapse-toggle .mdi { transform: rotate(180deg); } .sidebar-collapse-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(74, 144, 217, 0.5); } .sidebar-collapse-toggle .mdi { transition: transform var(--sidebar-transition-duration) var(--sidebar-transition-timing); } /* Hide category headers in collapsed mode */ body.sidebar-icon-only .sidebar .nav-category { opacity: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: none !important; visibility: hidden !important; } /* Hide info buttons in collapsed mode */ body.sidebar-icon-only .sidebar .nav-item .nav-info-btn { display: none !important; } /* Active state in collapsed mode - add gradient background */ body.sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%) !important; border-radius: 8px !important; margin: 2px 8px !important; } body.sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link .menu-icon { color: #fff !important; } /* Logout button in collapsed mode */ body.sidebar-icon-only .sidebar .nav-item form.nav-link { padding: 0 !important; margin: 0; } body.sidebar-icon-only .sidebar .nav-item form button.nav-link { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } body.sidebar-icon-only .sidebar .nav-item form button.nav-link .menu-title { display: none !important; } body.sidebar-icon-only .sidebar .nav-item form button.nav-link .menu-icon { margin-right: 0 !important; margin-left: 0 !important; } /* Tooltip for collapsed sidebar items */ body.sidebar-icon-only .sidebar .nav-item:not(.nav-category):not(.nav-tree-branch) { position: relative; } body.sidebar-icon-only .sidebar .nav-item:not(.nav-category):not(.nav-tree-branch)::after { content: attr(data-title); position: absolute; left: var(--sidebar-width-collapsed); top: 50%; transform: translateY(-50%); background: #1f2937; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.15s ease; pointer-events: none; z-index: 10000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } body.sidebar-icon-only .sidebar .nav-item:not(.nav-category):not(.nav-tree-branch)::before { content: ''; position: absolute; left: calc(var(--sidebar-width-collapsed) - 6px); top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: #1f2937; opacity: 0; visibility: hidden; transition: all 0.15s ease; pointer-events: none; z-index: 10000; } body.sidebar-icon-only .sidebar .nav-item:not(.nav-category):not(.nav-tree-branch):hover::after, body.sidebar-icon-only .sidebar .nav-item:not(.nav-category):not(.nav-tree-branch):hover::before { opacity: 1; visibility: visible; } /* Fix tooltip positioning for items inside tree children */ body.sidebar-icon-only .sidebar .nav-tree-children .nav-item::after { left: calc(var(--sidebar-width-collapsed) - 10px); } body.sidebar-icon-only .sidebar .nav-tree-children .nav-item::before { left: calc(var(--sidebar-width-collapsed) - 16px); } /* Disable Aurora theme's default hover-open tooltip in collapsed mode */ /* Aurora shows menu-title on hover which conflicts with our custom tooltip */ body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title, body.sidebar-icon-only .sidebar .nav .nav-item:hover .nav-link .menu-title { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Also hide any Aurora hover backgrounds that interfere */ body.sidebar-icon-only .sidebar .nav .nav-item.hover-open { background: transparent !important; } body.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .nav-link { background: transparent !important; } /* Hide toggle on mobile */ @media (max-width: 991px) { .sidebar-collapse-toggle { display: none; } } /* ============================================ RESULTS PER PAGE SELECTOR ============================================ */ .results-per-page { display: flex; align-items: center; gap: 0.5rem; } .results-per-page label { font-size: 0.875rem; color: #64748b; white-space: nowrap; margin-bottom: 0; } .results-per-page select { width: auto; min-width: 70px; padding: 0.375rem 2rem 0.375rem 0.75rem; font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; background-color: #fff; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .results-per-page select:hover { border-color: #cbd5e1; } .results-per-page select:focus { border-color: #4318FF; box-shadow: 0 0 0 3px rgba(67, 24, 255, 0.1); outline: none; } /* Pagination footer layout */ .pagination-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; } .pagination-footer .pagination-info { display: flex; align-items: center; gap: 1.5rem; } .pagination-footer .results-text { font-size: 0.875rem; color: #64748b; margin: 0; } @media (max-width: 768px) { .pagination-footer { flex-direction: column; align-items: stretch; } .pagination-footer .pagination-info { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .pagination-footer nav { width: 100%; } .pagination-footer .pagination { justify-content: center !important; } } /* ============================================ COMPACT SIDEBAR NAVIGATION ============================================ */ /* Make sidebar nav items more compact */ .sidebar .nav .nav-item .nav-link { padding: 7px 14px !important; font-size: 0.8125rem; } .sidebar .nav .nav-item .menu-icon { font-size: 16px; width: 20px; margin-right: 8px; } .sidebar .nav .nav-item .menu-title { font-size: 0.75rem; } /* Compact category headers */ .sidebar .nav .nav-category { padding: 10px 14px 5px !important; margin-top: 4px; font-size: 0.625rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af !important; } /* First category doesn't need top margin */ .sidebar .nav .nav-category:first-child { margin-top: 0; } /* Reduce space between nav items */ .sidebar .nav .nav-item { margin-bottom: 0; } /* Hide info buttons by default to save space */ .sidebar .nav .nav-item .nav-info-btn { opacity: 0; transition: opacity 0.15s ease; } .sidebar .nav .nav-item:hover .nav-info-btn { opacity: 1; } /* ============================================ STARSHIP SIDEBAR - Modern Space Theme 🚀 Glassmorphism, animations, and slick UX ============================================ */ /* Sidebar base styling - subtle gradient background */ .sidebar.sidebar-starship { background: linear-gradient(180deg, #1a1f2e 0%, #0d1117 100%); border-right: 1px solid rgba(99, 102, 241, 0.1); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } /* Manual light mode override */ :root:not([data-theme="dark"]) body .sidebar.sidebar-starship { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-right: 1px solid rgba(99, 102, 241, 0.08); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.05); } /* Dark mode sidebar */ :root[data-theme="dark"] .sidebar.sidebar-starship { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); border-right: 1px solid rgba(99, 102, 241, 0.15); box-shadow: 4px 0 32px rgba(0, 0, 0, 0.3); } /* Category headers with emoji - modern style */ .sidebar-starship .nav-category { display: flex !important; align-items: center !important; gap: 8px !important; padding: 16px 14px 8px !important; margin-top: 8px !important; border-top: 1px solid rgba(148, 163, 184, 0.1); } .sidebar-starship .nav-category:first-child { border-top: none; margin-top: 4px !important; } .sidebar-starship .nav-category-emoji { font-size: 1rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); animation: float 3s ease-in-out infinite; } .sidebar-starship .nav-category-text { font-size: 0.625rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #64748b !important; background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } :root[data-theme="dark"] .sidebar-starship .nav-category-text { background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Floating animation for emojis */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-2px); } } /* Nav item base styling */ .sidebar-starship .nav .nav-item:not(.nav-category) { position: relative; margin: 2px 8px; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Nav link styling */ .sidebar-starship .nav .nav-item:not(.nav-category) .nav-link { padding: 10px 12px !important; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } /* Hover state - glassmorphism effect */ .sidebar-starship .nav .nav-item:not(.nav-category):hover { transform: translateX(4px); } .sidebar-starship .nav .nav-item:not(.nav-category):hover .nav-link { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root:not([data-theme="dark"]) body .sidebar-starship .nav .nav-item:not(.nav-category):hover .nav-link { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%); } /* Hover glow effect */ .sidebar-starship .nav .nav-item:not(.nav-category)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%); border-radius: 0 3px 3px 0; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); } .sidebar-starship .nav .nav-item:not(.nav-category):hover::before { height: 60%; } /* Active state - prominent gradient */ .sidebar-starship .nav .nav-item.active:not(.nav-category) { transform: translateX(4px); } .sidebar-starship .nav .nav-item.active:not(.nav-category) > .nav-link { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%) !important; border-left: none !important; padding-left: 12px !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15); } :root:not([data-theme="dark"]) body .sidebar-starship .nav .nav-item.active:not(.nav-category) > .nav-link { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); } .sidebar-starship .nav .nav-item.active:not(.nav-category)::before { height: 70%; box-shadow: 0 0 16px rgba(99, 102, 241, 0.6); } /* Menu icon enhancements */ .sidebar-starship .nav .nav-item .menu-icon { font-size: 18px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 6px; } .sidebar-starship .nav .nav-item:hover .menu-icon { transform: scale(1.15) rotate(-3deg); filter: drop-shadow(0 2px 8px currentColor); } .sidebar-starship .nav .nav-item.active .menu-icon { transform: scale(1.1); filter: drop-shadow(0 2px 8px currentColor) brightness(1.2); } /* Menu title styling */ .sidebar-starship .nav .nav-item .menu-title { font-size: 0.8125rem; font-weight: 500; transition: all 0.2s ease; } :root:not([data-theme="dark"]) body .sidebar-starship .nav .nav-item .menu-title { color: #475569; } :root[data-theme="dark"] .sidebar-starship .nav .nav-item .menu-title { color: #cbd5e1; } .sidebar-starship .nav .nav-item:hover .menu-title { color: #6366f1; } :root:not([data-theme="dark"]) body .sidebar-starship .nav .nav-item:hover .menu-title { color: #4f46e5; } .sidebar-starship .nav .nav-item.active .menu-title { color: #6366f1 !important; font-weight: 600; } :root:not([data-theme="dark"]) body .sidebar-starship .nav .nav-item.active .menu-title { color: #4f46e5 !important; } /* Logout button special styling */ .sidebar-starship .nav-link-form { padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; } .sidebar-starship .nav-link-logout { width: 100%; text-align: left; border: none !important; background: none !important; cursor: pointer; padding: 10px 12px !important; } .sidebar-starship .nav .nav-item:has(.nav-link-logout):hover .nav-link-logout { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%) !important; } .sidebar-starship .nav .nav-item:has(.nav-link-logout)::before { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important; } .sidebar-starship .nav .nav-item:has(.nav-link-logout):hover .menu-title { color: #ef4444 !important; } .sidebar-starship .nav .nav-item:has(.nav-link-logout):hover .menu-icon { color: #ef4444 !important; } /* Info button styling */ .sidebar-starship .nav .nav-item .nav-info-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; padding: 4px 6px; border-radius: 6px; background: rgba(99, 102, 241, 0.1); border: none; color: #6366f1; cursor: pointer; transition: all 0.15s ease; } .sidebar-starship .nav .nav-item:hover .nav-info-btn { opacity: 1; } .sidebar-starship .nav .nav-item .nav-info-btn:hover { background: rgba(99, 102, 241, 0.2); transform: translateY(-50%) scale(1.1); } /* Pulse animation for active items */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 16px rgba(99, 102, 241, 0.5); } } .sidebar-starship .nav .nav-item.active::before { animation: pulse-glow 2s ease-in-out infinite; } /* Scrollbar styling */ .sidebar-starship::-webkit-scrollbar { width: 4px; } .sidebar-starship::-webkit-scrollbar-track { background: transparent; } .sidebar-starship::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%); border-radius: 4px; } .sidebar-starship::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%); } /* Collapsed sidebar - hide category emojis text, show only emoji */ body.sidebar-icon-only .sidebar-starship .nav-category { justify-content: center !important; padding: 10px 0 6px !important; } body.sidebar-icon-only .sidebar-starship .nav-category-text { display: none !important; } body.sidebar-icon-only .sidebar-starship .nav-category-emoji { font-size: 1.1rem; } /* Loading state for sidebar items */ .sidebar-starship .nav .nav-item.loading .nav-link::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid rgba(99, 102, 241, 0.2); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } /* Starfield background effect (subtle) */ .sidebar-starship::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.15), transparent), radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.1), transparent), radial-gradient(1px 1px at 50px 160px, rgba(255, 255, 255, 0.12), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.1), transparent), radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.08), transparent), radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.1), transparent); pointer-events: none; opacity: 0.5; z-index: 0; } :root:not([data-theme="dark"]) body .sidebar-starship::after { opacity: 0; } .sidebar-starship > * { position: relative; z-index: 1; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { .btn { padding: 0.45rem 0.9rem; } .btn-lg { padding: 0.65rem 1.25rem; } } /* ============================================ MODERN SLICK TABS - Starship Style 🚀 Overrides Bootstrap 5 defaults completely ============================================ */ /* Base nav-tabs styling - modern flat underline style */ .nav-tabs, .card .nav-tabs, .card-body .nav-tabs { border-bottom: 2px solid #e5e7eb !important; gap: 0 !important; padding: 0 !important; background: transparent !important; margin-bottom: 0 !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: thin; } /* Custom scrollbar for tabs overflow */ .nav-tabs::-webkit-scrollbar { height: 4px; } .nav-tabs::-webkit-scrollbar-track { background: transparent; } .nav-tabs::-webkit-scrollbar-thumb { background: rgba(74, 144, 217, 0.3); border-radius: 2px; } .nav-tabs .nav-item, .card .nav-tabs .nav-item, .card-body .nav-tabs .nav-item { margin-bottom: -2px !important; flex-shrink: 0 !important; } .nav-tabs .nav-link, .card .nav-tabs .nav-link, .card-body .nav-tabs .nav-link { border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; padding: 1rem 1.5rem !important; font-weight: 500 !important; font-size: 0.9rem !important; color: #6b7280 !important; background: transparent !important; background-color: transparent !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative; display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-bottom: 0 !important; white-space: nowrap !important; } /* Tab icons - smooth animations */ .nav-tabs .nav-link i, .nav-tabs .nav-link .mdi, .card .nav-tabs .nav-link i, .card .nav-tabs .nav-link .mdi { font-size: 1.15rem !important; opacity: 0.7; transition: all 0.25s ease !important; } /* Tab hover state - subtle gradient glow */ .nav-tabs .nav-link:hover, .card .nav-tabs .nav-link:hover, .card-body .nav-tabs .nav-link:hover { color: #4a90d9 !important; background: linear-gradient(180deg, transparent 0%, rgba(74, 144, 217, 0.06) 100%) !important; border-bottom-color: rgba(74, 144, 217, 0.4) !important; border-color: transparent transparent rgba(74, 144, 217, 0.4) transparent !important; } .nav-tabs .nav-link:hover i, .nav-tabs .nav-link:hover .mdi, .card .nav-tabs .nav-link:hover i, .card .nav-tabs .nav-link:hover .mdi { opacity: 1 !important; transform: scale(1.1) translateY(-1px); color: #4a90d9 !important; } /* Active tab state - bold accent line */ .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .card .nav-tabs .nav-link.active, .card-body .nav-tabs .nav-link.active { color: #4a90d9 !important; font-weight: 600 !important; background: linear-gradient(180deg, transparent 0%, rgba(74, 144, 217, 0.1) 100%) !important; background-color: transparent !important; border: none !important; border-bottom: 3px solid #4a90d9 !important; border-color: transparent transparent #4a90d9 transparent !important; } .nav-tabs .nav-link.active i, .nav-tabs .nav-link.active .mdi, .card .nav-tabs .nav-link.active i, .card .nav-tabs .nav-link.active .mdi { opacity: 1 !important; color: #4a90d9 !important; transform: scale(1.05); } /* Active tab glow effect - subtle underline glow */ .nav-tabs .nav-link.active::after, .card .nav-tabs .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 70%; height: 4px; background: linear-gradient(90deg, transparent, rgba(74, 144, 217, 0.6), transparent); filter: blur(6px); pointer-events: none; } /* Tab badges (e.g., "New", count badges) */ .nav-tabs .nav-link .badge { font-size: 0.65rem !important; padding: 0.2rem 0.45rem !important; margin-left: 0.35rem !important; font-weight: 600 !important; border-radius: 6px !important; vertical-align: middle !important; } /* Focus state for accessibility */ .nav-tabs .nav-link:focus, .card .nav-tabs .nav-link:focus { box-shadow: none !important; outline: none !important; } .nav-tabs .nav-link:focus-visible, .card .nav-tabs .nav-link:focus-visible { box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.35) !important; border-radius: 4px 4px 0 0 !important; } /* Tab content animation */ .tab-content > .tab-pane { animation: tabFadeIn 0.3s ease-out; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Tab emoji styling when enabled */ .nav-tabs .nav-link .tab-emoji { font-size: 1.1rem; margin-right: 0.25rem; } /* ============================================ PILL-STYLE TABS (Alternative) 💊 Add class 'nav-tabs-pills' for this style ============================================ */ .nav-tabs.nav-tabs-pills, .card .nav-tabs.nav-tabs-pills { border-bottom: none !important; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important; border-radius: 14px !important; padding: 6px !important; gap: 6px !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); } .nav-tabs.nav-tabs-pills .nav-item { margin-bottom: 0 !important; } .nav-tabs.nav-tabs-pills .nav-link { border: none !important; border-radius: 10px !important; padding: 0.75rem 1.25rem !important; background: transparent !important; color: #6b7280 !important; border-bottom: none !important; } .nav-tabs.nav-tabs-pills .nav-link:hover { background: rgba(255, 255, 255, 0.8) !important; color: #374151 !important; border-bottom-color: transparent !important; border: none !important; } .nav-tabs.nav-tabs-pills .nav-link.active { background: #ffffff !important; color: #4a90d9 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; border-bottom-color: transparent !important; border: none !important; font-weight: 600 !important; } .nav-tabs.nav-tabs-pills .nav-link.active::after { display: none !important; } /* ============================================ CARD-STYLE TABS (Alternative) 🃏 Add class 'nav-tabs-cards' for this style ============================================ */ .nav-tabs.nav-tabs-cards, .card .nav-tabs.nav-tabs-cards { border-bottom: none !important; gap: 10px !important; padding: 0 !important; } .nav-tabs.nav-tabs-cards .nav-item { margin-bottom: 0 !important; } .nav-tabs.nav-tabs-cards .nav-link { border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 0.875rem 1.5rem !important; background: #ffffff !important; color: #6b7280 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; border-bottom: 1px solid #e5e7eb !important; } .nav-tabs.nav-tabs-cards .nav-link:hover { border-color: #4a90d9 !important; color: #4a90d9 !important; background: rgba(74, 144, 217, 0.05) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74, 144, 217, 0.18) !important; } .nav-tabs.nav-tabs-cards .nav-link.active { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(74, 144, 217, 0.35) !important; font-weight: 600 !important; } .nav-tabs.nav-tabs-cards .nav-link.active i, .nav-tabs.nav-tabs-cards .nav-link.active .mdi { color: #ffffff !important; } .nav-tabs.nav-tabs-cards .nav-link.active::after { display: none !important; } /* ============================================ TEXT READABILITY FIXES Mode toggle, stat cards, helper text ============================================ */ /* Mode Toggle Container - Enhanced readability */ .mode-toggle-container { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 1.5rem !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .mode-toggle-container h6, .mode-toggle-container .fw-bold { color: #1e293b !important; font-weight: 600 !important; } /* Mode option labels - high contrast */ .mode-toggle-container .mode-option { background: #ffffff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.25rem; transition: all 0.2s ease; } .mode-toggle-container .mode-option:hover { border-color: #4a90d9; background: rgba(74, 144, 217, 0.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 144, 217, 0.1); } .mode-toggle-container .mode-option .fw-bold { color: #1e293b !important; font-size: 0.95rem; } /* Helper text - ensure readable contrast */ .mode-toggle-container .mode-option small, .mode-toggle-container .opacity-75 { color: #64748b !important; opacity: 1 !important; font-size: 0.8rem; font-weight: 400; } /* Active mode option */ .mode-toggle-container .mode-option.active { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%) !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3); } .mode-toggle-container .mode-option.active .fw-bold { color: #ffffff !important; } .mode-toggle-container .mode-option.active small, .mode-toggle-container .mode-option.active .opacity-75 { color: rgba(255, 255, 255, 0.9) !important; } /* Stats Cards - High contrast readable design */ .stats-card { border-radius: 12px !important; padding: 1.25rem !important; text-align: center; border-width: 2px !important; transition: all 0.2s ease; } .stats-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Success stat card (Enabled count) */ .stats-card.bg-success, .stats-card[class*="bg-success"] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%) !important; border-color: #10b981 !important; } .stats-card .stat-value.text-success { color: #059669 !important; font-weight: 700; font-size: 1.75rem !important; } .stats-card .stat-label { color: #374151 !important; font-weight: 600 !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; } /* Secondary stat card (Disabled count) */ .stats-card.bg-secondary, .stats-card[class*="bg-secondary"] { background: linear-gradient(135deg, rgba(107, 114, 128, 0.12) 0%, rgba(107, 114, 128, 0.06) 100%) !important; border-color: #9ca3af !important; } .stats-card .stat-value.text-secondary { color: #4b5563 !important; font-weight: 700; font-size: 1.75rem !important; } /* Warning stat card */ .stats-card.bg-warning, .stats-card[class*="bg-warning"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important; border-color: #f59e0b !important; } .stats-card .stat-value.text-warning { color: #b45309 !important; } /* Danger stat card */ .stats-card.bg-danger, .stats-card[class*="bg-danger"] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%) !important; border-color: #ef4444 !important; } .stats-card .stat-value.text-danger { color: #dc2626 !important; } /* Info stat card */ .stats-card.bg-info, .stats-card[class*="bg-info"] { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%) !important; border-color: #06b6d4 !important; } .stats-card .stat-value.text-info { color: #0891b2 !important; } /* ============================================ MODERN MODAL STYLING ============================================ */ /* Modal backdrop */ .modal-backdrop { background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); } /* Modal dialog animation */ .modal.fade .modal-dialog { transform: scale(0.95) translateY(-20px); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .modal.show .modal-dialog { transform: scale(1) translateY(0); } /* Modal content - modern card style */ .modal-content { border: none !important; border-radius: 20px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important; overflow: hidden; } /* Modal header - clean modern style */ .modal-header { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 1px solid #e2e8f0 !important; padding: 1.25rem 1.5rem !important; border-radius: 20px 20px 0 0 !important; } .modal-header .modal-title { font-weight: 600 !important; font-size: 1.1rem !important; color: #1e293b !important; display: flex; align-items: center; gap: 0.5rem; } .modal-header .modal-title i, .modal-header .modal-title .mdi { font-size: 1.25rem; color: #4a90d9; } /* Modal close button */ .modal-header .btn-close { background-size: 0.8rem; opacity: 0.5; transition: all 0.2s ease; border-radius: 8px; padding: 0.75rem; } .modal-header .btn-close:hover { opacity: 1; background-color: rgba(239, 68, 68, 0.1); transform: rotate(90deg); } /* Modal body */ .modal-body { padding: 1.5rem !important; color: #374151; } /* Modal footer */ .modal-footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; padding: 1rem 1.5rem !important; border-radius: 0 0 20px 20px !important; gap: 0.75rem; } /* Warning header style */ .modal-header.bg-warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; border-bottom: 1px solid #fcd34d !important; } .modal-header.bg-warning .modal-title { color: #78350f !important; } .modal-header.bg-warning .modal-title i, .modal-header.bg-warning .modal-title .mdi { color: #b45309 !important; } /* Danger header style */ .modal-header.bg-danger { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border-bottom: 1px solid #fecaca !important; } .modal-header.bg-danger .modal-title { color: #991b1b !important; } /* Success header style */ .modal-header.bg-success { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; border-bottom: 1px solid #a7f3d0 !important; } .modal-header.bg-success .modal-title { color: #065f46 !important; } /* Info header style */ .modal-header.bg-info { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important; border-bottom: 1px solid #a5f3fc !important; } .modal-header.bg-info .modal-title { color: #0e7490 !important; } /* Alert inside modal - enhanced readability */ .modal-body .alert { border-radius: 12px !important; padding: 1rem 1.25rem !important; border-left-width: 4px !important; border-left-style: solid !important; } .modal-body .alert-warning { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; border-color: #fcd34d !important; border-left-color: #f59e0b !important; color: #78350f !important; } .modal-body .alert-warning strong { color: #92400e !important; } .modal-body .alert-warning ul { color: #78350f !important; margin-top: 0.75rem; } .modal-body .alert-warning li { color: #78350f !important; margin-bottom: 0.25rem; } .modal-body .alert-warning i, .modal-body .alert-warning .mdi { color: #b45309 !important; } .modal-body .alert-info { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important; border-color: #67e8f9 !important; border-left-color: #06b6d4 !important; color: #0e7490 !important; } .modal-body .alert-info strong { color: #0e7490 !important; } .modal-body .alert-danger { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border-color: #fecaca !important; border-left-color: #ef4444 !important; color: #991b1b !important; } .modal-body .alert-success { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; border-color: #a7f3d0 !important; border-left-color: #10b981 !important; color: #065f46 !important; } /* Form labels in modals */ .modal-body .form-label { font-weight: 500; color: #374151; margin-bottom: 0.375rem; } /* Small/muted text in modals - readable */ .modal-body small, .modal-body .text-muted, .modal-body .form-text { color: #64748b !important; font-size: 0.8125rem; } /* Download button in modal */ .modal-body .btn-info.w-100 { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); border: none; padding: 0.875rem 1.5rem; font-weight: 500; border-radius: 10px; transition: all 0.2s ease; } .modal-body .btn-info.w-100:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35); } /* HR in modal */ .modal-body hr { border-color: #e2e8f0; opacity: 1; margin: 1.5rem 0; } /* ============================================ FILTER PANEL READABILITY ============================================ */ .filter-panel { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border: 1px solid #e2e8f0; border-radius: 12px !important; padding: 1.25rem !important; } .filter-panel .form-label { color: #374151 !important; font-weight: 500; font-size: 0.8125rem; } /* ============================================ UNSAVED INDICATOR - Enhanced visibility ============================================ */ .unsaved-indicator { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; border: 1px solid #fcd34d; color: #78350f !important; font-weight: 500; border-radius: 10px; padding: 0.5rem 1rem; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); } .unsaved-indicator i, .unsaved-indicator .mdi { color: #b45309 !important; } /* ============================================ INHERITED DISCOUNT DISPLAY ============================================ */ .inherited-discount { color: #64748b !important; font-style: italic; font-size: 0.8125rem; background: rgba(100, 116, 139, 0.1); padding: 0.25rem 0.5rem; border-radius: 4px; } /* ============================================ RESPONSIVE ADJUSTMENTS FOR TABS ============================================ */ @media (max-width: 768px) { .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tabs .nav-link { padding: 0.75rem 1rem; white-space: nowrap; font-size: 0.85rem; } .nav-tabs .nav-link i, .nav-tabs .nav-link .mdi { font-size: 1rem; } } /* ============================================ DARK MODE SUPPORT FOR NEW COMPONENTS ============================================ */ :root[data-theme="dark"] .nav-tabs, :root[data-theme="dark"] .card .nav-tabs { border-bottom-color: #334155 !important; background: transparent !important; } :root[data-theme="dark"] .nav-tabs .nav-link, :root[data-theme="dark"] .card .nav-tabs .nav-link { color: #94a3b8 !important; background: transparent !important; } :root[data-theme="dark"] .nav-tabs .nav-link:hover, :root[data-theme="dark"] .card .nav-tabs .nav-link:hover { color: #60a5fa !important; background: linear-gradient(180deg, transparent 0%, rgba(96, 165, 250, 0.1) 100%) !important; border-bottom-color: rgba(96, 165, 250, 0.4) !important; } :root[data-theme="dark"] .nav-tabs .nav-link.active, :root[data-theme="dark"] .card .nav-tabs .nav-link.active { color: #60a5fa !important; background: linear-gradient(180deg, transparent 0%, rgba(96, 165, 250, 0.15) 100%) !important; border-bottom-color: #60a5fa !important; } :root[data-theme="dark"] .nav-tabs .nav-link.active::after { background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.6), transparent) !important; } :root[data-theme="dark"] .mode-toggle-container { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; border-color: #475569 !important; } :root[data-theme="dark"] .mode-toggle-container h6, :root[data-theme="dark"] .mode-toggle-container .fw-bold { color: #f1f5f9 !important; } :root[data-theme="dark"] .mode-toggle-container .mode-option { background: #0f172a; border-color: #475569; } :root[data-theme="dark"] .mode-toggle-container .mode-option .fw-bold { color: #e2e8f0 !important; } :root[data-theme="dark"] .mode-toggle-container .mode-option small { color: #94a3b8 !important; } :root[data-theme="dark"] .stats-card { background: rgba(30, 41, 59, 0.8) !important; } :root[data-theme="dark"] .stats-card .stat-label { color: #cbd5e1 !important; } :root[data-theme="dark"] .filter-panel { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; border-color: #475569 !important; } :root[data-theme="dark"] .filter-panel .form-label { color: #e2e8f0 !important; } /* ============================================ MODERN DATA TABLES Applied via .table-modern class ============================================ */ .table-modern { border-collapse: separate; border-spacing: 0; width: 100%; } .table-modern thead th { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; padding: 0.875rem 1rem; border-bottom: 2px solid #e2e8f0; white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table-modern thead th:first-child { border-radius: 8px 0 0 0; } .table-modern thead th:last-child { border-radius: 0 8px 0 0; } .table-modern tbody tr { transition: all 0.15s ease; } .table-modern tbody tr:hover { background-color: rgba(74, 144, 217, 0.06); } .table-modern tbody tr:hover td { color: #1e293b; } .table-modern tbody td { padding: 0.875rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; font-size: 0.875rem; } .table-modern tbody tr:last-child td { border-bottom: none; } /* Row selection state */ .table-modern tbody tr.selected { background-color: rgba(74, 144, 217, 0.12); } .table-modern tbody tr.selected td { border-bottom-color: rgba(74, 144, 217, 0.2); } /* Sortable headers */ .table-modern thead th.sortable { cursor: pointer; user-select: none; transition: all 0.15s ease; } .table-modern thead th.sortable:hover { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); color: #4a90d9; } .table-modern thead th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #94a3b8; opacity: 0.5; transition: all 0.15s ease; } .table-modern thead th.sortable:hover::after { opacity: 1; border-top-color: #4a90d9; } .table-modern thead th.sort-asc::after { border-top: none; border-bottom: 4px solid #4a90d9; opacity: 1; } .table-modern thead th.sort-desc::after { border-top: 4px solid #4a90d9; opacity: 1; } /* Dark mode tables */ :root[data-theme="dark"] .table-modern thead th { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #94a3b8; border-bottom-color: #334155; } :root[data-theme="dark"] .table-modern tbody tr:hover { background-color: rgba(96, 165, 250, 0.08); } :root[data-theme="dark"] .table-modern tbody td { border-bottom-color: #1e293b; color: #e2e8f0; } /* ============================================ MODERN STATUS BADGES ============================================ */ .badge-status { font-size: 0.7rem; font-weight: 600; padding: 0.35em 0.75em; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 4px; } .badge-status i, .badge-status .mdi { font-size: 0.85em; } .badge-status-active { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15); } .badge-status-inactive { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); color: #4b5563; } .badge-status-pending { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; box-shadow: 0 1px 2px rgba(245, 158, 11, 0.15); } .badge-status-error, .badge-status-danger { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; box-shadow: 0 1px 2px rgba(239, 68, 68, 0.15); } .badge-status-info { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; box-shadow: 0 1px 2px rgba(59, 130, 246, 0.15); } .badge-status-primary { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #3730a3; box-shadow: 0 1px 2px rgba(99, 102, 241, 0.15); } /* Compact badges for tables */ .badge-compact { font-size: 0.65rem; padding: 0.2em 0.5em; border-radius: 4px; } /* ============================================ ENTITY CARDS (Client/Vendor name display) ============================================ */ .entity-card { display: flex; align-items: center; gap: 0.75rem; } .entity-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; transition: transform 0.15s ease; } .entity-card:hover .entity-avatar { transform: scale(1.05); } .entity-avatar-primary { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); color: #ffffff; box-shadow: 0 2px 4px rgba(74, 144, 217, 0.3); } .entity-avatar-secondary { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: #ffffff; box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3); } .entity-avatar-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3); } .entity-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .entity-info { display: flex; flex-direction: column; min-width: 0; } .entity-name { font-weight: 600; color: #1e293b; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-meta { font-size: 0.75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-info-spaced { gap: 4px; } :root[data-theme="dark"] .entity-name { color: #f1f5f9; } :root[data-theme="dark"] .entity-meta { color: #94a3b8; } /* ============================================ ACTION BUTTONS (Table row actions) ============================================ */ .btn-action { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #64748b; transition: all 0.15s ease; } .btn-action:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-1px); } .btn-action-primary:hover { background: rgba(74, 144, 217, 0.1); color: #4a90d9; border-color: rgba(74, 144, 217, 0.2); } .btn-action-success:hover { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.2); } .btn-action-danger:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.2); } .btn-action-info:hover { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border-color: rgba(59, 130, 246, 0.2); } /* Action button group */ .action-buttons { display: flex; gap: 4px; justify-content: flex-end; } /* ============================================ STATS PILLS (Quick stats in tables) ============================================ */ .stats-pills { display: flex; flex-wrap: wrap; gap: 4px; } .stats-pills-vertical { display: flex; flex-direction: column; gap: 2px; } .stats-pill { font-size: 0.7rem; font-weight: 600; padding: 0.2em 0.5em; border-radius: 4px; display: inline-flex; align-items: center; gap: 2px; } .stats-pill-primary { background: rgba(74, 144, 217, 0.15); color: #2563eb; } .stats-pill-success { background: rgba(16, 185, 129, 0.15); color: #059669; } .stats-pill-warning { background: rgba(245, 158, 11, 0.15); color: #d97706; } .stats-pill-danger { background: rgba(239, 68, 68, 0.15); color: #dc2626; } .stats-pill-secondary { background: rgba(100, 116, 139, 0.15); color: #475569; } .stats-pill-info { background: rgba(59, 130, 246, 0.15); color: #2563eb; } /* Vendor stats list - vertical layout */ .vendor-stats-list, .integration-list { display: flex; flex-direction: column; gap: 3px; } .stat-line, .integration-line { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; line-height: 1.4; } .stat-line .stats-pill, .integration-line .stats-pill { min-width: 32px; justify-content: center; } /* Currency badge */ .badge-currency { font-size: 0.65rem; font-weight: 600; padding: 0.2em 0.5em; border-radius: 4px; background: rgba(100, 116, 139, 0.15); color: #475569; text-transform: uppercase; letter-spacing: 0.5px; } :root[data-theme="dark"] .badge-currency { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } /* ============================================ PAGE HEADER REDESIGN ============================================ */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .page-header-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1e293b; letter-spacing: -0.025em; } .page-header-subtitle { margin: 0.25rem 0 0 0; font-size: 0.875rem; color: #64748b; } .page-header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } :root[data-theme="dark"] .page-header-title { color: #f1f5f9; } :root[data-theme="dark"] .page-header-subtitle { color: #94a3b8; } /* ============================================ SEARCH & FILTER BAR ============================================ */ .search-filter-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 1rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 10px; margin-bottom: 1rem; } .search-input-wrapper { position: relative; flex: 1; min-width: 200px; max-width: 400px; } .search-input-wrapper input { width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; transition: all 0.2s ease; background: #ffffff; } .search-input-wrapper input:focus { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15); outline: none; } .search-input-wrapper .search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1rem; pointer-events: none; } :root[data-theme="dark"] .search-filter-bar { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); } :root[data-theme="dark"] .search-input-wrapper input { background: #0f172a; border-color: #334155; color: #e2e8f0; } /* ============================================ EMPTY STATE ============================================ */ .empty-state { text-align: center; padding: 3rem 1rem; } .empty-state-icon { font-size: 4rem; color: #cbd5e1; margin-bottom: 1rem; opacity: 0.7; } .empty-state-title { font-size: 1.25rem; font-weight: 600; color: #475569; margin-bottom: 0.5rem; } .empty-state-text { font-size: 0.875rem; color: #64748b; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; } :root[data-theme="dark"] .empty-state-icon { color: #475569; } :root[data-theme="dark"] .empty-state-title { color: #e2e8f0; } :root[data-theme="dark"] .empty-state-text { color: #94a3b8; } /* ============================================ VISUAL INDICATORS & OVERVIEW SECTIONS ============================================ */ /* Status Indicator Badges */ .status-check { color: #10b981; font-weight: 500; } .status-cross { color: #ef4444; font-weight: 500; } .status-warning { color: #f59e0b; font-weight: 500; } .status-info { color: #3b82f6; font-weight: 500; } /* Indicator Badges with Background */ .indicator-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; } .indicator-badge.success { background-color: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .indicator-badge.danger { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .indicator-badge.warning { background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; } .indicator-badge.info { background-color: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .indicator-badge.neutral { background-color: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; } /* Section Cards for Overview */ .section-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 1.25rem; overflow: hidden; } .section-card-header { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 0.875rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.5rem; } .section-card-header h6 { margin: 0; font-weight: 600; font-size: 0.9rem; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; } .section-card-header .section-emoji { font-size: 1.1rem; } .section-card-body { padding: 1rem 1.25rem; } /* Stat Row - Grid layout for stats */ .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .stat-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.75rem 0.875rem; transition: all 0.2s ease; } .stat-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .stat-item-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.375rem; font-weight: 600; } .stat-item-value { display: flex; align-items: center; gap: 0.375rem; font-size: 0.95rem; font-weight: 600; color: #1e293b; } .stat-item-value .emoji { font-size: 1rem; } /* Section Info Note */ .section-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #eff6ff; border-radius: 8px; font-size: 0.8rem; color: #1e40af; margin-top: 0.75rem; } .section-note.warning { background: #fffbeb; color: #92400e; } /* Timestamp Tooltip */ .timestamp-tooltip { cursor: help; border-bottom: 1px dotted #9ca3af; } /* Dark Mode Support for Visual Indicators */ :root[data-theme="dark"] .section-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; } :root[data-theme="dark"] .section-card-header { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-color: #334155; } :root[data-theme="dark"] .section-card-header h6 { color: #e2e8f0; } :root[data-theme="dark"] .stat-item { background: #1e293b; border-color: #334155; } :root[data-theme="dark"] .stat-item:hover { border-color: #475569; } :root[data-theme="dark"] .stat-item-label { color: #94a3b8; } :root[data-theme="dark"] .stat-item-value { color: #f1f5f9; } :root[data-theme="dark"] .indicator-badge.success { background-color: rgba(16, 185, 129, 0.15); border-color: #059669; } :root[data-theme="dark"] .indicator-badge.danger { background-color: rgba(239, 68, 68, 0.15); border-color: #dc2626; } :root[data-theme="dark"] .indicator-badge.warning { background-color: rgba(245, 158, 11, 0.15); border-color: #d97706; } :root[data-theme="dark"] .indicator-badge.info { background-color: rgba(59, 130, 246, 0.15); border-color: #3b82f6; } :root[data-theme="dark"] .indicator-badge.neutral { background-color: rgba(107, 114, 128, 0.15); border-color: #6b7280; } :root[data-theme="dark"] .section-note { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } :root[data-theme="dark"] .section-note.warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; } /* Responsive adjustments */ @media (max-width: 768px) { .stat-row { grid-template-columns: 1fr; gap: 0.5rem; } } /* ============================================ COMPACT PAGE HEADER & CLIENT BANNER ============================================ */ /* Page Header Bar - Back Button + Path */ .page-header-bar { display: flex; align-items: center; padding: 0.5rem 0; } .page-header-bar .btn-outline-secondary { border-color: #e2e8f0; color: #64748b; font-weight: 500; padding: 0.35rem 0.75rem; transition: all 0.2s ease; } .page-header-bar .btn-outline-secondary:hover { background-color: #f1f5f9; border-color: #cbd5e1; color: #334155; } .page-path { display: flex; align-items: center; gap: 0.125rem; font-size: 0.8rem; color: #94a3b8; } .page-path i { font-size: 0.75rem; } /* Compact Client Banner */ .client-banner { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.875rem 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .client-banner-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .client-identity { display: flex; align-items: center; gap: 0.875rem; } .client-avatar { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .client-avatar-fallback { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; box-shadow: 0 2px 4px rgba(74, 144, 217, 0.25); } .client-info { display: flex; flex-direction: column; gap: 0.125rem; } .client-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; } .client-name { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3; } .client-meta { font-size: 0.8rem; color: #94a3b8; font-weight: 500; } .client-timestamp { font-size: 0.75rem; } /* ============================================ OVERVIEW TAB - MODERN GRID LAYOUT ============================================ */ .overview-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; } @media (max-width: 992px) { .overview-grid { grid-template-columns: 1fr; } } .overview-panel { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; } .overview-panel-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 0.85rem; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; } .overview-panel-header i { font-size: 1.1rem; color: #4a90d9; } .overview-panel-body { padding: 1rem; } /* Info Grid - Compact Key/Value Layout */ .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } @media (max-width: 768px) { .info-grid { grid-template-columns: repeat(2, 1fr); } } .info-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.625rem 0.75rem; transition: all 0.15s ease; } .info-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .info-item.span-2 { grid-column: span 2; } .info-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 600; margin-bottom: 0.25rem; } .info-value { display: flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: #334155; } .info-value i { font-size: 0.9rem; } /* Status Dots */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.375rem; } .status-dot.active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } .status-dot.inactive { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); } .status-dot.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); } /* Feature Flags Grid */ .flags-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .flag-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; transition: all 0.2s ease; border: 1px solid transparent; } .flag-chip i { font-size: 0.9rem; } .flag-chip.enabled { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #059669; border-color: #86efac; } .flag-chip.disabled { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; } .flag-chip.enabled i { color: #10b981; } .flag-chip.disabled i { color: #d1d5db; } .flags-note { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: #f0f9ff; border-radius: 6px; font-size: 0.75rem; color: #0369a1; } .flags-note i { font-size: 0.9rem; } /* Dark Mode Support for New Components */ :root[data-theme="dark"] .page-header-bar .btn-outline-secondary { border-color: #475569; color: #94a3b8; } :root[data-theme="dark"] .page-header-bar .btn-outline-secondary:hover { background-color: #334155; border-color: #475569; color: #e2e8f0; } :root[data-theme="dark"] .page-path { color: #64748b; } :root[data-theme="dark"] .client-banner { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; } :root[data-theme="dark"] .client-name { color: #f1f5f9; } :root[data-theme="dark"] .client-meta { color: #64748b; } :root[data-theme="dark"] .overview-panel { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; } :root[data-theme="dark"] .overview-panel-header { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-color: #334155; color: #e2e8f0; } :root[data-theme="dark"] .info-item { background: #1e293b; border-color: #334155; } :root[data-theme="dark"] .info-item:hover { border-color: #475569; } :root[data-theme="dark"] .info-label { color: #64748b; } :root[data-theme="dark"] .info-value { color: #e2e8f0; } :root[data-theme="dark"] .flag-chip.enabled { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%); border-color: #059669; color: #6ee7b7; } :root[data-theme="dark"] .flag-chip.disabled { background: #1e293b; border-color: #334155; color: #64748b; } :root[data-theme="dark"] .flag-chip.enabled i { color: #34d399; } :root[data-theme="dark"] .flag-chip.disabled i { color: #475569; } :root[data-theme="dark"] .flags-note { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } /* ============================================ DATA REFRESH CONTROL COMPONENT ============================================ A lightweight refresh control with: - Last updated timestamp - Manual & force refresh buttons - Auto-refresh toggle - Cache TTL indicator ============================================ */ .data-refresh-control { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; background: linear-gradient(135deg, rgba(74, 144, 217, 0.08) 0%, rgba(74, 144, 217, 0.03) 100%); border: 1px solid rgba(74, 144, 217, 0.15); border-radius: 8px; font-size: 0.8rem; } .data-refresh-control.data-refresh-compact { padding: 0.25rem 0.5rem; gap: 0.35rem; font-size: 0.75rem; } .data-refresh-divider { width: 1px; height: 16px; background: rgba(107, 114, 128, 0.3); } .data-refresh-ttl { display: flex; align-items: center; gap: 0.25rem; color: #6b7280; font-size: 0.75rem; } .data-refresh-ttl i { font-size: 0.9rem; color: #8b5cf6; } .data-refresh-timestamp { display: flex; align-items: center; gap: 0.3rem; color: #4b5563; transition: color 0.2s ease; } .data-refresh-timestamp i { font-size: 0.9rem; color: #10b981; } .data-refresh-timestamp.data-refresh-stale { color: #f59e0b; } .data-refresh-timestamp.data-refresh-stale i { color: #f59e0b; } .data-refresh-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(74, 144, 217, 0.25); border-radius: 6px; background: rgba(74, 144, 217, 0.08); color: var(--admin-primary); cursor: pointer; transition: all 0.15s ease; } .data-refresh-btn:hover:not(:disabled) { background: var(--admin-primary); color: white; border-color: var(--admin-primary); transform: translateY(-1px); } .data-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; } .data-refresh-btn i { font-size: 1rem; } .data-refresh-btn.data-refresh-force { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); color: var(--admin-warning); } .data-refresh-btn.data-refresh-force:hover:not(:disabled) { background: var(--admin-warning); color: white; border-color: var(--admin-warning); } .data-refresh-auto { display: flex; align-items: center; gap: 0.5rem; } .data-refresh-auto .form-check { margin: 0; padding-left: 2rem; } .data-refresh-auto .form-check-input { width: 2rem; height: 1rem; margin-left: -2rem; } .data-refresh-auto .form-check-label { color: #6b7280; font-size: 0.75rem; margin-left: 0.25rem; } .data-refresh-auto .form-select { padding: 0.15rem 1.5rem 0.15rem 0.4rem; font-size: 0.75rem; border-radius: 4px; border: 1px solid rgba(107, 114, 128, 0.3); background-color: rgba(255, 255, 255, 0.8); } /* Animation for refresh icon */ .data-refresh-btn i.mdi-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark mode styles */ :root[data-theme="dark"] .data-refresh-control { background: linear-gradient(135deg, rgba(74, 144, 217, 0.12) 0%, rgba(74, 144, 217, 0.05) 100%); border-color: rgba(74, 144, 217, 0.25); } :root[data-theme="dark"] .data-refresh-divider { background: rgba(148, 163, 184, 0.2); } :root[data-theme="dark"] .data-refresh-ttl { color: #94a3b8; } :root[data-theme="dark"] .data-refresh-timestamp { color: #cbd5e1; } :root[data-theme="dark"] .data-refresh-timestamp.data-refresh-stale { color: #fbbf24; } :root[data-theme="dark"] .data-refresh-btn { background: rgba(74, 144, 217, 0.15); border-color: rgba(74, 144, 217, 0.3); } :root[data-theme="dark"] .data-refresh-btn.data-refresh-force { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); } :root[data-theme="dark"] .data-refresh-auto .form-check-label { color: #94a3b8; } :root[data-theme="dark"] .data-refresh-auto .form-select { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } /* ═══════════════════════════════════════════════════════════════════════════ THEME LAYER v2 — appended 2026-09-08 Everything below is authored against tokens and sits at the end of the file so it wins over the older ad-hoc rules at equal specificity. Two goals: 1. give dark mode a real elevation/contrast scale instead of two flat greys 2. fix the components that shipped with NO dark variant at all Contrast targets: WCAG 2.1 AA — 4.5:1 body text, 3:1 UI boundaries. ═══════════════════════════════════════════════════════════════════════════ */ /* ── A. Expanded dark tokens ──────────────────────────────────────────────── The page ground drops to #0b1220 so cards genuinely lift off it; surface-1 and surface-3 keep their existing values (#1e293b / #334155) because ~80 rules in this file already hardcode them, so they stay in harmony instead of fighting. */ :root[data-theme="dark"] { --admin-bg: #0b1220; --admin-card-bg: #1e293b; --admin-surface-1: #1e293b; --admin-surface-2: #273449; --admin-surface-3: #334155; --admin-border: #2c3a52; --admin-border-strong: #3d4d6a; --admin-text: #e8edf5; --admin-text-muted: #9aa8bd; --admin-text-faint: #6b7a91; /* Accents lifted to the 400 tier: readable as TEXT on a dark ground. #ef4444 / #2563eb / #64748b were all below 4.5:1 and are replaced. */ --admin-primary: #60a5fa; --admin-success: #34d399; --admin-warning: #fbbf24; --admin-danger: #f87171; --admin-info: #38bdf8; /* Matching low-alpha fills for tinted chips/badges */ --admin-primary-light: rgba(96, 165, 250, 0.14); --admin-success-light: rgba(52, 211, 153, 0.14); --admin-warning-light: rgba(251, 191, 36, 0.14); --admin-danger-light: rgba(248, 113, 113, 0.14); --admin-info-light: rgba(56, 189, 248, 0.14); --admin-shadow: rgba(0, 0, 0, 0.45); --admin-shadow-hover: rgba(0, 0, 0, 0.6); } /* Light mode gains the same extra roles so components can be authored once. */ :root:not([data-theme="dark"]) { --admin-surface-1: #ffffff; --admin-surface-2: #f8fafc; --admin-surface-3: #f1f5f9; --admin-border-strong: #cbd5e1; --admin-text-faint: #94a3b8; } /* ── B. Dashboard KPI row ─────────────────────────────────────────────────── The six figures were bare text sitting directly on the page background with no container, so they read as a floating sentence rather than six measures. Authored with tokens, so this lands in BOTH themes. */ .home-tab .statistics-details { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px !important; } .home-tab .statistics-details > div { flex: 1 1 150px; min-width: 0; background: var(--admin-surface-1); border: 1px solid var(--admin-border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px var(--admin-shadow); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .home-tab .statistics-details > div:hover { border-color: var(--admin-border-strong); box-shadow: 0 6px 18px var(--admin-shadow); transform: translateY(-1px); } .home-tab .statistics-details .statistics-title { font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--admin-text-muted) !important; margin-bottom: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* tabular-nums stops the digits jittering when the 60s poll refreshes them */ .home-tab .statistics-details .rate-percentage { font-size: 1.65rem !important; font-weight: 700; line-height: 1.15; color: var(--admin-text) !important; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .home-tab .statistics-details > div > p:last-child { font-size: 12px; font-variant-numeric: tabular-nums; margin-bottom: 0; align-items: center; gap: 2px; } :root[data-theme="dark"] .home-tab .statistics-details .text-success { color: var(--admin-success) !important; } :root[data-theme="dark"] .home-tab .statistics-details .text-danger { color: var(--admin-danger) !important; } /* ── C. Surfaces, cards, tables ───────────────────────────────────────────── The row-background rule that shipped without !important lost to the 30k-line template, which is what washed the Recent Orders rows out. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .card.card-rounded { background-color: var(--admin-surface-1) !important; border: 1px solid var(--admin-border) !important; box-shadow: 0 1px 3px var(--admin-shadow) !important; } :root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--admin-text); color: var(--admin-text) !important; } :root[data-theme="dark"] .table thead th { background: var(--admin-surface-2) !important; color: var(--admin-text-muted) !important; border-bottom: 1px solid var(--admin-border-strong) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .05em; } :root[data-theme="dark"] .table tbody tr { background-color: transparent !important; border-color: var(--admin-border) !important; } :root[data-theme="dark"] .table tbody tr:hover, :root[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--admin-surface-3) !important; } :root[data-theme="dark"] .table tbody td { border-color: var(--admin-border) !important; color: var(--admin-text) !important; vertical-align: middle; } /* The dashboard renders

+
inside every ; both were inheriting template colours and reading as washed-out grey on the dark rows. / :root[data-theme="dark"] .table tbody td h6 { color: var(--admin-text) !important; font-size: 13.5px; margin-bottom: 2px; } :root[data-theme="dark"] .table tbody td p { color: var(--admin-text-muted) !important; font-size: 11.5px; margin-bottom: 0; } :root[data-theme="dark"] .card-title, :root[data-theme="dark"] .card-title-dash { color: var(--admin-text) !important; } :root[data-theme="dark"] .card-subtitle, :root[data-theme="dark"] .card-subtitle-dash { color: var(--admin-text-muted) !important; } / ── D. Status badges ─────────────────────────────────────────────────────── views/partials/admin/status_badge.jet is the panel's ONLY shared macro and it emits `.badge.bg-`, which Bootstrap paints with --bs-badge-color:#fff over the Aurora brand fills. Measured, that is white text at: bg-secondary #00CDFF 1.88:1 · bg-warning #E29E09 2.30:1 bg-info #51B1E1 2.41:1 · bg-success #34B1AA 2.62:1 bg-danger #F95F53 3.09:1 Five of six fail AA (4.5:1) — and they fail identically in LIGHT mode, so this was never a dark-mode bug. Only PARTIALLY_DELIVERED passed, because someone had hand-appended `text-dark` to that one branch. DARK ONLY — deliberate scope. Tinted badges (low-alpha fill, saturated text, hairline border) are applied to dark mode only. Light mode was reverted to the template's original solid pills on request 2026-09-08: the tinted version read as washed out against a white page and lost the at-a-glance colour punch that makes a dense status table scannable. TRADE-OFF ON RECORD: light mode therefore still ships the contrast failures listed above. That is an accepted product decision, not an oversight. If it is ever revisited, the minimal accessible fix that KEEPS solid pills is to darken the fills rather than lighten the text — e.g. bg-success #34B1AA -> #14837c, bg-danger #F95F53 -> #d92d20, bg-info #51B1E1 -> #1c7ba8 — which holds white text at >= 4.5:1 without changing the visual weight. The one branch that already passes does it the other way, via `text-dark` on bg-warning. .bg- carry !important in the template, so these need it plus the extra class. / :root[data-theme="dark"] .badge.bg-primary, :root[data-theme="dark"] .badge.bg-secondary, :root[data-theme="dark"] .badge.bg-success, :root[data-theme="dark"] .badge.bg-danger, :root[data-theme="dark"] .badge.bg-warning, :root[data-theme="dark"] .badge.bg-info, :root[data-theme="dark"] .badge.bg-light, :root[data-theme="dark"] .badge.bg-dark { font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: .35em .65em; border-radius: 6px; border: 1px solid transparent; } / Dark theme — 400-tier text on a 14% wash / :root[data-theme="dark"] .badge.bg-primary { background-color: var(--admin-primary-light) !important; color: var(--admin-primary) !important; border-color: rgba(96,165,250,.30) !important; } :root[data-theme="dark"] .badge.bg-secondary { background-color: rgba(148,163,184,.14) !important; color: #cbd5e1 !important; border-color: rgba(148,163,184,.30) !important; } :root[data-theme="dark"] .badge.bg-success { background-color: var(--admin-success-light) !important; color: var(--admin-success) !important; border-color: rgba(52,211,153,.30) !important; } :root[data-theme="dark"] .badge.bg-danger { background-color: var(--admin-danger-light) !important; color: var(--admin-danger) !important; border-color: rgba(248,113,113,.30) !important; } :root[data-theme="dark"] .badge.bg-warning { background-color: var(--admin-warning-light) !important; color: var(--admin-warning) !important; border-color: rgba(251,191,36,.30) !important; } :root[data-theme="dark"] .badge.bg-info { background-color: var(--admin-info-light) !important; color: var(--admin-info) !important; border-color: rgba(56,189,248,.30) !important; } :root[data-theme="dark"] .badge.bg-light { background-color: var(--admin-surface-3) !important; color: var(--admin-text) !important; border-color: var(--admin-border) !important; } :root[data-theme="dark"] .badge.bg-dark { background-color: rgba(15,23,42,.6) !important; color: var(--admin-text-muted) !important; border-color: var(--admin-border) !important; } / `text-dark` was hand-added to the one branch that passed. Now that every badge carries its own accessible colour, stop that override forcing near-black text onto the dark-theme wash. / :root[data-theme="dark"] .badge.bg-warning.text-dark { color: var(--admin-warning) !important; } / ── E. Components that shipped with no dark variant ──────────────────────── admin-theme.css:3853 is headed "DARK MODE SUPPORT FOR NEW COMPONENTS" and ends ~:3925; everything authored after it was skipped. These three are the result. / / .badge-status* were pastel gradients (#d1fae5 -> #a7f3d0 etc.) — light pills that glare on a dark ground. Re-tinted to match section D. / :root[data-theme="dark"] .badge-status-active, :root[data-theme="dark"] .badge-status-success { background: var(--admin-success-light) !important; color: var(--admin-success) !important; border: 1px solid rgba(52,211,153,.30) !important; } :root[data-theme="dark"] .badge-status-pending, :root[data-theme="dark"] .badge-status-warning { background: var(--admin-warning-light) !important; color: var(--admin-warning) !important; border: 1px solid rgba(251,191,36,.30) !important; } :root[data-theme="dark"] .badge-status-inactive, :root[data-theme="dark"] .badge-status-neutral { background: rgba(148,163,184,.12) !important; color: #cbd5e1 !important; border: 1px solid rgba(148,163,184,.28) !important; } :root[data-theme="dark"] .badge-status-danger, :root[data-theme="dark"] .badge-status-failed { background: var(--admin-danger-light) !important; color: var(--admin-danger) !important; border: 1px solid rgba(248,113,113,.30) !important; } / .btn-action was #64748b on a dark card (~2.7:1) and flashed a white square on hover, because its :hover set background:#f1f5f9. / :root[data-theme="dark"] .btn-action { color: var(--admin-text-muted) !important; background: transparent !important; border: 1px solid var(--admin-border) !important; } :root[data-theme="dark"] .btn-action:hover, :root[data-theme="dark"] .btn-action:focus-visible { background: var(--admin-surface-3) !important; color: var(--admin-text) !important; border-color: var(--admin-border-strong) !important; } / .stats-pill* used #2563eb on #1e293b (~2.2:1) and #dc2626 (worse). / :root[data-theme="dark"] .stats-pill-primary { background: var(--admin-primary-light) !important; color: var(--admin-primary) !important; } :root[data-theme="dark"] .stats-pill-success { background: var(--admin-success-light) !important; color: var(--admin-success) !important; } :root[data-theme="dark"] .stats-pill-warning { background: var(--admin-warning-light) !important; color: var(--admin-warning) !important; } :root[data-theme="dark"] .stats-pill-danger { background: var(--admin-danger-light) !important; color: var(--admin-danger) !important; } :root[data-theme="dark"] .stats-pill-info { background: var(--admin-info-light) !important; color: var(--admin-info) !important; } :root[data-theme="dark"] .stats-pill-secondary { background: rgba(148,163,184,.12) !important; color: #cbd5e1 !important; } / ── F. Focus, inputs, scrollbars, chrome ─────────────────────────────────── Replacement focus rings across the panel composite to 1.02–1.68:1 against the surfaces they sit on — i.e. invisible, which is a keyboard-navigation failure as much as a cosmetic one. One visible ring, both themes. / .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--admin-primary) !important; outline-offset: 2px !important; box-shadow: none !important; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--admin-surface-2) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } :root[data-theme="dark"] .form-control::placeholder { color: var(--admin-text-faint) !important; } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--admin-surface-2) !important; border-color: var(--admin-primary) !important; color: var(--admin-text) !important; } / The Top Products period (style.css:25486, opacity:0) and paints the box on an `` sibling — the pattern base.jet:468 uses. login-form.jet never carried that element, so the control had NO visible box in either theme; it is added there now. style.css:25510 fills the box #EBEDF2 and :25548 fills the checked state with the Aurora navy #1F3BB3, both pinned, so the dark variants are declared here. `border: none` in the base rule means the outline has to come from an inset shadow rather than border-color. / :root[data-theme="dark"] .auth .form-check .form-check-label input[type=checkbox] + .input-helper:before { background: var(--admin-bg) !important; box-shadow: inset 0 0 0 1px var(--admin-border-strong) !important; } :root[data-theme="dark"] .auth .form-check .form-check-label input[type=checkbox]:checked + .input-helper:before { background: var(--admin-primary) !important; box-shadow: none !important; } / The tick is a themify glyph coloured #ffffff (:25545) — 2.2:1 on the #60a5fa fill. Flipped to the page ground for ~8:1. / :root[data-theme="dark"] .auth .form-check .form-check-label input[type=checkbox]:checked + .input-helper:after { color: var(--admin-bg) !important; } / --- 2FA backup-code modal, chrome ------------------------------------------ admin-theme.css:3593 and :3637 paint .modal-header and .modal-footer with hardcoded light fills (an #f8fafc→#f1f5f9 gradient, and #f8fafc) and neither has a dark variant, so the dialog rendered as a dark body sandwiched between two white bars. The title vanished with it: `:root[data-theme="dark"] h5` (:143) is (0,2,1) and outranks `.modal-header .modal-title` (0,2,0), so the

took the light body colour and sat on a white bar. Scoped to this dialog deliberately. The same two rules affect EVERY admin modal the same way, but that is a panel-wide change to verify screen by screen, not something to fold into the login fix. */ :root[data-theme="dark"] #backupCodeModal .modal-content { background-color: var(--admin-surface-1) !important; } :root[data-theme="dark"] #backupCodeModal .modal-header { background: var(--admin-surface-2) !important; border-bottom-color: var(--admin-border) !important; } :root[data-theme="dark"] #backupCodeModal .modal-footer { background: var(--admin-surface-2) !important; border-top-color: var(--admin-border) !important; } :root[data-theme="dark"] #backupCodeModal .modal-title { color: var(--admin-text) !important; } :root[data-theme="dark"] #backupCodeModal .modal-title i, :root[data-theme="dark"] #backupCodeModal .modal-title .mdi { color: var(--admin-primary) !important; } :root[data-theme="dark"] #backupCodeModal .modal-body .text-muted { color: var(--admin-text-muted) !important; }