/*
    Common Agrando UI components.
    Reference: Figma "Verification and Agrando profile", node 1188:3539.

    Loaded from _Layout AFTER the theme stylesheet, so these rules apply on every page and
    for every theme. All colors and sizes resolve through CSS variables with the Figma
    values as fallbacks, so an individual client theme (dist/css/themes/<clientId>) can
    restyle everything by defining the variables in its own :root — this file never
    defines the variables itself, only consumes them.

    Variable hooks (existing theme vocabulary + new ones introduced here):
      --background-light      card background        (fallback #f5f5f5)
      --form-width            card width             (fallback 561px)
      --border-radius-md      card corner radius     (fallback 10px)
      --card-shadow           card box shadow        (fallback 0 0 6px rgba(0,0,0,.25))
      --card-padding          card padding           (fallback 48px)
      --card-title-size       header font size       (fallback 24px)
      --black-80              main text color        (fallback rgba(0,0,0,.8))
      --input-border-color    input border           (fallback #c5c1c1)
      --input-placeholder     placeholder text       (fallback #a1a1a1)
      --control-radius        input/button radius    (fallback 5px)
      --btn-primary-bg        primary button         (fallback #1e427d)
      --btn-secondary-bg      idle/secondary button  (fallback #dfecff)
      --error-color           inline error text      (fallback #d30535)
*/

/* ---------- Fonts ---------- */
/* Nunito Sans is used by the segmented (tab-style) controls in the design; self-hosted
   like the Open Sans files next to it */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(../files/nunito-sans-latin-600-normal.woff2) format("woff2");
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(../files/nunito-sans-latin-700-normal.woff2) format("woff2");
}

/* ---------- Card ---------- */
/* .form-background is the legacy shared card class (login, 2FA, TOTP, connect user);
   .ag-card is the same look for new flex-based markup (password reset, verify). */
.form-background,
.ag-card {
    background: var(--background-light, #f5f5f5);
    border-radius: var(--border-radius-md, 10px);
    padding: var(--card-padding, 48px);
    box-shadow: var(--card-shadow, 0px 0px 6px rgba(0, 0, 0, 0.25));
}

.ag-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: var(--form-width, 561px);
    /* Same gap to the logo above as the theme gives the legacy .form-background */
    margin-top: var(--spacing-xl, 30px);
}

/* ---------- Header ---------- */
.CardHeader,
.ag-card-title {
    margin: 0;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--card-title-size, 24px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--black-80, rgba(0, 0, 0, 0.8));
    word-wrap: break-word;
}

/* ---------- Field + label ---------- */
.ag-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.ag-label {
    margin: 0;
}

.ag-label,
.form-background label {
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--black-80, rgba(0, 0, 0, 0.8));
}

.form-background label {
    margin-bottom: 7px;
}

/* ---------- Input ---------- */
.ag-input,
.form-background .form-control {
    width: 100%;
    height: 42px;
    background: var(--white, #ffffff);
    border: 1px solid var(--input-border-color, #c5c1c1);
    border-radius: var(--control-radius, 5px);
    padding: 7px 12px;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-sm, 14px);
    color: var(--black-80, rgba(0, 0, 0, 0.8));
}

.ag-input::placeholder,
.form-background .form-control::placeholder {
    color: var(--input-placeholder, #a1a1a1);
}

/* Focused input (Figma input form, Status=focus): bright blue border + soft glow */
.ag-input:focus,
.form-background .form-control:focus,
.code-box:focus {
    border-color: var(--input-focus-border, #00a3ff);
    outline: 0;
    box-shadow: var(--input-focus-shadow, 0 0 0 2px rgba(0, 163, 255, 0.15));
}

/* ---------- Buttons ---------- */
/* Full-width buttons, centered content also for <a class="btn"> (e.g. external providers) */
.ag-btn,
.form-background .btn:not(.btn-link):not(.btn-sm):not(.btn-lg) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: var(--control-radius, 5px);
    padding: 0 15px;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
}

/* The one button used on every window (states from Figma node 69:2584):
   - "prepare" (form not yet valid): pale #dfecff, hover/click #c6dbfa
   - .is-ready / .ag-btn-primary: filled primary with hover and click states
   Pages toggle .is-ready via script once the step's fields are filled. */
.ag-btn {
    border: none;
    cursor: pointer;
    text-decoration: none;
    background: var(--btn-secondary-bg, #dfecff);
    color: var(--btn-secondary-color, #000000);
}

.ag-btn:hover:not(:disabled),
.ag-btn:active:not(:disabled) {
    background: var(--btn-prepare-hover-bg, #c6dbfa);
    color: var(--btn-secondary-color, #000000);
    text-decoration: none;
}

.ag-btn.is-ready,
.ag-btn-primary {
    background: var(--btn-primary-bg, #1e427d);
    color: var(--white, #ffffff);
}

.ag-btn.is-ready:hover:not(:disabled),
.ag-btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover-bg, #1b2d4b);
    color: var(--white, #ffffff);
    text-decoration: none;
}

.ag-btn.is-ready:active:not(:disabled),
.ag-btn-primary:active:not(:disabled) {
    background: var(--btn-primary-active-bg, rgba(0, 0, 0, 0.8));
    color: var(--white, #ffffff);
}

.ag-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Hug-content variant (e.g. external login providers): sizes to its label instead of
   filling the form width; align-self keeps flex-column containers from stretching it */
.ag-btn-inline {
    display: inline-flex;
    width: auto;
    min-width: 120px;
    align-self: flex-start;
}

/* Outlined secondary button (Figma type "secondary"/"normal": send code, go back, edit) */
.ag-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
    padding: 0 15px;
    border-radius: var(--control-radius, 5px);
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    background: var(--white, #ffffff);
    border: 1px solid var(--btn-primary-bg, #1e427d);
    color: var(--btn-primary-bg, #1e427d);
    cursor: pointer;
    text-decoration: none;
}

.ag-btn-outline:hover:not(:disabled) {
    background: var(--btn-outline-hover-bg, #edf4ff);
    border-color: var(--btn-primary-hover-bg, #1b2d4b);
    color: var(--btn-primary-hover-bg, #1b2d4b);
    text-decoration: none;
}

.ag-btn-outline:active:not(:disabled) {
    background: var(--btn-outline-hover-bg, #edf4ff);
    border-color: var(--black-80, rgba(0, 0, 0, 0.8));
    color: var(--black-80, rgba(0, 0, 0, 0.8));
}

/* No focus ring on mouse click (bootstrap's button:focus outline); keep a visible
   ring for keyboard focus only */
.ag-btn:focus,
.form-background .btn:not(.btn-link):focus {
    outline: none;
    box-shadow: none;
}

.ag-btn:focus-visible,
.form-background .btn:not(.btn-link):focus-visible {
    outline: 2px solid var(--btn-primary-bg, #1e427d);
    outline-offset: 2px;
}

/* ---------- Blocks ---------- */
/* Action block under the fields (Figma actions-block: 20px above the button) */
.ag-actions {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    width: 100%;
}

/* Inline error row: icon + red text */
.ag-error {
    display: flex;
    gap: 3px;
    align-items: center;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-sm, 14px);
    color: var(--error-color, #d30535);
}

.ag-error svg {
    flex-shrink: 0;
}

/* Checklist rows (e.g. password rules): 18px icon + 16px text */
.ag-rules {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.ag-rule {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
    font-size: var(--font-size-md, 16px);
    font-weight: var(--font-weight-normal, 400);
    line-height: 28px;
    color: var(--text-black, #000000);
}

.ag-rule svg {
    flex-shrink: 0;
}

/* ---------- Language selector (top right corner of every page) ---------- */
.ag-lang {
    position: fixed;
    top: 16px;
    right: 24px;
    z-index: 1000;
    font-family: var(--font-family-sans-serif, 'Open Sans', sans-serif);
}

/* Pill with the current language's flag and name */
.ag-lang-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    background: var(--white, #ffffff);
    border: 1px solid var(--border-light, #e9ecef);
    border-radius: 999px;
    box-shadow: var(--box-shadow-light, 0px 2px 8px 0px rgba(0, 0, 0, 0.15));
    font-family: inherit;
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--black-80, rgba(0, 0, 0, 0.8));
    cursor: pointer;
}

.ag-lang-toggle:hover {
    background: var(--btn-outline-hover-bg, #edf4ff);
}

.ag-lang-flag {
    display: block;
    width: 20px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 2px;
    /* Faint edge so light flags (e.g. Finland) don't melt into the background */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Globe fallback for cultures without a flag */
.ag-lang-flag-generic {
    width: 16px;
    height: 16px;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-dark-blue, #181b3e);
}

.ag-lang-option-label {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ag-lang-toggle:focus {
    outline: none;
}

.ag-lang-toggle:focus-visible {
    outline: 2px solid var(--btn-primary-bg, #1e427d);
    outline-offset: 2px;
}

.ag-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    min-width: 180px;
    padding: 4px 0;
    background: var(--white, #ffffff);
    border: 1px solid var(--border-light, #e9ecef);
    border-radius: 8px;
    box-shadow: var(--box-shadow-light, 0px 2px 8px 0px rgba(0, 0, 0, 0.15));
}

.ag-lang.open .ag-lang-menu {
    display: flex;
}

.ag-lang-option {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--font-size-sm, 14px);
    font-weight: 400;
    text-align: left;
    color: var(--black-80, rgba(0, 0, 0, 0.8));
    cursor: pointer;
}

.ag-lang-option:hover {
    background: var(--background-light, #f5f5f5);
}

.ag-lang-option svg {
    flex-shrink: 0;
    color: var(--btn-primary-bg, #1e427d);
}

@media (max-width: 640px) {
    .ag-lang {
        top: 8px;
        right: 8px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .form-background,
    .ag-card {
        padding: 24px 20px;
        border-radius: 8px;
    }

    .ag-card {
        gap: 24px;
    }
}