/* MezBOX look for the Authelia login: black, white and the website's yellow (#ffe400) */
html { background: #000 url(/mezbox/bg.jpg) center / cover no-repeat fixed !important; }
body { background: transparent !important; }
body::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.68); z-index: -1; }

/* Authelia's own colour variables, overridden for the dark theme */
body[data-theme] {
  --primary: #ffe400;
  --primary-foreground: #000;
  --ring: #ffe400;
  --secondary: #ffe400;
  --secondary-foreground: #000;
  --foreground: #fff;
  --muted-foreground: #b8b8b8;
  --border: #5c5c5c;
  --input: #7a7a7a;
  --custom-icon: #ffe400;
  --custom-loading-bar: #ffe400;
  --radius: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* the form sits on a dark panel so it stays readable on the photo */
[id$="-stage"] > div {
  background: rgba(8, 8, 8, 0.82);
  border: 1px solid #2c2c2c;
  border-top: 3px solid #ffe400;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.02em; }
button[type="submit"], button.bg-primary { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* the logo is now the vector MezBOX wordmark: wider than the old square icon */
img[alt="Logo"] { width: 17rem !important; max-width: 85%; height: auto; margin-top: 0.75rem; margin-bottom: 0.75rem; }

/* contrast: the one-time-code boxes hard-code a black 30% border, which vanishes on the dark panel */
input[data-length] {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid #bdbdbd !important;
  color: #fff !important;
  caret-color: #ffe400;
}
input[data-length]:focus {
  border-color: #ffe400 !important;
  box-shadow: 0 0 0 2px rgba(255, 228, 0, 0.35);
  outline: none;
}

/* countdown timer: its SVG hard-codes black and white; recolour for the dark panel */
#one-time-password-method svg circle:nth-child(1) { stroke: #ffe400; }
#one-time-password-method svg circle:nth-child(2) { fill: #151515; }
#one-time-password-method svg circle:nth-child(3) { stroke: #ffe400; }