/* ═══ SARIF MIA · SUPABASE — clean light login ═══ */
:root {
  --sb-green: #3ECF8E;
  --sb-green-soft: #74E8A8;
  --sb-green-hover: #5FDD99;
  --sb-ink: #171717;
  --sb-muted: #6B7280;
  --sb-line: #E6E8EB;
  --sb-field: #FAFAFA;
}

html, body {
  background: #FFFFFF !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--sb-ink) !important;
}

/* kill any default centering weirdness, keep it airy */
.MuiContainer-root { max-width: 460px !important; padding-top: 8px !important; }

/* Card: flat, no shadow, no border — like the reference */
.MuiPaper-root {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* ── Headings: Authelia's title becomes 'Welcome back' ── */
.MuiTypography-h5, .MuiTypography-h6 {
  font-size: 0 !important;              /* hide original text */
  margin: 0 0 6px 0 !important;
  text-align: left !important;
}
.MuiTypography-h5::before, .MuiTypography-h6::before {
  content: 'Welcome back';
  font-size: 34px; font-weight: 700; letter-spacing: -1px;
  color: var(--sb-ink);
  display: block;
}
.MuiTypography-h5::after, .MuiTypography-h6::after {
  content: 'Sign in to your account';
  font-size: 15px; font-weight: 400; letter-spacing: normal;
  color: var(--sb-muted);
  display: block;
  margin-top: 8px;
  margin-bottom: 26px;
}

/* ── Inputs ── */
.MuiFormControl-root { margin-bottom: 4px !important; }
.MuiInputBase-root, .MuiOutlinedInput-root {
  background: var(--sb-field) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.MuiOutlinedInput-notchedOutline { border: 1px solid var(--sb-line) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #D4D8DD !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--sb-green) !important; border-width: 1px !important;
}
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px rgba(62,207,142,.18); }
.MuiInputBase-input { color: var(--sb-ink) !important; padding: 13px 14px !important; }
.MuiInputLabel-root { color: var(--sb-muted) !important; font-size: 14px !important; }
.MuiInputLabel-root.Mui-focused { color: var(--sb-green) !important; }

/* ── Sign-in button: soft green, black text, full width ── */
.MuiButton-contained, button[type='submit'], #sign-in-button {
  background: var(--sb-green-soft) !important;
  color: #101010 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  margin-top: 22px !important;
  transition: background .15s ease;
}
.MuiButton-contained:hover, button[type='submit']:hover, #sign-in-button:hover {
  background: var(--sb-green-hover) !important;
  box-shadow: none !important;
}

/* ── Links / secondary text ── */
.MuiButton-text, .MuiLink-root, a {
  color: var(--sb-muted) !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
.MuiButton-text:hover, a:hover { color: var(--sb-ink) !important; background: transparent !important; }
.MuiCheckbox-root.Mui-checked { color: var(--sb-green) !important; }
.MuiCircularProgress-root { color: var(--sb-green) !important; }
.MuiTypography-body1, .MuiTypography-body2 { color: var(--sb-muted) !important; font-size: 13px !important; }