/* Fluent Design System - Base Styles */
:root {
    /* Primary colors */
    --fluent-primary: #0078d4;
    --fluent-primary-hover: #106ebe;
    --fluent-primary-pressed: #005a9e;
    --fluent-success: #107c10;
    --fluent-warning: #ff8c00;
    --fluent-danger: #dc3545;

    /* Text colors - Light Mode */
    --fluent-text-primary: #1a1a1a;
    --fluent-text-secondary: #605e5c;
    --fluent-text-muted: #8a8886;
    --fluent-text-disabled: #999;

    /* Background colors - Light Mode */
    --fluent-bg-primary: #ffffff;
    --fluent-bg-secondary: #faf9f8;
    --fluent-bg-tertiary: #f5f5f5;
    --fluent-bg-elevated: #ffffff;

    /* Border colors - Light Mode */
    --fluent-border: #e1e1e1;
    --fluent-border-light: #f0f0f0;
    --fluent-border-strong: #d1d1d1;

    /* Glass effect - Light Mode */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-hover: rgba(255, 255, 255, 0.75);
    --glass-bg-subtle: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --glass-highlight: rgba(255, 255, 255, 0.8);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* Shadows */
    --fluent-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --fluent-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --fluent-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

    /* Border radius */
    --fluent-radius-sm: 4px;
    --fluent-radius-md: 6px;
    --fluent-radius-lg: 12px;

    /* Card-specific colors - Light Mode */
    --card-bg: rgba(255, 255, 255, 0.65);
    --card-bg-solid: #ffffff;
    --card-bg-subtle: #faf9f8;
    --card-border: rgba(255, 255, 255, 0.5);
    --card-header-bg: rgba(255, 255, 255, 0.3);

    /* Input/Form colors - Light Mode */
    --input-bg: #ffffff;
    --input-border: #e1e1e1;
    --input-border-focus: #0078d4;

    /* Badge colors - Light Mode */
    --badge-info-bg: #e1f3ff;
    --badge-info-text: #0078d4;
    --badge-success-bg: #dff6dd;
    --badge-success-text: #107c10;
    --badge-warning-bg: #fff4ce;
    --badge-warning-text: #ca5010;
    --badge-danger-bg: #fde7e9;
    --badge-danger-text: #a4262c;
}

/* Dark Mode - Auto Detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Text colors - Dark Mode */
        --fluent-text-primary: #f3f2f1;
        --fluent-text-secondary: #d2d0ce;
        --fluent-text-muted: #a19f9d;
        --fluent-text-disabled: #605e5c;

        /* Background colors - Dark Mode */
        --fluent-bg-primary: #1f1f1f;
        --fluent-bg-secondary: #252526;
        --fluent-bg-tertiary: #1e1e1e;
        --fluent-bg-elevated: #2d2d30;

        /* Border colors - Dark Mode */
        --fluent-border: #3e3e42;
        --fluent-border-light: #2d2d30;
        --fluent-border-strong: #4a4a4d;

        /* Glass effect - Dark Mode */
        --glass-bg: rgba(45, 45, 48, 0.7);
        --glass-bg-hover: rgba(55, 55, 58, 0.8);
        --glass-bg-subtle: rgba(45, 45, 48, 0.5);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
        --glass-highlight: rgba(255, 255, 255, 0.15);
        --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

        /* Card-specific colors - Dark Mode */
        --card-bg: rgba(45, 45, 48, 0.7);
        --card-bg-solid: #2d2d30;
        --card-bg-subtle: #252526;
        --card-border: rgba(255, 255, 255, 0.1);
        --card-header-bg: rgba(0, 0, 0, 0.2);

        /* Input/Form colors - Dark Mode */
        --input-bg: #3c3c3c;
        --input-border: #4a4a4d;
        --input-border-focus: #60a5fa;

        /* Badge colors - Dark Mode */
        --badge-info-bg: rgba(96, 165, 250, 0.2);
        --badge-info-text: #93c5fd;
        --badge-success-bg: rgba(34, 197, 94, 0.2);
        --badge-success-text: #86efac;
        --badge-warning-bg: rgba(251, 191, 36, 0.2);
        --badge-warning-text: #fcd34d;
        --badge-danger-bg: rgba(248, 113, 113, 0.2);
        --badge-danger-text: #fca5a5;

        /* Primary colors - adjust for dark mode */
        --fluent-primary: #60a5fa;
        --fluent-primary-hover: #3b82f6;
    }
}

/* Manual Dark Mode Override */
[data-theme="dark"] {
    --fluent-text-primary: #f3f2f1;
    --fluent-text-secondary: #d2d0ce;
    --fluent-text-muted: #a19f9d;
    --fluent-text-disabled: #605e5c;
    --fluent-bg-primary: #1f1f1f;
    --fluent-bg-secondary: #252526;
    --fluent-bg-tertiary: #1e1e1e;
    --fluent-bg-elevated: #2d2d30;
    --fluent-border: #3e3e42;
    --fluent-border-light: #2d2d30;
    --fluent-border-strong: #4a4a4d;
    --glass-bg: rgba(45, 45, 48, 0.7);
    --glass-bg-hover: rgba(55, 55, 58, 0.8);
    --glass-bg-subtle: rgba(45, 45, 48, 0.5);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --glass-highlight: rgba(255, 255, 255, 0.15);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --card-bg: rgba(45, 45, 48, 0.7);
    --card-bg-solid: #2d2d30;
    --card-bg-subtle: #252526;
    --card-border: rgba(255, 255, 255, 0.1);
    --card-header-bg: rgba(0, 0, 0, 0.2);
    --input-bg: #3c3c3c;
    --input-border: #4a4a4d;
    --input-border-focus: #60a5fa;
    --badge-info-bg: rgba(96, 165, 250, 0.2);
    --badge-info-text: #93c5fd;
    --badge-success-bg: rgba(34, 197, 94, 0.2);
    --badge-success-text: #86efac;
    --badge-warning-bg: rgba(251, 191, 36, 0.2);
    --badge-warning-text: #fcd34d;
    --badge-danger-bg: rgba(248, 113, 113, 0.2);
    --badge-danger-text: #fca5a5;
    --fluent-primary: #60a5fa;
    --fluent-primary-hover: #3b82f6;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: var(--fluent-text-primary);
    background: var(--fluent-bg-tertiary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--fluent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--fluent-primary-hover);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--fluent-primary) 0%, var(--fluent-primary-hover) 100%);
    border: none;
    border-radius: var(--fluent-radius-md);
    padding: 10px 20px;
    font-weight: 500;
    box-shadow: var(--fluent-shadow-sm);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--fluent-primary-hover) 0%, var(--fluent-primary-pressed) 100%);
    box-shadow: var(--fluent-shadow-md);
    transform: translateY(-1px);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--fluent-primary);
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
    box-shadow: var(--fluent-shadow-md);
}

.top-row {
    background-color: var(--fluent-bg-primary);
    border-bottom: 1px solid var(--fluent-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: white !important;
    letter-spacing: -0.02em;
}

    .top-row ::deep a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Modal z-index fixes */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1051 !important;
}

/* ============================================================================
   Syncfusion Component Dark Mode Overrides
   ============================================================================ */

/* Syncfusion Buttons - Base overrides */
.e-btn {
    color: var(--fluent-text-primary);
    background-color: var(--fluent-bg-secondary);
    border-color: var(--fluent-border);
}

.e-btn:hover {
    background-color: var(--glass-bg-hover);
    border-color: var(--fluent-border-strong);
}

.e-btn.e-outline,
.e-btn.e-flat {
    background-color: transparent;
    border-color: var(--fluent-border-strong);
    color: var(--fluent-text-primary);
}

.e-btn.e-outline:hover,
.e-btn.e-flat:hover {
    background-color: var(--glass-bg-subtle);
    border-color: var(--fluent-primary);
    color: var(--fluent-primary);
}

.e-btn .e-btn-icon {
    color: var(--fluent-text-secondary);
}

.e-btn:hover .e-btn-icon {
    color: var(--fluent-primary);
}

/* Syncfusion Inputs/TextBoxes */
.e-input-group,
.e-float-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

.e-input-group input,
.e-float-input input,
.e-input-group textarea,
.e-float-input textarea {
    color: var(--fluent-text-primary);
    background-color: transparent;
}

.e-input-group:hover,
.e-float-input:hover {
    border-color: var(--fluent-border-strong);
}

.e-input-group.e-input-focus,
.e-float-input.e-input-focus {
    border-color: var(--input-border-focus);
}

.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
    color: var(--fluent-text-secondary);
}

/* Syncfusion Dropdowns */
.e-dropdownbase .e-list-item,
.e-dropdown-popup .e-list-item {
    color: var(--fluent-text-primary);
    background-color: transparent;
}

.e-dropdownbase .e-list-item:hover,
.e-dropdown-popup .e-list-item:hover {
    background-color: var(--glass-bg-subtle);
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdown-popup .e-list-item.e-active {
    background-color: rgba(0, 120, 212, 0.15);
    color: var(--fluent-primary);
}

.e-popup,
.e-dropdown-popup {
    background-color: var(--fluent-bg-elevated);
    border-color: var(--fluent-border);
    box-shadow: var(--glass-shadow);
}

/* Syncfusion Dialog */
.e-dialog {
    background-color: var(--fluent-bg-elevated);
    border-color: var(--fluent-border);
    box-shadow: var(--glass-shadow-hover);
}

.e-dialog .e-dlg-header-content {
    background-color: var(--card-header-bg);
    border-bottom-color: var(--fluent-border);
}

.e-dialog .e-dlg-header {
    color: var(--fluent-text-primary);
}

.e-dialog .e-dlg-content {
    color: var(--fluent-text-primary);
    background-color: var(--fluent-bg-elevated);
}

.e-dialog .e-footer-content {
    background-color: var(--card-header-bg);
    border-top-color: var(--fluent-border);
}

/* Syncfusion Grid */
.e-grid {
    background-color: var(--fluent-bg-primary);
    border-color: var(--fluent-border);
}

.e-grid .e-gridheader {
    background-color: var(--fluent-bg-secondary);
    border-color: var(--fluent-border);
}

.e-grid .e-headercell {
    color: var(--fluent-text-primary);
    background-color: transparent;
}

.e-grid .e-rowcell {
    color: var(--fluent-text-primary);
    background-color: transparent;
    border-color: var(--fluent-border-light);
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--glass-bg-subtle);
}

/* Syncfusion Tab */
.e-tab .e-tab-header {
    background-color: var(--fluent-bg-secondary);
    border-color: var(--fluent-border);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    color: var(--fluent-text-secondary);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--fluent-text-primary);
}

.e-tab .e-content {
    background-color: transparent;
}