/* Peepsule glass theme - loaded after MetaFox's own CSS via one <link> in index.html.
   Brand: electric blue -> violet, frosted glass, soft glow (from the original Peepsule design).
   RULE: this file must work in BOTH light and dark mode, so it never sets background or text colours
   on generic surfaces (cards, inputs, dialogs) - MetaFox's own theme colours handle those.
   To turn it off, remove the <link href="/peepsule-theme.css"> line from public/web/index.html. */
:root {
  --ps-primary: #00C2FF;
  --ps-primary-2: #3D9BFF;
  --ps-accent: #8A6BFF;
  --ps-navy: #001428;
  --ps-gradient: linear-gradient(90deg, #00C2FF 0%, #3D9BFF 50%, #8A6BFF 100%);
  --ps-gradient-deep: linear-gradient(135deg, #001428 0%, #0057B8 48%, #00C2FF 100%);
  --ps-blur: 18px;
  --ps-glow: 0 6px 22px rgba(0, 194, 255, 0.38);
  --ps-radius: 18px;
}

/* ambient colour glow behind the app: translucent only, so it tints light AND dark backgrounds */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 10% -8%, rgba(0, 194, 255, 0.16), transparent 62%),
    radial-gradient(800px 540px at 100% 6%, rgba(138, 107, 255, 0.13), transparent 62%);
}

/* landing hero: brand gradient instead of the stock photo (always dark, so white text is safe) */
[class*="ltr-14dnm5w"], [class*="ltr-utd2wz"], [class*="ltr-83wjrk"] {
  background-image:
    radial-gradient(700px 420px at 85% 20%, rgba(138, 107, 255, 0.45), transparent 62%),
    radial-gradient(640px 400px at 8% 85%, rgba(0, 194, 255, 0.40), transparent 60%),
    var(--ps-gradient-deep) !important;
  background-size: cover !important;
}

/* sign-in / sign-up screens: brand gradient behind the card */
[class*="ltr-10f64rz"], [class*="ltr-1pb8w7k"] {
  background:
    radial-gradient(520px 360px at 90% 8%, rgba(138, 107, 255, 0.50), transparent 62%),
    radial-gradient(520px 380px at 5% 95%, rgba(0, 194, 255, 0.45), transparent 60%),
    var(--ps-gradient-deep) !important;
}

/* headings */
.MuiTypography-h1 { letter-spacing: -0.02em; }
[class*="ltr-14dnm5w"] .MuiTypography-h1, [class*="ltr-utd2wz"] .MuiTypography-h1 { text-shadow: 0 2px 24px rgba(0, 20, 40, 0.35); }
.MuiTypography-h2 { letter-spacing: -0.015em; }

/* buttons: pill shape everywhere, gradient + glow on the primary action (white text works in both modes) */
.MuiButton-root { border-radius: 999px !important; text-transform: none !important; font-weight: 700 !important; letter-spacing: 0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.MuiButton-root:hover { transform: translateY(-1px); }
.MuiButton-containedPrimary {
  background-image: var(--ps-gradient) !important; background-color: var(--ps-primary) !important;
  color: #fff !important; box-shadow: var(--ps-glow) !important; border: 0 !important;
}
.MuiButton-containedPrimary:hover { box-shadow: 0 10px 30px rgba(0, 194, 255, 0.5) !important; }

/* surfaces: shape and depth only - colours stay MetaFox's (light or dark) */
.MuiPaper-rounded, .MuiCard-root { border-radius: var(--ps-radius) !important; }
.MuiPaper-root:not(.MuiPaper-elevation0):not(.MuiAppBar-root) { -webkit-backdrop-filter: blur(var(--ps-blur)); backdrop-filter: blur(var(--ps-blur)); }
.MuiDialog-paper, .MuiPopover-paper, .MuiMenu-paper { border-radius: 22px !important; box-shadow: 0 24px 64px rgba(0, 20, 40, 0.28) !important; }
.MuiBackdrop-root:not(.MuiBackdrop-invisible) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* form fields: rounded, with a cyan focus ring */
.MuiOutlinedInput-root { border-radius: 14px !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--ps-primary) !important; box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.18); }

/* small touches */
.MuiChip-root { border-radius: 999px !important; }
.MuiAvatar-root { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(0, 87, 184, 0.25); }
::selection { background: rgba(0, 194, 255, 0.28); }

/* logo: light mode serves logo.png (navy wordmark) -> frosted white pill;
   dark mode serves logo-dark.png (white wordmark) -> frosted dark pill, so it reads on any background */
img[src*="/layout/images/logo"] {
  height: 46px !important; width: auto !important; max-width: none !important;
  padding: 5px 18px 5px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(var(--ps-blur)); backdrop-filter: blur(var(--ps-blur));
}
img[src*="/layout/images/logo.png"] { background: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 20px rgba(31, 41, 55, 0.12); }
img[src*="/layout/images/logo-dark.png"] { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }

@media (prefers-reduced-motion: reduce) { .MuiButton-root { transition: none; } .MuiButton-root:hover { transform: none; } }


/* ============================================================
   MODERN LAYER (v3) - mode-agnostic: shape, depth, motion, type.
   Colours of generic surfaces stay MetaFox's own (light or dark).
   ============================================================ */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}
:root { --ps-hair: rgba(128, 128, 128, 0.18); --ps-lift: 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 34px -14px rgba(15, 23, 42, 0.28); }

/* typography: one modern family everywhere (icon fonts excluded) */
*:not(.ico):not([class*="ico-"]):not(svg):not(svg *) { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3, h1, h2 { font-weight: 800; letter-spacing: -0.025em; }
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 { font-weight: 700; letter-spacing: -0.015em; }

/* smooth, quiet scrollbars + visible keyboard focus */
* { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; border-radius: 8px; }

/* top bar: frosted + hairline, pill search with a glow when focused */
header.MuiAppBar-root {
  box-shadow: 0 1px 0 var(--ps-hair), 0 10px 28px -16px rgba(15, 23, 42, 0.35) !important;
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
}
header .MuiInputBase-root { border-radius: 999px !important; transition: box-shadow .2s ease, background-color .2s ease; }
header .MuiInputBase-root:focus-within { box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.28), 0 6px 20px -8px rgba(0, 194, 255, 0.5); }
header .MuiIconButton-root, header button { transition: transform .15s ease; }
header .MuiIconButton-root:hover { transform: translateY(-1px) scale(1.06); }

/* left menu: pill rows, tinted icons, gradient active state */
nav a, a.ps-navlink { border-radius: 16px; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
nav a:hover, a.ps-navlink:hover { background: linear-gradient(90deg, rgba(0, 194, 255, 0.13), rgba(138, 107, 255, 0.07)); }
nav a:active, a.ps-navlink:active { transform: scale(0.985); }
nav a .ico, a.ps-navlink .ico { background: linear-gradient(135deg, rgba(0, 194, 255, 0.22), rgba(138, 107, 255, 0.22)) !important; color: #2d8cf0 !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
nav a:hover .ico, a.ps-navlink:hover .ico { transform: scale(1.08); }
nav a.ps-active, a.ps-navlink.ps-active { background: linear-gradient(90deg, rgba(0, 194, 255, 0.18), rgba(138, 107, 255, 0.10)); box-shadow: inset 3px 0 0 var(--ps-primary); }
nav a.ps-active .ico, a.ps-navlink.ps-active .ico { background: var(--ps-gradient) !important; color: #fff !important; box-shadow: var(--ps-glow); }
nav a.ps-active span:not(.ico), a.ps-navlink.ps-active span:not(.ico) { font-weight: 700; }

/* sub-menus (Groups, Events, ...): links that wrap a MenuItem get the same treatment */
a.ps-navlink:has(> .MuiMenuItem-root) { display: block; }
a.ps-navlink .MuiMenuItem-root { border-radius: 16px; background: transparent !important; }
a.ps-navlink .MuiListItemIcon-root { background: linear-gradient(135deg, rgba(0, 194, 255, 0.22), rgba(138, 107, 255, 0.22)) !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
a.ps-navlink:hover .MuiListItemIcon-root { transform: scale(1.08); }
a.ps-navlink.ps-active .MuiListItemIcon-root { background: var(--ps-gradient) !important; box-shadow: var(--ps-glow); }
a.ps-navlink.ps-active .MuiListItemIcon-root .ico { color: #fff !important; }

/* cards (tagged by peepsule-ui.js): roomy radius, hairline, layered depth, gentle entrance */
@keyframes psRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ps-card {
  border-radius: 22px !important; border-color: var(--ps-hair) !important; box-shadow: var(--ps-lift) !important;
  overflow: hidden; animation: psRise .5s cubic-bezier(.2, .7, .2, 1) both;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ps-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 22px 44px -16px rgba(15, 23, 42, 0.36) !important; }

/* photos and avatars */
.MuiAvatar-root { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(0, 194, 255, 0.35), 0 6px 16px rgba(0, 87, 184, 0.25); }
.ps-card img:not(.MuiAvatar-img) { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ps-card:hover img:not(.MuiAvatar-img) { transform: scale(1.015); }

/* tabs, chips, toggles: capsule language */
.MuiTab-root { border-radius: 999px !important; text-transform: none !important; font-weight: 700 !important; transition: background-color .18s ease; }
.MuiTab-root:hover { background: rgba(0, 194, 255, 0.10); }
.MuiTabs-indicator { height: 3px !important; border-radius: 3px; background: var(--ps-gradient) !important; }
.MuiChip-root { font-weight: 600; }
.MuiSwitch-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: var(--ps-primary-2) !important; }

/* menus / popovers: soft, deep, rounded */
.MuiMenuItem-root { border-radius: 12px; margin: 2px 6px; transition: background-color .15s ease; }
.MuiMenu-paper, .MuiPopover-paper { border: 1px solid var(--ps-hair); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* text inputs & textareas: friendlier, focus glow */
.MuiOutlinedInput-root { transition: box-shadow .2s ease; }
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.16); }

/* links */
a { text-underline-offset: 3px; }

/* phones: larger tap targets in the bottom bar, rounder sheets */
@media (max-width: 600px) {
  img[src*="/layout/images/logo"] { height: 34px !important; padding: 4px 14px 4px 8px; }
  .ps-card { border-radius: 18px !important; }
  header.MuiAppBar-root { box-shadow: 0 1px 0 var(--ps-hair) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-card { animation: none; transition: none; } nav a, nav a .ico, header .MuiIconButton-root { transition: none; }
}

/* letter avatars (members without a photo): brand gradient instead of random pastels */
.MuiAvatar-colorDefault:not(:has(img)) {
  background: linear-gradient(135deg, #00C2FF 0%, #3D9BFF 50%, #8A6BFF 100%) !important;
  color: #fff !important; font-weight: 700;
}
/* profile / group / page covers: a touch of depth so the artwork feels part of the page */
[class*="ltr-"] > img[src*="cover_no_image"], img[src*="cover_no_image"] { filter: saturate(1.05); }


/* ============ LOADING EXPERIENCE ============ */
/* 1) splash while the app boots: pure CSS, shows only while #root is still empty, vanishes the moment React mounts */
@keyframes psBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes psSlide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#root:empty::before {
  content: ""; position: fixed; left: 50%; top: 50%; width: 120px; height: 91px; margin: -70px 0 0 -60px; z-index: 5;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20330%20250%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300C2FF%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%233D9BFF%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238A6BFF%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22330%22%20height%3D%22250%22%20rx%3D%22125%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2216%22%20width%3D%22294%22%20height%3D%22105%22%20rx%3D%2252%22%20fill%3D%22%23fff%22%20opacity%3D%22.22%22/%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22112%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22218%22%20cy%3D%22112%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22124%22%20cy%3D%22120%22%20r%3D%2222%22%20fill%3D%22%23001428%22/%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22120%22%20r%3D%2222%22%20fill%3D%22%23001428%22/%3E%3Ccircle%20cx%3D%22132%22%20cy%3D%22112%22%20r%3D%228%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22112%22%20r%3D%228%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 14px 18px rgba(0, 87, 184, 0.35));
  animation: psBob 1.2s ease-in-out infinite;
}
#root:empty::after {
  content: ""; position: fixed; left: 50%; top: calc(50% + 46px); width: 140px; height: 5px; margin-left: -70px; border-radius: 5px; z-index: 5;
  background: linear-gradient(90deg, transparent, #00C2FF, #8A6BFF, transparent) 0 0 / 200% 100%; animation: psSlide 1.3s linear infinite;
}
/* 2) the thin bar at the top during page changes: brand gradient with a glow instead of plain red */
[class*="ltr-abhjwb"] { background: linear-gradient(90deg, #00C2FF, #3D9BFF, #8A6BFF) !important; height: 3px !important; box-shadow: 0 0 14px rgba(0, 194, 255, 0.75); }
/* 3) spinners get the brand gradient (the gradient definition is injected by peepsule-ui.js) */
.MuiCircularProgress-circle { stroke: url(#psGrad) !important; }
.MuiCircularProgress-root { filter: drop-shadow(0 2px 6px rgba(0, 194, 255, 0.35)); }
.MuiLinearProgress-bar { background: linear-gradient(90deg, #00C2FF, #8A6BFF) !important; }

/* big empty-state icons ("No groups are found", "No events"...) get the gradient (class added by peepsule-ui.js) */
.ps-hero-ico { background: linear-gradient(135deg, #00C2FF, #8A6BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; filter: drop-shadow(0 8px 16px rgba(0, 194, 255, 0.35)); }
@media (prefers-reduced-motion: reduce) { #root:empty::before, #root:empty::after { animation: none; } }