/* ============================================ SPACING SCALE SYSTEM (Option A - 0.25rem increments) ============================================ */ :root { /* Desktop Spacing Scale */ --spacing-xs: 0.25rem; /* 4px - tight spacing, internal gaps */ --spacing-sm: 0.5rem; /* 8px - small gaps, compact elements */ --spacing-md: 0.75rem; /* 12px - medium gaps, standard spacing */ --spacing-base: 1rem; /* 16px - base spacing, standard padding */ --spacing-lg: 1.25rem; /* 20px - large spacing, section padding */ --spacing-xl: 1.5rem; /* 24px - extra large, major sections */ --spacing-2xl: 2rem; /* 32px - section spacing, card margins */ --spacing-3xl: 2.5rem; /* 40px - major sections, page margins */ /* Mobile Spacing Scale (optimized for smaller screens) */ --spacing-mobile-xs: 0.25rem; /* 4px - same as desktop */ --spacing-mobile-sm: 0.4rem; /* 6.4px - slightly smaller */ --spacing-mobile-md: 0.6rem; /* 9.6px - medium mobile spacing */ --spacing-mobile-base: 0.8rem; /* 12.8px - base mobile spacing */ --spacing-mobile-lg: 1rem; /* 16px - large mobile spacing */ --spacing-mobile-xl: 1.25rem; /* 20px - extra large mobile */ --spacing-mobile-2xl: 1.5rem; /* 24px - section spacing mobile */ /* Mobile Touch Targets - Enhanced for better UX */ --touch-target-min: 48px; /* Minimum touch target (better than 44px) */ --touch-target-comfort: 52px; /* Comfortable touch target */ --touch-target-large: 56px; /* Large touch target for primary actions */ /* ============================================ UNIFIED BUTTON COMPONENT SYSTEM ============================================ */ /* Button Sizes */ --btn-padding-sm-y: var(--spacing-sm); --btn-padding-sm-x: var(--spacing-md); --btn-padding-base-y: var(--spacing-md); --btn-padding-base-x: var(--spacing-lg); --btn-padding-lg-y: var(--spacing-base); --btn-padding-lg-x: var(--spacing-xl); --btn-font-size-sm: 0.85rem; --btn-font-size-base: 0.9rem; --btn-font-size-lg: 1rem; --btn-height-sm: 36px; --btn-height-base: 44px; --btn-height-lg: 52px; --btn-border-radius: 8px; --btn-border-width: var(--border-width-thin); --btn-transition: all var(--transition-base) var(--transition-easing); /* Border Radius Scale - Unified System */ --radius-sm: 4px; /* Small elements, badges, tags */ --radius-base: 8px; /* Buttons, inputs, standard elements */ --radius-md: 10px; /* Cards, containers */ --radius-lg: 12px; /* Large cards, sections */ --radius-xl: 16px; /* Extra large containers */ --radius-round: 50%; /* Circular elements */ /* ============================================ UNIFIED TYPOGRAPHY SCALE ============================================ */ --font-size-title: 1.8rem; /* Page titles */ --font-size-section: 1.4rem; /* Section headers */ --font-size-body: 1rem; /* Body text */ --font-size-sm: 0.875rem; /* Small text */ --font-size-xs: 0.75rem; /* Extra small text */ --font-weight-title: 600; /* Page title weight */ --font-weight-section: 600; /* Section header weight */ --font-weight-body: 400; /* Body text weight */ /* ============================================ UNIFIED PAGE HEADER COMPONENT ============================================ */ --page-header-margin-bottom: var(--spacing-xl); --page-header-padding-bottom: var(--spacing-base); --page-header-border-width: var(--border-width-medium); --page-header-border-color: var(--border-secondary); --page-header-title-size: var(--font-size-title); --page-header-title-weight: var(--font-weight-title); --page-header-title-color: var(--text-primary); --page-header-icon-color: var(--gold-dark); --page-header-gap: var(--spacing-md); /* ============================================ PRIMARY COLORS & GRADIENTS ============================================ */ --gold-light: #f5d76e; --gold-dark: #d4af37; --primary-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 100%); /* ============================================ TEXT COLORS ============================================ */ --text-primary: #2c3e50; --text-secondary: #34495e; /* ============================================ UNIFIED CARD SYSTEM (Glass Effect) ============================================ */ --glass-bg: rgba(255, 255, 255, var(--opacity-glass)); --glass-border: var(--border-secondary); --glass-shadow: var(--shadow-gold); --card-border-radius: var(--radius-xl); --card-padding: var(--spacing-base); --card-header-border-bottom: 1px solid var(--glass-border); --card-header-padding-bottom: var(--spacing-md); --card-header-margin-bottom: var(--spacing-md); /* Button Colors - Primary */ --btn-primary-bg: linear-gradient(135deg, #f5d76e, #d4af37); --btn-primary-bg-hover: linear-gradient(135deg, #d4af37, #b8941f); --btn-primary-border: #d4af37; --btn-primary-color: #2c3e50; --btn-primary-color-hover: #2c3e50; --btn-primary-shadow: 0 2px 8px rgba(245, 215, 110, 0.3); --btn-primary-shadow-hover: 0 4px 12px rgba(245, 215, 110, 0.4); /* Button Colors - Secondary/Outline */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: rgba(255, 255, 255, var(--opacity-subtle)); --btn-secondary-border: rgba(255, 215, 0, 0.3); --btn-secondary-color: #2c3e50; --btn-secondary-color-hover: #2c3e50; --btn-secondary-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); --btn-secondary-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15); /* Button Colors - Success */ --btn-success-bg: rgba(46, 204, 113, 0.1); --btn-success-bg-hover: #2ecc71; --btn-success-border: rgba(46, 204, 113, 0.3); --btn-success-color: #2c3e50; --btn-success-color-hover: white; /* Button Colors - Danger */ --btn-danger-bg: rgba(231, 76, 60, 0.1); --btn-danger-bg-hover: #e74c3c; --btn-danger-border: rgba(231, 76, 60, 0.3); --btn-danger-color: #2c3e50; --btn-danger-color-hover: white; /* Button Colors - Warning */ --btn-warning-bg: rgba(241, 196, 15, 0.1); --btn-warning-bg-hover: #f1c40f; --btn-warning-border: rgba(241, 196, 15, 0.3); --btn-warning-color: #2c3e50; --btn-warning-color-hover: #2c3e50; /* Button Icon Spacing */ --btn-icon-gap: var(--spacing-sm); --btn-icon-size: 1rem; /* ============================================ UNIFIED LOADING STATE SYSTEM ============================================ */ /* Loading Spinner Sizes */ --loading-spinner-sm: 16px; --loading-spinner-base: 24px; --loading-spinner-lg: 40px; --loading-spinner-xl: 60px; /* Loading Spinner Colors */ --loading-spinner-color: var(--gold-dark); --loading-spinner-bg: rgba(212, 175, 55, 0.1); --loading-spinner-border: var(--border-width-thick); /* Loading Overlay */ --loading-overlay-bg: rgba(255, 255, 255, var(--opacity-overlay)); --loading-overlay-z-index: var(--z-loading); /* Loading Skeleton */ --skeleton-bg: #f0f0f0; --skeleton-shimmer: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); --skeleton-shimmer-size: 200% 100%; /* Loading Animation Duration */ --loading-spin-duration: 0.8s; --loading-shimmer-duration: 1.5s; /* ============================================ UNIFIED ERROR HANDLING SYSTEM ============================================ */ /* Error Notification Colors */ --error-bg: #d32f2f; --error-bg-light: rgba(211, 47, 47, 0.1); --error-border: #c62828; --error-color: #ffffff; --error-icon: #ff5252; --warning-bg: #f57c00; --warning-bg-light: rgba(245, 124, 0, 0.1); --warning-border: #e65100; --warning-color: #ffffff; --warning-icon: #ff9800; --success-bg: #2e7d32; --success-bg-light: rgba(46, 125, 50, 0.1); --success-border: #1b5e20; --success-color: #ffffff; --success-icon: #4caf50; --info-bg: #1976d2; --info-bg-light: rgba(25, 118, 210, 0.1); --info-border: #1565c0; --info-color: #ffffff; --info-icon: #2196f3; /* Error Notification Sizes */ --error-notification-padding-y: var(--spacing-base); --error-notification-padding-x: var(--spacing-xl); --error-notification-border-radius: var(--btn-border-radius); --error-notification-font-size: 0.9rem; --error-notification-icon-size: 1.2rem; --error-notification-gap: var(--spacing-sm); /* Error Notification Positioning */ --error-notification-top: var(--spacing-xl); --error-notification-right: var(--spacing-xl); --error-notification-z-index: var(--z-notification); --error-notification-max-width: 400px; --error-notification-min-width: 300px; /* Form Field Error States */ --error-field-border: #d32f2f; --error-field-bg: rgba(211, 47, 47, 0.05); --error-field-icon: #d32f2f; --error-field-text: #d32f2f; --error-field-font-size: 0.85rem; /* Error State Components */ --error-state-bg: #fafafa; --error-state-border: #e0e0e0; --error-state-text: #757575; --error-state-icon-size: 3rem; --error-state-title-size: 1.25rem; --error-state-message-size: 0.95rem; /* Error Animation */ --error-shake-duration: 0.5s; --error-fade-duration: 0.3s; --error-slide-duration: 0.3s; /* ============================================ FORM INPUT COLORS ============================================ */ --input-border: #e0e0e0; --input-border-focus: var(--gold-light); --input-bg: transparent; --input-text: var(--text-primary); --input-placeholder: #6c757d; --input-focus-shadow: rgba(245, 215, 110, 0.25); /* ============================================ CHECKBOX & RADIO BUTTON SIZING ============================================ */ --checkbox-size-desktop: 1.125rem; /* 18px - Desktop checkbox/radio size */ --checkbox-size-mobile: 1.25rem; /* 20px - Mobile checkbox/radio size (better touch target) */ --checkbox-border-width: 2px; --checkbox-border-radius: 4px; --radio-border-radius: 50%; /* ============================================ BACKGROUND COLORS ============================================ */ --bg-primary: linear-gradient(120deg, #fffbe6 0%, #fff9e6 100%); --bg-secondary: rgba(255, 255, 255, 0.95); --bg-overlay: rgba(255, 255, 255, 0.9); --bg-body-gradient-start: #fffbe6; --bg-body-gradient-end: #fff9e6; /* ============================================ BORDER COLORS ============================================ */ --border-primary: #e0e0e0; --border-secondary: rgba(255, 215, 0, 0.2); --border-focus: var(--gold-light); /* ============================================ TEXT COLORS (Extensions) ============================================ */ --text-muted: #6c757d; --text-disabled: rgba(44, 62, 80, 0.5); --text-link: var(--gold-dark); --text-link-hover: var(--gold-light); /* ============================================ VALIDATION COLORS ============================================ */ --validation-error: #dc3545; --validation-success: #198754; --validation-error-bg: rgba(211, 47, 47, 0.05); --validation-success-bg: rgba(46, 125, 50, 0.05); /* ============================================ CARD HEADER COLORS ============================================ */ --card-header-bg: linear-gradient(135deg, rgba(245, 215, 110, 0.95), rgba(212, 175, 55, 0.95)); --card-header-text: var(--text-primary); /* ============================================ SHADOW SYSTEM ============================================ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-xl: 0 8px 32px rgba(255, 215, 0, 0.1); --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15); --shadow-focus: 0 0 0 0.2rem rgba(245, 215, 110, 0.25); --shadow-gold: 0 8px 32px rgba(255, 215, 0, 0.1); --shadow-gold-hover: 0 8px 32px rgba(255, 215, 0, 0.15); /* ============================================ TRANSITION SYSTEM ============================================ */ --transition-fast: 0.15s; --transition-base: 0.2s; --transition-slow: 0.3s; --transition-slower: 0.5s; --transition-easing: ease; --transition-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================ Z-INDEX SYSTEM ============================================ */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-notification: 1080; --z-loading: 1090; --z-max: 9999; /* ============================================ OPACITY SYSTEM ============================================ */ --opacity-disabled: 0.5; --opacity-hover: 0.8; --opacity-overlay: 0.9; --opacity-glass: 0.95; --opacity-subtle: 0.1; --opacity-medium: 0.5; /* ============================================ BORDER WIDTH SYSTEM ============================================ */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; /* ============================================ TYPOGRAPHY SYSTEM (Extensions) ============================================ */ --font-size-form: 0.95rem; --font-size-help: 0.875rem; --font-size-card-header: 1.4rem; /* ============================================ BACKDROP FILTER SYSTEM ============================================ */ --backdrop-blur-sm: 5px; --backdrop-blur-md: 10px; --backdrop-blur-lg: 15px; /* ============================================ GRADIENT SYSTEM (Extensions) ============================================ */ --gradient-card-header: linear-gradient(135deg, rgba(245, 215, 110, 0.95), rgba(212, 175, 55, 0.95)); --gradient-body-bg: linear-gradient(120deg, #fffbe6 0%, #fff9e6 100%); --gradient-overlay-radial-1: radial-gradient(circle at 20% 30%, rgba(255,215,0,0.08) 0%, transparent 60%); --gradient-overlay-radial-2: radial-gradient(circle at 80% 70%, rgba(212,175,55,0.10) 0%, transparent 60%); /* ============================================ AUTH PAGES (LOGIN/REGISTER) UNIFIED SYSTEM ============================================ */ /* Auth Background */ --auth-bg-image: url('/static/images/background-auth.webp'); --auth-bg-overlay: rgba(0, 0, 0, 0.3); --auth-bg-color: #000000; --auth-bg-size: cover; --auth-bg-position: center; --auth-bg-attachment: fixed; /* Auth Card */ --auth-card-bg: transparent; --auth-card-border-radius: var(--radius-lg); --auth-card-padding: var(--spacing-3xl) var(--spacing-2xl); --auth-card-shadow: none; --auth-card-max-width: 500px; /* Auth Typography */ --auth-title-size: 2.5rem; --auth-title-weight: 700; --auth-title-color: #ffffff; --auth-subtitle-size: 1rem; --auth-subtitle-color: rgba(255, 255, 255, 0.8); --auth-link-color: #ffffff; --auth-link-hover-color: rgba(255, 255, 255, 0.8); /* Auth Input Fields (Resend Style - Dark) */ --auth-input-bg: #3a3a3a; --auth-input-border: rgba(255, 255, 255, 0.15); --auth-input-border-radius: 10px; --auth-input-border-focus: rgba(255, 255, 255, 0.25); --auth-input-text: #ffffff; --auth-input-placeholder: rgba(255, 255, 255, 0.3); --auth-input-height: 48px; --auth-input-padding: 12px 16px; --auth-input-shadow: none; --auth-input-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.1); /* Auth Button (Resend Style - Less Prominent) */ --auth-btn-bg: #3a3a3a; --auth-btn-bg-hover: #454545; --auth-btn-color: #ffffff; --auth-btn-border: none; --auth-btn-border-radius: var(--radius-base); --auth-btn-padding: var(--spacing-base) var(--spacing-xl); --auth-btn-height: 48px; --auth-btn-font-size: 0.95rem; --auth-btn-font-weight: 500; --auth-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); --auth-btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.15); --auth-btn-transition: all var(--transition-base) var(--transition-easing); --auth-btn-disabled-bg: #2d2d2d; --auth-btn-disabled-opacity: 0.5; /* Auth Navbar */ --auth-navbar-bg: transparent; --auth-navbar-text: #ffffff; --auth-navbar-link-hover: rgba(255, 255, 255, 0.8); --auth-navbar-btn-bg: transparent; --auth-navbar-btn-border: rgba(255, 255, 255, 0.3); --auth-navbar-btn-color: #ffffff; --auth-navbar-btn-hover-bg: rgba(255, 255, 255, 0.1); /* Auth Container */ --auth-container-min-height: 100vh; --auth-container-padding: var(--spacing-2xl); --auth-container-mobile-padding: var(--spacing-lg); } /* ============================================ DARK MODE VARIABLE OVERRIDES ============================================ */ [data-theme="dark"], .dark-mode { /* Background Colors - Slightly lighter for better contrast */ --bg-primary: #1e1e1e; --bg-secondary: #2d2d2d; --bg-tertiary: #3a3a3a; /* Text Colors - Brighter for better visibility */ --text-primary: #f0f0f0; --text-secondary: #d0d0d0; --text-muted: #b0b0b0; --text-link: #d4af37; /* Glass/Card Colors - Lighter for better contrast */ --glass-bg: rgba(50, 50, 50, 0.95); --glass-border: rgba(212, 175, 55, 0.3); /* Input Colors - Enhanced for better visibility */ --input-bg: #333333; --input-border: rgba(255, 255, 255, 0.3); --input-border-focus: var(--gold-light); --input-color: var(--text-primary); --input-placeholder: var(--text-muted); /* Button Colors - Primary (keep gold theme) */ --btn-primary-bg: linear-gradient(135deg, #d4af37, #b8941f); --btn-primary-bg-hover: linear-gradient(135deg, #b8941f, #9a7a1a); --btn-primary-border: #d4af37; --btn-primary-color: #1a1a1a; --btn-primary-color-hover: #1a1a1a; --btn-primary-shadow: 0 2px 8px rgba(212, 175, 55, 0.4); --btn-primary-shadow-hover: 0 4px 12px rgba(212, 175, 55, 0.5); /* Button Colors - Secondary */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: rgba(255, 255, 255, 0.1); --btn-secondary-border: rgba(212, 175, 55, 0.5); --btn-secondary-color: #e0e0e0; --btn-secondary-color-hover: #e0e0e0; --btn-secondary-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); --btn-secondary-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.4); /* Button Colors - Success */ --btn-success-bg: rgba(46, 204, 113, 0.2); --btn-success-bg-hover: #2ecc71; --btn-success-border: rgba(46, 204, 113, 0.5); --btn-success-color: #e0e0e0; --btn-success-color-hover: #1a1a1a; /* Button Colors - Danger */ --btn-danger-bg: rgba(231, 76, 60, 0.2); --btn-danger-bg-hover: #e74c3c; --btn-danger-border: rgba(231, 76, 60, 0.5); --btn-danger-color: #e0e0e0; --btn-danger-color-hover: #ffffff; /* Button Colors - Warning */ --btn-warning-bg: rgba(241, 196, 15, 0.2); --btn-warning-bg-hover: #f1c40f; --btn-warning-border: rgba(241, 196, 15, 0.5); --btn-warning-color: #1a1a1a; --btn-warning-color-hover: #1a1a1a; /* Shadows - Darker for dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.7); --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 0.2rem rgba(212, 175, 55, 0.4); --shadow-gold: 0 8px 32px rgba(212, 175, 55, 0.2); --shadow-gold-hover: 0 8px 32px rgba(212, 175, 55, 0.3); /* Border Colors */ --border-primary: rgba(255, 255, 255, 0.1); --border-secondary: rgba(212, 175, 55, 0.3); /* Body Background */ --gradient-body-bg: linear-gradient(120deg, #1a1a1a 0%, #2d2d2d 100%); /* Card Header */ --card-header-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(184, 134, 11, 0.95)); --card-header-text: #1a1a1a; /* Loading Overlay */ --loading-overlay-bg: rgba(26, 26, 26, var(--opacity-overlay)); /* Skeleton */ --skeleton-bg: #3a3a3a; --skeleton-shimmer: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%); /* Error/Warning/Success/Info - Keep same colors but adjust backgrounds */ --error-bg-light: rgba(211, 47, 47, 0.2); --warning-bg-light: rgba(245, 124, 0, 0.2); --success-bg-light: rgba(46, 125, 50, 0.2); --info-bg-light: rgba(25, 118, 210, 0.2); /* Validation Colors */ --validation-error-bg: rgba(211, 47, 47, 0.2); --validation-success-bg: rgba(46, 125, 50, 0.2); /* Sidebar & Navbar Dark Mode Overrides */ --sidebar-bg: linear-gradient(180deg, rgba(45, 45, 45, 0.98) 0%, rgba(35, 35, 35, 0.98) 100%); --sidebar-text-color: var(--text-secondary); --sidebar-text-color-hover: var(--text-primary); --sidebar-icon-color: var(--text-muted); --sidebar-icon-color-hover: var(--gold-light); --sidebar-active-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(255, 215, 0, 0.1) 100%); --sidebar-active-color: var(--gold-light); --sidebar-logo-color: var(--text-primary); --sidebar-user-name-color: var(--text-primary); --sidebar-user-role-color: var(--text-muted); --sidebar-footer-bg: rgba(45, 45, 45, 0.5); --navbar-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.98) 0%, rgba(184, 134, 11, 0.98) 100%); /* Keep gold for navbar */ --navbar-text-color: white; --nav-link-bg: rgba(255, 255, 255, 0.05); --nav-link-bg-hover: rgba(255, 255, 255, 0.1); --nav-link-border: rgba(255, 255, 255, 0.1); --navbar-collapse-bg: var(--glass-bg); --navbar-collapse-border: var(--glass-border); /* Page Header Dark Mode Overrides */ --page-header-title-color: var(--text-primary); --page-header-icon-color: var(--gold-light); --page-header-border-color: var(--border-primary); } /* Dark Mode Specific Element Styles */ [data-theme="dark"] .sidebar, .dark-mode .sidebar { background: var(--sidebar-bg); border-right: var(--border-width-thin) solid var(--border-primary); } [data-theme="dark"] .navbar, .dark-mode .navbar { background: var(--navbar-bg); backdrop-filter: blur(var(--backdrop-blur-md)); -webkit-backdrop-filter: blur(var(--backdrop-blur-md)); border-bottom: var(--border-width-thin) solid var(--border-primary); } [data-theme="dark"] .nav-link, .dark-mode .nav-link { background: var(--nav-link-bg); border-color: var(--nav-link-border); color: var(--text-primary); } [data-theme="dark"] .nav-link:hover, .dark-mode .nav-link:hover { background: var(--nav-link-bg-hover); } [data-theme="dark"] .dropdown-menu, .dark-mode .dropdown-menu { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } [data-theme="dark"] .dropdown-item, .dark-mode .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, .dark-mode .dropdown-item:hover { background: var(--nav-link-bg-hover); color: var(--text-primary); } /* Sidebar Footer Dropdown Menu - Dark Mode */ [data-theme="dark"] .sidebar-footer .dropdown-menu, .dark-mode .sidebar-footer .dropdown-menu { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card, .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card { background: var(--bg-secondary) !important; border-bottom-color: var(--border-primary) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card .user-avatar, .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card .user-avatar { background: rgba(212, 175, 55, 0.2) !important; border-color: var(--gold-light) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card .user-avatar i, .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card .user-avatar i { color: var(--gold-light) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#D4AF37"], .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#D4AF37"] { color: var(--gold-light) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#2c3e50"], .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#2c3e50"] { color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#888"], .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card div[style*="color:#888"] { color: var(--text-muted) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .user-info-dropdown-card i[style*="color:#D4AF37"], .dark-mode .sidebar-footer .dropdown-menu .user-info-dropdown-card i[style*="color:#D4AF37"] { color: var(--gold-light) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .dropdown-item, .dark-mode .sidebar-footer .dropdown-menu .dropdown-item { color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .dropdown-item:hover, .dark-mode .sidebar-footer .dropdown-menu .dropdown-item:hover { background: var(--nav-link-bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .dropdown-item.text-danger, .dark-mode .sidebar-footer .dropdown-menu .dropdown-item.text-danger { color: #ff6b6b !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .dropdown-item.text-danger:hover, .dark-mode .sidebar-footer .dropdown-menu .dropdown-item.text-danger:hover { color: #ff5252 !important; background: rgba(255, 107, 107, 0.1) !important; } [data-theme="dark"] .sidebar-footer .dropdown-menu .dropdown-divider, .dark-mode .sidebar-footer .dropdown-menu .dropdown-divider { border-color: var(--border-primary) !important; opacity: 0.5; } /* Sidebar User Chevron Icon - Dark Mode */ [data-theme="dark"] .sidebar-user .fa-chevron-up, .dark-mode .sidebar-user .fa-chevron-up { color: var(--text-muted) !important; } [data-theme="dark"] .card, .dark-mode .card { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, .dark-mode .form-control, .dark-mode .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-color); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, .dark-mode .form-control:focus, .dark-mode .form-select:focus { background-color: var(--input-bg); border-color: var(--input-border-focus); color: var(--input-color); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); } /* Form Labels */ [data-theme="dark"] .form-label, [data-theme="dark"] label:not(.form-check-label):not(.btn), .dark-mode .form-label, .dark-mode label:not(.form-check-label):not(.btn) { color: var(--text-primary); font-weight: 500; } /* Form Floating Labels */ [data-theme="dark"] .form-floating > label, .dark-mode .form-floating > label { color: var(--text-muted); } [data-theme="dark"] .form-floating > .form-control:focus ~ label, [data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label, .dark-mode .form-floating > .form-control:focus ~ label, .dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--gold-light); } /* Form Placeholders */ [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-select::placeholder, .dark-mode .form-control::placeholder, .dark-mode .form-select::placeholder { color: var(--input-placeholder); opacity: 0.8; } /* Form Help Text */ [data-theme="dark"] .form-text, [data-theme="dark"] .form-help, .dark-mode .form-text, .dark-mode .form-help { color: var(--text-muted); } /* Input Groups */ [data-theme="dark"] .input-group, .dark-mode .input-group { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme="dark"] .input-group-text, .dark-mode .input-group-text { background-color: var(--bg-tertiary); border-color: var(--input-border); color: var(--text-primary); } [data-theme="dark"] .input-group:focus-within, .dark-mode .input-group:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); } /* Form Checkboxes and Radios */ [data-theme="dark"] .form-check-label, .dark-mode .form-check-label { color: var(--text-primary); } [data-theme="dark"] .form-check-input, .dark-mode .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme="dark"] .form-check-input:checked, .dark-mode .form-check-input:checked { background-color: var(--gold-light); border-color: var(--gold-light); } [data-theme="dark"] .form-check-input:focus, .dark-mode .form-check-input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); } /* Form Switches */ [data-theme="dark"] .form-switch .form-check-input, .dark-mode .form-switch .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme="dark"] .form-switch .form-check-input:checked, .dark-mode .form-switch .form-check-input:checked { background-color: var(--gold-light); border-color: var(--gold-light); } /* Form Validation */ [data-theme="dark"] .is-invalid, .dark-mode .is-invalid { border-color: #dc3545; background-color: rgba(220, 53, 69, 0.1); } [data-theme="dark"] .is-valid, .dark-mode .is-valid { border-color: #198754; background-color: rgba(25, 135, 84, 0.1); } [data-theme="dark"] .invalid-feedback, [data-theme="dark"] .valid-feedback, .dark-mode .invalid-feedback, .dark-mode .valid-feedback { color: var(--text-primary); } /* Form Range Inputs */ [data-theme="dark"] .form-range, .dark-mode .form-range { background-color: var(--input-bg); } [data-theme="dark"] .form-range::-webkit-slider-thumb, .dark-mode .form-range::-webkit-slider-thumb { background-color: var(--gold-light); } [data-theme="dark"] .form-range::-moz-range-thumb, .dark-mode .form-range::-moz-range-thumb { background-color: var(--gold-light); } /* Disabled Form Controls */ [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled, [data-theme="dark"] .form-check-input:disabled, .dark-mode .form-control:disabled, .dark-mode .form-select:disabled, .dark-mode .form-check-input:disabled { background-color: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-muted); opacity: 0.6; } /* Readonly Form Controls */ [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-select[readonly], .dark-mode .form-control[readonly], .dark-mode .form-select[readonly] { background-color: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-secondary); } [data-theme="dark"] .table, .dark-mode .table { color: var(--text-primary); background-color: var(--glass-bg); } [data-theme="dark"] .table th, .dark-mode .table th { background-color: var(--bg-tertiary); border-color: var(--border-primary); color: var(--text-primary); font-weight: 600; } [data-theme="dark"] .table td, .dark-mode .table td { border-color: var(--border-primary); background-color: transparent; color: var(--text-primary); } [data-theme="dark"] .table tbody tr, .dark-mode .table tbody tr { background-color: transparent; color: var(--text-primary); } [data-theme="dark"] .table tbody tr td, .dark-mode .table tbody tr td { color: var(--text-primary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), .dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bg-secondary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) td, .dark-mode .table-striped > tbody > tr:nth-of-type(odd) td { color: var(--text-primary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even), .dark-mode .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--bg-primary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) td, .dark-mode .table-striped > tbody > tr:nth-of-type(even) td { color: var(--text-primary); } [data-theme="dark"] .table-hover > tbody > tr:hover, .dark-mode .table-hover > tbody > tr:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } [data-theme="dark"] .table-hover > tbody > tr:hover td, .dark-mode .table-hover > tbody > tr:hover td { color: var(--text-primary); } /* Ensure all table content is visible */ [data-theme="dark"] .table a, .dark-mode .table a { color: var(--text-link); } [data-theme="dark"] .table a:hover, .dark-mode .table a:hover { color: var(--gold-light); } [data-theme="dark"] .table .badge, .dark-mode .table .badge { color: var(--text-primary); } [data-theme="dark"] .table .text-muted, .dark-mode .table .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .modal-content, .dark-mode .modal-content { background-color: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } [data-theme="dark"] .modal-header, .dark-mode .modal-header { border-bottom-color: var(--border-primary); } [data-theme="dark"] .modal-footer, .dark-mode .modal-footer { border-top-color: var(--border-primary); } [data-theme="dark"] .modal-title, .dark-mode .modal-title { color: var(--text-primary); } [data-theme="dark"] .modal-body, .dark-mode .modal-body { color: var(--text-primary); } [data-theme="dark"] .btn-close, .dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Alerts - Dark Mode */ [data-theme="dark"] .alert, .dark-mode .alert { background-color: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } [data-theme="dark"] .alert-success, .dark-mode .alert-success { background-color: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.5); color: var(--text-primary); } [data-theme="dark"] .alert-danger, .dark-mode .alert-danger { background-color: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.5); color: var(--text-primary); } [data-theme="dark"] .alert-warning, .dark-mode .alert-warning { background-color: rgba(241, 196, 15, 0.15); border-color: rgba(241, 196, 15, 0.5); color: var(--text-primary); } [data-theme="dark"] .alert-info, .dark-mode .alert-info { background-color: rgba(25, 118, 210, 0.15); border-color: rgba(25, 118, 210, 0.5); color: var(--text-primary); } [data-theme="dark"] .alert-primary, .dark-mode .alert-primary { background-color: rgba(212, 175, 55, 0.15); border-color: rgba(212, 175, 55, 0.5); color: var(--text-primary); } /* Badges - Dark Mode */ [data-theme="dark"] .badge, .dark-mode .badge { color: var(--text-primary); } [data-theme="dark"] .badge.bg-primary, .dark-mode .badge.bg-primary { background-color: var(--gold-light) !important; color: var(--bg-primary) !important; } [data-theme="dark"] .badge.bg-secondary, .dark-mode .badge.bg-secondary { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-success, .dark-mode .badge.bg-success { background-color: rgba(46, 204, 113, 0.3) !important; color: #2ecc71 !important; } [data-theme="dark"] .badge.bg-danger, .dark-mode .badge.bg-danger { background-color: rgba(231, 76, 60, 0.3) !important; color: #e74c3c !important; } [data-theme="dark"] .badge.bg-warning, .dark-mode .badge.bg-warning { background-color: rgba(241, 196, 15, 0.3) !important; color: #f1c40f !important; } [data-theme="dark"] .badge.bg-info, .dark-mode .badge.bg-info { background-color: rgba(25, 118, 210, 0.3) !important; color: #1976d2 !important; } [data-theme="dark"] .badge.bg-light, .dark-mode .badge.bg-light { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-dark, .dark-mode .badge.bg-dark { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /* Pagination - Dark Mode */ [data-theme="dark"] .pagination, .dark-mode .pagination { color: var(--text-primary); } [data-theme="dark"] .page-link, .dark-mode .page-link { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-theme="dark"] .page-link:hover, .dark-mode .page-link:hover { background-color: var(--bg-tertiary); border-color: var(--gold-light); color: var(--text-primary); } [data-theme="dark"] .page-item.active .page-link, .dark-mode .page-item.active .page-link { background-color: var(--gold-light); border-color: var(--gold-light); color: var(--bg-primary); } [data-theme="dark"] .page-item.disabled .page-link, .dark-mode .page-item.disabled .page-link { background-color: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-muted); opacity: 0.5; } /* Breadcrumbs - Dark Mode */ [data-theme="dark"] .breadcrumb, .dark-mode .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb-item, .dark-mode .breadcrumb-item { color: var(--text-secondary); } [data-theme="dark"] .breadcrumb-item.active, .dark-mode .breadcrumb-item.active { color: var(--text-primary); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before, .dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item a, .dark-mode .breadcrumb-item a { color: var(--text-link); } [data-theme="dark"] .breadcrumb-item a:hover, .dark-mode .breadcrumb-item a:hover { color: var(--gold-light); } /* Progress Bars - Dark Mode */ [data-theme="dark"] .progress, .dark-mode .progress { background-color: var(--bg-secondary); } [data-theme="dark"] .progress-bar, .dark-mode .progress-bar { background-color: var(--gold-light); color: var(--bg-primary); } [data-theme="dark"] .progress-bar.bg-success, .dark-mode .progress-bar.bg-success { background-color: #2ecc71 !important; } [data-theme="dark"] .progress-bar.bg-danger, .dark-mode .progress-bar.bg-danger { background-color: #e74c3c !important; } [data-theme="dark"] .progress-bar.bg-warning, .dark-mode .progress-bar.bg-warning { background-color: #f1c40f !important; } [data-theme="dark"] .progress-bar.bg-info, .dark-mode .progress-bar.bg-info { background-color: #1976d2 !important; } /* Card Headers - Dark Mode */ [data-theme="dark"] .card-header, .dark-mode .card-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-primary); color: var(--text-primary); } [data-theme="dark"] .card-header.bg-primary, .dark-mode .card-header.bg-primary { background: var(--card-header-bg) !important; color: var(--card-header-text) !important; } [data-theme="dark"] .card-header.bg-light, .dark-mode .card-header.bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Footer - Dark Mode */ [data-theme="dark"] .footer, .dark-mode .footer { background-color: var(--bg-secondary); border-top-color: var(--border-primary); color: var(--text-secondary); } [data-theme="dark"] .footer .text-muted, .dark-mode .footer .text-muted { color: var(--text-muted) !important; } /* List Groups - Dark Mode */ [data-theme="dark"] .list-group, .dark-mode .list-group { background-color: var(--glass-bg); border-color: var(--glass-border); } [data-theme="dark"] .list-group-item, .dark-mode .list-group-item { background-color: transparent; border-color: var(--border-primary); color: var(--text-primary); } [data-theme="dark"] .list-group-item.active, .dark-mode .list-group-item.active { background-color: var(--gold-light); border-color: var(--gold-light); color: var(--bg-primary); } [data-theme="dark"] .list-group-item:hover, .dark-mode .list-group-item:hover { background-color: var(--bg-secondary); } /* Tooltips - Dark Mode */ [data-theme="dark"] .tooltip .tooltip-inner, .dark-mode .tooltip .tooltip-inner { background-color: var(--bg-tertiary); color: var(--text-primary); } [data-theme="dark"] .tooltip .tooltip-arrow::before, .dark-mode .tooltip .tooltip-arrow::before { border-color: var(--bg-tertiary) transparent transparent transparent; } /* Popovers - Dark Mode */ [data-theme="dark"] .popover, .dark-mode .popover { background-color: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } [data-theme="dark"] .popover-header, .dark-mode .popover-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-primary); color: var(--text-primary); } [data-theme="dark"] .popover-body, .dark-mode .popover-body { color: var(--text-primary); } /* Buttons - Ensure all variants use CSS variables in dark mode */ [data-theme="dark"] .btn-primary, .dark-mode .btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-color); } [data-theme="dark"] .btn-primary:hover, .dark-mode .btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border); color: var(--btn-primary-color-hover); } [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-secondary, .dark-mode .btn-secondary, .dark-mode .btn-outline-secondary { background: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-color); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-outline-secondary:hover, .dark-mode .btn-secondary:hover, .dark-mode .btn-outline-secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border); color: var(--btn-secondary-color-hover); } [data-theme="dark"] .btn-success, .dark-mode .btn-success { background: var(--btn-success-bg); border-color: var(--btn-success-border); color: var(--btn-success-color); } [data-theme="dark"] .btn-success:hover, .dark-mode .btn-success:hover { background: var(--btn-success-bg-hover); border-color: var(--btn-success-border); color: var(--btn-success-color-hover); } [data-theme="dark"] .btn-danger, .dark-mode .btn-danger { background: var(--btn-danger-bg); border-color: var(--btn-danger-border); color: var(--btn-danger-color); } [data-theme="dark"] .btn-danger:hover, .dark-mode .btn-danger:hover { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-border); color: var(--btn-danger-color-hover); } [data-theme="dark"] .btn-warning, .dark-mode .btn-warning { background: var(--btn-warning-bg); border-color: var(--btn-warning-border); color: var(--btn-warning-color); } [data-theme="dark"] .btn-warning:hover, .dark-mode .btn-warning:hover { background: var(--btn-warning-bg-hover); border-color: var(--btn-warning-border); color: var(--btn-warning-color-hover); } [data-theme="dark"] .btn-link, .dark-mode .btn-link { color: var(--text-link); } [data-theme="dark"] .btn-link:hover, .dark-mode .btn-link:hover { color: var(--gold-light); } [data-theme="dark"] .btn-outline-primary, .dark-mode .btn-outline-primary { border-color: var(--gold-light); color: var(--gold-light); background: transparent; } [data-theme="dark"] .btn-outline-primary:hover, .dark-mode .btn-outline-primary:hover { background: var(--gold-light); color: var(--bg-primary); } /* Links - Dark Mode */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item), .dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--text-link); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover, .dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--gold-light); } /* Code/Pre - Dark Mode */ [data-theme="dark"] code, [data-theme="dark"] pre, .dark-mode code, .dark-mode pre { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-primary); } /* Blockquotes - Dark Mode */ [data-theme="dark"] blockquote, .dark-mode blockquote { border-left-color: var(--gold-light); color: var(--text-secondary); } /* Print styles - Always use light mode for printing */ @media print { [data-theme="dark"], .dark-mode { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #2c3e50; --text-secondary: #34495e; --glass-bg: rgba(255, 255, 255, 1); --input-bg: #ffffff; --input-border: #dee2e6; } } /* Mobile spacing override - applies automatically on mobile */ @media (max-width: 768px) { :root { --spacing-xs: var(--spacing-mobile-xs); --spacing-sm: var(--spacing-mobile-sm); --spacing-md: var(--spacing-mobile-md); --spacing-base: var(--spacing-mobile-base); --spacing-lg: var(--spacing-mobile-lg); --spacing-xl: var(--spacing-mobile-xl); --spacing-2xl: var(--spacing-mobile-2xl); } } /* Enhanced Mobile UX Improvements */ @media (max-width: 768px) { /* Better touch targets for all interactive elements */ button, .btn, .action-btn, .nav-link, .dropdown-item, .stat-card, .filter-card, .page-link, .form-control, .form-select, input[type="button"], input[type="submit"] { min-height: var(--touch-target-min); min-width: var(--touch-target-min); } /* Primary action buttons - larger touch targets */ .btn-primary, .btn-success, .btn-danger, .action-btn.primary, .action-btn.sale, .action-btn.inventory { min-height: var(--touch-target-comfort); padding: var(--spacing-base) var(--spacing-lg); } /* Better form input sizing */ .form-control, .form-select, input, textarea, select { font-size: 16px !important; /* Prevents iOS zoom */ padding: var(--spacing-base) var(--spacing-md); min-height: var(--touch-target-min); border-radius: 10px; } /* Better button spacing */ .btn-group, .btn-group-vertical { gap: var(--spacing-sm); } /* Better card padding for mobile */ .card, .card-body { padding: var(--spacing-lg); } /* Better gap spacing between elements */ .row, .d-flex, .flex-column { gap: var(--spacing-md); } /* Better list spacing */ ul, ol { padding-left: var(--spacing-lg); } li { margin-bottom: var(--spacing-sm); } /* Better table cell padding */ .table td, .table th { padding: var(--spacing-base) var(--spacing-md); } /* Better modal padding */ .modal-body { padding: var(--spacing-lg); } .modal-footer { padding: var(--spacing-base) var(--spacing-lg); gap: var(--spacing-sm); } /* Better dropdown spacing */ .dropdown-menu { padding: var(--spacing-sm); gap: var(--spacing-xs); } .dropdown-item { padding: var(--spacing-base) var(--spacing-md); margin-bottom: var(--spacing-xs); } /* Better pagination */ .pagination { gap: var(--spacing-xs); } .page-link { padding: var(--spacing-base) var(--spacing-md); min-width: var(--touch-target-min); } /* Better input group spacing */ .input-group { gap: var(--spacing-xs); } .input-group-text { padding: var(--spacing-base) var(--spacing-md); min-height: var(--touch-target-min); } /* Better alert/notification spacing */ .alert, .notification { padding: var(--spacing-lg); margin-bottom: var(--spacing-base); } /* Better badge spacing */ .badge { padding: var(--spacing-sm) var(--spacing-md); font-size: 0.85rem; } /* Better breadcrumb spacing */ .breadcrumb { gap: var(--spacing-xs); } .breadcrumb-item { padding: var(--spacing-xs) 0; } /* Reduce animation on mobile for better performance */ *, *::before, *::after { animation-duration: 0.2s !important; transition-duration: 0.2s !important; } /* Better scroll behavior */ html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Better focus states for mobile */ *:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; } /* Better form group spacing */ .form-group, .mb-3, .mb-4 { margin-bottom: var(--spacing-base); } /* Better input group on mobile */ .input-group > .form-control, .input-group > .form-select { min-height: var(--touch-target-min); } /* Better label spacing */ .form-label { margin-bottom: var(--spacing-sm); font-weight: 600; font-size: 0.95rem; } /* Better card spacing */ .card { margin-bottom: var(--spacing-base); } /* Better list item spacing */ .list-group-item { padding: var(--spacing-base) var(--spacing-md); min-height: var(--touch-target-min); } /* Better badge/button group spacing */ .btn-group .btn { padding: var(--spacing-base) var(--spacing-md); } /* Better spacing for flex containers */ .d-flex { gap: var(--spacing-sm); } /* Better spacing for grid layouts */ .row { margin-left: calc(-1 * var(--spacing-sm)); margin-right: calc(-1 * var(--spacing-sm)); } .row > * { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } /* ============================================ UNIFIED CHECKBOX & RADIO BUTTON SYSTEM - MOBILE ============================================ */ /* Mobile: Slightly larger checkboxes/radios for better touch, but still compact */ .form-check-input[type="checkbox"], .form-check-input[type="radio"] { width: var(--checkbox-size-mobile) !important; height: var(--checkbox-size-mobile) !important; min-width: var(--checkbox-size-mobile) !important; min-height: var(--checkbox-size-mobile) !important; max-width: var(--checkbox-size-mobile) !important; max-height: var(--checkbox-size-mobile) !important; margin-top: 0.125rem; margin-right: var(--spacing-sm); flex-shrink: 0; box-sizing: border-box; line-height: 1 !important; padding: 0 !important; vertical-align: middle; aspect-ratio: 1 / 1; } /* Mobile: Form Switch - HORIZONTAL with proper sizing */ .form-check.form-switch { padding-left: 2.75rem; } .form-check.form-switch .form-check-input { width: 2.5rem; height: 1.25rem; border-radius: 1.25rem; margin-left: -2.75rem; margin-top: 0.125rem; } /* Mobile: Toggle switch thumb - slightly larger for better visibility */ .form-check.form-switch .form-check-input::after { width: 1rem; height: 1rem; left: 0.125rem; } .form-check.form-switch .form-check-input:checked::after { transform: translate(1.25rem, -50%); } /* Mobile: Better label touch target - entire label area is clickable */ .form-check-label { min-height: var(--touch-target-min); padding-left: var(--spacing-sm); font-size: var(--font-size-sm); line-height: 1.5; } /* Mobile: Ensure form-check container allows proper spacing and alignment */ .form-check { min-height: var(--touch-target-min); display: flex; align-items: center; padding: var(--spacing-xs) 0; } /* Mobile: Better alignment for checkbox/radio with label */ .form-check-input[type="checkbox"], .form-check-input[type="radio"] { align-self: flex-start; margin-top: 0.375rem; /* Ensure square dimensions are maintained */ width: var(--checkbox-size-mobile) !important; height: var(--checkbox-size-mobile) !important; min-width: var(--checkbox-size-mobile) !important; min-height: var(--checkbox-size-mobile) !important; max-width: var(--checkbox-size-mobile) !important; max-height: var(--checkbox-size-mobile) !important; } } /* ============================================ UNIFIED CHECKBOX & RADIO BUTTON SYSTEM - BASE ============================================ */ /* Base Checkbox and Radio Button Styles (Desktop) */ .form-check-input[type="checkbox"], .form-check-input[type="radio"] { width: var(--checkbox-size-desktop) !important; height: var(--checkbox-size-desktop) !important; min-width: var(--checkbox-size-desktop) !important; min-height: var(--checkbox-size-desktop) !important; max-width: var(--checkbox-size-desktop) !important; max-height: var(--checkbox-size-desktop) !important; margin-top: 0.125rem; margin-right: var(--spacing-sm); border: var(--checkbox-border-width) solid #dee2e6; border-radius: var(--checkbox-border-radius); cursor: pointer; transition: all var(--transition-base) var(--transition-easing); flex-shrink: 0; background-color: var(--input-bg, #fff); background-repeat: no-repeat; background-position: center; background-size: contain; box-sizing: border-box; line-height: 1 !important; padding: 0 !important; vertical-align: middle; aspect-ratio: 1 / 1; } [data-theme="dark"] .form-check-input, .dark-mode .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } /* Radio buttons - circular */ .form-check-input[type="radio"] { border-radius: var(--radio-border-radius); } /* Checkbox and Radio - Focus State */ .form-check-input[type="checkbox"]:focus, .form-check-input[type="radio"]:focus { border-color: var(--gold-dark); box-shadow: var(--shadow-focus); outline: none; } /* Checkbox - Checked State */ .form-check-input[type="checkbox"]:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } /* Radio - Checked State */ .form-check-input[type="radio"]:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } /* Checkbox and Radio - Hover State */ .form-check-input[type="checkbox"]:hover:not(:disabled), .form-check-input[type="radio"]:hover:not(:disabled) { border-color: var(--gold-dark); } /* Checkbox and Radio - Disabled State */ .form-check-input[type="checkbox"]:disabled, .form-check-input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; } /* Form Check Label */ .form-check-label { font-size: var(--font-size-sm); line-height: 1.5; cursor: pointer; padding-left: var(--spacing-xs); user-select: none; display: flex; align-items: center; } /* Form Check Container */ .form-check { display: flex; align-items: flex-start; margin-bottom: var(--spacing-sm); padding: var(--spacing-xs) 0; } /* Form Switch (Toggle Switch) - Base Styles - HORIZONTAL */ .form-check.form-switch { padding-left: 2.5rem; } .form-check.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; border-radius: 1.25rem; background-color: #dee2e6; border: 2px solid #dee2e6; transition: all var(--transition-slow) var(--transition-easing); background-position: left center; background-size: contain; cursor: pointer; position: relative; float: left; margin-left: -2.5rem; margin-top: 0.125rem; } .form-check.form-switch .form-check-input:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); background-position: right center; } /* Toggle switch thumb/circle */ .form-check.form-switch .form-check-input::after { content: ''; position: absolute; width: 0.875rem; height: 0.875rem; border-radius: 50%; background-color: #fff; transition: transform var(--transition-slow) var(--transition-easing); left: 0.125rem; top: 50%; transform: translateY(-50%); box-shadow: var(--shadow-sm); } .form-check.form-switch .form-check-input:checked::after { transform: translate(1.125rem, -50%); } .form-check.form-switch .form-check-input:focus { border-color: var(--gold-dark); box-shadow: var(--shadow-focus); } .form-check.form-switch .form-check-label { padding-left: var(--spacing-sm); } /* ============================================ UNIFIED BUTTON COMPONENT SYSTEM ============================================ This system provides consistent button styling across dashboard and inventory pages. All buttons inherit base styles and can use size modifiers (.btn-sm, .btn-lg) and variant classes (.btn-primary, .btn-secondary, etc.) ============================================ */ /* Base Button Styles - Unified System */ .btn, .action-btn, button[type="button"], button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-icon-gap); padding: var(--btn-padding-base-y) var(--btn-padding-base-x); font-size: var(--btn-font-size-base); font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: var(--btn-border-width) solid transparent; border-radius: var(--btn-border-radius); transition: var(--btn-transition); min-height: var(--btn-height-base); } /* Button Sizes */ .btn-sm, .action-btn-sm { padding: var(--btn-padding-sm-y) var(--btn-padding-sm-x); font-size: var(--btn-font-size-sm); min-height: var(--btn-height-sm); } .btn-lg, .action-btn-lg { padding: var(--btn-padding-lg-y) var(--btn-padding-lg-x); font-size: var(--btn-font-size-lg); min-height: var(--btn-height-lg); font-weight: 600; } /* Button Variants - Primary */ .btn-primary, .action-btn.primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-color); box-shadow: var(--btn-primary-shadow); } .btn-primary:hover, .action-btn.primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border); color: var(--btn-primary-color-hover); box-shadow: var(--btn-primary-shadow-hover); transform: translateY(-2px); } /* Button Variants - Secondary/Outline */ .btn-secondary, .btn-outline-secondary, .action-btn.secondary { background: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-color); box-shadow: var(--btn-secondary-shadow); } .btn-secondary:hover, .btn-outline-secondary:hover, .action-btn.secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border); color: var(--btn-secondary-color-hover); box-shadow: var(--btn-secondary-shadow-hover); transform: translateY(-2px); } /* Button Variants - Success */ .btn-success, .action-btn.success, .action-btn.inventory { background: var(--btn-success-bg); border-color: var(--btn-success-border); color: var(--btn-success-color); } .btn-success:hover, .action-btn.success:hover, .action-btn.inventory:hover { background: var(--btn-success-bg-hover); border-color: var(--btn-success-border); color: var(--btn-success-color-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Button Variants - Danger */ .btn-danger, .action-btn.danger, .action-btn.sale { background: var(--btn-danger-bg); border-color: var(--btn-danger-border); color: var(--btn-danger-color); } .btn-danger:hover, .action-btn.danger:hover, .action-btn.sale:hover { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-border); color: var(--btn-danger-color-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Button Variants - Warning */ .btn-warning, .action-btn.warning { background: var(--btn-warning-bg); border-color: var(--btn-warning-border); color: var(--btn-warning-color); } .btn-warning:hover, .action-btn.warning:hover { background: var(--btn-warning-bg-hover); border-color: var(--btn-warning-border); color: var(--btn-warning-color-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Button Icons */ .btn i, .action-btn i { font-size: var(--btn-icon-size); flex-shrink: 0; width: auto; text-align: center; } /* Button States */ .btn:disabled, .action-btn:disabled, .btn.disabled, .action-btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn:active, .action-btn:active { transform: translateY(0); } /* Button Focus States */ .btn:focus-visible, .action-btn:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; } /* Mobile Button Optimizations */ @media (max-width: 768px) { .btn, .action-btn { min-height: var(--touch-target-min); font-size: var(--btn-font-size-base); } .btn-primary, .btn-success, .action-btn.primary, .action-btn.inventory { min-height: var(--touch-target-comfort); padding: var(--spacing-base) var(--spacing-xl); } .btn-sm, .action-btn-sm { min-height: var(--touch-target-min); } } /* ============================================ UNIFIED PAGE HEADER COMPONENT ============================================ Standardized page header structure with consistent typography, spacing, and layout across all pages. ============================================ */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--page-header-margin-bottom); padding-bottom: var(--page-header-padding-bottom); border-bottom: var(--page-header-border-width) solid var(--page-header-border-color); flex-wrap: wrap; gap: var(--page-header-gap); } .page-header .page-title { font-size: var(--page-header-title-size); font-weight: var(--page-header-title-weight); color: var(--page-header-title-color); margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); } .page-header .page-title i { color: var(--page-header-icon-color); font-size: 1.5rem; } .page-header .header-actions { display: flex; gap: var(--spacing-md); align-items: center; flex-wrap: wrap; } /* Mobile responsive page header */ @media (max-width: 768px) { .page-header { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); } .page-header .page-title { font-size: 1.5rem; } .page-header .header-actions { width: 100%; flex-direction: column; } .page-header .header-actions .btn { width: 100%; } } /* Dark Mode - Page Header */ [data-theme="dark"] .page-header, .dark-mode .page-header { border-bottom-color: var(--border-primary); } [data-theme="dark"] .page-header .page-title, .dark-mode .page-header .page-title { color: var(--text-primary); } [data-theme="dark"] .page-header .page-title i, .dark-mode .page-header .page-title i { color: var(--gold-light); } /* Dark Mode - Alternative Header Styles (inventory-header, etc.) */ [data-theme="dark"] .inventory-header, [data-theme="dark"] .page-header-alternative, .dark-mode .inventory-header, .dark-mode .page-header-alternative { border-bottom-color: var(--border-primary); } [data-theme="dark"] .inventory-header .page-title, [data-theme="dark"] .page-title:not(.page-header .page-title), .dark-mode .inventory-header .page-title, .dark-mode .page-title:not(.page-header .page-title) { color: var(--text-primary); } [data-theme="dark"] .inventory-header .page-title i, [data-theme="dark"] .page-title i:not(.page-header .page-title i), .dark-mode .inventory-header .page-title i, .dark-mode .page-title i:not(.page-header .page-title i) { color: var(--gold-light); } /* Dark Mode - Standalone h1, h2 used as page titles */ [data-theme="dark"] h1.page-title, [data-theme="dark"] h2.page-title, [data-theme="dark"] .container h1:first-child, [data-theme="dark"] .container h2:first-child, .dark-mode h1.page-title, .dark-mode h2.page-title, .dark-mode .container h1:first-child, .dark-mode .container h2:first-child { color: var(--text-primary); } [data-theme="dark"] h1.page-title i, [data-theme="dark"] h2.page-title i, [data-theme="dark"] .container h1:first-child i, [data-theme="dark"] .container h2:first-child i, .dark-mode h1.page-title i, .dark-mode h2.page-title i, .dark-mode .container h1:first-child i, .dark-mode .container h2:first-child i { color: var(--gold-light); } /* ============================================ UNIFIED LOADING STATE SYSTEM ============================================ */ /* Loading Spinner Base */ .loading-spinner { display: inline-block; border: var(--loading-spinner-border) solid var(--loading-spinner-bg); border-top-color: var(--loading-spinner-color); border-radius: 50%; animation: spin var(--loading-spin-duration) linear infinite; vertical-align: middle; } /* Loading Spinner Sizes */ .loading-spinner-sm { width: var(--loading-spinner-sm); height: var(--loading-spinner-sm); border-width: 2px; } .loading-spinner-base { width: var(--loading-spinner-base); height: var(--loading-spinner-base); border-width: var(--loading-spinner-border); } .loading-spinner-lg { width: var(--loading-spinner-lg); height: var(--loading-spinner-lg); border-width: 4px; } .loading-spinner-xl { width: var(--loading-spinner-xl); height: var(--loading-spinner-xl); border-width: 5px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Button Loading State */ .btn.loading, .action-btn.loading { position: relative; color: transparent !important; pointer-events: none; } .btn.loading::after, .action-btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--loading-spinner-base); height: var(--loading-spinner-base); border: 2px solid transparent; border-top-color: var(--loading-spinner-color); border-radius: 50%; animation: spin var(--loading-spin-duration) linear infinite; } /* Button variant specific spinner colors */ .btn-primary.loading::after, .action-btn.primary.loading::after { border-top-color: var(--btn-primary-color); } .btn-success.loading::after, .action-btn.success.loading::after, .action-btn.inventory.loading::after { border-top-color: var(--btn-success-color); } .btn-danger.loading::after, .action-btn.danger.loading::after, .action-btn.sale.loading::after { border-top-color: var(--btn-danger-color); } .btn-secondary.loading::after, .btn-outline-secondary.loading::after, .action-btn.secondary.loading::after { border-top-color: var(--btn-secondary-color); } .btn-sm.loading::after, .action-btn-sm.loading::after { width: var(--loading-spinner-sm); height: var(--loading-spinner-sm); border-width: 2px; } .btn-lg.loading::after, .action-btn-lg.loading::after { width: var(--loading-spinner-lg); height: var(--loading-spinner-lg); border-width: 3px; } /* Loading Overlay */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--loading-overlay-bg); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: var(--loading-overlay-z-index); opacity: 0; visibility: hidden; transition: opacity var(--transition-slow) var(--transition-easing), visibility var(--transition-slow) var(--transition-easing); } .loading-overlay.show { opacity: 1; visibility: visible; } .loading-overlay-content { text-align: center; color: var(--text-primary); } .loading-overlay-content .loading-spinner { margin-bottom: var(--spacing-base); } .loading-overlay-content h5 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--text-primary); } /* Skeleton Loader */ .skeleton { background: var(--skeleton-bg); background-image: var(--skeleton-shimmer); background-size: var(--skeleton-shimmer-size); background-position: -200% 0; animation: shimmer var(--loading-shimmer-duration) infinite; border-radius: var(--btn-border-radius); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-text { height: 1em; margin-bottom: var(--spacing-sm); } .skeleton-text:last-child { margin-bottom: 0; } .skeleton-text.short { width: 60%; } .skeleton-text.medium { width: 80%; } .skeleton-text.long { width: 100%; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; } .skeleton-button { height: var(--btn-height-base); width: 100px; } .skeleton-card { padding: var(--spacing-base); border-radius: var(--btn-border-radius); } /* Table Skeleton */ .skeleton-table-row { display: flex; gap: var(--spacing-sm); padding: var(--spacing-base); border-bottom: 1px solid var(--glass-border); } .skeleton-table-cell { flex: 1; height: 1.2em; } .skeleton-table-cell.small { flex: 0 0 80px; } .skeleton-table-cell.medium { flex: 0 0 120px; } /* Inline Loading Indicator */ .loading-inline { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--text-secondary); font-size: 0.9rem; } .loading-inline .loading-spinner { width: var(--loading-spinner-sm); height: var(--loading-spinner-sm); border-width: 2px; } /* Mobile Loading Optimizations */ @media (max-width: 768px) { .loading-overlay { backdrop-filter: blur(1px); } .loading-overlay-content h5 { font-size: 0.9rem; } .skeleton-table-row { padding: var(--spacing-sm); gap: var(--spacing-xs); } /* Smaller spinners on mobile for better performance */ .loading-spinner-lg { width: 32px; height: 32px; } .loading-spinner-xl { width: 48px; height: 48px; } /* Compact skeleton cells on mobile */ .skeleton-table-cell { height: 1em; } } /* ============================================ UNIFIED ERROR HANDLING SYSTEM ============================================ */ /* Error Notification Toast Container */ .error-notification-container { position: fixed; top: var(--error-notification-top); right: var(--error-notification-right); z-index: var(--error-notification-z-index); display: flex; flex-direction: column; gap: var(--spacing-sm); max-width: var(--error-notification-max-width); min-width: var(--error-notification-min-width); pointer-events: none; } @media (max-width: 768px) { .error-notification-container { left: var(--spacing-base); right: var(--spacing-base); top: var(--spacing-base); max-width: 100%; min-width: auto; } } /* Error Notification Toast */ .error-notification { display: flex; align-items: flex-start; gap: var(--error-notification-gap); padding: var(--error-notification-padding-y) var(--error-notification-padding-x); border-radius: var(--error-notification-border-radius); font-size: var(--error-notification-font-size); font-weight: 500; box-shadow: var(--shadow-lg); pointer-events: auto; transform: translateX(400px); opacity: 0; transition: transform var(--error-slide-duration) ease, opacity var(--error-fade-duration) ease; position: relative; overflow: hidden; } .error-notification.show { transform: translateX(0); opacity: 1; } .error-notification.hide { transform: translateX(400px); opacity: 0; } /* Error Notification Types */ .error-notification.error { background: var(--error-bg); color: var(--error-color); border-left: 4px solid var(--error-border); } .error-notification.warning { background: var(--warning-bg); color: var(--warning-color); border-left: 4px solid var(--warning-border); } .error-notification.success { background: var(--success-bg); color: var(--success-color); border-left: 4px solid var(--success-border); } .error-notification.info { background: var(--info-bg); color: var(--info-color); border-left: 4px solid var(--info-border); } /* Error Notification Icon */ .error-notification-icon { font-size: var(--error-notification-icon-size); flex-shrink: 0; margin-top: 2px; } .error-notification.error .error-notification-icon { color: var(--error-icon); } .error-notification.warning .error-notification-icon { color: var(--warning-icon); } .error-notification.success .error-notification-icon { color: var(--success-icon); } .error-notification.info .error-notification-icon { color: var(--info-icon); } /* Error Notification Content */ .error-notification-content { flex: 1; min-width: 0; } .error-notification-title { font-weight: 600; margin-bottom: var(--spacing-xs); } .error-notification-message { line-height: 1.5; word-wrap: break-word; } /* Error Notification Close Button */ .error-notification-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; opacity: 0.8; padding: 0; margin-left: var(--spacing-sm); flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: opacity var(--transition-base) var(--transition-easing), background-color var(--transition-base) var(--transition-easing); } .error-notification-close:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.2); } /* Form Field Error States */ .form-control.is-invalid, .form-select.is-invalid, .form-control.error, .form-select.error { border-color: var(--error-field-border); background-color: var(--error-field-bg); padding-right: calc(var(--spacing-xl) + 20px); } .form-control.is-invalid:focus, .form-select.is-invalid:focus, .form-control.error:focus, .form-select.error:focus { border-color: var(--error-field-border); box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25); } .form-control.is-valid, .form-select.is-valid { border-color: var(--success-border); } .form-control.is-valid:focus, .form-select.is-valid:focus { border-color: var(--success-border); box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25); } /* Error Message */ .error-message, .invalid-feedback { display: block; width: 100%; margin-top: var(--spacing-xs); font-size: var(--error-field-font-size); color: var(--error-field-text); display: flex; align-items: center; gap: var(--spacing-xs); } .error-message::before, .invalid-feedback::before { content: '\f06a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--error-field-icon); font-size: 0.9rem; } .valid-feedback { display: block; width: 100%; margin-top: var(--spacing-xs); font-size: var(--error-field-font-size); color: var(--success-border); display: flex; align-items: center; gap: var(--spacing-xs); } .valid-feedback::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--success-border); font-size: 0.9rem; } /* Error State Component (for API failures, empty states, etc.) */ .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-2xl); text-align: center; background: var(--error-state-bg); border: 1px solid var(--error-state-border); border-radius: var(--btn-border-radius); min-height: 200px; } .error-state-icon { font-size: var(--error-state-icon-size); color: var(--error-field-icon); margin-bottom: var(--spacing-lg); } .error-state-title { font-size: var(--error-state-title-size); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-sm); } .error-state-message { font-size: var(--error-state-message-size); color: var(--error-state-text); margin-bottom: var(--spacing-lg); max-width: 500px; } .error-state-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; } /* Shake Animation for Errors */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .error-shake { animation: shake var(--error-shake-duration) ease; } /* Mobile Error Optimizations */ @media (max-width: 768px) { .error-notification { padding: var(--spacing-base) var(--spacing-lg); font-size: 0.85rem; } .error-notification-icon { font-size: 1rem; } .error-notification-close { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } /* Form field errors on mobile */ .form-control.is-invalid, .form-select.is-invalid, .form-control.error, .form-select.error { font-size: 16px; /* Prevent iOS zoom */ padding: var(--spacing-base) var(--spacing-md); } .error-message, .invalid-feedback { font-size: 0.8rem; margin-top: var(--spacing-xs); } .error-message::before, .invalid-feedback::before { font-size: 0.85rem; } .error-state { padding: var(--spacing-xl); min-height: 150px; } .error-state-icon { font-size: 2.5rem; } .error-state-title { font-size: 1.1rem; } .error-state-message { font-size: 0.9rem; } .error-state-actions { flex-direction: column; width: 100%; } .error-state-actions .btn { width: 100%; min-height: var(--touch-target-min); } } /* Extra small devices (≤576px) - Even more optimized */ @media (max-width: 576px) { /* Tighter spacing for very small screens */ :root { --spacing-xs: 0.2rem; --spacing-sm: 0.35rem; --spacing-md: 0.5rem; --spacing-base: 0.7rem; --spacing-lg: 0.85rem; --spacing-xl: 1rem; --spacing-2xl: 1.25rem; } /* Even larger touch targets for small screens */ button, .btn, .action-btn { min-height: var(--touch-target-comfort); padding: var(--spacing-base) var(--spacing-lg); } /* Better card padding */ .card, .card-body { padding: var(--spacing-base); } /* Better form spacing */ .form-group, .mb-3, .mb-4 { margin-bottom: var(--spacing-base) !important; } } /* Sidebar Styles - Desktop Only */ .sidebar { position: fixed; left: 0; top: 3px; /* Below progress bar */ width: 260px; height: calc(100vh - 3px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 240, 0.98) 100%); border-right: 1px solid rgba(212, 175, 55, 0.15); box-shadow: var(--shadow-lg); z-index: var(--z-fixed); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; transition: transform var(--transition-slow) var(--transition-easing); } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.5); } .sidebar-header { padding: 1.5rem 1.25rem; border-bottom: 1px solid rgba(212, 175, 55, 0.1); display: flex; align-items: center; gap: 0.75rem; } .sidebar-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--sidebar-logo-color, #2c3e50); font-weight: 700; font-size: 1.4rem; transition: opacity var(--transition-base) var(--transition-easing); } .sidebar-logo:hover { opacity: 0.8; } .sidebar-logo img { height: 40px; width: auto; } .sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .sidebar-nav-item { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--sidebar-text-color, #2c3e50); text-decoration: none; border-radius: 10px; transition: all var(--transition-base) var(--transition-easing); font-weight: 500; font-size: 0.95rem; gap: 0.75rem; position: relative; } .sidebar-nav-item i { font-size: 1.1rem; width: 24px; text-align: center; color: var(--sidebar-icon-color, #6c757d); transition: color var(--transition-base) var(--transition-easing); } .sidebar-nav-item:hover { background: rgba(212, 175, 55, 0.1); color: var(--sidebar-text-color-hover, #2c3e50); transform: translateX(4px); } .sidebar-nav-item:hover i { color: var(--sidebar-icon-color-hover, #D4AF37); } .sidebar-nav-item.active { background: var(--sidebar-active-bg, linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(255, 215, 0, 0.1) 100%)); color: var(--sidebar-active-color, #D4AF37); font-weight: 600; } .sidebar-nav-item.active i { color: var(--sidebar-active-color, #D4AF37); } .sidebar-nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: linear-gradient(180deg, #D4AF37 0%, #FFD700 100%); border-radius: 0 3px 3px 0; } .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(212, 175, 55, 0.1); background: var(--sidebar-footer-bg, rgba(255, 255, 255, 0.5)); position: relative; } .sidebar-footer { position: relative; } .sidebar-footer .dropdown-menu { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 0.5rem; transform: none !important; } .sidebar-user .fa-chevron-up { transition: transform var(--transition-base) var(--transition-easing); } .sidebar-user[aria-expanded="true"] .fa-chevron-up { transform: rotate(180deg); } .sidebar-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 10px; background: rgba(212, 175, 55, 0.05); cursor: pointer; transition: all var(--transition-base) var(--transition-easing); } .sidebar-user:hover { background: rgba(212, 175, 55, 0.1); } .sidebar-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; flex-shrink: 0; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-weight: 600; font-size: 0.9rem; color: var(--sidebar-user-name-color, #2c3e50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.75rem; color: var(--sidebar-user-role-color, #6c757d); text-transform: capitalize; } /* Main Content Adjustment for Sidebar */ .main-content-wrapper { margin-left: 0; transition: margin-left var(--transition-slow) var(--transition-easing); padding: 0; } /* Desktop: Show sidebar, hide navbar */ @media (min-width: 992px) { .navbar { display: none; } .sidebar { display: flex; } .main-content-wrapper { margin-left: 260px; padding-top: 0; margin-top: 0; } .main-content-wrapper .page-wrapper { padding-top: 0; margin-top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .main-content-wrapper .main-content { padding-top: 0; margin-top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; } .main-content-wrapper .container { padding-top: 0 !important; margin-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .main-content-wrapper > * { margin-top: 0 !important; padding-top: 0 !important; } body { padding-top: 3px; /* Only progress bar */ } } /* Mobile: Hide sidebar, show navbar */ @media (max-width: 991.98px) { .sidebar { display: none; } .navbar { display: block; } .main-content-wrapper { margin-left: 0; } } /* Header/Navbar Styles - Mobile Only */ .navbar { background: linear-gradient(135deg, rgba(212, 175, 55, 0.98) 0%, rgba(184, 134, 11, 0.98) 100%); box-shadow: var(--shadow-gold); padding: 1rem 0; position: fixed; top: 3px; /* Start right below progress bar (3px height) */ left: 0; right: 0; z-index: var(--z-fixed); /* Below progress bar (z-index: 10001) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.1; z-index: -1; } .navbar-brand { flex-shrink: 0; z-index: 2; font-weight: 700; font-size: 1.6rem; color: white !important; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.5rem; border-radius: 12px; transition: all var(--transition-slow) var(--transition-easing); position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .navbar-brand::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: var(--transition-slower); } .navbar-brand:hover::before { left: 100%; } .navbar-brand i { font-size: 1.8rem; background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .nav-link { color: rgba(255, 255, 255, 0.9) !important; font-weight: 500; padding: 0.8rem 1.2rem !important; margin: 0 0.3rem; border-radius: 10px; transition: all var(--transition-slow) var(--transition-easing); position: relative; display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .nav-link i { font-size: 1.2rem; transition: transform var(--transition-slow) var(--transition-easing); } .nav-link:hover { color: white !important; background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .nav-link:hover i { transform: scale(1.1); } .nav-link.active { background: rgba(255, 255, 255, 0.2); color: white !important; } .navbar-toggler { border: none; padding: 0.8rem; color: white; background: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Mobile-First Responsive Design */ @media (max-width: 991.98px) { .navbar { padding: 0.5rem 0; min-height: 60px; } .navbar-brand { font-size: 1.2rem; padding: 0.5rem 0.8rem; flex-shrink: 0; } .navbar-brand img { height: 36px !important; margin-right: 0.5rem !important; } .navbar-brand span { font-size: 1.2rem !important; } .navbar-brand i { font-size: 1.2rem; } .navbar-toggler { padding: 0.6rem; margin-right: 0.5rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } /* Mobile Nav Overlay Backdrop */ .mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: calc(var(--z-dropdown) - 1); opacity: 0; transition: opacity var(--transition-base) var(--transition-easing); } .mobile-nav-overlay.show { display: block; opacity: 1; } .navbar-collapse { position: fixed; top: 0; right: 0; width: 85vw; max-width: 360px; height: 100vh; background: rgba(212, 175, 55, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 1.5rem 1rem; box-shadow: var(--shadow-xl); overflow-y: auto; z-index: var(--z-dropdown); transform: translateX(100%); transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1); border-left: 2px solid rgba(255, 255, 255, 0.2); } .navbar-collapse.show { transform: translateX(0); } /* Mobile Nav Close Button */ .mobile-nav-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; cursor: pointer; transition: all var(--transition-base) var(--transition-easing); z-index: 10; } .mobile-nav-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } /* Dark mode mobile menu */ [data-theme="dark"] .navbar-collapse, .dark-mode .navbar-collapse { background: var(--navbar-collapse-bg, var(--glass-bg)); border-left-color: var(--navbar-collapse-border, var(--glass-border)); } [data-theme="dark"] .mobile-nav-close, .dark-mode .mobile-nav-close { background: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-primary); } [data-theme="dark"] .mobile-nav-close:hover, .dark-mode .mobile-nav-close:hover { background: var(--bg-tertiary); } [data-theme="dark"] .navbar-collapse .nav-link, .dark-mode .navbar-collapse .nav-link { color: var(--text-primary) !important; background: var(--nav-link-bg); border-color: var(--border-primary); } [data-theme="dark"] .navbar-collapse .nav-link i, .dark-mode .navbar-collapse .nav-link i { color: var(--text-primary) !important; } [data-theme="dark"] .navbar-collapse .nav-link:hover, [data-theme="dark"] .navbar-collapse .nav-link.active, .dark-mode .navbar-collapse .nav-link:hover, .dark-mode .navbar-collapse .nav-link.active { background: var(--nav-link-bg-hover); color: var(--text-primary) !important; } [data-theme="dark"] .navbar-collapse .nav-link:hover i, [data-theme="dark"] .navbar-collapse .nav-link.active i, .dark-mode .navbar-collapse .nav-link:hover i, .dark-mode .navbar-collapse .nav-link.active i { color: var(--gold-light) !important; } .navbar-nav { margin-top: 3rem; gap: 0.5rem; } .nav-link { padding: 1.1rem 1.3rem !important; margin: 0.25rem 0; font-size: 1.05rem; font-weight: 600; border-radius: 14px; min-height: 52px; display: flex; align-items: center; gap: 1rem; transition: all var(--transition-base) var(--transition-easing); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.95) !important; position: relative; } /* Ensure nav-link text is visible in mobile */ .navbar-collapse .nav-link { color: rgba(255, 255, 255, 0.95) !important; } .navbar-collapse .nav-link i { color: rgba(255, 255, 255, 0.9); } .nav-link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background: var(--gold-light); border-radius: 0 4px 4px 0; transition: height var(--transition-base) var(--transition-easing); } .nav-link:hover, .nav-link.active { background: rgba(255, 255, 255, 0.25); transform: translateX(-3px); border-color: rgba(255, 255, 255, 0.4); } .nav-link:hover::before, .nav-link.active::before { height: 60%; } .nav-link i { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; } .user-info { padding: 1.2rem !important; margin: 0.75rem 0 1rem 0; background: rgba(255, 255, 255, 0.2) !important; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .user-info, .dark-mode .user-info { background: var(--bg-secondary) !important; border-color: var(--border-primary); } .user-profile { flex-direction: row; align-items: center; gap: 1rem; width: 100%; } .user-avatar { width: 48px; height: 48px; font-size: 1.6rem; min-width: 48px; min-height: 48px; background: rgba(255, 255, 255, 0.25) !important; border: 2px solid rgba(255, 255, 255, 0.4); } [data-theme="dark"] .user-avatar, .dark-mode .user-avatar { background: var(--bg-tertiary) !important; border-color: var(--gold-light); } .user-details { font-size: 1rem; flex: 1; min-width: 0; } .user-name { font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; margin-bottom: 0.2rem; } [data-theme="dark"] .user-name, .dark-mode .user-name { color: var(--text-primary); } .user-role { font-size: 0.9rem; opacity: 0.9; color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .user-role, .dark-mode .user-role { color: var(--text-secondary); } /* Adjust body padding for mobile - account for progress bar */ body { padding-top: 63px; /* 60px navbar + 3px progress bar */ } /* Mobile dropdown improvements - Navbar dropdown */ .navbar-collapse .dropdown-menu { position: static !important; transform: none !important; width: 100%; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0.75rem !important; min-width: auto !important; } [data-theme="dark"] .navbar-collapse .dropdown-menu, .dark-mode .navbar-collapse .dropdown-menu { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; } .navbar-collapse .dropdown-item { padding: 1rem 1.2rem !important; font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.95) !important; border-radius: 10px; margin: 0.25rem 0; min-height: 48px; display: flex; align-items: center; gap: 0.8rem; transition: all var(--transition-base) var(--transition-easing); } [data-theme="dark"] .navbar-collapse .dropdown-item, .dark-mode .navbar-collapse .dropdown-item { color: var(--text-primary) !important; } .navbar-collapse .dropdown-item:hover { background: rgba(255, 255, 255, 0.3) !important; color: rgba(255, 255, 255, 1) !important; transform: translateX(-2px); } [data-theme="dark"] .navbar-collapse .dropdown-item:hover, .dark-mode .navbar-collapse .dropdown-item:hover { background: var(--nav-link-bg-hover) !important; color: var(--text-primary) !important; } .navbar-collapse .dropdown-item i { font-size: 1.2rem; width: 24px; text-align: center; flex-shrink: 0; color: inherit; } .navbar-collapse .dropdown-item.text-danger { color: rgba(255, 200, 200, 0.95) !important; } .navbar-collapse .dropdown-item.text-danger:hover { background: rgba(255, 100, 100, 0.25) !important; color: rgba(255, 220, 220, 1) !important; } [data-theme="dark"] .navbar-collapse .dropdown-item.text-danger, .dark-mode .navbar-collapse .dropdown-item.text-danger { color: #ff6b6b !important; } [data-theme="dark"] .navbar-collapse .dropdown-item.text-danger:hover, .dark-mode .navbar-collapse .dropdown-item.text-danger:hover { background: rgba(255, 107, 107, 0.2) !important; color: #ff5252 !important; } /* User info dropdown card in mobile navbar */ .navbar-collapse .user-info-dropdown-card { background: rgba(255, 255, 255, 0.25) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 14px 14px 0 0 !important; } [data-theme="dark"] .navbar-collapse .user-info-dropdown-card, .dark-mode .navbar-collapse .user-info-dropdown-card { background: var(--bg-secondary) !important; border-bottom-color: var(--border-primary) !important; } .navbar-collapse .user-info-dropdown-card div[style*="color:#D4AF37"], .navbar-collapse .user-info-dropdown-card div[style*="color:#2c3e50"] { color: rgba(255, 255, 255, 0.95) !important; } [data-theme="dark"] .navbar-collapse .user-info-dropdown-card div[style*="color:#D4AF37"], [data-theme="dark"] .navbar-collapse .user-info-dropdown-card div[style*="color:#2c3e50"], .dark-mode .navbar-collapse .user-info-dropdown-card div[style*="color:#D4AF37"], .dark-mode .navbar-collapse .user-info-dropdown-card div[style*="color:#2c3e50"] { color: var(--text-primary) !important; } .navbar-collapse .user-info-dropdown-card div[style*="color:#888"] { color: rgba(255, 255, 255, 0.8) !important; } [data-theme="dark"] .navbar-collapse .user-info-dropdown-card div[style*="color:#888"], .dark-mode .navbar-collapse .user-info-dropdown-card div[style*="color:#888"] { color: var(--text-secondary) !important; } .navbar-collapse .user-info-dropdown-card i[style*="color:#D4AF37"] { color: rgba(255, 255, 255, 0.9) !important; } [data-theme="dark"] .navbar-collapse .user-info-dropdown-card i[style*="color:#D4AF37"], .dark-mode .navbar-collapse .user-info-dropdown-card i[style*="color:#D4AF37"] { color: var(--gold-light) !important; } .navbar-collapse .user-info-dropdown-card .user-avatar { background: rgba(255, 255, 255, 0.3) !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .navbar-collapse .user-info-dropdown-card .user-avatar, .dark-mode .navbar-collapse .user-info-dropdown-card .user-avatar { background: var(--bg-tertiary) !important; border-color: var(--gold-light) !important; } .navbar-collapse .dropdown-divider { border-color: rgba(255, 255, 255, 0.3) !important; margin: 0.5rem 0; } [data-theme="dark"] .navbar-collapse .dropdown-divider, .dark-mode .navbar-collapse .dropdown-divider { border-color: var(--border-primary) !important; } } /* Extra small devices (phones, 576px and down) */ @media (max-width: 576px) { .navbar-brand { font-size: 1rem; padding: 0.4rem 0.6rem; } .navbar-brand img { height: 32px !important; margin-right: 0.4rem !important; } .navbar-brand span { font-size: 1rem !important; } .nav-link { padding: 0.9rem 1rem !important; font-size: 0.95rem; } .nav-link i { font-size: 1.2rem; width: 24px; margin-right: 0.6rem; } .user-info { padding: 0.8rem 1rem !important; } .user-avatar { width: 36px; height: 36px; font-size: 1.2rem; } .user-name { font-size: 0.9rem; } } /* Add padding to body to account for fixed navbar and progress bar */ body { padding-top: 79px; /* 76px navbar + 3px progress bar */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* Touch improvements */ * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* Improve touch targets */ button, .btn, .nav-link, .action-btn, .dropdown-item { min-height: 44px; min-width: 44px; } /* Prevent iOS zoom on input focus - critical for mobile UX */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], textarea, select, .form-control, .form-select { font-size: 16px !important; } } /* Prevent text selection on UI elements */ .navbar, .nav-link, .action-btn, .btn, .dropdown-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Smooth scrolling for mobile */ html { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* Image optimization and lazy loading */ img { max-width: 100%; height: auto; display: block; } img[loading="lazy"] { opacity: 0; transition: opacity var(--transition-slow); } img[loading="lazy"].loaded { opacity: 1; } /* Optimize images */ img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* User Info Styles */ .user-info { display: flex; align-items: center; padding: 0.5rem 1rem !important; margin: 0 0.3rem; border-radius: 10px; background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: white !important; font-weight: 500; transition: all var(--transition-slow) var(--transition-easing); } .user-info:hover { background: rgba(255, 255, 255, 0.2) !important; } .user-profile { display: flex; align-items: center; gap: 1rem; } .user-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all var(--transition-slow) var(--transition-easing); } .user-avatar i { font-size: 1.5rem; color: white; } .user-details { display: flex; flex-direction: column; gap: 0.3rem; } .user-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: white; font-size: 1rem; line-height: 1.2; } .user-name i { font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); } .shop-name { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); transition: all var(--transition-slow) var(--transition-easing); padding: 0.2rem 0.5rem; border-radius: 6px; } .shop-name i { font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); } .shop-name:hover { color: white; background: rgba(255, 255, 255, 0.1); } .shop-name:hover i { color: white; } /* Shop Dropdown Styles */ .shop-dropdown { min-width: 280px; padding: 0.5rem; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.98); border: none; border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .shop-info { display: flex; flex-direction: column; gap: 0.5rem; } .shop-info-header { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 0.5rem; } .shop-info-header i { color: #D4AF37; font-size: 1.1rem; } .shop-info-header span { color: #2c3e50; font-weight: 600; font-size: 1rem; } .shop-info-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem; border-radius: 8px; transition: all var(--transition-slow) var(--transition-easing); } .shop-info-item:hover { background: rgba(212, 175, 55, 0.1); } .shop-info-item i { width: 20px; color: #D4AF37; font-size: 1rem; } .shop-info-item span { color: #2c3e50; font-size: 0.9rem; } .dropdown-toggle::after { display: none; } @media (max-width: 991.98px) { .user-info { margin: 0.3rem 0; width: 100%; } .user-profile { width: 100%; justify-content: center; } .shop-dropdown { position: static !important; transform: none !important; width: 100%; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .shop-info-header { border-bottom-color: rgba(255, 255, 255, 0.2); } .shop-info-header span { color: white; } .shop-info-item { color: white; } .shop-info-item i { color: rgba(255, 255, 255, 0.9); } .shop-info-item span { color: white; } } .navbar .container { display: flex; flex-wrap: nowrap; align-items: center; } /* --- Subtle Animated Gold Background (Global) --- */ body { background: var(--gradient-body-bg); min-height: 100vh; position: relative; overflow-x: hidden; display: flex; flex-direction: column; } /* Common Page Container - Consistent with Dashboard */ .page-container { background: var(--bg-secondary); backdrop-filter: blur(var(--backdrop-blur-md)); -webkit-backdrop-filter: blur(var(--backdrop-blur-md)); border: var(--border-width-thin) solid var(--border-secondary); border-radius: 0; box-shadow: var(--shadow-gold); padding: var(--spacing-base); margin: 0; width: 100%; min-height: 100%; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-base); pointer-events: none; background: var(--gradient-overlay-radial-1), var(--gradient-overlay-radial-2); animation: goldBgMove 18s linear infinite alternate; } @keyframes goldBgMove { 0% { background-position: 20% 30%, 80% 70%; } 100% { background-position: 30% 40%, 70% 60%; } } /* Sticky Footer Styles */ .main-content { flex: 1 0 auto; min-height: calc(100vh - 160px); /* Reduced from 200px to 160px */ } .footer { flex-shrink: 0; background: linear-gradient(90deg, #D4AF37 0%, #FFD700 100%); border-top: 2.5px solid #FFD700; box-shadow: var(--shadow-gold); } .footer .container { padding: 0.1rem 0; /* Reduced from 1rem to 0.5rem */ } .footer .text-muted { color: #fff !important; font-weight: 500; font-size: 1rem; text-shadow: 0 1px 8px #D4AF37, 0 1px 1px #0008; } /* Mobile footer adjustments */ @media (max-width: 768px) { .main-content { min-height: calc(100vh - 140px); /* Even smaller for mobile */ } .footer .container { padding: var(--spacing-mobile-sm) 0; /* Smaller padding for mobile */ } .footer .text-muted { font-size: var(--font-size-help); /* Smaller font for mobile */ } } @media (max-width: 1200px) { .navbar .container { padding-left: var(--spacing-mobile-base) !important; padding-right: var(--spacing-mobile-base) !important; } .navbar-nav .nav-link { padding-left: var(--spacing-mobile-md) !important; padding-right: var(--spacing-mobile-md) !important; font-size: var(--font-size-form); } .navbar-brand { padding-left: var(--spacing-mobile-md) !important; padding-right: var(--spacing-mobile-md) !important; font-size: var(--font-size-section); } .navbar-nav .logout-nav-link-text { display: none; } .navbar-nav .logout-nav-link-icon { display: inline-block !important; } } @media (max-width: 992px) { .navbar-nav .logout-nav-link-text { display: inline; } .navbar-nav .logout-nav-link-icon { display: none !important; } /* Mobile user dropdown adjustments */ .navbar-nav .dropdown-toggle .user-name { font-size: var(--font-size-form); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 576px) { .navbar-nav .dropdown-toggle .user-name { font-size: 0.85rem; max-width: 100px; } .navbar-nav .dropdown-toggle { padding: 0.5rem 0.8rem !important; } } /* Breadcrumb Styles */ .breadcrumb-container { margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.9); border-radius: 10px; box-shadow: var(--shadow-xs); } .breadcrumb { margin-bottom: 0; background: transparent; padding: 0; font-size: 0.9rem; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item a { color: #D4AF37; text-decoration: none; transition: all var(--transition-slow) var(--transition-easing); padding: 0.25rem 0.5rem; border-radius: 4px; } .breadcrumb-item a:hover { color: #B8860B; text-decoration: underline; background: rgba(212, 175, 55, 0.1); } .breadcrumb-item.active { color: #6c757d; font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #D4AF37; padding: 0 0.5rem; font-weight: bold; } /* Mobile breadcrumb improvements */ @media (max-width: 768px) { .breadcrumb-container { margin-bottom: 1rem; padding: 0.6rem 0.8rem; } .breadcrumb { font-size: 0.85rem; flex-wrap: wrap; } .breadcrumb-item { margin-bottom: 0.2rem; } .breadcrumb-item a { padding: 0.3rem 0.6rem; min-height: 32px; display: flex; align-items: center; } .breadcrumb-item i { margin-right: 0.3rem; } } /* Auth Pages - Hide sidebar and navbar, full page layout */ body:has(.landing-header) .sidebar-wrapper { display: none !important; } body:has(.landing-header) .navbar:not(.landing-header .navbar) { display: none !important; } .auth-page-wrapper { min-height: 100vh; display: flex; flex-direction: column; width: 100%; padding-top: 0 !important; margin: 0 !important; background: transparent !important; overflow: hidden; border: none !important; } /* Ensure no top bar/header appears on auth pages */ body:has(.auth-page-wrapper), html:has(.auth-page-wrapper) { padding-top: 0 !important; margin-top: 0 !important; } /* Hide any landing-header that might exist */ .auth-page-wrapper .landing-header { display: none !important; } .auth-page-wrapper .footer { margin-top: auto; flex-shrink: 0; } body:has(.landing-header) { padding-top: 0 !important; } body:has(.landing-header) .main-content-wrapper { display: none !important; } /* Apply landing page header styles to auth pages */ .auth-page-wrapper .landing-header { background: linear-gradient(135deg, rgba(212, 175, 55, 0.98) 0%, rgba(184, 134, 11, 0.98) 100%); padding: 1rem 0; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed); box-shadow: var(--shadow-gold); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .auth-page-wrapper .landing-header .navbar { padding: 0; display: flex; width: 100%; } .auth-page-wrapper .landing-header .navbar-brand { font-weight: 700; font-size: 1.6rem; color: white !important; display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 10px; transition: all var(--transition-slow) var(--transition-easing); } .auth-page-wrapper .landing-header .navbar-brand:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .auth-page-wrapper .landing-header .navbar-collapse { flex-basis: auto; justify-content: flex-end; } @media (min-width: 992px) { .auth-page-wrapper .landing-header .navbar-collapse { display: flex !important; } } .auth-page-wrapper .landing-header .navbar-nav { display: flex; align-items: center; margin-left: auto; } .auth-page-wrapper .landing-header .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.8); color: white; padding: 0.5rem 1.5rem; border-radius: 30px; transition: all var(--transition-slow) var(--transition-easing); background: transparent; font-weight: 600; } .auth-page-wrapper .landing-header .btn-outline-light:hover { background: white; color: #D4AF37; transform: translateY(-2px); } .auth-page-wrapper .landing-header .navbar-toggler { display: none; border: none; padding: 0.8rem; color: white; background: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .auth-page-wrapper .landing-header .navbar-toggler:focus { box-shadow: none; } .auth-page-wrapper .landing-header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @media (max-width: 991.98px) { .auth-page-wrapper .landing-header .navbar-toggler { display: block; } .auth-page-wrapper .landing-header .navbar-collapse { position: fixed; top: 70px; left: 0; right: 0; width: 100vw; min-width: 0; max-width: 100vw; background: rgba(212, 175, 55, 0.98); border-radius: 0 0 15px 15px; box-shadow: var(--shadow-md); padding: 1rem 0.5rem 1.5rem 0.5rem; z-index: var(--z-dropdown); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .auth-page-wrapper .landing-header .navbar-collapse:not(.show) { display: none !important; } .auth-page-wrapper .landing-header .navbar-collapse.show { display: block !important; } .auth-page-wrapper .landing-header .navbar-nav { width: 100%; margin: 0; padding: 0; flex-direction: column; } .auth-page-wrapper .landing-header .btn-outline-light { width: 100%; box-sizing: border-box; margin: 0.2rem 0; border-radius: 10px; text-align: center; padding: 0.8rem 1rem; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.15); color: white !important; border: 1px solid rgba(255, 255, 255, 0.3); } .auth-page-wrapper .landing-header .btn-outline-light:hover { background: rgba(255, 255, 255, 0.25); } }