|
|
:root { |
|
|
|
|
|
--color-white: rgba(255, 255, 255, 1); |
|
|
--color-black: rgba(0, 0, 0, 1); |
|
|
--color-cream-50: rgba(252, 252, 249, 1); |
|
|
--color-cream-100: rgba(255, 255, 253, 1); |
|
|
--color-gray-200: rgba(245, 245, 245, 1); |
|
|
--color-gray-300: rgba(167, 169, 169, 1); |
|
|
--color-gray-400: rgba(119, 124, 124, 1); |
|
|
--color-slate-500: rgba(98, 108, 113, 1); |
|
|
--color-brown-600: rgba(94, 82, 64, 1); |
|
|
--color-charcoal-700: rgba(31, 33, 33, 1); |
|
|
--color-charcoal-800: rgba(38, 40, 40, 1); |
|
|
--color-slate-900: rgba(19, 52, 59, 1); |
|
|
--color-teal-300: rgba(50, 184, 198, 1); |
|
|
--color-teal-400: rgba(45, 166, 178, 1); |
|
|
--color-teal-500: rgba(33, 128, 141, 1); |
|
|
--color-teal-600: rgba(29, 116, 128, 1); |
|
|
--color-teal-700: rgba(26, 104, 115, 1); |
|
|
--color-teal-800: rgba(41, 150, 161, 1); |
|
|
--color-red-400: rgba(255, 84, 89, 1); |
|
|
--color-red-500: rgba(192, 21, 47, 1); |
|
|
--color-orange-400: rgba(230, 129, 97, 1); |
|
|
--color-orange-500: rgba(168, 75, 47, 1); |
|
|
|
|
|
|
|
|
--color-brown-600-rgb: 94, 82, 64; |
|
|
--color-teal-500-rgb: 33, 128, 141; |
|
|
--color-slate-900-rgb: 19, 52, 59; |
|
|
--color-slate-500-rgb: 98, 108, 113; |
|
|
--color-red-500-rgb: 192, 21, 47; |
|
|
--color-red-400-rgb: 255, 84, 89; |
|
|
--color-orange-500-rgb: 168, 75, 47; |
|
|
--color-orange-400-rgb: 230, 129, 97; |
|
|
|
|
|
|
|
|
--color-bg-1: rgba(59, 130, 246, 0.08); |
|
|
--color-bg-2: rgba(245, 158, 11, 0.08); |
|
|
--color-bg-3: rgba(34, 197, 94, 0.08); |
|
|
--color-bg-4: rgba(239, 68, 68, 0.08); |
|
|
--color-bg-5: rgba(147, 51, 234, 0.08); |
|
|
--color-bg-6: rgba(249, 115, 22, 0.08); |
|
|
--color-bg-7: rgba(236, 72, 153, 0.08); |
|
|
--color-bg-8: rgba(6, 182, 212, 0.08); |
|
|
|
|
|
|
|
|
--color-background: var(--color-cream-50); |
|
|
--color-surface: var(--color-cream-100); |
|
|
--color-text: var(--color-slate-900); |
|
|
--color-text-secondary: var(--color-slate-500); |
|
|
--color-primary: var(--color-teal-500); |
|
|
--color-primary-hover: var(--color-teal-600); |
|
|
--color-primary-active: var(--color-teal-700); |
|
|
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); |
|
|
--color-border: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-btn-primary-text: var(--color-cream-50); |
|
|
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-error: var(--color-red-500); |
|
|
--color-success: var(--color-teal-500); |
|
|
--color-warning: var(--color-orange-500); |
|
|
--color-info: var(--color-slate-500); |
|
|
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); |
|
|
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); |
|
|
|
|
|
|
|
|
--focus-ring: 0 0 0 3px var(--color-focus-ring); |
|
|
--focus-outline: 2px solid var(--color-primary); |
|
|
--status-bg-opacity: 0.15; |
|
|
--status-border-opacity: 0.25; |
|
|
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
|
|
|
|
|
|
--color-success-rgb: 33, 128, 141; |
|
|
--color-error-rgb: 192, 21, 47; |
|
|
--color-warning-rgb: 168, 75, 47; |
|
|
--color-info-rgb: 98, 108, 113; |
|
|
|
|
|
|
|
|
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, |
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
|
|
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, |
|
|
Monaco, Consolas, monospace; |
|
|
--font-size-xs: 11px; |
|
|
--font-size-sm: 12px; |
|
|
--font-size-base: 14px; |
|
|
--font-size-md: 14px; |
|
|
--font-size-lg: 16px; |
|
|
--font-size-xl: 18px; |
|
|
--font-size-2xl: 20px; |
|
|
--font-size-3xl: 24px; |
|
|
--font-size-4xl: 30px; |
|
|
--font-weight-normal: 400; |
|
|
--font-weight-medium: 500; |
|
|
--font-weight-semibold: 550; |
|
|
--font-weight-bold: 600; |
|
|
--line-height-tight: 1.2; |
|
|
--line-height-normal: 1.5; |
|
|
--letter-spacing-tight: -0.01em; |
|
|
|
|
|
|
|
|
--space-0: 0; |
|
|
--space-1: 1px; |
|
|
--space-2: 2px; |
|
|
--space-4: 4px; |
|
|
--space-6: 6px; |
|
|
--space-8: 8px; |
|
|
--space-10: 10px; |
|
|
--space-12: 12px; |
|
|
--space-16: 16px; |
|
|
--space-20: 20px; |
|
|
--space-24: 24px; |
|
|
--space-32: 32px; |
|
|
|
|
|
|
|
|
--radius-sm: 6px; |
|
|
--radius-base: 8px; |
|
|
--radius-md: 10px; |
|
|
--radius-lg: 12px; |
|
|
--radius-full: 9999px; |
|
|
|
|
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); |
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); |
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), |
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.02); |
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), |
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.02); |
|
|
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), |
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.03); |
|
|
|
|
|
|
|
|
--duration-fast: 150ms; |
|
|
--duration-normal: 250ms; |
|
|
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1); |
|
|
|
|
|
|
|
|
--container-sm: 640px; |
|
|
--container-md: 768px; |
|
|
--container-lg: 1024px; |
|
|
--container-xl: 1280px; |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
|
:root { |
|
|
|
|
|
--color-gray-400-rgb: 119, 124, 124; |
|
|
--color-teal-300-rgb: 50, 184, 198; |
|
|
--color-gray-300-rgb: 167, 169, 169; |
|
|
--color-gray-200-rgb: 245, 245, 245; |
|
|
|
|
|
|
|
|
--color-bg-1: rgba(29, 78, 216, 0.15); |
|
|
--color-bg-2: rgba(180, 83, 9, 0.15); |
|
|
--color-bg-3: rgba(21, 128, 61, 0.15); |
|
|
--color-bg-4: rgba(185, 28, 28, 0.15); |
|
|
--color-bg-5: rgba(107, 33, 168, 0.15); |
|
|
--color-bg-6: rgba(194, 65, 12, 0.15); |
|
|
--color-bg-7: rgba(190, 24, 93, 0.15); |
|
|
--color-bg-8: rgba(8, 145, 178, 0.15); |
|
|
|
|
|
|
|
|
--color-background: var(--color-charcoal-700); |
|
|
--color-surface: var(--color-charcoal-800); |
|
|
--color-text: var(--color-gray-200); |
|
|
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); |
|
|
--color-primary: var(--color-teal-300); |
|
|
--color-primary-hover: var(--color-teal-400); |
|
|
--color-primary-active: var(--color-teal-800); |
|
|
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15); |
|
|
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); |
|
|
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); |
|
|
--color-border: rgba(var(--color-gray-400-rgb), 0.3); |
|
|
--color-error: var(--color-red-400); |
|
|
--color-success: var(--color-teal-300); |
|
|
--color-warning: var(--color-orange-400); |
|
|
--color-info: var(--color-gray-300); |
|
|
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); |
|
|
--color-btn-primary-text: var(--color-slate-900); |
|
|
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2); |
|
|
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); |
|
|
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
|
|
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); |
|
|
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); |
|
|
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); |
|
|
|
|
|
|
|
|
--focus-ring: 0 0 0 3px var(--color-focus-ring); |
|
|
--focus-outline: 2px solid var(--color-primary); |
|
|
--status-bg-opacity: 0.15; |
|
|
--status-border-opacity: 0.25; |
|
|
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
|
|
|
|
|
|
--color-success-rgb: var(--color-teal-300-rgb); |
|
|
--color-error-rgb: var(--color-red-400-rgb); |
|
|
--color-warning-rgb: var(--color-orange-400-rgb); |
|
|
--color-info-rgb: var(--color-gray-300-rgb); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
[data-color-scheme="dark"] { |
|
|
|
|
|
--color-gray-400-rgb: 119, 124, 124; |
|
|
--color-teal-300-rgb: 50, 184, 198; |
|
|
--color-gray-300-rgb: 167, 169, 169; |
|
|
--color-gray-200-rgb: 245, 245, 245; |
|
|
|
|
|
|
|
|
--color-bg-1: rgba(29, 78, 216, 0.15); |
|
|
--color-bg-2: rgba(180, 83, 9, 0.15); |
|
|
--color-bg-3: rgba(21, 128, 61, 0.15); |
|
|
--color-bg-4: rgba(185, 28, 28, 0.15); |
|
|
--color-bg-5: rgba(107, 33, 168, 0.15); |
|
|
--color-bg-6: rgba(194, 65, 12, 0.15); |
|
|
--color-bg-7: rgba(190, 24, 93, 0.15); |
|
|
--color-bg-8: rgba(8, 145, 178, 0.15); |
|
|
|
|
|
|
|
|
--color-background: var(--color-charcoal-700); |
|
|
--color-surface: var(--color-charcoal-800); |
|
|
--color-text: var(--color-gray-200); |
|
|
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); |
|
|
--color-primary: var(--color-teal-300); |
|
|
--color-primary-hover: var(--color-teal-400); |
|
|
--color-primary-active: var(--color-teal-800); |
|
|
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15); |
|
|
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); |
|
|
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); |
|
|
--color-border: rgba(var(--color-gray-400-rgb), 0.3); |
|
|
--color-error: var(--color-red-400); |
|
|
--color-success: var(--color-teal-300); |
|
|
--color-warning: var(--color-orange-400); |
|
|
--color-info: var(--color-gray-300); |
|
|
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); |
|
|
--color-btn-primary-text: var(--color-slate-900); |
|
|
--color-card-border: rgba(var(--color-gray-400-rgb), 0.15); |
|
|
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); |
|
|
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
|
|
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); |
|
|
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); |
|
|
|
|
|
|
|
|
--focus-ring: 0 0 0 3px var(--color-focus-ring); |
|
|
--focus-outline: 2px solid var(--color-primary); |
|
|
--status-bg-opacity: 0.15; |
|
|
--status-border-opacity: 0.25; |
|
|
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
|
|
|
|
|
|
--color-success-rgb: var(--color-teal-300-rgb); |
|
|
--color-error-rgb: var(--color-red-400-rgb); |
|
|
--color-warning-rgb: var(--color-orange-400-rgb); |
|
|
--color-info-rgb: var(--color-gray-300-rgb); |
|
|
} |
|
|
|
|
|
[data-color-scheme="light"] { |
|
|
|
|
|
--color-brown-600-rgb: 94, 82, 64; |
|
|
--color-teal-500-rgb: 33, 128, 141; |
|
|
--color-slate-900-rgb: 19, 52, 59; |
|
|
|
|
|
|
|
|
--color-background: var(--color-cream-50); |
|
|
--color-surface: var(--color-cream-100); |
|
|
--color-text: var(--color-slate-900); |
|
|
--color-text-secondary: var(--color-slate-500); |
|
|
--color-primary: var(--color-teal-500); |
|
|
--color-primary-hover: var(--color-teal-600); |
|
|
--color-primary-active: var(--color-teal-700); |
|
|
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); |
|
|
--color-border: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-btn-primary-text: var(--color-cream-50); |
|
|
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-error: var(--color-red-500); |
|
|
--color-success: var(--color-teal-500); |
|
|
--color-warning: var(--color-orange-500); |
|
|
--color-info: var(--color-slate-500); |
|
|
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); |
|
|
|
|
|
|
|
|
--color-success-rgb: var(--color-teal-500-rgb); |
|
|
--color-error-rgb: var(--color-red-500-rgb); |
|
|
--color-warning-rgb: var(--color-orange-500-rgb); |
|
|
--color-info-rgb: var(--color-slate-500-rgb); |
|
|
} |
|
|
|
|
|
|
|
|
html { |
|
|
font-size: var(--font-size-base); |
|
|
font-family: var(--font-family-base); |
|
|
line-height: var(--line-height-normal); |
|
|
color: var(--color-text); |
|
|
background-color: var(--color-background); |
|
|
-webkit-font-smoothing: antialiased; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
*, |
|
|
*::before, |
|
|
*::after { |
|
|
box-sizing: inherit; |
|
|
} |
|
|
|
|
|
|
|
|
h1, |
|
|
h2, |
|
|
h3, |
|
|
h4, |
|
|
h5, |
|
|
h6 { |
|
|
margin: 0; |
|
|
font-weight: var(--font-weight-semibold); |
|
|
line-height: var(--line-height-tight); |
|
|
color: var(--color-text); |
|
|
letter-spacing: var(--letter-spacing-tight); |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: var(--font-size-4xl); |
|
|
} |
|
|
h2 { |
|
|
font-size: var(--font-size-3xl); |
|
|
} |
|
|
h3 { |
|
|
font-size: var(--font-size-2xl); |
|
|
} |
|
|
h4 { |
|
|
font-size: var(--font-size-xl); |
|
|
} |
|
|
h5 { |
|
|
font-size: var(--font-size-lg); |
|
|
} |
|
|
h6 { |
|
|
font-size: var(--font-size-md); |
|
|
} |
|
|
|
|
|
p { |
|
|
margin: 0 0 var(--space-16) 0; |
|
|
} |
|
|
|
|
|
a { |
|
|
color: var(--color-primary); |
|
|
text-decoration: none; |
|
|
transition: color var(--duration-fast) var(--ease-standard); |
|
|
} |
|
|
|
|
|
a:hover { |
|
|
color: var(--color-primary-hover); |
|
|
} |
|
|
|
|
|
code, |
|
|
pre { |
|
|
font-family: var(--font-family-mono); |
|
|
font-size: calc(var(--font-size-base) * 0.95); |
|
|
background-color: var(--color-secondary); |
|
|
border-radius: var(--radius-sm); |
|
|
} |
|
|
|
|
|
code { |
|
|
padding: var(--space-1) var(--space-4); |
|
|
} |
|
|
|
|
|
pre { |
|
|
padding: var(--space-16); |
|
|
margin: var(--space-16) 0; |
|
|
overflow: auto; |
|
|
border: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
pre code { |
|
|
background: none; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: var(--space-8) var(--space-16); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-base); |
|
|
font-weight: 500; |
|
|
line-height: 1.5; |
|
|
cursor: pointer; |
|
|
transition: all var(--duration-normal) var(--ease-standard); |
|
|
border: none; |
|
|
text-decoration: none; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.btn:focus-visible { |
|
|
outline: none; |
|
|
box-shadow: var(--focus-ring); |
|
|
} |
|
|
|
|
|
.btn--primary { |
|
|
background: var(--color-primary); |
|
|
color: var(--color-btn-primary-text); |
|
|
} |
|
|
|
|
|
.btn--primary:hover { |
|
|
background: var(--color-primary-hover); |
|
|
} |
|
|
|
|
|
.btn--primary:active { |
|
|
background: var(--color-primary-active); |
|
|
} |
|
|
|
|
|
.btn--secondary { |
|
|
background: var(--color-secondary); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.btn--secondary:hover { |
|
|
background: var(--color-secondary-hover); |
|
|
} |
|
|
|
|
|
.btn--secondary:active { |
|
|
background: var(--color-secondary-active); |
|
|
} |
|
|
|
|
|
.btn--outline { |
|
|
background: transparent; |
|
|
border: 1px solid var(--color-border); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.btn--outline:hover { |
|
|
background: var(--color-secondary); |
|
|
} |
|
|
|
|
|
.btn--sm { |
|
|
padding: var(--space-4) var(--space-12); |
|
|
font-size: var(--font-size-sm); |
|
|
border-radius: var(--radius-sm); |
|
|
} |
|
|
|
|
|
.btn--lg { |
|
|
padding: var(--space-10) var(--space-20); |
|
|
font-size: var(--font-size-lg); |
|
|
border-radius: var(--radius-md); |
|
|
} |
|
|
|
|
|
.btn--full-width { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
|
|
|
.form-control { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: var(--space-8) var(--space-12); |
|
|
font-size: var(--font-size-md); |
|
|
line-height: 1.5; |
|
|
color: var(--color-text); |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
transition: border-color var(--duration-fast) var(--ease-standard), |
|
|
box-shadow var(--duration-fast) var(--ease-standard); |
|
|
} |
|
|
|
|
|
textarea.form-control { |
|
|
font-family: var(--font-family-base); |
|
|
font-size: var(--font-size-base); |
|
|
} |
|
|
|
|
|
select.form-control { |
|
|
padding: var(--space-8) var(--space-12); |
|
|
-webkit-appearance: none; |
|
|
-moz-appearance: none; |
|
|
appearance: none; |
|
|
background-image: var(--select-caret-light); |
|
|
background-repeat: no-repeat; |
|
|
background-position: right var(--space-12) center; |
|
|
background-size: 16px; |
|
|
padding-right: var(--space-32); |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
|
select.form-control { |
|
|
background-image: var(--select-caret-dark); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
[data-color-scheme="dark"] select.form-control { |
|
|
background-image: var(--select-caret-dark); |
|
|
} |
|
|
|
|
|
[data-color-scheme="light"] select.form-control { |
|
|
background-image: var(--select-caret-light); |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
border-color: var(--color-primary); |
|
|
outline: var(--focus-outline); |
|
|
} |
|
|
|
|
|
.form-label { |
|
|
display: block; |
|
|
margin-bottom: var(--space-8); |
|
|
font-weight: var(--font-weight-medium); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: var(--space-16); |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
border: 1px solid var(--color-card-border); |
|
|
box-shadow: var(--shadow-sm); |
|
|
overflow: hidden; |
|
|
transition: box-shadow var(--duration-normal) var(--ease-standard); |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.card__body { |
|
|
padding: var(--space-16); |
|
|
} |
|
|
|
|
|
.card__header, |
|
|
.card__footer { |
|
|
padding: var(--space-16); |
|
|
border-bottom: 1px solid var(--color-card-border-inner); |
|
|
} |
|
|
|
|
|
|
|
|
.status { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: var(--space-6) var(--space-12); |
|
|
border-radius: var(--radius-full); |
|
|
font-weight: var(--font-weight-medium); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.status--success { |
|
|
background-color: rgba( |
|
|
var(--color-success-rgb, 33, 128, 141), |
|
|
var(--status-bg-opacity) |
|
|
); |
|
|
color: var(--color-success); |
|
|
border: 1px solid |
|
|
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); |
|
|
} |
|
|
|
|
|
.status--error { |
|
|
background-color: rgba( |
|
|
var(--color-error-rgb, 192, 21, 47), |
|
|
var(--status-bg-opacity) |
|
|
); |
|
|
color: var(--color-error); |
|
|
border: 1px solid |
|
|
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); |
|
|
} |
|
|
|
|
|
.status--warning { |
|
|
background-color: rgba( |
|
|
var(--color-warning-rgb, 168, 75, 47), |
|
|
var(--status-bg-opacity) |
|
|
); |
|
|
color: var(--color-warning); |
|
|
border: 1px solid |
|
|
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); |
|
|
} |
|
|
|
|
|
.status--info { |
|
|
background-color: rgba( |
|
|
var(--color-info-rgb, 98, 108, 113), |
|
|
var(--status-bg-opacity) |
|
|
); |
|
|
color: var(--color-info); |
|
|
border: 1px solid |
|
|
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
margin-right: auto; |
|
|
margin-left: auto; |
|
|
padding-right: var(--space-16); |
|
|
padding-left: var(--space-16); |
|
|
} |
|
|
|
|
|
@media (min-width: 640px) { |
|
|
.container { |
|
|
max-width: var(--container-sm); |
|
|
} |
|
|
} |
|
|
@media (min-width: 768px) { |
|
|
.container { |
|
|
max-width: var(--container-md); |
|
|
} |
|
|
} |
|
|
@media (min-width: 1024px) { |
|
|
.container { |
|
|
max-width: var(--container-lg); |
|
|
} |
|
|
} |
|
|
@media (min-width: 1280px) { |
|
|
.container { |
|
|
max-width: var(--container-xl); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flex { |
|
|
display: flex; |
|
|
} |
|
|
.flex-col { |
|
|
flex-direction: column; |
|
|
} |
|
|
.items-center { |
|
|
align-items: center; |
|
|
} |
|
|
.justify-center { |
|
|
justify-content: center; |
|
|
} |
|
|
.justify-between { |
|
|
justify-content: space-between; |
|
|
} |
|
|
.gap-4 { |
|
|
gap: var(--space-4); |
|
|
} |
|
|
.gap-8 { |
|
|
gap: var(--space-8); |
|
|
} |
|
|
.gap-16 { |
|
|
gap: var(--space-16); |
|
|
} |
|
|
|
|
|
.m-0 { |
|
|
margin: 0; |
|
|
} |
|
|
.mt-8 { |
|
|
margin-top: var(--space-8); |
|
|
} |
|
|
.mb-8 { |
|
|
margin-bottom: var(--space-8); |
|
|
} |
|
|
.mx-8 { |
|
|
margin-left: var(--space-8); |
|
|
margin-right: var(--space-8); |
|
|
} |
|
|
.my-8 { |
|
|
margin-top: var(--space-8); |
|
|
margin-bottom: var(--space-8); |
|
|
} |
|
|
|
|
|
.p-0 { |
|
|
padding: 0; |
|
|
} |
|
|
.py-8 { |
|
|
padding-top: var(--space-8); |
|
|
padding-bottom: var(--space-8); |
|
|
} |
|
|
.px-8 { |
|
|
padding-left: var(--space-8); |
|
|
padding-right: var(--space-8); |
|
|
} |
|
|
.py-16 { |
|
|
padding-top: var(--space-16); |
|
|
padding-bottom: var(--space-16); |
|
|
} |
|
|
.px-16 { |
|
|
padding-left: var(--space-16); |
|
|
padding-right: var(--space-16); |
|
|
} |
|
|
|
|
|
.block { |
|
|
display: block; |
|
|
} |
|
|
.hidden { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.sr-only { |
|
|
position: absolute; |
|
|
width: 1px; |
|
|
height: 1px; |
|
|
padding: 0; |
|
|
margin: -1px; |
|
|
overflow: hidden; |
|
|
clip: rect(0, 0, 0, 0); |
|
|
white-space: nowrap; |
|
|
border-width: 0; |
|
|
} |
|
|
|
|
|
:focus-visible { |
|
|
outline: var(--focus-outline); |
|
|
outline-offset: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
[data-color-scheme="dark"] .btn--outline { |
|
|
border: 1px solid var(--color-border-secondary); |
|
|
} |
|
|
|
|
|
@font-face { |
|
|
font-family: 'FKGroteskNeue'; |
|
|
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') |
|
|
format('woff2'); |
|
|
} |
|
|
|
|
|
|
|
|
:root { |
|
|
|
|
|
--color-white: rgba(255, 255, 255, 1); |
|
|
--color-black: rgba(0, 0, 0, 1); |
|
|
--color-cream-50: rgba(252, 252, 249, 1); |
|
|
--color-cream-100: rgba(255, 255, 253, 1); |
|
|
--color-gray-200: rgba(245, 245, 245, 1); |
|
|
--color-gray-300: rgba(167, 169, 169, 1); |
|
|
--color-gray-400: rgba(119, 124, 124, 1); |
|
|
--color-slate-500: rgba(98, 108, 113, 1); |
|
|
--color-brown-600: rgba(94, 82, 64, 1); |
|
|
--color-charcoal-700: rgba(31, 33, 33, 1); |
|
|
--color-charcoal-800: rgba(38, 40, 40, 1); |
|
|
--color-slate-900: rgba(19, 52, 59, 1); |
|
|
--color-teal-300: rgba(50, 184, 198, 1); |
|
|
--color-teal-400: rgba(45, 166, 178, 1); |
|
|
--color-teal-500: rgba(33, 128, 141, 1); |
|
|
--color-teal-600: rgba(29, 116, 128, 1); |
|
|
--color-teal-700: rgba(26, 104, 115, 1); |
|
|
--color-teal-800: rgba(41, 150, 161, 1); |
|
|
--color-red-400: rgba(255, 84, 89, 1); |
|
|
--color-red-500: rgba(192, 21, 47, 1); |
|
|
--color-orange-400: rgba(230, 129, 97, 1); |
|
|
--color-orange-500: rgba(168, 75, 47, 1); |
|
|
|
|
|
--color-brown-600-rgb: 94, 82, 64; |
|
|
--color-teal-500-rgb: 33, 128, 141; |
|
|
--color-slate-900-rgb: 19, 52, 59; |
|
|
--color-slate-500-rgb: 98, 108, 113; |
|
|
--color-red-500-rgb: 192, 21, 47; |
|
|
--color-red-400-rgb: 255, 84, 89; |
|
|
--color-orange-500-rgb: 168, 75, 47; |
|
|
--color-orange-400-rgb: 230, 129, 97; |
|
|
|
|
|
--color-bg-1: rgba(59, 130, 246, 0.08); |
|
|
--color-bg-2: rgba(245, 158, 11, 0.08); |
|
|
--color-bg-3: rgba(34, 197, 94, 0.08); |
|
|
--color-bg-4: rgba(239, 68, 68, 0.08); |
|
|
--color-bg-5: rgba(147, 51, 234, 0.08); |
|
|
--color-bg-6: rgba(249, 115, 22, 0.08); |
|
|
--color-bg-7: rgba(236, 72, 153, 0.08); |
|
|
--color-bg-8: rgba(6, 182, 212, 0.08); |
|
|
|
|
|
--color-background: var(--color-cream-50); |
|
|
--color-surface: var(--color-cream-100); |
|
|
--color-text: var(--color-slate-900); |
|
|
--color-text-secondary: var(--color-slate-500); |
|
|
--color-primary: var(--color-teal-500); |
|
|
--color-primary-hover: var(--color-teal-600); |
|
|
--color-primary-active: var(--color-teal-700); |
|
|
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); |
|
|
--color-border: rgba(var(--color-brown-600-rgb), 0.2); |
|
|
--color-btn-primary-text: var(--color-cream-50); |
|
|
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); |
|
|
--color-error: var(--color-red-500); |
|
|
--color-success: var(--color-teal-500); |
|
|
--color-warning: var(--color-orange-500); |
|
|
--color-info: var(--color-slate-500); |
|
|
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); |
|
|
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); |
|
|
|
|
|
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
|
|
--font-size-xs: 11px; |
|
|
--font-size-sm: 12px; |
|
|
--font-size-base: 14px; |
|
|
--font-size-md: 14px; |
|
|
--font-size-lg: 16px; |
|
|
--font-size-xl: 18px; |
|
|
--font-size-2xl: 20px; |
|
|
--font-size-3xl: 24px; |
|
|
--font-size-4xl: 30px; |
|
|
--font-weight-normal: 400; |
|
|
--font-weight-medium: 500; |
|
|
--font-weight-semibold: 550; |
|
|
--font-weight-bold: 600; |
|
|
--line-height-tight: 1.2; |
|
|
--line-height-normal: 1.5; |
|
|
|
|
|
--space-4: 4px; |
|
|
--space-8: 8px; |
|
|
--space-12: 12px; |
|
|
--space-16: 16px; |
|
|
--space-20: 20px; |
|
|
--space-24: 24px; |
|
|
--space-32: 32px; |
|
|
|
|
|
--radius-sm: 6px; |
|
|
--radius-base: 8px; |
|
|
--radius-md: 10px; |
|
|
--radius-lg: 12px; |
|
|
--radius-full: 9999px; |
|
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); |
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02); |
|
|
|
|
|
--sidebar-width: 260px; |
|
|
--header-height: 64px; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: var(--font-family-base); |
|
|
font-size: var(--font-size-base); |
|
|
line-height: var(--line-height-normal); |
|
|
color: var(--color-text); |
|
|
background-color: var(--color-background); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: var(--header-height); |
|
|
background-color: var(--color-surface); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 0 var(--space-24); |
|
|
z-index: 1000; |
|
|
box-shadow: var(--shadow-sm); |
|
|
} |
|
|
|
|
|
.header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-16); |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 24px; |
|
|
cursor: pointer; |
|
|
color: var(--color-text); |
|
|
padding: var(--space-8); |
|
|
border-radius: var(--radius-base); |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.menu-toggle:hover { |
|
|
background-color: var(--color-secondary); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 10px 15px; |
|
|
} |
|
|
|
|
|
.logo-link { |
|
|
display: block; |
|
|
transition: transform 0.3s ease, opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.logo-link:hover { |
|
|
transform: scale(1.05); |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.jjaa-logo { |
|
|
height: auto; |
|
|
width: 200px; |
|
|
max-width: 46%; |
|
|
display: block; |
|
|
object-fit: contain; |
|
|
} |
|
|
|
|
|
.header-center { |
|
|
flex: 1; |
|
|
max-width: 500px; |
|
|
margin: 0 var(--space-32); |
|
|
} |
|
|
|
|
|
.search-box { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.search-box input { |
|
|
width: 100%; |
|
|
padding: var(--space-8) var(--space-12); |
|
|
padding-right: 40px; |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-base); |
|
|
background-color: var(--color-background); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.search-icon { |
|
|
position: absolute; |
|
|
right: var(--space-12); |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
.header-right { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-16); |
|
|
} |
|
|
|
|
|
.location-selector select { |
|
|
padding: var(--space-8) var(--space-12); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-sm); |
|
|
background-color: var(--color-surface); |
|
|
color: var(--color-text); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.notification-btn { |
|
|
position: relative; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 20px; |
|
|
cursor: pointer; |
|
|
padding: var(--space-8); |
|
|
border-radius: var(--radius-base); |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.notification-btn:hover { |
|
|
background-color: var(--color-secondary); |
|
|
} |
|
|
|
|
|
.badge { |
|
|
position: absolute; |
|
|
top: 4px; |
|
|
right: 4px; |
|
|
background-color: var(--color-error); |
|
|
color: white; |
|
|
font-size: 10px; |
|
|
padding: 2px 5px; |
|
|
border-radius: var(--radius-full); |
|
|
font-weight: var(--font-weight-bold); |
|
|
} |
|
|
|
|
|
.profile-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-8); |
|
|
background: none; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
padding: var(--space-8) var(--space-12); |
|
|
border-radius: var(--radius-base); |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.profile-btn:hover { |
|
|
background-color: var(--color-secondary); |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
font-size: 24px; |
|
|
} |
|
|
|
|
|
.user-name { |
|
|
font-size: var(--font-size-base); |
|
|
font-weight: var(--font-weight-medium); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.dropdown-arrow { |
|
|
font-size: 10px; |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
position: fixed; |
|
|
left: 0; |
|
|
top: var(--header-height); |
|
|
width: var(--sidebar-width); |
|
|
height: calc(100vh - var(--header-height)); |
|
|
background-color: var(--color-slate-900); |
|
|
border-right: 1px solid var(--color-border); |
|
|
overflow-y: auto; |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 999; |
|
|
} |
|
|
|
|
|
.sidebar.collapsed { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar-nav { |
|
|
padding: var(--space-16) 0; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-12); |
|
|
padding: var(--space-12) var(--space-24); |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
text-decoration: none; |
|
|
transition: all 0.2s; |
|
|
border-left: 3px solid transparent; |
|
|
} |
|
|
|
|
|
.nav-item:hover { |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
color: rgba(255, 255, 255, 1); |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
background-color: rgba(33, 128, 141, 0.15); |
|
|
color: var(--color-teal-300); |
|
|
border-left-color: var(--color-teal-300); |
|
|
} |
|
|
|
|
|
.nav-icon { |
|
|
font-size: 20px; |
|
|
width: 24px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.nav-text { |
|
|
font-size: var(--font-size-base); |
|
|
font-weight: var(--font-weight-medium); |
|
|
} |
|
|
|
|
|
.sidebar-footer { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
padding: var(--space-16); |
|
|
background-color: rgba(0, 0, 0, 0.2); |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.system-status { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-8); |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
font-size: var(--font-size-sm); |
|
|
margin-bottom: var(--space-8); |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
color: #22c55e; |
|
|
font-size: 8px; |
|
|
} |
|
|
|
|
|
.last-sync { |
|
|
color: rgba(255, 255, 255, 0.5); |
|
|
font-size: var(--font-size-xs); |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
margin-left: var(--sidebar-width); |
|
|
margin-top: var(--header-height); |
|
|
padding: var(--space-24); |
|
|
min-height: calc(100vh - var(--header-height)); |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
|
|
|
.main-content.expanded { |
|
|
margin-left: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.breadcrumb { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-8); |
|
|
margin-bottom: var(--space-24); |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
.breadcrumb a { |
|
|
color: var(--color-primary); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.breadcrumb a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
|
|
|
.page-header { |
|
|
margin-bottom: var(--space-24); |
|
|
} |
|
|
|
|
|
.page-title { |
|
|
font-size: var(--font-size-3xl); |
|
|
font-weight: var(--font-weight-bold); |
|
|
color: var(--color-text); |
|
|
margin-bottom: var(--space-8); |
|
|
} |
|
|
|
|
|
.page-subtitle { |
|
|
font-size: var(--font-size-base); |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
|
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: var(--space-20); |
|
|
margin-bottom: var(--space-24); |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
border: 1px solid var(--color-card-border); |
|
|
padding: var(--space-20); |
|
|
box-shadow: var(--shadow-sm); |
|
|
transition: transform 0.2s, box-shadow 0.2s; |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.stat-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: var(--space-12); |
|
|
} |
|
|
|
|
|
.stat-title { |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--color-text-secondary); |
|
|
font-weight: var(--font-weight-medium); |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
font-size: 24px; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: var(--font-size-3xl); |
|
|
font-weight: var(--font-weight-bold); |
|
|
color: var(--color-text); |
|
|
margin-bottom: var(--space-4); |
|
|
} |
|
|
|
|
|
.stat-change { |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--color-success); |
|
|
} |
|
|
|
|
|
.stat-change.negative { |
|
|
color: var(--color-error); |
|
|
} |
|
|
|
|
|
|
|
|
.sub-nav { |
|
|
display: flex; |
|
|
gap: var(--space-8); |
|
|
margin-bottom: var(--space-24); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.sub-nav-item { |
|
|
padding: var(--space-12) var(--space-16); |
|
|
font-size: var(--font-size-base); |
|
|
font-weight: var(--font-weight-medium); |
|
|
color: var(--color-text-secondary); |
|
|
background: none; |
|
|
border: none; |
|
|
border-bottom: 2px solid transparent; |
|
|
cursor: pointer; |
|
|
white-space: nowrap; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.sub-nav-item:hover { |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.sub-nav-item.active { |
|
|
color: var(--color-primary); |
|
|
border-bottom-color: var(--color-primary); |
|
|
} |
|
|
|
|
|
|
|
|
.content-section { |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
border: 1px solid var(--color-card-border); |
|
|
padding: var(--space-24); |
|
|
margin-bottom: var(--space-24); |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: var(--space-20); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.section-actions { |
|
|
display: flex; |
|
|
gap: var(--space-8); |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: var(--space-8); |
|
|
padding: var(--space-8) var(--space-16); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-base); |
|
|
font-weight: var(--font-weight-medium); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
border: none; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: var(--color-primary); |
|
|
color: var(--color-btn-primary-text); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: var(--color-primary-hover); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background-color: var(--color-secondary); |
|
|
color: var(--color-text); |
|
|
border: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background-color: var(--color-secondary-hover); |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
padding: var(--space-4) var(--space-12); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
|
|
|
.table-container { |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.data-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
|
|
|
.data-table thead { |
|
|
background-color: var(--color-bg-1); |
|
|
border-bottom: 2px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.data-table th { |
|
|
padding: var(--space-12) var(--space-16); |
|
|
text-align: left; |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--color-text); |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.data-table td { |
|
|
padding: var(--space-12) var(--space-16); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
font-size: var(--font-size-base); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.data-table tbody tr { |
|
|
transition: background-color 0.2s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.data-table tbody tr:hover { |
|
|
background-color: var(--color-bg-2); |
|
|
} |
|
|
|
|
|
|
|
|
.status-badge { |
|
|
display: inline-block; |
|
|
padding: var(--space-4) var(--space-12); |
|
|
border-radius: var(--radius-full); |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-medium); |
|
|
} |
|
|
|
|
|
.status-good { |
|
|
background-color: rgba(34, 197, 94, 0.15); |
|
|
color: #16a34a; |
|
|
} |
|
|
|
|
|
.status-warning { |
|
|
background-color: rgba(245, 158, 11, 0.15); |
|
|
color: #d97706; |
|
|
} |
|
|
|
|
|
.status-error { |
|
|
background-color: rgba(239, 68, 68, 0.15); |
|
|
color: #dc2626; |
|
|
} |
|
|
|
|
|
.status-info { |
|
|
background-color: rgba(59, 130, 246, 0.15); |
|
|
color: #2563eb; |
|
|
} |
|
|
|
|
|
|
|
|
.chart-container { |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
border: 1px solid var(--color-card-border); |
|
|
padding: var(--space-24); |
|
|
margin-bottom: var(--space-24); |
|
|
} |
|
|
|
|
|
.chart-wrapper { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
z-index: 2000; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.modal.active { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
width: 90%; |
|
|
max-width: 800px; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: var(--space-20); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.modal-header h3 { |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 28px; |
|
|
cursor: pointer; |
|
|
color: var(--color-text-secondary); |
|
|
line-height: 1; |
|
|
} |
|
|
|
|
|
.modal-close:hover { |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: var(--space-24); |
|
|
} |
|
|
|
|
|
|
|
|
.form-group { |
|
|
margin-bottom: var(--space-16); |
|
|
} |
|
|
|
|
|
.form-label { |
|
|
display: block; |
|
|
margin-bottom: var(--space-8); |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-medium); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: var(--space-8) var(--space-12); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-base); |
|
|
color: var(--color-text); |
|
|
background-color: var(--color-background); |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: var(--color-primary); |
|
|
box-shadow: 0 0 0 3px var(--color-focus-ring); |
|
|
} |
|
|
|
|
|
textarea.form-control { |
|
|
min-height: 100px; |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
bottom: var(--space-24); |
|
|
right: var(--space-24); |
|
|
background-color: var(--color-slate-900); |
|
|
color: white; |
|
|
padding: var(--space-16) var(--space-24); |
|
|
border-radius: var(--radius-base); |
|
|
box-shadow: var(--shadow-lg); |
|
|
transform: translateY(200%); |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 3000; |
|
|
} |
|
|
|
|
|
.toast.show { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
.grid-2 { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: var(--space-20); |
|
|
} |
|
|
|
|
|
.grid-3 { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: var(--space-20); |
|
|
} |
|
|
|
|
|
|
|
|
.text-center { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.text-right { |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.mt-16 { |
|
|
margin-top: var(--space-16); |
|
|
} |
|
|
|
|
|
.mb-16 { |
|
|
margin-bottom: var(--space-16); |
|
|
} |
|
|
|
|
|
.hidden { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot-toggle { |
|
|
position: fixed; |
|
|
bottom: 24px; |
|
|
right: 24px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: var(--radius-full); |
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-teal-700) 100%); |
|
|
border: none; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
cursor: pointer; |
|
|
z-index: 1500; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.chatbot-toggle:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 6px 20px rgba(33, 128, 141, 0.4); |
|
|
} |
|
|
|
|
|
.chatbot-toggle .chat-icon { |
|
|
font-size: 28px; |
|
|
} |
|
|
|
|
|
.chatbot-toggle .notification-badge { |
|
|
position: absolute; |
|
|
top: -4px; |
|
|
right: -4px; |
|
|
background-color: var(--color-error); |
|
|
color: white; |
|
|
font-size: 11px; |
|
|
padding: 3px 6px; |
|
|
border-radius: var(--radius-full); |
|
|
font-weight: var(--font-weight-bold); |
|
|
min-width: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.chatbot-widget { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
right: 24px; |
|
|
width: 420px; |
|
|
height: 600px; |
|
|
background-color: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
z-index: 1600; |
|
|
transform: scale(0.8) translateY(20px); |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
border: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.chatbot-widget.active { |
|
|
transform: scale(1) translateY(0); |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.chatbot-header { |
|
|
background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-teal-700) 100%); |
|
|
color: white; |
|
|
padding: var(--space-16); |
|
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.chatbot-header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-12); |
|
|
} |
|
|
|
|
|
.chatbot-icon { |
|
|
font-size: 28px; |
|
|
} |
|
|
|
|
|
.chatbot-title { |
|
|
font-size: var(--font-size-lg); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.chatbot-status { |
|
|
font-size: var(--font-size-xs); |
|
|
opacity: 0.9; |
|
|
margin-top: 2px; |
|
|
} |
|
|
|
|
|
.chatbot-header-actions { |
|
|
display: flex; |
|
|
gap: var(--space-4); |
|
|
} |
|
|
|
|
|
.chatbot-action-btn { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: var(--radius-base); |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 18px; |
|
|
color: white; |
|
|
transition: background 0.2s; |
|
|
} |
|
|
|
|
|
.chatbot-action-btn:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.chatbot-body { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: var(--space-16); |
|
|
background-color: var(--color-background); |
|
|
} |
|
|
|
|
|
.chatbot-welcome { |
|
|
text-align: center; |
|
|
padding: var(--space-20); |
|
|
} |
|
|
|
|
|
.welcome-icon { |
|
|
font-size: 48px; |
|
|
margin-bottom: var(--space-12); |
|
|
} |
|
|
|
|
|
.chatbot-welcome h3 { |
|
|
font-size: var(--font-size-xl); |
|
|
margin-bottom: var(--space-8); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.chatbot-welcome p { |
|
|
color: var(--color-text-secondary); |
|
|
margin-bottom: var(--space-16); |
|
|
} |
|
|
|
|
|
.quick-actions { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: var(--space-8); |
|
|
margin-bottom: var(--space-20); |
|
|
} |
|
|
|
|
|
.quick-action-btn { |
|
|
padding: var(--space-12); |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-sm); |
|
|
font-weight: var(--font-weight-medium); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
text-align: left; |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.quick-action-btn:hover { |
|
|
background-color: var(--color-secondary); |
|
|
border-color: var(--color-primary); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.suggested-questions { |
|
|
text-align: left; |
|
|
margin-top: var(--space-20); |
|
|
} |
|
|
|
|
|
.suggested-questions p { |
|
|
font-size: var(--font-size-sm); |
|
|
margin-bottom: var(--space-8); |
|
|
} |
|
|
|
|
|
.suggestion-btn { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: var(--space-8) var(--space-12); |
|
|
margin-bottom: var(--space-8); |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
text-align: left; |
|
|
font-size: var(--font-size-sm); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.suggestion-btn:hover { |
|
|
background-color: var(--color-bg-1); |
|
|
border-color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.chatbot-messages { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--space-16); |
|
|
} |
|
|
|
|
|
.chat-message { |
|
|
display: flex; |
|
|
gap: var(--space-12); |
|
|
animation: messageSlideIn 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes messageSlideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-message.user { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
.message-avatar { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: var(--radius-full); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 18px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.message-avatar.bot { |
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-teal-700) 100%); |
|
|
} |
|
|
|
|
|
.message-avatar.user { |
|
|
background-color: var(--color-secondary); |
|
|
} |
|
|
|
|
|
.message-content { |
|
|
max-width: 75%; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
padding: var(--space-12) var(--space-16); |
|
|
border-radius: var(--radius-md); |
|
|
font-size: var(--font-size-base); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.chat-message.bot .message-bubble { |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.chat-message.user .message-bubble { |
|
|
background-color: var(--color-primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.message-time { |
|
|
font-size: var(--font-size-xs); |
|
|
color: var(--color-text-secondary); |
|
|
margin-top: var(--space-4); |
|
|
padding: 0 var(--space-4); |
|
|
} |
|
|
|
|
|
.chat-message.user .message-time { |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.message-actions { |
|
|
display: flex; |
|
|
gap: var(--space-8); |
|
|
margin-top: var(--space-8); |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.action-btn { |
|
|
padding: var(--space-4) var(--space-12); |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-sm); |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: var(--font-weight-medium); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.action-btn:hover { |
|
|
background-color: var(--color-primary); |
|
|
color: white; |
|
|
border-color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: flex; |
|
|
gap: var(--space-4); |
|
|
padding: var(--space-12); |
|
|
background-color: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-md); |
|
|
width: fit-content; |
|
|
} |
|
|
|
|
|
.typing-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--color-text-secondary); |
|
|
animation: typingBounce 1.4s infinite; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes typingBounce { |
|
|
0%, 60%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
30% { |
|
|
transform: translateY(-8px); |
|
|
} |
|
|
} |
|
|
|
|
|
.data-table-chat { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin: var(--space-8) 0; |
|
|
font-size: var(--font-size-sm); |
|
|
background-color: var(--color-background); |
|
|
border-radius: var(--radius-base); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.data-table-chat th { |
|
|
background-color: var(--color-bg-1); |
|
|
padding: var(--space-8); |
|
|
text-align: left; |
|
|
font-weight: var(--font-weight-semibold); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.data-table-chat td { |
|
|
padding: var(--space-8); |
|
|
border-bottom: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.metric-highlight { |
|
|
font-weight: var(--font-weight-bold); |
|
|
color: var(--color-primary); |
|
|
} |
|
|
|
|
|
.alert-icon { |
|
|
margin-right: var(--space-4); |
|
|
} |
|
|
|
|
|
.chatbot-footer { |
|
|
padding: var(--space-16); |
|
|
border-top: 1px solid var(--color-border); |
|
|
background-color: var(--color-surface); |
|
|
} |
|
|
|
|
|
.chatbot-input-wrapper { |
|
|
display: flex; |
|
|
gap: var(--space-8); |
|
|
} |
|
|
|
|
|
.chatbot-input { |
|
|
flex: 1; |
|
|
padding: var(--space-12); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-base); |
|
|
font-size: var(--font-size-base); |
|
|
background-color: var(--color-background); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.chatbot-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--color-primary); |
|
|
box-shadow: 0 0 0 3px var(--color-focus-ring); |
|
|
} |
|
|
|
|
|
.chatbot-send-btn { |
|
|
width: 44px; |
|
|
height: 44px; |
|
|
background-color: var(--color-primary); |
|
|
border: none; |
|
|
border-radius: var(--radius-base); |
|
|
color: white; |
|
|
font-size: 20px; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.chatbot-send-btn:hover { |
|
|
background-color: var(--color-primary-hover); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.chatbot-send-btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.grid-3 { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.jjaa-logo { |
|
|
width: 160px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
margin-left: 0; |
|
|
} |
|
|
|
|
|
.grid-2, |
|
|
.grid-3 { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.header-center { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.stats-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.jjaa-logo { |
|
|
width: 140px; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
padding: 8px 12px; |
|
|
} |
|
|
|
|
|
.chatbot-widget { |
|
|
width: calc(100vw - 32px); |
|
|
height: calc(100vh - 140px); |
|
|
right: 16px; |
|
|
bottom: 90px; |
|
|
} |
|
|
|
|
|
.chatbot-toggle { |
|
|
bottom: 16px; |
|
|
right: 16px; |
|
|
} |
|
|
} |
