/* devlab ivory theme for the Authelia login + MFA portal (auth.${LAB_DOMAIN}).
   Injected by the portal-theme nginx sidecar. Targets Authelia 4.39's stable
   element ids (#username-textfield, #sign-in-button, …) and Material-UI classes.
   Warm-minimal language: ivory paper + dot matrix, terracotta accent, Fraunces
   display + Inter UI. Overrides use !important to beat MUI's class styles. */

@import url('/fonts/fonts.css');

:root {
  --paper: #f1ece2;
  --card:  #f7f4ec;
  --ink:   #29251d;
  --muted: #8c8576;
  --clay:  #c15f3c;
  --clay-deep: #a94f30;
  --line:  rgba(41, 37, 29, 0.12);
}

/* ---- page: warm ivory paper + always-on dot matrix ---- */
body,
body[data-theme] {
  background-color: var(--paper) !important;
  background-image: radial-gradient(rgba(41, 37, 29, 0.16) 1.4px, transparent 1.6px) !important;
  background-size: 40px 40px !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
#root,
#root > div { background: transparent !important; }

/* ---- the centred login card ---- */
.MuiPaper-root {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -30px rgba(41, 37, 29, 0.35) !important;
}

/* ---- type: Fraunces for the title, Inter elsewhere ---- */
.MuiTypography-h5 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.MuiTypography-h6 { color: var(--muted) !important; font-weight: 400 !important; }
.MuiTypography-root,
label,
.MuiFormControlLabel-label { color: var(--ink) !important; }

/* ---- text fields (username / password / one-time-password) ---- */
.MuiOutlinedInput-root { background: #fffdf8 !important; border-radius: 10px !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--line) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--clay) !important;
  border-width: 1px !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--clay) !important; }
.MuiInputBase-input { color: var(--ink) !important; }

/* ---- primary action: terracotta pill (sign in, validate, register) ---- */
.MuiButton-contained,
#sign-in-button {
  background: var(--clay) !important;
  color: #f7f4ec !important;
  box-shadow: none !important;
  text-transform: none !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
.MuiButton-contained:hover,
#sign-in-button:hover { background: var(--clay-deep) !important; box-shadow: none !important; }

/* ---- secondary actions / links ---- */
.MuiButton-text,
.MuiButton-outlined,
.MuiLink-root,
a { color: var(--clay) !important; }
.MuiButton-outlined { border-color: var(--line) !important; border-radius: 100px !important; text-transform: none !important; }

/* ---- accents: checkbox, progress, the method tiles on the 2FA screen ---- */
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked { color: var(--clay) !important; }
.MuiLinearProgress-bar { background-color: var(--clay) !important; }
.MuiLinearProgress-root { background-color: var(--line) !important; }
.MuiCircularProgress-root { color: var(--clay) !important; }

/* TOTP digit countdown ring + method cards inherit the accent above; nudge the
   selected method card border to the accent. */
.MuiButtonBase-root.Mui-selected,
.MuiCard-root { border-color: var(--line) !important; }

/* ---- alerts (caps-lock warning, errors) — keep them readable on ivory ---- */
.MuiAlert-root { border-radius: 10px !important; }

/* ── devlab bar ──────────────────────────────────────────────────────────
   The bar is injected by devlab-bar.js; its CSS lives HERE (a CSP-allowed
   same-origin stylesheet) rather than in a JS <style>, which Authelia's CSP
   (style-src 'self', no 'unsafe-inline') blocks. */
.dvl-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; padding: 0 20px; background: #f1ece2; border-bottom: 1px solid rgba(41,37,29,.12); box-sizing: border-box; font-family: "Inter", system-ui, sans-serif; }
.dvl-bar a { text-decoration: none !important; }
.dvl-home { display: inline-flex !important; align-items: center; gap: 9px; color: #29251d !important; font-weight: 500; }
.dvl-home .dot { width: 9px; height: 9px; border-radius: 50%; background: #c15f3c; }
.dvl-home .wm { font-family: "Fraunces", Georgia, serif; font-size: 17px; letter-spacing: .01em; color: #29251d; }
.dvl-bar a.dvl-back { display: inline-flex !important; align-items: center !important; gap: 6px; color: #29251d !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; padding: 8px 16px !important; border: 1px solid rgba(41,37,29,.22) !important; border-radius: 100px !important; background: #f7f4ec !important; cursor: pointer !important; transition: background .2s, color .2s, border-color .2s; }
.dvl-bar a.dvl-back:hover { background: #29251d !important; color: #f1ece2 !important; border-color: #29251d !important; }
.dvl-switch { position: relative; }
.dvl-bar .dvl-switch > summary { list-style: none; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px; padding: 8px 16px !important; border: 1px solid rgba(41,37,29,.22) !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: #29251d !important; background: #f7f4ec !important; }
.dvl-switch > summary::-webkit-details-marker { display: none; }
.dvl-switch[open] > summary { background: #ebe5d8 !important; }
.dvl-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: #f7f4ec; border: 1px solid rgba(41,37,29,.12); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px -16px rgba(41,37,29,.5); }
.dvl-menu a { display: block !important; padding: 8px 12px; border-radius: 8px; color: #29251d !important; font-size: 13px; }
.dvl-menu a:hover { background: #ebe5d8; }
.dvl-menu a[aria-current="page"] { color: #c15f3c !important; font-weight: 500; }