/* ─── Тёмная палитра (один режим, без переключателя) ────────────────────── */
/* Палитра в духе GitHub Dark / Linear: нейтральные slate-фоны, мягкий синий
   акцент, контраст текста ~14:1. Переопределяем Bootstrap-токены через
   --bs-* — все компоненты (.card, .table, .btn, .form-control, .modal,
   .alert, .dropdown) перекрашиваются автоматически. */
:root,
[data-bs-theme="dark"] {
    --app-bg:           #0d1117;
    --app-bg-elev:      #161b22;  /* карточки, hover, table-striped */
    --app-bg-elev-2:    #21262d;  /* sidebar hover, активные строки */
    --app-border:       #30363d;
    --app-border-soft:  #21262d;
    --app-text:         #e6edf3;
    --app-text-muted:   #8b949e;
    --app-accent:       #2f81f7;
    --app-accent-hover: #4493f8;
    --app-success:      #3fb950;
    --app-danger:       #f85149;
    --app-warning:      #d29922;

    --bs-body-bg:           var(--app-bg);
    --bs-body-color:        var(--app-text);
    --bs-secondary-color:   var(--app-text-muted);
    --bs-tertiary-bg:       var(--app-bg-elev);
    --bs-secondary-bg:      var(--app-bg-elev-2);
    --bs-border-color:      var(--app-border);
    --bs-border-color-translucent: var(--app-border);
    --bs-link-color:        var(--app-accent);
    --bs-link-hover-color:  var(--app-accent-hover);
    --bs-emphasis-color:    var(--app-text);
    --bs-primary:           var(--app-accent);
    --bs-primary-rgb:       47, 129, 247;
    --bs-success-rgb:       63, 185, 80;
    --bs-danger-rgb:        248, 81, 73;
    --bs-warning-rgb:       210, 153, 34;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    background-color: var(--app-bg);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
    color: var(--app-accent);
    text-decoration: none;
}
a:hover, .btn-link:hover {
    color: var(--app-accent-hover);
    text-decoration: underline;
}

/* ─── Типографика ───────────────────────────────────────────────────────── */
/* Bootstrap по умолчанию даёт h1=2.5rem, h2=2rem — для админки/чата это
   чрезмерно. Ужимаем до размеров продуктовых UI (GitHub/Linear). */
h1, .h1 { font-size: 1.6rem;  font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.3rem;  font-weight: 600; margin-bottom: 0.75rem; letter-spacing: -0.005em; }
h3, .h3 { font-size: 1.1rem;  font-weight: 600; margin-bottom: 0.5rem; }
h4, .h4 { font-size: 1rem;    font-weight: 600; margin-bottom: 0.5rem; }
h5, .h5 { font-size: 0.95rem; font-weight: 600; }
h1:focus { outline: none; }

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

code, kbd, pre, samp {
    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono',
                 'Roboto Mono', Consolas, monospace;
    font-size: 0.875em;
}
code {
    color: #f0883e;
    background: rgba(110, 118, 129, 0.18);
    padding: 0.15em 0.35em;
    border-radius: 4px;
}

/* ─── Layout / контент ──────────────────────────────────────────────────── */
.content {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    max-width: 1280px;
}

/* ─── Карточки ──────────────────────────────────────────────────────────── */
.card {
    background-color: var(--app-bg-elev);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
}

/* ─── Таблицы ───────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border-soft);
    --bs-table-hover-bg: rgba(177, 186, 196, 0.06);
    --bs-table-striped-bg: rgba(177, 186, 196, 0.03);
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--app-border-soft);
}
.table thead th {
    color: var(--app-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--app-border);
}

/* ─── Кнопки ────────────────────────────────────────────────────────────── */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-primary {
    color: #fff;
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
}
.btn-secondary,
.btn-outline-secondary {
    color: var(--app-text);
    background-color: var(--app-bg-elev);
    border-color: var(--app-border);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--app-bg-elev-2);
    border-color: var(--app-border);
    color: var(--app-text);
}
.btn-danger {
    background-color: var(--app-danger);
    border-color: var(--app-danger);
}
.btn-success {
    background-color: var(--app-success);
    border-color: var(--app-success);
}
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(47, 129, 247, 0.35);
    outline: none;
}

/* ─── Формы ─────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--app-bg-elev);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-radius: 6px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--app-bg-elev);
    border-color: var(--app-accent);
    color: var(--app-text);
}
.form-control::placeholder { color: var(--app-text-muted); }
.form-label { color: var(--app-text); font-weight: 500; }
.form-check-input {
    background-color: var(--app-bg-elev);
    border-color: var(--app-border);
}
.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

/* ─── Badge / Alert / Modal ─────────────────────────────────────────────── */
.badge { font-weight: 500; }
.alert {
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background-color: var(--app-bg-elev);
    color: var(--app-text);
}
.alert-danger    { border-color: rgba(248, 81, 73, 0.4);  background: rgba(248, 81, 73, 0.10); color: #ffa198; }
.alert-success   { border-color: rgba(63, 185, 80, 0.4);  background: rgba(63, 185, 80, 0.10); color: #56d364; }
.alert-warning   { border-color: rgba(210, 153, 34, 0.4); background: rgba(210, 153, 34, 0.10); color: #e3b341; }
.alert-info      { border-color: rgba(47, 129, 247, 0.4); background: rgba(47, 129, 247, 0.10); color: #79c0ff; }

.modal-content {
    background-color: var(--app-bg-elev);
    border: 1px solid var(--app-border);
}

.dropdown-menu {
    background-color: var(--app-bg-elev);
    border: 1px solid var(--app-border);
}
.dropdown-item { color: var(--app-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--app-bg-elev-2);
    color: var(--app-text);
}

/* ─── Skeleton/utility ──────────────────────────────────────────────────── */
hr { border-color: var(--app-border); opacity: 1; }

/* ─── Native scrollbar в тёмной теме ────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #30363d transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #30363d; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ─── Валидация (Blazor) ────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--app-success); }
.invalid { outline: 1px solid var(--app-danger); }
.validation-message { color: var(--app-danger); }

.darker-border-checkbox.form-check-input { border-color: var(--app-border); }

.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;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 6px;
}
.blazor-error-boundary::after { content: "Произошла ошибка."; }