/* LOF CSS bundle v1.2.2 */ /* Generated: 2026-02-04 21:01:43 */ /* Source: css/foundation/variables.css */ /* =================================================================== */ /* DESIGN SYSTEM FOUNDATION - CSS CUSTOM PROPERTIES & DESIGN TOKENS */ /* =================================================================== */ :root { /* Font System */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* =================================================================== */ /* COLOR SYSTEM */ /* =================================================================== */ /* Color System - Primary */ --lof-primary-50: #ecfdf5; --lof-primary-100: #d1fae5; --lof-primary-200: #a7f3d0; --lof-primary-300: #6ee7b7; --lof-primary-400: #34d399; --lof-primary-500: #10b981; --lof-primary-600: #059669; --lof-primary-700: #047857; --lof-primary-800: #065f46; --lof-primary-900: #064e3b; --lof-primary-950: #172554; /* Color System - Neutral */ --lof-neutral-0: #ffffff; --lof-neutral-50: #f8fafc; --lof-neutral-100: #f1f5f9; --lof-neutral-200: #e2e8f0; --lof-neutral-300: #cbd5e1; --lof-neutral-400: #94a3b8; --lof-neutral-500: #64748b; --lof-neutral-600: #475569; --lof-neutral-700: #334155; --lof-neutral-800: #1e293b; --lof-neutral-900: #0f172a; /* Semantic Colors */ --lof-success: var(--lof-primary-600); --lof-success-bg: var(--lof-primary-50); --lof-warning: #f59e0b; --lof-warning-bg: #fef3c7; --lof-error: #ef4444; --lof-error-bg: #fef2f2; --lof-info: #3b82f6; --lof-info-bg: #eff6ff; /* Extended Semantic Colors */ --lof-danger: #ef4444; --lof-danger-600: #dc2626; --lof-danger-shadow: rgba(239,68,68,0.4); --lof-success: #22c55e; --lof-success-bg: rgba(34,197,94,0.15); --lof-danger-bg: rgba(239,68,68,0.15); /* =================================================================== */ /* TYPOGRAPHY SCALE */ /* =================================================================== */ --lof-text-xs: 0.75rem; --lof-text-sm: 0.875rem; --lof-text-base: 1rem; --lof-text-lg: 1.125rem; --lof-text-xl: 1.25rem; --lof-text-2xl: 1.5rem; --lof-text-3xl: 1.875rem; --lof-text-4xl: 2.25rem; /* =================================================================== */ /* SPACING SCALE */ /* =================================================================== */ --lof-space-1: 0.25rem; --lof-space-2: 0.5rem; --lof-space-3: 0.75rem; --lof-space-4: 1rem; --lof-space-5: 1.25rem; --lof-space-6: 1.5rem; --lof-space-8: 2rem; --lof-space-10: 2.5rem; --lof-space-12: 3rem; --lof-space-16: 4rem; /* =================================================================== */ /* BORDER RADIUS VALUES */ /* =================================================================== */ --lof-radius-sm: 0.375rem; --lof-radius-md: 0.5rem; --lof-radius-lg: 0.75rem; --lof-radius-xl: 1rem; --lof-radius-2xl: 1.5rem; --lof-radius-full: 9999px; /* =================================================================== */ /* SHADOW DEFINITIONS */ /* =================================================================== */ --lof-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --lof-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --lof-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --lof-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --lof-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* =================================================================== */ /* TRANSITION TIMINGS */ /* =================================================================== */ --lof-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --lof-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --lof-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --lof-transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* =================================================================== */ /* Z-INDEX SCALE */ /* =================================================================== */ --lof-z-base: 1; --lof-z-dropdown: 1000; --lof-z-sticky: 1020; --lof-z-fixed: 1030; --lof-z-modal-backdrop: 1040; --lof-z-modal: 1050; --lof-z-popover: 1060; --lof-z-tooltip: 1070; --lof-z-toast: 1080; /* =================================================================== */ /* LAYOUT VARIABLES */ /* =================================================================== */ --lof-safe-top: env(safe-area-inset-top, 0px); --lof-safe-bottom: env(safe-area-inset-bottom, 0px); --lof-income-bar-height: 72px; --lof-income-bar-total-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); /* =================================================================== */ /* KPI & GRADIENT DEFINITIONS */ /* =================================================================== */ --lof-kpi-income: linear-gradient(135deg,#0ea5e9,#2563eb 70%); --lof-kpi-orders: linear-gradient(135deg,#16a34a,#15803d 70%); --lof-kpi-15m: linear-gradient(135deg,#f59e0b,#d97706 70%); --lof-kpi-aov: linear-gradient(135deg,#6366f1,#4338ca 70%); /* KPI Sizing Tokens */ --lof-kpi-font: 28px; --lof-kpi-label: 9px; --lof-kpi-sub: 13px; --lof-kpi-card-padding: 18px 20px 22px; /* Chip Colors */ --lof-chip-bg: #f1f5f9; --lof-chip-bg-dark: #334155; --lof-chip-total-fg: #19ef2b; --lof-chip-total-bg: rgba(25,239,43,0.12); --lof-chip-time-fg: #334155; --lof-chip-time-bg: rgba(2,6,23,0.06); /* =================================================================== */ /* SCROLLBAR VARIABLES */ /* =================================================================== */ --scrollbar-thumb: color-mix(in srgb, var(--lof-primary) 30%, transparent); --scrollbar-track: transparent; /* =================================================================== */ /* PROGRESS BAR VARIABLES */ /* =================================================================== */ --bar-height: 12px; --bar-color: var(--lof-primary); --bar-gradient-start: var(--lof-primary); --bar-gradient-end: color-mix(in srgb, var(--lof-primary) 90%, #000); --bar-shadow: color-mix(in srgb, var(--lof-primary) 40%, transparent); --bar-hover-elevation: var(--lof-shadow-md); /* Sparkline Bar Variables */ --sb-track: rgba(255, 255, 255, 0.35); --sb-start: #14b8a6; --sb-mid: #06b6d4; --sb-end: #0ea5e9; --sb-glow: 0 4px 12px rgba(14, 165, 233, 0.35) inset; /* =================================================================== */ /* THEME COLOR DEFINITIONS - DARK MODE (DEFAULT) */ /* =================================================================== */ /* Background Colors - Dark */ --lof-bg: #0d1117; /* Near-black */ --lof-surface: var(--lof-neutral-900); --lof-surface-alt: var(--lof-neutral-800); --lof-surface-elevated: var(--lof-neutral-800); --lof-surface-hover: var(--lof-neutral-50); --lof-surface-active: var(--lof-neutral-100); /* Border Colors - Dark */ --lof-border: var(--lof-neutral-700); --lof-border-light: var(--lof-neutral-800); --lof-border-strong: var(--lof-neutral-600); /* Text Colors - Dark */ --lof-text: var(--lof-neutral-100); --lof-text-muted: var(--lof-neutral-400); --lof-text-subtle: var(--lof-neutral-500); --lof-text-on-primary: var(--lof-neutral-0); /* Glass Morphism - Dark */ --lof-glass-bg: rgba(15, 23, 42, 0.75); --lof-glass-border: rgba(255, 255, 255, 0.1); --lof-glass-blur: blur(12px) saturate(180%); --lof-glass-dark-bg: rgba(255, 255, 255, 0.1); --lof-glass-dark-border: rgba(255, 255, 255, 0.2); /* Shimmer Effect */ --lof-shimmer-color: var(--lof-neutral-200); /* Dark Shadow Colors */ --lof-shadow-light: rgba(0,0,0,0.3); --lof-shadow-medium: rgba(0,0,0,0.4); --lof-shadow-strong: rgba(0,0,0,0.6); /* Primary Shadow */ --lof-primary-shadow: rgba(37,99,235,0.3); /* Extended Theme Colors */ --lof-primary: #1d60d6; --lof-primary-hover: #114aab; --lof-accent: #0e7a42; --lof-accent-hover: #066034; --lof-focus: #2563eb; --lof-gradient-bar: linear-gradient(90deg,#0f4a99,#1d60d6 60%,#2aa7ff); /* RGB Color Values for rgba() mixing */ --lof-primary-rgb: 29, 96, 214; --lof-success-rgb: 34, 197, 94; --lof-danger-rgb: 239, 68, 68; --lof-warning-rgb: 245, 158, 11; --lof-info-rgb: 59, 130, 246; /* Additional Color Overrides */ --lof-primary-200: #bfdbfe; --lof-primary-300: #93c5fd; } /* =================================================================== */ /* THEME COLOR DEFINITIONS - LIGHT MODE */ /* =================================================================== */ html[data-theme="light"] { /* Surface Colors - Light */ --lof-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); --lof-surface: rgba(255,255,255,0.98); --lof-surface-alt: var(--lof-neutral-50); --lof-surface-elevated: var(--lof-neutral-0); /* Border Colors - Light */ --lof-border: var(--lof-neutral-200); --lof-border-light: var(--lof-neutral-100); --lof-border-strong: var(--lof-neutral-300); /* Text Colors - Light (Enhanced Contrast) */ --lof-text: var(--lof-neutral-800); --lof-text-muted: var(--lof-neutral-600); --lof-text-subtle: var(--lof-neutral-500); /* Glass Morphism - Light */ --lof-glass-bg: rgba(255, 255, 255, 0.85); --lof-glass-border: rgba(148, 163, 184, 0.2); /* Light theme semantic colors */ --lof-success: #059669; --lof-success-bg: rgba(5, 150, 105, 0.1); --lof-danger: #dc2626; --lof-danger-bg: rgba(220, 38, 38, 0.1); /* Light shadows - Enhanced Intensity */ --lof-shadow-light: rgba(0,0,0,0.10); --lof-shadow-medium: rgba(0,0,0,0.15); --lof-shadow-strong: rgba(0,0,0,0.20); --lof-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --lof-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --lof-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -3px rgba(0, 0, 0, 0.1); --lof-shadow-xl: 0 20px 30px -6px rgba(0, 0, 0, 0.18), 0 8px 12px -6px rgba(0, 0, 0, 0.12); --lof-shadow-2xl: 0 30px 60px -15px rgba(0, 0, 0, 0.3); } /* =================================================================== */ /* MEDIA QUERY OVERRIDES */ /* =================================================================== */ /* Tablet Responsive Variables */ @media (max-width: 768px) { :root { --lof-income-bar-height: 64px; --lof-seller-bar-height: 40px; } } /* Mobile Responsive Variables */ @media (max-width: 480px) { :root { --lof-income-bar-height: 56px; --lof-seller-bar-height: 36px; } } /* =================================================================== */ /* LIGHT MODE MEDIA QUERY OVERRIDES */ /* =================================================================== */ html[data-theme="light"] { :root { --lof-bg: #f8fafc; --lof-surface: rgba(255,255,255,0.9); --lof-surface-alt: rgba(248,250,252,0.95); --lof-border: rgba(0,0,0,0.08); --lof-text: #1e293b; --lof-text-muted: #64748b; --lof-glass-bg: rgba(255,255,255,0.85); --lof-glass-border: rgba(0,0,0,0.1); } } /* =================================================================== */ /* HIGH CONTRAST MODE OVERRIDES */ /* =================================================================== */ [data-high-contrast] { --lof-border: #1e293b; --lof-text: #0f172a; --lof-text-muted: #1e293b; } /* High Contrast Mode */ @media (prefers-contrast: high) { :root { --lof-border: #000000; --lof-text: #000000; --lof-text-muted: #333333; --lof-primary-600: #0000ff; --lof-success: #008000; --lof-error: #ff0000; --lof-warning: #ff8c00; } } /* =================================================================== */ /* COMPACT DARK THEME OVERRIDE */ /* =================================================================== */ [data-theme="dark"] { --lof-bg: #0f172a; --lof-surface: #1e293b; --lof-surface-alt: #24324a; --lof-border: #334155; --lof-text: #f1f5f9; --lof-text-muted: #94a3b8; } /* =================================================================== */ /* ALTERNATIVE THEME COLORS */ /* =================================================================== */ /* Alternative color scheme used in some sections */ :root { --lof-bg: #f5f7fa; --lof-surface: #ffffff; --lof-surface-alt: #eef3f7; --lof-border: #c5d0db; /* stronger border contrast */ --lof-primary: #1d60d6; /* neutral primary */ --lof-primary-hover: #114aab; /* neutral primary hover */ --lof-accent: #0e7a42; --lof-accent-hover: #066034; --lof-text: #111827; --lof-text-muted: #445268; /* unified muted */ --lof-error: #b42318; --lof-warning: #b35c00; --lof-focus: #2563eb; --lof-gradient-bar: linear-gradient(90deg,#0f4a99,#1d60d6 60%,#2aa7ff); --lof-success: #00fc65; --lof-danger: #b42318; --lof-info: #0b5fa8; } /* =================================================================== */ /* DYNAMIC PROPERTIES */ /* =================================================================== */ /* These properties are calculated or use attr() functions */ :root { --p: calc( (var(--w,0) * 1) ); --target-width: attr(data-percentage %); } /* Source: css/foundation/base.css */ /* =================================================================== */ /* BASE STYLES & FOUNDATIONAL HTML ELEMENT STYLING */ /* =================================================================== */ /* =================================================================== */ /* FOUC PREVENTION & THEME FLASH FIX */ /* =================================================================== */ /* Prevent flash of light theme - default to dark immediately */ html { background-color: #0d1117 !important; color: #f1f5f9 !important; transition: none !important; } /* Ensure content is visible after theme loads */ html[data-theme-loaded] { visibility: visible !important; opacity: 1 !important; } /* Prevent theme transition flash on load */ html { transition: none !important; } /* Enable smooth transitions only after theme is loaded */ html[data-theme-loaded] { transition: background-color 0.2s ease, color 0.2s ease; } html[data-theme-loaded] body { transition: background-color 0.2s ease, color 0.2s ease; } /* =================================================================== */ /* WORDPRESS ADMIN BAR OVERRIDES */ /* =================================================================== */ /* Hide WP admin bar for kiosk mode */ #wpadminbar { display: none !important; } html { margin-top: 0 !important; } /* =================================================================== */ /* CORE HTML ELEMENT STYLES */ /* =================================================================== */ /* Base body and html styling */ body, html { background-color: var(--lof-bg); color: var(--lof-text); font-family: var(--font-sans); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { padding-top: 0 !important; } /* Font family fallback for individual body selector */ body { font-family: var(--font-sans); } /* =================================================================== */ /* GLOBAL BOX-SIZING RESET */ /* =================================================================== */ /* Ensure proper box-sizing for all elements */ *, *::before, *::after { box-sizing: border-box; } /* =================================================================== */ /* OVERFLOW & SCROLL BEHAVIOR */ /* =================================================================== */ /* Let browser handle scrolling naturally */ html, body { max-width: 100%; } /* Smooth scrolling for mobile */ html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Better scrolling behavior on mobile */ body, html { scroll-behavior: smooth; overscroll-behavior-y: none; } /* Improved scroll performance */ * { scroll-behavior: smooth; } /* =================================================================== */ /* FULLSCREEN MOBILE APP SUPPORT */ /* =================================================================== */ /* Handle safe areas for devices with notches */ body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* =================================================================== */ /* STICKY FOOTER LAYOUT SUPPORT */ /* =================================================================== */ /* Natural footer layout - footer flows at end of page content */ /* Content containers flow naturally without flexbox constraints */ /* Mobile sticky footer adjustments */ @media (max-width: 640px) { body.has-lof-footer { padding-bottom: 0; min-height: 100vh; display: flex; flex-direction: column; } } /* =================================================================== */ /* ACCESSIBILITY & SCREEN READER UTILITIES */ /* =================================================================== */ /* Screen reader only text */ .screen-reader-text { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .screen-reader-text:focus { clip: auto !important; height: auto; width: auto; padding: 10px; background: #fff; z-index: var(--lof-z-focus); } /* Alternative screen reader utility */ .lof-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); clip-path: inset(50%); white-space: nowrap; border: 0; } /* =================================================================== */ /* FOCUS MANAGEMENT */ /* =================================================================== */ /* Better focus indicators for accessibility */ a:focus-visible, button:focus-visible, [role=button]:focus-visible { outline: 3px solid var(--lof-focus); outline-offset: 2px; } /* =================================================================== */ /* REDUCED MOTION SUPPORT */ /* =================================================================== */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { .order-card, .feed-controls-bar { animation: none; transition: none; } } /* =================================================================== */ /* WORDPRESS & CMS OVERRIDES */ /* =================================================================== */ /* Hide WordPress edit links in kiosk mode */ .post-edit-link, a.post-edit-link, .edit-link { display: none !important; } /* Let browser handle scrolling naturally for reports pages */ /* =================================================================== */ /* LAYOUT CONTAINER FUNDAMENTALS */ /* =================================================================== */ /* Main feed wrapper base styles */ #live-feed-wrapper { margin-top: 0; box-sizing: border-box; font-family: inherit; transition: margin-top var(--lof-transition-slow); position: relative; container-type: inline-size; } #live-feed-wrapper, #live-order-feed-container { max-width: 100%; box-sizing: border-box; } /* =================================================================== */ /* INSTALL PAGE BASE STYLES */ /* =================================================================== */ .lof-install-page { min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); color: #1e293b; font-family: var(--lof-font-family); line-height: 1.6; padding: 0; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; } /* =================================================================== */ /* REPORTS PAGE BASE STYLES */ /* =================================================================== */ .lof-reports-page, .lof-report-daily-page, .lof-report-monthly-page { font-family: var(--font-sans); padding: clamp(24px, 3vw, 48px); max-width: 1400px; margin: 0 auto; background: var(--lof-bg); min-height: 100vh; display: block; opacity: 0; transition: opacity 0.3s ease-in-out; } /* Reports page sections overflow prevention */ .lof-reports-page .lof-trend-section, .lof-reports-page .lof-sellers-section, .lof-reports-page .lof-reports-orders { max-width: 100%; width: 100%; box-sizing: border-box; margin: 0 auto !important; justify-content: center !important; } /* Reports page responsive elements */ .lof-reports-page .lof-panels-scroll > section, .lof-reports-page .lof-kpi, .lof-reports-page .lof-order-row { max-width: 100%; box-sizing: border-box; } /* Make media responsive in reports */ .lof-reports-page img, .lof-reports-page video, .lof-reports-page canvas, .lof-reports-page svg { max-width: 100%; height: auto; } /* =================================================================== */ /* MOBILE RESPONSIVE BASE ADJUSTMENTS */ /* =================================================================== */ /* Mobile body adjustments */ /* @media (max-width: 768px) { body { padding-left: 10px; padding-right: 10px; } }*/ /* Ultra mobile adjustments */ @media (max-width: 600px) { .lof-reports-page { padding: 16px 14px; } } /* Safe area adjustments for mobile bottom nav */ @media (max-width: 820px) { .lof-reports-page { padding-bottom: calc(90px + var(--lof-safe-bottom)); } } /* =================================================================== */ /* THEME-SPECIFIC BASE OVERRIDES */ /* =================================================================== */ /* Light theme base overrides handled by variables.css */ /* Dark theme base overrides */ [data-theme="dark"] body, [data-theme="dark"] html { background: var(--lof-bg); color: var(--lof-text); } /* Light theme base overrides */ html[data-theme="light"] body, html[data-theme="light"] html { background: var(--lof-bg); color: var(--lof-text); } /* Alternative theme base styles */ body, html { background: var(--lof-bg); color: var(--lof-text); } /* =================================================================== */ /* PERFORMANCE OPTIMIZATIONS */ /* =================================================================== */ /* GPU acceleration for smooth animations on key elements */ .load-more-btn, .burger-btn, .seller-bar, .income-bar, .start-feed-box, .lof-refresh-indicator, .lof-swipe-left-hint, .lof-swipe-right-hint { will-change: transform; transform: translateZ(0); /* Force GPU layer */ } /* Hardware acceleration for performance-critical elements */ .lof-kpis-scroll .lof-kpi, .lof-mobile-nav button { will-change: transform; transform: translateZ(0); /* Force hardware acceleration */ } /* =================================================================== */ /* UTILITY CLASSES */ /* =================================================================== */ /* Visibility utilities */ .hidden { opacity: 0; pointer-events: none; } .lof-hidden { display: none; } /* Mobile tap highlight improvements */ .lof-mobile-nav button, .lof-kpis-scroll .lof-kpi { -webkit-tap-highlight-color: rgba(0,0,0,0.12); } /* Source: css/foundation/utilities.css */ /* =================================================================== */ /* UTILITY CLASSES - COMPREHENSIVE SYSTEM */ /* =================================================================== */ /* =================================================================== */ /* SCREEN READER & ACCESSIBILITY UTILITIES */ /* =================================================================== */ /* Screen reader only text - completely hidden but accessible */ .lof-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Alternative screen reader utility */ .screen-reader-text { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .screen-reader-text:focus { clip: auto !important; height: auto; width: auto; padding: 10px; background: #fff; z-index: var(--lof-z-focus); } /* Skip link for keyboard navigation */ .lof-skip-link { position: absolute; top: -40px; left: 6px; background: var(--lof-primary); color: var(--lof-text-on-primary); padding: 8px 16px; text-decoration: none; border-radius: var(--lof-radius-md); z-index: var(--lof-z-tooltip); transition: top var(--lof-transition-fast); } .lof-skip-link:focus { top: 6px; } /* Focus trap utility */ .lof-focus-trap { position: relative; } /* =================================================================== */ /* VISIBILITY & DISPLAY UTILITIES */ /* =================================================================== */ /* Visibility utilities */ .lof-hidden { display: none; } .lof-block { display: block; } .lof-inline-block { display: inline-block; } .lof-flex { display: flex; } .lof-inline-flex { display: inline-flex; } .hidden { opacity: 0; pointer-events: none; } .visible { opacity: 1; pointer-events: auto; } /* Opacity utilities */ .lof-opacity-0 { opacity: 0; } .lof-opacity-25 { opacity: 0.25; } .lof-opacity-50 { opacity: 0.5; } .lof-opacity-75 { opacity: 0.75; } .lof-opacity-100 { opacity: 1; } /* =================================================================== */ /* SPACING UTILITIES */ /* =================================================================== */ /* Margin utilities */ .lof-mt-0 { margin-top: 0; } .lof-mt-1 { margin-top: var(--lof-space-1); } .lof-mt-2 { margin-top: var(--lof-space-2); } .lof-mt-3 { margin-top: var(--lof-space-3); } .lof-mt-4 { margin-top: var(--lof-space-4); } .lof-mt-5 { margin-top: var(--lof-space-5); } .lof-mt-6 { margin-top: var(--lof-space-6); } .lof-mt-8 { margin-top: var(--lof-space-8); } .lof-mb-0 { margin-bottom: 0; } .lof-mb-1 { margin-bottom: var(--lof-space-1); } .lof-mb-2 { margin-bottom: var(--lof-space-2); } .lof-mb-3 { margin-bottom: var(--lof-space-3); } .lof-mb-4 { margin-bottom: var(--lof-space-4); } .lof-mb-5 { margin-bottom: var(--lof-space-5); } .lof-mb-6 { margin-bottom: var(--lof-space-6); } .lof-mb-8 { margin-bottom: var(--lof-space-8); } .lof-ml-0 { margin-left: 0; } .lof-ml-1 { margin-left: var(--lof-space-1); } .lof-ml-2 { margin-left: var(--lof-space-2); } .lof-ml-3 { margin-left: var(--lof-space-3); } .lof-ml-4 { margin-left: var(--lof-space-4); } .lof-mr-0 { margin-right: 0; } .lof-mr-1 { margin-right: var(--lof-space-1); } .lof-mr-2 { margin-right: var(--lof-space-2); } .lof-mr-3 { margin-right: var(--lof-space-3); } .lof-mr-4 { margin-right: var(--lof-space-4); } /* Padding utilities */ .lof-p-0 { padding: 0; } .lof-p-1 { padding: var(--lof-space-1); } .lof-p-2 { padding: var(--lof-space-2); } .lof-p-3 { padding: var(--lof-space-3); } .lof-p-4 { padding: var(--lof-space-4); } .lof-p-5 { padding: var(--lof-space-5); } .lof-p-6 { padding: var(--lof-space-6); } .lof-p-8 { padding: var(--lof-space-8); } .lof-pt-0 { padding-top: 0; } .lof-pt-1 { padding-top: var(--lof-space-1); } .lof-pt-2 { padding-top: var(--lof-space-2); } .lof-pt-3 { padding-top: var(--lof-space-3); } .lof-pt-4 { padding-top: var(--lof-space-4); } .lof-pb-0 { padding-bottom: 0; } .lof-pb-1 { padding-bottom: var(--lof-space-1); } .lof-pb-2 { padding-bottom: var(--lof-space-2); } .lof-pb-3 { padding-bottom: var(--lof-space-3); } .lof-pb-4 { padding-bottom: var(--lof-space-4); } .lof-pl-0 { padding-left: 0; } .lof-pl-1 { padding-left: var(--lof-space-1); } .lof-pl-2 { padding-left: var(--lof-space-2); } .lof-pl-3 { padding-left: var(--lof-space-3); } .lof-pl-4 { padding-left: var(--lof-space-4); } .lof-pr-0 { padding-right: 0; } .lof-pr-1 { padding-right: var(--lof-space-1); } .lof-pr-2 { padding-right: var(--lof-space-2); } .lof-pr-3 { padding-right: var(--lof-space-3); } .lof-pr-4 { padding-right: var(--lof-space-4); } /* =================================================================== */ /* TEXT & TYPOGRAPHY UTILITIES */ /* =================================================================== */ /* Text alignment */ .lof-text-center { text-align: center; } .lof-text-left { text-align: left; } .lof-text-right { text-align: right; } /* Font weights */ .lof-font-bold { font-weight: 700; } .lof-font-semibold { font-weight: 600; } .lof-font-medium { font-weight: 500; } .lof-font-normal { font-weight: 400; } /* Font sizes */ .lof-text-xs { font-size: var(--lof-text-xs); } .lof-text-sm { font-size: var(--lof-text-sm); } .lof-text-base { font-size: var(--lof-text-base); } .lof-text-lg { font-size: var(--lof-text-lg); } .lof-text-xl { font-size: var(--lof-text-xl); } .lof-text-2xl { font-size: var(--lof-text-2xl); } .lof-text-3xl { font-size: var(--lof-text-3xl); } .lof-text-4xl { font-size: var(--lof-text-4xl); } /* Text colors */ .lof-text-primary { color: var(--lof-primary); } .lof-text-success { color: var(--lof-success); } .lof-text-warning { color: var(--lof-warning); } .lof-text-error { color: var(--lof-error); } .lof-text-info { color: var(--lof-info); } .lof-text-muted { color: var(--lof-text-muted); } .lof-text-subtle { color: var(--lof-text-subtle); } /* =================================================================== */ /* POSITIONING UTILITIES */ /* =================================================================== */ /* Position utilities */ .lof-relative { position: relative; } .lof-absolute { position: absolute; } .lof-fixed { position: fixed; } .lof-sticky { position: sticky; } /* Z-index utilities */ .lof-z-base { z-index: var(--lof-z-base); } .lof-z-dropdown { z-index: var(--lof-z-dropdown); } .lof-z-sticky { z-index: var(--lof-z-sticky); } .lof-z-fixed { z-index: var(--lof-z-fixed); } .lof-z-modal { z-index: var(--lof-z-modal); } .lof-z-popover { z-index: var(--lof-z-popover); } .lof-z-tooltip { z-index: var(--lof-z-tooltip); } .lof-z-toast { z-index: var(--lof-z-toast); } /* =================================================================== */ /* ANIMATION UTILITY CLASSES */ /* =================================================================== */ /* Swipe animations */ .lof-swipe-left { animation: lofSwipeLeft 0.3s cubic-bezier(0.4, 0, 1, 1); } .lof-swipe-right { animation: lofSwipeRight 0.3s cubic-bezier(0.4, 0, 1, 1); } /* Bounce animations */ .lof-swipe-bounce { /* Bounce animation disabled for performance */ animation: none; will-change: auto; } /* Micro-interactions */ .lof-micro-bounce { animation: lof-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .lof-micro-slide { animation: lof-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lof-micro-fade { animation: lof-fade-in-scale 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Page transitions */ .lof-page-transition-out { opacity: 0; transform: translateX(-20px) scale(0.98); transition: all var(--lof-transition-base); } .lof-page-transition-in { opacity: 0; transform: translateX(20px) scale(1.02); transition: all var(--lof-transition-slow); } .lof-page-transition-in.lof-active { opacity: 1; transform: translateX(0) scale(1); } /* Fade transitions */ .swap-fade { opacity: 0.01; transform: translateY(-8px); transition: opacity var(--lof-transition-fast), transform var(--lof-transition-fast); } /* Animate on scroll */ .lof-animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .lof-animate-on-scroll.lof-in-view { opacity: 1; transform: translateY(0); } /* Stagger animations */ .lof-stagger-item { opacity: 0; transform: translateY(20px); animation: lof-fade-in-scale 0.6s ease forwards; } .lof-stagger-item:nth-child(1) { animation-delay: 0.1s; } .lof-stagger-item:nth-child(2) { animation-delay: 0.2s; } .lof-stagger-item:nth-child(3) { animation-delay: 0.3s; } .lof-stagger-item:nth-child(4) { animation-delay: 0.4s; } .lof-stagger-item:nth-child(5) { animation-delay: 0.5s; } /* =================================================================== */ /* INTERACTION UTILITIES */ /* =================================================================== */ /* Ripple effect */ .lof-ripple { position: relative; overflow: hidden; } .lof-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease-out, height 0.6s ease-out; pointer-events: none; } .lof-ripple:active::after { width: 300px; height: 300px; } /* Touch interactions */ .lof-touch-start { transform: scale(0.95); transition: transform 0.1s ease-out; } .lof-touch-end { transform: scale(1.02); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Clicked state */ .lof-clicked .lof-icon { transform: scale(0.9) rotate(-10deg); } /* =================================================================== */ /* STATE UTILITIES */ /* =================================================================== */ /* Loading states */ .lof-loading { pointer-events: none; opacity: 0.7; } /* Ready states */ .is-ready { opacity: 1; transform: none; } /* Updating states */ .is-updating { opacity: 0.92; transition: opacity var(--lof-transition-fast); } /* Visible states */ .lof-visible { opacity: 1; } /* Active states */ .lof-active { opacity: 1; transform: translateX(0) scale(1); } /* Navigation states */ .lof-navigating { transform: translateY(-8px) scale(0.98); opacity: 0.7; filter: blur(1px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* =================================================================== */ /* SWIPE NAVIGATION HINTS */ /* =================================================================== */ .lof-swipe-container { position: relative; overflow: hidden; touch-action: pan-y; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease-out; will-change: transform, filter; transform-origin: center top; } .lof-swipe-left-hint, .lof-swipe-right-hint { position: fixed; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--lof-transition-base); backdrop-filter: var(--lof-glass-blur); z-index: var(--lof-z-tooltip); box-shadow: var(--lof-shadow-xl); } .lof-swipe-left-hint { left: -64px; } .lof-swipe-right-hint { right: -64px; } .lof-swipe-left-hint.lof-visible { opacity: 1; left: var(--lof-space-5); } .lof-swipe-right-hint.lof-visible { opacity: 1; right: var(--lof-space-5); } .lof-swipe-complete { transition: transform var(--lof-transition-base); } /* =================================================================== */ /* PULL TO REFRESH UTILITIES */ /* =================================================================== */ .lof-pull-to-refresh { position: relative; overflow: hidden; } .lof-refresh-indicator { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; background: var(--lof-glass-bg); border: 2px solid var(--lof-glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: var(--lof-glass-blur); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; z-index: var(--lof-z-dropdown); box-shadow: var(--lof-shadow-lg); transform-origin: center center; } .lof-refresh-indicator.lof-visible { opacity: 1; top: var(--lof-space-3); animation: lof-indicator-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .lof-refresh-indicator.lof-refreshing { animation: lof-refresh-spin 0.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-color: var(--lof-success); box-shadow: 0 0 20px color-mix(in srgb, var(--lof-success) 30%, transparent), var(--lof-shadow-xl); } .lof-refresh-indicator.lof-ready-to-refresh { animation: lof-ready-pulse 1s ease-in-out infinite; border-color: var(--lof-success); background: var(--lof-success-bg); box-shadow: 0 0 25px color-mix(in srgb, var(--lof-success) 40%, transparent), var(--lof-shadow-xl); } .lof-refresh-indicator.lof-refresh-success { animation: lof-success-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); border-color: var(--lof-success); background: var(--lof-success-bg); } /* Pull states */ .lof-pull-intense { filter: brightness(1.1) saturate(1.1); transition: filter 0.2s ease-out; } .lof-refreshing-active { animation: lof-refreshing-pulse 2s ease-in-out infinite; } .lof-refresh-complete { animation: lof-completion-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* =================================================================== */ /* SKELETON LOADING UTILITIES */ /* =================================================================== */ .lof-skel { position: relative; background: linear-gradient( 90deg, var(--lof-neutral-200) 25%, var(--lof-neutral-100) 50%, var(--lof-neutral-200) 75% ); background-size: 200% 100%; animation: lof-shimmer 1.1s ease-in-out infinite; border-radius: var(--lof-radius-md); display: inline-block; } /* Skeleton sizes */ .lof-skel.xs { width: 3rem; height: 0.75rem; } .lof-skel.sm { width: 6rem; height: 1rem; } .lof-skel.md { width: 8rem; height: 1.25rem; } .lof-skel.lg { width: 12rem; height: 1.5rem; } .lof-skel.xl { width: 16rem; height: 2rem; } /* =================================================================== */ /* TOOLTIP UTILITIES */ /* =================================================================== */ .lof-tooltip { position: relative; display: inline-block; } .lof-tooltip::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--lof-neutral-900); color: var(--lof-neutral-0); padding: var(--lof-space-2) var(--lof-space-3); border-radius: var(--lof-radius-md); font-size: var(--lof-text-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--lof-transition-base); z-index: var(--lof-z-tooltip); } .lof-tooltip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--lof-neutral-900); opacity: 0; pointer-events: none; transition: opacity var(--lof-transition-base); z-index: var(--lof-z-tooltip); } .lof-tooltip:hover::before, .lof-tooltip:hover::after { opacity: 1; } /* =================================================================== */ /* PROGRESS BAR UTILITIES */ /* =================================================================== */ .lof-progress-container { width: 100%; height: 4px; background: var(--lof-neutral-200); border-radius: var(--lof-radius-full); overflow: hidden; position: relative; } .lof-progress-bar { height: 100%; background: var(--lof-primary); border-radius: var(--lof-radius-full); transition: width var(--lof-transition-slow); position: relative; } .lof-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: lof-progress-shine 2s infinite; } /* =================================================================== */ /* GLASS MORPHISM UTILITIES */ /* =================================================================== */ .lof-glass-card { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); backdrop-filter: var(--lof-glass-blur); box-shadow: var(--lof-shadow-lg); position: relative; overflow: hidden; } .lof-glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100% ); pointer-events: none; } /* =================================================================== */ /* FLOATING ACTION BUTTON UTILITY */ /* =================================================================== */ .lof-fab { position: fixed; bottom: var(--lof-space-6); right: var(--lof-space-6); width: 56px; height: 56px; border-radius: 50%; background: var(--lof-primary); color: var(--lof-text-on-primary); border: none; box-shadow: var(--lof-shadow-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: var(--lof-z-fixed); transition: all var(--lof-transition-base); } .lof-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--lof-shadow-xl); } /* =================================================================== */ /* KEYFRAME ANIMATIONS */ /* =================================================================== */ /* Swipe animations */ @keyframes lofSwipeLeft { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100vw); opacity: 0; } } @keyframes lofSwipeRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100vw); opacity: 0; } } /* Bounce animations */ @keyframes lofBounceDown { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(12px) scale(1.02); } 50% { transform: translateY(-6px) scale(0.98); } 75% { transform: translateY(3px) scale(1.01); } 100% { transform: translateY(0) scale(1); } } @keyframes lofBounceDownChildren { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(8px) scale(1.02); } 50% { transform: translateY(-4px) scale(0.98); } 75% { transform: translateY(2px) scale(1.01); } 100% { transform: translateY(0) scale(1); } } /* Shimmer animation */ @keyframes lof-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Pulse animations */ @keyframes lof-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @keyframes lof-pulse-optimized { 0%, 100% { transform: scale3d(1, 1, 1); opacity: 1; } 50% { transform: scale3d(1.05, 1.05, 1); opacity: 0.8; } } /* Slide animations */ @keyframes lof-slide-up { 0% { transform: translate3d(0, 100%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Fade animations */ @keyframes lof-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lof-fade-in-scale { 0% { transform: scale3d(0.95, 0.95, 1); opacity: 0; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Bounce in animation */ @keyframes lof-bounce-in { 0% { transform: scale3d(0.3, 0.3, 1); opacity: 0; } 50% { transform: scale3d(1.05, 1.05, 1); opacity: 0.8; } 70% { transform: scale3d(0.9, 0.9, 1); opacity: 0.9; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } /* Progress shine animation */ @keyframes lof-progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Refresh animations */ @keyframes lof-refresh-spin { 0% { transform: translateX(-50%) translateY(10px) scale(1.1) rotate(0deg); } 50% { transform: translateX(-50%) translateY(5px) scale(1.15) rotate(180deg); } 100% { transform: translateX(-50%) translateY(10px) scale(1.1) rotate(360deg); } } @keyframes lof-svg-spin { 0% { transform: rotate(0deg) scale(1.1); transform-origin: center center; } 100% { transform: rotate(360deg) scale(1.1); transform-origin: center center; } } @keyframes lof-indicator-appear { 0% { transform: translateX(-50%) translateY(-20px) scale(0.5); opacity: 0; } 60% { transform: translateX(-50%) translateY(5px) scale(1.1); opacity: 0.8; } 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } } @keyframes lof-ready-pulse { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 25px color-mix(in srgb, var(--lof-success) 40%, transparent), var(--lof-shadow-xl); } 50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 35px color-mix(in srgb, var(--lof-success) 60%, transparent), var(--lof-shadow-2xl); } } @keyframes lof-success-bounce { 0% { transform: translateX(-50%) scale(1.1); } 30% { transform: translateX(-50%) scale(1.3); } 60% { transform: translateX(-50%) scale(0.9); } 100% { transform: translateX(-50%) scale(1); } } @keyframes lof-refreshing-pulse { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.05) saturate(1.05); } } @keyframes lof-completion-bounce { 0% { transform: scale(1); } 25% { transform: scale(1.02); } 50% { transform: scale(0.98); } 75% { transform: scale(1.01); } 100% { transform: scale(1); } } /* Loading bar animation */ @keyframes lof-loading-bar { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Skeleton animations */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* =================================================================== */ /* REDUCED MOTION SUPPORT */ /* =================================================================== */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { .lof-swipe-left, .lof-swipe-right, .lof-micro-bounce, .lof-micro-slide, .lof-micro-fade, .lof-animate-on-scroll, .lof-stagger-item { animation: none; opacity: 1; transform: none; } .lof-animate-on-scroll { opacity: 1; transform: none; } } /* Source: css/layout/containers.css */ /* =================================================================== */ /* CONTAINER & LAYOUT STYLES */ /* Main wrapper containers, grid layouts, flexbox definitions */ /* =================================================================== */ /* =================================================================== */ /* MAIN WRAPPER CONTAINER */ /* =================================================================== */ #live-feed-wrapper { margin-top: 0; box-sizing: border-box; font-family: inherit; transition: margin-top var(--lof-transition-slow); position: relative; container-type: inline-size; min-height: 100vh; display: block; } #live-feed-wrapper.nav-hidden { margin-top: 0; } .daily-income-container + #live-feed-wrapper { margin-top: 0 !important; } .site-branding { padding: 0 !important; } /* =================================================================== */ /* FEED CONTAINER LAYOUT */ /* =================================================================== */ /* Desktop grid layout for order feed */ @media (min-width: 1200px) { #live-order-feed-container { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 32px; } } /* Feed container transitions */ #live-order-feed-container { opacity: 0; transform: translateY(8px); transition: opacity var(--lof-transition-slow), transform var(--lof-transition-slow); will-change: opacity, transform; display: block; box-sizing: border-box; padding: clamp(24px, 3vw, 48px); max-width: 1400px; margin: 0 auto; background: var(--lof-bg); } #live-order-feed-container.is-ready { opacity: 1; transform: none; } #live-order-feed-container.is-updating { opacity: 0.92; transition: opacity var(--lof-transition-fast); } /* =================================================================== */ /* KPI GRID LAYOUTS - MOVED TO css/features/kpi-cards.css */ /* =================================================================== */ /* KPI grid layout moved to css/features/kpi-cards.css */ /* =================================================================== */ /* REPORTS ORDER GRID */ /* =================================================================== */ .lof-reports-orders { display: grid; gap: 16px; } @media (min-width: 900px) { .lof-reports-orders { grid-template-columns: repeat(2, 1fr); } } /* =================================================================== */ /* HORIZONTAL PANELS SCROLL (REPORTS SECTIONS) */ /* =================================================================== */ .lof-panels-scroll { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 0 0 40px 0; } @media (max-width: 860px) { .lof-panels-scroll { display: flex; flex-wrap: wrap; gap: 16px; padding: 32px 6px 18px; margin: 0 -6px 10px; } .lof-panels-scroll > section { flex: 0 0 85%; max-width: 480px; scroll-snap-align: start; scroll-snap-stop: always; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 18px; padding: 18px 18px 22px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .08); } .lof-panels-scroll > section h2 { margin-top: 0; font-size: 19px; } .lof-panels-scroll::-webkit-scrollbar { height: 10px; } .lof-panels-scroll::-webkit-scrollbar-track { background: transparent; } .lof-panels-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 6px; } } @media (max-width: 640px) { .lof-panels-scroll > section { flex: 0 0 92%; padding: 16px 16px 20px; } .lof-panels-scroll > section h2 { font-size: 17px; } } @media (max-width: 480px) { .lof-panels-scroll > section { flex: 0 0 94%; } } /* =================================================================== */ /* REPORTS PAGE LAYOUT STRUCTURE */ /* =================================================================== */ /* Reports page uses same structure as feed page */ #live-feed-wrapper.lof-reports-page { margin-top: 0; box-sizing: border-box; font-family: inherit; position: relative; container-type: inline-size; min-height: 100vh; display: block; } /* Reports page content container */ #lof-reports-page, .lof-report-daily-page #lof-reports-page, .lof-report-monthly-page #lof-reports-page { padding: clamp(24px, 3vw, 48px); max-width: 1400px; margin: 0 auto; background: var(--lof-bg); display: block; opacity: 1; transition: opacity 0.3s ease-in-out; box-sizing: border-box; } /* Initialize reports page as visible */ #lof-reports-page.lof-reports-page { opacity: 1 !important; } /* =================================================================== */ /* REPORTS LAYOUT OVERRIDES */ /* =================================================================== */ /* KPI reports page layout moved to css/features/kpi-cards.css */ /* Orders and general report grids: single column */ .lof-reports-page .lof-reports-orders, #lof-reports-page .lof-reports-orders { grid-template-columns: 1fr !important; } /* Neutralize horizontal multi-panel grid/scroll on reports */ .lof-reports-page .lof-panels-scroll, #lof-reports-page .lof-panels-scroll { display: block !important; overflow: visible !important; gap: 0 !important; padding: 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 1200px !important; } .lof-reports-page .lof-panels-scroll > section, #lof-reports-page .lof-panels-scroll > section { flex: none !important; max-width: none !important; width: 100% !important; margin: 20px auto 20px auto !important; } /* KPI carousel layout overrides moved to css/features/kpi-cards.css */ /* =================================================================== */ /* FLEXBOX CONTAINERS */ /* =================================================================== */ /* Order row flex layouts */ .lof-order-row .row-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .lof-order-row ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .lof-order-row ul.items li { display: flex; font-size: 13px; gap: 6px; align-items: center; } .lof-order-row ul.items li .nm { flex: 1; color: var(--lof-text-muted); } .lof-order-row ul.items li .price { margin-left: auto; color: var(--lof-text); font-weight: 600; } /* Seller item flex layouts */ .lof-simple-list li.lof-seller-item .lof-seller-row-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .lof-simple-list li.lof-seller-item .lof-seller-name { flex: 1 1 auto; font-weight: 600; font-size: var(--lof-text-base); } .lof-simple-list li.lof-seller-item .lof-seller-amount { flex: 0 0 auto; text-align: right; font-weight: 700; } /* Load More Button display - Centered */ #load-more-orders, .load-more-btn { display: block; text-align: center; margin-left: auto; margin-right: auto; } /* Income bar flex */ #income-bar { display: flex; justify-content: center; flex-shrink: 0; /* Prevent shrinking in flex container */ } /* Bottom notification flex */ #lof-bottom-notify.lof-bottom-notify { display: inline-flex; align-items: center; justify-content: center; } /* =================================================================== */ /* CONTENT AREA SPACING & POSITIONING */ /* =================================================================== */ /* Ensure the main wrapper always starts visually below the fixed income bar */ #live-feed-wrapper { padding-top: 0 !important; } /* Reports page: ensure same offset so first content isn't covered */ #live-feed-wrapper.lof-reports-page, #lof-reports-page { padding-top: 0 !important; } /* When a login wrapper precedes feed ensure similar offset */ .lof-login-wrapper { padding-top: 0; } @media (max-width: 768px) { #live-feed-wrapper { padding-top: 0 !important; } } /* Ensure feed container content never hides beneath income bar */ #income-bar + #live-feed-wrapper > #live-order-feed-container, #live-order-feed-container.lof-feed-root { margin-top: 0 !important; } @media (max-width: 768px) { #income-bar + #live-feed-wrapper > #live-order-feed-container, #live-order-feed-container.lof-feed-root { margin-top: 0 !important; } } /* Final enforcement - make wrapper flow naturally after income bar */ #live-feed-wrapper, #live-feed-wrapper.lof-reports-page, #lof-reports-page #live-feed-wrapper { margin-top: 0 !important; padding-top: 0 !important; position: relative !important; } @media (max-width: 768px) { #live-feed-wrapper, #live-feed-wrapper.lof-reports-page, #lof-reports-page #live-feed-wrapper { margin-top: 14px !important; padding-top: 16px !important; } /* Ensure reports page maintains full height on mobile */ #lof-reports-page { padding: 16px; box-sizing: border-box; } /* Feed page mobile adjustments to match reports */ #live-order-feed-container { padding: 16px; } } @media (max-width: 480px) { /* Feed page small mobile adjustments to match reports */ #live-order-feed-container { padding: 12px; } } @media (max-width: 820px) { /* Safe area adjustments for mobile bottom nav - match reports page */ #live-order-feed-container { padding-bottom: calc(20px + var(--lof-safe-bottom)); } } /* =================================================================== */ /* SELLERS SECTION GRID LAYOUTS */ /* =================================================================== */ @media (max-width: 740px) { /* Compact sellers grid - improved spacing */ .lof-sellers-section ul.lof-simple-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch !important; justify-items: stretch !important; } .lof-sellers-section ul.lof-simple-list li { font-size: 13px; padding: 10px 12px 10px 38px; margin-top: 0 !important; /* Override individual margins in grid */ display: flex !important; align-items: center !important; justify-content: space-between !important; } } @media (max-width: 430px) { .lof-sellers-section ul.lof-simple-list { grid-template-columns: 1fr !important; gap: 6px !important; } } /* Ensure one-line UL always uses single column, even inside sellers-section grid */ .lof-sellers-section ul.one-line.lof-simple-list { display: flex !important; grid-template-columns: none !important; } /* =================================================================== */ /* RESPONSIVE GRID ADJUSTMENTS */ /* =================================================================== */ /* KPI responsive grid adjustments moved to css/features/kpi-cards.css */ /* Ensure proper grid item alignment */ .lof-reports-orders, .lof-panels-scroll { align-items: stretch !important; } /* KPI mobile centering moved to css/features/kpi-cards.css */ /* =================================================================== */ /* CONTAINER QUERIES & ADAPTIVE LAYOUTS */ /* =================================================================== */ /* Container queries are handled via container-type: inline-size on #live-feed-wrapper */ /* This allows child elements to respond to container size rather than viewport size */ /* Status message grid spanning */ .status-message { grid-column: 1 / -1; text-align: center; font-size: 1.2em; color: var(--lof-text-muted); padding: 60px 20px; background: var(--lof-surface); border-radius: 8px; border: 1px dashed var(--lof-border); } /* Order card container behavior */ .order-card { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; box-shadow: var(--lof-shadow-md); display: flex; flex-direction: column; overflow: hidden; animation: slideUp .6s ease-out; transition: transform var(--lof-transition-base), box-shadow var(--lof-transition-base); will-change: transform, box-shadow; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Max width constraints for large screens */ @media (max-width: 768px) { #live-feed-wrapper, #live-order-feed-container { max-width: 100%; min-height: 100%; box-sizing: border-box; } } /* Source: css/layout/income-bar.css */ /* =================================================================== */ /* INCOME BAR LAYOUT - GLASS MORPHISM DESIGN */ /* =================================================================== */ /* =================================================================== */ /* MAIN INCOME BAR STYLING */ /* =================================================================== */ #income-bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: var(--lof-space-3) var(--lof-space-5); padding-top: calc(var(--lof-space-3) + var(--lof-safe-top)); background: var(--lof-glass-bg); backdrop-filter: var(--lof-glass-blur); border: 1px solid var(--lof-border); box-shadow: var(--lof-shadow-lg); border-radius: 0 0 var(--lof-radius-xl) var(--lof-radius-xl); color: var(--lof-text); gap: var(--lof-space-3); height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); min-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); max-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: lof-income-bar-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Button container for proper spacing */ #income-bar .lof-buttons-container { display: flex; gap: var(--lof-space-3); align-items: center; position: relative; z-index: 20; flex-shrink: 0; flex-wrap: nowrap; width: 130px; } /* =================================================================== */ /* INCOME BAR DECORATIVE BACKGROUND PATTERN */ /* =================================================================== */ /* Add subtle background pattern to income bar */ #income-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--lof-text) 5%, transparent) 1px, transparent 1px), radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--lof-text) 3%, transparent) 1px, transparent 1px); background-size: 20px 20px, 15px 15px; background-position: 0 0, 10px 10px; opacity: 0.3; pointer-events: none; z-index: -1; } /* =================================================================== */ /* INCOME LABEL STYLING */ /* =================================================================== */ #income-bar .lof-income-label { font-weight: 700; letter-spacing: 0.5px; opacity: 0.9; font-size: var(--lof-text-sm); text-transform: uppercase; } /* =================================================================== */ /* DAILY INCOME TOTAL STYLING */ /* =================================================================== */ #income-bar #daily-income-total { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--lof-primary-600); text-shadow: 0 1px 2px color-mix(in srgb, var(--lof-bg) 50%, transparent); letter-spacing: -0.02em; line-height: 1.1; position: relative; display: inline-flex; align-items: center; padding: var(--lof-space-2) var(--lof-space-4); border-radius: var(--lof-radius-lg); background-color: var(--lof-surface); border: 1px solid var(--lof-border-strong); box-shadow: var(--lof-shadow-md); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateZ(0); } /* =================================================================== */ /* INCOME TOTAL HOVER & INTERACTION EFFECTS */ /* =================================================================== */ /* Hover effects for income total */ #income-bar #daily-income-total:hover { transform: translateX(-50%) translateY(-1px) scale(1.02); box-shadow: var(--lof-shadow-lg); background-color: var(--lof-surface-hover); border-color: var(--lof-border-strong); } /* Income amount update animation */ #income-bar #daily-income-total.lof-amount-update { animation: lof-income-update 0.8s var(--lof-transition-bounce); color: var(--lof-success); background-color: var(--lof-success-bg); border-color: var(--lof-success); box-shadow: 0 0 20px color-mix(in srgb, var(--lof-success) 30%, transparent); } /* =================================================================== */ /* INCOME BAR NAVIGATION STATES */ /* =================================================================== */ /* Income bar navigation states */ #income-bar.lof-navigating { transform: translateY(-8px) scale(0.98); opacity: 0.7; filter: blur(1px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #income-bar.lof-swipe-left { transform: translateX(-20px) rotateY(-5deg); opacity: 0.8; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } #income-bar.lof-swipe-right { transform: translateX(20px) rotateY(5deg); opacity: 0.8; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* =================================================================== */ /* INCOME BAR HOVER ENHANCEMENT */ /* =================================================================== */ /* Income bar hover enhancement - DISABLED */ /* #income-bar:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--lof-shadow-xl); backdrop-filter: blur(24px) saturate(200%); } */ /* =================================================================== */ /* MOBILE TOUCH INTERACTIONS */ /* =================================================================== */ /* Mobile touch interactions */ @media (max-width: 768px) { #income-bar.lof-touch-start { transform: scale(0.95); transition: transform 0.1s ease-out; } #income-bar.lof-touch-end { transform: scale(1.02); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } } /* =================================================================== */ /* BURGER BUTTON STYLING WITHIN INCOME BAR */ /* =================================================================== */ #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); position: relative; z-index: 10; visibility: visible; opacity: 1; border-radius: var(--lof-radius-xl); padding: var(--lof-space-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--lof-transition-base); color: var(--lof-text); font-size: var(--lof-text-xs); width: calc(var(--lof-income-bar-height) - 16px); height: calc(var(--lof-income-bar-height) - 16px); max-height: calc(var(--lof-income-bar-height) - 16px); line-height: 1; font-weight: 600; overflow: hidden; min-height: 40px; backdrop-filter: var(--lof-glass-blur); flex-shrink: 0; text-decoration: none; } #lof-burger-btn.lof-burger .lof-icon, #lof-all-orders-btn.lof-burger .lof-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: transform var(--lof-transition-base); flex-shrink: 0; } #lof-burger-btn.lof-burger .lof-icon svg, #lof-all-orders-btn.lof-burger .lof-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; transition: all 0.3s var(--lof-transition-smooth); } #lof-burger-btn.lof-burger .lof-label, #lof-all-orders-btn.lof-burger .lof-label { display: none; } /* =================================================================== */ /* BURGER BUTTON INTERACTIONS */ /* =================================================================== */ /* Burger button hover effects - DISABLED */ /* #lof-burger-btn.lof-burger:hover, #lof-all-orders-btn.lof-burger:hover { background: var(--lof-surface-hover); border-color: var(--lof-border-strong); transform: translateY(-2px) scale(1.02); box-shadow: var(--lof-shadow-lg); } #lof-burger-btn.lof-burger:hover .lof-icon, #lof-all-orders-btn.lof-burger:hover .lof-icon { transform: scale(1.1) rotate(5deg); } */ #lof-burger-btn.lof-burger.lof-clicked .lof-icon, #lof-all-orders-btn.lof-burger.lof-clicked .lof-icon { transform: scale(0.9) rotate(-10deg); } #lof-burger-btn.lof-burger:active, #lof-all-orders-btn.lof-burger:active { transform: scale(0.98); transition: all var(--lof-transition-fast); } #lof-burger-btn.lof-burger:focus-visible, #lof-all-orders-btn.lof-burger:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); } /* =================================================================== */ /* BURGER BUTTON CLICK RIPPLE EFFECT */ /* =================================================================== */ /* Click ripple effect */ #lof-burger-btn.lof-burger::before, #lof-all-orders-btn.lof-burger::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out; opacity: 0; pointer-events: none; } #lof-burger-btn.lof-burger.lof-clicked::before, #lof-all-orders-btn.lof-burger.lof-clicked::before { width: 200px; height: 200px; opacity: 1; } #lof-burger-btn.lof-burger.lof-clicked, #lof-all-orders-btn.lof-burger.lof-clicked { animation: lof-burger-click 0.4s var(--lof-transition-bounce); } /* =================================================================== */ /* ACTIVE MODE STYLING (WHITE BACKGROUND WHEN CLICKED) */ /* =================================================================== */ /* Active mode styling - white background for selected state */ #lof-burger-btn.lof-burger.active-mode, #lof-all-orders-btn.lof-burger.active-mode { background: rgba(255, 255, 255, 0.95); color: var(--lof-bg); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); } #lof-burger-btn.lof-burger.active-mode .lof-icon, #lof-all-orders-btn.lof-burger.active-mode .lof-icon { color: var(--lof-bg); } #lof-burger-btn.lof-burger.active-mode .lof-icon svg, #lof-all-orders-btn.lof-burger.active-mode .lof-icon svg { fill: var(--lof-bg); stroke: var(--lof-bg); } /* Active mode hover state */ #lof-burger-btn.lof-burger.active-mode:hover, #lof-all-orders-btn.lof-burger.active-mode:hover { background: rgba(255, 255, 255, 1); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* =================================================================== */ /* CAFE NAME STYLING - ALIGNED WITH APP DESIGN SYSTEM */ /* =================================================================== */ .lof-cafe-name { /* Enhanced Typography with Modern Font Features */ font-family: var(--font-sans) !important; font-weight: 700; /* Increased weight for better prominence */ font-size: clamp(1rem, 2.5vw, 1.8rem); /* Larger, more impactful size */ line-height: 1.2; /* Tighter line height for better visual impact */ letter-spacing: 0.08em; /* More refined letter spacing */ /* Advanced Font Rendering */ font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1; font-variant-ligatures: common-ligatures contextual; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Visual Design using app color system */ color: var(--lof-text-on-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; /* Add visual impact */ /* Enhanced Shadow Stack for Depth */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px var(--lof-shadow-medium), 0 4px 8px rgba(0, 0, 0, 0.1); /* No background - let income bar background show through */ background: transparent; /* Layout with enhanced visual presence */ position: relative; display: inline-block; padding: var(--lof-space-2) var(--lof-space-4); /* Increased horizontal padding */ border-radius: var(--lof-radius-lg); /* Larger radius for premium feel */ /* App-standard transitions with enhanced smoothness */ transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Touch optimization like other app components */ touch-action: manipulation; -webkit-tap-highlight-color: rgba(46, 204, 113, 0.2); /* Subtle backdrop enhancement */ backdrop-filter: blur(1px); } /* Enhanced hover effect with sophisticated text styling */ .lof-cafe-name:hover { /* App-standard transform pattern with enhanced scale */ transform: translateY(-3px) scale(1.05); /* Enhanced typography on hover */ font-weight: 800; /* Extra bold for impact */ letter-spacing: 0.12em; /* Increased spacing for premium feel */ /* Fallback color for browsers that don't support background-clip */ color: var(--lof-warning); /* Sophisticated gradient text effect */ background: linear-gradient(135deg, var(--lof-text-on-primary) 0%, #fbbf24 20%, var(--lof-warning) 40%, #d97706 60%, #b45309 80%, var(--lof-text-on-primary) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Enhanced shadow stack for dramatic effect */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px var(--lof-shadow-medium), 0 6px 16px rgba(245, 158, 11, 0.4), 0 8px 24px rgba(251, 191, 36, 0.2); /* Enhanced box shadow for depth */ box-shadow: var(--lof-shadow-lg), 0 0 20px rgba(245, 158, 11, 0.3); /* Subtle backdrop enhancement */ backdrop-filter: blur(2px); } /* Enhanced active state with text feedback */ .lof-cafe-name:active { transform: scale(0.96) translateY(0); /* Maintain font weight during active state */ font-weight: 800; letter-spacing: 0.1em; /* Quick shadow reduction for tactile feedback */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 4px var(--lof-shadow-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1); transition: all 0.1s ease; } /* App-consistent focus styles */ .lof-cafe-name:focus-visible { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } /* Accessibility: Reduced motion support like other app components */ @media (prefers-reduced-motion: reduce) { .lof-cafe-name { transition: none !important; animation: none !important; } .lof-cafe-name:hover { transform: none !important; } } /* Accessibility: High contrast mode with enhanced text */ @media (prefers-contrast: high) { .lof-cafe-name { color: var(--lof-text) !important; background: transparent !important; text-shadow: none !important; font-weight: 900 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border: 2px solid currentColor !important; padding: var(--lof-space-2) var(--lof-space-4) !important; } .lof-cafe-name:hover { color: var(--lof-text) !important; background: var(--lof-text) !important; -webkit-text-fill-color: var(--lof-bg) !important; text-shadow: none !important; transform: none !important; } } /* Accessibility: Enhanced text for dyslexia-friendly fonts */ @media (prefers-reduced-motion: reduce) { .lof-cafe-name { font-family: 'OpenDyslexic', 'Comic Sans MS', var(--font-sans) !important; font-weight: 600 !important; letter-spacing: 0.05em !important; line-height: 1.4 !important; } } /* =================================================================== */ /* MINI BADGE STYLING WITHIN INCOME BAR */ /* =================================================================== */ /* Blend mini-badge with dark income bar */ #income-bar .lof-mini-badge { color: var(--lof-text-on-primary); background: var(--lof-glass-bg); border-color: var(--lof-glass-border); backdrop-filter: blur(6px) saturate(120%); box-shadow: 0 4px 14px var(--lof-shadow-medium); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateZ(0); min-height: 38px; padding: 8px 12px; gap: 8px; } #income-bar .lof-mini-badge .badge-label { background: var(--lof-glass-bg); border-color: var(--lof-glass-border); color: var(--lof-text-on-primary); } #income-bar .lof-mini-badge .badge-val { color: var(--lof-text-on-primary); } #income-bar .lof-mini-badge .badge-diff { background: var(--lof-glass-bg); border-color: var(--lof-glass-border); color: var(--lof-text-on-primary); } #income-bar .lof-mini-badge.up .badge-diff { background: var(--lof-success-bg); border-color: var(--lof-success); color: var(--lof-success); } #income-bar .lof-mini-badge.down .badge-diff { background: var(--lof-danger-bg); border-color: var(--lof-danger); color: var(--lof-danger); } #income-bar .lof-mini-badge.flat .badge-diff { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text-muted); } /* v5 divider color on dark bar */ #income-bar .lof-mini-badge.v5 .badge-val:after { background: var(--lof-glass-border); } /* =================================================================== */ /* LIGHT THEME INCOME BAR STYLING */ /* =================================================================== */ /* Base theme styling - works with CSS variables for both light and dark */ #income-bar span { color: var(--lof-text-on-primary); } #income-bar #daily-income-total { text-shadow: 0 1px 2px var(--lof-shadow-light); } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { background: var(--lof-glass-bg); border-color: var(--lof-glass-border); } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger:hover { background: var(--lof-surface-hover); } /* =================================================================== */ /* FOOTER CONTROLS BAR LAYOUT (NON-STICKY) */ /* =================================================================== */ /* Income bar layout structure */ #income-bar>* { flex: 0 0 auto; } #income-bar #daily-income-total { margin: 0; position: absolute; left: 50%; transform: translateX(-50%); } #income-bar .lof-cafe-name { position: static; transform: none; flex-shrink: 0; } #income-bar #lof-burger-btn { margin: 0; flex-shrink: 0; } /* =================================================================== */ /* REPORTS PAGE INCOME BAR STYLING */ /* =================================================================== */ /* Reports page income bar - match feed page styling exactly */ .lof-reports-page #income-bar, #lof-reports-page #income-bar, .lof-report-daily-page #income-bar, .lof-report-monthly-page #income-bar { /* Use same positioning and styling as feed page */ position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: translateY(0) !important; margin: 0 !important; /* Restore feed page border radius */ border-radius: 0 0 var(--lof-radius-xl) var(--lof-radius-xl) !important; } /* Reports pages no longer need extra padding since income bar is not fixed */ /* Reports page wrapper margin adjustments */ #live-feed-wrapper.lof-reports-page, .lof-reports-page #live-feed-wrapper, .lof-report-daily-page #live-feed-wrapper, .lof-report-monthly-page #live-feed-wrapper { margin-top: 0 !important; } /* Reports pages use same background as feed page - no special overrides needed */ /* Reports pages inherit all styling from base #income-bar rules - no overrides needed */ /* =================================================================== */ /* INCOME BAR KEYFRAME ANIMATIONS */ /* =================================================================== */ /* Income amount update animation */ @keyframes lof-income-update { 0% { transform: translateX(-50%) scale(1); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(209, 250, 229, 0.4); } 50% { transform: translateX(-50%) scale(1.1); text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(110, 231, 183, 0.8); } 100% { transform: translateX(-50%) scale(1); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(209, 250, 229, 0.4); } } /* Burger button click animation */ @keyframes lof-burger-click { 0% { transform: translateY(calc(-50% - 1px)) scale(1.02); } 25% { transform: translateY(-50%) scale(0.98); } 50% { transform: translateY(calc(-50% - 1px)) scale(1.04); } 75% { transform: translateY(-50%) scale(0.99); } 100% { transform: translateY(calc(-50% - 1px)) scale(1.02); } } /* Income bar appear animation */ @keyframes lof-income-bar-appear { 0% { transform: translateY(-100%); opacity: 0; filter: blur(4px); } 60% { transform: translateY(8px); opacity: 0.8; filter: blur(1px); } 100% { transform: translateY(0); opacity: 1; filter: blur(0); } } /* Removed complex animations - keeping app performance-focused */ /* =================================================================== */ /* RESPONSIVE DESIGN - MOBILE ADJUSTMENTS */ /* =================================================================== */ /* Hide income label on small screens */ @media (max-width: 420px) { #income-bar .lof-income-label { display: none; } } /* Mobile badge adjustments */ @media (max-width: 480px) { #income-bar .lof-mini-badge .badge-label { display: none; } #income-bar .lof-mini-badge { padding: 6px 10px; gap: 6px; } /* Mobile cafe name text optimizations */ .lof-cafe-name { font-size: clamp(0.8rem, 3.2vw, 1.3rem); font-weight: 600; /* Lighter weight for mobile readability */ letter-spacing: 0.06em; /* Optimized mobile letter spacing */ padding: var(--lof-space-1) var(--lof-space-3); /* Simplified mobile text shadow for performance */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px var(--lof-shadow-medium); /* Enhanced mobile font rendering */ -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.1); } .lof-cafe-name:hover { transform: translateY(-2px) scale(1.03); font-weight: 700; /* Moderate weight increase on mobile */ letter-spacing: 0.08em; /* Optimized mobile hover shadows */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 8px var(--lof-shadow-medium), 0 6px 12px rgba(245, 158, 11, 0.3); } } /* Small mobile screens */ @media (max-width: 560px) { #income-bar .lof-buttons-container { gap: var(--lof-space-2); width: 110px; } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { padding: var(--lof-space-1); width: calc(var(--lof-income-bar-height) - 20px); height: calc(var(--lof-income-bar-height) - 20px); justify-content: center; flex-shrink: 0; border-radius: var(--lof-radius-lg); min-height: auto; } #lof-burger-btn.lof-burger .lof-icon, #lof-all-orders-btn.lof-burger .lof-icon { width: 18px; height: 18px; } #lof-burger-btn.lof-burger .lof-icon svg, #lof-all-orders-btn.lof-burger .lof-icon svg { width: 16px; height: 16px; } } /* Tablet responsive adjustments */ @media (max-width: 768px) { #income-bar .lof-income-label { white-space: nowrap; font-size: .9rem; } #income-bar #daily-income-total { font-size: 1.4em; } #income-bar .lof-buttons-container { gap: var(--lof-space-2); width: 120px; } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { width: calc(var(--lof-income-bar-height) - 12px); height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-2); min-height: auto; } } /* Small mobile phones and ultra mobile phones */ @media (max-width: 600px) { #income-bar #daily-income-total { font-size: 1.35em; } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); width: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-1); min-height: auto; } } @media (max-width: 480px) { #income-bar .lof-buttons-container { gap: var(--lof-space-2); width: 105px; } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { padding: var(--lof-space-1); width: calc(var(--lof-income-bar-height) - 16px); height: calc(var(--lof-income-bar-height) - 16px); min-height: auto; } } @media (max-width: 380px) { #income-bar .lof-buttons-container { gap: var(--lof-space-1); width: 95px; } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 8px); max-height: calc(var(--lof-income-bar-height) - 8px); width: calc(var(--lof-income-bar-height) - 8px); padding: 4px; min-height: auto; } } /* Reports pages inherit mobile responsive behavior from base income bar styles */ /* Reports pages inherit all income bar styling from base rules above */ /* =================================================================== */ /* LIGHT MODE COMPREHENSIVE STYLING */ /* =================================================================== */ /* Light mode comprehensive styling consolidated */ html[data-theme="light"] { #income-bar { background: var(--lof-glass-bg); border-color: var(--lof-border); } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } #lof-burger-btn.lof-burger, #lof-all-orders-btn.lof-burger:hover { background: rgba(0, 0, 0, 0.12); transform: translateY(calc(-50% - 1px)); } /* Light theme cafe name with enhanced readability */ .lof-cafe-name { color: var(--lof-text); background: transparent; /* Enhanced light theme text shadows */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px var(--lof-shadow-light), 0 1px 0px rgba(255, 255, 255, 0.5); /* Light theme text stroke for crispness */ -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.1); } .lof-cafe-name:hover { /* Enhanced typography for light theme hover */ font-weight: 800; letter-spacing: 0.1em; /* Fallback color for browsers that don't support background-clip */ color: var(--lof-warning); /* Enhanced light theme gradient */ background: linear-gradient(135deg, var(--lof-text) 0%, #ea580c 20%, var(--lof-warning) 40%, #d97706 60%, #92400e 80%, var(--lof-text) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Enhanced light theme shadows */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px var(--lof-shadow-medium), 0 6px 12px rgba(234, 88, 12, 0.3), 0 1px 0px rgba(255, 255, 255, 0.8); } } /* Source: css/layout/navigation.css */ /* =================================================================== */ /* NAVIGATION LAYOUT - COMPREHENSIVE NAVIGATION SYSTEM */ /* =================================================================== */ /* =================================================================== */ /* BURGER BUTTON - PRIMARY NAVIGATION TRIGGER */ /* =================================================================== */ #lof-burger-btn.lof-burger { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); position: absolute; right: var(--lof-space-3); top: 50%; transform: translateY(-50%); z-index: var(--lof-z-dropdown); visibility: visible; opacity: 1; border-radius: var(--lof-radius-xl); padding: var(--lof-space-2) var(--lof-space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--lof-space-2); cursor: pointer; transition: all var(--lof-transition-base); color: var(--lof-text); font-size: var(--lof-text-xs); height: calc(var(--lof-income-bar-height) - 16px); max-height: calc(var(--lof-income-bar-height) - 16px); line-height: 1; font-weight: 600; overflow: hidden; min-height: 40px; backdrop-filter: var(--lof-glass-blur); flex-shrink: 0; /* Prevent shrinking in flex container */ } #lof-burger-btn.lof-burger .lof-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: transform var(--lof-transition-base); flex-shrink: 0; } #lof-burger-btn.lof-burger .lof-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; transition: all 0.3s var(--lof-transition-smooth); } #lof-burger-btn.lof-burger .lof-label { font-weight: 700; letter-spacing: 0.5px; color: var(--lof-text); } /* =================================================================== */ /* BURGER BUTTON INTERACTION STATES */ /* =================================================================== */ #lof-burger-btn.lof-burger:hover { background: var(--lof-surface-hover); border-color: var(--lof-border-strong); transform: translateY(calc(-50% - 2px)) scale(1.02); box-shadow: var(--lof-shadow-lg); } #lof-burger-btn.lof-burger:hover .lof-icon { transform: scale(1.1) rotate(5deg); } #lof-burger-btn.lof-burger.lof-clicked .lof-icon { transform: scale(0.9) rotate(-10deg); } #lof-burger-btn.lof-burger:active { transform: translateY(-50%) scale(0.98); transition: all var(--lof-transition-fast); } #lof-burger-btn.lof-burger:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); } /* =================================================================== */ /* BURGER BUTTON CLICK RIPPLE EFFECT */ /* =================================================================== */ /* Click ripple effect */ #lof-burger-btn.lof-burger::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out; opacity: 0; pointer-events: none; } #lof-burger-btn.lof-burger.lof-clicked::before { width: 200px; height: 200px; opacity: 1; } #lof-burger-btn.lof-burger.lof-clicked { animation: lof-burger-click 0.4s var(--lof-transition-bounce); } /* =================================================================== */ /* FEED CONTROLS BAR - SECONDARY NAVIGATION */ /* =================================================================== */ .feed-controls-bar { position: relative; margin: var(--lof-space-2) auto; z-index: var(--lof-z-dropdown); display: flex; align-items: center; justify-content: center; gap: var(--lof-space-4); padding: var(--lof-space-4) var(--lof-space-6); background: var(--lof-glass-bg); backdrop-filter: var(--lof-glass-blur); border: 1px solid var(--lof-border); box-shadow: var(--lof-shadow-lg); border-radius: var(--lof-radius-full); transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out; } /* Hide feed controls on reports page */ .lof-reports-page .feed-controls-bar { display: none !important; } .feed-controls-bar.hidden { opacity: 0 !important; pointer-events: none !important; top: 0 !important; } /* =================================================================== */ /* REPORTS NAVIGATION (HEADER REMOVED) */ /* =================================================================== */ /* =================================================================== */ /* REPORTS NAVIGATION BUTTONS */ /* =================================================================== */ .lof-reports-nav a.lof-btn-return { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); color: var(--lof-text-on-primary); padding: 10px 18px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block; transition: all var(--lof-transition-base); } .lof-reports-nav a.lof-btn-return:hover { background: var(--lof-surface-hover); transform: translateY(-1px); box-shadow: var(--lof-shadow-md); } /* =================================================================== */ /* THEME TOGGLE BUTTON */ /* =================================================================== */ .lof-theme-toggle { background: var(--lof-surface-alt); border: 1px solid var(--lof-border); color: var(--lof-text); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; padding: 8px 10px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; transition: .25s; width: 36px; height: 36px; } /* Reports header theme toggle removed */ .lof-theme-toggle:hover { background: var(--lof-primary-100); color: var(--lof-primary-700); border-color: var(--lof-primary-300); } .lof-theme-toggle:active { transform: scale(0.95); } /* =================================================================== */ /* MORE BUTTON (ADDITIONAL NAVIGATION) */ /* =================================================================== */ .lof-more-btn { margin-top: 10px; display: inline-block; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--lof-text); cursor: pointer; transition: .25s; } .lof-more-btn:hover { background: var(--lof-primary); color: var(--lof-text-on-primary); border-color: var(--lof-primary); } [data-high-contrast] .lof-more-btn { border-width: 2px; } /* =================================================================== */ /* MOBILE NAVIGATION BAR */ /* =================================================================== */ .lof-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--lof-surface); border-top: 1px solid var(--lof-border); display: flex; justify-content: space-around; align-items: center; padding: 4px 6px; z-index: var(--lof-z-modal); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); } .lof-mobile-nav button { background: none; border: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--lof-text-muted); padding: 4px 2px; cursor: pointer; position: relative; transition: all var(--lof-transition-base); } .lof-mobile-nav button span { font-size: 18px; line-height: 1; } .lof-mobile-nav button:focus-visible { outline: 2px solid var(--lof-focus); outline-offset: 2px; border-radius: 8px; } .lof-mobile-nav button.active, .lof-mobile-nav button:hover { color: var(--lof-primary); } .lof-mobile-nav button.active:after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 2px; background: var(--lof-primary); } .lof-mobile-nav button em { font-style: normal; font-size: 11px; margin-top: 2px; } /* =================================================================== */ /* FOOTER CONTROLS (NON-STICKY NAVIGATION) */ /* =================================================================== */ /* Footer controls bar - natural flow positioning at end of content */ #lof-footer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--lof-surface); border-top: 1px solid var(--lof-border); position: relative; /* Natural document flow */ width: 100%; /* Ensure full width */ box-sizing: border-box; /* Include padding in width calculation */ margin-top: 20px; /* Space from content above */ clear: both; /* Clear any floated content */ z-index: 10; /* Ensure footer appears above other content */ } /* Footer controls bottom notify styles moved to css/components/forms.css */ /* Theme Toggle Button - comprehensive styling from original */ .lof-theme-toggle { background: var(--lof-surface-alt); border: 1px solid var(--lof-border); border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0; margin: 0; font-size: 18px; line-height: 1; color: var(--lof-text); } .lof-theme-toggle:hover { background: var(--lof-primary-100); color: var(--lof-primary-700); border-color: var(--lof-primary-300); } .lof-theme-toggle:active { transform: scale(0.95); } /* Dark mode specific styles */ [data-theme="dark"] .lof-theme-toggle { background: var(--lof-neutral-700); border-color: var(--lof-neutral-600); color: var(--lof-neutral-100); } [data-theme="dark"] .lof-theme-toggle:hover { background: var(--lof-neutral-600); color: var(--lof-neutral-50); } /* Make sure the theme toggle is visible on all backgrounds */ #lof-footer-controls .lof-theme-toggle { flex-shrink: 0; } /* Theme support for footer controls */ html[data-theme="dark"] #lof-footer-controls { background: var(--lof-surface); border-top-color: var(--lof-border); } html[data-theme="light"] #lof-footer-controls { background: var(--lof-surface); border-top-color: var(--lof-border); } html[data-theme="dark"] { #lof-footer-controls { background: var(--lof-surface); border-top-color: var(--lof-border); } } html[data-theme="light"] { #lof-footer-controls { background: var(--lof-surface); border-top-color: var(--lof-border); } } /* Natural footer layout - footer flows at end of content */ body.has-lof-footer { /* Remove flexbox layout to allow natural document flow */ } /* Remove any special positioning for content containers */ body.has-lof-footer #live-feed-wrapper, body.has-lof-footer #live-order-feed-container, body.has-lof-footer .lof-main-content, body.has-lof-footer .lof-reports-page, body.has-lof-footer #lof-reports-page { /* Let content flow naturally */ } /* Responsive footer controls */ @media (max-width: 640px) { body.has-lof-footer { /* Remove flexbox layout for natural flow */ } #lof-footer-controls { padding: 10px 12px; gap: 10px; margin-top: 20px; /* Space from content above */ position: relative; /* Natural flow */ } .lof-theme-toggle { width: 36px; height: 36px; font-size: 16px; } } @media (max-width: 480px) { #lof-footer-controls { padding: 8px 10px; gap: 8px; } #lof-footer-controls .lof-theme-toggle { width: 32px; height: 32px; font-size: 14px; } } /* PWA fullscreen mode support - natural flow */ @media (display-mode: fullscreen) { /* Footer in PWA - natural document flow */ #lof-footer-controls { position: relative !important; background: var(--lof-surface) !important; margin-top: 20px !important; border-top: 1px solid var(--lof-border) !important; } /* Let content flow naturally in PWA mode */ #live-feed-wrapper, #live-order-feed-container, .lof-login-wrapper { /* Natural document flow */ } } /* Safe area adjustments for devices with notches - only for footer */ #lof-footer-controls { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } /* Footer content and branding - from original */ .footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 12px 16px; background: var(--lof-surface); border-top: 1px solid var(--lof-border); } .footer-brand { font-weight: 600; color: var(--lof-text); font-size: 16px; } .footer-version { color: var(--lof-text-muted); font-size: 14px; font-weight: 500; } @media (max-width: 768px) { .footer-content { flex-direction: column; gap: 8px; text-align: center; padding: 8px 12px; } } /* Footer positioning classes for layout control */ .lof-footer-left { order: 1; } .lof-footer-center { order: 2; flex: 1; text-align: center; } .lof-footer-right { order: 3; } /* =================================================================== */ /* NAVIGATION VISIBILITY CONTROLS */ /* =================================================================== */ /* Hide live-feed-top-nav */ #live-feed-top-nav { display: none !important; } /* Navigation hidden state */ #live-feed-wrapper.nav-hidden { margin-top: 0; } /* Ensure burger button container doesn't clip content */ .feed-controls-bar, #live-feed-wrapper, #live-order-feed-container { overflow: visible; } /* =================================================================== */ /* SWIPE NAVIGATION HINTS */ /* =================================================================== */ .lof-swipe-container { position: relative; overflow: hidden; touch-action: pan-y; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease-out; will-change: transform, filter; transform-origin: center top; } .lof-swipe-left-hint, .lof-swipe-right-hint { position: fixed; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--lof-transition-base); backdrop-filter: var(--lof-glass-blur); z-index: var(--lof-z-tooltip); box-shadow: var(--lof-shadow-xl); } .lof-swipe-left-hint { left: -64px; } .lof-swipe-right-hint { right: -64px; } .lof-swipe-left-hint.lof-visible { opacity: 1; left: var(--lof-space-5); } .lof-swipe-right-hint.lof-visible { opacity: 1; right: var(--lof-space-5); } .lof-swipe-left-hint svg, .lof-swipe-right-hint svg { width: 24px; height: 24px; stroke: var(--lof-primary-600); stroke-width: 2; fill: none; } /* Pull to refresh indicator */ .lof-refresh-indicator { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); color: var(--lof-text-600, #666); font-size: 14px; font-weight: 500; opacity: 0; transition: all 0.2s ease-out; z-index: var(--lof-z-modal); background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); border-radius: var(--lof-radius-lg); padding: var(--lof-space-2) var(--lof-space-4); backdrop-filter: var(--lof-glass-blur); box-shadow: var(--lof-shadow-lg); white-space: nowrap; } .lof-refresh-indicator.lof-active { opacity: 1; top: var(--lof-space-4); } /* Enhanced swipe container for gesture feedback */ .lof-swipe-container.lof-pulling { transition: none !important; } .lof-swipe-container.lof-swiping { transition: none !important; } /* Swipe hint enhancements */ .lof-swipe-left-hint.lof-invalid, .lof-swipe-right-hint.lof-invalid { opacity: 0.3 !important; filter: grayscale(1); transform: translateY(-50%) scale(0.9); } .lof-swipe-left-hint.lof-valid, .lof-swipe-right-hint.lof-valid { opacity: 1 !important; filter: none; transform: translateY(-50%) scale(1.05); box-shadow: 0 8px 32px rgba(46, 204, 113, 0.3); } /* Gesture feedback animations */ @keyframes lof-refresh-bounce { 0% { transform: translateX(-50%) translateY(-10px) scale(1); } 50% { transform: translateX(-50%) translateY(0px) scale(1.1); } 100% { transform: translateX(-50%) translateY(-5px) scale(1); } } .lof-refresh-indicator.lof-triggered { animation: lof-refresh-bounce 0.6s ease-in-out; } @keyframes lof-swipe-pulse { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.15); } 100% { transform: translateY(-50%) scale(1); } } .lof-swipe-left-hint.lof-triggered, .lof-swipe-right-hint.lof-triggered { animation: lof-swipe-pulse 0.4s ease-in-out; } /* Haptic feedback visual cue */ .lof-swipe-container.lof-haptic { animation: lof-haptic-flash 0.1s ease-out; } @keyframes lof-haptic-flash { 0% { filter: brightness(1); } 50% { filter: brightness(1.1); } 100% { filter: brightness(1); } } /* =================================================================== */ /* NAVIGATION STATE ANIMATIONS */ /* =================================================================== */ /* Income bar navigation states */ #income-bar.lof-navigating { transform: translateY(-8px) scale(0.98); opacity: 0.7; filter: blur(1px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Burger button click animation */ @keyframes lof-burger-click { 0% { transform: translateY(calc(-50% - 1px)) scale(1.02); } 25% { transform: translateY(-50%) scale(0.98); } 50% { transform: translateY(calc(-50% - 1px)) scale(1.04); } 75% { transform: translateY(-50%) scale(0.99); } 100% { transform: translateY(calc(-50% - 1px)) scale(1.02); } } /* =================================================================== */ /* THEME-SPECIFIC NAVIGATION STYLES */ /* =================================================================== */ /* Dark mode theme toggle */ [data-theme="dark"] .lof-theme-toggle { background: var(--lof-neutral-700); border-color: var(--lof-neutral-600); color: var(--lof-neutral-100); } [data-theme="dark"] .lof-theme-toggle:hover { background: var(--lof-neutral-600); color: var(--lof-neutral-50); } [data-theme="dark"] .lof-theme-toggle:hover { background: var(--lof-primary); border-color: var(--lof-primary); } /* Dark mode feed controls */ html[data-theme="dark"] .feed-controls-bar { background: rgba(40, 49, 58, 0.9); border-color: #3a4754; } /* Light mode feed controls */ .feed-controls-bar { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .feed-controls-bar { background: rgba(255, 255, 255, .85); border-color: var(--lof-border); } /* Light mode burger button */ html[data-theme="light"] { #lof-burger-btn.lof-burger { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } #lof-burger-btn.lof-burger:hover { background: rgba(0, 0, 0, 0.12); transform: translateY(-1px); } } /* =================================================================== */ /* RESPONSIVE NAVIGATION DESIGN */ /* =================================================================== */ /* Small mobile screens - Hide burger label */ @media (max-width: 560px) { #lof-burger-btn .lof-label { display: none; } #lof-burger-btn.lof-burger { padding: var(--lof-space-2); width: calc(var(--lof-income-bar-height) - 16px); height: calc(var(--lof-income-bar-height) - 16px); justify-content: center; margin-right: var(--lof-space-2); flex-shrink: 0; border-radius: var(--lof-radius-lg); min-height: auto; } #lof-burger-btn.lof-burger .lof-icon { width: 20px; height: 20px; } #lof-burger-btn.lof-burger .lof-icon svg { width: 16px; height: 16px; } .lof-reports-nav { width: 100%; } .lof-reports-nav .lof-btn-return { display: block; width: 100%; text-align: center; padding: 12px 16px; font-size: 15px; } } /* Tablet responsive adjustments */ @media (max-width: 768px) { /* Body padding handled in base.css */ #live-feed-wrapper { margin-top: 0; } #live-feed-wrapper.nav-hidden { margin-top: 0; } .feed-controls-bar { flex-direction: column; height: auto; top: 65px; border-radius: 22px; gap: 12px; } #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-2) var(--lof-space-3); margin-right: var(--lof-space-2); min-height: auto; } #lof-burger-btn.lof-burger { align-self: flex-end; } } /* Small mobile phones */ @media (max-width: 480px) { #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-1) var(--lof-space-2); margin-right: var(--lof-space-2); width: auto; min-width: calc(var(--lof-income-bar-height) - 12px); min-height: auto; } } /* Ultra mobile phones */ @media (max-width: 600px) { #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); width: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-1); margin-right: var(--lof-space-1); min-height: auto; } } @media (max-width: 380px) { #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 8px); max-height: calc(var(--lof-income-bar-height) - 8px); width: calc(var(--lof-income-bar-height) - 8px); padding: 4px; margin-right: 4px; min-height: auto; } } /* =================================================================== */ /* MOBILE NAVIGATION RESPONSIVE DESIGN */ /* =================================================================== */ /* Safe area adjustments for mobile bottom nav */ @media (max-width: 820px) { .lof-reports-page { padding-bottom: calc(90px + var(--lof-safe-bottom)); } .lof-mobile-nav { padding-bottom: calc(4px + var(--lof-safe-bottom)); } } /* Mobile "app-like" override layer */ @media (max-width: 640px) { /* Reports header removed */ .lof-reports-nav .lof-btn-return { background: rgba(255, 255, 255, .18) !important; font-size: 12px !important; padding: 8px 14px !important; } .lof-mobile-nav { height: 68px !important; box-shadow: 0 -4px 12px -4px rgba(0, 0, 0, .18) !important; background: var(--lof-surface) !important; } .lof-mobile-nav button { padding: 6px 4px !important; min-height: 56px; } .lof-mobile-nav button span { font-size: 20px !important; } /* Improved tap highlight */ .lof-mobile-nav button, .lof-kpis-scroll .lof-kpi { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12); } } /* =================================================================== */ /* CONTAINER QUERY NAVIGATION ADAPTATIONS */ /* =================================================================== */ /* Container queries for adaptive layouts */ @container (max-width: 480px) { .feed-controls-bar { flex-direction: column; gap: var(--lof-space-3); padding: var(--lof-space-3); } } /* Container query fallbacks */ @supports not (container-type: inline-size) { @media (max-width: 480px) { .feed-controls-bar { flex-direction: column; gap: var(--lof-space-3); padding: var(--lof-space-3); } } } /* =================================================================== */ /* HIGH DPI & PRINT NAVIGATION STYLES */ /* =================================================================== */ /* High DPI displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .burger-btn::before, .burger-btn::after, .burger-btn span { height: 2px; } } /* Print styles - Hide navigation */ @media print { .burger-btn, .notification-controls, .load-more-btn, .lof-swipe-left-hint, .lof-swipe-right-hint, .lof-refresh-indicator, .feed-controls-bar, .lof-mobile-nav, .lof-theme-toggle { display: none !important; } } /* =================================================================== */ /* HIGH CONTRAST NAVIGATION */ /* =================================================================== */ /* High contrast mode */ @media (prefers-contrast: high) { .load-more-btn, .burger-btn, .toggle-switch .slider { border: 2px solid currentColor; } } /* =================================================================== */ /* REDUCED MOTION NAVIGATION */ /* =================================================================== */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { .order-card, .feed-controls-bar, #lof-burger-btn.lof-burger, .lof-mobile-nav button { animation: none; transition: none; } } /* =================================================================== */ /* ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* Enhanced touch targets for mobile */ @media (max-width: 600px) { .lof-theme-toggle { padding: 10px 12px; font-size: 18px; } } /* GPU acceleration for smooth navigation animations */ .load-more-btn, .burger-btn, .lof-mobile-nav, .feed-controls-bar { will-change: transform; transform: translateZ(0); /* Force GPU layer */ } /* Source: css/components/cards.css */ /* =================================================================== */ /* CARD COMPONENTS */ /* Order cards, KPI cards, product cards, seller cards */ /* Card animations, transitions, and visual effects */ /* =================================================================== */ /* =================================================================== */ /* SKELETON CARD LOADING STATES */ /* =================================================================== */ /* Skeleton card styles moved to css/components/skeletons.css to avoid conflicts */ /* =================================================================== */ /* ORDER CARDS */ /* =================================================================== */ /* Status message and order card container styles moved from containers.css */ .status-message { grid-column: 1 / -1; text-align: center; font-size: 1.2em; color: var(--lof-text-muted); padding: 60px 20px; background: var(--lof-surface); border-radius: 8px; border: 1px dashed var(--lof-border); } .order-card { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; box-shadow: var(--lof-shadow-md); display: flex; flex-direction: column; overflow: hidden; animation: slideUp .6s ease-out; transition: transform var(--lof-transition-base), box-shadow var(--lof-transition-base); will-change: transform, box-shadow; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* New order highlighting */ .order-card.new-order { border-left: 5px solid var(--lof-success); box-shadow: 0 8px 25px var(--lof-success-shadow); } /* Order card variants for different themes */ html[data-theme="dark"] .order-card { background: var(--lof-surface-alt); border-color: var(--lof-border); } /* Glass morphism dark mode */ .order-card { background: var(--lof-glass-dark-bg); border-color: var(--lof-glass-dark-border); } .order-card.new-order { box-shadow: 0 4px 18px -2px rgba(37, 99, 235, 0.55); } /* Enhanced card hover effects */ .order-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .order-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--lof-shadow-xl); } .order-card.new-order { border-left: 6px solid var(--lof-primary); box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.25); } /* Base order card styling */ .order-card { border-color: var(--lof-border); background: var(--lof-surface); } .order-card.new-order { border-left: 6px solid var(--lof-primary); box-shadow: 0 4px 16px -2px rgba(37, 99, 235, .35); } /* =================================================================== */ /* ORDER CARD STRUCTURE */ /* =================================================================== */ /* Order Header */ .order-header { padding: 14px 18px; display: flex; align-items: center; gap: 14px; justify-content: flex-start; flex-wrap: nowrap; background: linear-gradient(135deg, var(--lof-surface-alt) 0%, var(--lof-surface) 100%); border-bottom: 1px solid var(--lof-border); border-radius: var(--lof-radius-lg) var(--lof-radius-lg) 0 0; position: relative; transition: all var(--lof-transition-base); } /* Customer information in order header */ .order-customer { font-size: 0.875em; color: var(--lof-text-muted); background: var(--lof-surface-alt); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--lof-border-light); font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lof-primary) 0%, var(--lof-accent) 50%, var(--lof-primary) 100%); border-radius: var(--lof-radius-lg) var(--lof-radius-lg) 0 0; opacity: 0.8; } html[data-theme="dark"] .order-header { background: linear-gradient(135deg, var(--lof-surface) 0%, var(--lof-surface-alt) 100%); border-color: var(--lof-border); } html[data-theme="dark"] .order-header::before { opacity: 0.9; } /* Dark theme order header elements */ html[data-theme="dark"] .order-header .order-id { color: var(--lof-primary-300); background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.15); border-color: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.3); } html[data-theme="dark"] .order-header .order-id:hover { background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.25); } html[data-theme="dark"] .order-header .order-total { color: #86efac; background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2); } html[data-theme="dark"] .order-header .order-total:hover { box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3); } html[data-theme="dark"] .order-header .order-time { color: #cbd5e1; background: rgba(148, 163, 184, 0.15); border-color: rgba(148, 163, 184, 0.3); } html[data-theme="dark"] .order-header .order-time:hover { background: rgba(148, 163, 184, 0.25); } /* Order Header Elements */ .order-header .order-id { font-size: 1.1em; font-weight: 700; color: var(--lof-primary); text-decoration: none; padding: 6px 10px; border-radius: var(--lof-radius-md); background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.1); border: 1px solid rgba(var(--lof-primary-rgb, 29, 96, 214), 0.2); transition: all var(--lof-transition-fast); display: flex; align-items: center; min-width: fit-content; } .order-header .order-id:hover { background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.15); transform: translateY(-1px); } .order-header .order-total { color: var(--lof-success); background: var(--lof-success-bg); font-weight: 600; font-size: 0.95em; padding: 6px 12px; border-radius: var(--lof-radius-md); border: 1px solid rgba(var(--lof-success-rgb, 34, 197, 94), 0.3); white-space: nowrap; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(var(--lof-success-rgb, 34, 197, 94), 0.15); transition: all var(--lof-transition-fast); } .order-header .order-total:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(var(--lof-success-rgb, 34, 197, 94), 0.2); } .order-header .order-time { color: var(--lof-text-muted); font-size: 0.9em; font-weight: 500; padding: 6px 10px; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-md); white-space: nowrap; margin-left: auto; display: flex; align-items: center; transition: all var(--lof-transition-fast); } .order-header .order-time:hover { background: var(--lof-surface-alt); transform: translateY(-1px); } /* Keep header items on the same level without wrapping */ .order-header .order-id, .order-header .order-total, .order-header .order-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =================================================================== */ /* ORDER BODY */ /* =================================================================== */ /* Order Body Container */ .order-body { padding: 16px 18px 18px; background: var(--lof-surface); border-radius: 0 0 var(--lof-radius-lg) var(--lof-radius-lg); position: relative; transition: all var(--lof-transition-base); } .order-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--lof-border) 20%, var(--lof-border) 80%, transparent 100%); opacity: 0.6; } html[data-theme="dark"] .order-body { background: var(--lof-surface-alt); } /* Order Items List */ .order-items-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .order-items-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; background: transparent; border: none; transition: all var(--lof-transition-fast); position: relative; } .order-items-list li:hover { background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.03); transform: translateX(1px); } html[data-theme="dark"] .order-items-list li:hover { background: rgba(var(--lof-primary-rgb, 29, 96, 214), 0.08); } /* Order Item Elements */ .item-info { font-weight: 500; font-size: 0.9rem; color: var(--lof-text); line-height: 1.3; flex: 1; margin-right: 12px; display: flex; align-items: center; transition: all var(--lof-transition-fast); } .item-info::before { content: '•'; color: var(--lof-text-muted); font-weight: normal; margin-right: 6px; font-size: 0.8em; opacity: 0.6; transition: all var(--lof-transition-fast); } .order-items-list li:hover .item-info::before { color: var(--lof-primary); opacity: 0.8; } .item-price { font-weight: 500; font-size: 0.8rem; color: var(--lof-text-muted); background: transparent; padding: 0; border: none; white-space: nowrap; display: flex; align-items: center; font-variant-numeric: tabular-nums; transition: all var(--lof-transition-fast); min-width: fit-content; } .order-items-list li:hover .item-price { color: var(--lof-text); } /* Dark theme item elements */ html[data-theme="dark"] .item-info { color: var(--lof-text); } html[data-theme="dark"] .item-info::before { color: var(--lof-text-muted); } html[data-theme="dark"] .order-items-list li:hover .item-info::before { color: var(--lof-primary-300); } html[data-theme="dark"] .item-price { color: var(--lof-text-muted); } html[data-theme="dark"] .order-items-list li:hover .item-price { color: var(--lof-text); } /* Mobile responsive order cards */ @media (max-width: 768px) { #live-order-feed-container .order-card { flex: 0 0 auto; max-width: 100%; scroll-snap-align: unset; font-size: 1.05rem; padding-bottom: 4px; } #live-order-feed-container .order-card .order-header { font-size: 1rem; } #live-order-feed-container .order-card .order-header .order-id { font-size: 1em; } #live-order-feed-container .order-card .order-header .order-total { font-size: 0.95em; } #live-order-feed-container .order-card .order-header .order-time { font-size: 0.9em; } .order-card { border-radius: 14px; box-shadow: 0 1px 6px -2px rgba(0, 0, 0, .10); } .order-header { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; gap: 8px; } .order-header .order-id { font-size: 1em; padding: 4px 8px; } .order-header .order-total { order: 1; margin: 0; font-size: 0.8em; padding: 4px 8px; } .order-header .order-time { font-size: 0.8em; padding: 4px 8px; } /* Order body mobile adjustments */ .order-body { padding: 0px 14px; } .order-items-list { gap: 1px; } .order-items-list li { padding: 4px 0; } .item-info { font-size: 0.85rem; margin-right: 8px; } .item-info::before { margin-right: 4px; font-size: 0.7em; } .item-price { font-size: 0.75rem; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .order-card, .feed-controls-bar { animation: none; transition: none; } } /* =================================================================== */ /* KPI CARDS */ /* =================================================================== */ /* Minimalist KPI card design */ .lof-reports-page .lof-kpi, .lof-kpis .lof-kpi, body .lof-kpi { background: var(--lof-surface) !important; border: 1px solid var(--lof-border) !important; border-radius: var(--lof-radius-lg) !important; padding: 24px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important; transition: all 0.2s ease !important; min-height: 140px !important; position: relative !important; } /* Subtle hover effect */ .lof-reports-page .lof-kpi:hover, .lof-kpis .lof-kpi:hover, body .lof-kpi:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--lof-shadow-xl) !important; } /* KPI typography - clean and minimal */ .lof-reports-page .lof-kpi .label, .lof-kpis .lof-kpi .label, body .lof-kpi .label { font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; color: var(--lof-text-muted) !important; margin-bottom: 8px !important; display: block !important; line-height: 1.2 !important; } /* Main KPI value with clean styling */ .lof-reports-page .lof-kpi strong, .lof-kpis .lof-kpi strong, body .lof-kpi strong { font-size: 2.25rem !important; line-height: 1.2 !important; font-weight: 700 !important; color: var(--lof-text) !important; margin: 0 0 8px !important; font-variant-numeric: tabular-nums !important; } /* Clean subtitle styling */ .lof-kpi .kpi-sub { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--lof-text-muted); opacity: 0.8; } /* Simple delta indicator */ .lof-kpi .delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-top: 8px; background: var(--lof-surface-alt); color: var(--lof-text-muted); } .lof-kpi .delta .delta-icon { opacity: 0.9; line-height: 0; font-size: 14px; transition: transform var(--lof-transition-fast); } .lof-kpi .delta .delta-val { line-height: 1; font-variant-numeric: tabular-nums; color: inherit; } /* Delta states with enhanced colors */ .lof-kpi.delta-up .delta { color: var(--lof-success-700); background: var(--lof-success-100); border-color: var(--lof-success-200); box-shadow: 0 2px 8px var(--lof-success-shadow); } .lof-kpi.delta-up:hover .delta .delta-icon { transform: translateY(-1px); } .lof-kpi.delta-down .delta { color: var(--lof-danger-700); background: var(--lof-danger-100); border-color: var(--lof-danger-200); box-shadow: 0 2px 8px var(--lof-danger-shadow); } .lof-kpi.delta-down:hover .delta .delta-icon { transform: translateY(1px); } .lof-kpi.delta-flat .delta { color: var(--lof-neutral-700); background: var(--lof-neutral-100); border-color: var(--lof-neutral-200); box-shadow: 0 2px 8px var(--lof-shadow-light); } /* KPI type-specific accent colors */ .lof-kpi[data-kpi="income"]::after { background: var(--lof-kpi-income); } .lof-kpi[data-kpi="orders"]::after { background: var(--lof-kpi-orders); } .lof-kpi[data-kpi="15m"]::after { background: var(--lof-kpi-15m); } .lof-kpi[data-kpi="aov"]::after { background: var(--lof-kpi-aov); } /* Responsive adjustments */ @container (max-width: 280px) { .lof-kpi { padding: 20px 16px 16px; } .lof-kpi strong { font-size: 1.5rem; } } /* =================================================================== */ /* KPI CARD LOADING STATES */ /* =================================================================== */ /* Skeleton loading state for KPI cards */ .lof-kpi.skeleton-loaded { pointer-events: none; } .lof-kpi.skeleton-loaded .lof-skel { background: linear-gradient(90deg, var(--lof-neutral-200) 25%, var(--lof-neutral-100) 50%, var(--lof-neutral-200) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Fix for skeleton elements inside KPI labels */ #lof-reports-page > section > div:nth-child(2) > span.label > div, .lof-reports-page .lof-kpi .label > div.lof-skel, .lof-kpis .lof-kpi .label > div.lof-skel { display: block !important; margin: 0 !important; padding: 0 !important; background: var(--lof-neutral-200) !important; border-radius: 4px !important; height: 12px !important; width: 80px !important; animation: skeleton-shimmer 1.5s ease-in-out infinite !important; } /* Smooth transition when skeleton is cleared */ .lof-kpi:not(.skeleton-loaded) strong, .lof-kpi:not(.skeleton-loaded) .label { animation: fade-in 0.3s ease-in-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Breathing effect for loading KPI cards */ .lof-kpi.lof-kpi-loading { animation: lof-kpi-breathe 3s ease-in-out infinite; } @keyframes lof-kpi-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } } /* High performance mode */ @media (prefers-reduced-motion: reduce) { .lof-kpi, .lof-kpi strong, .lof-kpi .delta { animation: none !important; transition: none !important; } .lof-kpi:hover { transform: none; } } /* =================================================================== */ /* PRODUCT CARDS */ /* =================================================================== */ /* Top products section card */ .lof-top-products-section, .lof-orders-table-section { margin: 16px 0 28px; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 16px; padding: 20px 24px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .1), 0 8px 24px -8px rgba(0, 0, 0, .08); transition: box-shadow 0.25s ease, transform 0.2s ease; position: relative; overflow: hidden; } .lof-top-products-section:hover { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .12), 0 12px 32px -8px rgba(0, 0, 0, .1); transform: translateY(-2px); } .lof-top-products-section h2, .lof-orders-table-section h2 { font-size: 20px; margin: 0 0 16px; color: var(--lof-text); font-weight: 600; letter-spacing: -0.025em; } /* Product item cards */ .lof-product-full-item { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 20px; padding: 20px 24px; margin: 0 0 12px 0; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; min-height: 80px; } .lof-product-full-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); border-color: var(--lof-neutral-300); } .product-rank { background: var(--lof-neutral-100); color: var(--lof-neutral-600); font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 8px; text-align: center; min-width: 40px; transition: all 0.2s ease; } .lof-product-full-item:hover .product-rank { background: var(--lof-neutral-200); color: var(--lof-neutral-700); } .product-name { font-size: 16px; font-weight: 600; color: var(--lof-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease; } .product-qty { background: var(--lof-neutral-600); color: #ffffff; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; text-align: center; transition: all 0.2s ease; } .lof-product-full-item:hover .product-qty { background: var(--lof-neutral-700); } .product-percentage { background: var(--lof-neutral-400); color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; text-align: center; min-width: 45px; transition: all 0.2s ease; } .lof-product-full-item:hover .product-percentage { background: var(--lof-neutral-500); } .product-amount { font-size: 17px; font-weight: 700; color: var(--lof-text); white-space: nowrap; text-align: right; min-width: 80px; transition: all 0.2s ease; } .product-income-bar { display: none; /* Hide income bar to match reports page layout */ } /* Enhanced product item animations */ .lof-product-full-item { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lof-product-full-item.animate-in { opacity: 1; transform: translateY(0) scale(1); } .lof-product-full-item:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); } .lof-product-full-item:hover .income-bar-label { color: #667eea; transform: translateY(-50%) scale(1.1); } /* Mobile responsive product cards */ @media (max-width: 768px) { .lof-product-full-item { grid-template-columns: auto 1fr auto auto auto; padding: 12px 16px; gap: 12px; min-height: 64px; } .lof-product-full-item { gap: 16px; padding: 12px 16px; } } @media (max-width: 480px) { .lof-product-full-item { padding: 10px 12px; gap: 12px; margin: 0 4px; grid-template-columns: auto 1fr auto; } } /* =================================================================== */ /* PRODUCT SKELETON LOADING */ /* =================================================================== */ /* Skeleton loading items for grid */ .lof-product-skeleton { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 20px; padding: 20px 24px; margin: 0 0 12px 0; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; position: relative; overflow: hidden; } .lof-product-skeleton::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: lof-skeleton-loading 2s infinite; } @keyframes lof-skeleton-loading { 0% { left: -100%; } 100% { left: 100%; } } @keyframes lof-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* =================================================================== */ /* LOADING STATES & SPINNERS */ /* =================================================================== */ /* Enhanced loading and error states for report pages */ .lof-products-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; min-height: 400px; background: linear-gradient(135deg, var(--lof-bg-primary) 0%, var(--lof-bg-secondary) 100%); border-radius: 16px; margin: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .lof-loading-spinner { width: 60px; height: 60px; border: 6px solid var(--lof-neutral-200); border-top: 6px solid var(--lof-primary-500); border-radius: 50%; animation: lof-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; margin-bottom: 30px; position: relative; } .lof-loading-spinner::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: var(--lof-primary-300); border-radius: 50%; transform: translate(-50%, -50%); animation: lof-pulse 1.2s ease-in-out infinite; } @keyframes lof-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes lof-pulse { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.8); } } .lof-loading-text h3 { color: var(--lof-text-primary); font-size: 24px; font-weight: 700; margin: 0 0 12px 0; animation: lof-fade-in 0.8s ease-out; } .lof-loading-text p { color: var(--lof-text-secondary); font-size: 16px; margin: 0 0 30px 0; animation: lof-fade-in 0.8s ease-out 0.2s both; } .lof-loading-progress { width: 100%; max-width: 300px; height: 6px; background: var(--lof-neutral-200); border-radius: 3px; overflow: hidden; animation: lof-fade-in 0.8s ease-out 0.4s both; } .lof-progress-bar { height: 100%; background: linear-gradient(90deg, var(--lof-primary-400) 0%, var(--lof-primary-600) 100%); border-radius: 3px; animation: lof-progress-indeterminate 2s ease-in-out infinite; } @keyframes lof-progress-indeterminate { 0% { left: -50%; width: 30%; } 50% { left: 20%; width: 80%; } 100% { left: 100%; width: 30%; } } @keyframes lof-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* =================================================================== */ /* CARD ANIMATION UTILITIES */ /* =================================================================== */ /* Fade in animation */ @keyframes lof-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lof-fade-in-scale { 0% { transform: scale3d(0.95, 0.95, 1); opacity: 0; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } .lof-micro-fade { animation: lof-fade-in-scale 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Stagger animation for card lists */ .lof-stagger-item { opacity: 0; transform: translateY(20px); animation: lof-fade-in-scale 0.6s ease forwards; } .lof-stagger-item:nth-child(1) { animation-delay: 0.1s; } .lof-stagger-item:nth-child(2) { animation-delay: 0.2s; } .lof-stagger-item:nth-child(3) { animation-delay: 0.3s; } .lof-stagger-item:nth-child(4) { animation-delay: 0.4s; } .lof-stagger-item:nth-child(5) { animation-delay: 0.5s; } /* =================================================================== */ /* SELLER CARDS & SPECIAL CARD TYPES */ /* =================================================================== */ /* KPI card types with icons */ .lof-kpi-card[data-kpi-type="orders"] .lof-kpi-icon { background: var(--lof-success-100); color: var(--lof-success-700); } .lof-kpi-card[data-kpi-type="customers"] .lof-kpi-icon { background: var(--lof-info-100); color: var(--lof-info-700); } .lof-kpi-card[data-kpi-type="revenue"] .lof-kpi-icon { background: var(--lof-warning-100); color: var(--lof-warning-700); } /* Order row cards with hover effects */ .lof-order-row { position: relative; } .lof-order-row:before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--lof-primary), var(--lof-primary-hover)); opacity: .75; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .lof-order-row:hover { box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .18); transform: translateY(-2px); transition: .3s cubic-bezier(.16, .8, .24, 1); } .lof-order-row { transition: .3s cubic-bezier(.16, .8, .24, 1); } /* =================================================================== */ /* RESPONSIVE CARD ADJUSTMENTS */ /* =================================================================== */ @media (max-width: 768px) { /* Card spacing adjustments for mobile */ .order-card, .lof-kpi, .lof-product-full-item { margin-bottom: 12px; } /* Reduce card padding on small screens */ .lof-top-products-section, .lof-orders-table-section { padding: 16px 18px; margin: 12px 0 20px; } /* Customer info responsive adjustments */ .order-customer { max-width: 100px; font-size: 0.8em; padding: 3px 6px; } } @media (max-width: 480px) { /* Further reduce padding for very small screens */ .lof-top-products-section, .lof-orders-table-section { padding: 12px 14px; margin: 8px 0 16px; } /* Adjust KPI card min-height for mobile */ .lof-kpi { min-height: 120px !important; padding: 18px !important; } /* Customer info for very small screens */ .order-customer { max-width: 80px; font-size: 0.75em; padding: 2px 4px; } } /* =================================================================== */ /* ACCESSIBILITY & PERFORMANCE */ /* =================================================================== */ /* Ensure cards are keyboard accessible */ .order-card:focus, .lof-kpi:focus, .lof-product-full-item:focus { outline: 2px solid var(--lof-primary); outline-offset: 2px; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .order-card, .lof-kpi, .lof-product-full-item, .lof-stagger-item { animation: none !important; transition: none !important; } .order-card:hover, .lof-kpi:hover, .lof-product-full-item:hover { transform: none !important; } } /* Source: css/components/buttons.css */ /* =================================================================== */ /* BUTTON COMPONENTS */ /* Primary, secondary, utility buttons, toggles, and PWA buttons */ /* Button states, sizes, variants, and accessibility features */ /* =================================================================== */ /* =================================================================== */ /* BASE BUTTON STYLES */ /* =================================================================== */ /* Universal button touch optimization */ .lof-order-item, .lof-kpi, button, .btn { touch-action: manipulation; /* Prevent double-tap zoom */ -webkit-tap-highlight-color: rgba(46, 204, 113, 0.2); transition: transform 0.1s ease, box-shadow 0.1s ease; } .lof-order-item:active, .lof-kpi:active, button:active, .btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Better focus indicators for accessibility */ button:focus, .btn:focus, input:focus { outline: 2px solid #2ecc71; outline-offset: 2px; } /* =================================================================== */ /* PRIMARY BUTTONS */ /* =================================================================== */ /* Enhanced primary button with gradient animation */ .lof-btn-primary { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 25%, #1d4ed8 50%, #0ea5e9 75%, #10b981 100%); background-size: 300% 300%; color: white; border: 3px solid rgba(255, 255, 255, 0.25); animation: gradientShift 6s ease-in-out infinite; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 12px 24px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 33% { background-position: 50% 0%; } 66% { background-position: 100% 50%; } } .lof-btn-primary:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 32px 80px rgba(59, 130, 246, 0.3), 0 16px 32px rgba(37, 99, 235, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1), 0 3px 0 rgba(255, 255, 255, 0.4) inset, 0 -2px 0 rgba(0, 0, 0, 0.15) inset; border-color: rgba(255, 255, 255, 0.4); animation-duration: 3s; } .lof-btn-primary:active { transform: translateY(-4px) scale(1.02); transition: all 0.15s ease; box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25), 0 8px 16px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } /* Success variant for status messages */ .lof-status-success .lof-btn-primary { margin-top: 0; min-width: 240px; background: linear-gradient(135deg, #059669 0%, #047857 100%); border-color: rgba(255, 255, 255, 0.2); } /* Dark mode primary button adjustments */ [data-theme="dark"] .lof-btn-primary:hover { box-shadow: 0 8px 24px rgba(46, 204, 113, 0.2); } /* =================================================================== */ /* START FEED BUTTON */ /* =================================================================== */ /* Start feed button styles */ #start-feed-btn { background: linear-gradient(135deg, var(--lof-primary-600) 0%, var(--lof-primary-700) 100%); color: var(--lof-text-on-primary); border: none; padding: var(--lof-space-4) var(--lof-space-10); font-size: var(--lof-text-lg); font-weight: 700; border-radius: var(--lof-radius-lg); cursor: pointer; transition: all var(--lof-transition-base); box-shadow: var(--lof-shadow-md); text-transform: uppercase; letter-spacing: 0.5px; min-height: 48px; } #start-feed-btn:hover { background: linear-gradient(135deg, var(--lof-primary-700) 0%, var(--lof-primary-800) 100%); transform: translateY(-2px); box-shadow: var(--lof-shadow-xl); } #start-feed-btn:focus-visible { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } #start-feed-btn:active { transform: translateY(0); box-shadow: var(--lof-shadow-md); } /* Alternative start feed button styling */ #start-feed-btn { background: var(--lof-accent); } #start-feed-btn:hover { background: var(--lof-accent-hover); } /* Mobile start feed button adjustments */ @media (max-width: 768px) { #start-feed-btn { padding: 18px 44px; font-size: 20px; } } /* =================================================================== */ /* LOAD MORE BUTTON */ /* =================================================================== */ /* Load More Button - Reports Page Style (Centered) */ #load-more-orders, .load-more-btn { /* Centered display */ margin: 20px auto; display: block; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--lof-text); cursor: pointer; transition: all var(--lof-transition-base); text-decoration: none; text-transform: none; letter-spacing: 0.3px; position: relative; overflow: hidden; min-height: 36px; min-width: 120px; text-align: center; } #load-more-orders:hover, .load-more-btn:hover { background: var(--lof-primary); color: var(--lof-text-on-primary); border-color: var(--lof-primary); transform: translateY(-1px); box-shadow: var(--lof-shadow-md); } #load-more-orders:focus-visible, .load-more-btn:focus-visible { outline: 2px solid var(--lof-primary); outline-offset: 2px; } #load-more-orders:active, .load-more-btn:active { transform: scale(0.98); box-shadow: var(--lof-shadow-sm); transition: all 0.1s ease; } /* Dark mode adjustments */ [data-theme="dark"] #load-more-orders, [data-theme="dark"] .load-more-btn { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } [data-theme="dark"] #load-more-orders:hover, [data-theme="dark"] .load-more-btn:hover { background: var(--lof-primary); border-color: var(--lof-primary); color: var(--lof-text-on-primary); } /* High contrast mode adjustments */ [data-high-contrast] #load-more-orders, [data-high-contrast] .load-more-btn { border-width: 2px; } /* =================================================================== */ /* NAVIGATION BUTTON (BURGER/REPORTS LINK) */ /* =================================================================== */ #lof-burger-btn.lof-burger { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); position: absolute; right: var(--lof-space-3); top: 50%; transform: translateY(-50%); z-index: var(--lof-z-dropdown); visibility: visible; opacity: 1; border-radius: var(--lof-radius-xl); cursor: pointer; padding: var(--lof-space-2) var(--lof-space-4); display: inline-flex; flex-direction: row; gap: var(--lof-space-2); align-items: center; justify-content: center; text-decoration: none; transition: all var(--lof-transition-slow); font-size: var(--lof-text-xs); height: calc(var(--lof-income-bar-height) - 16px); max-height: calc(var(--lof-income-bar-height) - 16px); line-height: 1; font-weight: 600; overflow: hidden; min-height: 40px; backdrop-filter: var(--lof-glass-blur); flex-shrink: 0; /* Prevent shrinking in flex container */ } #lof-burger-btn.lof-burger .lof-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: transform var(--lof-transition-base); flex-shrink: 0; } #lof-burger-btn.lof-burger .lof-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; transition: all 0.3s var(--lof-transition-smooth); } #lof-burger-btn.lof-burger .lof-label { font-weight: 700; letter-spacing: 0.5px; color: var(--lof-text); } #lof-burger-btn.lof-burger:hover { background: var(--lof-surface-hover); border-color: var(--lof-border-strong); transform: translateY(calc(-50% - 2px)) scale(1.02); box-shadow: var(--lof-shadow-lg); } #lof-burger-btn.lof-burger:hover .lof-icon { transform: scale(1.1) rotate(5deg); } #lof-burger-btn.lof-burger.lof-clicked .lof-icon { transform: scale(0.9) rotate(-10deg); } #lof-burger-btn.lof-burger:active { transform: translateY(-50%) scale(0.98); transition: all var(--lof-transition-fast); } #lof-burger-btn.lof-burger:focus-visible { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } #lof-burger-btn.lof-burger::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--lof-primary-500); opacity: 0; border-radius: inherit; transition: opacity var(--lof-transition-base); z-index: -1; } #lof-burger-btn.lof-burger.lof-clicked::before { opacity: 0.1; } #lof-burger-btn.lof-burger.lof-clicked { border-color: var(--lof-primary-400); } /* Mobile burger button adjustments */ @media (max-width: 768px) { #lof-burger-btn .lof-label { display: none; } #lof-burger-btn.lof-burger { padding: var(--lof-space-2); width: calc(var(--lof-income-bar-height) - 12px); height: calc(var(--lof-income-bar-height) - 12px); } #lof-burger-btn.lof-burger .lof-icon { width: 18px; height: 18px; } #lof-burger-btn.lof-burger .lof-icon svg { width: 16px; height: 16px; } } /* =================================================================== */ /* REPORTS NAVIGATION BUTTONS */ /* =================================================================== */ /* Reports navigation return button */ .lof-reports-nav a.lof-btn-return { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); color: var(--lof-text-on-primary); padding: 10px 18px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block; transition: all var(--lof-transition-base); } .lof-reports-nav a.lof-btn-return:hover { background: var(--lof-surface-hover); } /* Mobile reports navigation button */ @media (max-width: 599px) { .lof-reports-nav .lof-btn-return { display: block; width: 100%; text-align: center; padding: 12px 16px; font-size: 15px; } } /* Ultra-mobile reports navigation */ @media (max-width: 430px) { .lof-reports-nav .lof-btn-return { background: rgba(255, 255, 255, .18) !important; font-size: 12px !important; padding: 8px 14px !important; } } /* =================================================================== */ /* THEME TOGGLE BUTTON */ /* =================================================================== */ .lof-theme-toggle { background: var(--lof-surface-alt); border: 1px solid var(--lof-border); border-radius: 8px; color: var(--lof-text); cursor: pointer; font-size: 16px; line-height: 1; padding: 8px 10px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; min-height: 36px; min-width: 36px; } .lof-theme-toggle:hover { background: var(--lof-primary-100); color: var(--lof-primary-700); border-color: var(--lof-primary-300); } .lof-theme-toggle:active { transform: scale(0.95); } /* Reports header theme toggle removed */ /* Dark mode theme toggle */ [data-theme="dark"] .lof-theme-toggle { background: var(--lof-neutral-700); border-color: var(--lof-neutral-600); color: var(--lof-neutral-100); } [data-theme="dark"] .lof-theme-toggle:hover { background: var(--lof-neutral-600); color: var(--lof-neutral-50); } /* Alternative dark mode theme toggle */ [data-theme="dark"] .lof-theme-toggle { background: #24324a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .lof-theme-toggle:hover { background: var(--lof-primary); border-color: var(--lof-primary); } /* Mobile theme toggle adjustments */ @media (max-width: 768px) { .lof-theme-toggle { padding: 10px 12px; font-size: 18px; } } @media (max-width: 430px) { .lof-theme-toggle { width: 36px; height: 36px; font-size: 16px; padding: 8px; } } /* =================================================================== */ /* MORE/UTILITY BUTTONS */ /* =================================================================== */ /* More button for additional options */ .lof-more-btn { margin-top: 10px; display: inline-block; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--lof-text); cursor: pointer; transition: all 0.25s ease; text-decoration: none; } .lof-more-btn:hover { background: var(--lof-primary); color: var(--lof-text-on-primary); border-color: var(--lof-primary); } /* High contrast mode adjustments */ [data-high-contrast] .lof-more-btn { border-width: 2px; } /* =================================================================== */ /* TOGGLE SWITCHES */ /* =================================================================== */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 28px; } .toggle-switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--lof-neutral-300); transition: all var(--lof-transition-base); border-radius: var(--lof-radius-full); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: var(--lof-surface); transition: all var(--lof-transition-base); border-radius: 50%; box-shadow: var(--lof-shadow-sm); } input:checked + .slider { background: var(--lof-primary-600); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--lof-primary-200); } input:checked + .slider:before { transform: translateX(20px); box-shadow: var(--lof-shadow-md); } .toggle-switch:focus-within .slider { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } /* =================================================================== */ /* PWA INSTALL BUTTONS */ /* =================================================================== */ /* Main PWA install button */ .lof-pwa-install-btn { position: relative !important; z-index: 100 !important; background: #2ecc71 !important; color: white !important; border: none !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } .lof-pwa-install-btn:hover { background: #27ae60 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4) !important; } .lof-pwa-install-btn:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3) !important; } /* Floating install button */ .lof-install-btn { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; border: none; border-radius: 50%; width: 60px; height: 60px; box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3); z-index: 1000; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease; } .lof-install-btn:before { content: "⬇"; font-size: 24px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .lof-install-btn:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4); } /* Install button focus state */ .lof-install-button:focus { outline: none; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(59, 130, 246, 0.3), 0 2px 0 rgba(255, 255, 255, 0.3) inset; } /* =================================================================== */ /* STATUS BUTTONS */ /* =================================================================== */ /* Status action buttons */ .status-action { background: #e6f1fc; color: var(--lof-info); padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; transition: all var(--lof-transition-base); } .status-action:hover { background: var(--lof-info-100); color: var(--lof-info-700); transform: translateY(-1px); } /* =================================================================== */ /* SHOW ALL BUTTON - ENHANCED MODERN DESIGN */ /* =================================================================== */ /* Base show all button styling with enhanced visual design */ .lof-show-all-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lof-space-2); padding: var(--lof-space-4) var(--lof-space-6); background: linear-gradient(135deg, var(--lof-glass-bg) 0%, color-mix(in srgb, var(--lof-glass-bg) 95%, var(--lof-primary-500) 5%) 100%); backdrop-filter: var(--lof-glass-blur); border: 1px solid var(--lof-glass-border); border-radius: var(--lof-radius-xl); color: var(--lof-text); font-size: var(--lof-text-base); font-weight: 600; font-family: var(--font-sans); text-decoration: none; cursor: pointer; transition: all var(--lof-transition-base); position: relative; overflow: hidden; min-height: 52px; box-shadow: var(--lof-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transform: translateZ(0); will-change: transform, box-shadow; } /* Subtle background pattern for texture */ .lof-show-all-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--lof-primary-400) 6%, transparent) 1px, transparent 1px), radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--lof-primary-500) 4%, transparent) 1px, transparent 1px); background-size: 20px 20px, 14px 14px; background-position: 0 0, 10px 10px; opacity: 0.3; pointer-events: none; transition: opacity var(--lof-transition-base); } /* Shimmer effect overlay */ .lof-show-all-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lof-primary-300) 15%, transparent), transparent); transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Enhanced hover state */ .lof-show-all-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--lof-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 20px color-mix(in srgb, var(--lof-primary-400) 15%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--lof-glass-bg) 90%, var(--lof-primary-400) 10%) 0%, color-mix(in srgb, var(--lof-glass-bg) 85%, var(--lof-primary-500) 15%) 100%); border-color: color-mix(in srgb, var(--lof-glass-border) 60%, var(--lof-primary-300) 40%); backdrop-filter: blur(16px) saturate(200%); } .lof-show-all-btn:hover::before { opacity: 0.5; } .lof-show-all-btn:hover::after { left: 100%; } /* Active state with smooth feedback */ .lof-show-all-btn:active { transform: translateY(-1px) scale(0.99); box-shadow: var(--lof-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; transition: all var(--lof-transition-fast); } /* Enhanced focus state for accessibility */ .lof-show-all-btn:focus-visible { outline: 3px solid var(--lof-primary-300); outline-offset: 3px; box-shadow: var(--lof-shadow-lg), 0 0 0 4px color-mix(in srgb, var(--lof-primary-400) 20%, transparent); } /* Enhanced text styling - Inline with icon */ .lof-show-all-btn .show-all-text { font-weight: 600; font-size: var(--lof-text-base); letter-spacing: 0.025em; line-height: 1.4; color: var(--lof-text); transition: all var(--lof-transition-base); position: relative; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); background: linear-gradient(135deg, var(--lof-text) 0%, color-mix(in srgb, var(--lof-text) 85%, var(--lof-primary-600) 15%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lof-show-all-btn:hover .show-all-text { background: linear-gradient(135deg, color-mix(in srgb, var(--lof-text) 90%, var(--lof-primary-500) 10%) 0%, color-mix(in srgb, var(--lof-text) 75%, var(--lof-primary-400) 25%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transform: translateY(-0.5px); } /* Enhanced icon styling */ .lof-show-all-btn .show-all-icon { transition: all var(--lof-transition-base); font-size: 1.125em; opacity: 0.85; color: var(--lof-primary-600); display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); margin-left: var(--lof-space-1); } .lof-show-all-btn:hover .show-all-icon { transform: rotate(180deg) scale(1.15); opacity: 1; color: var(--lof-primary-500); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); } /* Dark theme enhancements */ html[data-theme="dark"] .lof-show-all-btn { background: linear-gradient(135deg, var(--lof-surface-alt) 0%, color-mix(in srgb, var(--lof-surface-alt) 95%, var(--lof-primary-600) 5%) 100%); border-color: var(--lof-border); color: var(--lof-text); box-shadow: var(--lof-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } html[data-theme="dark"] .lof-show-all-btn:hover { background: linear-gradient(135deg, var(--lof-surface) 0%, color-mix(in srgb, var(--lof-surface) 90%, var(--lof-primary-500) 10%) 100%); border-color: var(--lof-border-strong); box-shadow: var(--lof-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 20px color-mix(in srgb, var(--lof-primary-500) 10%, transparent); } html[data-theme="dark"] .lof-show-all-btn .show-all-text { background: linear-gradient(135deg, var(--lof-text) 0%, color-mix(in srgb, var(--lof-text) 80%, var(--lof-primary-400) 20%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .lof-show-all-btn:hover .show-all-text { background: linear-gradient(135deg, color-mix(in srgb, var(--lof-text) 85%, var(--lof-primary-300) 15%) 0%, color-mix(in srgb, var(--lof-text) 70%, var(--lof-primary-200) 30%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .lof-show-all-btn .show-all-icon { color: var(--lof-primary-400); } html[data-theme="dark"] .lof-show-all-btn:hover .show-all-icon { color: var(--lof-primary-300); } /* Light theme enhancements */ html[data-theme="light"] .lof-show-all-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.95) 92%, var(--lof-primary-400) 8%) 100%); border-color: rgba(0, 0, 0, 0.08); color: var(--lof-text); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; } html[data-theme="light"] .lof-show-all-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.98) 88%, var(--lof-primary-400) 12%) 100%); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 20px color-mix(in srgb, var(--lof-primary-400) 8%, transparent); } html[data-theme="light"] .lof-show-all-btn .show-all-text { background: linear-gradient(135deg, var(--lof-text) 0%, color-mix(in srgb, var(--lof-text) 85%, var(--lof-primary-600) 15%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .lof-show-all-btn:hover .show-all-text { background: linear-gradient(135deg, color-mix(in srgb, var(--lof-text) 90%, var(--lof-primary-700) 10%) 0%, color-mix(in srgb, var(--lof-text) 75%, var(--lof-primary-600) 25%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .lof-show-all-btn .show-all-icon { color: var(--lof-primary-600); } html[data-theme="light"] .lof-show-all-btn:hover .show-all-icon { color: var(--lof-primary-700); } /* =================================================================== */ /* ACCESSIBILITY & PERFORMANCE ENHANCEMENTS */ /* =================================================================== */ /* Reduced motion preferences - respect user accessibility needs */ @media (prefers-reduced-motion: reduce) { .lof-show-all-btn, .lof-show-all-btn::before, .lof-show-all-btn::after, .lof-show-all-btn .show-all-icon, .lof-show-all-btn .show-all-text { transition: none !important; animation: none !important; } .lof-show-all-btn:hover { transform: none !important; } .lof-show-all-btn:hover .show-all-icon { transform: scale(1.05) !important; } .lof-show-all-btn:hover .show-all-text { transform: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .lof-show-all-btn { border-width: 2px; font-weight: 700; background: var(--lof-surface); color: var(--lof-text); } .lof-show-all-btn .show-all-text { background: none !important; -webkit-text-fill-color: var(--lof-text) !important; color: var(--lof-text) !important; text-shadow: none !important; font-weight: 700; } .lof-show-all-btn:hover { background: var(--lof-primary); color: var(--lof-text-on-primary); border-color: var(--lof-primary); } .lof-show-all-btn:hover .show-all-text { background: none !important; -webkit-text-fill-color: var(--lof-text-on-primary) !important; color: var(--lof-text-on-primary) !important; } .lof-show-all-btn::before, .lof-show-all-btn::after { display: none; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .lof-show-all-btn { min-height: 48px; /* Ensure minimum touch target size */ padding: var(--lof-space-3) var(--lof-space-5); } .lof-show-all-btn:hover { transform: none; background: var(--lof-glass-bg); } .lof-show-all-btn:active { transform: scale(0.95); transition: transform 0.1s ease; } /* Disable complex effects on touch devices for better performance */ .lof-show-all-btn::before, .lof-show-all-btn::after { display: none; } } /* Print styles */ @media print { .lof-show-all-btn { background: transparent !important; color: var(--lof-text) !important; border: 1px solid var(--lof-text) !important; box-shadow: none !important; } .lof-show-all-btn .show-all-text { background: none !important; -webkit-text-fill-color: var(--lof-text) !important; color: var(--lof-text) !important; text-shadow: none !important; } .lof-show-all-btn::before, .lof-show-all-btn::after { display: none !important; } } /* =================================================================== */ /* SHOW ALL TEXT MICRO-INTERACTIONS */ /* =================================================================== */ /* Subtle count number emphasis */ .lof-show-all-btn .show-all-text { position: relative; } /* Add subtle emphasis to the count number in parentheses */ .lof-show-all-btn:hover .show-all-text { position: relative; } /* Enhance readability with better contrast */ @supports (backdrop-filter: blur()) { .lof-show-all-btn .show-all-text { backdrop-filter: blur(0.5px); } } /* =================================================================== */ /* BUTTON SIZES & VARIANTS */ /* =================================================================== */ /* Small button variant */ .btn-sm { padding: 6px 12px; font-size: 14px; border-radius: 6px; min-height: 32px; } /* Large button variant */ .btn-lg { padding: 16px 32px; font-size: 18px; border-radius: 12px; min-height: 56px; } /* Full width button */ .btn-block { width: 100%; display: block; } /* Secondary button variant */ .btn-secondary { background: var(--lof-surface-alt); color: var(--lof-text); border: 1px solid var(--lof-border); } .btn-secondary:hover { background: var(--lof-surface-hover); border-color: var(--lof-border-strong); } /* Ghost button variant */ .btn-ghost { background: transparent; color: var(--lof-primary); border: 1px solid var(--lof-primary); } .btn-ghost:hover { background: var(--lof-primary-50); color: var(--lof-primary-700); } /* Danger button variant */ .btn-danger { background: var(--lof-danger); color: var(--lof-text-on-primary); border: none; } .btn-danger:hover { background: var(--lof-danger-hover); } /* Success button variant */ .btn-success { background: var(--lof-success); color: var(--lof-text-on-primary); border: none; } .btn-success:hover { background: var(--lof-success-hover); } /* =================================================================== */ /* BUTTON STATES */ /* =================================================================== */ /* Disabled button state */ button:disabled, .btn:disabled, .btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; transform: none !important; } /* Loading button state */ .btn.loading { position: relative; color: transparent; pointer-events: none; } .btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: button-spin 0.8s linear infinite; } @keyframes button-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Pressed/active state */ .btn.pressed, .btn:active { transform: scale(0.95); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } /* =================================================================== */ /* ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* High contrast mode button adjustments */ @media (prefers-contrast: high) { button, .btn { border-width: 2px; font-weight: 700; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { button, .btn, .toggle-switch, .slider { transition: none !important; animation: none !important; } button:hover, .btn:hover { transform: none !important; } } /* Focus visible enhancements */ button:focus-visible, .btn:focus-visible { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } /* Touch device optimizations */ @media (hover: none) { button:hover, .btn:hover { transform: none; } button:active, .btn:active { transform: scale(0.95); } } /* =================================================================== */ /* RESPONSIVE BUTTON ADJUSTMENTS */ /* =================================================================== */ @media (max-width: 768px) { /* Increase button sizes for better touch targets */ button, .btn { min-height: 44px; padding: 12px 20px; } /* Adjust button spacing */ .btn + .btn { margin-left: 8px; } } @media (max-width: 480px) { /* Stack buttons vertically on very small screens */ .btn + .btn { margin-left: 0; margin-top: 8px; } /* Full width buttons on mobile */ .btn-mobile-full { width: 100%; display: block; } } /* =================================================================== */ /* BUTTON GROUPS */ /* =================================================================== */ .btn-group { display: inline-flex; border-radius: var(--lof-radius-lg); overflow: hidden; box-shadow: var(--lof-shadow-sm); } .btn-group .btn { border-radius: 0; border-right: none; margin: 0; } .btn-group .btn:first-child { border-top-left-radius: var(--lof-radius-lg); border-bottom-left-radius: var(--lof-radius-lg); } .btn-group .btn:last-child { border-top-right-radius: var(--lof-radius-lg); border-bottom-right-radius: var(--lof-radius-lg); border-right: 1px solid var(--lof-border); } .btn-group .btn:hover { z-index: 1; position: relative; } /* =================================================================== */ /* ICON BUTTONS */ /* =================================================================== */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; } .btn-icon svg { width: 20px; height: 20px; fill: currentColor; } .btn-icon.btn-sm { width: 32px; height: 32px; } .btn-icon.btn-sm svg { width: 16px; height: 16px; } .btn-icon.btn-lg { width: 56px; height: 56px; } .btn-icon.btn-lg svg { width: 24px; height: 24px; } /* Source: css/components/forms.css */ /* =================================================================== */ /* FORM COMPONENTS */ /* Input fields, toggle switches, checkboxes, radio buttons */ /* Form validation states, layout, spacing, and accessibility */ /* =================================================================== */ /* =================================================================== */ /* BASE FORM STYLES */ /* =================================================================== */ /* Universal form element touch optimization */ input, textarea, select, .toggle-switch { touch-action: manipulation; /* Prevent double-tap zoom */ -webkit-tap-highlight-color: rgba(46, 204, 113, 0.2); transition: transform 0.1s ease, box-shadow 0.1s ease; } input:active, textarea:active, select:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Better focus indicators for accessibility */ input:focus, textarea:focus, select:focus { outline: 2px solid #2ecc71; outline-offset: 2px; } /* =================================================================== */ /* INPUT FIELD STYLING */ /* =================================================================== */ /* Base input field styles */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea, select { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-md); color: var(--lof-text); font-family: inherit; font-size: var(--lof-text-base); padding: var(--lof-space-3) var(--lof-space-4); transition: all var(--lof-transition-base); width: 100%; min-height: 44px; /* Accessibility: minimum touch target */ } /* Input hover states */ input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="search"]:hover, textarea:hover, select:hover { border-color: var(--lof-border-strong); background-color: var(--lof-surface-hover); } /* Input focus states */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus { border-color: var(--lof-primary-500); box-shadow: 0 0 0 3px var(--lof-primary-100); outline: none; } /* Placeholder styling */ input::placeholder, textarea::placeholder { color: var(--lof-text-muted); opacity: 0.7; } /* Disabled input states */ input:disabled, textarea:disabled, select:disabled { background-color: var(--lof-neutral-100); border-color: var(--lof-border); color: var(--lof-text-muted); cursor: not-allowed; opacity: 0.6; } /* =================================================================== */ /* FORM VALIDATION STATES */ /* =================================================================== */ /* Valid input state */ input:valid, textarea:valid, select:valid { border-color: var(--lof-success); } input:valid:focus, textarea:valid:focus, select:valid:focus { box-shadow: 0 0 0 3px var(--lof-success-bg); } /* Invalid input state */ input:invalid, textarea:invalid, select:invalid { border-color: var(--lof-danger); } input:invalid:focus, textarea:invalid:focus, select:invalid:focus { box-shadow: 0 0 0 3px var(--lof-danger-bg); } /* Custom validation classes */ .form-field.error input, .form-field.error textarea, .form-field.error select { border-color: var(--lof-danger); background-color: var(--lof-danger-bg); } .form-field.success input, .form-field.success textarea, .form-field.success select { border-color: var(--lof-success); background-color: var(--lof-success-bg); } /* Validation message styling */ .form-field .error-message { color: var(--lof-danger); font-size: var(--lof-text-sm); margin-top: var(--lof-space-1); display: flex; align-items: center; gap: var(--lof-space-1); } .form-field .success-message { color: var(--lof-success); font-size: var(--lof-text-sm); margin-top: var(--lof-space-1); display: flex; align-items: center; gap: var(--lof-space-1); } /* =================================================================== */ /* TOGGLE SWITCHES */ /* =================================================================== */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 28px; } .toggle-switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--lof-neutral-300); transition: all var(--lof-transition-base); border-radius: var(--lof-radius-full); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: var(--lof-surface); transition: all var(--lof-transition-base); border-radius: 50%; box-shadow: var(--lof-shadow-sm); } input:checked + .slider { background: var(--lof-primary-600); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--lof-primary-200); } input:checked + .slider:before { transform: translateX(20px); box-shadow: var(--lof-shadow-md); } .toggle-switch:focus-within .slider { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; } /* Toggle switch hover state */ .toggle-switch:hover .slider { background: var(--lof-neutral-400); } .toggle-switch:hover input:checked + .slider { background: var(--lof-primary-700); } /* =================================================================== */ /* BOTTOM NOTIFICATION TOGGLE - COMPREHENSIVE STYLING */ /* =================================================================== */ /* Base bottom notification container */ #lof-bottom-notify.lof-bottom-notify { position: fixed; right: 16px; bottom: calc(16px + var(--lof-safe-bottom, 0px)); z-index: var(--lof-z-notification, 1000); background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.12); display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; backdrop-filter: blur(8px); transition: all var(--lof-transition-base); } #lof-bottom-notify.lof-bottom-notify:hover { box-shadow: var(--lof-shadow-xl); transform: translateY(-2px); } /* Bottom notification toggle switch */ #lof-bottom-notify .toggle-switch { width: 48px; height: 24px; position: relative; } #lof-bottom-notify .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-full); transition: all 0.25s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } #lof-bottom-notify .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 1px; top: 1px; background: var(--lof-surface); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all var(--lof-transition-base); } #lof-bottom-notify input:checked + .slider { background: var(--lof-primary); border-color: var(--lof-primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--lof-primary-200); } #lof-bottom-notify input:checked + .slider:before { transform: translateX(24px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #lof-bottom-notify .toggle-switch:focus-within .slider { outline: 3px solid var(--lof-focus); outline-offset: 2px; } #lof-bottom-notify .toggle-switch:hover .slider { background: var(--lof-primary-100); border-color: var(--lof-primary-300); } #lof-bottom-notify .toggle-switch:hover input:checked + .slider { background: var(--lof-primary); border-color: var(--lof-primary); } /* Explicit styling for direct child selector */ #lof-bottom-notify > label > span { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-full); transition: all 0.25s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } #lof-bottom-notify > label > span:before { position: absolute; content: ""; height: 22px; width: 22px; left: 1px; top: 1px; background: var(--lof-surface); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all var(--lof-transition-base); } #lof-bottom-notify > label > input:checked + span { background: var(--lof-primary); border-color: var(--lof-primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--lof-primary-200); } #lof-bottom-notify > label > input:checked + span:before { transform: translateX(24px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #lof-bottom-notify > label:hover > span { background: var(--lof-primary-100); border-color: var(--lof-primary-300); } #lof-bottom-notify > label:hover > input:checked + span { background: var(--lof-primary); border-color: var(--lof-primary); } /* Dark mode support similar to theme toggle */ [data-theme="dark"] #lof-bottom-notify .slider { background: var(--lof-neutral-700); border-color: var(--lof-neutral-600); } [data-theme="dark"] #lof-bottom-notify > label > span { background: var(--lof-neutral-700); border-color: var(--lof-neutral-600); } [data-theme="dark"] #lof-bottom-notify .toggle-switch:hover .slider { background: var(--lof-neutral-600); border-color: var(--lof-neutral-500); } [data-theme="dark"] #lof-bottom-notify > label:hover > span { background: var(--lof-neutral-600); border-color: var(--lof-neutral-500); } [data-theme="dark"] #lof-bottom-notify input:checked + .slider, [data-theme="dark"] #lof-bottom-notify > label > input:checked + span { background: var(--lof-primary); border-color: var(--lof-primary); } [data-theme="dark"] #lof-bottom-notify .toggle-switch:hover input:checked + .slider, [data-theme="dark"] #lof-bottom-notify > label:hover > input:checked + span { background: var(--lof-primary); border-color: var(--lof-primary); } /* Footer controls variant */ #lof-footer-controls #lof-bottom-notify { position: relative; right: auto; bottom: auto; background: transparent; border: none; box-shadow: none; padding: 0; backdrop-filter: none; max-width: none; width: auto; height: auto; display: flex; align-items: center; justify-content: center; } #lof-footer-controls #lof-bottom-notify .toggle-switch { width: 48px; height: 24px; } #lof-footer-controls #lof-bottom-notify .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; } #lof-footer-controls #lof-bottom-notify .slider:before { height: 22px; width: 22px; left: 1px; top: 1px; } #lof-footer-controls #lof-bottom-notify input:checked + .slider:before { transform: translateX(24px); } /* Mobile toggle switch adjustments */ @media (max-width: 768px) { .toggle-switch { width: 44px; height: 26px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; } .slider:before { height: 20px; width: 20px; } input:checked + .slider:before { transform: translateX(18px); } } /* =================================================================== */ /* BOTTOM NOTIFICATION RESPONSIVE DESIGN */ /* =================================================================== */ /* Tablet responsive adjustments */ @media (min-width: 768px) and (max-width: 1024px) { #lof-bottom-notify.lof-bottom-notify { right: var(--lof-space-6); bottom: var(--lof-space-6); padding: var(--lof-space-4); border-radius: var(--lof-radius-lg); max-width: 400px; } } /* Desktop positioning */ @media (min-width: 1024px) { #lof-bottom-notify.lof-bottom-notify { right: var(--lof-space-8); bottom: var(--lof-space-8); padding: var(--lof-space-6); border-radius: var(--lof-radius-xl); max-width: 480px; box-shadow: var(--lof-shadow-2xl); } } /* Mobile adjustments - ONLY for floating bottom notification */ @media (max-width: 640px) { #lof-bottom-notify.lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) { right: 12px; bottom: calc(12px + var(--lof-safe-bottom, 0px)); padding: 12px; border-radius: 12px; max-width: calc(100vw - 24px); min-height: auto; /* Remove fixed height - let content determine height */ height: auto; } #lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) .toggle-switch { width: 48px; height: 24px; } #lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; } #lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) .slider:before { height: 22px; width: 22px; left: 1px; top: 1px; } #lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) input:checked + .slider:before { transform: translateX(24px); } /* Footer controls version stays consistent */ #lof-footer-controls #lof-bottom-notify .toggle-switch { width: 48px; height: 24px; } #lof-footer-controls #lof-bottom-notify .slider:before { height: 22px; width: 22px; left: 1px; top: 1px; } #lof-footer-controls #lof-bottom-notify input:checked + .slider:before { transform: translateX(24px); } } /* Small mobile screens - ONLY for floating bottom notification */ @media (max-width: 480px) { #lof-bottom-notify.lof-bottom-notify:not(#lof-footer-controls #lof-bottom-notify) { right: 12px; bottom: calc(12px + var(--lof-safe-bottom, 0px)); padding: 12px; max-width: calc(100vw - 24px); min-height: auto; /* Remove fixed height - let content determine height */ height: auto; } } /* =================================================================== */ /* BOTTOM NOTIFICATION ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* Enhanced focus states for keyboard navigation */ #lof-bottom-notify .toggle-switch input:focus-visible + .slider { outline: 3px solid var(--lof-focus); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2); } /* High contrast mode support */ @media (prefers-contrast: high) { #lof-bottom-notify.lof-bottom-notify { border-width: 2px; border-color: currentColor; } #lof-bottom-notify .slider { border: 2px solid currentColor; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { #lof-bottom-notify.lof-bottom-notify, #lof-bottom-notify .slider, #lof-bottom-notify .slider:before { transition: none !important; animation: none !important; } #lof-bottom-notify.lof-bottom-notify:hover { transform: none !important; } } /* Touch target improvements for mobile - toggle switch already has proper sizing */ /* Screen reader support */ .lof-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* High contrast mode toggle adjustments */ @media (prefers-contrast: high) { .toggle-switch .slider { border: 2px solid currentColor; } } /* =================================================================== */ /* CHECKBOX AND RADIO BUTTON STYLING */ /* =================================================================== */ /* Custom checkbox styling */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--lof-border); border-radius: var(--lof-radius-sm); background: var(--lof-surface); cursor: pointer; position: relative; transition: all var(--lof-transition-base); } input[type="checkbox"]:hover { border-color: var(--lof-primary-400); background-color: var(--lof-primary-50); } input[type="checkbox"]:checked { background: var(--lof-primary-600); border-color: var(--lof-primary-600); } input[type="checkbox"]:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } input[type="checkbox"]:focus { outline: 3px solid var(--lof-primary-200); outline-offset: 2px; } input[type="checkbox"]:disabled { background-color: var(--lof-neutral-100); border-color: var(--lof-border); cursor: not-allowed; opacity: 0.6; } /* Custom radio button styling */ input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--lof-border); border-radius: 50%; background: var(--lof-surface); cursor: pointer; position: relative; transition: all var(--lof-transition-base); } input[type="radio"]:hover { border-color: var(--lof-primary-400); background-color: var(--lof-primary-50); } input[type="radio"]:checked { border-color: var(--lof-primary-600); } input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--lof-primary-600); border-radius: 50%; } input[type="radio"]:focus { outline: 3px solid var(--lof-primary-200); outline-offset: 2px; } input[type="radio"]:disabled { background-color: var(--lof-neutral-100); border-color: var(--lof-border); cursor: not-allowed; opacity: 0.6; } /* =================================================================== */ /* FORM LAYOUT AND SPACING */ /* =================================================================== */ /* Form container */ .form-container { max-width: 600px; margin: 0 auto; padding: var(--lof-space-6); } /* Form field wrapper */ .form-field { margin-bottom: var(--lof-space-4); } .form-field:last-child { margin-bottom: 0; } /* Form labels */ .form-label { display: block; font-weight: 600; color: var(--lof-text); margin-bottom: var(--lof-space-2); font-size: var(--lof-text-sm); } .form-label.required::after { content: " *"; color: var(--lof-danger); } /* Form help text */ .form-help { font-size: var(--lof-text-xs); color: var(--lof-text-muted); margin-top: var(--lof-space-1); line-height: 1.4; } /* Form groups */ .form-group { display: flex; gap: var(--lof-space-3); align-items: flex-start; } .form-group .form-field { flex: 1; margin-bottom: 0; } /* Inline form elements */ .form-inline { display: flex; align-items: center; gap: var(--lof-space-3); flex-wrap: wrap; } .form-inline .form-field { margin-bottom: 0; flex: 0 0 auto; } .form-inline .form-label { margin-bottom: 0; white-space: nowrap; } /* Checkbox and radio groups */ .checkbox-group, .radio-group { display: flex; flex-direction: column; gap: var(--lof-space-2); } .checkbox-item, .radio-item { display: flex; align-items: center; gap: var(--lof-space-2); cursor: pointer; padding: var(--lof-space-1) 0; } .checkbox-item label, .radio-item label { cursor: pointer; margin-bottom: 0; font-weight: normal; } /* Horizontal checkbox/radio groups */ .checkbox-group.horizontal, .radio-group.horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--lof-space-4); } /* =================================================================== */ /* FORM ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* Focus trap for forms */ .form-focus-trap:focus-within { outline: 3px solid var(--lof-primary-300); outline-offset: 2px; border-radius: var(--lof-radius-md); } /* Screen reader only labels */ .form-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; } .form-sr-only:focus { clip: auto !important; height: auto; width: auto; padding: 10px; background: #fff; z-index: var(--lof-z-focus); } /* Enhanced focus states for accessibility */ .form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline: 3px solid var(--lof-focus); outline-offset: 2px; } /* High contrast mode form adjustments */ @media (prefers-contrast: high) { input, textarea, select { border-width: 2px; } .form-label { font-weight: 700; } } /* =================================================================== */ /* RESPONSIVE FORM ADJUSTMENTS */ /* =================================================================== */ @media (max-width: 768px) { .form-container { padding: var(--lof-space-4); } /* Stack form groups vertically on mobile */ .form-group { flex-direction: column; gap: var(--lof-space-4); } /* Make inline forms stack on mobile */ .form-inline { flex-direction: column; align-items: stretch; gap: var(--lof-space-3); } /* Increase touch targets on mobile */ /* input, textarea, select, .toggle-switch { min-height: 48px; } */ input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; } } @media (max-width: 480px) { .form-container { padding: var(--lof-space-3); } /* Horizontal checkbox/radio groups become vertical on small screens */ .checkbox-group.horizontal, .radio-group.horizontal { flex-direction: column; gap: var(--lof-space-2); } } /* =================================================================== */ /* REDUCED MOTION PREFERENCES */ /* =================================================================== */ @media (prefers-reduced-motion: reduce) { input, textarea, select, .toggle-switch, .slider { transition: none !important; animation: none !important; } .slider:before { transition: none !important; } input:checked + .slider:before { transition: none !important; } } /* =================================================================== */ /* DARK MODE FORM ADJUSTMENTS */ /* =================================================================== */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--lof-neutral-800); border-color: var(--lof-neutral-600); color: var(--lof-neutral-100); } [data-theme="dark"] input:hover, [data-theme="dark"] textarea:hover, [data-theme="dark"] select:hover { border-color: var(--lof-neutral-500); background-color: var(--lof-neutral-700); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--lof-neutral-400); } [data-theme="dark"] input:disabled, [data-theme="dark"] textarea:disabled, [data-theme="dark"] select:disabled { background-color: var(--lof-neutral-900); border-color: var(--lof-neutral-700); color: var(--lof-neutral-500); } [data-theme="dark"] .form-label { color: var(--lof-neutral-200); } [data-theme="dark"] .form-help { color: var(--lof-neutral-400); } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { background: var(--lof-neutral-800); border-color: var(--lof-neutral-600); } [data-theme="dark"] input[type="checkbox"]:hover, [data-theme="dark"] input[type="radio"]:hover { border-color: var(--lof-primary-400); background-color: var(--lof-neutral-700); } /* Source: css/components/skeletons.css */ /* =================================================================== */ /* SKELETON LOADING COMPONENTS */ /* Loading states, shimmer animations, and skeleton placeholders */ /* Skeleton cards, elements, and KPI loading animations */ /* =================================================================== */ /* =================================================================== */ /* SHIMMER ANIMATIONS */ /* =================================================================== */ /* Primary shimmer animation for loading states */ @keyframes lof-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Alternative shimmer animation */ @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Base skeleton pulse animation */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.01); } } /* Shimmer effect for progress bars */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Skeleton shimmer for overlay effects */ @keyframes lof-skeleton-shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* =================================================================== */ /* BASE SKELETON STYLES */ /* =================================================================== */ .lof-skel { position: relative; background: linear-gradient(90deg, var(--lof-neutral-200) 25%, var(--lof-neutral-300) 37%, var(--lof-neutral-200) 63%); background-size: 400% 100%; animation: lof-shimmer 1.1s ease-in-out infinite; border-radius: var(--lof-radius-md); display: inline-block !important; opacity: 1 !important; visibility: visible !important; } /* Force hide skeleton when content is loaded */ .lof-skeleton-hidden, .lof-skeleton-container.lof-skeleton-hidden { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Remove duplicate skeleton definition - using the one above */ /* =================================================================== */ /* SKELETON SIZE VARIANTS */ /* =================================================================== */ /* Skeleton size variants - unified definitions */ .lof-skel.xs { width: 3rem; height: 0.75rem; } .lof-skel.sm { width: 4rem; height: 1rem; } .lof-skel.md { width: 6rem; height: 1.25rem; } .lof-skel.lg { width: 8rem; height: 1.5rem; } .lof-skel.xl { width: 12rem; height: 2rem; } /* =================================================================== */ /* SKELETON CARDS */ /* =================================================================== */ .lof-skeleton-card { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-lg); padding: var(--lof-space-4); margin-bottom: var(--lof-space-4); box-shadow: var(--lof-shadow-md); overflow: hidden; animation: skeleton-pulse 2s ease-in-out infinite; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Skeleton card header */ .lof-skeleton-card .sk-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 12px; } /* Skeleton card elements */ .lof-skeleton-card .sk-total { width: 110px; height: 20px; border-radius: var(--lof-radius-sm); } .lof-skeleton-card .sk-id { width: 90px; height: 16px; border-radius: var(--lof-radius-sm); } .lof-skeleton-card .sk-time { width: 120px; height: 16px; margin-left: auto; border-radius: 999px; } /* Skeleton card body */ .lof-skeleton-card .sk-body { margin-top: var(--lof-space-3); } .lof-skeleton-card .sk-line { display: block; margin: 0; border-radius: var(--lof-radius-sm); } /* =================================================================== */ /* SKELETON BARS AND ELEMENTS */ /* =================================================================== */ .lof-skel-bar { display: inline-block; margin: 0 2px; border-radius: var(--lof-radius-sm); animation: skeleton-pulse 2s ease-in-out infinite; } /* =================================================================== */ /* SKELETON PRODUCTS */ /* =================================================================== */ /* Reports page skeleton styles */ .lof-skeleton-product { display: flex; justify-content: space-between; align-items: center; padding: var(--lof-space-2) 0; border-bottom: 1px solid var(--lof-border); } .lof-skeleton-product:last-child { border-bottom: none; } /* =================================================================== */ /* KPI SKELETON ANIMATIONS */ /* =================================================================== */ /* Enhanced skeleton animations for KPI elements */ .lof-skel-kpi-value, .lof-skel-kpi-label, .lof-skel-kpi-sub { background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(59, 130, 246, 0.12) 25%, rgba(16, 185, 129, 0.08) 50%, rgba(59, 130, 246, 0.12) 75%, rgba(59, 130, 246, 0.06) 100%) !important; background-size: 200% 200% !important; border-radius: 8px !important; animation: lof-kpi-skeleton-pulse 2s ease-in-out infinite, lof-kpi-skeleton-gradient 3s ease-in-out infinite !important; position: relative !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .lof-skel-kpi-value { background: linear-gradient(45deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.1) 50%, rgba(59, 130, 246, 0.12) 100%) !important; } .lof-skel-kpi-label { background: linear-gradient(45deg, rgba(107, 114, 128, 0.15) 0%, rgba(156, 163, 175, 0.12) 50%, rgba(107, 114, 128, 0.15) 100%) !important; } .lof-skel-kpi-sub { background: linear-gradient(45deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.08) 50%, rgba(245, 158, 11, 0.1) 100%) !important; } .lof-skel-kpi-value::before, .lof-skel-kpi-label::before, .lof-skel-kpi-sub::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 80%, transparent 100%); animation: lof-skeleton-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes lof-kpi-skeleton-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.02); } } @keyframes lof-kpi-skeleton-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Breathing effect for loading KPI cards */ .lof-kpi.lof-kpi-loading { animation: lof-kpi-skeleton-pulse 2s ease-in-out infinite; } /* =================================================================== */ /* SHIMMER TEXT EFFECTS */ /* =================================================================== */ /* Shimmer text effect for loading states */ .lof-shimmer-text { background: linear-gradient(90deg, var(--lof-neutral-400) 25%, var(--lof-neutral-200) 50%, var(--lof-neutral-400) 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-background-clip: text; color: transparent; animation: lof-shimmer 1.5s ease-in-out infinite; } /* =================================================================== */ /* LOADING PROGRESS BARS */ /* =================================================================== */ .lof-loading-progress { position: relative; width: 100%; height: 4px; background: var(--lof-neutral-200); border-radius: 2px; overflow: hidden; } .lof-loading-progress::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: lof-shimmer 2s infinite; } /* =================================================================== */ /* SHIMMER OVERLAY EFFECTS */ /* =================================================================== */ /* Generic shimmer overlay for any element */ .lof-shimmer-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, var(--lof-shimmer-color) 50%, transparent 100%); animation: shimmer 1.5s infinite; border-radius: inherit; pointer-events: none; } /* Alternative shimmer overlay */ .lof-shimmer-overlay-alt::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, var(--lof-shimmer-color) 50%, transparent 100%); animation: shimmer 1.5s infinite; border-radius: inherit; pointer-events: none; } /* =================================================================== */ /* DARK MODE SKELETON ADJUSTMENTS */ /* =================================================================== */ html[data-theme="dark"] .lof-skel { background: linear-gradient(90deg, var(--lof-neutral-700) 25%, var(--lof-neutral-600) 37%, var(--lof-neutral-700) 63%); } html[data-theme="dark"] .lof-skeleton-card { background: var(--lof-surface); border-color: var(--lof-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Dark theme skeleton shimmer elements */ html[data-theme="dark"] .lof-skeleton-card .sk-total, html[data-theme="dark"] .lof-skeleton-card .sk-id, html[data-theme="dark"] .lof-skeleton-card .sk-time, html[data-theme="dark"] .lof-skeleton-card .sk-line { background: linear-gradient(90deg, var(--lof-neutral-700, #374151) 25%, var(--lof-neutral-600, #4b5563) 50%, var(--lof-neutral-700, #374151) 75%) !important; } html[data-theme="dark"] .lof-shimmer-text { background: linear-gradient(90deg, var(--lof-neutral-500) 25%, var(--lof-neutral-300) 50%, var(--lof-neutral-500) 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Enhanced dark theme skeleton animations */ html[data-theme="dark"] .lof-skeleton-card { animation: skeleton-pulse-dark 2.2s ease-in-out infinite; } @keyframes skeleton-pulse-dark { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } 50% { opacity: 0.8; transform: scale(1.002); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } html[data-theme="dark"] .lof-loading-progress { background: var(--lof-neutral-700); } html[data-theme="dark"] .lof-loading-progress::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); } /* =================================================================== */ /* RESPONSIVE SKELETON ADJUSTMENTS */ /* =================================================================== */ @media (max-width: 768px) { .lof-skeleton-card { padding: var(--lof-space-2) var(--lof-space-3); } .lof-skeleton-card .sk-header { gap: 8px; margin: 4px 0 8px; } .lof-skel.xs { width: 2.5rem; height: 0.625rem; } .lof-skel.sm { width: 3rem; height: 0.875rem; } .lof-skel.md { width: 4rem; height: 1rem; } .lof-skel.lg { width: 6rem; height: 1.25rem; } .lof-skel.xl { width: 8rem; height: 1.5rem; } } @media (max-width: 480px) { .lof-skeleton-product { flex-direction: column; align-items: flex-start; gap: var(--lof-space-2); } .lof-skeleton-card .sk-time { margin-left: 0; width: 100px; } } /* =================================================================== */ /* REDUCED MOTION PREFERENCES */ /* =================================================================== */ @media (prefers-reduced-motion: reduce) { .lof-skel, .lof-skel-bar, .lof-skel-kpi-value, .lof-skel-kpi-label, .lof-skel-kpi-sub, .lof-shimmer-text, .lof-loading-progress::before, .lof-shimmer-overlay::before, .lof-shimmer-overlay-alt::before { animation: none !important; } .lof-skel, .lof-skel-kpi-value, .lof-skel-kpi-label, .lof-skel-kpi-sub { opacity: 0.6; } } /* =================================================================== */ /* HIGH CONTRAST MODE ADJUSTMENTS */ /* =================================================================== */ @media (prefers-contrast: high) { .lof-skel { background: repeating-linear-gradient(45deg, var(--lof-neutral-300), var(--lof-neutral-300) 10px, var(--lof-neutral-400) 10px, var(--lof-neutral-400) 20px); animation: none; } .lof-skeleton-card { border-width: 2px; } } /* =================================================================== */ /* REPORTS PAGE SKELETON ELEMENTS */ /* =================================================================== */ /* KPI skeleton elements */ .lof-skel-kpi-value { width: 80px !important; height: 36px !important; display: block !important; margin-bottom: 8px; } .lof-skel-kpi-label { width: 60px !important; height: 14px !important; display: block !important; margin: 0 !important; } .lof-skel-kpi-sub { width: 40px !important; height: 12px !important; display: block !important; } /* Top products skeleton list */ .lof-skeleton-product { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid var(--lof-border-light, rgba(0, 0, 0, 0.1)) !important; list-style: none !important; } .lof-skeleton-product:last-child { border-bottom: none !important; } /* Daily trend chart skeleton */ .lof-skeleton-chart { display: flex !important; align-items: end !important; justify-content: space-between !important; height: 80px !important; padding: 10px !important; background: var(--lof-surface, #ffffff); border-radius: var(--lof-radius-md, 8px); } .lof-skel-bar { background: var(--lof-neutral-200, #e5e7eb) !important; border-radius: 4px !important; margin: 0 2px !important; animation: lof-shimmer 1.1s ease-in-out infinite !important; min-height: 20px !important; transition: all 0.3s ease !important; } .lof-skel-bar:hover { background: var(--lof-neutral-300, #d1d5db) !important; } /* Sellers skeleton list */ .lof-skeleton-seller { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 0 !important; border-bottom: 1px solid var(--lof-border-light, rgba(0, 0, 0, 0.1)) !important; list-style: none !important; } .lof-skeleton-seller:last-child { border-bottom: none !important; } /* =================================================================== */ /* ENHANCED KPI LOADING STATES */ /* =================================================================== */ .lof-kpis-loading { opacity: 0.7; pointer-events: none; } .lof-kpi-loading { position: relative; overflow: hidden; } .lof-kpi-loading::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); animation: skeleton-shimmer 2s infinite; z-index: 1; } /* =================================================================== */ /* RESPONSIVE SKELETON ADJUSTMENTS */ /* =================================================================== */ @media (max-width: 768px) { .lof-skeleton-chart { height: 60px !important; padding: 8px !important; } .lof-skel-bar { margin: 0 1px !important; } .lof-skeleton-product, .lof-skeleton-seller { padding: 6px 0 !important; } .lof-skel-kpi-value { width: 60px !important; height: 28px !important; } } /* Source: css/components/install-buttons.css */ /* =================================================================== */ /* INSTALL BUTTONS AND PWA COMPONENTS - FROM ORIGINAL CSS */ /* =================================================================== */ /* Install App Button */ .install-app-btn { background: linear-gradient(135deg, var(--lof-primary) 0%, var(--lof-primary-600) 100%); color: var(--lof-text-on-primary); border: none; border-radius: var(--lof-radius-lg); padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; text-decoration: none; box-shadow: 0 4px 12px var(--lof-primary-shadow); } .install-app-btn:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .install-app-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--lof-primary-shadow); } .install-app-btn:hover:before { left: 100%; } .install-app-btn:active { transform: translateY(0); } .install-app-btn svg { width: 18px; height: 18px; fill: currentColor; } .install-app-btn.hidden { display: none; } /* Dark theme install button */ @media (prefers-color-scheme: dark) { .install-app-btn { background: linear-gradient(135deg, var(--lof-primary-600) 0%, var(--lof-primary-700) 100%); } .install-app-btn:hover { background: linear-gradient(135deg, var(--lof-primary-500) 0%, var(--lof-primary-600) 100%); } } /* RTL support */ [dir="rtl"] .install-app-btn { flex-direction: row-reverse; } /* Install success message */ .install-success-message { position: fixed; top: 20px; right: 20px; background: var(--lof-success-bg); color: var(--lof-success); padding: 12px 20px; border-radius: var(--lof-radius-lg); border: 1px solid var(--lof-success); box-shadow: var(--lof-shadow-lg); z-index: var(--lof-z-toast); animation: slideInRight 0.3s ease-out; max-width: 300px; } @keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } [dir="rtl"] .install-success-message { right: auto; left: 20px; animation: slideInLeft 0.3s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } /* Mobile responsive install buttons */ @media (max-width: 768px) { .install-app-btn { padding: 14px 24px; font-size: 16px; } .install-app-btn span { display: inline; } .install-app-btn svg { width: 20px; height: 20px; } .install-success-message { top: 10px; right: 10px; left: 10px; right: 10px; max-width: none; } [dir="rtl"] .install-success-message { left: 10px; } } /* Install message variants */ .install-message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--lof-surface); color: var(--lof-text); padding: 16px 24px; border-radius: var(--lof-radius-xl); border: 1px solid var(--lof-border); box-shadow: var(--lof-shadow-xl); z-index: var(--lof-z-toast); animation: slideInUp 0.3s ease-out; text-align: center; max-width: 90vw; } [dir="rtl"] .install-success-message { animation: slideInTop 0.3s ease-out; } [dir="rtl"] .install-message { animation: slideInUp 0.3s ease-out; } @keyframes slideInUp { from { opacity: 0; transform: translateX(-50%) translateY(100%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes slideInTop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } /* Install button states */ .install-success-message { background: var(--lof-success-bg); border-color: var(--lof-success); color: var(--lof-success); } .install-message { background: var(--lof-info-bg); border-color: var(--lof-info); color: var(--lof-info); } /* Focus states for accessibility */ .install-app-btn:focus-visible { outline: 3px solid var(--lof-focus); outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .install-app-btn, .install-success-message, .install-message { animation: none; transition: none; } .install-app-btn:hover { transform: none; } } /* Source: css/features/kpi-cards.css */ /* =================================================================== */ /* KPI CARDS - PROFESSIONAL CARD DESIGN & GRID LAYOUT */ /* Comprehensive KPI styling extracted from live-orders.css */ /* =================================================================== */ /* =================================================================== */ /* KPI GRID LAYOUT */ /* =================================================================== */ /* KPI container with responsive grid */ .lof-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; padding: 32px 0; margin: 0; background: transparent; position: relative; } /* Enhanced KPI container styling */ .lof-kpis, .lof-kpis-scroll { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px) saturate(140%); border-radius: 24px; box-shadow: 0 8px 32px -8px rgba(30, 64, 175, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04); padding: 18px 24px 22px; margin: 18px auto 28px auto; gap: 18px; align-items: stretch; justify-content: center; } /* KPI scroll container */ .lof-kpis-scroll { display: flex; gap: 18px; padding: 12px 18px 18px 18px; flex-wrap: wrap; background: linear-gradient(90deg, #e0f2fe 0%, #f1f5f9 100%); border-radius: 24px; box-shadow: 0 4px 18px -6px rgba(14, 165, 233, 0.10); scrollbar-width: thin; } .lof-kpis-scroll::-webkit-scrollbar { height: 8px; background: transparent; } .lof-kpis-scroll::-webkit-scrollbar-thumb { background: var(--lof-primary-200); border-radius: 8px; } /* =================================================================== */ /* INDIVIDUAL KPI CARD STYLING */ /* =================================================================== */ /* Base KPI card styling */ .lof-kpi { background: var(--lof-surface); border: 2px solid var(--lof-border); border-radius: 18px; box-shadow: 0 8px 24px -8px var(--lof-shadow-light); padding: 24px 20px 20px; min-width: 180px; min-height: 120px; transition: box-shadow 0.2s, border-color 0.2s; position: relative; contain: layout paint; } /* Glass morphism override for enhanced cards */ html body .lof-kpis .lof-kpi, body .lof-reports-page .lof-kpi, .lof-reports-page .lof-kpis .lof-kpi { background: var(--lof-glass-bg) !important; border: 2px solid rgba(59, 130, 246, 0.3) !important; border-radius: 20px !important; padding: 28px 24px 24px !important; display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; min-height: 140px !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; transition: all var(--lof-transition-base) !important; cursor: default !important; contain: layout paint !important; will-change: transform, box-shadow !important; transform: translateZ(0) !important; } /* =================================================================== */ /* KPI HOVER EFFECTS & TRANSITIONS */ /* =================================================================== */ /* KPI hover effects */ .lof-kpi:hover { border-color: var(--lof-primary); box-shadow: 0 12px 32px -8px var(--lof-primary-shadow); transform: translateY(-2px) scale(1.01); } /* Enhanced focus states for accessibility */ .lof-kpi:focus-visible { outline: 3px solid var(--lof-focus); outline-offset: 2px; transform: translateY(-2px); } /* =================================================================== */ /* KPI LABEL, VALUE, AND DELTA STYLING */ /* =================================================================== */ /* KPI label styling */ .lof-kpi .label { font-size: 12px !important; font-weight: 600 !important; color: var(--lof-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 8px !important; display: block !important; line-height: 1.2 !important; } /* KPI value styling */ .lof-kpi strong { font-size: 32px; font-weight: 800; color: var(--lof-text); display: block; line-height: 1; margin: 8px 0; font-variant-numeric: tabular-nums; } /* KPI sub-label styling */ .lof-kpi .kpi-sub { font-size: 12px; color: var(--lof-text-muted); margin-top: 4px; font-weight: 500; } /* Legacy compatibility styles */ .lof-kpi .kpi-sub { margin-top: 4px; font-size: var(--lof-font-size-sm); font-weight: 500; color: var(--lof-text-muted); margin-bottom: 8px; } /* =================================================================== */ /* DELTA INDICATORS & COLOR CODING */ /* =================================================================== */ /* Delta indicator base styling */ .lof-kpi .delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; margin-top: 8px; background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%); color: #2563eb; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08); } /* Delta hover effects */ .lof-kpi .delta:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Delta states - enhanced dark mode colors */ html[data-theme="dark"] .lof-kpi.delta-up .delta { color: var(--lof-success-200); background: var(--lof-success-800); border-color: var(--lof-success-700); box-shadow: 0 2px 8px var(--lof-success-shadow); } html[data-theme="dark"] .lof-kpi.delta-down .delta { color: var(--lof-danger-200); background: var(--lof-danger-800); border-color: var(--lof-danger-700); box-shadow: 0 2px 8px var(--lof-danger-shadow); } html[data-theme="dark"] .lof-kpi.delta-flat .delta { color: var(--lof-neutral-300); background: var(--lof-neutral-800); border-color: var(--lof-neutral-700); box-shadow: 0 2px 8px var(--lof-shadow-light); } /* =================================================================== */ /* KPI LOADING STATES & ANIMATIONS */ /* =================================================================== */ /* Loading state for KPI container */ .lof-kpis.lof-kpis-loading { opacity: 1; position: relative; } .lof-kpis.lof-kpis-loading::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(110deg, transparent 25%, rgba(59, 130, 246, 0.08) 50%, transparent 75%); animation: lof-kpi-container-shimmer 2.5s ease-in-out infinite; pointer-events: none; z-index: 1; border-radius: 12px; } @keyframes lof-kpi-container-shimmer { 0% { transform: translateX(-120%) rotate(-5deg); } 100% { transform: translateX(120%) rotate(-5deg); } } /* Individual KPI loading state */ .lof-kpi.lof-kpi-loading { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--lof-surface) 0%, rgba(59, 130, 246, 0.02) 50%, var(--lof-surface) 100%) !important; border-color: rgba(59, 130, 246, 0.15) !important; transform: scale(1.01); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .lof-kpi.lof-kpi-loading::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, 0.1) 60deg, rgba(16, 185, 129, 0.08) 120deg, rgba(245, 158, 11, 0.06) 180deg, transparent 240deg, transparent 360deg); animation: lof-kpi-shimmer 2s linear infinite; z-index: 2; } @keyframes lof-kpi-shimmer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Breathing effect for loading KPI cards */ .lof-kpi.lof-kpi-loading { animation: lof-kpi-breathe 3s ease-in-out infinite; } @keyframes lof-kpi-breathe { 0%, 100% { transform: scale(1.01); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1); } 50% { transform: scale(1.03); box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15); } } /* KPI card loading state */ .lof-kpi.loading { pointer-events: none; } .lof-kpi.loading strong { background: linear-gradient(90deg, var(--lof-text) 25%, rgba(0, 0, 0, 0.1) 37%, var(--lof-text) 63%); background-size: 400% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } /* KPI value update animation */ .lof-kpi strong.updating { animation: kpi-pulse 0.6s var(--lof-transition-bounce); } @keyframes kpi-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } 100% { transform: scale(1); } } /* KPI card entrance animation (bounce disabled) */ .lof-reports-page .lof-kpi, .lof-kpis .lof-kpi { animation: none !important; } .lof-reports-page .lof-kpi:nth-child(1), .lof-kpis .lof-kpi:nth-child(1) { animation-delay: 0ms !important; } .lof-reports-page .lof-kpi:nth-child(2), .lof-kpis .lof-kpi:nth-child(2) { animation-delay: 100ms !important; } .lof-reports-page .lof-kpi:nth-child(3), .lof-kpis .lof-kpi:nth-child(3) { animation-delay: 200ms !important; } .lof-reports-page .lof-kpi:nth-child(4), .lof-kpis .lof-kpi:nth-child(4) { animation-delay: 300ms !important; } @keyframes kpi-entrance { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* =================================================================== */ /* KPI ICON STYLING */ /* =================================================================== */ .lof-kpi-icon { font-size: 1.5rem; color: var(--lof-text-secondary); padding: var(--lof-space-3); border-radius: var(--lof-radius-md); background: var(--lof-surface-active); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .lof-kpi-card[data-kpi-type="orders"] .lof-kpi-icon { background-color: var(--lof-info-bg); color: var(--lof-info); } .lof-kpi-card[data-kpi-type="customers"] .lof-kpi-icon { background-color: var(--lof-primary-50); color: var(--lof-primary-600); } .lof-kpi-card[data-kpi-type="revenue"] .lof-kpi-icon { background-color: var(--lof-success-bg); color: var(--lof-success); } /* =================================================================== */ /* TOOLTIP ENHANCEMENTS */ /* =================================================================== */ /* Tooltip-style enhancement for KPI labels */ .lof-kpi .label::after { content: attr(data-description); position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: var(--lof-text-on-primary); padding: 6px 12px; border-radius: var(--lof-radius-sm); font-size: var(--lof-font-size-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--lof-transition-base); z-index: 10; } .lof-kpi:hover .label::after { opacity: 1; } /* =================================================================== */ /* KPI ATTRIBUTE FALLBACKS */ /* =================================================================== */ /* Assign data-kpi attributes via CSS fallback */ .lof-kpis .lof-kpi:nth-child(1) { --_dummy: 0; } .lof-kpis .lof-kpi:nth-child(1)::after { background: var(--lof-kpi-orders); } .lof-kpis .lof-kpi:nth-child(2)::after { background: var(--lof-kpi-income); } .lof-kpis .lof-kpi:nth-child(3)::after { background: var(--lof-kpi-15m); } .lof-kpis .lof-kpi:nth-child(4)::after { background: var(--lof-kpi-aov); } /* =================================================================== */ /* DARK THEME KPI STYLING */ /* =================================================================== */ /* Dark theme KPI styling */ html[data-theme="dark"] .lof-kpi { background: rgba(30, 41, 59, 0.95); border-color: var(--lof-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; color: var(--lof-text); } html[data-theme="dark"] .lof-kpi::before { background: linear-gradient(135deg, transparent 40%, var(--lof-glass-bg) 70%, var(--lof-glass-border) 100%); } html[data-theme="dark"] .lof-kpi:hover { box-shadow: 0 20px 40px -8px var(--lof-shadow-2xl), inset 0 1px 0 var(--lof-glass-border); } html[data-theme="dark"] .lof-kpi .label { color: var(--lof-primary-300); } html[data-theme="dark"] .lof-kpi strong { color: var(--lof-text); } html[data-theme="dark"] .lof-kpi .kpi-sub { color: #94a3b8; } html[data-theme="dark"] .lof-kpi .delta { background: linear-gradient(90deg, #1e293b 0%, #2563eb 100%); color: #bae6fd; } /* Dark theme KPI container */ html[data-theme="dark"] .lof-kpis, html[data-theme="dark"] .lof-kpis-scroll { background: rgba(30, 41, 59, 0.85); box-shadow: 0 8px 32px -8px rgba(30, 64, 175, 0.18); border: 1px solid var(--lof-border); } /* Dark mode override for glass morphism */ html[data-theme="dark"] { html body .lof-kpis .lof-kpi, body .lof-reports-page .lof-kpi, .lof-reports-page .lof-kpis .lof-kpi { background: var(--lof-glass-dark-bg) !important; border-color: var(--lof-glass-dark-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } } /* =================================================================== */ /* FRENCH TRANSLATION FOR KPI LABELS */ /* =================================================================== */ .lof-kpi[data-kpi="orders"] .label::after { content: "Commandes"; } .lof-kpi[data-kpi="income"] .label::after { content: "Revenu"; } .lof-kpi[data-kpi="aov"] .label::after { content: "Panier moyen"; } .lof-kpi[data-kpi="15m"] .label::after { content: "15 dernières min"; } .lof-kpi[data-kpi="orders"] .kpi-sub::after { content: "Total des commandes aujourd'hui"; } .lof-kpi[data-kpi="income"] .kpi-sub::after { content: "Revenu total aujourd'hui"; } .lof-kpi[data-kpi="aov"] .kpi-sub::after { content: "Valeur moyenne par commande"; } .lof-kpi[data-kpi="15m"] .kpi-sub::after { content: "Commandes sur les 15 dernières minutes"; } /* =================================================================== */ /* RESPONSIVE ADAPTATIONS */ /* =================================================================== */ /* Tablet KPI optimizations */ @media (max-width: 1024px) { .lof-kpis { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 24px; } } /* Mobile-specific KPI optimizations */ @media (max-width: 768px) { .lof-kpis { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Mobile responsiveness fix */ html body .lof-kpis .lof-kpi, body .lof-reports-page .lof-kpi, .lof-reports-page .lof-kpis .lof-kpi { padding: 20px 18px 18px !important; min-height: 120px !important; align-items: flex-start !important; text-align: left !important; } /* Ensure KPI grid stays centered on mobile */ .lof-kpis { justify-content: center !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } } @media (max-width: 640px) { /* KPI carousel cards */ .lof-kpis-scroll .lof-kpi { min-width: 170px !important; padding: 18px 16px 20px !important; } .lof-kpis-scroll .lof-kpi strong { font-size: 24px !important; } .lof-kpis-scroll .lof-kpi .kpi-sub { font-size: 13px !important; } .lof-kpis-scroll .lof-kpi .delta { font-size: 11px !important; padding: 4px 8px !important; } } @media (max-width: 599px) { .lof-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lof-kpi strong { font-size: 20px; } } @media (max-width: 480px) { .lof-kpis { grid-template-columns: 1fr; gap: 16px; } /* Ensure KPI grid stays centered on mobile */ .lof-kpis { justify-content: center !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } .lof-kpis { justify-content: center !important; margin: 16px auto 24px auto !important; } } /* Ultra-small devices */ @media (max-width: 430px) { .lof-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lof-kpi { padding: 14px 14px 16px !important; } .lof-kpi strong { font-size: 22px !important; } .lof-kpi .kpi-sub { font-size: 12px !important; } } /* Mobile delta positioning */ @media (max-width: 820px) { .lof-kpi .delta { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: 12px; background: var(--lof-chip-bg); color: var(--lof-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(-4px); transition: .25s; } } /* =================================================================== */ /* REPORTS PAGE LAYOUT OVERRIDES */ /* =================================================================== */ /* KPIs: two per line at all widths on reports page */ .lof-reports-page .lof-kpis, #lof-reports-page .lof-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* If a KPI carousel class is present, force it back to a 2-col grid */ .lof-reports-page .lof-kpis-scroll, #lof-reports-page .lof-kpis-scroll { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; gap: 14px !important; } .lof-reports-page .lof-kpis-scroll .lof-kpi, #lof-reports-page .lof-kpis-scroll .lof-kpi { min-width: 0 !important; } /* Reports page KPI text alignment */ .lof-reports-page .lof-kpi .label, .lof-reports-page .lof-kpi strong, .lof-kpis .lof-kpi h2, .lof-kpis .lof-kpi h3, .lof-kpis .lof-kpi .label, .lof-kpis .lof-kpi strong { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } /* =================================================================== */ /* ACCESSIBILITY & HIGH CONTRAST SUPPORT */ /* =================================================================== */ @media (prefers-contrast: high) { .lof-kpi .delta { border-width: 2px; font-weight: 800; } .lof-kpi::after { width: 6px; } } /* High performance mode - reduce motion */ @media (prefers-reduced-motion: reduce) { .lof-kpi, .lof-kpi strong, .lof-kpi .delta { animation: none !important; transition: none !important; } .lof-kpi:hover { transform: none; } } /* Source: css/features/top-products.css */ /* ===== TOP PRODUCTS SECTION - COMPREHENSIVE STYLING ===== */ /* Top products section header styling */ .lof-top-products-section h2::before { content: "🏆"; font-size: 18px; opacity: 0.8; } /* Clean section styling */ .lof-main-container .lof-top-products-section, .lof-top-products-section.lof-top-products-section, body .lof-top-products-section { background: var(--lof-surface) !important; border: 1px solid var(--lof-border) !important; border-radius: 8px !important; padding: 20px !important; margin: 16px 0 24px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } /* Simple header styling */ .lof-main-container .lof-top-products-section h2, .lof-top-products-section.lof-top-products-section h2, body .lof-top-products-section h2 { font-size: 18px !important; font-weight: 600 !important; color: var(--lof-text) !important; margin: 0 0 16px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--lof-border) !important; } /* Modern section container */ .lof-top-products-section { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; padding: 24px; margin: 16px 0 24px; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.04); transition: box-shadow 0.2s ease; } .lof-top-products-section:hover { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.08); } /* Clean section header */ .lof-top-products-section h2 { font-size: 18px; margin: 0 0 16px; font-weight: 600; color: var(--lof-text); letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; } .lof-top-products-section h2::before { content: "📊"; font-size: 16px; opacity: 0.7; } /* ===== TOP PRODUCTS LIST STYLING ===== */ /* Base list styling */ .lof-top-products-list { list-style: none; padding: 0; margin: 0; } /* Clean list styling */ .lof-main-container .lof-top-products-list, .lof-top-products-list.lof-top-products-list, body .lof-top-products-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; counter-reset: product-counter !important; } /* Modern product cards list */ .lof-top-products-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } /* ===== TOP PRODUCTS LIST ITEMS ===== */ .lof-top-products-list li { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 100%); border: 1px solid var(--lof-border); border-radius: 18px; box-shadow: 0 3px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.03); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; overflow: hidden; } /* Simple list items */ .lof-main-container .lof-top-products-list li, .lof-top-products-list.lof-top-products-list li, body .lof-top-products-list li, .lof-top-products-list li.lof-top-products-list, html .lof-top-products-list li { background: var(--lof-surface-alt) !important; border: 1px solid var(--lof-border) !important; border-radius: 6px !important; padding: 12px 16px 12px 40px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; position: relative !important; transition: border-color 0.2s ease !important; counter-increment: product-counter !important; } /* Completely remove the icon system with !important */ .lof-top-products-list li::before { display: none !important; } .lof-top-products-list li:nth-child(1)::before, .lof-top-products-list li:nth-child(2)::before, .lof-top-products-list li:nth-child(3)::before { display: none !important; } /* Simple number indicators */ /* .lof-main-container .lof-top-products-list li::before, .lof-top-products-list.lof-top-products-list li::before, body .lof-top-products-list li::before, .lof-top-products-list li.lof-top-products-list::before, html .lof-top-products-list li::before { content: counter(product-counter) !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 32px !important; background: var(--lof-text-muted) !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 12px !important; border-radius: 6px 0 0 6px !important; } */ /* ===== HOVER EFFECTS ===== */ .lof-top-products-list li:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 100%); border-color: var(--lof-primary); box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); } .lof-top-products-list li:active { transform: translateY(-1px) scale(1.01); } /* Subtle hover effect */ .lof-main-container .lof-top-products-list li:hover, .lof-top-products-list.lof-top-products-list li:hover, body .lof-top-products-list li:hover, .lof-top-products-list li.lof-top-products-list:hover, html .lof-top-products-list li:hover { border-color: var(--lof-focus) !important; } /* ===== PRODUCT STRUCTURE STYLING ===== */ /* Enhanced product structure styling */ .lof-top-products-list li .product-info { display: flex; flex-direction: column; flex: 1; gap: 8px; } .lof-top-products-list li .product-meta { display: flex; align-items: center; gap: 18px; } /* ===== PRODUCT NAME STYLING ===== */ .lof-top-products-list li .p-name { font-weight: 600; color: var(--lof-text); letter-spacing: -0.3px; font-size: 16px; line-height: 1.4; } /* Clean product name styling */ .lof-main-container .lof-top-products-list li .p-name, .lof-top-products-list.lof-top-products-list li .p-name, body .lof-top-products-list li .p-name, .lof-top-products-list li.lof-top-products-list .p-name, html .lof-top-products-list li .p-name { flex: 1 !important; padding-right: 12px !important; font-weight: 500 !important; color: var(--lof-text) !important; } /* ===== PRODUCT AMOUNT STYLING ===== */ .lof-top-products-list li .p-amount { font-weight: 700; color: var(--lof-primary); font-size: 17px; letter-spacing: -0.4px; } /* ===== PRODUCT QUANTITY BADGES ===== */ .lof-top-products-list li .p-qty { background: var(--lof-primary); color: var(--lof-text-on-primary); font-weight: 700; padding: 10px 18px; border-radius: 14px; font-size: 14px; min-width: 60px; text-align: center; box-shadow: 0 3px 12px var(--lof-primary-shadow); white-space: nowrap; transition: all 0.3s ease; } .lof-top-products-list li:hover .p-qty { background: var(--lof-primary-600); box-shadow: 0 5px 16px var(--lof-primary-shadow); transform: scale(1.08); } /* Simple quantity display */ .lof-main-container .lof-top-products-list li .p-qty, .lof-top-products-list.lof-top-products-list li .p-qty, body .lof-top-products-list li .p-qty, .lof-top-products-list li.lof-top-products-list .p-qty, html .lof-top-products-list li .p-qty { background: var(--lof-surface) !important; color: var(--lof-text) !important; font-weight: 600 !important; padding: 4px 8px !important; border-radius: 4px !important; font-size: 12px !important; border: 1px solid var(--lof-border) !important; } /* Additional p-qty styling variants */ .lof-top-products-list li { position: relative; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); } .lof-top-products-list li .p-qty { background: var(--lof-accent-bg); color: var(--lof-accent-fg); } /* ===== SHOW MORE/LESS BUTTON STYLING ===== */ /* Enhanced show more/less button styling */ .lof-products-toggle { background: var(--lof-primary); color: var(--lof-text-on-primary); border: none; padding: 16px 32px; border-radius: 16px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 16px var(--lof-primary-shadow); margin: 24px auto; display: block; position: relative; overflow: hidden; } .lof-products-toggle::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transition: left 0.6s ease; } .lof-products-toggle:hover::before { left: 100%; } .lof-products-toggle:hover { transform: translateY(-3px); box-shadow: 0 8px 20px var(--lof-primary-shadow); background: var(--lof-primary-600); } .lof-products-toggle:active { transform: translateY(-1px); } .lof-products-toggle.expanded { background: var(--lof-danger); box-shadow: 0 5px 16px var(--lof-danger-shadow); } .lof-products-toggle.expanded:hover { background: var(--lof-danger-600); box-shadow: 0 8px 20px var(--lof-danger-shadow); } .lof-products-toggle.expanded::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); } /* ===== EMPTY STATE STYLING ===== */ .lof-top-products-list li.empty { list-style: none; text-align: center; font-style: italic; color: var(--lof-text-muted); padding: 36px 24px; background: var(--lof-surface-alt); border: 2px dashed var(--lof-border); border-radius: 16px; } /* Clean empty state */ .lof-main-container .lof-top-products-list li.empty, .lof-top-products-list.lof-top-products-list li.empty, body .lof-top-products-list li.empty, .lof-top-products-list li.empty.lof-top-products-list, html .lof-top-products-list li.empty { text-align: center !important; font-style: italic !important; color: var(--lof-text-muted) !important; padding: 16px !important; counter-increment: none !important; } .lof-main-container .lof-top-products-list li.empty::before, .lof-top-products-list.lof-top-products-list li.empty::before, body .lof-top-products-list li.empty::before, .lof-top-products-list li.empty.lof-top-products-list::before, html .lof-top-products-list li.empty::before { display: none !important; } /* ===== SELLER ITEMS WITH BARS AND RANKINGS ===== */ /* NOTE: ALL SELLER ITEM STYLES DISABLED - Using styles from css/features/reports.css instead */ /* This entire section is disabled to avoid conflicts with the original styles */ /* DISABLED STYLES START HERE - ALL .lof-seller-item related styles are now in reports.css */ /* .lof-simple-list li.lof-seller-item { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 16px 18px 14px; border-radius: 12px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); width: 100%; box-sizing: border-box; min-height: 80px; color: var(--lof-text); margin-bottom: 12px; font-size: 14px; font-family: 'Inter', system-ui, -apple-system, sans-serif; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0; overflow: hidden; } */ /* NOTE: All seller-item styles moved to css/features/reports.css */ /* .lof-simple-list li.lof-seller-item .lof-seller-row-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; width: 100%; } .lof-simple-list li.lof-seller-item .lof-seller-name { flex: 1 1 auto; font-weight: 600; font-size: 15px; color: var(--lof-text); padding-right: 8px; letter-spacing: -0.01em; text-align: left; word-break: break-word; line-height: 1.4; } .lof-simple-list li.lof-seller-item .lof-seller-amount { flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 15px; color: #047857; margin-left: auto; padding: 4px 10px; background: rgba(4, 120, 87, 0.1); border-radius: 6px; border: 1px solid rgba(4, 120, 87, 0.2); } */ /* .lof-simple-list li.lof-seller-item .lof-seller-row-bar { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; width: 100%; min-height: 24px; padding: 0; box-sizing: border-box; background: none; margin: 0; } */ .lof-simple-list li.lof-seller-item .lof-seller-orders { flex: 0 0 auto; font-size: 14px; color: var(--lof-text); font-weight: 600; padding: 0 8px; text-align: center; background: var(--lof-surface-alt); border-radius: 6px; border: 1px solid var(--lof-border); min-width: 40px; white-space: nowrap; margin: 0; display: inline-flex; align-items: center; justify-content: center; height: 16px; /* Match the progress bar height for perfect alignment */ line-height: 1; box-sizing: border-box; vertical-align: middle; } /* DISABLED - Using styles from css/features/reports.css instead to avoid conflicts */ /* .lof-simple-list li.lof-seller-item .lof-seller-bar { flex: 0 0 auto; width: 100%; max-width: 100%; height: 20px; border-radius: 10px; background: #f1f5f9; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; margin: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); align-self: center; box-sizing: border-box; vertical-align: middle; } */ /* DISABLED - Using styles from css/features/reports.css instead to avoid conflicts */ /* .lof-simple-list li.lof-seller-item .lof-seller-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%); border-radius: 8px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; box-shadow: 0 0 6px rgba(37, 99, 235, 0.25); } */ /* DISABLED - Using ::before pseudo-element approach from reports.css instead */ /* .lof-simple-list li.lof-seller-item .lof-seller-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%); border-radius: 8px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; width: var(--w, 0%); } */ /* DISABLED - Using styles from css/features/reports.css instead to avoid conflicts */ /* .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::before { width: var(--w, 0%) !important; } .lof-simple-list li.lof-seller-item .lof-seller-bar::before { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); } */ /* Improve the orders count display */ .lof-simple-list li.lof-seller-item .lof-seller-orders { display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* ===== SELLER RANKING BADGES AND COLORS ===== */ /* Rank badge styling */ .lof-simple-list li.lof-seller-item .lof-seller-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: var(--lof-text-on-primary); border-radius: 10px; font-size: 11px; font-weight: 700; margin-right: 6px; padding: 0 8px; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3); letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.2s ease; } /* Rank-based color overrides with improved contrast */ .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar-fill { background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%) !important; box-shadow: 0 0 6px rgba(234, 88, 12, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar-fill { background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%) !important; box-shadow: 0 0 6px rgba(107, 114, 128, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-item .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar-fill { background: linear-gradient(90deg, #059669 0%, #047857 100%) !important; box-shadow: 0 0 6px rgba(5, 150, 105, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar-fill { background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%) !important; box-shadow: 0 0 6px rgba(37, 99, 235, 0.3) !important; } /* Additional rank-based color overrides */ .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar-fill { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important; } .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar-fill { background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%) !important; } .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar-fill { background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important; } .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar-fill { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important; } /* ===== SELLER ITEM HOVER EFFECTS ===== */ /* Hover effects with improved colors */ .lof-simple-list li.lof-seller-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-1px); border-color: #cbd5e1; background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); } .lof-simple-list li.lof-seller-item:hover .lof-seller-orders { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } .lof-simple-list li.lof-seller-item:hover .lof-seller-amount { background: rgba(4, 120, 87, 0.15); border-color: rgba(4, 120, 87, 0.3); } /* ===== SELLER ITEM ACCESSIBILITY AND STATES ===== */ /* Focus states for accessibility */ .lof-simple-list li.lof-seller-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.12); } /* Enhanced focus states for accessibility */ .lof-simple-list li.lof-seller-item:focus-visible { outline: 3px solid var(--lof-primary, #0ea5e9); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.15), 0 8px 20px -6px rgba(0,0,0,.2); transform: translateY(-1px); border-color: var(--lof-primary, #0ea5e9); } /* Active/pressed states */ .lof-simple-list li.lof-seller-item:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease-out; } /* Loading state */ .lof-simple-list li.lof-seller-item.loading { position: relative; pointer-events: none; opacity: 0.7; } .lof-simple-list li.lof-seller-item.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--lof-shimmer-color) 50%, transparent 100% ); /* Animation moved to css/components/skeletons.css */ border-radius: inherit; pointer-events: none; } /* Label and value styling */ .lof-simple-list li.lof-seller-item .label { font-weight: 600; color: #1e293b; flex: 1; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; line-height: 1.4; font-size: 14px; } .lof-simple-list li.lof-seller-item .value { display: flex; align-items: center; gap: 8px; margin-left: auto; } .lof-simple-list li.lof-seller-item .value .amount { font-weight: 700; color: #1d4ed8; font-size: 14px; } .lof-simple-list li.lof-seller-item .value .orders { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: #64748b; } /* Spacing between items */ .lof-simple-list li.lof-seller-item + li.lof-seller-item { margin-top: 8px; } /* ===== SELLER BAR VARIANTS ===== */ /* Column layout seller bar base (when not using .one-line variant) */ .lof-simple-list li.lof-seller-item .lof-seller-bar{ position:relative; display:block; width:100%; height:var(--sb-height,12px); background:linear-gradient(90deg,#232a3b 0%,#2a3140 100%); border-radius:8px; overflow:hidden; margin-top:2px; box-shadow:0 2px 8px rgba(30,41,59,0.10); } .lof-simple-list li.lof-seller-item .lof-seller-bar::before{ content:""; position:absolute; inset:0; width:0%; background:var(--sb-gradient, linear-gradient(90deg,#2ecc71 0%,#28b765 55%,#0f8f4d 100%)); border-radius:inherit; transition:width .85s cubic-bezier(.16,.8,.24,1); box-shadow:0 0 12px 0 rgba(46,204,113,0.18); } .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::before{ width:var(--w,0%); } .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 45%,rgba(255,255,255,0) 70%); background-size:200% 100%; animation:lof-bar-sheen 2.1s ease-in-out .25s forwards; pointer-events:none; mix-blend-mode:overlay; } @keyframes lof-bar-sheen{ 0%{background-position:200% 0;opacity:.9;} 60%{background-position:-30% 0;opacity:.3;} 100%{background-position:-30% 0;opacity:0;} } /* Clean up duplicate styles */ .lof-simple-list li.lof-seller-item:focus-within { box-shadow: 0 0 0 3px var(--lof-focus); outline: 0; } .lof-simple-list li.lof-seller-item .lof-seller-bar { transition: width 0.5s cubic-bezier(0.16, 0.8, 0.24, 1), opacity 0.3s ease; } .lof-simple-list li.lof-seller-item .lof-seller-bar:after { content: attr(data-orders); position: absolute; right: 6px; bottom: 6px; background: var(--lof-surface); color: var(--lof-text); font-weight: 800; font-size: 10px; line-height: 1; border-radius: 999px; padding: 3px 6px; box-shadow: 0 2px 4px var(--lof-shadow-medium); } .lof-simple-list li.lof-seller-item[data-rank="1"]::before{ background:linear-gradient(135deg,#f59e0b,#d97706); } .lof-simple-list li.lof-seller-item[data-rank="2"]::before{ background:linear-gradient(135deg,#94a3b8,#64748b); } .lof-simple-list li.lof-seller-item[data-rank="3"]::before{ background:linear-gradient(135deg,#14b8a6,#0f766e); } .lof-simple-list li.lof-seller-item .label{ font-weight:700; color:var(--lof-text); flex:1; font-size:14px; } /* ================= Seller Bar Variant (Glass - variant 22) ================= */ /* Apply by adding data-sb-variant="22" on li.lof-seller-item */ /* 22. Glass - Updated to work with new clean styles */ .lof-seller-item[data-sb-variant="22"] .lof-seller-bar, .lof-seller-item.sb-v22 .lof-seller-bar { --sb-track: rgba(255, 255, 255, 0.35); --sb-start: #14b8a6; --sb-mid: #06b6d4; --sb-end: #0ea5e9; --sb-glow: 0 4px 12px rgba(14, 165, 233, 0.35) inset; height: 16px !important; /* Increased from 10px to 16px for better visibility */ border-radius: 8px !important; /* Increased from 5px to 8px to match the new height */ } /* ===== THEME SUPPORT ===== */ /* Dark theme support */ html[data-theme="dark"] .lof-top-products-list li { background: var(--lof-surface); border-color: var(--lof-border); } html[data-theme="dark"] .lof-product-item { background: var(--lof-surface); border-color: var(--lof-border); } html[data-theme="dark"] .lof-product-item:hover { background: var(--lof-surface-hover); border-color: var(--lof-primary); } /* Light theme support */ html[data-theme="light"] .lof-product-item { background: var(--lof-surface); border-color: var(--lof-border); } html[data-theme="light"] .lof-product-item:hover { background: var(--lof-surface-hover); border-color: var(--lof-primary); } /* System preference support */ html[data-theme="light"] { .lof-product-item { background: var(--lof-surface); border-color: var(--lof-border); } } html[data-theme="dark"] { .lof-product-item { background: var(--lof-surface); border-color: var(--lof-border); } } /* ===== RESPONSIVE DESIGN ===== */ /* Mobile responsiveness improvements */ @media (max-width: 768px) { .lof-top-products-section, .lof-top-products-list li { padding: 12px !important; font-size: 13px !important; } .lof-simple-list li.lof-seller-item { padding: 8px !important; font-size: 13px !important; } .lof-top-products-list li { padding: 14px 16px; margin-bottom: 10px; flex-direction: row; align-items: flex-start; gap: 12px; } .lof-top-products-list li .product-info { width: 100%; } .lof-top-products-list li .product-meta { width: 100%; justify-content: space-between; } .lof-top-products-list li .p-name { font-size: 14px; } .lof-top-products-list li .p-amount { font-size: 15px; } .lof-top-products-list li .p-qty { padding: 6px 12px; font-size: 12px; min-width: 45px; } } @media (max-width: 480px) { .lof-simple-list li.lof-seller-item { padding: 12px 14px 10px; min-height: 70px; margin-bottom: 8px; } .lof-simple-list li.lof-seller-item .lof-seller-name { font-size: 14px; } .lof-simple-list li.lof-seller-item .lof-seller-amount { font-size: 14px; padding: 3px 8px; } .lof-simple-list li.lof-seller-item .lof-seller-orders { font-size: 13px; padding: 0 8px; /* Adjusted padding for better proportion */ min-width: 40px; height: 18px; /* Match the updated mobile progress bar height */ line-height: 1; margin: 0; /* Remove all margins */ } .lof-simple-list li.lof-seller-item .lof-seller-bar { min-width: 80px; max-width: 75%; height: 18px; /* Increased for better visibility and touch targets */ border-radius: 9px; } .lof-simple-list li.lof-seller-item .lof-seller-row-bar { gap: 0; min-height: 20px; } .lof-top-products-list li{ font-size:13px; flex-wrap:wrap; padding:8px 10px; } .lof-top-products-list li .p-name{ flex:1 1 100%; margin-bottom:2px; } .lof-top-products-list li .p-qty, .lof-top-products-list li .p-amt{ font-size:12px; } .lof-top-products-list li{ font-size:14px !important; } .lof-top-products-list li{ font-size:15px !important; padding:10px 14px !important; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .lof-simple-list li.lof-seller-item:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); } .lof-simple-list li.lof-seller-item:active { transform: scale(0.98); transition: transform 0.1s ease-out; } } /* Ultra-small accessibility boost */ @media (max-width:360px){ .lof-top-products-list li{ font-size:14px !important; } } /* ===== ACCESSIBILITY AND REDUCED MOTION ===== */ /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .lof-simple-list li.lof-seller-item, .lof-simple-list li.lof-seller-item .lof-seller-bar, .lof-simple-list li.lof-seller-item .lof-seller-bar::before { animation: none !important; transition: none !important; } .lof-simple-list li.lof-seller-item:hover { transform: none !important; } .lof-simple-list li.lof-seller-item.loading::after { animation: none !important; opacity: 0.3; } } /* END OF DISABLED SELLER-ITEM STYLES */ */ /* ===== PRODUCT ITEM BASE STYLING ===== */ /* Clean product item styling - replaces excessive !important usage */ .lof-product-item { display: flex; align-items: center; flex-direction: row; justify-content: space-between; padding: 14px 18px; margin: 0 0 8px 0; border: 1px solid var(--lof-border); border-radius: var(--lof-radius-lg); background: var(--lof-surface); backdrop-filter: blur(10px); box-shadow: var(--lof-shadow-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; min-height: 52px; height: auto; width: 100%; box-sizing: border-box; list-style: none; text-decoration: none; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; gap: 14px; overflow: hidden; } .lof-product-item::before { display: none !important; content: none !important; } .lof-product-item:hover { background: var(--lof-surface-hover); border-color: var(--lof-primary); box-shadow: var(--lof-shadow-md); transform: translateY(-2px) scale(1.01); } .lof-product-item:active { transform: translateY(0) scale(0.99); transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); } /* ===== TOP PRODUCTS LISTS (ACTIVE STYLES) ===== */ .lof-top-products-list li, .lof-top-products-list li .p-qty, .lof-products-toggle { transition: none !important; transform: none !important; } .lof-top-products-list li:hover, .lof-top-products-list li:hover .p-qty { transform: none !important; } .lof-products-toggle:hover { transform: none !important; } .lof-products-toggle::before { transition: none !important; } .lof-top-products-section, .lof-top-products-list li, .lof-top-products-list li .p-qty, .lof-products-toggle { transition: none !important; transform: none !important; } .lof-top-products-section:hover, .lof-top-products-list li:hover, .lof-top-products-list li:hover .p-qty { transform: none !important; } /* ===== ENHANCED PRODUCT ITEM ANIMATIONS ===== */ /* Enhanced product item animations */ .lof-product-full-item { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Enhanced one-row layout for product item children */ .lof-product-item .p-name { flex: 1; font-weight: 600; color: var(--lof-text); font-size: 15px; line-height: 1.4; letter-spacing: -0.2px; padding-right: 12px; display: flex; align-items: center; min-width: 0; word-break: break-word; } .lof-product-item .p-qty { background: linear-gradient(135deg, var(--lof-primary) 0%, var(--lof-primary-600) 100%); color: var(--lof-text-on-primary); font-weight: 700; padding: 8px 14px; border-radius: var(--lof-radius-lg); font-size: 13px; min-width: 50px; text-align: center; box-shadow: 0 2px 8px var(--lof-primary-shadow); white-space: nowrap; position: relative; overflow: hidden; transition: all 0.3s ease; } .lof-product-item .p-qty::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .lof-product-item .p-amount { font-weight: 700; color: var(--lof-primary); font-size: 16px; letter-spacing: -0.3px; margin-left: 12px; transition: all 0.2s ease; white-space: nowrap; min-width: 80px; text-align: right; } /* Hover effects for individual elements */ .lof-product-item:hover .p-name { color: var(--lof-text); } .lof-product-item:hover .p-qty { background: linear-gradient(135deg, var(--lof-primary-600) 0%, var(--lof-primary-700) 100%); box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: scale(1.05); } .lof-product-item:hover .p-qty::before { left: 100%; } .lof-product-item:hover .p-amount { color: var(--lof-primary-600); transform: scale(1.02); } /* Mobile optimizations for product items */ @media (max-width: 480px) { .lof-product-item { padding: 10px 12px; gap: 8px; min-height: 44px; } .lof-product-item .p-name { font-size: 14px; } .lof-product-item .p-qty { font-size: 11px; padding: 5px 8px; min-width: 35px; } .lof-product-item .p-amount { font-size: 14px; min-width: 60px; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .lof-product-item:hover { transform: translateY(-1px) scale(1.005); } .lof-product-item:hover .p-qty { transform: scale(1.02); } .lof-product-item:hover .p-amount { transform: scale(1.01); } } /* Source: css/features/charts.css */ /* =================================================================== */ /* CHARTS AND DATA VISUALIZATION */ /* Daily trend charts, mini bars, and chart containers */ /* =================================================================== */ /* Trend section container */ .lof-trend-section { margin: 16px 0 24px; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 16px; padding: 16px 18px; box-shadow: 0 4px 12px -3px rgba(0,0,0,.08), 0 8px 24px -8px rgba(0,0,0,.06); } .lof-trend-section h2 { font-size: 18px; font-weight: 600; margin: 0 0 14px; letter-spacing: 0.2px; color: var(--lof-text); } /* =================================================================== */ /* DAILY TREND MINI BAR CHART */ /* =================================================================== */ #lof-daily-trend { --scrollbar-thumb: color-mix(in srgb, var(--lof-primary) 30%, transparent); --scrollbar-track: transparent; display: flex; align-items: flex-end; gap: var(--lof-space-2); width: 100%; height: clamp(180px, 22vh, 240px); /* Increased height for labels */ overflow-x: auto; overflow-y: visible; padding: var(--lof-space-5) var(--lof-space-4); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; position: relative; } /* Custom scrollbar for daily trend */ #lof-daily-trend::-webkit-scrollbar { height: 4px; } #lof-daily-trend::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--lof-radius-full); transition: background-color 0.2s ease; } #lof-daily-trend::-webkit-scrollbar-track { background: var(--scrollbar-track); margin: 0 var(--lof-space-4); } .lof-mini-bar { --bar-height: 12px; --bar-color: var(--lof-primary); --bar-gradient-start: var(--lof-primary); --bar-gradient-end: color-mix(in srgb, var(--lof-primary) 90%, #000); --bar-shadow: color-mix(in srgb, var(--lof-primary) 40%, transparent); --bar-hover-elevation: var(--lof-shadow-md); position: relative; flex: 0 0 48px; height: 100%; min-height: 0; margin: 0; direction: ltr; width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; z-index: 1; padding-top: var(--lof-space-8); padding-bottom: var(--lof-space-4); /* Glass morphism effect */ background: linear-gradient( 135deg, var(--bar-gradient-start) 0%, var(--bar-gradient-end) 100% ); background-blend-mode: overlay; backdrop-filter: blur(4px); border-radius: var(--lof-radius-md) var(--lof-radius-md) var(--lof-radius-sm) var(--lof-radius-sm); border: 1px solid color-mix(in srgb, var(--lof-primary) 30%, transparent); /* Elevation */ transform: translateZ(0); box-shadow: 0 2px 4px -1px var(--bar-shadow), 0 1px 2px -1px color-mix(in srgb, var(--lof-primary) 10%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, box-shadow; } /* Amount label positioned above the bar */ .lof-mini-bar span.amt { position: absolute; top: -24px; left: 50%; font-size: 11px; font-weight: 600; color: var(--lof-text) !important; white-space: nowrap; pointer-events: none; z-index: 1000 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); opacity: 1 !important; visibility: visible !important; background: var(--lof-surface) !important; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--lof-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: block !important; } /* Day number positioned below the bar */ .lof-mini-bar span.day { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 500; color: var(--lof-text-muted) !important; white-space: nowrap; pointer-events: none; z-index: 1000 !important; opacity: 1 !important; visibility: visible !important; background: var(--lof-surface) !important; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--lof-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: block !important; } /* Hover & Active States */ .lof-mini-bar:where(:hover, :focus-visible) { --bar-height: 10px; transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 6px -1px var(--bar-shadow), 0 2px 4px -1px color-mix(in srgb, var(--lof-primary) 15%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.2); z-index: 2; } .lof-mini-bar:active { transform: translateY(0); filter: brightness(0.95); } /* Color Variations */ .lof-mini-bar[data-variant="success"] { --bar-color: var(--lof-success); --bar-gradient-start: var(--lof-success); --bar-gradient-end: color-mix(in srgb, var(--lof-success) 90%, #000); } .lof-mini-bar[data-variant="warning"] { --bar-color: var(--lof-warning); --bar-gradient-start: var(--lof-warning); --bar-gradient-end: color-mix(in srgb, var(--lof-warning) 90%, #000); } .lof-mini-bar[data-variant="danger"] { --bar-color: var(--lof-danger); --bar-gradient-start: var(--lof-danger); --bar-gradient-end: color-mix(in srgb, var(--lof-danger) 90%, #000); } /* Amount Label */ .lof-mini-bar .lof-bar-amount { position: absolute; top: calc(-1 * (var(--lof-space-6) + 4px)); left: 50%; transform: translateX(-50%); font-size: var(--lof-text-xs); font-weight: 600; line-height: 1.25; color: var(--lof-text); white-space: nowrap; background: var(--lof-surface); padding: var(--lof-space-1) var(--lof-space-2); border-radius: var(--lof-radius-full); border: 1px solid var(--lof-border); box-shadow: var(--lof-shadow-sm); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 10; } /* Day Label */ .lof-mini-bar .lof-bar-day { position: absolute; bottom: calc(-1 * (var(--lof-space-6) + 2px)); left: 50%; transform: translateX(-50%); font-size: var(--lof-text-xs); font-weight: 500; line-height: 1.25; color: var(--lof-text-muted); white-space: nowrap; background: var(--lof-surface); padding: var(--lof-space-1) var(--lof-space-2); border-radius: var(--lof-radius-full); border: 1px solid var(--lof-border); box-shadow: var(--lof-shadow-xs); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 10; } /* Show labels on hover/focus */ .lof-mini-bar:hover .lof-bar-amount, .lof-mini-bar:hover .lof-bar-day, .lof-mini-bar:focus-visible .lof-bar-amount, .lof-mini-bar:focus-visible .lof-bar-day { opacity: 1; transform: translateX(-50%) translateY(-2px); } /* =================================================================== */ /* CHART CONTAINER AND DATA VISUALIZATION */ /* =================================================================== */ /* Clamp charts/lists to container */ #lof-daily-trend { max-width: 100%; overflow-x: auto; overflow-y: visible; padding: 1rem 0.5rem; scrollbar-width: thin; scrollbar-color: var(--lof-border-color) transparent; } /* Custom scrollbar for daily trend (reports page) */ #lof-daily-trend::-webkit-scrollbar { height: 6px; } #lof-daily-trend::-webkit-scrollbar-thumb { background-color: var(--lof-border-color); border-radius: 3px; } #lof-daily-trend::-webkit-scrollbar-track { background: transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* Center charts and data displays in reports */ .lof-reports-page .chart-container { margin: 0 auto !important; text-align: center !important; } /* =================================================================== */ /* DARK THEME CHART STYLES */ /* =================================================================== */ html[data-theme="dark"] .lof-hourly-bar { background: var(--lof-primary-500); } html[data-theme="dark"] .lof-hourly-bar-peak { background: var(--lof-primary-400); } /* =================================================================== */ /* HIGH CONTRAST AND ACCESSIBILITY */ /* =================================================================== */ [data-high-contrast] .lof-mini-bar { filter: contrast(1.2) saturate(1.1); } [data-high-contrast] #lof-daily-trend { background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent 70%); border: 2px solid #000; backdrop-filter: none; } /* Pattern assist for color-blind accessibility */ [data-patterns] .lof-mini-bar { position: relative; } [data-patterns] .lof-mini-bar:before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); mix-blend-mode: overlay; pointer-events: none; border-radius: inherit; } [data-patterns][data-high-contrast] .lof-mini-bar::before { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 8px, transparent 8px 16px); } /* =================================================================== */ /* RESPONSIVE CHART BEHAVIOR */ /* =================================================================== */ /* Responsive Adjustments */ @media (max-width: 640px) { #lof-daily-trend { height: 160px; padding: var(--lof-space-4) var(--lof-space-2); } .lof-mini-bar { flex: 0 0 28px; width: 28px; } .lof-mini-bar .lof-bar-amount { top: -22px; font-size: var(--lof-text-2xs); padding: 0 var(--lof-space-1); white-space: nowrap; } .lof-mini-bar .lof-bar-day { bottom: -18px; font-size: var(--lof-text-2xs); padding: 0 var(--lof-space-1); } } /* Desktop responsive adjustments */ @media (min-width: 821px) { /* Desktop trend section inherits base styles - no override needed */ #lof-daily-trend { padding: 32px 4px 28px; min-height: 180px; } #lof-daily-trend .lof-mini-bar { flex: 0 0 42px; max-width: 42px; min-width: 42px; direction: ltr; } } /* Mobile "app-like" override layer */ @media (max-width: 640px) { .lof-trend-section { margin: 12px 10px 16px 10px !important; border-radius: 16px !important; padding: 14px 16px 18px !important; box-shadow: 0 3px 8px -2px rgba(0,0,0,.08) !important; } .lof-trend-section h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 12px !important; letter-spacing: 0.2px !important; } #lof-daily-trend { min-height: 170px; padding: 30px 6px 26px; gap: 4px; } #lof-daily-trend .lof-mini-bar { flex: 0 0 30px; max-width: 30px; direction: ltr; } .lof-mini-bar span.amt { position: absolute !important; top: -24px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 11px; opacity: 1 !important; visibility: visible !important; z-index: 1000 !important; background: var(--lof-surface) !important; padding: 2px 6px !important; border-radius: 4px !important; border: 1px solid var(--lof-border) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; display: block !important; } .lof-mini-bar span.day { position: absolute !important; bottom: -20px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 11px; opacity: 1 !important; visibility: visible !important; z-index: 1000 !important; background: var(--lof-surface) !important; padding: 2px 6px !important; border-radius: 4px !important; border: 1px solid var(--lof-border) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; display: block !important; } } /* Small mobile devices */ @media (max-width: 480px) { .lof-trend-section, .lof-trend-section { margin: 14px 0; padding: 16px; border-radius: 16px; box-shadow: 0 3px 10px -3px rgba(0,0,0,.08), 0 6px 20px -6px rgba(0,0,0,.06); } .lof-trend-section h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.2px; } #lof-daily-trend { padding: 10px 6px 8px; min-height: 160px; gap: 6px; } .lof-mini-bar span.amt { position: absolute !important; top: -18px; left: 50% !important; transform: translateX(-50%) !important; font-size: 11px; font-weight: 600; color: var(--lof-text) !important; white-space: nowrap; pointer-events: none; z-index: 1000 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); opacity: 1 !important; visibility: visible !important; background: var(--lof-surface) !important; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--lof-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: block !important; } } /* Ultra-small devices */ @media (max-width: 430px) { #lof-daily-trend { padding: 28px 4px 24px; gap: 3px; min-height: 160px; } #lof-daily-trend .lof-mini-bar { flex: 0 0 28px; max-width: 28px; direction: ltr; } } /* Source: css/features/order-feed.css */ /* =================================================================== */ /* ORDER FEED SPECIFIC STYLES */ /* =================================================================== */ /* =================================================================== */ /* LIVE ORDER FEED CONTAINER */ /* =================================================================== */ #live-order-feed-container { display: flex; flex-direction: column; gap: var(--lof-space-6); container-type: inline-size; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* =================================================================== */ /* FEED CONTROLS BAR */ /* =================================================================== */ .feed-controls-bar { position: relative; margin: var(--lof-space-2) auto; z-index: var(--lof-z-dropdown); display: flex; align-items: center; gap: var(--lof-space-6); padding: var(--lof-space-2) var(--lof-space-5); background: var(--lof-glass-bg); backdrop-filter: var(--lof-glass-blur); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-full); box-shadow: var(--lof-shadow-lg); transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out; } .feed-controls-bar.hidden { opacity: 0 !important; pointer-events: none !important; top: 0 !important; } .feed-controls-bar { background: rgba(255,255,255,.85); border-color: var(--lof-border); } /* =================================================================== */ /* STATUS INDICATORS */ /* =================================================================== */ .status-indicator { font-size: var(--lof-text-xs); font-weight: 600; padding: var(--lof-space-2) var(--lof-space-3); border-radius: var(--lof-radius-md); border: 1px solid transparent; transition: all var(--lof-transition-base); text-transform: uppercase; letter-spacing: 0.5px; } .status-ok { color: var(--lof-success); background: var(--lof-success-bg); border-color: var(--lof-primary-200); } .status-ok { background: #e3f9ec; color: var(--lof-success); } .status-action { color: var(--lof-info); background: var(--lof-info-bg); border-color: var(--lof-info-bg); cursor: pointer; } .status-action { background: #e6f1fc; color: var(--lof-info); } .status-error { color: var(--lof-error); background: var(--lof-error-bg); border-color: var(--lof-error-bg); } .status-error { background: #fde4e4; color: var(--lof-danger); } .status-warning { color: var(--lof-warning); background: var(--lof-warning-bg); border-color: var(--lof-warning-bg); } .status-warning { background: #fff4e0; color: var(--lof-warning); } .status-indicator + .status-indicator { margin-left: var(--lof-space-2); } /* =================================================================== */ /* START FEED BOX */ /* =================================================================== */ .start-feed-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--lof-space-8); margin: var(--lof-space-6) auto; max-width: 500px; background: var(--lof-glass-bg); backdrop-filter: var(--lof-glass-blur); border: 1px solid var(--lof-border); border-radius: var(--lof-radius-xl); box-shadow: var(--lof-shadow-lg); transition: all var(--lof-transition-base); will-change: transform; transform: translateZ(0); /* Force GPU layer */ } .start-feed-box h2 { font-size: var(--lof-text-2xl); font-weight: 700; color: var(--lof-text); margin-bottom: var(--lof-space-4); } .start-feed-box p { font-size: var(--lof-text-base); color: var(--lof-text-muted); margin-bottom: var(--lof-space-6); line-height: 1.6; } /* Kiosk mode - hide start overlay */ .lof-kiosk-mode #start-feed-overlay, .lof-kiosk-mode .start-feed-box { display: none !important; } /* =================================================================== */ /* ORDER LIST STYLING AND ANIMATIONS */ /* =================================================================== */ /* Order body styles moved to css/components/cards.css for better organization */ /* Legacy feed-specific overrides */ #live-order-feed-container .order-items-list li { padding: 0 !important; /* Match new unified styling */ } #live-order-feed-container .order-items-list li + li { margin-top: 0; /* Use gap instead */ } /* =================================================================== */ /* REAL-TIME UPDATE ANIMATIONS */ /* =================================================================== */ /* Pulse animation for updates */ @keyframes lof-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } /* Slide up animation for new elements */ @keyframes lof-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Fade in animation */ @keyframes lof-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Optimized keyframes with hardware acceleration */ @keyframes lof-pulse-optimized { 0%, 100% { transform: scale3d(1, 1, 1); opacity: 1; } 50% { transform: scale3d(1.05, 1.05, 1); opacity: 0.8; } } @keyframes lof-bounce-in { 0% { transform: scale3d(0.3, 0.3, 1); opacity: 0; } 50% { transform: scale3d(1.05, 1.05, 1); opacity: 0.8; } 70% { transform: scale3d(0.9, 0.9, 1); opacity: 0.9; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } @keyframes lof-slide-up { 0% { transform: translate3d(0, 100%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes lof-fade-in-scale { 0% { transform: scale3d(0.95, 0.95, 1); opacity: 0; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } /* Modern micro-interactions */ .lof-micro-bounce { animation: lof-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .lof-micro-slide { animation: lof-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lof-micro-fade { animation: lof-fade-in-scale 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* =================================================================== */ /* ORDER FEED RESPONSIVE DESIGN */ /* =================================================================== */ /* Container queries for adaptive layouts */ @container (max-width: 480px) { .feed-controls-bar { flex-direction: column; gap: var(--lof-space-3); justify-content: center; } .status-indicator { font-size: var(--lof-text-2xs); padding: var(--lof-space-1) var(--lof-space-2); } } /* Medium screens */ @media (max-width: 768px) { #live-order-feed-container { gap: var(--lof-space-4); } .start-feed-box { padding: var(--lof-space-6); margin: var(--lof-space-4); } .start-feed-box h2 { font-size: var(--lof-text-xl); } .start-feed-box p { font-size: var(--lof-text-sm); } .feed-controls-bar { flex-direction: column; height: auto; top: 65px; border-radius: 22px; gap: 12px; } /* Mobile: keep vertical stack with proper scrolling */ #live-order-feed-container { display: flex; flex-direction: column; align-items: stretch; gap: 16px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Remove conflicting gradient masks on mobile */ #live-order-feed-container:before, #live-order-feed-container:after { display: none; } } /* Small screens */ @media (max-width: 480px) { #live-order-feed-container { gap: var(--lof-space-3); } .start-feed-box { padding: var(--lof-space-4); margin: var(--lof-space-2); } .start-feed-box h2 { font-size: var(--lof-text-lg); } /* Status indicators */ .status-indicator { font-size: 14px; padding: 10px 14px; } } /* Landscape orientation adjustments */ @media (max-height: 500px) and (orientation: landscape) { .start-feed-box { padding: var(--lof-space-4); } .start-feed-box h2 { font-size: var(--lof-text-lg); margin-bottom: var(--lof-space-2); } .start-feed-box p { margin-bottom: var(--lof-space-3); } } /* Ensure burger button container doesn't clip content */ .feed-controls-bar, #live-feed-wrapper { overflow: visible; } /* Feed container has specific scroll behavior - don't override */ /* =================================================================== */ /* THEME SUPPORT */ /* =================================================================== */ /* Dark theme support */ html[data-theme="dark"] .feed-controls-bar { background: rgba(40,49,58,0.9); border-color: #3a4754; } html[data-theme="dark"] .start-feed-box { background: #2a333d; color: #e1e6eb; } html[data-theme="dark"] .start-feed-box p { color: #b7c2cc; } /* Dark theme item styles moved to css/components/cards.css */ html[data-theme="dark"] .start-feed-box { background: var(--lof-glass-bg); border-color: var(--lof-border); } /* Light mode comprehensive styling */ html[data-theme="light"] { .feed-controls-bar { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.08); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .start-feed-box { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.08); } } /* =================================================================== */ /* PRINT STYLES */ /* =================================================================== */ @media print { .start-feed-box { box-shadow: none; border: 1px solid var(--lof-border); } } /* =================================================================== */ /* ACCESSIBILITY & REDUCED MOTION */ /* =================================================================== */ /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Performance optimizations for older browsers */ @supports not (backdrop-filter: blur(10px)) { .start-feed-box { background: var(--lof-surface); border: 1px solid var(--lof-border); } } /* Container query fallbacks */ @supports not (container-type: inline-size) { @media (max-width: 480px) { .feed-controls-bar { flex-direction: column; gap: var(--lof-space-3); } } } /* =================================================================== */ /* LAYOUT INTEGRATION */ /* =================================================================== */ body.has-lof-footer #live-feed-wrapper, body.has-lof-footer #live-order-feed-container, body.has-lof-footer .lof-main-content { flex: 1; } /* Feed container inherits layout from containers.css */ /* Source: css/features/reports.css */ /* =================================================================== */ /* REPORTS PAGE STYLING */ /* Extracted from live-orders.css - All reports-specific styles */ /* =================================================================== */ /* ===== REPORTS PAGE LAYOUT & STRUCTURE ===== */ /* Disable bounce animations for lof-reports-page */ #live-feed-wrapper, #lof-reports-page, .lof-reports-page, .live-feed-wrapper { animation: none !important; } #live-feed-wrapper *, #lof-reports-page *, .lof-reports-page *, .live-feed-wrapper * { animation-name: none !important; } /* Page swipe transitions */ #live-feed-wrapper, #lof-reports-page { transition: transform var(--lof-transition-slow); will-change: transform; } /* Reports Page Main Container - matches feed page structure */ .lof-reports-page { font-family: var(--font-sans); opacity: 1 !important; } .lof-reports-page.initialized, #lof-reports-page.initialized, #lof-reports-page.lof-reports-page { opacity: 1 !important; } /* Ensure form controls and buttons inherit base sizing like feed */ .lof-reports-page input, .lof-reports-page button, .lof-reports-page select, .lof-reports-page textarea { font: inherit; } /* Reports page content sections - ensure visibility */ .lof-reports-page .lof-kpis, .lof-reports-page .lof-panels-scroll { width: 100%; max-width: 1200px; margin: 0 auto; opacity: 1 !important; display: block !important; visibility: visible !important; } /* Reports header removed */ /* Section heading divider */ .lof-reports-page section h2 { position: relative; padding-bottom: 6px; margin-bottom: 14px; } .lof-reports-page section h2:after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 54px; border-radius: 2px; background: linear-gradient(90deg, var(--lof-primary), var(--lof-primary-hover)); opacity: .55; } /* ===== REPORTS ORDER ROWS ===== */ .lof-order-row { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; padding: 12px 16px 14px; box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .08), 0 6px 18px -6px rgba(0, 0, 0, .06); } .lof-order-row .oid { font-weight: 700; color: var(--lof-text); } .lof-order-row ul.items li .qty { font-weight: 600; color: var(--lof-text); } .lof-order-row ul.items li.building { font-style: italic; color: var(--lof-text-muted); } .lof-order-row .nm { font-weight: 500; } /* ===== REPORTS FOCUS STYLING ===== */ .lof-reports-page a:focus-visible, .lof-reports-page button:focus-visible { outline: 3px solid var(--lof-focus); outline-offset: 3px; } /* ===== MOBILE APP SHELL (REPORTS PAGE) ===== */ @media (max-width: 820px) { #lof-reports-page { padding: 16px; padding-bottom: calc(90px + var(--lof-safe-bottom)); } .lof-reports-page .lof-kpis-scroll { gap: 12px; } .lof-reports-page .lof-panels-scroll>section { margin: 0 0 20px 0; padding: 16px; } } @media (max-width: 480px) { #lof-reports-page { padding: 12px; } .lof-reports-page .lof-kpis-scroll { gap: 8px; } /* Reports header removed */ .lof-subtitle { font-size: 12px; margin: 4px 0 0; color: var(--lof-text-muted); } .lof-kpis-scroll { display: flex; gap: 10px; padding: 4px 4px 10px; flex-wrap: wrap; margin: 0 -4px 6px; scrollbar-width: none; -ms-overflow-style: none; } .lof-kpis-scroll::-webkit-scrollbar { display: none; } .lof-kpis-scroll .lof-kpi { min-width: 140px; flex: 0 0 auto; } .lof-kpis-scroll { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; position: relative; } .lof-kpis-scroll .lof-kpi { scroll-snap-align: start; padding-right: 50px !important; } .lof-kpis-scroll:before, .lof-kpis-scroll:after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; z-index: 5; } } /* Let browser handle scrolling naturally for reports */ /* Reports page sections - simple layout like feed with visibility fixes */ .lof-reports-page .lof-kpis { margin: 20px 0 30px 0; padding: 0; opacity: 1 !important; display: block !important; visibility: visible !important; } .lof-reports-page .lof-kpis-scroll { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px; overflow: visible; opacity: 1 !important; visibility: visible !important; } .lof-reports-page .lof-kpi { opacity: 1 !important; display: block !important; visibility: visible !important; } .lof-reports-page .lof-panels-scroll { display: block !important; overflow: visible; opacity: 1 !important; visibility: visible !important; } .lof-reports-page .lof-panels-scroll>section { margin: 0 0 30px 0; padding: 20px; background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); opacity: 1 !important; display: block !important; visibility: visible !important; } /* Daily trend chart container */ .lof-reports-page #lof-daily-trend { width: 100%; } /* ===== SELLERS SECTION ===== */ .lof-sellers-section { margin: 14px 0; padding: 16px; border-radius: 16px; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .08), 0 6px 20px -6px rgba(0, 0, 0, .06); } .lof-sellers-section h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.2px; } /* ===== SIMPLE LIST STYLING ===== */ .lof-simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } /* Base list item styles (for non-seller items) */ .lof-simple-list li:not(.lof-seller-item) { display: flex !important; justify-content: space-between !important; align-items: center !important; background: var(--lof-surface-alt); padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; width: 100% !important; box-sizing: border-box !important; } .lof-simple-list li:not(.lof-seller-item) span.value { font-weight: 600; color: var(--lof-primary); } .lof-simple-list li:not(.lof-seller-item) .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; color: var(--lof-text); } /* ===== SELLER ITEMS DETAILED STYLING (ORIGINAL FROM live-orders.css) ===== */ /* Two-row layout: Name and amount on same line (top), orders and bar on bottom */ .lof-simple-list li.lof-seller-item { position: relative; display: flex !important; flex-direction: column !important; /* Vertical for two rows */ align-items: stretch !important; justify-content: flex-start !important; padding: 16px 18px 14px !important; /* Back to original padding */ border-radius: 12px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); width: 100%; box-sizing: border-box; min-height: 80px !important; /* Back to original height */ color: var(--lof-text); margin-bottom: 12px; font-size: 14px; font-family: 'Inter', system-ui, -apple-system, sans-serif; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0; overflow: hidden; } /* Create a virtual first row by positioning name and amount on the same line */ .lof-simple-list li.lof-seller-item .lof-seller-name { position: absolute; top: 16px; /* Match the top padding */ left: 18px; /* Match the left padding */ right: 120px; /* Leave space for amount on the right */ z-index: 2; } .lof-simple-list li.lof-seller-item .lof-seller-amount { position: absolute; top: 16px; /* Match the top padding */ right: 18px; /* Match the right padding */ z-index: 2; } /* Bottom row container for orders and bar - positioned below the name/amount row */ .lof-simple-list li.lof-seller-item .lof-seller-row-bar { position: absolute; bottom: 14px; /* Match the bottom padding */ left: 18px; /* Match the left padding */ right: 18px; /* Match the right padding */ display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; /* Original had no gap */ min-height: 20px; padding: 0; box-sizing: border-box; background: none; z-index: 1; } /* Update name styling for absolute positioning */ .lof-simple-list li.lof-seller-item .lof-seller-name { font-weight: 600; font-size: var(--lof-text-base); /* Use original variable */ color: var(--lof-text); white-space: nowrap; letter-spacing: -0.01em; text-align: left; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } /* Shift badge styling - appears next to server name */ .lof-shift-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 6px; margin-left: 6px; background: var(--lof-surface-alt, #f1f5f9); color: var(--lof-text-muted, #64748b); border: 1px solid var(--lof-border, #e2e8f0); border-radius: 4px; white-space: nowrap; letter-spacing: 0.01em; vertical-align: middle; line-height: 1.2; text-transform: capitalize; } /* Hover effect for shift badge */ .lof-simple-list li.lof-seller-item:hover .lof-shift-badge { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); color: var(--lof-primary, #3b82f6); } .lof-simple-list li.lof-seller-item .lof-seller-orders { flex: 0 0 auto; font-size: 14px; /* Back to original size */ color: var(--lof-text); font-weight: 600; padding: 0 8px; /* Original padding */ text-align: center; background: var(--lof-surface-alt); border-radius: 6px; /* Original radius */ border: 1px solid var(--lof-border); min-width: 40px; /* Original min-width */ white-space: nowrap; margin: 0; display: inline-flex; align-items: center; justify-content: center; height: 16px; /* Original height */ line-height: 1; box-sizing: border-box; vertical-align: middle; } .lof-simple-list li.lof-seller-item .lof-seller-bar { flex: 1 1 auto; /* Allow growth to fill available space */ width: 100%; max-width: 100%; min-width: 60px; /* Reduced minimum for better mobile display */ height: var(--lof-seller-bar-height, 20px); /* Use CSS variable for responsive height */ border-radius: calc(var(--lof-seller-bar-height, 20px) / 2); /* Dynamic border radius */ background: var(--lof-surface-alt, #f1f5f9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; margin: 0; margin-left: 8px; /* Add consistent spacing from orders badge */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); align-self: center; box-sizing: border-box; } /* Update amount styling for absolute positioning */ .lof-simple-list li.lof-seller-item .lof-seller-amount { text-align: right; font-weight: 700; font-size: var(--lof-text-lg); /* Use original variable */ color: var(--lof-success); /* Use original variable */ padding: 4px 10px; background: rgba(4, 120, 87, 0.1); border-radius: 6px; border: 1px solid rgba(4, 120, 87, 0.2); white-space: nowrap; line-height: 1.4; } .lof-simple-list li.lof-seller-item .lof-seller-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; /* Start empty, will be filled by .is-filled class */ background: linear-gradient(90deg, var(--lof-primary, #2563eb) 0%, var(--lof-primary-hover, #1d4ed8) 100%); border-radius: calc(var(--lof-seller-bar-height, 20px) / 2.5); /* Dynamic border radius */ transition: width 0.6s cubic-bezier(0.16, 0.8, 0.24, 1); z-index: 1; box-shadow: 0 0 6px rgba(37, 99, 235, 0.25); } /* REMOVED - Using ::before pseudo-element instead of .lof-seller-bar-fill class */ /* Ensure the progress bar fills correctly with proper width calculation */ .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::before { width: var(--w, 0%); /* This will be set by JavaScript */ } /* CSS-only fallback: Auto-fill bars if JavaScript fails */ .lof-simple-list li.lof-seller-item .lof-seller-bar[style*="--w:"]::before { animation: lof-bar-fill 0.8s cubic-bezier(0.16, 0.8, 0.24, 1) 0.2s forwards; } /* Immediate fill for bars with data attributes (emergency fallback) */ .lof-simple-list li.lof-seller-item .lof-seller-bar[data-orders]::before { width: var(--w, 0%); transition: width 0.6s cubic-bezier(0.16, 0.8, 0.24, 1); } @keyframes lof-bar-fill { 0% { width: 0%; } 100% { width: var(--w, 0%); } } /* Add shimmer effect when filled */ .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 70%); background-size: 200% 100%; animation: lof-bar-sheen 2.1s ease-in-out 0.25s forwards; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; } /* Removed duplicate glow effect - already defined in main ::before rule */ /* Improve the orders count display */ .lof-simple-list li.lof-seller-item .lof-seller-orders { display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Rank badge styling */ .lof-simple-list li.lof-seller-item .lof-seller-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: var(--lof-text-on-primary); border-radius: 10px; font-size: 11px; font-weight: 700; margin-right: 6px; padding: 0 8px; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3); letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.2); } /* ===== SELLER ITEM RANKING COLORS ===== */ /* Rank-based color overrides with improved contrast */ .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar-fill { background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%) !important; box-shadow: 0 0 6px rgba(234, 88, 12, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar-fill { background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%) !important; box-shadow: 0 0 6px rgba(107, 114, 128, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-item .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar-fill { background: linear-gradient(90deg, #059669 0%, #047857 100%) !important; box-shadow: 0 0 6px rgba(5, 150, 105, 0.3) !important; } .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .lof-seller-bar-fill { background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%) !important; box-shadow: 0 0 6px rgba(37, 99, 235, 0.3) !important; } /* Alternative rank-based color overrides */ .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="1"] .lof-seller-bar-fill { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important; } .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="2"] .lof-seller-bar-fill { background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%) !important; } .lof-simple-list li.lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar::before, .lof-simple-list li.lof-seller-item[data-rank="3"] .lof-seller-bar-fill { background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important; } /* ===== SELLER ITEM HOVER & INTERACTION STATES ===== */ /* Hover effects with improved colors */ .lof-simple-list li.lof-seller-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-1px); border-color: #cbd5e1; background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); } .lof-simple-list li.lof-seller-item:hover .lof-seller-orders { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } .lof-simple-list li.lof-seller-item:hover .lof-seller-amount { background: rgba(4, 120, 87, 0.15); border-color: rgba(4, 120, 87, 0.3); } /* Focus states for accessibility */ .lof-simple-list li.lof-seller-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-color: #3b82f6; } /* Active/pressed states */ .lof-simple-list li.lof-seller-item:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease-out; } /* Loading state */ .lof-simple-list li.lof-seller-item.loading { position: relative; pointer-events: none; opacity: 0.6; } /* Text shadow enhancements */ .lof-simple-list li.lof-seller-item { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .lof-simple-list li.lof-seller-item .label { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); font-weight: 700; } .lof-simple-list li.lof-seller-item .value .amount { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); font-weight: 800; } .lof-simple-list li.lof-seller-item .value .orders { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .lof-simple-list li.lof-seller-item.loading::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid #f3f4f6; border-top: 2px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* ===== SELLER ITEM LABEL & VALUE STYLING ===== */ .lof-simple-list li.lof-seller-item .label { font-weight: 600; color: #1e293b; flex: 1; text-align: left; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lof-simple-list li.lof-seller-item .value { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .lof-simple-list li.lof-seller-item .value .amount { font-weight: 700; color: #1d4ed8; font-size: 14px; } .lof-simple-list li.lof-seller-item .value .orders { background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; min-width: 24px; text-align: center; } /* Spacing between items */ .lof-simple-list li.lof-seller-item+li.lof-seller-item { margin-top: 8px; } /* ===== MOBILE REPORTS ENHANCEMENTS ===== */ @media (max-width: 740px) { /* Reports header removed */ .lof-kpis-scroll .lof-kpi { min-width: 170px !important; padding: 18px 16px 20px !important; } .lof-sellers-section ul.lof-simple-list li::before { width: 18px; height: 18px; font-size: 9px; left: 8px; } .lof-sellers-section ul.lof-simple-list li .lof-seller-bar { left: 0px; right: 10px; height: 5px; } .lof-reports-nav { width: 100%; } .lof-top-products-list li { font-size: 13px; flex-wrap: wrap; padding: 8px 10px; } .lof-top-products-list li .p-name { flex: 1 1 100%; margin-bottom: 2px; } .lof-top-products-list li .p-qty, .lof-top-products-list li .p-amt { font-size: 12px; } .lof-reports-page { padding: 16px 14px; } body, html { overscroll-behavior-y: none; } } /* Safe area adjustments for mobile bottom nav */ @media (max-width:820px) { .lof-reports-page { padding-bottom: calc(90px + var(--lof-safe-bottom)); } } /* Mobile "app-like" override layer */ @media (max-width:640px) { .lof-reports-page { max-width: 100% !important; padding: 0 0 calc(90px + var(--lof-safe-bottom)) 0 !important; background: var(--lof-bg); } /* Reports header removed */ .lof-kpis-scroll { padding: 8px 10px 10px 10px !important; margin: 0 !important; background: var(--lof-surface); border-top: 1px solid var(--lof-border); border-bottom: 1px solid var(--lof-border); } .lof-kpis-scroll .lof-kpi { min-width: 150px; box-shadow: none; border-radius: 14px; padding: 14px 14px 16px; } .lof-kpis-scroll .lof-kpi .label { font-size: 12px; } .lof-kpis-scroll .lof-kpi strong { font-size: 20px; } .lof-top-products-section { margin: 12px 10px 16px 10px !important; border-radius: 16px !important; padding: 14px 16px 18px !important; box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .08) !important; } .lof-top-products-section h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 12px !important; letter-spacing: 0.2px !important; } .lof-top-products-list li { padding: 8px 10px !important; font-size: 14px !important; } .lof-simple-list li { padding: 10px 12px !important; font-size: 14px !important; min-height: 44px; } .lof-simple-list li .label { font-weight: 500; } } /* ===== REPORTS CONTAINERS & VIEWPORT CONSTRAINTS ===== */ /* Reports containers must never exceed viewport */ #lof-reports-page, .lof-reports-page, .lof-reports-page .lof-kpis, .lof-reports-page .lof-panels-scroll, .lof-reports-page .lof-top-products-section, .lof-reports-page .lof-trend-section, .lof-reports-page .lof-sellers-section, .lof-reports-page .lof-reports-orders { max-width: 100%; width: 100%; box-sizing: border-box; margin: 0 auto !important; justify-content: center !important; } /* Enhanced alignment for sellers section */ .lof-reports-page .lof-sellers-section { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } /* Fix sellers list alignment */ .lof-reports-page .lof-sellers-section ul.lof-simple-list { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; } .lof-reports-page .lof-panels-scroll>section, .lof-reports-page .lof-kpi, .lof-reports-page .lof-order-row { max-width: 100%; box-sizing: border-box; } /* Make media responsive */ .lof-reports-page img, .lof-reports-page video, .lof-reports-page canvas, .lof-reports-page svg { max-width: 100%; height: auto; } /* Prevent long text from causing horizontal scroll */ .lof-reports-page h1, .lof-reports-page h2, .lof-reports-page h3, .lof-reports-page p, .lof-reports-page .label, .lof-reports-page .value, .lof-reports-page .p-name, .lof-reports-page .nm { overflow-wrap: anywhere; word-break: break-word; } .lof-top-products-list { max-width: 100%; } /* Ultra-small accessibility boost */ @media (max-width:360px) { .lof-kpis-scroll .lof-kpi { min-width: 160px !important; } .lof-top-products-list li { font-size: 14px !important; } } /* ===== REPORTS INCOME BAR STYLING ===== */ /* Income bar for reports page - positioning handled in income-bar.css */ /* Income bar styling for reports page is now handled in css/layout/income-bar.css */ /* ===== ALIGNMENT FIXES ===== */ /* Ensure all flex containers have proper alignment */ .lof-reports-page .flex-container, .lof-reports-page .display-flex, .lof-order-row, .order-header { align-items: center !important; justify-content: center !important; } /* Fix form control alignment */ .lof-reports-page input, .lof-reports-page select, .lof-reports-page button { vertical-align: middle !important; text-align: left !important; } /* Ensure proper grid item alignment */ .lof-reports-orders, .lof-panels-scroll { align-items: stretch !important; justify-items: stretch !important; } /* Fix any text alignment issues in data displays */ .lof-reports-page .status-message, .lof-reports-page .empty-state { text-align: center !important; } /* ===== ENHANCED REPORT PAGE CENTERING ===== */ /* Additional centering for header sections */ .lof-reports-page h1, .lof-reports-page h2, .lof-reports-page h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Center all form elements and controls */ .lof-reports-page form, .lof-reports-page .form-controls, .lof-reports-page .filter-controls { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 auto !important; } /* Center tables and data displays */ .lof-reports-page table, .lof-reports-page .data-table { margin: 0 auto !important; text-align: center !important; } /* Center any remaining flex containers */ .lof-reports-page .flex-container, .lof-reports-page .display-flex { justify-content: center !important; align-items: center !important; } /* Ensure responsive centering */ @media (max-width: 768px) { .lof-reports-page { padding: clamp(8px, 2vw, 20px) !important; } .lof-reports-page>* { margin-left: auto !important; margin-right: auto !important; } } /* Mobile responsiveness matching original */ @media (max-width: 480px) { .lof-simple-list li.lof-seller-item { padding: 12px 14px 10px !important; min-height: 70px !important; margin-bottom: 8px !important; } /* Adjust absolute positioning for mobile */ .lof-simple-list li.lof-seller-item .lof-seller-name { top: 12px !important; /* Match mobile top padding */ left: 14px !important; /* Match mobile left padding */ right: 100px !important; /* Less space for amount on mobile */ font-size: 14px !important; } .lof-simple-list li.lof-seller-item .lof-seller-amount { top: 12px !important; /* Match mobile top padding */ right: 14px !important; /* Match mobile right padding */ font-size: 14px !important; padding: 1px 4px !important; } .lof-simple-list li.lof-seller-item .lof-seller-row-bar { bottom: 10px !important; /* Match mobile bottom padding */ left: 14px !important; /* Match mobile left padding */ right: 14px !important; /* Match mobile right padding */ gap: 0 !important; min-height: 20px !important; } .lof-simple-list li.lof-seller-item .lof-seller-orders { font-size: 13px !important; padding: 0 8px !important; /* Adjusted padding for better proportion */ min-width: 40px !important; height: 18px !important; /* Match the updated mobile progress bar height */ line-height: 1 !important; } .lof-simple-list li.lof-seller-item .lof-seller-bar { min-width: 80px !important; max-width: 75% !important; height: 18px !important; /* Increased for better visibility and touch targets */ border-radius: 9px !important; } } /* ===== ONE-LINE SELLER ROW MODE ===== */ .one-line.lof-simple-list { display: flex; flex-direction: column; gap: 8px } .one-line .lof-seller-item { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap } .one-line .lof-seller-item .label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; line-height: 1.3; } /* COMMENTED OUT - These .one-line styles could interfere with our layout */ /* .one-line .lof-seller-item .lof-seller-bar{ position:relative; left:auto; right:auto; top:auto; bottom:auto; height:var(--sb-height,8px); flex:0 0 clamp(120px, 30%, 260px); margin:0 8px; z-index:0; background:var(--sb-track, rgba(71,85,105,.12)); border-radius:var(--sb-radius, 8px); overflow:hidden; } .one-line .lof-seller-item .lof-seller-bar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0%; max-width:100%; background:var(--sb-gradient, linear-gradient(90deg, var(--sb-start, var(--lof-primary)) 0%, var(--sb-mid, var(--lof-primary-hover)) 55%, var(--sb-end, var(--lof-primary-hover)) 100%)); box-shadow:var(--sb-glow, 0 0 8px rgba(29,96,214,0.3)); border-radius:inherit; transition:width .85s cubic-bezier(.16,.8,.24,1); } .one-line .lof-seller-item .lof-seller-bar.is-filled::before{ width:var(--w,0%); } .one-line .lof-seller-item .lof-seller-bar.is-filled::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%); background-size:200% 100%; animation: lof-bar-sheen 2.2s ease-in-out .25s forwards; pointer-events:none; mix-blend-mode:overlay; } */ @keyframes lof-bar-sheen { 0% { background-position: 200% 0; opacity: .9; } 60% { background-position: -30% 0; opacity: .25; } 100% { background-position: -30% 0; opacity: 0; } } /* Color ramp based on value/target using data attributes */ .one-line .lof-seller-item .lof-seller-bar[data-value][data-target]::before { --p: calc((var(--w, 0) * 1)); } .one-line .lof-seller-item .value { flex: 0 0 auto; margin-left: auto; white-space: nowrap } .one-line .lof-seller-item .value .orders { white-space: nowrap } /* ===== TOP PRODUCTS SECTION - MINIMALIST PROFESSIONAL ===== */ /* Clean section styling */ .lof-main-container .lof-top-products-section, .lof-top-products-section.lof-top-products-section, body .lof-top-products-section { background: var(--lof-surface) !important; border: 1px solid var(--lof-border) !important; border-radius: 8px !important; padding: 20px !important; margin: 16px 0 24px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } /* Simple header styling */ .lof-main-container .lof-top-products-section h2, .lof-top-products-section.lof-top-products-section h2, body .lof-top-products-section h2 { font-size: 18px !important; font-weight: 600 !important; color: var(--lof-text) !important; margin: 0 0 16px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--lof-border) !important; } /* Clean list styling */ .lof-main-container .lof-top-products-list, .lof-top-products-list.lof-top-products-list, body .lof-top-products-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0px !important; counter-reset: product-counter !important; } /* Simple list items */ .lof-main-container .lof-top-products-list li, .lof-top-products-list.lof-top-products-list li, body .lof-top-products-list li, .lof-top-products-list li.lof-top-products-list, html .lof-top-products-list li { background: var(--lof-surface-alt) !important; border: 1px solid var(--lof-border) !important; border-radius: 6px !important; padding: 0px 6px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; position: relative !important; transition: border-color 0.2s ease !important; counter-increment: product-counter !important; } /* Simple number indicators */ /* .lof-main-container .lof-top-products-list li::before, .lof-top-products-list.lof-top-products-list li::before, body .lof-top-products-list li::before, .lof-top-products-list li.lof-top-products-list::before, html .lof-top-products-list li::before { content: counter(product-counter) !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 32px !important; background: var(--lof-text-muted) !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 12px !important; border-radius: 6px 0 0 6px !important; }*/ /* Subtle hover effect */ .lof-main-container .lof-top-products-list li:hover, .lof-top-products-list.lof-top-products-list li:hover, body .lof-top-products-list li:hover, .lof-top-products-list li.lof-top-products-list:hover, html .lof-top-products-list li:hover { border-color: var(--lof-focus) !important; } /* Clean product name styling */ .lof-main-container .lof-top-products-list li .p-name, .lof-top-products-list.lof-top-products-list li .p-name, body .lof-top-products-list li .p-name, .lof-top-products-list li.lof-top-products-list .p-name, html .lof-top-products-list li .p-name { flex: 1 !important; padding-right: 12px !important; font-weight: 500 !important; color: var(--lof-text) !important; } /* Simple quantity display */ .lof-main-container .lof-top-products-list li .p-qty, .lof-top-products-list.lof-top-products-list li .p-qty, body .lof-top-products-list li .p-qty, .lof-top-products-list li.lof-top-products-list .p-qty, html .lof-top-products-list li .p-qty { background: var(--lof-surface) !important; color: var(--lof-text) !important; font-weight: 600 !important; padding: 4px 8px !important; border-radius: 4px !important; font-size: 12px !important; border: 1px solid var(--lof-border) !important; } /* Clean empty state */ .lof-main-container .lof-top-products-list li.empty, .lof-top-products-list.lof-top-products-list li.empty, body .lof-top-products-list li.empty, .lof-top-products-list li.empty.lof-top-products-list, html .lof-top-products-list li.empty { text-align: center !important; font-style: italic !important; color: var(--lof-text-muted) !important; padding: 16px !important; counter-increment: none !important; } .lof-main-container .lof-top-products-list li.empty::before, .lof-top-products-list.lof-top-products-list li.empty::before, body .lof-top-products-list li.empty::before, .lof-top-products-list li.empty.lof-top-products-list::before, html .lof-top-products-list li.empty::before { display: none !important; } /* Show all button in top products section */ .lof-top-products-section .lof-show-all-btn { margin: 12px 0 0 0 !important; width: 100% !important; display: block !important; } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 768px) { .lof-top-products-section, .lof-top-products-list li { padding: 12px !important; font-size: 13px !important; } .lof-top-products-section .lof-show-all-btn { margin: 8px 0 0 0 !important; font-size: 14px !important; } .lof-simple-list li.lof-seller-item { padding: 8px !important; font-size: 13px !important; } } /* ===== COLUMN LAYOUT SELLER BAR BASE ===== */ /* COMMENTED OUT - Using the improved styles defined earlier in the file */ /* .lof-simple-list li.lof-seller-item .lof-seller-bar{ position:relative; display:block; width:100%; height:var(--sb-height,12px); background:linear-gradient(90deg,#232a3b 0%,#2a3140 100%); border-radius:8px; overflow:hidden; margin-top:2px; box-shadow:0 2px 8px rgba(30,41,59,0.10); } .lof-simple-list li.lof-seller-item .lof-seller-bar::before{ content:""; position:absolute; inset:0; width:0%; background:var(--sb-gradient, linear-gradient(90deg,#2ecc71 0%,#28b765 55%,#0f8f4d 100%)); border-radius:inherit; transition:width .85s cubic-bezier(.16,.8,.24,1); box-shadow:0 0 12px 0 rgba(46,204,113,0.18); } .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::before{ width:var(--w,0%); } .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 45%,rgba(255,255,255,0) 70%); background-size:200% 100%; animation:lof-bar-sheen 2.1s ease-in-out .25s forwards; pointer-events:none; mix-blend-mode:overlay; } */ @keyframes lof-bar-sheen { 0% { background-position: 200% 0; opacity: .9; } 60% { background-position: -30% 0; opacity: .3; } 100% { background-position: -30% 0; opacity: 0; } } /* Clean up duplicate styles */ .lof-simple-list li.lof-seller-item:focus-within { box-shadow: 0 0 0 3px var(--lof-focus); outline: 0; } .lof-simple-list li.lof-seller-item .lof-seller-bar { transition: width 0.5s cubic-bezier(0.16, 0.8, 0.24, 1), opacity 0.3s ease; } /* ===== TOUCH DEVICE OPTIMIZATIONS ===== */ /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .lof-simple-list li.lof-seller-item:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); } .lof-simple-list li.lof-seller-item:active { transform: scale(0.98); transition: transform 0.1s ease-out; } } /* ===== REDUCED MOTION SUPPORT ===== */ /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .lof-simple-list li.lof-seller-item, .lof-simple-list li.lof-seller-item .lof-seller-bar, .lof-simple-list li.lof-seller-item .lof-seller-bar::before { animation: none !important; transition: none !important; } .lof-simple-list li.lof-seller-item:hover { transform: none !important; } .lof-simple-list li.lof-seller-item.loading::after { animation: none !important; opacity: 0.3; } } /* ===== PWA FULLSCREEN SUPPORT ===== */ @media (display-mode: fullscreen) { /* Force fullscreen for all pages within PWA scope */ .lof-reports-page, #lof-reports-page { flex: 1; } } /* ===== STANDALONE REPORT PAGES STYLING ===== */ /* Standalone page layout */ .lof-standalone-page { min-height: 100vh; background: var(--lof-bg); margin: 0; padding: 0; font-family: var(--font-sans); } /* Top products full page container */ .lof-top-products-full-page { padding: 16px; max-width: 1200px; margin: 0 auto; } .lof-top-products-full-container { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Loading state styling */ .lof-loading-state { text-align: center; padding: 40px 20px; color: var(--lof-text-muted); } .lof-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--lof-border); border-top: 3px solid var(--lof-primary); border-radius: 50%; animation: lof-spin 1s linear infinite; margin: 0 auto 16px; } @keyframes lof-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Error state styling */ .lof-error-state { text-align: center; padding: 40px 20px; color: var(--lof-text); } .lof-error-state h3 { color: var(--lof-error); margin: 0 0 12px; font-size: 20px; } .lof-error-state p { margin: 0 0 20px; color: var(--lof-text-muted); } .lof-retry-btn { background: var(--lof-primary); color: var(--lof-text-on-primary); border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all var(--lof-transition-base); } .lof-retry-btn:hover { background: var(--lof-primary-hover); transform: translateY(-1px); box-shadow: var(--lof-shadow-md); } /* Reports header removed */ /* Standalone page navigation */ .lof-standalone-page .lof-reports-nav { margin-top: 16px; } .lof-standalone-page .lof-btn-return { background: var(--lof-glass-bg); border: 1px solid var(--lof-glass-border); color: var(--lof-text-on-primary); padding: 10px 18px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block; transition: all var(--lof-transition-base); } .lof-standalone-page .lof-btn-return:hover { background: var(--lof-surface-hover); transform: translateY(-1px); box-shadow: var(--lof-shadow-md); } /* Mobile adjustments for standalone pages */ @media (max-width: 768px) { .lof-top-products-full-page { padding: 12px; } .lof-top-products-full-container { padding: 16px; border-radius: 8px; } /* Reports header removed */ .lof-standalone-page .lof-btn-return { width: 100%; text-align: center; padding: 12px 16px; } } /* Safe area adjustments for standalone pages */ @media (max-width: 820px) { .lof-standalone-page { padding-bottom: calc(20px + var(--lof-safe-bottom)); } } /* Empty state styling for standalone pages */ .lof-empty-state { text-align: center; padding: 60px 20px; color: var(--lof-text); } .lof-empty-state h3 { color: var(--lof-text-muted); margin: 0 0 12px; font-size: 18px; font-weight: 600; } .lof-empty-state p { margin: 0; color: var(--lof-text-muted); font-size: 14px; } /* Top products section in standalone pages */ .lof-standalone-page .lof-top-products-section { background: var(--lof-surface); border: 1px solid var(--lof-border); border-radius: 8px; padding: 20px; margin: 0; } .lof-standalone-page .lof-top-products-section h2 { margin: 0 0 20px; font-size: 20px; font-weight: 600; color: var(--lof-text); border-bottom: 1px solid var(--lof-border); padding-bottom: 8px; } .lof-standalone-page .lof-top-products-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lof-standalone-page .lof-top-products-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--lof-surface-alt); border: 1px solid var(--lof-border); border-radius: 6px; font-size: 14px; transition: border-color 0.2s ease; } .lof-standalone-page .lof-top-products-list li:hover { border-color: var(--lof-focus); } .lof-standalone-page .lof-top-products-list li .p-name { flex: 1; font-weight: 500; color: var(--lof-text); padding-right: 12px; } .lof-standalone-page .lof-top-products-list li .p-qty { background: var(--lof-surface); color: var(--lof-text); font-weight: 600; padding: 4px 8px; border-radius: 4px; font-size: 12px; border: 1px solid var(--lof-border); margin-right: 12px; } .lof-standalone-page .lof-top-products-list li .p-amount { font-weight: 700; color: var(--lof-success); font-size: 14px; } /* Responsive adjustments for standalone top products */ @media (max-width: 768px) { .lof-standalone-page .lof-top-products-list li { padding: 10px 12px; font-size: 13px; } .lof-standalone-page .lof-top-products-list li .p-qty { margin-right: 8px; padding: 2px 6px; font-size: 11px; } .lof-standalone-page .lof-top-products-list li .p-amount { font-size: 13px; } } /* ===== FINAL ORDER ROW RESPONSIVE ADJUSTMENTS ===== */ @media (max-width: 599px) { .lof-order-row { padding: 10px 14px; } } /* Source: css/themes/theme-system.css */ /* =================================================================== */ /* THEME SYSTEM - COMPREHENSIVE THEME CONTROLS & ANIMATIONS */ /* Extracted from live-orders.css for better organization */ /* =================================================================== */ /* =================================================================== */ /* 1. THEME COLOR DEFINITIONS */ /* =================================================================== */ /* Default Dark Theme Colors */ :root { /* THEME COLORS (Dark Theme by default) */ /* Surface Colors - Dark */ --lof-bg: #0d1117; /* Near-black */ --lof-surface: var(--lof-neutral-900); --lof-surface-alt: var(--lof-neutral-800); --lof-surface-elevated: var(--lof-neutral-800); --lof-surface-hover: var(--lof-neutral-50); --lof-surface-active: var(--lof-neutral-100); /* Border Colors - Dark */ --lof-border: var(--lof-neutral-700); --lof-border-light: var(--lof-neutral-800); --lof-border-strong: var(--lof-neutral-600); /* Text Colors - Dark */ --lof-text: var(--lof-neutral-100); --lof-text-muted: var(--lof-neutral-400); --lof-text-subtle: var(--lof-neutral-500); --lof-text-on-primary: var(--lof-neutral-0); /* Glass Morphism - Dark */ --lof-glass-bg: rgba(15, 23, 42, 0.75); --lof-glass-border: rgba(255, 255, 255, 0.1); --lof-glass-blur: blur(12px) saturate(180%); /* Misc */ --lof-shimmer-color: var(--lof-neutral-200); /* Enhanced shadows for dark mode */ --lof-shadow-light: rgba(0,0,0,0.3); --lof-shadow-medium: rgba(0,0,0,0.4); --lof-shadow-strong: rgba(0,0,0,0.6); /* Primary Color Variants */ --lof-primary-shadow: rgba(37,99,235,0.3); /* Dark Semantic Colors */ --lof-danger: #ef4444; --lof-danger-600: #dc2626; --lof-danger-shadow: rgba(239,68,68,0.4); --lof-success: #22c55e; --lof-success-bg: rgba(34,197,94,0.15); --lof-danger-bg: rgba(239,68,68,0.15); --lof-primary-200: #bfdbfe; --lof-primary-300: #93c5fd; } /* Light Mode Color Overrides */ html[data-theme="light"] { /* Surface Colors - Light */ --lof-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); --lof-surface: rgba(255,255,255,0.98); --lof-surface-alt: var(--lof-neutral-50); --lof-surface-elevated: var(--lof-neutral-0); /* Border Colors - Light */ --lof-border: var(--lof-neutral-200); --lof-border-light: var(--lof-neutral-100); --lof-border-strong: var(--lof-neutral-300); /* Text Colors - Light (Enhanced Contrast) */ --lof-text: var(--lof-neutral-800); --lof-text-muted: var(--lof-neutral-600); --lof-text-subtle: var(--lof-neutral-500); /* Glass Morphism - Light */ --lof-glass-bg: rgba(255, 255, 255, 0.85); --lof-glass-border: rgba(148, 163, 184, 0.2); /* Light theme semantic colors */ --lof-success: #059669; --lof-success-bg: rgba(5, 150, 105, 0.1); --lof-danger: #dc2626; --lof-danger-bg: rgba(220, 38, 38, 0.1); /* Light shadows - Enhanced Intensity */ --lof-shadow-light: rgba(0,0,0,0.10); --lof-shadow-medium: rgba(0,0,0,0.15); --lof-shadow-strong: rgba(0,0,0,0.20); --lof-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --lof-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --lof-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -3px rgba(0, 0, 0, 0.1); --lof-shadow-xl: 0 20px 30px -6px rgba(0, 0, 0, 0.18), 0 8px 12px -6px rgba(0, 0, 0, 0.12); --lof-shadow-2xl: 0 30px 60px -15px rgba(0, 0, 0, 0.3); } /* =================================================================== */ /* 2. THEME TRANSITION ANIMATIONS & FOUC PREVENTION */ /* =================================================================== */ /* FOUC Prevention - Theme Flash Fix */ html { /* Prevent flash of light theme - default to dark immediately */ background-color: #0d1117 !important; color: #f1f5f9 !important; transition: none !important; } /* Ensure content is always visible - remove problematic theme loading hide */ html body { visibility: visible !important; opacity: 1 !important; } /* Prevent theme transition flash on load */ html { transition: none !important; } /* Enable smooth transitions only after theme is loaded */ html[data-theme-loaded] { transition: background-color 0.2s ease, color 0.2s ease; } html[data-theme-loaded] body { transition: background-color 0.2s ease, color 0.2s ease; } /* =================================================================== */ /* 3. THEME-SPECIFIC COMPONENT STYLING */ /* =================================================================== */ /* Enhanced component contrast in dark mode */ html[data-theme="dark"] body, html[data-theme="dark"] html { background: var(--lof-bg); color: var(--lof-text); } /* Default dark theme styles (applied when no data-theme attribute is set) */ body, html { background: var(--lof-bg); color: var(--lof-text); } /* Default dark theme component styles */ .load-more-btn { background: var(--lof-glass-bg); border-color: var(--lof-primary-600); color: var(--lof-primary-100); } /* Item info styles moved to css/components/cards.css */ .lof-order-row { background: var(--lof-surface); border-color: var(--lof-border); } /* Default dark theme header styling - moved to cards.css */ html[data-theme="dark"] .load-more-btn { background: var(--lof-glass-bg); border-color: var(--lof-primary-600); color: var(--lof-primary-100); } /* Light theme income bar override */ html[data-theme="light"] #income-bar { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important; color: #ffffff; } /* Dark theme component styling - item-info styles moved to css/components/cards.css */ html[data-theme="dark"] .lof-order-row { background: var(--lof-surface); border-color: var(--lof-border); } /* Dark theme order-header styles moved to cards.css for better organization */ /* =================================================================== */ /* 4. THEME TOGGLE CONTROLS STYLING */ /* =================================================================== */ /* Ensure the theme toggle is properly spaced in the footer */ #lof-footer-controls { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-top: 20px; /* Space from content above */ position: relative; /* Natural document flow */ width: 100%; /* Full width */ box-sizing: border-box; /* Include padding in width calculation */ } /* Make sure the theme toggle is visible on all backgrounds */ #lof-footer-controls .lof-theme-toggle { flex-shrink: 0; } /* Mobile theme toggle adjustments */ @media (max-width: 640px) { .lof-theme-toggle { width: 36px; height: 36px; font-size: 16px; } } /* =================================================================== */ /* 5. HIGH CONTRAST MODE SUPPORT */ /* =================================================================== */ /* High contrast mode support */ @media (prefers-contrast: high) { :root { --lof-border: #000000; --lof-text: #000000; --lof-text-muted: #333333; --lof-primary-600: #0000ff; --lof-success: #008000; --lof-error: #ff0000; --lof-warning: #ff8c00; } .load-more-btn, .burger-btn { border: 2px solid currentColor; } } /* High contrast mode adjustments */ [data-high-contrast] { --lof-border: #1e293b; --lof-text: #0f172a; --lof-text-muted: #1e293b; } [data-high-contrast] body, [data-high-contrast] html { background: #ffffff; } [data-high-contrast] .lof-kpi { box-shadow: none; border-color: #1e293b; background: #fff; } [data-high-contrast] .lof-kpi:after { opacity: 1; } [data-high-contrast] .lof-simple-list li { border: 1px solid #1e293b; } [data-high-contrast] a:focus-visible, [data-high-contrast] button:focus-visible { outline: 4px solid #000; } /* =================================================================== */ /* 6. PATTERN TOGGLE STYLING */ /* =================================================================== */ /* Chart pattern assist styling */ [data-patterns] .lof-simple-list li.lof-seller-item .lof-seller-bar { position: relative; } [data-patterns] .lof-simple-list li.lof-seller-item .lof-seller-bar::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); mix-blend-mode: overlay; pointer-events: none; border-radius: inherit; } /* High contrast chart patterns */ [data-patterns][data-high-contrast] .lof-simple-list li.lof-seller-item .lof-seller-bar::after { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 8px, transparent 8px 16px); } /* =================================================================== */ /* 7. INSTALL PAGE THEME ENHANCEMENTS */ /* =================================================================== */ /* Dark mode enhancements for install page */ [data-theme="dark"] .lof-install-page { --lof-success: #10b981; } [data-theme="dark"] .lof-app-icon img { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .lof-feature-item:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .lof-btn-primary:hover { box-shadow: 0 8px 24px rgba(46, 204, 113, 0.2); } /* =================================================================== */ /* 8. MANUAL THEME OVERRIDES & PERSISTENCE INDICATORS */ /* =================================================================== */ /* Manual dark theme explicit override for persistence */ [data-theme="dark"] { --lof-bg: #0f172a; --lof-surface: #1e293b; --lof-surface-alt: #24324a; --lof-border: #334155; --lof-text: #f1f5f9; --lof-text-muted: #94a3b8; } [data-theme="dark"] body, [data-theme="dark"] html { background: var(--lof-bg); color: var(--lof-text); } [data-theme="dark"] .lof-mini-badge { background: linear-gradient(135deg, #1e293b, #24324a); border-color: #334155; color: var(--lof-text); } /* =================================================================== */ /* 9. LEGACY THEME SYSTEM COMPATIBILITY */ /* =================================================================== */ /* Enhanced dark mode colors for seller items (legacy support) */ html[data-theme="dark"] { .lof-simple-list li.lof-seller-item { background: var(--lof-surface-alt, #1e293b) !important; border-color: var(--lof-border, #374151) !important; color: var(--lof-text, #f1f5f9) !important; } } /* Remove prefers-color-scheme usage comments for reference */ /* Removed prefers-color-scheme media query - using data-theme instead */ /* More button and theme toggle styles moved to css/components/buttons.css */ /* Dark mode theme toggle styles moved to css/components/buttons.css */ /* =================================================================== */ /* 10. ADDITIONAL THEME-SPECIFIC COMPONENT STYLES */ /* =================================================================== */ /* Light theme seller orders visibility */ html[data-theme="light"] .lof-simple-list li.lof-seller-item .lof-seller-orders { color: var(--lof-text); background: rgba(248, 250, 252, 0.8); border-color: var(--lof-border); } html[data-theme="light"] .lof-simple-list li.lof-seller-item:hover .lof-seller-orders { color: var(--lof-text); background: rgba(255, 255, 255, 0.9); border-color: var(--lof-primary); } /* Light theme button enhancements - main styles moved to buttons.css */ /* =================================================================== */ /* 11. THEME SYSTEM JAVASCRIPT INTEGRATION HOOKS */ /* =================================================================== */ /* Theme loading state indicators */ html:not([data-theme-loaded]) * { /* Prevent animations during theme loading */ animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* Theme persistence visual feedback */ html[data-theme-persisted] { /* Optional: Add subtle indicator when theme preference is saved */ /* This can be used by JavaScript to show temporary confirmation */ } /* Theme system ready indicator */ html[data-theme-system-ready] { /* Indicates full theme system initialization complete */ /* Used for coordinating with other theme-dependent components */ } /* Source: css/themes/dark-theme.css */ /* =================================================================== */ /* DARK THEME SPECIFIC OVERRIDES & ENHANCEMENTS */ /* Extracted from live-orders.css for better organization */ /* =================================================================== */ /* =================================================================== */ /* 1. DARK THEME GLASS MORPHISM EFFECTS */ /* =================================================================== */ /* Dark theme glass morphism variables */ :root { --lof-glass-dark-bg: rgba(255, 255, 255, 0.1); --lof-glass-dark-border: rgba(255, 255, 255, 0.2); } /* =================================================================== */ /* 2. INSTALL PAGE DARK MODE ADJUSTMENTS */ /* =================================================================== */ /* Dark mode adjustments for install page */ html[data-theme="dark"] { .lof-install-page { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); color: #f1f5f9; } .lof-install-page::before { background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 50%); } .lof-install-title { background: linear-gradient(135deg, #f1f5f9 0%, #3b82f6 50%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lof-install-subtitle { color: #94a3b8; } .lof-app-icon img { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .lof-feature-item { background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%); border-color: rgba(71, 85, 105, 0.4); backdrop-filter: blur(12px) saturate(180%); } .lof-feature-item:hover { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%); border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .lof-install-manual { background: rgba(30, 41, 59, 0.8); border-color: rgba(59, 130, 246, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .lof-step { background: rgba(15, 23, 42, 0.6); border-color: rgba(71, 85, 105, 0.4); } .lof-btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2); } .lof-btn-primary:hover { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4), 0 6px 16px rgba(59, 130, 246, 0.3); } } /* =================================================================== */ /* 3. TOP PRODUCTS DARK MODE ENHANCEMENTS */ /* =================================================================== */ /* Dark mode enhancements - First variant */ html[data-theme="dark"] { .lof-top-products-list li { background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(35, 35, 35, 0.85) 100%); border-color: var(--lof-border-dark, #555); } .lof-top-products-list li:hover { background: linear-gradient(135deg, rgba(55, 55, 55, 0.98) 0%, rgba(45, 45, 45, 0.9) 100%); } } /* Dark mode enhancements - Second variant */ html[data-theme="dark"] { .lof-top-products-list li { background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(35, 35, 35, 0.85) 100%); border-color: var(--lof-border-dark, #555); } .lof-top-products-list li:hover { background: linear-gradient(135deg, rgba(55, 55, 55, 0.98) 0%, rgba(45, 45, 45, 0.9) 100%); } } /* Dark mode enhancements - Third variant */ html[data-theme="dark"] { .lof-top-products-list li { background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(35, 35, 35, 0.92) 100%); border-color: var(--lof-border-dark, #555); } .lof-top-products-list li:hover { background: linear-gradient(135deg, rgba(55, 55, 55, 0.99) 0%, rgba(45, 45, 45, 0.95) 100%); border-color: var(--lof-primary); } } /* =================================================================== */ /* 4. TOP PRODUCTS SECTION DARK MODE STYLING */ /* =================================================================== */ /* Dark mode enhancements for top products section */ html[data-theme="dark"] { .lof-top-products-section { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%); border-color: var(--lof-border-dark, #475569); box-shadow: 0 4px 16px -4px rgba(0,0,0,0.3), 0 8px 32px -8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); } .lof-top-products-section:hover { box-shadow: 0 8px 24px -4px rgba(0,0,0,0.4), 0 16px 48px -8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15); border-color: var(--lof-primary); } .lof-top-products-section h2 { color: #f1f5f9; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .lof-top-products-section .section-subtitle { color: #94a3b8; } } /* =================================================================== */ /* 5. PRODUCT LAYOUT DARK MODE ADJUSTMENTS */ /* =================================================================== */ /* Dark mode adjustments for the new layout */ html[data-theme="dark"] { .lof-top-products-list li .product-number { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4); } .lof-top-products-list li:hover .product-number { background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.5); } .lof-top-products-list li .order-count { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4); } .lof-top-products-list li:hover .order-count { background: linear-gradient(135deg, #047857 0%, #065f46 100%); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.5); } } /* =================================================================== */ /* 6. INSTALL APP BUTTON DARK THEME SUPPORT */ /* =================================================================== */ /* Dark theme support for install app button */ html[data-theme="dark"] { .install-app-btn { background: var(--lof-primary, #3b82f6); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .install-app-btn:hover { background: var(--lof-primary-dark, #2563eb); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } } /* =================================================================== */ /* 7. DARK THEME SHADOW ADJUSTMENTS */ /* =================================================================== */ /* Enhanced dark mode shadows for better depth perception */ html[data-theme="dark"] { /* Enhanced shadows for cards and components */ .lof-order-card, .lof-kpi-card, .lof-product-card { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Hover shadows for interactive elements */ .lof-order-card:hover, .lof-kpi-card:hover, .lof-product-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* Text shadows for better readability */ .lof-heading, .lof-title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .lof-subtitle, .lof-description { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } } /* =================================================================== */ /* 8. DARK THEME GLASS MORPHISM COMPONENTS */ /* =================================================================== */ /* Dark theme glass morphism effects */ html[data-theme="dark"] { /* Glass navigation elements */ .lof-nav-glass, .lof-header-glass { background: var(--lof-glass-dark-bg); border-color: var(--lof-glass-dark-border); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Glass modal and overlay effects */ .lof-modal-glass, .lof-overlay-glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.1); } /* Glass button effects */ .lof-btn-glass { background: var(--lof-glass-dark-bg); border-color: var(--lof-glass-dark-border); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .lof-btn-glass:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); } } /* =================================================================== */ /* 9. DARK THEME SPECIFIC COLOR OVERRIDES */ /* =================================================================== */ /* Dark theme specific color adjustments */ html[data-theme="dark"] { /* Enhanced contrast for text elements */ .lof-text-primary { color: #f1f5f9; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .lof-text-secondary { color: #94a3b8; } .lof-text-muted { color: #64748b; } /* Dark theme specific backgrounds */ .lof-bg-primary { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } .lof-bg-secondary { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); } .lof-bg-accent { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } /* Dark theme borders */ .lof-border-primary { border-color: rgba(255, 255, 255, 0.1); } .lof-border-secondary { border-color: rgba(255, 255, 255, 0.05); } } /* =================================================================== */ /* 10. DARK THEME PERFORMANCE OPTIMIZATIONS */ /* =================================================================== */ /* GPU acceleration for dark theme animations */ html[data-theme="dark"] { .lof-dark-animated { will-change: transform, opacity, background; transform: translateZ(0); } /* Optimized transitions for dark theme */ .lof-dark-transition { transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } } /* =================================================================== */ /* 11. DARK THEME ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* Enhanced focus states for dark theme */ html[data-theme="dark"] { /* High contrast focus indicators */ .lof-focusable:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3); } /* Enhanced hover states for better visibility */ .lof-interactive:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } /* Active states for better feedback */ .lof-interactive:active { background: rgba(255, 255, 255, 0.1); transform: translateY(1px); } } /* =================================================================== */ /* 12. BOTTOM NOTIFICATION DARK THEME SUPPORT */ /* =================================================================== */ /* Dark theme bottom notification styling */ html[data-theme="dark"] #lof-bottom-notify.lof-bottom-notify { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%); border-color: rgba(71, 85, 105, 0.4); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } html[data-theme="dark"] #lof-bottom-notify.lof-bottom-notify:hover { background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%); border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-3px); } /* Dark theme toggle switch adjustments */ html[data-theme="dark"] #lof-bottom-notify .slider { background: var(--lof-neutral-600); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] #lof-bottom-notify .slider:before { background: var(--lof-neutral-100); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] #lof-bottom-notify input:checked + .slider { background: var(--lof-primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(59, 130, 246, 0.3); } html[data-theme="dark"] #lof-bottom-notify input:checked + .slider:before { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] #lof-bottom-notify .toggle-switch:hover .slider { background: var(--lof-neutral-500); } html[data-theme="dark"] #lof-bottom-notify .toggle-switch:hover input:checked + .slider { background: var(--lof-primary-600); } html[data-theme="dark"] #lof-bottom-notify .toggle-switch:focus-within .slider { outline-color: rgba(96, 165, 250, 0.8); box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.2); } /* Source: css/themes/light-theme.css */ /* =================================================================== */ /* LIGHT THEME SPECIFIC OVERRIDES & ENHANCEMENTS */ /* Extracted from live-orders.css for better organization */ /* =================================================================== */ /* =================================================================== */ /* 1. LIGHT THEME COLOR OVERRIDES (@media prefers-color-scheme) */ /* =================================================================== */ /* Light mode comprehensive styling - Device detection disabled */ html[data-theme="light"] { :root { --lof-bg: #f8fafc; --lof-surface: rgba(255,255,255,0.9); --lof-surface-alt: rgba(248,250,252,0.95); --lof-border: rgba(0,0,0,0.08); --lof-text: #1e293b; --lof-text-muted: #64748b; --lof-glass-bg: rgba(255,255,255,0.85); --lof-glass-border: rgba(0,0,0,0.1); } /* Enhanced KPI card styling for light mode */ .lof-kpi { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .lof-kpi:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); } /* Burger button styling for light mode */ #lof-burger-btn.lof-burger { background: var(--lof-surface-alt); border-color: var(--lof-border); color: var(--lof-text); } #lof-burger-btn.lof-burger:hover { background: rgba(0,0,0,0.12); transform: translateY(-1px); } /* Mini badge styling for light mode */ .lof-mini-badge { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } } /* =================================================================== */ /* 2. LIGHT THEME GRADIENT BACKGROUNDS & EFFECTS */ /* =================================================================== */ /* Light theme shimmer effects */ .lof-shimmer::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); } /* Light theme product card backgrounds */ .lof-top-products-list li { background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%); } .lof-top-products-list li:hover { background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 100%); } /* Enhanced product item backgrounds */ .lof-product-item { background: linear-gradient(135deg, var(--lof-surface-elevated) 0%, rgba(255,255,255,0.8) 100%) !important; } .lof-product-item:hover { background: linear-gradient(135deg, var(--lof-surface) 0%, rgba(255,255,255,0.95) 100%) !important; } /* Light theme product list backgrounds - Enhanced */ .lof-top-products-list li.enhanced { background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%); } .lof-top-products-list li.enhanced:hover { background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.97) 100%); } /* Premium product list backgrounds */ .lof-top-products-list li.premium { background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%); } .lof-top-products-list li.premium:hover { background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.97) 100%); } /* =================================================================== */ /* 3. LIGHT THEME SHADOW ADJUSTMENTS */ /* =================================================================== */ /* Enhanced light theme shadows for cards */ .lof-top-products-list li { box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02); } .lof-top-products-list li:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); } /* Premium shadow effects */ .lof-top-products-list li.premium { box-shadow: 0 3px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8); } .lof-top-products-list li.premium:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9); } /* Enhanced shadow effects for products */ .lof-top-products-list li.enhanced:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); } /* Product item enhanced shadows */ .lof-product-item { box-shadow: 0 2px 8px -2px rgba(0,0,0,0.08), 0 1px 4px -1px rgba(0,0,0,0.04) !important; } .lof-product-item:hover { box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12), 0 4px 12px -2px rgba(0,0,0,0.08) !important; } /* =================================================================== */ /* 4. LIGHT THEME SHIMMER & ANIMATION EFFECTS */ /* =================================================================== */ /* Light theme shimmer animations */ .lof-top-products-list li::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); } .lof-product-item::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; } /* Enhanced shimmer for premium items */ .lof-top-products-list li.premium::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); } /* Products toggle shimmer */ .lof-products-toggle.expanded::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); } /* Bar sheen animation for light theme */ .lof-simple-list li.lof-seller-item .lof-seller-bar.is-filled::after { background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 70%); } /* Light theme seller bar background */ .lof-simple-list li.lof-seller-item .lof-seller-bar { background: var(--lof-surface-alt, #f8fafc); border: 1px solid var(--lof-border-light, rgba(0,0,0,0.08)); } /* =================================================================== */ /* 5. LIGHT THEME CONTRAST ENHANCEMENTS */ /* =================================================================== */ /* Enhanced border contrast for light theme */ .lof-product-item::before { background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent) !important; display: none !important; content: none !important; } /* Light theme inset highlights */ .lof-top-products-list li.premium { inset: 0 1px 0 rgba(255,255,255,0.8); } .lof-top-products-list li.premium:hover { inset: 0 1px 0 rgba(255,255,255,0.9); } /* Enhanced contrast for text on light backgrounds */ .lof-top-products-list li.enhanced { color: var(--lof-text); } .lof-top-products-list li.enhanced .p-name { color: var(--lof-text); font-weight: 600; } .lof-top-products-list li.enhanced .p-amount { color: var(--lof-primary); font-weight: 700; } /* =================================================================== */ /* 6. LIGHT THEME EMPTY STATE STYLING */ /* =================================================================== */ /* Light theme empty states */ .lof-top-products-list li.empty { background: linear-gradient(135deg, rgba(248,250,252,0.8) 0%, rgba(241,245,249,0.6) 100%); border: 2px dashed var(--lof-border); color: var(--lof-text-muted); } /* Alternative empty state styling */ .lof-top-products-list li.empty.alt { background: linear-gradient(135deg, rgba(248,250,252,0.8) 0%, rgba(241,245,249,0.6) 100%); border: 2px dashed var(--lof-border); } /* =================================================================== */ /* 7. LIGHT THEME PATTERN OVERLAYS */ /* =================================================================== */ /* Light theme pattern assists */ [data-patterns] .lof-simple-list li.lof-seller-item .lof-seller-bar::after { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); } /* =================================================================== */ /* 8. LIGHT THEME BUTTON ENHANCEMENTS */ /* =================================================================== */ /* Light theme show-all button styling - main styles moved to buttons.css */ /* =================================================================== */ /* 9. LIGHT THEME GLASS MORPHISM EFFECTS */ /* =================================================================== */ /* Light theme glass components */ html[data-theme="light"] { .lof-glass-component { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.1); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .lof-glass-component:hover { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* Glass navigation for light theme */ .lof-nav-glass { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); backdrop-filter: blur(16px) saturate(180%); } /* Glass modal effects for light theme */ .lof-modal-glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(200%); border: 1px solid rgba(0, 0, 0, 0.05); } } /* =================================================================== */ /* 10. LIGHT THEME ACCESSIBILITY ENHANCEMENTS */ /* =================================================================== */ /* Enhanced focus states for light theme */ html[data-theme="light"] { .lof-focusable:focus-visible { outline: 3px solid var(--lof-primary); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1), 0 4px 16px rgba(0, 0, 0, 0.08); } /* Enhanced hover states for better contrast */ .lof-interactive:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); } /* Active states for better feedback */ .lof-interactive:active { background: rgba(0, 0, 0, 0.1); transform: translateY(1px); } } /* =================================================================== */ /* 11. LIGHT THEME PERFORMANCE OPTIMIZATIONS */ /* =================================================================== */ /* GPU acceleration for light theme animations */ html[data-theme="light"] { .lof-light-animated { will-change: transform, opacity, background; transform: translateZ(0); } /* Optimized transitions for light theme */ .lof-light-transition { transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } } /* =================================================================== */ /* 12. LIGHT THEME SPECIFIC UTILITY CLASSES */ /* =================================================================== */ /* Light theme specific backgrounds */ .lof-bg-light-primary { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } .lof-bg-light-secondary { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } .lof-bg-light-accent { background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%); } /* Light theme borders */ .lof-border-light-primary { border-color: rgba(0, 0, 0, 0.08); } .lof-border-light-secondary { border-color: rgba(0, 0, 0, 0.04); } /* Light theme text colors */ .lof-text-light-primary { color: #1e293b; } .lof-text-light-secondary { color: #64748b; } .lof-text-light-muted { color: #94a3b8; } /* Source: css/responsive/mobile.css */ /* * Mobile Responsive Styles * Extracted from live-orders.css * Contains all mobile-specific styles and breakpoints */ /* Mobile touch interactions */ @media (max-width: 768px) { #income-bar.lof-touch-start { transform: scale(0.95); transition: transform 0.1s ease-out; } #income-bar.lof-touch-end { transform: scale(1.02); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } } @media (max-width: 420px) { #income-bar .lof-income-label { display: none; } } /* Mobile-first responsive breakpoints */ @media (max-width: 768px) { :root { --lof-income-bar-height: 64px; --lof-income-bar-total-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); --lof-seller-bar-height: 40px; } .load-more-btn { padding: var(--lof-space-3) var(--lof-space-6); font-size: var(--lof-text-sm); min-height: 48px; /* Accessible touch target */ } .seller-bar, .lof-seller-bar { height: var(--lof-seller-bar-height); font-size: var(--lof-text-sm); min-width: 40px; /* Reduced for mobile */ } /* Adjust seller bar layout for mobile */ .lof-simple-list li.lof-seller-item .lof-seller-bar { margin-left: 6px; /* Reduced spacing on mobile */ min-width: 40px; } .lof-simple-list li.lof-seller-item .lof-seller-orders { min-width: 32px; /* Smaller orders badge on mobile */ font-size: 12px; padding: 0 6px; } .income-bar { height: var(--lof-income-bar-height); font-size: var(--lof-text-base); } #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-2) var(--lof-space-3); margin-right: var(--lof-space-2); min-height: auto; } } @media (max-width: 480px) { :root { --lof-income-bar-height: 56px; --lof-income-bar-total-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); --lof-seller-bar-height: 36px; } } /* Mobile mini-badge styles */ @media (max-width: 640px) { .lof-mini-badge { gap: 8px; padding: 8px 14px; min-height: 40px; } .lof-mini-badge .badge-label { font-size: 10px; padding: 2px 6px; } .lof-mini-badge .badge-diff { padding: 3px 6px; font-size: 12px; } /* Larger badges for better mobile visibility */ .lof-mini-badge { font-size: 14px; padding: 10px 16px; min-height: 54px; border-width: 2px; box-shadow: 0 3px 10px -2px rgba(0,0,0,.15); } .lof-mini-badge .badge-label { font-size: 12px; letter-spacing: .7px; } .lof-mini-badge .badge-val { font-size: 16px; } .lof-mini-badge .badge-diff { font-size: 13px; } } @media (max-width: 480px) { #income-bar .lof-mini-badge .badge-label { display: none; } #income-bar .lof-mini-badge { padding: 6px 10px; gap: 6px; } } /* Bottom notification mobile styles moved to css/components/forms.css */ /* Mobile tweaks */ @media (max-width: 768px) { /* Body padding handled in base.css */ #live-feed-wrapper { margin-top: 0; } #live-feed-wrapper.nav-hidden { margin-top: 0; } #income-bar { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); min-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); max-height: calc(var(--lof-income-bar-height) + var(--lof-safe-top)); padding: var(--lof-space-2) var(--lof-space-4); padding-top: calc(var(--lof-space-2) + var(--lof-safe-top)); } #income-bar .lof-income-label { white-space: nowrap; font-size: .9rem; } #income-bar #daily-income-total { font-size: 1.4em; } /* Preload critical font for LCP and swap for fast paint */ body, .item-info { font-family: var(--font-sans); } #lof-burger-btn.lof-burger { align-self: flex-end; } } /* Mobile App Shell */ @media (max-width: 820px) { /* Mobile navigation styles */ .lof-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--lof-surface); border-top: 1px solid var(--lof-border); display: flex; justify-content: space-around; align-items: center; padding: 4px 6px; z-index: var(--lof-z-mobile-nav); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); padding-bottom: calc(4px + var(--lof-safe-bottom)); } .lof-mobile-nav button { background: none; border: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--lof-text-muted); padding: 4px 2px; cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0.12); } .lof-mobile-nav button span { font-size: 18px; line-height: 1; } .lof-mobile-nav button:focus-visible { outline: 2px solid var(--lof-focus); outline-offset: 2px; border-radius: 8px; } .lof-mobile-nav button.active, .lof-mobile-nav button:hover { color: var(--lof-primary); } .lof-mobile-nav button.active:after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 2px; background: var(--lof-primary); } .lof-top-products-full-page { padding-bottom: 90px; } } /* Footer mobile styles - natural flow */ @media (max-width: 640px) { body.has-lof-footer { /* Remove flexbox layout for natural document flow */ display: block; min-height: auto; } #lof-footer-controls { padding: 10px 12px; margin-top: 20px; /* Space from content above */ position: relative; /* Natural flow */ width: 100%; box-sizing: border-box; } /* Mobile "app-like" override layer */ .lof-mobile-nav { height: 68px !important; box-shadow: 0 -4px 12px -4px rgba(0,0,0,.18) !important; background: var(--lof-surface) !important; } .lof-mobile-nav button { padding: 6px 4px !important; min-height: 56px; } .lof-mobile-nav button span { font-size: 20px !important; } .lof-mobile-nav button em { font-style: normal; font-size: 11px; margin-top: 2px; } .lof-top-products-full-page { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } } /* Ultra mobile feed (phones) */ @media (max-width: 600px) { #income-bar { padding: 10px 14px; padding-top: calc(10px + var(--lof-safe-top)); gap: 8px; } #income-bar .lof-income-label { font-size: 0.85rem; } #income-bar #daily-income-total { font-size: 1.3em; } .lof-mini-badge { padding: 6px 10px; gap: 6px; min-height: 36px; } .lof-mini-badge .badge-label { font-size: 9px; padding: 1px 5px; } .lof-mini-badge .badge-diff { font-size: 11px; padding: 2px 5px; } #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 12px); max-height: calc(var(--lof-income-bar-height) - 12px); width: calc(var(--lof-income-bar-height) - 12px); padding: var(--lof-space-1); margin-right: var(--lof-space-1); min-height: auto; } /* Order header mobile adjustments - main styles in cards.css */ .order-header .order-time { margin-left: auto; font-size: 0.8em; opacity: 0.9; } /* Order body mobile styles moved to css/components/cards.css */ } /* Very narrow devices enhancements */ @media (max-width: 380px) { #income-bar { padding: 8px 10px; padding-top: calc(8px + var(--lof-safe-top)); gap: 6px; } #income-bar .lof-income-label { font-size: 0.8rem; } #income-bar #daily-income-total { font-size: 1.2em; } .lof-mini-badge { padding: 5px 8px; gap: 4px; min-height: 32px; } #lof-burger-btn.lof-burger { height: calc(var(--lof-income-bar-height) - 8px); max-height: calc(var(--lof-income-bar-height) - 8px); width: calc(var(--lof-income-bar-height) - 8px); padding: 4px; margin-right: 4px; min-height: auto; } .order-header .order-id { font-size: 1em; } .item-info { max-width: 64%; } } /* Ultra-small devices */ @media (max-width: 430px) { .order-header { padding: 8px 10px; } /* Order items mobile styles moved to css/components/cards.css */ } /* Ultra-small accessibility boost */ @media (max-width: 360px) { .lof-top-products-list li { font-size: 14px !important; } } /* Mobile Readability & Tap Target Enhancements */ @media (max-width: 640px) { /* Order cards (feed) - main styles in cards.css */ .order-header .order-id { font-size: 1.1em; } .order-header .order-time { font-size: 0.85em; } .order-header .order-total { font-size: 0.8em; } /* Order items readability styles moved to css/components/cards.css */ /* Lists on reports */ .lof-simple-list li { font-size: 15px !important; padding: 12px 14px !important; } .lof-simple-list li .label { font-size: 14px; } /* Top products */ .lof-top-products-list li { font-size: 15px !important; padding: 10px 14px !important; } } /* Match feed mobile side padding on reports */ @media (max-width: 768px) { #lof-reports-page, .lof-reports-page { padding: 4px !important; } } /* PWA Install Button Mobile Responsive */ @media (max-width: 768px) { .lof-install-container { padding: 20px 16px; max-width: 100%; margin: 0 auto; border-radius: 16px; } .lof-install-header { text-align: center; margin-bottom: 24px; padding: 40px 0 60px 0; } .lof-install-icon { width: 64px; height: 64px; margin: 0 auto 16px; } .lof-app-icon img { width: 80px; height: 80px; } .lof-install-title { font-size: 22px; margin-bottom: 8px; } .lof-install-subtitle { font-size: 14px; } .lof-install-actions { gap: 12px; } .lof-install-btn { padding: 14px 20px; font-size: 15px; min-height: 48px; } .lof-install-button { min-width: 100%; padding: 18px 32px; font-size: 1rem; } .lof-install-manual { padding: 24px 20px; margin: 32px 0; } .lof-step { padding: 14px 16px; } .lof-step p { font-size: 0.95rem; } } @media (max-width: 480px) { .lof-install-container { padding: 16px 12px; border-radius: 12px; } .lof-install-header { padding: 32px 0 48px 0; } .lof-install-icon { width: 56px; height: 56px; margin-bottom: 12px; } .lof-app-icon img { width: 72px; height: 72px; } .lof-install-title { font-size: 20px; margin-bottom: 6px; } .lof-install-subtitle { font-size: 13px; } .lof-install-actions { flex-direction: column; gap: 8px; } .lof-install-btn { width: 100%; padding: 12px 16px; font-size: 14px; } .lof-install-manual { padding: 20px 16px; border-radius: 16px; } .lof-step { padding: 12px 14px; margin: 12px 0; } /* Seller List Mobile Responsive */ .lof-simple-list li.lof-seller-item { padding: 12px 14px 10px; border-radius: 12px; } .lof-seller-avatar { width: 40px; height: 40px; margin-right: 12px; } .lof-seller-name { font-size: 15px; margin-bottom: 2px; } .lof-seller-stats { font-size: 12px; gap: 8px; } .lof-seller-revenue { font-size: 14px; font-weight: 600; } /* Top Products Mobile Responsiveness */ .lof-top-products-list li { padding: 14px 16px; border-radius: 10px; } .lof-product-rank { width: 26px; height: 26px; font-size: 11px; margin-right: 10px; } .lof-product-name { font-size: 14px; } .lof-product-stats { font-size: 11px; } .lof-product-revenue { font-size: 15px; } .lof-product-item { padding: 12px 14px !important; border-radius: 10px; margin-bottom: 6px; } .lof-product-item .lof-product-rank { width: 24px; height: 24px; font-size: 10px; margin-right: 8px; } .lof-product-item .lof-product-info { flex: 1; min-width: 0; } .lof-product-item .lof-product-name { font-size: 13px; line-height: 1.3; margin-bottom: 3px; } .lof-product-item .lof-product-stats { font-size: 10px; color: var(--lof-text-muted); margin-bottom: 4px; } .lof-product-item .lof-product-revenue { font-size: 14px; font-weight: 600; color: var(--lof-primary); } .lof-product-item .lof-product-growth { font-size: 9px; padding: 1px 4px; margin-left: 6px; } .lof-top-products-section { padding: 18px 20px; border-radius: 14px; margin-bottom: 16px; } .lof-top-products-section .lof-top-products-header { margin-bottom: 14px; } .lof-top-products-section .lof-top-products-title { font-size: 17px; margin-bottom: 4px; } .lof-top-products-section .lof-top-products-subtitle { font-size: 12px; } .lof-product-full-item { padding: 10px 12px; gap: 12px; border-radius: 10px; margin-bottom: 8px; } .lof-product-full-rank { width: 28px; height: 28px; font-size: 12px; } .lof-product-full-name { font-size: 15px; margin-bottom: 4px; } .lof-product-full-stats { font-size: 12px; margin-bottom: 6px; } .lof-product-full-revenue { font-size: 16px; } .lof-product-full-growth { font-size: 11px; padding: 2px 6px; margin-left: 6px; } } /* Top Products Mobile Responsiveness - 768px */ @media (max-width: 768px) { .lof-top-products-list li { padding: 14px 16px; border-radius: 12px; margin-bottom: 8px; } .lof-product-rank { width: 28px; height: 28px; font-size: 12px; margin-right: 12px; } .lof-product-name { font-size: 15px; margin-bottom: 4px; } .lof-product-stats { font-size: 12px; margin-bottom: 6px; } .lof-product-revenue { font-size: 16px; font-weight: 600; } .lof-product-growth { font-size: 11px; padding: 2px 6px; } .lof-top-products-section { padding: 20px 22px; border-radius: 16px; margin-bottom: 20px; } .lof-top-products-header { margin-bottom: 16px; } .lof-top-products-title { font-size: 18px; margin-bottom: 6px; } .lof-top-products-subtitle { font-size: 13px; } /* Install App Button Mobile */ .install-app-btn { padding: 8px 12px; font-size: 13px; min-height: 40px; border-radius: 8px; } .install-app-btn span { font-size: 16px; } /* Show All Button Mobile - Enhanced */ .lof-show-all-btn { padding: var(--lof-space-3) var(--lof-space-5); font-size: var(--lof-text-sm); min-height: 48px; border-radius: var(--lof-radius-lg); gap: var(--lof-space-2); font-weight: 600; } .lof-show-all-btn .show-all-text { font-size: var(--lof-text-sm); font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; } .lof-show-all-btn:hover .show-all-text { transform: translateY(-0.25px); } .lof-show-all-btn .show-all-icon { font-size: 1.05em; } /* Reduce animation intensity on mobile for better performance */ .lof-show-all-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--lof-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .lof-show-all-btn:hover .show-all-icon { transform: rotate(180deg) scale(1.1); } /* Optimize background pattern for mobile */ .lof-show-all-btn::before { background-size: 16px 16px, 12px 12px; opacity: 0.2; } .lof-show-all-btn:hover::before { opacity: 0.35; } /* Product Full Item Mobile */ .lof-product-full-item { gap: 16px; padding: 14px 16px; border-radius: 12px; margin-bottom: 10px; } .lof-product-full-rank { width: 32px; height: 32px; font-size: 13px; } .lof-product-full-info { flex: 1; min-width: 0; } .lof-product-full-name { font-size: 16px; line-height: 1.4; margin-bottom: 6px; } .lof-product-full-stats { font-size: 13px; margin-bottom: 8px; } .lof-product-full-revenue { font-size: 18px; font-weight: 600; } .lof-product-full-growth { font-size: 12px; padding: 3px 8px; margin-left: 8px; } /* Footer Mobile */ .footer-content { flex-direction: column; gap: 16px; padding: 20px 16px; text-align: center; } .footer-links { justify-content: center; gap: 16px; } .footer-link { font-size: 13px; padding: 8px 12px; } .footer-text { font-size: 12px; margin-top: 8px; } } /* Mobile optimizations for smooth scrolling */ @media (max-width: 640px) { body, html { scroll-behavior: smooth; } } /* Source: css/responsive/tablet.css */ /* * Tablet Responsive Styles (768px - 1024px) * Extracted from live-orders.css * Contains medium screen breakpoints, tablet optimizations, and container queries */ /* =================================================================== */ /* TABLET BREAKPOINTS (768px - 1024px) */ /* =================================================================== */ /* Core tablet styles - larger than mobile but smaller than desktop */ @media (min-width: 768px) and (max-width: 1024px) { /* Reset mobile-specific overrides */ body { padding-top: 0; padding-left: 0; padding-right: 0; } #live-feed-wrapper { margin-top: var(--lof-space-4); } /* Income bar tablet adjustments */ #income-bar { height: auto; min-height: auto; max-height: none; padding: var(--lof-space-4) var(--lof-space-6); padding-top: calc(var(--lof-space-4) + var(--lof-safe-top)); gap: var(--lof-space-4); flex-direction: row; align-items: center; flex-wrap: wrap; } #income-bar .lof-income-label { font-size: 1rem; white-space: normal; } #income-bar #daily-income-total { font-size: 1.8em; } /* Tablet mini-badge optimizations */ .lof-mini-badge { gap: var(--lof-space-3); padding: var(--lof-space-3) var(--lof-space-4); min-height: 48px; font-size: var(--lof-text-base); border-width: 1px; box-shadow: var(--lof-shadow-md); } .lof-mini-badge .badge-label { font-size: var(--lof-text-sm); padding: var(--lof-space-1) var(--lof-space-2); letter-spacing: normal; } .lof-mini-badge .badge-val { font-size: var(--lof-text-lg); } .lof-mini-badge .badge-diff { font-size: var(--lof-text-sm); padding: var(--lof-space-1) var(--lof-space-2); } /* Load more button tablet styling */ .load-more-btn { padding: var(--lof-space-4) var(--lof-space-8); font-size: var(--lof-text-base); min-height: 52px; } /* Burger button tablet adjustments */ #lof-burger-btn.lof-burger { height: 48px; max-height: 48px; width: 48px; padding: var(--lof-space-3); margin-right: var(--lof-space-3); min-height: auto; } } /* =================================================================== */ /* INSTALL PAGE TABLET OPTIMIZATIONS */ /* =================================================================== */ /* Tablet install page - specific range targeting */ @media (min-width: 641px) and (max-width: 1024px) { .lof-install-container { max-width: 520px; padding: 40px 32px; margin: 0 auto; border-radius: var(--lof-radius-xl); } .lof-install-header { padding: 0 0 50px 0; text-align: center; } .lof-app-icon img { width: 100px; height: 100px; border-radius: var(--lof-radius-xl); } .lof-install-button { min-width: 300px; padding: 20px 44px; font-size: 1.15rem; border-radius: var(--lof-radius-lg); } .lof-install-manual { max-width: 450px; padding: 36px 28px; border-radius: var(--lof-radius-lg); } .lof-step { padding: 18px 20px; border-radius: var(--lof-radius-md); margin: 16px 0; } .lof-step p { font-size: 1rem; line-height: 1.6; } } /* =================================================================== */ /* TABLET HOVER EFFECTS & INTERACTIONS */ /* =================================================================== */ /* Enhanced hover states for tablet touch/hover hybrid devices */ @media (min-width: 768px) and (max-width: 1024px) { /* Product items hover - subtle animations for tablet */ .lof-product-item:hover { transform: translateY(-1px) scale(1.005); box-shadow: 0 6px 16px -4px rgba(0,0,0,0.1), 0 3px 8px -2px rgba(0,0,0,0.06); } .lof-product-item:hover .p-qty { transform: scale(1.02); background: linear-gradient(135deg, var(--lof-primary-500) 0%, var(--lof-primary-600) 100%); } .lof-product-item:hover .p-amount { transform: scale(1.01); color: var(--lof-primary-600); } /* Top products list hover effects */ .lof-top-products-list li:hover { transform: translateY(-2px) scale(1.01); border-color: var(--lof-primary); box-shadow: var(--lof-shadow-lg); } .lof-top-products-list li:hover .p-qty { background: var(--lof-primary-600); box-shadow: 0 4px 12px var(--lof-primary-shadow); transform: scale(1.05); } /* Cards and sections hover */ .lof-top-products-section:hover { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.08); transform: translateY(-1px); } /* Button hover effects */ .lof-products-toggle:hover { background: var(--lof-surface-alt); border-color: var(--lof-primary); color: var(--lof-primary); transform: translateY(-1px); } .lof-products-toggle.expanded:hover { background: var(--lof-primary-600); } /* Install app button tablet hover */ .install-app-btn:hover { background: var(--lof-primary-dark, #1d4ed8); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Show all button tablet adjustments - Enhanced */ .lof-show-all-btn { padding: var(--lof-space-3) var(--lof-space-5); min-height: 50px; font-size: var(--lof-text-base); font-weight: 600; } .lof-show-all-btn .show-all-text { font-size: var(--lof-text-base); font-weight: 600; letter-spacing: 0.025em; line-height: 1.35; } .lof-show-all-btn:hover .show-all-text { transform: translateY(-0.4px); } .lof-show-all-btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: var(--lof-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 0 16px color-mix(in srgb, var(--lof-primary-400) 12%, transparent); } .lof-show-all-btn:hover .show-all-icon { transform: rotate(180deg) scale(1.12); color: var(--lof-primary-500); } /* Tablet-optimized background pattern */ .lof-show-all-btn::before { background-size: 18px 18px, 13px 13px; opacity: 0.25; } .lof-show-all-btn:hover::before { opacity: 0.4; } } /* =================================================================== */ /* TABLET LAYOUT OPTIMIZATIONS */ /* =================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* Reports page tablet layout */ #lof-reports-page, .lof-reports-page { padding-left: var(--lof-space-6); padding-right: var(--lof-space-6); max-width: 100%; } /* Top products full page tablet layout */ .lof-top-products-full-page { max-width: 100%; padding-left: var(--lof-space-6); padding-right: var(--lof-space-6); padding-bottom: var(--lof-space-8); } /* Order card tablet spacing */ .order-header { padding: var(--lof-space-3) var(--lof-space-4); } /* Order body tablet styles - main styles in cards.css */ .order-body { padding: 14px 16px 16px; } .order-items-list { gap: 1px; } .order-items-list li { padding: 5px 0; } /* Text sizing for tablet readability - main styles in cards.css */ .order-header .order-id { font-size: 1.2em; padding: 6px 12px; } .order-header .order-time { font-size: 0.95em; padding: 6px 12px; } .order-header .order-total { font-size: 0.9em; padding: 6px 14px; } .item-info { font-size: 0.9rem; line-height: 1.3; } .item-price { font-size: 0.8rem; } /* List items tablet optimization */ .lof-simple-list li { font-size: 16px; padding: var(--lof-space-4) var(--lof-space-5); } .lof-simple-list li .label { font-size: 15px; } /* Top products list tablet layout */ .lof-top-products-list li { font-size: 16px; padding: var(--lof-space-4) var(--lof-space-5); border-radius: var(--lof-radius-lg); margin-bottom: var(--lof-space-3); } /* Product rank tablet sizing */ .lof-product-rank { width: 32px; height: 32px; font-size: 13px; margin-right: var(--lof-space-4); } .lof-product-name { font-size: 16px; margin-bottom: var(--lof-space-1); } .lof-product-stats { font-size: 13px; margin-bottom: var(--lof-space-2); } .lof-product-revenue { font-size: 17px; font-weight: 600; } .lof-product-growth { font-size: 12px; padding: var(--lof-space-1) var(--lof-space-2); } } /* =================================================================== */ /* CONTAINER QUERIES FOR TABLET */ /* =================================================================== */ /* Container queries for adaptive tablet layouts */ @container (min-width: 480px) and (max-width: 768px) { .feed-controls-bar { flex-direction: row; gap: var(--lof-space-4); padding: var(--lof-space-4); justify-content: space-between; } .notification-controls { justify-content: flex-end; } .status-indicator { font-size: var(--lof-text-sm); padding: var(--lof-space-2) var(--lof-space-3); } } /* =================================================================== */ /* TABLET NAVIGATION & INTERFACE */ /* =================================================================== */ /* Hide mobile navigation on tablet */ @media (min-width: 768px) { .lof-mobile-nav { display: none; } } /* Tablet bottom notification positioning moved to css/components/forms.css */ /* =================================================================== */ /* TABLET TOUCH IMPROVEMENTS */ /* =================================================================== */ /* Enhanced touch targets for tablet */ @media (min-width: 768px) and (max-width: 1024px) { /* Ensure minimum touch target sizes */ button, .btn, [role="button"] { min-height: 44px; min-width: 44px; } /* Seller item touch optimization */ .lof-simple-list li.lof-seller-item { padding: var(--lof-space-4) var(--lof-space-5); border-radius: var(--lof-radius-lg); min-height: 64px; } .lof-seller-avatar { width: 48px; height: 48px; margin-right: var(--lof-space-4); } .lof-seller-name { font-size: 16px; margin-bottom: var(--lof-space-1); } .lof-seller-stats { font-size: 13px; gap: var(--lof-space-3); } .lof-seller-revenue { font-size: 15px; font-weight: 600; } } /* =================================================================== */ /* TABLET PRODUCT SECTIONS */ /* =================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* Product sections tablet layout */ .lof-top-products-section { padding: var(--lof-space-6) var(--lof-space-7); border-radius: var(--lof-radius-xl); margin-bottom: var(--lof-space-6); } .lof-top-products-header { margin-bottom: var(--lof-space-5); } .lof-top-products-title { font-size: 20px; margin-bottom: var(--lof-space-2); } .lof-top-products-subtitle { font-size: 14px; } /* Full product item tablet styling */ .lof-product-full-item { gap: var(--lof-space-5); padding: var(--lof-space-5) var(--lof-space-6); border-radius: var(--lof-radius-lg); margin-bottom: var(--lof-space-4); } .lof-product-full-rank { width: 36px; height: 36px; font-size: 14px; } .lof-product-full-info { flex: 1; min-width: 0; } .lof-product-full-name { font-size: 17px; line-height: 1.4; margin-bottom: var(--lof-space-2); } .lof-product-full-stats { font-size: 14px; margin-bottom: var(--lof-space-3); } .lof-product-full-revenue { font-size: 19px; font-weight: 600; } .lof-product-full-growth { font-size: 13px; padding: var(--lof-space-1) var(--lof-space-3); margin-left: var(--lof-space-3); } } /* Source: css/responsive/desktop.css */ /* * Desktop Responsive Styles (1024px+) * Extracted from live-orders.css * Contains large screen breakpoints, desktop-specific hover effects, and optimizations */ /* =================================================================== */ /* DESKTOP BREAKPOINTS (1024px+) */ /* =================================================================== */ /* Base desktop styles starting from 1024px */ @media (min-width: 1024px) { /* Enhanced desktop layout */ body { padding-top: 0; padding-left: 0; padding-right: 0; } #live-feed-wrapper { margin-top: var(--lof-space-6); max-width: 1400px; margin-left: auto; margin-right: auto; } /* Desktop income bar styling */ #income-bar { height: auto; min-height: auto; max-height: none; padding: var(--lof-space-6) var(--lof-space-8); gap: var(--lof-space-6); flex-direction: row; align-items: center; flex-wrap: nowrap; border-radius: var(--lof-radius-xl); } #income-bar .lof-income-label { font-size: 1.125rem; white-space: normal; font-weight: 500; } #income-bar #daily-income-total { font-size: 2.25em; font-weight: 700; } /* Desktop mini-badge enhancements */ .lof-mini-badge { gap: var(--lof-space-4); padding: var(--lof-space-4) var(--lof-space-6); min-height: 56px; font-size: var(--lof-text-lg); border-width: 1px; box-shadow: var(--lof-shadow-lg); border-radius: var(--lof-radius-xl); } .lof-mini-badge .badge-label { font-size: var(--lof-text-base); padding: var(--lof-space-2) var(--lof-space-3); letter-spacing: 0.025em; } .lof-mini-badge .badge-val { font-size: var(--lof-text-xl); font-weight: 600; } .lof-mini-badge .badge-diff { font-size: var(--lof-text-base); padding: var(--lof-space-2) var(--lof-space-3); } /* Desktop load more button */ .load-more-btn { padding: var(--lof-space-5) var(--lof-space-10); font-size: var(--lof-text-lg); min-height: 56px; border-radius: var(--lof-radius-xl); } /* Hide mobile burger button on desktop */ #lof-burger-btn.lof-burger { display: none; } } /* =================================================================== */ /* DESKTOP INSTALL PAGE OPTIMIZATIONS */ /* =================================================================== */ /* Basic desktop install page from 769px */ @media (min-width: 769px) { .lof-install-container { padding: 60px 40px; max-width: 600px; margin: 0 auto; border-radius: var(--lof-radius-2xl); } .lof-install-header { padding: 80px 0 100px 0; text-align: center; } .lof-app-icon img { width: 120px; height: 120px; border-radius: var(--lof-radius-2xl); } .lof-install-button { min-width: 320px; padding: 22px 48px; font-size: 1.2rem; border-radius: var(--lof-radius-xl); } .lof-install-manual { max-width: 480px; padding: 40px 32px; border-radius: var(--lof-radius-xl); } } /* Large desktop optimizations from 1200px */ @media (min-width: 1200px) { .lof-install-container { max-width: 600px; padding: 60px 40px; border-radius: var(--lof-radius-2xl); } .lof-install-header { padding: 0 0 80px 0; } .lof-app-icon { margin-bottom: 48px; } .lof-app-icon img { width: 140px; height: 140px; } .lof-install-button { min-width: 380px; padding: 26px 56px; font-size: 1.3rem; } .lof-install-manual { max-width: 500px; padding: 48px 40px; } .lof-step { padding: 24px 28px; border-radius: var(--lof-radius-lg); margin: 20px 0; } .lof-step p { font-size: 1.1rem; line-height: 1.7; } } /* Ultra-wide desktop optimizations */ @media (min-width: 1440px) { #live-feed-wrapper { max-width: 1600px; } #income-bar { padding: var(--lof-space-8) var(--lof-space-12); gap: var(--lof-space-8); } #income-bar .lof-income-label { font-size: 1.25rem; } #income-bar #daily-income-total { font-size: 2.5em; } } /* =================================================================== */ /* DESKTOP HOVER EFFECTS & INTERACTIONS */ /* =================================================================== */ /* Enhanced hover states for desktop with precise mouse control */ @media (min-width: 1024px) { /* Core interactive elements */ .lof-fab:hover { transform: scale(1.1) translateZ(0); box-shadow: var(--lof-shadow-2xl); } .lof-card-hover:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--lof-shadow-xl); } /* Tooltip hover effects */ .lof-tooltip:hover::before, .lof-tooltip:hover::after { opacity: 1; } /* Income bar desktop hover effect */ #income-bar:hover { transform: translateY(-1px); box-shadow: var(--lof-shadow-2xl); } /* App icon hover animation */ .lof-app-icon:hover img { transform: translateY(-8px) scale(1.05); box-shadow: 0 35px 100px rgba(0, 0, 0, 0.18), 0 20px 40px rgba(0, 0, 0, 0.12); } /* Install button sophisticated hover */ .lof-install-button:hover::before { left: 100%; } .lof-install-button:hover .lof-install-icon { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } /* Step hover interactions */ .lof-step:hover { transform: translateY(-4px); background: rgba(59, 130, 246, 0.04); border-color: rgba(59, 130, 246, 0.2); box-shadow: var(--lof-shadow-xl); } .lof-step:hover::before { width: 6px; background: linear-gradient(135deg, #1d4ed8, #059669); } /* Product item sophisticated hover effects */ .lof-product-item:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px -4px rgba(0,0,0,0.15), 0 6px 16px -2px rgba(0,0,0,0.08); border-color: var(--lof-primary); } .lof-product-item:hover::after { left: 100%; } .lof-product-item:hover .p-name { color: var(--lof-text); } .lof-product-item:hover .p-qty { background: linear-gradient(135deg, var(--lof-primary-600) 0%, var(--lof-primary-700) 100%); box-shadow: 0 6px 16px rgba(0,0,0,0.2); transform: scale(1.08); } .lof-product-item:hover .p-amount { color: var(--lof-primary-600); transform: scale(1.03); } /* Top products list advanced hover */ .lof-top-products-list li:hover { transform: translateY(-3px) scale(1.02); border-color: var(--lof-primary); box-shadow: var(--lof-shadow-xl); } .lof-top-products-list li:hover .p-qty { background: var(--lof-primary-600); box-shadow: 0 5px 16px var(--lof-primary-shadow); transform: scale(1.08); } .lof-top-products-list li:hover .product-number { background: var(--lof-primary-600); box-shadow: 0 4px 12px var(--lof-primary-shadow); transform: scale(1.1); } .lof-top-products-list li:hover .order-count { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); transform: scale(1.05); } /* Section hover effects */ .lof-top-products-section:hover { box-shadow: 0 6px 16px -4px rgba(0,0,0,.12), 0 12px 32px -8px rgba(0,0,0,.1); transform: translateY(-2px); } /* Button and control hover effects */ .lof-products-toggle:hover::before { left: 100%; } .lof-products-toggle:hover { transform: translateY(-3px); box-shadow: 0 8px 20px var(--lof-primary-shadow); background: var(--lof-primary-600); } .lof-products-toggle.expanded:hover { background: var(--lof-danger-600); box-shadow: 0 8px 20px var(--lof-danger-shadow); } /* Desktop cafe name with premium text effects */ .lof-cafe-name:hover { /* Enhanced desktop transforms for dramatic effect */ transform: translateY(-4px) scale(1.08); /* Premium desktop typography */ font-weight: 900; /* Maximum impact on desktop */ letter-spacing: 0.15em; /* Expanded spacing for luxury feel */ /* Fallback color for browsers that don't support background-clip */ color: var(--lof-warning); /* Premium gradient with more stops for desktop */ background: linear-gradient( 135deg, var(--lof-text-on-primary) 0%, #fbbf24 15%, #f59e0b 30%, #d97706 45%, #b45309 60%, #92400e 75%, var(--lof-text-on-primary) 100% ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Premium desktop shadow stack */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 12px var(--lof-shadow-medium), 0 8px 20px rgba(245, 158, 11, 0.4), 0 12px 32px rgba(251, 191, 36, 0.3), 0 16px 48px rgba(217, 119, 6, 0.1); /* Enhanced desktop box shadow */ box-shadow: var(--lof-shadow-xl), 0 0 40px rgba(245, 158, 11, 0.4), 0 0 80px rgba(251, 191, 36, 0.2); /* Desktop backdrop enhancement */ backdrop-filter: blur(3px) saturate(1.2); } /* Install app button desktop hover */ .install-app-btn:hover { background: var(--lof-primary-dark, #1d4ed8); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } /* Show all button desktop enhancements - Premium */ .lof-show-all-btn { padding: var(--lof-space-4) var(--lof-space-6); min-height: 54px; font-size: var(--lof-text-lg); font-weight: 600; border-radius: var(--lof-radius-2xl); } .lof-show-all-btn .show-all-text { font-size: var(--lof-text-lg); font-weight: 600; letter-spacing: 0.03em; line-height: 1.4; text-rendering: optimizeLegibility; } .lof-show-all-btn:hover .show-all-text { transform: translateY(-0.75px); letter-spacing: 0.035em; } /* Enhanced hover interactions for desktop */ .lof-show-all-btn:hover { transform: translateY(-4px) scale(1.025); box-shadow: var(--lof-shadow-2xl), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 32px color-mix(in srgb, var(--lof-primary-400) 18%, transparent); backdrop-filter: blur(20px) saturate(220%); } .lof-show-all-btn:hover .show-all-icon { transform: rotate(180deg) scale(1.2); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2)); } /* Desktop-optimized background pattern */ .lof-show-all-btn::before { background-size: 24px 24px, 16px 16px; background-position: 0 0, 12px 12px; opacity: 0.35; } .lof-show-all-btn:hover::before { opacity: 0.6; } /* Enhanced shimmer effect for desktop */ .lof-show-all-btn::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lof-primary-300) 20%, transparent), transparent); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Add subtle pulse animation on desktop */ @keyframes subtle-pulse { 0%, 100% { box-shadow: var(--lof-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } 50% { box-shadow: var(--lof-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 16px color-mix(in srgb, var(--lof-primary-400) 8%, transparent); } } .lof-show-all-btn:focus-visible { animation: subtle-pulse 2s ease-in-out infinite; } /* Advanced text effects for desktop */ @keyframes text-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .lof-show-all-btn:hover .show-all-text { background-size: 200% 100%; animation: text-shimmer 2s ease-in-out; } /* Retry button hover */ .lof-retry-btn:hover { background: var(--lof-primary-600); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Product full item hover */ .lof-product-full-item:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.15); } .lof-product-full-item:hover .income-bar-label { color: #667eea; transform: translateY(-50%) scale(1.1); } /* Order row hover effects */ .lof-order-row:hover { box-shadow: 0 4px 14px -4px rgba(15,23,42,.18); transform: translateY(-2px); transition: .3s cubic-bezier(.16,.8,.24,1); } /* Seller item hover effects */ .lof-simple-list li.lof-seller-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-1px); border-color: #cbd5e1; } /* Seller bar fill hover */ .lof-seller-bar-fill:hover::after { left: 100%; } /* Footer link hover */ .lof-install-footer a:hover { text-decoration: underline; } } /* =================================================================== */ /* DESKTOP LAYOUT OPTIMIZATIONS */ /* =================================================================== */ @media (min-width: 1024px) { /* Enhanced desktop grid layouts */ #lof-reports-page, .lof-reports-page { padding-left: var(--lof-space-8); padding-right: var(--lof-space-8); max-width: 1400px; margin: 0 auto; } /* Top products desktop layout */ .lof-top-products-full-page { max-width: 1400px; margin: 0 auto; padding-left: var(--lof-space-8); padding-right: var(--lof-space-8); padding-bottom: var(--lof-space-12); } /* Order cards desktop spacing */ .order-header { padding: var(--lof-space-4) var(--lof-space-6); } /* Order body desktop styles - main styles in cards.css */ .order-body { padding: 18px 20px 20px; } .order-items-list { gap: 2px; } .order-items-list li { padding: 6px 0; } /* Enhanced text sizing for desktop readability - main styles in cards.css */ .order-header .order-id { font-size: 1.3em; font-weight: 700; padding: 8px 14px; } .order-header .order-time { font-size: 1rem; padding: 8px 12px; } .order-header .order-total { font-size: 1em; font-weight: 600; padding: 8px 16px; } .item-info { font-size: 0.95rem; line-height: 1.4; } .item-price { font-size: 0.85rem; font-weight: 500; } /* Desktop list optimization */ .lof-simple-list li { font-size: 17px; padding: var(--lof-space-5) var(--lof-space-6); border-radius: var(--lof-radius-lg); } .lof-simple-list li .label { font-size: 16px; } /* Top products desktop enhancement */ .lof-top-products-list li { font-size: 17px; padding: var(--lof-space-5) var(--lof-space-6); border-radius: var(--lof-radius-xl); margin-bottom: var(--lof-space-4); } /* Product elements desktop sizing */ .lof-product-rank { width: 40px; height: 40px; font-size: 15px; margin-right: var(--lof-space-5); } .lof-product-name { font-size: 18px; margin-bottom: var(--lof-space-2); font-weight: 500; } .lof-product-stats { font-size: 14px; margin-bottom: var(--lof-space-3); } .lof-product-revenue { font-size: 19px; font-weight: 700; } .lof-product-growth { font-size: 13px; padding: var(--lof-space-2) var(--lof-space-3); border-radius: var(--lof-radius-md); } } /* =================================================================== */ /* DESKTOP NAVIGATION & INTERFACE */ /* =================================================================== */ /* Hide mobile-specific elements on desktop */ @media (min-width: 1024px) { .lof-mobile-nav { display: none; } /* Desktop footer enhancements */ .footer-content { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--lof-space-8); padding: var(--lof-space-8) var(--lof-space-12); text-align: left; } .footer-links { justify-content: flex-end; gap: var(--lof-space-6); } .footer-link { font-size: 14px; padding: var(--lof-space-3) var(--lof-space-4); border-radius: var(--lof-radius-md); } .footer-text { font-size: 13px; margin-top: 0; } } /* Desktop bottom notification positioning moved to css/components/forms.css */ /* =================================================================== */ /* DESKTOP PRODUCT SECTIONS */ /* =================================================================== */ @media (min-width: 1024px) { /* Enhanced product sections for desktop */ .lof-top-products-section { padding: var(--lof-space-8) var(--lof-space-10); border-radius: var(--lof-radius-2xl); margin-bottom: var(--lof-space-8); box-shadow: var(--lof-shadow-lg); } .lof-top-products-header { margin-bottom: var(--lof-space-6); } .lof-top-products-title { font-size: 24px; margin-bottom: var(--lof-space-3); font-weight: 700; } .lof-top-products-subtitle { font-size: 16px; color: var(--lof-text-muted); } /* Desktop full product item */ .lof-product-full-item { gap: var(--lof-space-6); padding: var(--lof-space-6) var(--lof-space-8); border-radius: var(--lof-radius-xl); margin-bottom: var(--lof-space-5); box-shadow: var(--lof-shadow-md); } .lof-product-full-rank { width: 44px; height: 44px; font-size: 16px; font-weight: 700; } .lof-product-full-info { flex: 1; min-width: 0; } .lof-product-full-name { font-size: 20px; line-height: 1.4; margin-bottom: var(--lof-space-3); font-weight: 600; } .lof-product-full-stats { font-size: 15px; margin-bottom: var(--lof-space-4); color: var(--lof-text-muted); } .lof-product-full-revenue { font-size: 22px; font-weight: 700; color: var(--lof-primary-600); } .lof-product-full-growth { font-size: 14px; padding: var(--lof-space-2) var(--lof-space-4); margin-left: var(--lof-space-4); border-radius: var(--lof-radius-md); } /* Seller desktop enhancements */ .lof-simple-list li.lof-seller-item { padding: var(--lof-space-5) var(--lof-space-6); border-radius: var(--lof-radius-xl); min-height: 80px; } .lof-seller-avatar { width: 56px; height: 56px; margin-right: var(--lof-space-5); } .lof-seller-name { font-size: 18px; margin-bottom: var(--lof-space-2); font-weight: 600; } .lof-seller-stats { font-size: 14px; gap: var(--lof-space-4); } .lof-seller-revenue { font-size: 17px; font-weight: 700; } } /* =================================================================== */ /* CONTAINER QUERIES FOR DESKTOP */ /* =================================================================== */ /* Large container queries for desktop layouts */ @container (min-width: 768px) { .feed-controls-bar { flex-direction: row; gap: var(--lof-space-6); padding: var(--lof-space-6); justify-content: space-between; align-items: center; } .notification-controls { justify-content: flex-end; gap: var(--lof-space-4); } .status-indicator { font-size: var(--lof-text-base); padding: var(--lof-space-3) var(--lof-space-4); border-radius: var(--lof-radius-lg); } } /* =================================================================== */ /* HIGH DPI & RETINA DISPLAY OPTIMIZATIONS */ /* =================================================================== */ /* High DPI displays optimization */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .burger-btn::before, .burger-btn::after, .burger-btn span { height: 2px; } /* Enhanced shadows for retina displays */ .lof-product-item:hover { box-shadow: 0 16px 40px -4px rgba(0,0,0,0.12), 0 8px 20px -2px rgba(0,0,0,0.06); } .lof-top-products-section:hover { box-shadow: 0 8px 20px -4px rgba(0,0,0,.1), 0 16px 40px -8px rgba(0,0,0,.08); } } /* =================================================================== */ /* LANDSCAPE ORIENTATION DESKTOP */ /* =================================================================== */ /* Large screen landscape optimizations */ @media (min-width: 1024px) and (orientation: landscape) { #live-feed-wrapper { margin-top: var(--lof-space-8); } /* Wider layouts for landscape desktop */ .lof-top-products-full-page { max-width: 1600px; } #lof-reports-page, .lof-reports-page { max-width: 1600px; } }