@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    color-scheme: light;
    --app-bg: #f4f7fb;
    --app-surface: #ffffff;
    --app-surface-alt: #f7f9fc;
    --app-text: #1f2937;
    --app-text-muted: #6b7280;
    --app-border: #d8e0ea;
    --app-link: #0f6cbd;
    --app-primary: #1b6ec2;
    --app-primary-border: #1861ac;
    --app-sidebar-start: #052767;
    --app-sidebar-end: #3a0647;
    --app-sidebar-overlay: rgba(0, 0, 0, 0.25);
    --app-nav-text: #d7d7d7;
    --app-nav-hover: rgba(255, 255, 255, 0.1);
    --app-nav-active: rgba(255, 255, 255, 0.25);
    --app-input-bg: #ffffff;
    --app-table-striped: rgba(15, 23, 42, 0.025);
    --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --loading-bg: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --app-bg: #0f172a;
        --app-surface: #111827;
        --app-surface-alt: #1f2937;
        --app-text: #e5edf7;
        --app-text-muted: #94a3b8;
        --app-border: #334155;
        --app-link: #7cc4ff;
        --app-primary: #3b82f6;
        --app-primary-border: #2563eb;
        --app-sidebar-start: #020617;
        --app-sidebar-end: #172033;
        --app-sidebar-overlay: rgba(15, 23, 42, 0.72);
        --app-nav-text: #cbd5e1;
        --app-nav-hover: rgba(148, 163, 184, 0.18);
        --app-nav-active: rgba(59, 130, 246, 0.35);
        --app-input-bg: #0b1220;
        --app-table-striped: rgba(148, 163, 184, 0.06);
        --app-shadow: 0 16px 40px rgba(2, 6, 23, 0.45);
        --loading-bg: #020617;
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
}

body {
    min-height: 100vh;
}

h1:focus {
    outline: none;
}

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

a:hover, .btn-link:hover {
    color: color-mix(in srgb, var(--app-link) 82%, white);
}

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

.content {
    padding-top: 1.1rem;
}

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

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

.validation-message {
    color: #ef4444;
}

.text-muted,
.form-text {
    color: var(--app-text-muted) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.offcanvas,
.toast,
.popover,
.table,
.table-responsive,
.form-control,
.form-select,
.input-group-text {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.popover,
.e-dialog,
.e-grid,
.e-control.e-btn,
.e-input-group,
.e-ddl,
.e-datepicker,
.e-datetimepicker,
.e-multiselect,
.e-toast,
.e-dropdownbase,
.e-popup,
.e-content,
.e-card {
    box-shadow: var(--app-shadow);
}

.card-header,
.card-footer,
.table-light,
.table > :not(caption) > * > *,
.modal-header,
.modal-footer {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
    border-color: var(--app-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--app-table-striped);
    color: var(--app-text);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: color-mix(in srgb, var(--app-surface-alt) 85%, transparent);
    color: var(--app-text);
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--app-input-bg);
}

.form-control,
.form-select {
    color: var(--app-text);
}

.form-control::placeholder {
    color: var(--app-text-muted);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary) 30%, transparent);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-warning,
.btn-outline-light,
.btn-outline-danger {
    border-color: var(--app-border);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
    color: var(--app-text);
}

hr, .dropdown-divider {
    border-color: var(--app-border);
    opacity: 1;
}

.e-dialog,
.e-dialog .e-dlg-header-content,
.e-dialog .e-footer-content,
.e-grid,
.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-content,
.e-popup,
.e-dropdownbase,
.e-input-group,
.e-input-group input,
.e-input,
.e-control,
.e-toast,
.e-toast-message,
.e-datepicker .e-input-group,
.e-datetimepicker .e-input-group,
.e-ddl.e-input-group,
.e-multiselect.e-input-group {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.e-dialog .e-dlg-header,
.e-dialog .e-btn-icon,
.e-grid .e-headertext,
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-input-group-icon,
.e-input-group input::placeholder {
    color: var(--app-text) !important;
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-selectionbackground,
.e-grid .e-rowcell.e-selectionbackground {
    background-color: color-mix(in srgb, var(--app-surface-alt) 78%, transparent) !important;
}

.e-overlay {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

#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,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxpbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBvdmVyZmxvdz0iaGlkZGVuIj48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB4PSIyMzUiIHk9IjUxIiB3aWR0aD0iNTYiIGhlaWdodD0iNDkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjM1IC01MSkiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVpNMjYzLjU4NiA2Ni4wMTgzQzI2MC43MzcgNjYuMDE4MyAyNTkuMzEzIDY3LjEyNDUgMjU5LjMxMyA2OS4zMzcgMjU5LjMxMyA2OS42MTAyIDI1OS4zMzIgNjkuODYwOCAyNTkuMzcxIDcwLjA4ODdMMjYxLjc5NSA4NC4wMTYxIDI2NS4zOCA4NC4wMTYxIDI2Ny44MjEgNjkuNzQ3NUMyNjcuODYgNjkuNzMwOSAyNjcuODc5IDY5LjU4NzcgMjY3Ljg3OSA2OS4zMTc5IDI2Ny44NzkgNjcuMTE4MiAyNjYuNDQ4IDY2LjAxODQgMjYzLjU3NiA2Ni4wMTgzWiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

#loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: var(--loading-bg);
}

.loading-logo {
    max-width: 180px;
    margin-bottom: 32px;
}

.loading-spinner {
    border: 8px solid color-mix(in srgb, var(--app-border) 80%, transparent);
    border-top: 8px solid var(--app-primary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.2rem;
    color: var(--app-primary);
    font-weight: 500;
}

.d-flex.flex-wrap.gap-2.mb-3, .row.mb-3.g-2, .d-flex.flex-wrap.gap-2 {
    gap: 0.5rem !important;
}

@media (max-width: 768px) {
    .d-flex.flex-wrap.gap-2.mb-3, .row.mb-3.g-2, .d-flex.flex-wrap.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .col-md-3, .col-md-3.mb-3, .col-md-3.d-flex {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-12, .col-12.col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-flex.align-items-end.flex-wrap.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

.e-btn.btn, .e-btn.btn-primary, .e-btn.btn-secondary, .e-btn.btn-success, .e-btn.btn-outline-primary, .e-btn.btn-link {
    min-width: 110px;
    margin-bottom: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .e-grid {
        background-color: var(--app-surface) !important;
        border: 1px solid var(--app-border) !important;
    }

    .e-grid .e-gridheader,
    .e-grid .e-headercontent,
    .e-grid .e-headercell,
    .e-grid .e-table,
    .e-grid .e-gridpager,
    .e-grid .e-content,
    .e-grid .e-row,
    .e-grid .e-rowcell,
    .e-grid .e-summarycell,
    .e-grid .e-detailrow,
    .e-grid .e-detailcell {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    .e-grid .e-headercell,
    .e-grid .e-headercelldiv,
    .e-grid .e-headertext,
    .e-grid .e-sortfilter,
    .e-grid .e-icon-filter,
    .e-grid .e-icons {
        color: var(--app-text) !important;
    }

    .e-grid .e-gridheader {
        background-color: var(--app-surface-alt) !important;
    }

    .e-grid .e-row:nth-child(even) .e-rowcell,
    .e-grid .e-altrow .e-rowcell {
        background-color: color-mix(in srgb, var(--app-surface-alt) 55%, var(--app-surface)) !important;
    }

    .e-grid .e-row:hover .e-rowcell {
        background-color: color-mix(in srgb, var(--app-primary) 16%, var(--app-surface)) !important;
        color: var(--app-text) !important;
    }

    .e-grid .e-selectionbackground,
    .e-grid .e-active,
    .e-grid .e-row.e-selectionbackground .e-rowcell,
    .e-grid .e-rowcell.e-selectionbackground {
        background-color: #4b5563 !important;
        color: #ffffff !important;
    }

    .e-grid .e-gridpager,
    .e-pager,
    .e-pagercontainer,
    .e-pager .e-parentmsgbar,
    .e-pager .e-pagerexternalmsg,
    .e-pager .e-currentitem,
    .e-pager .e-currentitem:hover,
    .e-pager .e-default,
    .e-pager .e-numericitem,
    .e-pager .e-pp,
    .e-pager .e-np,
    .e-pager .e-first,
    .e-pager .e-last,
    .e-pager .e-next,
    .e-pager .e-prev {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    .e-pager .e-currentitem {
        background-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-surface)) !important;
        color: #ffffff !important;
    }

    .e-grid .e-checkbox-wrapper .e-frame,
    .e-grid .e-check,
    .e-grid .e-uncheck {
        border-color: var(--app-border) !important;
    }
}

@media (prefers-color-scheme: dark) {
    .e-dialog,
    .e-dialog .e-dlg-content,
    .e-dialog .e-dlg-header-content,
    .e-dialog .e-footer-content,
    .e-dialog .e-dlg-container {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    .e-dialog .e-dlg-content {
        padding: 1rem !important;
    }

    .e-grid .e-toolbar,
    .e-grid .e-toolbar .e-toolbar-items,
    .e-grid .e-toolbar .e-toolbar-item,
    .e-grid .e-toolbar .e-tbar-btn,
    .e-grid .e-toolbar .e-btn,
    .e-grid .e-toolbar .e-icons {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    .e-grid .e-toolbar {
        border-bottom: 1px solid var(--app-border) !important;
    }

    .e-grid .e-toolbar .e-tbar-btn:hover,
    .e-grid .e-toolbar .e-btn:hover {
        background-color: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface)) !important;
        color: #ffffff !important;
    }

    .e-grid .e-toolbar .e-overlay,
    .e-grid .e-toolbar .e-overlay .e-btn,
    .e-grid .e-toolbar .e-overlay .e-icons,
    .e-grid .e-toolbar .e-overlay .e-tbar-btn-text {
        opacity: 0.55 !important;
        color: var(--app-text-muted) !important;
    }

    .e-grid .e-toolbar .e-tbar-btn-text,
    .e-grid .e-toolbar .e-btn-icon,
    .e-grid .e-toolbar .e-icons {
        color: inherit !important;
    }
}