/* ============================================================================
   Diadom FreedomAI — Authelia Login Page Branding (MUI targets)
   ----------------------------------------------------------------------------
   Injected into Authelia v4.39 HTML via hermes-web-proxy responseInterceptor.
   Authelia's login page is a Material-UI React SPA, so selectors target MUI
   classes, NOT shadcn/Tailwind classes.

   Brand palette:
     --diadom-purple:       #7c3aed  (FreedomAI primary)
     --diadom-violet:       #8b5cf6  (gradient / glow)
     --diadom-purple-dark:  #6d28d9  (button hover / focus ring)
   ========================================================================== */

:root {
  --diadom-purple: #7c3aed;
  --diadom-violet: #8b5cf6;
  --diadom-purple-dark: #6d28d9;
  --diadom-text: #f3f4f6;
  --diadom-text-dim: #9ca3af;
}

/* ---------------------------------------------------------------------------
   1. Page canvas
   --------------------------------------------------------------------------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, var(--diadom-purple) 0%, var(--diadom-violet) 100%) !important;
  color: var(--diadom-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------------------
   2. Card — glassmorphic white panel
   --------------------------------------------------------------------------- */
.MuiPaper-root {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 64px -16px rgba(124, 58, 237, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
  color: #1f2937 !important;
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2.5rem !important;
}

/* ---------------------------------------------------------------------------
   3. Inputs — pill-shaped with purple focus ring
   --------------------------------------------------------------------------- */
.MuiOutlinedInput-root {
  border-radius: 9999px !important;
  background: #f9fafb !important;
  color: #1f2937 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(124, 58, 237, 0.3) !important;
  border-radius: 9999px !important;
}

.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--diadom-purple) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18) !important;
}

/* ---------------------------------------------------------------------------
   4. Labels
   --------------------------------------------------------------------------- */
.MuiInputLabel-root {
  color: var(--diadom-text-dim) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--diadom-purple) !important;
}

/* ---------------------------------------------------------------------------
   5. Submit button — purple gradient pill
   --------------------------------------------------------------------------- */
.MuiButton-containedPrimary {
  width: 100% !important;
  padding: 0.85rem 1.5rem !important;
  background: linear-gradient(135deg, var(--diadom-purple) 0%, var(--diadom-violet) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 10px 28px -8px rgba(124, 58, 237, 0.55) !important;
  transition: background 0.25s, box-shadow 0.25s, transform 0.15s !important;
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, var(--diadom-purple-dark) 0%, var(--diadom-purple) 100%) !important;
  box-shadow: 0 14px 36px -8px rgba(124, 58, 237, 0.65) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-containedPrimary:active {
  transform: translateY(0) !important;
}

/* ---------------------------------------------------------------------------
   6. Checkbox / alerts
   --------------------------------------------------------------------------- */
.MuiCheckbox-colorPrimary.Mui-checked {
  color: var(--diadom-purple) !important;
}

.MuiAlert-root {
  border-radius: 16px !important;
}

/* ---------------------------------------------------------------------------
   7. Logo and footer
   --------------------------------------------------------------------------- */
img[src*="logo"] {
  max-height: 60px !important;
  width: auto !important;
  margin: 0 auto 1.5rem !important;
  display: block !important;
}

/* Hide "Powered by Authelia" — it's a MuiLink <a> tag inside MuiGrid divs.
   Target the link directly + its parent divs. MUI emotion injects high
   specificity, so we use !important on multiple selectors. */
footer,
.MuiGrid-root.mui-fiq9q0,
a.MuiLink-root[href*="authelia.com"],
.MuiGrid-root.mui-jps8xr {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   8. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .MuiPaper-root {
    max-width: 92vw !important;
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
  }
}