/* Shared workspace dialogs. Loaded after the workspace skins. Visibility,
   focus management, preview geometry and fullscreen sheet layout stay in the app. */
body#structacad-workspace.cad-workspace {
  --dialog-radius: 18px;
  --dialog-control-radius: 8px;
  --dialog-backdrop: #080b12a3;
  --dialog-border: color-mix(in srgb, var(--ui-line) 80%, var(--ui-text) 20%);
  --dialog-card: color-mix(in srgb, var(--ui-surface) 55%, var(--ui-raised) 45%);
  --dialog-selected: color-mix(in srgb, var(--ui-surface) 86%, var(--ui-action-bg) 14%);
  --dialog-shadow: 0 32px 96px #0005, 0 8px 24px #0003, inset 0 1px #ffffff08;
}

body#structacad-workspace.cad-workspace[data-ui-theme="light"] {
  --dialog-backdrop: #25334d5c;
  --dialog-shadow: 0 32px 96px #15223b26, 0 8px 24px #15223b14, inset 0 1px #fff;
}

/* Covers both persistent overlays and native dialogs created on demand. */
body#structacad-workspace.cad-workspace {
  & > :is([id$="-overlay"], .modal-overlay):has(> :is(.modal-content, [role="dialog"][aria-modal="true"], .preview-content)):not(#sheet-organizer-overlay),
  & dialog::backdrop {
    background: var(--dialog-backdrop) !important;
    backdrop-filter: blur(7px);
  }

  & :is(.modal-content, .app-dialog-content, .workspace-entry-card, .workspace-guide-card,
      .import-provider-dialog, .export-dock-modal-content, [role="dialog"][aria-modal="true"], dialog):not(.sheet-organizer-content) {
    --ui-radius: var(--dialog-control-radius);
    box-sizing: border-box;
    border: 1px solid var(--dialog-border) !important;
    border-radius: var(--dialog-radius) !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--dialog-shadow) !important;
    color-scheme: var(--ui-color-scheme);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-line) transparent;
  }

  & :is(.modal-content, .import-provider-dialog, dialog):not(.sheet-organizer-content) {
    & :is(.modal-title, .app-dialog-title) {
      font-size: 22px !important;
      line-height: 1.25 !important;
      font-weight: 600 !important;
      letter-spacing: -.55px !important;
      text-wrap: balance;
    }

    & .overlay-kicker {
      color: var(--ui-accent) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: .12em !important;
      margin-bottom: 8px;
    }

    & :is(.overlay-header, .export-dock-modal-header, .import-provider-dialog-header) {
      border-color: var(--ui-line-soft) !important;
    }

    & :is(.overlay-header .field-note, .app-dialog-message, .import-provider-dialog-note) {
      color: var(--ui-muted) !important;
      font-size: 13px !important;
      line-height: 1.65 !important;
      font-weight: 400 !important;
    }

    & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
      min-height: 36px;
      border-radius: var(--dialog-control-radius) !important;
      border-color: var(--ui-line) !important;
    }

    & :is(input, select, textarea):focus-visible {
      border-color: var(--ui-focus) !important;
      outline: 2px solid var(--ui-focus) !important;
      outline-offset: 2px;
    }

    & :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--ui-action-bg); }

    & :is(.modal-actions, .app-dialog-actions, .drawing-preferences-actions) {
      gap: 10px !important;
      border-color: var(--ui-line-soft) !important;
      align-items: center;

      & button {
        min-height: 40px;
        padding: 10px 18px;
        border-radius: var(--dialog-control-radius) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3;
        cursor: pointer;
      }

      & :is(.primary-btn, #app-dialog-confirm-btn):not(:disabled) {
        box-shadow: 0 2px 5px #0002, inset 0 1px #ffffff1f !important;
      }

      & button:active:not(:disabled) { box-shadow: inset 0 2px 4px #0002 !important; }
      & button:disabled { opacity: .45; cursor: not-allowed; }
    }

    & :is(.primary-btn, .secondary-btn, .import-help-toggle) { border-radius: var(--dialog-control-radius) !important; }
    & :is(.import-provider-dialog-close, .export-dock-modal-close, .modal-close) {
      width: 34px !important;
      height: 34px !important;
      border: 1px solid var(--ui-line-soft) !important;
      border-radius: var(--dialog-control-radius) !important;
      background: var(--dialog-card) !important;
      color: var(--ui-muted) !important;
    }
    & :is(.import-provider-dialog-close, .export-dock-modal-close, .modal-close):hover {
      background: var(--ui-hover) !important;
      color: var(--ui-text) !important;
    }
  }
}

/* Keep the action hierarchy consistent in compact confirmations and forms. */
body#structacad-workspace.cad-workspace .modal-content:not(.sheet-organizer-content) > .modal-actions {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;

  & button { flex: 0 1 auto !important; width: auto !important; min-width: 96px; margin: 0 !important; }
}

body#structacad-workspace.cad-workspace #app-dialog-overlay:has(#app-dialog-body[hidden]):not([data-purpose]) {
  & .app-dialog-content { padding: 28px !important; }
  & .app-dialog-actions { margin-top: 24px; }
}

/* Settings choices: a recognizable symbol, readable copy, and native radios. */
body#structacad-workspace.cad-workspace :is(#units-modal-overlay, #bar-set-modal-overlay) {
  & .units-modal-content {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  & .overlay-header {
    position: relative;
    flex: 0 0 auto;
    padding: 28px 30px 24px 90px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--ui-line-soft) !important;
  }
  & .overlay-header::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 31px;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);
    border-radius: 12px;
    background: var(--dialog-selected);
  }
  & .overlay-header::after {
    content: "";
    position: absolute;
    top: 42px;
    left: 41px;
    width: 22px;
    height: 22px;
    background: var(--ui-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 13-13 5 5L8 21Z M7 12l2 2m1-5 2 2m1-5 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  & .overlay-kicker { margin: 0 0 7px !important; }
  & .modal-title { margin: 0 !important; padding: 0 !important; font-size: 23px !important; }
  & .units-modal-copy { margin: 10px 0 0 !important; max-width: none; }

  & .unit-system-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 24px 30px;
  }
  & .unit-system-option {
    position: relative;
    grid-template-columns: 46px minmax(0, 1fr) 20px !important;
    grid-template-rows: auto auto !important;
    gap: 5px 16px !important;
    min-height: 88px;
    padding: 17px 18px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 11px !important;
    background: var(--dialog-card) !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
  & .unit-system-option:hover { border-color: var(--ui-muted) !important; background: var(--ui-raised) !important; }
  & .unit-system-option:has(input:checked) {
    border-color: var(--ui-accent) !important;
    background: var(--dialog-selected) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 25%, transparent) !important;
  }
  & .unit-system-option:has(input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
  & .unit-system-option::before {
    content: var(--unit-symbol, "#");
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-soft);
    color: var(--ui-muted);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.5px;
  }
  & .unit-system-option:has(input:checked)::before { color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent); }
  & .unit-system-option-title { grid-column: 2; grid-row: 1; font-size: 15px !important; font-weight: 600 !important; align-self: end; }
  & .unit-system-option-copy { grid-column: 2; grid-row: 2; font-size: 12px !important; line-height: 1.55 !important; align-self: start; }
  & .unit-system-option input {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    cursor: pointer;
  }
  & .unit-system-option:has(input[value="imperial"]) { --unit-symbol: "ft"; }
  & .unit-system-option:has(input[value="metric-si"]) { --unit-symbol: "mm"; }
  & .unit-system-option:has(input[value="metric-mks"]) { --unit-symbol: "m"; }
  & .unit-system-option:has(input[value="us-customary"]) { --unit-symbol: "#3"; }
  & .unit-system-option:has(input[value="si"]) { --unit-symbol: "Ø"; }
  & .unit-system-option:has(input[value="canadian"]) { --unit-symbol: "M"; }
  & .unit-system-option:has(input[value="us-soft-metric"]) { --unit-symbol: "SM"; }
  & .unit-system-option:has(input[value="australian"]) { --unit-symbol: "N"; }
  & .unit-system-option:has(input[value="korean"]) { --unit-symbol: "D"; }

  & .units-modal-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 18px 30px !important;
    border-top: 1px solid var(--ui-line-soft);
    background: var(--dialog-card);
    border-radius: 0 !important;
  }
  & .units-modal-actions button { min-width: 104px; }
}

body#structacad-workspace.cad-workspace #bar-set-modal-overlay {
  & .units-modal-content { width: min(720px, calc(100vw - 32px)) !important; }
  & .unit-system-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  & .overlay-header::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 2v20M16 2v20M2 8h20M2 16h20'/%3E%3C/svg%3E");
  }
}

/* Native import pickers use the same separated, tactile option cards. */
body#structacad-workspace.cad-workspace .import-provider-dialog {
  & .import-provider-dialog-shell { padding: 28px !important; }
  & .import-provider-dialog-options { gap: 10px !important; margin-top: 20px !important; }
  & .import-provider-dialog-options .grid-system-launch {
    min-height: 76px !important;
    padding: 16px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--dialog-card) !important;
  }
  & .import-provider-dialog-options .grid-system-launch:hover:enabled {
    border-color: var(--ui-accent) !important;
    background: var(--dialog-selected) !important;
  }
}

/* Navigation and configuration panels inside the larger dialogs. */
body#structacad-workspace.cad-workspace {
  & :is(.system-modal-tabs, .export-dock-modal-tabs) {
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid var(--ui-line-soft) !important;
    border-radius: 10px !important;
    background: var(--ui-bg) !important;

    & button { padding: 10px 16px !important; border-radius: 6px !important; }
    & button:is(.is-active, [aria-selected="true"]) {
      background: var(--ui-surface) !important;
      color: var(--ui-accent) !important;
      box-shadow: 0 1px 4px #0002 !important;
    }
  }
  & .drawing-preferences-modal-content {
    & .drawing-preferences-search-input { padding-left: 38px !important; }
    & .drawing-preferences-detail-card {
      margin-bottom: 10px !important;
      border: 1px solid var(--ui-line-soft) !important;
      border-radius: 10px !important;
      background: var(--dialog-card) !important;
      overflow: hidden;
    }
    & .drawing-preferences-detail-toggle { padding: 14px 16px !important; }
    & .drawing-preferences-detail-title { font-size: 13px !important; font-weight: 500 !important; }
    & .drawing-preferences-detail-body { padding: 8px 16px 16px !important; }
    & .drawing-preferences-actions { background: var(--dialog-card) !important; }
  }
  & .system-modal-content .grid-modal-grid > .menu-heading:has(> #system-grid-title) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  body#structacad-workspace.cad-workspace :is(.modal-content, .import-provider-dialog[open], .workspace-entry-card, .workspace-guide-card):not(.sheet-organizer-content) {
    animation: workspace-dialog-appear .18s ease-out both;
  }
  @keyframes workspace-dialog-appear {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 600px) {
  body#structacad-workspace.cad-workspace {
    --dialog-radius: 14px;
    & :is(.modal-content, .import-provider-dialog, dialog):not(.sheet-organizer-content) :is(.modal-title, .app-dialog-title) { font-size: 20px !important; }
    & .import-provider-dialog .import-provider-dialog-shell { padding: 20px !important; }
    & :is(#units-modal-overlay, #bar-set-modal-overlay) {
      & .overlay-header { padding: 22px 20px 20px 76px !important; }
      & .overlay-header::before { left: 20px; top: 24px; }
      & .overlay-header::after { left: 31px; top: 35px; }
      & .unit-system-options { padding: 20px; grid-template-columns: minmax(0, 1fr) !important; }
      & .unit-system-option { grid-template-columns: 38px minmax(0, 1fr) 18px !important; padding: 14px 12px !important; column-gap: 12px !important; }
      & .unit-system-option::before { width: 36px; height: 40px; font-size: 16px; }
      & .units-modal-actions { padding: 16px 20px !important; }
    }
  }
}

@media (max-height: 540px) {
  body#structacad-workspace.cad-workspace :is(#units-modal-overlay, #bar-set-modal-overlay) {
    & .overlay-header { padding-block: 16px !important; }
    & .overlay-header::before { top: 19px; }
    & .overlay-header::after { top: 30px; }
    & .unit-system-options { padding-block: 14px; }
    & .units-modal-actions { padding-block: 12px !important; }
  }
}

/* Shared export offer layout: use the selected workspace palette in both themes
   while keeping drawing previews separate from the interface colors. */
body#structacad-workspace.cad-workspace #billing-modal-overlay {
  & .billing-modal-content {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: 840px !important;
    max-height: calc(100dvh - 32px) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-line) !important;
  }

  /* The shared dialog header reset must not stack the close button below the title. */
  & .billing-modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--ui-line-soft) !important;
  }
  & .billing-modal-close-icon {
    background: var(--ui-raised) !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-muted) !important;
  }
  & .billing-modal-close-icon:hover:not(:disabled) {
    background: var(--ui-hover) !important;
    border-color: var(--ui-muted) !important;
    color: var(--ui-text) !important;
  }
  & .billing-modal-body {
    padding: 18px 24px 20px !important;
    overflow-x: hidden;
    scrollbar-color: var(--ui-line) transparent;
  }
  & .billing-modal-body::-webkit-scrollbar-thumb {
    background: var(--ui-line) !important;
    border-color: var(--ui-surface) !important;
    box-shadow: none !important;
  }
  & .billing-modal-body::-webkit-scrollbar-thumb:hover { background: var(--ui-muted) !important; }
  & :is(.modal-title, .billing-card-title, .billing-paid-heading, .billing-sample-status) {
    color: var(--ui-text) !important;
  }
  & :is(.billing-modal-copy, .billing-card-description, .billing-card-note, .billing-sample-status-note,
      .billing-terms-note, .billing-trust-copy, .billing-trust-shield) {
    color: var(--ui-muted) !important;
  }
  & :is(.overlay-kicker, .billing-card-kicker, .billing-card-price, .billing-card-detail) {
    color: var(--ui-accent) !important;
  }
  & :is(.billing-card-price, #billing-plan-yearly-price) { font-size: 23px !important; line-height: 1.3 !important; }
  & .billing-card-price s { display: block; color: var(--ui-muted) !important; font-size: 12px; font-weight: 400; }
  & .billing-card-price small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; }
  & .billing-output-preview {
    display: block;
    background: var(--ui-raised) !important;
    border-color: var(--ui-line) !important;
    box-shadow: none !important;
    margin: 0 0 16px !important;
  }
  & .billing-output-preview-title { color: var(--ui-text) !important; }
  & .billing-output-preview-meta { color: var(--ui-muted) !important; white-space: normal; text-align: right; }
  & .billing-output-preview-grid {
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px !important;
  }
  & .billing-output-preview-shot { margin: 0; }
  & .billing-output-preview-shot img { height: 200px !important; }

  & .billing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  & :is(.billing-plan-card, .billing-sample-card, .billing-sample-status-card) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-line) !important;
    box-shadow: none !important;
  }
  & :is(.billing-plan-card--yearly, .billing-plan-card--downloads) {
    background: var(--dialog-selected) !important;
    border-color: var(--ui-accent) !important;
  }
  & .billing-plan-card { padding: 16px !important; gap: 12px !important; }
  & .billing-card-copy { padding: 0 !important; gap: 6px !important; }
  & :is(.billing-card-description, .billing-card-note, .billing-card-detail) { line-height: 1.5 !important; }
  & .billing-plan-badge {
    align-self: flex-start;
    background: var(--ui-selected) !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-accent) !important;
  }
  & .billing-plan-card--monthly :is(.billing-card-kicker, .billing-card-price) { color: var(--ui-accent) !important; }
  & .billing-plan-card--studio :is(.billing-card-kicker, .billing-card-price) { color: var(--ui-accent) !important; }
  & .billing-plan-card--studio {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) 190px !important;
    grid-template-areas: "copy action" "copy annual";
    gap: 8px 20px !important;
  }
  & .billing-plan-card--studio .billing-card-copy {
    grid-area: copy;
    display: flex !important;
    align-items: flex-start !important;
    gap: 4px !important;
    text-align: left;
  }
  & .billing-plan-card--studio > .billing-plan-cta {
    grid-area: action;
    margin: 0 !important;
    align-self: end;
  }
  & .billing-plan-card--studio > .billing-card-note {
    grid-area: annual;
    align-self: start;
    text-align: center;
    color: var(--ui-accent) !important;
  }

  & :is(.billing-plan-cta--primary, #billing-check-payment-btn, #billing-download-project-btn) {
    background: var(--ui-action-bg) !important;
    border-color: var(--ui-action-border) !important;
    color: var(--ui-action-text) !important;
  }
  & :is(.billing-plan-cta--primary, #billing-check-payment-btn, #billing-download-project-btn):hover:not(:disabled) {
    background: var(--ui-action-hover) !important;
    border-color: var(--ui-action-hover) !important;
  }
  & :is(.billing-plan-cta--secondary, .billing-plan-cta--sample, .billing-plan-studio-link) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-accent) !important;
    color: var(--ui-accent) !important;
  }
  & :is(.billing-plan-cta--secondary, .billing-plan-cta--sample, .billing-plan-studio-link):is(:hover, :focus-visible):not(:disabled) {
    background: var(--ui-selected) !important;
    border-color: var(--ui-accent) !important;
    color: var(--ui-accent) !important;
  }
  & .billing-modal-footer {
    padding: 10px 24px 12px !important;
    background: var(--ui-raised) !important;
    border-top-color: var(--ui-line-soft) !important;
    border-radius: 0 !important;
  }
  & .billing-footer-strip {
    padding: 0 !important;
    margin-top: 4px !important;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  & .billing-trust-copy { white-space: normal; }
  & .billing-exit-row { gap: 6px 20px !important; }
  & .billing-exit-row :is(button, a) { min-height: 32px !important; }
  & :is(.billing-exit-row button, .billing-exit-row a, .billing-all-options-link) { color: var(--ui-accent) !important; }
  & :focus-visible { outline-color: var(--ui-focus) !important; }

  @media (max-width: 760px) {
    & .billing-output-preview-grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 600px) {
    & .billing-modal-header { padding: 16px !important; }
    & .billing-modal-body { padding: 14px 16px 16px !important; }
    & .billing-modal-footer { padding: 10px 16px !important; }
    & .billing-plan-grid { grid-template-columns: minmax(0, 1fr) !important; }
    & .billing-plan-card--studio {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-areas: "copy" "action" "annual";
    }
  }
}