/* snowsecure branding for the Authelia login portal.
   Loaded via a patched index.html served by Caddy (see /usr/local/bin/authelia-theme-refresh).
   Same-origin only: Authelia's CSP is `style-src 'self'`, so this file is
   allowed but inline <style> is NOT.

   LEGIBILITY RULE: the artwork must never sit behind the credential fields.
   There is deliberately NO white scrim over the background (it was tried and
   read as a washed-out overlay). Instead the two ribbon clusters are placed in
   opposite corners of the SVG viewBox, leaving the centre band empty by
   construction, so the login card lands on clean paper at normal aspect ratios.
   The opaque card/input rules further down are the remaining safety net for
   narrow or unusual viewports. If artwork ever creeps behind the inputs again,
   move the clusters further out in the SVG -- do not reintroduce the scrim. */

/* Script face for the "hello!" greeting -- evokes the cursive Apple used on
   the original Mac. On a Mac, Snell Roundhand (a system font, no download) is
   the closer match and is preferred in the stack below; Sacramento is the
   self-hosted fallback so every other platform sees the same idea.
   Self-hosted because the portal CSP is font-src 'self'. */
@font-face {
  font-family: "Sacramento";
  src: url("/Sacramento-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ss-primary:  #0F1112;
  --ss-green:    #00A36C;
  --ss-blue:     #2F6FEB;
  --ss-violet:   #7C3AED;
  --ss-pink:     #FF3D81;
  --ss-amber:    #FF8A00;
  --ss-paper:    #FAFAF8;
}

/* Two stacked background layers. The FIRST layer paints on top:
     1. a paper scrim -- opaque in the middle where the login card sits,
        fading to transparent at the edges;
     2. the ribbon artwork, anchored top-right and sized so it lives in the
        margins rather than across the centre.
   Net effect: colour around the outside, clean paper behind the form. */
body {
  background-color: var(--ss-paper) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'><g transform='rotate(-14 1030 150)'><path d='M 1060 -40 C 980 30, 1010 110, 930 155 C 860 192, 870 120, 800 165' fill='none' stroke='%2300A36C' stroke-width='18' stroke-linecap='round' opacity='0.95'/><path d='M 1110 30 C 1030 75, 1050 155, 970 200 C 910 233, 920 165, 850 210' fill='none' stroke='%232F6FEB' stroke-width='14' stroke-linecap='round' opacity='0.9'/><path d='M 1150 100 C 1075 122, 1085 188, 1010 222' fill='none' stroke='%237C3AED' stroke-width='12' stroke-linecap='round' opacity='0.85'/><path d='M 1185 -15 C 1110 40, 1130 118, 1055 165 C 995 200, 1005 130, 935 178' fill='none' stroke='%23FF3D81' stroke-width='15' stroke-linecap='round' opacity='0.85'/><path d='M 1160 195 C 1095 218, 1105 272, 1040 296' fill='none' stroke='%23FF8A00' stroke-width='13' stroke-linecap='round' opacity='0.9'/><circle cx='815' cy='218' r='12' fill='%2300A36C' opacity='0.95'/><circle cx='855' cy='246' r='7.5' fill='%232F6FEB' opacity='0.9'/><circle cx='790' cy='236' r='5.5' fill='%237C3AED' opacity='0.85'/><circle cx='882' cy='268' r='4.5' fill='%23FF3D81' opacity='0.8'/><circle cx='762' cy='202' r='4' fill='%23FF8A00' opacity='0.8'/></g><g transform='rotate(166 170 650)'><path d='M 300 420 C 220 490, 250 570, 170 615 C 100 652, 110 580, 40 625' fill='none' stroke='%23FF8A00' stroke-width='18' stroke-linecap='round' opacity='0.9'/><path d='M 350 490 C 270 535, 290 615, 210 660 C 150 693, 160 625, 90 670' fill='none' stroke='%23FF3D81' stroke-width='14' stroke-linecap='round' opacity='0.85'/><path d='M 390 560 C 315 582, 325 648, 250 682' fill='none' stroke='%237C3AED' stroke-width='12' stroke-linecap='round' opacity='0.8'/><path d='M 425 445 C 350 500, 370 578, 295 625' fill='none' stroke='%232F6FEB' stroke-width='15' stroke-linecap='round' opacity='0.85'/><circle cx='55' cy='678' r='12' fill='%2300A36C' opacity='0.9'/><circle cx='95' cy='706' r='7.5' fill='%23FF3D81' opacity='0.85'/><circle cx='30' cy='696' r='5.5' fill='%237C3AED' opacity='0.8'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Spectrum rule across the very top, matching the site header/footer.
   Thin and fixed at the top edge -- never overlaps page content. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(100deg, var(--ss-green) 0%, var(--ss-blue) 35%, var(--ss-violet) 68%, var(--ss-pink) 100%);
  pointer-events: none;
}

/* Greeting, top-left -- mirrors the language selector in the top-right.
   Matches the portal hostname (hello.snowsecure.net).
   Added as a ::after pseudo-element because we cannot inject DOM nodes into
   Authelia's SPA (and inline <style>/<script> is blocked by CSP). Purely
   decorative: pointer-events:none so it never intercepts a click, and it sits
   in the corner margin clear of the centred login card. */
body::after {
  content: "hello!";
  position: fixed;
  top: 10px;
  left: 24px;
  z-index: 9998;
  font-family: "Sacramento", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  font-size: 3.2rem;
  /* Script faces overflow a line-height:1 box: the ascenders clipped against
     the top of the viewport and the spectrum rule. Give the glyphs room. */
  line-height: 1.35;
  padding-top: 2px;
  letter-spacing: 0.01em;
  /* Same spectrum used by the top rule and the page heading. */
  background: linear-gradient(100deg, var(--ss-green) 0%, var(--ss-blue) 30%, var(--ss-violet) 60%, var(--ss-pink) 85%, var(--ss-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* Older engines that cannot clip a gradient to text would render it invisible. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  body::after {
    background: none;
    color: var(--ss-green);
  }
}

@media (max-width: 480px) {
  body::after {
    top: 8px;
    left: 16px;
    font-size: 2.2rem;
    line-height: 1.35;
  }
}

/* --- Defensive only: opaque surfaces for the card and the input fields. ---
   Broad selectors on purpose, since MUI class names shift between releases.
   The scrim above is what actually guarantees legibility. */

/* NOTE: do NOT add a broad descendant selector here (e.g. `#root > div > div`).
   That matches Authelia's full-viewport layout wrapper, not the login card, and
   paints a near-opaque white sheet over the entire page -- which silently washes
   the background artwork out to a faint watermark. Authelia's sign-in form has
   no card surface of its own; the opaque inputs below are what provide contrast. */
/* ===================================================================
   AUTHELIA SWITCHED UI FRAMEWORKS (release installed 2026-09-04).
   It was Material-UI; it is now Tailwind v4 + Radix (shadcn/ui). EVERY
   `.Mui*` selector below became dead on that update -- silently, because
   dead CSS throws no error. The visible symptom was the login heading
   reverting from "SNOWSECURE" to Authelia's own "Sign in", but the card,
   the input outlines and the primary button all stopped being themed in
   the same instant.

   Prefer, in this order, when adding a rule:
     1. a stable ID          -- #first-factor-stage, #sign-in-button
     2. a shadcn data-slot   -- [data-slot="card"], [data-slot="input"]
     3. a semantic tag       -- h5 for a view title
   NEVER a Tailwind utility class (`text-2xl`, `w-full`): those churn on
   every upstream rebuild exactly like the MUI names did.

   The `.Mui*` selectors are kept alongside the new ones only so pinning
   an older Authelia image still themes correctly. They match nothing today.
   =================================================================== */

[data-slot="card"],
.MuiCard-root {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-radius: 8px !important;
}

/* Credential fields must be fully opaque -- never let artwork read through. */
[data-slot="input"],
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root,
.MuiInputBase-input,
#root input,
input[type="text"],
input[type="password"] {
  background-color: #FFFFFF !important;
  border-radius: 5px !important;
}

/* Keep the field border visible against white-on-white. Radix/shadcn puts the
   border on the input element itself, not on a separate notch element. */
[data-slot="input"],
.MuiOutlinedInput-notchedOutline {
  border-color: #D8D8D4 !important;
}

[data-slot="input"]:focus,
[data-slot="input"]:focus-visible,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--ss-green) !important;
  outline-color: var(--ss-green) !important;
}

/* Page heading: display "SNOWSECURE" in place of Authelia's title text.
   WHY CSS AND NOT A LOCALE OVERRIDE: Authelia uses the SINGLE translation key
   "Sign in" for BOTH this heading and the sign-in button label, so overriding
   it in locales/en/portal.json renamed the button too. This swaps the text at
   the presentation layer instead, which the button never sees.
   Scoped to .MuiTypography-h5 (the variant Authelia uses for the view title)
   rather than all headings, to limit how many other views this touches. */
/* `variant:"h5"` renders <h5 class="text-2xl font-normal"> and is used ONLY by
   layouts.Login and layouts.Minimal for the view title -- never for settings
   content -- so `#root h5` reproduces the old MUI rule's breadth exactly
   without reaching into anything else. */
#root h5,
#root .MuiTypography-h5 {
  font-size: 0 !important;
  line-height: 0 !important;
}

#root h5::after,
#root .MuiTypography-h5::after {
  content: "SNOWSECURE";
  display: block;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ss-primary);
}

/* Primary action picks up the brand green rather than Material blue. */
/* Targeted by ID rather than by a shared button slot: [data-slot="button"]
   would repaint the secondary and passkey buttons green as well. */
#sign-in-button,
.MuiButton-containedPrimary {
  background-color: var(--ss-green) !important;
}

#sign-in-button:hover,
.MuiButton-containedPrimary:hover {
  background-color: #00915F !important;
}

/* Hide the "Powered by Authelia" footer.
   This could NOT be done in locales/en/portal.json: Authelia's config validator
   rejects any override of the "Powered by {{authelia}}" string that drops the
   {{authelia}} placeholder, so the product name cannot be removed there. CSS
   removes it at the presentation layer instead.
   NOTE: this is cosmetic only. The portal is still trivially identifiable from
   the authelia_session cookie name, the /api/authz/* endpoints and the JS
   bundle -- do not treat a hidden footer as meaningful hardening. */
#powered-by,
a[href*="authelia.com"] {
  display: none !important;
}