diff --git a/src/ResidencyRoll.Web/Components/App.razor b/src/ResidencyRoll.Web/Components/App.razor index b85ff7f..fce3443 100644 --- a/src/ResidencyRoll.Web/Components/App.razor +++ b/src/ResidencyRoll.Web/Components/App.razor @@ -12,13 +12,12 @@ - - - - + + + - + @@ -32,7 +31,6 @@ - diff --git a/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor b/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor index d821d75..18f5240 100644 --- a/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor +++ b/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor @@ -1,15 +1,15 @@ @using Radzen.Blazor @inherits LayoutComponentBase - - + +

Residency Roll - Residency Status Dashboard

 - + diff --git a/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor.css b/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor.css index bb2b863..2a5eae3 100644 --- a/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor.css +++ b/src/ResidencyRoll.Web/Components/Layout/MainLayout.razor.css @@ -9,15 +9,14 @@ main { } .sidebar { - background: transparent !important; - background-image: none !important; + background-color: var(--cds-layer-02, #ffffff); } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; + background-color: var(--cds-layer-02, #ffffff); + border-bottom: 1px solid var(--cds-border-subtle-00, #e0e0e0); justify-content: flex-end; - height: 3.5rem; + height: 3rem; display: flex; align-items: center; } @@ -79,13 +78,14 @@ main { #blazor-error-ui { color-scheme: light only; - background: lightyellow; + background: #fff1f1; + border-left: 3px solid var(--cds-support-error, #da1e28); bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1); box-sizing: border-box; display: none; left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; + padding: 0.75rem 1.25rem; position: fixed; width: 100%; z-index: 1000; diff --git a/src/ResidencyRoll.Web/Components/Layout/NavMenu.razor.css b/src/ResidencyRoll.Web/Components/Layout/NavMenu.razor.css index 9429bc5..17bf0ee 100644 --- a/src/ResidencyRoll.Web/Components/Layout/NavMenu.razor.css +++ b/src/ResidencyRoll.Web/Components/Layout/NavMenu.razor.css @@ -3,21 +3,21 @@ cursor: pointer; width: 3.5rem; height: 2.5rem; - color: white; + color: var(--cds-icon-primary, #161616); position: absolute; top: 0.5rem; right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); + border: 1px solid var(--cds-border-subtle-00, #e0e0e0); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23525252' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--cds-layer-01, #f4f4f4); } .navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); + background-color: var(--cds-layer-hover-01, #e8e8e8); } .top-row { - min-height: 3.5rem; - background-color: transparent !important; + min-height: 3rem; + background-color: var(--cds-layer-02, #ffffff); } .navbar-brand { @@ -35,20 +35,20 @@ } .bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23525252' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } .bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23525252' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); } .bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23525252' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } .nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; + font-size: 0.875rem; + padding-bottom: 0.25rem; } .nav-item:first-of-type { @@ -60,32 +60,33 @@ } .nav-item ::deep .nav-link { - color: var(--color-text-primary, #1D1D1F); - background: transparent !important; + color: var(--cds-text-secondary, #525252); + background: transparent; border: none; - border-radius: 14px; - height: 3rem; + border-radius: 0; + height: 2.5rem; display: flex; align-items: center; - line-height: 3rem; + line-height: 2.5rem; width: 100%; - font-weight: 500; + font-weight: 400; + transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } .nav-item ::deep a.active { - background: rgba(0, 113, 227, 0.14) !important; - color: var(--color-accent-active, #005BB5) !important; - box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.22) !important; + background-color: var(--cds-layer-selected-01, #e0e0e0); + color: var(--cds-text-primary, #161616); + font-weight: 600; + border-left: 3px solid var(--cds-blue-60, #0f62fe); } .nav-item ::deep a.active * { - color: var(--color-accent-active, #005BB5) !important; + color: var(--cds-text-primary, #161616); } .nav-item ::deep .nav-link:hover { - background: rgba(255, 255, 255, 0.3) !important; - backdrop-filter: blur(16px) !important; - color: var(--color-text-primary, #1D1D1F); + background-color: var(--cds-layer-hover-01, #e8e8e8); + color: var(--cds-text-primary, #161616); } .nav-scrollable { @@ -106,7 +107,7 @@ display: block; /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); + height: calc(100vh - 3rem); overflow-y: auto; } } diff --git a/src/ResidencyRoll.Web/wwwroot/liquid-glass-accessibility.css b/src/ResidencyRoll.Web/wwwroot/accessibility.css similarity index 54% rename from src/ResidencyRoll.Web/wwwroot/liquid-glass-accessibility.css rename to src/ResidencyRoll.Web/wwwroot/accessibility.css index 5ec2ad6..45d2749 100644 --- a/src/ResidencyRoll.Web/wwwroot/liquid-glass-accessibility.css +++ b/src/ResidencyRoll.Web/wwwroot/accessibility.css @@ -1,93 +1,33 @@ /* ============================================ - 2026 Liquid Glass - Accessibility Overrides + Accessibility Overrides WCAG AAA Compliance & User Preferences ============================================ */ /* ========== HIGH CONTRAST MODE ========== */ @media (prefers-contrast: high) { :root { - /* Solid backgrounds for better contrast */ - --glass-light: rgba(255, 255, 255, 0.95); - --glass-dark: rgba(20, 20, 20, 0.95); - --glass-blur: 0px; - --glass-light-catcher: rgba(0, 0, 0, 0.3); - /* Enhanced text contrast */ - --color-text-primary: #000000; - --color-text-secondary: #333333; - --color-border: rgba(0, 0, 0, 0.3); + --cds-text-primary: #000000; + --cds-text-secondary: #333333; + --cds-border-subtle-00: rgba(0, 0, 0, 0.3); + --cds-border-subtle-01: rgba(0, 0, 0, 0.5); } /* Dark mode high contrast */ @media (prefers-color-scheme: dark) { :root { - --glass-light: rgba(30, 30, 30, 0.98); - --glass-dark: rgba(0, 0, 0, 0.98); - --glass-light-catcher: rgba(255, 255, 255, 0.4); - --color-text-primary: #FFFFFF; - --color-text-secondary: #CCCCCC; - --color-border: rgba(255, 255, 255, 0.4); + --cds-text-primary: #FFFFFF; + --cds-text-secondary: #CCCCCC; + --cds-border-subtle-00: rgba(255, 255, 255, 0.4); + --cds-border-subtle-01: rgba(255, 255, 255, 0.6); } } - /* Enhanced text legibility */ - h1, h2, h3, h4, h5, h6, p, span, div, button, a { - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; - } - /* Stronger borders */ .rz-card, - .liquid-glass, - .glass, .rz-button { - border-width: 2px !important; - border-color: var(--color-border) !important; - } - - /* Remove subtle effects */ - *::before, - *::after { - opacity: 0 !important; - } -} - -/* ========== REDUCED TRANSPARENCY ========== */ -@media (prefers-reduced-transparency: reduce) { - :root { - --glass-light: rgba(255, 255, 255, 0.95); - --glass-dark: rgba(20, 20, 20, 0.95); - --glass-blur: 0px; - } - - @media (prefers-color-scheme: dark) { - :root { - --glass-light: rgba(30, 30, 30, 0.98); - --glass-dark: rgba(0, 0, 0, 0.98); - } - } - - /* Disable backdrop filters */ - *, - .liquid-glass, - .glass, - .rz-card, - .rz-header, - .rz-sidebar, - .rz-dialog { - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - } - - /* Solid backgrounds */ - .rz-card, - .liquid-glass, - .glass { - background: var(--color-surface) !important; - } - - body::before, - body::after { - opacity: 0 !important; + border-width: 2px; + border-color: var(--cds-border-subtle-01); } } @@ -102,18 +42,8 @@ scroll-behavior: auto !important; } - /* Disable background animations */ - body::before { - animation: none !important; - } - - body::after { - animation: none !important; - } - /* Disable hover animations */ .rz-card:hover, - .liquid-glass:hover, .hover-lift:hover, .hover-scale:hover { animation: none !important; @@ -122,9 +52,6 @@ /* Disable scroll animations */ .fade-in, - .fade-in-delay-1, - .fade-in-delay-2, - .fade-in-delay-3, .scale-in, .slide-in-left, .slide-in-right { @@ -136,7 +63,7 @@ /* Instant focus changes */ :focus-visible { animation: none !important; - outline: 2px solid var(--color-accent) !important; + outline: 2px solid var(--cds-focus, #0f62fe) !important; outline-offset: 2px !important; } } @@ -144,21 +71,16 @@ /* ========== FORCED COLORS MODE ========== */ @media (forced-colors: active) { :root { - --glass-light: Canvas; - --glass-dark: Canvas; - --glass-blur: 0px; - --color-accent: LinkText; - --color-text-primary: CanvasText; - --color-text-secondary: CanvasText; + --cds-layer-01: Canvas; + --cds-layer-02: Canvas; + --cds-blue-60: LinkText; + --cds-text-primary: CanvasText; + --cds-text-secondary: CanvasText; } - .rz-card, - .liquid-glass, - .glass { + .rz-card { background: Canvas !important; border: 1px solid CanvasText !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; } .rz-button-primary { @@ -166,17 +88,12 @@ color: ButtonText !important; border: 1px solid ButtonText !important; } - - body::before, - body::after { - display: none !important; - } } /* ========== FOCUS VISIBILITY ENHANCEMENTS ========== */ :focus-visible { - outline: 3px solid var(--color-accent) !important; - outline-offset: 3px !important; + outline: 2px solid var(--cds-focus, #0f62fe) !important; + outline-offset: 2px !important; z-index: 1000 !important; } @@ -187,8 +104,8 @@ input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { - box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.25), - 0 0 0 8px rgba(0, 113, 227, 0.1) !important; + box-shadow: 0 0 0 2px var(--cds-layer-02, #ffffff), + 0 0 0 4px var(--cds-focus, #0f62fe) !important; } /* ========== SCREEN READER ONLY ========== */ @@ -219,19 +136,18 @@ select:focus-visible, position: absolute; top: -100px; left: 0; - background: var(--color-accent); - color: white; + background: var(--cds-blue-60, #0f62fe); + color: var(--cds-text-on-color, #ffffff); padding: 1rem 2rem; text-decoration: none; z-index: 10000; - border-radius: 0 0 var(--border-radius-sm) 0; - font-weight: var(--font-weight-bold); - transition: top 0.3s ease; + font-weight: 600; + transition: top 0.15s ease; } .skip-link:focus { top: 0; - outline: 3px solid white; + outline: 2px solid var(--cds-text-on-color, #ffffff); outline-offset: -3px; } @@ -257,24 +173,10 @@ select:focus-visible, /* ========== PRINT STYLES ========== */ @media print { - /* Remove decorative elements */ - body::before, - body::after, - .liquid-glass::before, - .liquid-glass::after, - .glass::before, - .glass::after { - display: none !important; - } - /* Solid backgrounds for print */ - .rz-card, - .liquid-glass, - .glass { + .rz-card { background: white !important; border: 1px solid black !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; box-shadow: none !important; } @@ -294,7 +196,7 @@ select:focus-visible, /* Enhanced contrast for color blind users */ .high-contrast-links a { text-decoration: underline; - font-weight: var(--font-weight-bold); + font-weight: 600; } .high-contrast-links .rz-button-primary { @@ -316,28 +218,28 @@ select:focus-visible, } .focus-trap:focus-within { - outline: 3px solid var(--color-accent); - outline-offset: 3px; + outline: 2px solid var(--cds-focus, #0f62fe); + outline-offset: 2px; } /* Enhanced contrast for form validation */ .invalid, .rz-invalid { - outline: 3px solid #D32F2F !important; + outline: 2px solid var(--cds-support-error, #da1e28) !important; outline-offset: 2px !important; } .valid, .rz-valid { - outline: 3px solid #388E3C !important; + outline: 2px solid var(--cds-support-success, #198038) !important; outline-offset: 2px !important; } /* Error message accessibility */ .validation-message, .rz-validation-message { - color: #D32F2F !important; - font-weight: var(--font-weight-bold) !important; + color: var(--cds-support-error, #da1e28) !important; + font-weight: 600 !important; margin-top: 0.5rem !important; display: flex !important; align-items: center !important; @@ -346,6 +248,6 @@ select:focus-visible, .validation-message::before, .rz-validation-message::before { - content: '?' !important; + content: '⚠' !important; font-size: 1.2em !important; } diff --git a/src/ResidencyRoll.Web/wwwroot/carbon-theme.css b/src/ResidencyRoll.Web/wwwroot/carbon-theme.css new file mode 100644 index 0000000..495683f --- /dev/null +++ b/src/ResidencyRoll.Web/wwwroot/carbon-theme.css @@ -0,0 +1,1056 @@ +/* ============================================ + Carbon Design System Theme + IBM Carbon-inspired styling for ResidencyRoll + ============================================ */ + +/* ========== CARBON DESIGN TOKENS ========== */ +:root { + /* Gray Scale */ + --cds-gray-10: #f4f4f4; + --cds-gray-20: #e0e0e0; + --cds-gray-30: #c6c6c6; + --cds-gray-40: #a8a8a8; + --cds-gray-50: #8d8d8d; + --cds-gray-60: #6f6f6f; + --cds-gray-70: #525252; + --cds-gray-80: #393939; + --cds-gray-90: #262626; + --cds-gray-100: #161616; + + /* Blue Scale (Primary) */ + --cds-blue-10: #edf5ff; + --cds-blue-20: #d0e2ff; + --cds-blue-30: #a6c8ff; + --cds-blue-40: #78a9ff; + --cds-blue-50: #4589ff; + --cds-blue-60: #0f62fe; + --cds-blue-70: #0043ce; + --cds-blue-80: #002d9c; + + /* Support Colors */ + --cds-red-60: #da1e28; + --cds-green-60: #198038; + --cds-yellow-30: #f1c21b; + --cds-orange-40: #ff832b; + --cds-purple-60: #8a3ffc; + --cds-teal-50: #009d9a; + + /* Semantic Tokens - Light Theme (White) */ + --cds-background: #ffffff; + --cds-background-hover: #e8e8e8; + --cds-background-active: #c6c6c6; + --cds-background-selected: #e0e0e0; + --cds-background-brand: #0f62fe; + + --cds-layer-01: #f4f4f4; + --cds-layer-02: #ffffff; + --cds-layer-hover-01: #e8e8e8; + --cds-layer-hover-02: #e8e8e8; + --cds-layer-active-01: #c6c6c6; + --cds-layer-selected-01: #e0e0e0; + + --cds-field-01: #f4f4f4; + --cds-field-02: #ffffff; + --cds-field-hover-01: #e8e8e8; + + --cds-border-subtle-00: #e0e0e0; + --cds-border-subtle-01: #c6c6c6; + --cds-border-strong-01: #8d8d8d; + --cds-border-interactive: #0f62fe; + + --cds-text-primary: #161616; + --cds-text-secondary: #525252; + --cds-text-placeholder: #a8a8a8; + --cds-text-on-color: #ffffff; + --cds-text-helper: #6f6f6f; + --cds-text-error: #da1e28; + --cds-text-inverse: #ffffff; + + --cds-link-primary: #0f62fe; + --cds-link-primary-hover: #0043ce; + --cds-link-visited: #8a3ffc; + + --cds-icon-primary: #161616; + --cds-icon-secondary: #525252; + --cds-icon-on-color: #ffffff; + --cds-icon-interactive: #0f62fe; + + --cds-support-error: #da1e28; + --cds-support-success: #198038; + --cds-support-warning: #f1c21b; + --cds-support-info: #0043ce; + + --cds-focus: #0f62fe; + --cds-interactive: #0f62fe; + --cds-highlight: #d0e2ff; + + --cds-overlay: rgba(22, 22, 22, 0.5); + + /* Typography */ + --cds-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --cds-font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + + /* Type Scale - Productive */ + --cds-label-01-size: 0.75rem; + --cds-label-01-line-height: 1.34; + --cds-label-01-weight: 400; + + --cds-body-compact-01-size: 0.875rem; + --cds-body-compact-01-line-height: 1.29; + + --cds-body-01-size: 0.875rem; + --cds-body-01-line-height: 1.43; + + --cds-body-02-size: 1rem; + --cds-body-02-line-height: 1.5; + + --cds-heading-01-size: 0.875rem; + --cds-heading-01-weight: 600; + + --cds-heading-02-size: 1rem; + --cds-heading-02-weight: 600; + + --cds-heading-03-size: 1.25rem; + --cds-heading-03-weight: 400; + + --cds-heading-04-size: 1.75rem; + --cds-heading-04-weight: 400; + + --cds-heading-05-size: 2rem; + --cds-heading-05-weight: 400; + + /* Spacing Scale (rem-based, 16px base) */ + --cds-spacing-01: 0.125rem; /* 2px */ + --cds-spacing-02: 0.25rem; /* 4px */ + --cds-spacing-03: 0.5rem; /* 8px */ + --cds-spacing-04: 0.75rem; /* 12px */ + --cds-spacing-05: 1rem; /* 16px */ + --cds-spacing-06: 1.5rem; /* 24px */ + --cds-spacing-07: 2rem; /* 32px */ + --cds-spacing-08: 2.5rem; /* 40px */ + --cds-spacing-09: 3rem; /* 48px */ + + /* Layout */ + --cds-container-01: 1.5rem; /* 24px */ + --cds-container-02: 2rem; /* 32px */ + --cds-container-03: 2.5rem; /* 40px */ + --cds-container-04: 3rem; /* 48px */ + --cds-container-05: 4rem; /* 64px */ + + /* Border Radius - Carbon uses 0 by default, but we'll use subtle radius for friendliness */ + --cds-border-radius-sm: 0; + --cds-border-radius-md: 0; + --cds-border-radius-lg: 0; + + /* Shadows - Carbon elevation */ + --cds-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1); + --cds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); + --cds-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1); + + /* Animation */ + --cds-duration-fast-01: 70ms; + --cds-duration-fast-02: 110ms; + --cds-duration-moderate-01: 150ms; + --cds-duration-moderate-02: 240ms; + --cds-duration-slow-01: 400ms; + --cds-duration-slow-02: 700ms; + --cds-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9); + --cds-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9); + --cds-easing-exit: cubic-bezier(0.2, 0, 1, 0.9); + + /* Legacy variable mappings for existing code */ + --color-background: var(--cds-layer-01); + --color-surface: var(--cds-layer-02); + --color-accent: var(--cds-blue-60); + --color-accent-hover: var(--cds-blue-70); + --color-accent-active: var(--cds-blue-80); + --color-text-primary: var(--cds-text-primary); + --color-text-secondary: var(--cds-text-secondary); + --color-border: var(--cds-border-subtle-00); + + /* Radzen theme variable overrides */ + --rz-primary: var(--cds-blue-60); + --rz-primary-light: var(--cds-blue-50); + --rz-primary-dark: var(--cds-blue-70); + --rz-text-color: var(--cds-text-primary); + --rz-secondary-color: var(--cds-text-secondary); + --rz-base-background-color: var(--cds-layer-01); + --rz-on-warning: var(--cds-gray-100); + --rz-on-info: var(--cds-text-on-color); + --rz-on-success: var(--cds-text-on-color); + --rz-on-danger: var(--cds-text-on-color); + --rz-on-primary: var(--cds-text-on-color); +} + +/* ========== DARK THEME ========== */ +@media (prefers-color-scheme: dark) { + :root { + --cds-background: #161616; + --cds-background-hover: #353535; + --cds-background-active: #525252; + --cds-background-selected: #393939; + + --cds-layer-01: #262626; + --cds-layer-02: #393939; + --cds-layer-hover-01: #353535; + --cds-layer-hover-02: #474747; + --cds-layer-active-01: #525252; + --cds-layer-selected-01: #393939; + + --cds-field-01: #262626; + --cds-field-02: #393939; + --cds-field-hover-01: #353535; + + --cds-border-subtle-00: #393939; + --cds-border-subtle-01: #525252; + --cds-border-strong-01: #6f6f6f; + + --cds-text-primary: #f4f4f4; + --cds-text-secondary: #c6c6c6; + --cds-text-placeholder: #6f6f6f; + --cds-text-helper: #8d8d8d; + --cds-text-inverse: #161616; + + --cds-icon-primary: #f4f4f4; + --cds-icon-secondary: #c6c6c6; + + --cds-highlight: #002d9c; + --cds-overlay: rgba(0, 0, 0, 0.65); + + --rz-on-warning: var(--cds-gray-100); + } +} + +/* ========== BASE STYLES ========== */ +html { + font-size: 16px; + background-color: var(--cds-layer-01); +} + +body { + font-family: var(--cds-font-family); + font-size: var(--cds-body-02-size); + line-height: var(--cds-body-02-line-height); + color: var(--cds-text-primary); + background-color: var(--cds-layer-01); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 0; + padding: 0; +} + +* { + box-sizing: border-box; +} + +/* ========== TYPOGRAPHY ========== */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--cds-font-family); + color: var(--cds-text-primary); + margin: 0 0 var(--cds-spacing-05) 0; +} + +h1 { + font-size: var(--cds-heading-05-size); + font-weight: var(--cds-heading-05-weight); + line-height: 1.25; + letter-spacing: 0; +} + +h2 { + font-size: var(--cds-heading-04-size); + font-weight: var(--cds-heading-04-weight); + line-height: 1.29; +} + +h3 { + font-size: var(--cds-heading-03-size); + font-weight: var(--cds-heading-03-weight); + line-height: 1.4; +} + +h4 { + font-size: var(--cds-heading-02-size); + font-weight: var(--cds-heading-02-weight); + line-height: 1.5; +} + +h5, h6 { + font-size: var(--cds-heading-01-size); + font-weight: var(--cds-heading-01-weight); + line-height: 1.43; +} + +p { + font-size: var(--cds-body-02-size); + line-height: var(--cds-body-02-line-height); + color: var(--cds-text-secondary); + margin: 0 0 var(--cds-spacing-05) 0; +} + +a { + color: var(--cds-link-primary); + text-decoration: none; +} + +a:hover { + color: var(--cds-link-primary-hover); + text-decoration: underline; +} + +/* ========== RADZEN LAYOUT OVERRIDES ========== */ +.rz-layout, +.rz-layout-wrapper { + background-color: var(--cds-layer-01); +} + +.rz-body, +.rz-body-content { + background-color: transparent; +} + +/* Header */ +.rz-header, +header.rz-header { + background-color: var(--cds-layer-02); + border-bottom: 1px solid var(--cds-border-subtle-00); + padding: var(--cds-spacing-05) var(--cds-spacing-07); + min-height: 48px; + display: flex; + align-items: center; +} + +/* Sidebar */ +.rz-sidebar, +aside.rz-sidebar { + background-color: var(--cds-layer-02); + border-right: 1px solid var(--cds-border-subtle-00); +} + +/* Main Content */ +.main-body { + padding: var(--cds-spacing-06); + background-color: var(--cds-layer-01); +} + +/* Header Content */ +.header-content { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + gap: var(--cds-spacing-05); +} + +.header-title { + margin: 0; + padding: 0; + color: var(--cds-text-primary); + font-weight: 600; + font-size: 1.25rem; +} + +/* ========== RADZEN CARD ========== */ +.rz-card, +div.rz-card { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + border-radius: var(--cds-border-radius-md); + padding: var(--cds-spacing-06); + box-shadow: none; +} + +.rz-card:hover, +div.rz-card:hover { + border-color: var(--cds-border-subtle-01); +} + +.rz-card-title { + font-size: var(--cds-heading-02-size); + font-weight: var(--cds-heading-02-weight); + color: var(--cds-text-primary); + margin-bottom: var(--cds-spacing-04); +} + +.rz-card-content { + color: var(--cds-text-secondary); +} + +/* ========== RADZEN BUTTONS ========== */ +.rz-button, +button.rz-button { + font-family: var(--cds-font-family); + font-size: var(--cds-body-compact-01-size); + font-weight: 400; + padding: calc(var(--cds-spacing-04) - 1px) calc(var(--cds-spacing-05) - 1px); + border-radius: var(--cds-border-radius-sm); + border: none; + cursor: pointer; + transition: background-color var(--cds-duration-fast-02) var(--cds-easing-standard); + min-height: var(--cds-container-03); +} + +/* Primary Button */ +.rz-button-primary, +button.rz-button-primary, +.rz-button.rz-primary { + background-color: var(--cds-blue-60); + color: var(--cds-text-on-color); + border: none; +} + +.rz-button-primary:hover, +button.rz-button-primary:hover, +.rz-button.rz-primary:hover { + background-color: var(--cds-blue-70); +} + +.rz-button-primary:active, +button.rz-button-primary:active, +.rz-button.rz-primary:active { + background-color: var(--cds-blue-80); +} + +/* Secondary Button */ +.rz-button-secondary, +button.rz-button-secondary, +.rz-button.rz-secondary, +.rz-button-light, +button.rz-button-light { + background-color: transparent; + color: var(--cds-text-primary); + border: 1px solid var(--cds-blue-60); +} + +.rz-button-secondary:hover, +button.rz-button-secondary:hover, +.rz-button.rz-secondary:hover, +.rz-button-light:hover, +button.rz-button-light:hover { + background-color: var(--cds-layer-hover-01); + border-color: var(--cds-blue-70); +} + +/* Danger Button */ +.rz-button-danger, +button.rz-button-danger, +.rz-button.rz-danger { + background-color: var(--cds-red-60); + color: var(--cds-text-on-color); + border: none; +} + +.rz-button-danger:hover, +button.rz-button-danger:hover, +.rz-button.rz-danger:hover { + background-color: #b81921; +} + +/* Success Button */ +.rz-button-success, +button.rz-button-success, +.rz-button.rz-success { + background-color: var(--cds-green-60); + color: var(--cds-text-on-color); + border: none; +} + +.rz-button-success:hover, +button.rz-button-success:hover, +.rz-button.rz-success:hover { + background-color: #136e2d; +} + +/* Info Button */ +.rz-button-info, +button.rz-button-info, +.rz-button.rz-info { + background-color: var(--cds-support-info); + color: var(--cds-text-on-color); + border: none; +} + +/* Button Focus */ +.rz-button:focus-visible, +button.rz-button:focus-visible { + outline: 2px solid var(--cds-focus); + outline-offset: 2px; +} + +/* ========== RADZEN INPUTS & FORMS ========== */ +.rz-textbox, +input.rz-inputtext, +textarea { + font-family: var(--cds-font-family); + font-size: var(--cds-body-01-size); + background-color: var(--cds-field-01); + border: none; + border-bottom: 1px solid var(--cds-border-strong-01); + border-radius: var(--cds-border-radius-sm); + padding: var(--cds-spacing-04) var(--cds-spacing-05); + color: var(--cds-text-primary); + min-height: var(--cds-container-03); + transition: border-color var(--cds-duration-fast-02) var(--cds-easing-standard), + outline var(--cds-duration-fast-02) var(--cds-easing-standard); +} + +.rz-textbox:hover, +input.rz-inputtext:hover, +textarea:hover { + background-color: var(--cds-field-hover-01); +} + +.rz-textbox:focus, +input.rz-inputtext:focus, +textarea:focus { + outline: 2px solid var(--cds-focus); + outline-offset: -2px; + border-bottom-color: var(--cds-focus); +} + +.rz-textbox::placeholder, +input.rz-inputtext::placeholder, +textarea::placeholder { + color: var(--cds-text-placeholder); +} + +/* Dropdown */ +.rz-dropdown { + font-family: var(--cds-font-family); + font-size: var(--cds-body-01-size); + background-color: var(--cds-field-01); + border: none; + border-bottom: 1px solid var(--cds-border-strong-01); + border-radius: var(--cds-border-radius-sm); + min-height: var(--cds-container-03); + color: var(--cds-text-primary); +} + +.rz-dropdown:hover { + background-color: var(--cds-field-hover-01); +} + +.rz-dropdown:focus, +.rz-dropdown:focus-within { + outline: 2px solid var(--cds-focus); + outline-offset: -2px; +} + +.rz-dropdown-panel, +.rz-dropdown-items, +.rz-listbox { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + box-shadow: var(--cds-shadow-md); +} + +.rz-dropdown-item, +li.rz-dropdown-item { + background-color: var(--cds-layer-02); + color: var(--cds-text-primary); + padding: var(--cds-spacing-04) var(--cds-spacing-05); + transition: background-color var(--cds-duration-fast-01) var(--cds-easing-standard); +} + +.rz-dropdown-item:hover, +li.rz-dropdown-item:hover { + background-color: var(--cds-layer-hover-02); + color: var(--cds-text-primary); +} + +.rz-dropdown-item.rz-state-highlight, +li.rz-dropdown-item.rz-state-highlight, +.rz-dropdown-item[aria-selected="true"], +li.rz-dropdown-item[aria-selected="true"] { + background-color: var(--cds-layer-selected-01); + color: var(--cds-text-primary); + font-weight: 600; +} + +/* ========== RADZEN CALENDAR/DATEPICKER (CRITICAL) ========== */ +.rz-calendar, +.rz-datepicker-container, +.rz-monthpicker, +.rz-daypicker, +.rz-datepicker { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); +} + +.rz-calendar-row, +.rz-calendar-cell, +td.rz-calendar-cell, +.rz-state-default { + background-color: var(--cds-layer-02); + color: var(--cds-text-primary); +} + +.rz-calendar-cell:hover, +td.rz-calendar-cell:hover, +.rz-state-default:hover { + background-color: var(--cds-layer-hover-02); + color: var(--cds-text-primary); +} + +.rz-state-active, +.rz-calendar-cell.rz-state-active, +td.rz-calendar-cell.rz-state-active, +.rz-state-highlight { + background-color: var(--cds-blue-60); + color: var(--cds-text-on-color); + font-weight: 600; +} + +.rz-state-today, +.rz-calendar-cell.rz-state-today, +td.rz-calendar-cell.rz-state-today { + border: 2px solid var(--cds-blue-60); +} + +/* ========== RADZEN AUTOCOMPLETE (CRITICAL) ========== */ +.rz-autocomplete, +.rz-autocomplete-input, +input.rz-autocomplete-input { + font-family: var(--cds-font-family); + font-size: var(--cds-body-01-size); + background-color: var(--cds-field-01); + border: none; + border-bottom: 1px solid var(--cds-border-strong-01); + color: var(--cds-text-primary); + min-height: var(--cds-container-03); +} + +.rz-autocomplete:focus, +.rz-autocomplete-input:focus, +input.rz-autocomplete-input:focus { + outline: 2px solid var(--cds-focus); + outline-offset: -2px; +} + +.rz-autocomplete-items { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + box-shadow: var(--cds-shadow-md); +} + +.rz-autocomplete-item { + background-color: var(--cds-layer-02); + color: var(--cds-text-primary); + padding: var(--cds-spacing-04) var(--cds-spacing-05); +} + +.rz-autocomplete-item:hover { + background-color: var(--cds-layer-hover-02); +} + +.rz-autocomplete-item.rz-state-highlight { + background-color: var(--cds-layer-selected-01); + font-weight: 600; +} + +/* ========== RADZEN BADGES & ALERTS (CRITICAL - ACCESSIBILITY) ========== */ +.rz-badge { + font-family: var(--cds-font-family); + font-size: var(--cds-label-01-size); + font-weight: 600; + padding: var(--cds-spacing-02) var(--cds-spacing-03); + border-radius: 24px; +} + +.rz-badge-primary, +.rz-badge.rz-primary { + background-color: var(--cds-blue-60); + color: var(--cds-text-on-color); +} + +.rz-badge-secondary, +.rz-badge.rz-secondary { + background-color: var(--cds-gray-20); + color: var(--cds-text-primary); +} + +.rz-badge-success, +.rz-badge.rz-success { + background-color: var(--cds-green-60); + color: var(--cds-text-on-color); +} + +.rz-badge-danger, +.rz-badge.rz-danger { + background-color: var(--cds-red-60); + color: var(--cds-text-on-color); +} + +/* Warning badge - dark text for contrast */ +.rz-badge-warning, +.rz-badge.rz-warning { + background-color: var(--cds-yellow-30); + color: var(--cds-gray-100); +} + +/* Info badge */ +.rz-badge-info, +.rz-badge.rz-info { + background-color: var(--cds-support-info); + color: var(--cds-text-on-color); +} + +/* Alert containers */ +.rz-alert { + font-family: var(--cds-font-family); + padding: var(--cds-spacing-05); + border-left: 3px solid; +} + +.rz-alert-warning, +.rz-alert.rz-warning { + background-color: #fdf6dd; + border-left-color: var(--cds-yellow-30); + color: var(--cds-gray-100); +} + +.rz-alert-info, +.rz-alert.rz-info { + background-color: var(--cds-blue-10); + border-left-color: var(--cds-support-info); + color: var(--cds-text-primary); +} + +.rz-alert-success, +.rz-alert.rz-success { + background-color: #defbe6; + border-left-color: var(--cds-green-60); + color: var(--cds-text-primary); +} + +.rz-alert-danger, +.rz-alert.rz-danger { + background-color: #fff1f1; + border-left-color: var(--cds-red-60); + color: var(--cds-text-primary); +} + +/* ========== RADZEN DATATABLE/GRID ========== */ +.rz-datatable, +.rz-grid { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + border-radius: var(--cds-border-radius-md); + overflow: hidden; +} + +.rz-datatable-header, +.rz-grid-header { + background-color: var(--cds-layer-01); + color: var(--cds-text-primary); + font-weight: 600; + font-size: var(--cds-heading-01-size); + padding: var(--cds-spacing-05); + border-bottom: 1px solid var(--cds-border-subtle-00); +} + +.rz-datatable-row, +.rz-grid-row { + border-bottom: 1px solid var(--cds-border-subtle-00); + transition: background-color var(--cds-duration-fast-01) var(--cds-easing-standard); +} + +.rz-datatable-row:hover, +.rz-grid-row:hover { + background-color: var(--cds-layer-hover-01); +} + +.rz-datatable-row:last-child, +.rz-grid-row:last-child { + border-bottom: none; +} + +/* ========== RADZEN DIALOG/MODAL ========== */ +.rz-dialog-mask { + background-color: var(--cds-overlay); +} + +.rz-dialog { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + box-shadow: var(--cds-shadow-lg); + border-radius: var(--cds-border-radius-md); +} + +.rz-dialog-titlebar { + background-color: transparent; + border-bottom: 1px solid var(--cds-border-subtle-00); + padding: var(--cds-spacing-05) var(--cds-spacing-06); + font-size: var(--cds-heading-03-size); + font-weight: 400; + color: var(--cds-text-primary); +} + +.rz-dialog-content { + padding: var(--cds-spacing-06); + color: var(--cds-text-secondary); +} + +/* ========== RADZEN TABS ========== */ +.rz-tabview { + background-color: transparent; +} + +.rz-tabview-nav { + border-bottom: 1px solid var(--cds-border-subtle-00); +} + +.rz-tabview-nav-link { + font-family: var(--cds-font-family); + font-size: var(--cds-body-compact-01-size); + font-weight: 600; + color: var(--cds-text-secondary); + padding: var(--cds-spacing-04) var(--cds-spacing-05); + border: none; + border-bottom: 2px solid transparent; + background-color: transparent; + transition: color var(--cds-duration-fast-02) var(--cds-easing-standard), + border-color var(--cds-duration-fast-02) var(--cds-easing-standard); +} + +.rz-tabview-nav-link:hover { + color: var(--cds-text-primary); + background-color: var(--cds-layer-hover-01); +} + +.rz-tabview-nav-link.rz-state-active { + color: var(--cds-text-primary); + border-bottom-color: var(--cds-blue-60); + background-color: transparent; +} + +.rz-tabview-panels { + padding: var(--cds-spacing-06) 0; +} + +/* ========== RADZEN PANEL/ACCORDION ========== */ +.rz-panel, +.rz-accordion { + background-color: var(--cds-layer-02); + border: 1px solid var(--cds-border-subtle-00); + border-radius: var(--cds-border-radius-md); + margin-bottom: var(--cds-spacing-05); +} + +.rz-panel-header, +.rz-accordion-header { + background-color: var(--cds-layer-01); + border-bottom: 1px solid var(--cds-border-subtle-00); + padding: var(--cds-spacing-05); + font-weight: 600; + color: var(--cds-text-primary); +} + +.rz-panel-header:hover, +.rz-accordion-header:hover { + background-color: var(--cds-layer-hover-01); +} + +.rz-panel-content, +.rz-accordion-content { + padding: var(--cds-spacing-05); + color: var(--cds-text-secondary); +} + +/* ========== NAVIGATION ========== */ +.nav-menu-container { + padding: var(--cds-spacing-05); +} + +.nav-menu-container .nav { + display: flex; + flex-direction: column; + gap: var(--cds-spacing-02); +} + +.nav-menu-container .nav-link, +.rz-navigation-item { + display: flex; + align-items: center; + gap: var(--cds-spacing-04); + padding: var(--cds-spacing-04) var(--cds-spacing-05); + color: var(--cds-text-secondary); + text-decoration: none; + font-weight: 400; + font-size: var(--cds-body-compact-01-size); + border: none; + background-color: transparent; + transition: background-color var(--cds-duration-fast-02) var(--cds-easing-standard), + color var(--cds-duration-fast-02) var(--cds-easing-standard); +} + +.nav-menu-container .nav-link:hover, +.rz-navigation-item:hover { + background-color: var(--cds-layer-hover-01); + color: var(--cds-text-primary); +} + +.nav-menu-container .nav-link.active, +.rz-navigation-item.active { + background-color: var(--cds-layer-selected-01); + color: var(--cds-text-primary); + font-weight: 600; + border-left: 3px solid var(--cds-blue-60); +} + +.nav-menu-container .nav-link span:first-child { + font-size: 1rem; + width: 1.25rem; + text-align: center; +} + +/* ========== LOGIN DISPLAY ========== */ +.login-display { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--cds-spacing-04); +} + +.user-name { + display: flex; + align-items: center; + gap: var(--cds-spacing-03); + color: var(--cds-text-primary); + font-weight: 500; + font-size: var(--cds-body-compact-01-size); + padding: var(--cds-spacing-03) var(--cds-spacing-04); + background-color: var(--cds-layer-01); + border-radius: var(--cds-border-radius-sm); +} + +.btn-logout, +.btn-login { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--cds-spacing-03); + padding: var(--cds-spacing-03) var(--cds-spacing-05); + border-radius: var(--cds-border-radius-sm); + font-weight: 400; + font-size: var(--cds-body-compact-01-size); + cursor: pointer; + transition: background-color var(--cds-duration-fast-02) var(--cds-easing-standard); + text-decoration: none; +} + +.btn-logout { + background-color: transparent; + color: var(--cds-text-primary); + border: 1px solid var(--cds-border-subtle-01); +} + +.btn-logout:hover { + background-color: var(--cds-layer-hover-01); +} + +.btn-login { + background-color: var(--cds-blue-60); + color: var(--cds-text-on-color); + border: none; +} + +.btn-login:hover { + background-color: var(--cds-blue-70); +} + +/* ========== BENTO GRID ========== */ +.bento-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--cds-spacing-05); + padding: 0; +} + +@media (min-width: 768px) { + .bento-grid { + grid-template-columns: repeat(12, 1fr); + } + + .bento-cell-1 { grid-column: span 1; } + .bento-cell-2 { grid-column: span 2; } + .bento-cell-3 { grid-column: span 3; } + .bento-cell-4 { grid-column: span 4; } + .bento-cell-5 { grid-column: span 5; } + .bento-cell-6 { grid-column: span 6; } + .bento-cell-7 { grid-column: span 7; } + .bento-cell-8 { grid-column: span 8; } + .bento-cell-9 { grid-column: span 9; } + .bento-cell-10 { grid-column: span 10; } + .bento-cell-11 { grid-column: span 11; } + .bento-cell-12 { grid-column: span 12; } + + .bento-row-2 { grid-row: span 2; } + .bento-row-3 { grid-row: span 3; } +} + +@media (max-width: 767px) { + .bento-grid { + grid-template-columns: 1fr; + } +} + +/* ========== SCROLLBAR ========== */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--cds-layer-01); +} + +::-webkit-scrollbar-thumb { + background: var(--cds-gray-40); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--cds-gray-50); +} + +/* ========== FOCUS VISIBILITY (ACCESSIBILITY) ========== */ +:focus-visible { + outline: 2px solid var(--cds-focus); + outline-offset: 2px; +} + +/* Skip to main content link */ +.skip-link { + position: absolute; + top: -100px; + left: 0; + background: var(--cds-blue-60); + color: var(--cds-text-on-color); + padding: var(--cds-spacing-05); + z-index: 10000; + transition: top var(--cds-duration-fast-02) var(--cds-easing-standard); +} + +.skip-link:focus { + top: 0; +} + +/* ========== RESPONSIVE ========== */ +@media (max-width: 768px) { + h1 { + font-size: 1.75rem; + } + + h2 { + font-size: 1.5rem; + } + + .rz-header { + padding: var(--cds-spacing-04) var(--cds-spacing-05); + } + + .main-body { + padding: var(--cds-spacing-05); + } +} diff --git a/src/ResidencyRoll.Web/wwwroot/carbon-utils.css b/src/ResidencyRoll.Web/wwwroot/carbon-utils.css new file mode 100644 index 0000000..e3e0d80 --- /dev/null +++ b/src/ResidencyRoll.Web/wwwroot/carbon-utils.css @@ -0,0 +1,246 @@ +/* ============================================ + Carbon Design System Utility Classes + ============================================ */ + +/* ========== DISPLAY UTILITIES ========== */ +.d-flex { display: flex !important; } +.d-grid { display: grid !important; } +.d-block { display: block !important; } +.d-inline { display: inline !important; } +.d-inline-block { display: inline-block !important; } +.d-none { display: none !important; } + +/* ========== FLEXBOX UTILITIES ========== */ +.flex-row { flex-direction: row !important; } +.flex-column { flex-direction: column !important; } +.flex-wrap { flex-wrap: wrap !important; } +.flex-nowrap { flex-wrap: nowrap !important; } +.flex-1 { flex: 1 !important; } +.flex-grow-0 { flex-grow: 0 !important; } +.flex-grow-1 { flex-grow: 1 !important; } +.flex-shrink-0 { flex-shrink: 0 !important; } + +.justify-start { justify-content: flex-start !important; } +.justify-center { justify-content: center !important; } +.justify-end { justify-content: flex-end !important; } +.justify-between { justify-content: space-between !important; } +.justify-around { justify-content: space-around !important; } + +.align-start { align-items: flex-start !important; } +.align-center { align-items: center !important; } +.align-end { align-items: flex-end !important; } +.align-stretch { align-items: stretch !important; } +.align-baseline { align-items: baseline !important; } + +/* ========== GAP UTILITIES ========== */ +.gap-01 { gap: var(--cds-spacing-01) !important; } +.gap-02 { gap: var(--cds-spacing-02) !important; } +.gap-03 { gap: var(--cds-spacing-03) !important; } +.gap-04 { gap: var(--cds-spacing-04) !important; } +.gap-05 { gap: var(--cds-spacing-05) !important; } +.gap-06 { gap: var(--cds-spacing-06) !important; } +.gap-07 { gap: var(--cds-spacing-07) !important; } + +/* ========== PADDING UTILITIES ========== */ +.p-0 { padding: 0 !important; } +.p-01 { padding: var(--cds-spacing-01) !important; } +.p-02 { padding: var(--cds-spacing-02) !important; } +.p-03 { padding: var(--cds-spacing-03) !important; } +.p-04 { padding: var(--cds-spacing-04) !important; } +.p-05 { padding: var(--cds-spacing-05) !important; } +.p-06 { padding: var(--cds-spacing-06) !important; } +.p-07 { padding: var(--cds-spacing-07) !important; } + +.px-0 { padding-left: 0 !important; padding-right: 0 !important; } +.px-03 { padding-left: var(--cds-spacing-03) !important; padding-right: var(--cds-spacing-03) !important; } +.px-05 { padding-left: var(--cds-spacing-05) !important; padding-right: var(--cds-spacing-05) !important; } +.px-06 { padding-left: var(--cds-spacing-06) !important; padding-right: var(--cds-spacing-06) !important; } + +.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } +.py-03 { padding-top: var(--cds-spacing-03) !important; padding-bottom: var(--cds-spacing-03) !important; } +.py-05 { padding-top: var(--cds-spacing-05) !important; padding-bottom: var(--cds-spacing-05) !important; } +.py-06 { padding-top: var(--cds-spacing-06) !important; padding-bottom: var(--cds-spacing-06) !important; } + +.pt-0 { padding-top: 0 !important; } +.pt-05 { padding-top: var(--cds-spacing-05) !important; } +.pt-06 { padding-top: var(--cds-spacing-06) !important; } + +.pb-0 { padding-bottom: 0 !important; } +.pb-05 { padding-bottom: var(--cds-spacing-05) !important; } +.pb-06 { padding-bottom: var(--cds-spacing-06) !important; } + +/* ========== MARGIN UTILITIES ========== */ +.m-0 { margin: 0 !important; } +.m-01 { margin: var(--cds-spacing-01) !important; } +.m-02 { margin: var(--cds-spacing-02) !important; } +.m-03 { margin: var(--cds-spacing-03) !important; } +.m-04 { margin: var(--cds-spacing-04) !important; } +.m-05 { margin: var(--cds-spacing-05) !important; } +.m-06 { margin: var(--cds-spacing-06) !important; } +.m-07 { margin: var(--cds-spacing-07) !important; } +.m-auto { margin: auto !important; } + +.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } +.mx-auto { margin-left: auto !important; margin-right: auto !important; } +.mx-05 { margin-left: var(--cds-spacing-05) !important; margin-right: var(--cds-spacing-05) !important; } + +.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.my-05 { margin-top: var(--cds-spacing-05) !important; margin-bottom: var(--cds-spacing-05) !important; } +.my-06 { margin-top: var(--cds-spacing-06) !important; margin-bottom: var(--cds-spacing-06) !important; } + +.mt-0 { margin-top: 0 !important; } +.mt-03 { margin-top: var(--cds-spacing-03) !important; } +.mt-05 { margin-top: var(--cds-spacing-05) !important; } +.mt-06 { margin-top: var(--cds-spacing-06) !important; } + +.mb-0 { margin-bottom: 0 !important; } +.mb-03 { margin-bottom: var(--cds-spacing-03) !important; } +.mb-05 { margin-bottom: var(--cds-spacing-05) !important; } +.mb-06 { margin-bottom: var(--cds-spacing-06) !important; } + +.ml-auto { margin-left: auto !important; } +.mr-auto { margin-right: auto !important; } + +/* ========== TEXT UTILITIES ========== */ +.text-left { text-align: left !important; } +.text-center { text-align: center !important; } +.text-right { text-align: right !important; } + +.text-primary { color: var(--cds-text-primary) !important; } +.text-secondary { color: var(--cds-text-secondary) !important; } +.text-helper { color: var(--cds-text-helper) !important; } +.text-error { color: var(--cds-text-error) !important; } +.text-on-color { color: var(--cds-text-on-color) !important; } + +.font-normal { font-weight: 400 !important; } +.font-medium { font-weight: 500 !important; } +.font-semibold { font-weight: 600 !important; } + +.text-sm { font-size: var(--cds-body-compact-01-size) !important; } +.text-base { font-size: var(--cds-body-02-size) !important; } +.text-lg { font-size: var(--cds-heading-03-size) !important; } + +/* ========== BACKGROUND UTILITIES ========== */ +.bg-transparent { background-color: transparent !important; } +.bg-layer-01 { background-color: var(--cds-layer-01) !important; } +.bg-layer-02 { background-color: var(--cds-layer-02) !important; } +.bg-brand { background-color: var(--cds-background-brand) !important; } + +/* ========== BORDER UTILITIES ========== */ +.border { border: 1px solid var(--cds-border-subtle-00) !important; } +.border-0 { border: none !important; } +.border-bottom { border-bottom: 1px solid var(--cds-border-subtle-00) !important; } +.border-top { border-top: 1px solid var(--cds-border-subtle-00) !important; } + +/* ========== SHADOW UTILITIES ========== */ +.shadow-none { box-shadow: none !important; } +.shadow-sm { box-shadow: var(--cds-shadow-sm) !important; } +.shadow-md { box-shadow: var(--cds-shadow-md) !important; } +.shadow-lg { box-shadow: var(--cds-shadow-lg) !important; } + +/* ========== WIDTH/HEIGHT UTILITIES ========== */ +.w-full { width: 100% !important; } +.w-auto { width: auto !important; } +.w-fit { width: fit-content !important; } + +.h-full { height: 100% !important; } +.h-auto { height: auto !important; } +.h-fit { height: fit-content !important; } + +.min-h-0 { min-height: 0 !important; } +.max-w-full { max-width: 100% !important; } + +/* ========== OVERFLOW UTILITIES ========== */ +.overflow-hidden { overflow: hidden !important; } +.overflow-auto { overflow: auto !important; } +.overflow-visible { overflow: visible !important; } +.overflow-x-auto { overflow-x: auto !important; } +.overflow-y-auto { overflow-y: auto !important; } + +/* ========== POSITION UTILITIES ========== */ +.position-relative { position: relative !important; } +.position-absolute { position: absolute !important; } +.position-fixed { position: fixed !important; } +.position-sticky { position: sticky !important; } + +/* ========== Z-INDEX UTILITIES ========== */ +.z-0 { z-index: 0 !important; } +.z-10 { z-index: 10 !important; } +.z-20 { z-index: 20 !important; } +.z-50 { z-index: 50 !important; } +.z-100 { z-index: 100 !important; } + +/* ========== CURSOR UTILITIES ========== */ +.cursor-pointer { cursor: pointer !important; } +.cursor-default { cursor: default !important; } +.cursor-not-allowed { cursor: not-allowed !important; } + +/* ========== OPACITY UTILITIES ========== */ +.opacity-0 { opacity: 0 !important; } +.opacity-50 { opacity: 0.5 !important; } +.opacity-75 { opacity: 0.75 !important; } +.opacity-100 { opacity: 1 !important; } + +/* ========== VISIBILITY UTILITIES ========== */ +.visible { visibility: visible !important; } +.invisible { visibility: hidden !important; } + +/* ========== SCREEN READER UTILITIES ========== */ +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.sr-only-focusable:focus, +.sr-only-focusable:active { + position: static !important; + width: auto !important; + height: auto !important; + overflow: visible !important; + clip: auto !important; + white-space: normal !important; +} + +/* ========== RESPONSIVE UTILITIES ========== */ +@media (max-width: 671px) { + .mobile-hidden { display: none !important; } + .mobile-visible { display: block !important; } +} + +@media (min-width: 672px) { + .desktop-hidden { display: none !important; } + .desktop-visible { display: block !important; } +} + +/* ========== ANIMATION UTILITIES ========== */ +.fade-in { + animation: fadeIn var(--cds-duration-moderate-02) var(--cds-easing-entrance); +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + .fade-in, + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/ResidencyRoll.Web/wwwroot/custom-theme.css b/src/ResidencyRoll.Web/wwwroot/custom-theme.css deleted file mode 100644 index 3b1686e..0000000 --- a/src/ResidencyRoll.Web/wwwroot/custom-theme.css +++ /dev/null @@ -1,1362 +0,0 @@ -/* ============================================ - 2026 "Liquid Glass" Design System - Ultra-Modern Spatial Computing Interface - Glassmorphism + WCAG AAA Compliance - ============================================ */ - -/* ========== ROOT VARIABLES ========== */ -:root { - /* 2026 Liquid Glass Color Palette */ - --color-background: #F5F5F7; - --color-surface: #FFFFFF; - --color-accent: #0071E3; - --color-accent-hover: #0077ED; - --color-accent-active: #005BB5; - --color-text-primary: #1D1D1F; - --color-text-secondary: #86868B; - --color-border: rgba(0, 0, 0, 0.08); - - /* Radzen hover variables (light mode) */ - --rz-dropdown-item-hover-background-color: rgba(0, 113, 227, 0.12); - --rz-dropdown-item-hover-color: #005BB5; - - /* 2026 Liquid Glass - Light Mode - MORE TRANSLUCENT */ - --glass-light: rgba(255, 255, 255, 0.25); - --glass-dark: rgba(20, 20, 20, 0.5); - --glass-light-catcher: rgba(255, 255, 255, 0.35); - --glass-blur: 16px; - /* Neutral gray-blue shadows to avoid purple cast */ - --glass-shadow-sm: 0 4px 16px rgba(12, 23, 41, 0.12); - --glass-shadow: 0 8px 32px rgba(12, 23, 41, 0.16); - --glass-shadow-lg: 0 16px 64px rgba(12, 23, 41, 0.2); - - /* Mesh Gradient Colors - SUBTLE & REFINED */ - --mesh-color-1: rgba(0, 113, 227, 0.05); - --mesh-color-2: rgba(64, 158, 255, 0.04); /* shifted from purple to light blue */ - --mesh-color-3: rgba(0, 200, 255, 0.05); - --mesh-color-4: rgba(80, 200, 255, 0.04); /* cooled violet to aqua */ - --mesh-color-5: rgba(200, 230, 255, 0.04); /* softened to ice blue */ - - /* Spacing & Borders */ - --bento-gap: 24px; - --border-radius: 20px; - --border-radius-lg: 28px; - --border-radius-sm: 14px; - --border-width: 1px; - - /* Typography - WCAG AAA */ - --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; - --font-size-base: 16px; - --line-height-base: 1.65; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-bold: 600; - --font-weight-heavy: 700; - - /* Animation Variables */ - --animation-timing: cubic-bezier(0.23, 1, 0.32, 1); - --animation-duration: 0.4s; -} - -/* Dark Mode Variables - 2026 Standards */ -@media (prefers-color-scheme: dark) { - :root { - --color-background: #0A0A0B; - --color-surface: #1A1A1C; - --color-text-primary: #F5F5F7; - --color-text-secondary: #98989D; - --color-border: rgba(255, 255, 255, 0.12); - - /* Radzen hover variables (dark mode) */ - --rz-dropdown-item-hover-background-color: rgba(0, 113, 227, 0.35); - --rz-dropdown-item-hover-color: #FFFFFF; - - /* Dark Glass with enhanced depth */ - --glass-light: rgba(255, 255, 255, 0.08); - --glass-dark: rgba(20, 20, 20, 0.4); - --glass-light-catcher: rgba(255, 255, 255, 0.15); - --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3); - --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); - --glass-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.7); - - /* Dark Mode Mesh Gradient - Subtle */ - --mesh-color-1: rgba(0, 113, 227, 0.08); - --mesh-color-2: rgba(64, 158, 255, 0.08); /* cooled purple out in dark mode */ - --mesh-color-3: rgba(0, 200, 255, 0.08); - --mesh-color-4: rgba(80, 200, 255, 0.08); /* aqua tint */ - --mesh-color-5: rgba(200, 230, 255, 0.08); /* ice blue */ - } -} - -/* Accessibility: High Contrast Mode - Solid Fallback */ -@media (prefers-contrast: high), (prefers-reduced-transparency: reduce) { - :root { - --glass-light: rgba(255, 255, 255, 0.95); - --glass-dark: rgba(20, 20, 20, 0.95); - --glass-blur: 0px; - --glass-light-catcher: rgba(0, 0, 0, 0.2); - --color-text-primary: #000000; - --color-text-secondary: #4A4A4A; - } - - @media (prefers-color-scheme: dark) { - :root { - --glass-light: rgba(30, 30, 30, 0.98); - --glass-dark: rgba(0, 0, 0, 0.98); - --color-text-primary: #FFFFFF; - --color-text-secondary: #CCCCCC; - } - } -} - - -/* ========== BASE STYLES - MULTI-LAYERED MESH GRADIENT ========== */ - -/* Override Radzen's theme colors */ -.rz-theme-material, -body.rz-body, -html { - --rz-primary: var(--color-accent) !important; - --rz-primary-light: var(--color-accent-hover) !important; - --rz-primary-dark: var(--color-accent-active) !important; - --rz-text-color: var(--color-text-primary) !important; - --rz-secondary-color: var(--color-text-secondary) !important; - --rz-base-background-color: var(--color-background) !important; - - /* Fix text colors on colored backgrounds */ - --rz-on-warning: #1D1D1F !important; - --rz-on-info: #1D1D1F !important; - --rz-on-success: #1D1D1F !important; - --rz-on-danger: #FFFFFF !important; - --rz-on-primary: #FFFFFF !important; -} - -html, body { - font-family: var(--font-family) !important; - font-size: var(--font-size-base); - line-height: var(--line-height-base); - background-color: transparent !important; - background-image: none !important; - color: var(--color-text-primary); - font-feature-settings: "cv02", "cv03", "cv04", "cv11"; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin: 0; - padding: 0; - position: relative; - overflow-x: hidden; - min-height: 100vh; -} - -/* Multi-layered Vibrant Mesh Gradient Background - SUBTLE & ELEGANT */ -body::before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - pointer-events: none; - background: - radial-gradient(circle at 15% 20%, var(--mesh-color-1) 0%, transparent 50%), - radial-gradient(circle at 85% 30%, var(--mesh-color-2) 0%, transparent 50%), - radial-gradient(circle at 50% 70%, var(--mesh-color-3) 0%, transparent 45%), - radial-gradient(circle at 25% 85%, var(--mesh-color-4) 0%, transparent 50%), - radial-gradient(circle at 75% 90%, var(--mesh-color-5) 0%, transparent 48%), - linear-gradient(135deg, #fafafa 0%, #f5f5f7 50%, #fafafa 100%); - background-attachment: fixed; - animation: meshFloat 25s ease-in-out infinite; -} - -/* Responsive Lighting Micro-Animation */ -@keyframes meshFloat { - 0%, 100% { - background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%; - } - 25% { - background-position: 10% 10%, 90% 15%, 55% 45%, 5% 95%, 95% 90%; - } - 50% { - background-position: 5% 20%, 95% 25%, 45% 55%, 10% 90%, 90% 85%; - } - 75% { - background-position: 15% 15%, 85% 20%, 50% 50%, 8% 92%, 92% 88%; - } -} - -/* User focus-based lighting enhancement */ -body::after { - content: ''; - position: fixed; - top: var(--mouse-y, 50%); - left: var(--mouse-x, 50%); - width: 600px; - height: 600px; - transform: translate(-50%, -50%); - background: radial-gradient(circle, rgba(0, 113, 227, 0.15) 0%, transparent 70%); - pointer-events: none; - z-index: -1; - transition: top 0.3s ease, left 0.3s ease; - opacity: 0; - animation: focusGlow 3s ease-in-out infinite; -} - -@keyframes focusGlow { - 0%, 100% { opacity: 0; } - 50% { opacity: 0.6; } -} - -body:hover::after { - opacity: 0.4; -} - -* { - box-sizing: border-box; -} - - -/* ========== TYPOGRAPHY - WCAG AAA COMPLIANCE ========== */ -h1, h2, h3, h4, h5, h6 { - font-weight: var(--font-weight-bold); - letter-spacing: -0.025em; - margin-bottom: 1rem; - color: var(--color-text-primary); - line-height: 1.2; -} - -h1 { - font-size: clamp(2.5rem, 5vw, 3.75rem); - font-weight: var(--font-weight-heavy); - letter-spacing: -0.03em; -} - -h2 { - font-size: clamp(2rem, 4vw, 2.75rem); -} - -h3 { - font-size: clamp(1.5rem, 3vw, 2.25rem); -} - -h4 { - font-size: clamp(1.25rem, 2.5vw, 1.75rem); -} - -p { - margin-bottom: 1rem; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: var(--line-height-base); -} - -/* Ensure WCAG AAA contrast - High readability on glass */ -@media (prefers-contrast: high) { - h1, h2, h3, h4, h5, h6, p, span, div { - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - } -} - - -/* ========== LIQUID GLASS COMPONENT SYSTEM ========== */ - -/* Core Liquid Glass Mixin - Light Catcher Border Effect */ -.liquid-glass, -.glass { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: var(--glass-shadow), - inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important; - position: relative; - overflow: hidden; - transition: all var(--animation-duration) var(--animation-timing) !important; -} - -/* Enhanced Light-Catcher Edge Refraction */ -.liquid-glass::before, -.glass::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent 0%, - var(--glass-light-catcher) 25%, - var(--glass-light-catcher) 75%, - transparent 100%); - opacity: 0.8; - pointer-events: none; -} - -.liquid-glass::after, -.glass::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 1px; - height: 100%; - background: linear-gradient(180deg, - transparent 0%, - var(--glass-light-catcher) 25%, - var(--glass-light-catcher) 75%, - transparent 100%); - opacity: 0.6; - pointer-events: none; -} - -/* Hover: Enhanced Material Thickness Illusion */ -.liquid-glass:hover, -.glass:hover { - box-shadow: var(--glass-shadow-lg), - inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important; - transform: none; - border-color: rgba(255, 255, 255, 0.25) !important; -} - -/* Active: Depth Press Effect */ -.liquid-glass:active, -.glass:active { - transform: translateY(0) scale(0.998); - box-shadow: var(--glass-shadow-sm) !important; -} - - -/* ========== RADZEN LAYOUT OVERRIDES - LIQUID GLASS ========== */ - -/* Main Layout Container */ -.rz-body, -body > .rz-body { - background-color: transparent !important; -} - -/* RadzenLayout wrapper */ -.rz-layout, -.rz-layout-wrapper { - background-color: transparent !important; -} - -/* Glass Header with Light-Catcher Border - VERTICALLY CENTERED */ -.glass-header, -.rz-header.glass-header, -header.glass-header, -.rz-header, -header.rz-header, -::deep .rz-header, -::deep header.rz-header { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border-bottom: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), - inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important; - padding: 1.25rem 2rem !important; - min-height: 80px !important; - height: auto !important; - display: flex !important; - align-items: center !important; - position: sticky; - top: 0; - z-index: 1000; - transition: all var(--animation-duration) var(--animation-timing); -} - -/* Fix Radzen Header Inner Content Alignment */ -.rz-header > *, -header.rz-header > *, -.glass-header > * { - display: flex !important; - align-items: center !important; - width: 100% !important; - margin: 0 !important; -} - -/* Glass Sidebar with Enhanced Depth - FORCE TRANSPARENCY */ -.glass-sidebar, -.rz-sidebar.glass-sidebar, -aside.glass-sidebar, -.rz-sidebar, -.rz-sidebar-content, -aside.rz-sidebar, -aside, -.rz-layout aside, -::deep .rz-sidebar, -::deep aside.rz-sidebar, -::deep aside { - background: var(--glass-light) !important; - background-color: transparent !important; - background-image: none !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border-right: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: var(--glass-shadow), - inset -1px 0 0 rgba(255, 255, 255, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; -} - -/* Sidebar inner content also glass */ -.rz-sidebar *, -aside * { - background-color: transparent !important; - background-image: none !important; -} - -/* Header Content Container - Vertically Centered */ -.header-content { - display: flex !important; - justify-content: space-between !important; - align-items: center !important; - width: 100% !important; - gap: 1.5rem !important; - min-height: 48px !important; -} - -.header-title { - margin: 0 !important; - padding: 0 !important; - color: var(--color-text-primary) !important; - font-weight: var(--font-weight-bold) !important; - font-size: 1.5rem !important; - flex-shrink: 0; - letter-spacing: -0.02em; - line-height: 1 !important; - display: flex !important; - align-items: center !important; -} - -/* Radzen Body (Main Content Area) */ -.rz-body-content, -.rz-body main, -::deep .rz-body-content, -.main-body { - padding: 0; - margin: 0 1rem; - background-color: transparent !important; -} - -/* Full-width pages (like home with bento grid) - no margin */ -.main-body:has(.full-width-page) { - margin: 0; -} - -/* ========== BENTO GRID SYSTEM ========== */ -.bento-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--bento-gap); - padding: 0; -} - -/* Responsive grid for larger screens */ -@media (min-width: 768px) { - .bento-grid { - grid-template-columns: repeat(12, 1fr); - } - - .bento-cell-1 { grid-column: span 1; } - .bento-cell-2 { grid-column: span 2; } - .bento-cell-3 { grid-column: span 3; } - .bento-cell-4 { grid-column: span 4; } - .bento-cell-5 { grid-column: span 5; } - .bento-cell-6 { grid-column: span 6; } - .bento-cell-7 { grid-column: span 7; } - .bento-cell-8 { grid-column: span 8; } - .bento-cell-9 { grid-column: span 9; } - .bento-cell-10 { grid-column: span 10; } - .bento-cell-11 { grid-column: span 11; } - .bento-cell-12 { grid-column: span 12; } - - /* Row span options */ - .bento-row-2 { grid-row: span 2; } - .bento-row-3 { grid-row: span 3; } -} - -/* Mobile: single column */ -@media (max-width: 767px) { - .bento-grid { - grid-template-columns: 1fr; - } -} - - - -/* ========== RADZEN CARD - LIQUID GLASS WITH DEPTH ========== */ -.rz-card, -.rz-card-content, -div.rz-card, -::deep .rz-card, -::deep div.rz-card, -.rz-panel, -div.rz-panel { - background: var(--glass-light) !important; - background-color: transparent !important; - background-image: none !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border-radius: var(--border-radius) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: var(--glass-shadow), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - inset -1px 0 0 rgba(255, 255, 255, 0.2), - inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important; - padding: 2rem !important; - position: relative; - overflow: visible !important; - transition: all var(--animation-duration) var(--animation-timing) !important; -} - -/* Light-Catcher Top Edge - MORE VISIBLE */ -.rz-card::before, -div.rz-card::before, -.rz-panel::before, -div.rz-panel::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, - transparent 0%, - rgba(255, 255, 255, 0.8) 50%, - transparent 100%); - opacity: 1; - pointer-events: none; - z-index: 10; -} - -/* Hover: Enhanced Material Thickness */ -.rz-card:hover, -div.rz-card:hover, -::deep .rz-card:hover, -.rz-panel:hover, -div.rz-panel:hover { - box-shadow: var(--glass-shadow-lg), - inset 0 1px 0 rgba(255, 255, 255, 0.4), - inset -1px 0 0 rgba(255, 255, 255, 0.3), - inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important; - transform: none; - border-color: rgba(255, 255, 255, 0.5) !important; -} - -/* Card Title - High Contrast */ -::deep .rz-card-title, -.rz-card-title { - font-size: 1.5rem !important; - font-weight: var(--font-weight-bold) !important; - color: var(--color-text-primary) !important; - margin-bottom: 0.75rem !important; - letter-spacing: -0.02em !important; -} - -/* Card Content */ -::deep .rz-card-content, -.rz-card-content { - color: var(--color-text-secondary) !important; - line-height: var(--line-height-base) !important; -} - - -/* ========== BUTTONS - SPATIAL COMPUTING READY ========== */ - -/* Primary Button - Elevated Glass */ -::deep .rz-button-primary, -.rz-button-primary, -::deep .rz-button.rz-primary, -.rz-button.rz-primary { - background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%) !important; - border: none !important; - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.75rem !important; - font-weight: var(--font-weight-medium) !important; - color: white !important; - position: relative; - overflow: hidden; - transition: all var(--animation-duration) var(--animation-timing) !important; - box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; -} - -/* Button Light-Catcher Edge */ -::deep .rz-button-primary::before, -.rz-button-primary::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, - transparent 0%, - rgba(255, 255, 255, 0.4) 50%, - transparent 100%); - opacity: 0.8; -} - -::deep .rz-button-primary:hover, -.rz-button-primary:hover { - background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent) 100%) !important; - transform: none; - box-shadow: 0 12px 32px rgba(0, 113, 227, 0.45), - inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; -} - -::deep .rz-button-primary:active, -.rz-button-primary:active { - background: var(--color-accent-active) !important; - transform: translateY(0) scale(0.98); - box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3) !important; -} - -/* Secondary Button - Liquid Glass with Better Visibility */ -::deep .rz-button-secondary, -.rz-button-secondary, -::deep .rz-button.rz-secondary, -.rz-button.rz-secondary, -::deep .rz-button-light, -.rz-button-light, -button.rz-button { - background: rgba(255, 255, 255, 0.85) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.75rem !important; - font-weight: var(--font-weight-medium) !important; - color: var(--color-text-primary) !important; - position: relative; - overflow: hidden; - transition: all var(--animation-duration) var(--animation-timing) !important; - box-shadow: var(--glass-shadow-sm), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important; -} - -::deep .rz-button-secondary:hover, -.rz-button-secondary:hover, -button.rz-button:hover { - background: rgba(255, 255, 255, 0.5) !important; - box-shadow: var(--glass-shadow), - inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; - transform: none; -/* Nav Links */ -::deep .rz-navigation-item, -.rz-navigation-item, -::deep .nav-link, -.nav-link { - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.25rem !important; - margin-bottom: 0.5rem !important; - color: var(--color-text-secondary) !important; - font-weight: var(--font-weight-medium) !important; - transition: all var(--animation-duration) var(--animation-timing) !important; - text-decoration: none !important; - position: relative; - overflow: hidden; -} - -/* Nav Link Hover - Glass Effect */ -::deep .rz-navigation-item:hover, -.rz-navigation-item:hover, -::deep .nav-link:hover, -.nav-link:hover { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - color: var(--color-accent-active) !important; - transform: none; - box-shadow: var(--glass-shadow-sm) !important; -} - -/* Active Nav Link - Elevated Glass with DARK TEXT */ -::deep .rz-navigation-item.active, -.rz-navigation-item.active, -::deep .nav-link.active, -.nav-link.active { - background: rgba(0, 113, 227, 0.14) !important; - color: var(--color-accent-active) !important; - box-shadow: var(--glass-shadow-sm) !important; - border: 1px solid rgba(0, 113, 227, 0.22) !important; - transform: none; -} - -/* Active Link Light-Catcher */ -::deep .rz-navigation-item.active::before, -.rz-navigation-item.active::before, -.nav-link.active::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent 0%, - rgba(255, 255, 255, 0.5) 50%, - transparent 100%); - opacity: 0.8; -} - -/* Active Nav Link Text - Force white for contrast on blue */ -::deep .rz-navigation-item.active *, -.rz-navigation-item.active *, -::deep .nav-link.active *, -.nav-link.active * { - color: var(--color-accent-active) !important; -} - - -/* ========== INPUTS & FORMS - SOLID BACKGROUND ========== */ - -::deep .rz-textbox, -.rz-textbox, -::deep input.rz-inputtext, -input.rz-inputtext, -::deep textarea, -textarea { - background: var(--color-surface) !important; - border: var(--border-width) solid var(--color-border) !important; - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.25rem !important; - color: var(--color-text-primary) !important; - font-size: 1rem !important; - line-height: 1.5 !important; - transition: all var(--animation-duration) var(--animation-timing) !important; - box-shadow: var(--glass-shadow-sm), - inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; -} - -/* Dropdown specific styling with solid background */ -::deep .rz-dropdown, -.rz-dropdown { - background: var(--color-surface) !important; - color: var(--color-text-primary) !important; - border: var(--border-width) solid var(--color-border) !important; - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.25rem !important; - font-size: 1rem !important; - line-height: 1.5 !important; - transition: all var(--animation-duration) var(--animation-timing) !important; - box-shadow: var(--glass-shadow-sm), - inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; -} - -/* AutoComplete input styling with solid background */ -::deep .rz-autocomplete, -.rz-autocomplete, -::deep .rz-autocomplete-input, -.rz-autocomplete-input, -::deep .rz-autocomplete input, -.rz-autocomplete input, -::deep input.rz-autocomplete-input, -input.rz-autocomplete-input { - background: var(--color-surface) !important; - color: var(--color-text-primary) !important; - border: var(--border-width) solid var(--color-border) !important; - border-radius: var(--border-radius-sm) !important; - padding: 0.875rem 1.25rem !important; - font-size: 1rem !important; - line-height: 1.5 !important; - transition: all var(--animation-duration) var(--animation-timing) !important; - box-shadow: var(--glass-shadow-sm), - inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; -} - -/* AutoComplete dropdown list styling */ -::deep .rz-autocomplete-items, -.rz-autocomplete-items { - background: var(--color-surface) !important; - border: var(--border-width) solid var(--color-border) !important; -} - -::deep .rz-autocomplete-item, -.rz-autocomplete-item, -::deep .rz-autocomplete-items .rz-autocomplete-item, -.rz-autocomplete-items .rz-autocomplete-item { - background: var(--color-surface) !important; - color: var(--color-text-primary) !important; - padding: 0.75rem 1rem !important; - border-bottom: var(--border-width) solid var(--color-border) !important; -} - -::deep .rz-autocomplete-item:hover, -.rz-autocomplete-item:hover, -::deep .rz-autocomplete-items .rz-autocomplete-item:hover { - background: rgba(0, 113, 227, 0.12) !important; - color: var(--color-accent-active, #005BB5) !important; -} - -::deep .rz-autocomplete-item.rz-state-highlight, -.rz-autocomplete-item.rz-state-highlight { - background: rgba(0, 113, 227, 0.18) !important; - color: var(--color-accent-active, #005BB5) !important; - font-weight: 500 !important; -} - -/* Focus State - Enhanced Accessibility */ -::deep .rz-textbox:focus, -.rz-textbox:focus, -::deep input.rz-inputtext:focus, -input.rz-inputtext:focus, -::deep textarea:focus, -textarea:focus, -::deep .rz-dropdown:focus, -.rz-dropdown:focus, -::deep .rz-autocomplete:focus, -.rz-autocomplete:focus, -::deep .rz-autocomplete-input:focus, -.rz-autocomplete-input:focus { - border-color: var(--color-accent) !important; - box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15), - var(--glass-shadow-sm), - inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; - outline: none !important; - transform: translateY(-1px); -} - -/* Placeholder - High Contrast */ -::deep .rz-textbox::placeholder, -.rz-textbox::placeholder, -::deep input.rz-inputtext::placeholder, -input.rz-inputtext::placeholder, -::deep textarea::placeholder, -textarea::placeholder { - color: var(--color-text-secondary) !important; - opacity: 0.7; -} - -/* Dropdown Items - Hover & Selected States */ -::deep .rz-dropdown-item, -.rz-dropdown-item, -::deep .rz-listbox-item, -.rz-listbox-item { - padding: 0.5rem 1rem !important; - color: var(--color-text-primary) !important; - background: var(--color-surface) !important; - transition: all 0.2s ease !important; -} - -::deep .rz-dropdown-item:hover, -.rz-dropdown-item:hover, -::deep .rz-listbox-item:hover, -.rz-listbox-item:hover { - background: var(--color-accent) !important; - color: white !important; -} - -::deep .rz-dropdown-item.rz-state-highlight, -.rz-dropdown-item.rz-state-highlight, -::deep .rz-listbox-item.rz-state-highlight, -.rz-listbox-item.rz-state-highlight { - background: var(--color-accent) !important; - color: white !important; - font-weight: 500 !important; -} - -/* Dropdown panel background */ -::deep .rz-dropdown-panel, -.rz-dropdown-panel { - background: var(--color-surface) !important; - border: var(--border-width) solid var(--color-border) !important; -} - - -/* ========== DATA GRID & TABLES - LAYERED GLASS ========== */ - -::deep .rz-datatable, -.rz-datatable, -::deep .rz-grid, -.rz-grid { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border-radius: var(--border-radius) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - overflow: hidden !important; - box-shadow: var(--glass-shadow), - inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; -} - -::deep .rz-datatable-header, -.rz-datatable-header, -::deep .rz-grid-header, -.rz-grid-header { - background: rgba(0, 0, 0, 0.03) !important; - font-weight: var(--font-weight-bold) !important; - color: var(--color-text-primary) !important; - padding: 1rem !important; - border-bottom: var(--border-width) solid var(--glass-light-catcher) !important; -} - -::deep .rz-datatable-row:hover, -.rz-datatable-row:hover, -::deep .rz-grid-row:hover, -.rz-grid-row:hover { - background: rgba(0, 113, 227, 0.06) !important; - transition: all 0.2s ease; -} - -::deep .rz-datatable-row, -.rz-datatable-row, -::deep .rz-grid-row, -.rz-grid-row { - border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; -} - - -/* ========== MODAL & DIALOG - PREMIUM GLASS ========== */ - -::deep .rz-dialog, -.rz-dialog, -::deep .rz-dialog-mask, -.rz-dialog-mask { - background: var(--glass-light) !important; - backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(200%) !important; - -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(200%) !important; - border-radius: var(--border-radius-lg) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), - inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; - position: relative; - overflow: hidden; -} - -/* Dialog Light-Catcher Top Edge */ -::deep .rz-dialog::before, -.rz-dialog::before { - content: ''; - position: absolute; - top: 0; - left: 10%; - right: 10%; - height: 2px; - background: linear-gradient(90deg, - transparent 0%, - rgba(255, 255, 255, 0.4) 50%, - transparent 100%); - opacity: 0.9; - pointer-events: none; - z-index: 1; -} - -::deep .rz-dialog-titlebar, -.rz-dialog-titlebar { - background: transparent !important; - border-bottom: var(--border-width) solid var(--glass-light-catcher) !important; - padding: 1.75rem 2rem !important; - font-size: 1.5rem !important; - font-weight: var(--font-weight-bold) !important; - color: var(--color-text-primary) !important; -} - -::deep .rz-dialog-content, -.rz-dialog-content { - padding: 2rem !important; - color: var(--color-text-secondary) !important; -} - -/* Dialog Backdrop */ -::deep .rz-dialog-mask, -.rz-dialog-mask { - backdrop-filter: blur(8px) !important; - -webkit-backdrop-filter: blur(8px) !important; - background: rgba(0, 0, 0, 0.4) !important; -} - - -/* ========== PANELS & ACCORDIONS - LAYERED GLASS ========== */ - -::deep .rz-panel, -.rz-panel, -::deep .rz-accordion, -.rz-accordion { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border-radius: var(--border-radius) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - margin-bottom: var(--bento-gap) !important; - box-shadow: var(--glass-shadow), - inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; - overflow: hidden; -} - -::deep .rz-panel-header, -.rz-panel-header, -::deep .rz-accordion-header, -.rz-accordion-header { - background: rgba(0, 0, 0, 0.02) !important; - border-bottom: var(--border-width) solid var(--glass-light-catcher) !important; - padding: 1.25rem 1.5rem !important; - font-weight: var(--font-weight-bold) !important; - color: var(--color-text-primary) !important; - transition: all 0.3s ease; -} - -::deep .rz-panel-header:hover, -.rz-panel-header:hover, -::deep .rz-accordion-header:hover, -.rz-accordion-header:hover { - background: rgba(0, 113, 227, 0.05) !important; -} - -::deep .rz-panel-content, -.rz-panel-content, -::deep .rz-accordion-content, -.rz-accordion-content { - padding: 1.5rem !important; - color: var(--color-text-secondary) !important; -} - - -/* ========== RESPONSIVE LIGHTING ANIMATIONS ========== */ - -/* Shimmer effect for interactive elements */ -@keyframes shimmer { - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; - } -} - -/* Pulse glow for focus states */ -@keyframes pulseGlow { - 0%, 100% { - box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.4); - } - 50% { - box-shadow: 0 0 0 8px rgba(0, 113, 227, 0); - } -} - -/* Floating micro-animation */ -@keyframes float { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-4px); - } -} - -/* Apply subtle float to cards on hover */ -.rz-card:hover, -.liquid-glass:hover { - animation: none; -} - -/* Focus ring animation for accessibility */ -:focus-visible { - animation: pulseGlow 2s ease-in-out infinite; - outline: 2px solid var(--color-accent); - outline-offset: 2px; -} - -/* Interactive element shimmer on hover */ -.rz-button:hover::after, -.nav-link:hover::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(255, 255, 255, 0.2) 50%, - transparent 100% - ); - animation: shimmer 2s ease-in-out; - pointer-events: none; -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - - body::before { - animation: none !important; - } -} - border-radius: var(--border-radius-lg) !important; -} - -.rounded { - border-radius: var(--border-radius) !important; -} - -.rounded-sm { - border-radius: var(--border-radius-sm) !important; -} - -/* Accent color utility */ -.accent { - color: var(--color-accent) !important; -} - -.bg-accent { - background-color: var(--color-accent) !important; -} - -/* Text utilities */ -.text-primary { - color: var(--color-text-primary) !important; -} - -.text-secondary { - color: var(--color-text-secondary) !important; -} - -/* ========== ANIMATIONS ========== */ - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.fade-in { - animation: fadeIn 0.4s ease-out; -} - -/* ========== LOGIN DISPLAY COMPONENT - VERTICALLY CENTERED ========== */ - -.login-display { - display: flex !important; - align-items: center !important; - justify-content: flex-end !important; - gap: 1rem !important; - margin-left: auto !important; - flex-shrink: 0 !important; - height: 100% !important; -} - -.user-name { - display: flex !important; - align-items: center !important; - gap: 0.5rem; - color: var(--color-text-primary); - font-weight: var(--font-weight-medium); - font-size: 0.9rem; - padding: 0.5rem 0.75rem; - background: rgba(0, 0, 0, 0.05); - border-radius: var(--border-radius-sm); - line-height: 1 !important; -} - -.user-name i { - font-size: 1.1rem; - opacity: 0.8; -} - -.btn-logout, -.btn-login { - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - gap: 0.5rem; - padding: 0.5rem 1rem; - border: none; - border-radius: var(--border-radius-sm); - font-weight: var(--font-weight-medium); - font-size: 0.9rem; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; - line-height: 1 !important; - white-space: nowrap; -} - -.btn-logout { - background: rgba(0, 0, 0, 0.08) !important; - color: var(--color-text-primary) !important; - border: 1px solid rgba(0, 0, 0, 0.1) !important; -} - -.btn-logout:hover { - background: rgba(0, 0, 0, 0.12) !important; - transform: translateY(-1px); -} - -.btn-login { - background: var(--color-accent) !important; - color: white !important; - box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3); -} - -.btn-login:hover { - background: var(--color-accent-hover); - box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4); - transform: translateY(-1px); -} - -/* ========== NAV MENU COMPONENT ========== */ - -.nav-menu-container { - padding: 1.5rem 1rem; -} - -.nav-menu-container .nav { - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -.nav-menu-container .nav-link { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; - border-radius: var(--border-radius-sm); - color: var(--color-text-secondary); - text-decoration: none; - font-weight: var(--font-weight-medium); - font-size: 0.95rem; - transition: all 0.2s ease; - border: none; -} - -.nav-menu-container .nav-link span:first-child { - font-size: 1.1rem; - width: 1.25rem; - text-align: center; -} - -.nav-menu-container .nav-link:hover { - background: rgba(0, 113, 227, 0.08); - color: var(--color-accent-active); - transform: none; -} - -.nav-menu-container .nav-link.active { - background: rgba(0, 113, 227, 0.14); - color: var(--color-accent-active); - box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.22); - border: 1px solid rgba(0, 113, 227, 0.22); -} - -.nav-menu-container .nav-link.active:hover { - transform: none; -} - -/* Secondary badges - neutral tint so they sit on glass background */ -.rz-badge-secondary, -.rz-badge.rz-secondary, -span.rz-badge-secondary { - background: rgba(29, 29, 31, 0.08) !important; - color: var(--color-text-primary) !important; - border: 1px solid rgba(29, 29, 31, 0.14) !important; - box-shadow: var(--glass-shadow-sm) !important; -} - -/* ========== DARK MODE ADJUSTMENTS ========== */ - -@media (prefers-color-scheme: dark) { - .user-name { - background: rgba(255, 255, 255, 0.08); - } - - .btn-logout { - background: rgba(255, 255, 255, 0.08); - } - - .btn-logout:hover { - background: rgba(255, 255, 255, 0.12); - } - - .nav-menu-container .nav-link:hover { - background: rgba(0, 113, 227, 0.15); - } -} - animation: fadeIn 0.3s ease-out; -} - -/* Smooth transitions */ -* { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* ========== SCROLLBAR STYLING ========== */ - -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: var(--glass-border-light); - border-radius: 5px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--color-text-secondary); -} - -/* ========== LEGACY LAYOUT OVERRIDES ========== */ - -/* Override old sidebar styles */ -.sidebar { - background: var(--glass-bg-light) !important; - background-image: none !important; - backdrop-filter: blur(15px) saturate(160%); - -webkit-backdrop-filter: blur(15px) saturate(160%); - border-right: 1px solid var(--glass-border-light); - box-shadow: var(--glass-shadow); -} - -/* Override old top-row styles */ -.top-row { - background: var(--glass-bg-light) !important; - backdrop-filter: blur(15px) saturate(160%); - -webkit-backdrop-filter: blur(15px) saturate(160%); - border-bottom: 1px solid var(--glass-border-light) !important; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); -} - -.page { - background-color: var(--color-background) !important; -} - -/* ========== RESPONSIVE ADJUSTMENTS ========== */ - -@media (max-width: 768px) { - h1 { - font-size: 2.5rem; - } - - h2 { - font-size: 2rem; - } - - .bento-grid { - padding: 1rem; - gap: 1rem; - } - - ::deep .rz-header, - .rz-header { - padding: 1rem !important; - } -} diff --git a/src/ResidencyRoll.Web/wwwroot/js/liquid-glass.js b/src/ResidencyRoll.Web/wwwroot/js/liquid-glass.js deleted file mode 100644 index e6066aa..0000000 --- a/src/ResidencyRoll.Web/wwwroot/js/liquid-glass.js +++ /dev/null @@ -1,234 +0,0 @@ -/** - * 2026 Liquid Glass - Responsive Lighting System - * Tracks user focus points and creates dynamic lighting effects - * Spatial Computing Ready - */ - -(function() { - 'use strict'; - - // Check for reduced motion preference - const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; - - if (prefersReducedMotion) { - console.log('Liquid Glass: Animations disabled due to user preference'); - return; - } - - let mouseX = 50; - let mouseY = 50; - let targetX = 50; - let targetY = 50; - let animationFrame; - - /** - * Smooth interpolation for natural movement - */ - function lerp(start, end, factor) { - return start + (end - start) * factor; - } - - /** - * Update CSS custom properties for dynamic lighting - */ - function updateLighting() { - targetX = lerp(targetX, mouseX, 0.1); - targetY = lerp(targetY, mouseY, 0.1); - - document.body.style.setProperty('--mouse-x', `${targetX}%`); - document.body.style.setProperty('--mouse-y', `${targetY}%`); - - // Continue animation if values haven't converged - if (Math.abs(targetX - mouseX) > 0.1 || Math.abs(targetY - mouseY) > 0.1) { - animationFrame = requestAnimationFrame(updateLighting); - } - } - - /** - * Track mouse movement for lighting effects - */ - function handleMouseMove(e) { - mouseX = (e.clientX / window.innerWidth) * 100; - mouseY = (e.clientY / window.innerHeight) * 100; - - if (!animationFrame) { - animationFrame = requestAnimationFrame(updateLighting); - } - } - - /** - * Add hover lighting effects to glass elements - */ - function addGlassInteractivity() { - const glassElements = document.querySelectorAll('.liquid-glass, .glass, .rz-card'); - - glassElements.forEach(element => { - element.addEventListener('mouseenter', function(e) { - const rect = this.getBoundingClientRect(); - const x = ((e.clientX - rect.left) / rect.width) * 100; - const y = ((e.clientY - rect.top) / rect.height) * 100; - - this.style.setProperty('--hover-x', `${x}%`); - this.style.setProperty('--hover-y', `${y}%`); - }); - - element.addEventListener('mousemove', function(e) { - const rect = this.getBoundingClientRect(); - const x = ((e.clientX - rect.left) / rect.width) * 100; - const y = ((e.clientY - rect.top) / rect.height) * 100; - - this.style.setProperty('--hover-x', `${x}%`); - this.style.setProperty('--hover-y', `${y}%`); - }); - }); - } - - /** - * Parallax effect for depth layers - */ - function addParallaxEffect() { - window.addEventListener('scroll', function() { - const scrolled = window.pageYOffset; - const parallaxElements = document.querySelectorAll('[data-parallax]'); - - parallaxElements.forEach(element => { - const speed = element.dataset.parallax || 0.5; - const yPos = -(scrolled * speed); - element.style.transform = `translateY(${yPos}px)`; - }); - }); - } - - /** - * Add focus lighting for keyboard navigation (accessibility) - */ - function addFocusLighting() { - document.addEventListener('focusin', function(e) { - if (e.target.matches('button, a, input, textarea, select, [tabindex]')) { - const rect = e.target.getBoundingClientRect(); - mouseX = ((rect.left + rect.width / 2) / window.innerWidth) * 100; - mouseY = ((rect.top + rect.height / 2) / window.innerHeight) * 100; - - if (!animationFrame) { - animationFrame = requestAnimationFrame(updateLighting); - } - } - }); - } - - /** - * Add tilt effect to cards for spatial computing feel - */ - function addTiltEffect() { - const cards = document.querySelectorAll('.rz-card, .liquid-glass'); - - cards.forEach(card => { - card.addEventListener('mousemove', function(e) { - const rect = this.getBoundingClientRect(); - const x = e.clientX - rect.left; - const y = e.clientY - rect.top; - - const centerX = rect.width / 2; - const centerY = rect.height / 2; - - const rotateX = ((y - centerY) / centerY) * -5; // Max 5deg rotation - const rotateY = ((x - centerX) / centerX) * 5; - - this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-2px)`; - }); - - card.addEventListener('mouseleave', function() { - this.style.transform = ''; - }); - }); - } - - /** - * Intersection Observer for scroll-based animations - */ - function addScrollAnimations() { - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('fade-in'); - observer.unobserve(entry.target); - } - }); - }, { - threshold: 0.1, - rootMargin: '0px 0px -100px 0px' - }); - - // Observe all bento grid cells - document.querySelectorAll('[class*="bento-cell"]').forEach(cell => { - observer.observe(cell); - }); - } - - /** - * Initialize all effects when DOM is ready - */ - function init() { - console.log('?? Liquid Glass 2026 initialized'); - - // Core lighting system - document.addEventListener('mousemove', handleMouseMove); - - // Interactive effects - addGlassInteractivity(); - addParallaxEffect(); - addFocusLighting(); - addTiltEffect(); - addScrollAnimations(); - - // Re-initialize on Blazor navigation - if (window.Blazor) { - window.Blazor.addEventListener('enhancedload', () => { - setTimeout(() => { - addGlassInteractivity(); - addTiltEffect(); - addScrollAnimations(); - }, 100); - }); - } - } - - // Initialize when DOM is ready - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', init); - } else { - init(); - } - - /** - * Performance monitoring (optional) - */ - if (window.performance && window.performance.measure) { - window.addEventListener('load', () => { - const perfData = performance.getEntriesByType('navigation')[0]; - console.log('? Liquid Glass Performance:', { - domContentLoaded: `${perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart}ms`, - loadComplete: `${perfData.loadEventEnd - perfData.loadEventStart}ms` - }); - }); - } - - /** - * Expose API for manual control - */ - window.LiquidGlass = { - refresh: function() { - addGlassInteractivity(); - addTiltEffect(); - addScrollAnimations(); - }, - setLighting: function(x, y) { - mouseX = x; - mouseY = y; - if (!animationFrame) { - animationFrame = requestAnimationFrame(updateLighting); - } - } - }; - -})(); diff --git a/src/ResidencyRoll.Web/wwwroot/liquid-glass-force.css b/src/ResidencyRoll.Web/wwwroot/liquid-glass-force.css deleted file mode 100644 index 059275e..0000000 --- a/src/ResidencyRoll.Web/wwwroot/liquid-glass-force.css +++ /dev/null @@ -1,281 +0,0 @@ -/* ============================================ - LIQUID GLASS FORCE OVERRIDE - Ultra-high specificity rules to ensure glass effects apply - ============================================ */ - -/* Calendar and Dropdown exceptions - restore proper background BEFORE broad rules */ -.rz-calendar, -.rz-datepicker-container, -.rz-monthpicker, -.rz-daypicker, -.rz-datepicker, -.rz-calendar-row, -.rz-calendar-cell { - background-color: var(--color-surface, #FFFFFF) !important; - background-image: none !important; -} - -/* Calendar day cells - white background by default */ -.rz-calendar-cell, -td.rz-calendar-cell, -.rz-state-default { - background-color: var(--color-surface, #FFFFFF) !important; - background-image: none !important; - color: var(--color-text-primary, #1D1D1F) !important; -} - -/* Calendar day hover - blue tint */ -.rz-calendar-cell:hover, -td.rz-calendar-cell:hover, -.rz-state-default:hover { - background-color: rgba(0, 113, 227, 0.12) !important; - background-image: none !important; - color: var(--color-accent-active, #005BB5) !important; -} - -/* Calendar selected day - darker blue tint */ -.rz-state-active, -.rz-calendar-cell.rz-state-active, -td.rz-calendar-cell.rz-state-active, -.rz-state-highlight { - background-color: rgba(0, 113, 227, 0.18) !important; - background-image: none !important; - color: var(--color-accent-active, #005BB5) !important; - font-weight: 600 !important; -} - -/* Calendar today - accent border */ -.rz-state-today, -.rz-calendar-cell.rz-state-today, -td.rz-calendar-cell.rz-state-today { - border: 2px solid var(--color-accent, #0071E3) !important; -} - -.rz-dropdown-panel, -.rz-dropdown-items, -.rz-listbox { - background-color: var(--color-surface, #FFFFFF) !important; - background-image: none !important; -} - -/* Dropdown items - white background by default */ -.rz-dropdown-item, -li.rz-dropdown-item { - background-color: var(--color-surface, #FFFFFF) !important; - background-image: none !important; - color: var(--color-text-primary, #1D1D1F) !important; -} - -/* Dropdown item hover - blue tint */ -.rz-dropdown-item:hover, -li.rz-dropdown-item:hover { - background-color: rgba(0, 113, 227, 0.12) !important; - background-image: none !important; - color: var(--color-accent-active, #005BB5) !important; -} - -/* Dropdown item selected/active - darker blue tint */ -.rz-dropdown-item.rz-state-highlight, -li.rz-dropdown-item.rz-state-highlight, -.rz-dropdown-item[aria-selected="true"], -li.rz-dropdown-item[aria-selected="true"] { - background-color: rgba(0, 113, 227, 0.18) !important; - background-image: none !important; - color: var(--color-accent-active, #005BB5) !important; - font-weight: 500 !important; -} - -/* FORCE ALL LAYOUT BACKGROUNDS TO BE TRANSPARENT */ -.rz-layout, -.rz-layout-wrapper, -.rz-body, -.rz-body-content, -body > .rz-body, -main.rz-body-content, -div.rz-layout, -div.rz-body { - background: transparent !important; - background-color: transparent !important; - background-image: none !important; -} - -/* NUCLEAR OPTION: Force glass on ALL Radzen components - EXCEPT calendar, dropdowns, and inputs */ -[class*="rz-"] - :not(.rz-calendar) - :not(.rz-datepicker) - :not(.rz-monthpicker) - :not(.rz-daypicker) - :not(.rz-datepicker-container) - :not(.rz-calendar-row) - :not(.rz-calendar-cell) - :not(.rz-dropdown) - :not(.rz-dropdown-panel) - :not(.rz-dropdown-items) - :not(.rz-dropdown-item) - :not(.rz-listbox) - :not(.rz-textbox) - :not(.rz-inputtext) - :not(.rz-autocomplete) - :not(.rz-autocomplete-input), -div[class*="rz-"] - :not(.rz-calendar) - :not(.rz-datepicker) - :not(.rz-monthpicker) - :not(.rz-daypicker) - :not(.rz-datepicker-container) - :not(.rz-calendar-row) - :not(.rz-calendar-cell) - :not(.rz-dropdown) - :not(.rz-dropdown-panel) - :not(.rz-dropdown-items) - :not(.rz-dropdown-item) - :not(.rz-listbox) - :not(.rz-textbox) - :not(.rz-inputtext) - :not(.rz-autocomplete) - :not(.rz-autocomplete-input), -li[class*="rz-"]:not(.rz-dropdown-item), -aside[class*="rz-"] - :not(.rz-calendar) - :not(.rz-datepicker) - :not(.rz-monthpicker) - :not(.rz-daypicker) - :not(.rz-datepicker-container) - :not(.rz-calendar-row) - :not(.rz-calendar-cell) - :not(.rz-dropdown) - :not(.rz-dropdown-panel) - :not(.rz-dropdown-items) - :not(.rz-dropdown-item) - :not(.rz-listbox) - :not(.rz-textbox) - :not(.rz-inputtext) - :not(.rz-autocomplete) - :not(.rz-autocomplete-input) { - background-color: transparent !important; - background-image: none !important; -} - -/* FORCE GLASS ON SIDEBAR - NUCLEAR OPTION */ -.rz-sidebar, -aside.rz-sidebar, -.rz-sidebar-content, -aside, -nav, -.sidebar { - background: rgba(255, 255, 255, 0.25) !important; - backdrop-filter: blur(16px) saturate(180%) !important; - -webkit-backdrop-filter: blur(16px) saturate(180%) !important; - border-right: 1px solid rgba(255, 255, 255, 0.35) !important; - box-shadow: 0 8px 32px rgba(12, 23, 41, 0.16) !important; -} - -/* FORCE GLASS ON HEADER */ -.rz-header, -header.rz-header, -.glass-header { - background: rgba(255, 255, 255, 0.25) !important; - backdrop-filter: blur(16px) saturate(180%) !important; - -webkit-backdrop-filter: blur(16px) saturate(180%) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important; -} - -/* FORCE GLASS ON ALL CARDS */ -.rz-card, -div.rz-card, -.rz-panel, -div.rz-panel { - background: rgba(255, 255, 255, 0.25) !important; - background-color: transparent !important; - background-image: none !important; - backdrop-filter: blur(16px) saturate(180%) !important; - -webkit-backdrop-filter: blur(16px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.35) !important; - border-radius: 20px !important; - box-shadow: 0 8px 32px rgba(12, 23, 41, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; -} - -/* ENSURE BODY HAS SUBTLE ELEGANT GRADIENT */ -html { - background: linear-gradient(135deg, #fafafa 0%, #f5f5f7 50%, #fafafa 100%) !important; - min-height: 100vh; -} - -body { - background: transparent !important; -} - -/* FORCE BETTER BUTTON VISIBILITY */ -button.rz-button, -.rz-button, -button[type="button"], -button[type="submit"] { - background: rgba(255, 255, 255, 0.4) !important; - color: var(--color-text-primary, #1D1D1F) !important; - border: 1px solid rgba(255, 255, 255, 0.35) !important; - backdrop-filter: blur(16px) !important; - -webkit-backdrop-filter: blur(16px) !important; - font-weight: 500 !important; -} - -button.rz-button:hover, -.rz-button:hover { - background: rgba(255, 255, 255, 0.55) !important; - border-color: rgba(255, 255, 255, 0.5) !important; -} - -/* Primary buttons stay with gradient */ -button.rz-button-primary, -.rz-button-primary, -.rz-button.rz-primary { - background: linear-gradient(135deg, #0071E3 0%, #0077ED 100%) !important; - color: white !important; - border: none !important; -} - -/* Primary button hover - maintain gradient, prevent white background */ -button.rz-button-primary:hover, -.rz-button-primary:hover, -.rz-button.rz-primary:hover { - background: linear-gradient(135deg, #0077ED 0%, #0071E3 100%) !important; - color: white !important; -} - -/* Warning and Info badges/alerts - Dark text for readability */ -.rz-badge-warning, -.rz-badge.rz-warning, -span.rz-badge-warning { - color: #1D1D1F !important; - font-weight: 600 !important; -} - -.rz-badge-info, -.rz-badge.rz-info, -span.rz-badge-info { - color: #1D1D1F !important; - font-weight: 600 !important; -} - -.rz-alert-warning, -.rz-alert.rz-warning { - color: #1D1D1F !important; -} - -.rz-alert-info, -.rz-alert.rz-info { - color: #1D1D1F !important; -} - -/* Active nav links - accent text without forcing white */ -.nav-link.active, -.rz-navigation-item.active { - color: var(--color-accent-active, #005BB5) !important; - background: rgba(0, 113, 227, 0.14) !important; - border: 1px solid rgba(0, 113, 227, 0.22) !important; -} - -.nav-link.active *, -.rz-navigation-item.active * { - color: var(--color-accent-active, #005BB5) !important; -} diff --git a/src/ResidencyRoll.Web/wwwroot/liquid-glass-utils.css b/src/ResidencyRoll.Web/wwwroot/liquid-glass-utils.css deleted file mode 100644 index b5647cb..0000000 --- a/src/ResidencyRoll.Web/wwwroot/liquid-glass-utils.css +++ /dev/null @@ -1,257 +0,0 @@ -/* ============================================ - 2026 Liquid Glass Utility Classes - Ultra-Modern Design Utilities - ============================================ */ - -/* ========== UTILITY CLASSES ========== */ - -/* Border Radius Utilities */ -.rounded-lg { - border-radius: var(--border-radius-lg) !important; -} - -.rounded { - border-radius: var(--border-radius) !important; -} - -.rounded-sm { - border-radius: var(--border-radius-sm) !important; -} - -.rounded-full { - border-radius: 9999px !important; -} - -/* Glass Utility Classes */ -.glass-light { - background: var(--glass-light) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: var(--glass-shadow) !important; -} - -.glass-dark { - background: var(--glass-dark) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important; - border: var(--border-width) solid var(--glass-light-catcher) !important; - box-shadow: var(--glass-shadow) !important; -} - -/* Spacing Utilities */ -.gap-xs { gap: calc(var(--bento-gap) * 0.5) !important; } -.gap-sm { gap: calc(var(--bento-gap) * 0.75) !important; } -.gap-md { gap: var(--bento-gap) !important; } -.gap-lg { gap: calc(var(--bento-gap) * 1.5) !important; } -.gap-xl { gap: calc(var(--bento-gap) * 2) !important; } - -/* Padding Utilities */ -.p-xs { padding: 0.5rem !important; } -.p-sm { padding: 1rem !important; } -.p-md { padding: 1.5rem !important; } -.p-lg { padding: 2rem !important; } -.p-xl { padding: 3rem !important; } - -/* Margin Utilities */ -.m-xs { margin: 0.5rem !important; } -.m-sm { margin: 1rem !important; } -.m-md { margin: 1.5rem !important; } -.m-lg { margin: 2rem !important; } -.m-xl { margin: 3rem !important; } - -/* Flexbox Utilities */ -.d-flex { display: flex !important; } -.d-grid { display: grid !important; } -.d-block { display: block !important; } -.d-none { display: none !important; } - -.flex-row { flex-direction: row !important; } -.flex-column { flex-direction: column !important; } -.flex-wrap { flex-wrap: wrap !important; } -.flex-nowrap { flex-wrap: nowrap !important; } - -.justify-start { justify-content: flex-start !important; } -.justify-center { justify-content: center !important; } -.justify-end { justify-content: flex-end !important; } -.justify-between { justify-content: space-between !important; } -.justify-around { justify-content: space-around !important; } - -.align-start { align-items: flex-start !important; } -.align-center { align-items: center !important; } -.align-end { align-items: flex-end !important; } -.align-stretch { align-items: stretch !important; } - -/* Text Alignment */ -.text-left { text-align: left !important; } -.text-center { text-align: center !important; } -.text-right { text-align: right !important; } - -/* Font Weight */ -.font-normal { font-weight: var(--font-weight-normal) !important; } -.font-medium { font-weight: var(--font-weight-medium) !important; } -.font-bold { font-weight: var(--font-weight-bold) !important; } -.font-heavy { font-weight: var(--font-weight-heavy) !important; } - -/* Text Colors */ -.text-primary { color: var(--color-text-primary) !important; } -.text-secondary { color: var(--color-text-secondary) !important; } -.text-accent { color: var(--color-accent) !important; } -.text-white { color: #ffffff !important; } - -/* Background Colors */ -.bg-transparent { background: transparent !important; } -.bg-accent { background: var(--color-accent) !important; } -.bg-surface { background: var(--color-surface) !important; } - -/* Shadow Utilities */ -.shadow-sm { box-shadow: var(--glass-shadow-sm) !important; } -.shadow { box-shadow: var(--glass-shadow) !important; } -.shadow-lg { box-shadow: var(--glass-shadow-lg) !important; } -.shadow-none { box-shadow: none !important; } - -/* Hover Effects */ -.hover-lift { - transition: transform var(--animation-duration) var(--animation-timing); -} - -.hover-lift:hover { - transform: translateY(-4px); -} - -.hover-scale { - transition: transform var(--animation-duration) var(--animation-timing); -} - -.hover-scale:hover { - transform: scale(1.05); -} - -/* Cursor Utilities */ -.cursor-pointer { cursor: pointer !important; } -.cursor-default { cursor: default !important; } - -/* Overflow Utilities */ -.overflow-hidden { overflow: hidden !important; } -.overflow-auto { overflow: auto !important; } -.overflow-scroll { overflow: scroll !important; } - -/* Position Utilities */ -.position-relative { position: relative !important; } -.position-absolute { position: absolute !important; } -.position-fixed { position: fixed !important; } -.position-sticky { position: sticky !important; } - -/* Width Utilities */ -.w-full { width: 100% !important; } -.w-auto { width: auto !important; } -.w-fit { width: fit-content !important; } - -/* Height Utilities */ -.h-full { height: 100% !important; } -.h-auto { height: auto !important; } -.h-fit { height: fit-content !important; } - -/* Z-Index Utilities */ -.z-0 { z-index: 0 !important; } -.z-10 { z-index: 10 !important; } -.z-20 { z-index: 20 !important; } -.z-30 { z-index: 30 !important; } -.z-40 { z-index: 40 !important; } -.z-50 { z-index: 50 !important; } - -/* Opacity Utilities */ -.opacity-0 { opacity: 0 !important; } -.opacity-25 { opacity: 0.25 !important; } -.opacity-50 { opacity: 0.5 !important; } -.opacity-75 { opacity: 0.75 !important; } -.opacity-100 { opacity: 1 !important; } - -/* Responsive Utilities */ -@media (max-width: 767px) { - .mobile-hidden { display: none !important; } - .mobile-visible { display: block !important; } -} - -@media (min-width: 768px) { - .desktop-hidden { display: none !important; } - .desktop-visible { display: block !important; } -} - -/* Fade In Animation */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.fade-in { - animation: fadeIn 0.6s var(--animation-timing) forwards; -} - -.fade-in-delay-1 { - animation: fadeIn 0.6s var(--animation-timing) 0.1s forwards; - opacity: 0; -} - -.fade-in-delay-2 { - animation: fadeIn 0.6s var(--animation-timing) 0.2s forwards; - opacity: 0; -} - -.fade-in-delay-3 { - animation: fadeIn 0.6s var(--animation-timing) 0.3s forwards; - opacity: 0; -} - -/* Scale In Animation */ -@keyframes scaleIn { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - -.scale-in { - animation: scaleIn 0.4s var(--animation-timing) forwards; -} - -/* Slide In Animations */ -@keyframes slideInLeft { - from { - opacity: 0; - transform: translateX(-30px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(30px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.slide-in-left { - animation: slideInLeft 0.5s var(--animation-timing) forwards; -} - -.slide-in-right { - animation: slideInRight 0.5s var(--animation-timing) forwards; -}