/* Shared iOS-style controls for portal, client, admin and static dashboard pages. */
:root {
  --ui-brand: #E10000;
  --ui-brand-hover: #C90000;
  --ui-brand-active: #B80000;
  --ui-brand-soft: rgba(225, 0, 0, .08);
  --ui-brand-border: rgba(225, 0, 0, .22);
  --ui-focus-ring: rgba(225, 0, 0, .24);
  --ui-button-radius: 12px;
  --ui-topbar-radius: 999px;
  --ui-button-height: 38px;
  --ui-compact-button-height: 34px;
  --ui-button-shadow: 0 7px 16px rgba(225, 0, 0, .13);
}

/* Keep the header action layer above page decoration and passive overlays. */
.header {
  isolation: isolate;
  z-index: 1000;
}
.header-inner {
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}
.header-inner > .portal-favorites-link,
.header-inner > .portal-feedback-trigger,
.header-inner > .theme-palette-host,
.header-inner > .portal-account {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.portal-favorites-link,
.portal-feedback-trigger,
.theme-palette-trigger,
.portal-account-trigger {
  pointer-events: auto;
  touch-action: manipulation;
}

@media (min-width: 761px) {
  .header-inner > .brand { margin-right: auto; }
}

/* Hidden dialogs must never leave a full-screen hit area behind the header. */
.home-update-notice-modal[hidden],
.home-hf-modal[hidden],
.research-coming-soon-modal[hidden],
.portal-feedback-modal[hidden],
.portal-profile-modal[hidden],
.portal-account-menu[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* A closed modal can briefly lose its `hidden` attribute while its fade-out
   transition runs. Keep that transparent full-screen layer inert until the
   open state is explicit, so it cannot swallow header clicks. */
.home-update-notice-modal,
.research-coming-soon-modal,
.portal-feedback-modal,
.portal-profile-modal {
  pointer-events: none;
}

.home-update-notice-modal.is-open,
.research-coming-soon-modal.is-open,
.portal-feedback-modal.is-open,
.portal-profile-modal.is-open {
  pointer-events: auto;
}

/* Header actions: feedback, palette and account use one shared capsule. */
.portal-favorites-link,
.portal-feedback-trigger,
.portal-account-trigger,
.theme-palette-trigger {
  min-height: var(--ui-button-height) !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-brand-border) !important;
  border-radius: var(--ui-topbar-radius) !important;
  background: rgba(255, 253, 249, .92) !important;
  color: var(--ui-brand) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  transform: none;
}

.portal-favorites-link:hover,
.portal-favorites-link:focus-visible,
.portal-feedback-trigger:hover,
.portal-feedback-trigger:focus-visible,
.portal-account-trigger:hover,
.portal-account.open .portal-account-trigger,
.theme-palette-trigger:hover,
.theme-palette-trigger:focus-visible {
  border-color: var(--ui-brand) !important;
  background: var(--ui-brand-soft) !important;
  color: var(--ui-brand) !important;
  box-shadow: 0 7px 16px rgba(225, 0, 0, .10) !important;
  transform: translateY(-1px);
  filter: none !important;
}

/* Standard primary/secondary buttons. */
.client-button,
.actions a.primary,
.actions a.secondary,
.research-access-actions a,
.portal-feedback-actions button,
.portal-feedback-done,
.theme-palette-actions button,
.feedback-admin-tools button,
.feedback-admin-actions button,
.feedback-review-dialog button,
.review-tools button,
.row-actions button,
.filters button {
  min-height: var(--ui-button-height) !important;
  padding: 0 14px !important;
  border-radius: var(--ui-button-radius) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}

.client-button:not(.secondary),
.actions a.primary,
.research-access-actions a:first-child,
.portal-feedback-submit,
.portal-feedback-done,
.theme-palette-actions button:last-child,
.feedback-admin-tools button,
.feedback-admin-actions button.primary,
.feedback-review-dialog button.primary,
.row-actions button.primary,
.filters button {
  border: 1px solid var(--ui-brand) !important;
  background: var(--ui-brand) !important;
  color: #fff !important;
  box-shadow: var(--ui-button-shadow) !important;
}

.client-button.secondary,
.actions a.secondary,
.research-access-actions a:not(:first-child),
.portal-feedback-cancel,
.theme-palette-actions button:first-child,
.feedback-review-dialog button.secondary,
.row-actions button:not(.primary) {
  border: 1px solid var(--ui-brand-border) !important;
  background: rgba(255, 253, 249, .92) !important;
  color: var(--ui-brand) !important;
  box-shadow: none !important;
}

.client-button:not(.secondary):hover:not(:disabled),
.actions a.primary:hover,
.research-access-actions a:first-child:hover,
.portal-feedback-submit:hover:not(:disabled),
.portal-feedback-done:hover:not(:disabled),
.theme-palette-actions button:last-child:hover,
.feedback-admin-tools button:hover,
.feedback-admin-actions button.primary:hover,
.feedback-review-dialog button.primary:hover,
.row-actions button.primary:hover,
.filters button:hover {
  border-color: var(--ui-brand-hover) !important;
  background: var(--ui-brand-hover) !important;
  box-shadow: 0 9px 18px rgba(225, 0, 0, .16) !important;
  transform: translateY(-1px);
}

.client-button.secondary:hover:not(:disabled),
.actions a.secondary:hover,
.research-access-actions a:not(:first-child):hover,
.portal-feedback-cancel:hover,
.theme-palette-actions button:first-child:hover,
.feedback-review-dialog button.secondary:hover,
.row-actions button:not(.primary):hover {
  border-color: var(--ui-brand) !important;
  background: var(--ui-brand-soft) !important;
  color: var(--ui-brand) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.client-button:active:not(:disabled),
.portal-feedback-actions button:active:not(:disabled),
.theme-palette-actions button:active,
.feedback-admin-tools button:active,
.feedback-admin-actions button:active,
.feedback-review-dialog button:active,
.row-actions button:active,
.filters button:active {
  background: var(--ui-brand-active) !important;
  border-color: var(--ui-brand-active) !important;
  box-shadow: 0 4px 10px rgba(225, 0, 0, .12) !important;
  transform: translateY(0);
}

.client-button:disabled,
.portal-feedback-actions button:disabled,
.theme-palette-actions button:disabled,
.feedback-admin-tools button:disabled,
.feedback-admin-actions button:disabled,
.feedback-review-dialog button:disabled,
.row-actions button:disabled,
.filters button:disabled {
  opacity: .6;
  cursor: wait;
  transform: none !important;
  box-shadow: none !important;
}

/* Compact toolbar and row actions use the same radius, only a smaller height. */
.theme-palette-actions button,
.feedback-admin-actions button,
.feedback-review-dialog button,
.row-actions button {
  min-height: var(--ui-compact-button-height) !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}

.portal-account-menu button {
  min-height: var(--ui-compact-button-height);
  padding: 0 10px !important;
  border-radius: var(--ui-button-radius) !important;
  color: #4b342b;
}

.portal-account-menu button:hover,
.portal-account-menu button:focus-visible {
  background: var(--ui-brand-soft) !important;
  color: var(--ui-brand) !important;
}

.portal-account-menu button + button {
  border-radius: var(--ui-button-radius) !important;
  color: var(--ui-brand) !important;
}

/* Inputs/selects that sit beside actions follow the same control radius. */
.theme-palette-row input,
.feedback-admin-tools select,
.feedback-admin-tools input,
.review-tools select,
.review-tools input,
.filters input,
.filters select {
  border-radius: var(--ui-button-radius) !important;
}

/* Icon-only close controls intentionally remain circular. */
.portal-feedback-close,
.portal-profile-close,
.theme-palette-close,
.feedback-review-close,
.analytics-modal-close,
.research-chart-modal-close {
  border-radius: 50% !important;
  color: var(--ui-brand) !important;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ui-focus-ring) !important;
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .portal-favorites-link,
  .portal-feedback-trigger,
  .portal-account-trigger,
  .theme-palette-trigger {
    min-height: 34px !important;
    padding-inline: 11px !important;
  }

  .client-button,
  .portal-feedback-actions button,
  .portal-feedback-done,
  .feedback-admin-tools button,
  .filters button {
    min-height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-favorites-link,
  .portal-feedback-trigger,
  .portal-account-trigger,
  .theme-palette-trigger,
  .client-button,
  .portal-feedback-actions button,
  .theme-palette-actions button,
  .feedback-admin-tools button,
  .feedback-admin-actions button,
  .feedback-review-dialog button,
  .row-actions button,
  .filters button {
    transition: none !important;
  }
}