/** * Dai-Ra Dashboard - Custom Styles * Dark mode + Animations + Micro-interactions */ /* ========== CSS Custom Properties ========== */ :root { --bg-primary: #f9fafb; --bg-card: #ffffff; --bg-card-hover: #f3f4f6; --bg-input: #f9fafb; --bg-sidebar: #ffffff; --bg-header: rgba(255,255,255,0.8); --bg-skeleton: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 20%, #f5f5f5 40%, #e8e8e8 60%, #f0f0f0 80%, #e8e8e8 100%); --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --border-color: #f3f4f6; --border-input: #e5e7eb; --shadow-card: 0 1px 3px rgba(0,0,0,0.04); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.06); --modal-backdrop: rgba(0,0,0,0.4); --scrollbar-thumb: #ddd; --scrollbar-hover: #bbb; --table-row-hover: #f9fafb; --pink-bg-subtle: #FBF4F7; } /* Arabic locale only: Arabic UI fonts (see index.html + DASH_I18N locale-ar on ) */ html.locale-ar, html.locale-ar body { font-family: 'Alexandria', 'Almarai', 'Cairo', 'Noto Kufi Arabic', ui-sans-serif, system-ui, sans-serif; } html.locale-ar .font-sans { font-family: 'Alexandria', 'Almarai', 'Cairo', 'Noto Kufi Arabic', ui-sans-serif, system-ui, sans-serif; } html.dark { --bg-primary: #0c0c1d; --bg-card: #151528; --bg-card-hover: #1c1c35; --bg-input: #1a1a30; --bg-sidebar: #111125; --bg-header: rgba(17,17,37,0.85); --bg-skeleton: linear-gradient(90deg, #1a1a30 0%, #222240 20%, #1e1e38 40%, #222240 60%, #1a1a30 80%, #222240 100%); --text-primary: #e8e8f0; --text-secondary: #c0c0d0; --text-muted: #8888a0; --text-faint: #5a5a78; --border-color: #222240; --border-input: #2a2a48; --shadow-card: 0 1px 4px rgba(0,0,0,0.3); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.4); --modal-backdrop: rgba(0,0,0,0.6); --scrollbar-thumb: #333355; --scrollbar-hover: #444468; --table-row-hover: #1a1a30; --pink-bg-subtle: rgba(176,30,101,0.12); } /* ========== Scrollbar ========== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } /* ========== Base ========== */ html { scroll-behavior: smooth; } body { min-height: 100vh; background-color: var(--bg-primary) !important; color: var(--text-primary); transition: background-color 0.35s ease, color 0.35s ease; } /* ========== Dark Mode Overrides ========== */ html.dark .bg-white { background-color: var(--bg-card) !important; } html.dark .bg-gray-50 { background-color: var(--bg-primary) !important; } html.dark .bg-gray-100 { background-color: var(--bg-card-hover) !important; } html.dark .text-gray-900 { color: var(--text-primary) !important; } html.dark .text-gray-800 { color: var(--text-primary) !important; } html.dark .text-gray-700 { color: var(--text-secondary) !important; } html.dark .text-gray-600 { color: var(--text-muted) !important; } html.dark .text-gray-500 { color: var(--text-muted) !important; } html.dark .text-gray-400 { color: var(--text-faint) !important; } html.dark .text-gray-300 { color: var(--text-faint) !important; } html.dark .border-gray-50 { border-color: var(--border-color) !important; } html.dark .border-gray-100 { border-color: var(--border-color) !important; } html.dark .border-gray-200 { border-color: var(--border-input) !important; } html.dark input, html.dark textarea, html.dark select { background-color: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--text-faint) !important; } html.dark .bg-daira-pink-bg { background-color: var(--pink-bg-subtle) !important; } html.dark .bg-daira-pink-light { background-color: var(--pink-bg-subtle) !important; } html.dark .shadow-sm { box-shadow: var(--shadow-card) !important; } html.dark .shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } html.dark .shadow-2xl { box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important; } html.dark .bg-green-50 { background-color: rgba(22,163,74,0.12) !important; } html.dark .bg-blue-50 { background-color: rgba(37,99,235,0.12) !important; } html.dark .bg-purple-50 { background-color: rgba(124,58,237,0.12) !important; } html.dark .bg-orange-50 { background-color: rgba(234,88,12,0.12) !important; } html.dark .bg-red-50 { background-color: rgba(220,38,38,0.12) !important; } html.dark .bg-yellow-50 { background-color: rgba(234,179,8,0.1) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--bg-card-hover) !important; } html.dark .hover\:bg-gray-200:hover { background-color: #2a2a48 !important; } html.dark .hover\:bg-gray-50:hover { background-color: var(--bg-card-hover) !important; } html.dark .hover\:bg-red-50:hover { background-color: rgba(220,38,38,0.15) !important; } html.dark .bg-white\/80, html.dark [class*="bg-white/80"] { background-color: var(--bg-header) !important; } html.dark .bg-gray-50\/95, html.dark [class*="bg-gray-50/95"] { background-color: rgba(12,12,29,0.97) !important; } html.dark .backdrop-blur-md { backdrop-filter: blur(12px) saturate(1.2); } html.dark .status-pending { background-color: rgba(234,88,12,0.15); color: #fb923c; } html.dark .status-contacted { background-color: rgba(37,99,235,0.15); color: #60a5fa; } html.dark .status-completed { background-color: rgba(22,163,74,0.15); color: #4ade80; } html.dark .status-cancelled { background-color: rgba(220,38,38,0.15); color: #f87171; } /* Brand logos: white in dark mode (sidebar + menubar) */ img[data-dashboard-logo], img.dashboard-brand-logo { transition: filter 0.25s ease; } html.dark img[data-dashboard-logo], html.dark img.dashboard-brand-logo { filter: brightness(0) invert(1); } /* ========== Sidebar Nav Links ========== */ #sidebar .nav-link { color: var(--text-muted); position: relative; overflow: hidden; transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s; } #sidebar .nav-link::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 12px; background: var(--pink-bg-subtle); opacity: 0; transform: scale(0.92); transition: opacity 0.25s, transform 0.25s; } #sidebar .nav-link:hover::before { opacity: 1; transform: scale(1); } /* Light mode only: لون الخط عند الـ hover = #232323 (إجبار الظهور) */ html:not(.dark) #sidebar .nav-link:hover:not(.active) { color: #232323 !important; -webkit-text-fill-color: #232323 !important; opacity: 1 !important; } html:not(.dark) #sidebar .nav-link:hover:not(.active) svg { color: #232323 !important; stroke: #232323 !important; opacity: 1 !important; } /* Dark mode: لون وردي عند الـ hover */ html.dark #sidebar .nav-link:hover:not(.active) { color: #e879a8 !important; } html.dark #sidebar .nav-link:hover:not(.active) svg { color: #e879a8 !important; stroke: #e879a8 !important; } #sidebar .nav-link.active { background-color: #B01E65; color: #fff !important; box-shadow: 0 4px 14px rgba(176, 30, 101, 0.3); transform: scale(1); } #sidebar .nav-link.active::before { display: none; } #sidebar .nav-link.active svg { color: #fff !important; stroke: #fff !important; } #sidebar .nav-link span, #sidebar .nav-link svg, #sidebar .nav-link .nav-link-text { position: relative; z-index: 1; } /* Light mode: لون نص الزر عند الـ hover (الـ span يبقى فوق ::before) */ html:not(.dark) #sidebar .nav-link:hover:not(.active) .nav-link-text { color: #232323 !important; -webkit-text-fill-color: #232323 !important; } /* ========== Dark Mode Toggle Button ========== */ .dark-mode-toggle { position: relative; width: 48px; height: 26px; border-radius: 13px; background: #e5e7eb; border: none; cursor: pointer; transition: background 0.35s ease; flex-shrink: 0; } html.dark .dark-mode-toggle { background: #B01E65; } .dark-mode-toggle .toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.35s cubic-bezier(0.68, -0.2, 0.27, 1.2); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } html.dark .dark-mode-toggle .toggle-knob { transform: translateX(22px); } .toggle-knob svg { width: 12px; height: 12px; transition: opacity 0.25s; } .toggle-knob .icon-sun { color: #f59e0b; } .toggle-knob .icon-moon { color: #B01E65; display: none; } html.dark .toggle-knob .icon-sun { display: none; } html.dark .toggle-knob .icon-moon { display: block; } /* ========== Modal Animations ========== */ .modal-overlay:not(.hidden) > .modal-box, .modal-overlay:not(.hidden) > div > .modal-box { animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay:not(.hidden) > div:first-child { animation: fadeIn 0.25s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: scale(0.93) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ========== Toast Animation ========== */ .toast-enter { animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .toast-exit { animation: toastOut 0.3s ease-in forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(80px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(80px) scale(0.9); } } /* ========== Image Upload Hover ========== */ .img-upload-zone:hover { border-color: #B01E65; background-color: var(--pink-bg-subtle); } /* ========== Table Rows ========== */ tbody tr { transition: background-color 0.2s ease; } tbody tr:hover { background-color: var(--table-row-hover); } /* ========== Feature/Spec Row Remove ========== */ .row-remove-btn { opacity: 0; transition: opacity 0.2s; } .dynamic-row:hover .row-remove-btn { opacity: 1; } /* ========== Sidebar + header (mobile) ========== */ .dashboard-sidebar-backdrop { -webkit-tap-highlight-color: transparent; } html.dark .dashboard-sidebar-backdrop { background-color: rgba(0, 0, 0, 0.55); } @media (max-width: 1023px) { #sidebar { transform: translateX(-100%); padding-top: env(safe-area-inset-top); } #sidebar.open { transform: translateX(0); } /* Fallback if Tailwind classes are overridden */ #mainContent { margin-left: 0 !important; } body.dashboard-sidebar-open { overflow: hidden; overscroll-behavior: none; } body.dashboard-sidebar-open .dashboard-sidebar-backdrop { opacity: 1 !important; pointer-events: auto !important; } } /* Very narrow phones: compact theme toggle */ @media (max-width: 380px) { .dark-mode-toggle { width: 42px; height: 24px; } .dark-mode-toggle .toggle-knob { width: 18px; height: 18px; top: 3px; left: 3px; } html.dark .dark-mode-toggle .toggle-knob { transform: translateX(18px); } .toggle-knob svg { width: 11px; height: 11px; } } /* ========== Status Badges ========== */ .status-pending { background-color: #FFF7ED; color: #EA580C; transition: all 0.2s; } .status-contacted { background-color: #EFF6FF; color: #2563EB; transition: all 0.2s; } .status-completed { background-color: #F0FDF4; color: #16A34A; transition: all 0.2s; } .status-cancelled { background-color: #FEF2F2; color: #DC2626; transition: all 0.2s; } /* ========== Dashboard Card ========== */ .dashboard-card { transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; border: 1px solid var(--border-color); } .dashboard-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } html.dark .dashboard-card:hover { border-color: #333358; } /* ========== Button Press Effect ========== */ button:active:not(:disabled), .btn-press:active { transform: scale(0.97); } button { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== Page Section Transition ========== */ .page-section { animation: pageEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .page-section.hidden { animation: none; } @keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========== Stagger Animation for Cards ========== */ .stagger-item { opacity: 0; transform: translateY(16px); animation: staggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes staggerIn { to { opacity: 1; transform: translateY(0); } } /* ========== Stat Number Counter ========== */ .stat-number { display: inline-block; transition: transform 0.3s; } .stat-number.counting { animation: statPulse 0.6s ease; } @keyframes statPulse { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } } /* ========== Skeleton Loading ========== */ .skeleton { background: var(--bg-skeleton); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 12px; } .skeleton-circle { border-radius: 9999px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .content-loaded { animation: content-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes content-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #mainSkeleton { transition: opacity 0.3s ease-out; } #mainSkeleton.skeleton-hidden { opacity: 0; pointer-events: none; } /* ========== Page-level skeleton (Lazy loaded pages) ========== */ #categoriesSkeleton, #productsSkeleton, #usersSkeleton, #ordersSkeleton { transition: opacity 0.2s ease; } #categoriesContent, #productsContent, #usersContent, #ordersContent { transition: opacity 0.25s ease; } #categoriesContent.hidden, #productsContent.hidden, #usersContent.hidden, #ordersContent.hidden { display: none !important; } /* ========== Ripple effect on Quick Action buttons ========== */ .ripple-btn { position: relative; overflow: hidden; } .ripple-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; } .ripple-btn:active::after { opacity: 1; transition: opacity 0s; } /* ========== Sidebar transition smoothness ========== */ #sidebar { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease, border-color 0.35s ease; background-color: var(--bg-sidebar) !important; border-color: var(--border-color) !important; } /* ========== Header ========== */ header.sticky { background-color: var(--bg-header) !important; border-color: var(--border-color) !important; transition: background-color 0.35s, border-color 0.35s; } /* ========== Focus ring improvements ========== */ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(176, 30, 101, 0.15); } /* ========== Tooltip-style hover for action buttons ========== */ .action-tooltip { position: relative; } .action-tooltip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text-primary); color: var(--bg-card); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .action-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========== Notification dot pulse ========== */ .notification-dot { animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(176,30,101,0.4); } 50% { box-shadow: 0 0 0 6px rgba(176,30,101,0); } } /* ========== Smooth color transitions for all elements ========== */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0s; } html.transitioning *, html.transitioning *::before, html.transitioning *::after { transition-duration: 0.35s !important; transition-timing-function: ease !important; } /* روابط الـ sidebar: لا ننتقل على اللون حتى لا يظهر النص أبيض أثناء الـ hover */ #sidebar .nav-link, #sidebar .nav-link * { transition-property: background-color, border-color, box-shadow, opacity, transform !important; } /* ========== Empty state bounce ========== */ .empty-state-icon { animation: gentleBounce 3s ease-in-out infinite; } @keyframes gentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========== Login page specific ========== */ .login-card { animation: loginEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes loginEnter { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-header { position: relative; overflow: hidden; } .login-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); animation: loginShimmer 4s ease-in-out infinite; } @keyframes loginShimmer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20%, 20%); } } /* ========== Dark mode login overrides ========== */ html.dark .login-card-wrap .bg-white { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } /* ========== Loading spinner for buttons ========== */ .btn-loading { position: relative; color: transparent !important; } .btn-loading::after { content: ''; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: btnSpin 0.6s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } }