/* Lubb Office branding for the Authelia sign-in page.
 *
 * Authelia has no configuration for colours (logo, favicon and wording ARE
 * configurable - see /opt/authelia/config/assets), so this sheet is injected by
 * nginx via sub_filter, the same approach used for the Zulip sidebar.
 *
 * It must be served same-origin: Authelia's CSP is style-src 'self' plus a
 * per-response nonce, so a <link> to /brand.css is allowed while an inline
 * <style> block would be blocked.
 *
 * The page is MUI-based, hence the .Mui* selectors; they are deliberately
 * broad so a minor Authelia bump degrades to "less colourful", never broken.
 */

:root {
    --brand: #247b8c;
    --brand-light: #3da3b7;
    --brand-dark: #1a5c69;
}

body {
    background: linear-gradient(135deg, #247b8c 0%, #1a5c69 45%, #12333c 100%) fixed;
    min-height: 100vh;
}

/* The login card: lift it off the gradient. */
#root .MuiPaper-root {
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    padding-bottom: 10px;
}

/* Logo. Authelia renders it as a MUI Box with component="img" alt="Logo" and
   sx={{width:'64px'}}, which becomes an emotion class - so target the alt
   attribute and use !important, otherwise a future class-hash change silently
   undoes this. 500x100 source, so width drives it and height follows. */
#root img[alt="Logo"] {
    width: 340px !important;
    max-width: 92% !important;
    height: auto !important;
    margin: 8px auto 4px !important;
}

/* Primary action - "Sign into Immich". */
#root .MuiButton-contained,
#root .MuiButton-containedPrimary {
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%) !important;
    color: #fff !important;
    border-radius: 10px;
    text-transform: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 10px 16px;
    box-shadow: 0 6px 16px rgba(36, 123, 140, 0.40);
}

#root .MuiButton-contained:hover {
    filter: brightness(1.08);
}

/* Fields pick up the brand colour on focus. */
#root .MuiInput-underline:after,
#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--brand) !important;
}

#root .MuiFormLabel-root.Mui-focused {
    color: var(--brand) !important;
}

#root .MuiCheckbox-colorPrimary.Mui-checked,
#root a {
    color: var(--brand);
}

/* "Powered by Authelia" - keep it, just stop it competing for attention. */
#root .MuiTypography-caption {
    opacity: 0.55;
}