/* Authelia Custom Branding - Opposites INC */
/* Injected via rewritebody <link> tag - if this file 404s, login still works */
/* Matches landing page: glass morphism, JetBrains Mono, #67ab95 accent */

/* Self-hosted fonts */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/custom/fonts/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/custom/fonts/jetbrains-mono-600.woff2') format('woff2');
}

/* ==================
   GLOBAL FONT OVERRIDE
   ================== */

html, body, input, textarea, select, button,
div, span, p, a, h1, h2, h3, h4, h5, h6,
label, legend, th, td, li,
[class*="Mui"],
[class*="MuiTypography"],
[class*="MuiButton"],
[class*="MuiInput"],
[class*="MuiListItem"] {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ==================
   BASE
   ================== */

html {
  background: #09090b !important;
}

body {
  background: #09090b !important;
  color: #fafafa !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ==================
   CARDS / PAPER — glass morphism
   ================== */

/* Override all Paper elevation variants */
.MuiPaper-root,
.MuiPaper-elevation,
.MuiPaper-elevation0,
.MuiPaper-elevation1,
.MuiPaper-elevation2,
.MuiPaper-elevation3,
.MuiPaper-elevation4,
.MuiPaper-elevation8,
.MuiPaper-elevation16,
.MuiPaper-elevation24,
[class*="MuiPaper-elevation"] {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* ==================
   TOP NAVBAR — override Paper glass so AppBar is invisible
   Must come AFTER .MuiPaper-root (AppBar is also a Paper)
   ================== */

.MuiAppBar-root.MuiPaper-root,
header[class*="MuiAppBar"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.MuiToolbar-root {
  min-height: 40px !important;
}

.MuiCard-root,
[class*="MuiCard-root"] {
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  margin: 8px 16px !important;
}

/* ==================
   DIALOGS / MODALS
   ================== */

.MuiDialog-paper {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.MuiBackdrop-root {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

.MuiDialogTitle-root {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #fafafa !important;
}

.MuiDialogContent-root {
  color: #d4d4d8 !important;
  font-size: 0.8rem !important;
}

.MuiDialogActions-root {
  padding: 16px 24px !important;
}

/* ==================
   INPUTS — glass style
   ================== */

.MuiInputBase-root,
.MuiOutlinedInput-root {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #67ab95 !important;
  border-width: 1px !important;
}

.MuiInputLabel-root {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: #67ab95 !important;
}

/* ==================
   METHOD CONTAINER — Authelia's OTP/method wrapper has a hardcoded white border
   ================== */

[class*="methodContainer"],
[class*="-methodContainer"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

/* ==================
   OTP INPUT BOXES — glass, no white border
   ================== */

input[type="tel"],
input[autocomplete="one-time-code"],
input[inputmode="numeric"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #fafafa !important;
  caret-color: #67ab95 !important;
}

input[type="tel"]:focus,
input[autocomplete="one-time-code"]:focus,
input[inputmode="numeric"]:focus {
  border-color: rgba(255, 255, 255, 0.20) !important;
  outline: none !important;
}

/* ==================
   BUTTONS — glass style, clear distinction for actions
   ================== */

/* Primary/Accept buttons — glass with subtle green */
.MuiButton-root,
.MuiButton-contained,
.MuiButton-containedPrimary,
.MuiButton-containedSuccess,
.MuiButton-containedInfo,
button[class*="MuiButton-contained"] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fafafa !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  text-transform: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: 0.02em !important;
}

.MuiButton-root:hover,
.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover,
button[class*="MuiButton-contained"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

/* Deny/Cancel/Error buttons — distinct with red tint */
.MuiButton-containedError,
.MuiButton-containedSecondary,
button[class*="MuiButton-containedError"],
button[class*="MuiButton-containedSecondary"] {
  background: rgba(248, 113, 113, 0.08) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(248, 113, 113, 0.15) !important;
}

.MuiButton-containedError:hover,
.MuiButton-containedSecondary:hover,
button[class*="MuiButton-containedError"]:hover,
button[class*="MuiButton-containedSecondary"]:hover {
  background: rgba(248, 113, 113, 0.15) !important;
}

/* Text/link buttons */
.MuiButton-text,
.MuiButton-textPrimary,
button[class*="MuiButton-text"] {
  background: transparent !important;
  border: none !important;
  color: #67ab95 !important;
  text-transform: none !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
}

/* Links */
a, .MuiLink-root {
  color: #67ab95 !important;
}

/* Secondary action links — muted, not bright accent */
button.MuiLink-button[class*="-resetLink"],
button.MuiLink-root#reset-password-button,
button.MuiLink-root#register-link {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.75rem !important;
}

button.MuiLink-button[class*="-resetLink"]:hover,
button.MuiLink-root#reset-password-button:hover,
button.MuiLink-root#register-link:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ==================
   SIDEBAR / DRAWER
   ================== */

.MuiDrawer-paper {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}

.MuiListItemButton-root {
  border-radius: 8px !important;
  margin: 2px 8px !important;
}

.MuiListItemButton-root:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.MuiListItemButton-root.Mui-selected,
.MuiListItemButton-root.Mui-selected:hover {
  background: rgba(103, 171, 149, 0.12) !important;
}

.Mui-selected .MuiListItemIcon-root,
.Mui-selected .MuiListItemText-primary,
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
  color: #67ab95 !important;
}

.MuiListItemIcon-root {
  color: rgba(255, 255, 255, 0.4) !important;
}

.MuiListItemText-primary {
  font-size: 0.75rem !important;
}

/* ==================
   CHECKBOXES, RADIOS, SWITCHES
   ================== */

.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked,
.MuiSwitch-switchBase.Mui-checked {
  color: #67ab95 !important;
}

.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: #67ab95 !important;
}

/* ==================
   TABS
   ================== */

.MuiTab-root {
  text-transform: none !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.MuiTab-root.Mui-selected {
  color: #67ab95 !important;
}

.MuiTabs-indicator {
  background-color: #67ab95 !important;
}

/* ==================
   LOGO
   ================== */

.MuiAvatar-root {
  width: 72px !important;
  height: 72px !important;
  background: transparent !important;
}

/* ==================
   OTP TIMER
   ================== */

.MuiCircularProgress-root,
.MuiCircularProgress-svg {
  color: #67ab95 !important;
}

/* ==================
   TOOLTIPS
   ================== */

.MuiTooltip-tooltip {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(80px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e4e4e7 !important;
  font-size: 0.7rem !important;
}

/* ==================
   DIVIDERS
   ================== */

.MuiDivider-root {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==================
   ICONS
   ================== */

.MuiSvgIcon-root {
  color: rgba(255, 255, 255, 0.5) !important;
}

.MuiButton-root .MuiSvgIcon-root,
.MuiIconButton-root .MuiSvgIcon-root {
  color: inherit !important;
}

/* ==================
   TEXT — matching landing page sizes
   text-[0.8rem] body, text-[0.65rem] labels
   ================== */

.MuiTypography-h5,
.MuiTypography-h6 {
  color: #fafafa !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.MuiTypography-body1 {
  color: #d4d4d8 !important;
  font-size: 0.8rem !important;
}

.MuiTypography-body2 {
  color: #a1a1aa !important;
  font-size: 0.75rem !important;
}

.MuiTypography-subtitle1 {
  font-size: 0.8rem !important;
  color: #d4d4d8 !important;
}

.MuiTypography-caption {
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ==================
   "Powered by Authelia" branding link — muted, tiny
   No <footer> wrapper exists; target by tss-*-links class
   ================== */

a[class*="-links"][href*="authelia"],
a.MuiLink-root[href*="authelia"] {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.55rem !important;
  opacity: 0.4 !important;
  text-decoration: none !important;
}

/* ==================
   HIDE LANGUAGE BUTTON in navbar — target by ID
   ================== */

#language-button {
  display: none !important;
}

/* ==================
   PROFILE BUTTON (top-right avatar/initial) — make it visible
   Target only #account-menu, not all icon buttons
   ================== */

.MuiToolbar-root #account-menu {
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

.MuiToolbar-root #account-menu:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Profile avatar letter inside navbar — visible on dark bg */
#account-menu .MuiAvatar-root {
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fafafa !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* ==================
   CONSENT PAGE — scopes list with glass card
   ================== */

ul[class*="-scopesList"],
ul.MuiList-root[class*="scopesList"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
  padding: 8px !important;
}

.MuiList-root:not([class*="scopesList"]) {
  background: transparent !important;
}

/* ==================
   CHIPS / BADGES
   ================== */

.MuiChip-root {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #d4d4d8 !important;
  font-size: 0.7rem !important;
}

/* ==================
   OUTLINED BUTTONS
   ================== */

.MuiButton-outlined,
button[class*="MuiButton-outlined"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.7rem !important;
  text-transform: none !important;
}

.MuiButton-outlined:hover,
button[class*="MuiButton-outlined"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}

/* ==================
   ICON BUTTONS
   ================== */

.MuiIconButton-root {
  color: rgba(255, 255, 255, 0.5) !important;
}

.MuiIconButton-root:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ==================
   MENUS (dropdowns)
   ================== */

.MuiMenu-paper,
.MuiPopover-paper {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
}

.MuiMenuItem-root {
  font-size: 0.75rem !important;
  color: #d4d4d8 !important;
}

.MuiMenuItem-root:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ==================
   SETTINGS PAGE — fix full-width grey cards
   ================== */

/* Settings main content area */
main,
[class*="MuiContainer-root"] {
  background: transparent !important;
}

/* ==================
   SCROLLBAR
   ================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
}