/* =============================================================================
   Formulärfältens utseende — ett ställe
   =============================================================================

   Reglerna låg tidigare i NIO nästan identiska uppsättningar: sju <style>-block i
   komponenter och sidor, plus två i site.css. De hade hunnit glida isär —
   LocalBusinessPage och CareersPage sa 16px hörnradie, de övriga 0.75rem (12px),
   och padding varierade mellan 18px 16px och 1rem.

   Värst var att LocalBusinessPage stylade .filibabba-form, som onboardingflödet
   också använder. Båda uppsättningarna gällde alltså samtidigt på goda
   grannar-sidan, och källordningen avgjorde vilken som vann.

   ValidatedTextInput — fälten för förnamn och efternamn — hade dessutom hela sitt
   block bortkommenterat och ärvde vad sidan råkade säga.

   Nu: en uppsättning regler, byggd på tokens från partner-tokens.css.

   ---------------------------------------------------------------------------
   OM !important

   De behövs. MudBlazor sätter sina egna värden med hög specificitet, och det här
   är en överstyrning av ett komponentbibliotek — inte vanlig kaskad. De försvinner
   den dag Mud lyfts ur formulärlagret, och då är det den här filen som raderas.

   ---------------------------------------------------------------------------
   SELEKTORLISTAN

   Varje komponent har sin egen omslagsklass sedan tidigare. Att lista dem här i
   stället för att döpa om dem i markupen håller den här ändringen till CSS:en.
   Ny fältkomponent? Lägg till klassen i listan nedan — inget eget <style>-block.
   ============================================================================= */

.filibabba-form,
.filibabba-text-input,
.filibabba-phone,
.filibabba-social-input,
.filibabba-autocomplete,
.filibabba-email-verifier,
.filibabba-url-input,
.simple-partner-onboarding {
    /* Fältens egna mått, samlade så en justering räcker.
       Textstorleken är medvetet större än portalens brödtext — det man skriver i
       ska vara lättare att läsa än det man läser förbi. */
    --pp-field-radius: var(--pp-radius);
    --pp-field-padding: 1rem;
    --pp-field-font-size: 1.125rem;
    --pp-field-border-width: 2px;

    /* Fältets ram är MÖRK, inte ljus. Allt annat i portalen står på den mörka
       duken och ramas in med genomskinligt vitt — men inmatningsytan är vitt
       papper, och en vit ram på vitt papper är ingen ram. Den låg tidigare på
       rent vitt och var alltså osynlig hela vägen runt varje fält. */
    --pp-field-line: rgba(17, 24, 39, 0.14);
}

/* --- Ytterramen --------------------------------------------------------- */

.filibabba-form .mud-input-outlined-border,
.filibabba-text-input .mud-input-outlined-border,
.filibabba-phone .mud-input-outlined-border,
.filibabba-social-input .mud-input-outlined-border,
.filibabba-autocomplete .mud-input-outlined-border,
.filibabba-email-verifier .mud-input-outlined-border,
.filibabba-url-input .mud-input-outlined-border,
.simple-partner-onboarding .mud-input-outlined-border {
    border-radius: var(--pp-field-radius) !important;
    border-width: var(--pp-field-border-width) !important;
}

/* Vilande fält har en neutral ram. Fokus och fel får styras av MudBlazor-temat,
   som sedan Fas 1 känner till både handlingsfärgen och felfärgen.

   Ramen var rent vitt: --pp-line var 255 255 255 utan alfa, och en 2px helvit
   kant runt varje fält lyser mer än innehållet i det. Linjetokenet har alfat i
   sig nu. */
.filibabba-form .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-text-input .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-phone .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-social-input .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-autocomplete .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-email-verifier .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.filibabba-url-input .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border,
.simple-partner-onboarding .mud-input:not(.mud-focused):not(.mud-error) .mud-input-outlined-border {
    border-color: var(--pp-field-line) !important;
}

/* --- Själva inmatningsytan ---------------------------------------------- */

.filibabba-form .mud-input,
.filibabba-text-input .mud-input,
.filibabba-phone .mud-input,
.filibabba-social-input .mud-input,
.filibabba-autocomplete .mud-input,
.filibabba-email-verifier .mud-input,
.filibabba-url-input .mud-input,
.simple-partner-onboarding .mud-input {
    background-color: rgb(var(--pp-surface)) !important;
    border-radius: var(--pp-field-radius) !important;
}

.filibabba-form .mud-input-slot,
.filibabba-text-input .mud-input-slot,
.filibabba-phone .mud-input-slot,
.filibabba-social-input .mud-input-slot,
.filibabba-autocomplete .mud-input-slot,
.filibabba-email-verifier .mud-input-slot,
.filibabba-url-input .mud-input-slot,
.simple-partner-onboarding .mud-input-slot {
    padding: var(--pp-field-padding) !important;
    font-size: var(--pp-field-font-size) !important;
    background-color: rgb(var(--pp-surface)) !important;
    border-radius: var(--pp-field-radius) !important;
}

/* Låst fält får en dovare yta än ett man kan skriva i. Regeln fanns bara i
   e-postverifierarens kopia, men gäller lika för alla fält som låses — adressen
   låses efter verifiering, organisationsnumret efter uppslaget mot Bolagsverket. */
.filibabba-form .mud-disabled .mud-input-slot,
.filibabba-text-input .mud-disabled .mud-input-slot,
.filibabba-phone .mud-disabled .mud-input-slot,
.filibabba-social-input .mud-disabled .mud-input-slot,
.filibabba-autocomplete .mud-disabled .mud-input-slot,
.filibabba-email-verifier .mud-disabled .mud-input-slot,
.filibabba-url-input .mud-disabled .mud-input-slot,
.simple-partner-onboarding .mud-disabled .mud-input-slot {
    background-color: rgb(var(--pp-ink-50)) !important;
}

/* --- Etiketter -----------------------------------------------------------
   Fälten har egna <label> ovanför sig i markupen. MudBlazors flytande etikett
   skulle bli en andra, överlappande rubrik — därför göms den helt. */

.filibabba-form .mud-input-control,
.filibabba-text-input .mud-input-control,
.filibabba-phone .mud-input-control,
.filibabba-social-input .mud-input-control,
.filibabba-autocomplete .mud-input-control,
.filibabba-email-verifier .mud-input-control,
.filibabba-url-input .mud-input-control,
.simple-partner-onboarding .mud-input-control {
    margin-top: 0 !important;
}

.filibabba-form legend,
.filibabba-form .mud-input-label,
.filibabba-text-input legend,
.filibabba-text-input .mud-input-label,
.filibabba-phone legend,
.filibabba-phone .mud-input-label,
.filibabba-social-input legend,
.filibabba-social-input .mud-input-label,
.filibabba-autocomplete legend,
.filibabba-autocomplete .mud-input-label,
.filibabba-email-verifier legend,
.filibabba-email-verifier .mud-input-label,
.filibabba-url-input legend,
.filibabba-url-input .mud-input-label,
.simple-partner-onboarding legend,
.simple-partner-onboarding .mud-input-label {
    display: none !important;
    width: 0 !important;
}

/* -----------------------------------------------------------------------------
   Fältet, utan MudBlazor

   Reglerna ovanför överstyr MudBlazors fält. Den här klassen ÄR fältet: den
   används av LfbTextField, av de komponenter som ritar egna inputs (koden i
   e-postverifieraren) OCH av native-kontrollerna select/number/date, som aldrig
   gick genom MudBlazor. Samma utseende, en källa.

   Fälten är vitt papper med mörk text — det enda ogenomskinliga i portalen. Se
   partner-tokens.css om varför.
   -------------------------------------------------------------------------- */

.pp-field {
    width: 100%;
    padding: var(--pp-field-padding, 1rem);
    font-size: var(--pp-field-font-size, 1.125rem);
    color: rgb(var(--pp-ink-800));
    background-color: rgb(var(--pp-surface));
    border: var(--pp-field-border-width, 2px) solid var(--pp-field-line);
    border-radius: var(--pp-field-radius, 0.875rem);
    transition: border-color 200ms var(--pp-ease-field);
}

    .pp-field::placeholder {
        color: rgb(var(--pp-ink-400));
    }

    .pp-field:focus {
        border-color: rgb(var(--pp-action));
        outline: none;
    }

    .pp-field:disabled {
        background-color: rgb(var(--pp-ink-50));
        color: rgb(var(--pp-ink-500));
    }

    /* Underkänt fält. Rött är status, inte varumärke — se tokens. */
    .pp-field.pp-field-invalid,
    .pp-field.invalid {
        border-color: rgb(var(--pp-danger-500));
    }

/* Koden i e-postverifieraren: få tecken, men de ska vara lätta att läsa högt. */
.pp-field-code {
    text-align: center;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
}