/* Композиция темы МТС: все цвета приходят из токенов режима. */
html[data-theme="mts"] body { font-family: var(--font-sans); }

html[data-theme="mts"] .sidebar {
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
}
html[data-theme="mts"] .brand {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
html[data-theme="mts"] .brand-mark {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
html[data-theme="mts"] .nav-title { color: var(--nav-fg-muted); }
html[data-theme="mts"] .nav-item,
html[data-theme="mts"] .nav-sub { border-radius: var(--radius-sm); }
html[data-theme="mts"] .nav-item:hover,
html[data-theme="mts"] .nav-sub:hover,
html[data-theme="mts"] .sidebar-quick-link:hover {
  background: var(--bg-soft);
  color: var(--text);
}
html[data-theme="mts"] .nav-item.active,
html[data-theme="mts"] .nav-sub.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  box-shadow: none;
  font-weight: var(--fw-bold);
}
html[data-theme="mts"] .nav-item.active::before { background: var(--nav-active-bar); }
html[data-theme="mts"] .nav-item.is-disabled:hover,
html[data-theme="mts"] .nav-sub.is-disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

html[data-theme="mts"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
html[data-theme="mts"] .card,
html[data-theme="mts"] .panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
html[data-theme="mts"] .btn-primary,
html[data-theme="mts"] button.primary,
html[data-theme="mts"] .cat-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
}
html[data-theme="mts"] .btn-primary:hover,
html[data-theme="mts"] button.primary:hover,
html[data-theme="mts"] .cat-btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
html[data-theme="mts"] table th { background: var(--table-head-bg); }
html[data-theme="mts"] table tbody tr:nth-child(even) { background: var(--row-stripe); }
html[data-theme="mts"] table tbody tr:hover { background: var(--row-hover); }
html[data-theme="mts"] :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

html[data-theme="mts"] .login-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  min-height: 100vh;
  place-items: stretch;
}
html[data-theme="mts"] .login-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-7);
  background: var(--nav-active-bg);
  color: var(--text);
}
html[data-theme="mts"] .login-hero .overline { color: var(--primary); }
html[data-theme="mts"] .login-hero ul { color: var(--text-muted); }
html[data-theme="mts"] .login-side {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--bg);
}
html[data-theme="mts"] .login-card { border-radius: var(--radius-lg); }

@media (max-width: 900px) {
  html[data-theme="mts"] .login-page { grid-template-columns: minmax(0, 1fr); }
  html[data-theme="mts"] .login-hero { display: none; }
}