@memberjunction/ng-explorer-settings 5.11.0 → 5.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/account-info/account-info.component.js +2 -2
- package/dist/lib/appearance-settings/appearance-settings.component.js +2 -2
- package/dist/lib/application-management/application-dialog/application-dialog.component.js +2 -2
- package/dist/lib/application-management/application-management.component.js +2 -2
- package/dist/lib/application-settings/application-settings.component.js +2 -2
- package/dist/lib/entity-permissions/entity-permissions.component.js +2 -2
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js +2 -2
- package/dist/lib/general-settings/general-settings.component.js +2 -2
- package/dist/lib/notification-preferences/notification-preferences.component.js +2 -2
- package/dist/lib/role-management/role-dialog/role-dialog.component.js +2 -2
- package/dist/lib/role-management/role-management.component.js +2 -2
- package/dist/lib/settings/settings.component.js +2 -2
- package/dist/lib/sql-logging/sql-logging.component.js +2 -2
- package/dist/lib/user-management/user-dialog/user-dialog.component.js +2 -2
- package/dist/lib/user-management/user-management.component.js +2 -2
- package/dist/lib/user-profile-settings/user-profile-settings.component.js +2 -2
- package/package.json +17 -17
|
@@ -560,7 +560,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
|
|
|
560
560
|
i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 2 : -1);
|
|
561
561
|
i0.ɵɵadvance();
|
|
562
562
|
i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 3 : -1);
|
|
563
|
-
} }, dependencies: [i2.LoadingComponent, i3.NotificationPreferencesComponent, i4.GeneralSettingsComponent, i5.ApplicationSettingsComponent, i6.AppearanceSettingsComponent], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n --settings-primary: #0076B6;\n --settings-primary-container: #AAE7FD;\n --settings-secondary: #F5A623;\n --settings-secondary-container: #FFECD6;\n --settings-tertiary: #4CAF50;\n --settings-tertiary-container: #C8E6C9;\n --settings-error: #D32F2F;\n --settings-error-container: #FFCDD2;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n@media (max-width: 768px) {\n [_nghost-%COMP%] {\n height: auto;\n min-height: 100vh;\n overflow: visible;\n }\n}\n\n\n\n.mj-page-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n .mj-page-container[_ngcontent-%COMP%] {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 100vh;\n }\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n\n\n\n\n\n.settings-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mat-sys-surface);\n overflow-y: auto;\n position: relative;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n text-align: center;\n max-width: 400px;\n}\n\n.error-content[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n color: var(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-content[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n margin-bottom: 1.5rem;\n font: var(--mat-sys-body-large);\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font: var(--mat-sys-label-large);\n font-weight: 500;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mat-sys-primary-hover, var(--mat-sys-primary));\n transform: translateY(-1px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n\n\n\n\n\n\n.settings-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n\n@media (max-width: 768px) {\n .settings-content[_ngcontent-%COMP%] {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 0;\n flex: none;\n }\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%] .desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n\n\n\n\n\n.side-navigation[_ngcontent-%COMP%] {\n width: 280px;\n background: linear-gradient(180deg, var(--mat-sys-surface) 0%, var(--mat-sys-surface-container-lowest) 100%);\n border-right: 1px solid var(--mat-sys-outline-variant);\n overflow-y: auto;\n flex-shrink: 0;\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n\n\n.nav-search[_ngcontent-%COMP%] {\n position: relative;\n padding: 1rem;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n background-color: var(--mat-sys-surface);\n}\n\n.nav-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n pointer-events: none;\n z-index: 1;\n}\n\n.nav-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-body-medium);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--settings-primary);\n background-color: var(--mat-sys-surface);\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.nav-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.nav-search-clear[_ngcontent-%COMP%] {\n position: absolute;\n right: 1.25rem;\n top: 50%;\n transform: translateY(-50%);\n padding: 0.25rem;\n background: transparent;\n border: none;\n color: var(--mat-sys-on-surface-variant);\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--settings-primary);\n outline-offset: 2px;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n margin: 0.25rem 0.75rem;\n border-radius: var(--mat-sys-corner-medium);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n border: 2px solid transparent;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n transform: translateX(4px);\n}\n\n.nav-item[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n\n\n.nav-item[aria-controls=\"panel-general\"][_ngcontent-%COMP%] {\n --item-color: var(--settings-primary);\n --item-container: var(--settings-primary-container);\n}\n\n.nav-item[aria-controls=\"panel-users\"][_ngcontent-%COMP%] {\n --item-color: var(--settings-secondary);\n --item-container: var(--settings-secondary-container);\n}\n\n.nav-item[aria-controls=\"panel-roles\"][_ngcontent-%COMP%] {\n --item-color: var(--settings-tertiary);\n --item-container: var(--settings-tertiary-container);\n}\n\n.nav-item[aria-controls=\"panel-applications\"][_ngcontent-%COMP%] {\n --item-color: #9C27B0;\n --item-container: #E1BEE7;\n}\n\n.nav-item[aria-controls=\"panel-permissions\"][_ngcontent-%COMP%] {\n --item-color: var(--settings-error);\n --item-container: var(--settings-error-container);\n}\n\n.nav-item[aria-controls=\"panel-advanced\"][_ngcontent-%COMP%] {\n --item-color: #FF6F00;\n --item-container: #FFE0B2;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background-color: var(--item-container);\n color: var(--item-color);\n font-weight: 600;\n border-color: var(--item-color);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.active) {\n border-color: var(--item-color);\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.nav-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-label[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-weight: 600;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-primary[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-primary-container);\n color: var(--mat-sys-on-primary-container);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-danger[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-warning[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-on-tertiary-container);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-success[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n}\n\n\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%]:hover {\n background-color: transparent;\n transform: none;\n}\n\n\n\n.coming-soon-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n background: linear-gradient(135deg, var(--mat-sys-tertiary-container) 0%, var(--mat-sys-secondary-container) 100%);\n color: var(--mat-sys-on-tertiary-container);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n\n\n.nav-rail-item.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-rail-item.disabled[_ngcontent-%COMP%]:hover {\n background-color: transparent;\n}\n\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n background: linear-gradient(180deg, var(--mat-sys-surface-container-lowest) 0%, var(--mat-sys-surface) 100%);\n}\n\n@media (max-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: 100%;\n min-height: 0;\n box-sizing: border-box;\n overflow-x: hidden;\n padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n .tab-content[_ngcontent-%COMP%] {\n height: auto;\n min-height: 0;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 0.5rem;\n }\n}\n\n\n\n\n\n.section-title[_ngcontent-%COMP%] {\n font: var(--mat-sys-headline-small);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n padding-bottom: 0.75rem;\n border-bottom: 3px solid var(--mat-sys-outline-variant);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title[_ngcontent-%COMP%]::before {\n content: \"\";\n width: 4px;\n height: 2rem;\n background: linear-gradient(180deg, var(--settings-primary) 0%, var(--settings-tertiary) 100%);\n border-radius: 2px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n margin: 0 0 1.5rem 0;\n font: var(--mat-sys-body-large);\n padding: 1rem 1.25rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: var(--mat-sys-corner-medium);\n}\n\n\n\n\n\n.settings-grid[_ngcontent-%COMP%], \n.mj-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.mj-grid-responsive[_ngcontent-%COMP%] {\n \n\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n .settings-grid[_ngcontent-%COMP%], \n .mj-grid[_ngcontent-%COMP%], \n .mj-grid-responsive[_ngcontent-%COMP%] {\n gap: 1rem;\n margin-top: 0.5rem;\n }\n}\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n margin-bottom: 0.25rem;\n}\n\n.users-settings[_ngcontent-%COMP%] .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] .section-description[_ngcontent-%COMP%] {\n margin-bottom: 0.5rem;\n}\n\n\n\n\n\n.card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-medium);\n}\n\n.card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n}\n\n\n\n\n\n.beta-warning[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.75rem 1.25rem;\n background: linear-gradient(135deg, #FFE0B2 0%, var(--settings-secondary-container) 100%);\n color: #FF6F00;\n border-radius: var(--mat-sys-corner-medium);\n font: var(--mat-sys-label-large);\n font-weight: 600;\n margin-bottom: 1.5rem;\n max-width: 100%;\n box-sizing: border-box;\n border: 2px solid #FF6F00;\n box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .beta-warning[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.75rem;\n }\n}\n\n\n\n\n\n\n.mobile-layout[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n max-width: 100vw;\n overflow: visible;\n box-sizing: border-box;\n}\n\n\n\n.mobile-header[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 0.5rem;\n background-color: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n z-index: 100;\n box-sizing: border-box;\n}\n\n.mobile-header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n min-width: 48px;\n border-radius: var(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:hover {\n background-color: var(--mat-sys-surface-container-high);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n}\n\n.mobile-header-title[_ngcontent-%COMP%] {\n flex: 1;\n text-align: center;\n font: var(--mat-sys-title-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0;\n padding: 0 0.5rem;\n}\n\n.mobile-header-spacer[_ngcontent-%COMP%] {\n width: 48px;\n min-width: 48px;\n}\n\n\n\n.mobile-nav-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n.mobile-nav-rail[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background-color: var(--mat-sys-surface);\n border-right: 1px solid var(--mat-sys-outline-variant);\n display: flex;\n flex-direction: column;\n z-index: 1001;\n transform: translateX(-100%);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: var(--mat-sys-elevation-4);\n overflow: hidden;\n}\n\n.mobile-nav-rail.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.nav-rail-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n min-height: 64px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n background-color: var(--mat-sys-surface-container);\n flex-shrink: 0;\n}\n\n.nav-rail-title[_ngcontent-%COMP%] {\n font: var(--mat-sys-title-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n\n\n.nav-rail-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n gap: 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n\n\n.nav-rail-close-item[_ngcontent-%COMP%] {\n margin-top: auto;\n border-top: 1px solid var(--mat-sys-outline-variant);\n padding-top: 0.75rem !important;\n margin-top: 0.5rem;\n background-color: var(--mat-sys-error-container) !important;\n color: var(--mat-sys-on-error-container) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mat-sys-error) !important;\n color: var(--mat-sys-on-error) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n}\n\n\n\n.nav-rail-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 0.875rem 1rem;\n background: transparent;\n border: none;\n border-radius: var(--mat-sys-corner-medium);\n color: var(--mat-sys-on-surface-variant);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n min-height: 56px;\n}\n\n.nav-rail-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-large);\n font-weight: 500;\n flex: 1;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:hover:not(.active) {\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%] .nav-rail-label[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:active {\n transform: scale(0.98);\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n\n\n.rail-badge[_ngcontent-%COMP%] {\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.rail-badge.badge-primary[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.rail-badge.badge-danger[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n}\n\n.rail-badge.badge-warning[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-tertiary);\n color: var(--mat-sys-on-tertiary);\n}\n\n.rail-badge.badge-success[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-secondary);\n color: var(--mat-sys-on-secondary);\n}\n\n\n\n.mobile-content[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100vw;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 72px 0.75rem 2rem 0.75rem;\n min-width: 0;\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n\n\n@media (max-width: 374px) {\n .mobile-nav-rail[_ngcontent-%COMP%] {\n width: 260px;\n }\n\n .mobile-content[_ngcontent-%COMP%] {\n padding: 64px 0.5rem 1.5rem 0.5rem;\n }\n\n .mobile-header[_ngcontent-%COMP%] {\n height: 52px;\n padding: 0 0.25rem;\n }\n\n .mobile-header-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n }\n\n .mobile-header-spacer[_ngcontent-%COMP%] {\n width: 44px;\n min-width: 44px;\n }\n\n .mobile-header-title[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n}\n\n\n\n\n\n\n.advanced-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid var(--mat-sys-outline-variant);\n margin-bottom: 1rem;\n margin-top: 1rem;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-large);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n min-height: 44px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n .advanced-tabs[_ngcontent-%COMP%] {\n gap: 0;\n margin-bottom: 1rem;\n margin-top: 1rem;\n border-bottom: none;\n border: 1px solid var(--mat-sys-outline);\n border-radius: var(--mat-sys-corner-full);\n padding: 0;\n background-color: var(--mat-sys-surface-container-low);\n overflow-x: hidden;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 0.625rem 0.5rem;\n font-size: 0.75rem;\n border-bottom: none;\n border-radius: 0;\n border-right: 1px solid var(--mat-sys-outline);\n min-width: 0;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:last-child {\n border-right: none;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:first-child {\n border-radius: var(--mat-sys-corner-full) 0 0 var(--mat-sys-corner-full);\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:last-child {\n border-radius: 0 var(--mat-sys-corner-full) var(--mat-sys-corner-full) 0;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] {\n background-color: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n border-bottom: none;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n }\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:hover {\n color: var(--mat-sys-on-surface);\n background: var(--mat-sys-surface-container);\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: -2px;\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n border-bottom-color: var(--mat-sys-primary);\n background: var(--mat-sys-primary-container);\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n}\n\n\n\n\n\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: visible;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n padding: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .advanced-tab-content[_ngcontent-%COMP%] {\n height: auto;\n min-height: 200px;\n overflow-y: visible;\n }\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n padding: 2rem;\n}\n\n.performance-settings[_ngcontent-%COMP%] h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n font: var(--mat-sys-title-large);\n color: var(--mat-sys-on-surface);\n}\n\n.performance-settings[_ngcontent-%COMP%] p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n}\n\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n width: 100%;\n max-width: 100%;\n height: auto;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n overflow-y: visible;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .general-settings[_ngcontent-%COMP%], \n .users-settings[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] {\n gap: 0.75rem;\n height: auto;\n min-height: auto;\n }\n\n .section-title[_ngcontent-%COMP%] {\n margin-bottom: 0.5rem;\n font-size: 1.375rem;\n }\n\n .section-description[_ngcontent-%COMP%] {\n margin-bottom: 0.75rem;\n }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%] > mj-settings-card[_ngcontent-%COMP%], \n.general-settings[_ngcontent-%COMP%] > .mj-grid[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > mj-user-management[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > mj-role-management[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%] > mj-application-management[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%] > mj-entity-permissions[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] > .advanced-tabs[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] > .advanced-tab-content[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .users-settings[_ngcontent-%COMP%] > mj-user-management[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%] > mj-role-management[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%] > mj-application-management[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%] > mj-entity-permissions[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] > .advanced-tab-content[_ngcontent-%COMP%] {\n flex: none;\n height: auto !important;\n min-height: 0;\n max-height: none !important;\n overflow-y: visible !important;\n overflow-x: hidden;\n }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > .section-description[_ngcontent-%COMP%] {\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n .general-settings[_ngcontent-%COMP%], \n .users-settings[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] {\n animation: none;\n }\n\n .nav-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n .nav-item[_ngcontent-%COMP%], \n .tab-btn[_ngcontent-%COMP%], \n .search-input[_ngcontent-%COMP%], \n .retry-button[_ngcontent-%COMP%], \n .search-result-item[_ngcontent-%COMP%] {\n transition: none;\n }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n .side-navigation[_ngcontent-%COMP%] {\n width: 200px;\n }\n\n .nav-item[_ngcontent-%COMP%] {\n padding: 0.75rem 1rem;\n }\n}\n\n@media (max-width: 1024px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\n}\n\n\n\n@media (max-width: 768px) {\n .mobile-layout[_ngcontent-%COMP%] mj-user-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-role-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-application-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-entity-permissions[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-sql-logging[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-settings-card[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-user-profile-settings[_ngcontent-%COMP%] {\n display: block;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] .general-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .users-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .roles-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .applications-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .permissions-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] {\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] .mj-grid[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .mj-grid-responsive[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .card-content[_ngcontent-%COMP%] {\n height: auto !important;\n min-height: 0 !important;\n }\n}\n\n@media (min-width: 1440px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 2.5rem 3rem;\n }\n\n .side-navigation[_ngcontent-%COMP%] {\n width: 280px;\n }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n \n\n body[_ngcontent-%COMP%] {\n position: relative;\n overflow-y: visible;\n -webkit-overflow-scrolling: touch;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] > *[_ngcontent-%COMP%], \n .mobile-content[_ngcontent-%COMP%] > *[_ngcontent-%COMP%], \n .tab-content[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n -webkit-overflow-scrolling: touch;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] *[_ngcontent-%COMP%] {\n box-sizing: border-box;\n }\n}"] });
|
|
563
|
+
} }, dependencies: [i2.LoadingComponent, i3.NotificationPreferencesComponent, i4.GeneralSettingsComponent, i5.ApplicationSettingsComponent, i6.AppearanceSettingsComponent], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n@media (max-width: 768px) {\n [_nghost-%COMP%] {\n height: auto;\n min-height: 100vh;\n overflow: visible;\n }\n}\n\n\n\n.mj-page-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n .mj-page-container[_ngcontent-%COMP%] {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 100vh;\n }\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n\n\n\n\n\n.settings-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-page);\n overflow-y: auto;\n position: relative;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 1rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n text-align: center;\n max-width: 400px;\n}\n\n.error-content[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-content[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n margin-bottom: 1.5rem;\n font-size: 1rem;\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n background-color: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.error-content[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n\n\n\n\n\n\n.settings-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n\n@media (max-width: 768px) {\n .settings-content[_ngcontent-%COMP%] {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 0;\n flex: none;\n }\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%] .desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n\n\n\n\n\n.side-navigation[_ngcontent-%COMP%] {\n width: 280px;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n overflow-y: auto;\n flex-shrink: 0;\n box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n.nav-search[_ngcontent-%COMP%] {\n position: relative;\n padding: 1rem;\n border-bottom: 1px solid var(--mj-border-default);\n background-color: var(--mj-bg-surface);\n}\n\n.nav-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-muted);\n font-size: 1rem;\n pointer-events: none;\n z-index: 1;\n}\n\n.nav-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 9999px;\n font-size: 0.875rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n background-color: var(--mj-bg-surface);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.nav-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n}\n\n.nav-search-clear[_ngcontent-%COMP%] {\n position: absolute;\n right: 1.25rem;\n top: 50%;\n transform: translateY(-50%);\n padding: 0.25rem;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n border-radius: 9999px;\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n margin: 0.25rem 0.75rem;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--mj-text-muted);\n font-size: 1rem;\n border: 2px solid transparent;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n transform: translateX(4px);\n}\n\n.nav-item[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n.nav-item[aria-controls=\"panel-general\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-brand-primary);\n --item-container: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-users\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-status-warning);\n --item-container: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-roles\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-status-success);\n --item-container: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-applications\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-brand-primary);\n --item-container: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-permissions\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-status-error);\n --item-container: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-advanced\"][_ngcontent-%COMP%] {\n --item-color: var(--mj-status-warning);\n --item-container: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background-color: var(--item-container);\n color: var(--item-color);\n font-weight: 600;\n border-color: var(--item-color);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.active) {\n border-color: var(--item-color);\n background-color: var(--mj-bg-surface-card);\n}\n\n.nav-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-label[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-primary[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-danger[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-warning[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.nav-item[_ngcontent-%COMP%] .nav-badge.badge-success[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%]:hover {\n background-color: transparent;\n transform: none;\n}\n\n\n\n.coming-soon-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n border: 1px solid var(--mj-border-default);\n}\n\n\n\n.nav-rail-item.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-rail-item.disabled[_ngcontent-%COMP%]:hover {\n background-color: transparent;\n}\n\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n background: var(--mj-bg-surface);\n}\n\n@media (max-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: 100%;\n min-height: 0;\n box-sizing: border-box;\n overflow-x: hidden;\n padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n .tab-content[_ngcontent-%COMP%] {\n height: auto;\n min-height: 0;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 0.5rem;\n }\n}\n\n\n\n\n\n.section-title[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n padding-bottom: 0.75rem;\n border-bottom: 3px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title[_ngcontent-%COMP%]::before {\n content: \"\";\n width: 4px;\n height: 2rem;\n background: var(--mj-brand-primary);\n border-radius: 2px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n margin: 0 0 1.5rem 0;\n font-size: 1rem;\n padding: 1rem 1.25rem;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n\n\n\n\n.settings-grid[_ngcontent-%COMP%], \n.mj-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.mj-grid-responsive[_ngcontent-%COMP%] {\n \n\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n .settings-grid[_ngcontent-%COMP%], \n .mj-grid[_ngcontent-%COMP%], \n .mj-grid-responsive[_ngcontent-%COMP%] {\n gap: 1rem;\n margin-top: 0.5rem;\n }\n}\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n margin-bottom: 0.25rem;\n}\n\n.users-settings[_ngcontent-%COMP%] .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] .section-description[_ngcontent-%COMP%] {\n margin-bottom: 0.5rem;\n}\n\n\n\n\n\n.card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n color: var(--mj-text-muted);\n font-size: 0.875rem;\n}\n\n.card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n}\n\n\n\n\n\n.beta-warning[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.75rem 1.25rem;\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n border-radius: 12px;\n font-size: 0.875rem;\n font-weight: 600;\n margin-bottom: 1.5rem;\n max-width: 100%;\n box-sizing: border-box;\n border: 2px solid var(--mj-status-warning);\n box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .beta-warning[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.75rem;\n }\n}\n\n\n\n\n\n\n.mobile-layout[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n max-width: 100vw;\n overflow: visible;\n box-sizing: border-box;\n}\n\n\n\n.mobile-header[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 0.5rem;\n background-color: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n z-index: 100;\n box-sizing: border-box;\n}\n\n.mobile-header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n min-width: 48px;\n border-radius: 9999px;\n background: transparent;\n color: var(--mj-text-primary);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n}\n\n.mobile-header-title[_ngcontent-%COMP%] {\n flex: 1;\n text-align: center;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n padding: 0 0.5rem;\n}\n\n.mobile-header-spacer[_ngcontent-%COMP%] {\n width: 48px;\n min-width: 48px;\n}\n\n\n\n.mobile-nav-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n.mobile-nav-rail[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background-color: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n z-index: 1001;\n transform: translateX(-100%);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: var(--mj-shadow-lg);\n overflow: hidden;\n}\n\n.mobile-nav-rail.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.nav-rail-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n min-height: 64px;\n border-bottom: 1px solid var(--mj-border-default);\n background-color: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.nav-rail-title[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n\n\n.nav-rail-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n gap: 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n\n\n.nav-rail-close-item[_ngcontent-%COMP%] {\n margin-top: auto;\n border-top: 1px solid var(--mj-border-default);\n padding-top: 0.75rem !important;\n margin-top: 0.5rem;\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)) !important;\n color: var(--mj-status-error) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-status-error) !important;\n color: var(--mj-bg-surface) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n}\n\n\n\n.nav-rail-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 0.875rem 1rem;\n background: transparent;\n border: none;\n border-radius: 12px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n min-height: 56px;\n}\n\n.nav-rail-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label[_ngcontent-%COMP%] {\n font-size: 1rem;\n font-weight: 500;\n flex: 1;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:hover:not(.active) {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%] .nav-rail-label[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:active {\n transform: scale(0.98);\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n.rail-badge[_ngcontent-%COMP%] {\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n border-radius: 9999px;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.rail-badge.badge-primary[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-danger[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-warning[_ngcontent-%COMP%] {\n background-color: var(--mj-status-success);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-success[_ngcontent-%COMP%] {\n background-color: var(--mj-status-warning);\n color: var(--mj-text-primary);\n}\n\n\n\n.mobile-content[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100vw;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 72px 0.75rem 2rem 0.75rem;\n min-width: 0;\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n\n\n@media (max-width: 374px) {\n .mobile-nav-rail[_ngcontent-%COMP%] {\n width: 260px;\n }\n\n .mobile-content[_ngcontent-%COMP%] {\n padding: 64px 0.5rem 1.5rem 0.5rem;\n }\n\n .mobile-header[_ngcontent-%COMP%] {\n height: 52px;\n padding: 0 0.25rem;\n }\n\n .mobile-header-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n }\n\n .mobile-header-spacer[_ngcontent-%COMP%] {\n width: 44px;\n min-width: 44px;\n }\n\n .mobile-header-title[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n}\n\n\n\n\n\n\n.advanced-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid var(--mj-border-default);\n margin-bottom: 1rem;\n margin-top: 1rem;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: var(--mj-text-muted);\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n min-height: 44px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n .advanced-tabs[_ngcontent-%COMP%] {\n gap: 0;\n margin-bottom: 1rem;\n margin-top: 1rem;\n border-bottom: none;\n border: 1px solid var(--mj-border-strong);\n border-radius: 9999px;\n padding: 0;\n background-color: var(--mj-bg-surface-sunken);\n overflow-x: hidden;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 0.625rem 0.5rem;\n font-size: 0.75rem;\n border-bottom: none;\n border-radius: 0;\n border-right: 1px solid var(--mj-border-strong);\n min-width: 0;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:last-child {\n border-right: none;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:first-child {\n border-radius: 9999px 0 0 9999px;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:last-child {\n border-radius: 0 9999px 9999px 0;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n border-bottom: none;\n }\n\n .advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n }\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: -2px;\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.advanced-tabs[_ngcontent-%COMP%] .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n}\n\n\n\n\n\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: visible;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n padding: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .advanced-tab-content[_ngcontent-%COMP%] {\n height: auto;\n min-height: 200px;\n overflow-y: visible;\n }\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n padding: 2rem;\n}\n\n.performance-settings[_ngcontent-%COMP%] h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n font-size: 1.25rem;\n color: var(--mj-text-primary);\n}\n\n.performance-settings[_ngcontent-%COMP%] p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 1rem;\n}\n\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n width: 100%;\n max-width: 100%;\n height: auto;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n overflow-y: visible;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .general-settings[_ngcontent-%COMP%], \n .users-settings[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] {\n gap: 0.75rem;\n height: auto;\n min-height: auto;\n }\n\n .section-title[_ngcontent-%COMP%] {\n margin-bottom: 0.5rem;\n font-size: 1.375rem;\n }\n\n .section-description[_ngcontent-%COMP%] {\n margin-bottom: 0.75rem;\n }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%] > mj-settings-card[_ngcontent-%COMP%], \n.general-settings[_ngcontent-%COMP%] > .mj-grid[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > mj-user-management[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > mj-role-management[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%] > mj-application-management[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%] > mj-entity-permissions[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] > .advanced-tabs[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] > .advanced-tab-content[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n .users-settings[_ngcontent-%COMP%] > mj-user-management[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%] > mj-role-management[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%] > mj-application-management[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%] > mj-entity-permissions[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] > .advanced-tab-content[_ngcontent-%COMP%] {\n flex: none;\n height: auto !important;\n min-height: 0;\n max-height: none !important;\n overflow-y: visible !important;\n overflow-x: hidden;\n }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%] > .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%] > .section-description[_ngcontent-%COMP%] {\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n .general-settings[_ngcontent-%COMP%], \n .users-settings[_ngcontent-%COMP%], \n .roles-settings[_ngcontent-%COMP%], \n .applications-settings[_ngcontent-%COMP%], \n .permissions-settings[_ngcontent-%COMP%], \n .advanced-settings[_ngcontent-%COMP%] {\n animation: none;\n }\n\n .nav-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n .nav-item[_ngcontent-%COMP%], \n .tab-btn[_ngcontent-%COMP%], \n .search-input[_ngcontent-%COMP%], \n .retry-button[_ngcontent-%COMP%], \n .search-result-item[_ngcontent-%COMP%] {\n transition: none;\n }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n .side-navigation[_ngcontent-%COMP%] {\n width: 200px;\n }\n\n .nav-item[_ngcontent-%COMP%] {\n padding: 0.75rem 1rem;\n }\n}\n\n@media (max-width: 1024px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\n}\n\n\n\n@media (max-width: 768px) {\n .mobile-layout[_ngcontent-%COMP%] mj-user-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-role-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-application-management[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-entity-permissions[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-sql-logging[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-settings-card[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] mj-user-profile-settings[_ngcontent-%COMP%] {\n display: block;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] .general-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .users-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .roles-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .applications-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .permissions-settings[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] {\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] .mj-grid[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .mj-grid-responsive[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] .card-content[_ngcontent-%COMP%] {\n height: auto !important;\n min-height: 0 !important;\n }\n}\n\n@media (min-width: 1440px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 2.5rem 3rem;\n }\n\n .side-navigation[_ngcontent-%COMP%] {\n width: 280px;\n }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n \n\n body[_ngcontent-%COMP%] {\n position: relative;\n overflow-y: visible;\n -webkit-overflow-scrolling: touch;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%], \n .mobile-layout[_ngcontent-%COMP%] > *[_ngcontent-%COMP%], \n .mobile-content[_ngcontent-%COMP%] > *[_ngcontent-%COMP%], \n .tab-content[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n -webkit-overflow-scrolling: touch;\n }\n\n \n\n .mobile-layout[_ngcontent-%COMP%] *[_ngcontent-%COMP%] {\n box-sizing: border-box;\n }\n}"] });
|
|
564
564
|
};
|
|
565
565
|
SettingsComponent = __decorate([
|
|
566
566
|
RegisterClass(BaseNavigationComponent, 'Settings')
|
|
@@ -568,7 +568,7 @@ SettingsComponent = __decorate([
|
|
|
568
568
|
export { SettingsComponent };
|
|
569
569
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
|
|
570
570
|
type: Component,
|
|
571
|
-
args: [{ standalone: false, selector: 'mj-settings', template: "<div class=\"mj-page-container\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading settings...\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\" role=\"alert\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"retry-button\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Main Content -->\n @if (!isLoading && !error) {\n <div class=\"settings-content\">\n <!-- Desktop Layout -->\n @if (!isMobile) {\n <div class=\"desktop-layout\" style=\"display: flex;\">\n <!-- Side Navigation -->\n <nav class=\"side-navigation\" role=\"navigation\" aria-label=\"Settings navigation\">\n <!-- Search Bar -->\n <div class=\"nav-search\">\n <i class=\"fa-solid fa-search nav-search-icon\" aria-hidden=\"true\"></i>\n <input\n type=\"text\"\n class=\"nav-search-input\"\n placeholder=\"Search settings...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"searchTerm$.value\"\n aria-label=\"Search settings\"\n />\n @if (searchTerm$.value) {\n <button\n class=\"nav-search-clear\"\n (click)=\"clearSearch()\"\n aria-label=\"Clear search\"\n tabindex=\"0\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <ul class=\"nav-list\" role=\"tablist\" aria-orientation=\"vertical\">\n @for (tab of filteredTabs; track tab.id) {\n <li\n class=\"nav-item\"\n [class.active]=\"activeTab === tab.id\"\n [class.disabled]=\"tab.disabled\"\n (click)=\"onTabChange(tab.id)\"\n (keydown.enter)=\"onTabChange(tab.id)\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.id\"\n [attr.aria-controls]=\"'panel-' + tab.id\"\n [attr.aria-disabled]=\"tab.disabled\"\n tabindex=\"0\"\n >\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n <span class=\"nav-label\">{{ tab.label }}</span>\n @if (tab.disabled) {\n <span class=\"coming-soon-badge\">Soon</span>\n }\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </li>\n }\n </ul>\n </nav>\n\n <!-- Content Area -->\n <div class=\"content-area\" role=\"tabpanel\" [attr.id]=\"'panel-' + activeTab\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <mj-general-settings></mj-general-settings>\n }\n\n @case ('notifications') {\n <div class=\"notifications-settings\">\n <h2 class=\"section-title\">Notifications</h2>\n <p class=\"section-description\">Configure how and when you receive notifications</p>\n <mj-notification-preferences></mj-notification-preferences>\n </div>\n }\n\n @case ('applications') {\n <mj-application-settings></mj-application-settings>\n }\n\n @case ('appearance') {\n <mj-appearance-settings></mj-appearance-settings>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Mobile Layout -->\n @if (isMobile) {\n <div class=\"mobile-layout\">\n <!-- Mobile Header -->\n @if (!isMobileNavOpen) {\n <header class=\"mobile-header\">\n <button\n class=\"mobile-header-icon\"\n (click)=\"toggleMobileNav()\"\n aria-label=\"Toggle navigation menu\"\n [attr.aria-expanded]=\"isMobileNavOpen\"\n >\n <i class=\"fa-solid fa-bars\" aria-hidden=\"true\"></i>\n </button>\n <h1 class=\"mobile-header-title\">Settings</h1>\n <div class=\"mobile-header-spacer\"></div>\n </header>\n }\n\n <!-- Backdrop Overlay -->\n @if (isMobileNavOpen) {\n <div\n class=\"mobile-nav-backdrop\"\n (click)=\"closeMobileNav()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n <!-- Mobile Navigation Rail -->\n <nav\n class=\"mobile-nav-rail\"\n [class.open]=\"isMobileNavOpen\"\n role=\"navigation\"\n aria-label=\"Settings navigation\"\n >\n <div class=\"nav-rail-header\">\n <span class=\"nav-rail-title\">Settings</span>\n </div>\n\n <div class=\"nav-rail-items\" role=\"tablist\">\n @for (tab of filteredTabs; track tab.id) {\n <button\n class=\"nav-rail-item\"\n [class.active]=\"activeTab === tab.id\"\n [class.disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"onMobileTabChange(tab.id)\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.id\"\n [attr.aria-label]=\"tab.label\"\n >\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n <span class=\"nav-rail-label\">{{ tab.label }}</span>\n @if (tab.disabled) {\n <span class=\"coming-soon-badge\">Soon</span>\n }\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"rail-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </button>\n }\n\n <button\n class=\"nav-rail-item nav-rail-close-item\"\n (click)=\"closeSettings()\"\n aria-label=\"Close settings\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n <span class=\"nav-rail-label\">Close</span>\n </button>\n </div>\n </nav>\n\n <!-- Mobile Content Area -->\n <div class=\"mobile-content\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <mj-general-settings></mj-general-settings>\n }\n\n @case ('notifications') {\n <div class=\"notifications-settings\">\n <h2 class=\"section-title\">Notifications</h2>\n <p class=\"section-description\">Configure how and when you receive notifications</p>\n <mj-notification-preferences></mj-notification-preferences>\n </div>\n }\n\n @case ('applications') {\n <mj-application-settings></mj-application-settings>\n }\n\n @case ('appearance') {\n <mj-appearance-settings></mj-appearance-settings>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["/* ============================================\n Settings Component - MD3 Design System\n Material Design 3 compliant styles with proper token usage\n ============================================ */\n\n/* ============================================\n Custom Color Palette\n ============================================ */\n:host {\n --settings-primary: #0076B6;\n --settings-primary-container: #AAE7FD;\n --settings-secondary: #F5A623;\n --settings-secondary-container: #FFECD6;\n --settings-tertiary: #4CAF50;\n --settings-tertiary-container: #C8E6C9;\n --settings-error: #D32F2F;\n --settings-error-container: #FFCDD2;\n}\n\n/* ============================================\n Host & Page Container\n ============================================ */\n\n/* Host element must fill its container */\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n@media (max-width: 768px) {\n :host {\n height: auto;\n min-height: 100vh;\n overflow: visible;\n }\n}\n\n/* Page container needs proper height and scrolling */\n.mj-page-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n .mj-page-container {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 100vh;\n }\n}\n\n/* ============================================\n Keyframe Animations\n ============================================ */\n\n@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* ============================================\n Settings Container & Main Layout\n ============================================ */\n\n.settings-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mat-sys-surface);\n overflow-y: auto;\n position: relative;\n}\n\n/* ============================================\n Loading State\n ============================================ */\n.loading-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-text {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n}\n\n/* ============================================\n Error State\n ============================================ */\n.error-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content {\n text-align: center;\n max-width: 400px;\n}\n\n.error-content .error-icon {\n font-size: 3rem;\n color: var(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-content .error-message {\n color: var(--mat-sys-on-surface);\n margin-bottom: 1.5rem;\n font: var(--mat-sys-body-large);\n}\n\n.error-content .retry-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font: var(--mat-sys-label-large);\n font-weight: 500;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.error-content .retry-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.error-content .retry-button:hover:not(:disabled) {\n background-color: var(--mat-sys-primary-hover, var(--mat-sys-primary));\n transform: translateY(-1px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.error-content .retry-button i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Main Content Area & Tab Layout\n ============================================ */\n\n.settings-content {\n display: flex;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n\n@media (max-width: 768px) {\n .settings-content {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 0;\n flex: none;\n }\n}\n\n.desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.settings-content .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n/* ============================================\n Side Navigation (Desktop Only)\n ============================================ */\n\n.side-navigation {\n width: 280px;\n background: linear-gradient(180deg, var(--mat-sys-surface) 0%, var(--mat-sys-surface-container-lowest) 100%);\n border-right: 1px solid var(--mat-sys-outline-variant);\n overflow-y: auto;\n flex-shrink: 0;\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n/* Navigation Search Bar */\n.nav-search {\n position: relative;\n padding: 1rem;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n background-color: var(--mat-sys-surface);\n}\n\n.nav-search-icon {\n position: absolute;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n pointer-events: none;\n z-index: 1;\n}\n\n.nav-search-input {\n width: 100%;\n padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-body-medium);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-search-input:focus {\n outline: none;\n border-color: var(--settings-primary);\n background-color: var(--mat-sys-surface);\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.nav-search-input::placeholder {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.nav-search-clear {\n position: absolute;\n right: 1.25rem;\n top: 50%;\n transform: translateY(-50%);\n padding: 0.25rem;\n background: transparent;\n border: none;\n color: var(--mat-sys-on-surface-variant);\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.nav-search-clear:hover {\n background: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-search-clear:focus-visible {\n outline: 2px solid var(--settings-primary);\n outline-offset: 2px;\n}\n\n.nav-list {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n margin: 0.25rem 0.75rem;\n border-radius: var(--mat-sys-corner-medium);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n border: 2px solid transparent;\n}\n\n.nav-item:hover {\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n transform: translateX(4px);\n}\n\n.nav-item:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n/* Color-coded navigation items */\n.nav-item[aria-controls=\"panel-general\"] {\n --item-color: var(--settings-primary);\n --item-container: var(--settings-primary-container);\n}\n\n.nav-item[aria-controls=\"panel-users\"] {\n --item-color: var(--settings-secondary);\n --item-container: var(--settings-secondary-container);\n}\n\n.nav-item[aria-controls=\"panel-roles\"] {\n --item-color: var(--settings-tertiary);\n --item-container: var(--settings-tertiary-container);\n}\n\n.nav-item[aria-controls=\"panel-applications\"] {\n --item-color: #9C27B0;\n --item-container: #E1BEE7;\n}\n\n.nav-item[aria-controls=\"panel-permissions\"] {\n --item-color: var(--settings-error);\n --item-container: var(--settings-error-container);\n}\n\n.nav-item[aria-controls=\"panel-advanced\"] {\n --item-color: #FF6F00;\n --item-container: #FFE0B2;\n}\n\n.nav-item.active {\n background-color: var(--item-container);\n color: var(--item-color);\n font-weight: 600;\n border-color: var(--item-color);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.nav-item:hover:not(.active) {\n border-color: var(--item-color);\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.nav-item i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n}\n\n.nav-item .nav-label {\n flex: 1;\n}\n\n.nav-item .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-weight: 600;\n}\n\n.nav-item .nav-badge.badge-primary {\n background-color: var(--mat-sys-primary-container);\n color: var(--mat-sys-on-primary-container);\n}\n\n.nav-item .nav-badge.badge-danger {\n background-color: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n}\n\n.nav-item .nav-badge.badge-warning {\n background-color: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-on-tertiary-container);\n}\n\n.nav-item .nav-badge.badge-success {\n background-color: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n}\n\n/* Disabled Navigation Items */\n.nav-item.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-item.disabled:hover {\n background-color: transparent;\n transform: none;\n}\n\n/* Coming Soon Badge */\n.coming-soon-badge {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n background: linear-gradient(135deg, var(--mat-sys-tertiary-container) 0%, var(--mat-sys-secondary-container) 100%);\n color: var(--mat-sys-on-tertiary-container);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* Mobile Navigation Disabled Items */\n.nav-rail-item.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-rail-item.disabled:hover {\n background-color: transparent;\n}\n\n/* ============================================\n Content Area & Tab Panels\n ============================================ */\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n background: linear-gradient(180deg, var(--mat-sys-surface-container-lowest) 0%, var(--mat-sys-surface) 100%);\n}\n\n@media (max-width: 768px) {\n .content-area {\n padding: 1rem;\n }\n}\n\n.tab-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: 100%;\n min-height: 0;\n box-sizing: border-box;\n overflow-x: hidden;\n padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n .tab-content {\n height: auto;\n min-height: 0;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 0.5rem;\n }\n}\n\n/* ============================================\n Section Titles\n ============================================ */\n.section-title {\n font: var(--mat-sys-headline-small);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n padding-bottom: 0.75rem;\n border-bottom: 3px solid var(--mat-sys-outline-variant);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title::before {\n content: \"\";\n width: 4px;\n height: 2rem;\n background: linear-gradient(180deg, var(--settings-primary) 0%, var(--settings-tertiary) 100%);\n border-radius: 2px;\n}\n\n.section-description {\n color: var(--mat-sys-on-surface-variant);\n margin: 0 0 1.5rem 0;\n font: var(--mat-sys-body-large);\n padding: 1rem 1.25rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: var(--mat-sys-corner-medium);\n}\n\n/* ============================================\n Settings Grid\n ============================================ */\n.settings-grid,\n.mj-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.mj-grid-responsive {\n /* Single column stacked layout */\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n .settings-grid,\n .mj-grid,\n .mj-grid-responsive {\n gap: 1rem;\n margin-top: 0.5rem;\n }\n}\n\n/* ============================================\n Section Title & Description Spacing\n ============================================ */\n.general-settings .section-title,\n.users-settings .section-title,\n.roles-settings .section-title {\n margin-bottom: 0.25rem;\n}\n\n.users-settings .section-description,\n.roles-settings .section-description {\n margin-bottom: 0.5rem;\n}\n\n/* ============================================\n Card Content\n ============================================ */\n.card-content {\n padding: 1rem;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-medium);\n}\n\n.card-content p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n}\n\n/* ============================================\n Beta Warning\n ============================================ */\n.beta-warning {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.75rem 1.25rem;\n background: linear-gradient(135deg, #FFE0B2 0%, var(--settings-secondary-container) 100%);\n color: #FF6F00;\n border-radius: var(--mat-sys-corner-medium);\n font: var(--mat-sys-label-large);\n font-weight: 600;\n margin-bottom: 1.5rem;\n max-width: 100%;\n box-sizing: border-box;\n border: 2px solid #FF6F00;\n box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning i {\n font-size: 1rem;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .beta-warning {\n font-size: 0.8125rem;\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.75rem;\n }\n}\n\n/* ============================================\n Mobile Layout with Collapsible Navigation Rail\n ============================================ */\n\n.mobile-layout {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n max-width: 100vw;\n overflow: visible;\n box-sizing: border-box;\n}\n\n/* Mobile Header */\n.mobile-header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 0.5rem;\n background-color: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n z-index: 100;\n box-sizing: border-box;\n}\n\n.mobile-header-icon {\n width: 48px;\n height: 48px;\n min-width: 48px;\n border-radius: var(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon:hover {\n background-color: var(--mat-sys-surface-container-high);\n}\n\n.mobile-header-icon:active {\n transform: scale(0.95);\n}\n\n.mobile-header-icon i {\n font-size: 1.25rem;\n}\n\n.mobile-header-title {\n flex: 1;\n text-align: center;\n font: var(--mat-sys-title-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0;\n padding: 0 0.5rem;\n}\n\n.mobile-header-spacer {\n width: 48px;\n min-width: 48px;\n}\n\n/* Backdrop Overlay */\n.mobile-nav-backdrop {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Collapsible Navigation Rail */\n.mobile-nav-rail {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background-color: var(--mat-sys-surface);\n border-right: 1px solid var(--mat-sys-outline-variant);\n display: flex;\n flex-direction: column;\n z-index: 1001;\n transform: translateX(-100%);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: var(--mat-sys-elevation-4);\n overflow: hidden;\n}\n\n.mobile-nav-rail.open {\n transform: translateX(0);\n}\n\n/* Navigation Rail Header */\n.nav-rail-header {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n min-height: 64px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n background-color: var(--mat-sys-surface-container);\n flex-shrink: 0;\n}\n\n.nav-rail-title {\n font: var(--mat-sys-title-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n/* Navigation Items Container */\n.nav-rail-items {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n gap: 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n/* Close Navigation Item */\n.nav-rail-close-item {\n margin-top: auto;\n border-top: 1px solid var(--mat-sys-outline-variant);\n padding-top: 0.75rem !important;\n margin-top: 0.5rem;\n background-color: var(--mat-sys-error-container) !important;\n color: var(--mat-sys-on-error-container) !important;\n}\n\n.nav-rail-close-item:hover {\n background-color: var(--mat-sys-error) !important;\n color: var(--mat-sys-on-error) !important;\n}\n\n.nav-rail-close-item i {\n font-size: 1.5rem;\n}\n\n/* Navigation Item */\n.nav-rail-item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 0.875rem 1rem;\n background: transparent;\n border: none;\n border-radius: var(--mat-sys-corner-medium);\n color: var(--mat-sys-on-surface-variant);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n min-height: 56px;\n}\n\n.nav-rail-item i {\n font-size: 1.5rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label {\n font: var(--mat-sys-body-large);\n font-weight: 500;\n flex: 1;\n}\n\n.nav-rail-item:hover:not(.active) {\n background-color: var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n}\n\n.nav-rail-item.active {\n background-color: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.nav-rail-item.active .nav-rail-label {\n font-weight: 600;\n}\n\n.nav-rail-item:active {\n transform: scale(0.98);\n}\n\n.nav-rail-item:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n/* Badge indicator */\n.rail-badge {\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n border-radius: var(--mat-sys-corner-full);\n font: var(--mat-sys-label-small);\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.rail-badge.badge-primary {\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.rail-badge.badge-danger {\n background-color: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n}\n\n.rail-badge.badge-warning {\n background-color: var(--mat-sys-tertiary);\n color: var(--mat-sys-on-tertiary);\n}\n\n.rail-badge.badge-success {\n background-color: var(--mat-sys-secondary);\n color: var(--mat-sys-on-secondary);\n}\n\n/* Mobile Content Area */\n.mobile-content {\n width: 100%;\n max-width: 100vw;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 72px 0.75rem 2rem 0.75rem;\n min-width: 0;\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n/* Responsive adjustments */\n@media (max-width: 374px) {\n .mobile-nav-rail {\n width: 260px;\n }\n\n .mobile-content {\n padding: 64px 0.5rem 1.5rem 0.5rem;\n }\n\n .mobile-header {\n height: 52px;\n padding: 0 0.25rem;\n }\n\n .mobile-header-icon {\n width: 44px;\n height: 44px;\n min-width: 44px;\n }\n\n .mobile-header-spacer {\n width: 44px;\n min-width: 44px;\n }\n\n .mobile-header-title {\n font-size: 1.125rem;\n }\n}\n\n/* ============================================\n Advanced Settings Sub-Tabs\n ============================================ */\n\n.advanced-tabs {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid var(--mat-sys-outline-variant);\n margin-bottom: 1rem;\n margin-top: 1rem;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-large);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n min-height: 44px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n/* Mobile-specific tab adjustments - Segmented Button Style */\n@media (max-width: 768px) {\n .advanced-tabs {\n gap: 0;\n margin-bottom: 1rem;\n margin-top: 1rem;\n border-bottom: none;\n border: 1px solid var(--mat-sys-outline);\n border-radius: var(--mat-sys-corner-full);\n padding: 0;\n background-color: var(--mat-sys-surface-container-low);\n overflow-x: hidden;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n .advanced-tabs .tab-btn {\n flex: 1;\n padding: 0.625rem 0.5rem;\n font-size: 0.75rem;\n border-bottom: none;\n border-radius: 0;\n border-right: 1px solid var(--mat-sys-outline);\n min-width: 0;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .advanced-tabs .tab-btn:last-child {\n border-right: none;\n }\n\n .advanced-tabs .tab-btn:first-child {\n border-radius: var(--mat-sys-corner-full) 0 0 var(--mat-sys-corner-full);\n }\n\n .advanced-tabs .tab-btn:last-child {\n border-radius: 0 var(--mat-sys-corner-full) var(--mat-sys-corner-full) 0;\n }\n\n .advanced-tabs .tab-btn.active {\n background-color: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n border-bottom: none;\n }\n\n .advanced-tabs .tab-btn i {\n font-size: 0.875rem;\n }\n}\n\n.advanced-tabs .tab-btn:hover {\n color: var(--mat-sys-on-surface);\n background: var(--mat-sys-surface-container);\n}\n\n.advanced-tabs .tab-btn:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: -2px;\n}\n\n.advanced-tabs .tab-btn.active {\n color: var(--mat-sys-primary);\n border-bottom-color: var(--mat-sys-primary);\n background: var(--mat-sys-primary-container);\n}\n\n.advanced-tabs .tab-btn.active i {\n color: var(--mat-sys-primary);\n}\n\n.advanced-tabs .tab-btn i {\n font-size: 1.125rem;\n}\n\n/* ============================================\n Advanced Tab Content Panels\n ============================================ */\n\n.advanced-tab-content {\n flex: 1;\n overflow-y: visible;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n padding: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Ensure scrolling works on mobile */\n@media (max-width: 768px) {\n .advanced-tab-content {\n height: auto;\n min-height: 200px;\n overflow-y: visible;\n }\n}\n\n.performance-settings,\n.developer-settings {\n padding: 2rem;\n}\n\n.performance-settings h3,\n.developer-settings h3 {\n margin: 0 0 1rem 0;\n font: var(--mat-sys-title-large);\n color: var(--mat-sys-on-surface);\n}\n\n.performance-settings p,\n.developer-settings p {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-body-large);\n}\n\n/* ============================================\n Settings Panel Containers with Fade-In Animation\n ============================================ */\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n max-width: 100%;\n height: auto;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n overflow-y: visible;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n\n/* Mobile-specific adjustments */\n@media (max-width: 768px) {\n .general-settings,\n .users-settings,\n .roles-settings,\n .applications-settings,\n .permissions-settings,\n .advanced-settings {\n gap: 0.75rem;\n height: auto;\n min-height: auto;\n }\n\n .section-title {\n margin-bottom: 0.5rem;\n font-size: 1.375rem;\n }\n\n .section-description {\n margin-bottom: 0.75rem;\n }\n}\n\n/* Only apply flex: 1 to actual content components, not titles/descriptions */\n.general-settings > mj-settings-card,\n.general-settings > .mj-grid,\n.users-settings > mj-user-management,\n.roles-settings > mj-role-management,\n.applications-settings > mj-application-management,\n.permissions-settings > mj-entity-permissions,\n.advanced-settings > .advanced-tabs,\n.advanced-settings > .advanced-tab-content {\n flex-shrink: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Allow content to flow naturally on mobile */\n@media (max-width: 768px) {\n .users-settings > mj-user-management,\n .roles-settings > mj-role-management,\n .applications-settings > mj-application-management,\n .permissions-settings > mj-entity-permissions,\n .advanced-settings > .advanced-tab-content {\n flex: none;\n height: auto !important;\n min-height: 0;\n max-height: none !important;\n overflow-y: visible !important;\n overflow-x: hidden;\n }\n}\n\n/* Titles and descriptions should not flex or grow */\n.general-settings > .section-title,\n.users-settings > .section-title,\n.roles-settings > .section-title,\n.users-settings > .section-description,\n.roles-settings > .section-description {\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n/* ============================================\n Accessibility: Reduced Motion Support\n ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n .general-settings,\n .users-settings,\n .roles-settings,\n .applications-settings,\n .permissions-settings,\n .advanced-settings {\n animation: none;\n }\n\n .nav-tab i,\n .nav-item,\n .tab-btn,\n .search-input,\n .retry-button,\n .search-result-item {\n transition: none;\n }\n}\n\n/* ============================================\n Responsive Breakpoints\n ============================================ */\n@media (max-width: 640px) {\n .side-navigation {\n width: 200px;\n }\n\n .nav-item {\n padding: 0.75rem 1rem;\n }\n}\n\n@media (max-width: 1024px) {\n .content-area {\n padding: 1.5rem;\n }\n}\n\n/* Mobile scroll fix - ensure all child components flow naturally */\n@media (max-width: 768px) {\n .mobile-layout mj-user-management,\n .mobile-layout mj-role-management,\n .mobile-layout mj-application-management,\n .mobile-layout mj-entity-permissions,\n .mobile-layout mj-sql-logging,\n .mobile-layout mj-settings-card,\n .mobile-layout mj-user-profile-settings {\n display: block;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n }\n\n /* Ensure all nested content areas flow naturally */\n .mobile-layout .general-settings,\n .mobile-layout .users-settings,\n .mobile-layout .roles-settings,\n .mobile-layout .applications-settings,\n .mobile-layout .permissions-settings,\n .mobile-layout .advanced-settings {\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n }\n\n /* Ensure mj-grid and card content can expand */\n .mobile-layout .mj-grid,\n .mobile-layout .mj-grid-responsive,\n .mobile-layout .card-content {\n height: auto !important;\n min-height: 0 !important;\n }\n}\n\n@media (min-width: 1440px) {\n .content-area {\n padding: 2.5rem 3rem;\n }\n\n .side-navigation {\n width: 280px;\n }\n}\n\n/* ============================================\n iOS Safari Mobile Scrolling Fix\n ============================================ */\n@media (max-width: 768px) {\n /* Prevent iOS from restricting body scrolling */\n body {\n position: relative;\n overflow-y: visible;\n -webkit-overflow-scrolling: touch;\n }\n\n /* Allow mobile layout and all parents to expand naturally */\n .mobile-layout,\n .mobile-layout > *,\n .mobile-content > *,\n .tab-content > * {\n -webkit-overflow-scrolling: touch;\n }\n\n /* Prevent fixed heights from blocking scroll */\n .mobile-layout * {\n box-sizing: border-box;\n }\n}\n"] }]
|
|
571
|
+
args: [{ standalone: false, selector: 'mj-settings', template: "<div class=\"mj-page-container\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading settings...\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\" role=\"alert\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"retry-button\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Main Content -->\n @if (!isLoading && !error) {\n <div class=\"settings-content\">\n <!-- Desktop Layout -->\n @if (!isMobile) {\n <div class=\"desktop-layout\" style=\"display: flex;\">\n <!-- Side Navigation -->\n <nav class=\"side-navigation\" role=\"navigation\" aria-label=\"Settings navigation\">\n <!-- Search Bar -->\n <div class=\"nav-search\">\n <i class=\"fa-solid fa-search nav-search-icon\" aria-hidden=\"true\"></i>\n <input\n type=\"text\"\n class=\"nav-search-input\"\n placeholder=\"Search settings...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"searchTerm$.value\"\n aria-label=\"Search settings\"\n />\n @if (searchTerm$.value) {\n <button\n class=\"nav-search-clear\"\n (click)=\"clearSearch()\"\n aria-label=\"Clear search\"\n tabindex=\"0\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <ul class=\"nav-list\" role=\"tablist\" aria-orientation=\"vertical\">\n @for (tab of filteredTabs; track tab.id) {\n <li\n class=\"nav-item\"\n [class.active]=\"activeTab === tab.id\"\n [class.disabled]=\"tab.disabled\"\n (click)=\"onTabChange(tab.id)\"\n (keydown.enter)=\"onTabChange(tab.id)\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.id\"\n [attr.aria-controls]=\"'panel-' + tab.id\"\n [attr.aria-disabled]=\"tab.disabled\"\n tabindex=\"0\"\n >\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n <span class=\"nav-label\">{{ tab.label }}</span>\n @if (tab.disabled) {\n <span class=\"coming-soon-badge\">Soon</span>\n }\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </li>\n }\n </ul>\n </nav>\n\n <!-- Content Area -->\n <div class=\"content-area\" role=\"tabpanel\" [attr.id]=\"'panel-' + activeTab\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <mj-general-settings></mj-general-settings>\n }\n\n @case ('notifications') {\n <div class=\"notifications-settings\">\n <h2 class=\"section-title\">Notifications</h2>\n <p class=\"section-description\">Configure how and when you receive notifications</p>\n <mj-notification-preferences></mj-notification-preferences>\n </div>\n }\n\n @case ('applications') {\n <mj-application-settings></mj-application-settings>\n }\n\n @case ('appearance') {\n <mj-appearance-settings></mj-appearance-settings>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Mobile Layout -->\n @if (isMobile) {\n <div class=\"mobile-layout\">\n <!-- Mobile Header -->\n @if (!isMobileNavOpen) {\n <header class=\"mobile-header\">\n <button\n class=\"mobile-header-icon\"\n (click)=\"toggleMobileNav()\"\n aria-label=\"Toggle navigation menu\"\n [attr.aria-expanded]=\"isMobileNavOpen\"\n >\n <i class=\"fa-solid fa-bars\" aria-hidden=\"true\"></i>\n </button>\n <h1 class=\"mobile-header-title\">Settings</h1>\n <div class=\"mobile-header-spacer\"></div>\n </header>\n }\n\n <!-- Backdrop Overlay -->\n @if (isMobileNavOpen) {\n <div\n class=\"mobile-nav-backdrop\"\n (click)=\"closeMobileNav()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n <!-- Mobile Navigation Rail -->\n <nav\n class=\"mobile-nav-rail\"\n [class.open]=\"isMobileNavOpen\"\n role=\"navigation\"\n aria-label=\"Settings navigation\"\n >\n <div class=\"nav-rail-header\">\n <span class=\"nav-rail-title\">Settings</span>\n </div>\n\n <div class=\"nav-rail-items\" role=\"tablist\">\n @for (tab of filteredTabs; track tab.id) {\n <button\n class=\"nav-rail-item\"\n [class.active]=\"activeTab === tab.id\"\n [class.disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"onMobileTabChange(tab.id)\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.id\"\n [attr.aria-label]=\"tab.label\"\n >\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n <span class=\"nav-rail-label\">{{ tab.label }}</span>\n @if (tab.disabled) {\n <span class=\"coming-soon-badge\">Soon</span>\n }\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"rail-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </button>\n }\n\n <button\n class=\"nav-rail-item nav-rail-close-item\"\n (click)=\"closeSettings()\"\n aria-label=\"Close settings\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n <span class=\"nav-rail-label\">Close</span>\n </button>\n </div>\n </nav>\n\n <!-- Mobile Content Area -->\n <div class=\"mobile-content\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <mj-general-settings></mj-general-settings>\n }\n\n @case ('notifications') {\n <div class=\"notifications-settings\">\n <h2 class=\"section-title\">Notifications</h2>\n <p class=\"section-description\">Configure how and when you receive notifications</p>\n <mj-notification-preferences></mj-notification-preferences>\n </div>\n }\n\n @case ('applications') {\n <mj-application-settings></mj-application-settings>\n }\n\n @case ('appearance') {\n <mj-appearance-settings></mj-appearance-settings>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["/* ============================================\n Settings Component\n Using MJ Design Tokens\n ============================================ */\n\n/* ============================================\n Host & Page Container\n ============================================ */\n\n/* Host element must fill its container */\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n@media (max-width: 768px) {\n :host {\n height: auto;\n min-height: 100vh;\n overflow: visible;\n }\n}\n\n/* Page container needs proper height and scrolling */\n.mj-page-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n .mj-page-container {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 100vh;\n }\n}\n\n/* ============================================\n Keyframe Animations\n ============================================ */\n\n@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* ============================================\n Settings Container & Main Layout\n ============================================ */\n\n.settings-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-page);\n overflow-y: auto;\n position: relative;\n}\n\n/* ============================================\n Loading State\n ============================================ */\n.loading-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-text {\n color: var(--mj-text-muted);\n font-size: 1rem;\n}\n\n/* ============================================\n Error State\n ============================================ */\n.error-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content {\n text-align: center;\n max-width: 400px;\n}\n\n.error-content .error-icon {\n font-size: 3rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-content .error-message {\n color: var(--mj-text-primary);\n margin-bottom: 1.5rem;\n font-size: 1rem;\n}\n\n.error-content .retry-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n background-color: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.error-content .retry-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.error-content .retry-button:hover:not(:disabled) {\n background-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.error-content .retry-button i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Main Content Area & Tab Layout\n ============================================ */\n\n.settings-content {\n display: flex;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n\n@media (max-width: 768px) {\n .settings-content {\n overflow-y: visible;\n overflow-x: hidden;\n height: auto;\n min-height: 0;\n flex: none;\n }\n}\n\n.desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.settings-content .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n/* ============================================\n Side Navigation (Desktop Only)\n ============================================ */\n\n.side-navigation {\n width: 280px;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n overflow-y: auto;\n flex-shrink: 0;\n box-shadow: var(--mj-shadow-sm);\n}\n\n/* Navigation Search Bar */\n.nav-search {\n position: relative;\n padding: 1rem;\n border-bottom: 1px solid var(--mj-border-default);\n background-color: var(--mj-bg-surface);\n}\n\n.nav-search-icon {\n position: absolute;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-muted);\n font-size: 1rem;\n pointer-events: none;\n z-index: 1;\n}\n\n.nav-search-input {\n width: 100%;\n padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 9999px;\n font-size: 0.875rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n background-color: var(--mj-bg-surface);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.nav-search-input::placeholder {\n color: var(--mj-text-muted);\n}\n\n.nav-search-clear {\n position: absolute;\n right: 1.25rem;\n top: 50%;\n transform: translateY(-50%);\n padding: 0.25rem;\n background: transparent;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n border-radius: 9999px;\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.nav-search-clear:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-search-clear:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.nav-list {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n margin: 0.25rem 0.75rem;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--mj-text-muted);\n font-size: 1rem;\n border: 2px solid transparent;\n}\n\n.nav-item:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n transform: translateX(4px);\n}\n\n.nav-item:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* Color-coded navigation items */\n.nav-item[aria-controls=\"panel-general\"] {\n --item-color: var(--mj-brand-primary);\n --item-container: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-users\"] {\n --item-color: var(--mj-status-warning);\n --item-container: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-roles\"] {\n --item-color: var(--mj-status-success);\n --item-container: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-applications\"] {\n --item-color: var(--mj-brand-primary);\n --item-container: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-permissions\"] {\n --item-color: var(--mj-status-error);\n --item-container: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.nav-item[aria-controls=\"panel-advanced\"] {\n --item-color: var(--mj-status-warning);\n --item-container: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.nav-item.active {\n background-color: var(--item-container);\n color: var(--item-color);\n font-weight: 600;\n border-color: var(--item-color);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.nav-item:hover:not(.active) {\n border-color: var(--item-color);\n background-color: var(--mj-bg-surface-card);\n}\n\n.nav-item i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n}\n\n.nav-item .nav-label {\n flex: 1;\n}\n\n.nav-item .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.nav-item .nav-badge.badge-primary {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.nav-item .nav-badge.badge-danger {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.nav-item .nav-badge.badge-warning {\n background-color: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.nav-item .nav-badge.badge-success {\n background-color: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n/* Disabled Navigation Items */\n.nav-item.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-item.disabled:hover {\n background-color: transparent;\n transform: none;\n}\n\n/* Coming Soon Badge */\n.coming-soon-badge {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n border: 1px solid var(--mj-border-default);\n}\n\n/* Mobile Navigation Disabled Items */\n.nav-rail-item.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.nav-rail-item.disabled:hover {\n background-color: transparent;\n}\n\n/* ============================================\n Content Area & Tab Panels\n ============================================ */\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n background: var(--mj-bg-surface);\n}\n\n@media (max-width: 768px) {\n .content-area {\n padding: 1rem;\n }\n}\n\n.tab-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: 100%;\n min-height: 0;\n box-sizing: border-box;\n overflow-x: hidden;\n padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n .tab-content {\n height: auto;\n min-height: 0;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 0.5rem;\n }\n}\n\n/* ============================================\n Section Titles\n ============================================ */\n.section-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n padding-bottom: 0.75rem;\n border-bottom: 3px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title::before {\n content: \"\";\n width: 4px;\n height: 2rem;\n background: var(--mj-brand-primary);\n border-radius: 2px;\n}\n\n.section-description {\n color: var(--mj-text-muted);\n margin: 0 0 1.5rem 0;\n font-size: 1rem;\n padding: 1rem 1.25rem;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n/* ============================================\n Settings Grid\n ============================================ */\n.settings-grid,\n.mj-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.mj-grid-responsive {\n /* Single column stacked layout */\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n .settings-grid,\n .mj-grid,\n .mj-grid-responsive {\n gap: 1rem;\n margin-top: 0.5rem;\n }\n}\n\n/* ============================================\n Section Title & Description Spacing\n ============================================ */\n.general-settings .section-title,\n.users-settings .section-title,\n.roles-settings .section-title {\n margin-bottom: 0.25rem;\n}\n\n.users-settings .section-description,\n.roles-settings .section-description {\n margin-bottom: 0.5rem;\n}\n\n/* ============================================\n Card Content\n ============================================ */\n.card-content {\n padding: 1rem;\n color: var(--mj-text-muted);\n font-size: 0.875rem;\n}\n\n.card-content p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n}\n\n/* ============================================\n Beta Warning\n ============================================ */\n.beta-warning {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.75rem 1.25rem;\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n border-radius: 12px;\n font-size: 0.875rem;\n font-weight: 600;\n margin-bottom: 1.5rem;\n max-width: 100%;\n box-sizing: border-box;\n border: 2px solid var(--mj-status-warning);\n box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning i {\n font-size: 1rem;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .beta-warning {\n font-size: 0.8125rem;\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.75rem;\n }\n}\n\n/* ============================================\n Mobile Layout with Collapsible Navigation Rail\n ============================================ */\n\n.mobile-layout {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100%;\n max-width: 100vw;\n overflow: visible;\n box-sizing: border-box;\n}\n\n/* Mobile Header */\n.mobile-header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 0.5rem;\n background-color: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n z-index: 100;\n box-sizing: border-box;\n}\n\n.mobile-header-icon {\n width: 48px;\n height: 48px;\n min-width: 48px;\n border-radius: 9999px;\n background: transparent;\n color: var(--mj-text-primary);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.mobile-header-icon:active {\n transform: scale(0.95);\n}\n\n.mobile-header-icon i {\n font-size: 1.25rem;\n}\n\n.mobile-header-title {\n flex: 1;\n text-align: center;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n padding: 0 0.5rem;\n}\n\n.mobile-header-spacer {\n width: 48px;\n min-width: 48px;\n}\n\n/* Backdrop Overlay */\n.mobile-nav-backdrop {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Collapsible Navigation Rail */\n.mobile-nav-rail {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background-color: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n z-index: 1001;\n transform: translateX(-100%);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: var(--mj-shadow-lg);\n overflow: hidden;\n}\n\n.mobile-nav-rail.open {\n transform: translateX(0);\n}\n\n/* Navigation Rail Header */\n.nav-rail-header {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n min-height: 64px;\n border-bottom: 1px solid var(--mj-border-default);\n background-color: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.nav-rail-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n/* Navigation Items Container */\n.nav-rail-items {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n gap: 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n/* Close Navigation Item */\n.nav-rail-close-item {\n margin-top: auto;\n border-top: 1px solid var(--mj-border-default);\n padding-top: 0.75rem !important;\n margin-top: 0.5rem;\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)) !important;\n color: var(--mj-status-error) !important;\n}\n\n.nav-rail-close-item:hover {\n background-color: var(--mj-status-error) !important;\n color: var(--mj-bg-surface) !important;\n}\n\n.nav-rail-close-item i {\n font-size: 1.5rem;\n}\n\n/* Navigation Item */\n.nav-rail-item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 0.875rem 1rem;\n background: transparent;\n border: none;\n border-radius: 12px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n min-height: 56px;\n}\n\n.nav-rail-item i {\n font-size: 1.5rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label {\n font-size: 1rem;\n font-weight: 500;\n flex: 1;\n}\n\n.nav-rail-item:hover:not(.active) {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.nav-rail-item.active {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.nav-rail-item.active .nav-rail-label {\n font-weight: 600;\n}\n\n.nav-rail-item:active {\n transform: scale(0.98);\n}\n\n.nav-rail-item:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* Badge indicator */\n.rail-badge {\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n border-radius: 9999px;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.rail-badge.badge-primary {\n background-color: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-danger {\n background-color: var(--mj-status-error);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-warning {\n background-color: var(--mj-status-success);\n color: var(--mj-bg-surface);\n}\n\n.rail-badge.badge-success {\n background-color: var(--mj-status-warning);\n color: var(--mj-text-primary);\n}\n\n/* Mobile Content Area */\n.mobile-content {\n width: 100%;\n max-width: 100vw;\n overflow-y: visible;\n overflow-x: hidden;\n padding: 72px 0.75rem 2rem 0.75rem;\n min-width: 0;\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n/* Responsive adjustments */\n@media (max-width: 374px) {\n .mobile-nav-rail {\n width: 260px;\n }\n\n .mobile-content {\n padding: 64px 0.5rem 1.5rem 0.5rem;\n }\n\n .mobile-header {\n height: 52px;\n padding: 0 0.25rem;\n }\n\n .mobile-header-icon {\n width: 44px;\n height: 44px;\n min-width: 44px;\n }\n\n .mobile-header-spacer {\n width: 44px;\n min-width: 44px;\n }\n\n .mobile-header-title {\n font-size: 1.125rem;\n }\n}\n\n/* ============================================\n Advanced Settings Sub-Tabs\n ============================================ */\n\n.advanced-tabs {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid var(--mj-border-default);\n margin-bottom: 1rem;\n margin-top: 1rem;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: var(--mj-text-muted);\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n min-height: 44px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n/* Mobile-specific tab adjustments - Segmented Button Style */\n@media (max-width: 768px) {\n .advanced-tabs {\n gap: 0;\n margin-bottom: 1rem;\n margin-top: 1rem;\n border-bottom: none;\n border: 1px solid var(--mj-border-strong);\n border-radius: 9999px;\n padding: 0;\n background-color: var(--mj-bg-surface-sunken);\n overflow-x: hidden;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n .advanced-tabs .tab-btn {\n flex: 1;\n padding: 0.625rem 0.5rem;\n font-size: 0.75rem;\n border-bottom: none;\n border-radius: 0;\n border-right: 1px solid var(--mj-border-strong);\n min-width: 0;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .advanced-tabs .tab-btn:last-child {\n border-right: none;\n }\n\n .advanced-tabs .tab-btn:first-child {\n border-radius: 9999px 0 0 9999px;\n }\n\n .advanced-tabs .tab-btn:last-child {\n border-radius: 0 9999px 9999px 0;\n }\n\n .advanced-tabs .tab-btn.active {\n background-color: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n border-bottom: none;\n }\n\n .advanced-tabs .tab-btn i {\n font-size: 0.875rem;\n }\n}\n\n.advanced-tabs .tab-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.advanced-tabs .tab-btn:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: -2px;\n}\n\n.advanced-tabs .tab-btn.active {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.advanced-tabs .tab-btn.active i {\n color: var(--mj-brand-primary);\n}\n\n.advanced-tabs .tab-btn i {\n font-size: 1.125rem;\n}\n\n/* ============================================\n Advanced Tab Content Panels\n ============================================ */\n\n.advanced-tab-content {\n flex: 1;\n overflow-y: visible;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n padding: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Ensure scrolling works on mobile */\n@media (max-width: 768px) {\n .advanced-tab-content {\n height: auto;\n min-height: 200px;\n overflow-y: visible;\n }\n}\n\n.performance-settings,\n.developer-settings {\n padding: 2rem;\n}\n\n.performance-settings h3,\n.developer-settings h3 {\n margin: 0 0 1rem 0;\n font-size: 1.25rem;\n color: var(--mj-text-primary);\n}\n\n.performance-settings p,\n.developer-settings p {\n color: var(--mj-text-muted);\n font-size: 1rem;\n}\n\n/* ============================================\n Settings Panel Containers with Fade-In Animation\n ============================================ */\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n max-width: 100%;\n height: auto;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n overflow-y: visible;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n\n/* Mobile-specific adjustments */\n@media (max-width: 768px) {\n .general-settings,\n .users-settings,\n .roles-settings,\n .applications-settings,\n .permissions-settings,\n .advanced-settings {\n gap: 0.75rem;\n height: auto;\n min-height: auto;\n }\n\n .section-title {\n margin-bottom: 0.5rem;\n font-size: 1.375rem;\n }\n\n .section-description {\n margin-bottom: 0.75rem;\n }\n}\n\n/* Only apply flex: 1 to actual content components, not titles/descriptions */\n.general-settings > mj-settings-card,\n.general-settings > .mj-grid,\n.users-settings > mj-user-management,\n.roles-settings > mj-role-management,\n.applications-settings > mj-application-management,\n.permissions-settings > mj-entity-permissions,\n.advanced-settings > .advanced-tabs,\n.advanced-settings > .advanced-tab-content {\n flex-shrink: 0;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Allow content to flow naturally on mobile */\n@media (max-width: 768px) {\n .users-settings > mj-user-management,\n .roles-settings > mj-role-management,\n .applications-settings > mj-application-management,\n .permissions-settings > mj-entity-permissions,\n .advanced-settings > .advanced-tab-content {\n flex: none;\n height: auto !important;\n min-height: 0;\n max-height: none !important;\n overflow-y: visible !important;\n overflow-x: hidden;\n }\n}\n\n/* Titles and descriptions should not flex or grow */\n.general-settings > .section-title,\n.users-settings > .section-title,\n.roles-settings > .section-title,\n.users-settings > .section-description,\n.roles-settings > .section-description {\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n/* ============================================\n Accessibility: Reduced Motion Support\n ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n .general-settings,\n .users-settings,\n .roles-settings,\n .applications-settings,\n .permissions-settings,\n .advanced-settings {\n animation: none;\n }\n\n .nav-tab i,\n .nav-item,\n .tab-btn,\n .search-input,\n .retry-button,\n .search-result-item {\n transition: none;\n }\n}\n\n/* ============================================\n Responsive Breakpoints\n ============================================ */\n@media (max-width: 640px) {\n .side-navigation {\n width: 200px;\n }\n\n .nav-item {\n padding: 0.75rem 1rem;\n }\n}\n\n@media (max-width: 1024px) {\n .content-area {\n padding: 1.5rem;\n }\n}\n\n/* Mobile scroll fix - ensure all child components flow naturally */\n@media (max-width: 768px) {\n .mobile-layout mj-user-management,\n .mobile-layout mj-role-management,\n .mobile-layout mj-application-management,\n .mobile-layout mj-entity-permissions,\n .mobile-layout mj-sql-logging,\n .mobile-layout mj-settings-card,\n .mobile-layout mj-user-profile-settings {\n display: block;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n }\n\n /* Ensure all nested content areas flow naturally */\n .mobile-layout .general-settings,\n .mobile-layout .users-settings,\n .mobile-layout .roles-settings,\n .mobile-layout .applications-settings,\n .mobile-layout .permissions-settings,\n .mobile-layout .advanced-settings {\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n }\n\n /* Ensure mj-grid and card content can expand */\n .mobile-layout .mj-grid,\n .mobile-layout .mj-grid-responsive,\n .mobile-layout .card-content {\n height: auto !important;\n min-height: 0 !important;\n }\n}\n\n@media (min-width: 1440px) {\n .content-area {\n padding: 2.5rem 3rem;\n }\n\n .side-navigation {\n width: 280px;\n }\n}\n\n/* ============================================\n iOS Safari Mobile Scrolling Fix\n ============================================ */\n@media (max-width: 768px) {\n /* Prevent iOS from restricting body scrolling */\n body {\n position: relative;\n overflow-y: visible;\n -webkit-overflow-scrolling: touch;\n }\n\n /* Allow mobile layout and all parents to expand naturally */\n .mobile-layout,\n .mobile-layout > *,\n .mobile-content > *,\n .tab-content > * {\n -webkit-overflow-scrolling: touch;\n }\n\n /* Prevent fixed heights from blocking scroll */\n .mobile-layout * {\n box-sizing: border-box;\n }\n}\n"] }]
|
|
572
572
|
}], () => [{ type: i1.Location }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { stateChange: [{
|
|
573
573
|
type: Output
|
|
574
574
|
}] }); })();
|