/* ============================
   PLATFORMA FORMS
   ============================ */

/* Wrapper for ét felt */
.platforma-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: var(--platforma-space-6);
}

/* Label. WAVE0-F3: .platforma-field__label was a baseline orphan (no CSS) leaving
   portal-login / RequestActivation / Facilities labels unstyled — aliased here. */
.platforma-label,
.platforma-field__label {
    font-size: var(--platforma-text-sm);
    font-weight: 600;
    color: var(--platforma-gray-700);
}

/* Obligatorisk indikator */
.platforma-label-required::after {
    content: " *";
    color: var(--platforma-danger);
}

/* Input / select / textarea – base.
   WAVE0-F3 (2026-09-09): .platforma-form-select (create-form selects, incl. required
   FacilityId) and .platforma-field__input (portal login, RequestActivation, Facilities
   Locations) were FormClassConsistency baseline orphans with NO CSS → native unstyled
   controls on high-visibility resident/create forms. Aliased into the input system here
   (base + focus + disabled) and removed from BaselineKnownOrphans. */
.platforma-input,
.platforma-select-input,
.platforma-form-select,
.platforma-field__input,
.platforma-textarea {
    width: 100%;
    border-radius: 8px;
    /* PL-3: the control-border role (light = border-strong = gray-300, unchanged; dark
       steps to slate-500 so the boundary meets WCAG 1.4.11 on the sunken fill). */
    border: 1px solid var(--pf-color-border-control, var(--platforma-gray-300));
    padding: 0.6rem 0.75rem;
    font-size: var(--platforma-text-sm);
    color: var(--platforma-gray-800);
    background-color: var(--platforma-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .platforma-input::placeholder,
    .platforma-textarea::placeholder {
        /* DARK-FIX (2026-09-21): gray-400 → text-tertiary was ~1.9:1 dark-on-dark; gray-500 (→ text-tertiary
           tone) reads ~5.7:1 dark / ~4.8:1 light. */
        color: var(--platforma-gray-500);
    }

    /* HF 2026-05-11: focus-glow was hardcoded sky-blue rgba(0, 158, 247, 0.1)
       from legacy primary. Now uses --platforma-primary-light token so
       inputs share the brand-red focus glow with the button system. */
    /* WAVE0-F2 (2026-09-09): input focus follows the NAVY accent, not brand-red.
       The accent decision (CONSIST-3b) made navy the platform accent; the red focus
       ring was a leftover from the red-primary era and clashed with the navy chrome.
       Matches the filter-bar focus already using this navy color-mix in admin-themed.css. */
    .platforma-input:focus,
    .platforma-select-input:focus,
    .platforma-form-select:focus,
    .platforma-field__input:focus,
    .platforma-textarea:focus {
        outline: none;
        /* DARK-FIX (2026-09-21): focus indicator is a LINE (accent) role, not a FILL (chrome-action). The fill
           token does not flip on-dark; --platforma-accent flips to the on-dark navy #6E9CC9 (~5:1 on slate-800). */
        border-color: var(--platforma-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--platforma-accent) 22%, transparent);
        background-color: var(--platforma-white);
    }

    /* Disabled state */
    .platforma-input:disabled,
    .platforma-select-input:disabled,
    .platforma-form-select:disabled,
    .platforma-field__input:disabled,
    .platforma-textarea:disabled {
        background: var(--platforma-gray-100);
        color: var(--platforma-gray-500);
        cursor: not-allowed;
    }

/* R-F / F1 (2026-09-30, a11y review) — a READ-ONLY form (pf-access="readonly": a disabled fieldset inside
   [data-pf-readonly], for a viewer the form's endpoint refuses) shows STORED values: they are the page's content, not
   an unavailable control, so they keep the primary text colour on the sunken field (the -webkit-text-fill-color and
   opacity reset undo WebKit's own disabled dimming). Radios and checkboxes are left alone — the On/Off segments hide
   their inputs and carry the state themselves (config-grammar.css). */
[data-pf-readonly] :is(input:not([type="radio"], [type="checkbox"]), select, textarea):disabled {
    color: var(--pf-color-text-primary);
    -webkit-text-fill-color: var(--pf-color-text-primary);
    opacity: 1;
    cursor: default;
}
/* ...but an EMPTY field's placeholder ("not set — paste API key") must not read as a stored value: the text-fill
   colour above would otherwise paint it in the primary colour too (measured in headless Chrome). */
[data-pf-readonly] :is(input, textarea):disabled::placeholder {
    color: var(--pf-color-text-tertiary);
    -webkit-text-fill-color: var(--pf-color-text-tertiary);
}

/* R-F / F1 (2026-09-30, a11y review) — long stored text in a read-only form (a notification-template body, a flag
   description) is drawn as this text region instead of a disabled textarea: a disabled textarea cannot take focus,
   so a keyboard user could not scroll past its first screen and nobody could select it (WCAG 2.1.1). The view gives
   it tabindex="0", role="region" and aria-labelledby → its label; it scrolls when the text is long. It is used WITH
   the form's own field class (.platforma-input / .platforma-form__input), so it takes that field's border, padding and
   size; a view that wants a monospace body says so itself, as the textarea did. */
.pf-readonly-text {
    display: block;
    margin: 0;
    font-family: inherit;
    max-block-size: 32rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--pf-color-text-primary);
    background: var(--pf-color-surface-sunken);
    cursor: text;
}
.pf-readonly-text:focus-visible {
    outline: 2px solid var(--pf-color-border-focus);
    outline-offset: 2px;
}

/* Help / hint text */
.platforma-field-hint {
    font-size: var(--platforma-text-xs);
    color: var(--platforma-gray-500);
}

/* Error message (ASP.NET validation) */
.platforma-field-error {
    font-size: var(--platforma-text-xs);
    color: var(--platforma-danger);
    margin-top: 0.125rem;
}

/* Error state på input */
.platforma-input--error,
.platforma-select-input--error,
.platforma-textarea--error {
    border-color: var(--platforma-danger);
    box-shadow: 0 0 0 3px rgba(241, 65, 108, 0.08);
}

/* Inline layout: label og input ved siden af hinanden */
.platforma-field-inline {
    display: flex;
    align-items: center;
    gap: var(--platforma-space-3);
    margin-bottom: var(--platforma-space-4);
}

    .platforma-field-inline .platforma-label {
        margin: 0;
        white-space: nowrap;
    }

/* Input group (ikon eller prefix) */
.platforma-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.platforma-input-group-prefix {
    position: absolute;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--platforma-gray-500);
    font-size: var(--platforma-text-sm);
}

.platforma-input-group .platforma-input {
    padding-left: 2rem;
}

/* Checkbox + radio */

.platforma-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--platforma-text-sm);
    color: var(--platforma-gray-700);
}

    .platforma-check input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

/* Custom checkbox */
.platforma-check-control {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--platforma-gray-300);
    background: var(--platforma-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: var(--platforma-shadow-sm);
}

.platforma-check input:checked + .platforma-check-control {
    /* DARK-PRIMARY-1: a white check glyph sits on this red → the non-flipping fill, not the text role */
    background: var(--platforma-primary-fill);
    border-color: var(--platforma-primary-fill);
    color: white;
}

    .platforma-check input:checked + .platforma-check-control::after {
        content: "✓";
        font-size: 0.75rem;
        line-height: 1;
    }

/* Checkbox tekst */
.platforma-check-label {
    font-size: var(--platforma-text-sm);
    color: var(--platforma-gray-700);
}

/* Radio variant */
.platforma-check-control--radio {
    border-radius: 999px;
}

.platforma-check input:checked + .platforma-check-control--radio::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    /* DARK-FIX (2026-09-21): the checked radio fill is brand red (non-flipping); surface-raised flips to slate-800
       in dark → dark dot on red = low-contrast. text-on-action is white in BOTH themes (matches the checkmark). */
    background: var(--pf-color-text-on-action);
}

/* Form actions */
.platforma-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--platforma-space-3);
    margin-top: var(--platforma-space-4);
}

/* WAVE0-H3 (2026-09-10): the resident portal activation pages (RequestActivation,
   RequestActivationSubmitted) use platforma-portal-login__* classes that were undefined
   orphans, so the forms were aliased (WAVE0-F3) but the card CHROME was not — un-centered,
   full-width, no surface. Mapped here onto the existing .platforma-auth-* system.
   (2026-09-10: the dead PortalLogin/PortalAccessDenied duplicate views were deleted; their
   access-denied selectors went with them — live login/access-denied render via the v2
   Login.cshtml / AccessDenied.cshtml chrome.) */
.platforma-auth-wrapper,
.platforma-portal-login {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.platforma-auth-card,
.platforma-portal-login__card {
    max-width: 420px;
    width: 100%;
    background: var(--platforma-white);
    padding: var(--platforma-space-6);
    border-radius: 12px;
    box-shadow: var(--platforma-shadow-lg);
}

.platforma-auth-title,
.platforma-portal-login__title {
    font-size: 1.5rem;
    margin-bottom: var(--platforma-space-2);
}

.platforma-auth-subtitle,
.platforma-portal-login__tenant {
    margin-bottom: var(--platforma-space-4);
    color: var(--platforma-gray-500);
}

/* WAVE0-H3: portal auth header block + footer note (no direct auth-* equivalent). */
.platforma-auth-header,
.platforma-portal-login__header {
    margin-bottom: var(--platforma-space-4);
    text-align: center;
}
.platforma-portal-login__footer-note {
    margin-top: var(--platforma-space-4);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--platforma-gray-500);
}

.platforma-validation-summary {
    margin-top: var(--platforma-space-2);
    color: var(--platforma-danger);
    font-size: 0.875rem;
}

/* 2-column grid for form fields */
.platforma-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

@media (max-width: 767.98px) {
    .platforma-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .platforma-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .platforma-form-actions .platforma-btn {
            width: 100%;
            justify-content: center;
        }
}

/* ============================================================
   WAVE0 tail (2026-09-10) — native checkbox/radio brand tint.
   demo10 parity: every native checkbox/radio picks up the navy
   chrome-action accent instead of the OS default blue.
   Zero-specificity :where() so the scoped rules that already
   exist (tenant-issued.css tenant accent, login.css) still win,
   and the hidden real <input> inside .platforma-check (opacity:0)
   is unaffected visually.
   ============================================================ */
:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--platforma-chrome-action, #2E5C8A);
}