/* ===========================================================================
   Askio — moldura partilhada dos formulários públicos (SharedFormLayout).
   Tokens:
     --shared-form-primary     cor da marca (botão principal, foco, decoração)
     --shared-form-background  fundo da página
     --shared-form-foreground  cor do texto
     --shared-form-surface     fundo do cartão
     --shared-form-radius      raio do cartão
     --shared-form-font        família tipográfica
   Os valores por omissão vivem aqui; o MainLayout do Frontoffice reescreve-os em
   :root a partir do tema do backoffice e cada formulário pode sobrepor os seus
   (FormTheme) num contentor acima do shell.
   =========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --shared-form-primary: #3b5bf6;
    --shared-form-background: #f0f2f5;
    --shared-form-foreground: #18202a;
    --shared-form-surface: #ffffff;
    --shared-form-radius: 1.25rem;
    --shared-form-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Radzen segue os tokens. Declarado em :root (diálogos/notificações fora do shell) e
   de novo no shell, para que um tema por formulário definido num contentor acima
   chegue aos componentes (as variáveis resolvem-se onde são declaradas). */
:root,
.shared-form-shell {
    --rz-text-font-family: var(--shared-form-font);
    --rz-border-radius: 0.75rem;
    --rz-input-min-height: 42px;
    --rz-primary: var(--shared-form-primary);
    --rz-on-primary: #fff;
    --rz-primary-light: color-mix(in srgb, var(--shared-form-primary) 85%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--shared-form-primary) 14%, white);
    --rz-primary-dark: color-mix(in srgb, var(--shared-form-primary) 85%, black);
    --rz-primary-darker: color-mix(in srgb, var(--shared-form-primary) 70%, black);
    --rz-on-primary-light: #fff;
    --rz-on-primary-lighter: var(--shared-form-primary);
    --rz-text-color: var(--shared-form-foreground);
    --rz-base-background-color: var(--shared-form-surface);
    --rz-dropdown-item-selected-color: var(--shared-form-primary);
    --rz-dropdown-item-selected-background-color: color-mix(in srgb, var(--shared-form-primary), transparent 85%);
    --rz-switch-checked-circle-background-color: var(--shared-form-primary);
    --rz-switch-checked-background-color: color-mix(in srgb, var(--shared-form-primary), transparent 75%);
    --rz-checkbox-checked-background-color: var(--shared-form-primary);
    --rz-checkbox-checked-hover-background-color: var(--shared-form-primary);
    --rz-form-field-helper-padding: 0;
    --rz-button-shadow: none;
}

.shared-form-shell {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    font-family: var(--shared-form-font);
    color: var(--shared-form-foreground);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(60rem 30rem at 50% -12rem, color-mix(in srgb, var(--shared-form-primary) 12%, transparent), transparent 70%),
        linear-gradient(
            170deg,
            color-mix(in srgb, var(--shared-form-background) 55%, white) 0%,
            color-mix(in srgb, var(--shared-form-background) 80%, white) 55%,
            color-mix(in srgb, var(--shared-form-primary) 6%, var(--shared-form-background)) 100%
        );
}

/* ---------------------------------------------------------------------------
   Cenário decorativo (atrás do conteúdo, só tokens do tema).
   --------------------------------------------------------------------------- */
.shared-form-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Esferas com brilho no canto superior esquerdo (aspeto "vidro" suave). */
.shared-form-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        color-mix(in srgb, var(--shared-form-primary) 4%, white) 0%,
        color-mix(in srgb, var(--shared-form-primary) 14%, var(--shared-form-surface)) 48%,
        color-mix(in srgb, var(--shared-form-primary) 24%, var(--shared-form-surface)) 100%
    );
    box-shadow: inset -1.5rem -2rem 4rem color-mix(in srgb, var(--shared-form-primary) 10%, transparent);
    opacity: 0.75;
}

.shared-form-orb--1 {
    top: -14rem;
    left: -10rem;
    width: 30rem;
    height: 22rem;
    border-radius: 0 0 60% 55% / 0 0 70% 60%;
    transform: rotate(-8deg);
    opacity: 0.6;
}

.shared-form-orb--2 {
    bottom: -12rem;
    left: -8rem;
    width: 26rem;
    height: 26rem;
}

.shared-form-orb--3 {
    right: -10rem;
    bottom: -14rem;
    width: 34rem;
    height: 34rem;
}

.shared-form-orb--4 {
    top: 30%;
    right: -14rem;
    width: 24rem;
    height: 24rem;
    opacity: 0.45;
}

.shared-form-orb--5 {
    top: 19%;
    right: 9%;
    width: 7rem;
    height: 7rem;
    opacity: 0.9;
}

/* Anéis finos de contorno (grandes, cortados pelos limites da página). */
.shared-form-ring {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--shared-form-primary) 16%, transparent);
    border-radius: 50%;
}

.shared-form-ring--1 {
    left: -20rem;
    bottom: -22rem;
    width: 44rem;
    height: 44rem;
}

.shared-form-ring--2 {
    top: -18rem;
    right: -6rem;
    width: 40rem;
    height: 40rem;
    opacity: 0.8;
}

@media (max-width: 40rem) {
    .shared-form-ring,
    .shared-form-orb--4,
    .shared-form-orb--5 {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Contentor e cartão (mobile-first).
   --------------------------------------------------------------------------- */
.shared-form-content {
    position: relative;
    width: min(100%, 42rem);
    margin-block: auto;
    margin-inline: auto;
    padding: 1.25rem max(0.75rem, env(safe-area-inset-left)) 1.5rem;
}

.shared-form-content--centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shared-form-card {
    width: 100%;
    background: var(--shared-form-surface);
    border: 1px solid color-mix(in srgb, var(--shared-form-foreground) 5%, transparent);
    border-radius: var(--shared-form-radius);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--shared-form-foreground) 3%, transparent),
        0 30px 60px -28px color-mix(in srgb, var(--shared-form-primary) 22%, color-mix(in srgb, var(--shared-form-foreground) 20%, transparent));
    padding: 1.35rem 1.2rem 1.5rem;
}

/* Ecrãs curtos (acesso, sucesso, mensagens): cartão estreito e centrado. */
.shared-form-card--compact {
    width: min(100%, 24rem);
    margin-inline: auto;
    padding: 1.5rem 1.35rem 1.65rem;
}

.shared-form-panel {
    min-width: 0;
}

/* Containing block for the absolutely positioned screen-reader texts of the questions: without it they escape the
   scrollable body and stretch the page (second, page-level scrollbar). */
.shared-form-body {
    position: relative;
}

.shared-form-header {
    margin: 0 0 1.25rem;
    padding: 0 0 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--shared-form-foreground) 9%, transparent);
}

.shared-form-actions {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--shared-form-foreground) 9%, transparent);
}

.shared-form-actions:empty {
    display: none;
}

.shared-form-brand-footer {
    position: relative;
    padding: 0.25rem 1rem 1.25rem;
    text-align: center;
}

@media (min-width: 40rem) {
    .shared-form-content {
        padding: 2rem 1.5rem 1.75rem;
    }

    .shared-form-header {
        margin-bottom: 1.1rem;
        padding-bottom: 1rem;
    }

    .shared-form-card {
        padding: 1.75rem 1.85rem 1.85rem;
    }

    .shared-form-card--compact {
        padding: 1.75rem 1.65rem 1.85rem;
    }
}

@media (max-height: 34rem) {
    .shared-form-content {
        padding-block: 0.75rem 1rem;
    }

    .shared-form-header {
        margin-bottom: 0.85rem;
        padding-bottom: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Cartão a duas colunas (com <Aside>): marca à esquerda, formulário à direita.
   --------------------------------------------------------------------------- */
.shared-form-shell--split .shared-form-content {
    width: min(100%, 64rem);
}

.shared-form-shell--split .shared-form-card,
.shared-form-shell--split .shared-form-card--compact {
    padding: 0;
    overflow: hidden;
}

.shared-form-shell--split .shared-form-panel {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.2rem 1.5rem;
}

.shared-form-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.15rem 1.15rem 1.25rem;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--shared-form-primary) 15%, var(--shared-form-surface)) 0%,
        color-mix(in srgb, var(--shared-form-primary) 6%, var(--shared-form-surface)) 55%,
        color-mix(in srgb, var(--shared-form-primary) 11%, var(--shared-form-surface)) 100%
    );
}

/* Brilho suave no topo do painel. */
.shared-form-aside::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -9rem -7rem auto -7rem;
    height: 18rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--shared-form-primary) 18%, transparent), transparent 100%);
}

.shared-form-aside-decor {
    display: none;
}

.shared-form-aside-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

@media (min-width: 52rem) {
    .shared-form-shell--split .shared-form-card {
        display: grid;
        grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
        align-items: stretch;
    }

    .shared-form-shell--split .shared-form-card--compact {
        width: min(100%, 46rem);
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    }

    .shared-form-aside {
        padding: 1.6rem 1.75rem 1.5rem;
    }

    .shared-form-shell--split .shared-form-panel {
        padding: 1.5rem 1.75rem 1.6rem;
    }

    /* Espaço mínimo entre o último campo e a faixa de ações (a margem "auto" da faixa cai para 0 quando o
       conteúdo enche o painel). */
    .shared-form-shell--split .shared-form-body {
        padding-bottom: 1.25rem;
    }

    /* Faixa de ações colada ao fundo do painel, mesmo com poucos campos. */
    .shared-form-shell--split .shared-form-actions {
        margin: auto -1.75rem -1.6rem;
        padding: 0.85rem 1.75rem;
        background: color-mix(in srgb, var(--shared-form-foreground) 2.5%, transparent);
    }
}

/* ---------------------------------------------------------------------------
   Ecrãs grandes com altura suficiente: o cartão cabe no ecrã, cabeçalho e faixa de ações ficam fixos e só a área
   das perguntas faz scroll (em ecrãs pequenos/baixos mantém-se o scroll da página).
   --------------------------------------------------------------------------- */
@media (min-width: 52rem) and (min-height: 40rem) {
    .shared-form-shell--split {
        height: 100dvh;
        min-height: 0;
    }

    .shared-form-shell--split .shared-form-content {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .shared-form-shell--split .shared-form-card {
        flex: 0 1 auto;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .shared-form-shell--split .shared-form-panel {
        min-height: 0;
        overflow: hidden;
    }

    .shared-form-shell--split .shared-form-header,
    .shared-form-shell--split .shared-form-actions {
        flex: none;
    }

    .shared-form-shell--split .shared-form-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Room for focus rings/shadows of the fields at the scroll edges. */
        margin-inline: -0.5rem;
        padding-inline: 0.5rem;
        padding-top: 0.25rem;
        scrollbar-width: thin;
    }
}

/* ---------------------------------------------------------------------------
   Chrome dos campos Radzen dentro do shell: neutro em repouso, primary no foco.
   :focus-within porque a CSP bloqueia o onfocusin inline do RadzenFormField.
   --------------------------------------------------------------------------- */
.shared-form-shell .rz-form-field {
    width: 100%;
}

.shared-form-shell .rz-form-field-content {
    border-color: color-mix(in srgb, var(--shared-form-foreground) 18%, transparent);
    background-color: var(--shared-form-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.shared-form-shell .rz-form-field:hover .rz-form-field-content {
    border-color: color-mix(in srgb, var(--shared-form-foreground) 32%, transparent);
}

.shared-form-shell .rz-form-field:focus-within .rz-form-field-content,
.shared-form-shell .rz-form-field.rz-state-focused .rz-form-field-content {
    border-color: var(--shared-form-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shared-form-primary) 18%, transparent);
}

.shared-form-shell .rz-form-field-label {
    color: color-mix(in srgb, var(--shared-form-foreground) 60%, transparent);
    font-weight: 500;
}

.shared-form-shell .rz-form-field:focus-within .rz-form-field-label {
    color: var(--shared-form-primary);
}

.shared-form-shell .rz-form-field-content .rz-textbox,
.shared-form-shell .rz-form-field-content .rz-inputtext,
.shared-form-shell .rz-form-field-content .rz-dropdown,
.shared-form-shell .rz-form-field-content .rz-numeric,
.shared-form-shell .rz-form-field-content .rz-datepicker {
    min-height: 42px;
}

/* ---------------------------------------------------------------------------
   Botões.
   --------------------------------------------------------------------------- */
.shared-form-shell .rz-button {
    min-height: 42px;
    border-radius: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.shared-form-shell .rz-button.rz-primary {
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--shared-form-primary) 55%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.shared-form-shell .rz-button.rz-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--shared-form-primary) 60%, transparent);
}

.shared-form-shell .rz-button.rz-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Secundário neutro (Base + Outlined): dois botões coloridos lado a lado competiam
   entre si. Mesma especificidade do material-base, mas carregado depois. */
.shared-form-shell .rz-button.rz-variant-outlined.rz-base {
    border: 1px solid color-mix(in srgb, var(--shared-form-foreground) 18%, transparent);
    color: color-mix(in srgb, var(--shared-form-foreground) 80%, transparent);
    background: transparent;
    box-shadow: none;
}

.shared-form-shell .rz-button.rz-variant-outlined.rz-base:hover:not(:disabled),
.shared-form-shell .rz-button.rz-variant-outlined.rz-base:focus-visible:not(:disabled) {
    border-color: color-mix(in srgb, var(--shared-form-primary) 45%, transparent);
    color: var(--shared-form-primary);
    background: color-mix(in srgb, var(--shared-form-primary) 7%, var(--shared-form-surface));
}

.shared-form-shell .rz-alert {
    border-radius: 0.75rem;
    box-shadow: none;
}

/* Anel de foco visível e consistente (teclado). */
.shared-form-shell :is(a, button, [role="button"], input[type="radio"], input[type="checkbox"], .rz-button):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--shared-form-primary) 55%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .shared-form-shell *,
    .shared-form-shell *::before,
    .shared-form-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .shared-form-shell .rz-button.rz-primary:hover:not(:disabled) {
        transform: none;
    }
}