/* ──────────────────────────────────────────────────────────
   Midnight Library — Authelia Login Theme
   Matches notes.flowshieldai.com visual identity
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200..500;1,9..144,200..300&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@300;400&display=swap');

/* ── Design tokens: dark (default) ─────────────────────── */
:root {
  --ml-bg:        #060918;
  --ml-card-bg:   #0C0F25;
  --ml-border:    rgba(210,168,84,0.15);
  --ml-border-md: rgba(210,168,84,0.30);
  --ml-amber:     #D4A843;
  --ml-amber-lt:  #ECC063;
  --ml-glow:      rgba(212,168,67,0.09);
  --ml-glow2:     rgba(212,168,67,0.05);
  --ml-text:      #C8C0AA;
  --ml-dim:       #6A6250;
  --ml-shadow:    0 0 0 1px rgba(210,168,84,0.13), 0 12px 40px rgba(0,0,0,0.65);
}

/* ── Design tokens: light ───────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --ml-bg:        #F7F2E8;
    --ml-card-bg:   #FDFAF3;
    --ml-border:    rgba(140,100,30,0.15);
    --ml-border-md: rgba(140,100,30,0.32);
    --ml-amber:     #9A6C0A;
    --ml-amber-lt:  #B8821C;
    --ml-glow:      rgba(154,108,10,0.07);
    --ml-glow2:     rgba(154,108,10,0.04);
    --ml-text:      #3D3020;
    --ml-dim:       #7A6648;
    --ml-shadow:    0 0 0 1px rgba(140,100,30,0.12), 0 12px 40px rgba(0,0,0,0.10);
  }
}

/* Authelia explicit theme attribute overrides */
body[data-theme="light"] {
  --ml-bg:        #F7F2E8;
  --ml-card-bg:   #FDFAF3;
  --ml-border:    rgba(140,100,30,0.15);
  --ml-border-md: rgba(140,100,30,0.32);
  --ml-amber:     #9A6C0A;
  --ml-amber-lt:  #B8821C;
  --ml-glow:      rgba(154,108,10,0.07);
  --ml-glow2:     rgba(154,108,10,0.04);
  --ml-text:      #3D3020;
  --ml-dim:       #7A6648;
  --ml-shadow:    0 0 0 1px rgba(140,100,30,0.12), 0 12px 40px rgba(0,0,0,0.10);
}

body[data-theme="dark"] {
  --ml-bg:        #060918;
  --ml-card-bg:   #0C0F25;
  --ml-border:    rgba(210,168,84,0.15);
  --ml-border-md: rgba(210,168,84,0.30);
  --ml-amber:     #D4A843;
  --ml-amber-lt:  #ECC063;
  --ml-glow:      rgba(212,168,67,0.09);
  --ml-glow2:     rgba(212,168,67,0.05);
  --ml-text:      #C8C0AA;
  --ml-dim:       #6A6250;
  --ml-shadow:    0 0 0 1px rgba(210,168,84,0.13), 0 12px 40px rgba(0,0,0,0.65);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body, #root { min-height: 100%; }

body {
  background-color: var(--ml-bg) !important;
  font-family: 'Lora', Georgia, serif !important;
  color: var(--ml-text) !important;
  margin: 0 !important;
}

/* Loading spinner bars */
[style*="react-spinners-ScaleLoader"] {
  background-color: var(--ml-amber) !important;
}

/* ── AppBar header (Language selector bar) ──────────────── */
.MuiAppBar-root {
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.MuiAppBar-root .MuiTypography-body1:empty { display: none !important; }

/* ── Language button ────────────────────────────────────── */
#language-button {
  color: var(--ml-dim) !important;
  border-radius: 2px !important;
}
#language-button:hover {
  color: var(--ml-amber) !important;
  background-color: var(--ml-glow) !important;
}
#language-button .MuiTypography-root {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  color: inherit !important;
}

/* ── Page background — target only the outermost wrappers ─ */
/* body handles the main background; only the outermost non-card
   containers need to be explicitly colored to avoid flash of white */
.MuiBox-root.mui-0 {
  background-color: var(--ml-bg) !important;
  min-height: 100vh !important;
}

/* ── Login card ─────────────────────────────────────────── */
.MuiContainer-maxWidthXs {
  background-color: var(--ml-card-bg) !important;
  border: 1px solid var(--ml-border-md) !important;
  border-radius: 3px !important;
  box-shadow: var(--ml-shadow) !important;
  padding: 0 2.2rem 1.8rem !important;
  overflow: hidden !important;
}

/* Amber top accent line */
.MuiContainer-maxWidthXs::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ml-amber) 40%, var(--ml-amber-lt) 60%, transparent 100%);
  margin: 0 -2.2rem 2.4rem -2.2rem;
}

/* ── Logo area — hide Authelia generic person avatar ────── */
.MuiGrid-grid-xs-12:has(> svg.MuiBox-root) {
  display: none !important;
}

/* "Study Notes" wordmark replaces the logo — direct child only */
.MuiContainer-maxWidthXs > .MuiGrid-container::before {
  content: 'Study Notes';
  display: block;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ml-dim);
  padding-top: 0.4rem;
  margin-bottom: 0.8rem;
}

/* ── "Sign in" heading ──────────────────────────────────── */
h5.MuiTypography-h5 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 1.55rem !important;
  letter-spacing: 0.02em !important;
  color: var(--ml-amber) !important;
  text-align: center !important;
  margin-bottom: 1.4rem !important;
}

/* ── Form labels ────────────────────────────────────────── */
.MuiFormLabel-root,
.MuiInputLabel-root {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.10em !important;
  color: var(--ml-dim) !important;
}
.MuiFormLabel-root.Mui-focused,
.MuiInputLabel-root.Mui-focused {
  color: var(--ml-amber) !important;
}

/* ── Input boxes ────────────────────────────────────────── */
.MuiInputBase-root,
.MuiOutlinedInput-root {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.88rem !important;
  color: var(--ml-text) !important;
  background-color: var(--ml-glow2) !important;
  border-radius: 2px !important;
}

.MuiInputBase-input {
  color: var(--ml-text) !important;
  caret-color: var(--ml-amber) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--ml-border-md) !important;
  transition: border-color 0.2s ease !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--ml-amber) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--ml-amber) !important;
  border-width: 1px !important;
}
.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px var(--ml-glow) !important;
}

/* Password visibility toggle */
.MuiIconButton-edgeEnd {
  color: var(--ml-dim) !important;
}
.MuiIconButton-edgeEnd:hover {
  color: var(--ml-amber) !important;
  background-color: transparent !important;
}

/* ── Remember me checkbox ───────────────────────────────── */
.MuiCheckbox-root {
  color: var(--ml-dim) !important;
  padding: 6px !important;
}
.MuiCheckbox-root.Mui-checked {
  color: var(--ml-amber) !important;
}
.MuiCheckbox-root:hover {
  background-color: var(--ml-glow) !important;
}
.MuiFormControlLabel-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  color: var(--ml-dim) !important;
}

/* ── SIGN IN button ─────────────────────────────────────── */
.MuiButton-contained,
.MuiButton-containedPrimary {
  background-color: var(--ml-amber) !important;
  color: var(--ml-bg) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  border: none !important;
  padding: 10px 24px !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover {
  background-color: var(--ml-amber-lt) !important;
  box-shadow: 0 0 20px var(--ml-glow) !important;
}

/* ── Reset password text button ─────────────────────────── */
.MuiButton-text,
.MuiButton-textPrimary {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.08em !important;
  color: var(--ml-dim) !important;
}
.MuiButton-text:hover,
.MuiButton-textPrimary:hover {
  color: var(--ml-amber) !important;
  background-color: transparent !important;
}

/* ── Ripple effect ──────────────────────────────────────── */
.MuiTouchRipple-child {
  background-color: var(--ml-amber) !important;
}

/* ── Language dropdown menu ─────────────────────────────── */
.MuiPaper-root.MuiMenu-paper,
.MuiPaper-root.MuiPopover-paper {
  background-color: var(--ml-card-bg) !important;
  border: 1px solid var(--ml-border) !important;
  box-shadow: var(--ml-shadow) !important;
  border-radius: 2px !important;
}
.MuiMenuItem-root {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.80rem !important;
  letter-spacing: 0.08em !important;
  color: var(--ml-text) !important;
}
.MuiMenuItem-root:hover,
.MuiMenuItem-root.Mui-selected {
  background-color: var(--ml-glow) !important;
  color: var(--ml-amber) !important;
}

/* ── Alert / Notification ───────────────────────────────── */
.MuiAlert-root {
  font-family: 'Lora', serif !important;
  background-color: var(--ml-card-bg) !important;
  border: 1px solid var(--ml-border-md) !important;
  color: var(--ml-text) !important;
  border-radius: 2px !important;
}
.MuiAlert-message { color: var(--ml-text) !important; }
.MuiAlert-icon    { color: var(--ml-amber) !important; }

/* ── Typography fallbacks ───────────────────────────────── */
.MuiTypography-root {
  font-family: 'Lora', serif !important;
  color: var(--ml-text) !important;
}
.MuiTypography-body1,
.MuiTypography-body2 {
  color: var(--ml-dim) !important;
}

/* ── Remove "Powered by Authelia" branding ──────────────── */
/* Hide the link itself, its direct grid-xs-4 parent cell,
   and the footer row (grid-xs-12 whose direct child is the grid-xs-4
   containing the link). Use :has with direct child (>) to avoid
   accidentally hiding ancestor grid containers. */
a[href="https://www.authelia.com"],
.MuiGrid-grid-xs-4:has(> a[href="https://www.authelia.com"]),
.MuiGrid-grid-xs-12:has(> .MuiGrid-grid-xs-4 > a[href="https://www.authelia.com"]) {
  display: none !important;
}