/* ==========================================================================
   Stamp theme for the benwalker.dev login portal.
   Injected into Authelia's page by the branding nginx proxy (same origin, so
   it needs no CSP changes). Modelled on the guess-who game's paper/ink look:
   cream paper w/ dotted texture, dark-ink borders, hard offset shadows, a
   punchy red primary, amber accents, Alfa Slab One display + Fredoka body.
   Overrides use !important to beat MUI/emotion's runtime-injected styles.
   ========================================================================== */
@import "/brand/fonts/fonts.css";

:root {
  --paper: #f3ead3;
  --paper-deep: #e7dab8;
  --ink: #3b332a;
  --ink-soft: #837763;
  --primary: #d5472f;
  --primary-dark: #a83422;
  --accent: #f0a72e;
  --card: #fdf6e3;
}

/* This theme is light-only; stop dark-mode UAs from recoloring form controls. */
html { color-scheme: light !important; }

/* Paper background with the dotted texture from the game */
html, body, #root {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
}
body {
  background-image: radial-gradient(rgba(59, 51, 42, 0.10) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

/* The top language bar is a transparent MUI AppBar — keep it out of the way. */
.MuiAppBar-root {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The login column (avatar + "Sign in" + fields) becomes the stamp card.
   Selector is build-stable: the innermost MuiGrid-container that wraps the
   #form-login form, so no hashed class names and no nested double-carding. */
.MuiGrid-container:has(#form-login) .MuiGrid-container:has(#form-login) {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  box-shadow: 7px 7px 0 rgba(59, 51, 42, 0.82) !important;
  padding: 30px 28px 22px !important;
  max-width: 400px !important;
  margin-top: 40px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Rubber-stamp emblem pressed onto the card corner */
.MuiGrid-container:has(#form-login) .MuiGrid-container:has(#form-login)::after {
  content: "BENWALKER.DEV";
  position: absolute;
  top: -16px;
  right: -14px;
  transform: rotate(8deg);
  font-family: "Alfa Slab One", serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--primary);
  background: var(--card);
  border: 3px double var(--primary);
  border-radius: 6px;
  padding: 5px 9px;
  opacity: 0.8;
  pointer-events: none;
}

/* No sideways scrollbar from the emblem poking past the edge. */
html, body { overflow-x: hidden !important; }

/* Headings in the slab display face */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: "Alfa Slab One", serif !important;
  color: var(--ink) !important;
  letter-spacing: 0.5px;
}

/* Text fields: ink outline that thickens to the punch-red on focus */
.MuiOutlinedInput-root {
  background: #fffdf6 !important;
  border-radius: 10px !important;
}
.MuiOutlinedInput-notchedOutline {
  border-color: var(--ink) !important;
  border-width: 2px !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary) !important;
  border-width: 2px !important;
}
.MuiInputBase-input,
.MuiInputAdornment-root,
.MuiInputAdornment-root .MuiIconButton-root,
.MuiTypography-root,
.MuiFormControlLabel-label,
.MuiFormHelperText-root:not(.Mui-error) {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
/* Cards/dialogs on the reset-password and 2FA screens */
.MuiPaper-root:not(.MuiAppBar-root) {
  background-color: var(--card) !important;
  color: var(--ink) !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--primary) !important; }
.MuiFormLabel-root { color: var(--ink-soft) !important; }

/* Primary button: punch-red with a hard shadow that collapses on press */
.MuiButton-containedPrimary,
button[type="submit"],
#sign-in-button {
  background: var(--primary) !important;
  color: #fff5e8 !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 rgba(59, 51, 42, 0.82) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}
.MuiButton-containedPrimary:hover,
#sign-in-button:hover { background: var(--primary-dark) !important; }
.MuiButton-containedPrimary:active,
#sign-in-button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* Secondary/text links in the amber accent */
a, .MuiLink-root, .MuiButton-text { color: var(--primary-dark) !important; }

/* Checkbox (remember me) in ink */
.MuiCheckbox-root.Mui-checked { color: var(--primary) !important; }