/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/panel.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/* ============================================================
 * Panel Base Layout Container
 * ============================================================ */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--size-100pct);
  min-width: 0;
  max-width: var(--size-100pct);
  max-inline-size: var(--size-100pct);
  box-sizing: border-box;
  container-type: inline-size;
  color: var(--text-primary);
  height: var(--size-100pct);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: var(--space-12px);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-soft);
  background: var(--modal-surface-elevated);
}

.panel__main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.popup {
  position: relative;
  width: var(--size-100pct);
  min-width: 0;
}

.popup--top-right {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--top-left {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--bottom-right {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--bottom-left {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--bottom-center {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--center {
  position: fixed;
  z-index: var(--z-overlay);
  width: var(--width-400px);
  max-width: calc(100% - (var(--space-9px) * 2));
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.popup--top-right {
  top: var(--space-9px);
  right: var(--space-9px);
}

.popup--top-left {
  top: var(--space-9px);
  left: var(--space-9px);
}

.popup--bottom-right {
  bottom: var(--space-9px);
  right: var(--space-9px);
}

.popup--bottom-left {
  bottom: var(--space-9px);
  left: var(--space-9px);
}

.popup--top-right {
  bottom: auto;
}

.popup--top-left {
  bottom: auto;
}

.popup--center {
  bottom: auto;
}

.popup--top-right {
  left: auto;
}

.popup--bottom-right {
  left: auto;
}

.popup--top-left {
  right: auto;
}

.popup--bottom-left {
  right: auto;
}

.popup--bottom-center {
  right: auto;
}

.popup--center {
  right: auto;
}

.popup--bottom-right {
  top: auto;
}

.popup--bottom-left {
  top: auto;
}

.popup--bottom-center {
  top: auto;
}

.popup--bottom-center {
  bottom: var(--space-9px);
  left: var(--position-center-inline);
  transform: translateX(var(--offset-center-inline));
}

.popup--center {
  top: var(--position-center-block);
  left: var(--position-center-inline);
  transform: translate(var(--offset-center-inline), var(--offset-center-block));
}

.panel {
  border-color: var(--soft-teal);
}

.panel__skin--glass-teal {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow-y: visible;
  background: var(--white-glass-medium-30);
  backdrop-filter: var(--backdrop-glass-light);
  border: var(--input-border-width-thin) solid var(--white-glass-light-20);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-moderate);
  transition:
    background var(--animation-quick) var(--easing-smooth),
    box-shadow var(--animation-quick) var(--easing-smooth);
  z-index: var(--z-nav);
  --_form-section-border: none;
  --_form-section-border-radius: 0;
  --_form-section-bg: transparent;
  --_form-section-mb: 0;
  --_form-section-heading-display: none;
  --_form-section-instructions-display: none;
  --_form-section-body-cols: minmax(0, 1fr);
  --_form-row-item-semantic-col: 1 / -1;
  --_alert-margin: 0 0 var(--space-9px) 0;
  --_alert-padding: var(--space-3px) var(--space-9px);
  --_alert-border-radius: var(--radius-standard);
  --_alert-font-size: var(--font-size-13);
  --_alert-line-height: var(--line-height-relaxed);
}

.panel__skin--dark {
  color: var(--text-on-dark);
  background:
    linear-gradient(165deg, rgb(79 99 112 / 98%) 0%, rgb(70 89 103 / 98%) 58%, rgb(63 82 95 / 98%) 100%);
  border: var(--input-border-width-thin) solid var(--white-glass-strong-40);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-moderate);
  --text-color-primary: var(--text-color-on-dark);
  --text-color-secondary: var(--text-color-on-dark);
  --text-color-muted: var(--text-color-on-dark-muted);
  --text-color-disabled: var(--text-color-on-dark-muted);
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-color-on-dark);
  --text-muted: var(--text-color-on-dark-muted);
  --text-emphasis: var(--text-on-dark);
  --text-disabled: var(--text-color-on-dark-muted);
  --_form-section-border: none;
  --_form-section-border-radius: 0;
  --_form-section-bg: transparent;
  --_form-section-mb: 0;
  --_form-section-heading-display: none;
  --_form-section-instructions-display: none;
  --_form-section-body-cols: minmax(0, 1fr);
  --_form-row-item-semantic-col: 1 / -1;
  --_alert-margin: 0 0 var(--space-9px) 0;
  --_alert-padding: var(--space-3px) var(--space-9px);
  --_alert-border-radius: var(--radius-standard);
  --_alert-font-size: var(--font-size-13);
  --_alert-line-height: var(--line-height-relaxed);
}

.panel__skin--info {
  color: var(--text-on-dark);
  background: var(--deep-teal);
  border: var(--input-border-width-thin) solid var(--vibrant-teal);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-moderate);
  --text-color-primary: var(--text-color-on-dark);
  --text-color-secondary: var(--text-color-on-dark);
  --text-color-muted: var(--text-color-on-dark-muted);
  --text-color-disabled: var(--text-color-on-dark-muted);
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-color-on-dark);
  --text-muted: var(--text-color-on-dark-muted);
  --text-emphasis: var(--text-on-dark);
  --text-disabled: var(--text-color-on-dark-muted);
}

.panel__skin--success {
  color: var(--text-on-dark);
  background: var(--strong-teal);
  border: var(--input-border-width-thin) solid var(--accent-teal);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-moderate);
  --text-color-primary: var(--text-color-on-dark);
  --text-color-secondary: var(--text-color-on-dark);
  --text-color-muted: var(--text-color-on-dark-muted);
  --text-color-disabled: var(--text-color-on-dark-muted);
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-color-on-dark);
  --text-muted: var(--text-color-on-dark-muted);
  --text-emphasis: var(--text-on-dark);
  --text-disabled: var(--text-color-on-dark-muted);
}

.panel__skin--danger {
  color: var(--white);
  background: var(--dark-red);
  border: var(--input-border-width-thin) solid var(--strong-red);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-moderate);
  --text-color-primary: var(--white);
  --text-color-secondary: var(--white);
  --text-color-muted: var(--white-glass-strong-70);
  --text-color-disabled: var(--white-glass-strong-70);
  --text-primary: var(--white);
  --text-secondary: var(--white);
  --text-muted: var(--white-glass-strong-70);
  --text-emphasis: var(--white);
  --text-disabled: var(--white-glass-strong-70);
}

.panel__skin--glass-teal:hover {
  background: var(--card-bullseye-login);
  border: var(--input-border-width-thin) solid var(--white-glass-medium-25);
  box-shadow:
    0 0 0 var(--input-border-width-thin) var(--white-glass-whisper-08),
    var(--shadow-moderate);
}

.panel__form-region {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: var(--size-100pct);
}

.panel__scrollable-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  gap: var(--space-9px);
  align-items: stretch;
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
  isolation: isolate; /* Safari compositing guard: prevent gradient washout */
}

.panel__content-region {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  height: 100%;
}

.panel__table-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  height: 100%;
}

.panel__split {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  width: var(--size-100pct);
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.panel__left-pane-scrollable {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel__left-pane-scrollable--in-split {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Split layout left pane: thread list / tiles */
.panel__left-pane-scrollable--in-split {
  /* Match Page side-panel shell width for consistent <path> UX. */
  flex: 0 0 var(--page-side-panel-width-fluid);
  width: var(--page-side-panel-width-fluid);
  min-width: var(--width-280px);
  max-width: var(--width-380px);
  max-height: var(--size-viewport-height-full);
}

.panel__right-pane-scrollable {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9px);
  overflow-x: hidden;
  overflow-y: auto;
  align-self: stretch;
  height: 100%;
}

@media (max-width: 767px) {
  .panel__split {
    flex-direction: column;
  }

  .panel__left-pane-scrollable--in-split {
    width: var(--size-100pct);
    max-height: none;
    border-right: none;
    border-bottom: var(--input-border-width-thin) solid var(--input-border);
  }
}

.panel__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12);
  position: relative;
  z-index: 1;
  padding: var(--space-12px) 0;
  gap: var(--space-9px);
  background: transparent;
  min-width: 0;
  width: var(--size-100pct);
}

.panel__footer:empty {
  display: none;
}

.panel__footer--data-separator {
  padding-top: var(--space-9px);
  border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12);
}

.panel__footer-gap-row {
  flex: 0 0 auto;
  width: var(--size-100pct);
  min-height: var(--button-height);
}

.panel__footer-row {
  min-width: 0;
  flex: 0 0 auto;
}

.panel__actions {
  display: inline-flex;
  gap: var(--space-5px);
  align-items: center;
  justify-content: center;
  width: var(--size-100pct);
}

.panel__actions--wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ============================================================
 * Panel Header — shared chrome for Panel primitive
 * ============================================================ */

.panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-9px);
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-block: 0;
  padding-inline: 0;
  position: relative;
  z-index: 1;
  background: transparent;
  backdrop-filter: none;
}

.panel__header--mobile-filter-modal {
  justify-content: space-between;
}

.panel__instructions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4px);
  flex: 1 1 auto;
  min-width: 0;
}

.panel__bulk-actions {
  display: block;
  width: var(--size-100pct);
  min-width: 0;
  margin-block-start: var(--space-9px);
  padding: 0;
  border: 0;
  background: transparent;
}

.panel--nested {
  padding: var(--space-9px);
  border-color: var(--teal-glass-soft-12);
  box-shadow: none;
  background: var(--modal-surface);
}

.panel__table-instructions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4px);
}

.panel__table-instructions-header {
  display: flex;
  align-items: center;
}

.panel__table-instructions-actions {
  display: flex;
  align-items: center;
}

.panel__stepper {
  display: flex;
  align-items: center;
}

.panel__stepper__item {
  display: flex;
  align-items: center;
}

.panel__table-instructions-body {
  display: flex;
}

.panel__table-instructions-bullets {
  margin: 0;
  padding-inline-start: var(--space-12px);
  display: grid;
  gap: var(--space-2px);
}

@media (max-width: 767px) {
  .popup--top-right {
    left: auto;
    right: var(--space-9px);
    transform: none;
    width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2)));
    max-width: calc(100% - (var(--space-9px) * 2));
  }
  .popup--top-left {
    left: var(--space-9px);
    right: auto;
    transform: none;
    width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2)));
    max-width: calc(100% - (var(--space-9px) * 2));
  }
  .popup--bottom-right {
    left: auto;
    right: var(--space-9px);
    transform: none;
    width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2)));
    max-width: calc(100% - (var(--space-9px) * 2));
  }
  .popup--bottom-left {
    left: var(--space-9px);
    right: auto;
    transform: none;
    width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2)));
    max-width: calc(100% - (var(--space-9px) * 2));
  }
  .popup--bottom-center {
    left: var(--space-9px);
    right: var(--space-9px);
    transform: none;
    width: auto;
    max-width: calc(100% - (var(--space-9px) * 2));
  }
  .popup--center {
    left: var(--space-9px);
    right: var(--space-9px);
    transform: none;
    width: auto;
    max-width: calc(100% - (var(--space-9px) * 2));
  }

  .popup--top-right {
    top: var(--space-9px);
    bottom: auto;
  }

  .popup--top-left {
    top: var(--space-9px);
    bottom: auto;
  }

  .popup--center {
    top: var(--space-9px);
    bottom: auto;
  }

  .popup--bottom-right {
    bottom: var(--space-9px);
    top: auto;
  }

  .popup--bottom-left {
    bottom: var(--space-9px);
    top: auto;
  }

  .popup--bottom-center {
    bottom: var(--space-9px);
    top: auto;
  }

}

.title-edit {
  display: flex;
  align-items: center;
  gap: var(--space-4px);
  min-width: 0;
}

.panel__title-editview {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3px);
  min-width: 0;
}

.panel__title-input {
  min-width: var(--size-180px);
  max-width: var(--size-320px);
}

.panel__stepper__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.panel__stepper__button {
  display: inline-flex;
  align-items: center;
}

.panel__stepper__marker {
  display: inline-flex;
  align-items: center;
}

.panel__stepper__button {
  gap: var(--space-0-5px);
  padding: var(--space-0-5px) var(--space-1px);
  border-radius: var(--radius-standard);
  border: none;
  background: var(--teal-glass-soft-gradient);
  backdrop-filter: var(--backdrop-glass-medium);
  box-shadow: var(--secondary-surface-shadow);
  outline: var(--shadow-tab-outline-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--animation-quick) var(--easing-smooth);
}

.panel__stepper__button--static {
  cursor: default;
}

.panel__stepper__button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-muted-strong);
}

.panel__stepper__marker {
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: var(--size-999px);
  border: 1px solid var(--modal-border);
  background: var(--modal-surface-elevated);
  color: currentColor;
  font-size: var(--font-size-12);
  line-height: var(--line-height-110pct);
}

.panel__stepper__button:hover:not(:disabled) {
  background: var(--hover-surface-gradient);
  box-shadow: var(--hover-surface-shadow);
  transform: translateY(var(--lift-subtle));
}

.panel__stepper__button--current {
  background: var(--active-surface-gradient);
  box-shadow: var(--active-surface-shadow);
  color: var(--text-on-primary);
  font-weight: var(--weight-bold);
}

.panel__stepper__marker--current {
  background: transparent;
  border-color: currentColor;
}