/* Material 3 (строгий): общий слой оформления программы, подключается после app.css.
   Тот же набор, что и в расширении (OM_Studio/material.css): блок om-tokens совпадает побайтно (проверяется тестом),
   ниже — привязка токенов программы и Bootstrap к нему. Акцент — из настроек программы. */

/* om-tokens:start */
body {
  --md-surface: #F7F8FA; --md-card: #FFFFFF; --md-container-lowest: #FFFFFF; --md-container-low: #F2F4F7; --md-container: #ECEEF2; --md-container-high: #E5E8ED;
  --md-on-surface: #181C22; --md-on-variant: #545C6A; --md-outline: #767D8A; --md-outline-variant: #DADEE5;
  --md-state: rgba(24, 28, 34, .06); --md-state-press: rgba(24, 28, 34, .10);
  --md-elev-1: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px 1px rgba(16, 24, 40, .04);
  --md-elev-2: 0 1px 2px rgba(16, 24, 40, .10), 0 4px 10px 2px rgba(16, 24, 40, .07);
  --md-r-xs: 6px; --md-r-sm: 8px; --md-r-md: 12px; --md-r-lg: 16px; --md-r-full: 999px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) body {
    --md-surface: #111318; --md-card: #181B21; --md-container-lowest: #0C0E12; --md-container-low: #181B21; --md-container: #1D2026; --md-container-high: #272A31;
    --md-on-surface: #E3E5EA; --md-on-variant: #A9B0BC; --md-outline: #8B929E; --md-outline-variant: #333842;
    --md-state: rgba(227, 229, 234, .07); --md-state-press: rgba(227, 229, 234, .11);
    --md-elev-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px 1px rgba(0, 0, 0, .2);
    --md-elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body, :root[data-bs-theme="dark"] body {
  --md-surface: #111318; --md-card: #181B21; --md-container-lowest: #0C0E12; --md-container-low: #181B21; --md-container: #1D2026; --md-container-high: #272A31;
  --md-on-surface: #E3E5EA; --md-on-variant: #A9B0BC; --md-outline: #8B929E; --md-outline-variant: #333842;
  --md-state: rgba(227, 229, 234, .07); --md-state-press: rgba(227, 229, 234, .11);
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px 1px rgba(0, 0, 0, .2);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
/* выпадающие списки: пункты в цвет темы (иначе в тёмной теме — светлый текст на белом) */
body select, body select option, body select optgroup { background-color: var(--md-card); color: var(--md-on-surface); }
/* om-tokens:end */

/* ---- токены программы и Bootstrap через Material ---- */
body {
  --om-bg: var(--md-surface); --om-surface: var(--md-card); --om-surface-2: var(--md-container); --om-surface-3: var(--md-container-high);
  --om-sidebar-bg: var(--md-surface); --om-text: var(--md-on-surface); --om-text-muted: var(--md-on-variant);
  --om-border: var(--md-outline-variant); --om-border-strong: color-mix(in srgb, var(--md-outline) 45%, var(--md-outline-variant));
  --om-accent-soft: color-mix(in srgb, var(--om-accent) 13%, var(--md-card));
  --om-shadow-sm: none; --om-shadow: none; --om-shadow-lg: var(--md-elev-2);
  --om-radius: var(--md-r-md); --om-radius-sm: var(--md-r-sm); --om-radius-xs: var(--md-r-xs);
  --om-bg-subtle: var(--om-surface-2); --om-border-light: var(--om-border);
  --bs-body-bg: var(--om-bg); --bs-body-color: var(--om-text); --bs-border-color: var(--om-border);
  --bs-secondary-color: var(--om-text-muted); --bs-tertiary-bg: var(--om-surface-2); --bs-border-radius: var(--om-radius-sm);
  background: var(--om-bg); color: var(--om-text); font-feature-settings: "tnum" 1;
}
html { background: #F7F8FA; }
html[data-bs-theme="dark"] { background: #111318; }

/* ---- оболочка: меню с индикатором-«таблеткой», верхняя панель без размытия ---- */
.om-logo { border-radius: var(--md-r-md); background: var(--om-accent); box-shadow: none; }
.om-search-btn { border-radius: var(--md-r-full); background: var(--md-container); border-color: transparent; }
.om-search-btn:hover { background: var(--md-container-high); border-color: transparent; }
.om-nav a, .om-nav summary { border-radius: var(--md-r-full); padding-left: .85rem; }
.om-nav a:hover, .om-nav summary:hover { background: var(--md-state); }
.om-nav a.active { background: var(--om-accent-soft); color: var(--om-accent); font-weight: 650; }
.om-nav a.active::before { display: block; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--om-accent); }
.om-topbar { background: var(--md-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.om-icon-btn { border-radius: var(--md-r-full); background: transparent; border-color: transparent; }
.om-icon-btn:hover { background: var(--md-state); border-color: transparent; color: var(--om-text); }
.om-chip { border-radius: var(--md-r-sm); }

/* ---- компоненты Bootstrap ---- */
.card { box-shadow: none; }
.card-header { padding: .85rem 1rem; font-weight: 600; }
.btn { border-radius: var(--md-r-full); font-weight: 600; padding-left: 1rem; padding-right: 1rem; }
.btn-sm { border-radius: var(--md-r-full); padding-left: .75rem; padding-right: .75rem; }
.btn:active { transform: none; }
.btn-primary { --bs-btn-hover-bg: var(--om-accent-strong); --bs-btn-hover-border-color: var(--om-accent-strong); box-shadow: none; }
.btn-primary:hover { box-shadow: var(--md-elev-1); }
.btn-outline-secondary, .btn-light { --bs-btn-bg: var(--md-card); --bs-btn-border-color: var(--md-outline-variant); --bs-btn-hover-bg: var(--md-container); }
.form-control, .form-select { border-radius: var(--md-r-sm); border-color: var(--md-outline-variant); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 1px var(--om-accent); }
.badge { border-radius: var(--md-r-xs); font-weight: 600; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { font-weight: 600; }
.nav-pills .nav-link { border-radius: var(--md-r-full); }
.nav-pills .nav-link.active { background: var(--om-accent-soft); color: var(--om-text); }
.table thead th, .om-table th { background: var(--md-container-low); font-weight: 600; }
.om-table tbody tr:hover td { background: var(--md-state); }
.modal-content, .dropdown-menu, .toast { border-radius: var(--md-r-lg); }
.dropdown-item { border-radius: var(--md-r-sm); }
.dropdown-item:hover { background: var(--md-state); }