/* =====================================================
   Maguire Web — Authelia Theme
   Matches maguireweb.com (winter/default palette)
   Injected via Nginx sub_filter
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  --mw-bg-start:     #030c1c;
  --mw-bg-mid:       #081628;
  --mw-bg-end:       #050e1a;
  --mw-accent:       #22d3ee;
  --mw-accent-glow:  rgba(34, 211, 238, 0.32);
  --mw-glass-bg:     rgba(34, 211, 238, 0.04);
  --mw-glass-bdr:    rgba(34, 211, 238, 0.11);
  --mw-glass-shd:    rgba(0, 0, 0, 0.35);
  --mw-text:         #eef4f2;
  --mw-text-muted:   rgba(200, 230, 225, 0.58);
  --mw-font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;
  --mw-font-body:    'Outfit', 'Segoe UI', system-ui, sans-serif;
}

/* ========== Body & Background ========== */

html, body {
  font-family: var(--mw-font-body) !important;
  color: var(--mw-text) !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0),
    linear-gradient(145deg, var(--mw-bg-start) 0%, var(--mw-bg-mid) 50%, var(--mw-bg-end) 100%) !important;
  background-size: 28px 28px, 100% 100% !important;
  background-attachment: fixed !important;
}

/* Thin custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mw-glass-bdr); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mw-accent); }

/* ========== Main Container ========== */

#root {
  font-family: var(--mw-font-body) !important;
}

/* ========== Larger Logo ========== */

#root img[src*="logo"],
#root img[alt*="Logo"],
#root img[alt*="logo"] {
  max-height: 240px !important;
  height: 240px !important;
  width: auto !important;
}

/* ========== Login Card / Paper ========== */

.MuiPaper-root,
.MuiCard-root {
  background: var(--mw-glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--mw-glass-bdr) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px var(--mw-glass-shd) !important;
  color: var(--mw-text) !important;
}

/* ========== Typography ========== */

.MuiTypography-root {
  font-family: var(--mw-font-body) !important;
  color: var(--mw-text) !important;
}

.MuiTypography-h5,
.MuiTypography-h6 {
  font-family: var(--mw-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* "Hi Joey" greeting */
.MuiTypography-h5 {
  color: var(--mw-text) !important;
}

/* Subtitle / secondary text */
.MuiTypography-body2,
.MuiTypography-subtitle1,
.MuiTypography-subtitle2,
.MuiTypography-caption {
  color: var(--mw-text-muted) !important;
}

/* ========== Buttons ========== */

.MuiButton-root {
  font-family: var(--mw-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.MuiButton-contained,
.MuiButton-containedPrimary {
  background: rgba(34, 211, 238, 0.12) !important;
  color: var(--mw-accent) !important;
  border: 1px solid var(--mw-accent) !important;
  box-shadow: none !important;
}

.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover {
  background: var(--mw-accent) !important;
  color: #041a16 !important;
  box-shadow: 0 0 32px var(--mw-accent-glow), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.MuiButton-outlined {
  background: var(--mw-glass-bg) !important;
  color: var(--mw-text) !important;
  border: 1px solid var(--mw-glass-bdr) !important;
}

.MuiButton-outlined:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-text {
  color: var(--mw-accent) !important;
}

.MuiButton-text:hover {
  background: rgba(34, 211, 238, 0.08) !important;
}

/* ========== Text Fields / Inputs ========== */

.MuiTextField-root .MuiInputBase-root,
.MuiOutlinedInput-root {
  font-family: var(--mw-font-body) !important;
  background: rgba(8, 22, 40, 0.6) !important;
  color: var(--mw-text) !important;
  border-radius: 8px !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--mw-glass-bdr) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(34, 211, 238, 0.3) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--mw-accent) !important;
  box-shadow: 0 0 0 3px var(--mw-accent-glow) !important;
}

.MuiInputLabel-root {
  font-family: var(--mw-font-body) !important;
  color: var(--mw-text-muted) !important;
}

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

.MuiInputBase-input {
  color: var(--mw-text) !important;
}

/* ========== Links ========== */

a, .MuiLink-root {
  color: var(--mw-accent) !important;
  transition: opacity 0.18s ease !important;
}

a:hover, .MuiLink-root:hover {
  opacity: 0.8 !important;
}

/* ========== Icons ========== */

.MuiSvgIcon-root {
  color: var(--mw-text-muted) !important;
}

/* Success checkmark */
.MuiSvgIcon-root[data-testid="CheckCircleIcon"],
.MuiSvgIcon-colorSuccess {
  color: #22c55e !important;
}

/* ========== Alerts / Notifications ========== */

.MuiAlert-root {
  background: var(--mw-glass-bg) !important;
  border: 1px solid var(--mw-glass-bdr) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  color: var(--mw-text) !important;
}

.MuiAlert-standardSuccess {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.MuiAlert-standardError {
  border-color: rgba(248, 113, 113, 0.3) !important;
}

.MuiAlert-standardWarning {
  border-color: rgba(252, 211, 77, 0.3) !important;
}

/* ========== Dividers ========== */

.MuiDivider-root {
  border-color: var(--mw-glass-bdr) !important;
}

/* ========== Checkboxes / Switches ========== */

.MuiCheckbox-root {
  color: var(--mw-text-muted) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--mw-accent) !important;
}

/* ========== Tabs ========== */

.MuiTab-root {
  font-family: var(--mw-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mw-text-muted) !important;
}

.MuiTab-root.Mui-selected {
  color: var(--mw-accent) !important;
}

.MuiTabs-indicator {
  background-color: var(--mw-accent) !important;
}

/* ========== Dialogs / Modals ========== */

.MuiDialog-paper {
  background: rgba(8, 22, 40, 0.95) !important;
  border: 1px solid var(--mw-glass-bdr) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 16px 48px var(--mw-glass-shd) !important;
  color: var(--mw-text) !important;
}

/* ========== Tooltips ========== */

.MuiTooltip-tooltip {
  background: rgba(8, 22, 40, 0.95) !important;
  border: 1px solid var(--mw-glass-bdr) !important;
  border-radius: 6px !important;
  color: var(--mw-text) !important;
  font-family: var(--mw-font-body) !important;
}

/* ========== Footer / Powered by — hidden ========== */

footer,
[class*="PoweredBy"],
.MuiTypography-root[class*="poweredBy"],
a.MuiLink-root.MuiLink-underlineHover,
a.MuiTypography-root.MuiLink-root {
  display: none !important;
}

/* ========== Hide language selector & Authelia branding ========== */

/* Language selection button */
[class*="LanguageSelect"],
[aria-label*="language"],
[aria-label*="Language"],
button:has(.MuiSvgIcon-root[data-testid="LanguageIcon"]),
#language-button {
  display: none !important;
}

/* Authelia text branding in header/footer */
[class*="authelia"],
[class*="Authelia"] {
  display: none !important;
}

/* ========== Selection ========== */

::selection {
  background: rgba(34, 211, 238, 0.25) !important;
  color: var(--mw-text) !important;
}

/* ========== Loading Spinner ========== */

.MuiCircularProgress-root {
  color: var(--mw-accent) !important;
}

/* ========== App Bar (if present) ========== */

.MuiAppBar-root {
  background: rgba(3, 12, 28, 0.75) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--mw-glass-bdr) !important;
  box-shadow: none !important;
}

/* ========== Mobile Input Fixes ========== */
/* iOS Safari: background-attachment:fixed breaks input focus/keyboard */

@supports (-webkit-touch-callout: none) {
  html, body {
    background-attachment: scroll !important;
  }
}

@media (max-width: 768px) {
  html, body {
    background-attachment: scroll !important;
  }

  .MuiPaper-root,
  .MuiCard-root {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 22, 40, 0.92) !important;
  }

  .MuiInputBase-input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
  }
}