/* MapTrax v2.11.2.0 — Display Options shell modal
   One backdrop + modal that hosts three tabs (Filter / Color / Label).
   Reuses .qe-tab / .qe-tab.active / .qe-tab-pane from
   css/metes-bounds-editor.css for visual consistency, with the few
   shell-specific overrides below. */

#display-options-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px 20px;
    overflow-y: auto;
}

#display-options-backdrop.visible {
    display: flex;
}

.display-options-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    /* The widest of the three legacy dialogs (Label) is 560px — pad up
       slightly so any tab's content fits without horizontal scrolling. */
    width: 600px;
    max-width: calc(100% - 16px);
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The shell's own header — uses the existing .wizard-header class for
   typography but lives here so we can tighten spacing for the tab strip. */
#display-options-backdrop .wizard-header {
    flex-shrink: 0;
    border-bottom: none;
    margin-bottom: 0;
}

/* Tab strip — reuses .qe-tab-strip / .qe-tab from metes-bounds-editor.css.
   Override the negative margins (those make sense inside the M&B panel
   but not as a top-level modal element). */
.display-options-tab-strip {
    margin: 0 !important;
    padding: 0 12px !important;
    background: #faf6f1 !important;
    flex-shrink: 0;
}

.display-options-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
}

/* Each tab pane wraps the original dialog body in its legacy class so
   existing CSS rules (max-width, padding, sizing) continue to apply. The
   pane itself is just a positioning wrapper — no styling. */
.display-options-pane {
    /* visibility toggled inline via JS (display:none vs display:'') */
}

/* Within the panes, override the legacy dialog wrappers so they stretch
   to fill the available pane width instead of fighting their original
   max-width constraints (which were sized for standalone modals). */
.display-options-pane > .export-dialog,
.display-options-pane > .color-rules-dialog,
.display-options-pane > .label-rules-dialog {
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}

/* The legacy dialogs were styled with background:white themselves — keep
   that, but drop the outer "modal" appearance since the shell owns it. */
.display-options-pane .color-rules-content,
.display-options-pane .label-rules-content,
.display-options-pane .export-dialog-content {
    padding: 14px 18px;
}