/* ===========================
   Authelia Clean Theme
   Place at /data/nginx/custom/authelia-theme.css
   =========================== */

/* ---------- Global background & font ---------- */
html, body {
  min-height: 100vh !important;
  height: 100% !important;
  margin: 0 !important;
  background: #111116 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* ---------- Subtle fade-in ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===========================================
   LOGIN / PORTAL PAGE
   =========================================== */

#root {
  min-height: 100vh !important;
}

#login-portal {
  background: #1a1a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 2rem 2rem 1.5rem !important;
  max-width: 400px !important;
  margin: auto !important;
  margin-top: 15vh !important;
  animation: fadeIn 0.3s ease-out;
}

/* ===========================================
   SHARED COMPONENT STYLES
   =========================================== */

/* ---------- Heading ---------- */
h1 {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #f0f0f5 !important;
  margin-bottom: 0.75rem !important;
}

/* ---------- Avatar icon ---------- */
.MuiAvatar-root {
  background: #3b82f6 !important;
  box-shadow: none !important;
  width: 48px !important;
  height: 48px !important;
}

/* ---------- Text inputs ---------- */
.MuiInputBase-root,
.MuiOutlinedInput-root {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease !important;
}

.MuiOutlinedInput-root fieldset {
  border-color: rgba(255, 255, 255, 0.10) !important;
  transition: border-color 0.15s ease !important;
}

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

.MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: #3b82f6 !important;
  box-shadow: none !important;
}

.MuiInputBase-input {
  color: #e2e2ea !important;
  padding: 12px 14px !important;
}

.MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.35) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: #60a5fa !important;
}

/* ---------- Primary button ---------- */
.MuiButton-containedPrimary {
  background: #3b82f6 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

.MuiButton-containedPrimary:hover {
  background: #2563eb !important;
  box-shadow: none !important;
}

/* ---------- Secondary button ---------- */
.MuiButton-containedSecondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  color: #a0a0b0 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
}

.MuiButton-containedSecondary:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #d0d0da !important;
  box-shadow: none !important;
}

/* ---------- Checkbox ---------- */
.MuiCheckbox-root {
  color: rgba(255, 255, 255, 0.20) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: #3b82f6 !important;
}

.MuiFormControlLabel-label {
  color: rgba(255, 255, 255, 0.40) !important;
  font-size: 0.85rem !important;
}

/* ---------- Links ---------- */
a, .MuiLink-root {
  color: #60a5fa !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

a:hover, .MuiLink-root:hover {
  color: #93bbfd !important;
  text-decoration: underline !important;
}

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

.MuiDivider-root span {
  color: rgba(255, 255, 255, 0.20) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
}

/* ---------- Language selector ---------- */
.MuiSelect-root,
.MuiSelect-icon {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ===========================================
   SETTINGS PAGES
   =========================================== */

/* ---------- App bar ---------- */
.MuiAppBar-root {
  background: #161619 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.MuiAppBar-root .MuiTypography-root {
  color: #e2e2ea !important;
  font-weight: 500 !important;
}

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

/* ---------- Sidebar drawer ---------- */
.MuiDrawer-paper {
  background: #141418 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.MuiDrawer-paper .MuiTypography-root {
  color: #c0c0ca !important;
}

.MuiDrawer-paper .MuiListItemButton-root:hover,
.MuiDrawer-paper .MuiListItem-root:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.MuiDrawer-paper .MuiListItemIcon-root {
  color: #60a5fa !important;
}

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

/* ---------- Settings content cards ---------- */
.MuiPaper-root:not(.MuiAppBar-root):not(.MuiDrawer-paper) {
  background: #1a1a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #c0c0ca !important;
}

/* ---------- General typography ---------- */
.MuiTypography-root {
  color: #c0c0ca !important;
}

.MuiTypography-h5,
.MuiTypography-h6 {
  color: #f0f0f5 !important;
  font-weight: 500 !important;
}

.MuiTypography-body2 {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ---------- Footer ---------- */
footer, .MuiTypography-caption {
  color: rgba(255, 255, 255, 0.12) !important;
  font-size: 0.7rem !important;
}

/* ---------- Notification snackbars ---------- */
.MuiAlert-standardError {
  background: rgba(239, 68, 68, 0.10) !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  border-radius: 8px !important;
  color: #fca5a5 !important;
}

.MuiAlert-standardSuccess {
  background: rgba(34, 197, 94, 0.10) !important;
  border: 1px solid rgba(34, 197, 94, 0.20) !important;
  border-radius: 8px !important;
  color: #86efac !important;
}