/* =========================================================================
   Pàgines de compte (/Account: Login, Registre, Canviar contrasenya) i AccountLayout.
   Separat d'app.css perquè només ho fan servir aquestes pàgines (SSR estàtic, sense MudLayout).
   Direcció "Quiet Premium", la mateixa que la landing pública (landing.css): monocrom càlid,
   vores fines i un sol accent. Tots els colors són tokens declarats a .household-account-shell.
   ========================================================================= */

/* Pàgines /Account/ (Login/Register): es renderitzen amb SSR estàtic (sense circuit
   interactiu, necessari per poder escriure la cookie d'autenticació), així que no es pot
   detectar el mode fosc via JS interop (WatchSystemDarkModeAsync no funciona aquí). En
   comptes d'això, se sobreescriuen les variables de paleta de MudBlazor només dins d'aquest
   contenidor (amb la paleta de la landing), sense afectar la resta de l'aplicació. */
.household-account-shell {
    --oo-auth-bg: #FAFAF8;
    --oo-auth-surface: #FFFFFF;
    --oo-auth-text: #111111;
    --oo-auth-text-2: #5C5B57;
    --oo-auth-text-3: #6E6D68;
    --oo-auth-line: rgba(0, 0, 0, 0.08);
    --oo-auth-line-strong: rgba(0, 0, 0, 0.16);
    --oo-auth-accent: #4F35C9;
    --oo-auth-accent-hover: #432CB0;
    --oo-auth-on-accent: #FFFFFF;
    --oo-auth-accent-soft: rgba(79, 53, 201, 0.12);
    --oo-auth-panel-bg: #111110;
    --oo-auth-panel-text: #F4F3EF;
    --oo-auth-panel-text-2: #B4B3AD;
    --oo-auth-panel-line: rgba(255, 255, 255, 0.10);
    --oo-auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.10);

    --oo-auth-radius: 14px;
    --oo-auth-radius-sm: 8px;
    --oo-auth-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --oo-auth-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --mud-palette-background: var(--oo-auth-bg);
    --mud-palette-surface: var(--oo-auth-surface);
    --mud-palette-text-primary: var(--oo-auth-text);
    --mud-palette-text-secondary: var(--oo-auth-text-2);
    --mud-palette-divider: var(--oo-auth-line);
    --mud-palette-lines-default: var(--oo-auth-line);
    --mud-palette-lines-inputs: var(--oo-auth-line-strong);
    --mud-palette-primary: var(--oo-auth-accent);
    --mud-palette-primary-darken: var(--oo-auth-accent-hover);
    --mud-palette-primary-text: var(--oo-auth-on-accent);

    min-height: 100vh;
    background-color: var(--mud-palette-background);
}

:root[data-tema="dark"] .household-account-shell {
    --oo-auth-bg: #121211;
    --oo-auth-surface: #1C1C1A;
    --oo-auth-text: #EDECE8;
    --oo-auth-text-2: #A9A8A2;
    --oo-auth-text-3: #9A9993;
    --oo-auth-line: rgba(255, 255, 255, 0.09);
    --oo-auth-line-strong: rgba(255, 255, 255, 0.18);
    --oo-auth-accent: #A495FF;
    --oo-auth-accent-hover: #B8ACFF;
    --oo-auth-on-accent: #121211;
    --oo-auth-accent-soft: rgba(164, 149, 255, 0.16);
    --oo-auth-panel-bg: #0B0B0A;
    --oo-auth-panel-text: #EDECE8;
    --oo-auth-panel-text-2: #A9A8A2;
    --oo-auth-panel-line: rgba(255, 255, 255, 0.08);
    --oo-auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 16px 40px -16px rgba(0, 0, 0, 0.60);

    --mud-palette-error: #E86A6A;
}

/* =========================================================================
   Login/Register (AccountLayout): graella de dues columnes — panell fosc de marca a
   l'esquerra (amagat a mòbil, on el substitueix una franja compacta) i formulari a la dreta.
   ========================================================================= */
.household-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

@media (min-width: 960px) {
    .household-auth-split {
        grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
    }
}

.household-auth-brand {
    display: none;
    flex-direction: column;
    gap: 48px;
    padding: 32px 56px 64px;
    background-color: var(--oo-auth-panel-bg);
    color: var(--oo-auth-panel-text);
}

@media (min-width: 960px) {
    .household-auth-brand {
        display: flex;
    }
}

.household-auth-brand-nom {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.household-auth-brand-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    max-width: 400px;
}

.household-auth-eyebrow {
    align-self: flex-start;
    margin: 0 0 24px;
    padding: 5px 12px;
    border: 1px solid var(--oo-auth-panel-line);
    border-radius: 999px;
    color: var(--oo-auth-panel-text-2);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.household-auth-lema {
    margin: 0 0 20px;
    font-family: var(--oo-auth-font-display);
    font-size: clamp(36px, 3.6vw, 48px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.household-auth-brand-subtitol {
    margin: 0 0 40px;
    color: var(--oo-auth-panel-text-2);
    font-size: 16px;
    line-height: 1.6;
}

.household-auth-punts {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--oo-auth-panel-line);
}

    .household-auth-punts li {
        display: flex;
        align-items: baseline;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--oo-auth-panel-line);
        font-size: 15px;
    }

.household-auth-num {
    color: var(--oo-auth-panel-text-2);
    font-family: var(--oo-auth-font-mono);
    font-size: 13px;
}

.household-auth-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* Amplada del propi contenidor de columna: prou generosa per no estrènyer altres pàgines que
   comparteixen aquest layout (ex: Onboarding.razor, amb la seva pròpia MudContainer
   MaxWidth.Small de 600px i la graella de Categories recomanades — mai només les 420px que calen
   per a Login/Register). L'amplada final de la targeta de Login/Register ve d'household-auth-card
   (max-width:420px) més avall, no d'aquí. */
.household-auth-form-col-inner {
    width: 100%;
    max-width: 640px;
}

/* Selector d'idioma de Login/Registre: discret, a dalt a la dreta del formulari. <select> natiu
   (aquestes pàgines són SSR estàtic, sense MudSelect interactiu), amb l'aspecte dels controls. */
.household-auth-idioma {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

    .household-auth-idioma select {
        min-height: 36px;
        padding: 4px 28px 4px 12px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-radius: 999px;
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font: inherit;
        font-size: 0.875rem;
        cursor: pointer;
    }

/* Franja de marca només a mòbil (<960px): el to fosc de la capçalera de la landing, amb la marca
   i el subtítol. Padding superior amb env(safe-area-inset-top): aquestes pàgines no tenen cap
   AppBar per davant, així que la franja toca la vora superior real de la pantalla (notch/illa
   dinàmica d'iPhone inclosos). */
.household-auth-mobile-resum {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: max(12px, env(safe-area-inset-top)) 20px 18px;
    background-color: var(--oo-auth-panel-bg);
    color: var(--oo-auth-panel-text);
}

@media (min-width: 960px) {
    .household-auth-mobile-resum {
        display: none;
    }
}

.household-auth-mobile-resum-subtitol {
    margin: 0;
    color: var(--oo-auth-panel-text-2);
    font-size: 14px;
    line-height: 1.5;
}

/* Targeta de Login/Registre: superfície plana amb una vora fina i l'ombra suau de la landing
   (la regla ".mud-paper, .mud-popover..." d'app.css treu l'ombra a TOTA superfície de l'app per
   disseny; aquí és una excepció deliberada i acotada, i guanya perquè aquest fitxer es carrega
   després d'app.css). */
.household-auth-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 36px;
    border: 1px solid var(--oo-auth-line);
    border-radius: var(--oo-auth-radius);
    box-shadow: var(--oo-auth-shadow);
}

@media (max-width: 599px) {
    .household-auth-card {
        padding: 28px 22px;
    }
}

    .household-auth-card .mud-typography-h4 {
        font-family: var(--oo-auth-font-display);
        font-weight: 500;
        letter-spacing: -0.015em;
    }

    .household-auth-card .form-label {
        color: var(--oo-auth-text-2);
        font-size: 0.875rem;
        font-weight: 500;
    }

/* Camps amb icona a l'esquerra: com que aquestes pàgines es renderitzen amb SSR estàtic
   (vegeu household-account-shell), no es pot fer servir l'Adornment de MudTextField (necessita
   un circuit interactiu) — icona superposada en CSS pur sobre un <InputText> natiu normal. */
.household-auth-camp {
    margin-bottom: 22px;
}

.household-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.household-auth-input-icon {
    position: absolute;
    left: 16px;
    display: flex;
    color: var(--oo-auth-text-3);
    pointer-events: none;
    transition: color 0.15s ease;
}

    .household-auth-input-icon svg {
        width: 20px;
        height: 20px;
    }

/* L'icona pren el color de l'accent mentre el camp té el focus (:has(), suportat pels
   navegadors moderns; sense suport simplement es queda gris, cap trencament). */
.household-auth-input-wrapper:has(.form-control:focus) .household-auth-input-icon {
    color: var(--mud-palette-primary);
}

/* Bootstrap (.form-control) no reacciona a l'estil de l'app: colors, vora i focus explícits amb
   els tokens d'aquestes pàgines, enlloc del blau genèric del navegador. */
.household-account-shell .form-control {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--oo-auth-radius-sm);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .household-account-shell .form-control:hover:not(:focus) {
        border-color: var(--oo-auth-text-3);
    }

    .household-account-shell .form-control:focus {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 4px var(--oo-auth-accent-soft);
        outline: none;
    }

.household-auth-input-wrapper .form-control {
    height: 50px;
    padding-left: 48px;
    font-size: 1rem;
}

.household-auth-input-wrapper .form-control.household-auth-input-amb-alternar {
    padding-right: 48px;
}

/* Mostrar/amagar contrasenya: aquestes pàgines no tenen circuit interactiu, així que no es pot
   fer servir @onclick de Blazor — un onclick="" pla (JS natiu del navegador, no interceptat pel
   pipeline d'events de Blazor) commuta l'atribut type de l'input veí i la pròpia classe. */
.household-auth-toggle-password {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--oo-auth-text-3);
    cursor: pointer;
}

    .household-auth-toggle-password:hover {
        background-color: var(--oo-auth-line);
    }

    .household-auth-toggle-password svg {
        width: 20px;
        height: 20px;
    }

    .household-auth-toggle-password .household-auth-icon-eye-off {
        display: none;
    }

    .household-auth-toggle-password.household-auth-toggle-password-actiu .household-auth-icon-eye {
        display: none;
    }

    .household-auth-toggle-password.household-auth-toggle-password-actiu .household-auth-icon-eye-off {
        display: block;
    }

/* Botó principal com els CTA de la landing: accent pla, forma de píndola i sense ombra. Amb les
   mateixes classes que MudBlazor més la pròpia, i carregat després, guanya en tots els estats
   sense !important (el color de :hover ve de --mud-palette-primary-darken, redefinit a dalt). */
.household-auth-submit.mud-button-filled.mud-button-filled-primary {
    height: 48px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .household-auth-submit.mud-button-filled.mud-button-filled-primary:active {
        transform: scale(0.98);
    }

/* Punts sota el botó, només a mòbil: a escriptori ja els mostra el panell de marca. */
.household-auth-beneficis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 960px) {
    .household-auth-beneficis {
        display: none;
    }
}

.household-auth-benefici {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

    .household-auth-benefici .mud-icon-root {
        width: 16px;
        height: 16px;
        color: var(--oo-auth-text-3);
    }

/* «Tens un codi?» del registre: plegat, discret. */
.household-auth-codi {
    margin: 4px 0 8px;
}

/* «Has oblidat la contrasenya?», sota el camp de la contrasenya del Login. */
.household-auth-oblidat {
    display: inline-block;
    margin-top: 8px;
    color: var(--mud-palette-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.household-auth-oblidat:hover,
.household-auth-oblidat:focus-visible {
    text-decoration: underline;
}

.household-auth-codi summary {
    cursor: pointer;
    color: var(--mud-palette-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.household-auth-codi .household-auth-camp {
    margin-top: 8px;
}