/** * LIMOR AI - Complete Unified CSS Bundle * ======================================= * Single import point for all pages * MODULAR THEME SYSTEM with light/dark mode support * * Created: 2025-11-28 * Purpose: UI Standardization - Single CSS import per page * Sacred: 100% SHARP - Hebrew RTL support * * Theme System: * - Default: Light mode (or follows system preference) * - Dark mode: Add class="dark" to or * - Theme switching: Use ThemeSwitcher.toggle() from theme-switcher.js */ /* ============================================ 1. THEME VARIABLES (CORE - Load First!) CSS Custom Properties for theming ============================================ */ @import 'themes/theme-variables.css'; /* ============================================ 2. COMPONENT STYLES All UI components using theme variables ============================================ */ @import 'themes/components.css'; /* ============================================ 3. ICON REFERENCE SVG icon definitions and styles ============================================ */ @import 'themes/icons.css'; /* ============================================ 4. LEGACY CHAKRA COMPATIBILITY Keeping for backward compatibility during migration ============================================ */ @import 'limor-unified-chakra.css'; /* ============================================ 5. RESPONSIVE FOUNDATION Breakpoints, variables, and responsive base ============================================ */ @import 'mobile/responsive-variables.css'; @import 'mobile/chakra-responsive-base.css'; /* ============================================ 6. RESPONSIVE UTILITIES Utility classes for responsive layouts ============================================ */ @import 'mobile/responsive-utilities.css'; /* ============================================ 7. RESPONSIVE TABLES Mobile-friendly table patterns ============================================ */ @import 'mobile/responsive-tables.css'; /* ============================================ 8. MOBILE NAVIGATION Hamburger menu, mobile sidebar, touch targets ============================================ */ @import 'mobile/mobile-navigation.css'; /* ============================================ 9. CHAKRA UI COMPONENTS (Enhanced) Additional Chakra-style component patterns ============================================ */ @import 'mobile/chakra-ui-components.css'; /* ============================================ GOOGLE FONTS - Secular One for Hebrew ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap'); /* ============================================ THEME OVERRIDES FOR LEGACY COMPONENTS Bridge between new theme system and old Chakra ============================================ */ /* Override old Chakra variables with new theme variables */ :root { /* Map new theme colors to old Chakra variable names */ --chakra-colors-brand-50: var(--color-primary-50); --chakra-colors-brand-100: var(--color-primary-100); --chakra-colors-brand-200: var(--color-primary-200); --chakra-colors-brand-300: var(--color-primary-300); --chakra-colors-brand-400: var(--color-primary-400); --chakra-colors-brand-500: var(--color-primary-500); --chakra-colors-brand-600: var(--color-primary-600); --chakra-colors-brand-700: var(--color-primary-700); --chakra-colors-brand-800: var(--color-primary-800); --chakra-colors-brand-900: var(--color-primary-900); /* Map semantic variables */ --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-border: var(--border-default); --color-gray-50: var(--bg-surface-hover); } /* ============================================ PAGE HEADER STYLES Consistent page headers across app ============================================ */ .page-header { margin-bottom: var(--spacing-xl); } .page-header__title { font-family: var(--font-family); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--spacing-sm); } .page-header__subtitle { font-size: var(--font-size-base); color: var(--text-secondary); } /* ============================================ NAVIGATION INJECTION STYLES (Updated) Styles for the navigation-system.js injection Using new theme variables ============================================ */ /* Navigation Container - Shows immediately with reserved space */ #limor-navigation { min-height: var(--navbar-height, 64px); background: var(--bg-navbar, var(--bg-surface, #ffffff)); contain: layout; } /* ============================================ RESPONSIVE NAVIGATION OVERRIDES Mobile-friendly navigation patterns ============================================ */ @media (max-width: 767px) { .navbar__links, .navbar__nav { display: none; } .sidebar, #limor-sidebar { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; z-index: 1000; transition: right 0.3s ease; padding-top: 5rem; } .sidebar.open, #limor-sidebar.open { right: 0; } .main-content { padding: var(--spacing-md); margin-right: 0 !important; margin-left: 0 !important; } .hamburger-menu { display: flex !important; flex-direction: column; gap: 4px; padding: var(--spacing-sm); cursor: pointer; background: transparent; border: none; } .hamburger-menu span { width: 24px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: all var(--transition-fast); } .dark .hamburger-menu span { background: var(--text-primary); } } @media (min-width: 768px) { .hamburger-menu { display: none !important; } } /* ============================================ PAGE-SPECIFIC SKIP STYLES For pages that need custom layouts ============================================ */ /* Login page - no sidebar */ body[data-skip-navigation] .sidebar, body[data-skip-navigation] #limor-sidebar { display: none; } body[data-skip-navigation] .main-content { max-width: 100%; margin: 0; } /* Full-width mode for specific pages */ body[data-layout="full-width"] .sidebar, body[data-layout="full-width"] #limor-sidebar { display: none; } body[data-layout="full-width"] .main-content { max-width: 100%; margin: 0; } /* ============================================ STAT CARDS Dashboard statistics cards ============================================ */ .stat-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--spacing-lg); transition: all var(--transition-normal); } .stat-card:hover { border-color: var(--color-primary-200); box-shadow: var(--shadow-md); } .dark .stat-card:hover { border-color: var(--color-primary-800); } .stat-card__label { font-size: var(--font-size-base); color: var(--text-secondary); margin-bottom: var(--spacing-xs); } .stat-card__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); } .stat-card__change { font-size: var(--font-size-base); margin-top: var(--spacing-xs); } .stat-card__change--positive { color: var(--color-success-600); } .stat-card__change--negative { color: var(--color-error-600); } /* Stat Grid */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); } /* ============================================ LOADING STATES ============================================ */ .loading-skeleton { background: linear-gradient( 90deg, var(--bg-surface-hover) 25%, var(--bg-surface) 50%, var(--bg-surface-hover) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ EMPTY STATES ============================================ */ .empty-state { text-align: center; padding: var(--spacing-2xl); color: var(--text-secondary); } .empty-state__icon { font-size: 3rem; margin-bottom: var(--spacing-md); opacity: 0.5; } .empty-state__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--spacing-sm); } .empty-state__description { font-size: var(--font-size-sm); max-width: 400px; margin: 0 auto; } /* ============================================ ALERTS ============================================ */ .alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .alert--info { background: var(--color-info-50); border: 1px solid var(--color-info-500); color: var(--color-info-700); } .alert--success { background: var(--color-success-50); border: 1px solid var(--color-success-500); color: var(--color-success-700); } .alert--warning { background: var(--color-warning-50); border: 1px solid var(--color-warning-500); color: var(--color-warning-700); } .alert--error { background: var(--color-error-50); border: 1px solid var(--color-error-500); color: var(--color-error-700); } .alert__icon { flex-shrink: 0; width: 20px; height: 20px; } .alert__content { flex: 1; } .alert__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); } /* ============================================ DIVIDERS ============================================ */ .divider { height: 1px; background: var(--border-default); margin: var(--spacing-lg) 0; } .divider--with-text { display: flex; align-items: center; gap: var(--spacing-md); color: var(--text-muted); font-size: var(--font-size-sm); } .divider--with-text::before, .divider--with-text::after { content: ''; flex: 1; height: 1px; background: var(--border-default); } /* ============================================ TOOLTIPS ============================================ */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-neutral-900); color: white; font-size: var(--font-size-xs); border-radius: var(--radius-md); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-fast); z-index: var(--z-tooltip); } [data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); } /* RTL tooltip position */ html[dir="rtl"] [data-tooltip]::after { left: auto; right: 50%; transform: translateX(50%) translateY(-8px); } html[dir="rtl"] [data-tooltip]:hover::after { transform: translateX(50%) translateY(-4px); }