:root {
    color-scheme: dark;
    --accent-50: #172340;
    --accent-100: #20335f;
    --accent-500: #7797f3;
    --accent-600: #91aafb;
    --accent-700: #b8c8ff;
    --ink-900: #f1f5fb;
    --ink-700: #d5ddeb;
    --ink-600: #bdc8d9;
    --ink-500: #9aa8bc;
    --ink-400: #7f8ca0;
    --line: #2a374b;
    --page-bg: #0b1220;
    --surface-1: #111b2c;
    --surface-2: #172235;
    --surface-3: #1e2c42;
    --surface-rgb: 17, 27, 44;
    --topbar-bg: rgba(11, 18, 32, .86);
    --sidebar-bg: #080f1d;
    --image-canvas: #202b3a;
    --warning-bg: #392b11;
    --warning-text: #ffe2a0;
    --danger-bg: #3a1720;
    --danger-text: #ffc4ce;
    --success-50: #102d26;
    --success-200: #205641;
    --success-500: #31bd88;
    --success-600: #49c99a;
    --success-700: #7dddb8;
}

:root[data-theme="light"] {
    color-scheme: light;
    --accent-50: #eef2ff;
    --accent-100: #dce5ff;
    --accent-500: #4f74e5;
    --accent-600: #3e61cf;
    --accent-700: #304ba5;
    --ink-900: #142033;
    --ink-700: #344157;
    --ink-600: #4b586d;
    --ink-500: #697589;
    --ink-400: #8c96a7;
    --line: #e4e8ef;
    --page-bg: #f7f9fc;
    --surface-1: #fff;
    --surface-2: #f5f7fa;
    --surface-3: #edf1f6;
    --surface-rgb: 255, 255, 255;
    --topbar-bg: rgba(247, 249, 252, .86);
    --sidebar-bg: #111d2e;
    --image-canvas: #dde2e9;
    --warning-bg: #fff4dc;
    --warning-text: #8b5d00;
    --danger-bg: #ffedf0;
    --danger-text: #a32438;
    --success-50: #eaf9f2;
    --success-200: #b9ead5;
    --success-500: #189c6b;
    --success-600: #13845b;
    --success-700: #116a4b;
}

html,
body {
    background: var(--page-bg);
    color: var(--ink-700);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
}

body, .card, .table, .form-control, .form-select, .btn, .alert, .topbar {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.card,
.list-group-item,
.modal-content,
.dropdown-menu {
    background-color: var(--surface-1);
    border-color: var(--line);
    color: var(--ink-700);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background-color: var(--surface-2);
    border-color: var(--line);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--ink-700);
    --bs-table-active-bg: var(--surface-3);
    --bs-table-active-color: var(--ink-900);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--ink-900);
    border-color: var(--line);
    color: var(--ink-700);
}

.table > :not(caption) > * > * { border-color: var(--line); color: inherit; }
.table-primary { --bs-table-bg: var(--accent-50); --bs-table-hover-bg: var(--accent-100); color: var(--ink-900); }

.form-control,
.form-select,
.input-group-text {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink-900);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    border-color: var(--accent-500);
    box-shadow: 0 0 0 .2rem rgba(79, 116, 229, .22);
    color: var(--ink-900);
}

.form-control:disabled,
.form-select:disabled { background-color: var(--surface-3); color: var(--ink-500); }
.form-control::placeholder { color: var(--ink-400); opacity: 1; }
.form-check-input { background-color: var(--surface-2); border-color: var(--ink-400); }
.form-label, label { color: var(--ink-700); }

.text-body { color: var(--ink-900) !important; }
.text-muted { color: var(--ink-500) !important; }
.bg-light, .bg-white { background-color: var(--surface-1) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }

.btn-outline-secondary { border-color: var(--ink-500); color: var(--ink-600); }
.btn-outline-secondary:hover { background-color: var(--surface-3); border-color: var(--ink-600); color: var(--ink-900); }
.btn-light { background-color: var(--surface-2); border-color: var(--line); color: var(--ink-900); }
.btn-link { color: var(--accent-600); }
.btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
:root[data-theme="light"] .btn-close { filter: none; }

.alert-info { background: #153249; border-color: #235473; color: #bde5ff; }
.alert-success { background: #102d26; border-color: #205641; color: #a7ebcf; }
.alert-danger { background: #3a1720; border-color: #6e2939; color: #ffc4ce; }
.alert-warning { background: #392b11; border-color: #6c5220; color: #ffe2a0; }
:root[data-theme="light"] .alert-info { background: #cff4fc; border-color: #b6effb; color: #055160; }
:root[data-theme="light"] .alert-success { background: #d1e7dd; border-color: #badbcc; color: #0f5132; }
:root[data-theme="light"] .alert-danger { background: #f8d7da; border-color: #f5c2c7; color: #842029; }
:root[data-theme="light"] .alert-warning { background: #fff3cd; border-color: #ffecb5; color: #664d03; }

.text-bg-secondary { background: #64748b !important; color: #fff !important; }
.progress { background-color: var(--surface-3); }
pre, code { color: var(--ink-700); }
:root[data-theme="light"] .theme-toggle .show-in-dark { display: none !important; }
:root[data-theme="light"] .theme-toggle .show-in-light { display: inline-flex !important; }

* {
    box-sizing: border-box;
}

a {
    color: var(--accent-600);
}

a:hover {
    color: var(--accent-700);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-500);
}

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

.validation-message {
    color: #b72439;
}

.blazor-error-boundary {
    background: #9e2739;
    border-radius: 8px;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "Beklenmeyen bir hata oluştu.";
}

@media (min-width: 821px) {
    body:has(.review-workspace) .page-shell {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    body:has(.review-workspace) .brand-block {
        justify-content: center;
        padding: 0;
    }

    body:has(.review-workspace) .brand-block strong,
    body:has(.review-workspace) .nav-section,
    body:has(.review-workspace) .sidebar-footer {
        display: none;
    }

    body:has(.review-workspace) .sidebar nav {
        padding: 1rem .5rem;
    }

    body:has(.review-workspace) .sidebar .nav-link {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding: .7rem;
    }

    body:has(.review-workspace) .sidebar .nav-icon {
        font-size: 1rem;
    }

    body:has(.review-workspace) .content {
        height: calc(100vh - 66px);
        margin: 0;
        max-width: none;
        overflow: hidden;
        padding: .75rem;
    }
}