/* Official GISO button catalog. See BUTTON_STANDARDS.md.
 * Namespaced visual tokens preserve current values and theme selectors.
 * Compatibility aliases apply only to existing catalog consumers; legacy
 * theme/Bootstrap/mobile variables are deliberately not remapped.
 */
:root {
  --giso-ui-action-main-bg: #097C87;
  --giso-button-brand: var(--giso-ui-action-main-bg);
  --giso-ui-action-main-text: #ffffff;
  --giso-button-on-brand: var(--giso-ui-action-main-text);
  --giso-ui-surface: #ffffff;
  --giso-button-surface: var(--giso-ui-surface);
  --giso-ui-text: #10252A;
  --giso-button-text: var(--giso-ui-text);
  --giso-ui-border: #D8E7E8;
  --giso-button-border: var(--giso-ui-border);
  --giso-ui-interaction-soft: #EEF8F8;
  --giso-button-soft: var(--giso-ui-interaction-soft);
  --giso-ui-danger-text: #9B302B;
  --giso-button-danger: var(--giso-ui-danger-text);
  --giso-ui-danger-bg: #D95F59;
  --giso-button-danger-fill: var(--giso-ui-danger-bg);
  --giso-ui-danger-on-bg: #10252A;
  --giso-button-on-danger: var(--giso-ui-danger-on-bg);
  --giso-ui-action-main-hover-bg: #076771;
  --giso-button-brand-hover: var(--giso-ui-action-main-hover-bg);
  --giso-ui-text-muted: #60757B;
  --giso-header-muted: var(--giso-ui-text-muted);
  --giso-ui-menu-shadow: 0 10px 24px #10252A1A;
  --giso-menu-shadow: var(--giso-ui-menu-shadow);
  --giso-ui-button-radius: 12px;
  --giso-button-radius: var(--giso-ui-button-radius);
  --giso-ui-button-height: 44px;
  --giso-button-height: var(--giso-ui-button-height);
}
html[data-theme="dark"] {
  --giso-ui-action-main-bg: #23CED9;
  --giso-button-brand: var(--giso-ui-action-main-bg);
  --giso-ui-action-main-text: #10252A;
  --giso-button-on-brand: var(--giso-ui-action-main-text);
  --giso-ui-surface: #102A30;
  --giso-button-surface: var(--giso-ui-surface);
  --giso-ui-text: #EEF9FA;
  --giso-button-text: var(--giso-ui-text);
  --giso-ui-border: #24535A;
  --giso-button-border: var(--giso-ui-border);
  --giso-ui-interaction-soft: #15383F;
  --giso-button-soft: var(--giso-ui-interaction-soft);
  --giso-ui-danger-text: #D95F59;
  --giso-button-danger: var(--giso-ui-danger-text);
  --giso-ui-action-main-hover-bg: #23CED9;
  --giso-button-brand-hover: var(--giso-ui-action-main-hover-bg);
  --giso-ui-text-muted: #ABC9CE;
  --giso-header-muted: var(--giso-ui-text-muted);
  --giso-ui-menu-shadow: 0 10px 24px #00000040;
  --giso-menu-shadow: var(--giso-ui-menu-shadow);
  --giso-ui-danger-on-bg: #10252A;
  --giso-button-on-danger: var(--giso-ui-danger-on-bg);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --giso-ui-action-main-bg: #23CED9;
    --giso-button-brand: var(--giso-ui-action-main-bg);
    --giso-ui-action-main-text: #10252A;
    --giso-button-on-brand: var(--giso-ui-action-main-text);
    --giso-ui-surface: #102A30;
    --giso-button-surface: var(--giso-ui-surface);
    --giso-ui-text: #EEF9FA;
    --giso-button-text: var(--giso-ui-text);
    --giso-ui-border: #24535A;
    --giso-button-border: var(--giso-ui-border);
    --giso-ui-interaction-soft: #15383F;
    --giso-button-soft: var(--giso-ui-interaction-soft);
    --giso-ui-danger-text: #D95F59;
    --giso-button-danger: var(--giso-ui-danger-text);
    --giso-ui-action-main-hover-bg: #23CED9;
    --giso-button-brand-hover: var(--giso-ui-action-main-hover-bg);
    --giso-ui-text-muted: #ABC9CE;
    --giso-header-muted: var(--giso-ui-text-muted);
    --giso-ui-menu-shadow: 0 10px 24px #00000040;
    --giso-menu-shadow: var(--giso-ui-menu-shadow);
    --giso-ui-danger-on-bg: #10252A;
    --giso-button-on-danger: var(--giso-ui-danger-on-bg);
  }
}
.giso-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--giso-button-height);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--giso-button-radius);
  background: transparent;
  color: var(--giso-button-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.giso-button .pi { font-size: 16px; }
.giso-button--main,
.giso-button--selection[aria-pressed="true"] {
  background: var(--giso-button-brand);
  color: var(--giso-button-on-brand);
  border-color: var(--giso-button-brand);
}
.giso-button--supporting,
.giso-button--selection,
.giso-button--utility {
  background: var(--giso-button-surface);
  border-color: var(--giso-button-border);
}
.giso-button--sub { color: var(--giso-button-brand); padding-inline: 10px; }
.giso-button--danger {
  color: var(--giso-button-danger);
  border-color: var(--giso-button-danger-fill);
}
.giso-button--danger-confirm {
  background: var(--giso-button-danger-fill);
  color: var(--giso-button-on-danger);
  border-color: var(--giso-button-danger-fill);
}
.giso-button--utility { min-width: 44px; padding: 0; }
.giso-button--compact { min-height: 36px; padding-inline: 12px; }
/* Exact hover colors: never synthesize lighter button fills. */
.giso-button:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--giso-button-soft);
  color: var(--giso-button-text);
  text-decoration: none;
}
.giso-button--main:not(:disabled):not([aria-disabled="true"]):hover,
.giso-button--main:not(:disabled):not([aria-disabled="true"]):active,
.giso-button--selection[aria-pressed="true"]:hover {
  background: var(--giso-button-brand-hover);
  color: var(--giso-button-on-brand);
}
.giso-button--danger:hover { color: var(--giso-button-danger); }
.giso-button--danger-confirm:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--giso-button-danger-fill);
  color: var(--giso-button-on-danger);
}
.giso-button:focus-visible { outline: 3px solid var(--giso-button-brand); outline-offset: 3px; }
.giso-button:disabled,
.giso-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.giso-button[hidden] { display: none; }
.giso-button-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
@media (pointer: coarse) { .giso-button--compact { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .giso-button { transition: none; } }

/* Shared page header: identity left, supporting -> main -> More right. */
.giso-page-header-shell {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 24px;
  border: 1px solid var(--giso-button-border);
  border-radius: 18px;
  background: var(--giso-button-surface);
  color: var(--giso-button-text);
}
.giso-page-header__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--giso-header-muted);
}
.giso-page-header__breadcrumb a { color: var(--giso-button-brand); text-decoration: none; }
.giso-page-header__breadcrumb a:hover { text-decoration: underline; }
.giso-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.giso-page-header > :first-child { flex: 1; min-width: 0; }
.giso-page-header__title {
  margin: 0;
  color: var(--giso-button-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.6px;
  overflow-wrap: anywhere;
}
.giso-page-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.giso-page-header__actions > .dropdown { position: relative; }
.giso-action-menu {
  width: 240px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--giso-button-border);
  border-radius: 16px;
  background: var(--giso-button-surface);
  color: var(--giso-button-text);
  box-shadow: var(--giso-menu-shadow);
}
.giso-action-menu > li { list-style: none; }
.giso-action-menu__heading { padding: 10px 12px; font-size: 12px; font-weight: 600; }
.giso-action-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--giso-button-text);
  font-size: 14px;
  white-space: normal;
  text-decoration: none;
}
.giso-action-menu__item .pi { font-size: 16px; flex-shrink: 0; }
.giso-action-menu__item:hover,
.giso-action-menu__item:focus-visible {
  background: var(--giso-button-soft);
  color: var(--giso-button-text);
}
.giso-action-menu__item:focus-visible,
.giso-page-header__breadcrumb a:focus-visible {
  outline: 3px solid var(--giso-button-brand);
  outline-offset: 2px;
}
.giso-action-menu__footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--giso-button-border); }
.giso-action-menu__item--danger,
.giso-action-menu__item--danger:hover,
.giso-action-menu__item--danger:focus-visible { color: var(--giso-button-danger); }
@media (max-width: 767.98px) {
  .giso-page-header-shell { padding: 20px 16px; }
  .giso-page-header { flex-direction: column; align-items: stretch; }
  .giso-page-header__actions { justify-content: flex-start; width: 100%; }
  .giso-page-header__title { font-size: 24px; }
}

/* Keep the existing Person profile photo dimensions during header migration. */
.person-profile-page .giso-page-header .profile-avatar { width: 8rem; height: 8rem; font-size: 1.75rem; }
.person-profile-page .giso-page-header .profile-identity-block--with-avatar { gap: 1.4rem; }
@media (max-width: 991.98px) {
  .person-profile-page .giso-page-header .profile-avatar { width: 6.5rem; height: 6.5rem; }
}
@media (max-width: 575.98px) {
  .person-profile-page .giso-page-header .profile-avatar { width: 4.75rem; height: 4.75rem; }
  .person-profile-page .giso-page-header .profile-identity-block--with-avatar { gap: 1rem; }
}