/* Этап A: бренд-слой входа и общей оболочки, исключая утверждённый журнал. */
body:has(#login-screen:not([hidden])) {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#login-screen:not([hidden])) .login-screen {
  min-height: 100vh;
  background: var(--surface-page);
  font-family: var(--font-ui);
}

body:has(#login-screen:not([hidden])) .login-card {
  background: var(--surface-primary);
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

body:has(#login-screen:not([hidden])) .login-card h1,
body:has(#login-screen:not([hidden])) .logo {
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#login-screen:not([hidden])) .login-card .brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
}

body:has(#login-screen:not([hidden])) .login-card .logo span {
  color: var(--brand-primary);
}

body:has(#login-screen:not([hidden])) .logo b {
  color: var(--brand-primary);
  border-color: var(--brand-gold);
  background: var(--brand-gold-soft);
  font-family: var(--font-ui);
}

body:has(#login-screen:not([hidden])) .overline {
  color: var(--warning);
}

body:has(#login-screen:not([hidden])) .subtle {
  color: var(--text-secondary);
}

body:has(#login-screen:not([hidden])) .login-card input {
  border-color: var(--border-default);
  background: var(--surface-primary);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .shell,
body:has(#app:not([hidden]) .view.active:not(#journal)) main {
  background: var(--surface-page);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar,
body:has(#app:not([hidden]) .view.active:not(#journal)) .topbar {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar {
  border-right: 1px solid var(--border-default);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar .logo,
body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar nav button,
body:has(#app:not([hidden]) .view.active:not(#journal)) .profile,
body:has(#app:not([hidden]) .view.active:not(#journal)) .profile button,
body:has(#app:not([hidden]) .view.active:not(#journal)) .profile small {
  color: var(--text-secondary);
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar .logo b {
  color: var(--brand-primary);
  border-color: var(--brand-gold);
  background: var(--brand-gold-soft);
  font-family: var(--font-ui);
}

body:has(#app:not([hidden])) .sidebar .logo .brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar nav button:hover {
  background: var(--surface-primary);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .sidebar nav button.active {
  background: var(--brand-primary);
  border-left-color: var(--brand-gold);
  color: var(--text-inverse);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .profile {
  border-top-color: var(--border-default);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .profile > span {
  background: var(--brand-gold-soft);
  color: var(--warning);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .topbar {
  border-bottom-color: var(--border-default);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .topbar h1,
body:has(#app:not([hidden]) .view.active:not(#journal)) .section-head h2,
body:has(#app:not([hidden]) .view.active:not(#journal)) .empty-view h2,
body:has(#app:not([hidden]) .view.active:not(#journal)) h3 {
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .topbar .overline,
body:has(#app:not([hidden]) .view.active:not(#journal)) .section-head .overline,
body:has(#app:not([hidden]) .view.active:not(#journal)) .overline {
  color: var(--warning);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .view.active:not(#journal) {
  padding: var(--space-6) var(--space-8) var(--space-8);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) .metrics article,
body:has(#app:not([hidden]) .view.active:not(#journal)) .list-card,
body:has(#app:not([hidden]) .view.active:not(#journal)) .empty-view,
body:has(#app:not([hidden]) .view.active:not(#journal)) .employee-row,
body:has(#app:not([hidden]) .view.active:not(#journal)) .online-status,
body:has(#app:not([hidden]) .view.active:not(#journal)) .online-section,
body:has(#app:not([hidden]) .view.active:not(#journal)) .service-category,
body:has(#app:not([hidden]) .view.active:not(#journal)) .analytics-staff-row,
body:has(#app:not([hidden]) .view.active:not(#journal)) .finance-staff-row {
  background: var(--surface-primary);
  border-color: var(--border-subtle);
  box-shadow: none;
}

body:has(#app:not([hidden]) .view.active:not(#journal) .metrics span,
body:has(#app:not([hidden]) .view.active:not(#journal) .subtle,
body:has(#app:not([hidden]) .view.active:not(#journal) small {
  color: var(--text-secondary);
}

body:has(#app:not([hidden]) .view.active:not(#journal) .button.primary,
body:has(#login-screen:not([hidden])) .button.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

body:has(#app:not([hidden]) .view.active:not(#journal) .button.primary:hover,
body:has(#login-screen:not([hidden])) .button.primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

body:has(#app:not([hidden]) .view.active:not(#journal) .button.ghost,
body:has(#login-screen:not([hidden])) .button.ghost {
  background: var(--surface-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) .view.active:not(#journal) .button.ghost:hover,
body:has(#login-screen:not([hidden])) .button.ghost:hover {
  background: var(--brand-primary-pale);
  border-color: var(--brand-primary);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal,
body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal input,
body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal select,
body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal textarea {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: none;
}

body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) dialog .modal::backdrop {
  background: var(--surface-overlay);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) input,
body:has(#app:not([hidden]) .view.active:not(#journal)) select,
body:has(#app:not([hidden]) .view.active:not(#journal)) textarea {
  border-color: var(--border-default);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) .view.active:not(#journal)) :focus-visible,
body:has(#login-screen:not([hidden])) :focus-visible {
  outline-color: var(--brand-primary);
}

@media (max-width: 760px) {
  body:has(#app:not([hidden]) .view.active:not(#journal)) .view.active:not(#journal) {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
}