@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    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-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}

/* Align the public form with the internal app's Radzen theme tokens
   (Inter, 1rem radius, soft card shadows, 40px inputs). */
:root {
    --rz-text-font-family: "Inter", system-ui, sans-serif;
    --rz-border-radius: 0.75rem;
    --rz-input-min-height: 44px;
    /* Defaults mirror Orka Internal's seeded theme (parms.ThemeSetting); a published
       form's snapshot theme overrides them via --shared-form-primary. */
    --rz-primary: var(--shared-form-primary, rgba(5, 176, 230, 1));
    --rz-on-primary: #fff;
    --rz-secondary: rgba(107, 195, 138, 1);
    --rz-on-secondary: #fff;
    --rz-text-secondary-color: rgb(97, 97, 97);
    --rz-text-color: rgb(0, 0, 0);
    --rz-base-background-color: rgb(255, 255, 255);
    --rz-border-color: rgba(235, 239, 244, 1);
    --rz-input-placeholder-color: rgba(189, 189, 189, 1);
    --rz-primary-light: color-mix(in srgb, var(--rz-primary) 85%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--rz-primary) 70%, white);
    --rz-primary-dark: color-mix(in srgb, var(--rz-primary) 85%, black);
    --rz-primary-darker: color-mix(in srgb, var(--rz-primary) 70%, black);
    --rz-on-primary-lighter: var(--rz-on-primary);
    --rz-on-primary-light: var(--rz-on-primary);
    --rz-dropdown-item-selected-color: var(--rz-primary);
    --rz-dropdown-item-selected-background-color: color-mix(in srgb, var(--rz-primary), transparent 75%);
    --rz-switch-checked-circle-background-color: var(--rz-primary);
    --rz-switch-checked-background-color: color-mix(in srgb, var(--rz-primary), transparent 75%);
    --rz-checkbox-checked-background-color: var(--rz-primary);
    --rz-checkbox-checked-hover-background-color: var(--rz-primary);
    --rz-form-field-helper-padding: 0;
    --rz-card-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 4px -1px rgba(0, 0, 0, 0.06);
    --rz-button-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shared-form-shell {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    font-family: var(--rz-text-font-family);
    /* Camadas só com tokens do theme: glow da primary + vinheta leve no fundo. */
    background:
        radial-gradient(56rem 28rem at 50% -10rem, color-mix(in srgb, var(--shared-form-primary, #05b0e6) 24%, transparent), transparent 68%),
        radial-gradient(36rem 22rem at 100% 110%, color-mix(in srgb, var(--shared-form-primary, #05b0e6) 10%, transparent), transparent 58%),
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--shared-form-background, #f0f2f5) 82%, white) 0%,
            var(--shared-form-background, #f0f2f5) 42%,
            color-mix(in srgb, var(--shared-form-background, #f0f2f5) 90%, var(--shared-form-foreground, #18202a)) 100%
        );
    color: var(--shared-form-foreground, #18202a);
}

/* ---------------------------------------------------------------------------
   Cenário decorativo: manchas orgânicas soltas, anéis, pontos e curvas
   pontilhadas, espalhados sem simetria. Fica atrás do conteúdo com z-index
   negativo e todas as cores saem de --shared-form-primary/-surface, por isso
   acompanha a marca de cada empresa sem uma única imagem.
   --------------------------------------------------------------------------- */
.shared-form-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Cada mancha tem raios de canto irregulares (a "gota" clássica) e uma rotação
   própria — é isso que evita a leitura de padrão. */
.shared-form-shape {
    position: absolute;
    background: color-mix(in srgb, var(--shared-form-primary, #05b0e6) 13%, transparent);
    filter: blur(0.5px);
}

.shared-form-shape--1 {
    top: -11rem;
    left: -7rem;
    width: 27rem;
    height: 23rem;
    border-radius: 58% 42% 39% 61% / 45% 51% 49% 55%;
    transform: rotate(14deg);
}

.shared-form-shape--2 {
    top: 18%;
    right: -9rem;
    width: 21rem;
    height: 25rem;
    border-radius: 63% 37% 54% 46% / 38% 62% 38% 62%;
    background: color-mix(in srgb, var(--shared-form-primary, #05b0e6) 9%, transparent);
    transform: rotate(-9deg);
}

.shared-form-shape--3 {
    bottom: -8rem;
    left: -6rem;
    width: 25rem;
    height: 20rem;
    border-radius: 41% 59% 63% 37% / 52% 39% 61% 48%;
    background: color-mix(in srgb, var(--shared-form-surface, #fff) 55%, transparent);
    transform: rotate(6deg);
}

.shared-form-shape--4 {
    right: 16%;
    bottom: -9rem;
    width: 19rem;
    height: 16rem;
    border-radius: 49% 51% 35% 65% / 60% 44% 56% 40%;
    background: color-mix(in srgb, var(--shared-form-primary, #05b0e6) 11%, transparent);
    transform: rotate(-17deg);
}

/* Acento pequeno e sólido, deliberadamente fora dos cantos. */
.shared-form-shape--5 {
    top: 13%;
    left: 24%;
    width: 4.5rem;
    height: 4rem;
    border-radius: 56% 44% 62% 38% / 47% 58% 42% 53%;
    background: color-mix(in srgb, var(--shared-form-primary, #05b0e6) 22%, transparent);
    transform: rotate(22deg);
}

/* Anéis vazios: dão profundidade sem pesar. */
.shared-form-ring {
    position: absolute;
    border: 1px dashed color-mix(in srgb, var(--shared-form-primary, #05b0e6) 38%, transparent);
    border-radius: 50%;
    opacity: 0.6;
}

.shared-form-ring--1 {
    top: 6.5rem;
    right: 11%;
    width: 8.5rem;
    height: 8.5rem;
}

.shared-form-ring--2 {
    bottom: 18%;
    left: 12%;
    width: 4.5rem;
    height: 4.5rem;
    border-style: dotted;
    opacity: 0.45;
}

/* Duas grelhas de pontos de tamanhos diferentes, em cantos opostos. */
.shared-form-dots {
    position: absolute;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--shared-form-primary, #05b0e6) 45%, transparent) 1.6px,
        transparent 1.7px);
    background-size: 1.1rem 1.1rem;
}

.shared-form-dots--1 {
    left: 3rem;
    bottom: 6rem;
    width: 9.5rem;
    height: 6.5rem;
    opacity: 0.6;
}

.shared-form-dots--2 {
    top: 4rem;
    right: 3.5rem;
    width: 6rem;
    height: 4.5rem;
    background-size: 0.85rem 0.85rem;
    opacity: 0.4;
}

/* Curvas pontilhadas, cada uma no seu canto e com traçado diferente. */
.shared-form-arc {
    position: absolute;
    height: auto;
    stroke: color-mix(in srgb, var(--shared-form-primary, #05b0e6) 65%, transparent);
    stroke-width: 3;
}

.shared-form-arc--1 {
    left: 0;
    bottom: 2.5rem;
    width: min(32rem, 44vw);
    opacity: 0.5;
}

.shared-form-arc--2 {
    top: 0;
    right: 0;
    width: min(22rem, 30vw);
    opacity: 0.35;
}

/* Em ecrãs estreitos o cartão ocupa quase tudo: só ficam as manchas grandes. */
@media (max-width: 40rem) {
    .shared-form-dots,
    .shared-form-arc,
    .shared-form-ring,
    .shared-form-shape--5 {
        display: none;
    }
}

/* Um único contentor centrado: com espaço a sobrar o cartão fica a meio;
   quando o formulário é maior, as margens colapsam e o scroll é normal. */
.shared-form-content {
    position: relative;
    width: min(100%, 40rem);
    margin-block: auto;
    margin-inline: auto;
    padding: 1.25rem 1rem 1.5rem;
}

.shared-form-brand-footer {
    position: relative;
}

/* Marca/título dentro do cartão, separados do formulário por um filete leve. */
.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, currentColor) 9%, transparent);
}

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

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

    .shared-form-header .external-logo,
    .shared-form-header .setup-logo,
    .shared-form-header .app-brand img {
        max-height: 2.25rem;
    }
}

/* Sombra tintada + filete subtil: profundidade sem caixa flutuante genérica. */
.shared-form-card {
    background: var(--shared-form-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--shared-form-foreground, currentColor) 8%, transparent);
    border-radius: 1.25rem;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--shared-form-foreground, #18202a) 4%, transparent),
        0 16px 36px -18px color-mix(in srgb, var(--shared-form-foreground, #18202a) 16%, transparent);
    padding: 1.35rem 1.2rem 1.5rem;
}

/* Ecrãs curtos (password, mensagem de sucesso): um cartão largo e vazio fica
   desequilibrado, por isso encolhe e centra-se em vez de ocupar a coluna toda. */
.shared-form-card--compact {
    width: min(100%, 24rem);
    margin-inline: auto;
    padding: 1.5rem 1.35rem 1.65rem;
}

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

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

    .shared-form-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1.35rem;
    }

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

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

/* ---------------------------------------------------------------------------
   Cartão a duas colunas (SharedFormLayout com <Aside>): painel de marca à
   esquerda, formulário à direita. Todo o cromado colorido sai dos tokens do
   tema sincronizado (--shared-form-primary/-surface/-foreground), por isso o
   ecrã acompanha automaticamente a cor e o logótipo de cada empresa.
   --------------------------------------------------------------------------- */
.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 {
    /* O painel de marca sangra até ao limite do cartão: o padding passa para dentro. */
    padding: 0;
    overflow: hidden;
}

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

.shared-form-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem 1.35rem;
    overflow: hidden;
    isolation: isolate;
    /* Base = superfície do cartão tingida com a primary: funciona tanto em temas
       claros como escuros, porque o texto continua a usar --shared-form-foreground. */
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--shared-form-primary, #05b0e6) 26%, var(--shared-form-surface, #fff)) 0%,
            color-mix(in srgb, var(--shared-form-primary, #05b0e6) 7%, var(--shared-form-surface, #fff)) 46%,
            color-mix(in srgb, var(--shared-form-primary, #05b0e6) 16%, var(--shared-form-surface, #fff)) 100%
        );
}

/* Halo difuso no topo do painel, na cor da marca. */
.shared-form-aside::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8rem -6rem auto -6rem;
    height: 18rem;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--shared-form-primary, #05b0e6) 34%, transparent),
        transparent 100%);
}

/* Malha de pontos: textura discreta, também derivada da primary. */
.shared-form-aside::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 1.1rem;
    bottom: 1.4rem;
    width: 7.5rem;
    height: 4.5rem;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--shared-form-primary, #05b0e6) 55%, transparent) 1.3px,
        transparent 1.4px);
    background-size: 0.85rem 0.85rem;
    opacity: 0.55;
}

/* Arcos tracejados: dão movimento ao painel sem imagens externas. */
.shared-form-aside-decor {
    position: absolute;
    z-index: -1;
    right: -6.5rem;
    bottom: -5rem;
    width: 16rem;
    height: 16rem;
    border: 1px dashed color-mix(in srgb, var(--shared-form-primary, #05b0e6) 42%, transparent);
    border-radius: 50%;
    opacity: 0.7;
}

.shared-form-aside-decor::before {
    content: "";
    position: absolute;
    inset: 2.25rem;
    border: 1px dashed color-mix(in srgb, var(--shared-form-primary, #05b0e6) 30%, transparent);
    border-radius: 50%;
}

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

/* Empilhado até haver largura para duas colunas reais. */
@media (min-width: 52rem) {
    .shared-form-shell--split .shared-form-card {
        display: grid;
        grid-template-columns: minmax(0, 20rem) 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.9rem 1.6rem 1.75rem;
    }

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

    /* Rodapé de ações colado ao fundo do painel, como no cartão de referência:
       a faixa fica ao nível do fundo mesmo com poucos campos. */
    .shared-form-shell--split .shared-form-actions {
        margin: auto -1.85rem -1.85rem;
        padding: 1rem 1.85rem;
        background: color-mix(in srgb, var(--shared-form-foreground, #18202a) 3%, transparent);
    }
}

/* Faixa de marca no topo em ecrãs estreitos: logótipo e boas-vindas lado a lado. */
@media (max-width: 51.999rem) {
    .shared-form-aside {
        padding: 1.15rem 1.15rem 1.25rem;
    }

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

/* Rodapé de marca: último filho do shell, por isso as margens automáticas do
   conteúdo centram o bloco no espaço acima dele. */
.shared-form-brand-footer {
    padding-block: 0.25rem 1.25rem;
    padding-inline: 1rem;
    text-align: center;
}

/* Rodapé do cartão: separado por um filete, dentro do fluxo — nunca sobrepõe campos. */
.shared-form-actions {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--shared-form-foreground, currentColor) 9%, transparent);
}

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

.shared-form-content form {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.external-form-field,
.external-form-field .rz-form-field,
.external-form-field .rz-textbox,
.external-form-field .rz-textarea,
.external-form-field .rz-numeric,
.external-form-field .rz-dropdown,
.external-form-field .rz-datepicker {
    width: 100%;
    min-width: 0;
}

.external-form-field .rz-inputtext,
.external-form-field .rz-dropdown,
.external-form-field .rz-colorpicker,
.external-form-field .rz-chkbox {
    min-height: var(--rz-input-min-height);
}

/* Alvos de toque: o tema da empresa fixa os campos em 40px, abaixo dos 44px
   recomendados para dedo. Seletor específico porque theme.css carrega depois. */
.shared-form-content .rz-form-field-content .rz-textbox,
.shared-form-content .rz-form-field-content .rz-textarea,
.shared-form-content .rz-form-field-content .rz-inputtext,
.shared-form-content .rz-form-field-content .rz-dropdown,
.shared-form-actions .rz-button {
    min-height: 44px;
}

/* O chrome neutro dos campos vive em External/wwwroot/css/app.css (carrega
   depois do reskin partilhado que força --rz-primary em labels/bordas). */

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

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

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

@media (prefers-reduced-motion: reduce) {
    .shared-form-content .rz-button.rz-primary {
        transition: none;
    }

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

@media (max-width: 39.999rem) {
    .shared-form-content {
        padding-inline: max(0.75rem, env(safe-area-inset-left));
    }
}

/* ---------------------------------------------------------------------------
   Campo de ficheiros (SharedTusFileInput). Global e não com scope: o <input>
   vem do componente InputFile e a marcação dos cartões usa RadzenIcon/RadzenButton
   — CSS isolado não chega ao que outro componente renderiza.
   --------------------------------------------------------------------------- */
.shared-upload {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
    padding: .55rem .75rem .65rem;
}

/* Soft primary: filled sólido gritava dentro do outline do FormField. */
.shared-upload-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    margin: 0;
    padding: .45rem .85rem;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 35%, transparent);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--rz-primary) 10%, white);
    color: var(--rz-primary);
    font-size: .875rem;
    font-weight: var(--app-font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
}

.shared-upload-trigger.disabled {
    opacity: .6;
    pointer-events: none;
}

/* O input nativo ("Choose file / No file chosen") fica fora de vista mas
   focável — o label acima é o alvo do clique. */
.shared-upload-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.shared-upload-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shared-upload-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border: 1px solid var(--rz-border-color, #e0e3e7);
    border-radius: .5rem;
    background: var(--rz-base-background-color, #fff);
}

.shared-upload-card-icon {
    color: var(--rz-primary);
}

.shared-upload-card-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.shared-upload-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-upload-card-size {
    color: var(--rz-text-secondary-color, #67758a);
    font-size: .75rem;
}

.shared-upload-progress {
    width: 100%;
}

.shared-upload-error {
    padding: .65rem;
    border-radius: .4rem;
    color: #7a1717;
    background: #fdeaea;
}