:root {
  --personastack-vanilla: #12122a;
  --personastack-sage: #9ca3af;
  --personastack-cream: #0a0a14;
  --personastack-blue: #3374ff;
  --personastack-apricot: #1b52f5;
  --personastack-input-bg: #161628;
  --personastack-blue-rgb: 51, 116, 255;
  --personastack-evergreen: #e5e7eb;
  --personastack-evergreen-rgb: 229, 231, 235;
  --personastack-status-green: #2e7d32;
  --personastack-status-green-rgb: 46, 125, 50;
  --personastack-status-red: #b42318;
  --personastack-status-red-rgb: 180, 35, 24;
  --bs-body-bg: var(--personastack-cream);
  --bs-body-color: var(--personastack-evergreen);
  --bs-body-color-rgb: var(--personastack-evergreen-rgb);
  --bs-primary: var(--personastack-blue);
  --bs-primary-rgb: var(--personastack-blue-rgb);
  --bs-secondary: var(--personastack-sage);
  --bs-secondary-rgb: 156, 163, 175;
  --bs-success: var(--personastack-status-green);
  --bs-success-rgb: var(--personastack-status-green-rgb);
  --bs-info: var(--personastack-blue);
  --bs-info-rgb: var(--personastack-blue-rgb);
  --bs-warning: var(--personastack-apricot);
  --bs-warning-rgb: 27, 82, 245;
  --bs-danger: var(--personastack-status-red);
  --bs-danger-rgb: var(--personastack-status-red-rgb);
  --bs-light: var(--personastack-vanilla);
  --bs-light-rgb: 18, 18, 42;
  --bs-dark: var(--personastack-evergreen);
  --bs-dark-rgb: var(--personastack-evergreen-rgb);
  --bs-link-color: var(--personastack-blue);
  --bs-link-hover-color: var(--personastack-evergreen);
  --bs-secondary-color: var(--personastack-evergreen);
  --bs-secondary-color-rgb: var(--personastack-evergreen-rgb);
  --bs-tertiary-bg: var(--personastack-vanilla);
  --bs-tertiary-bg-rgb: 18, 18, 42;
  --bs-border-color: rgba(255, 255, 255, 0.08);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-card-bg: var(--personastack-vanilla);
  --bs-card-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-bg: var(--personastack-vanilla);
}

html,
body {
  min-height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--personastack-cream);
  color: var(--personastack-evergreen);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--personastack-blue);
}

a:hover {
  color: var(--personastack-evergreen);
}

.bg-light,
.bg-body {
  background-color: var(--personastack-cream) !important;
}

.field-error {
  color: #fca5a5;
  font-size: 0.875rem;
  margin-top: 0.35rem;
  min-height: 1.1rem;
}

.password-rules {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
  color: var(--personastack-sage);
  font-size: 0.75rem;
  line-height: 1.5;
}

.password-rule {
  margin-top: 0.15rem;
}

.password-rule.rule-met {
  color: #166534;
}

.password-rule.rule-unmet {
  color: var(--personastack-sage);
}

.panel-add-btn,
.container.py-4 > .panel-page-header .panel-add-btn,
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn {
  background: rgba(51, 116, 255, 0.08);
  border: 1px solid rgba(51, 116, 255, 0.25);
  border-radius: 0.5rem;
  color: #599aff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.4375rem 0.875rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible,
.container.py-4 > .panel-page-header .panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.container.py-4 > .panel-page-header .panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible,
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: rgba(51, 116, 255, 0.15);
  border-color: rgba(51, 116, 255, 0.45);
  color: #ffffff;
}

.panel-add-btn:disabled,
.panel-add-btn.disabled,
.panel-add-btn[aria-disabled="true"],
.container.py-4 > .panel-page-header .panel-add-btn:disabled,
.container.py-4 > .panel-page-header .panel-add-btn.disabled,
.container.py-4 > .panel-page-header .panel-add-btn[aria-disabled="true"],
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn:disabled,
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn.disabled,
.container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.integration-config-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.integration-config-panel {
  background: rgba(18, 18, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
}

.integration-config-panel-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
}

.integration-config-panel-title {
  color: #f3f4f6;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.integration-config-panel-meta {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.integration-config-panel-body {
  padding: 1.25rem;
}

.integration-config-action-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 1rem;
  padding-top: 1rem;
}

.integration-config-empty {
  align-items: center;
  background: rgba(18, 18, 42, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  min-height: 11rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

.integration-config-empty-title {
  color: #f3f4f6;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
}

.integration-config-empty-copy {
  color: #9ca3af;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
  max-width: 34rem;
}

.integration-config-empty .panel-add-btn {
  font-size: 0.875rem;
  justify-content: center;
  margin-top: 0.25rem;
  min-width: 12rem;
  padding: 0.625rem 1rem;
}

/* Unified toast semantic tones across all pages and local toast variants. */
.toast.text-bg-success,
.toast-success,
.toast.stacks-toast-success,
.toast.user-management-toast-success {
  background-color: var(--personastack-status-green) !important;
  border-color: rgba(var(--personastack-status-green-rgb), 0.92) !important;
  color: #ffffff !important;
}

.toast.text-bg-danger,
.toast-error,
.toast.user-management-toast-error {
  background-color: var(--personastack-status-red) !important;
  border-color: rgba(var(--personastack-status-red-rgb), 0.92) !important;
  color: #ffffff !important;
}

.toast.text-bg-success .toast-body,
.toast-success .toast-body,
.toast.stacks-toast-success .toast-body,
.toast.user-management-toast-success .toast-body,
.toast.text-bg-danger .toast-body,
.toast-error .toast-body,
.toast.user-management-toast-error .toast-body {
  color: #ffffff !important;
}

.toast.text-bg-success .btn-close,
.toast-success .btn-close,
.toast.stacks-toast-success .btn-close,
.toast.user-management-toast-success .btn-close,
.toast.text-bg-danger .btn-close,
.toast-error .btn-close,
.toast.user-management-toast-error .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}

/* Phase 1: Lightbox Unification Refactor - Ps Modal Styles */
:root {
  --ps-lightbox-backdrop: rgba(0, 0, 0, 0.65);
  --ps-lightbox-border: rgba(255, 255, 255, 0.1);
  --ps-lightbox-radius: 0.5rem;
  --ps-lightbox-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
  --ps-lightbox-surface: #12122a;
  --ps-lightbox-z-index: 1080;
}

.modal {
  z-index: calc(var(--ps-lightbox-z-index) + 20) !important;
}

.modal-backdrop {
  z-index: calc(var(--ps-lightbox-z-index) + 10) !important;
}

.modal-content {
  background: var(--ps-lightbox-surface) !important;
  color: #e5e7eb;
  border: 1px solid var(--ps-lightbox-border) !important;
  border-radius: var(--ps-lightbox-radius);
  box-shadow: var(--ps-lightbox-shadow) !important;
}

.modal .btn-close {
  filter: invert(1);
}

.ps-lightbox-dismiss-cue {
  animation: ps-lightbox-dismiss-cue 180ms ease-in-out 0s 2;
}

.ps-lightbox-close-cue {
  animation: ps-lightbox-close-cue 220ms ease-in-out 0s 2;
}

@keyframes ps-lightbox-dismiss-cue {
  0%, 100% {
    transform: translateX(0);
    border-color: rgba(255, 255, 255, 0.1);
  }
  25% {
    transform: translateX(-4px);
    border-color: rgba(51, 116, 255, 0.9);
  }
  75% {
    transform: translateX(4px);
    border-color: rgba(51, 116, 255, 0.9);
  }
}

@keyframes ps-lightbox-close-cue {
  0%, 100% {
    box-shadow: none;
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 0 0.25rem rgba(51, 116, 255, 0.35);
    opacity: 1;
  }
}

/* Global Backdrop tweak for Phase 1 unification. */
.modal-backdrop {
  opacity: 0.65 !important;
}

.admin-page-content,
.admin-page-content * {
  min-width: 0;
}

.admin-page-content img,
.admin-page-content svg,
.admin-page-content canvas,
.admin-page-content video,
.admin-page-content iframe,
.admin-page-content pre {
  max-width: 100%;
}

.integration-association-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #f59e0b;
  border-radius: 0.5rem;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.integration-association-warning--persona {
  margin: 0 0 1.25rem;
}

.integration-association-warning-icon {
  flex: 0 0 auto;
  line-height: 1.2;
}

.table-responsive,
.catalog-table-wrap,
.billing-table-wrap,
.history-table-wrap,
.admin-billing-table-wrap,
.cron-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
  .container.py-4.admin-page-content,
  .admin-page-content.container {
    width: 100%;
    max-width: 100% !important;
    padding: 3.25rem 0.875rem 1.25rem !important;
  }

  .container.py-4 > .panel-page-header,
  .container.py-4 > .admin-page-header,
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap {
    align-items: stretch !important;
    gap: 0.9rem !important;
  }

  .container.py-4 > .panel-page-header > *,
  .container.py-4 > .admin-page-header > * {
    min-width: 0;
  }

  .container.py-4 > .panel-page-header > :first-child,
  .container.py-4 > .admin-page-header > :first-child,
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > :first-child {
    margin-top: 1.5rem;
    max-width: 100%;
  }

  .panel-page-title,
  .admin-page-title,
  .container.py-4 > .panel-page-header h1,
  .container.py-4 > .admin-page-header h1 {
    overflow-wrap: anywhere;
  }

  .panel-add-btn,
  .container.py-4 > .panel-page-header .panel-add-btn,
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap .panel-add-btn {
    white-space: normal;
  }

  .container.py-4 > .panel-page-header > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)),
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) {
    min-width: 0;
    width: 100% !important;
  }

  .container.py-4 > .panel-page-header > .d-flex:not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)),
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > .d-flex:not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch !important;
  }

  .container.py-4 > .panel-page-header > form:not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)),
  .container.py-4 > .panel-page-header > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) form,
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > form:not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)),
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) form {
    min-width: 0;
    width: 100% !important;
  }

  .container.py-4 > .panel-page-header > :is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(:first-child):not(.admin-menu-button),
  .container.py-4 > .panel-page-header > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) :is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button),
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > :is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(:first-child):not(.admin-menu-button),
  .container.py-4 > .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap > :not(:first-child):has(:is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button)) :is(.panel-add-btn, [data-quota-blocked="integration-mutation"]):not(.admin-menu-button) {
    display: flex;
    justify-content: center;
    min-width: 0;
    text-align: center;
    width: 100% !important;
  }

  .integration-config-panel-header,
  .integration-config-panel-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .integration-config-empty .panel-add-btn {
    width: 100%;
  }

  .admin-page-content :is(.row, .d-flex, .btn-group, .input-group) {
    min-width: 0;
  }

  .admin-page-content :is(.btn-toolbar, .btn-group, .input-group, .pagination) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-page-content :is(input, select, textarea, button, .btn) {
    max-width: 100%;
  }

  .admin-page-content :is(pre, code, .cron-mono, .cron-prompt) {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .admin-page-content > .d-flex {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .container.py-4.admin-page-content,
  .admin-page-content.container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .admin-page-content :is(.panel, .card, .integration-card, .cluster-card, .trello-integration) {
    border-radius: 0.55rem;
  }
}