/* Единый бренд-слой CRM: только типографика и поверхности, без изменения логики журнала. */
body:has(#login-screen:not([hidden])),
body:has(#app:not([hidden])) {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body:has(#login-screen:not([hidden])) *,
body:has(#app:not([hidden])) .shell,
body:has(#app:not([hidden])) .shell * {
  font-family: var(--font-ui) !important;
}

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

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

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

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

/* Название салона и имя администратора используют основной цвет, как «Сегодня». */
body:has(#app:not([hidden])) .sidebar .logo span,
body:has(#app:not([hidden])) .profile b {
  color: var(--text-primary);
}

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

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

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

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

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

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

/* Онлайн-запись: компактные раскрывающиеся группы без изменения настроек. */
body:has(#app:not([hidden]) #online.active) .online-section.online-collapsible {
  display: block;
  padding: 0;
  overflow: hidden;
}

body:has(#app:not([hidden]) #online.active) .online-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font: 600 16px/1.25 var(--font-ui);
  text-align: left;
  cursor: pointer;
}

body:has(#app:not([hidden]) #online.active) .online-section-toggle:hover {
  background: var(--surface-primary);
}

body:has(#app:not([hidden]) #online.active) .online-section-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

body:has(#app:not([hidden]) #online.active) .online-section-toggle .overline,
body:has(#app:not([hidden]) #online.active) .online-section-title-text {
  display: block;
}

body:has(#app:not([hidden]) #online.active) .online-section-title-text {
  margin-top: var(--space-1);
}

body:has(#app:not([hidden]) #online.active) .online-section-chevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  transition: transform var(--motion-standard) var(--motion-easing);
}

body:has(#app:not([hidden]) #online.active) .online-collapsible.is-open .online-section-chevron {
  transform: rotate(180deg);
}

body:has(#app:not([hidden]) #online.active) .online-collapsible-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

body:has(#app:not([hidden]) #online.active) .online-collapsible-panel[hidden] {
  display: none;
}

body:has(#app:not([hidden])) .service-category header {
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-subtle);
}

body:has(#login-screen:not([hidden])) .login-card,
body:has(#app:not([hidden])) .employee-row,
body:has(#app:not([hidden])) .service-category,
body:has(#app:not([hidden])) .online-status,
body:has(#app:not([hidden])) .online-section,
body:has(#app:not([hidden])) .analytics-staff-row,
body:has(#app:not([hidden])) .finance-staff-row,
body:has(#app:not([hidden])) dialog .modal {
  border-radius: var(--radius-md);
}

body:has(#login-screen:not([hidden])) h1,
body:has(#app:not([hidden])) h1,
body:has(#app:not([hidden])) h2,
body:has(#app:not([hidden])) h3,
body:has(#app:not([hidden])) .metrics b,
body:has(#app:not([hidden])) .finance-strip b {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: 600;
}

body:has(#app:not([hidden])) .overline,
body:has(#app:not([hidden])) .metrics span,
body:has(#app:not([hidden])) small,
body:has(#app:not([hidden])) .subtle,
body:has(#app:not([hidden])) .analytics-staff-row span,
body:has(#app:not([hidden])) .finance-staff-row span {
  color: var(--text-secondary);
}

body:has(#app:not([hidden])) .service-row,
body:has(#app:not([hidden])) .client-row,
body:has(#app:not([hidden])) .visit,
body:has(#app:not([hidden])) .client-visit {
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

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

body:has(#app:not([hidden])) input,
body:has(#app:not([hidden])) select,
body:has(#app:not([hidden])) textarea,
body:has(#app:not([hidden])) .service-resource-picker,
body:has(#app:not([hidden])) .booking-client-results > button,
body:has(#app:not([hidden])) .booking-new-client {
  background: var(--surface-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

body:has(#app:not([hidden])) .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])) .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])) :focus-visible,
body:has(#login-screen:not([hidden])) :focus-visible {
  outline-color: var(--brand-primary);
}

/* Спокойные интерактивные элементы: выделение только границей, без розовой заливки. */
body:has(#app:not([hidden])) input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

body:has(#app:not([hidden])) input[type="checkbox"]:hover,
body:has(#app:not([hidden])) input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--brand-primary);
  outline-offset: 2px;
}

body:has(#app:not([hidden])) .employee-row:hover,
body:has(#app:not([hidden])) .client-row:hover,
body:has(#app:not([hidden])) .service-category:hover,
body:has(#app:not([hidden])) .service-row:hover,
body:has(#app:not([hidden])) .analytics-staff-row:hover,
body:has(#app:not([hidden])) .finance-staff-row:hover,
body:has(#app:not([hidden])) .online-row:hover,
body:has(#app:not([hidden])) .client-visit:hover {
  background: var(--surface-primary);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-xs);
}

body:has(#app:not([hidden])) .client-visit:hover {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body:has(#app:not([hidden])) #analytics .metrics article,
body:has(#app:not([hidden])) #finance .metrics article {
  display: grid;
  min-height: 118px;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  box-shadow: none;
}

body:has(#app:not([hidden])) #analytics .metrics article:hover,
body:has(#app:not([hidden])) #finance .metrics article:hover {
  border-color: var(--brand-primary);
  background: var(--surface-primary);
  box-shadow: var(--shadow-xs);
}

body:has(#app:not([hidden])) #analytics .metrics article span,
body:has(#app:not([hidden])) #finance .metrics article span {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

body:has(#app:not([hidden])) #analytics .metrics article b,
body:has(#app:not([hidden])) #finance .metrics article b {
  margin: 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}

body:has(#app:not([hidden])) #services .service-category,
body:has(#app:not([hidden])) #services .service-category header {
  background: var(--surface-primary);
}

body:has(#app:not([hidden])) #services .service-category-actions .button.ghost {
  background: var(--surface-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

body:has(#app:not([hidden])) #services .service-category-actions .text-button {
  color: var(--text-secondary);
}

body:has(#app:not([hidden])) #services .service-category-actions .text-button:hover,
body:has(#app:not([hidden])) #services .service-category-actions .button.ghost:hover {
  border-color: var(--brand-primary);
  background: var(--surface-primary);
  color: var(--brand-primary);
}

body:has(#app:not([hidden])) #services .service-category-actions .danger-text,
body:has(#app:not([hidden])) #services .service-category-actions .danger-text:hover {
  color: var(--danger);
}

/* Прямые селекторы повторяют ключевые правила без зависимости от :has(). */
#app:not([hidden]) input[type="checkbox"] {
  accent-color: var(--brand-primary);
}

#app:not([hidden]) .employee-row:hover,
#app:not([hidden]) .client-row:hover,
#app:not([hidden]) .service-category:hover,
#app:not([hidden]) .service-row:hover,
#app:not([hidden]) .analytics-staff-row:hover,
#app:not([hidden]) .finance-staff-row:hover,
#app:not([hidden]) .online-row:hover,
#app:not([hidden]) .client-visit:hover,
#app:not([hidden]) #analytics .metrics article:hover,
#app:not([hidden]) #finance .metrics article:hover {
  background: var(--surface-primary);
  border-color: var(--brand-primary);
}

#app:not([hidden]) #analytics .metrics article,
#app:not([hidden]) #finance .metrics article {
  min-height: 118px;
  padding: var(--space-5);
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}

#app:not([hidden]) #analytics .metrics article b,
#app:not([hidden]) #finance .metrics article b {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

#app:not([hidden]) #services .service-category,
#app:not([hidden]) #services .service-category header {
  background: var(--surface-primary);
}

/* Клиенты: тот же hover, что у карточек сотрудников. */
body:has(#app:not([hidden]) #clients.view.active) .client-row:hover {
  background: var(--surface-primary);
  border-color: var(--border-subtle);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

body:has(#app:not([hidden]) #clients.view.active) .client-row:first-child:hover {
  border-top-left-radius: calc(var(--radius-md) - 1px);
  border-top-right-radius: calc(var(--radius-md) - 1px);
}

body:has(#app:not([hidden]) #clients.view.active) .client-row:last-child:hover {
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
}

/* Услуги: точное переопределение прежней кремово-жёлтой категории. */
body:has(#app:not([hidden]) #services.view.active) .service-category,
body:has(#app:not([hidden]) #services.view.active) .service-category header {
  background: var(--surface-primary) !important;
  border-color: var(--border-subtle);
}

body:has(#app:not([hidden]) #services.view.active) .service-category:hover {
  background: var(--surface-primary) !important;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-xs);
}

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

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

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

/* Клиенты оформлены самостоятельными карточками — как сотрудники. */
body:has(#app:not([hidden]) #clients.view.active) #client-list.list-card {
  display: grid;
  gap: var(--space-3);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body:has(#app:not([hidden]) #clients.view.active) #client-list .client-row,
body:has(#app:not([hidden]) #clients.view.active) #client-list .client-row:last-child {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}

body:has(#app:not([hidden]) #clients.view.active) #client-list .client-row:hover {
  border-color: var(--brand-primary);
  border-radius: var(--radius-md);
  outline: 0;
  box-shadow: var(--shadow-xs);
}

/* Рабочие разделы прокручиваются в общей области, sidebar остаётся на месте. */
body:has(#app:not([hidden]) #employees.view.active) main,
body:has(#app:not([hidden]) #clients.view.active) main,
body:has(#app:not([hidden]) #analytics.view.active) main,
body:has(#app:not([hidden]) #finance.view.active) main,
body:has(#app:not([hidden]) #services.view.active) main {
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body:has(#app:not([hidden]) #services.view.active) .services-catalog {
  max-height: none;
  overflow: visible;
}

body:has(#app:not([hidden]) #clients.view.active) main {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}