/**
 * Native <dialog> modals — theme tokens from html (recon + dark + light).
 */
html {
  --ui-dialog-panel-bg: #fff;
  --ui-dialog-panel-border: var(--color-base-200, #e2e8f0);
  --ui-dialog-header-bg: transparent;
  --ui-dialog-title-color: var(--color-base-900, #0f172a);
  --ui-dialog-body-color: var(--color-base-700, #334155);
  --ui-dialog-close-border: var(--color-base-200, #e2e8f0);
  --ui-dialog-close-color: var(--color-base-600, #475569);
  --ui-dialog-close-hover-bg: var(--color-base-100, #f1f5f9);
}

html.dark {
  --ui-dialog-panel-bg: var(--color-base-900, #0f172a);
  --ui-dialog-panel-border: var(--color-base-700, #334155);
  --ui-dialog-title-color: var(--color-base-100, #f1f5f9);
  --ui-dialog-body-color: var(--color-base-200, #e2e8f0);
  --ui-dialog-close-border: var(--color-base-600, #475569);
  --ui-dialog-close-color: var(--color-base-300, #cbd5e1);
  --ui-dialog-close-hover-bg: var(--color-base-800, #1e293b);
}

.ui-dialog {
  margin: auto;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: 90vh;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-dialog-body-color);
}

.dash-dialog {
  margin: auto;
  width: min(72rem, calc(100vw - 2rem));
  max-height: min(90vh, 100dvh);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-dialog-body-color);
  overflow: hidden;
}

.ui-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

html.dark .ui-dialog::backdrop,
html.theme-recon-dark .ui-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.ui-dialog__panel,
.dash-dialog > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(85vh, calc(100dvh - 2rem));
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--recon-card-bg, var(--ui-dialog-panel-bg));
  border: 1px solid var(--recon-border, var(--ui-dialog-panel-border));
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  color: var(--recon-text-muted, var(--ui-dialog-body-color));
}

html.dark .ui-dialog__panel,
html.theme-recon-dark .ui-dialog__panel {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5),
    0 0 0 1px var(--recon-border, var(--ui-dialog-panel-border));
}

.ui-dialog__panel--sm {
  width: min(24rem, calc(100vw - 2rem));
}

.ui-dialog__panel--md {
  width: min(32rem, calc(100vw - 2rem));
}

.ui-dialog__panel--lg {
  width: min(56rem, calc(100vw - 2rem));
}

.ui-dialog__panel--xl {
  width: min(72rem, calc(100vw - 2rem));
}

.ui-dialog__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--recon-border, var(--ui-dialog-panel-border));
  padding: 0.75rem 1rem;
  background: var(--ui-dialog-header-bg);
}

html.theme-recon-dark .ui-dialog__header,
html.theme-recon-light .ui-dialog__header {
  background: rgba(15, 23, 42, 0.35);
}

html.theme-recon-light .ui-dialog__header {
  background: var(--recon-surface-2, #f1f5f9);
}

.ui-dialog__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--recon-text, var(--ui-dialog-title-color));
}

.ui-dialog__close {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--recon-border-strong, var(--ui-dialog-close-border));
  background: var(--recon-input-bg, transparent);
  color: var(--recon-text-muted, var(--ui-dialog-close-color));
  cursor: pointer;
}

.ui-dialog__close:hover {
  background: var(--ui-dialog-close-hover-bg);
  color: var(--recon-text, var(--ui-dialog-title-color));
}

html.theme-recon-dark .ui-dialog__close {
  background: var(--recon-input-bg, rgba(15, 23, 42, 0.85));
}

html.theme-recon-dark .ui-dialog__close:hover {
  border-color: var(--recon-accent, #13b5ea);
  color: var(--recon-text, #f8fafc);
}

.ui-dialog__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  color: var(--recon-text-muted, var(--ui-dialog-body-color));
}

.ui-dialog__footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--recon-border, var(--ui-dialog-panel-border));
  padding: 0.75rem 1rem;
  background: transparent;
}

/* Tables inside dialogs */
html.theme-recon-dark .ui-dialog .table th,
html.theme-recon-dark .ui-dialog .table thead th,
html.theme-recon-dark .ui-dialog .ui-data-table thead th {
  background: rgba(15, 23, 42, 0.8) !important;
  color: var(--recon-label, #64748b) !important;
  border-color: var(--recon-border, rgba(255, 255, 255, 0.08)) !important;
}

html.theme-recon-dark .ui-dialog .table td,
html.theme-recon-dark .ui-dialog .ui-data-table td {
  color: var(--recon-text-muted, #94a3b8) !important;
  border-color: var(--recon-border, rgba(255, 255, 255, 0.08)) !important;
  background: transparent !important;
}

html.theme-recon-dark .ui-dialog .table-hover tbody tr:hover {
  background: rgba(19, 181, 234, 0.06) !important;
}

html.dark .ui-dialog .table thead th {
  background-color: var(--color-base-800, #1e293b);
  color: var(--color-base-300, #cbd5e1);
}

html.dark .ui-dialog .table td {
  color: var(--color-base-200, #e2e8f0);
  border-color: var(--color-base-700, #334155);
}

html.theme-recon-light .ui-dialog .table thead th,
html.theme-recon-light .ui-dialog .ui-data-table thead th {
  background: var(--recon-surface-2, #f1f5f9) !important;
  color: var(--recon-label, #64748b) !important;
}

html.theme-recon-light .ui-dialog .table td,
html.theme-recon-light .ui-dialog .ui-data-table td {
  color: var(--recon-text-muted, #475569) !important;
}

html.theme-recon-light .ui-dialog__panel {
  background: var(--recon-card-bg, var(--recon-surface, #fff));
  border-color: var(--recon-border, rgba(15, 23, 42, 0.1));
}

/* Dashboard detail dialogs (ui_dialog + dash-dialog) */
.dash-dialog {
  width: min(72rem, calc(100vw - 2rem));
}

/* Grid: header auto-sized, body scrolls when content exceeds viewport */
.dash-dialog > .ui-dialog__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(90vh, calc(100dvh - 2rem));
}

.dash-dialog .ui-dialog__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ui-dash-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-dash-dialog__intro,
.ui-dash-dialog__empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--recon-text-muted, var(--color-base-500, #64748b));
}

.ui-dash-dialog__section {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--recon-border, var(--color-base-200, #e2e8f0));
  background: var(--recon-surface-1, var(--color-white, #fff));
}

html.dark .ui-dash-dialog__section,
html.theme-recon-dark .ui-dash-dialog__section {
  background: var(--recon-surface-1, #1e293b);
  border-color: var(--recon-border, rgba(255, 255, 255, 0.08));
}

.ui-dash-dialog__section-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--recon-border, var(--color-base-200, #e2e8f0));
  background: var(--color-base-50, #f8fafc);
}

html.dark .ui-dash-dialog__section-header,
html.theme-recon-dark .ui-dash-dialog__section-header {
  background: rgba(15, 23, 42, 0.5);
  border-bottom-color: var(--recon-border, rgba(255, 255, 255, 0.08));
}

html.theme-recon-dark .ui-dash-dialog__section-header {
  background: var(--recon-bg-elevated, rgba(15, 23, 42, 0.5));
}

.ui-dash-dialog__section-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--recon-text, var(--color-base-900, #0f172a));
}

html.dark .ui-dash-dialog__section-title,
html.theme-recon-dark .ui-dash-dialog__section-title {
  color: var(--recon-text, #f1f5f9);
}

.ui-dash-dialog__section .ui-data-table-panel {
  margin: 0;
}

.ui-dash-dialog__section .ui-data-table-panel__frame {
  border: none;
  border-radius: 0;
}

.ui-dash-dialog__chart {
  padding: 1rem;
  min-height: 12rem;
}

.ui-dash-dialog__chart .chart-container {
  height: clamp(180px, 32vh, 260px) !important;
}

.ui-dash-dialog__chart .ui-dash-chart,
.ui-dash-dialog__chart .chart-container {
  width: 100%;
}

.ui-dash-dialog__chart .chart {
  width: 100% !important;
  height: 100% !important;
}

.ui-dialog .ui-data-table__cell--emphasis,
.dash-dialog .ui-data-table__cell--emphasis {
  font-weight: 600;
  color: var(--recon-text, var(--color-base-900, #0f172a)) !important;
}

html.dark .ui-dialog .ui-data-table__cell--emphasis,
html.theme-recon-dark .ui-dialog .ui-data-table__cell--emphasis {
  color: var(--recon-text, #f1f5f9) !important;
}

.ui-dialog .ui-data-table__col--total,
.dash-dialog .ui-data-table__col--total {
  font-weight: 700;
}

.ui-dialog .ui-data-table a,
.dash-dialog .ui-data-table a {
  font-weight: 500;
  color: var(--color-primary-600, #7c3aed);
  text-decoration: none;
}

.ui-dialog .ui-data-table a:hover,
.dash-dialog .ui-data-table a:hover {
  text-decoration: underline;
}

html.theme-recon-dark .ui-dialog .ui-data-table a,
html.theme-recon-dark .dash-dialog .ui-data-table a {
  color: var(--recon-accent, #13b5ea);
}