/* Этап B: сотрудники, клиенты и услуги. Журнал и вход намеренно исключены. */
body:has(#app:not([hidden]) #employees.view.active),
body:has(#app:not([hidden]) #clients.view.active),
body:has(#app:not([hidden]) #services.view.active) {
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-list,
body:has(#app:not([hidden]) #clients.view.active) #client-list,
body:has(#app:not([hidden]) #services.view.active) .services-catalog {
  gap: var(--space-3);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-row {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-row:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-xs);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-avatar,
body:has(#app:not([hidden]) #clients.view.active) .client-row .avatar {
  background: var(--brand-primary-pale);
  color: var(--brand-primary);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-row small,
body:has(#app:not([hidden]) #employees.view.active) .employee-photo-preview,
body:has(#app:not([hidden]) #employees.view.active) .employee-form .form-note {
  color: var(--text-secondary);
}

body:has(#app:not([hidden]) #employees.view.active) .employee-status {
  color: var(--danger);
}

body:has(#app:not([hidden]) #clients.view.active) .search,
body:has(#app:not([hidden]) #clients.view.active) .booking-client-search {
  border-color: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #clients.view.active) .client-row {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #clients.view.active) .client-row:hover,
body:has(#app:not([hidden]) #clients.view.active) .client-visit:hover {
  background: var(--brand-primary-pale);
}

body:has(#app:not([hidden]) #clients.view.active) .client-row small,
body:has(#app:not([hidden]) #clients.view.active) .client-detail #client-total span,
body:has(#app:not([hidden]) #clients.view.active) .client-visit small {
  color: var(--text-secondary);
}

body:has(#app:not([hidden]) #clients.view.active) .total-chip {
  background: var(--brand-gold-soft);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #clients.view.active) .visit,
body:has(#app:not([hidden]) #clients.view.active) .client-visit {
  border-bottom-color: var(--border-subtle);
}

body:has(#app:not([hidden]) #clients.view.active) .client-visit em {
  color: var(--warning);
}

body:has(#app:not([hidden]) #clients.view.active) .client-note-input textarea,
body:has(#app:not([hidden]) #clients.view.active) .client-detail textarea,
body:has(#app:not([hidden]) #clients.view.active) .booking-new-client input,
body:has(#app:not([hidden]) #clients.view.active) .booking-client-results > button,
body:has(#app:not([hidden]) #clients.view.active) .booking-new-client {
  border-color: var(--border-default);
  background: var(--surface-primary);
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #clients.view.active) .booking-client-results > button:hover {
  background: var(--brand-primary-pale);
}

body:has(#app:not([hidden]) #clients.view.active) .new-client-tag {
  background: var(--brand-primary);
  color: var(--text-inverse) !important;
}

body:has(#app:not([hidden]) #services.view.active) .services-catalog {
  padding-right: var(--space-1);
}

body:has(#app:not([hidden]) #services.view.active) .service-category {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}

body:has(#app:not([hidden]) #services.view.active) .service-category header {
  background: var(--brand-gold-soft);
  border-bottom: 1px solid var(--border-subtle);
}

body:has(#app:not([hidden]) #services.view.active) .service-category h3,
body:has(#app:not([hidden]) #services.view.active) .service-category-toggle,
body:has(#app:not([hidden]) #services.view.active) .service-row {
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) #services.view.active) .service-category-toggle small,
body:has(#app:not([hidden]) #services.view.active) .service-row small {
  color: var(--text-secondary);
}

body:has(#app:not([hidden]) #services.view.active) .service-category-toggle i,
body:has(#app:not([hidden]) #services.view.active) .text-button {
  color: var(--warning);
}

body:has(#app:not([hidden]) #services.view.active) .danger-text {
  color: var(--danger);
}

body:has(#app:not([hidden]) #services.view.active) .service-row {
  border-top-color: var(--border-subtle);
}

body:has(#app:not([hidden]) #services.view.active) .service-row:hover {
  background: var(--brand-primary-pale);
}

body:has(#app:not([hidden]) #services.view.active) .service-resource-picker,
body:has(#app:not([hidden]) #services.view.active) .service-resource-picker #service-v2-resource-options {
  border-color: var(--border-default);
  background: var(--surface-primary);
}

body:has(#app:not([hidden]) #services.view.active) .service-resource-picker summary {
  color: var(--text-primary);
}

body:has(#app:not([hidden]) #services.view.active) .service-resource-picker summary::marker {
  color: var(--warning);
}

body:has(#app:not([hidden]) #employees.view.active) dialog .employee-form,
body:has(#app:not([hidden]) #clients.view.active) dialog .client-detail,
body:has(#app:not([hidden]) #clients.view.active) dialog .modal,
body:has(#app:not([hidden]) #services.view.active) dialog .service-form {
  font-family: var(--font-ui);
}

body:has(#app:not([hidden]) #employees.view.active) .button.danger,
body:has(#app:not([hidden]) #clients.view.active) .button.danger,
body:has(#app:not([hidden]) #services.view.active) .button.danger {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

body:has(#app:not([hidden]) #employees.view.active) input:focus-visible,
body:has(#app:not([hidden]) #employees.view.active) select:focus-visible,
body:has(#app:not([hidden]) #clients.view.active) input:focus-visible,
body:has(#app:not([hidden]) #clients.view.active) textarea:focus-visible,
body:has(#app:not([hidden]) #services.view.active) input:focus-visible,
body:has(#app:not([hidden]) #services.view.active) select:focus-visible {
  outline-color: var(--brand-primary);
}

@media (max-width: 760px) {
  body:has(#app:not([hidden]) #employees.view.active) .employee-form-actions,
  body:has(#app:not([hidden]) #services.view.active) .service-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  body:has(#app:not([hidden]) #employees.view.active) .employee-form-actions .button.primary,
  body:has(#app:not([hidden]) #services.view.active) .service-form-actions .button.primary {
    margin-left: 0;
  }
}