/* Canonical modal component. Exactly one appearance definition per application theme.
   All modal kinds share these tokens and rules; only content/size adapters differ. */
:root:where([data-ui-theme="public"]) {
  --sm-modal-background: var(--tblr-bg-surface);
  --sm-modal-header-background: var(--tblr-bg-surface);
  --sm-modal-footer-background: var(--tblr-bg-surface-tertiary);
  --sm-modal-border-width: 1px;
  --sm-modal-border-color: transparent;
}
:root:where([data-ui-theme="captive"]) {
  --sm-modal-background: var(--tblr-bg-surface);
  --sm-modal-header-background: var(--tblr-bg-surface);
  --sm-modal-footer-background: var(--tblr-bg-surface-tertiary);
  --sm-modal-border-width: 1px;
  --sm-modal-border-color: transparent;
}
:root:where([data-ui-theme="client"]) {
  --sm-modal-background: var(--tblr-bg-surface);
  --sm-modal-header-background: var(--tblr-bg-surface);
  --sm-modal-footer-background: var(--tblr-bg-surface-tertiary);
  --sm-modal-border-width: 1px;
  --sm-modal-border-color: transparent;
}
:root:where([data-ui-theme="administration"]) {
  --sm-modal-background: var(--tblr-bg-surface);
  --sm-modal-footer-background: var(--tblr-bg-surface-tertiary);
  --sm-modal-header-background: var(--sm-modal-footer-background);
  --sm-modal-border-width: 1px;
  --sm-modal-border-color: var(--sm-modal-footer-background);
}

/* Every modal keeps its title/navigation fixed; only the selected panel scrolls. */
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-dialog { max-height: calc(100dvh - 2rem); margin-top: 1rem; margin-bottom: 1rem; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-content { background-color: var(--sm-modal-background); border: var(--sm-modal-border-width) solid var(--sm-modal-border-color); height: auto; max-height: min(var(--sm-modal-height, 760px), calc(100dvh - 2rem)); overflow: hidden; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-header, :is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-footer { flex-shrink: 0; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-header { background-color: var(--sm-modal-header-background); }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-footer { background-color: var(--sm-modal-footer-background); flex-wrap: nowrap; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .sm-modal-sections { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .sm-modal-sections > :not(.sm-modal-panels) { flex-shrink: 0; }
.sm-modal-tabs { display: flex; overflow-x: auto; gap: .25rem; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: .75rem; }
.sm-modal-tab { flex: 0 0 auto; background: transparent; color: inherit; border: 0; border-bottom: 3px solid transparent; padding: .6rem .75rem; font: inherit; cursor: pointer; }
.sm-modal-tab[aria-selected="true"] { color: var(--tblr-primary); border-bottom-color: currentColor; background: var(--tblr-bg-surface-secondary); }
.sm-modal-tab:focus-visible, .sm-modal-panel:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.sm-modal-panels { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sm-modal-panel { flex: 0 1 auto; min-height: 0; height: auto; max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: var(--sm-panel-padding, .25rem); }
.sm-modal-panel[hidden] { display: none !important; }
@media (max-width: 575px) { :is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-dialog { margin-left: .5rem; margin-right: .5rem; } .sm-modal-tab { min-height: 44px; } }

/* Native form frame adapter; appearance comes from the shared modal above. */
.sm-edit-host-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#sm-edit-loading { padding: 1rem; }
.sm-edit-frame { border: 0; width: 100%; flex: 1; min-height: 0; }
.sm-edit-frame[hidden] { display: none; }
#sm-edit-status { min-width: 0; font-size: .8125rem; }
html[data-edit-modal="1"], html[data-edit-modal="1"] body { height: 100%; overflow: hidden; padding: 0; }
html[data-edit-modal="1"] .theme-label, html[data-edit-modal="1"] .skip-link { display: none; }
html[data-edit-modal="1"] #main-content { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: var(--sm-editor-padding, .75rem); overflow: hidden; }
html[data-edit-modal="1"] #main-content > :not(.sm-modal-panels) { flex-shrink: 0; }
html[data-edit-modal="1"] .sm-modal-panel { margin: 0; max-width: none; }
html[data-edit-modal="1"] .sm-modal-panel > .card { margin: 0; }
html[data-edit-modal="1"] .sm-edit-footer-submit { display: none !important; }
html[data-edit-modal="1"] .sm-edit-intro { margin-bottom: .5rem; }

/* Image previews fit their artwork, capped at 90% of the viewport height.
   Keep the close control over the image so it needs no separate header row. */
.theme-image-preview .modal-dialog { width: fit-content; max-width: 96vw; margin-inline: auto; }
.theme-image-preview .modal-content { width: auto; max-height: 90vh; max-height: 90dvh; }
.theme-image-preview .modal-body { display: block; flex: none; padding: 0; }
.theme-image-preview .theme-preview-image { display: block; width: auto; height: auto; max-width: calc(96vw - 2px); max-height: calc(90vh - 2px); max-height: calc(90dvh - 2px); object-fit: contain; }
.theme-image-preview .theme-preview-close { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background-color: var(--sm-modal-background); opacity: 1; }

/* Native top-layer confirmation shares the theme's single modal appearance. */
.sm-delete-confirm { border: 0; padding: 0; background: transparent; color: inherit; width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.sm-delete-confirm::backdrop { background: var(--sm-modal-backdrop, rgb(0 0 0 / 50%)); }
.sm-delete-confirm .modal-dialog { margin: 0; width: 100%; }
.sm-delete-confirm .modal-content { height: auto; max-height: calc(100dvh - 2rem); }
.sm-delete-confirm .modal-body { display: block; overflow-y: auto; }
.sm-delete-confirm [data-modal-delete] { display: none; }

/* Content-sized editors; the selected panel scrolls only at the viewport cap. */
#sm-edit-modal .modal-dialog { width: calc(100% - 2rem); max-width: var(--sm-editor-width, 800px); margin-inline: auto; }
#sm-edit-modal .modal-content { height: min(var(--sm-editor-height, 240px), var(--sm-modal-height, 760px), calc(100dvh - 2rem)); }
html[data-edit-modal="1"] .sm-modal-panel { height: 100%; }
html[data-edit-modal="1"] #main-content.sm-measure { height: auto; max-height: none; }
html[data-edit-modal="1"] .sm-measure .sm-modal-panels { flex: none; overflow: visible; }
html[data-edit-modal="1"] .sm-measure .sm-modal-panel { height: auto; max-height: none; overflow: visible; }

/* Editors use footer actions; nested record lists retain their inline actions. */
html[data-edit-modal="1"] #main-content :is(.sm-edit-action, [data-ui-component="edit-action"]):not(.sm-record-actions *),
.modal-body :is(.sm-edit-action, [data-ui-component="edit-action"]):not(.sm-record-actions *) {
  display: none !important;
}

/* Shared blocking dialogs use native modality and the canonical modal tokens. */
.sm-blocking-dialog { border: 0; padding: 0; background: transparent; color: inherit; width: min(430px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.sm-blocking-dialog::backdrop { background: var(--sm-modal-backdrop, rgb(0 0 0 / 50%)); }
.sm-blocking-dialog .modal-dialog { margin: 0; width: 100%; }
.sm-blocking-dialog .modal-body { display: block; overflow-y: auto; }

/* All modal hosts share the same frame variables. Native dialogs do not
   inherit Tabler’s .modal variables or its fixed-position/display rules. */
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) {
  --tblr-modal-padding: 1.5rem;
  --tblr-modal-color: var(--tblr-body-color);
  --tblr-modal-bg: var(--sm-modal-background);
  --tblr-modal-border-radius: var(--tblr-border-radius-lg);
  --tblr-modal-inner-border-radius: calc(var(--tblr-border-radius-lg) - var(--sm-modal-border-width));
  --tblr-modal-header-padding: 1.25rem 1.5rem;
  --tblr-modal-header-border-width: var(--tblr-border-width);
  --tblr-modal-header-border-color: var(--tblr-border-color);
  --tblr-modal-title-line-height: 1.4;
  --tblr-modal-footer-gap: .75rem;
  --tblr-modal-footer-padding-y: 1rem;
  --tblr-modal-footer-border-width: var(--tblr-border-width);
  --tblr-modal-footer-border-color: var(--tblr-border-color);
}
:is(.sm-delete-confirm, .sm-blocking-dialog) { border-radius: var(--tblr-modal-border-radius); box-shadow: var(--tblr-box-shadow-lg); }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-content { border-radius: var(--tblr-modal-border-radius); }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-title { font-size: 1.125rem; font-weight: 600; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-title:focus { outline: none; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-body > :last-child { margin-bottom: 0; }

/* Omit the action strip while a blocking task has no available actions. */
.sm-blocking-dialog .modal-footer:not(:has(a, button:not([hidden]))) { display: none; }

/* View-details is presentation-only; authorization stays on the original routes. */
[data-view-only] :is(.sm-edit-action, [data-delete-intent], [data-modal-delete], .ql-toolbar) { display: none !important; }

.sm-detail-source { display:none !important; }
.sm-detail-summary .sm-detail-value { margin-block: 0 var(--sm-detail-gap, 1rem); }
.sm-detail-summary .sm-detail-value dt { color: var(--sm-detail-label-color, inherit); font-weight: 600; }
.sm-detail-summary .sm-detail-value dd { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-detail-summary :is(.sm-list-scroll,.table-responsive) { height:auto !important; max-height:none !important; }

.sm-detail-summary dd { padding-inline-start: var(--sm-detail-value-indent, 1ch); }

/* Native top-layer viewers stack while preserving each underlying list. */
.sm-view-dialog { width: min(640px, calc(100vw - 2rem)); }
.sm-view-dialog .modal-body { display: block; overflow-y: auto; }
.sm-view-dialog .modal-header { gap: 1rem; }
.sm-view-dialog .modal-title { overflow-wrap: anywhere; }
.sm-view-dialog .modal-footer { justify-content: flex-end; }
.sm-view-dialog .sm-record-link { display: inline-block; padding-block: .5rem; }
.sm-view-dialog .sm-detail-value dd { margin: .25rem 0 1rem; overflow-wrap: anywhere; }

/* Confirmation fragments bring page cards; the modal supplies their frame. */
.sm-delete-confirm .modal-body .card { background: transparent; border: 0; box-shadow: none; margin: 0; }
.sm-delete-confirm .modal-body .card-body { padding: 0; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-footer { gap: var(--tblr-modal-footer-gap); flex-wrap: wrap; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-footer > * { margin: 0; }
:is(.modal, .sm-delete-confirm, .sm-blocking-dialog) .modal-title { min-width: 0; overflow-wrap: anywhere; }

/* Reusable destructive-action summaries, in dialogs and standalone forms. */
h2.sm-confirmation-name { margin: 0 0 1.5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sm-confirmation-summary { display: grid; gap: 1rem; margin: 0 0 1.25rem; }
.sm-confirmation-summary dt { margin-bottom: .25rem; font-weight: 600; }
.sm-confirmation-summary dd { margin: 0; line-height: 1.5; }
.sm-confirmation-warning { font-weight: 600; margin: 0 0 1.25rem; }
.sm-confirmation-consent { margin-bottom: 0; }

.sm-modal-tabs[hidden] { display: none !important; }

/* Editor sizing is a theme decision; JavaScript supplies only the content kind. */
#sm-edit-modal[data-editor-size="wide"] { --sm-editor-width: var(--sm-editor-wide-width, 1140px); }
#sm-edit-modal[data-editor-size="confirmation"] { --sm-editor-width: var(--sm-editor-confirmation-width, 640px); }
#sm-edit-modal[data-editor-size="standard"] { --sm-editor-width: var(--sm-editor-standard-width, 800px); }