/* ================================================== BUSINESS COLOR MANAGEMENT SYSTEM ================================================== /* Removed duplicate mobile overrides; login responsive styles live below in existing breakpoints */ /* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */ :root { /* ===== BUSINESS COLORS - CHANGE THESE TO UPDATE YOUR BRAND ===== */ /* 🎨 QUICK COLOR CHANGE: Simply modify these 7 values to rebrand your entire application */ --business-primary: #060d47; /* 🔵 Dark blue - main brand color */ --business-secondary: #10a0da; /* ⚫ Neutral gray for secondary elements */ --business-accent: #00d4ff; /* 💠 Bright cyan for highlights and call-to-actions */ --business-success: #10b981; /* 🟢 Emerald green for success states */ --business-warning: #f59e0b; /* 🟡 Amber for warnings */ --business-danger: #ef4444; /* 🔴 Red for errors and danger states */ --business-info: #06b6d4; /* 🔷 Cyan for informational elements */ /* ===== GENERATED COLOR VARIATIONS ===== */ /* Primary Brand Colors - Auto-generated from business-primary (#060d47) */ --primary-color: var(--business-primary); --primary-light: #0f4eb4; /* Lighter shade of primary (less purple, more blue) */ --primary-lighter: #2a8cf7; /* Even lighter shade (sky blue, not purple) */ --primary-lightest: #3cc9ff; /* Lightest shade for highlights */ --primary-dark: #041240; /* Darker shade of primary */ --primary-darker: #020f2a; /* Even darker shade */ --primary-darkest: #010a1c; /* Darkest shade */ /* Modern Color Palette - Based on Primary (#060d47) */ --primary-50: #f0f2ff; /* Very light tint */ --primary-100: #dce4ff; /* Light tint */ --primary-200: #b8ccff; /* Lighter tint */ --primary-300: #94b4ff; /* Light tint */ --primary-400: #708cdd; /* Medium-light tint */ --primary-500: var(--business-primary); /* Base color */ --primary-600: #040a35; /* Darker shade */ --primary-700: #030723; /* Dark shade */ --primary-800: #020412; /* Darker shade */ --primary-900: #010208; /* Darkest shade */ --secondary-color: var(--business-secondary); --secondary-light: #33b4f0; /* Light shade of secondary */ --secondary-dark: #0c7abf; /* Dark shade of secondary */ --secondary-darker: #095a8f; /* Darker shade of secondary */ --secondary-darkest: #073a5f; /* Darkest shade of secondary */ /* Modern Accent Colors - Based on business colors */ --accent-cyan: var(--business-accent); /* Business accent color */ --accent-purple: #8b5cf6; /* Purple accent */ --accent-pink: #ec4899; /* Pink accent */ --accent-green: var(--business-success); /* Success green */ --accent-orange: var(--business-warning); /* Warning orange */ --accent-red: var(--business-danger); /* Error red */ /* Baby Blue / Electric Blue Colors - Coupled with Primary */ --baby-blue: #87ceeb; /* Baby blue */ --baby-blue-light: #a8d8f0; /* Light baby blue */ --baby-blue-lighter: #c9e6f7; /* Lighter baby blue */ --electric-blue: #00bfff; /* Electric blue */ --electric-blue-light: #33ccff; /* Light electric blue */ --electric-blue-dark: #0099cc; /* Dark electric blue */ --dark-blue: #1e3a8a; /* Dark blue */ --dark-blue-light: #3b5ba0; /* Light dark blue */ /* Modern Login Page Variables - Dark Theme */ --login-bg-primary: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 25%, #1a2968 50%, #040a35 80%, #020412 100%); --login-bg-secondary: linear-gradient(45deg, var(--business-secondary) 0%, var(--business-primary) 30%, #0c1658 70%, #040a35 100%); --login-bg-accent: linear-gradient(225deg, #060d47 0%, var(--business-secondary) 40%, #3a4d89 70%, #5a71aa 100%); --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.15); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.85); --text-muted: rgba(255, 255, 255, 0.65); --shadow-primary: 0 20px 40px rgba(20, 15, 84, 0.4); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.15); --border-radius: 16px; --border-radius-lg: 24px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --accent-purple: #8b5cf6; /* Modern purple accent */ --accent-blue: #3b82f6; /* Modern blue accent */ --accent-indigo: #6366f1; /* Modern indigo accent */ --accent-violet: #7c3aed; /* Modern violet accent */ /* Modern Neutral Colors */ --neutral-50: #fafafa; /* Lightest neutral */ --neutral-100: #f5f5f5; /* Light neutral */ --neutral-200: #e5e5e5; /* Light gray */ --neutral-300: #d4d4d4; /* Medium-light gray */ --neutral-400: #a3a3a3; /* Medium gray */ --neutral-500: #737373; /* Base gray */ --neutral-600: #525252; /* Dark gray */ --neutral-700: #404040; /* Darker gray */ --neutral-800: #262626; /* Dark gray */ --neutral-900: #171717; /* Darkest gray */ /* Background Colors */ --bg-white: #ffffff; --bg-light: #f8f9fa; --bg-light-secondary: #fafbfc; --bg-gray: #e9ecef; --bg-gray-dark: #dee2e6; --bg-black: #000000; /* Text Colors */ --text-dark: #1a1a1a; --text-primary: #495057; --text-secondary: #6c757d; --text-muted: #212529; /* Modern Status Colors - Auto-generated from business colors */ --success-color: var(--business-success); --success-light: #34d399; /* Light emerald */ --success-lighter: #6ee7b7; /* Lighter emerald */ --success-dark: #059669; /* Dark emerald */ --success-darker: #047857; /* Darker emerald */ --success-alt: var(--success-color); --warning-color: var(--business-warning); --warning-light: #fbbf24; /* Light amber */ --warning-lighter: #fcd34d; /* Lighter amber */ --warning-dark: #d97706; /* Dark amber */ --warning-darker: #b45309; /* Darker amber */ --danger-color: var(--business-danger); --danger-light: #f87171; /* Light red */ --danger-lighter: #fca5a5; /* Lighter red */ --danger-dark: #dc2626; /* Dark red */ --danger-darker: #b91c1c; /* Darker red */ --info-color: var(--business-info); --info-light: #22d3ee; /* Light cyan */ --info-lighter: #67e8f9; /* Lighter cyan */ --info-dark: #0891b2; /* Dark cyan */ --info-darker: #0e7490; /* Darker cyan */ --info-alt: #3b82f6; /* Modern blue alternative */ --info-alt-dark: #2563eb; /* Dark blue */ --info-alt-darker: #1d4ed8; /* Darker blue */ /* Bootstrap Colors - Modern Palette */ /* Bootstrap Variables - Automatically use business colors */ --bs-primary: var(--business-primary); --bs-primary-dark: var(--primary-dark); --bs-secondary: var(--business-secondary); --bs-success: var(--business-success); --bs-info: var(--business-info); --bs-warning: var(--business-warning); --bs-danger: var(--business-danger); --bs-light: #f9fafb; /* Modern light gray */ --bs-dark: #1f2937; /* Modern dark gray */ --bs-white: #ffffff; --bs-black: #000000; /* Custom Colors from style.default.premium.css */ --bs-red: #ff7676; --bs-yellow: #eef157; --bs-orange: #ffc36d; --bs-faintGreen: #54e69d; --bs-violet: #796AEE; --bs-paleBlue: #85b4f2; --bs-darkBlue: #2f333e; --bs-sidebar-bg: #30323e; /* RGB Variants for Bootstrap Colors */ --bs-primary-rgb: 6, 13, 71; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 40, 167, 69; --bs-info-rgb: 23, 162, 184; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 52, 58, 64; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-red-rgb: 255, 118, 118; --bs-yellow-rgb: 238, 241, 87; --bs-orange-rgb: 255, 195, 109; --bs-faintGreen-rgb: 84, 230, 157; --bs-violet-rgb: 121, 106, 238; --bs-paleBlue-rgb: 133, 180, 242; --bs-darkBlue-rgb: 47, 51, 62; --bs-sidebar-bg-rgb: 48, 50, 62; /* Secondary Colors */ --secondary-red: #a52d28; --secondary-red-dark: #9c2722; --secondary-red-darker: #b02a37; /* Orange/Error Colors */ --orange-color: #fd7e14; --orange-dark: #e55a00; /* Modern Gradient Colors (Primary: business-primary, accents electric blue) */ --gradient-primary: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 80%, var(--primary-lightest) 100%); --gradient-primary-light: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 50%, var(--primary-lightest) 100%); --gradient-primary-lighter: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-lightest) 50%, #5da3ff 100%); --gradient-primary-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%); --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 30%, #34d399 70%, #6ee7b7 100%); --gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 30%, #fbbf24 70%, #fcd34d 100%); --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 30%, #f87171 70%, #fca5a5 100%); --gradient-info: linear-gradient(135deg, var(--info-dark) 0%, #00caf5 30%, #22d3ee 70%, #67e8f9 100%); /* Sidebar State Variables (centralize colors for easier future updates) */ --sidebar-active-bg: var(--gradient-primary-dark); --sidebar-active-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%); --sidebar-hover-bg: rgba(24, 74, 143, 0.12); --sidebar-hover-text-color: var(--primary-color); --sidebar-hover-shadow: 0 2px 6px var(--primary-rgba-8), 0 1px 3px rgba(0, 0, 0, 0.04); --sidebar-active-hover-shadow: 0 4px 12px var(--primary-rgba-25), 0 2px 6px rgba(0, 0, 0, 0.08); --sidebar-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Modern Background Gradients */ --bg-gradient-light: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%); --bg-gradient-mid: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); --bg-gradient-end: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%); /* Modern Shadow Colors */ --shadow-primary: 0 4px 14px 0 rgba(20, 15, 84, 0.15); --shadow-primary-lg: 0 10px 25px 0 rgba(20, 15, 84, 0.2); --shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.15); --shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.15); --shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.15); --shadow-info: 0 4px 14px 0 rgba(6, 182, 212, 0.15); /* Transparency/Alpha Colors */ --primary-alpha-light: rgba(20, 15, 84, 0.14); --secondary-alpha-light: #6c757d23; /* RGBA Alpha Variants for Primary Color (#060d47) */ --primary-rgba-05: rgba(6, 13, 71, 0.05); --primary-rgba-10: rgba(6, 13, 71, 0.1); --primary-rgba-15: rgba(6, 13, 71, 0.15); --primary-rgba-20: rgba(6, 13, 71, 0.2); --primary-rgba-25: rgba(6, 13, 71, 0.25); --primary-rgba-30: rgba(6, 13, 71, 0.3); --primary-rgba-40: rgba(6, 13, 71, 0.4); --primary-rgba-50: rgba(6, 13, 71, 0.5); --secondary-rgba-05: rgba(16, 160, 218, 0.05); --secondary-rgba-10: rgba(16, 160, 218, 0.1); --secondary-rgba-15: rgba(16, 160, 218, 0.15); --secondary-rgba-20: rgba(16, 160, 218, 0.2); --secondary-rgba-25: rgba(16, 160, 218, 0.25); --secondary-rgba-30: rgba(16, 160, 218, 0.3); --secondary-rgba-40: rgba(16, 160, 218, 0.4); --secondary-rgba-50: rgba(16, 160, 218, 0.5); /* RGBA Alpha Variants for Primary Dark (#040a35) */ --primary-dark-rgba-05: rgba(4, 10, 53, 0.05); /* RGBA Alpha Variants for Primary Light (#1a2968) */ --primary-light-rgba-05: rgba(26, 41, 104, 0.05); --primary-light-rgba-10: rgba(26, 41, 104, 0.1); --primary-light-rgba-15: rgba(26, 41, 104, 0.15); --primary-light-rgba-20: rgba(26, 41, 104, 0.2); --primary-light-rgba-30: rgba(26, 41, 104, 0.3); /* RGBA Alpha Variants for Status Colors */ --danger-rgba-02: rgba(220, 53, 69, 0.02); --danger-rgba-03: rgba(220, 53, 69, 0.03); --danger-rgba-05: rgba(220, 53, 69, 0.05); --danger-rgba-08: rgba(220, 53, 69, 0.08); --danger-rgba-10: rgba(220, 53, 69, 0.1); --danger-rgba-15: rgba(220, 53, 69, 0.15); --danger-rgba-20: rgba(220, 53, 69, 0.2); --danger-rgba-30: rgba(220, 53, 69, 0.3); --danger-dark-rgba-30: rgba(200, 35, 51, 0.3); --danger-darker-rgba-30: rgba(187, 45, 59, 0.3); --danger-light-rgba-30: rgba(190, 58, 52, 0.3); --warning-rgba-02: rgba(255, 193, 7, 0.02); --warning-rgba-03: rgba(255, 193, 7, 0.03); --warning-rgba-05: rgba(255, 193, 7, 0.05); --warning-rgba-08: rgba(255, 193, 7, 0.08); --warning-rgba-10: rgba(255, 193, 7, 0.1); --warning-rgba-15: rgba(255, 193, 7, 0.15); --warning-rgba-20: rgba(255, 193, 7, 0.2); --warning-rgba-30: rgba(255, 193, 7, 0.3); --success-rgba-20: rgba(25, 135, 84, 0.2); --success-rgba-30: rgba(25, 135, 84, 0.3); --success-light-rgba-30: rgba(40, 167, 69, 0.3); --success-lighter-rgba-30: rgba(32, 201, 151, 0.3); --info-rgba-20: rgba(13, 202, 240, 0.2); --info-rgba-30: rgba(13, 202, 240, 0.3); --info-alt-rgba-10: rgba(23, 162, 184, 0.1); --info-alt-rgba-30: rgba(23, 162, 184, 0.3); /* Common RGBA Colors */ --black-rgba-05: rgba(0, 0, 0, 0.05); --black-rgba-06: rgba(0, 0, 0, 0.06); --black-rgba-10: rgba(0, 0, 0, 0.1); --black-rgba-12: rgba(0, 0, 0, 0.12); --black-rgba-15: rgba(0, 0, 0, 0.15); --black-rgba-18: rgba(0, 0, 0, 0.18); --white-rgba-10: rgba(255, 255, 255, 0.1); --white-rgba-30: rgba(255, 255, 255, 0.3); } /* ===== MODERN FEED SWITCH DESIGN ===== */ .feed-switch-container { display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 12px; padding: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); border: 1px solid #e5e7eb; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .feed-switch-container:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); border-color: #d1d5db; } .feed-switch-option { position: relative; flex: 1; min-width: 120px; } .feed-switch-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .feed-switch-label { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 8px; font-weight: 600; font-size: 0.875rem; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; color: #6c757d; background: transparent; border: none; width: 100%; } .feed-switch-label:hover { color: #495057; transform: translateY(-1px); } .feed-switch-label i { margin-right: 8px; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feed-switch-label .badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; min-width: 18px; text-align: center; margin-left: 8px; } .feed-switch-option input[type="radio"]:checked + .feed-switch-label { color: #ffffff; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); box-shadow: 0 4px 12px rgba(20, 15, 84, 0.25); transform: translateY(-1px); } .feed-switch-option input[type="radio"]:checked + .feed-switch-label i { transform: scale(1.1); } .feed-switch-option input[type="radio"]:focus + .feed-switch-label { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Active state with smooth transition */ .feed-switch-container::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); border-radius: 8px; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .feed-switch-option:first-child input[type="radio"]:checked ~ .feed-switch-container::before { transform: translateX(0); opacity: 1; } .feed-switch-option:last-child input[type="radio"]:checked ~ .feed-switch-container::before { transform: translateX(100%); opacity: 1; } /* Compact version for smaller spaces */ .feed-switch-container.compact { padding: 3px; } .feed-switch-container.compact .feed-switch-label { padding: 8px 12px; font-size: 0.8rem; } .feed-switch-container.compact .feed-switch-label i { margin-right: 6px; font-size: 0.8rem; } /* Mobile responsive */ @media (max-width: 576px) { .feed-switch-container { padding: 3px; margin-top: 1rem; } .feed-switch-label { padding: 10px 12px; font-size: 0.8rem; } .feed-switch-label i { margin-right: 6px; font-size: 0.8rem; } } /* ===== MODERN PAGINATION DESIGN ===== */ .pagination-wrapper { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 16px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); backdrop-filter: blur(10px); } .pagination-wrapper .pagination-info { font-size: 0.875rem; font-weight: 500; color: #64748b; } /* Modern pagination container */ .pagination { gap: 8px; margin: 0; align-items: center; } .pagination .page-item { position: relative; } /* Base page link styling */ .pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: #ffffff; color: #475569; font-weight: 500; font-size: 0.875rem; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } /* Hover state */ .pagination .page-link:hover { color: var(--business-primary); background: #f8fafc; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); } /* Active state with gradient */ .pagination .page-item.active .page-link { color: white; background: var(--gradient-primary, linear-gradient(135deg, var(--business-primary) 0%, var(--primary-dark) 100%)); border-color: var(--business-primary); box-shadow: 0 12px 32px color-mix(in srgb, var(--business-primary) 20%, transparent); transform: translateY(-2px); font-weight: 600; } .pagination .page-item.active .page-link:hover { color: white; background: var(--gradient-primary-dark, linear-gradient(135deg, var(--primary-dark) 0%, var(--business-primary) 100%)); transform: translateY(-3px); box-shadow: 0 16px 40px color-mix(in srgb, var(--business-primary) 25%, transparent); } /* Disabled state */ .pagination .page-item.disabled .page-link { color: #94a3b8; background: #f1f5f9; border-color: rgba(0,0,0,0.05); box-shadow: none; cursor: not-allowed; transform: none; } .pagination .page-item.disabled .page-link:hover { color: #94a3b8; background: #f1f5f9; border-color: rgba(0,0,0,0.05); transform: none; box-shadow: none; } /* First/Last buttons with special styling */ .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { min-width: 48px; font-weight: 600; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-color: rgba(0,0,0,0.1); font-size: 0.9rem; } .pagination .page-item:first-child .page-link:hover, .pagination .page-item:last-child .page-link:hover { background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--business-primary) 100%); color: white; border-color: var(--business-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } /* Specific targeting for first/last buttons with aria-label attributes */ .pagination .page-link[aria-label="First"], .pagination .page-link[aria-label="Last"] { min-width: 48px; font-weight: 600; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-color: rgba(0,0,0,0.1); font-size: 0.9rem; } .pagination .page-link[aria-label="First"]:hover, .pagination .page-link[aria-label="Last"]:hover { background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--business-primary) 100%); color: white; border-color: var(--business-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } /* Ellipsis styling */ .pagination .page-link.text-muted { background: transparent; border: none; color: #94a3b8; cursor: default; font-weight: 600; font-size: 1rem; min-width: 32px; height: 32px; box-shadow: none; } .pagination .page-link.text-muted:hover { background: transparent; color: #94a3b8; transform: none; box-shadow: none; } /* Focus state */ .pagination .page-link:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--business-primary) 20%, transparent); } /* Compact pagination */ .pagination.pagination-sm .page-link { min-width: 32px; height: 32px; padding: 0 8px; font-size: 0.8rem; border-radius: 8px; } /* Page size selector */ #pageSizeSelect.form-select.form-select-sm { min-width: 90px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: #ffffff; color: #475569; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } #pageSizeSelect.form-select.form-select-sm:focus { border-color: var(--business-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--business-primary) 20%, transparent); } /* Input group styling for page size */ .page-size-group .input-group-text { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-right: none; color: #475569; font-weight: 600; border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .page-size-group .form-select { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Dark mode support */ body.dark .pagination-wrapper { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } body.dark .pagination .page-link { background: #334155; color: #cbd5e1; border-color: rgba(255,255,255,0.1); } body.dark .pagination .page-link:hover { background: #475569; color: var(--business-primary); } body.dark .pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--business-primary) 0%, var(--primary-dark) 100%); color: white; } body.dark .pagination .page-item.disabled .page-link { background: #1e293b; color: #64748b; } body.dark #pageSizeSelect.form-select.form-select-sm { background: #334155; color: #cbd5e1; border-color: rgba(255,255,255,0.1); } /* ===== UNIVERSAL BUTTON STYLES ===== */ /* These button styles apply universally across all contexts - no more context-specific overrides! */ /* Primary Button - Override Bootstrap with higher specificity */ .btn.btn-primary, .btn-primary { --bs-btn-bg: var(--business-primary) !important; --bs-btn-border-color: var(--business-primary) !important; --bs-btn-hover-bg: var(--primary-light) !important; --bs-btn-hover-border-color: var(--primary-light) !important; --bs-btn-active-bg: var(--primary-light) !important; --bs-btn-active-border-color: var(--primary-light) !important; --bs-btn-disabled-bg: var(--business-primary) !important; --bs-btn-disabled-border-color: var(--business-primary) !important; background: var(--gradient-primary) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: var(--shadow-primary) !important; text-decoration: none !important; } .btn.btn-primary:hover, .btn-primary:hover { background: var(--gradient-primary-dark) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-primary-lg) !important; color: white !important; text-decoration: none !important; } .btn.btn-primary:focus, .btn.btn-primary:focus-visible, .btn-primary:focus, .btn-primary:focus-visible { outline: 2px solid var(--primary-300) !important; box-shadow: 0 0 0 4px var(--primary-rgba-20) !important; color: white !important; } .btn.btn-primary:active, .btn.btn-primary.active, .btn-primary:active, .btn-primary.active { background: var(--gradient-primary-light) !important; transform: translateY(0) !important; box-shadow: var(--shadow-primary) !important; color: white !important; } /* Primary Outline Button - Override Bootstrap with higher specificity */ .btn.btn-outline-primary, .btn-outline-primary { --bs-btn-color: var(--business-primary) !important; --bs-btn-border-color: var(--business-primary) !important; --bs-btn-hover-color: white !important; --bs-btn-hover-bg: var(--business-primary) !important; --bs-btn-hover-border-color: var(--business-primary) !important; --bs-btn-active-color: white !important; --bs-btn-active-bg: var(--business-primary) !important; --bs-btn-active-border-color: var(--business-primary) !important; --bs-btn-disabled-color: var(--business-primary) !important; --bs-btn-disabled-bg: transparent !important; --bs-btn-disabled-border-color: var(--business-primary) !important; border: 2px solid var(--business-primary) !important; color: var(--business-primary) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn.btn-outline-primary:hover, .btn-outline-primary:hover { background: var(--business-primary) !important; border-color: var(--business-primary) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px var(--primary-rgba-30) !important; text-decoration: none !important; } .btn.btn-outline-primary:focus, .btn.btn-outline-primary:focus-visible, .btn-outline-primary:focus, .btn-outline-primary:focus-visible { outline: 2px solid var(--primary-300) !important; box-shadow: 0 0 0 4px var(--primary-rgba-15) !important; color: var(--business-primary) !important; } /* Secondary Button */ .btn-secondary { background: var(--business-secondary) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-secondary:hover { background: var(--secondary-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important; color: white !important; text-decoration: none !important; } /* Secondary Outline Button */ .btn.btn-outline-secondary, .btn-outline-secondary { border: 2px solid var(--business-secondary) !important; color: var(--business-secondary) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn.btn-outline-secondary:hover, .btn-outline-secondary:hover { background: var(--business-secondary) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important; text-decoration: none !important; } .btn.btn-outline-secondary:focus, .btn.btn-outline-secondary:focus-visible, .btn-outline-secondary:focus, .btn-outline-secondary:focus-visible { outline: 2px solid var(--secondary-light) !important; box-shadow: 0 0 0 4px var(--secondary-rgba-15) !important; color: var(--business-secondary) !important; } .btn.btn-light, .btn-light { --bs-btn-bg: var(--bg-light) !important; --bs-btn-border-color: var(--bg-light) !important; --bs-btn-color: var(--text-dark) !important; --bs-btn-hover-bg: var(--bg-gray) !important; --bs-btn-hover-border-color: var(--bg-gray-dark) !important; --bs-btn-active-bg: var(--bg-gray-dark) !important; --bs-btn-active-border-color: var(--bg-gray-dark) !important; --bs-btn-disabled-bg: var(--bg-light) !important; --bs-btn-disabled-border-color: var(--bg-light) !important; --bs-btn-disabled-color: var(--text-dark) !important; background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%) !important; border: none !important; color: var(--text-dark) !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.12) !important; text-decoration: none !important; } .btn.btn-light:hover, .btn-light:hover { background: linear-gradient(135deg, var(--bg-gray) 0%, var(--bg-gray-dark) 100%) !important; color: var(--primary-color) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(108, 117, 125, 0.18) !important; text-decoration: none !important; } .btn.btn-light:active, .btn.btn-light.active, .btn-light:active, .btn-light.active { background: linear-gradient(135deg, var(--bg-gray-dark) 0%, var(--bg-gray) 100%) !important; color: var(--primary-dark) !important; transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.12) !important; text-decoration: none !important; } /* Success Button */ .btn-success { background: var(--business-success) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-success:hover { background: var(--success-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important; color: white !important; text-decoration: none !important; } /* Warning Button */ .btn-warning { background: var(--business-warning) !important; border: none !important; color: var(--text-dark) !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-warning:hover { background: var(--warning-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important; color: var(--text-dark) !important; text-decoration: none !important; } /* Danger Button */ .btn-danger { background: var(--business-danger) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-danger:hover { background: var(--danger-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; color: white !important; text-decoration: none !important; } /* Info Button */ .btn-info { background: var(--business-info) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-info:hover { background: var(--info-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3) !important; color: white !important; text-decoration: none !important; } /* your styles go here */ .table { table-layout: fixed; width: 100% !important; } /* Define column widths */ .col-quantity { width: 10%; } .col-code { width: 15%; } .col-description { width: 45%; } .col-price { width: 15%; } .col-net-price { width: 15%; } /* Handle text overflow - allow wrapping for better readability */ .table td, .table th { overflow: hidden; word-wrap: break-word; white-space: normal; } .img-login-page { max-height: 100px; } .privacy-statement-footer { color: var(--bg-white); } .privacy-statement-footer:hover { color: var(--danger-light); } .clickable-row { cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--primary-dark); } .clickable-row:hover { background-color: var(--primary-alpha-light); box-shadow: 0 2px 8px var(--primary-rgba-15); } .folder-row-icon { color: var(--warning-color); } .file-row-icon { color: var(--text-secondary); } .clickable-row.file-row:hover { background-color: var(--secondary-alpha-light); } .non-clickable-row { cursor: default; color: var(--text-secondary); } /* Modern button hover effects without pop-up */ .btn-warning:hover { background-color: var(--warning-dark) !important; border-color: var(--warning-darker) !important; --bs-btn-hover-bg: var(--warning-dark) !important; --bs-btn-hover-border-color: var(--warning-darker) !important; --bs-btn-hover-color: var(--text-muted) !important; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important; } /* Secondary button styling handled by universal button section */ .btn-danger:hover { background-color: var(--danger-darker) !important; border-color: var(--secondary-red-darker) !important; --bs-btn-hover-bg: var(--danger-darker) !important; --bs-btn-hover-border-color: var(--secondary-red-darker) !important; --bs-btn-hover-color: var(--bg-white) !important; box-shadow: 0 4px 12px rgba(187, 45, 59, 0.3) !important; } /* Button hover effects are handled by universal button styles */ /* Modern card design with proper styling */ .card { border-radius: 16px !important; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; } /* Ensure all card variants have consistent border radius */ .card:not(.login-page .card) { border-radius: 16px !important; } /* Removed card::before pseudo-element to eliminate top line on hover */ /* Only apply white background to cards without specific background classes */ .card:not([class*="bg-"]):hover { border-color: var(--primary-rgba-15) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light-secondary) 100%) !important; } /* For clickable colored cards, preserve backgrounds and enhance effects */ .card[class*="bg-"]:hover:not(.stats-card):not([class*="bg-gradient-"]) { border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 6px 15px rgba(0, 0, 0, 0.12) !important; } /* Dashboard counter cards - no hover effects since they're not clickable */ .card[class*="bg-gradient-"] { cursor: default !important; } /* No hover effects for gradient cards - they're informational only */ .card[class*="bg-gradient-"]:hover { cursor: default; } /* Removed card hover ::before rules since the pseudo-element has been removed */ .card-header { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; padding: 1.25rem 1.5rem !important; } /* Ensure all card headers have consistent border radius */ .card-header:not(.login-page .card-header) { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; } .card-footer { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%) !important; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; padding: 1.25rem 1.5rem !important; } /* Ensure all card footers have consistent border radius */ .card-footer:not(.login-page .card-footer) { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } /* Comprehensive card border radius override - ensure consistency across all cards */ .card, .card:not(.login-page .card), .card:not([class*="bg-gradient-"]) { border-radius: 16px !important; } .card-header, .card-header:not(.login-page .card-header) { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; } .card-footer, .card-footer:not(.login-page .card-footer) { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } /* Modern button styling without pop-up effects */ .btn { border-radius: 12px !important; border: none !important; font-weight: 500 !important; letter-spacing: 0.025em !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; } /* Button styling handled by universal button styles */ .btn-success { background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%) !important; box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2) !important; } .btn-success:hover { background: linear-gradient(135deg, var(--success-dark) 0%, var(--success-darker) 100%) !important; box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3) !important; } .btn-info { background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%) !important; box-shadow: 0 2px 4px rgba(13, 202, 240, 0.2) !important; } .btn-info:hover { background: linear-gradient(135deg, var(--info-dark) 0%, var(--info-darker) 100%) !important; box-shadow: 0 4px 8px rgba(13, 202, 240, 0.3) !important; } .btn-warning { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%) !important; box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2) !important; } .btn-warning:hover { background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning-darker) 100%) !important; box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3) !important; } /* Modern navbar with subtle glass effect */ nav.navbar { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; } /* Modern sidebar with depth */ nav.side-navbar { background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-right: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.1), 2px 0 4px -1px rgba(0, 0, 0, 0.06) !important; } /* Old duplicate active styles removed - using modern consolidated styles below */ /* Legacy hover styles removed - replaced with enhanced animations above */ /* Modern form controls */ .form-control { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; } .form-control:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; } /* Modern form-select styling to match form-control */ .form-select { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; padding: 0.375rem 0.75rem !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--bg-black) !important; } /* Dashboard specific styles */ .bg-gradient-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important; } .bg-gradient-success { background: linear-gradient(135deg, var(--success-alt) 0%, var(--success-alt) 100%) !important; } .bg-gradient-info { background: linear-gradient(135deg, var(--info-alt) 0%, var(--info-alt-dark) 100%) !important; } .bg-gradient-warning { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%) !important; } .bg-gradient-danger { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%) !important; } /* Enhanced button animations */ .btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .btn:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; } /* Enhanced table hover effects */ .table-hover tbody tr:hover { background-color: rgba(0, 123, 255, 0.05) !important; } /* Enhanced list group hover effects */ .list-group-item { transition: background-color 0.2s ease-in-out !important; } .list-group-item:hover { background-color: rgba(0, 123, 255, 0.05) !important; } /* Dashboard statistics cards */ .stats-card { border-radius: 16px !important; border: none !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important; } .stats-card .card-body { padding: 1.5rem !important; } /* Error monitoring styles */ .error-critical { color: var(--danger-color) !important; } .error-warning { color: var(--warning-color) !important; } .error-info { color: var(--info-alt) !important; } /* Modern badge styles */ .badge { border-radius: 8px !important; font-weight: 500 !important; } /* Enhanced shadow utilities */ .shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } .shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important; } .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; } .form-select:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; outline: none !important; } .form-select:hover { border-color: var(--primary-light-rgba-30) !important; } /* Small form controls */ .form-control-sm { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; min-height: calc(1.5em + 0.75rem + 2px) !important; padding: 0.375rem 0.5rem !important; font-size: 0.875rem !important; } .form-control-sm:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; } .form-control-sm:hover { border-color: var(--primary-light-rgba-30) !important; } /* Small form-select styling */ .form-select-sm { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; padding-left: 0.5rem !important; font-size: 0.875rem !important; color: var(--bg-black) !important; } .form-select-sm:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; outline: none !important; } .form-select-sm:hover { border-color: var(--primary-light-rgba-30) !important; } /* Large form controls */ .form-control-lg { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; min-height: calc(1.5em + 1rem + 2px) !important; padding: 0.5rem 1rem !important; font-size: 1.25rem !important; } .form-control-lg:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; } .form-control-lg:hover { border-color: var(--primary-light-rgba-30) !important; } /* Large form-select styling */ .form-select-lg { border-radius: 12px !important; border: 2px solid var(--bg-gray) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; padding-left: 1rem !important; font-size: 1.25rem !important; color: var(--bg-black) !important; } .form-select-lg:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px var(--primary-light-rgba-15) !important; outline: none !important; } .form-select-lg:hover { border-color: var(--primary-light-rgba-30) !important; } /* Form group styling for better spacing */ .form-group { margin-bottom: 1.5rem; } /* Label styling for modern forms */ .form-label { color: var(--text-primary); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.9rem; } /* Help text styling */ .form-text { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.25rem; font-style: italic; } /* Checkbox and radio styling */ .form-check-input { border-radius: 8px !important; border: 2px solid var(--primary-rgba-20) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .form-check-input:checked { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .form-check-input:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px var(--primary-rgba-10) !important; } .form-check-label { color: var(--text-primary); font-weight: 500; margin-left: 0.5rem; } /* Modern table styling */ .table { border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; } .table thead th { background: transparent !important; border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.875rem !important; } .table thead { background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%) !important; } /* Modern dropdown styling */ .dropdown-menu { border-radius: 16px !important; border: none !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* Modern modal styling */ .modal-content { border-radius: 20px !important; border: none !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* Subtle body background with modern gradient */ body { background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 50%, var(--bg-gray-dark) 100%) !important; min-height: 100vh !important; } /* Modern spacing and typography improvements */ .card-body { padding: 1.5rem !important; } .table td, .table th { padding: 1rem 1.25rem !important; vertical-align: middle !important; } /* Enhanced focus states for accessibility */ .btn:focus, .form-control:focus, .dropdown-toggle:focus { outline: none !important; box-shadow: 0 0 0 3px var(--primary-rgba-25) !important; } /* Smooth scrolling for better UX */ html { scroll-behavior: smooth !important; } /* ===== LOGIN PAGE MODERNIZATION ===== */ /* Login page background and container */ .login-page { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%); min-height: 100vh; position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; z-index: 1; } .login-page .container { position: relative; z-index: 2; } /* Main login card */ .login-page .card { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .login-page .card:hover { box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15); } /* Logo panel (left side) */ .login-page .info { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; position: relative; overflow: hidden; } .login-page .info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .login-page .info .py-5 { position: relative; z-index: 1; } .login-page .info h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); font-weight: 700; letter-spacing: -0.5px; } /* Form panel (right side) */ .login-page .col-lg-6.bg-white { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(15px); border-left: 1px solid rgba(255, 255, 255, 0.2); } /* Login form styling */ .login-form { position: relative; z-index: 1; } .login-form h1 { color: var(--primary-dark); font-weight: 700; margin-bottom: 2rem; text-align: center; font-size: 2.5rem; letter-spacing: -0.5px; } /* Error styling */ .login-page .js-validate-error-label { color: var(--danger-color); font-size: 0.875rem; font-weight: 500; margin-top: 0.5rem; padding: 0.75rem 1rem; background: rgba(220, 53, 69, 0.1); border-radius: 12px; border-left: 4px solid var(--danger-color); } /* Login button now uses universal .btn-primary styles */ /* Footer links */ .login-page .text-center p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 1.5rem; } .login-page .text-center a { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.25rem 0.5rem; border-radius: 8px; } .login-page .text-center a:hover { color: var(--primary-dark); background: var(--primary-rgba-10); } /* Responsive adjustments */ @media (max-width: 991.98px) { .login-page .info { min-height: 200px; } .login-page .card { margin: 1rem; } .login-form h1 { font-size: 2rem; } } @media (max-width: 575.98px) { .login-page .card { border-radius: 16px !important; } /* Login button uses universal .btn-primary styles */ } /* ===== BASE TEMPLATE MODERNIZATION ===== */ /* Modern navbar with glass morphism */ .header .navbar { background: var(--gradient-primary-dark) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .header .navbar:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.15); } /* Enhanced navbar brand */ .navbar-brand { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .navbar-brand:hover { transform: scale(1.05); } .navbar-brand img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .navbar-header { display: flex !important; align-items: center !important; gap: 12px !important; } /* Modern menu button */ .menu-btn { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 12px !important; backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 16px !important; min-width: 48px !important; min-height: 48px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; } .menu-btn:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .menu-btn:hover span, nav.navbar .menu-btn:hover span { background: white !important; transform: scale(1.1) !important; -webkit-transform: scale(1.1) !important; } .menu-btn span, nav.navbar .menu-btn span { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; width: 20px !important; height: 2px !important; display: block !important; border-radius: 1px !important; transition: all 0.3s ease !important; transform: scale(1) !important; position: static !important; margin: 0 !important; -webkit-transform: scale(1) !important; } .menu-btn span:nth-of-type(2), nav.navbar .menu-btn span:nth-of-type(2) { width: 20px !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; position: static !important; } .menu-btn span:nth-of-type(2)::before, .menu-btn span:nth-of-type(2)::after, nav.navbar .menu-btn span:nth-of-type(2)::before, nav.navbar .menu-btn span:nth-of-type(2)::after { display: none !important; } /* Enhanced nav links */ .nav-link { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 12px !important; backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.5rem 1rem !important; margin: 0 0.25rem !important; } .nav-link:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .nav-link i { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-link:hover i { transform: scale(1.1); } /* Modern sidebar */ .side-navbar { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 8px 0 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); } /* Enhanced sidebar header - reduced spacing */ .sidebar-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); margin: 1rem 1rem 0.5rem 1rem !important; /* Reduced bottom margin from 1rem to 0.5rem */ border-radius: 16px; padding: 1.5rem !important; box-shadow: 0 8px 25px var(--primary-rgba-30), 0 4px 10px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; align-items: center !important; } /* Ensure profile avatar maintains proper dimensions in sidebar */ .sidebar-header .profile-avatar { flex-shrink: 0 !important; } /* Override any conflicting .avatar styles from other CSS files */ .profile-avatar img.avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; border: none !important; box-shadow: none !important; position: static !important; transform: none !important; } .profile-avatar.has-image img.avatar { width: 100% !important; height: 100% !important; } /* Modern hover effect for the entire header card */ .sidebar-header:hover { transform: translateY(-2px) scale(1.02); background: var(--sidebar-active-hover-bg); box-shadow: 0 12px 35px var(--primary-rgba-40), 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .sidebar-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } /* Profile avatar hover effects - works for both sidebar and profile page */ .profile-avatar:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(6, 13, 71, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.2); } .profile-avatar.has-image:hover { background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 30%, var(--business-info) 70%, var(--business-success) 100%); } .profile-avatar.has-image:hover img { transform: scale(1.02); filter: brightness(1.05) contrast(1.02); } .sidebar-header .title { position: relative; z-index: 1; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; flex: 1; } .sidebar-header .title p { color: white !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 100%; line-height: 1.3; } /* Text effects when header is hovered */ .sidebar-header:hover .title p { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); transform: translateY(-1px); } /* Collapsed sidebar states */ .side-navbar.shrinked .sidebar-header { margin: 0.5rem; padding: 0.75rem 0.25rem !important; text-align: center; justify-content: center !important; } .side-navbar.shrinked .sidebar-header .title { display: none !important; } /* Shrink profile avatar nicely when collapsed - both image and no-image variants */ .side-navbar.shrinked .sidebar-header .profile-avatar, .side-navbar.shrinked .sidebar-header .profile-avatar.has-image, .side-navbar.shrinked .sidebar-header .profile-avatar.no-image { width: 40px !important; height: 40px !important; margin: 0 auto !important; display: block !important; font-size: 16px !important; line-height: 40px !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Ensure the image inside also scales properly */ .side-navbar.shrinked .sidebar-header .profile-avatar.has-image img, .side-navbar.shrinked .sidebar-header .profile-avatar img { width: 40px !important; height: 40px !important; border-radius: 50% !important; } /* Legacy avatar support */ .side-navbar.shrinked .sidebar-header .avatar { margin: 0 auto; display: block; width: 40px !important; height: 40px !important; } /* Profile Avatar Styles - Base styles with transitions */ .profile-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; text-transform: uppercase; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; border: 4px solid var(--business-primary); box-shadow: 0 4px 12px rgba(6, 13, 71, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); flex-shrink: 0; aspect-ratio: 1 / 1; } /* Remove individual avatar hover effect - handled by header */ /* Avatar with profile picture */ .profile-avatar.has-image { border: 4px solid var(--business-primary); background: none; padding: 0; box-shadow: 0 4px 12px rgba(6, 13, 71, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.2); } .profile-avatar.has-image img { width: 100% !important; height: 100%; object-fit: cover; border-radius: 50%; border: none; box-shadow: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Avatar without profile picture - letter avatar */ .profile-avatar.no-image { border: 4px solid var(--business-primary); box-shadow: 0 4px 12px rgba(6, 13, 71, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.2); border-color: var(--business-primary); background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); } /* Ensure profile pictures are circular */ .profile-avatar img { border-radius: 50%; object-fit: cover; } /* Readonly form field styling */ input[readonly].form-control, textarea[readonly].form-control, select[readonly].form-control { background-color: #f8f9fa !important; border: 2px dashed #ced4da !important; color: #6c757d !important; cursor: not-allowed !important; font-style: italic; } input[readonly].form-control:hover, textarea[readonly].form-control:hover, select[readonly].form-control:hover { background-color: #f1f3f4 !important; border-color: #adb5bd !important; } input[readonly].form-control:focus, textarea[readonly].form-control:focus, select[readonly].form-control:focus { background-color: #f8f9fa !important; border-color: #6c757d !important; box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.1) !important; } /* Readonly field help text styling */ .form-control[readonly] ~ .form-text, .form-control[readonly] + .form-text { color: #6c757d; font-style: italic; font-size: 0.875rem; } /* Responsive sidebar collapse */ @media (max-width: 1199.98px) { .side-navbar { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .side-navbar.show { transform: translateX(0); } .side-navbar .sidebar-header { margin: 0.5rem; padding: 1rem !important; } .side-navbar .sidebar-header .title { display: block !important; } } /* Modern sidebar items */ .sidebar-item { margin: 0.25rem 1rem; } /* Modern desktop sidebar links */ .sidebar-link { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(var(--primary-color-rgb, 20, 15, 84), 0.08) !important; border-radius: 16px !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; color: var(--text-primary, #374151) !important; font-weight: 600 !important; font-size: 0.95rem !important; padding: 1rem 1.25rem !important; position: relative !important; overflow: hidden !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; text-decoration: none !important; margin: 0 0.75rem 0.75rem 0.75rem !important; letter-spacing: 0.01em !important; text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5) !important; } /* Modern shimmer effect */ .sidebar-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb, 20, 15, 84), 0.15), transparent); transition: left 0.6s ease; z-index: 1; } .sidebar-link:hover::before { left: 100%; } /* Enhanced modern hover effects */ .sidebar-link:hover { background: rgba(var(--primary-color-rgb, 20, 15, 84), 0.08) !important; border-color: rgba(var(--primary-color-rgb, 20, 15, 84), 0.2) !important; color: var(--primary-color, #060d47) !important; box-shadow: 0 8px 25px rgba(var(--primary-color-rgb, 20, 15, 84), 0.15), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; transform: translateX(6px) translateY(-2px) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } /* Modern icon styling */ .sidebar-link i { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; font-size: 1.1rem !important; width: 20px !important; text-align: center !important; margin-right: 0.75rem !important; position: relative !important; z-index: 2 !important; } .sidebar-link:hover i { transform: scale(1.15) !important; color: var(--primary-color, #060d47) !important; } .sidebar-link i { color: var(--text-secondary); transition: var(--sidebar-transition); width: 20px; text-align: center; display: inline-block; } .sidebar-link:hover i { color: var(--primary-color); transform: scale(1.1); } /* Modern Active sidebar item - elevated design */ nav.side-navbar .sidebar-item.active > .sidebar-link, nav.side-navbar .sidebar-item.active .sidebar-link, .sidebar-item.active > .sidebar-link { background: rgba(var(--primary-color-rgb, 20, 15, 84), 0.12) !important; color: var(--primary-color, #060d47) !important; border: 2px solid rgba(var(--primary-color-rgb, 20, 15, 84), 0.25) !important; border-radius: 16px !important; box-shadow: 0 12px 35px rgba(var(--primary-color-rgb, 20, 15, 84), 0.2), 0 6px 15px rgba(0, 0, 0, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(var(--primary-color-rgb, 20, 15, 84), 0.1) !important; transform: translateX(6px) scale(1.02) !important; position: relative !important; overflow: hidden !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; font-weight: 700 !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } /* Modern active accent - refined design */ .sidebar-item.active .sidebar-link::after { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 5px; height: 60%; background: linear-gradient(180deg, var(--primary-color, #060d47), rgba(var(--primary-color-rgb, 20, 15, 84), 0.7)); border-radius: 0 3px 3px 0; box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 20, 15, 84), 0.3); } /* Modern active icon styling */ .sidebar-item.active .sidebar-link i { color: var(--primary-color, #060d47) !important; transform: scale(1.2) !important; font-weight: 600 !important; filter: drop-shadow(0 1px 2px rgba(var(--primary-color-rgb, 20, 15, 84), 0.2)); } /* Active sidebar hover - consistent with regular hovers but slightly enhanced */ nav.side-navbar .sidebar-item.active > .sidebar-link:hover, nav.side-navbar .sidebar-item.active .sidebar-link:hover, .sidebar-item.active > .sidebar-link:hover { background: rgba(var(--primary-color-rgb, 20, 15, 84), 0.12) !important; border-color: rgba(var(--primary-color-rgb, 20, 15, 84), 0.25) !important; color: var(--primary-color, #060d47) !important; box-shadow: 0 10px 30px rgba(var(--primary-color-rgb, 20, 15, 84), 0.18), 0 5px 15px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; transform: translateX(7px) translateY(-2px) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } /* Active hover icon effects - consistent scaling */ nav.side-navbar .sidebar-item.active .sidebar-link:hover i, .sidebar-item.active .sidebar-link:hover i { transform: scale(1.2) !important; color: var(--primary-color, #060d47) !important; filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb, 20, 15, 84), 0.3)); } .sidebar-item.active .sidebar-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } /* Conflicting styles removed - updated versions are above */ /* Modern content area */ .content-inner { background: linear-gradient(135deg, var(--bg-gradient-light) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%); position: relative; } .content-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); pointer-events: none; } /* Enhanced footer */ #footer { background: var(--gradient-primary-dark) !important; backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } #footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } #footer .container-fluid { position: relative; z-index: 1; } #footer p { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-weight: 500; } /* Modern toast notifications */ .toast { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1); overflow: hidden; } .toast.bg-success { background: linear-gradient(135deg, var(--success-alt) 0%, var(--success-lighter) 100%) !important; border-color: rgba(255, 255, 255, 0.3) !important; } .toast.bg-danger { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%) !important; border-color: rgba(255, 255, 255, 0.3) !important; } .toast-header { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px); } .toast-body { font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Enhanced page transitions */ .page { background: linear-gradient(135deg, var(--bg-gradient-light) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%); min-height: 100vh; position: relative; } /* Responsive improvements */ @media (max-width: 991.98px) { .sidebar-header { margin: 0.5rem; padding: 1rem !important; } .sidebar-item { margin: 0.125rem 0.5rem; } .sidebar-link { padding: 0.5rem 0.75rem !important; font-size: 0.9rem; } } /* Collapsed sidebar menu items */ .side-navbar.shrinked .sidebar-item { margin: 0.125rem 0.5rem; text-align: center; } .side-navbar.shrinked .sidebar-link { padding: 0.75rem 0.5rem !important; font-size: 0.8rem; text-align: center; justify-content: center; } .side-navbar.shrinked .sidebar-link span { display: none !important; } /* Hide extras section label when collapsed and prevent overflow */ .side-navbar.shrinked .text-uppercase { visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; white-space: nowrap !important; position: absolute !important; left: -9999px !important; } /* Ensure sidebar content doesn't overflow when collapsed */ .side-navbar.shrinked { overflow-x: hidden !important; overflow-y: auto !important; } .side-navbar.shrinked .sidebar-link i { font-size: 1.2rem; margin: 0 !important; display: block; text-align: center; } /* Ensure proper spacing in collapsed state */ .side-navbar.shrinked .list-unstyled { padding: 0.5rem 0; } @media (max-width: 575.98px) { .nav-link { padding: 0.375rem 0.75rem !important; margin: 0 0.125rem !important; font-size: 0.875rem; } .toast { border-radius: 12px !important; margin: 0.5rem; } } /* ===== SIDEBAR FLASH PREVENTION ===== */ /* Prevent sidebar flash on page load when collapsed state is restored */ @media (min-width: 768px) { html.sidebar-collapsed-preload .side-navbar { min-width: 90px !important; max-width: 90px !important; text-align: center !important; transition: none !important; } html.sidebar-collapsed-preload .content-inner { margin-left: 90px !important; transition: none !important; } html.sidebar-collapsed-preload #toggle-btn { transform: rotate(180deg) !important; } /* Hide title text immediately */ html.sidebar-collapsed-preload .sidebar-header .title { display: none !important; } /* Hide link text immediately */ html.sidebar-collapsed-preload .sidebar-link span { visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; } /* Hide extras text immediately */ html.sidebar-collapsed-preload .text-uppercase { visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; } } /* ===== MOBILE SIDEBAR BEHAVIOR ===== */ /* Mobile sidebar behavior (screens smaller than 768px) */ @media (max-width: 767.98px) { /* Default state: sidebar is hidden */ nav.side-navbar { transform: translateX(-100%) !important; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: 1055 !important; height: 100vh !important; height: 100dvh !important; /* Use dynamic viewport height for better mobile support */ overflow-y: auto !important; overflow-x: hidden !important; /* Prevent horizontal scrolling */ width: min(300px, 85vw) !important; /* Responsive width - max 85% of viewport */ min-width: min(280px, 80vw) !important; max-width: 300px !important; margin-left: 0 !important; background: linear-gradient(135deg, var(--business-primary, #060d47) 0%, var(--primary-dark, #041240) 90%, var(--bs-sidebar-bg, #30323e) 100%) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; border-radius: 0 20px 20px 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; /* Remove padding from sidebar - profile section will handle safe area */ padding-top: 0 !important; } /* When sidebar is shown (has .show class) */ nav.side-navbar.show { transform: translateX(0) !important; top: 0 !important; } /* Mobile sidebar header - responsive positioning */ nav.side-navbar .sidebar-header { padding: 1.5rem 1rem 1.25rem 1rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; margin: 0 0 1rem 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border-radius: 0 20px 0 0 !important; position: relative !important; overflow: hidden !important; /* Position at absolute top - no spacing from top */ margin-top: 0 !important; padding-top: calc(max(env(safe-area-inset-top), 20px) + 1rem) !important; box-sizing: border-box !important; width: 100% !important; } nav.side-navbar .sidebar-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; } nav.side-navbar .sidebar-header .profile-avatar { margin: 0 auto 1rem auto !important; border: 3px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease !important; } nav.side-navbar .sidebar-header .profile-avatar:hover { transform: scale(1.05); border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important; } nav.side-navbar .sidebar-header .title { display: block !important; color: white !important; text-align: center !important; position: relative; z-index: 1; } nav.side-navbar .sidebar-header .title p { margin: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; font-weight: 600 !important; letter-spacing: 0.5px !important; } nav.side-navbar .sidebar-header:hover { background: rgba(255, 255, 255, 0.1) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } /* Legacy avatar styling removed - using profile-avatar class now */ /* Enhanced Mobile sidebar links - responsive */ nav.side-navbar .sidebar-link { padding: 1rem !important; margin: 0 0.75rem 0.5rem 0.75rem !important; border-left: none !important; border-bottom: none !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 0.95rem !important; font-weight: 500 !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(15px) !important; position: relative !important; overflow: hidden !important; box-sizing: border-box !important; max-width: calc(100% - 1.5rem) !important; } nav.side-navbar .sidebar-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } nav.side-navbar .sidebar-link:hover::before { left: 100%; } nav.side-navbar .sidebar-link:hover { background: rgba(255, 255, 255, 0.15) !important; color: white !important; transform: translateX(8px) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important; } nav.side-navbar .sidebar-link i { margin-right: 1rem !important; font-size: 1.3rem !important; width: 24px !important; text-align: center !important; transition: all 0.3s ease !important; color: rgba(255, 255, 255, 0.8) !important; } nav.side-navbar .sidebar-link:hover i { color: white !important; transform: scale(1.1) !important; } nav.side-navbar .sidebar-link span { display: block !important; font-weight: 600 !important; position: relative !important; z-index: 1 !important; } /* Enhanced Active mobile sidebar item */ nav.side-navbar .sidebar-item.active .sidebar-link { background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%) !important; color: white !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateX(4px) !important; } nav.side-navbar .sidebar-item.active .sidebar-link::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 70%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); border-radius: 0 2px 2px 0; } nav.side-navbar .sidebar-item.active .sidebar-link i { color: white !important; transform: scale(1.1) !important; } /* Adjust content area when sidebar is hidden */ .content-inner { margin-left: 0 !important; width: 100% !important; } /* Ensure page content uses full width */ .page-content { margin-left: 0 !important; } /* Enhanced backdrop when sidebar is open */ .sidebar-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; /* Use dynamic viewport height for better mobile support */ background: rgba(0, 0, 0, 0.6) !important; z-index: 1050 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .sidebar-backdrop.show { opacity: 1 !important; visibility: visible !important; } /* Ensure backdrop is clickable and covers everything */ .sidebar-backdrop { cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } /* Prevent body scroll and horizontal scrolling when sidebar is open */ body.sidebar-open { overflow: hidden; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; } /* Enhanced Mobile menu button styling */ .menu-btn { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 12px !important; padding: 12px 16px !important; min-width: 48px !important; min-height: 48px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; text-decoration: none !important; } .menu-btn span { display: block; width: 20px; height: 2px; background: rgba(255, 255, 255, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 1px; } .menu-btn:hover { background: rgba(255, 255, 255, 0.25) !important; transform: scale(1.08) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .menu-btn:hover span { background: white; transform: scaleY(1.2); } .menu-btn.active { background: rgba(255, 255, 255, 0.3) !important; transform: scale(1.05) !important; } .menu-btn.active span:nth-child(1) { transform: rotate(45deg) translateY(6px); } .menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translateY(-6px); } /* Mobile sidebar extras section styling - responsive */ nav.side-navbar .text-uppercase { margin: 0.25rem 0.75rem 0.5rem 0.75rem !important; padding: 0.4rem 0.8rem !important; background: rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; font-size: 0.7rem !important; letter-spacing: 0.8px !important; text-align: center !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-sizing: border-box !important; max-width: calc(100% - 1.5rem) !important; } /* Enhanced scrollbar for mobile sidebar */ nav.side-navbar::-webkit-scrollbar { width: 4px; } nav.side-navbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } nav.side-navbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 2px; } nav.side-navbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* Ensure navigation text doesn't break on mobile */ nav.side-navbar .sidebar-link { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Add subtle animation when sidebar opens */ nav.side-navbar.show .sidebar-item { animation: slideInFromLeft 0.3s ease-out; animation-fill-mode: both; } nav.side-navbar.show .sidebar-item:nth-child(1) { animation-delay: 0.1s; } nav.side-navbar.show .sidebar-item:nth-child(2) { animation-delay: 0.15s; } nav.side-navbar.show .sidebar-item:nth-child(3) { animation-delay: 0.2s; } nav.side-navbar.show .sidebar-item:nth-child(4) { animation-delay: 0.25s; } nav.side-navbar.show .sidebar-item:nth-child(5) { animation-delay: 0.3s; } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } } /* Keep the current collapsed behavior for tablets (768px - 1199px) */ @media (min-width: 768px) and (max-width: 1199.98px) { nav.side-navbar { min-width: 90px; max-width: 90px; margin-left: -90px; text-align: center; } nav.side-navbar.shrinked { margin-left: 0; } } /* Modern alert styling */ .alert { border-radius: 16px !important; border: none !important; padding: 1rem 1.5rem !important; margin-bottom: 1.5rem !important; font-weight: 500 !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .alert:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } /* Info alert */ .alert-info { background: linear-gradient(135deg, rgba(13, 202, 240, 0.1) 0%, rgba(10, 162, 192, 0.05) 100%) !important; color: var(--info-dark) !important; border-left: 4px solid var(--info-color) !important; } .alert-info i { color: var(--info-color) !important; margin-right: 0.5rem !important; } /* Success alert */ .alert-success { background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(21, 115, 71, 0.05) 100%) !important; color: var(--success-dark) !important; border-left: 4px solid var(--success-color) !important; } .alert-success i { color: var(--success-color) !important; margin-right: 0.5rem !important; } /* Warning alert */ .alert-warning { background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(224, 168, 0, 0.05) 100%) !important; color: var(--warning-dark) !important; border-left: 4px solid var(--warning-color) !important; } .alert-warning i { color: var(--warning-color) !important; margin-right: 0.5rem !important; } /* Danger alert */ .alert-danger { background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(200, 35, 51, 0.05) 100%) !important; color: var(--danger-dark) !important; border-left: 4px solid var(--danger-color) !important; } .alert-danger i { color: var(--danger-color) !important; margin-right: 0.5rem !important; } /* Primary alert */ .alert-primary { background: linear-gradient(135deg, var(--primary-rgba-10) 0%, var(--primary-dark-rgba-05) 100%) !important; color: var(--primary-dark) !important; border-left: 4px solid var(--primary-color) !important; } .alert-primary i { color: var(--primary-color) !important; margin-right: 0.5rem !important; } /* Secondary alert */ .alert-secondary { background: linear-gradient(135deg, rgba(108, 117, 125, 0.1) 0%, rgba(73, 80, 87, 0.05) 100%) !important; color: var(--text-primary) !important; border-left: 4px solid var(--text-secondary) !important; } .alert-secondary i { color: var(--text-secondary) !important; margin-right: 0.5rem !important; } /* Alert close button styling */ .alert .btn-close { background: none !important; border: none !important; padding: 0.5rem !important; margin: -0.5rem -0.5rem -0.5rem auto !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; opacity: 0.7 !important; } .alert .btn-close:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.1) !important; transform: scale(1.1) !important; } /* Alert with dismissible styling */ .alert-dismissible { padding-right: 3rem !important; } /* Alert links */ .alert a { color: inherit !important; text-decoration: underline !important; font-weight: 600 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .alert a:hover { opacity: 0.8 !important; text-decoration: none !important; } /* Alert strong text */ .alert strong { font-weight: 700 !important; color: inherit !important; } /* Modern Dashboard Gradient Backgrounds */ .bg-gradient-primary { background: var(--gradient-primary) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(20, 15, 84, 0.2) !important; } .bg-gradient-success { background: var(--gradient-success) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important; } .bg-gradient-info { background: var(--gradient-info) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2) !important; } .bg-gradient-warning { background: var(--gradient-warning) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important; } .bg-gradient-danger { background: var(--gradient-danger) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2) !important; } /* Modern Card Enhancements */ .card.bg-gradient-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(20, 15, 84, 0.3) !important; transition: all 0.3s ease !important; } .card.bg-gradient-success:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important; transition: all 0.3s ease !important; } .card.bg-gradient-info:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3) !important; transition: all 0.3s ease !important; } .card.bg-gradient-warning:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important; transition: all 0.3s ease !important; } /* Modern button styles moved to universal section */ .btn-success { background: var(--gradient-success) !important; border: none !important; color: white !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important; transition: all 0.3s ease !important; } .btn-success:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important; } .btn-info { background: var(--gradient-info) !important; border: none !important; color: white !important; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2) !important; transition: all 0.3s ease !important; } .btn-info:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3) !important; } .btn-warning { background: var(--gradient-warning) !important; border: none !important; color: white !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important; transition: all 0.3s ease !important; } .btn-warning:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important; } .btn-outline-success { border: 2px solid var(--success-color) !important; color: var(--success-color) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-outline-success:hover { background: var(--success-color) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important; text-decoration: none !important; } .btn-outline-info { border: 2px solid var(--bs-info) !important; color: var(--bs-info) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-outline-info:hover { background: var(--bs-info) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3) !important; text-decoration: none !important; } .btn-outline-warning { border: 2px solid var(--warning-color) !important; color: var(--warning-color) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-outline-warning:hover { background: var(--warning-color) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3) !important; text-decoration: none !important; } .btn-outline-danger { border: 2px solid var(--danger-color) !important; color: var(--danger-color) !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; text-decoration: none !important; } .btn-outline-danger:hover { background: var(--danger-color) !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important; text-decoration: none !important; } /* Outline-secondary styling handled by universal button section */ /* Dashboard button hover effects */ .dashboard-btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dashboard-btn:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } /* Modern Text Color Utilities */ .text-primary { color: var(--primary-500) !important; } .text-primary-light { color: var(--primary-400) !important; } .text-primary-dark { color: var(--primary-600) !important; } .text-accent-purple { color: var(--accent-purple) !important; } .text-accent-blue { color: var(--accent-blue) !important; } .text-accent-indigo { color: var(--accent-indigo) !important; } /* Modern Icon Enhancements */ .fas.text-primary, .far.text-primary, .fab.text-primary { color: var(--primary-500) !important; transition: color 0.3s ease !important; } .fas.text-primary:hover, .far.text-primary:hover, .fab.text-primary:hover { color: var(--primary-400) !important; } /* Modern Card Header Styles */ .card-header.bg-light { background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%) !important; border-bottom: 1px solid var(--neutral-200) !important; } /* Dashboard table hover effects */ .dashboard-table-hover tbody tr:hover { background-color: rgba(20, 15, 84, 0.05) !important; transition: background-color 0.3s ease !important; } /* Modern Shadow Utilities */ .shadow-primary { box-shadow: 0 4px 15px rgba(20, 15, 84, 0.2) !important; } .shadow-primary-lg { box-shadow: 0 8px 25px rgba(20, 15, 84, 0.3) !important; } .shadow-success { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important; } .shadow-info { box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2) !important; } .shadow-warning { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important; } /* Modern Border Utilities */ .border-primary { border-color: var(--primary-500) !important; } .border-primary-light { border-color: var(--primary-300) !important; } .border-primary-dark { border-color: var(--primary-600) !important; } /* Modern Card Enhancements */ /* Override conflicting card styles - use main card definition above */ /* Dashboard list group hover effects */ .dashboard-list-group-item { transition: background-color 0.2s ease-in-out; } .dashboard-list-group-item:hover { background-color: rgba(20, 15, 84, 0.05) !important; } /* Modern Focus States for Accessibility */ .btn:focus, .btn:focus-visible { outline: 2px solid var(--primary-400) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(20, 15, 84, 0.1) !important; } /* Focus styles handled by universal button section */ /* Modern Link Styles */ a:not(.btn):not(.btn-*):not([class*="btn-"]) { color: var(--primary-500) !important; text-decoration: none !important; transition: color 0.3s ease !important; } a:not(.btn):not(.btn-*):not([class*="btn-"]):hover { color: var(--primary-400) !important; text-decoration: underline !important; } /* Ensure buttons never have underlines */ .btn, .btn *, [class*="btn-"], [class*="btn-"] * { text-decoration: none !important; } .btn:hover, .btn:hover *, [class*="btn-"]:hover, [class*="btn-"]:hover * { text-decoration: none !important; } /* Modern Form Enhancements */ .form-control:focus { border-color: var(--primary-400) !important; box-shadow: 0 0 0 0.2rem rgba(20, 15, 84, 0.1) !important; } .form-select:focus { border-color: var(--primary-400) !important; box-shadow: 0 0 0 0.2rem rgba(20, 15, 84, 0.1) !important; } /* Sound notification (optional) */ @keyframes soundWave { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .sound-wave { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: 2px solid var(--danger-color); border-radius: 50%; animation: soundWave 1s ease-out; } /* ===== APPLE GLASS ERROR MONITORING ===== */ /* Main Error Monitoring Container */ .error-monitoring-glass { background: var(--bg-white); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: visible; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 2rem; } .error-monitoring-glass.has-critical { background: linear-gradient(135deg, rgba(220, 53, 69, 0.02) 0%, rgba(220, 53, 69, 0.01) 50%, rgba(220, 53, 69, 0.02) 100%); border: 1px solid rgba(220, 53, 69, 0.15); box-shadow: 0 8px 25px rgba(220, 53, 69, 0.08), 0 4px 10px rgba(220, 53, 69, 0.05), 0 0 0 1px rgba(220, 53, 69, 0.1); } .error-monitoring-glass.has-error { background: linear-gradient(135deg, rgba(253, 126, 20, 0.02) 0%, rgba(253, 126, 20, 0.01) 50%, rgba(253, 126, 20, 0.02) 100%); border: 1px solid rgba(253, 126, 20, 0.15); box-shadow: 0 8px 25px rgba(253, 126, 20, 0.08), 0 4px 10px rgba(253, 126, 20, 0.05), 0 0 0 1px rgba(253, 126, 20, 0.1); } .error-monitoring-glass.has-warning { background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(255, 193, 7, 0.01) 50%, rgba(255, 193, 7, 0.02) 100%); border: 1px solid rgba(255, 193, 7, 0.15); box-shadow: 0 8px 25px rgba(255, 193, 7, 0.08), 0 4px 10px rgba(255, 193, 7, 0.05), 0 0 0 1px rgba(255, 193, 7, 0.1); } /* Removed error-monitoring-glass::before pseudo-element to eliminate top line on hover */ /* Removed error-monitoring-glass state-specific ::before rules since the pseudo-element has been removed */ .error-monitoring-glass:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08); border-color: var(--primary-rgba-15); } /* Removed error-monitoring-glass hover ::before rule since the pseudo-element has been removed */ /* Modern Header */ .glass-header { background: var(--gradient-primary); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 1.25rem 1.5rem; position: relative; border-top-left-radius: 16px; border-top-right-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dynamic header colors based on error state */ .error-monitoring-glass.has-critical .glass-header { background: var(--gradient-danger); } .error-monitoring-glass.has-error .glass-header { background: linear-gradient(135deg, var(--orange-color) 0%, var(--orange-dark) 100%); } .error-monitoring-glass.has-warning .glass-header { background: var(--gradient-warning); } .header-content { display: flex; align-items: center; gap: 1rem; } .header-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px var(--primary-rgba-30); position: relative; overflow: hidden; } .header-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); animation: shimmer 3s ease-in-out infinite; } .header-icon i { color: white; font-size: 1.2rem; z-index: 1; position: relative; } .header-text h5 { color: white; font-weight: 700; margin: 0; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .header-text small { color: rgba(255, 255, 255, 0.8); font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Status Indicator */ .status-indicator { position: relative; margin-left: auto; } .status-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .status-critical { background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(200, 35, 51, 0.05) 100%); border-color: rgba(220, 53, 69, 0.3); color: var(--danger-color); } .status-healthy { background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(21, 115, 71, 0.05) 100%); border-color: rgba(25, 135, 84, 0.3); color: var(--success-color); } .status-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .status-critical .status-icon { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4); } .status-healthy .status-icon { background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%); box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4); } .status-icon i { color: white; font-size: 0.75rem; } .status-text { font-weight: 600; font-size: 0.8rem; position: relative; z-index: 1; } /* Modern Body */ .glass-body { padding: 1.5rem; position: relative; } /* Error Statistics Grid */ .error-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; position: relative; } .stat-card { background: var(--bg-white); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: 0.75rem; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Removed stat-card::before pseudo-element to eliminate top line on hover */ .stat-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08); border-color: var(--primary-rgba-15); transform: translateY(-2px); } /* Removed stat-card hover ::before rule since the pseudo-element has been removed */ .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .stat-critical .stat-icon { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%); } .stat-warning .stat-icon { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%); } .stat-info .stat-icon { background: linear-gradient(135deg, var(--info-alt-darker) 0%, var(--info-alt) 100%); } .stat-error .stat-icon { background: linear-gradient(135deg, var(--orange-color) 0%, var(--orange-dark) 100%); } .stat-icon i { color: white; font-size: 1.2rem; } .stat-content { flex: 1; position: relative; z-index: 1; } .stat-number { font-size: 1.5rem; font-weight: 800; color: var(--text-secondary); line-height: 1; margin-bottom: 0.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .stat-number.active { color: var(--text-dark); } .stat-label { color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Error Stream Container */ .error-stream-container { background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; overflow: hidden; margin-top: 1rem; position: relative; } .stream-header { background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-gray) 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; } .stream-header h6 { color: var(--text-dark); font-weight: 700; margin: 0; font-size: 0.9rem; } .stream-indicator { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; } .pulse-dot { width: 8px; height: 8px; background: var(--success-color); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } /* Error Stream */ .error-stream { max-height: 300px; overflow-y: auto; padding: 0.5rem; position: relative; } .error-stream::-webkit-scrollbar { width: 6px; } .error-stream::-webkit-scrollbar-track { background: var(--bg-gray); border-radius: 3px; } .error-stream::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; } .error-stream::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } /* Scroll indicator for error stream */ .error-stream::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(transparent, var(--bg-light)); pointer-events: none; z-index: 1; } /* Show scroll indicator only when content is scrollable */ .error-stream.scrollable::after { display: block; } .error-stream:not(.scrollable)::after { display: none; } /* Scroll indicator text */ .scroll-indicator { position: absolute; bottom: 8px; right: 12px; background: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .error-stream.scrollable+.scroll-indicator { opacity: 1; } /* Error Item */ .error-item { background: var(--bg-white); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem; display: flex; align-items: flex-start; gap: 0.75rem; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: slideInUp 0.5s ease-out; } .error-item.clickable-row { cursor: pointer; } .error-item.clickable-row:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Critical error hover */ .error-item.clickable-row[data-severity="4"]:hover { background: rgba(220, 53, 69, 0.05); border-color: rgba(220, 53, 69, 0.2); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15); } /* Error hover */ .error-item.clickable-row[data-severity="3"]:hover { background: rgba(220, 53, 69, 0.05); border-color: rgba(220, 53, 69, 0.2); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15); } /* Warning error hover */ .error-item.clickable-row[data-severity="2"]:hover { background: rgba(255, 193, 7, 0.05); border-color: rgba(255, 193, 7, 0.2); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15); } /* Info error hover */ .error-item.clickable-row[data-severity="1"]:hover { background: rgba(23, 162, 184, 0.05); border-color: rgba(23, 162, 184, 0.2); box-shadow: 0 4px 12px rgba(23, 162, 184, 0.15); } /* Debug error hover */ .error-item.clickable-row[data-severity="0"]:hover { background: rgba(108, 117, 125, 0.05); border-color: rgba(108, 117, 125, 0.2); box-shadow: 0 4px 12px rgba(108, 117, 125, 0.15); } .error-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .error-item:not(.clickable-row):hover { border-color: var(--primary-rgba-30); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transform: none; } .error-item:hover::before { transform: scaleX(0); } .error-item:last-child { margin-bottom: 0; } /* Severity Indicator */ .error-severity { flex-shrink: 0; } .severity-indicator { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .severity-indicator.critical { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%); } .severity-indicator.error { background: linear-gradient(135deg, var(--orange-color) 0%, var(--orange-dark) 100%); } .severity-indicator.warning { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%); } .severity-indicator.info { background: linear-gradient(135deg, var(--info-alt) 0%, var(--info-alt-darker) 100%); } .severity-indicator i { color: white; font-size: 1.2rem; } /* Error Content */ .error-content { flex: 1; position: relative; z-index: 1; padding: 4px 0; } .error-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .error-code { flex-shrink: 0; } .code-badge { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); color: var(--text-dark); padding: 6px 12px; border-radius: 12px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.85rem; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .error-severity-label { flex-shrink: 0; } .severity-badge { padding: 0.25rem 0.75rem; border-radius: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid; } .severity-critical { background: rgba(220, 53, 69, 0.1); color: var(--danger-color); border-color: rgba(220, 53, 69, 0.3); } .severity-error { background: rgba(253, 126, 20, 0.1); color: var(--orange-color); border-color: rgba(253, 126, 20, 0.3); } .severity-warning { background: rgba(255, 193, 7, 0.1); color: var(--warning-color); border-color: rgba(255, 193, 7, 0.3); } .severity-info { background: rgba(23, 162, 184, 0.1); color: var(--info-alt); border-color: rgba(23, 162, 184, 0.3); } .error-time { color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); padding: 4px 8px; border-radius: 12px; backdrop-filter: blur(10px); } .error-message { color: var(--text-dark); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; font-weight: 500; background: rgba(255, 255, 255, 0.05); padding: 8px 12px; border-radius: 6px; border-left: 3px solid rgba(255, 255, 255, 0.2); } .error-device { color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; } .error-description { color: var(--text-dark); font-size: 0.9rem; line-height: 1.4; } .error-status { display: flex; align-items: center; } /* Healthy State Container */ .healthy-state-container { background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; margin-top: 1rem; padding: 2rem; display: flex; align-items: center; justify-content: center; } /* No Errors State */ .no-errors-state { text-align: center; padding: 1rem; color: var(--text-secondary); } .no-errors-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 12px 30px rgba(25, 135, 84, 0.3); } .no-errors-icon i { color: white; font-size: 2rem; } .no-errors-text h6 { color: var(--text-dark); font-weight: 700; margin-bottom: 0.5rem; font-size: 1.1rem; } .no-errors-text p { color: var(--text-secondary); margin: 0; font-size: 0.9rem; } /* Animations */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes criticalPulse { 0%, 100% { background: linear-gradient(135deg, var(--danger-rgba-08) 0%, var(--danger-rgba-05) 50%, var(--danger-rgba-08) 100%); box-shadow: 0 8px 32px var(--danger-rgba-15), 0 4px 16px var(--danger-rgba-10), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 var(--danger-rgba-10); } 50% { background: linear-gradient(135deg, var(--danger-rgba-15) 0%, var(--danger-rgba-12) 50%, var(--danger-rgba-15) 100%); box-shadow: 0 8px 40px var(--danger-rgba-25), 0 6px 20px var(--danger-rgba-20), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 var(--danger-rgba-20); } } /* Responsive Design */ @media (max-width: 768px) { .error-stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .stat-card { padding: 1rem; } .stat-icon { width: 48px; height: 48px; } .stat-number { font-size: 1.5rem; } .glass-header { padding: 1rem 1.5rem; } .glass-body { padding: 1.5rem; } .error-item { padding: 1rem; } .error-header { flex-wrap: wrap; gap: 0.5rem; } .error-time { margin-left: 0; width: 100% !important; } } /* ===== MODERN OVERRIDES FOR EXISTING CLASSES ===== */ /* Override existing Bootstrap classes with modern colors */ .bg-primary { background: var(--gradient-primary) !important; color: white !important; } .bg-success { background: var(--gradient-success) !important; color: white !important; } .bg-warning { background: var(--gradient-warning) !important; color: white !important; } .bg-danger { background: var(--gradient-danger) !important; color: white !important; } .bg-info { background: var(--gradient-info) !important; color: white !important; } .bg-light { background: var(--primary-50) !important; color: var(--primary-700) !important; } /* Text color overrides */ .text-primary { color: var(--primary-500) !important; } .text-success { color: var(--success-color) !important; } .text-warning { color: var(--warning-color) !important; } .text-danger { color: var(--danger-color) !important; } .text-info { color: var(--info-color) !important; } /* Button styling handled by universal button section */ .btn-success { background: var(--gradient-success) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: var(--shadow-success) !important; } .btn-success:hover { transform: translateY(-2px) !important; color: white !important; } .btn-warning { background: var(--gradient-warning) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: var(--shadow-warning) !important; } .btn-warning:hover { transform: translateY(-2px) !important; color: white !important; } .btn-danger { background: var(--gradient-danger) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: var(--shadow-danger) !important; } .btn-danger:hover { transform: translateY(-2px) !important; color: white !important; } .btn-info { background: var(--gradient-info) !important; border: none !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: var(--shadow-info) !important; } .btn-info:hover { transform: translateY(-2px) !important; color: white !important; } /* Card overrides */ /* Override conflicting card styles - use main card definition above */ /* Shadow overrides */ .shadow-sm { box-shadow: var(--shadow-primary) !important; } .shadow { box-shadow: var(--shadow-primary-lg) !important; } /* Gradient background overrides */ .bg-gradient-primary { background: var(--gradient-primary) !important; } .bg-gradient-success { background: var(--gradient-success) !important; } .bg-gradient-warning { background: var(--gradient-warning) !important; } .bg-gradient-danger { background: var(--gradient-danger) !important; } .bg-gradient-info { background: var(--gradient-info) !important; } /* ===== USER DROPDOWN IN SIDEBAR ===== */ .sidebar-header.dropdown { cursor: pointer; transition: all 0.2s ease; border-radius: 0.75rem; margin: 0.5rem; padding: 1rem 0.75rem !important; position: relative; overflow: visible; } /* Ensure sidebar doesn't clip dropdown */ .side-navbar { overflow: visible !important; } .side-navbar .sidebar-header { overflow: visible !important; } .sidebar-header.dropdown:hover { background-color: var(--primary-50); transform: translateY(-1px); } .sidebar-header.dropdown:focus { box-shadow: 0 0 0 0.2rem rgba(20, 15, 84, 0.25); outline: none; background-color: var(--primary-50); } .sidebar-header.dropdown[aria-expanded="true"] { background-color: var(--primary-50); z-index: 10000 !important; position: relative; } .sidebar-header.dropdown .fas.fa-chevron-down { font-size: 0.75rem; transition: transform 0.2s ease; color: var(--neutral-400); margin-left: auto; } .sidebar-header.dropdown:hover .fas.fa-chevron-down, .sidebar-header.dropdown:focus .fas.fa-chevron-down { color: var(--primary-color); } .sidebar-header.dropdown[aria-expanded="true"] .fas.fa-chevron-down { transform: rotate(180deg); color: var(--primary-color); } .sidebar-header .dropdown-menu { border: none; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2); border-radius: 1rem; padding: 0.75rem 0; margin-top: 0; margin-left: 0.5rem; min-width: 220px; background: var(--bg-white); border: 1px solid var(--neutral-200); z-index: 9999 !important; position: absolute !important; top: 0; left: 100%; transform: none; /* Ensure dropright positioning */ right: auto; bottom: auto; } .sidebar-header .dropdown-menu.dropdown-menu-end { right: auto; left: 100%; margin-left: 0.5rem; margin-right: 0; } .sidebar-header .dropdown-item { padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--neutral-700); transition: all 0.3s ease; display: flex; align-items: center; font-weight: 500; border-radius: 0.5rem; margin: 0.25rem 0.75rem; position: relative; z-index: 10001; border: none; background: none; width: calc(100% - 1.5rem); text-decoration: none; cursor: pointer; pointer-events: auto; /* Ensure links are clickable */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .sidebar-header .dropdown-item:hover { background-color: var(--primary-50); color: var(--primary-color); transform: translateX(6px); box-shadow: 0 0.25rem 0.75rem rgba(20, 15, 84, 0.15); text-decoration: none; } .sidebar-header .dropdown-item:focus { background-color: var(--primary-50); color: var(--primary-color); outline: 2px solid var(--primary-color); outline-offset: 2px; text-decoration: none; } .sidebar-header .dropdown-item:active { background-color: var(--primary-100); color: var(--primary-dark); transform: translateX(3px); } .sidebar-header .dropdown-item i { margin-right: 1rem; width: 18px; text-align: center; font-size: 0.9rem; opacity: 0.8; transition: all 0.3s ease; } .sidebar-header .dropdown-item:hover i { opacity: 1; transform: scale(1.1); } .sidebar-header .dropdown-divider { margin: 0.75rem 1rem; border-color: var(--neutral-200); border-width: 1px; opacity: 0.6; } /* Animation for dropdown appearance */ .sidebar-header .dropdown-menu.show { animation: dropdownFadeIn 0.2s ease-out; z-index: 9999 !important; position: absolute !important; } /* Ensure dropdown stays on top when shown */ .sidebar-header .dropdown-menu.show, .sidebar-header .dropdown-menu[data-bs-popper] { z-index: 9999 !important; position: absolute !important; display: block !important; } /* Force dropdown to be visible and clickable */ .sidebar-header .dropdown-menu { display: none; } .sidebar-header .dropdown-menu.show { display: block !important; opacity: 1 !important; visibility: visible !important; } /* Add subtle backdrop blur effect */ .sidebar-header .dropdown-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 1rem; z-index: -1; pointer-events: none; /* Ensure it doesn't block clicks */ } /* Enhanced shadow for better depth */ .sidebar-header .dropdown-menu { box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } /* ===== MEASUREMENT PAGES ENHANCEMENTS ===== */ /* Measurement Overview Grid */ .measurement-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .measurement-stat-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border: 1px solid var(--primary-rgba-10); display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; } .measurement-stat-card:hover { box-shadow: 0 8px 25px var(--primary-rgba-15); transform: translateY(-2px); } .measurement-stat-card .stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; } .measurement-stat-card .stat-content { flex: 1; } .measurement-stat-card .stat-content h3 { margin: 0; font-size: 1.75rem; font-weight: 700; } .measurement-stat-card .stat-content p { margin: 0; font-size: 0.9rem; opacity: 0.8; } /* Measurement Filters Grid */ .measurement-filters-grid { margin-bottom: 1.5rem; } .filter-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border: 1px solid var(--primary-rgba-10); overflow: hidden; } .filter-header { background: var(--gradient-primary); color: white; padding: 1rem 1.5rem; border: none; } .filter-content { padding: 1.5rem; } .filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end; } .filter-group { display: flex; flex-direction: column; gap: 0.5rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: end; } .filter-actions .btn { white-space: nowrap; } /* Dashboard-style Measurements Grid */ .measurements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; width: 100% !important; } .measurement-card-grid { background: white; border: 1px solid var(--primary-rgba-10); border-radius: 8px; padding: 1rem; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 0.75rem; position: relative; overflow: hidden; } .measurement-card-grid::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s ease; } .measurement-card-grid:hover { box-shadow: 0 4px 15px var(--primary-rgba-15); transform: translateY(-2px); } .measurement-card-grid:hover::before { opacity: 1; } .measurement-header-grid { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; } .measurement-title-grid h6 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem 0; color: var(--primary-color); line-height: 1.2; } .measurement-type-badge { background: var(--primary-rgba-10); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; display: inline-block; } .measurement-value-grid { text-align: center; padding: 0.5rem 0; border-bottom: 1px solid var(--primary-rgba-05); margin-bottom: 0.5rem; } .value-display { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.25rem; line-height: 1.2; } .value-timestamp { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .measurement-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; } .stat-item-grid { text-align: center; padding: 0.25rem; border-radius: 4px; background: var(--primary-rgba-05); transition: background-color 0.2s ease; } .stat-item-grid:hover { background: var(--primary-rgba-10); } .stat-value-grid { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.125rem; line-height: 1.2; } .stat-label-grid { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .measurement-footer-grid { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--primary-rgba-05); margin-top: auto; } .measurement-footer-grid .badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; } .measurement-footer-grid .btn { font-size: 0.8rem; padding: 0.25rem 0.75rem; } /* Modern Charts Section */ .modern-charts-section { margin-top: 2rem; position: relative; transition: all 0.3s ease; } .charts-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .charts-header-content h2 { margin: 0; color: var(--primary-color); font-size: 1.75rem; font-weight: 600; } .charts-subtitle { color: var(--text-muted); margin: 0.25rem 0 0 0; font-size: 0.95rem; } .charts-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); flex-wrap: nowrap; } .time-range-selector { min-width: 240px; max-width: 300px; } .control-label { display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.8px; } .modern-select { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 8px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.875rem; font-weight: 500; color: #374151; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px; height: 44px; /* Match button height */ } .modern-select:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: #ffffff; } .modern-select:hover { border-color: #3B82F6; background: #ffffff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .time-range-info { margin-top: 0.5rem; } .time-range-info small { font-size: 0.75rem; color: #6b7280; font-weight: 500; } .responsive-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .modern-chart-card { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .modern-chart-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), #28a745, #17a2b8); opacity: 0; transition: opacity 0.3s ease; } .modern-chart-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: translateY(-4px); border-color: rgba(0, 0, 0, 0.12); } .modern-chart-card:hover::before { opacity: 1; } .chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; } .chart-info { flex: 1; min-width: 0; } .chart-title { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; color: var(--primary-color); display: flex; align-items: center; gap: 0.5rem; } .chart-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chart-type-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 12px; font-weight: 500; } .badge-primary { background: var(--primary-rgba-10); color: var(--primary-color); } .chart-controls { display: flex; align-items: center; gap: 0.75rem; } .chart-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } .status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s infinite; } .status-loading { background: #ffc107; } .status-connected { background: #28a745; } .chart-menu-btn { padding: 0.25rem 0.5rem; color: var(--text-muted); font-size: 0.875rem; } .chart-menu-btn:hover { color: var(--primary-color); } .chart-content { position: relative; } .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; padding: 1rem; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.05); } .stat-item { text-align: center; padding: 0.5rem; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; display: block; text-decoration: none; color: inherit; } .stat-item:hover { background: rgba(6, 13, 71, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .stat-item:focus-visible { outline: 2px solid rgba(6, 13, 71, 0.35); outline-offset: 2px; } .stat-label { display: block; font-size: 0.7rem; color: #6c757d; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.5rem; opacity: 0.8; } .stat-value { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .chart-container { position: relative; height: 300px; margin-bottom: 1rem; } .chart-wrapper { position: relative; height: 100%; cursor: pointer; transition: all 0.2s ease; } .chart-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; border-radius: 8px; } .chart-overlay.hidden { opacity: 0; pointer-events: none; } .loading-spinner { text-align: center; color: var(--text-muted); } .spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; } .chart-focus-indicator { position: absolute; top: 0.75rem; right: 0.75rem; background: linear-gradient(135deg, #3B82F6, #1E40AF); color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 500; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); backdrop-filter: blur(4px); } .chart-wrapper:hover .chart-focus-indicator { opacity: 1; transform: translateY(-2px); } .single-chart-view { position: relative; height: 70vh; } .single-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .single-chart-content { height: calc(100% - 60px); position: relative; } .single-chart-content canvas { width: 100% !important; height: 100% !important; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive Design for Measurement Grids */ @media (max-width: 1200px) { .measurement-overview-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .measurements-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .responsive-charts-grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1rem; } .charts-controls { gap: 1.5rem; padding: 1rem; } .time-range-selector { min-width: 200px; max-width: 250px; } } @media (max-width: 1000px) { .measurements-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 900px) { .measurements-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } } @media (max-width: 900px) { .responsive-charts-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .chart-container { height: 260px; } .chart-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem; } .stat-value { font-size: 1.1rem; } .charts-header { flex-direction: column; align-items: stretch; gap: 1rem; } .charts-controls { justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .time-range-selector { min-width: 180px; flex: 1; } } @media (max-width: 768px) { .measurement-overview-grid { grid-template-columns: 1fr; gap: 1rem; } .responsive-charts-grid { grid-template-columns: 1fr; gap: 1rem; } .modern-chart-card { padding: 1rem; border-radius: 8px; } .chart-card-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .chart-info { width: 100%; } .chart-title { font-size: 1rem; flex-wrap: wrap; } .chart-title-text { white-space: normal; overflow: visible; text-overflow: unset; } .chart-controls { width: 100%; justify-content: space-between; } .chart-container { height: 240px; } .chart-stats { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.75rem; } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .stat-item:hover { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); transform: none; /* Disable transform on mobile */ } .stat-label { margin-bottom: 0; text-align: left; font-size: 0.75rem; font-weight: 600; } .stat-value { text-align: right; font-size: 1.1rem; font-weight: 700; } .charts-header-content h2 { font-size: 1.5rem; } .charts-controls { justify-content: center; padding: 1rem; } .time-range-selector { min-width: unset; width: 100%; max-width: 400px; } .single-chart-view { height: 50vh; } .chart-focus-indicator { display: none; } } @media (max-width: 576px) { .measurement-overview-grid { gap: 0.75rem; } .measurement-stat-card { padding: 1rem; gap: 0.75rem; } .measurement-stat-card .stat-icon { width: 40px; height: 40px; } .measurement-stat-card .stat-content h3 { font-size: 1.5rem; } .filter-form { grid-template-columns: 1fr; gap: 1rem; } .filter-actions { justify-content: stretch; } .filter-actions .btn { flex: 1; } .measurements-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .measurement-card-grid { padding: 0.75rem; } .measurement-stats-grid { gap: 0.25rem; } .stat-item-grid { padding: 0.2rem; } .value-display { font-size: 1.25rem; } } @media (max-width: 576px) { .measurement-overview-grid { gap: 0.75rem; } .measurement-stat-card { padding: 0.75rem; flex-direction: column; text-align: center; gap: 0.5rem; } .measurement-stat-card .stat-icon { margin: 0 auto; } .filter-content { padding: 1rem; } .measurements-grid { grid-template-columns: 1fr; gap: 0.75rem; } .measurement-card-grid { padding: 0.5rem; } .measurement-title-grid h6 { font-size: 0.9rem; } .value-display { font-size: 1.1rem; } .stat-value-grid { font-size: 0.8rem; } .stat-label-grid { font-size: 0.6rem; } .measurement-footer-grid .btn { font-size: 0.75rem; padding: 0.2rem 0.5rem; } /* Chart responsiveness for small mobile */ .chart-container { padding: 12px; min-height: 160px; } .chart-title { font-size: 0.85rem; margin-bottom: 10px; } .chart-wrapper { height: 200px; min-height: 160px; } .chart-item-grid { padding: 0.75rem; } } @media (max-width: 480px) { .measurements-grid { grid-template-columns: 1fr; gap: 0.5rem; } .measurement-card { margin: 0; } .measurement-header { padding: 0.75rem; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; } .measurement-icon { width: 40px; height: 40px; } .measurement-icon i { font-size: 1rem; } .measurement-info { width: 100% !important; } .measurement-card .measurement-item { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; margin-bottom: 0.75rem; } .measurement-card .measurement-label { margin-right: 0; font-size: 0.75rem; } .measurement-card .measurement-value { text-align: center; font-size: 0.85rem; } .measurement-actions { padding: 0 0.75rem 0.75rem 0.75rem; } .measurement-actions .btn { width: 100% !important; font-size: 0.8rem; padding: 0.4rem 0.75rem; } /* Ultra-mobile chart responsiveness */ .chart-container { padding: 10px; min-height: 140px; } .chart-title { font-size: 0.8rem; margin-bottom: 8px; } .chart-wrapper { height: 180px; min-height: 140px; } .chart-item-grid { padding: 0.5rem; } /* Mobile-optimized time range selector */ .compact-trends-card .card-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .compact-trends-card .card-header .d-flex { width: 100% !important; justify-content: space-between; } .compact-trends-card .form-select-sm { font-size: 0.8rem; padding: 0.25rem 0.5rem; } } .measurement-types-card .card-header { background: var(--gradient-primary-lighter) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .measurement-card { border: 1px solid var(--primary-light-rgba-20) !important; transition: box-shadow 0.2s ease; position: relative; } .measurement-card:hover { box-shadow: 0 4px 15px var(--primary-rgba-15); } .measurement-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--primary-rgba-10); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .measurement-value { font-weight: 700; } /* Measurement Table */ .measurement-table-card { border: 1px solid var(--primary-dark-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-dark-rgba-15) !important; } .measurement-table-card .card-header { background: var(--gradient-primary-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .measurement-table { border-radius: 12px; overflow: hidden; } .measurement-table thead { background: var(--gradient-primary) !important; } .measurement-table thead th { border: none !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.875rem; } .measurement-row { transition: background-color 0.2s ease; } .measurement-row:hover { background: var(--primary-rgba-05) !important; } .measurement-type-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--primary-rgba-10); display: flex; align-items: center; justify-content: center; } .measurement-value-code { background: var(--primary-rgba-10) !important; color: var(--primary-color) !important; padding: 0.4rem 0.6rem; border-radius: 6px; font-weight: 600; border: 1px solid var(--primary-rgba-20); } /* Measurement Type Detail Specific */ .measurement-type-overview-card { border: 1px solid var(--primary-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-rgba-15) !important; } .measurement-type-overview-card .card-header { background: var(--gradient-primary) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .measurement-info-card { background: #f8f9fa; border-radius: 8px; padding: 1rem; border: 1px solid #e9ecef; } .measurement-stat-box { border-radius: 8px; padding: 1rem 0.75rem; text-align: center; transition: box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .measurement-stat-box:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .measurement-stat-box .stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* Measurement Stats */ .measurement-stats-card { border: 1px solid var(--primary-light-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-light-rgba-15) !important; } .measurement-stats-card .card-header { background: var(--gradient-primary-light) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Latest Value Display */ .latest-value-card { border: 1px solid var(--primary-dark-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-dark-rgba-15) !important; } .latest-value-card .card-header { background: var(--gradient-primary-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .latest-value-display { padding: 1.5rem; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .value-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-rgba-10); display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* Measurement History */ .measurement-history-card { border: 1px solid var(--primary-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-rgba-15) !important; } .measurement-history-card .card-header { background: var(--gradient-primary) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .measurement-history-table { border-radius: 12px; overflow: hidden; } .measurement-history-table thead { background: var(--gradient-primary) !important; } .measurement-history-table thead th { border: none !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.875rem; } .measurement-history-row { transition: background-color 0.2s ease; } .measurement-history-row:hover { background: var(--primary-rgba-05) !important; } .measurement-history-row .value-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--primary-rgba-10); display: flex; align-items: center; justify-content: center; } /* Dashboard Specific Enhancements */ .device-overview-card { border: 1px solid var(--primary-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-rgba-15) !important; } .device-overview-card .card-header { background: var(--gradient-primary) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .device-stat-card { padding: 1.5rem 1rem; border-radius: 12px; transition: box-shadow 0.2s ease; position: relative; } .device-stat-card:hover { box-shadow: 0 4px 15px var(--primary-rgba-15); } .device-stat-card .stat-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; position: relative; z-index: 1; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* Live Measurement Card */ .live-measurement-card { border: 1px solid var(--primary-light-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-light-rgba-15) !important; } .live-measurement-card .card-header { background: var(--gradient-primary-light) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .measurement-dashboard-card { border: 1px solid var(--primary-light-rgba-20) !important; transition: box-shadow 0.2s ease; position: relative; } .measurement-dashboard-card:hover { box-shadow: 0 4px 15px var(--primary-rgba-15); } .measurement-dashboard-card .status-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Activity Feed */ .activity-feed-card { border: 1px solid var(--primary-lighter-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-lighter-rgba-15) !important; } .activity-feed-card .card-header { background: var(--gradient-primary-lighter) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .activity-feed { background: var(--primary-rgba-05); } .activity-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; position: relative; } .activity-item:hover { background: var(--primary-rgba-10); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .activity-content { flex: 1; } .activity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .activity-time { font-size: 12px; color: var(--text-secondary); margin-left: auto; } .activity-value code { background: var(--primary-rgba-10); color: var(--primary-color); padding: 4px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; border: 1px solid var(--primary-rgba-20); } /* Data Trends */ .data-trends-card { border: 1px solid var(--primary-dark-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-dark-rgba-15) !important; } .data-trends-card .card-header { background: var(--gradient-primary-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .chart-container:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .chart-title { margin-bottom: 15px; color: var(--primary-color); font-weight: 600; font-size: 1rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; } .chart-wrapper { position: relative; height: 300px; width: 100% !important; min-height: 200px; } /* System Health */ .system-health-card { border: 1px solid var(--primary-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-rgba-15) !important; } .system-health-card .card-header { background: var(--gradient-primary) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .health-stat { padding: 20px 10px; transition: box-shadow 0.2s ease; } .health-stat:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .health-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .health-value { font-size: 18px; font-weight: bold; margin-bottom: 5px; } .health-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; } /* Quick Actions */ .quick-actions-card { border: 1px solid var(--primary-lighter-rgba-20) !important; box-shadow: 0 4px 15px var(--primary-lighter-rgba-15) !important; } .quick-actions-card .card-header { background: var(--gradient-primary-lighter) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Empty States */ .empty-state { padding: 2rem; text-align: center; } .empty-state i { opacity: 0.7; } /* Enhanced Pulse Animation for Live Indicators */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; animation: enhancedPulse 2s infinite; } @keyframes enhancedPulse { 0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 50% { opacity: 0.7; transform: scale(1.1); box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } } /* Status Card Enhancements */ .status-card { transition: box-shadow 0.2s ease; border-left: 4px solid var(--success-color); } .status-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .status-card.warning { border-left-color: var(--warning-color); } .status-card.danger { border-left-color: var(--danger-color); } /* Graph Colors - Primary Color Theme */ .chartjs-render-monitor { border-radius: 8px; } /* Chart.js primary color overrides */ .chart-primary { --chart-primary: var(--primary-color); --chart-primary-light: var(--primary-light-color); --chart-primary-dark: var(--primary-dark-color); } /* Standardize Card Headers Across Application */ .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) { background: var(--gradient-primary) !important; color: white !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h1, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h2, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h3, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h4, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h5, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) h6 { color: white !important; } .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) small, .card-header:not([class*="bg-gradient-"]):not([class*="bg-"]) .text-muted { color: rgba(255, 255, 255, 0.8) !important; } /* Ensure white text for card headers with bg- classes */ .card-header[class*="bg-"], .card-header[class*="bg-gradient-"] { color: white !important; } .card-header[class*="bg-"] h1, .card-header[class*="bg-"] h2, .card-header[class*="bg-"] h3, .card-header[class*="bg-"] h4, .card-header[class*="bg-"] h5, .card-header[class*="bg-"] h6, .card-header[class*="bg-gradient-"] h1, .card-header[class*="bg-gradient-"] h2, .card-header[class*="bg-gradient-"] h3, .card-header[class*="bg-gradient-"] h4, .card-header[class*="bg-gradient-"] h5, .card-header[class*="bg-gradient-"] h6 { color: white !important; } .card-header[class*="bg-"] small, .card-header[class*="bg-"] .text-muted, .card-header[class*="bg-gradient-"] small, .card-header[class*="bg-gradient-"] .text-muted { color: rgba(255, 255, 255, 0.8) !important; } /* Responsive Enhancements */ @media (max-width: 768px) { .measurement-stat-card, .device-stat-card { padding: 1rem 0.5rem; } .measurement-stat-card .stat-icon, .device-stat-card .stat-icon { width: 50px; height: 50px; } .chart-container { padding: 15px; min-height: 180px; } .chart-title { font-size: 0.9rem; margin-bottom: 12px; } .chart-wrapper { height: 250px; min-height: 180px; } .activity-item { padding: 10px 12px; } .activity-icon { width: 35px; height: 35px; } } /* ===== MODERN TABLE STYLING ===== */ /* Modern Table Enhancements */ .modern-table { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .modern-table thead th { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: none; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; color: #495057; padding: 1rem 1.25rem; position: sticky; top: 0; z-index: 10; } /* Sortable Headers */ .sortable { cursor: pointer; transition: all 0.2s ease; user-select: none; } .sortable:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); color: var(--primary-color); } .sortable:hover i { color: var(--primary-color) !important; } .modern-table tbody tr { transition: all 0.2s ease; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /* Removed duplicate hover rule - consolidated below */ .modern-table tbody td { padding: 1rem 1.25rem; vertical-align: middle; border: none; } /* Compact Status Badge Design for Tables */ .status-indicator { display: flex; align-items: center; justify-content: center; min-height: 36px; } .status-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-weight: 600; transition: all 0.2s ease; position: relative; min-width: 110px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px); } .status-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .status-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 0.8rem; flex-shrink: 0; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .status-content { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; min-width: 0; } .status-label { font-size: 0.7rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.3px; } .status-count { font-size: 1.1rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .status-subtitle { font-size: 0.65rem; opacity: 0.9; line-height: 1.1; font-weight: 500; } .status-update-indicator { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(255, 255, 255, 0.3); color: white; border-radius: 3px; font-size: 0.6rem; flex-shrink: 0; animation: pulse 2s infinite; backdrop-filter: blur(4px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* Update indicator styling when on offline devices */ .status-issues .status-update-indicator { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border: 1px solid rgba(59, 130, 246, 0.3); box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); } /* Enhanced offline icon styling */ .status-issues .status-icon .fa-exclamation { color: #dc2626; filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.3)); } /* WiFi icon styling for offline status - more alerting red color */ .status-issues .status-icon .fa-wifi { color: #dc2626 !important; filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.4)); animation: pulse-red 2s infinite; } /* Pulse animation for offline WiFi icon */ @keyframes pulse-red { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes pulse-gray { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } /* Status Variants with Enhanced Gradients */ /* Offline/Issues uses gray (distinct from error/warning) */ .status-issues { background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 50%, #9ca3af 100%); color: #374151; border-color: #6b7280; box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2); } .status-issues .status-icon { background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #374151 100%); box-shadow: 0 2px 6px rgba(75, 85, 99, 0.4); } .status-issues .status-count { color: #374151; font-size: 1.2rem; text-shadow: 0 1px 3px rgba(55, 65, 81, 0.3); } /* Critical Status - Most Severe */ .status-critical { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 50%, #fca5a5 100%); color: #7f1d1d; border-color: #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25); position: relative; } .status-critical.also-offline { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 30%, #fca5a5 60%, #fde68a 100%); border-color: #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3), 0 0 0 1px rgba(217, 119, 6, 0.2); } .status-critical .status-icon { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%); box-shadow: 0 2px 6px rgba(185, 28, 28, 0.5); } .status-critical.also-offline .status-icon { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 40%, #f59e0b 100%); box-shadow: 0 2px 6px rgba(185, 28, 28, 0.4); } .status-critical .status-count { color: #991b1b; font-size: 0.75rem; font-weight: 600; text-shadow: 0 1px 2px rgba(153, 27, 27, 0.3); } /* Error Status - Less severe than critical, more severe than warning */ .status-error { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fdba74 100%); color: #7c2d12; border-color: #ea580c; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25); position: relative; } .status-error.also-offline { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 30%, #fdba74 60%, #fde68a 100%); border-color: #ea580c; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3), 0 0 0 1px rgba(217, 119, 6, 0.2); } .status-error .status-icon { background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #9a3412 100%); box-shadow: 0 2px 6px rgba(194, 65, 12, 0.5); } .status-error.also-offline .status-icon { background: linear-gradient(135deg, #ea580c 0%, #c2410c 40%, #f59e0b 100%); box-shadow: 0 2px 6px rgba(194, 65, 12, 0.4); } .status-error .status-count { color: #9a3412; font-size: 0.75rem; font-weight: 600; text-shadow: 0 1px 2px rgba(154, 52, 18, 0.3); } /* Warning Status - Less severe than error */ .status-warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%); color: #78350f; border-color: #f59e0b; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25); position: relative; } .status-warning.also-offline { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 30%, #fcd34d 60%, #fed7aa 100%); border-color: #f59e0b; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(217, 119, 6, 0.2); } .status-warning .status-icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); box-shadow: 0 2px 6px rgba(217, 119, 6, 0.5); } .status-warning.also-offline .status-icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 40%, #ea580c 100%); box-shadow: 0 2px 6px rgba(217, 119, 6, 0.4); } .status-warning .status-count { color: #92400e; font-size: 0.75rem; font-weight: 600; text-shadow: 0 1px 2px rgba(146, 64, 14, 0.3); } /* Offline Status - Gray/Neutral (Distinct from Error/Warning) */ .status-offline { background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 50%, #9ca3af 100%); color: #374151; border-color: #6b7280; box-shadow: 0 2px 8px rgba(107, 114, 128, 0.25); } .status-offline.has-updates { background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 40%, #9ca3af 70%, #dbeafe 100%); border-color: #6b7280; box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2); } .status-offline .status-icon { background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #374151 100%); box-shadow: 0 2px 6px rgba(75, 85, 99, 0.4); } .status-offline.has-updates .status-icon { background: linear-gradient(135deg, #6b7280 0%, #4b5563 40%, #3b82f6 100%); box-shadow: 0 2px 6px rgba(75, 85, 99, 0.4); } .status-updates { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%); color: #1e40af; border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } .status-updates .status-icon { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4); } .status-healthy { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%); color: #065f46; border-color: #10b981; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); } .status-healthy .status-icon { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4); } /* Pulse animation for update indicator */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* Status Indicators Container */ .status-indicators { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; } /* Secondary Indicator for Combined Status */ .status-secondary-indicator { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: rgba(100, 116, 139, 0.8); color: white; border-radius: 2px; font-size: 0.5rem; flex-shrink: 0; margin-left: 0.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Priority Indicator for Updates */ .status-priority-indicator { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; border-radius: 3px; font-size: 0.6rem; flex-shrink: 0; animation: pulse-priority 2s infinite; box-shadow: 0 1px 3px rgba(4, 120, 87, 0.3); } /* Blue Pulse for Offline with Updates */ .pulse-blue { animation: pulse-blue 2s infinite; } @keyframes pulse-blue { 0%, 100% { transform: scale(1); opacity: 1; background: rgba(59, 130, 246, 0.8); } 50% { transform: scale(1.1); opacity: 0.7; background: rgba(37, 99, 235, 0.9); } } @keyframes pulse-priority { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } /* Modern Filter Inputs for Primary Header */ .modern-select { width: 100% !important; padding: 0.5rem 0.75rem; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.95); color: var(--text-dark); font-size: 0.875rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; } .modern-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .modern-select:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 1); } .modern-select option { background: white; color: var(--text-dark); padding: 0.5rem; } /* Enhanced Clear Button */ .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.2); color: white; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; border-radius: 8px; } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn-outline-light:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-outline-light:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); } /* Device Icon Styling */ .device-icon, .product-icon, .customer-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(20, 15, 84, 0.1) 0%, rgba(20, 15, 84, 0.05) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0; } .device-icon i, .product-icon i, .customer-icon i { font-size: 1rem; } /* Text truncation for table cells */ .text-truncate { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compact table cell styling */ .modern-table tbody td { padding: 0.75rem 1rem; vertical-align: middle; border: none; } /* Action Button Group */ .btn-group-sm .btn { padding: 0.375rem 0.5rem; border-radius: 6px; margin: 0 1px; transition: all 0.2s ease; } .btn-group-sm .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Pagination Enhancements */ .pagination { margin: 0; gap: 4px; } .pagination .page-link { border-radius: 8px; border: 1px solid #e9ecef; color: #6c757d; background: white; transition: all 0.2s ease; padding: 0.5rem 0.75rem; font-weight: 500; min-width: 40px; text-align: center; } .pagination .page-link:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 15, 84, 0.2); } .pagination .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(20, 15, 84, 0.3); font-weight: 600; } .pagination .page-item.disabled .page-link { background: #f8f9fa; color: #6c757d; border-color: #e9ecef; opacity: 0.6; cursor: not-allowed; } .pagination .page-item.disabled .page-link:hover { background: #f8f9fa; color: #6c757d; border-color: #e9ecef; transform: none; box-shadow: none; } /* Pagination Info Styling */ .card-footer { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 1rem 1.5rem; } .card-footer .text-muted { font-size: 0.875rem; font-weight: 500; color: #6c757d !important; } .card-footer .text-muted span { font-weight: 600; color: var(--primary-color); } /* Ellipsis styling in pagination */ .pagination .page-link.text-muted { background: transparent; border: none; color: #6c757d; cursor: default; font-weight: 600; } .pagination .page-link.text-muted:hover { background: transparent; color: #6c757d; transform: none; box-shadow: none; } /* Empty State */ .empty-state { padding: 3rem 2rem; } .empty-state i { opacity: 0.6; margin-bottom: 1rem; } /* Row Selection */ .device-row.selected { background: linear-gradient(135deg, rgba(20, 15, 84, 0.1) 0%, rgba(20, 15, 84, 0.05) 100%); } /* Clickable Rows */ .clickable-row { cursor: pointer; transition: all 0.2s ease; } .clickable-row:hover { background: linear-gradient(135deg, rgba(20, 15, 84, 0.03) 0%, rgba(20, 15, 84, 0.06) 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .clickable-row:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Prevent text selection on clickable rows */ .clickable-row { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* Ensure interactive elements are still selectable */ .clickable-row input, .clickable-row button, .clickable-row a { user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; } /* Filter Layout in Card Header */ .card-header .form-label { margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 500; } .card-header .form-select-sm, .card-header .form-control { border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.95); color: #495057; border-radius: 6px; transition: all 0.2s ease; } .card-header .form-select-sm:focus, .card-header .form-control:focus { border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3); background: white; outline: none; } .card-header .form-select-sm:hover, .card-header .form-control:hover { background: white; border-color: rgba(255, 255, 255, 0.5); } /* Search Input Group Styling */ .card-header .input-group { border-radius: 6px; overflow: hidden; } .card-header .input-group-text { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); border-right: none; color: #6c757d; transition: all 0.2s ease; } .card-header .input-group .form-control { border-left: none; border-radius: 0 6px 6px 0; } .card-header .input-group:focus-within .input-group-text { background: white; border-color: rgba(255, 255, 255, 0.8); color: var(--primary-color); } /* Clear buttons now use universal button styles */ /* Responsive Table */ @media (max-width: 768px) { .modern-table { font-size: 0.875rem; } .modern-table thead th, .modern-table tbody td { padding: 0.5rem 0.25rem; } .btn-group-sm .btn { padding: 0.25rem 0.375rem; font-size: 0.75rem; } .device-icon, .product-icon, .customer-icon { width: 28px; height: 28px; } .device-icon i, .product-icon i, .customer-icon i { font-size: 0.8rem; } .text-truncate { max-width: 100px; } /* Stack filters on mobile */ .card-header .row { flex-direction: column; } .card-header .col-md-2, .card-header .col-md-4 { margin-bottom: 0.5rem; } /* Compact status badge mobile optimization */ .status-indicator { min-height: 32px; } .status-badge { padding: 0.375rem 0.5rem; gap: 0.375rem; min-width: 80px; } .status-icon { width: 20px; height: 20px; font-size: 0.7rem; } .status-label { font-size: 0.65rem; } .status-count { font-size: 1rem; } .status-subtitle { font-size: 0.6rem; } .status-update-indicator { width: 14px; height: 14px; font-size: 0.5rem; } /* Mobile responsive filter inputs */ .search-input { padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.8rem; } .search-icon { right: 0.5rem; font-size: 0.8rem; } .modern-select { padding: 0.375rem 0.5rem; font-size: 0.8rem; } .btn-outline-light { font-size: 0.8rem; padding: 0.375rem 0.75rem; } } @media (max-width: 576px) { .modern-table thead th, .modern-table tbody td { padding: 0.375rem 0.125rem; font-size: 0.8rem; } .device-icon, .product-icon, .customer-icon { width: 24px; height: 24px; } .device-icon i, .product-icon i, .customer-icon i { font-size: 0.7rem; } .text-truncate { max-width: 80px; } } /* ========================================== MEASUREMENT SELECTION COMPONENT ========================================== */ /* Two Panel Layout */ .measurements-container { max-height: 500px; overflow-y: auto; border: none; } .selected-container { max-height: 500px; overflow-y: auto; border: none; } /* Available Measurements (Left Panel) */ .available-row { border-bottom: 1px solid #f0f0f0; transition: all 0.15s ease; cursor: pointer; } .available-row:last-child { border-bottom: none; } .available-row:hover { background-color: #f8f9fa; } .available-row.added { background-color: #d1ecf1; border-left: 3px solid #0d6efd; opacity: 0.6; } .measurement-row-content { padding: 0.75rem 1rem; } .measurement-details { display: flex; justify-content: space-between; align-items: center; width: 100% !important; } .measurement-main { display: flex; align-items: center; gap: 0.75rem; flex: 1; } .measurement-actions { display: flex; align-items: center; gap: 0.5rem; } .measurement-id { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; min-width: 45px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .measurement-name { font-size: 0.95rem; font-weight: 500; color: #1f2937; line-height: 1.4; } .measurement-type-badge { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background-color: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #e5e7eb; } .add-btn { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; } .add-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .add-btn.added { background-color: #198754; border-color: #198754; color: white; } /* Selected Panel (Right Panel) */ .selected-panel { position: sticky; top: 20px; } .selected-item { background: #fff; border: 1px solid #e9ecef; border-radius: 0.375rem; padding: 0.75rem; margin-bottom: 0.5rem; transition: all 0.2s ease; position: relative; } .selected-item:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .selected-item-content { display: flex; justify-content: space-between; align-items: center; } .selected-item-info { flex: 1; } .selected-item .measurement-id { background: linear-gradient(135deg, #198754 0%, #20c997 100%); font-size: 0.7rem; min-width: 40px; padding: 0.2rem 0.4rem; } .selected-item .measurement-name { font-size: 0.9rem; font-weight: 500; color: #1f2937; margin-bottom: 0.25rem; } .selected-item .measurement-type-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; } .remove-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 0.375rem; transition: all 0.2s ease; } .remove-btn:hover { transform: scale(1.05); } .empty-selected-state { padding: 2rem 1rem; } .selected-count-badge { background: rgba(255, 255, 255, 0.2); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; } /* Filter Pills */ .filter-pill { border-radius: 50px; font-weight: 500; transition: all 0.2s ease; } .filter-pill.active { background-color: #0d6efd; border-color: #0d6efd; color: white; } .filter-pill.active .badge { background-color: rgba(255, 255, 255, 0.2) !important; color: white; } .filter-pill:hover:not(.active) { background-color: #e9ecef; border-color: #adb5bd; } /* Search functionality */ .measurement-row.hidden, .available-row.hidden { display: none; } /* Empty state */ .empty-state { padding: 3rem 2rem; } /* Custom scrollbar */ .measurements-container::-webkit-scrollbar, .selected-container::-webkit-scrollbar { width: 6px; } .measurements-container::-webkit-scrollbar-track, .selected-container::-webkit-scrollbar-track { background: transparent; } .measurements-container::-webkit-scrollbar-thumb, .selected-container::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .measurements-container::-webkit-scrollbar-thumb:hover, .selected-container::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Responsive adjustments */ @media (max-width: 768px) { .measurement-row-content { padding: 0.5rem 0.75rem; } .measurement-main { gap: 0.5rem; } .measurement-name { font-size: 0.875rem; } .measurement-id { min-width: 35px; font-size: 0.7rem; padding: 0.2rem 0.4rem; } .filter-pill { font-size: 0.8rem; padding: 0.25rem 0.5rem; } } /* ========================================== MODERN SEARCH INPUT COMPONENT ========================================== */ .search-input-container { position: relative; width: 100% !important; } /* Default search input for regular backgrounds */ .search-input { width: 100% !important; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; background-color: #f9fafb; font-size: 0.95rem; font-weight: 400; color: #374151; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .search-input:focus { outline: none; border-color: #3b82f6; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); transform: translateY(-1px); } .search-input::placeholder { color: #9ca3af; font-weight: 400; } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 1rem; pointer-events: none; transition: color 0.2s ease; } .search-input:focus+.search-icon, .search-input-container:hover .search-icon { color: #3b82f6; } /* Override for primary header context */ .card-header .search-input { padding: 0.625rem 1rem 0.625rem 2.75rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: white; font-size: 0.9rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.1); height: 44px; } .card-header .search-input::placeholder { color: rgba(255, 255, 255, 0.65); } .card-header .search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.15); transform: translateY(-1px); } .card-header .search-input:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.15); } .card-header .search-icon { position: absolute; left: 1rem; right: auto; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; pointer-events: none; transition: all 0.3s ease; } .card-header .search-input:focus + .search-icon { color: rgba(255, 255, 255, 0.95); transform: translateY(-50%) scale(1.05); } /* 2025 Modern Select for Card Header */ .card-header .modern-select { width: 100%; padding: 0.625rem 2.75rem 0.625rem 1rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; background-color: rgba(255, 255, 255, 0.12); color: white; font-size: 0.9rem; font-weight: 500; line-height: 1.5; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.1); height: 44px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.75)' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; cursor: pointer; } .card-header .modern-select:hover { border-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.75)' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E"); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.15); } .card-header .modern-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.75)' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E"); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.15); transform: translateY(-1px); } /* Modern Dropdown Menu Styling - Browser Compatible */ .card-header .modern-select option { background-color: #ffffff; color: #1f2937; font-weight: 500; padding: 8px 12px; } .card-header .modern-select option:hover { background-color: #f3f4f6; } .card-header .modern-select option:checked, .card-header .modern-select option[selected] { background-color: var(--business-primary, #060D47); color: white; font-weight: 600; } /* Glassmorphic Clear/Action Buttons for Card Header */ .card-header .btn-outline-light { padding: 0.625rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: white; font-size: 0.9rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.1); height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; } .card-header .btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.18); color: white; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.15); } .card-header .btn-outline-light:focus, .card-header .btn-outline-light:active { outline: none; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.22); color: white; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2); transform: translateY(-1px); } /* Form Labels in Card Header */ .card-header .form-label { color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0.25rem; border-radius: 50%; transition: all 0.2s ease; opacity: 0; pointer-events: none; } .search-clear:hover { color: #ef4444; background-color: #fef2f2; } .search-input:not(:placeholder-shown)+.search-icon+.search-clear { opacity: 1; pointer-events: auto; } /* Search input sizes */ .search-input-sm { padding: 0.5rem 0.75rem 0.5rem 2.25rem; font-size: 0.875rem; border-radius: 0.5rem; } .search-input-sm+.search-icon { left: 0.75rem; font-size: 0.875rem; } .search-input-sm+.search-icon+.search-clear { right: 0.75rem; } /* Search input on gradient backgrounds */ .search-input-on-gradient { background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); color: white; backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .search-input-on-gradient:focus { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .search-input-on-gradient::placeholder { color: rgba(255, 255, 255, 0.7); font-weight: 400; } .search-input-on-gradient+.search-icon { color: rgba(255, 255, 255, 0.8); } .search-input-on-gradient:focus+.search-icon, .search-input-container:hover .search-input-on-gradient+.search-icon { color: white; } .search-input-on-gradient+.search-icon+.search-clear { color: rgba(255, 255, 255, 0.7); } .search-input-on-gradient+.search-icon+.search-clear:hover { color: #fca5a5; background-color: rgba(255, 255, 255, 0.1); } .search-input-lg { padding: 1rem 1.25rem 1rem 3rem; font-size: 1.1rem; border-radius: 1rem; } .search-input-lg+.search-icon { left: 1.25rem; font-size: 1.1rem; } .search-input-lg+.search-icon+.search-clear { right: 1.25rem; } /* Dark theme support */ @media (prefers-color-scheme: dark) { .search-input { background-color: #1f2937; border-color: #374151; color: #f9fafb; } .search-input:focus { background-color: #111827; border-color: #3b82f6; } .search-input::placeholder { color: #6b7280; } } /* ===== INFO CARD COMPONENT STYLES ===== */ /* Information Card Styles */ .info-card { background: var(--bg-white); border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } /* Removed info-card::before pseudo-element to eliminate top line on hover */ .info-card:hover { border-color: var(--primary-rgba-15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08); background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light-secondary) 100%); } /* Removed info-card hover ::before rule since the pseudo-element has been removed */ .info-card-header { background: var(--gradient-primary); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .header-content { display: flex; align-items: center; gap: 1rem; } .header-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .header-icon i { color: white; font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .header-text h5 { color: white; font-weight: 600; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .header-text small { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .info-card-body { padding: 1.5rem; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .info-item { display: flex; flex-direction: column; gap: 0.5rem; } .info-label { font-weight: 600; color: var(--text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; display: flex; align-items: center; } .info-label i { color: var(--primary-color); font-size: 0.75rem; } .info-value { font-size: 1rem; color: var(--text-dark); font-weight: 500; } .info-link { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: all 0.2s ease; display: inline-flex; align-items: center; } .info-link:hover { color: var(--primary-dark); text-decoration: underline; } .info-link i { font-size: 0.75rem; opacity: 0.7; } .info-code { background: var(--bg-light); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.875rem; border: 1px solid rgba(20, 15, 84, 0.1); } .info-description { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 1rem; } .description-label { font-weight: 600; color: var(--text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.5rem; display: flex; align-items: center; } .description-label i { color: var(--primary-color); font-size: 0.75rem; } .description-text { color: var(--text-dark); line-height: 1.6; } .info-additional { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 1rem; } /* Responsive adjustments for info card */ @media (max-width: 768px) { .info-grid { grid-template-columns: 1fr; gap: 1rem; } .info-card-header { flex-direction: column; gap: 1rem; align-items: flex-start; } .header-content { width: 100% !important; } .status-indicator { width: 100% !important; justify-content: flex-start; } } /* ===== SETTINGS COMPONENT STYLES ===== */ .choice-item { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 0.5rem; } .choice-item .choice-input { flex: 1; } .remove-choice-btn { flex-shrink: 0; } .choices-list { max-height: 200px; overflow-y: auto; } /* ===== DEVICE MEASUREMENT DASHBOARD STYLES ===== */ /* Dashboard-specific styles */ .status-card { transition: all 0.3s ease; border-left: 4px solid #28a745; } .status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .status-card.warning { border-left-color: #ffc107; } .status-card.danger { border-left-color: #dc3545; } /* Removed .status-indicator-badge pulsing animation for cleaner look */ .pulse-dot { width: 8px; height: 8px; background-color: #28a745; border-radius: 50%; /* Removed pulsing animation for cleaner look */ } .activity-feed { background: #f8f9fa; } .activity-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e9ecef; transition: background-color 0.2s ease; } .activity-item:hover { background-color: #e9ecef; } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .activity-icon i { color: white; font-size: 14px; } .activity-content { flex: 1; } .activity-header { display: flex; justify-content: between; align-items: center; margin-bottom: 4px; } .activity-time { font-size: 12px; color: #6c757d; margin-left: auto; } .activity-value code { background: #e9ecef; padding: 2px 6px; border-radius: 3px; font-size: 14px; } .health-stat { padding: 20px 10px; } .health-icon { margin-bottom: 10px; } .health-value { font-size: 18px; font-weight: bold; margin-bottom: 5px; } .health-label { font-size: 12px; color: #6c757d; margin-bottom: 8px; } .stat-item { padding: 10px 5px; } .stat-value { font-size: 16px; font-weight: bold; margin-bottom: 5px; } /* Live indicator - clean static design */ .status-indicator { position: relative; /* Removed pulsing animation for cleaner look */ } /* ===== MODERN 2025 LOGIN PAGE STYLES ===== */ /* Reset and Base Styles */ .modern-login-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; background: var(--login-bg-primary); color: var(--text-primary); } /* Static Background */ .modern-login-bg { position: fixed; top: 0; left: 0; width: 100% !important; height: 100%; z-index: -1; overflow: hidden; } .bg-gradient-1 { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: var(--login-bg-primary); } .bg-gradient-2 { position: absolute; top: -30%; right: -30%; width: 160%; height: 160%; background: var(--login-bg-secondary); border-radius: 50%; opacity: 0.8; } .bg-gradient-3 { position: absolute; bottom: -40%; left: -20%; width: 140%; height: 140%; background: var(--login-bg-accent); border-radius: 50%; opacity: 0.6; } .bg-gradient-4 { position: absolute; top: 20%; left: 20%; width: 100px; height: 100px; background: radial-gradient(circle, rgba(107, 91, 199, 0.15) 0%, transparent 70%); border-radius: 50%; animation: pulse 4s ease-in-out infinite; } .bg-gradient-5 { position: absolute; bottom: 30%; right: 30%; width: 80px; height: 80px; background: radial-gradient(circle, rgba(74, 60, 160, 0.2) 0%, transparent 70%); border-radius: 50%; animation: pulse 3s ease-in-out infinite reverse; } .bg-gradient-6 { position: absolute; top: 60%; left: 60%; width: 60px; height: 60px; background: radial-gradient(circle, rgba(46, 31, 122, 0.15) 0%, transparent 70%); border-radius: 50%; animation: pulse 5s ease-in-out infinite; } /* Subtle Floating Shapes */ .floating-shapes { position: absolute; width: 100% !important; height: 100%; overflow: hidden; } .shape { position: absolute; border-radius: 50%; background: linear-gradient(45deg, rgba(107, 91, 199, 0.1), rgba(74, 60, 160, 0.1)); opacity: 0.05; animation: subtleFloat 20s ease-in-out infinite; } .shape-1 { width: 60px; height: 60px; top: 20%; left: 10%; animation-delay: 0s; } .shape-2 { width: 80px; height: 80px; top: 60%; right: 15%; animation-delay: 5s; } .shape-3 { width: 40px; height: 40px; top: 80%; left: 20%; animation-delay: 10s; } .shape-4 { width: 70px; height: 70px; top: 30%; right: 30%; animation-delay: 15s; } @keyframes subtleFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } } /* Static Grid Overlay */ .grid-overlay { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; background-image: linear-gradient(rgba(107, 91, 199, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 91, 199, 0.03) 1px, transparent 1px); background-size: 60px 60px; } /* Main Login Container */ .modern-login-container { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 1; } .modern-login-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; width: 100% !important; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-glass); overflow: hidden; animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Left Panel - Branding */ .login-left-panel { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .login-left-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .brand-section { position: relative; z-index: 2; text-align: center; margin-bottom: 3rem; } .logo-container { position: relative; display: inline-block; margin-bottom: 1.5rem; } .brand-logo { width: 300px; height: 300px; filter: brightness(0) invert(1); } .logo-glow { display: none; } @keyframes logoGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes pulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } .brand-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem 0; background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .brand-subtitle { font-size: 1.1rem; color: var(--text-secondary); margin: 0; font-weight: 400; } /* Features Section */ .features-section { position: relative; z-index: 2; } .feature-item { display: flex; align-items: center; margin-bottom: 2rem; padding: 1rem; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); } .feature-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(10px); } .feature-icon { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); display: flex; align-items: center; justify-content: center; margin-right: 1rem; flex-shrink: 0; } .feature-icon i { font-size: 1.2rem; color: white; } .feature-text h4 { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: 600; color: #ffffff; } .feature-text p { margin: 0; font-size: 0.9rem; color: #ffffff; line-height: 1.4; } /* Right Panel - Login Form */ .login-right-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); padding: 3rem; display: flex; align-items: center; justify-content: center; } /* Mobile brand (hidden by default; shown in mobile breakpoints) */ .mobile-brand { display: none; } .mobile-brand-logo { display: block; height: auto; } .form-container { width: 100% !important; max-width: 400px; overflow: visible; } .form-header { text-align: center; margin-bottom: 2.5rem; } .form-title { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin: 0 0 0.5rem 0; } .form-subtitle { color: #6b7280; margin: 0; font-size: 1rem; } /* Modern Form Styles */ .modern-login-form { width: 100% !important; overflow: visible; } .form-group { margin-bottom: 2.5rem; position: relative; padding-top: 1.5rem; } /* Ensure proper spacing for form elements */ .modern-form-wrapper { width: 100% !important; max-width: 400px; margin: 0 auto; overflow: visible; } .input-wrapper { position: relative; background: rgba(255, 255, 255, 0.98); border-radius: 20px; border: 2px solid rgba(0, 212, 255, 0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: visible; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); margin-bottom: 1rem; min-height: 64px; display: flex; align-items: center; will-change: transform, box-shadow; } /* Edge hover effect */ .input-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 180, 216, 0.05)); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .input-wrapper:hover::before { opacity: 1; } .input-wrapper:hover { transform: translateY(-2px); border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95); } .input-wrapper:hover { border-color: rgba(0, 212, 255, 0.5); box-shadow: 0 8px 40px rgba(0, 212, 255, 0.2); transform: translateY(-2px); } .input-wrapper.focused { border-color: var(--primary-color); box-shadow: 0 12px 50px rgba(20, 15, 84, 0.3); transform: translateY(-3px); } .input-wrapper.focused::before { opacity: 1; } .input-wrapper.focused { background: rgba(255, 255, 255, 0.98) !important; transform: translateY(-3px) scale(1.01); border-color: var(--primary-color); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(20, 15, 84, 0.2), 0 0 0 4px rgba(20, 15, 84, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1); } .modern-input { width: 100% !important; padding: 1.25rem 1rem 1.25rem 3.5rem; border: none; border-radius: 16px; font-size: 1rem; font-family: 'Inter', inherit; background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); outline: none; color: #1f2937; font-weight: 500; position: relative; z-index: 2; box-sizing: border-box; letter-spacing: 0.01em; line-height: 1.5; } .modern-input:focus { transform: scale(1.02) translateY(-1px); color: var(--primary-dark); font-weight: 600; } .modern-input.error { color: var(--accent-red); } /* Error state for input wrapper */ .input-wrapper.error { border-color: var(--accent-red); box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2); } .input-wrapper.error::before { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)); opacity: 1; } .modern-input::placeholder { color: rgba(107, 114, 128, 0.7); font-weight: 400; } /* Label positioned outside the input - moved to comprehensive definition below */ .modern-input:focus+.modern-label, .modern-input:not(:placeholder-shown)+.modern-label, .input-wrapper.focused .modern-label { top: -1.25rem; color: var(--primary-color) !important; background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(20, 15, 84, 0.3); transform: scale(1.05); box-shadow: 0 4px 15px rgba(20, 15, 84, 0.2); } .modern-label i { font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .modern-input:focus+.modern-label i, .modern-input:not(:placeholder-shown)+.modern-label i, .input-wrapper.focused .modern-label i { color: var(--primary-color); transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(20, 15, 84, 0.4)); } /* Ensure input has proper focus state */ .modern-input:focus { transform: scale(1.01); outline: none; } /* Add input border effect */ .input-border { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .input-wrapper.focused .input-border { transform: scaleX(1); } /* Ensure labels are never clipped */ .modern-label { position: absolute; left: 1rem; top: -0.5rem; color: #6b7280; font-size: 0.875rem; font-weight: 600; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.95); padding: 0.25rem 0.75rem; border-radius: 12px; border: 1px solid rgba(0, 212, 255, 0.2); backdrop-filter: blur(10px); z-index: 10; box-shadow: 0 2px 10px rgba(0, 212, 255, 0.1); white-space: nowrap; transform: translateY(0); max-width: calc(100% - 2rem); overflow: visible; } .password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.2); color: #6b7280; cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); z-index: 15; width: 40px; height: 40px; border: none; } .password-toggle:hover { color: var(--accent-cyan); background: rgba(0, 212, 255, 0.2); transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2); } .password-toggle i { font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .password-toggle:hover i { transform: scale(1.1); filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.4)); } /* Error Messages */ .error-message { margin-bottom: 1rem; } .error-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--border-radius); color: var(--accent-red); font-size: 0.9rem; margin-bottom: 0.5rem; } .error-item i { font-size: 0.8rem; } /* Form Options */ .form-options { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 2rem; } .forgot-password { color: var(--primary-color); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: var(--transition); padding: 0.5rem 1rem; border-radius: 8px; } .forgot-password:hover { color: var(--primary-dark); background: rgba(20, 15, 84, 0.08); text-decoration: none; transform: translateY(-1px); } /* Modern Button */ .modern-btn { width: 100% !important; padding: 1.125rem 2rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-lighter) 100%); color: white; border: none; border-radius: 18px; font-size: 1.05rem; font-weight: 600; font-family: 'Inter', inherit; letter-spacing: 0.02em; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; box-shadow: 0 8px 32px rgba(20, 15, 84, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); will-change: transform, box-shadow; } .modern-btn:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 50%, var(--primary-lightest) 100%); box-shadow: 0 16px 48px rgba(20, 15, 84, 0.35), 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(20, 15, 84, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .modern-btn:active { transform: translateY(-1px) scale(0.98); transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%); box-shadow: 0 4px 16px rgba(20, 15, 84, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .modern-btn.loading { pointer-events: none; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 40px rgba(20, 15, 84, 0.3), 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .modern-btn.loading .btn-text { opacity: 0; transform: translateY(10px); } .modern-btn.loading .btn-loader { opacity: 1; transform: scale(1); } .modern-btn.loading .btn-icon { opacity: 0; transform: translateX(10px); } .btn-loader { position: absolute; opacity: 0; transform: scale(0.8); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .spinner { width: 22px; height: 22px; border: 2.5px solid rgba(255, 255, 255, 0.25); border-top: 2.5px solid white; border-right: 2.5px solid rgba(255, 255, 255, 0.8); border-radius: 50%; animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btn-text { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); } .btn-icon { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)); } .modern-btn:hover .btn-icon { transform: translateX(4px) scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); } /* Button shine effect */ .btn-shine { position: absolute; top: 0; left: -100%; width: 100% !important; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); transition: left 0.6s ease-in-out; border-radius: 18px; pointer-events: none; } .modern-btn:hover .btn-shine { left: 100%; } /* Enhanced input validation states */ .input-wrapper.success { border-color: var(--success-color); box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .input-wrapper.success::before { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)); opacity: 1; } .input-wrapper.warning { border-color: var(--warning-color); box-shadow: 0 8px 32px rgba(251, 191, 36, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .input-wrapper.warning::before { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05)); opacity: 1; } /* Improved error message styling */ .error-message { background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .error-item { display: flex; align-items: center; gap: 0.5rem; color: var(--accent-red); font-weight: 500; font-size: 0.9rem; } .error-item i { font-size: 1rem; filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3)); } /* Add subtle pulse animation for focused button */ .modern-btn:focus { outline: none; animation: buttonPulse 2s ease-in-out infinite; } @keyframes buttonPulse { 0%, 100% { box-shadow: 0 8px 32px rgba(20, 15, 84, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 12px 48px rgba(20, 15, 84, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(20, 15, 84, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); } } /* Add shake animation for validation errors */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-0.5deg); } 75% { transform: translateX(8px) rotate(0.5deg); } } /* Form Footer */ .form-footer { text-align: center; margin-top: 2rem; } .footer-text { color: #6b7280; font-size: 0.9rem; margin: 0; } .footer-link { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: var(--transition); } .footer-link:hover { color: var(--primary-dark); text-decoration: underline; } /* Responsive Design */ @media (max-width: 1200px) { .modern-login-card { max-width: 1000px; margin: 0 auto; } .login-left-panel { padding: 2.5rem; } .login-right-panel { padding: 2.5rem; } } @media (max-width: 1024px) { .modern-login-card { grid-template-columns: 1fr; max-width: 600px; margin: 1rem auto; } .login-left-panel { padding: 2rem; text-align: center; order: 1; } .login-right-panel { padding: 2rem; order: 2; } .brand-title { font-size: 2rem; } .feature-item { justify-content: center; text-align: left; } .features-section { margin-top: 2rem; } } @media (max-width: 768px) { .modern-login-container { padding: 0.75rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .modern-login-card { max-width: 100% !important; margin: 0; border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; width: 100% !important; max-width: 400px; } /* Prioritize the form above the fold on mobile */ .login-left-panel { display: none !important; } .login-left-panel { padding: 1.5rem 1.5rem 1rem 1.5rem; order: 1; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .login-right-panel { padding: 1.5rem; order: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 1; } .brand-section { margin-bottom: 1rem; } .brand-title { font-size: 1.5rem; margin-bottom: 0.25rem; } .brand-subtitle { font-size: 0.9rem; margin-bottom: 0; } .form-container { width: 100% !important; max-width: 350px; } /* Show compact brand above form on mobile */ .mobile-brand { display: flex; justify-content: center; align-items: center; margin-bottom: 0.75rem; padding: 0.5rem 0.875rem; border-radius: 9999px; position: relative; /* Primary gradient pill */ background: var(--gradient-primary); border: 1px solid rgba(20, 15, 84, 0.08); box-shadow: 0 6px 18px rgba(20, 15, 84, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); backdrop-filter: blur(6px); } .mobile-brand-logo { max-width: 160px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } .form-title { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: center; } .form-subtitle { font-size: 0.9rem; margin-bottom: 1rem; text-align: center; } .feature-item { display: none; /* Hide features on mobile */ } .modern-input { padding: 1rem 1rem 1rem 3rem; font-size: 1rem; border-radius: 12px; } .modern-label { left: 1rem; font-size: 0.9rem; } .password-toggle { right: 1rem; width: 40px; height: 40px; } .input-wrapper { min-height: 60px; border-radius: 12px; } .modern-btn { padding: 1rem 2rem; font-size: 1rem; border-radius: 12px; min-height: 56px; width: 100% !important; } .form-group { margin-bottom: 1rem; } .form-footer { margin-top: 1.5rem; text-align: center; } .footer-text { font-size: 0.9rem; } } @media (max-width: 576px) { .modern-login-container { padding: 0.5rem; display: flex; align-items: center; justify-content: center; } .modern-login-card { border-radius: 12px; margin: 0; max-width: 380px; } .login-left-panel { padding: 1.25rem 1.25rem 0.75rem 1.25rem; } .login-right-panel { padding: 1.25rem; display: flex; flex-direction: column; } .brand-section { margin-bottom: 0.75rem; } .brand-title { font-size: 1.25rem; } .brand-subtitle { font-size: 0.85rem; } .form-container { max-width: 320px; } .mobile-brand { margin-bottom: 0.5rem; padding: 0.45rem 0.75rem; } .mobile-brand-logo { max-width: 140px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } .form-title { font-size: 1.25rem; } .form-subtitle { font-size: 0.85rem; } .modern-input { padding: 0.875rem 0.875rem 0.875rem 2.75rem; font-size: 0.95rem; border-radius: 10px; } .modern-label { left: 0.875rem; font-size: 0.85rem; } .password-toggle { right: 0.875rem; width: 36px; height: 36px; } .input-wrapper { min-height: 56px; border-radius: 10px; } .modern-btn { padding: 0.875rem 1.5rem; font-size: 0.95rem; border-radius: 10px; min-height: 52px; width: 100% !important; } .form-group { margin-bottom: 1.25rem; } .form-footer { margin-top: 1.25rem; } .footer-text { font-size: 0.85rem; } } @media (max-width: 480px) { .modern-login-container { padding: 0.25rem; display: flex; align-items: center; justify-content: center; } .modern-login-card { border-radius: 8px; max-width: 360px; } .login-left-panel { padding: 1rem 1rem 0.5rem 1rem; } .login-right-panel { padding: 1rem; display: flex; flex-direction: column; } .brand-title { font-size: 1.125rem; } .brand-subtitle { font-size: 0.8rem; } .form-container { max-width: 300px; } .mobile-brand-logo { max-width: 130px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } .form-title { font-size: 1.125rem; } .form-subtitle { font-size: 0.8rem; } .modern-input { padding: 0.75rem 0.75rem 0.75rem 2.5rem; font-size: 0.9rem; border-radius: 8px; } .modern-label { left: 0.75rem; font-size: 0.8rem; } .password-toggle { right: 0.75rem; width: 32px; height: 32px; } .input-wrapper { min-height: 52px; border-radius: 8px; } .modern-btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; border-radius: 8px; min-height: 48px; width: 100% !important; } .form-group { margin-bottom: 1rem; } .form-footer { margin-top: 1rem; } .footer-text { font-size: 0.8rem; } } @media (max-width: 360px) { .modern-login-container { padding: 0.125rem; display: flex; align-items: center; justify-content: center; } .modern-login-card { max-width: 340px; } .login-left-panel { padding: 0.75rem 0.75rem 0.5rem 0.75rem; } .login-right-panel { padding: 0.75rem; display: flex; flex-direction: column; } .brand-title { font-size: 1rem; } .brand-subtitle { font-size: 0.75rem; } .form-container { max-width: 280px; } .mobile-brand-logo { max-width: 120px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } .form-title { font-size: 1rem; } .form-subtitle { font-size: 0.75rem; } .modern-input { padding: 0.625rem 0.625rem 0.625rem 2.25rem; font-size: 0.85rem; } .modern-label { left: 0.625rem; font-size: 0.75rem; } .password-toggle { right: 0.625rem; width: 28px; height: 28px; } .input-wrapper { min-height: 48px; } .modern-btn { padding: 0.625rem 1rem; font-size: 0.85rem; min-height: 44px; width: 100% !important; } } /* Mobile-specific improvements */ @media (max-width: 768px) { /* Improve touch targets */ .modern-btn { min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .password-toggle { min-width: 44px; min-height: 44px; touch-action: manipulation; } .input-wrapper { touch-action: manipulation; } /* Prevent zoom on input focus */ .modern-input { font-size: 16px; -webkit-appearance: none; appearance: none; border-radius: 8px; } /* Improve scrolling on mobile */ .modern-login-container { -webkit-overflow-scrolling: touch; overflow-x: hidden; } /* Ensure form is properly centered on mobile */ .modern-login-card { margin: 0 auto; max-width: 100% !important; width: 100% !important; } /* Fix input wrapper on mobile */ .input-wrapper { position: relative; margin-bottom: 1rem; } /* Ensure labels work properly on mobile */ .modern-label { pointer-events: none; user-select: none; } /* Fix password toggle button on mobile */ .input-wrapper .password-toggle { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; background: none !important; border: none !important; color: var(--text-secondary) !important; cursor: pointer !important; z-index: 100 !important; padding: 8px !important; min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; -webkit-tap-highlight-color: transparent !important; pointer-events: auto !important; } .input-wrapper .password-toggle:hover { color: var(--primary-color) !important; } .input-wrapper .password-toggle i { font-size: 16px !important; pointer-events: none !important; } /* Ensure form submission works on mobile */ .modern-login-form { width: 100% !important; max-width: 100% !important; } /* Fix button interaction on mobile */ .modern-btn { width: 100% !important; max-width: 100% !important; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Better spacing for mobile */ .form-group:last-of-type { margin-bottom: 2rem; } /* Ensure proper form field styling on mobile */ .modern-input { width: 100% !important; padding: 12px 16px; border: 2px solid var(--border-color); background: var(--bg-white); color: var(--text-dark); font-size: 16px; /* Prevent zoom on iOS */ line-height: 1.5; transition: all 0.3s ease; } .modern-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-rgba-20); } /* Fix form submission on mobile */ .modern-login-form { position: relative; z-index: 1; } /* Ensure error messages are visible on mobile */ .error-message { margin-top: 1rem; padding: 0.75rem; background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.2); border-radius: 8px; color: var(--danger-color); } .error-item { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .error-item:last-child { margin-bottom: 0; } /* Improve feature section visibility */ .features-section { display: none; /* Hide on mobile to focus on form */ } .login-left-panel { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .login-right-panel { flex: 1; display: flex; align-items: center; justify-content: center; } } @media (max-width: 480px) { /* Even better touch targets for small screens */ .modern-btn { min-height: 44px; width: 100% !important; } .password-toggle { min-width: 40px; min-height: 40px; } /* Stack form elements better */ .form-group { margin-bottom: 1.5rem; } /* Improve text readability */ .modern-input { font-size: 16px; /* Prevent zoom on iOS */ line-height: 1.4; } .modern-label { font-size: 0.85rem; line-height: 1.3; } /* Better error message display */ .error-message { margin-bottom: 1rem; } .error-item { padding: 0.75rem; font-size: 0.9rem; line-height: 1.4; } } @media (max-width: 360px) { /* Ultra-compact layout for very small screens */ .modern-login-card { margin: 0; border-radius: 0; min-height: 100vh; } .login-left-panel, .login-right-panel { padding: 0.5rem; } .brand-section { margin-bottom: 1rem; } .form-header { margin-bottom: 1.5rem; } .modern-btn { min-height: 48px; font-weight: 600; } /* Ensure inputs are large enough for touch */ .modern-input { font-size: 16px; padding: 0.75rem 0.75rem 0.75rem 2.5rem; } .input-wrapper { min-height: 48px; } } /* Landscape orientation adjustments */ @media (max-width: 768px) and (orientation: landscape) { .modern-login-container { padding: 0.5rem; align-items: flex-start; padding-top: 1rem; } .modern-login-card { max-height: 90vh; overflow-y: auto; max-width: 500px; } .login-left-panel { padding: 1rem 1rem 0.5rem 1rem; } .login-right-panel { padding: 1rem; } .features-section { display: none; } .brand-section { margin-bottom: 0.5rem; } .brand-title { font-size: 1.25rem; } .brand-subtitle { font-size: 0.8rem; } .form-group { margin-bottom: 1rem; } .form-title { font-size: 1.25rem; } .form-subtitle { font-size: 0.8rem; margin-bottom: 1.5rem; } } /* High DPI display adjustments */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .modern-input, .modern-btn, .password-toggle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* Device Actions Dropdown Styles */ .device-actions-dropdown .btn { background: var(--gradient-primary); border: none; color: white; font-weight: 500; padding: 0.5rem 1rem; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(20, 15, 84, 0.2); } .device-actions-dropdown .btn:hover { background: var(--gradient-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 15, 84, 0.3); color: white; } .device-actions-dropdown .btn:focus { background: var(--gradient-primary); box-shadow: 0 0 0 3px rgba(20, 15, 84, 0.2); color: white; } .device-actions-dropdown .btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(20, 15, 84, 0.2); } .device-actions-dropdown .dropdown-menu { border: none; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 0.5rem 0; margin-top: 0.5rem; min-width: 200px; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .device-actions-dropdown .dropdown-item { padding: 0.75rem 1rem; font-weight: 500; transition: all 0.2s ease; border-radius: 0; color: var(--text-dark); } .device-actions-dropdown .dropdown-item:hover { background: var(--primary-rgba-10); color: var(--primary-color); transform: translateX(4px); } .device-actions-dropdown .dropdown-item:focus { background: var(--primary-rgba-10); color: var(--primary-color); outline: none; } .device-actions-dropdown .dropdown-item i { width: 16px; text-align: center; opacity: 0.8; } .device-actions-dropdown .dropdown-item:hover i { opacity: 1; } .device-actions-dropdown .dropdown-item.text-danger { color: var(--danger-color) !important; } .device-actions-dropdown .dropdown-item.text-danger:hover { background: rgba(220, 53, 69, 0.1); color: var(--danger-color) !important; } .device-actions-dropdown .dropdown-divider { margin: 0.5rem 0; border-color: var(--border-light); } /* Animation for dropdown menu */ .device-actions-dropdown .dropdown-menu.show { animation: dropdownSlideIn 0.2s ease-out; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Responsive adjustments */ @media (max-width: 768px) { .device-actions-dropdown .dropdown-menu { min-width: 180px; } .device-actions-dropdown .dropdown-item { padding: 0.625rem 0.875rem; font-size: 0.9rem; } } /* ======================================== CLEAN BREADCRUMBS ======================================== */ .modern-breadcrumb { margin-top: 0.5rem; } .modern-breadcrumb .breadcrumb { margin: 0; background: none; padding: 0; font-size: 0.9rem; } .modern-breadcrumb .breadcrumb-item { display: flex; align-items: center; } .modern-breadcrumb .breadcrumb-item+.breadcrumb-item::before { content: "/"; color: var(--text-muted); font-weight: 400; margin: 0 0.75rem; font-size: 0.8rem; } .breadcrumb-link { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: color 0.2s ease; display: flex; align-items: center; gap: 0.375rem; } .breadcrumb-link:hover { color: var(--primary-dark); text-decoration: none; } .breadcrumb-link i { font-size: 0.8rem; opacity: 0.8; } .breadcrumb-current { color: var(--text-dark); font-weight: 600; } /* Modern Page Headers */ .modern-page-header { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-bottom: 1px solid var(--primary-rgba-10); padding: 1.5rem 2rem; margin-bottom: 2rem; border-radius: 0 0 16px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .page-title-section { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .title-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); border-radius: 12px; color: white; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(20, 15, 84, 0.2); } .title-content { flex: 1; } .page-title { font-size: 2rem; font-weight: 700; color: var(--text-dark); margin: 0; line-height: 1.2; } .page-subtitle { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; margin-top: 0.25rem; } /* ======================================== MODERN CARD ENHANCEMENTS ======================================== */ /* Enhanced Card Styling */ .card { border: 1px solid var(--primary-rgba-10); border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .card-header { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-bottom: 1px solid var(--primary-rgba-10); border-radius: 16px 16px 0 0 !important; padding: 1.25rem 1.5rem; } .card-header h5 { font-weight: 600; color: var(--text-dark); margin: 0; } .card-body { padding: 1.5rem; } /* Modern Badge Styling */ .badge { font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 8px; font-size: 0.75rem; letter-spacing: 0.025em; } .badge.bg-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important; color: white; } .badge.bg-success { background: linear-gradient(135deg, var(--success-color) 0%, #10b981 100%) !important; color: white; } .badge.bg-info { background: linear-gradient(135deg, var(--info-alt) 0%, #06b6d4 100%) !important; color: white; } .badge.bg-warning { background: linear-gradient(135deg, var(--warning-color) 0%, #f59e0b 100%) !important; color: white; } .badge.bg-danger { background: linear-gradient(135deg, var(--danger-color) 0%, #ef4444 100%) !important; color: white; } .badge.bg-secondary { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%) !important; color: white; } /* Enhanced Button Styling */ .btn { border-radius: 8px; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.2s ease; } /* Button styles handled by universal button section */ /* ======================================== DEVICE MEASUREMENT CARDS ======================================== */ .measurement-card { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; padding: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); position: relative; backdrop-filter: blur(10px); } .measurement-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border-color: var(--primary-rgba-30); } .measurement-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-blue) 100%); opacity: 0.8; } .measurement-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .measurement-card:hover::after { opacity: 1; } .measurement-header { padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; position: relative; z-index: 1; } /* ======================================== OTP SETUP MANUAL ENTRY STYLES ======================================== */ code.code-field.flex-grow-1, .manual-setup code.code-field.flex-grow-1, .d-flex code.code-field.flex-grow-1 { display: block !important; word-break: break-all !important; white-space: normal !important; padding: 8px 12px !important; color: var(--business-primary) !important; background: rgba(0,0,0,0.03) !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 6px !important; font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; font-weight: 500 !important; font-family: var(--bs-font-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace) !important; } .manual-setup .d-flex { align-items: start; } .manual-setup .copy-btn { flex-shrink: 0; } /* ======================================== BACKUP CODES STYLES ======================================== */ .backup-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; } .backup-code-item { display: flex; align-items: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; border-radius: 8px; padding: 0.75rem; transition: all 0.2s ease; } .backup-code-item:hover { border-color: var(--business-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .backup-code { flex: 1; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 0.95rem; font-weight: 600; color: var(--business-primary) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; letter-spacing: 0.5px; } .copy-backup-code { margin-left: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 4px; } .backup-codes-print { display: none; } @media (max-width: 576px) { .backup-codes-grid { grid-template-columns: 1fr; gap: 0.75rem; } .backup-code-item { padding: 0.5rem; } .backup-code { font-size: 0.85rem; } } .measurement-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-rgba-15) 0%, var(--primary-rgba-25) 100%); display: flex; align-items: center; justify-content: center; color: var(--primary-color); flex-shrink: 0; box-shadow: 0 2px 8px var(--primary-rgba-20); transition: all 0.3s ease; } .measurement-card:hover .measurement-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 4px 12px var(--primary-rgba-30); } .measurement-icon i { font-size: 1.1rem; } .measurement-info { flex: 1; min-width: 0; } .measurement-card .measurement-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; padding: 0.25rem 0; } .measurement-card .measurement-item:last-child { margin-bottom: 0; } .measurement-card .measurement-label { color: var(--text-muted); font-weight: 500; flex-shrink: 0; margin-right: 0.75rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } .measurement-card .measurement-value { color: var(--text-dark); font-weight: 600; text-align: right; word-break: break-word; font-size: 0.9rem; background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; flex: 1; min-width: 0; overflow-wrap: break-word; } .measurement-actions { padding: 0 1rem 1rem 1rem; margin-top: auto; position: relative; z-index: 1; } .measurement-actions .btn { border-radius: 8px; font-weight: 500; font-size: 0.85rem; padding: 0.5rem 1rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .measurement-actions .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100% !important; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .measurement-actions .btn:hover::before { left: 100%; } .measurement-actions .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Modern measurement card enhancements */ .measurement-card .measurement-name { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 0.25rem; line-height: 1.3; } .measurement-card .measurement-type { font-size: 0.75rem; color: var(--text-muted); background: var(--primary-rgba-10); padding: 0.2rem 0.5rem; border-radius: 12px; display: inline-block; font-weight: 500; } .measurement-card .measurement-id { font-size: 0.7rem; color: var(--text-muted); font-family: 'Courier New', monospace; background: var(--primary-rgba-05); padding: 0.15rem 0.4rem; border-radius: 8px; display: inline-block; } /* Animation for measurement cards */ @keyframes measurementCardEntrance { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .measurement-card { animation: measurementCardEntrance 0.5s ease-out; } .measurement-card:nth-child(1) { animation-delay: 0.1s; } .measurement-card:nth-child(2) { animation-delay: 0.2s; } .measurement-card:nth-child(3) { animation-delay: 0.3s; } .measurement-card:nth-child(4) { animation-delay: 0.4s; } .measurement-card:nth-child(5) { animation-delay: 0.5s; } .measurement-card:nth-child(6) { animation-delay: 0.6s; } /* ======================================== COMPACT DASHBOARD GRID STYLES ======================================== */ /* Compact Overview Cards */ .compact-device-card, .compact-health-card, .compact-status-card, .compact-count-card { border: 1px solid var(--primary-rgba-20); border-radius: 0.5rem; transition: all 0.3s ease; } .compact-device-card:hover, .compact-health-card:hover, .compact-status-card:hover, .compact-count-card:hover { box-shadow: 0 2px 8px var(--primary-rgba-15); transform: translateY(-1px); } .device-icon-compact, .count-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-rgba-10); border-radius: 0.5rem; font-size: 1.2rem; } .health-stat-compact { text-align: center; } .health-stat-compact .fw-bold { font-size: 1.1rem; } /* Health Stat Row - New vertical layout */ .health-stat-row { padding: 0.5rem 0; border-bottom: 1px solid var(--primary-rgba-10); } .health-stat-row:last-child { border-bottom: none; } /* Device Details styling */ .device-details { line-height: 1.8; } .device-details .mb-2:last-child { margin-bottom: 0 !important; } .device-details strong { color: var(--primary-color); font-weight: 600; } /* Device Icon Large - for centered layout */ .device-icon-large { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); border-radius: 20px; box-shadow: 0 4px 12px var(--primary-rgba-20); } .device-icon-large i { font-size: 2.5rem; } /* Device Info Grid - for structured information display */ .device-info-grid { display: flex; flex-direction: column; gap: 1rem; } .info-item { padding: 0.75rem; background: var(--primary-rgba-05); border-radius: 8px; border-left: 3px solid var(--primary-color); } .info-label { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; } .info-value { font-size: 1rem; color: var(--primary-darker); padding-left: 1.75rem; } /* ============================================ COLORFUL COMPACT CARD STYLES - V2 Using Business Colors Throughout ============================================ */ /* Device Info Card - Subtle Colors */ .device-info-colorful { background: #ffffff; border: 1px solid var(--primary-200); overflow: hidden; position: relative; } .device-icon-compact-gradient { width: 38px; height: 38px; border-radius: 8px; background: var(--business-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(6, 13, 71, 0.15); flex-shrink: 0; } .device-icon-compact-gradient i { font-size: 1.2rem; } .device-info-grid-compact { display: flex; flex-direction: column; gap: 0.3rem; } .info-item-compact { display: flex; align-items: center; padding: 0.35rem 0.5rem; border-radius: 5px; transition: all 0.2s ease; } .info-item-compact i { font-size: 0.85rem; flex-shrink: 0; } .info-item-primary { background: rgba(6, 13, 71, 0.04); } .info-item-primary i { color: var(--business-primary); } .info-item-secondary { background: rgba(6, 13, 71, 0.04); } .info-item-secondary i { color: var(--business-primary); } .info-content { flex-grow: 1; min-width: 0; } .info-label-compact { display: block; color: var(--primary-darker); font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 0.05rem; } .info-value-compact { font-size: 0.93rem; font-weight: 600; color: var(--primary-darkest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Measurement Statistics Card - Subtle */ .measurement-stats-colorful { background: #ffffff; border: 1px solid var(--primary-200); } .stats-header { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.35rem; background: rgba(6, 13, 71, 0.05); border-radius: 5px; color: var(--primary-darker); font-weight: 600; font-size: 0.8rem; } .stats-header i { font-size: 0.85rem; color: var(--business-primary); } .stat-item-colorful { display: flex; align-items: center; padding: 0.5rem; border-radius: 6px; transition: background-color 0.3s ease; position: relative; overflow: hidden; background: rgba(6, 13, 71, 0.02); } .stat-item-colorful:hover { background: rgba(6, 13, 71, 0.06); } .stat-success .stat-icon { background: var(--business-success); } .stat-success .stat-value { color: var(--business-success); } .stat-info .stat-icon { background: var(--business-primary); } .stat-info .stat-value { color: var(--business-primary); } .stat-warning .stat-icon { background: var(--business-warning); } .stat-warning .stat-value, .stat-warning .stat-value-small { color: var(--business-warning); } .stat-icon { width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; margin-right: 0.5rem; flex-shrink: 0; } .stat-icon i { color: white; font-size: 0.8rem; } .stat-content { flex-grow: 1; } .stat-label { display: block; color: var(--primary-darker); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.05rem; } .stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1; } .stat-value-small { font-size: 0.8rem; font-weight: 600; } /* Connection Status Card - V2 Subtle */ .enhanced-connection-card-v2 { position: relative; overflow: hidden; transition: all 0.3s ease; } .status-online-card { background: #ffffff; border: 1px solid rgba(16, 185, 129, 0.2); } .status-offline-card { background: #ffffff; border: 1px solid rgba(239, 68, 68, 0.2); } .connection-status-wrapper-v2 { display: flex; align-items: center; gap: 0.6rem; } .connection-icon-container-v2 { position: relative; } .connection-icon-v2 { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .connection-icon-v2.online { background: var(--business-success); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); } .connection-icon-v2.offline { background: var(--business-danger); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); } .connection-icon-v2 i { color: white; font-size: 1rem; } .pulse-ring-v2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 8px; border: 2px solid var(--business-success); animation: pulse-animation 2s ease-out infinite; opacity: 0.6; } @keyframes pulse-animation { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .connection-info-v2 { flex-grow: 1; } .connection-status-v2 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; } .status-text-v2 { font-size: 1rem; font-weight: 700; } .connection-status-v2.online .status-text-v2 { color: var(--business-success); } .connection-status-v2.offline .status-text-v2 { color: var(--business-danger); } .status-badge-v2 { padding: 0.12rem 0.45rem; border-radius: 3px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; } .status-badge-v2.online { background: var(--business-success); color: white; } .status-badge-v2.offline { background: var(--business-danger); color: white; } .connection-description-v2 { display: block; color: var(--primary-darker); font-size: 0.75rem; } /* Uptime Card - Subtle */ .uptime-card-colorful { background: #ffffff; border: 1px solid rgba(16, 185, 129, 0.2); } .uptime-content-v2 { display: flex; align-items: center; gap: 0.6rem; } .uptime-icon-v2 { width: 38px; height: 38px; border-radius: 8px; background: var(--business-success); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease; } .uptime-icon-v2.uptime-critical { background: var(--bs-danger); box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25); } .uptime-icon-v2.uptime-warning { background: var(--bs-warning); box-shadow: 0 2px 8px rgba(253, 126, 20, 0.25); } .uptime-icon-v2.uptime-good { background: var(--business-success); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); } .uptime-icon-v2 i { color: white; font-size: 1.2rem; } .uptime-info { flex-grow: 1; } .uptime-label { display: block; color: var(--primary-darker); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.05rem; } .uptime-value { color: var(--business-success); font-weight: 700; font-size: 1.8rem; line-height: 1; } .uptime-value.uptime-critical { color: var(--bs-danger); /* Danger for < 50% */ } .uptime-value.uptime-warning { color: var(--bs-warning); /* Warning for 50-80% */ } .uptime-value.uptime-good { color: var(--business-success); /* Green for > 80% */ } /* Error Count Card Styles */ .compact-error-card { background: white; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; } .error-content-v2 { display: flex; align-items: center; gap: 0.6rem; } .error-icon-v2 { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease; } .error-icon-v2.error-good { background: var(--business-success); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); } .error-icon-v2.error-warning { background: var(--bs-warning); box-shadow: 0 2px 8px rgba(253, 126, 20, 0.25); } .error-icon-v2.error-critical { background: var(--bs-danger); box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25); } .error-icon-v2 i { color: white; font-size: 1.2rem; } .error-info { flex-grow: 1; } .error-label { display: block; color: var(--primary-darker); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.05rem; } .error-value { font-weight: 700; font-size: 1.8rem; line-height: 1; } .error-value.error-good { color: var(--business-success); } .error-value.error-warning { color: var(--bs-warning); } .error-value.error-critical { color: var(--bs-danger); } /* Section Headers with Dividers */ .section-header-divider { display: flex; align-items: center; margin: 1.5rem 0 1rem 0; gap: 1rem; } /* First section header divider - reduced top margin */ .section-header-divider:first-of-type { margin-top: 0.5rem; } .section-header-content { display: flex; align-items: center; white-space: nowrap; color: var(--primary-darker); } .section-header-content i { color: var(--business-primary); font-size: 1rem; } .section-header-title { margin: 0; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary-darker); } .section-header-line { flex-grow: 1; height: 1px; background: linear-gradient(to right, rgba(6, 13, 71, 0.15), rgba(6, 13, 71, 0.02)); } /* Enhanced Connection Status Card */ .enhanced-connection-card { position: relative; overflow: hidden; } .enhanced-connection-card.compact-status-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(0, 0, 0, 0.08); } .connection-status-wrapper { display: flex; align-items: center; gap: 1rem; } .connection-icon-container { position: relative; flex-shrink: 0; } .connection-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; position: relative; transition: all 0.3s ease; } .connection-icon.online { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .connection-icon.offline { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .pulse-ring { position: absolute; top: -4px; left: -4px; width: 56px; height: 56px; border: 2px solid rgba(16, 185, 129, 0.3); border-radius: 50%; animation: pulseRing 2s infinite; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } .connection-info { flex: 1; min-width: 0; } .connection-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .connection-status .status-text { font-weight: 600; font-size: 1rem; } .connection-status.online .status-text { color: #059669; } .connection-status.offline .status-text { color: #dc2626; } .status-badge { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 0.25rem; letter-spacing: 0.05em; line-height: 1; } .status-badge.online { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3); } .status-badge.offline { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3); } .connection-description { display: flex; align-items: center; font-size: 0.8rem; color: #64748b !important; } .connection-description i { font-size: 0.7rem; opacity: 0.8; } /* Hover effects for enhanced connection card */ .enhanced-connection-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .enhanced-connection-card:hover .connection-icon.online { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } .enhanced-connection-card:hover .connection-icon.offline { box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); } /* Compact Activity Feed */ .compact-activity-card { border: 1px solid var(--primary-rgba-20); border-radius: 0.5rem; height: auto; max-height: fit-content; display: flex; flex-direction: column; } .compact-activity-card .card-body { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; } /* Shared styling for both activity feed and events feed */ .activity-feed-compact, .events-feed { background: #fff; /* Minimum height: 2 measurement card rows */ /* Each card is ~220px + gap, so 2 rows = ~460px */ min-height: 460px; /* Maximum height: will be set dynamically to match grid height */ max-height: 1000px; overflow-y: auto; overflow-x: hidden; padding: 0; } /* Smooth scrollbar for both feeds */ .activity-feed-compact::-webkit-scrollbar, .events-feed::-webkit-scrollbar { width: 6px; } .activity-feed-compact::-webkit-scrollbar-track, .events-feed::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 3px; } .activity-feed-compact::-webkit-scrollbar-thumb, .events-feed::-webkit-scrollbar-thumb { background: var(--primary-rgba-30); border-radius: 3px; } .activity-feed-compact::-webkit-scrollbar-thumb:hover, .events-feed::-webkit-scrollbar-thumb:hover { background: var(--primary-rgba-50); } /* Shared item styling for both activity and event items */ .activity-item-compact, .event-item-compact { display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; min-height: 60px; box-sizing: border-box; margin: 0; background: #fff; } .activity-item-compact:hover, .event-item-compact:hover { background: var(--primary-rgba-10); } .activity-item-compact:last-child, .event-item-compact:last-child { border-bottom: none; } .activity-icon-compact { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--primary-rgba-15); border-radius: 0.375rem; margin-right: 0.75rem; font-size: 0.875rem; color: var(--primary-color); } .activity-content-compact { flex: 1; min-width: 0; } .activity-header-compact { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .activity-header-compact strong { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .activity-time-compact { font-size: 0.7rem; white-space: nowrap; color: var(--text-muted); flex-shrink: 0; } .activity-value-compact { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .activity-value-compact code { font-size: 0.8rem; background: var(--primary-rgba-10); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } /* Trend Indicators */ .trend-indicator { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; white-space: nowrap; line-height: 1; } .trend-indicator.trend-up { background: rgba(16, 185, 129, 0.1); color: #059669; } .trend-indicator.trend-down { background: rgba(239, 68, 68, 0.1); color: #dc2626; } .trend-indicator.trend-neutral { background: rgba(107, 114, 128, 0.1); color: #6b7280; } /* Event-specific styles for uptime/error/operation mode events */ .event-content-wrapper { width: 100%; } /* Event type indicators - left border colors */ .event-item-compact.online { border-left: 4px solid #28a745; } .event-item-compact.offline { border-left: 4px solid #dc3545; } .event-item-compact.error, .event-item-compact.warning { border-left: 4px solid #ffc107; } .event-item-compact.critical { border-left: 4px solid #dc3545; } .event-item-compact.operation-mode { border-left: 4px solid #17a2b8; } /* Event header and title */ .event-header-compact { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .event-title-compact { display: flex; align-items: center; font-weight: 600; font-size: 14px; color: #495057; } .event-title-compact.online { color: #28a745; } .event-title-compact.offline { color: #dc3545; } .event-title-compact.error, .event-title-compact.warning { color: #ffc107; } .event-title-compact.critical { color: #dc3545; } .event-time-compact { font-size: 12px; color: #6c757d; font-weight: 400; } .event-value-compact { font-size: 14px; color: #495057; margin-bottom: 2px; font-weight: 500; } .event-description-compact { font-size: 12px; color: #6c757d; font-weight: 400; } .no-events-message { text-align: center; padding: 2rem 1rem; color: #6b7280; } .no-events-message i { font-size: 2rem; margin-bottom: 0.5rem; color: #d1d5db; } /* Live indicator for current uptime events */ .live-indicator { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; background-color: #dcfce7; color: #166534; margin-left: 0.5rem; } .live-indicator .pulse-dot { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; margin-right: 0.25rem; animation: pulse-event 2s infinite; } @keyframes pulse-event { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Event feed dropdown positioning */ .events-feed .dropdown-menu { position: absolute; z-index: 1050; min-width: 180px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .events-feed .dropdown-menu-end { right: 0; left: auto; } .events-feed { position: relative; } .events-feed .card-body { overflow-y: auto; } .trend-indicator.trend-new { background: rgba(59, 130, 246, 0.1); color: #3b82f6; } .trend-indicator i { font-size: 0.65rem; } .trend-arrow { font-weight: bold; font-size: 0.75rem; } /* ============================================ MEASUREMENT CARD GRID - IMPROVED UX Emphasis on current value and clear CTA ============================================ */ .measurement-card-grid { background: white; border: 1px solid var(--primary-200); border-radius: 12px; padding: 1rem; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 0.75rem; } .measurement-card-grid:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); border-color: var(--primary-300); } /* Card Header */ .measurement-header-grid { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(6, 13, 71, 0.08); } .measurement-header-grid h6 { font-size: 0.95rem; line-height: 1.3; } .measurement-type-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 500; } /* HERO SECTION - Main Value Display */ .measurement-value-display-hero { text-align: center; padding: 1.25rem 0.5rem; background: rgba(6, 13, 71, 0.02); border-radius: 10px; } .value-display-large { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; min-width: 0; width: 100%; } .value-number { font-size: 2.5rem; font-weight: 700; color: var(--business-primary); line-height: 1; word-break: break-all; overflow-wrap: break-word; hyphens: auto; max-width: 100%; } .value-unit { font-size: 1.25rem; font-weight: 700; color: var(--primary-darker); opacity: 0.7; } /* Responsive font sizing for long values */ .value-number[data-long-value="true"] { font-size: 1.8rem; line-height: 1.2; word-spacing: 0.1em; } @media (max-width: 768px) { .value-number[data-long-value="true"] { font-size: 1.4rem; } } .value-display-large .trend-indicator { font-size: 1rem; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: 600; } .value-meta { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 500; } .value-meta i { font-size: 0.7rem; } /* No Data State */ .no-data-state { opacity: 0.5; display: flex; flex-direction: column; align-items: center; justify-content: center; } .no-data-state .value-display-large { flex-direction: column; gap: 0.5rem; align-items: center; } /* Quick Stats Row */ .measurement-quick-stats { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(6, 13, 71, 0.02); border-radius: 8px; gap: 0.5rem; } .quick-stat { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 0.25rem; } .quick-stat-value { font-size: 1.1rem; font-weight: 700; line-height: 1; } .quick-stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .quick-stat-divider { width: 1px; height: 2rem; background: rgba(6, 13, 71, 0.1); } /* Action Buttons - PROMINENT */ .btn-details-primary, .btn-details-secondary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; border: none; cursor: pointer; } .btn-details-primary { background: var(--business-primary); color: white; box-shadow: 0 2px 8px rgba(6, 13, 71, 0.2); } .btn-details-primary:hover { background: var(--primary-dark); color: white; box-shadow: 0 4px 12px rgba(6, 13, 71, 0.3); transform: translateY(-1px); } .btn-details-primary:hover .fa-arrow-right { transform: translateX(3px); } .btn-details-primary .fa-arrow-right { transition: transform 0.3s ease; } .btn-details-secondary { background: rgba(6, 13, 71, 0.08); color: var(--primary-darker); } .btn-details-secondary:hover { background: rgba(6, 13, 71, 0.12); color: var(--primary-darkest); } /* Old styles for backward compatibility */ .value-display { font-size: 1.4rem; font-weight: 800; color: var(--primary-color); margin-bottom: 0.25rem; line-height: 1.1; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .value-display .trend-indicator { font-size: 0.75rem; padding: 0.2rem 0.5rem; } .value-timestamp { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; } /* Legacy Grid Styles - Kept for compatibility */ .measurement-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .stat-item-grid { text-align: center; padding: 0.25rem; } .stat-value-grid { font-size: 0.85rem; font-weight: 700; line-height: 1.2; } .stat-label-grid { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .measurement-footer-grid { display: flex; justify-content: space-between; align-items: center; } .measurement-footer-grid .badge { font-size: 0.65rem; padding: 0.25rem 0.5rem; } .measurement-footer-grid .btn { padding: 0.25rem 0.6rem; font-size: 0.7rem; } /* Compact Charts Grid */ .compact-trends-card { border: 1px solid var(--primary-rgba-20); border-radius: 0.75rem; } .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; width: 100% !important; } /* Responsive chart grid - allow more columns on very wide screens */ @media (min-width: 1600px) { .charts-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .chart-item-grid { background: white; border: 1px solid var(--primary-rgba-15); border-radius: 0.5rem; padding: 1rem; transition: all 0.3s ease; } .chart-item-grid:hover { box-shadow: 0 2px 8px var(--primary-rgba-10); border-color: var(--primary-rgba-30); } /* Status Card States */ /* Responsive Design for Grid Layout */ @media (max-width: 1200px) { .charts-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 1000px) { .charts-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 900px) { .charts-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; } .chart-container { padding: 16px; min-height: 190px; } .chart-title { font-size: 0.95rem; margin-bottom: 13px; } .chart-wrapper { height: 270px; min-height: 190px; } } @media (max-width: 768px) { .charts-grid { grid-template-columns: 1fr; gap: 0.75rem; } .measurement-card-grid { padding: 0.6rem; } .measurement-header-grid { margin-bottom: 0.5rem; padding-bottom: 0.375rem; } .measurement-value-grid { padding: 0.375rem; margin-bottom: 0.5rem; } .value-display { font-size: 1.2rem; } .measurement-stats-grid { gap: 0.375rem; padding: 0.375rem; margin-bottom: 0.5rem; } .stat-item-grid { padding: 0.2rem; } .stat-value-grid { font-size: 0.8rem; } .stat-label-grid { font-size: 0.55rem; } .measurement-footer-grid .btn { padding: 0.2rem 0.5rem; font-size: 0.65rem; } } @media (max-width: 576px) { .compact-device-card, .compact-health-card, .compact-status-card, .compact-count-card { margin-bottom: 0.5rem; } .activity-feed-compact { max-height: 400px; /* Increased height for 30 items on mobile */ overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 0.25rem; } .activity-item-compact { padding: 0.75rem 0.5rem; min-height: 60px; /* Better touch targets on mobile */ box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 4px; border-radius: 8px; transition: all 0.2s ease; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.05); } .activity-item-compact:hover { background: var(--primary-rgba-08); transform: translateX(2px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .activity-icon-compact { width: 32px; height: 32px; font-size: 0.875rem; margin-right: 0.75rem; flex-shrink: 0; background: var(--primary-rgba-10); } .activity-header-compact { flex-wrap: wrap; gap: 0.25rem; align-items: flex-start; } .activity-header-compact strong { font-size: 0.875rem; font-weight: 600; flex: 1; min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-color); } .activity-time-compact { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); flex-shrink: 0; min-width: 65px; text-align: right; margin-top: 1px; } .activity-value-compact { margin-top: 0.5rem; display: flex; align-items: center; } .activity-value-compact code { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 6px; display: inline-block; min-width: 60px; text-align: center; background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-15); } } /* Additional mobile improvements for live feed */ @media (max-width: 576px) { /* Extra small devices - full width feed */ .activity-feed-compact { max-height: 350px; border-radius: 12px; } .activity-item-compact { padding: 1rem 0.75rem; margin-bottom: 6px; border-radius: 10px; } .activity-header-compact { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .activity-header-compact strong { font-size: 0.9rem; white-space: normal; overflow: visible; text-overflow: unset; min-width: unset; width: 100%; } .activity-time-compact { font-size: 0.75rem; text-align: left; min-width: unset; margin-top: 0; } .activity-value-compact code { font-size: 0.85rem; min-width: 80px; padding: 0.375rem 0.75rem; } /* Improve scrollbar on mobile */ .activity-feed-compact::-webkit-scrollbar { width: 4px; } .activity-feed-compact::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 2px; } .activity-feed-compact::-webkit-scrollbar-thumb { background: var(--primary-rgba-30); border-radius: 2px; } } /* Enhanced Settings for Device */ .setting-updated-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.25rem; } /* ======================================== DETAIL PAGE LAYOUT IMPROVEMENTS ======================================== */ /* Stats Grid for Quick Stats Cards */ .stats-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .stat-item { display: flex; align-items: center; padding: 0.75rem; background: linear-gradient(135deg, var(--primary-rgba-05) 0%, var(--primary-rgba-08) 100%); border-radius: 12px; border: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; } .stat-item:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%); } .stat-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-rgba-10) 0%, var(--primary-rgba-15) 100%); border-radius: 10px; margin-right: 0.75rem; flex-shrink: 0; border: 1px solid var(--primary-rgba-15); } .stat-icon i { font-size: 1.25rem; } .stat-content { flex: 1; } .stat-number { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); line-height: 1; margin-bottom: 0.25rem; } .stat-label { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } /* Settings List for Compact Settings Display */ .settings-list { display: flex; flex-direction: column; gap: 0.75rem; } .setting-item { padding: 1rem; background: linear-gradient(135deg, var(--primary-rgba-05) 0%, var(--primary-rgba-08) 100%); border-radius: 12px; border: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; } .setting-item:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%); border-color: var(--primary-rgba-20); } .setting-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .setting-name { flex: 1; margin-right: 1rem; } .setting-title { font-weight: 600; color: var(--text-dark); font-size: 0.95rem; margin-bottom: 0.25rem; } .setting-description { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; } .setting-type { flex-shrink: 0; } .setting-details { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .setting-required { flex-shrink: 0; } .setting-value { flex: 1; display: flex; align-items: center; gap: 0.5rem; } .setting-value-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; min-width: 50px; } .setting-code { background: var(--primary-rgba-10); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } .setting-updated { font-size: 0.75rem; color: var(--text-muted); } /* Devices List for Compact Device Display */ .devices-list { display: flex; flex-direction: column; gap: 0.75rem; } .device-item { display: flex; align-items: center; padding: 0.75rem; background: linear-gradient(135deg, var(--primary-rgba-05) 0%, var(--primary-rgba-08) 100%); border-radius: 12px; border: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; } .device-item:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%); border-color: var(--primary-rgba-20); } .device-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-rgba-10) 0%, var(--primary-rgba-15) 100%); border-radius: 8px; margin-right: 0.75rem; flex-shrink: 0; } .device-icon i { font-size: 1rem; } .device-info { flex: 1; min-width: 0; } .device-name { font-weight: 600; color: var(--text-dark); font-size: 0.9rem; margin-bottom: 0.25rem; } .device-details { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .product-name { color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .revision-badge { background: var(--success-color); color: white; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; flex-shrink: 0; } .device-actions { flex-shrink: 0; margin-left: 0.5rem; } /* Modules List for Compact Module Display */ .modules-list { display: flex; flex-direction: column; gap: 0.75rem; } .module-item { padding: 1rem; background: linear-gradient(135deg, var(--primary-rgba-05) 0%, var(--primary-rgba-08) 100%); border-radius: 12px; border: 1px solid var(--primary-rgba-10); transition: all 0.2s ease; } .module-item:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%); border-color: var(--primary-rgba-20); } .module-item.clickable-module { cursor: pointer; position: relative; } .module-item.clickable-module:hover { background: linear-gradient(135deg, var(--primary-rgba-12) 0%, var(--primary-rgba-15) 100%); border-color: var(--primary-rgba-25); transform: translateY(-2px); box-shadow: 0 4px 12px var(--primary-rgba-20); } .module-item.clickable-module:active { transform: translateY(-1px); } .module-item.clickable-module::after { content: ''; position: absolute; top: 1rem; right: 1rem; width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: contain; opacity: 0.6; transition: opacity 0.2s ease; } .module-item.clickable-module:hover::after { opacity: 1; } .module-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .module-number { flex-shrink: 0; } .module-name { font-weight: 600; color: var(--text-dark); font-size: 0.9rem; flex: 1; } .module-description { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 0.5rem; line-height: 1.4; } .module-version { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } /* Measurements List for Compact Measurement Display */ .measurements-list { display: flex; flex-direction: column; gap: 0.75rem; } .measurement-item { padding: 1rem; background: linear-gradient(135deg, var(--primary-rgba-05) 0%, var(--primary-rgba-08) 100%); border-radius: 12px; border: 1px solid var(--primary-rgba-10); transition: background-color 0.2s ease; } .measurement-item:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%); border-color: var(--primary-rgba-20); } .measurement-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .measurement-id { flex-shrink: 0; } .measurement-type { flex-shrink: 0; } .measurement-name { font-weight: 600; color: var(--text-dark); font-size: 0.95rem; margin-bottom: 0.5rem; } .measurement-description { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; margin-bottom: 0.75rem; } .measurement-details { display: flex; gap: 1.5rem; flex-wrap: wrap; } .measurement-detail-item { display: flex; align-items: center; gap: 0.5rem; } .detail-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; min-width: 70px; } .detail-value { font-size: 0.8rem; color: var(--text-dark); font-weight: 500; } /* Clickable Settings */ .clickable-setting { cursor: pointer; } .clickable-setting:hover { background: linear-gradient(135deg, var(--primary-rgba-08) 0%, var(--primary-rgba-12) 100%) !important; border-color: var(--primary-rgba-20) !important; } /* Responsive Design for Detail Pages */ @media (max-width: 992px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-item { padding: 0.5rem; } .stat-icon { width: 32px; height: 32px; margin-right: 0.5rem; } .stat-icon i { font-size: 1rem; } .stat-number { font-size: 1.25rem; } .stat-label { font-size: 0.8rem; } } @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } .setting-item, .device-item, .module-item, .measurement-item, .measurement-card { padding: 0.75rem; } .device-details { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .product-name { white-space: normal; overflow: visible; text-overflow: unset; } .module-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .module-version { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .setting-details { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .setting-value { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .measurement-details { flex-direction: column; gap: 0.75rem; } .measurement-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .measurement-details-grid { grid-template-columns: 1fr; gap: 0.5rem; } } @media (max-width: 576px) { .measurement-card { margin: 0; } .measurement-header { padding: 0.75rem; } .measurement-actions { padding: 0 0.75rem 0.75rem 0.75rem; } .measurement-item { margin-bottom: 0.375rem; font-size: 0.8rem; } .measurement-label { font-size: 0.75rem; margin-right: 0.5rem; } .measurement-value { font-size: 0.8rem; } .measurement-actions .btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; } .setting-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .device-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .device-icon { margin-right: 0; margin-bottom: 0.5rem; } .device-actions { margin-left: 0; align-self: flex-end; } } /* ===== MOBILE RESPONSIVE TABLES ===== */ /* Mobile-First Table Cards - transforms tables into cards on mobile */ @media (max-width: 768px) { /* Hide table, show mobile cards */ .table-responsive .modern-table { display: none; } /* Mobile card container */ .mobile-table-cards { display: block !important; padding: 1rem; gap: 1rem; } /* Individual mobile card */ .mobile-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 1rem; position: relative; transition: all 0.3s ease; } .mobile-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .mobile-card.clickable { cursor: pointer; } /* Mobile card header */ .mobile-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef; } .mobile-card-title { font-size: 1.125rem; font-weight: 600; color: var(--primary-color); margin: 0; display: flex; align-items: center; gap: 0.5rem; } .mobile-card-title i { font-size: 1rem; opacity: 0.8; } /* Mobile card content grid */ .mobile-card-content { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .mobile-field { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; } .mobile-field-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 1rem; } .mobile-field-value { font-size: 0.95rem; color: var(--text-dark); font-weight: 500; text-align: right; flex: 1; } /* Mobile card footer with actions */ .mobile-card-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e9ecef; display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; } .mobile-card-footer .btn { padding: 0.375rem 0.75rem; font-size: 0.875rem; } /* Status indicators in mobile cards */ .mobile-status-badge { padding: 0.5rem 0.875rem; border-radius: 24px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transition: all 0.2s ease; } .mobile-status-badge.status-healthy { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.08)); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); } .mobile-status-badge.status-issues { background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(107, 114, 128, 0.08)); color: #374151; border: 1px solid rgba(107, 114, 128, 0.25); } .mobile-status-badge.status-updates { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.08)); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.25); } .mobile-status-badge.status-critical { background: linear-gradient(135deg, rgba(220, 53, 69, 0.12), rgba(220, 53, 69, 0.08)); color: #991b1b; border: 1px solid rgba(220, 53, 69, 0.25); } .mobile-status-badge.status-error { background: linear-gradient(135deg, rgba(234, 88, 12, 0.12), rgba(234, 88, 12, 0.08)); color: #9a3412; border: 1px solid rgba(234, 88, 12, 0.25); } .mobile-status-badge.status-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.08)); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.25); } .mobile-status-badge i { font-size: 0.85rem; opacity: 0.9; } /* Mobile WiFi icon styling for offline status */ .mobile-status-badge.status-issues .fa-wifi { color: #6b7280 !important; filter: drop-shadow(0 1px 2px rgba(107, 114, 128, 0.4)); animation: pulse-gray 2s infinite; } .mobile-status-badge span { white-space: nowrap; } /* Enhanced mobile card header */ .mobile-card-header { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 0.75rem; } .mobile-card-title { font-size: 1.1rem; font-weight: 600; color: #1f2937; margin: 0; line-height: 1.3; } .mobile-card-header .fa-chevron-right { font-size: 0.9rem; opacity: 0.6; margin-top: 0.25rem; } /* Mobile search and filters */ .mobile-filters { padding: 1rem; background: var(--primary-rgba-05); border-radius: 12px; margin-bottom: 1rem; } .mobile-search { width: 100% !important; padding: 0.75rem 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; font-size: 1rem; background: white; } .mobile-search:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-rgba-10); } /* Mobile filter chips */ .mobile-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .filter-chip { background: var(--primary-color); color: white; padding: 0.375rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.375rem; } .filter-chip button { background: none; border: none; color: white; cursor: pointer; padding: 0; margin-left: 0.25rem; } /* Empty state for mobile */ .mobile-empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); } .mobile-empty-state i { font-size: 3rem; margin-bottom: 1rem; color: var(--text-muted); } .mobile-empty-state h4 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--primary-color); } .mobile-empty-state p { margin-bottom: 1.5rem; font-size: 0.95rem; } } /* Desktop: Hide mobile cards, show table */ @media (min-width: 769px) { .mobile-table-cards { display: none !important; } } /* Tablet improvements */ @media (max-width: 1024px) and (min-width: 769px) { .table-responsive { border-radius: 8px; overflow: hidden; } .modern-table th { padding: 0.75rem 0.5rem; font-size: 0.875rem; } .modern-table td { padding: 1rem 0.5rem; font-size: 0.875rem; } /* Stack action buttons vertically on tablet */ .table-actions { display: flex; flex-direction: column; gap: 0.25rem; } .table-actions .btn { padding: 0.375rem 0.5rem; font-size: 0.75rem; } } /* Mobile header improvements */ @media (max-width: 768px) { .card-header .d-flex { flex-direction: column; align-items: flex-start !important; gap: 1rem; } .card-header .badge { align-self: flex-end; } /* Mobile filter toggle button */ .mobile-filter-toggle { display: block !important; margin-top: 0.75rem; } .mobile-filter-toggle .btn { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: white; backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 48px; } .mobile-filter-toggle .btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.15); } .mobile-filter-toggle .btn.active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.15); } .mobile-filter-toggle .toggle-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.875rem; opacity: 0.9; } .mobile-filter-toggle .btn.active .toggle-icon { transform: rotate(180deg); } /* Mobile filter improvements */ .card-header .device-filters-row, .card-header .revision-filters-row, .card-header .customer-filters-row, .card-header .product-filters-row { margin-top: 0; gap: 0.5rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease; } .card-header .device-filters-row.show, .card-header .revision-filters-row.show, .card-header .customer-filters-row.show, .card-header .product-filters-row.show { max-height: 2000px; opacity: 1; margin-top: 1rem; } .card-header .col-md-2, .card-header .col-md-3, .card-header .col-md-4, .card-header .col-md-5, .card-header .col-md-8 { width: 100% !important; margin-bottom: 0; flex: 1 1 100%; } /* Enhanced mobile filter styling - maintains glassmorphic design */ .card-header .form-label { font-size: 0.7rem !important; font-weight: 600; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.85); } .card-header .modern-select { width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 0.95rem; border-radius: 10px; height: 48px; /* Glassmorphic design maintained from desktop */ } .search-input-container { position: relative; width: 100% !important; } .card-header .search-input { width: 100% !important; padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.95rem; border-radius: 10px; height: 48px; /* Glassmorphic design maintained from desktop */ } .card-header .search-icon { left: 1rem; right: auto; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; } .card-header .search-input:focus + .search-icon { color: rgba(255, 255, 255, 0.95); } .card-header .btn-outline-light { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; border-radius: 10px; height: 48px; /* Glassmorphic design maintained from desktop */ } .search-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); } .modern-select { width: 100% !important; } } /* Loading states for mobile */ .mobile-card.loading { opacity: 0.6; pointer-events: none; } .mobile-card.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid var(--primary-rgba-20); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Improved touch targets for mobile */ @media (max-width: 768px) { .mobile-card.clickable { min-height: 44px; /* iOS recommended touch target */ display: flex; flex-direction: column; justify-content: center; } .btn { min-height: 44px; padding: 0.75rem 1rem; } .mobile-card-footer .btn { min-height: 40px; padding: 0.625rem 1rem; } } /* ===== MODERN CHARTS DASHBOARD ===== */ /* Charts Section Header */ .modern-charts-section { background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); border-radius: 20px; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(20, 15, 84, 0.05); position: relative; overflow: hidden; } .modern-charts-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); } .charts-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; gap: 1.5rem; } .charts-header-content .charts-title { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; line-height: 1.2; } .charts-header-content .charts-subtitle { font-size: 1.1rem; color: var(--text-secondary); margin: 0; font-weight: 400; } .charts-controls { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; } .time-range-selector, .view-controls { display: flex; flex-direction: column; gap: 0.5rem; } .control-label { font-size: 0.875rem; font-weight: 600; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; } .modern-select { padding: 0.75rem 1rem; border: 2px solid var(--primary-rgba-20); border-radius: 12px; background: white; color: var(--primary-color); font-weight: 500; min-width: 180px; transition: all 0.3s ease; } .modern-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-rgba-10); } .mobile-responsive-controls { flex-wrap: nowrap; } .mobile-responsive-controls .btn { border-radius: 8px; padding: 0.75rem 1rem; font-weight: 500; transition: all 0.3s ease; border: 2px solid var(--primary-rgba-20); } .mobile-responsive-controls .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .mobile-responsive-controls .btn:not(:first-child):not(:last-child) { border-radius: 0; border-left: none; } .mobile-responsive-controls .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .mobile-responsive-controls .btn.active { background: var(--gradient-primary); border-color: var(--primary-color); color: white; box-shadow: 0 4px 12px var(--primary-rgba-25); } /* Responsive Charts Grid */ .responsive-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 100% !important; gap: 2rem; transition: all 0.3s ease; /* Fix for mobile Chrome */ touch-action: manipulation; -webkit-overflow-scrolling: touch; } /* Limit to maximum 2 charts per row */ @media (min-width: 900px) { .responsive-charts-grid { grid-template-columns: repeat(2, 1fr); } } /* Modern Chart Cards */ .modern-chart-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid rgba(20, 15, 84, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .modern-chart-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s ease; } .modern-chart-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(20, 15, 84, 0.12); } .modern-chart-card:hover::before { opacity: 1; } /* Chart Card Header */ .chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .chart-info { flex: 1; min-width: 0; } .chart-title { font-size: 1.25rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.5rem; line-height: 1.3; display: flex; align-items: center; } .chart-type-badge { padding: 0.375rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-primary { background: var(--primary-rgba-10); color: var(--primary-color); } .badge-success { background: rgba(16, 185, 129, 0.1); color: #059669; } .badge-info { background: rgba(6, 182, 212, 0.1); color: var(--info-dark); } .badge-warning { background: rgba(245, 158, 11, 0.1); color: #d97706; } /* Chart Controls */ .chart-controls { display: flex; align-items: center; gap: 1rem; } .chart-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; } .status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s infinite; } .status-loading { background: #6b7280; } .status-connected { background: #10b981; } .status-error { background: #ef4444; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .chart-menu-btn { border: none !important; box-shadow: none !important; color: var(--text-secondary); padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; } .chart-menu-btn:hover { background: var(--primary-rgba-10); color: var(--primary-color); } /* Chart Content */ .chart-content { display: flex; flex-direction: column; gap: 1.5rem; } .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem; background: var(--primary-rgba-05); border-radius: 12px; } .stat-item { text-align: center; } .stat-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; } .stat-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; } /* Chart Wrapper */ .chart-wrapper { position: relative; height: 300px; background: white; border-radius: 12px; overflow: hidden; border: 1px solid var(--primary-rgba-10); } .chart-wrapper canvas { width: 100% !important; height: 100% !important; border-radius: 12px; } .chart-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .chart-overlay.hidden { opacity: 0; pointer-events: none; } .loading-spinner { text-align: center; color: var(--primary-color); } .spinner { width: 40px; height: 40px; border: 3px solid var(--primary-rgba-20); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Chart Focus Indicator */ .chart-focus-indicator { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; display: flex; align-items: center; gap: 6px; z-index: 10; } .chart-wrapper:hover .chart-focus-indicator { opacity: 1; } .chart-wrapper { cursor: pointer; transition: transform 0.2s ease; } .chart-wrapper:hover { transform: scale(1.02); } /* Single Chart View */ .single-chart-view { background: white; border-radius: 16px; padding: 2rem; min-height: 600px; } .single-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--primary-rgba-10); } .single-chart-header h3 { font-size: 1.75rem; font-weight: 600; color: var(--primary-color); margin: 0; } .single-chart-controls { display: flex; align-items: center; gap: 1rem; } .single-chart-controls .time-range-selector { margin: 0; } .single-chart-controls .time-range-selector .control-label { font-size: 0.75rem; margin-bottom: 0.25rem; } .single-chart-controls .modern-select { min-width: 150px; } .single-chart-content { height: 500px; position: relative; } .single-chart-content canvas { width: 100% !important; height: 100% !important; } /* Empty State */ .charts-empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); } .empty-state-content i { margin-bottom: 2rem; opacity: 0.5; } .empty-state-content h3 { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 1rem; } .empty-state-content p { font-size: 1.1rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } /* Responsive Design */ @media (max-width: 1200px) { .responsive-charts-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 900px) and (min-width: 769px) { .responsive-charts-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 768px) { .modern-charts-section { padding: 1rem; border-radius: 12px; } .charts-header { flex-direction: column; align-items: stretch; gap: 1rem; } .charts-header-content .charts-title { font-size: 1.5rem; } .charts-controls { flex-direction: column; gap: 1rem; } .time-range-selector, .view-controls { width: 100% !important; } .modern-select { width: 100% !important; min-width: unset; } .mobile-responsive-controls { width: 100% !important; } .mobile-responsive-controls .btn { flex: 1; padding: 1rem; } .responsive-charts-grid { grid-template-columns: 1fr !important; gap: 1.5rem; /* Chrome mobile specific fixes */ min-width: 0; width: 100%; overflow-x: hidden; } .modern-chart-card { padding: 1rem; } .chart-card-header { flex-direction: column; align-items: stretch; gap: 1rem; } .chart-controls { justify-content: space-between; } .chart-stats { grid-template-columns: 1fr; gap: 0.75rem; } .stat-item { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--primary-rgba-10); } .stat-item:last-child { border-bottom: none; } .stat-value { font-size: 1.25rem; } .chart-wrapper { height: 250px; } .single-chart-view { padding: 1rem; min-height: 400px; } .single-chart-content { height: 300px; } } @media (max-width: 576px) { .modern-charts-section { margin-left: -0.5rem; margin-right: -0.5rem; border-radius: 0; } .charts-header-content .charts-title { font-size: 1.25rem; } .charts-header-content .charts-subtitle { font-size: 1rem; } .modern-chart-card { border-radius: 12px; margin: 0 -0.5rem; } .chart-title { font-size: 1.1rem; } .chart-wrapper { height: 200px; } .mobile-responsive-controls .btn span { display: none !important; } .charts-empty-state { padding: 2rem 1rem; } } /* Fullscreen Mode */ .charts-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: white; padding: 2rem; overflow-y: auto; } .charts-fullscreen .responsive-charts-grid { grid-template-columns: repeat(2, 1fr); max-width: 100% !important; } .charts-fullscreen .chart-wrapper { height: 400px; } @media (max-width: 768px) { .charts-fullscreen { padding: 1rem; } .charts-fullscreen .responsive-charts-grid { grid-template-columns: 1fr; } .charts-fullscreen .chart-wrapper { height: 300px; } } /* Chrome Mobile Specific Fixes */ @media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px) { .responsive-charts-grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 0 !important; margin: 0 !important; } .modern-chart-card { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; overflow: hidden !important; } .chart-wrapper { width: 100% !important; min-width: 0 !important; overflow: hidden !important; } } /* ================================================ ERROR HISTORY STYLES ================================================ */ /* Error Statistics Cards */ .error-stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; min-height: 80px; } .error-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } .error-stat-card .card-body { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Error History Filters */ .error-history-filters .form-label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; } .error-history-filters .form-control, .error-history-filters .form-select { font-size: 0.875rem; border: 1px solid #e1e5e9; border-radius: 0.375rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .error-history-filters .form-control:focus, .error-history-filters .form-select:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } /* Error History Mobile Layout */ .error-history-mobile { padding: 0 1rem; } .error-card-mobile { background: white; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: box-shadow 0.2s ease; } .error-card-mobile:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .error-card-mobile .badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .error-description { background: #f8f9fa; border-radius: 0.25rem; padding: 0.5rem; margin-top: 0.5rem; } /* Error History Button Styling */ .error-history-btn { background: #007bff !important; border: 1px solid #0056b3 !important; color: white !important; transition: all 0.2s ease; font-weight: 500; } .error-history-btn:hover { background: #0056b3 !important; border-color: #004085 !important; color: white !important; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 123, 255, 0.3); } /* Pagination Mobile Styling */ .pagination-mobile .page-link { padding: 0.5rem 0.75rem; font-size: 0.875rem; } /* Responsive adjustments */ @media (max-width: 576px) { /* Error Statistics - 2 columns on mobile */ .error-stat-card { min-height: 70px; } .error-stat-card .card-body { padding: 0.75rem 0.5rem; } .error-stat-card h4 { font-size: 1.25rem; margin-bottom: 0.25rem; } .error-stat-card small { font-size: 0.75rem; } /* Filter form adjustments */ .error-history-filters .row { margin: 0; } .error-history-filters .col-6, .error-history-filters .col-12 { padding-left: 0.5rem; padding-right: 0.5rem; } .error-history-filters .btn { font-size: 0.875rem; padding: 0.5rem 1rem; } /* Mobile card spacing */ .error-card-mobile { margin-bottom: 0.75rem; padding: 0.75rem; } .error-card-mobile .badge { font-size: 0.7rem; padding: 0.2rem 0.4rem; } /* Hide extra text on very small screens */ .d-none.d-sm-inline { display: none !important; } /* Pagination adjustments */ .pagination-mobile { justify-content: center; margin-bottom: 0; } .pagination-mobile .page-item { margin: 0 2px; } .pagination-mobile .page-link { padding: 0.375rem 0.5rem; font-size: 0.8rem; min-width: 2.5rem; text-align: center; } } @media (max-width: 768px) { /* Improved tablet layout */ .error-history-filters .form-label { margin-bottom: 0.25rem; } .error-history-filters .btn { margin-bottom: 0.5rem; } /* Table responsive improvements */ .table-responsive { border-radius: 0.5rem; overflow: hidden; } /* Card header improvements */ .card-header h5 { font-size: 1.1rem; } /* Statistics grid improvements */ .error-stat-card .card-body { padding: 1rem 0.75rem; } } @media (min-width: 992px) { /* Desktop enhancements */ .error-stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; } .error-card-mobile { display: none; /* Hide mobile cards on desktop */ } /* Enhanced table styling */ .table thead th { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 2px solid #dee2e6; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; } .table tbody tr { transition: background-color 0.2s ease; } .table tbody tr:hover { background-color: #f8f9fa; } /* Filter improvements */ .error-history-filters .btn { transition: all 0.2s ease; } .error-history-filters .btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } } /* Card header buttons now use universal button styles */ /* ========================================== MODULE VERSION CARDS - DEVICE DETAIL ========================================== */ /* Modern Module Version Grid */ .module-versions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; } /* Module Version Card */ .module-version-card { background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid #e9ecef; border-radius: 12px; padding: 1.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .module-version-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #007bff 0%, #0056b3 100%); opacity: 0; transition: opacity 0.3s ease; } .module-version-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15); border-color: rgba(0, 123, 255, 0.2); } .module-version-card:hover::before { opacity: 1; } /* Module Header */ .module-header { display: flex; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f1f3f4; } .module-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 0.875rem; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } .module-info { flex-grow: 1; min-width: 0; } .module-name { font-weight: 600; font-size: 1.05rem; color: #212529; margin: 0 0 0.25rem 0; line-height: 1.3; } .module-number { font-size: 0.8rem; color: #6c757d; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Module Version Info */ .module-version-info { flex-grow: 1; display: flex; flex-direction: column; } .version-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding: 0.5rem 0; } .version-item:last-child { margin-bottom: 0; } .version-label { font-size: 0.85rem; color: #6c757d; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; } .version-value { font-size: 0.9rem; color: #212529; font-weight: 600; font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace; background: #f8f9fa; padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid #e9ecef; } /* Not Installed State */ .version-item.no-version { justify-content: center; padding: 1rem; background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%); border-radius: 8px; border: 1px dashed rgba(220, 53, 69, 0.3); margin-top: auto; } .no-version-text { color: #dc3545; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.5rem; } .no-version-text i { font-size: 1rem; } /* Device Detail Grid Layout */ .device-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } /* Top Section - Device Info and Error Monitoring */ .device-info-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* Module Section - Full Width */ .modules-section { grid-column: 1 / -1; } /* Bottom Section - Measurements and Settings */ .measurements-settings-section { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; } /* Responsive Grid Adjustments */ @media (max-width: 1200px) { .module-versions-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .measurements-settings-section { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 768px) { .device-info-section { grid-template-columns: 1fr; gap: 1.5rem; } .module-versions-grid { grid-template-columns: 1fr; gap: 1rem; } .module-version-card { padding: 1rem; } .module-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; } .module-icon { width: 40px; height: 40px; margin-right: 0.75rem; font-size: 1rem; } .module-name { font-size: 1rem; } .module-number { font-size: 0.75rem; } } /* Empty State Styling */ .modules-empty-state { text-align: center; padding: 3rem 1.5rem; background: var(--bg-gradient-light); border-radius: 12px; border: 2px dashed var(--bg-gray-dark); } .modules-empty-state i { color: var(--text-muted); margin-bottom: 1.5rem; } .modules-empty-state h6 { color: var(--text-secondary); font-weight: 600; margin-bottom: 0.75rem; } .modules-empty-state p { color: var(--text-muted); margin: 0; font-size: 0.9rem; } /* ===== PASSWORD RESET FUNCTIONALITY ===== */ /* Success message styling for password reset confirmation */ .success-message { background: linear-gradient(135deg, var(--business-success), #047857); color: white; border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.2); } .success-message .message-item { display: flex; align-items: center; gap: 12px; } .success-message .message-item i { color: #10b981; font-size: 1.1rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } /* Back to login link styling */ .form-options { margin-top: 20px; text-align: center; } .form-options .forgot-password, .form-options .back-to-login { color: #6b7280; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; position: relative; overflow: hidden; } .form-options .forgot-password::before, .form-options .back-to-login::before { content: ''; position: absolute; top: 0; left: -100%; width: 100% !important; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent); transition: left 0.5s ease; } .form-options .forgot-password:hover, .form-options .back-to-login:hover { color: var(--business-accent); text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2); } .form-options .forgot-password:hover::before, .form-options .back-to-login:hover::before { left: 100%; } .form-options .forgot-password i, .form-options .back-to-login i { font-size: 12px; transition: transform 0.3s ease; } .form-options .forgot-password:hover i { transform: translateX(2px); } .form-options .back-to-login:hover i { transform: translateX(-2px); } /* Enhanced input validation states for email */ .input-wrapper.success .modern-input { border-color: var(--business-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } .input-wrapper.warning .modern-input { border-color: var(--business-warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } .input-wrapper.success .modern-label i { color: var(--business-success); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4)); } .input-wrapper.warning .modern-label i { color: var(--business-warning); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4)); } /* Enhanced animation for password reset form */ @keyframes emailValidation { 0% { transform: scale(1); } 50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } 100% { transform: scale(1); } } .input-wrapper.success { animation: emailValidation 0.6s ease-in-out; } /* Mobile responsiveness for password reset */ @media (max-width: 768px) { .form-options .forgot-password, .form-options .back-to-login { font-size: 13px; padding: 6px 10px; } .success-message { padding: 0.75rem; margin-bottom: 1rem; } .success-message .message-item { gap: 8px; } .success-message .message-item i { font-size: 1rem; } } /* Password Reset Confirmation Page Styles */ .confirmation-container { text-align: center; padding: 2rem 0; } .confirmation-icon { font-size: 4rem; color: #28a745; margin-bottom: 1.5rem; animation: bounce 2s infinite; } .confirmation-message h2 { color: #333; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 600; } .confirmation-message p { color: #666; margin-bottom: 0.5rem; line-height: 1.6; } .note-text { font-size: 0.9rem; color: #888; font-style: italic; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Mobile responsiveness for confirmation page */ @media (max-width: 768px) { .confirmation-icon { font-size: 3rem; } .confirmation-message h2 { font-size: 1.3rem; } } /* ===== SIMPLE LINK STYLING ===== */ /* Clean links using business primary color with hover underline */ .simple-link { color: var(--business-primary); text-decoration: none; font-weight: 500; font-size: 14px; position: relative; transition: color 0.3s ease; display: inline-block; } .simple-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; border-radius: 1px; background: var(--business-primary); transition: width 0.3s ease; } .simple-link:hover { color: var(--business-primary); text-decoration: none; } .simple-link:hover::after { width: 100% !important; } /* Support link in footer */ .footer-link { color: var(--business-primary) !important; text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; } .footer-link:hover { color: #ffffff !important; } .footer-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--business-primary); transition: width 0.3s ease; } .footer-link:hover::after { width: 100% !important; } /* ================================================== VERSION TIMELINE COMPONENT ================================================== */ /* Version Timeline */ .version-timeline { position: relative; } .timeline-item { display: flex; align-items: flex-start; margin-bottom: 24px; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 48px; bottom: -24px; width: 2px; background: #e9ecef; } .timeline-marker { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; flex-shrink: 0; background: #f8f9fa; border: 2px solid #e9ecef; color: #6c757d; position: relative; z-index: 1; } .timeline-marker.current { background: #198754; border-color: #198754; color: white; } .timeline-marker.future { background: #fff3cd; border-color: #ffc107; color: #856404; } .timeline-content { flex-grow: 1; background: #f8f9fa; border-radius: 8px; padding: 16px; min-height: 46px; display: flex; flex-direction: column; justify-content: center; } .version-header { display: flex; justify-content: space-between; align-items: flex-start; } .version-info { flex-grow: 1; } .version-title { color: #212529; font-weight: 600; margin: 0; display: flex; align-items: center; } .version-date { font-size: 13px; color: #6c757d; margin-top: 4px; } .version-details { padding-top: 8px; border-top: 1px solid #dee2e6; } .version-details:first-of-type { border-top: none; padding-top: 8px; } .version-details + .version-details { padding-top: 4px; border-top: none; } /* Future version styling */ .timeline-item.future .timeline-content { background: #f8f9fa; border: 1px dashed #ffc107; opacity: 0.8; } .timeline-item.future .version-title { color: #856404; } /* ================================================== STATISTICS CARDS COMPONENT ================================================== */ /* Statistics Cards */ .stat-card { background: white; border-radius: 12px; padding: 20px; display: flex; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e9ecef; transition: all 0.3s ease; height: 100%; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.12); } .stat-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 16px; color: white; font-size: 24px; flex-shrink: 0; } .stat-content { flex-grow: 1; } .stat-value { font-size: 32px; font-weight: 700; color: #212529; line-height: 1; } .stat-label { font-size: 14px; color: #6c757d; font-weight: 500; margin-top: 4px; } /* ================================================== DEVICE VERSION CARDS (REVISION MODULE DETAIL) ================================================== */ .device-version-card { border: 1px solid rgba(0, 123, 255, 0.1); border-radius: 8px; padding: 1rem; transition: all 0.2s ease; height: 100%; } .device-version-card:hover { border-color: rgba(0, 123, 255, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); } .clickable-card { cursor: pointer; } .clickable-card:hover { border-color: var(--business-accent) !important; box-shadow: 0 6px 20px rgba(0, 212, 255, 0.2) !important; } .device-version-card.clickable-card { position: relative; } .device-version-card.clickable-card::after { content: ''; position: absolute; top: 1rem; right: 1rem; width: 8px; height: 8px; border-top: 2px solid rgba(0, 123, 255, 0.4); border-right: 2px solid rgba(0, 123, 255, 0.4); transform: rotate(45deg); transition: opacity 0.2s ease; } .device-version-card.clickable-card:hover::after { opacity: 1; } .device-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .device-icon { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; font-size: 1.2rem; } .device-info { flex: 1; } .device-name { font-weight: 600; margin-bottom: 0.25rem; } .device-name a { color: #007bff; text-decoration: none; } .device-name a:hover { color: #0056b3; } .device-status { margin-bottom: 0.5rem; } .device-version-info { border-top: 1px solid rgba(0, 123, 255, 0.1); padding-top: 0.75rem; } .version-details { display: flex; flex-direction: column; gap: 0.5rem; } .version-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .version-label { font-weight: 500; color: #212529; flex-shrink: 0; } .dropdown-item.disabled { background-color: #f8f9fa !important; color: #6c757d !important; pointer-events: none; opacity: 0.6; border-left: 3px solid #dee2e6; } .dropdown-item.disabled:hover { background-color: #f8f9fa !important; color: #6c757d !important; transform: none; } .dropdown-item.disabled i { opacity: 0.5; } /* Clickable module styles */ .clickable-module { cursor: pointer; transition: all 0.2s ease; position: relative; } .clickable-module:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .module-click-indicator { position: absolute; top: 0.5rem; right: 0.5rem; opacity: 0; transition: opacity 0.2s ease; color: #007bff; } .clickable-module:hover .module-click-indicator { opacity: 1; } /* Module version status styles */ .version-item.update-available .update-badge { background: #ffc107; color: #000; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; } .version-item.needs-update .needs-update-text { background: #ffc107; color: #000; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; } .version-item.no-version .no-version-text { background: #6c757d; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; } /* ===== DOCUMENT LIST COMPONENT STYLES ===== */ /* Document list container */ .document-list { display: flex; flex-direction: column; gap: 1rem; } /* Individual document item */ .document-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); transition: all 0.3s ease; position: relative; overflow: hidden; } .document-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); opacity: 0; transition: opacity 0.3s ease; } .document-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(6, 13, 71, 0.1); border-color: var(--business-accent); } .document-item:hover::before { opacity: 1; } /* Document icon */ .document-icon { flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); border-radius: 0.75rem; color: white; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(6, 13, 71, 0.2); } .document-icon i { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } /* Document content area */ .document-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* Document header */ .document-header { display: flex; flex-direction: column; gap: 0.25rem; } .document-title { margin: 0; } .document-link { color: var(--business-primary); text-decoration: none; font-weight: 600; font-size: 1.1rem; line-height: 1.4; transition: color 0.2s ease; } .document-link:hover { color: var(--business-secondary); text-decoration: underline; } /* Document metadata */ .document-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: #6b7280; } .document-date, .document-size { display: flex; align-items: center; gap: 0.25rem; } .document-date i, .document-size i { color: var(--business-info); font-size: 0.75rem; } /* Document actions */ .document-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .document-actions .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; border-radius: 0.5rem; transition: all 0.2s ease; } .document-actions .btn-outline-primary { border-color: var(--business-primary); color: var(--business-primary); } .document-actions .btn-outline-primary:hover { background-color: var(--business-primary); border-color: var(--business-primary); color: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(6, 13, 71, 0.2); } .document-actions .btn-outline-secondary { border-color: var(--business-secondary); color: var(--business-secondary); } .document-actions .btn-outline-secondary:hover { background-color: var(--business-secondary); border-color: var(--business-secondary); color: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(16, 160, 218, 0.2); } /* Document type badge */ .document-type { flex-shrink: 0; align-self: flex-start; } .document-type .badge { font-size: 0.75rem; padding: 0.375rem 0.75rem; border-radius: 1rem; font-weight: 500; letter-spacing: 0.025em; } .document-type .bg-primary { background: linear-gradient(135deg, var(--business-primary) 0%, #1a2968 100%) !important; } .document-type .bg-info { background: linear-gradient(135deg, var(--business-info) 0%, var(--info-dark) 100%) !important; } .document-type .bg-success { background: linear-gradient(135deg, var(--business-success) 0%, #047857 100%) !important; } .document-type .bg-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; } /* Document empty state */ .document-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; text-align: center; } .document-empty-state .empty-icon { margin-bottom: 1.5rem; color: #d1d5db; } .document-empty-state .empty-title { color: #6b7280; font-weight: 600; margin-bottom: 0.5rem; font-size: 1.125rem; } .document-empty-state .empty-subtitle { color: #9ca3af; margin-bottom: 1.5rem; font-size: 0.875rem; max-width: 300px; line-height: 1.5; } .document-empty-state .btn { background: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 100%); border: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem; color: white; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(6, 13, 71, 0.3); } .document-empty-state .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 13, 71, 0.4); } /* Responsive design for document list */ @media (max-width: 768px) { .document-item { flex-direction: column; gap: 0.75rem; padding: 0.75rem; } .document-icon { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .document-meta { flex-direction: column; gap: 0.5rem; } .document-actions { flex-direction: column; } .document-actions .btn-sm { font-size: 0.875rem; padding: 0.5rem 1rem; } } @media (max-width: 576px) { .document-list { gap: 0.75rem; } .document-item { padding: 0.5rem; gap: 0.5rem; } .document-link { font-size: 1rem; } .document-empty-state { padding: 2rem 0.5rem; } } /* ================================================== MANDATORY 2FA SETUP STYLES ================================================== */ /* Main container for the mandatory setup */ .otp-mandatory-setup { margin-top: 1rem !important; } /* Steps container */ .otp-mandatory-setup .setup-steps { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } /* Individual setup step */ .otp-mandatory-setup .setup-step { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 0.2rem !important; transition: all 0.3s ease !important; } /* Step header with number and title */ .otp-mandatory-setup .step-header { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-bottom: 0.5rem !important; } .otp-mandatory-setup .step-number { flex-shrink: 0 !important; width: 28px !important; height: 28px !important; background: linear-gradient(135deg, var(--business-primary), var(--business-accent)) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; font-weight: 600 !important; font-size: 13px !important; box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important; } .otp-mandatory-setup .step-header h4 { color: var(--business-primary) !important; font-weight: 600 !important; margin: 0 !important; font-size: 16px !important; } .otp-mandatory-setup .setup-step > p { color: #2c3e50 !important; margin: 0 0 0.75rem 0 !important; font-size: 14px !important; line-height: 1.4 !important; } /* QR Code container */ .otp-mandatory-setup .qr-container { display: flex !important; justify-content: center !important; margin: 0.75rem 0 !important; } .otp-mandatory-setup .qr-code { max-width: 180px !important; height: auto !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; background: white !important; padding: 8px !important; } .otp-mandatory-setup .qr-placeholder { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 180px !important; height: 180px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.5) !important; border: 1px dashed rgba(255, 255, 255, 0.2) !important; } .otp-mandatory-setup .qr-placeholder i { font-size: 2rem !important; margin-bottom: 0.5rem !important; } .otp-mandatory-setup .qr-placeholder span { font-size: 12px !important; } /* Manual setup section */ .otp-mandatory-setup .manual-setup { margin-top: 0.75rem !important; } .otp-mandatory-setup .manual-setup details { background: rgba(0, 0, 0, 0.15) !important; border-radius: 6px !important; overflow: hidden !important; } .otp-mandatory-setup .manual-setup summary { padding: 0.75rem !important; color: rgba(255, 255, 255, 0.95) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; user-select: none !important; transition: all 0.2s ease !important; list-style: none !important; } .otp-mandatory-setup .manual-setup summary::-webkit-details-marker { display: none !important; } .otp-mandatory-setup .manual-setup summary::before { content: "▶" !important; margin-right: 0.5rem !important; transition: transform 0.2s ease !important; display: inline-block !important; } .otp-mandatory-setup .manual-setup details[open] summary::before { transform: rotate(90deg) !important; } .otp-mandatory-setup .manual-setup summary:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--business-primary) !important; } .otp-mandatory-setup .manual-fields { padding: 0.75rem !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .otp-mandatory-setup .manual-field { margin-bottom: 0.5rem !important; } .otp-mandatory-setup .manual-field:last-child { margin-bottom: 0 !important; } .otp-mandatory-setup .manual-field label { display: block !important; color: rgba(255, 255, 255, 0.7) !important; font-size: 11px !important; margin-bottom: 0.25rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .otp-mandatory-setup .copy-field { display: flex !important; align-items: stretch !important; gap: 0.5rem !important; } .otp-mandatory-setup .copy-field code { flex: 1 !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--business-primary) !important; padding: 0.5rem !important; border-radius: 4px !important; font-size: 11px !important; word-break: break-all !important; font-family: 'Courier New', monospace !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .otp-mandatory-setup .copy-btn { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.6) !important; padding: 0.5rem !important; cursor: pointer !important; border-radius: 4px !important; transition: all 0.2s ease !important; font-size: 11px !important; min-width: 2.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } .otp-mandatory-setup .copy-btn:hover { color: var(--business-accent) !important; background: rgba(0, 212, 255, 0.1) !important; border-color: rgba(0, 212, 255, 0.3) !important; } /* Error message styling */ .otp-mandatory-setup .error-message { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #fca5a5 !important; padding: 0.75rem !important; border-radius: 6px !important; margin-bottom: 1rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 14px !important; } .otp-mandatory-setup .error-message i { flex-shrink: 0 !important; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .otp-mandatory-setup { margin-top: 0.75rem; } .otp-mandatory-setup .setup-steps { gap: 0.4rem !important; } .setup-step { padding: 0.75rem; } .step-header { flex-direction: column; text-align: center; gap: 0.5rem; } .step-number { margin: 0 auto; } .otp-mandatory-setup .qr-code { max-width: 160px !important; } .otp-mandatory-setup .qr-placeholder { width: 160px !important; height: 160px !important; } .copy-field { flex-direction: column; align-items: stretch; } .copy-btn { align-self: stretch; justify-content: center; } } /* ===== OTP SETUP STYLES ===== */ /* OTP Method Selection */ .otp-method-selection { margin-top: 2rem; } .method-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } @media (max-width: 768px) { .method-options { grid-template-columns: 1fr; } } .method-option-btn { cursor: pointer; display: block; text-decoration: none; background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 2rem; text-align: center; transition: all 0.3s ease; height: 100%; } .method-option-btn:hover { border-color: var(--business-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-decoration: none; } .method-option-btn:active { transform: translateY(0); } .method-icon { font-size: 3rem; color: var(--business-primary); margin-bottom: 1rem; } .method-option-btn h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #222; } .method-option-btn p { color: #666; font-size: 0.9rem; margin-bottom: 1rem; min-height: 2.5rem; } .method-features { list-style: none; padding: 0; margin: 1rem 0 0 0; text-align: left; } .method-features li { padding: 0.4rem 0; color: #555; font-size: 0.85rem; } .method-features i { color: var(--business-success); margin-right: 0.5rem; } /* OTP Setup Info */ .otp-setup-info { margin-top: 2rem; padding: 1.5rem; background: #ffffff; border-radius: 8px; border-left: 4px solid var(--business-primary); } .otp-setup-info h5 { margin: 0 0 1rem 0; color: var(--business-primary); font-size: 1rem; font-weight: 600; } .otp-setup-info h5 i { margin-right: 0.5rem; } .otp-setup-info p { margin: 0.5rem 0; color: #555; font-size: 0.9rem; line-height: 1.5; } /* Input hints */ .input-hint { display: block; margin-top: 0.5rem; color: #777; font-size: 0.85rem; } /* Button group for back/continue buttons */ .button-group { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; } .otp-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: transparent; color: var(--business-primary); border: 2px solid var(--business-primary); border-radius: 8px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; } .otp-back-btn:hover { background: var(--business-primary); color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(6, 13, 71, 0.2); } .otp-back-btn i { font-size: 0.9rem; } @media (max-width: 576px) { .button-group { flex-direction: column-reverse; gap: 0.75rem; } .button-group .modern-btn, .button-group .otp-back-btn { width: 100%; justify-content: center; } } /* Enhanced setup step styling */ .setup-step { margin-bottom: 0; } .setup-step:last-child { margin-bottom: 0; } .step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .step-number { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--business-primary); color: white; border-radius: 50%; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .step-header h4 { margin: 0; color: #222; font-size: 1.1rem; font-weight: 600; } .setup-step > p { color: #666; line-height: 1.6; margin-bottom: 1rem; } /* QR Container */ .qr-container { display: flex; justify-content: center; padding: 1rem; border-radius: 12px; margin: 0.75rem 0; } .qr-code { max-width: 300px; width: 100%; height: auto; border-radius: 8px; } .qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; color: #999; } .qr-placeholder i { font-size: 3rem; } /* Manual Setup */ .manual-setup { margin-top: 1.5rem; } .manual-setup details { background: #f8f9fa; border-radius: 8px; padding: 1rem; cursor: pointer; } .manual-setup summary { font-weight: 600; color: var(--business-primary); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .manual-setup summary::-webkit-details-marker { display: none; } .manual-setup summary::before { content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.8rem; transition: transform 0.2s; } .manual-setup details[open] summary::before { transform: rotate(180deg); } .manual-fields { margin-top: 1rem; } .manual-field { margin-bottom: 1rem; } .manual-field:last-child { margin-bottom: 0; } .manual-field label { display: block; font-weight: 600; color: #555; margin-bottom: 0.5rem; font-size: 0.9rem; } .copy-field { display: flex; gap: 0.5rem; align-items: center; } .copy-field code { flex: 1; background: white; border: 1px solid #ddd; padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; word-break: break-all; color: #000000; } .copy-btn { padding: 0.75rem 1rem; background: var(--business-primary); color: white; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .copy-btn:hover { background: var(--business-secondary); transform: translateY(-1px); } /* Logbook User Avatar Styles */ .logbook-user-avatar { flex-shrink: 0; } .logbook-user-avatar .profile-avatar { border-width: 2px; box-shadow: 0 2px 8px rgba(6, 13, 71, 0.15); } .logbook-user-avatar .profile-avatar.has-image { border-width: 2px; box-shadow: 0 2px 8px rgba(6, 13, 71, 0.2); } .logbook-user-avatar .profile-avatar.no-image { border-width: 2px; font-weight: 600; } /* Logbook entry hover effect with avatar */ .logbook-entry:hover .logbook-user-avatar .profile-avatar { transform: scale(1.05); box-shadow: 0 4px 12px rgba(6, 13, 71, 0.25); } .logbook-entry:hover .logbook-user-avatar .profile-avatar.has-image { box-shadow: 0 4px 12px rgba(6, 13, 71, 0.3); } /* Small avatar for device detail view */ .logbook-user-avatar .profile-avatar.avatar-sm { width: 28px !important; height: 28px !important; font-size: 11px; line-height: 28px; border-width: 2px; } /* Avatar image sizing */ .logbook-user-avatar .profile-avatar img.avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Mobile responsiveness for logbook avatars */ @media (max-width: 576px) { .logbook-user-avatar { margin-right: 0.5rem !important; } .logbook-user-avatar .profile-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; line-height: 32px !important; } } /* Serial Number Styling - Prominent Display */ .serial-number-cell { width: 220px !important; min-width: 220px; max-width: 250px; } /* Only apply padding to tbody cells, not header */ tbody .serial-number-cell { padding: 0.75rem 1rem !important; } .serial-number-wrapper { display: flex; align-items: center; gap: 0.75rem; } .serial-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--business-primary); border-radius: 6px; box-shadow: 0 2px 4px rgba(6, 13, 71, 0.15); } .serial-icon i { color: white; font-size: 1rem; } .serial-number-content { flex: 1; min-width: 0; } .serial-number-value { font-size: 1rem; font-weight: 700; color: var(--business-primary); font-family: 'Courier New', monospace; letter-spacing: 0.5px; line-height: 1.4; word-break: break-all; } /* Hover effect for serial number cells */ .device-row:hover .serial-icon { background: var(--business-secondary); transform: scale(1.05); box-shadow: 0 4px 8px rgba(6, 13, 71, 0.25); } .device-row:hover .serial-number-value { color: var(--business-secondary); } /* Mobile card serial number styling */ .mobile-serial-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(var(--business-primary-rgb, 6, 13, 71), 0.05) 0%, rgba(var(--business-primary-rgb, 6, 13, 71), 0.1) 100%); border-radius: 6px; border-left: 3px solid var(--business-primary); max-width: 100%; } .mobile-serial-badge i { color: var(--business-primary); font-size: 1.1rem; flex-shrink: 0; } .mobile-serial-badge strong { font-family: 'Courier New', monospace; font-size: 0.95rem; color: var(--business-primary); letter-spacing: 0.5px; word-break: break-all; overflow-wrap: break-word; flex: 1; min-width: 0; } /* Device table layout fixes */ .modern-table { table-layout: auto; width: 100%; min-width: 900px; } .modern-table th, .modern-table td { vertical-align: middle; white-space: nowrap; } .modern-table th { font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } /* Allow text to wrap in certain columns */ .modern-table td.serial-number-cell .serial-number-value { white-space: normal; word-break: break-word; } /* Improved date/time display for tables */ .modern-table .local-date, .modern-table .local-time { display: inline-block; } .modern-table .local-date::after { content: " "; white-space: pre; } /* Center-aligned badge columns */ .modern-table td.text-center .badge { font-size: 0.875rem; padding: 0.35rem 0.65rem; min-width: 2.5rem; } /* Better spacing for count badges */ .modern-table .badge { font-weight: 600; } /* Ensure table respects border-radius */ .modern-table { border-collapse: separate; border-spacing: 0; } /* Bolder table row borders to match app design */ .modern-table tbody tr { border-bottom: 1px solid #e9ecef; transition: all 0.2s ease; } .modern-table tbody tr:last-child { border-bottom: none; } /* Round bottom corners of last row cells */ .modern-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } .modern-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } /* Bold hover effect matching primary color theme */ .modern-table tbody tr:hover { transform: none; background: linear-gradient(90deg, rgba(6, 13, 71, 0.08) 0%, rgba(6, 13, 71, 0.04) 100%); border-bottom-color: var(--primary-color); box-shadow: 0 2px 8px rgba(6, 13, 71, 0.15); } /* Ensure status rows maintain their specific hover effects */ .modern-table tbody tr.status-row-critical:hover, .modern-table tbody tr.status-row-error:hover, .modern-table tbody tr.status-row-warning:hover, .modern-table tbody tr.status-row-offline:hover, .modern-table tbody tr.status-row-updates:hover, .modern-table tbody tr.status-row-healthy:hover { /* Override general hover for status rows to maintain their specific effects */ background: inherit; box-shadow: inherit; } /* Add primary color left border accent on hover - but not for status rows */ .modern-table tbody tr:hover td:first-child { border-left: 4px solid var(--primary-color); } /* Override left border for status rows to maintain their specific colors */ .modern-table tbody tr.status-row-critical:hover td:first-child, .modern-table tbody tr.status-row-error:hover td:first-child, .modern-table tbody tr.status-row-warning:hover td:first-child, .modern-table tbody tr.status-row-offline:hover td:first-child, .modern-table tbody tr.status-row-updates:hover td:first-child, .modern-table tbody tr.status-row-healthy:hover td:first-child { border-left: inherit; } /* Ensure last row's first cell maintains rounded corner on hover */ .modern-table tbody tr:last-child:hover td:first-child { border-bottom-left-radius: 12px; } /* Center action buttons and badges */ .modern-table .btn-group { display: inline-flex; gap: 0.25rem; } .modern-table td.text-center { vertical-align: middle; } /* Alternating row colors for better readability - bolder to match app design */ .modern-table tbody tr:nth-child(even) { background-color: rgba(248, 249, 250, 0.8); } /* Icon styling in tables */ .modern-table .customer-icon, .modern-table .product-icon, .modern-table .revision-icon, .modern-table .device-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(135deg, rgba(6, 13, 71, 0.05) 0%, rgba(6, 13, 71, 0.08) 100%); transition: all 0.2s ease; } .modern-table tr:hover .customer-icon, .modern-table tr:hover .product-icon, .modern-table tr:hover .revision-icon, .modern-table tr:hover .device-icon { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); transform: scale(1.1); } /* Make the icon inside white on hover, regardless of original color */ .modern-table tr:hover .customer-icon i, .modern-table tr:hover .product-icon i, .modern-table tr:hover .revision-icon i, .modern-table tr:hover .device-icon i { color: white !important; } /* Default icon colors when not hovering */ .modern-table .customer-icon i { color: var(--primary-color); } .modern-table .product-icon i { color: var(--primary-color); } .modern-table .revision-icon i { color: var(--primary-color); } .modern-table .device-icon i { color: var(--primary-color); } /* ===== ENTERPRISE DEVICE STATUS BADGES ===== */ .enterprise-status-badge { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-radius: 8px; border: 1.5px solid; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 500; transition: all 0.2s ease; min-width: 140px; } /* Status Dot Indicator */ .enterprise-status-badge .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; position: relative; } /* Animated pulse effect for critical states */ .status-critical .status-dot::before, .status-error .status-dot::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; animation: statusPulse 2s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } /* Status Main Content */ .enterprise-status-badge .status-main { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; } .enterprise-status-badge .status-text { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; } .enterprise-status-badge .status-meta { font-size: 0.6875rem; font-weight: 400; opacity: 0.85; line-height: 1.2; } /* Status Flags (secondary indicators) */ .enterprise-status-badge .status-flags { display: flex; gap: 0.375rem; align-items: center; } .status-flag { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; transition: all 0.2s ease; } .status-flag.pulse { animation: statusPulse 2s ease-in-out infinite; } /* === STATUS VARIANTS === */ /* CRITICAL */ .status-critical { background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(220, 53, 69, 0.06) 100%); border-color: #dc3545; color: #b02a37; } .status-critical .status-dot { background: #dc3545; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2); } .status-critical .status-dot::before { background: #dc3545; } .status-critical .offline-flag { background: rgba(108, 117, 125, 0.15); color: #6c757d; } .status-critical .update-flag { background: rgba(13, 110, 253, 0.15); color: #0d6efd; } /* ERROR */ .status-error { background: linear-gradient(135deg, rgba(220, 53, 69, 0.10) 0%, rgba(220, 53, 69, 0.05) 100%); border-color: rgba(220, 53, 69, 0.6); color: #b02a37; } .status-error .status-dot { background: #dc3545; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15); } .status-error .status-dot::before { background: #dc3545; } .status-error .offline-flag { background: rgba(108, 117, 125, 0.15); color: #6c757d; } .status-error .update-flag { background: rgba(13, 110, 253, 0.15); color: #0d6efd; } /* WARNING */ .status-warning { background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 193, 7, 0.06) 100%); border-color: #ffc107; color: #997404; } .status-warning .status-dot { background: #ffc107; box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); } .status-warning .offline-flag { background: rgba(108, 117, 125, 0.15); color: #6c757d; } .status-warning .update-flag { background: rgba(13, 110, 253, 0.15); color: #0d6efd; } /* OFFLINE */ .status-offline { background: linear-gradient(135deg, rgba(108, 117, 125, 0.10) 0%, rgba(108, 117, 125, 0.05) 100%); border-color: #6c757d; color: #495057; } .status-offline .status-dot { background: #6c757d; box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.15); } .status-offline .update-flag { background: rgba(13, 110, 253, 0.15); color: #0d6efd; } /* UPDATES */ .status-updates { background: linear-gradient(135deg, rgba(13, 110, 253, 0.10) 0%, rgba(13, 110, 253, 0.05) 100%); border-color: #0d6efd; color: #084298; } .status-updates .status-dot { background: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15); } .status-updates .update-flag { background: rgba(13, 110, 253, 0.2); color: #084298; } /* HEALTHY/OPERATIONAL */ .status-healthy { background: linear-gradient(135deg, rgba(25, 135, 84, 0.10) 0%, rgba(25, 135, 84, 0.05) 100%); border-color: #198754; color: #0f5132; } .status-healthy .status-dot { background: #198754; box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.15); } /* Hover Effects */ .enterprise-status-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .status-critical:hover { border-color: #b02a37; background: linear-gradient(135deg, rgba(220, 53, 69, 0.16) 0%, rgba(220, 53, 69, 0.08) 100%); } .status-error:hover { border-color: #b02a37; background: linear-gradient(135deg, rgba(220, 53, 69, 0.14) 0%, rgba(220, 53, 69, 0.07) 100%); } .status-warning:hover { border-color: #997404; background: linear-gradient(135deg, rgba(255, 193, 7, 0.16) 0%, rgba(255, 193, 7, 0.08) 100%); } .status-offline:hover { border-color: #495057; background: linear-gradient(135deg, rgba(108, 117, 125, 0.14) 0%, rgba(108, 117, 125, 0.07) 100%); } .status-updates:hover { border-color: #084298; background: linear-gradient(135deg, rgba(13, 110, 253, 0.14) 0%, rgba(13, 110, 253, 0.07) 100%); } .status-healthy:hover { border-color: #0f5132; background: linear-gradient(135deg, rgba(25, 135, 84, 0.14) 0%, rgba(25, 135, 84, 0.07) 100%); } /* ===== LAYERED DEVICE STATUS SYSTEM ===== */ /* Override table-layout for device tables to prevent column misalignment */ table.modern-table { table-layout: auto !important; } /* Status Row with Gradient Background and Left Border */ .device-status-row { transition: all 0.2s ease; } /* Left Border (5px colored accent) - applied directly to first cell */ .device-status-row .device-status-cell { border-left: 5px solid transparent; } /* Critical Status Row */ .status-row-critical { background: linear-gradient(90deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 40%, rgba(220, 53, 69, 0.02) 80%, transparent 100%); } .status-row-critical .device-status-cell { border-left-color: #dc3545; } .status-row-critical .status-primary { color: #b02a37; font-weight: 700; } /* Error Status Row */ .status-row-error { background: linear-gradient(90deg, rgba(253, 126, 20, 0.13) 0%, rgba(253, 126, 20, 0.06) 40%, rgba(253, 126, 20, 0.015) 80%, transparent 100%); } .status-row-error .device-status-cell { border-left-color: #fd7e14; } .status-row-error .status-primary { color: #ca6510; font-weight: 700; } /* Warning Status Row */ .status-row-warning { background: linear-gradient(90deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 40%, rgba(255, 193, 7, 0.02) 80%, transparent 100%); } .status-row-warning .device-status-cell { border-left-color: #ffc107; } .status-row-warning .status-primary { color: #997404; font-weight: 700; } /* Offline Status Row */ .status-row-offline { background: linear-gradient(90deg, rgba(108, 117, 125, 0.08) 0%, rgba(108, 117, 125, 0.04) 40%, rgba(108, 117, 125, 0.01) 80%, transparent 100%); } .status-row-offline .device-status-cell { border-left-color: #6c757d; } .status-row-offline .status-primary { color: #495057; font-weight: 700; } /* Updates Status Row */ .status-row-updates { background: linear-gradient(90deg, rgba(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 0.06) 40%, rgba(13, 110, 253, 0.015) 80%, transparent 100%); } .status-row-updates .device-status-cell { border-left-color: #0d6efd; } .status-row-updates .status-primary { color: #084298; font-weight: 700; } /* Healthy/Operational Status Row */ .status-row-healthy { background: linear-gradient(90deg, rgba(25, 135, 84, 0.18) 0%, rgba(25, 135, 84, 0.10) 40%, rgba(25, 135, 84, 0.03) 80%, transparent 100%); } .status-row-healthy::before { background: #198754; } .status-row-healthy .status-primary { color: #0f5132; font-weight: 700; } .status-row-healthy .device-status-cell { border-left-color: #198754; } /* Hover Effects - Intensify gradient and border */ .status-row-critical:hover { background: linear-gradient(90deg, rgba(220, 53, 69, 0.22) 0%, rgba(220, 53, 69, 0.12) 40%, rgba(220, 53, 69, 0.03) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15) !important; transition: all 0.2s ease !important; } .status-row-critical:hover .device-status-cell { border-left-width: 6px !important; } .status-row-error:hover { background: linear-gradient(90deg, rgba(253, 126, 20, 0.20) 0%, rgba(253, 126, 20, 0.10) 40%, rgba(253, 126, 20, 0.025) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(253, 126, 20, 0.15) !important; transition: all 0.2s ease !important; } .status-row-error:hover .device-status-cell { border-left-width: 6px !important; } .status-row-warning:hover { background: linear-gradient(90deg, rgba(255, 193, 7, 0.22) 0%, rgba(255, 193, 7, 0.12) 40%, rgba(255, 193, 7, 0.03) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15) !important; transition: all 0.2s ease !important; } .status-row-warning:hover .device-status-cell { border-left-width: 6px !important; } .status-row-offline:hover { background: linear-gradient(90deg, rgba(108, 117, 125, 0.12) 0%, rgba(108, 117, 125, 0.06) 40%, rgba(108, 117, 125, 0.015) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.15) !important; transition: all 0.2s ease !important; } .status-row-offline:hover .device-status-cell { border-left-width: 6px !important; } .status-row-updates:hover { background: linear-gradient(90deg, rgba(13, 110, 253, 0.18) 0%, rgba(13, 110, 253, 0.10) 40%, rgba(13, 110, 253, 0.025) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15) !important; transition: all 0.2s ease !important; } .status-row-updates:hover .device-status-cell { border-left-width: 6px !important; } .status-row-healthy:hover { background: linear-gradient(90deg, rgba(25, 135, 84, 0.25) 0%, rgba(25, 135, 84, 0.15) 40%, rgba(25, 135, 84, 0.05) 80%, transparent 100%) !important; box-shadow: 0 2px 8px rgba(25, 135, 84, 0.15) !important; transition: all 0.2s ease !important; } .status-row-healthy:hover .device-status-cell { border-left-width: 6px !important; } /* Status Cell Content */ .device-status-cell { width: 140px !important; min-width: 140px !important; max-width: 140px !important; padding: 0.75rem 1rem !important; vertical-align: middle !important; } .status-primary { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; margin-bottom: 0.35rem; } .status-secondary { font-size: 0.75rem; color: #6c757d; line-height: 1.3; } .status-secondary i { font-size: 0.75rem; opacity: 0.8; } /* Power Icon Indicators - Universal Online/Offline Status in Secondary Line */ /* These must come after the general .status-secondary i rule to override it */ .status-secondary .power-icon-online, .status-secondary .fa-power-off.power-icon-online { color: var(--business-success) !important; opacity: 1 !important; font-size: 0.9rem !important; animation: pulse-online 2s ease-in-out infinite !important; } .status-secondary .power-icon-offline, .status-secondary .fa-power-off.power-icon-offline { color: var(--business-danger) !important; opacity: 1 !important; font-size: 0.9rem !important; } /* Power icons in device status cell (new structure with icon at front) */ .device-status-cell .device-power-icon.power-icon-online, .device-status-cell .power-icon-online, .device-status-cell .fa-power-off.power-icon-online { color: var(--business-success) !important; opacity: 1 !important; font-size: 0.9rem !important; animation: pulse-online 2s ease-in-out infinite !important; } .device-status-cell .device-power-icon.power-icon-offline, .device-status-cell .power-icon-offline, .device-status-cell .fa-power-off.power-icon-offline { color: var(--business-danger) !important; opacity: 1 !important; font-size: 0.9rem !important; } /* Mobile badge power icons */ .mobile-status-badge .mobile-power-icon.power-icon-online, .mobile-status-badge .power-icon-online, .mobile-status-badge .fa-power-off.power-icon-online { color: var(--business-success) !important; opacity: 1 !important; font-size: 0.9rem !important; animation: pulse-online 2s ease-in-out infinite !important; } .mobile-status-badge .mobile-power-icon.power-icon-offline, .mobile-status-badge .power-icon-offline, .mobile-status-badge .fa-power-off.power-icon-offline { color: var(--business-danger) !important; opacity: 1 !important; font-size: 0.9rem !important; } /* Pulse animation for online power icon - more noticeable */ @keyframes pulse-online { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } } /* Status Change Animations - match general table timing */ .device-status-row { transition: all 0.2s ease; } /* Status cell inherits transition from parent row - no separate transition needed */ /* State change animations with pulse and fade */ .device-status-row.status-changed-healthy { animation: statusChangeHealthy 2.5s ease-out forwards; } .device-status-row.status-changed-healthy .device-status-cell { animation: statusCellPulse 0.6s ease-out; } .device-status-row.status-changed-problematic { animation: statusChangeProblematic 2.5s ease-out forwards; } .device-status-row.status-changed-problematic .device-status-cell { animation: statusCellPulseWarning 0.6s ease-out; } .device-status-row.status-changed-offline { animation: statusChangeOffline 3s ease-out forwards; } .device-status-row.status-changed-offline .device-status-cell { animation: statusCellPulseOffline 0.6s ease-out; } /* Enhanced online/offline transition classes */ .device-status-row.status-changed-online { animation: statusChangeOnline 2.8s ease-out forwards; } .device-status-row.status-changed-online .device-status-cell { animation: statusCellPulse 0.8s ease-out; } .device-status-row.status-changed-offline-enhanced { animation: statusChangeOfflineEnhanced 3.2s ease-out forwards; } .device-status-row.status-changed-offline-enhanced .device-status-cell { animation: statusCellPulseOffline 0.8s ease-out; } /* Smooth status text transitions */ .status-primary, .status-secondary { animation: statusTextFadeIn 0.5s ease-out; } /* Keyframe animations */ @keyframes statusChangeHealthy { 0% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.45) 0%, rgba(25, 135, 84, 0.25) 40%, rgba(25, 135, 84, 0.12) 80%, transparent 100%); transform: translateX(-1px) scale(1.01); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4); } 15% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.40) 0%, rgba(25, 135, 84, 0.22) 40%, rgba(25, 135, 84, 0.10) 80%, transparent 100%); transform: translateX(0.5px) scale(1.005); box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.3); } 30% { transform: translateX(-0.25px) scale(1.002); box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2); } 50% { transform: translateX(0) scale(1); box-shadow: 0 0 0 0.5px rgba(25, 135, 84, 0.1); } 70% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.25) 0%, rgba(25, 135, 84, 0.12) 40%, rgba(25, 135, 84, 0.05) 80%, transparent 100%); } 100% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.10) 0%, rgba(25, 135, 84, 0.05) 40%, rgba(25, 135, 84, 0.01) 80%, transparent 100%); transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } } @keyframes statusChangeProblematic { 0% { background: linear-gradient(90deg, rgba(220, 53, 69, 0.35) 0%, rgba(220, 53, 69, 0.18) 40%, rgba(220, 53, 69, 0.08) 80%, transparent 100%); transform: translateX(-1px); } 15% { transform: translateX(0.5px); } 30% { transform: translateX(-0.5px); } 45% { transform: translateX(0); } 100% { background: linear-gradient(90deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 40%, rgba(220, 53, 69, 0.02) 80%, transparent 100%); transform: translateX(0); } } @keyframes statusChangeOffline { 0% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.40) 0%, rgba(108, 117, 125, 0.20) 40%, rgba(108, 117, 125, 0.08) 80%, transparent 100%); transform: translateX(-1px); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.4); } 20% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.35) 0%, rgba(108, 117, 125, 0.18) 40%, rgba(108, 117, 125, 0.07) 80%, transparent 100%); transform: translateX(0.5px); box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.2); } 40% { transform: translateX(-0.25px); box-shadow: 0 0 0 1px rgba(108, 117, 125, 0.1); } 60% { transform: translateX(0); box-shadow: 0 0 0 0.5px rgba(108, 117, 125, 0.05); } 80% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.20) 0%, rgba(108, 117, 125, 0.10) 40%, rgba(108, 117, 125, 0.03) 80%, transparent 100%); } 100% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.12) 0%, rgba(108, 117, 125, 0.06) 40%, rgba(108, 117, 125, 0.015) 80%, transparent 100%); transform: translateX(0); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); } } @keyframes statusCellPulse { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.05); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 0.8; } 75% { transform: scale(1.03); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } @keyframes statusCellPulseWarning { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.02); } 50% { transform: scale(1.04); } 75% { transform: scale(1.02); } } @keyframes statusCellPulseOffline { 0% { transform: scale(1); opacity: 1; } 20% { transform: scale(1.03); opacity: 0.9; } 40% { transform: scale(1.05); opacity: 0.8; } 60% { transform: scale(1.02); opacity: 0.85; } 80% { transform: scale(1.01); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } @keyframes statusTextFadeIn { 0% { opacity: 0; transform: translateY(-3px); } 100% { opacity: 1; transform: translateY(0); } } /* Enhanced online/offline transition animations */ @keyframes statusChangeOnline { 0% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.50) 0%, rgba(25, 135, 84, 0.30) 40%, rgba(25, 135, 84, 0.15) 80%, transparent 100%); transform: translateX(-2px) scale(1.02); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5); } 10% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.45) 0%, rgba(25, 135, 84, 0.28) 40%, rgba(25, 135, 84, 0.13) 80%, transparent 100%); transform: translateX(1px) scale(1.01); box-shadow: 0 0 0 6px rgba(25, 135, 84, 0.4); } 25% { transform: translateX(-0.5px) scale(1.005); box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.3); } 40% { transform: translateX(0.25px) scale(1.002); box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.2); } 60% { transform: translateX(0) scale(1); box-shadow: 0 0 0 0.5px rgba(25, 135, 84, 0.1); } 80% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.20) 0%, rgba(25, 135, 84, 0.10) 40%, rgba(25, 135, 84, 0.04) 80%, transparent 100%); } 100% { background: linear-gradient(90deg, rgba(25, 135, 84, 0.10) 0%, rgba(25, 135, 84, 0.05) 40%, rgba(25, 135, 84, 0.01) 80%, transparent 100%); transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } } @keyframes statusChangeOfflineEnhanced { 0% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.50) 0%, rgba(108, 117, 125, 0.30) 40%, rgba(108, 117, 125, 0.15) 80%, transparent 100%); transform: translateX(-2px) scale(1.02); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5); } 15% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.45) 0%, rgba(108, 117, 125, 0.28) 40%, rgba(108, 117, 125, 0.13) 80%, transparent 100%); transform: translateX(1px) scale(1.01); box-shadow: 0 0 0 6px rgba(108, 117, 125, 0.3); } 30% { transform: translateX(-0.5px) scale(1.005); box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.2); } 50% { transform: translateX(0) scale(1); box-shadow: 0 0 0 1px rgba(108, 117, 125, 0.1); } 70% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.25) 0%, rgba(108, 117, 125, 0.12) 40%, rgba(108, 117, 125, 0.05) 80%, transparent 100%); } 100% { background: linear-gradient(90deg, rgba(108, 117, 125, 0.12) 0%, rgba(108, 117, 125, 0.06) 40%, rgba(108, 117, 125, 0.015) 80%, transparent 100%); transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); } } /* Responsive adjustments */ @media (max-width: 768px) { .serial-number-cell { padding: 0.5rem 0.75rem !important; width: 180px; min-width: 180px; } .serial-icon { width: 28px; height: 28px; } .serial-icon i { font-size: 0.9rem; } .serial-number-value { font-size: 0.9rem; } .modern-table { table-layout: auto; } } /* ===== EVENT HISTORY PAGE STYLES ===== */ /* Event item base styling */ .event-item { border-left: 4px solid transparent !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 1.25rem 1.5rem !important; } .event-item:hover { background-color: var(--bg-light) !important; transform: translateX(4px); } /* Error event styling */ .event-item.event-error { border-left-color: var(--danger-color) !important; background: linear-gradient(90deg, var(--danger-rgba-05) 0%, transparent 100%); } .event-item.event-error:hover { background: linear-gradient(90deg, var(--danger-rgba-10) 0%, var(--danger-rgba-02) 100%) !important; box-shadow: 0 2px 8px var(--danger-rgba-15); } /* Error severity badges */ .badge-severity-critical { background: var(--danger-darker) !important; color: white; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; padding: 0.35rem 0.65rem; } .badge-severity-warning { background: var(--warning-dark) !important; color: var(--text-dark); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; padding: 0.35rem 0.65rem; } .badge-severity-info { background: var(--info-dark) !important; color: white; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; padding: 0.35rem 0.65rem; } /* Error icons and text */ .event-icon-error { color: var(--danger-color); font-size: 1.3rem; } .event-title-error { color: var(--danger-darker); font-size: 1.1rem; } .event-message-error { color: var(--danger-dark); font-weight: 500; padding: 0.5rem 0.75rem; background: var(--danger-rgba-08); border-radius: 8px; border-left: 3px solid var(--danger-color); font-size: 0.95rem; } /* Operation mode event styling */ .event-item.event-operation_mode { border-left-color: var(--info-color) !important; background: linear-gradient(90deg, var(--info-rgba-10) 0%, transparent 100%); } .event-item.event-operation_mode:hover { background: linear-gradient(90deg, var(--info-rgba-20) 0%, var(--info-rgba-10) 100%) !important; box-shadow: 0 2px 8px var(--info-rgba-20); } .event-icon-opmode { color: var(--info-dark); font-size: 1.2rem; } .event-title-opmode { color: var(--info-darker); font-size: 1.05rem; } /* Uptime event styling */ .event-item.event-uptime { border-left-color: var(--success-color) !important; } .event-item.event-uptime:hover { background: linear-gradient(90deg, var(--success-rgba-20) 0%, transparent 100%) !important; box-shadow: 0 2px 8px var(--success-rgba-20); } .event-icon-online { color: var(--success-dark); font-size: 1.2rem; } .event-title-online { color: var(--success-darker); font-size: 1.05rem; } .event-icon-offline { color: var(--danger-dark); font-size: 1.2rem; } .event-title-offline { color: var(--danger-darker); font-size: 1.05rem; } .event-duration { font-size: 1rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: 8px; background: rgba(0, 0, 0, 0.03); display: inline-block; } /* Timestamp styling - prominent and easy to read */ .event-timestamp { font-size: 1.15rem; color: var(--primary-dark); font-family: 'Courier New', monospace; letter-spacing: 0.05em; white-space: nowrap; } .event-timestamp-small { font-size: 0.85rem; font-family: 'Courier New', monospace; letter-spacing: 0.05em; } .event-date { font-size: 0.85rem; color: var(--text-muted); font-family: 'Courier New', monospace; margin-top: 0.15rem; } /* Quick filter buttons */ .quick-filter { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .quick-filter:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--primary-rgba-20) !important; } /* Date/time inputs styling */ input[type="date"], input[type="time"] { font-family: 'Courier New', monospace; font-size: 0.95rem; font-weight: 500; } /* Responsive adjustments for event history */ @media (max-width: 991.98px) { .event-item { padding: 1rem !important; } .event-timestamp { font-size: 1rem; } .event-title-error, .event-title-opmode, .event-title-online, .event-title-offline { font-size: 0.95rem; } .event-message-error { font-size: 0.875rem; } } @media (max-width: 575.98px) { .event-item { padding: 0.75rem !important; } .event-timestamp { font-size: 0.9rem; } .event-icon-error, .event-icon-opmode, .event-icon-online, .event-icon-offline { font-size: 1rem; } } /* Uptime Period Display Box */ .uptime-period-box { margin-top: 0.75rem; padding: 0.875rem 1rem; border-radius: 10px; border-left: 4px solid; background: rgba(0, 0, 0, 0.02); font-size: 0.95rem; } .uptime-period-online { border-left-color: var(--success-dark); background: linear-gradient(90deg, var(--success-rgba-10) 0%, transparent 100%); } .uptime-period-offline { border-left-color: var(--danger-dark); background: linear-gradient(90deg, var(--danger-rgba-10) 0%, transparent 100%); } .uptime-time-display { font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-left: 1.75rem; line-height: 1.6; } .uptime-time-display .local-time { color: var(--primary-dark); font-size: 1.05rem; font-weight: 700; } .uptime-time-display .local-date { color: var(--text-muted); font-size: 0.95rem; } .uptime-period-box i.fa-play-circle, .uptime-period-box i.fa-stop-circle { color: var(--text-secondary); font-size: 1rem; } .uptime-period-box i.fa-circle-notch { font-size: 1rem; } /* Enhanced uptime event items */ .event-item.event-uptime { padding: 1.5rem !important; } .event-item.event-uptime:hover .uptime-period-box { background: rgba(0, 0, 0, 0.04); transform: translateX(2px); transition: all 0.3s ease; } /* Responsive adjustments for uptime boxes */ @media (max-width: 991.98px) { .uptime-period-box { padding: 0.75rem 0.875rem; font-size: 0.9rem; } .uptime-time-display { font-size: 0.95rem; margin-left: 1.5rem; } .uptime-time-display .local-time { font-size: 1rem; } .uptime-time-display .local-date { font-size: 0.875rem; } } @media (max-width: 575.98px) { .uptime-period-box { padding: 0.625rem 0.75rem; font-size: 0.85rem; } .uptime-time-display { font-size: 0.875rem; margin-left: 1.25rem; } .uptime-time-display .local-time { font-size: 0.95rem; } .uptime-time-display .local-date { font-size: 0.8rem; } .event-item.event-uptime { padding: 1rem !important; } } /* Hover styles for clickable links */ .hover-primary { transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out; } .hover-primary:hover { color: #0d6efd !important; opacity: 0.85; } /* Clickable info items - expand hover area */ .info-item-clickable { cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-radius: 8px; } .info-item-clickable::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(13, 110, 253, 0.05), rgba(13, 110, 253, 0.1)); border-radius: 8px; opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .info-item-clickable:hover::before { opacity: 1; } .info-item-clickable:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08); } .info-item-clickable:hover .fas { color: #0d6efd; transform: scale(1.1); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .info-item-clickable:active { transform: translateY(0) scale(0.99); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .info-item-clickable:active::before { opacity: 0.7; }