/* AST Hub Dynamic Forms SurveyJS typography and control sizing.
 *
 * Aptos is self-hosted from wwwroot/fonts/aptos so the builder, preview,
 * public renderer, iframe embeds, and JavaScript embeds use the same font.
 * The navigation rules also keep SurveyJS buttons content-sized so font
 * metrics cannot clip Start, Previous, Next, Preview, or Complete controls.
 */

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos-SemiBold-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "AST Aptos";
    src: url("../../fonts/aptos/Aptos-Bold-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

:root {
    --ast-dynamic-form-font-family: "AST Aptos", "Aptos", "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
}

/*
 * SurveyJS 3 uses --sjs2-typography-font-family-text as its primary
 * typography token. Keep the older variables too so saved forms and any
 * legacy SurveyJS selectors continue to inherit the same AST font stack.
 */
.dynamic-form-public-shell,
.dynamic-form-public-card,
.dynamic-form-theme,
.dynamic-form-theme #surveyContainer,
#surveyCreatorContainer,
#surveyCreatorContainer .svc-creator,
#surveyCreatorContainer .spg-root-modern,
#surveyCreatorContainer .sv-popup {
    --sjs2-typography-font-family-text: var(--ast-dynamic-form-font-family) !important;
    --sjs-font-family: var(--ast-dynamic-form-font-family) !important;
    --font-family: var(--ast-dynamic-form-font-family) !important;
    font-family: var(--ast-dynamic-form-font-family) !important;
}

/*
 * SurveyJS theme objects can place typography variables directly on generated
 * roots and component containers. Apply the AST font token at every SurveyJS
 * descendant as well so the v3 theme cannot fall back to Open Sans.
 *
 * The direct font-family rule is intentional. It also protects rendered
 * string viewers such as .sv-string-viewer, which is where SurveyJS displays
 * question, panel, page, and descriptive text.
 */
.dynamic-form-theme #surveyContainer,
.dynamic-form-theme #surveyContainer *,
#surveyCreatorContainer,
#surveyCreatorContainer .svc-creator,
#surveyCreatorContainer .svc-creator *,
#surveyCreatorContainer .spg-root-modern,
#surveyCreatorContainer .spg-root-modern *,
#surveyCreatorContainer .sv-popup,
#surveyCreatorContainer .sv-popup * {
    --sjs2-typography-font-family-text: var(--ast-dynamic-form-font-family) !important;
    --sjs-font-family: var(--ast-dynamic-form-font-family) !important;
    --font-family: var(--ast-dynamic-form-font-family) !important;
    font-family: var(--ast-dynamic-form-font-family) !important;
}

/*
 * Keep controls explicit as a defensive fallback for native form elements,
 * whose browser styling can otherwise override inherited typography.
 */
.dynamic-form-theme #surveyContainer input,
.dynamic-form-theme #surveyContainer textarea,
.dynamic-form-theme #surveyContainer select,
.dynamic-form-theme #surveyContainer button,
#surveyCreatorContainer input,
#surveyCreatorContainer textarea,
#surveyCreatorContainer select,
#surveyCreatorContainer button {
    font-family: var(--ast-dynamic-form-font-family) !important;
}

/*
 * SurveyJS 3 navigation uses the new action-button structure:
 *
 *   .sd-body__navigation.sd-action-bar
 *     > .sv-action
 *       > .sv-action__content
 *         > button.sd-action.sd-navigation__*
 *           > span.sd-action__title
 *
 * The navigation bar is itself the action bar. Do not target only a nested
 * .sd-action-bar because that misses the v3 public navigation DOM.
 *
 * Keep every layer content-sized and visible so Start, Previous, Next,
 * Preview, and Complete cannot lose a border, label, focus ring, or padding
 * when typography or a public template changes.
 */
.dynamic-form-theme #surveyContainer .sd-navigation,
.dynamic-form-theme #surveyContainer .sd-body__navigation,
.dynamic-form-theme #surveyContainer .sd-body__navigation.sd-action-bar,
#surveyCreatorContainer .sd-navigation,
#surveyCreatorContainer .sd-body__navigation,
#surveyCreatorContainer .sd-body__navigation.sd-action-bar {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    overflow: visible !important;
}

.dynamic-form-theme #surveyContainer .sd-body__navigation.sd-action-bar,
#surveyCreatorContainer .sd-body__navigation.sd-action-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.dynamic-form-theme #surveyContainer .sd-body__navigation.sd-action-bar > .sv-action,
.dynamic-form-theme #surveyContainer .sd-body__navigation .sv-action,
.dynamic-form-theme #surveyContainer .sd-body__navigation .sd-action-bar__item,
#surveyCreatorContainer .sd-body__navigation.sd-action-bar > .sv-action,
#surveyCreatorContainer .sd-body__navigation .sv-action,
#surveyCreatorContainer .sd-body__navigation .sd-action-bar__item {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.dynamic-form-theme #surveyContainer .sd-body__navigation .sv-action__content,
#surveyCreatorContainer .sd-body__navigation .sv-action__content {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
 * SurveyJS 3 navigation buttons are sd-action buttons. Target the navigation
 * class rather than relying on the legacy sd-btn class so this applies to the
 * current v3 DOM and remains shared by every AST public template.
 */
.dynamic-form-theme #surveyContainer button.sd-action[class*="sd-navigation__"],
.dynamic-form-theme #surveyContainer button[class*="sd-navigation__"],
#surveyCreatorContainer button.sd-action[class*="sd-navigation__"],
#surveyCreatorContainer button[class*="sd-navigation__"] {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 96px !important;
    min-height: 48px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 11px 24px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 7px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

/*
 * Neutral navigation actions need a real CSS border. SurveyJS themes may
 * represent action borders with shadows/tokens, which can visually disappear
 * when other AST template rules reset box-shadow. A physical border prevents
 * the clipped/open-left appearance seen on the Start control.
 */
.dynamic-form-theme #surveyContainer .sd-navigation__start-btn,
.dynamic-form-theme #surveyContainer .sd-navigation__prev-btn,
.dynamic-form-theme #surveyContainer .sd-navigation__preview-btn,
#surveyCreatorContainer .sd-navigation__start-btn,
#surveyCreatorContainer .sd-navigation__prev-btn,
#surveyCreatorContainer .sd-navigation__preview-btn {
    border-color: #cfd7e2 !important;
}

/*
 * Primary actions keep their template-specific border colors. This rule only
 * guarantees that the border has measurable width/style; it does not replace
 * the color supplied by the active AST template.
 */
.dynamic-form-theme #surveyContainer .sd-navigation__next-btn,
.dynamic-form-theme #surveyContainer .sd-navigation__complete-btn,
#surveyCreatorContainer .sd-navigation__next-btn,
#surveyCreatorContainer .sd-navigation__complete-btn {
    border-width: 1px !important;
    border-style: solid !important;
}

.dynamic-form-theme #surveyContainer button[class*="sd-navigation__"] .sd-action__title,
#surveyCreatorContainer button[class*="sd-navigation__"] .sd-action__title {
    box-sizing: border-box !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/*
 * Keep focus indicators outside the button box visible. This also prevents
 * parent wrappers from trimming borders/focus rings by one or two pixels.
 */
.dynamic-form-theme #surveyContainer .sd-body__navigation *,
#surveyCreatorContainer .sd-body__navigation * {
    overflow-clip-margin: 8px;
}

@media (max-width: 575.98px) {
    .dynamic-form-theme #surveyContainer .sd-body__navigation.sd-action-bar,
    #surveyCreatorContainer .sd-body__navigation.sd-action-bar {
        gap: 10px !important;
    }

    .dynamic-form-theme #surveyContainer button[class*="sd-navigation__"],
    #surveyCreatorContainer button[class*="sd-navigation__"] {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/*
 * Long Text word-count feedback.
 * The counter is injected only when an AST Maximum word count is configured
 * for a SurveyJS comment question. It is shared by builder preview, direct
 * public rendering, iframe embeds, and JavaScript embeds.
 */
.ast-dynamic-form-word-count {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 6px;
    color: #667085;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
}

.ast-dynamic-form-word-count.is-over-limit {
    color: #d63939;
    font-weight: 700;
}