/* ========================================
   DESIGN TOKENS - Single Source of Truth
   All semantic colors for the ServiceSeeker brand.
   Dark mode values override automatically via
   Bootstrap 5.3's data-bs-theme attribute.
   ======================================== */

:root {
    /* === Brand Palette — Slate Blue === */
    --ss-primary: #4768A8;
    --ss-primary-hover: #3A5690;
    --ss-primary-light: rgba(71, 104, 168, 0.10);
    --ss-accent: #5B8DB8;
    --ss-accent-hover: #4A7CA6;
    --ss-brand-gradient: linear-gradient(135deg, #3A5690, #5B8DB8);

    /* === CTA Accent — Amber (for primary action buttons) === */
    --ss-cta: #D97706;
    --ss-cta-hover: #B45309;
    --ss-cta-light: rgba(217, 119, 6, 0.10);

    /* === Semantic Colors === */
    --ss-success: #198754;
    --ss-success-text: #166534;
    --ss-warning: #ffc107;
    --ss-warning-text: #92400e;
    --ss-danger: #dc3545;
    --ss-danger-text: #b91c1c;
    --ss-info: #0dcaf0;

    /* === Link Colors (derived from primary) === */
    --ss-link: #3A5690;
    --ss-link-hover: #2D4470;

    /* === Surface Colors === */
    --ss-bg-body: #f9fafb;
    --ss-bg-surface: #ffffff;
    --ss-bg-surface-secondary: #f3f4f6;
    --ss-bg-surface-tertiary: #e5e7eb;
    --ss-bg-overlay: rgba(255, 255, 255, 0.95);

    /* === Text Colors === */
    --ss-text-primary: #111827;
    --ss-text-secondary: #4b5563;
    --ss-text-muted: #6b7280;
    --ss-text-on-primary: #ffffff;

    /* === Border Colors === */
    --ss-border: #e5e7eb;
    --ss-border-light: rgba(0, 0, 0, 0.06);
    --ss-border-input: #d1d5db;

    /* === Focus Indicators (WCAG 2.1 AA) === */
    --ss-focus-ring: #4768A8;
    --ss-focus-ring-alpha: rgba(71, 104, 168, 0.25);

    /* === Form & Validation === */
    --ss-input-bg: #ffffff;
    --ss-input-disabled-bg: #e9ecef;
    --ss-placeholder: #6c6c6c;
    --ss-validation-error-bg: #f8d7da;
    --ss-validation-error-border: #f5c6cb;
    --ss-validation-error-text: #721c24;

    /* === Skeleton Loading === */
    --ss-skeleton-base: #f0f0f0;
    --ss-skeleton-shine: #e0e0e0;

    /* === Bootstrap Variable Overrides === */
    --bs-primary: #4768A8;
    --bs-primary-rgb: 71, 104, 168;
    --bs-link-color: #3A5690;
    --bs-link-hover-color: #2D4470;
    --bs-link-color-rgb: 58, 86, 144;
}

[data-bs-theme="dark"] {
    /* === Brand Palette — Slate Blue (Dark) === */
    --ss-primary: #7BA1CC;
    --ss-primary-hover: #9BB8DA;

    /* === Bootstrap Variable Overrides (Dark) === */
    --bs-primary: #7BA1CC;
    --bs-primary-rgb: 123, 161, 204;
    --bs-link-color: #9BB8DA;
    --bs-link-hover-color: #B5CCEB;
    --bs-link-color-rgb: 155, 184, 218;
    --ss-primary-light: rgba(123, 161, 204, 0.12);
    --ss-accent: #8FB4D6;
    --ss-accent-hover: #A5C4E0;

    /* === CTA Accent — Amber (Dark) === */
    --ss-cta: #F59E0B;
    --ss-cta-hover: #FBBF24;
    --ss-cta-light: rgba(245, 158, 11, 0.15);

    /* === Semantic Colors === */
    --ss-success: #75b798;
    --ss-success-text: #86efac;
    --ss-warning: #fcd34d;
    --ss-warning-text: #fcd34d;
    --ss-danger: #fca5a5;
    --ss-danger-text: #fca5a5;
    --ss-info: #67d6ed;

    /* === Link Colors === */
    --ss-link: #9BB8DA;
    --ss-link-hover: #B5CCEB;

    /* === Surface Colors === */
    --ss-bg-body: #0f1720;
    --ss-bg-surface: #1a2535;
    --ss-bg-surface-secondary: #263348;
    --ss-bg-surface-tertiary: #35445c;
    --ss-bg-overlay: rgba(15, 23, 32, 0.95);

    /* === Text Colors === */
    --ss-text-primary: #f1f5f9;
    --ss-text-secondary: #cbd5e1;
    --ss-text-muted: #94a3b8;
    --ss-text-on-primary: #0f1720;

    /* === Border Colors === */
    --ss-border: rgba(255, 255, 255, 0.1);
    --ss-border-light: rgba(255, 255, 255, 0.08);
    --ss-border-input: #495057;

    /* === Focus Indicators === */
    --ss-focus-ring: #7BA1CC;
    --ss-focus-ring-alpha: rgba(123, 161, 204, 0.25);

    /* === Form & Validation === */
    --ss-input-bg: #1a2535;
    --ss-input-disabled-bg: #263348;
    --ss-placeholder: #94a3b8;
    --ss-validation-error-bg: rgba(185, 28, 28, 0.2);
    --ss-validation-error-border: rgba(185, 28, 28, 0.4);
    --ss-validation-error-text: #fca5a5;

    /* === Skeleton Loading === */
    --ss-skeleton-base: #1a2535;
    --ss-skeleton-shine: #263348;
}

/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Navigation loading progress bar */
#nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3A5690, #5B8DB8);
    z-index: 9999;
    transition: none;
    opacity: 0;
    pointer-events: none;
}

#nav-progress-bar.loading {
    opacity: 1;
    animation: nav-progress 12s cubic-bezier(0.2, 0.5, 0.1, 1) forwards;
}

#nav-progress-bar.done {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    animation: none;
}

@keyframes nav-progress {
    0% {
        width: 0;
    }

    10% {
        width: 25%;
    }

    30% {
        width: 50%;
    }

    50% {
        width: 70%;
    }

    70% {
        width: 85%;
    }

    100% {
        width: 95%;
    }
}

a,
.btn-link {
    color: var(--ss-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--ss-primary);
    border-color: var(--ss-primary-hover);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
}

.btn-outline-primary {
    color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

/* Suppress focus outline on the main content landmark.
   This element has tabindex="-1" for skip-link and enhanced-navigation
   focus management (accessibility.js) and only receives programmatic
   focus — never user-initiated keyboard focus. without this, browsers
   briefly flash a default outline during SSR → interactive hydration. */
#main-content:focus,
#main-content:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Headings only receive programmatic focus (Blazor enhanced navigation,
   skip-link, accessibility.js) — never user-initiated keyboard-tab focus.
   Suppress visible outline to prevent the "blue border flash" on page load
   while keeping them focusable for screen readers. */
h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible,
h3:focus,
h3:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ========================================
   VALIDATION SUMMARY - User-Friendly Wrapper
   Shows helpful header text when validation errors exist
   ======================================== */
.validation-errors-container:has(.validation-errors:not(:empty)),
.validation-errors-container:has(ul.validation-errors li) {
    background-color: var(--ss-validation-error-bg);
    border: 1px solid var(--ss-validation-error-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.validation-errors-container:has(.validation-errors:not(:empty))::before,
.validation-errors-container:has(ul.validation-errors li)::before {
    content: "Please check the following:";
    display: block;
    font-weight: 600;
    color: var(--ss-validation-error-text);
    margin-bottom: 0.5rem;
}

.validation-errors-container .validation-errors {
    margin-bottom: 0;
    color: var(--ss-validation-error-text);
}

.validation-errors-container .validation-errors li {
    color: var(--ss-validation-error-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ========================================
   TOP BAR ICON BUTTONS (Global)
   ======================================== */
.top-icon-btn,
button.top-icon-btn,
a.top-icon-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    /* Reset button defaults - preserve focus-visible styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.top-icon-btn:hover,
button.top-icon-btn:hover,
a.top-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05);
    color: white !important;
    text-decoration: none;
}

/* Focus-visible styles for top icon buttons are handled in the
   WCAG 2.1 AA Accessibility section (.top-icon-btn:focus-visible) */

/* Logout button - slightly different color */
.top-icon-btn.logout-btn {
    background: rgba(255, 100, 100, 0.2) !important;
    border: 1px solid rgba(255, 100, 100, 0.4) !important;
}

.top-icon-btn.logout-btn:hover {
    background: rgba(255, 100, 100, 0.35) !important;
    border-color: rgba(255, 100, 100, 0.6) !important;
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    border: 2px solid #5B8DB8;
}

@media (max-width: 640px) {
    .top-icon-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 1.1rem !important;
        /* WCAG 2.1 AA: Ensure minimum 44x44px touch target on mobile */
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   NOTIFICATION SYSTEM STYLES
   ======================================== */

/* Notification List (inside glass-card) */
.notification-list {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: start;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    border-bottom: 1px solid var(--ss-border-light);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.notification-item.unread {
    background: rgba(71, 104, 168, 0.06);
    border-left: 4px solid #4768A8;
}

/* Priority indicator (slim bar on left edge) */
.notification-priority {
    width: 3px;
    min-height: 100%;
    border-radius: 2px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.notification-priority i {
    display: none;
}

.notification-priority.priority-urgent {
    background: #dc3545;
}

.notification-priority.priority-urgent i {
    color: #dc3545;
}

.notification-priority.priority-high {
    background: #fd7e14;
}

.notification-priority.priority-high i {
    color: #fd7e14;
}

.notification-priority.priority-normal {
    background: #4768A8;
}

.notification-priority.priority-normal i {
    color: #4768A8;
}

.notification-priority.priority-low {
    background: #6c757d;
}

.notification-priority.priority-low i {
    color: #6c757d;
}

.notification-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: var(--ss-text-secondary);
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-subject {
    font-weight: 600;
    color: var(--ss-text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #4768A8;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-message {
    color: var(--ss-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.notification-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

.notification-time,
.notification-category {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notification-actions-btn {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: 1rem;
}

.notification-actions-btn .btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Notification filter pills (inside glass-card) */
.glass-card .nav-pills .nav-link {
    border-radius: 2rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.glass-card .nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

.glass-card .nav-pills .nav-link .badge {
    font-size: 0.7rem;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-list {
        max-height: calc(100vh - 400px);
    }

    .notification-item {
        flex-direction: column;
        gap: 0.75rem;
    }

    .notification-actions-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* ========================================
   NOTIFICATION PREFERENCES STYLES
   ======================================== */

.notification-preferences {
    max-width: 1000px;
    margin: 0 auto;
}

.preferences-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ss-border);
}

.preferences-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--ss-text-primary);
}

.preferences-info {
    margin-bottom: 2rem;
}

.preference-category {
    margin-bottom: 2.5rem;
}

.category-title {
    font-size: 1.3rem;
    color: var(--ss-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ss-border);
}

.preference-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preference-item {
    background: var(--ss-bg-surface);
    border: 1px solid var(--ss-border-input);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.preference-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.preference-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.preference-info {
    flex: 1;
}

.preference-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--ss-text-primary);
    cursor: pointer;
    font-size: 1rem;
}

.preference-name input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.preference-description {
    display: block;
    color: var(--ss-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-left: 2rem;
}

.preference-channels {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ss-border);
    flex-wrap: wrap;
}

.channels-label {
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
    font-weight: 500;
}

.channel-options {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.channel-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
}

.channel-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.channel-option:hover {
    color: var(--ss-primary);
}

.saving-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--ss-bg-surface);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
}

.save-success {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #d4edda;
    color: var(--ss-success-text);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Preferences */
@media (max-width: 768px) {
    .preferences-header {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }

    .preference-channels {
        flex-direction: column;
        align-items: start;
    }

    .channel-options {
        width: 100%;
    }
}

/* ========================================
   SKELETON LOADING ANIMATION (Global)
   ======================================== */

.skeleton {
    background: linear-gradient(90deg, var(--ss-skeleton-base) 25%, var(--ss-skeleton-shine) 50%, var(--ss-skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   GLASSMORPHISM PAGE STYLES (Shared)
   Premium gradient backgrounds with glass effects
   ======================================== */

/* Page wrapper with slate blue hero band fading to body color */
.glass-page {
    background: linear-gradient(180deg,
            #1a2540 0%,
            #2a3f66 10%,
            #3A5690 20%,
            #6886B0 35%,
            #c4d3e4 50%,
            #f9fafb 65%);
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Extend full-bleed pages to fill content area edge-to-edge, eliminating
   background color gaps between sidebar/navbar and the slate blue gradient */
.content>.glass-page,
.content>.home-page,
.content>.help-center {
    margin-top: -1.1rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

@media (max-width: 576px) {

    .content>.glass-page,
    .content>.home-page,
    .content>.help-center {
        margin-top: -0.75rem;
    }
}

@media (min-width: 641px) {

    .content>.glass-page,
    .content>.home-page,
    .content>.help-center {
        margin-left: -2rem;
    }
}

/* Add internal padding to compensate for negative margins */
.glass-page>.container,
.home-page>.container,
.help-center>.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 641px) {

    .glass-page>.container,
    .home-page>.container,
    .help-center>.container {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }
}

/* Glass page header section */
.glass-page-header {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Subtle bottom separator — only visible once the glass-page gradient has painted.
   Uses a pseudo-element with a delayed fade-in to avoid the "border flash" during
   Blazor's SSR-to-interactive handoff where the gradient hasn't loaded yet. */
.glass-page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    animation: glassHeaderBorderFadeIn 0.1s ease-out 0.3s both;
}

@keyframes glassHeaderBorderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.glass-page-header h1,
.glass-page-header h2,
.glass-page-header h3 {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.glass-page-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.glass-page-header .breadcrumb-item,
.glass-page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
}

.glass-page-header .breadcrumb-item.active {
    color: white;
}

.glass-page-header .badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Glass card - Main content cards */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 50px -15px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Glass card - compact variant */
.glass-card-sm {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.glass-card-sm:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.25);
}

/* Card body and footer padding within glass cards */
.glass-card-sm .card-body {
    padding: 1.25rem;
    flex: 1;
}

.glass-card-sm .card-footer {
    padding: 1rem 1.25rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-card .card-body {
    padding: 1.5rem;
}

.glass-card .card-footer {
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Glass section - translucent background sections */
.glass-section {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
}

.glass-section h1,
.glass-section h2,
.glass-section h3,
.glass-section h4,
.glass-section h5,
.glass-section h6 {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.glass-section p,
.glass-section span,
.glass-section label {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass-section .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Glass content area - for main content on glass pages */
.glass-content {
    color: var(--ss-text-primary);
}

/* Glass page title styling */
.glass-page-title {
    color: white;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass-page-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

/* Glass stat cards - for dashboard statistics */
.glass-stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.glass-stat-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-stat-card h6,
.glass-stat-card .card-subtitle {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.glass-stat-card h2,
.glass-stat-card .stat-value {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glass button styling */
.glass-page .btn-primary {
    background: linear-gradient(135deg, #3A5690 0%, #4768A8 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(58, 86, 144, 0.4);
}

.glass-page .btn-primary:hover {
    background: linear-gradient(135deg, #4768A8 0%, #5B8DB8 100%);
    box-shadow: 0 6px 20px rgba(58, 86, 144, 0.5);
    transform: translateY(-1px);
}

.glass-page .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.glass-page .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

/* Buttons inside glass-card/glass-card-sm need standard visible styling (not white-on-white) */
.glass-card .btn-outline-primary,
.glass-card-sm .btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.glass-card .btn-outline-primary:hover,
.glass-card-sm .btn-outline-primary:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: white;
}

/* Buttons inside regular cards on glass pages need standard visible styling (not white-on-white) */
.glass-page .card .btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.glass-page .card .btn-outline-primary:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: white;
}

/* Glass page alerts */
.glass-page .alert {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
}

/* Empty state on glass pages */
.glass-page .empty-state-container,
.glass-page .empty-state {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}

/* Dark mode adjustments for glass pages */
[data-bs-theme="dark"] .glass-page {
    background: linear-gradient(180deg,
            #0a1018 0%,
            #0f1720 10%,
            #1a2540 20%,
            #243352 35%,
            #172030 50%,
            #0f1720 65%);
}

[data-bs-theme="dark"] .glass-card,
[data-bs-theme="dark"] .glass-card-sm {
    background: rgba(26, 37, 53, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .empty-state-container,
[data-bs-theme="dark"] .glass-page .empty-state {
    background: rgba(26, 37, 53, 0.95);
}

[data-bs-theme="dark"] .glass-card h5,
[data-bs-theme="dark"] .glass-card h6,
[data-bs-theme="dark"] .glass-card-sm h5,
[data-bs-theme="dark"] .glass-card-sm h6 {
    color: var(--ss-text-primary);
}

/* Dark mode for glass-card form elements and text */
[data-bs-theme="dark"] .glass-card .form-label,
[data-bs-theme="dark"] .glass-card-sm .form-label {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .form-text,
[data-bs-theme="dark"] .glass-card-sm .form-text {
    color: var(--ss-text-muted);
}

[data-bs-theme="dark"] .glass-card h4,
[data-bs-theme="dark"] .glass-card small,
[data-bs-theme="dark"] .glass-card-sm h4,
[data-bs-theme="dark"] .glass-card-sm small {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .text-muted,
[data-bs-theme="dark"] .glass-card-sm .text-muted {
    color: var(--ss-text-muted) !important;
}

[data-bs-theme="dark"] .glass-card .card-footer,
[data-bs-theme="dark"] .glass-card-sm .card-footer {
    border-top-color: var(--ss-border);
}

[data-bs-theme="dark"] .glass-card-sm .card-text,
[data-bs-theme="dark"] .glass-card-sm p {
    color: var(--ss-text-secondary);
}

/* Standard Bootstrap card styling within glass pages */
.glass-page .card .card-body {
    padding: 1.25rem;
}

.glass-page .card .card-footer {
    padding: 1rem 1.25rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .glass-page .card .card-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-card .list-group-item {
    background-color: var(--ss-bg-surface);
    border-color: var(--ss-border);
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .list-group-item:hover {
    background-color: var(--ss-bg-surface-secondary);
}

[data-bs-theme="dark"] .glass-card .card-body {
    color: var(--ss-text-primary);
}

/* Dark mode buttons inside glass-card - use lighter colors for visibility */
[data-bs-theme="dark"] .glass-card .btn-outline-primary {
    border-color: var(--ss-accent);
    color: var(--ss-accent);
}

[data-bs-theme="dark"] .glass-card .btn-outline-primary:hover {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-text-on-primary);
}

/* Dark mode buttons inside regular cards on glass pages */
[data-bs-theme="dark"] .glass-page .card .btn-outline-primary {
    border-color: var(--ss-accent);
    color: var(--ss-accent);
}

[data-bs-theme="dark"] .glass-page .card .btn-outline-primary:hover {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-text-on-primary);
}

/* Dark mode for standard Bootstrap cards (inside glass-page) */
[data-bs-theme="dark"] .glass-page .card,
[data-bs-theme="dark"] .glass-section .card {
    background-color: var(--ss-bg-surface);
    border-color: var(--ss-border);
}

[data-bs-theme="dark"] .glass-page .card h5,
[data-bs-theme="dark"] .glass-page .card h6,
[data-bs-theme="dark"] .glass-page .card .card-title,
[data-bs-theme="dark"] .glass-section .card h5,
[data-bs-theme="dark"] .glass-section .card h6,
[data-bs-theme="dark"] .glass-section .card .card-title {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-page .card .text-muted,
[data-bs-theme="dark"] .glass-section .card .text-muted,
[data-bs-theme="dark"] .glass-page .card small,
[data-bs-theme="dark"] .glass-section .card small {
    color: var(--ss-text-muted) !important;
}

[data-bs-theme="dark"] .glass-page .card .card-text,
[data-bs-theme="dark"] .glass-section .card .card-text {
    color: var(--ss-text-secondary);
}

[data-bs-theme="dark"] .glass-stat-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .glass-stat-card h6,
[data-bs-theme="dark"] .glass-stat-card .card-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .glass-stat-card h2,
[data-bs-theme="dark"] .glass-stat-card .stat-value {
    color: #ffffff;
}

/* Stat icon styling for glass cards */
.stat-icon-glass {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-stat-card:hover .stat-icon-glass {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Glass page nav tabs - transparent glass styling */
.glass-page .nav-tabs {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.glass-page .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.glass-page .nav-tabs .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
}

.glass-page .nav-tabs .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom: none;
    font-weight: 600;
}

[data-bs-theme="dark"] .glass-page .nav-tabs {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========================================
   DARK MODE FORM STYLES
   ======================================== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control-plaintext {
    background-color: var(--ss-input-bg);
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ss-placeholder);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ss-input-bg);
    color: var(--ss-text-primary);
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem var(--ss-focus-ring-alpha);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--ss-input-disabled-bg);
    color: var(--ss-text-muted);
    border-color: #5a6268;
    opacity: 1;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #212529;
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

/* Fix for profile section headers in dark mode if needed, though they use gradients */
[data-bs-theme="dark"] .section-body,
[data-bs-theme="dark"] .profile-section-footer {
    background-color: var(--ss-bg-surface);
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

[data-bs-theme="dark"] .profile-section {
    border-color: var(--ss-border-input);
}

/* ========================================
   WCAG 2.1 AA ACCESSIBILITY STYLES
   Skip Links, Focus Indicators, Color Contrast
   ======================================== */

/* Skip Link - Hidden until focused for keyboard navigation */
.skip-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--ss-primary);
    color: #ffffff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

.skip-link:hover {
    background: #1557a0;
    color: #ffffff;
}

/* Visually Hidden - For screen reader only content */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visually Hidden but focusable */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   ENHANCED FOCUS INDICATORS - WCAG 2.1 AA
   Minimum 3:1 contrast ratio for focus indicators
   ======================================== */

/* Global focus outline for all interactive elements */
*:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default focus outline for elements with custom focus styles */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Links - Enhanced focus state */
a:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    text-decoration: underline;
    background-color: rgba(0, 102, 204, 0.1);
}

/* Buttons - Enhanced focus state */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Form inputs - Enhanced focus state */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 0;
    border-color: var(--ss-focus-ring);
    box-shadow: 0 0 0 3px var(--ss-focus-ring-alpha);
}

/* Checkbox and Radio - Enhanced focus state */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Cards and clickable containers */
.card:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

/* Navigation links */
.nav-link:focus-visible,
.navbar-nav .nav-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Dark background focus indicators */
.sidebar .nav-link:focus-visible,
.top-row a:focus-visible,
.top-row button:focus-visible,
.top-icon-btn:focus-visible {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.3) !important;
}

/* Modal focus trap indicator */
.modal:focus-visible,
[role="dialog"]:focus-visible {
    outline: none;
}

.modal .btn-close:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Dropdown items */
.dropdown-item:focus-visible {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
    background-color: var(--ss-bg-surface-secondary);
}

/* ========================================
   COLOR CONTRAST IMPROVEMENTS - WCAG 2.1 AA
   Minimum 4.5:1 for normal text, 3:1 for large text
   ======================================== */

/* Ensure sufficient contrast for muted text */
.text-muted {
    color: var(--ss-text-muted) !important;
}

/* High contrast placeholder text */
::placeholder {
    color: var(--ss-placeholder);
    opacity: 1;
}

/* Improved link colors for contrast */
a {
    color: var(--ss-link);
}

a:hover {
    color: var(--ss-link-hover);
}

/* Form validation messages - high contrast */
.validation-message,
.invalid-feedback,
.text-danger {
    color: var(--ss-danger-text) !important;
}

/* Success text - improved contrast */
.text-success {
    color: var(--ss-success-text) !important;
}

/* Warning text - improved contrast */
.text-warning {
    color: var(--ss-warning-text) !important;
}

/* Badge accessibility - ensure contrast */
.badge {
    font-weight: 600;
}

.badge.bg-secondary {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

.badge.bg-light {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

/* Disabled state - clear visual indication */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   KEYBOARD NAVIGATION IMPROVEMENTS
   ======================================== */

/* Focus within containers */
.card:focus-within,
.list-group-item:focus-within {
    box-shadow: 0 0 0 2px var(--ss-focus-ring);
}

/* Keyboard-accessible tooltips */
/* Exclude collapse-toggle which uses native title tooltip */
[data-tooltip]:focus::after,
[title]:focus::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Tooltip arrow pointing down */
[data-tooltip]:focus::before,
[title]:focus::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    z-index: 1100;
    pointer-events: none;
}

/* Elements with title need relative positioning for tooltip */
[title]:focus,
[data-tooltip]:focus {
    position: relative;
}

.collapse-toggle:focus::after,
.collapse-toggle:focus::before {
    content: none;
}

/* Tab panel focus management */
[role="tabpanel"]:focus {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
}

/* Accordion focus management */
.accordion-button:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: -3px;
    box-shadow: none;
    z-index: 3;
}

/* ========================================
   MOTION PREFERENCES - Reduce Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skip-link {
        transition: none;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px;
    }

    a {
        text-decoration: underline;
    }

    button,
    .btn {
        border: 2px solid currentColor !important;
    }

    .card {
        border: 2px solid currentColor !important;
    }
}

/* ========================================
   ARIA LIVE REGIONS STYLING
   ======================================== */

/* Status messages container - off-screen but accessible */
[aria-live="polite"],
[aria-live="assertive"],
[role="status"],
[role="alert"] {
    /* Ensure content is accessible to screen readers */
}

/* Alert styling for visible alerts */
.alert[role="alert"] {
    border-left: 4px solid currentColor;
}

.alert-danger[role="alert"] {
    border-left-color: #dc3545;
}

.alert-success[role="alert"] {
    border-left-color: #198754;
}

.alert-warning[role="alert"] {
    border-left-color: #ffc107;
}

.alert-info[role="alert"] {
    border-left-color: #0dcaf0;
}

/* ========================================
   FORM ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Required field indicator */
.required-indicator,
label .text-danger {
    color: var(--ss-danger-text);
    font-weight: 600;
}

/* Error state - clear visual indication */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ss-danger-text);
    border-width: 2px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b91c1c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b91c1c' stroke='none'/%3e%3c/svg%3e");
}

.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--ss-danger-text);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}

/* Success state - clear visual indication */
.is-valid,
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ss-success-text);
    border-width: 2px;
}

/* Help text accessibility */
.form-text {
    color: var(--ss-text-muted);
    font-size: 0.875rem;
}

/* ========================================
   TABLE ACCESSIBILITY
   ======================================== */

/* Table header contrast */
.table thead th {
    background-color: var(--ss-bg-surface-tertiary);
    color: var(--ss-text-primary);
    font-weight: 600;
}

/* Table row focus */
.table tbody tr:focus-within {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
}

/* Sortable column indicator */
.table th[aria-sort] {
    cursor: pointer;
}

.table th[aria-sort="ascending"]::after {
    content: " ▲";
    font-size: 0.75em;
}

.table th[aria-sort="descending"]::after {
    content: " ▼";
    font-size: 0.75em;
}

/* ========================================
   PROGRESS STEPS COMPONENT
   Multi-step workflow progress indicator
   ======================================== */

.progress-steps-wrapper {
    margin-bottom: 1.5rem;
}

/* Mobile summary bar */
.progress-steps-summary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.98));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.progress-steps-summary .summary-text {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.progress-steps-summary .summary-progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-steps-summary .summary-progress .progress-bar {
    background: linear-gradient(90deg, #4768A8, #3A5690);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Full step list (tablet and up) */
.progress-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.98));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Step indicator circle */
.step-indicator {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 3px solid var(--ss-border-input);
    background-color: var(--ss-bg-surface);
    color: var(--ss-text-secondary);
    position: relative;
    z-index: 2;
}

.step-indicator .step-number {
    line-height: 1;
}

.step-indicator i {
    font-size: 1.1rem;
}

/* Step content (label and description) */
.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.75rem;
    text-align: center;
    max-width: 120px;
}

.step-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ss-text-primary);
    line-height: 1.3;
}

.step-description {
    font-size: 0.75rem;
    color: var(--ss-text-secondary);
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Connector line between steps */
.step-connector {
    position: absolute;
    top: 22px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 3px;
    z-index: 1;
}

.connector-line {
    width: 100%;
    height: 100%;
    background-color: var(--ss-border-input);
    transition: background-color 0.3s ease;
}

.connector-line.completed {
    background-color: #198754;
}

/* Step states */
.progress-step.completed .step-indicator {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.progress-step.completed .step-label {
    color: #198754;
}

.progress-step.active .step-indicator {
    background-color: #4768A8;
    border-color: #4768A8;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(71, 104, 168, 0.25);
}

.progress-step.active .step-label {
    color: #4768A8;
    font-weight: 700;
}

.progress-step.pending .step-indicator {
    background-color: var(--ss-bg-surface-secondary);
    border-color: var(--ss-border-input);
    color: var(--ss-text-muted);
}

.progress-step.pending .step-label {
    color: var(--ss-text-muted);
}

/* Clickable completed steps */
.progress-step.clickable {
    cursor: pointer;
}

.progress-step.clickable:hover .step-indicator {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.25);
}

.progress-step.clickable:focus {
    outline: none;
}

.progress-step.clickable:focus .step-indicator {
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.4);
}

/* Vertical layout */
.progress-steps-wrapper.vertical .progress-steps-list {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
}

.progress-steps-wrapper.vertical .progress-step {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding: 0.5rem 0;
}

.progress-steps-wrapper.vertical .step-content {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    margin-left: 1rem;
    max-width: none;
}

.progress-steps-wrapper.vertical .step-connector {
    position: absolute;
    top: calc(44px + 0.5rem);
    left: 22px;
    right: auto;
    width: 3px;
    height: calc(100% - 44px + 1rem);
}

.progress-steps-wrapper.vertical .connector-line {
    height: 100%;
    width: 100%;
}

/* Dark mode support */
[data-bs-theme="dark"] .progress-steps-summary,
[data-bs-theme="dark"] .progress-steps-list {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(52, 58, 64, 0.98));
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .progress-steps-summary .summary-progress {
    background-color: var(--ss-border-input);
}

/* step-indicator uses --ss-border-input, --ss-bg-surface, --ss-text-secondary tokens
   which auto-adapt to dark mode — no explicit override needed */

/* step-label and step-description use --ss-text-primary/secondary tokens
   which auto-adapt to dark mode — no explicit override needed */

/* connector-line uses --ss-border-input token — auto-adapts to dark mode */

[data-bs-theme="dark"] .progress-step.completed .step-indicator {
    background-color: #198754;
    border-color: #198754;
}

[data-bs-theme="dark"] .progress-step.completed .step-label {
    color: #75b798;
}

[data-bs-theme="dark"] .progress-step.active .step-indicator {
    background-color: #4768A8;
    border-color: #4768A8;
}

[data-bs-theme="dark"] .progress-step.active .step-label {
    color: #6ea8fe;
}

/* pending step uses base tokens — auto-adapts to dark mode */

/* Accessibility - focus indicators */
.progress-step:focus-visible .step-indicator {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .step-indicator {
        border-width: 4px;
    }

    .progress-step.completed .step-indicator {
        background-color: #006400;
        border-color: #006400;
    }

    .progress-step.active .step-indicator {
        background-color: #0000cd;
        border-color: #0000cd;
    }

    .connector-line.completed {
        background-color: #006400;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .step-indicator,
    .connector-line,
    .progress-bar {
        transition: none;
    }

    .progress-step.clickable:hover .step-indicator {
        transform: none;
    }
}

/* ========================================
   MOBILE TOUCH TARGET ACCESSIBILITY
   WCAG 2.5.5: Minimum 44x44px touch targets
   ======================================== */

@media (max-width: 768px) {

    .btn-sm,
    .btn-close,
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        padding: 0.5rem 0.75rem;
    }

    /* Ensure icon-only buttons meet touch target requirements */
    .btn-sm:has(> i:only-child),
    .btn-sm:has(> .bi:only-child) {
        min-width: 44px;
        min-height: 44px;
    }

    /* Ensure adequate spacing between adjacent touch targets */
    .btn-group>.btn-sm {
        margin: 2px;
    }
}

/* ============================================
   SIDEBAR COLLAPSE - DESKTOP ONLY
   Must be in global CSS because JavaScript adds
   the .collapsed class dynamically
   ============================================ */
@media (min-width: 641px) {
    .sidebar.collapsed {
        width: 70px;
    }

    .sidebar.collapsed .brand-container {
        padding: 0.5rem;
        justify-content: center;
    }

    .sidebar.collapsed .navbar-brand,
    .sidebar.collapsed .nav-section-label,
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .nav-badge,
    .sidebar.collapsed .nav-mode-indicator-text,
    .sidebar.collapsed .business-identity,
    .sidebar.collapsed .ms-2 {
        display: none !important;
    }

    .sidebar.collapsed .brand-logo {
        margin: 0;
    }

    .sidebar.collapsed .nav-item {
        padding: 0.15rem 0.5rem;
    }

    .sidebar.collapsed .nav-item .nav-link {
        justify-content: center;
        padding: 0.65rem;
    }

    .sidebar.collapsed .bi {
        margin-right: 0;
    }

    .sidebar.collapsed .nav-mode-indicator {
        justify-content: center;
        padding: 0.35rem 0.5rem;
    }

    .sidebar.collapsed .nav-section-divider {
        margin: 0.5rem 0.5rem;
    }

    .sidebar.collapsed .collapse-toggle {
        margin: 0.25rem auto;
    }

    /* Tooltip for collapsed nav items - shows menu text on hover */
    .sidebar.collapsed .nav-item .nav-link {
        position: relative;
    }

    .sidebar.collapsed .nav-item .nav-link::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, #1a2540 0%, #2a3f66 100%);
        color: white;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        pointer-events: none;
    }

    /* Arrow pointing to the icon */
    .sidebar.collapsed .nav-item .nav-link::before {
        content: '';
        position: absolute;
        left: calc(100% + 2px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: #1a2540;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1100;
    }

    .sidebar.collapsed .nav-item .nav-link:hover::after,
    .sidebar.collapsed .nav-item .nav-link:focus::after {
        opacity: 1;
        visibility: visible;
    }

    .sidebar.collapsed .nav-item .nav-link:hover::before,
    .sidebar.collapsed .nav-item .nav-link:focus::before {
        opacity: 1;
        visibility: visible;
    }
}

/* ========================================
   DESIGN TOKEN UTILITY CLASSES
   Reusable classes for common inline-style
   patterns that need dark mode awareness.
   ======================================== */

/* Surface backgrounds — use instead of inline background: white / #f8f9fa */
.bg-surface {
    background-color: var(--ss-bg-surface);
}

.bg-surface-secondary {
    background-color: var(--ss-bg-surface-secondary);
}

.bg-surface-tertiary {
    background-color: var(--ss-bg-surface-tertiary);
}

/* Text colors — use instead of inline color: #1f2937 / #6b7280 */
.text-surface-primary {
    color: var(--ss-text-primary);
}

.text-surface-secondary {
    color: var(--ss-text-secondary);
}

/* Border — use instead of inline border-color: #e9ecef / #dee2e6 */
.border-themed {
    border-color: var(--ss-border) !important;
}

/* Modal backdrop — replaces 30+ inline style="background-color: rgba(0,0,0,0.5)" */
.modal-backdrop-custom {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Blazor Circuit Reconnect UI Override
   Hide the default "Attempting to reconnect" modal — our JS in
   inactivityWarning.js auto-reloads the page instead.
   ============================================================ */
#components-reconnect-modal {
    display: none !important;
}