/* ============================================================ CompuStore — Dark Tech & Safety Glass Theme Complete Stylesheet ============================================================ */ /* ==================== CSS CUSTOM PROPERTIES ==================== */ :root { /* Backgrounds - Deep Cyber Tech (Pitch Black/Midnight) */ --bg-primary: #050a11; --bg-secondary: #0a111a; --bg-card: #0f1722; --bg-card-solid: #0f1722; --bg-card-hover: #162232; --bg-input: #050a11; --bg-sidebar: #050a11; --bg-overlay: rgba(5, 10, 17, 0.85); --bg-table-row-hover: rgba(0, 255, 255, 0.04); --bg-table-row-alt: rgba(255, 255, 255, 0.02); /* Borders - Glowing Tech Edges */ --border-color: rgba(0, 255, 255, 0.15); --border-color-light: rgba(0, 255, 255, 0.05); --border-color-focus: #00ffff; /* Safety & Warning Borders */ --border-danger: rgba(255, 50, 50, 0.6); --border-warning: rgba(255, 200, 0, 0.6); /* Text - High Contrast Holographic */ --text-primary: #e2f1f8; --text-secondary: #8babc5; --text-muted: #537692; --text-white: #ffffff; --text-white-rgb: 255, 255, 255; /* Accent Colors - High Vis Safety & Tech */ --green: #00ff88; --green-light: #33ff9f; --green-dark: #00cc6a; --green-bg: rgba(0, 255, 136, 0.15); --blue: #00d4ff; --blue-light: #4de3ff; --blue-dark: #00a8cc; --blue-bg: rgba(0, 212, 255, 0.15); --orange: #ff9900; --orange-light: #ffb84d; --orange-bg: rgba(255, 153, 0, 0.15); --purple: #b700ff; --purple-light: #cc4dff; --purple-bg: rgba(183, 0, 255, 0.15); --red: #ff0044; --red-light: #ff4d79; --red-bg: rgba(255, 0, 68, 0.15); --yellow: #ffea00; --yellow-bg: rgba(255, 234, 0, 0.15); --cyan: #00ffff; --cyan-bg: rgba(0, 255, 255, 0.15); --pink: #ff00aa; /* Gradients - Futuristic & Neon */ --gradient-green: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%); --gradient-blue: linear-gradient(135deg, #00d4ff 0%, #0088ff 100%); --gradient-orange: linear-gradient(135deg, #ff9900 0%, #ff5500 100%); --gradient-purple: linear-gradient(135deg, #cc4dff 0%, #8800ff 100%); --gradient-red: linear-gradient(135deg, #ff4d79 0%, #ff0044 100%); --gradient-hero: linear-gradient(135deg, #050a11 0%, #0a111a 100%); /* Semantic Primary Theme */ --primary-color: #00d4ff; --primary-color-rgb: 0, 212, 255; --primary-gradient: var(--gradient-blue); /* Layout */ --sidebar-width: 260px; --sidebar-collapsed: 0px; --topbar-height: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Shadows - Deep Neon Glows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 212, 255, 0.1); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 255, 0.15); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 212, 255, 0.2); --shadow-glow-green: 0 0 15px rgba(0, 255, 136, 0.4); --shadow-glow-blue: 0 0 15px rgba(0, 212, 255, 0.4); --shadow-glow-purple: 0 0 15px rgba(183, 0, 255, 0.4); --shadow-glow-red: 0 0 15px rgba(255, 0, 68, 0.4); /* Glass - High Contrast Holographic Feel */ --glass-blur: 12px; --glass-border: 1px solid rgba(0, 255, 255, 0.15); --glass-reflection: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 255, 255, 0.05); --glass-opacity: 0.85; --glass-brightness: 1.1; --glass-tint: #0f1722; /* Topbar Tab Accent Colors */ --topbar-blue: var(--blue); --topbar-green: var(--green); --topbar-red: var(--red); --topbar-orange: var(--orange); /* Smooth Transitions */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ==================== LIGHT MODE OVERRIDES ==================== */ body.theme-light { /* Backgrounds - Premium Light */ --bg-primary: #f0f4f8; --bg-secondary: #e8eef4; --bg-card: rgba(255, 255, 255, 0.85); --bg-card-solid: #ffffff; --bg-card-hover: rgba(255, 255, 255, 0.95); --bg-input: rgba(255, 255, 255, 0.9); --bg-sidebar: rgba(255, 255, 255, 0.75); --bg-overlay: rgba(255, 255, 255, 0.92); --bg-table-row-hover: rgba(var(--primary-color-rgb), 0.06); --bg-table-row-alt: rgba(0, 0, 0, 0.015); /* Borders - Refined & Subtle */ --border-color: rgba(0, 0, 0, 0.1); --border-color-light: rgba(0, 0, 0, 0.05); --border-color-focus: var(--primary-color); /* Text - High Readability */ --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #718096; --text-white: #1a202c; --text-white-rgb: 26, 32, 44; /* Glass - Frosted Light */ --glass-blur: 16px; --glass-border: 1px solid rgba(0, 0, 0, 0.08); --glass-reflection: inset 0 1px 0 rgba(255, 255, 255, 0.8); --glass-opacity: 0.85; --glass-brightness: 1.0; --glass-tint: #ffffff; /* Shadows - Elegant & Layered */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --shadow-glow-green: 0 4px 14px rgba(16, 185, 129, 0.25); --shadow-glow-blue: 0 4px 14px rgba(var(--primary-color-rgb), 0.25); --shadow-glow-purple: 0 4px 14px rgba(139, 92, 246, 0.25); --shadow-glow-red: 0 4px 14px rgba(239, 68, 68, 0.25); /* Accent Colors - Muted & Professional */ --green: #059669; --green-light: #10b981; --green-dark: #047857; --green-bg: rgba(5, 150, 105, 0.08); --blue: #2563eb; --blue-light: #3b82f6; --blue-dark: #1d4ed8; --blue-bg: rgba(37, 99, 235, 0.08); --orange: #d97706; --orange-light: #f59e0b; --orange-bg: rgba(217, 119, 6, 0.08); --red: #dc2626; --red-light: #ef4444; --red-bg: rgba(220, 38, 38, 0.08); --purple: #7c3aed; --purple-light: #8b5cf6; --purple-bg: rgba(124, 58, 237, 0.08); --yellow: #ca8a04; --yellow-bg: rgba(202, 138, 4, 0.08); --cyan: #0891b2; --cyan-bg: rgba(8, 145, 178, 0.08); --pink: #db2777; /* Gradients - Softer */ --gradient-blue: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.8) 100%); --gradient-green: linear-gradient(135deg, #059669 0%, #10b981 100%); --gradient-orange: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); --gradient-red: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); --gradient-hero: linear-gradient(135deg, #f0f4f8 0%, #e8eef4 100%); /* Topbar Tab Accent Colors - Light Mode */ --topbar-blue: var(--blue-dark); --topbar-green: var(--green-dark); --topbar-red: #be123c; --topbar-orange: #b45309; } /* ========== LIGHT MODE COMPONENT OVERRIDES ========== */ /* Sidebar - Frosted Glass */ body.theme-light .sidebar { background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; border-right: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06) !important; } body.theme-light .sidebar-header { background: transparent !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } body.theme-light .nav-item { color: #4a5568 !important; } body.theme-light .nav-item:hover { background: rgba(var(--primary-color-rgb), 0.08) !important; color: var(--primary-color) !important; } body.theme-light .nav-item.active { background: rgba(var(--primary-color-rgb), 0.1) !important; color: var(--primary-color) !important; box-shadow: inset 3px 0 0 var(--primary-color) !important; } /* Topbar - Premium Frosted */ body.theme-light .topbar { background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(var(--primary-color-rgb), 0.06) 100%) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; } body.theme-light .topbar-tab-label .page-tab-text, body.theme-light .topbar-tab-label .page-tab-accent { text-shadow: none; } body.theme-light .topbar-tab-label .page-tab-text { color: #1a202c !important; } body.theme-light .topbar-tab-label .page-tab-accent { color: var(--primary-color) !important; } /* Cards - Clean Elevated */ body.theme-light .dash-card, body.theme-light .stat-card, body.theme-light .glass-card, body.theme-light .glass-panel { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important; } body.theme-light .dash-card:hover, body.theme-light .stat-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important; transform: translateY(-1px); } /* Tables */ body.theme-light .data-table th { background: rgba(var(--primary-color-rgb), 0.04) !important; color: #1a202c !important; border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.15) !important; font-weight: 600; } body.theme-light .data-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; color: #2d3748 !important; } body.theme-light .data-table tbody tr:hover { background: rgba(var(--primary-color-rgb), 0.04) !important; } /* Forms */ body.theme-light .form-control, body.theme-light .form-input, body.theme-light .form-select, body.theme-light .filter-select { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: #1a202c !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; } body.theme-light .form-control:focus, body.theme-light .form-input:focus, body.theme-light .form-select:focus, body.theme-light .filter-select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12), 0 1px 2px rgba(0, 0, 0, 0.04) !important; background: #ffffff !important; } /* Buttons */ body.theme-light .btn-primary { background: var(--primary-gradient) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3) !important; } body.theme-light .btn-primary:hover { box-shadow: 0 4px 14px rgba(var(--primary-color-rgb), 0.4) !important; } body.theme-light .btn-secondary { background: rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #4a5568 !important; } body.theme-light .btn-secondary:hover { background: rgba(0, 0, 0, 0.08) !important; color: #1a202c !important; } /* Modal */ body.theme-light .modal-overlay { background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(4px) !important; } body.theme-light .modal-card { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08) !important; } body.theme-light .modal-header { background: rgba(var(--primary-color-rgb), 0.04) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } /* Badges */ body.theme-light .badge { border: 1px solid rgba(0, 0, 0, 0.06); } /* Footer */ body.theme-light .admin-footer { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px) !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important; } /* Search box */ body.theme-light .search-box input { color: #1a202c !important; } body.theme-light .search-box input::placeholder { color: #a0aec0 !important; } /* Scrollbar */ body.theme-light ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03); } body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; } body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* Liquid background blobs - softer in light mode */ body.theme-light .liquid-bg { background: #f0f4f8 !important; } body.theme-light .liquid-bg .blob { opacity: 0.3 !important; } /* Dashboard welcome banner */ body.theme-light .dashboard-welcome-banner { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08) 0%, rgba(var(--primary-color-rgb), 0.02) 100%) !important; border: 1px solid rgba(var(--primary-color-rgb), 0.1) !important; } /* Cell actions */ body.theme-light .cell-actions .btn-icon { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } body.theme-light .cell-actions .btn-icon:hover { background: rgba(0, 0, 0, 0.06) !important; } /* Toolbar */ body.theme-light .section-toolbar, body.theme-light .toolbar, body.theme-light .pos-toolbar { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; } /* Menu toggle button */ body.theme-light .menu-toggle { color: #4a5568 !important; } body.theme-light .menu-toggle:hover { color: var(--primary-color) !important; background: rgba(var(--primary-color-rgb), 0.06) !important; } /* Notification dot */ body.theme-light .topbar-right .btn-icon { color: #4a5568 !important; } body.theme-light .topbar-right .btn-icon:hover { color: var(--primary-color) !important; background: rgba(var(--primary-color-rgb), 0.06) !important; } body.has-wallpaper .login-page::before, body.has-wallpaper .login-page::after { display: none !important; } /* ==================== LIQUID BACKGROUND ==================== */ body.has-wallpaper { background-image: none !important; } body.has-wallpaper::before { content: ''; position: fixed; inset: 0; z-index: -9999; background-image: var(--wallpaper-url); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } .liquid-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background: var(--bg-primary); } .liquid-bg .blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.9; animation: floatBlob 25s infinite alternate ease-in-out; } .liquid-bg .blob-1 { width: 50vw; height: 50vw; top: -10vw; left: -10vw; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.6), transparent 70%); animation-delay: 0s; } .liquid-bg .blob-2 { width: 40vw; height: 40vw; bottom: -10vw; right: -10vw; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.3), transparent 70%); animation-delay: -5s; } .liquid-bg .blob-3 { width: 30vw; height: 30vw; top: 20vh; left: 40vw; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.8), transparent 70%); animation-delay: -10s; } @keyframes floatBlob { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(15vw, 15vh) scale(1.2) rotate(10deg); } 66% { transform: translate(-10vw, 20vh) scale(0.8) rotate(-10deg); } 100% { transform: translate(-20vw, -15vh) scale(1.1) rotate(5deg); } } /* ==================== RESET & BASE ==================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; height: 100vh; overflow: hidden; overscroll-behavior-y: none; } a { color: var(--blue); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--blue-light); } img { max-width: 100%; height: auto; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--text-white-rgb), 0.1); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-white-rgb), 0.2); } /* ==================== LOGIN PAGE ==================== */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; perspective: 1200px; background: transparent; } /* -------- Floating Particles -------- */ .login-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .login-particles .lp { position: absolute; border-radius: 50%; opacity: 0; animation: lpFloat linear infinite; } /* Generate 20 particles with varying sizes, positions, delays, durations */ .lp:nth-child(1) { width:3px;height:3px;left:5%; background:#38f9d7;animation-duration:12s;animation-delay:0s; } .lp:nth-child(2) { width:2px;height:2px;left:12%; background:#a78bfa;animation-duration:15s;animation-delay:1s; } .lp:nth-child(3) { width:4px;height:4px;left:20%; background:#38f9d7;animation-duration:10s;animation-delay:2s; } .lp:nth-child(4) { width:2px;height:2px;left:30%; background:#6366f1;animation-duration:14s;animation-delay:0.5s; } .lp:nth-child(5) { width:3px;height:3px;left:38%; background:#a78bfa;animation-duration:11s;animation-delay:3s; } .lp:nth-child(6) { width:5px;height:5px;left:47%; background:#38f9d7;animation-duration:16s;animation-delay:1.5s; } .lp:nth-child(7) { width:2px;height:2px;left:55%; background:#6366f1;animation-duration:13s;animation-delay:4s; } .lp:nth-child(8) { width:3px;height:3px;left:63%; background:#38f9d7;animation-duration:9s; animation-delay:2.5s; } .lp:nth-child(9) { width:4px;height:4px;left:72%; background:#a78bfa;animation-duration:17s;animation-delay:0.2s; } .lp:nth-child(10) { width:2px;height:2px;left:80%; background:#6366f1;animation-duration:12s;animation-delay:3.5s; } .lp:nth-child(11) { width:3px;height:3px;left:88%; background:#38f9d7;animation-duration:14s;animation-delay:1.8s; } .lp:nth-child(12) { width:2px;height:2px;left:93%; background:#a78bfa;animation-duration:10s;animation-delay:0.8s; } .lp:nth-child(13) { width:4px;height:4px;left:8%; background:#6366f1;animation-duration:18s;animation-delay:2.2s; } .lp:nth-child(14) { width:2px;height:2px;left:25%; background:#38f9d7;animation-duration:11s;animation-delay:4.5s; } .lp:nth-child(15) { width:3px;height:3px;left:43%; background:#a78bfa;animation-duration:15s;animation-delay:1.2s; } .lp:nth-child(16) { width:5px;height:5px;left:60%; background:#38f9d7;animation-duration:13s;animation-delay:3.8s; } .lp:nth-child(17) { width:2px;height:2px;left:75%; background:#6366f1;animation-duration:9s; animation-delay:0.4s; } .lp:nth-child(18) { width:3px;height:3px;left:85%; background:#a78bfa;animation-duration:16s;animation-delay:2.8s; } .lp:nth-child(19) { width:2px;height:2px;left:17%; background:#38f9d7;animation-duration:12s;animation-delay:5s; } .lp:nth-child(20) { width:4px;height:4px;left:50%; background:#6366f1;animation-duration:14s;animation-delay:1.6s; } @keyframes lpFloat { 0% { bottom: -10px; opacity: 0; transform: translateX(0) scale(1); } 10% { opacity: 0.7; } 50% { transform: translateX(30px) scale(1.2); opacity: 0.5; } 90% { opacity: 0.3; } 100% { bottom: 110%; opacity: 0; transform: translateX(-20px) scale(0.8); } } /* -------- Sonar / Radar Ripple -------- */ .login-sonar { position: absolute; bottom: 80px; right: 60px; width: 80px; height: 80px; pointer-events: none; z-index: 0; } .sonar-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(56, 249, 215, 0.9); box-shadow: 0 0 12px rgba(56, 249, 215, 0.8); } .sonar-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); border-radius: 50%; border: 1.5px solid rgba(56, 249, 215, 0.5); animation: sonarPulse 3s ease-out infinite; } .sonar-ring:nth-child(1) { width: 70px; height: 70px; animation-delay: 0s; } .sonar-ring:nth-child(2) { width: 70px; height: 70px; animation-delay: 1s; } .sonar-ring:nth-child(3) { width: 70px; height: 70px; animation-delay: 2s; } @keyframes sonarPulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } } /* -------- Bottom Waves -------- */ .login-wave-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 0; } .login-wave { position: absolute; bottom: 0; width: 200%; height: 100%; animation: waveSlide 14s linear infinite; } .login-wave-2 { animation: waveSlide 20s linear infinite reverse; opacity: 0.7; } @keyframes waveSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Morphing Gradient Background */ .login-bg-effects { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .login-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.1; } .login-orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.7), transparent 70%); top: -200px; right: -150px; animation: morphOrb1 12s ease-in-out infinite; } .login-orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.5), transparent 70%); bottom: -200px; left: -150px; animation: morphOrb2 15s ease-in-out infinite; } .login-orb-3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.6), transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: morphOrb3 10s ease-in-out infinite; } @keyframes morphOrb1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 60% 40%; } 25% { transform: translate(60px, -40px) scale(1.15) rotate(90deg); border-radius: 60% 40% 40% 60%; } 50% { transform: translate(-30px, 50px) scale(0.9) rotate(180deg); border-radius: 50% 50% 40% 60%; } 75% { transform: translate(40px, 30px) scale(1.1) rotate(270deg); border-radius: 40% 60% 50% 50%; } } @keyframes morphOrb2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 40% 60%; } 33% { transform: translate(-50px, -60px) scale(1.2) rotate(120deg); border-radius: 40% 60% 60% 40%; } 66% { transform: translate(40px, -20px) scale(0.85) rotate(240deg); border-radius: 50% 50% 40% 60%; } } @keyframes morphOrb3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; } } /* Grid Lines Background */ .login-page::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--text-white-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--text-white-rgb), 0.03) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; pointer-events: none; animation: gridShift 20s linear infinite; } @keyframes gridShift { 0% { transform: perspective(500px) rotateX(0deg); } 100% { transform: perspective(500px) rotateX(2deg) translateY(-60px); } } /* Scan line effect */ .login-page::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.6), transparent); z-index: 5; pointer-events: none; animation: scanDown 4s linear infinite; } @keyframes scanDown { 0% { top: -2px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ========== SPLIT-SCREEN CONTAINER ========== */ @keyframes morphOrb1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 60% 40%; } 25% { transform: translate(60px, -40px) scale(1.15) rotate(90deg); border-radius: 60% 40% 40% 60%; } 50% { transform: translate(-30px, 50px) scale(0.9) rotate(180deg); border-radius: 50% 50% 40% 60%; } 75% { transform: translate(40px, 30px) scale(1.1) rotate(270deg); border-radius: 40% 60% 50% 50%; } } @keyframes morphOrb2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 40% 60%; } 33% { transform: translate(-50px, -60px) scale(1.2) rotate(120deg); border-radius: 40% 60% 60% 40%; } 66% { transform: translate(40px, -20px) scale(0.85) rotate(240deg); border-radius: 50% 50% 40% 60%; } } @keyframes morphOrb3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; } } /* Grid Lines Background */ .login-page::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--text-white-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--text-white-rgb), 0.03) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; pointer-events: none; animation: gridShift 20s linear infinite; } @keyframes gridShift { 0% { transform: perspective(500px) rotateX(0deg); } 100% { transform: perspective(500px) rotateX(2deg) translateY(-60px); } } /* Scan line effect */ .login-page::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.6), transparent); z-index: 5; pointer-events: none; animation: scanDown 4s linear infinite; } @keyframes scanDown { 0% { top: -2px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ========== SPLIT-SCREEN CONTAINER ========== */ .login-split-container { display: flex; width: 90vw; max-width: 880px; min-height: 500px; max-height: 80vh; background: rgba(var(--text-white-rgb), 0.02); border: 1px solid rgba(var(--text-white-rgb), 0.2); border-radius: 48px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.15), inset 0 2px 3px rgba(var(--text-white-rgb), 0.3), inset 0 0 20px rgba(var(--text-white-rgb), 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2); backdrop-filter: blur(48px) saturate(200%); -webkit-backdrop-filter: blur(48px) saturate(200%); overflow: hidden; position: relative; z-index: 10; animation: card3DIn 1s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; } @keyframes card3DIn { 0% { opacity: 0; transform: perspective(1200px) rotateX(15deg) rotateY(-5deg) translateY(80px) scale(0.9); } 60% { transform: perspective(1200px) rotateX(-2deg) rotateY(1deg) translateY(-10px) scale(1.02); } 100% { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateY(0) scale(1); } } .login-split-container:hover { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55), 0 0 100px rgba(var(--primary-color-rgb), 0.12), inset 0 1px 0 rgba(var(--text-white-rgb), 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: box-shadow 0.4s ease; } /* Glowing border animation */ .login-split-container::before { content: ''; position: absolute; inset: -1px; border-radius: 49px; padding: 1px; background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.4), transparent 40%, transparent 60%, rgba(168, 85, 247, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; animation: borderGlow 4s ease-in-out infinite; } @keyframes borderGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Remove old layout references */ .login-container, .login-showcase, .login-form-side, .login-card { display: none; } /* ========== LEFT SIDE: FORM ========== */ .login-split-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 40px; min-width: 0; } .login-form-inner { width: 100%; max-width: 360px; } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo-icon { width: 82px; height: 82px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(var(--text-white-rgb), 0.05); border-radius: 50%; border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 2px rgba(56, 249, 215, 0.4), 0 0 30px rgba(56, 249, 215, 0.2), 0 8px 32px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(var(--text-white-rgb), 0.15); backdrop-filter: blur(12px); animation: logoGlow 3s ease-in-out infinite; } @keyframes logoGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(56, 249, 215, 0.4), 0 0 30px rgba(56, 249, 215, 0.2), 0 8px 32px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(var(--text-white-rgb), 0.15); } 50% { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6), 0 0 45px rgba(99, 102, 241, 0.35), 0 8px 40px rgba(56, 249, 215, 0.3), inset 0 1px 0 rgba(var(--text-white-rgb), 0.2); } } .login-logo h1, .login-title { font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, #ffffff 0%, #38f9d7 50%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 6px; letter-spacing: -0.5px; } .login-subtitle { font-size: 0.82rem; color: var(--text-muted); margin: 0; letter-spacing: 0.3px; } .login-status-bar { display: flex; gap: 14px; justify-content: center; margin-bottom: 22px; padding: 8px 20px; background: rgba(var(--text-white-rgb), 0.04); border: 1px solid rgba(var(--text-white-rgb), 0.1); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(var(--text-white-rgb),0.08); } .login-status-item { display: flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); } .login-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981, 0 0 20px rgba(16,185,129,0.4); animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .login-status-dot.dot-blue { background: #60a5fa; box-shadow: 0 0 10px #60a5fa, 0 0 20px rgba(96,165,250,0.4); animation-delay: 0.6s; } .login-status-dot.dot-purple { background: #a78bfa; box-shadow: 0 0 10px #a78bfa, 0 0 20px rgba(167,139,250,0.4); animation-delay: 1.2s; } .login-form .form-group { margin-bottom: 18px; } .login-form label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; } .input-icon-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; z-index: 1; } .input-icon-wrapper input { width: 100%; padding: 13px 16px 13px 46px; background: rgba(var(--text-white-rgb), 0.04); border: 1px solid rgba(var(--text-white-rgb), 0.12); border-radius: 999px; color: var(--text-primary); font-size: 0.9rem; font-family: inherit; transition: all 0.3s ease; outline: none; backdrop-filter: blur(8px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } .input-icon-wrapper input::placeholder { color: rgba(var(--text-white-rgb), 0.25); } .input-icon-wrapper input:focus { border-color: rgba(56, 249, 215, 0.5); box-shadow: 0 0 0 3px rgba(56, 249, 215, 0.1), 0 0 20px rgba(56, 249, 215, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.15); background: rgba(var(--text-white-rgb), 0.07); } .password-toggle-btn { position: absolute; right: 12px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; align-items: center; } .login-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .login-remember { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-size: 0.85rem; font-weight: 600; border: none; border-radius: 999px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #38f9d7 0%, #6366f1 60%, #a78bfa 100%); background-size: 200% 200%; color: white; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(56, 249, 215, 0.15); position: relative; overflow: hidden; animation: gradShift 4s ease infinite; } @keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--text-white-rgb),0.2), transparent); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5), 0 0 60px rgba(56, 249, 215, 0.25); } .btn-primary:active { transform: translateY(0); } .btn-block { display: flex; width: 100%; padding: 15px 20px; font-size: 0.95rem; } .login-footer { text-align: center; margin-top: 20px; } .login-secure-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; color: rgba(var(--text-white-rgb),0.3); letter-spacing: 0.8px; padding: 6px 14px; border: 1px solid rgba(var(--text-white-rgb),0.07); border-radius: 999px; background: rgba(var(--text-white-rgb),0.02); } /* ========== RIGHT SIDE: SHOWCASE ========== */ .login-split-showcase { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, rgba(56,249,215,0.04) 0%, rgba(99,102,241,0.06) 50%, rgba(167,139,250,0.04) 100%); border-left: 1px solid rgba(var(--text-white-rgb), 0.08); } .showcase-gradient-mesh { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(56, 249, 215, 0.12), transparent 55%), radial-gradient(ellipse at 70% 70%, rgba(167, 139, 250, 0.12), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.06), transparent 60%); animation: meshPulse 8s ease-in-out infinite; } @keyframes meshPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1.2; } } .showcase-content { position: relative; z-index: 2; text-align: center; padding: 40px; } .showcase-floating-devices { position: relative; width: 240px; height: 260px; margin: 0 auto 32px; } .floating-device { position: absolute; display: flex; align-items: center; justify-content: center; background: rgba(var(--text-white-rgb), 0.06); border: 1px solid rgba(var(--text-white-rgb), 0.15); border-radius: 28px; backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(var(--text-white-rgb),0.15); color: var(--text-secondary); } .device-monitor { width: 110px; height: 110px; top: 10px; left: 50%; transform: translateX(-50%); color: var(--green); animation: floatDevice 6s ease-in-out infinite; z-index: 2; } .device-laptop { width: 76px; height: 76px; bottom: 10px; left: 0; animation: floatDevice 6s ease-in-out infinite; animation-delay: 1.5s; color: var(--blue); } .device-cpu { width: 70px; height: 70px; bottom: 10px; right: 0; animation: floatDevice 6s ease-in-out infinite; animation-delay: 3s; color: var(--purple); } .device-mouse { display: none; } @keyframes floatDevice { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .device-monitor:is(.device-monitor) { animation: floatDeviceCenter 6s ease-in-out infinite; } @keyframes floatDeviceCenter { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-12px); } } .showcase-branding { position: relative; } .showcase-divider { width: 60px; height: 2px; margin: 0 auto 24px; background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.5), transparent); } .showcase-features { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 280px; margin: 0 auto; } .showcase-feature { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-secondary); } .showcase-feature-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-color-rgb), 0.1); border-radius: 8px; color: var(--green); flex-shrink: 0; } .showcase-particles span { position: absolute; width: 4px; height: 4px; background: rgba(var(--primary-color-rgb), 0.3); border-radius: 50%; animation: particleFloat 8s ease-in-out infinite; } .showcase-particles span:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } .showcase-particles span:nth-child(2) { top: 30%; right: 15%; animation-delay: 1s; } .showcase-particles span:nth-child(3) { bottom: 20%; left: 30%; animation-delay: 2s; } .showcase-particles span:nth-child(4) { top: 50%; left: 10%; animation-delay: 3s; } .showcase-particles span:nth-child(5) { bottom: 30%; right: 25%; animation-delay: 4s; } .showcase-particles span:nth-child(6) { top: 15%; right: 35%; animation-delay: 0.5s; } .showcase-particles span:nth-child(7) { bottom: 40%; left: 45%; animation-delay: 1.5s; } .showcase-particles span:nth-child(8) { top: 60%; right: 10%; animation-delay: 2.5s; } .showcase-particles span:nth-child(9) { bottom: 10%; left: 15%; animation-delay: 3.5s; } .showcase-particles span:nth-child(10) { top: 40%; left: 60%; animation-delay: 4.5s; } @keyframes particleFloat { 0%, 100% { transform: translate(0, 0); opacity: 0.3; } 25% { transform: translate(10px, -15px); opacity: 0.6; } 50% { transform: translate(-5px, -25px); opacity: 0.3; } 75% { transform: translate(15px, -10px); opacity: 0.5; } } @media (max-width: 768px) { .login-split-showcase { display: none; } .login-split-container { max-width: 440px; } .login-split-form { padding: 24px 20px; } } /* ==================== TECH THEME ENHANCEMENTS ==================== */ /* Tech Grid Overlay - Full page circuit grid */ .tech-grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.6; } .tech-grid-overlay::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 25%, rgba(0, 255, 136, 0.04) 0%, transparent 40%), radial-gradient(circle at 75% 75%, rgba(183, 0, 255, 0.04) 0%, transparent 40%); animation: techGridPulse 6s ease-in-out infinite; } @keyframes techGridPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Matrix Rain Canvas */ #matrixRain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.12; } /* Terminal Cursor Effect */ .terminal-cursor { display: inline-block; width: 2px; height: 1.2em; background: var(--green); margin-left: 4px; animation: cursorBlink 1s step-end infinite; vertical-align: middle; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Typing animation for title */ .typing-text { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--green); animation: typingReveal 2s steps(20, end) forwards, cursorBlink 0.8s step-end infinite; width: 0; } @keyframes typingReveal { to { width: 100%; } } /* Holographic Card Effect - Enhanced */ .holographic-card { position: relative; overflow: hidden; } .holographic-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, transparent 0deg, rgba(0, 212, 255, 0.03) 60deg, transparent 120deg, rgba(183, 0, 255, 0.03) 180deg, transparent 240deg, rgba(0, 255, 136, 0.03) 300deg, transparent 360deg ); animation: hologramRotate 8s linear infinite; pointer-events: none; z-index: 0; } @keyframes hologramRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Data Stream Ticker */ .data-stream-ticker { position: fixed; bottom: 0; left: 0; right: 0; height: 28px; background: rgba(5, 10, 17, 0.9); border-top: 1px solid rgba(0, 212, 255, 0.15); z-index: 100; overflow: hidden; display: flex; align-items: center; } .ticker-label { flex-shrink: 0; padding: 0 12px; font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); border-right: 1px solid rgba(0, 212, 255, 0.15); background: rgba(0, 255, 136, 0.05); height: 100%; display: flex; align-items: center; } .ticker-content { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; } .ticker-track { display: flex; gap: 40px; animation: tickerScroll 20s linear infinite; white-space: nowrap; padding-left: 100%; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .ticker-item { font-size: 0.7rem; color: var(--text-muted); font-family: 'JetBrains Mono', 'Courier New', monospace; display: flex; align-items: center; gap: 6px; } .ticker-item .ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); animation: tickerDotPulse 1.5s ease-in-out infinite; } .ticker-item .ticker-dot.blue { background: var(--blue); } .ticker-item .ticker-dot.purple { background: var(--purple); } .ticker-item .ticker-dot.orange { background: var(--orange); } @keyframes tickerDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } /* Digital System Clock */ .system-clock { position: fixed; top: 16px; right: 20px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(5, 10, 17, 0.7); border: 1px solid rgba(0, 212, 255, 0.15); border-radius: 8px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.75rem; color: var(--green); letter-spacing: 1px; backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(0, 255, 136, 0.05); } .system-clock .clock-icon { width: 14px; height: 14px; color: var(--blue); animation: clockTick 2s ease-in-out infinite; } @keyframes clockTick { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Circuit Board Pattern for Right Side */ .circuit-board { position: absolute; inset: 0; pointer-events: none; opacity: 0.08; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M10 50 L30 50 L40 40 L60 40 L70 50 L90 50' stroke='%2300d4ff' fill='none' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%2300d4ff'/%3E%3Ccircle cx='90' cy='50' r='2' fill='%2300d4ff'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2300ff88'/%3E%3Ccircle cx='60' cy='40' r='2' fill='%2300ff88'/%3E%3Cpath d='M50 10 L50 30 L40 40 L40 60 L50 70 L50 90' stroke='%23b700ff' fill='none' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='10' r='2' fill='%23b700ff'/%3E%3Ccircle cx='50' cy='90' r='2' fill='%23b700ff'/%3E%3C/svg%3E"); animation: circuitPulse 4s ease-in-out infinite; } @keyframes circuitPulse { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.12; } } /* Tech connector lines between form elements */ .tech-connector { position: relative; } .tech-connector::after { content: ''; position: absolute; left: 20px; bottom: -10px; width: 1px; height: 10px; background: linear-gradient(to bottom, rgba(0, 212, 255, 0.2), transparent); opacity: 0.5; } /* System ID Badge */ .system-id-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.15); border-radius: 4px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--green); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 8px; } .system-id-badge .badge-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: badgePulse 2s ease-in-out infinite; } /* Enhanced Input Fields - Tech Style */ .input-icon-wrapper input::placeholder { color: rgba(var(--text-white-rgb), 0.2); font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.85rem; } .input-icon-wrapper input:focus { border-color: rgba(0, 212, 255, 0.6); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08), 0 0 30px rgba(0, 212, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.15); background: rgba(var(--text-white-rgb), 0.06); } /* Tech-enhanced Password Toggle */ .password-toggle-btn:hover { color: var(--primary-color); text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); } /* Scanline effect for login page */ .login-page .scan-line-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); opacity: 0.5; } /* Hexagonal pattern overlay for the showcase side */ .hex-pattern { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300d4ff' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34H28v2.31h-.01L17 42.65V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Tech-enhanced button shine */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease; z-index: 1; } .btn-primary:hover::before { left: 100%; } /* Security lock animation */ .security-lock-icon { animation: lockSecure 3s ease-in-out infinite; } @keyframes lockSecure { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.3)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.5)); } } /* Enhanced Login Card with tech border glow */ .login-split-container { border: 1px solid rgba(0, 212, 255, 0.15) !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.15), inset 0 2px 3px rgba(var(--text-white-rgb), 0.3), inset 0 0 20px rgba(var(--text-white-rgb), 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 60px rgba(0, 212, 255, 0.05) !important; } .login-split-container:hover { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55), 0 0 100px rgba(var(--primary-color-rgb), 0.12), inset 0 1px 0 rgba(var(--text-white-rgb), 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 212, 255, 0.08) !important; } /* Tech floating data blocks */ .tech-data-block { position: absolute; padding: 8px 12px; background: rgba(5, 10, 17, 0.6); border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 6px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--text-muted); pointer-events: none; z-index: 3; animation: dataBlockFloat 8s ease-in-out infinite; } .tech-data-block .data-label { color: var(--blue); } .tech-data-block .data-value { color: var(--green); } @keyframes dataBlockFloat { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-8px); opacity: 1; } } /* Responsive adjustments for tech elements */ @media (max-width: 768px) { .system-clock, .data-stream-ticker { display: none; } #matrixRain { opacity: 0.06; } } .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; backdrop-filter: blur(var(--glass-blur)); transition: all var(--transition-fast); } /* ==================== SIDEBAR ==================== */ .sidebar { width: var(--sidebar-width); height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: var(--bg-sidebar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--border-color); border-radius: 0; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; transition: width var(--transition-base), transform var(--transition-base), left var(--transition-base); overflow: hidden; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background: var(--bg-sidebar); z-index: 10; } .sidebar-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); } .sidebar-logo-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--green); } .sidebar-brand { font-size: 1.55rem; font-weight: 800; letter-spacing: 0.5px; white-space: nowrap; background: linear-gradient(135deg, #ffffff 0%, #38f9d7 50%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sidebar-close { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 8px; transition: all var(--transition-fast); } .sidebar-close:hover { color: var(--text-primary); background: rgba(var(--text-white-rgb), 0.1); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0; padding-bottom: 60px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 99; } .sidebar-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border-color); flex-shrink: 0; } .sidebar-footer { padding: 16px; font-size: 0.75rem; color: var(--text-secondary); text-align: center; border-top: 1px solid var(--border-color); flex-shrink: 0; background: var(--bg-sidebar); z-index: 10; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 0.85rem; margin: 4px 12px; color: var(--text-secondary); text-decoration: none; border-radius: 8px; transition: all var(--transition-fast); position: relative; white-space: nowrap; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; } .nav-item:hover { color: var(--text-primary); background: rgba(var(--text-white-rgb), 0.05); } .nav-item.active { color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.1); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 18px; width: 3px; background: var(--primary-color); border-radius: 4px; } .nav-divider { padding: 16px 20px 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); } .main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: auto; transition: margin-left var(--transition-base), width var(--transition-base), transform var(--transition-base); min-width: 0; } @media (min-width: 1025px) { body.sidebar-collapsed .sidebar { width: 80px; } body.sidebar-collapsed .sidebar .sidebar-brand, body.sidebar-collapsed .sidebar .nav-item span, body.sidebar-collapsed .sidebar .sidebar-user-info, body.sidebar-collapsed .sidebar .sidebar-user-action { display: none; } body.sidebar-collapsed .sidebar .sidebar-logo { justify-content: center; } body.sidebar-collapsed .sidebar .sidebar-header { padding: 20px 12px 16px; justify-content: center; } body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 12px; } body.sidebar-collapsed .sidebar .nav-divider { display: none; } body.sidebar-collapsed .sidebar .sidebar-user { justify-content: center; } body.sidebar-collapsed .main-content { margin-left: 80px; width: calc(100% - 80px); } } /* ==================== TOPBAR ==================== */ .topbar { height: var(--topbar-height); margin: 0; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(10, 10, 15, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-md); position: sticky; top: 0; z-index: 90; flex-shrink: 0; } .topbar-left { display: flex; align-items: center; gap: 16px; } .menu-toggle { display: block; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .menu-toggle:hover { color: var(--text-primary); background: rgba(var(--text-white-rgb), 0.05); } .page-title { font-size: 1.25rem; font-weight: 700; color: var(--text-white); } .topbar-right { display: flex; align-items: center; gap: 12px; } .topbar-greeting { font-size: 0.85rem; color: var(--text-secondary); } /* ==================== PAGE SECTIONS ==================== */ .page-section { display: none; margin: var(--page-container-margin, 12px); padding: 16px; flex: 1; animation: pageIn 0.35s ease; min-width: 0; overflow-y: auto; overflow-x: hidden; /* Customizable Glass Container linked to Appearance Settings */ background: var(--bg-card, rgba(20, 20, 25, 0.45)); backdrop-filter: blur(var(--glass-blur, 16px)); -webkit-backdrop-filter: blur(var(--glass-blur, 16px)); border: 1px solid rgba(var(--text-white-rgb), 0.05); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.2)); } .page-section.active { display: block; } @keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ==================== STATS GRID ==================== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 28px; } .stat-card { padding: 24px; background: var(--bg-card); backdrop-filter: blur(var(--glass-blur)); border: var(--glass-border); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: 16px; transition: all var(--transition-base); position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity var(--transition-base); } .stat-card.green::after { background: var(--gradient-green); } .stat-card.blue::after { background: var(--gradient-blue); } .stat-card.orange::after { background: var(--gradient-orange); } .stat-card.purple::after { background: var(--gradient-purple); } .stat-card.red::after { background: var(--gradient-red); } .stat-card.cyan::after { background: linear-gradient(135deg, #06b6d4, #0891b2); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon.green { background: var(--green-bg); color: var(--green); } .stat-icon.blue { background: var(--blue-bg); color: var(--blue); } .stat-icon.orange { background: var(--orange-bg); color: var(--orange); } .stat-icon.purple { background: var(--purple-bg); color: var(--purple); } .stat-icon.red { background: var(--red-bg); color: var(--red); } .stat-icon.cyan { background: var(--cyan-bg); color: var(--cyan); } .stat-info { flex: 1; min-width: 0; } .stat-label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--text-white); line-height: 1.2; } .stat-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } /* ==================== DASHBOARD GRID ==================== */ .dashboard-welcome-banner { background: var(--bg-card); border: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; box-shadow: var(--shadow-sm); } .dash-welcome-text { margin: 0 0 6px; color: transparent; background: linear-gradient(90deg, #ffffff 0%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 4px 12px rgba(165, 180, 252, 0.15); } .dash-welcome-sub { margin: 0; color: var(--text-secondary); font-size: 0.88rem; } .dash-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; } .dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; min-width: 0; } .dash-col-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .dash-col-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .dash-inner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 1024px) { .dashboard-main-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dash-inner-grid { grid-template-columns: 1fr; } } .dash-card { background: var(--bg-card); backdrop-filter: blur(var(--glass-blur)); border: var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; min-width: 0; } /* Dashboard Big Tab Labels */ .dash-tab-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 22px 8px; position: relative; overflow: hidden; } .dash-tab-title-group { display: flex; align-items: baseline; gap: 8px; } .dash-tab-text { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px; color: var(--text-white) !important; line-height: 1; text-transform: uppercase; } .dash-tab-accent { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px; color: var(--tab-color-2); line-height: 1; text-transform: uppercase; } .dash-tab-meta { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; margin-left: 6px; } /* Topbar Tab Labels */ .topbar-tab-label { display: flex; align-items: baseline; gap: 8px; position: relative; padding-bottom: 2px; user-select: none; } .topbar-tab-label .page-tab-text { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.5px; color: var(--tab-color-1); line-height: 1; text-transform: uppercase; transition: all var(--transition-base); } .topbar-tab-label .page-tab-accent { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.5px; color: var(--tab-color-2); line-height: 1; text-transform: uppercase; text-shadow: 0 0 8px var(--tab-color-2); transition: all var(--transition-base); } body.theme-light .topbar-tab-label .page-tab-text, body.theme-light .topbar-tab-label .page-tab-accent { text-shadow: none; } /* Page Section Tab Labels */ .page-tab-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; padding-bottom: 12px; position: relative; border-bottom: 1px solid var(--border-color); } .page-tab-label::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 140px; height: 3px; background: var(--tab-color-2); border-radius: 3px; } .page-tab-text { font-size: 2rem; font-weight: 900; letter-spacing: -0.5px; color: var(--tab-color-1); line-height: 1; text-transform: uppercase; } .page-tab-accent { font-size: 2rem; font-weight: 900; letter-spacing: -0.5px; color: var(--tab-color-2); line-height: 1; text-transform: uppercase; opacity: 0.85; } .dash-card-full { grid-column: 1 / -1; } .dash-card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-color); } .dash-card-header h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .dash-card-link { font-size: 0.8rem; color: var(--green); font-weight: 500; transition: color var(--transition-fast); } .dash-card-link:hover { color: var(--primary-color); } .dash-card-body { padding: 8px 0; max-height: 340px; overflow-y: auto; } /* Sortable JS Styles */ .sortable-ghost { opacity: 0.4; background: var(--bg-card-hover) !important; border: 2px dashed var(--border-color) !important; box-shadow: none !important; } /* ==================== SECTION TOOLBAR ==================== */ .section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; min-width: 0; } .toolbar-left h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); } /* ==================== SEARCH BOX ==================== */ .search-box { position: relative; width: 280px; max-width: 100%; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .search-box input { width: 100%; padding: 10px 16px 10px 40px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: all var(--transition-base); outline: none; } .search-box input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12); } .search-box input::placeholder { color: var(--text-muted); } /* ==================== FILTER SELECT ==================== */ .filter-select { padding: 10px 36px 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.85rem; font-family: inherit; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: all var(--transition-base); } .filter-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12); } .filter-select option { background: var(--bg-card-solid); color: var(--text-primary); } .password-toggle:hover { color: var(--text-primary); } /* Hide native browser password reveal eye icons */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear, input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; } /* ==================== LOGIN FORM EXTRAS ==================== */ /* ==================== DATA TABLES ==================== */ .table-container { background: var(--bg-card); backdrop-filter: blur(var(--glass-blur)); border: var(--glass-border); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 190px); max-width: 100%; } .glass-table-container { background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(var(--glass-blur, 16px)); -webkit-backdrop-filter: blur(var(--glass-blur, 16px)); border: 1px solid rgba(var(--text-white-rgb), 0.05); border-radius: var(--radius-lg, 16px); overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 190px); max-width: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .data-table { width: 100%; border-collapse: collapse; } .data-table thead { position: sticky; top: 0; z-index: 10; } .data-table th { position: sticky; top: 0; z-index: 10; padding: 14px 18px; background: var(--bg-card-solid); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary-color); text-align: left; border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.25); box-shadow: inset 0 -1px 0 rgba(var(--primary-color-rgb), 0.25); white-space: nowrap; } .data-table td { padding: 14px 18px; font-size: 0.875rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); vertical-align: middle; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:nth-child(even) { background: var(--bg-table-row-alt); } .data-table tbody tr:hover { background: var(--bg-table-row-hover); } .data-table tbody tr:last-child td { border-bottom: none; } /* Sortable headers styling */ .sortable-header { cursor: pointer; user-select: none; position: relative; padding-right: 28px !important; transition: color var(--transition-fast), background-color var(--transition-fast); } .sortable-header:hover { color: var(--text-primary) !important; background: rgba(var(--text-white-rgb), 0.05) !important; } .sortable-header::after { content: '⇅'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 0.75rem; transition: opacity var(--transition-fast); } .sortable-header.sort-asc { color: var(--primary-color) !important; } .sortable-header.sort-asc::after { content: '▲'; opacity: 0.85; } .sortable-header.sort-desc { color: var(--primary-color) !important; } .sortable-header.sort-desc::after { content: '▼'; opacity: 0.85; } /* Table cell content helpers */ .cell-product { display: flex; align-items: center; gap: 12px; } .cell-product-img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-input); flex-shrink: 0; } .cell-product-img-placeholder { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; } .cell-actions { display: flex; gap: 6px; } .cell-actions .btn-icon { background: rgba(var(--text-white-rgb), 0.04); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; } .cell-actions .btn-icon svg { width: 22px !important; height: 22px !important; } .cell-actions .btn-icon:hover { background: rgba(var(--text-white-rgb), 0.08); color: var(--text-primary); } .cell-actions .btn-icon.edit:hover { color: var(--orange, #f59e0b); border-color: rgba(245, 158, 11, 0.3); } .cell-actions .btn-icon.delete:hover, .cell-actions .btn-icon.reject:hover { color: var(--red, #ef4444); border-color: rgba(239, 68, 68, 0.3); } .cell-actions .btn-icon.view:hover { color: var(--topbar-blue, #3b82f6); border-color: rgba(59, 130, 246, 0.3); } .cell-actions .btn-icon.complete:hover, .cell-actions .btn-icon.approve:hover { color: var(--green, #10b981); border-color: rgba(16, 185, 129, 0.3); } /* ==================== STATUS BADGES ==================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; } .badge-pending, .badge-expected, .badge-waiting-approval, .badge-booking-pending, .badge-pre-advise { background: rgba(245, 158, 11, 0.1) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; } .badge-approved, .badge-completed, .badge-delivered, .badge-gate-in, .badge-in-yard, .badge-return-gate-in, .badge-return-in-yard { background: rgba(16, 185, 129, 0.1) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; } .badge-processing, .badge-in-progress, .badge-shipped, .badge-repairing, .badge-lift-on-requested, .badge-return-lift-on-requested, .badge-return-requested, .badge-inspecting { background: rgba(59, 130, 246, 0.1) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; } .badge-cancelled, .badge-rejected { background: rgba(239, 68, 68, 0.1) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; } .badge-received, .badge-testing { background: rgba(6, 182, 212, 0.1) !important; color: #22d3ee !important; border: 1px solid rgba(6, 182, 212, 0.25) !important; } .badge-diagnosed, .badge-diagnosing, .badge-gate-out, .badge-role-admin, .badge-lifted-on, .badge-return-gate-out { background: rgba(139, 92, 246, 0.1) !important; color: #a78bfa !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; } /* Item Type Badges */ .badge-empty { background: rgba(107, 114, 128, 0.1) !important; color: #9ca3af !important; border: 1px solid rgba(107, 114, 128, 0.25) !important; } .badge-import { background: rgba(59, 130, 246, 0.1) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; } .badge-export { background: rgba(16, 185, 129, 0.1) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; } .badge-transit { background: rgba(139, 92, 246, 0.1) !important; color: #a78bfa !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; } .badge-full { background: rgba(16, 185, 129, 0.1) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; } .badge-return { background: rgba(245, 158, 11, 0.1) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; } .badge-lcl { background: rgba(59, 130, 246, 0.1) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; } .badge-waiting-parts { background: rgba(249, 115, 22, 0.1) !important; color: #fb923c !important; border: 1px solid rgba(249, 115, 22, 0.25) !important; } .badge-returned { background: rgba(148, 163, 184, 0.1) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; } .badge-priority-low { background: var(--green-bg); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.2); } .badge-priority-medium { background: var(--yellow-bg); color: var(--yellow); border: 1px solid rgba(234, 179, 8, 0.2); } .badge-priority-high { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(249, 115, 22, 0.2); } .badge-priority-urgent { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.2); } .badge-role-admin { background: var(--purple-bg); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.2); } /* ==================== MODALS ==================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; overflow-y: auto; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-card { width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; background: var(--bg-card, rgba(14, 14, 22, 0.95)); backdrop-filter: blur(var(--glass-blur, 24px)); -webkit-backdrop-filter: blur(var(--glass-blur, 24px)); border: 1px solid rgba(var(--text-white-rgb), 0.08); border-radius: var(--radius-xl, 32px); box-shadow: var(--shadow-xl); animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--border-color); } .modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-white); } .modal-close { background: rgba(var(--text-white-rgb), 0.05); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(var(--text-white-rgb), 0.1); color: var(--text-primary); } .modal-body { padding: 16px; } /* ==================== FORMS ==================== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .form-group-full { grid-column: 1 / -1; } .form-group { margin-bottom: 16px; } .form-group:last-child { margin-bottom: 0; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .form-group label .required { color: var(--red); } .form-control { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; transition: all var(--transition-base); outline: none; } .form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12); background: rgba(18, 18, 30, 0.9); } .form-control::placeholder { color: var(--text-muted); } select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } select.form-control option { background: var(--bg-card-solid); color: var(--text-primary); } textarea.form-control { resize: vertical; min-height: 80px; } .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); } /* Image Upload */ .image-upload-area { border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 24px; text-align: center; cursor: pointer; transition: all var(--transition-base); position: relative; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .image-upload-area:hover { border-color: var(--blue); background: rgba(var(--primary-color-rgb), 0.03); } .image-upload-area svg { color: var(--text-muted); } .image-upload-area p { font-size: 0.8rem; color: var(--text-muted); } .image-upload-area .highlight { color: var(--blue); font-weight: 500; } .image-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .image-preview { max-width: 100%; max-height: 160px; object-fit: contain; border-radius: var(--radius-sm); } /* Dynamic Rows (Stock In/Out items) */ .dynamic-rows { margin-bottom: 16px; } .dynamic-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; padding: 12px; background: rgba(var(--text-white-rgb), 0.02); border-radius: var(--radius-md); border: 1px solid var(--border-color); } .dynamic-row .form-group { margin-bottom: 0; } .dynamic-row .form-group label { font-size: 0.7rem; margin-bottom: 4px; } .row-remove-btn { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--red); cursor: pointer; padding: 8px; border-radius: var(--radius-sm); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; align-self: flex-end; margin-bottom: 2px; } .row-remove-btn:hover { background: rgba(239, 68, 68, 0.15); } .add-row-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(var(--primary-color-rgb), 0.08); border: 1px dashed rgba(var(--primary-color-rgb), 0.3); border-radius: var(--radius-md); color: var(--blue); font-size: 0.85rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--transition-base); width: 100%; justify-content: center; } .add-row-btn:hover { background: rgba(var(--primary-color-rgb), 0.12); border-color: rgba(var(--primary-color-rgb), 0.5); } .row-total { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: var(--radius-md); margin-top: 12px; } .row-total-label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); } .row-total-value { font-size: 1.2rem; font-weight: 800; color: var(--green); } /* ==================== CONFIRM DIALOG ==================== */ .confirm-overlay { z-index: 1100; } .confirm-card { text-align: center; padding: 36px 32px; max-width: 400px; width: 100%; background: rgba(14, 14, 22, 0.97); backdrop-filter: blur(24px); border: 1px solid rgba(var(--text-white-rgb), 0.08); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .confirm-icon { margin-bottom: 16px; } .confirm-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-white); margin-bottom: 8px; } .confirm-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 24px; } .confirm-actions { display: flex; gap: 12px; justify-content: center; } /* ==================== TOAST NOTIFICATIONS ==================== */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; width: 100%; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: rgba(14, 14, 22, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(var(--text-white-rgb), 0.08); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: all; position: relative; overflow: hidden; } .toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .toast.success::before { background: var(--green); } .toast.error::before { background: var(--red); } .toast.warning::before { background: var(--orange); } .toast.info::before { background: var(--blue); } .toast-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .toast.success .toast-icon { color: var(--green); } .toast.error .toast-icon { color: var(--red); } .toast.warning .toast-icon { color: var(--orange); } .toast.info .toast-icon { color: var(--blue); } .toast-message { flex: 1; font-size: 0.875rem; color: var(--text-primary); line-height: 1.4; } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; flex-shrink: 0; transition: color var(--transition-fast); } .toast-close:hover { color: var(--text-primary); } @keyframes toastIn { from { opacity: 0; transform: translateX(50px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } .toast.removing { animation: toastOut 0.3s ease forwards; } @keyframes toastOut { to { opacity: 0; transform: translateX(50px) scale(0.95); } } /* ==================== LOADING & EMPTY STATES ==================== */ .loading-state { display: flex; align-items: center; justify-content: center; padding: 48px 20px; flex-direction: column; gap: 12px; } .loader { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; } .empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); } .empty-state svg { margin-bottom: 12px; opacity: 0.4; } .empty-state p { font-size: 0.9rem; } /* ==================== DETAIL VIEW (in Modal) ==================== */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .detail-item { display: flex; flex-direction: column; gap: 4px; } .detail-item.full { grid-column: 1 / -1; } .detail-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .detail-value { font-size: 0.9rem; color: var(--text-primary); font-weight: 500; } .detail-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .detail-table th { padding: 10px 14px; background: rgba(var(--text-white-rgb), 0.03); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary-color); text-align: left; border-bottom: 1px solid var(--border-color); } .detail-table td { padding: 10px 14px; font-size: 0.85rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); } .detail-table tbody tr:last-child td { border-bottom: none; } .detail-section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-white); margin-top: 24px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } /* Status workflow */ .status-workflow { display: flex; gap: 0; margin: 16px 0; align-items: center; flex-wrap: wrap; } .status-step { display: flex; align-items: center; gap: 8px; } .status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-color); flex-shrink: 0; transition: background var(--transition-base); } .status-dot.active { background: var(--green); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .status-dot.completed { background: var(--green); } .status-step-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } .status-step-label.active { color: var(--green); font-weight: 600; } .status-step-label.completed { color: var(--text-secondary); } .status-line { width: 28px; height: 2px; background: var(--border-color); margin: 0 4px; flex-shrink: 0; } .status-line.completed { background: var(--green); } /* ==================== MINI TABLE (dashboard) ==================== */ .mini-table { width: 100%; } .mini-table-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; transition: background var(--transition-fast); gap: 12px; } .mini-table-row:hover { background: var(--bg-table-row-hover); } .mini-table-row+.mini-table-row { border-top: 1px solid var(--border-color); } .mini-table-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .mini-table-title { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-table-sub { font-size: 0.75rem; color: var(--text-muted); } .mini-table-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .mini-table-value { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } /* Low stock item */ .low-stock-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; gap: 12px; } .low-stock-item+.low-stock-item { border-top: 1px solid var(--border-color); } .low-stock-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .low-stock-name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .low-stock-bar-container { width: 120px; flex-shrink: 0; } .low-stock-bar { height: 6px; background: rgba(var(--text-white-rgb), 0.06); border-radius: 3px; overflow: hidden; } .low-stock-bar-fill { height: 100%; border-radius: 3px; transition: width var(--transition-slow); } .low-stock-bar-fill.critical { background: var(--red); } .low-stock-bar-fill.warning { background: var(--orange); } .low-stock-bar-fill.ok { background: var(--green); } .low-stock-qty { font-size: 0.8rem; font-weight: 600; width: 40px; text-align: right; flex-shrink: 0; } .low-stock-qty.critical { color: var(--red); } .low-stock-qty.warning { color: var(--orange); } /* ==================== RESPONSIVE ==================== */ @media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .sidebar { transform: translateX(-100%); transition: transform var(--transition-base), left var(--transition-base); } .sidebar.open { transform: translateX(0); } .sidebar.open~.sidebar-overlay { display: block; } .sidebar-close { display: flex; } .main-content { margin-left: 0; width: 100%; } .menu-toggle { display: flex; } .data-table { font-size: 0.82rem; } .data-table th, .data-table td { padding: 10px 12px; } } @media (max-width: 900px) { .col-updated-by { display: none !important; } } @media (max-width: 768px) { .page-section { margin: var(--page-container-margin-mobile, 8px); padding: 12px 12px; border-radius: var(--page-container-radius-mobile, 2px); } .topbar { padding: 0 12px; gap: 8px; } .topbar-tab-label { gap: 4px; } .topbar-tab-label .page-tab-text, .topbar-tab-label .page-tab-accent { font-size: 1.05rem; } .topbar-right { gap: 4px !important; } .topbar-greeting { display: none; } .topbar-right button span { display: none !important; } .topbar-right button { padding: 4px !important; } .topbar-right .btn-icon { width: 28px; height: 28px; } .topbar-right .sidebar-user { padding: 0; margin: 0; } .topbar-right .sidebar-user-avatar { height: 30px !important; font-size: 12px !important; } .topbar-right .sidebar-user-info { display: none !important; } .topbar-divider { margin: 0 4px !important; } .topbar-tab-label .page-tab-text { display: none; } #changePasswordBtn, #logoutBtn { width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #changePasswordBtn span, #logoutBtn span { display: none !important; } .section-toolbar { flex-direction: column; align-items: stretch; } .toolbar-left { flex-direction: column; align-items: stretch; } .search-box { width: 100%; } .form-grid { grid-template-columns: 1fr; } .dynamic-row { grid-template-columns: 1fr 1fr; } .dynamic-row .form-group:first-child { grid-column: 1 / -1; } .modal-card { margin: 10px; max-height: 95vh; } .modal-body { padding: 16px 20px 20px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .stat-card { padding: 16px; } .stat-value { font-size: 1.4rem; } .detail-grid { grid-template-columns: 1fr; } .status-workflow { flex-direction: column; align-items: flex-start; } .status-line { width: 2px; height: 16px; margin: 2px 0 2px 5px; } .table-container { overflow-x: auto; max-height: calc(100vh - 250px); } .topbar-greeting { display: none; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .login-card { padding: 32px 24px; margin: 16px; } .confirm-actions { flex-direction: column; } } /* ==================== UTILITIES ==================== */ .text-green { color: var(--green); } .text-red { color: var(--red); } .text-blue { color: var(--blue); } .text-orange { color: var(--orange); } .text-purple { color: var(--purple); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-mono { font-family: 'JetBrains Mono', monospace; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .text-right { text-align: right; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ==================== REPORTS & ANALYTICS ==================== */ .report-content { margin-top: 20px; flex: 1; display: flex; flex-direction: column; min-height: 0; } .report-stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .report-stat { flex: 1; min-width: 140px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 6px; transition: all 0.2s ease; } .report-stat:hover { border-color: var(--border-color-light); transform: translateY(-2px); } .report-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; } .report-stat-label { font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* Color variants for text */ .text-success { color: var(--green) !important; } .text-danger { color: var(--red) !important; } .text-warning { color: var(--orange) !important; } /* Toolbar adjustments for report pages */ .section-toolbar .toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .form-select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-family: 'Inter', sans-serif; cursor: pointer; transition: border-color 0.2s ease; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8ba3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } .form-select:focus { border-color: var(--border-color-focus); outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15); } .form-input[type="date"], .form-input[type="month"] { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s ease; } .form-input[type="date"]:focus, .form-input[type="month"]:focus { border-color: var(--border-color-focus); outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15); } /* Color scheme for date/month inputs in dark mode */ .form-input[type="date"]::-webkit-calendar-picker-indicator, .form-input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } /* Audit log JSON cells */ .data-table code { font-size: 0.78rem; background: rgba(var(--text-white-rgb), 0.04); padding: 2px 6px; border-radius: 4px; color: var(--text-secondary); } /* Badge variants for audit */ .badge-completed { background: rgba(16, 185, 129, 0.15); color: #34d399; } .badge-processing { background: rgba(var(--primary-color-rgb), 0.15); color: #60a5fa; } .badge-cancelled { background: rgba(239, 68, 68, 0.15); color: #f87171; } /* Responsive report layout */ @media (max-width: 768px) { .report-stats-row { flex-direction: column; } .section-toolbar .toolbar-right { flex-wrap: wrap; gap: 8px; } .form-select, .form-input[type="date"], .form-input[type="month"] { width: 100% !important; min-width: unset !important; } } /* ==================== PRODUCT IMAGES ==================== */ .cell-product-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); } .cell-product-img-placeholder { width: 40px; height: 40px; border-radius: 6px; background: var(--bg-secondary); border: 1px dashed var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--text-muted); } .image-upload-area { border: 2px dashed var(--border-color); border-radius: 12px; padding: 24px; text-align: center; background: var(--bg-input); cursor: pointer; position: relative; transition: all 0.2s ease; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .image-upload-area:hover { border-color: var(--blue); background: var(--bg-card-hover); } .image-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .image-preview { max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: contain; } /* ==================== POINT OF SALE (POS) - PROFESSIONAL SAAS ==================== */ .pos-layout { display: flex; height: 100%; overflow: hidden; box-sizing: border-box; } .pos-products-area { flex: 1; min-width: 0; margin: 20px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); height: 100%; max-height: 100%; gap: 16px; padding: 20px; } .pos-cart-area { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-card); border-left: 1px solid var(--border-color); border-radius: 0; box-shadow: -4px 0 15px rgba(0, 0, 0, 0.05); z-index: 10; overflow: hidden; } .pos-toolbar { display: flex; gap: 16px; } .pos-toolbar .search-box { flex: 1; } .pos-toolbar .search-box input, .pos-toolbar select { background: var(--bg-input); border: 1px solid var(--border-color-light); border-radius: var(--radius-md); padding: 10px 16px 10px 40px; color: var(--text-primary); font-size: 0.9rem; transition: var(--transition-fast); } .pos-toolbar .search-box input:focus, .pos-toolbar select:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; } .pos-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 20px; overflow-y: auto; padding-right: 8px; padding-bottom: 20px; } .pos-product-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; position: relative; box-shadow: inset 0 0 10px rgba(var(--text-white-rgb), 0.02); height: 195px; width: 100%; box-sizing: border-box; } .pos-product-card:hover { border-color: var(--primary-color); transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(var(--text-white-rgb), 0.05); } .pos-product-img { height: 105px; flex-shrink: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid var(--border-color); } .pos-product-img img { width: 100%; height: 100%; object-fit: cover; } .pos-product-stock-badge { position: absolute; top: 8px; right: 8px; background: var(--bg-card); border: 1px solid var(--border-color-light); color: var(--text-primary); padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; } .pos-product-details { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .pos-product-name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .pos-product-sku { font-size: 0.75rem; color: var(--text-muted); } .pos-product-price { font-size: 1rem; font-weight: 700; color: var(--primary-color); margin-top: auto; text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3); } /* POS Cart Side */ .pos-cart-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } .pos-cart-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); font-weight: 600; } .pos-cart-customer { padding: 12px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-primary); } .pos-cart-customer select { background: transparent; border: 1px solid var(--border-color-light); color: var(--text-primary); border-radius: var(--radius-md); padding: 8px 12px; font-size: 0.9rem; width: 100%; } .pos-cart-items { flex: 1; overflow-y: auto; padding: 0; } .pos-cart-item { padding: 16px 20px; border-bottom: 1px solid rgba(var(--text-white-rgb), 0.05); display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(var(--text-white-rgb), 0.03), rgba(0, 0, 0, 0.1)); margin: 8px; border-radius: var(--radius-md); border: 1px solid var(--border-color); transition: all 0.2s ease; } .pos-cart-item:hover { background: linear-gradient(135deg, rgba(var(--text-white-rgb), 0.05), rgba(0, 0, 0, 0.15)); border-color: var(--border-color-light); transform: translateX(2px); } .pos-cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; /* allows text truncation */ } .pos-cart-item-name { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .pos-cart-item-price { font-size: 0.85rem; color: var(--text-secondary); } .pos-cart-item-qty { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border-radius: var(--radius-md); padding: 2px; border: 1px solid var(--border-color); } .pos-cart-item-qty button { background: transparent; border: none; color: var(--text-primary); width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; } .pos-cart-item-qty button:hover { background: var(--border-color-light); } .pos-cart-item-qty span { min-width: 24px; text-align: center; color: var(--text-primary); font-weight: 500; font-size: 0.9rem; } .pos-cart-item-total { font-size: 1rem; font-weight: 600; color: var(--text-primary); width: 70px; text-align: right; } .pos-cart-item-remove { background: transparent; border: 1px solid var(--border-color-light); color: var(--text-muted); width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; } .pos-cart-item-remove:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); } .pos-cart-summary { padding: 20px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); } .pos-summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--text-secondary); font-size: 0.9rem; } .pos-summary-row.pos-total { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); } .pos-checkout-btn { width: 100%; margin-top: 20px; padding: 16px; font-size: 1.1rem; font-weight: 600; background: var(--primary-gradient, linear-gradient(135deg, var(--primary-color), #222)); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.4); position: relative; overflow: hidden; } .pos-checkout-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(var(--text-white-rgb), 0.2) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s; } .pos-checkout-btn:hover:not(:disabled)::before { opacity: 1; } .pos-checkout-btn:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.6); transform: translateY(-2px); } .pos-checkout-btn:disabled { background: var(--bg-input); color: var(--text-muted); cursor: not-allowed; box-shadow: none; } @keyframes pulse-checkout { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.4); } 70% { box-shadow: 0 0 0 15px rgba(var(--primary-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); } } .pos-checkout-btn:not(:disabled) { animation: pulse-checkout 2s infinite; } @media (max-width: 820px) { #page-pos.active { height: auto !important; overflow: visible !important; } .pos-layout { display: flex; flex-direction: column; height: auto; overflow: visible; } .pos-products-area { height: 60vh; margin: 16px; } .pos-cart-area { width: 100% !important; max-width: 100% !important; border-left: none; } .pos-product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .pos-product-card { width: 100%; height: 185px; } .pos-product-img { height: 95px; } .pos-product-stock-badge { font-size: 0.65rem; padding: 1px 5px; top: 4px; right: 4px; } .pos-product-details { padding: 8px; gap: 2px; } .pos-product-name { font-size: 0.75rem; } .pos-product-sku { font-size: 0.65rem; } .pos-product-price { font-size: 0.9rem; } } /* ==================== GLASSMODE CUSTOMIZATION PANEL ==================== */ .glass-customization-panel { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 24px; } .glass-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 16px 24px; background: linear-gradient(90deg, rgba(var(--text-white-rgb),0.04) 0%, rgba(var(--text-white-rgb),0.01) 100%); border: 1px solid rgba(var(--text-white-rgb), 0.08); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(var(--text-white-rgb), 0.05); } .glass-panel-title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; color: var(--text-white); letter-spacing: 0.03em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .glass-panel-title svg { color: var(--blue-light); filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4)); } .glass-reset-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .glass-reset-btn:hover { background: var(--bg-card-hover); color: var(--text-white); border-color: var(--border-color-light); } .glass-control-group { margin-bottom: 18px; } .glass-control-group:last-child { margin-bottom: 0; } .glass-control-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } .glass-slider-value { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.78rem; font-weight: 600; color: var(--blue-light); background: var(--blue-bg); padding: 2px 8px; border-radius: 6px; min-width: 42px; text-align: center; } .glass-color-value { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.78rem; font-weight: 600; color: var(--purple-light); background: var(--purple-bg); padding: 2px 8px; border-radius: 6px; text-transform: uppercase; } .glass-color-row { display: flex; align-items: center; gap: 12px; } .glass-color-picker { -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border: 2px solid var(--border-color); border-radius: 10px; background: transparent; cursor: pointer; padding: 2px; transition: border-color 0.2s; flex-shrink: 0; } .glass-color-picker::-webkit-color-swatch-wrapper { padding: 0; } .glass-color-picker::-webkit-color-swatch { border: none; border-radius: 7px; } .glass-color-picker::-moz-color-swatch { border: none; border-radius: 7px; } .glass-color-picker:hover { border-color: var(--blue-light); } .glass-swatches { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; } .glass-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid rgba(var(--text-white-rgb), 0.1); cursor: pointer; transition: all 0.2s ease; position: relative; } .glass-swatch:hover { transform: scale(1.15); border-color: rgba(var(--text-white-rgb), 0.4); box-shadow: 0 0 12px rgba(var(--text-white-rgb), 0.15); } .glass-swatch.active { border-color: var(--blue-light); box-shadow: 0 0 0 2px var(--blue-bg), 0 0 12px rgba(var(--primary-color-rgb), 0.3); } .glass-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Range Slider Styles */ .glass-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--bg-card-solid) 0%, var(--blue) 100%); outline: none; cursor: pointer; transition: background 0.2s; } .glass-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); border: 3px solid var(--bg-card-solid); box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.4); cursor: grab; transition: all 0.2s; } .glass-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 2px 12px rgba(var(--primary-color-rgb), 0.6); } .glass-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); } .glass-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); border: 3px solid var(--bg-card-solid); box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.4); cursor: grab; } .glass-slider-brightness { background: linear-gradient(to right, #111 0%, #fff 100%) !important; } .glass-slider-brightness::-webkit-slider-thumb { background: var(--orange) !important; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.5) !important; } .glass-slider-brightness::-moz-range-thumb { background: var(--orange) !important; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.5) !important; } .glass-slider-blur { background: linear-gradient(to right, transparent 0%, rgba(var(--primary-color-rgb), 0.4) 100%) !important; } .glass-slider-blur::-webkit-slider-thumb { background: var(--purple) !important; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5) !important; } .glass-slider-blur::-moz-range-thumb { background: var(--purple) !important; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5) !important; } .glass-slider-hints { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.7rem; color: var(--text-muted); opacity: 0.7; } /* Toggle Switch */ .glass-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid var(--border-color); margin-top: 6px; } .glass-toggle-status { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 6px; } .glass-toggle-status.status-on { color: var(--green); background: var(--green-bg); } .glass-toggle-status.status-off { color: var(--red); background: var(--red-bg); } .glass-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .glass-toggle input { opacity: 0; width: 0; height: 0; } .glass-toggle-track { position: absolute; inset: 0; border-radius: 24px; background: var(--bg-card-solid); border: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glass-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .glass-toggle input:checked+.glass-toggle-track { background: var(--green-bg); border-color: var(--green); } .glass-toggle input:checked+.glass-toggle-track::after { transform: translateX(20px); background: var(--green); box-shadow: 0 0 8px rgba(45, 212, 191, 0.5); } /* Brightness overlay on liquid-bg */ .liquid-bg::after { content: ''; position: absolute; inset: 0; background: rgba(var(--text-white-rgb), var(--glass-brightness, 0)); pointer-events: none; z-index: 0; transition: background 0.3s ease; } .liquid-bg .blob { z-index: 1; } /* ==================== APPEARANCE SAVE FOOTER ==================== */ .appearance-save-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid rgba(var(--primary-color-rgb), 0.15) !important; background: transparent !important; flex-shrink: 0; gap: 12px; } .appearance-save-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .appearance-cancel-btn { padding: 10px 22px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); transition: all 0.25s ease; letter-spacing: 0.01em; } .appearance-cancel-btn:hover { background: rgba(var(--text-white-rgb), 0.06); border-color: var(--text-muted); color: var(--text-white); } .appearance-save-btn { display: flex; align-items: center; gap: 8px; padding: 10px 28px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: none; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--primary-color-dark, #4f46e5)); color: #fff; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3), 0 0 0 0 rgba(99, 102, 241, 0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.02em; position: relative; overflow: hidden; } .appearance-save-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--text-white-rgb), 0.15) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; } .appearance-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4), 0 0 0 3px rgba(99, 102, 241, 0.15); } .appearance-save-btn:hover::before { opacity: 1; } .appearance-save-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); } .appearance-save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .appearance-save-btn .spin-icon { animation: spin-appearance 1s linear infinite; } @keyframes spin-appearance { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .appearance-save-status { font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; gap: 6px; min-height: 20px; transition: opacity 0.3s ease; } .appearance-save-status.status-success { color: var(--green, #2dd4bf); } .appearance-save-status.status-error { color: var(--red, #f87171); } .appearance-save-status.status-info { color: var(--text-muted); font-style: italic; } /* ==================== FOOTER ==================== */ .app-footer { margin-top: auto; padding: 10px 20px; border-top: 1px solid var(--border-color); background: var(--bg-card); backdrop-filter: blur(var(--glass-blur, 12px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(150%); position: sticky; bottom: 0; z-index: 100; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.75rem; color: var(--text-muted); } .footer-links { display: flex; gap: 20px; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: var(--primary-color); } @media (max-width: 768px) { .footer-content { flex-direction: column; justify-content: center; text-align: center; } } /* ==================== GLASSMORPHISM ENFORCEMENT ==================== */ .dash-card, .stat-card, .filter-select, .form-select, .form-input { background: var(--bg-input) !important; backdrop-filter: blur(2px); border: var(--glass-border) !important; color: var(--text-primary) !important; } .form-control:focus, .input-icon-wrapper input:focus, .search-box input:focus, .filter-select:focus, .form-select:focus, .form-input:focus { background: rgba(var(--text-white-rgb), 0.1) !important; border-color: var(--blue-light) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.4) !important; } .data-table th { background: var(--bg-card-solid) !important; border-bottom: var(--glass-border) !important; color: var(--primary-color) !important; } .data-table td { border-bottom: 1px solid rgba(var(--text-white-rgb), 0.05) !important; } .data-table tbody tr:hover { background: var(--bg-table-row-hover) !important; } .portal-card-header { background: rgba(0, 0, 0, 0.3) !important; border-bottom: var(--glass-border) !important; color: var(--text-primary) !important; } .btn-primary { background: var(--gradient-blue) !important; border: none !important; box-shadow: var(--shadow-glow-blue) !important; color: white !important; } .settings-section { margin-bottom: 24px; border-bottom: 1px solid rgba(var(--text-white-rgb), 0.05); } .settings-section-title { font-size: 1.1rem; color: var(--blue-light); margin-bottom: 16px; font-weight: 600; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group-full { grid-column: 1 / -1; } .form-hint { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; } .required { color: var(--red-light); } .wallpaper-upload-container { display: flex; gap: 24px; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 20px; border-radius: var(--radius-lg); border: 1px dashed rgba(var(--text-white-rgb), 0.2); transition: all 0.3s ease; } .wallpaper-upload-container:hover { border-color: var(--blue-light); background: rgba(0, 0, 0, 0.3); } .wallpaper-preview { width: 140px; height: 90px; border-radius: var(--radius-md); background: rgba(var(--text-white-rgb), 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; overflow: hidden; background-size: cover; background-position: center; flex-shrink: 0; transition: all 0.2s ease; } .wallpaper-preview:hover { color: var(--blue-light); background: rgba(var(--primary-color-rgb), 0.1); } .wallpaper-preview span { font-size: 0.75rem; margin-top: 8px; } .wallpaper-details { flex-grow: 1; } /* ==================== MODAL TABS ==================== */ .modal-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .tab-btn { background: transparent; border: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .tab-btn:hover { color: var(--text-primary); background: rgba(var(--text-white-rgb), 0.05); } .tab-btn.active { color: var(--text-white); background: var(--bg-card); border: 1px solid var(--border-color); } .tab-content { display: none; animation: fadeIn var(--transition-fast) ease; } .tab-content.active { display: contents; /* Allows form-grid to work on children */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ==================== POS RECEIPT AND PRINT STYLES ==================== */ #posReceipt { background: #fff; color: #000; padding: 20px; font-family: 'Courier New', Courier, monospace; width: 300px; margin: 0 auto; border: 1px dashed #ccc; } .receipt-header, .receipt-footer { text-align: center; margin-bottom: 12px; } .receipt-header h2 { margin: 0 0 5px 0; font-size: 1.2rem; color: #000; } .receipt-divider { border-top: 1px dashed #000; margin: 8px 0; } .receipt-item { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.9rem; } .receipt-total { display: flex; justify-content: space-between; font-weight: bold; font-size: 1rem; margin-top: 8px; } @media print { @page { margin: 0; } html, body { margin: 0 !important; padding: 0 !important; background: var(--text-white) !important; width: 80mm !important; height: auto !important; overflow: visible !important; } body * { visibility: hidden; } #posReceipt, #posReceipt * { visibility: visible; } #posReceipt { position: absolute; left: 0; top: 0; width: 80mm; margin: 0; padding: 4mm; box-sizing: border-box; border: none; color: #000; box-shadow: none; page-break-after: avoid; page-break-inside: avoid; break-inside: avoid; } .modal-overlay { position: static !important; background: transparent !important; backdrop-filter: none !important; overflow: visible !important; height: auto !important; } .modal-card { position: static !important; box-shadow: none !important; background: transparent !important; border: none !important; overflow: visible !important; max-height: none !important; margin: 0 !important; transform: none !important; } .modal-body { position: static !important; overflow: visible !important; height: auto !important; max-height: none !important; padding: 0 !important; } .modal-header, .form-actions { display: none !important; } } /* ==================== ZEN MODE ==================== */ body.zen-mode #sidebar { display: none !important; } body.zen-mode .main-content { margin-left: 0 !important; width: 100% !important; } body.zen-mode .topbar { display: none !important; } body.zen-mode #page-settings { padding: 40px 24px !important; max-width: 900px; margin: 0 auto; } body.zen-mode .page-section:not(#page-settings) { display: none !important; } body.zen-mode #exitZenBtn { display: flex !important; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--text-white-rgb), 0.1); color: var(--text-white); box-shadow: var(--shadow-xl); border-radius: var(--radius-md, 8px); padding: 10px 16px; } body.zen-mode #exitZenBtn:hover { background: rgba(var(--text-white-rgb), 0.15); border-color: rgba(var(--text-white-rgb), 0.2); } /* ==================== MOBILE RESPONSIVENESS ==================== */ @media (max-width: 1024px) { .dashboard-layout { flex-direction: column; } .dash-col-left, .dash-col-right { width: 100%; } } @media (max-width: 768px) { .product-item { flex-direction: row; height: 100px; } .product-img-wrapper { width: 100px; height: 100px; padding: 8px; } .product-info { padding: 8px 12px; justify-content: center; flex: 1; } .product-name { font-size: 0.85rem; } .product-price { font-size: 0.95rem; } .topbar { padding: 0 12px; } .topbar-greeting { display: none; } .topbar-right .btn-text { display: none; } .topbar-right .sidebar-user { padding: 0; } .topbar-right .sidebar-user-info { display: none !important; } } select option { background: var(--bg-card-solid); color: var(--text-primary); } /* Global White Liquid Glass Logo Background */ .login-logo-icon { position: relative !important; background: rgba(var(--text-white-rgb), 0.1) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(var(--text-white-rgb), 0.4) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 -4px 12px rgba(0, 0, 0, 0.2), inset 0 4px 12px rgba(var(--text-white-rgb), 0.3) !important; color: var(--text-primary) !important; overflow: hidden; border-radius: 50% !important; } .login-logo-icon::after { content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; pointer-events: none !important; /* Liquid glass glossy orb reflection */ background: linear-gradient(135deg, rgba(var(--text-white-rgb), 0.7) 0%, rgba(var(--text-white-rgb), 0) 45%, rgba(var(--text-white-rgb), 0) 60%, rgba(var(--text-white-rgb), 0.2) 100%) !important; box-shadow: inset 0 2px 6px rgba(var(--text-white-rgb), 0.9), inset 0 -2px 6px rgba(0, 0, 0, 0.4) !important; z-index: 10 !important; animation: none !important; border: none !important; } .login-logo-icon img, .sidebar-logo-icon img { position: relative !important; z-index: 1 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } .login-logo-icon svg, .sidebar-logo-icon svg { position: relative !important; z-index: 1 !important; width: 65% !important; height: 65% !important; } /* ==================== ADMIN FOOTER ==================== */ .admin-footer { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 28px; /* Match topbar padding perfectly */ background: rgba(10, 10, 15, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(var(--text-white-rgb), 0.03); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2); z-index: 100; position: sticky; bottom: 0; margin-top: auto; width: 100%; box-sizing: border-box; } .admin-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--text-white-rgb), 0.1), transparent); } .admin-footer .footer-left { display: flex; align-items: center; gap: 12px; /* Tighter gap for better grouping */ font-size: 0.75rem; font-weight: 500; white-space: nowrap; line-height: 1; /* Ensure perfect optical centering */ } .admin-footer .footer-copyright { color: rgba(var(--text-white-rgb), 0.4); letter-spacing: 0.5px; display: flex; align-items: center; } .admin-footer .footer-divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--text-white-rgb), 0.15); display: inline-block; } .admin-footer .footer-version { color: rgba(var(--text-white-rgb), 0.6); letter-spacing: 0.5px; padding: 4px 10px; background: rgba(var(--text-white-rgb), 0.03); border-radius: 12px; border: 1px solid rgba(var(--text-white-rgb), 0.05); display: flex; align-items: center; justify-content: center; } .admin-footer .footer-right { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; margin-left: auto; white-space: nowrap; line-height: 1; } .admin-footer .footer-powered { color: rgba(var(--text-white-rgb), 0.4); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; display: flex; align-items: center; } .admin-footer .cbn-tech { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(90deg, var(--primary-color), #a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; display: flex; align-items: center; } /* Light Mode Footer Override Removed (now uses Glassmorphism variables) */ /* Hide scrollbar globally for admin portal */ ::-webkit-scrollbar { display: none !important; } * { -ms-overflow-style: none !important; scrollbar-width: none !important; } .menu-toggle * { pointer-events: none; } .menu-toggle { touch-action: manipulation; } /* ============================================ PREMIUM NOTIFICATION SYSTEM STYLES ============================================ */ /* Pulsing Badge */ @keyframes pulse-badge { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .notif-badge-premium { animation: pulse-badge 2s infinite; background: linear-gradient(135deg, #ef4444, #b91c1c) !important; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.5); border: 1px solid rgba(var(--text-white-rgb), 0.2) !important; color: white !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* Dropdown Animation & Glass */ @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .notif-dropdown-premium { animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); background: rgba(10, 15, 30, 0.75) !important; backdrop-filter: blur(24px) saturate(150%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.1) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(var(--text-white-rgb),0.05) !important; border-radius: 16px !important; } /* Notification Items */ .notif-item-premium { transition: all 0.2s ease; border-left: 3px solid transparent; position: relative; overflow: hidden; } .notif-item-premium::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(var(--text-white-rgb),0.05), transparent); opacity: 0; transition: opacity 0.2s ease; } .notif-item-premium:hover { background: rgba(var(--text-white-rgb), 0.03) !important; transform: translateX(4px); } .notif-item-premium:hover::before { opacity: 1; } .notif-item-unread { background: rgba(var(--primary-color-rgb), 0.05); border-left-color: var(--primary-color) !important; } .notif-item-unread .notif-title { font-weight: 700 !important; color: var(--text-white) !important; } /* Icons Glow */ .notif-icon-glow { box-shadow: 0 0 12px currentColor; } /* Forms */ .notif-form-premium .form-control { background: rgba(0,0,0,0.2) !important; border: 1px solid rgba(var(--text-white-rgb),0.1) !important; transition: all 0.3s ease; } .notif-form-premium .form-control:focus { border-color: var(--topbar-blue) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.3) !important; background: rgba(0,0,0,0.3) !important; } /* Smooth Notifications */ .notif-dropdown-smooth { opacity: 0; visibility: hidden; transform: translateY(-15px) scale(0.96); transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s; display: block !important; /* Force block so transition works, visibility handles hiding */ } .notif-dropdown-smooth.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .notif-item-stagger { transform: translateX(-10px); animation: staggerFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes staggerFadeIn { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } .notif-badge-smooth { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; transform: scale(0); opacity: 0; } .notif-badge-smooth.show { transform: scale(1); opacity: 1; } /* ==================== TOUCH DEVICE OPTIMIZATIONS (iPad & Mobile) ==================== */ /* Enable smooth momentum scrolling on iOS */ html, body, .main-content, .page-section, .modal-card, .data-table-container, .dropdown-menu { -webkit-overflow-scrolling: touch; } /* Remove default tap highlight boxes on mobile Safari/Chrome */ * { -webkit-tap-highlight-color: transparent; } /* Eliminate 300ms tap delay on interactive elements */ button, .btn, a, .nav-item, input, select, textarea, .dropdown-item { touch-action: manipulation; } /* Prevent accidental text selection while swiping */ .topbar, .sidebar, .admin-footer, .btn, button, .nav-item, .card-header, th { user-select: none; -webkit-user-select: none; } /* Allow text selection inside inputs and specific text blocks */ input, textarea, .selectable-text { user-select: text; -webkit-user-select: text; } /* Targeted adjustments for devices with touch screens (Coarse Pointers) */ @media (pointer: coarse) { /* Increase padding on table rows for easier tapping */ .data-table th, .data-table td { padding: 14px 12px; } /* Ensure minimum touch target size (44x44px) for interactive elements */ .btn, input, select, textarea { min-height: 44px; } /* Slightly taller sidebar items for fat-finger prevention */ .nav-item { padding: 14px 16px; } /* Make custom scrollbars slightly wider on touch devices if they are visible */ ::-webkit-scrollbar { width: 10px; height: 10px; } } /* Enforce uppercase on specific fields visually */ input[name="truck_plate"], input[name="container_no"], input[name="name"], #customerName, #supplierName, #formTruckPlate, #formContainerNo { text-transform: uppercase; } /* Make action buttons stand out more by default */ /* Semantic Action Button Colors */ .cell-actions .btn-icon.view { color: var(--topbar-blue, #3b82f6) !important; background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; } .cell-actions .btn-icon.edit { color: var(--orange, #f59e0b) !important; background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.2) !important; } .cell-actions .btn-icon.delete, .cell-actions .btn-icon.reject { color: var(--red, #ef4444) !important; background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important; } .cell-actions .btn-icon.complete, .cell-actions .btn-icon.approve { color: var(--green, #10b981) !important; background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.2) !important; } .btn-icon.print { color: #8b5cf6 !important; background: rgba(139, 92, 246, 0.1) !important; border-color: rgba(139, 92, 246, 0.2) !important; } .cell-actions .btn-icon:hover, .btn-icon.print:hover { filter: brightness(1.2); } /* ============================================================ LIQUID GLASS TECHNOLOGY REDESIGN INJECTIONS ============================================================ */ /* 1. MODALS */ .modal-overlay { background: rgba(8, 12, 20, 0.4) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .modal-card, .modal-content { background: linear-gradient(145deg, rgba(15, 20, 35, 0.8) 0%, rgba(10, 14, 25, 0.9) 100%) !important; border: 1px solid rgba(var(--primary-color-rgb), 0.2) !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(var(--primary-color-rgb), 0.05) !important; border-radius: 32px !important; display: flex !important; flex-direction: column !important; max-height: 90vh !important; overflow: hidden !important; } .modal-header { border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.15) !important; background: transparent !important; flex-shrink: 0; } .modal-body { overflow-y: auto !important; flex: 1; } .modal-header h3 { color: var(--text-white) !important; font-weight: 700 !important; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3); } /* MacOS style circular close button */ .modal-close { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #ff5f56 !important; border: 1px solid #e0443e !important; color: transparent !important; /* hide the X icon by default */ padding: 0 !important; display: flex !important; align-items: center; justify-content: center; transition: all 0.2s ease !important; overflow: hidden; position: relative; } .modal-close svg { display: none; /* remove default svg */ } .modal-close::before, .modal-close::after { content: ''; position: absolute; width: 10px; height: 2px; background: #4d0000; opacity: 0; transition: opacity 0.2s ease; } .modal-close::before { transform: rotate(45deg); } .modal-close::after { transform: rotate(-45deg); } .modal-close:hover { background: #ff5f56 !important; box-shadow: 0 0 10px rgba(255, 95, 86, 0.5) !important; } .modal-close:hover::before, .modal-close:hover::after { opacity: 1; /* show X on hover */ } /* 2. DATA TABLES */ .table-container, .glass-table-container { background: rgba(10, 16, 28, 0.5) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(var(--primary-color-rgb), 0.1) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } .data-table th { background: rgba(10, 16, 28, 0.9) !important; color: var(--primary-color) !important; border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.3) !important; text-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.2) !important; } .data-table tbody tr { border-bottom: 1px solid rgba(var(--text-white-rgb), 0.03) !important; } .data-table tbody tr:nth-child(even) { background: rgba(var(--text-white-rgb), 0.02) !important; } .data-table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.15) 50%, rgba(var(--primary-color-rgb), 0.05) 100%) !important; box-shadow: inset 0 0 10px rgba(var(--primary-color-rgb), 0.1) !important; cursor: pointer; } .data-table td { color: #cbd5e1 !important; border-bottom: none !important; } /* 3. FORMS */ .form-control { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(var(--text-white-rgb), 0.1) !important; color: var(--text-white) !important; border-radius: 12px !important; } .form-control:focus { border-color: rgba(var(--primary-color-rgb), 0.5) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.15) !important; background: rgba(0, 0, 0, 0.6) !important; } select.form-control option { background: #080c14 !important; color: var(--text-white) !important; } /* Standard Buttons integration */ .btn-primary { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%) !important; border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #22d3ee !important; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.05) !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .btn-primary:hover { background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%) !important; color: var(--text-white) !important; box-shadow: 0 0 15px rgba(6, 182, 212, 0.2) !important; } /* 4. NAVIGATION BARS */ .sidebar { background: rgba(10, 16, 28, 0.45) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-right: 1px solid rgba(var(--primary-color-rgb), 0.15) !important; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important; } .topbar { background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.4) 0%, rgba(var(--primary-color-rgb), 0.1) 100%) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.3) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important; } /* Sidebar overrides to match the dark glass */ .sidebar-header { background: transparent !important; border-bottom: 1px solid rgba(var(--text-white-rgb), 0.05) !important; } .nav-item { color: #94a3b8 !important; transition: all 0.2s ease !important; } .nav-item:hover, .nav-item.active { background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 100%) !important; border-left: 3px solid var(--primary-color) !important; color: var(--text-white) !important; } .nav-item:hover svg, .nav-item.active svg { color: var(--primary-color) !important; } /* 5. TOOLBARS & FILTERS */ .section-toolbar, .toolbar, .pos-toolbar { background: rgba(10, 16, 28, 0.5) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(var(--primary-color-rgb), 0.1) !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; margin-bottom: 20px; } .search-box input, .filter-select { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(var(--text-white-rgb), 0.1) !important; color: var(--text-white) !important; border-radius: 8px !important; padding: 8px 12px !important; transition: all 0.2s ease !important; } .search-box input:focus, .filter-select:focus { border-color: rgba(var(--primary-color-rgb), 0.5) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.15) !important; background: rgba(0, 0, 0, 0.6) !important; outline: none !important; } .search-box svg { color: rgba(var(--primary-color-rgb), 0.6) !important; } /* 6. OLD DASHBOARD COMPONENTS -> LIQUID GLASS */ .dash-card, .stat-card, .dashboard-welcome-banner, .dash-card-full { background: linear-gradient(135deg, rgba(var(--text-white-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%) !important; backdrop-filter: blur(16px) saturate(150%) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; border: 1px solid rgba(var(--primary-color-rgb), 0.1) !important; border-top: 1px solid rgba(var(--text-white-rgb), 0.1) !important; border-left: 1px solid rgba(var(--text-white-rgb), 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(var(--primary-color-rgb), 0.05) !important; border-radius: 16px !important; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .dash-card::after, .stat-card::after, .dashboard-welcome-banner::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(var(--text-white-rgb),0.03) 0%, transparent 60%); animation: liquidShine 10s linear infinite; pointer-events: none; } /* Ensure inner headers stay clean */ .dash-card-header { background: transparent !important; border-bottom: 1px solid rgba(var(--text-white-rgb), 0.05) !important; } .dash-card-header h3 { color: var(--text-white) !important; text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3); } .stat-card .stat-value { color: var(--text-white) !important; text-shadow: 0 0 15px rgba(var(--text-white-rgb), 0.3) !important; } /* ============================================================ 7. LIQUID CLEAR GLASS OVERRIDES (Ultimate Transparency) ============================================================ */ /* The user requested "liquid clear glass" for everything */ /* Dashboard Panels, Cards, Banners */ .ent-stat-panel, .ent-chart-card, .dash-card, .stat-card, .dashboard-welcome-banner, .dash-card-full, .ent-liquid-glass, .ent-liquid-glass.ent-stat-panel, .ent-liquid-glass.ent-chart-card { background: rgba(var(--text-white-rgb), 0.02) !important; backdrop-filter: blur(24px) saturate(130%) !important; -webkit-backdrop-filter: blur(24px) saturate(130%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.15) !important; border-top: 1px solid rgba(var(--text-white-rgb), 0.25) !important; border-left: 1px solid rgba(var(--text-white-rgb), 0.25) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(var(--text-white-rgb), 0.05) !important; } /* Modals & Popups */ .modal-overlay { background: rgba(0, 0, 0, 0.2) !important; /* Lighter overlay */ backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .modal-card { background: rgba(var(--text-white-rgb), 0.03) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.18) !important; border-top: 1px solid rgba(var(--text-white-rgb), 0.3) !important; border-left: 1px solid rgba(var(--text-white-rgb), 0.3) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(var(--text-white-rgb), 0.05) !important; } /* Navigation & Footer */ .sidebar, .admin-footer, footer { background: rgba(var(--text-white-rgb), 0.02) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; border-color: rgba(var(--text-white-rgb), 0.12) !important; } /* Toolbars */ .section-toolbar, .toolbar, .pos-toolbar { background: rgba(var(--text-white-rgb), 0.02) !important; backdrop-filter: blur(20px) saturate(130%) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; } /* Tables */ .table-container, .glass-table-container { background: rgba(var(--text-white-rgb), 0.01) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.1) !important; } .data-table th { background: rgba(var(--text-white-rgb), 0.05) !important; border-bottom: 1px solid rgba(var(--text-white-rgb), 0.2) !important; } /* Forms & Inputs */ .form-control, .search-box input, .filter-select { background: rgba(var(--text-white-rgb), 0.03) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(var(--text-white-rgb), 0.2) !important; } .form-control:focus, .search-box input:focus, .filter-select:focus { background: rgba(var(--text-white-rgb), 0.08) !important; border-color: rgba(var(--primary-color-rgb), 0.6) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.2) !important; } /* ============================================================ 8. PROFESSIONAL DOCKED LEFT SIDEBAR (SHARP & RESPONSIVE) ============================================================ */ /* Topbar Toggle Button */ #menuToggle { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-white) !important; background: rgba(var(--text-white-rgb), 0.03) !important; border: 1px solid rgba(var(--text-white-rgb), 0.1) !important; border-radius: 0 !important; /* Sharp corners */ width: 38px !important; height: 38px !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #menuToggle:hover { background: rgba(var(--text-white-rgb), 0.1) !important; border-color: rgba(var(--primary-color-rgb), 0.3) !important; box-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.2) !important; } /* --- DESKTOP VIEWPORT (1025px and up) --- */ @media (min-width: 1025px) { /* Sidebar Container - Clean Docked Left Panel */ .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; transform: none !important; width: 260px !important; height: 100vh !important; margin: 0 !important; padding: 24px 16px !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; /* Flush dock */ z-index: 1000 !important; overflow: hidden !important; /* Premium Liquid Clear Glass - Dock Style */ background: var(--bg-sidebar) !important; /* Premium dark glass tint for contrast */ backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important; border: none !important; border-right: 1px solid rgba(var(--text-white-rgb), 0.08) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Main Content Layout Adjustments */ .main-content { margin-left: 260px !important; /* Matches expanded sidebar width */ width: calc(100% - 260px) !important; min-height: 100vh !important; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Collapsed state adjustments */ body.sidebar-collapsed .sidebar { width: 68px !important; padding: 24px 10px !important; } body.sidebar-collapsed .main-content { margin-left: 68px !important; width: calc(100% - 68px) !important; } /* Header (Logo) Area */ .sidebar-header { display: flex !important; align-items: center !important; margin-bottom: 28px !important; padding: 0 8px !important; background: transparent !important; } .sidebar-logo-icon { width: 28px !important; height: 28px !important; margin-right: 12px !important; flex-shrink: 0 !important; color: var(--primary-color) !important; } .sidebar-brand { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--text-white) !important; letter-spacing: 0.5px !important; white-space: nowrap !important; opacity: 1 !important; transition: opacity 0.2s ease !important; } /* Navigation Items (Pills) */ .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 6px !important; } .nav-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; padding: 0 14px !important; border-radius: 0 !important; /* Sharp corners */ gap: 12px !important; margin: 0 !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.2s ease-in-out !important; overflow: hidden !important; } .nav-item svg { width: 20px !important; height: 20px !important; color: rgba(var(--text-white-rgb), 0.6) !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } .nav-item span { font-size: 0.95rem !important; font-weight: 500 !important; color: rgba(var(--text-white-rgb), 0.7) !important; white-space: nowrap !important; opacity: 1 !important; transition: opacity 0.2s ease, color 0.2s ease !important; } /* Hover States */ .nav-item:hover { background: rgba(var(--text-white-rgb), 0.05) !important; border-color: rgba(var(--text-white-rgb), 0.08) !important; } .nav-item:hover svg, .nav-item:hover span { color: var(--text-white) !important; } /* Active State */ .nav-item.active { background: rgba(var(--primary-color-rgb), 0.08) !important; border-color: rgba(var(--primary-color-rgb), 0.25) !important; } .nav-item.active svg, .nav-item.active span { color: var(--primary-color) !important; } .nav-item.active::before, .nav-item.active::after { display: none !important; } /* Hide Brand and Text when collapsed */ body.sidebar-collapsed .sidebar-header { padding: 0 !important; justify-content: center !important; } body.sidebar-collapsed .sidebar-logo-icon { margin-right: 0 !important; } body.sidebar-collapsed .sidebar-brand { opacity: 0 !important; pointer-events: none !important; width: 0 !important; } body.sidebar-collapsed .nav-item { padding: 0 !important; justify-content: center !important; } body.sidebar-collapsed .nav-item span { opacity: 0 !important; pointer-events: none !important; width: 0 !important; } body.sidebar-collapsed .nav-item svg { margin: 0 !important; } /* Remove extra elements not needed on desktop */ .sidebar::after, .sidebar-close, .sidebar-footer { display: none !important; } } /* --- MOBILE VIEWPORT (1024px and below) --- */ @media (max-width: 1024px) { .sidebar { background: rgba(10, 15, 30, 0.85) !important; /* High contrast for mobile slideover */ backdrop-filter: blur(25px) saturate(120%) !important; -webkit-backdrop-filter: blur(25px) saturate(120%) !important; border-right: 1px solid rgba(var(--text-white-rgb), 0.1) !important; border-radius: 0 !important; } .sidebar-close { display: block !important; color: rgba(var(--text-white-rgb), 0.7) !important; } } /* ============================================================ 9. DOCKED BOTTOM FOOTER (Always Visible) ============================================================ */ /* Add padding to main content so scrolled content isn't blocked by the fixed footer */ .main-content { padding-bottom: 80px !important; } /* Position the footer fixed at the bottom of the viewport */ .admin-footer { position: fixed !important; bottom: 0 !important; right: 0 !important; left: 260px !important; /* Matches expanded sidebar width */ height: 50px !important; padding: 0 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; z-index: 950 !important; /* Just below modal layers */ border-radius: 0 !important; /* Sharp corners */ /* Clear Glass Styling */ background: var(--bg-secondary) !important; backdrop-filter: blur(var(--glass-blur)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) !important; border-top: 1px solid rgba(var(--text-white-rgb), 0.08) !important; /* Smooth transition matching the sidebar collapse */ transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Adjust footer position when sidebar is collapsed */ body.sidebar-collapsed .admin-footer { left: 68px !important; /* Matches collapsed sidebar width */ } /* Responsive adjustments for mobile viewports */ @media (max-width: 1024px) { .admin-footer { left: 0 !important; /* Full width on mobile */ } .main-content { padding-bottom: 100px !important; } } /* ============================================================ 10. SHARP GEOMETRIC AESTHETIC (Zero Border Radius) ============================================================ */ /* Force all buttons, forms, popups, cards, and navigation elements to have sharp corners */ .sidebar, .nav-item, .main-content, .topbar, #menuToggle, .admin-footer, .dash-card, .stat-card, .dashboard-welcome-banner, .dash-card-full, .ent-stat-panel, .ent-chart-card, .table-container, .glass-table-container, .modal-card, .confirm-card, .form-control, input, select, textarea, .btn, button, .toast, .search-box input, .filter-select, .dash-tab-label, .modal-header, .modal-body, .modal-footer, .confirm-icon, .sidebar-logo-icon { border-radius: 0 !important; } /* ============================================================ 20. REDUCE BOTTOM PADDING FOR FIXED FOOTER ============================================================ */ /* Reduce bottom padding since the footer is only 50px tall */ .main-content { padding-bottom: 58px !important; /* 50px footer height + 8px gap */ } @media (max-width: 1024px) { .main-content { padding-bottom: 68px !important; } } /* ============================================================ 21. 3D ISOMETRIC GLASS PANEL AESTHETIC ============================================================ */ /* Give all dashboard panels a tactile, 3D raised block effect */ .dash-card, .stat-card, .ent-chart-card, .ent-stat-panel, .table-container, .glass-table-container { position: relative !important; transform: translate3d(0, 0, 0) !important; /* 3D bevel borders (light top/left, dark bottom/right) */ border-top: 1px solid rgba(var(--text-white-rgb), 0.18) !important; border-left: 1px solid rgba(var(--text-white-rgb), 0.18) !important; border-bottom: 3px solid rgba(0, 0, 0, 0.45) !important; border-right: 3px solid rgba(0, 0, 0, 0.45) !important; /* Deep shadow to ground the element */ box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(var(--text-white-rgb), 0.02) !important; /* Smooth transitions for the lifting effect */ transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.25s ease !important; } /* Hover state: Lift the panel up and increase the shadow / 3D extrusion depth */ .ent-chart-card:hover, .table-container:hover, .glass-table-container:hover { transform: translate3d(-4px, -4px, 0) !important; /* Deepen the bottom/right 3D extrusion borders */ border-bottom: 7px solid rgba(0, 0, 0, 0.5) !important; border-right: 7px solid rgba(0, 0, 0, 0.5) !important; /* Cast a longer shadow as it "lifts" */ box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(var(--text-white-rgb), 0.05) !important; /* Subtle cyan border highlight on hover */ border-top-color: rgba(var(--primary-color-rgb), 0.4) !important; border-left-color: rgba(var(--primary-color-rgb), 0.4) !important; } /* ============================================================ 22. COMPACT RESPONSIVE FORMS & MODALS ============================================================ */ /* General compact form styles for better screen utilization */ .form-group { margin-bottom: 12px !important; } .form-group label { font-size: 0.75rem !important; margin-bottom: 4px !important; font-weight: 600 !important; } .form-control { padding: 8px 12px !important; font-size: 0.8rem !important; height: 36px !important; } select.form-control { height: 36px !important; } textarea.form-control { height: auto !important; min-height: 80px !important; padding: 8px 12px !important; } /* Modal compactness */ .modal-card { padding: 16px !important; max-width: 520px !important; border-radius: 32px !important; } .modal-header { margin-bottom: 16px !important; padding-bottom: 10px !important; } .modal-header h3 { font-size: 1.1rem !important; } .modal-body { gap: 12px !important; } /* Specific overrides for small screens (1024px and below) */ @media (max-width: 1024px) { .modal-card { width: 95% !important; max-width: 460px !important; padding: 12px !important; margin: 12px !important; border-radius: 24px !important; } .confirm-card { width: 92% !important; max-width: 360px !important; padding: 16px !important; } .modal-header h3 { font-size: 1rem !important; } .form-control { padding: 6px 10px !important; font-size: 0.75rem !important; height: 32px !important; } select.form-control { height: 32px !important; } .btn { padding: 8px 12px !important; font-size: 0.75rem !important; } .btn-group { gap: 8px !important; } /* Shrink modal close buttons */ .modal-close { font-size: 1.2rem !important; } } /* ============================================================ 23. COMPACT TOOLBARS & UTILITY CONTROLS ============================================================ */ /* Shrink the search and filter toolbars above the tables */ .section-toolbar, .toolbar, .pos-toolbar { padding: 10px 16px !important; gap: 10px !important; margin-bottom: 16px !important; min-height: 0 !important; /* Prevent stretching */ } /* Make search inputs and filter select boxes smaller */ .search-box, .filter-select, .toolbar select, .toolbar input { height: 34px !important; font-size: 0.78rem !important; } .search-box input { height: 34px !important; padding: 6px 12px 6px 32px !important; /* Space for search icon */ font-size: 0.78rem !important; } .filter-select { padding: 0 28px 0 12px !important; line-height: 32px !important; } /* Shrink action buttons inside toolbars to align with inputs */ .section-toolbar .btn, .toolbar .btn { height: 34px !important; padding: 0 14px !important; font-size: 0.78rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } /* Shrink icons inside toolbar buttons */ .section-toolbar .btn svg, .toolbar .btn svg { width: 14px !important; height: 14px !important; } /* Responsive adjustments for small screens (1024px and below) */ @media (max-width: 1024px) { .section-toolbar, .toolbar, .pos-toolbar { padding: 8px 12px !important; gap: 8px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; /* Wrap items if screen is too narrow */ } .search-box, .filter-select, .toolbar select, .toolbar input, .search-box input { height: 30px !important; font-size: 0.72rem !important; } .search-box input { padding-left: 28px !important; } .filter-select { padding-right: 20px !important; line-height: 28px !important; } .section-toolbar .btn, .toolbar .btn { height: 30px !important; padding: 0 10px !important; font-size: 0.72rem !important; } } /* ============================================================ 24. RESTORE APPEARANCE SETTINGS MODAL SIZE ============================================================ */ /* Force the Appearance Settings modal to be wide and spacious as before */ .appearance-modal-card { max-width: 900px !important; width: 90% !important; } @media (max-width: 1024px) { .appearance-modal-card { width: 95% !important; max-width: 768px !important; } } /* ============================================================ 25. RESTORE SYSTEM PREFERENCES MODAL SIZE ============================================================ */ /* Force the System Preferences modal to be wide and spacious as before */ #settingsModalCard { max-width: 900px !important; width: 90% !important; height: 90vh !important; } @media (max-width: 1024px) { #settingsModalCard { width: 95% !important; max-width: 768px !important; height: 95vh !important; } } /* ============================================================ 26. ROUNDED DASHBOARD PANELS ============================================================ */ /* Restore rounded corners for dashboard cards and panels while keeping buttons/forms sharp */ .dash-card, .stat-card, .ent-chart-card, .ent-stat-panel, .table-container, .glass-table-container, .dashboard-welcome-banner, .dash-card-full { border-radius: 16px !important; } /* ============================================================ 27. REMOVE 3D PANEL EFFECTS ============================================================ */ /* Reset all 3D borders, shadows, and translations back to flat glass panels */ .dash-card, .stat-card, .ent-chart-card, .ent-stat-panel, .table-container, .glass-table-container, .dashboard-welcome-banner, .dash-card-full { transform: none !important; border: 1px solid rgba(var(--text-white-rgb), 0.15) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(var(--text-white-rgb), 0.02) !important; } /* Reset hover state so it doesn't lift or deepen borders */ .ent-chart-card:hover, .table-container:hover, .glass-table-container:hover, .dashboard-welcome-banner:hover, .dash-card-full:hover { transform: none !important; border: 1px solid rgba(var(--text-white-rgb), 0.25) !important; /* Subtle highlight border */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 0 20px rgba(var(--text-white-rgb), 0.05) !important; } /* ============================================================ 28. LIQUID GLASS BUTTONS ============================================================ */ /* Make all standard buttons use the premium liquid glass style */ .btn, button:not(.modal-close):not(.sidebar-close) { background: rgba(var(--text-white-rgb), 0.04) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; color: rgba(var(--text-white-rgb), 0.85) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 0 8px rgba(var(--text-white-rgb), 0.02) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Base button hover & active states */ .btn:hover, button:not(.modal-close):not(.sidebar-close):hover { transform: translateY(-1px) !important; color: var(--text-white) !important; } .btn:active, button:not(.modal-close):not(.sidebar-close):active { transform: translateY(1px) !important; } /* Primary Button - Cyan Liquid Glass */ .btn-primary { background: rgba(var(--primary-color-rgb), 0.08) !important; border-color: rgba(var(--primary-color-rgb), 0.25) !important; color: var(--primary-color) !important; text-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.3) !important; } .btn-primary:hover { background: rgba(var(--primary-color-rgb), 0.18) !important; border-color: rgba(var(--primary-color-rgb), 0.45) !important; color: var(--text-white) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.35), inset 0 0 8px rgba(var(--text-white-rgb), 0.05) !important; } /* Secondary Button - Frosted Clear Glass */ .btn-secondary { background: rgba(var(--text-white-rgb), 0.06) !important; border-color: rgba(var(--text-white-rgb), 0.15) !important; color: rgba(var(--text-white-rgb), 0.85) !important; } .btn-secondary:hover { background: rgba(var(--text-white-rgb), 0.14) !important; border-color: rgba(var(--text-white-rgb), 0.3) !important; color: var(--text-white) !important; box-shadow: 0 0 15px rgba(var(--text-white-rgb), 0.15), inset 0 0 8px rgba(var(--text-white-rgb), 0.05) !important; } /* Danger Button - Red Liquid Glass */ .btn-danger { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.25) !important; color: #ef4444 !important; text-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important; } .btn-danger:hover { background: rgba(239, 68, 68, 0.18) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: var(--text-white) !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.35), inset 0 0 8px rgba(var(--text-white-rgb), 0.05) !important; } /* ============================================================ 29. FIX BACKGROUND TINT IN APPEARANCE SETTINGS ============================================================ */ /* Bind the body, login page, and liquid background containers to the --glass-tint CSS variable */ body, .login-page, .liquid-bg, .app-layout { background-color: var(--glass-tint, #050510) !important; } /* ============================================================ 29. FIX BACKGROUND TINT COLOR PICKER ============================================================ */ /* Exclude color inputs from global glass transparent backgrounds so they show their selected color */ input[type="color"].glass-color-picker, input[type="color"] { background: none !important; background-color: transparent !important; padding: 0 !important; width: 44px !important; height: 36px !important; border: 1px solid rgba(var(--text-white-rgb), 0.15) !important; cursor: pointer !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } /* Ensure the color swatch inside fills the input completely */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 !important; } input[type="color"]::-webkit-color-swatch { border: none !important; border-radius: 0 !important; /* Matches sharp aesthetic */ } /* ============================================================ 30. FIX WALLPAPER VISIBILITY OVER LIQUID BACKGROUND ============================================================ */ /* When a wallpaper is set, make the liquid background container's solid background color transparent so the wallpaper at z-index -9999 shows through. The animated glowing blobs will float on top of the wallpaper. */ body.has-wallpaper .liquid-bg { background: transparent !important; } /* ============================================================ 31. FIX SYSTEM BACKGROUND IMAGE (BODY WALLPAPER) ============================================================ */ /* Apply the wallpaper directly to the body element instead of body::before. This prevents the body's opaque background-color from covering the wallpaper. */ body.has-wallpaper { background-image: var(--wallpaper-url) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* Disable the old body::before wallpaper layer to prevent duplication */ body.has-wallpaper::before { display: none !important; } /* ============================================================ 32. MAKE APP DASHBOARD CAN SEE BACKGROUND IMAGE ============================================================ */ /* Force all dashboard panels and cards in both admin and client portals to be transparent glass */ .dash-card, .stat-card, .ent-chart-card, .ent-stat-panel, .dashboard-welcome-banner, .table-container, .glass-table-container, .dash-card-full { background: var(--bg-card) !important; backdrop-filter: blur(var(--glass-blur, 24px)) saturate(140%) !important; -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(140%) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; } /* Override solid background colors when a wallpaper is active */ body.has-wallpaper, body.has-wallpaper .app-layout, body.has-wallpaper .login-page, body.has-wallpaper .liquid-bg { background-color: transparent !important; } body.has-wallpaper { background-image: var(--wallpaper-url) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* ============================================================ 33. MODALS OVER NAVIGATION BAR ============================================================ */ /* Ensure all popup forms and modal overlays render above the docked sidebar */ .modal-overlay, .swal2-container, .glass-modal-overlay { z-index: 99999 !important; } /* Action Buttons Bigger (Gate In, Gate Out, Inspection) */ .gate-in-actions .btn-icon, .gate-out-actions .btn-icon, .inspection-actions .btn-icon { width: 38px !important; height: 38px !important; } .gate-in-actions .btn-icon svg, .gate-out-actions .btn-icon svg, .inspection-actions .btn-icon svg { width: 22px !important; height: 22px !important; } /* Complete Button Style */ .cell-actions .btn-icon.complete { color: var(--green); background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); } .cell-actions .btn-icon.complete:hover { filter: brightness(1.2); } /* Live Date & Time next to Page Title */ .topbar-clock { display: flex; align-items: center; gap: 6px; margin-left: 16px; opacity: 0.7; } #liveDateTime { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.3px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .topbar-clock { display: none !important; } } /* ADMIN DASHBOARD THEME OVERRIDES */ /* Removed ADMIN DASHBOARD THEME OVERRIDES for topbar to allow glassmorphism */ body[class*="theme-"] .topbar .page-tab-text, body[class*="theme-"] .topbar .page-tab-accent, body[class*="theme-"] .topbar-clock span, body[class*="theme-"] .admin-footer span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } #modalOverlay { z-index: 9999 !important; } /* ==================== SYSTEM UI SHAPE ==================== */ body.shape-sharp, body.shape-sharp *, body.shape-sharp ::before, body.shape-sharp ::after { border-radius: 0px !important; } /* LIQUID GLASS TABLE HEADERS (70% OPACITY) - USER REQUEST */ .data-table th, .detail-table th, table th { background: linear-gradient(180deg, rgba(var(--text-white-rgb), 0.08) 0%, rgba(var(--text-white-rgb), 0) 100%), color-mix(in srgb, var(--bg-base, #1e1e2d) 70%, transparent) !important; box-shadow: inset 0 1px 0 rgba(var(--text-white-rgb), 0.1), 0 1px 3px rgba(0, 0, 0, 0.15) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--text-secondary) !important; padding: 12px 16px !important; } /* ============================================================ PREMIUM HEADER TOOLBAR BUTTONS & CONTROLS ============================================================ */ /* --- Search inputs inside headers --- */ .glass-panel-header .search-box input, .glass-panel-header input[type="text"] { background: rgba(var(--text-white-rgb), 0.04) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; border-radius: 8px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: var(--text-primary) !important; font-size: 0.85rem !important; height: 38px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; } .glass-panel-header .search-box input:focus, .glass-panel-header input[type="text"]:focus { background: rgba(var(--text-white-rgb), 0.07) !important; border-color: rgba(167, 139, 250, 0.5) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; outline: none !important; } /* --- Select / Filter dropdowns inside headers --- */ .glass-panel-header select, .glass-panel-header .form-input[id*="Filter"], .glass-panel-header .form-input[id*="filter"] { background-color: rgba(var(--text-white-rgb), 0.04) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; border-radius: 8px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: var(--text-primary) !important; font-size: 0.85rem !important; height: 38px !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; } .glass-panel-header select:focus, .glass-panel-header select:hover { background-color: rgba(var(--text-white-rgb), 0.07) !important; border-color: rgba(167, 139, 250, 0.5) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; } /* --- Secondary toolbar buttons (CSV, PDF, Export, etc.) --- */ .glass-panel-header .btn.btn-sm, .glass-panel-header .btn:not(.btn-primary):not(.btn-green):not(.btn-danger) { background: rgba(var(--text-white-rgb), 0.05) !important; border: 1px solid rgba(var(--text-white-rgb), 0.12) !important; border-radius: 8px !important; height: 38px !important; padding: 0 14px !important; font-size: 0.82rem !important; font-weight: 600 !important; color: var(--text-primary) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(var(--text-white-rgb), 0.06) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; letter-spacing: 0.02em !important; } .glass-panel-header .btn.btn-sm:hover, .glass-panel-header .btn:not(.btn-primary):not(.btn-green):not(.btn-danger):hover { background: rgba(var(--text-white-rgb), 0.1) !important; border-color: rgba(var(--text-white-rgb), 0.22) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(var(--text-white-rgb), 0.1) !important; transform: translateY(-1px) !important; } .glass-panel-header .btn.btn-sm:active, .glass-panel-header .btn:not(.btn-primary):not(.btn-green):not(.btn-danger):active { transform: translateY(0) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(var(--text-white-rgb), 0.04) !important; } /* --- Primary action buttons (New Invoice, Add Booking, etc.) --- */ .glass-panel-header .btn-primary, .glass-panel-header .btn.btn-green { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important; border: none !important; border-radius: 8px !important; height: 38px !important; padding: 0 18px !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; color: var(--text-white) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(var(--text-white-rgb), 0.2) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } .glass-panel-header .btn-primary:hover, .glass-panel-header .btn.btn-green:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(var(--text-white-rgb), 0.25) !important; filter: brightness(1.1) !important; } .glass-panel-header .btn-primary:active, .glass-panel-header .btn.btn-green:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(var(--text-white-rgb), 0.15) !important; } /* Green variant for primary buttons */ .glass-panel-header .btn.btn-green { background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(var(--text-white-rgb), 0.2) !important; } .glass-panel-header .btn.btn-green:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(var(--text-white-rgb), 0.25) !important; } /* --- SVG icons inside header buttons --- */ .glass-panel-header .btn svg, .glass-panel-header .btn-primary svg { opacity: 0.9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); transition: opacity 0.2s; } .glass-panel-header .btn:hover svg, .glass-panel-header .btn-primary:hover svg { opacity: 1; } /* --- Search box icon --- */ .glass-panel-header .search-box svg { color: var(--text-muted) !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); transition: color 0.2s; } .glass-panel-header .search-box:focus-within svg { color: rgba(167, 139, 250, 0.7) !important; } /* Ensure Equipment, Inventory, and Maintenance modules display as flex when active, avoiding inline overrides */ #page-equipment.active, #page-inventory.active, #page-maintenanceLab.active, #page-priceControl.active { display: flex !important; } /* ==================== PREMIUM INVOICE CARDS ==================== */ .invoice-premium-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color-light); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: default; } .invoice-premium-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--border-color-light); transition: all 0.3s ease; } .invoice-premium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: rgba(var(--text-white-rgb), 0.15); } .invoice-premium-card:hover::before { background: var(--primary-gradient); } .invoice-premium-card.status-paid::before { background: var(--gradient-green); } .invoice-premium-card.status-partial::before { background: var(--gradient-orange); } .invoice-premium-card.status-unpaid::before { background: var(--gradient-red); } .invoice-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--border-color-light); background: rgba(0, 0, 0, 0.1); } .invoice-id { font-family: monospace; font-size: 1.15rem; font-weight: 700; color: var(--text-white); letter-spacing: 0.5px; margin-bottom: 6px; } .invoice-date { font-size: 0.85rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .invoice-date svg { color: var(--text-muted); } .invoice-body { padding: 24px; flex-grow: 1; } .invoice-client-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; } .invoice-client-name { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; } .invoice-container-info { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(var(--text-white-rgb),0.03); border: 1px solid var(--border-color-light); border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .invoice-footer { padding: 20px 24px; display: flex; justify-content: space-between; align-items: flex-end; background: rgba(0,0,0,0.05); border-top: 1px solid var(--border-color-light); } .invoice-total-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; } .invoice-total-amount { font-size: 1.6rem; font-weight: 800; color: var(--text-white); letter-spacing: -0.5px; } .invoice-actions { display: flex; gap: 10px; } .invoice-action-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border-color-light); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; } .invoice-action-btn:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3); } .invoice-badge { padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .invoice-badge.paid { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); } .invoice-badge.partial { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); } .invoice-badge.unpaid { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); } .nav-group { margin: 4px 12px; } .nav-group-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 0.85rem; color: var(--text-secondary); border-radius: 8px; cursor: pointer; transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.5px; } .nav-group-header:hover { color: var(--text-primary); background: rgba(var(--text-white-rgb), 0.05); } .nav-group-title { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .nav-group-chevron { transition: transform 0.3s ease; opacity: 0.7; } .nav-group.expanded .nav-group-chevron { transform: rotate(180deg); } .nav-group.expanded .nav-group-header { color: var(--text-primary); } .nav-group-content { display: none; flex-direction: column; padding-top: 4px; padding-left: 20px; gap: 2px; } .nav-group.expanded .nav-group-content { display: flex; } .nav-group-content .nav-item { margin: 0; padding: 8px 16px 8px 24px; font-size: 0.8rem; position: relative; border-radius: 6px; } .nav-group-content .nav-item::before { content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; transform: translateY(-50%); transition: all var(--transition-fast); } .nav-group-content .nav-item:hover::before { background: var(--text-primary); } .nav-group-content .nav-item.active::before { background: var(--primary-color); box-shadow: 0 0 8px var(--primary-color); } /* Sidebar Collapsed State */ body.sidebar-collapsed .sidebar .nav-group-header span, body.sidebar-collapsed .sidebar .nav-group-chevron { display: none; } body.sidebar-collapsed .sidebar .nav-group-content { display: none !important; } body.sidebar-collapsed .sidebar .nav-group-header { justify-content: center; } body.sidebar-collapsed .sidebar .nav-group-title { justify-content: center; } body.sidebar-collapsed .sidebar .nav-group-title svg { margin: 0; } /* ==================== TECH & SAFETY UI EXTENSIONS ==================== */ /* Subtle Grid Background for that "System" feel */ .tech-grid-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; } /* Enhancing Cards with Micro-Animations & Glow */ .dash-card, .data-card, .glass-card, .stat-card { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth) !important; } .dash-card:hover, .data-card:hover, .glass-card:hover, .stat-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 212, 255, 0.15) !important; border-color: var(--border-color-focus) !important; } /* Pulsing Safety Borders for Critical Elements */ @keyframes safetyPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 200, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); } } @keyframes dangerPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 50, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0); } } .safety-warning { border: 2px solid var(--border-warning) !important; animation: safetyPulse 2s infinite; } .safety-danger { border: 2px solid var(--border-danger) !important; animation: dangerPulse 2s infinite; } /* Smooth Button Hover Effects */ button { transition: all var(--transition-fast) !important; } button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.2); } button:active:not(:disabled) { transform: translateY(1px); } /* ==================== GLOBAL PREMIUM & PROFESSIONAL DESIGN IMPROVEMENTS ==================== */ /* 1. Custom Glassmorphic Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.2); border-radius: 99px; } ::-webkit-scrollbar-thumb { background: rgba(var(--primary-color-rgb, 0, 212, 255), 0.2); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; transition: background 0.3s; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-color-rgb, 0, 212, 255), 0.45); border: 2px solid transparent; background-clip: padding-box; } /* 2. Premium Glassmorphic Panels Styling */ .glass-panel { background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; overflow: hidden; position: relative; } .glass-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.3), transparent); opacity: 0.85; pointer-events: none; } .glass-panel:hover { border-color: rgba(var(--primary-color-rgb), 0.25) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--primary-color-rgb), 0.15) !important; transform: translateY(-2px); } /* Light mode overrides for glass panel to keep it consistent */ body.theme-light .glass-panel { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } body.theme-light .glass-panel:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; } /* 3. Input Glowing Focus */ input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--primary-color) !important; box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.25) !important; transition: all var(--transition-fast); } /* 4. Table Row Subtle Interactive Transition */ .data-table tbody tr { transition: all 0.2s ease; } .data-table tbody tr:hover { background: rgba(var(--primary-color-rgb), 0.08) !important; transform: scale(1.002); } /* 5. Navigation Link Glow & Slide Hover */ .nav-item { position: relative; overflow: hidden; transition: all 0.25s ease !important; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--primary-color); transition: width 0.2s ease; z-index: 0; } .nav-item:hover::before, .nav-item.active::before { width: 4px; } .nav-item > * { position: relative; z-index: 1; } /* 6. Dynamic Card Gradient Borders */ .dash-card, .stat-card, .gi-item-card { position: relative; overflow: hidden; } .dash-card::before, .stat-card::before, .gi-item-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); opacity: 0; transition: opacity 0.3s; } .dash-card:hover::before, .stat-card:hover::before, .gi-item-card:hover::before { opacity: 1; }