/* Google Fonts moved to index.html (preconnect + ) to remove the render-blocking @import waterfall. Do not re-add here. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Cyberpunk Color Palette */
--bg-primary: #080809;
--bg-secondary: #0f1018;
--bg-card: #111219;
--accent-cyan: #E8FF47;
--accent-pink: #ff64b4;
--accent-green: #44e08a;
--accent-purple: #7c6bff;
--accent-orange: #ff8c42;
--accent-yellow: #E8FF47;
--accent-dark-green: #1a5c36;
--text-primary: #ffffff;
--text-secondary: rgba(255,255,255,0.5);
--text-muted: rgba(255,255,255,0.25);
--border-glow: #E8FF47;
--gradient-primary: linear-gradient(135deg, #E8FF47 0%, #7c6bff 100%);
--gradient-secondary: linear-gradient(135deg, #44e08a 0%, #ff8c42 100%);
--gradient-dark: linear-gradient(135deg, #0f1018 0%, #111219 100%);
}
body {
font-family: 'Rajdhani', sans-serif;
background: var(--bg-primary);
height: 100vh;
color: var(--text-primary);
overflow: hidden;
}
/* Loading Screen */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.5s ease;
}
.loading-content {
text-align: center;
}
.loading-logo {
font-family: 'Barlow Condensed', sans-serif;
font-size: 4em;
font-weight: 800;
letter-spacing: .14em;
color: #fff;
margin-bottom: 20px;
animation: pulse 2s infinite;
}
/* ============================================================
PINNR CONFIRMATION OVERLAY
============================================================ */
#pinnr-confirm-overlay {
position: fixed; inset: 0; z-index: 999999;
background: #050507;
display: flex; align-items: center; justify-content: center;
opacity: 1; transition: opacity 0.6s ease;
}
#pinnr-confirm-overlay.fade-out { opacity: 0; pointer-events: none; }
#pinnr-confirm-overlay .co-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0,245,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,245,255,0.05) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 100%);
}
#pinnr-confirm-overlay .co-glow-c {
position: absolute; width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,245,255,0.07) 0%, transparent 70%);
top: 30%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
#pinnr-confirm-overlay .co-glow-p {
position: absolute; width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,0,255,0.05) 0%, transparent 70%);
bottom: 20%; left: 30%; pointer-events: none;
}
#pinnr-confirm-overlay .co-glow-g {
position: absolute; width: 160px; height: 160px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,255,65,0.04) 0%, transparent 70%);
bottom: 25%; right: 25%; pointer-events: none;
}
#pinnr-confirm-overlay .co-content {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center;
padding: 40px 24px; width: 100%; max-width: 480px; text-align: center;
}
#pinnr-confirm-overlay .co-top-label {
font-family: 'Rajdhani', sans-serif; font-size: 9px; letter-spacing: 5px;
color: #252540; text-transform: uppercase; margin-bottom: 30px;
opacity: 0; animation: co-rise 0.6s ease forwards 0.3s;
}
#pinnr-confirm-overlay .co-pin {
margin-bottom: 24px; opacity: 0; animation: co-rise 0.7s ease forwards 0.7s;
}
#pinnr-confirm-overlay .co-wordmark {
font-family: 'Barlow Condensed', sans-serif; font-size: 52px; font-weight: 800;
letter-spacing: .14em;
color: transparent;
position: relative;
display: block; text-align: center;
margin-bottom: 6px; opacity: 0; animation: co-rise 0.7s ease forwards 1.3s;
}
#pinnr-confirm-overlay .co-wordmark::after {
content: 'P!NNR';
position: absolute;
left: 50%; transform: translateX(-50%);
background: linear-gradient(to right,
#fff 0%, #fff 19%,
#E8FF47 20%, #E8FF47 38%,
#fff 39%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
font-size: inherit; font-weight: inherit;
letter-spacing: inherit; font-family: inherit;
}
#pinnr-confirm-overlay .co-tagline {
font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 5px;
color: rgba(232,255,71,0.7); text-transform: uppercase; margin-bottom: 32px;
opacity: 0; animation: co-rise 0.6s ease forwards 1.7s;
}
#pinnr-confirm-overlay .co-rule {
width: 1px; height: 44px;
background: linear-gradient(to bottom, transparent, rgba(255,0,255,0.5), transparent);
margin-bottom: 32px; opacity: 0; animation: co-rise 0.5s ease forwards 2.1s;
}
#pinnr-confirm-overlay .co-confirm-text {
font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: 4px;
color: #333355; text-transform: uppercase; margin-bottom: 10px;
opacity: 0; animation: co-rise 0.6s ease forwards 2.5s;
}
#pinnr-confirm-overlay .co-status {
font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700;
letter-spacing: 4px; color: #00ff41; text-transform: uppercase;
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-bottom: 36px; opacity: 0; animation: co-rise 0.6s ease forwards 2.9s;
}
#pinnr-confirm-overlay .co-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: #00ff41; box-shadow: 0 0 8px #00ff41;
animation: co-pulse 2s ease-in-out infinite 3.1s;
}
#pinnr-confirm-overlay .co-btn-wrap {
opacity: 0; animation: co-rise 0.6s ease forwards 3.3s;
position: relative; overflow: hidden;
}
#pinnr-confirm-overlay .co-btn-wrap::after {
content: ''; position: absolute; top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: co-shine 3.5s ease-in-out infinite 4.2s;
pointer-events: none;
}
#pinnr-confirm-overlay .co-btn {
font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700;
letter-spacing: 4px; text-transform: uppercase;
background: linear-gradient(135deg, #00f5ff 0%, #ff00ff 100%);
border: none; padding: 15px 40px; cursor: pointer; display: block;
-webkit-text-fill-color: #050507; color: #050507;
}
#pinnr-confirm-overlay .co-btn:hover { filter: brightness(1.1); }
#pinnr-confirm-overlay .co-cities {
display: flex; gap: 20px; margin-top: 28px;
opacity: 0; animation: co-rise 0.5s ease forwards 3.7s;
}
#pinnr-confirm-overlay .co-city {
font-family: 'Rajdhani', sans-serif; font-size: 9px; letter-spacing: 3px;
color: #1e1e33; text-transform: uppercase; padding: 4px 10px;
border: 1px solid #1a1a2e;
}
#pinnr-confirm-overlay .co-city.active { color: #ff00ff; border-color: rgba(255,0,255,0.2); }
@keyframes co-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes co-pulse { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes co-shine { 0%,60%{left:-100%} 100%{left:200%} }
.loading-spinner {
width: 60px;
height: 60px;
border: 3px solid rgba(0, 245, 255, 0.3);
border-top-color: var(--accent-cyan);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
/* ============================================================
PINNR LANDING PAGE
============================================================ */
#landingScreen {
position: fixed;
inset: 0;
z-index: 9000;
background: #080809;
display: flex;
flex-direction: column;
overflow: hidden;
transition: opacity 0.5s ease, transform 0.5s ease;
}
#landingScreen.hiding {
opacity: 0;
transform: scale(1.04);
pointer-events: none;
}
.lp-scanline {
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(232,255,71,0.35) 50%, transparent 100%);
animation: lpScan 5s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes lpScan {
0% { top: -2px; opacity: 1; }
85% { opacity: 0.5; }
100% { top: 102%; opacity: 0; }
}
.lp-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 90% 80% at 50% 35%, transparent 20%, rgba(8,8,9,0.45) 60%, rgba(8,8,9,0.97) 100%);
z-index: 3;
pointer-events: none;
}
.lp-ground {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 300px;
background: linear-gradient(to top, #080809 0%, #080809 25%, rgba(8,8,9,0.9) 55%, transparent 100%);
z-index: 4;
pointer-events: none;
}
.lp-map-zone {
position: absolute;
top: 0; left: 0; right: 0;
height: 420px;
z-index: 2;
}
.lp-topbar {
position: relative;
z-index: 6;
padding: 20px 24px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.lp-logo-text {
font-family: 'Barlow Condensed', sans-serif;
font-size: 44px;
font-weight: 900;
line-height: 1;
letter-spacing: -1px;
color: #fff;
}
.lp-logo-text .lp-bang { color: #E8FF47; }
.lp-logo-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 7.5px;
letter-spacing: 3px;
color: rgba(232,255,71,0.5);
margin-top: 3px;
text-transform: uppercase;
}
.lp-live-badge {
display: flex;
align-items: center;
gap: 6px;
background: rgba(8,8,9,0.75);
border: 0.5px solid rgba(232,255,71,0.25);
border-radius: 20px;
padding: 5px 11px;
margin-top: 6px;
}
.lp-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #44e08a;
animation: lpDotPulse 1.5s ease-in-out infinite;
}
@keyframes lpDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.7); opacity: 0.4; }
}
.lp-live-txt {
font-family: 'Space Mono', monospace;
font-size: 7.5px;
letter-spacing: 1px;
color: rgba(255,255,255,0.4);
}
.lp-live-txt strong { color: #44e08a; }
.lp-ufo-wrap {
position: absolute;
top: 72px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
animation: lpUfoFloat 3.5s ease-in-out infinite;
pointer-events: none;
width: 120px;
height: 120px;
}
@keyframes lpUfoFloat {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
50% { transform: translateX(-50%) translateY(-10px) rotate(1.5deg); }
}
.lp-av-pin {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
animation: lpDropIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes lpDropIn {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
.lp-av-circle {
width: 42px; height: 42px;
border-radius: 50%;
border: 2px solid #E8FF47;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px rgba(232,255,71,0.1), 0 6px 20px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
.lp-av-ring {
position: absolute;
top: 50%; left: 50%;
border-radius: 50%;
border: 1px solid rgba(232,255,71,0.3);
animation: lpRingOut 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes lpRingOut {
0% { width: 42px; height: 42px; margin-top: -21px; margin-left: -21px; opacity: 0.6; }
100% { width: 82px; height: 82px; margin-top: -41px; margin-left: -41px; opacity: 0; }
}
.lp-av-stem {
width: 2px; height: 10px;
background: #E8FF47;
opacity: 0.55;
}
.lp-av-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #E8FF47;
opacity: 0.4;
animation: lpDotPulse 2.5s ease-in-out infinite;
}
.lp-ev-pin {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
animation: lpDropIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.lp-ev-label {
font-family: 'Space Mono', monospace;
font-size: 8px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 4px 8px;
border-radius: 20px;
white-space: nowrap;
}
.lp-ev-label.pub { background: #E8FF47; color: #080809; box-shadow: 0 2px 12px rgba(232,255,71,0.35); }
.lp-ev-label.priv { background: transparent; border: 1px solid rgba(232,255,71,0.5); color: #E8FF47; }
.lp-ev-stem { width: 1px; height: 10px; background: #E8FF47; opacity: 0.5; }
.lp-ev-dot { width: 5px; height: 5px; border-radius: 50%; background: #E8FF47; opacity: 0.4; }
.lp-bottom {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 6;
padding: 0 24px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lp-kicker {
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 3.5px;
color: rgba(232,255,71,0.6);
text-transform: uppercase;
margin-bottom: 10px;
animation: lpFadeUp 0.5s 0.1s ease both;
}
.lp-headline {
font-family: 'Barlow Condensed', sans-serif;
font-size: 80px;
font-weight: 900;
line-height: 0.86;
color: #fff;
letter-spacing: -2px;
margin-bottom: 12px;
animation: lpFadeUp 0.5s 0.2s ease both;
}
.lp-headline em { font-style: italic; color: #E8FF47; }
.lp-tagline {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.42);
line-height: 1.65;
margin-bottom: 16px;
max-width: 340px;
animation: lpFadeUp 0.5s 0.3s ease both;
}
.lp-tagline strong { color: rgba(255,255,255,0.78); font-weight: 500; }
.lp-city-pills {
display: flex;
gap: 7px;
margin-bottom: 18px;
justify-content: center;
animation: lpFadeUp 0.5s 0.4s ease both;
}
.lp-pill {
padding: 3px 10px;
border: 0.5px solid rgba(232,255,71,0.25);
border-radius: 20px;
font-family: 'Space Mono', monospace;
font-size: 8px;
letter-spacing: 2px;
color: rgba(232,255,71,0.42);
}
.lp-pill.on {
background: rgba(232,255,71,0.09);
border-color: rgba(232,255,71,0.55);
color: #E8FF47;
}
.lp-ctas {
display: flex;
flex-direction: column;
gap: 9px;
width: 100%;
max-width: 380px;
animation: lpFadeUp 0.5s 0.5s ease both;
}
.lp-btn-main {
width: 100%;
padding: 15px 20px;
background: #E8FF47;
border: none;
border-radius: 12px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px;
font-weight: 900;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #080809;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: transform 0.15s, background 0.15s;
}
.lp-btn-main:hover { transform: translateY(-2px); background: #f0ff6a; }
.lp-btn-main:active { transform: scale(0.98); }
.lp-btn-row { display: flex; gap: 9px; width: 100%; }
.lp-btn-out {
flex: 1;
padding: 13px;
background: transparent;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.lp-btn-out:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.lp-btn-out.lp-yellow { border-color: rgba(232,255,71,0.3); color: rgba(232,255,71,0.6); }
.lp-btn-out.lp-yellow:hover { border-color: #E8FF47; color: #E8FF47; }
.lp-hint {
font-family: 'DM Sans', sans-serif;
font-size: 10.5px;
color: rgba(255,255,255,0.2);
padding-top: 2px;
}
@keyframes lpFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Auth Screen */
.auth-screen {
display: none;
height: 100vh;
align-items: flex-start;
justify-content: center;
padding: 0;
overflow-y: auto;
}
.auth-container {
background: var(--bg-primary);
padding: 28px 24px;
border-radius: 0;
box-shadow: none;
width: 100%;
max-width: 480px;
min-height: 100vh;
overflow-y: auto;
border: none;
}
.auth-logo {
text-align: left;
margin-bottom: 0;
}
.auth-logo h1 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2em;
font-weight: 800;
letter-spacing: .14em;
color: transparent;
position: relative;
margin-bottom: 4px;
}
.auth-logo h1::after {
content: 'P!NNR';
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right,
#fff 0%, #fff 19%,
#E8FF47 20%, #E8FF47 38%,
#fff 39%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
font-family: inherit;
}
.auth-tabs {
display: flex;
background: rgba(255,255,255,0.05);
border-radius: 9px;
padding: 3px;
border: none;
}
.auth-tab {
flex: 1;
padding: 7px;
text-align: center;
border-radius: 7px;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
.auth-tab.active {
background: #E8FF47;
color: #080809;
}
.form-group {
position: relative;
margin-bottom: 9px;
}
.form-group label {
position: absolute;
top: 6px;
left: 12px;
font-family: 'Space Mono', monospace;
font-size: 7px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
font-weight: 400;
pointer-events: none;
z-index: 1;
}
.form-group input {
width: 100%;
padding: 18px 12px 7px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-size: 16px;
transition: border-color 0.2s ease, background 0.2s ease;
background: rgba(255,255,255,0.05);
color: var(--text-primary);
font-family: 'DM Sans', sans-serif;
outline: none;
}
.form-group textarea {
width: 100%;
padding: 18px 12px 7px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-size: 14px;
transition: border-color 0.2s ease;
background: rgba(255,255,255,0.05);
color: var(--text-primary);
font-family: 'DM Sans', sans-serif;
resize: vertical;
}
.form-group select {
width: 100%;
padding: 18px 12px 7px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-size: 14px;
transition: border-color 0.2s ease;
background: rgba(255,255,255,0.05);
color: var(--text-primary);
font-family: 'DM Sans', sans-serif;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: rgba(232,255,71,0.45);
background: rgba(232,255,71,0.03);
box-shadow: none;
}
.btn {
background: #E8FF47;
color: #080809;
border: none;
padding: 13px 20px;
border-radius: 11px;
cursor: pointer;
font-family: 'Barlow Condensed', sans-serif;
font-size: 17px;
font-weight: 900;
letter-spacing: 2px;
transition: transform 0.15s ease, background 0.15s ease;
width: 100%;
text-transform: uppercase;
}
.btn:hover {
transform: translateY(-2px);
background: #f0ff6a;
box-shadow: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-secondary {
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.45);
font-size: 13px;
letter-spacing: 1px;
}
.btn-secondary:hover {
background: transparent;
border-color: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.75);
transform: none;
}
/* Error Message */
.error-message {
background: rgba(255, 0, 255, 0.1);
border: 1px solid var(--accent-pink);
color: var(--accent-pink);
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
/* Main App Container */
.app-container {
display: none;
min-height: 100vh;
}
/* Hide initially until auth check */
.navbar, .container {
display: none;
}
/* Show after auth */
.authenticated .navbar,
.authenticated .container {
display: block;
}
.navbar {
background: var(--bg-secondary);
padding: 15px 0;
box-shadow: 0 4px 30px rgba(0, 245, 255, 0.3);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
border-bottom: 2px solid var(--accent-cyan);
}
.nav-container {
width: 100%;
margin: 0;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.8em;
font-weight: 800;
letter-spacing: .14em;
display: flex;
align-items: center;
gap: 15px;
color: #fff;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #13151f;
color: rgba(255,255,255,0.92);
padding: 14px 18px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.10);
border-left: 3px solid rgba(255,255,255,0.28);
z-index: 1000000;
font-weight: 600;
font-size: 14px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
transform: translateX(400px);
transition: transform 0.3s ease;
white-space: pre-line;
max-width: 360px;
}
.notification.show {
transform: translateX(0);
}
.notification.success {
background: #13151f;
border-left-color: #44e08a;
}
.notification.error {
background: #13151f;
border-left-color: #ff6b6b;
}
@media (max-width: 1024px) {
.notification {
top: 10px;
left: 10px;
right: 10px;
transform: translateY(-100px);
transition: transform .3s ease;
font-size: 14px;
padding: 15px 20px;
text-align: center;
line-height: 1.4;
max-width: none;
width: auto;
}
.notification.show {
transform: translateY(0);
}
}
/* Container Layout */
.container {
width: 100%;
margin: 0;
padding: 20px;
padding-top: 80px;
}
.dashboard {
display: grid;
grid-template-columns: 340px 1fr;
gap: 0 25px; /* vertical gap 0, horizontal gap stays */
height: calc(100vh - 70px);
}
/* Search Bar */
.search-bar {
margin-bottom: 20px;
position: relative;
}
.search-bar input {
width: 100%;
padding: 12px 40px 12px 15px;
background: var(--bg-secondary);
border: 2px solid rgba(0, 245, 255, 0.3);
border-radius: 25px;
color: var(--text-primary);
font-size: 14px;
transition: all 0.3s ease;
}
.search-bar input:focus {
border-color: var(--accent-cyan);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
}
.search-bar i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--accent-cyan);
}
/* Save button on event popup */
.save-event-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--text-secondary);
transition: color 0.2s ease, transform 0.15s ease;
line-height: 1;
flex-shrink: 0;
}
.save-event-btn:hover { color: var(--accent-cyan); transform: scale(1.15); }
.save-event-btn.saved { color: var(--accent-cyan); }
/* Desktop only elements */
.desktop-only {
display: block;
}
/* Desktop search bar */
.search-bar {
display: block;
}
/* Mobile search trigger - hidden by default */
.mobile-search-trigger {
display: none;
}
/* Mobile styles */
@media (max-width: 1024px) {
/* Hide desktop search on mobile */
.search-bar {
display: none !important;
}
/* Show mobile search trigger */
.mobile-search-trigger {
background: rgba(255, 255, 255, 0.05);
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 11px 16px;
width: 100%;
display: flex !important;
align-items: center;
gap: 10px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 16px;
font-family: 'Rajdhani', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
.mobile-search-trigger i {
color: var(--text-secondary);
font-size: 14px;
}
.mobile-search-trigger:active {
border-color: rgba(0, 245, 255, 0.4);
background: rgba(0, 245, 255, 0.05);
}
}
@media (max-width: 1024px) {
.desktop-only {
display: none !important;
}
}
/* Filter Section Styles */
.filter-section {
margin-bottom: 15px;
background: var(--bg-secondary);
border-radius: 15px;
border: 1px solid rgba(0, 245, 255, 0.2);
overflow: hidden;
}
.filter-header {
padding: 12px 15px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
.filter-header:hover {
background: rgba(0, 245, 255, 0.05);
}
.filter-header h4 {
color: var(--accent-cyan);
font-size: 14px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.filter-content {
padding: 0 15px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.filter-content.expanded {
padding: 0 15px 15px 15px;
max-height: 500px;
}
/* Category Filter */
.category-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s ease;
padding: 5px;
border-radius: 8px;
}
.category-checkbox:hover {
background: rgba(0, 245, 255, 0.1);
}
.category-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent-cyan);
cursor: pointer;
}
.category-checkbox label {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-primary);
}
.category-color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
/* Date Filter Styles */
.date-filter {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
/* ============================================ */
/* MOBILE FILTER OPTIMIZATIONS - More space efficient */
/* ============================================ */
@media (max-width: 1024px) {
/* Reduce overall filter section spacing */
.filter-section {
margin-bottom: 10px; /* Reduced from 15px */
border-radius: 12px; /* Slightly smaller radius */
}
/* Smaller filter headers */
.filter-header {
padding: 10px 12px; /* Reduced from 12px 15px */
}
.filter-header h4 {
font-size: 13px; /* Reduced from 14px */
}
.filter-header i {
font-size: 11px; /* Smaller chevron icon */
}
/* Tighter filter content */
.filter-content {
padding: 0 12px; /* Reduced horizontal padding */
}
.filter-content.expanded {
padding: 0 12px 12px 12px; /* Less bottom padding when expanded */
max-height: 400px; /* Limit height to prevent too much expansion */
}
/* More compact checkboxes */
.category-checkbox,
.entry-type-checkbox {
margin-bottom: 6px; /* Reduced from 8px */
padding: 4px; /* Reduced from 5px */
}
.category-checkbox label,
.entry-type-checkbox label {
font-size: 13px; /* Reduced from 14px */
gap: 6px; /* Reduced gap between checkbox and text */
}
/* Smaller category color dots */
.category-color-dot {
width: 10px; /* Reduced from 12px */
height: 10px; /* Reduced from 12px */
}
/* Date filter optimizations */
.date-filter {
gap: 8px; /* Reduced from 10px */
margin-bottom: 15px; /* Reduced from 20px */
}
.filter-btn {
min-width: 70px; /* Reduced from 80px */
padding: 8px; /* Reduced from 10px */
font-size: 12px; /* Reduced from 13px */
border-radius: 8px; /* Reduced from 10px */
}
/* Custom date range more compact */
.custom-date-range {
margin-top: 10px; /* Reduced from 15px */
padding: 12px; /* Reduced from 15px */
border-radius: 8px; /* Reduced from 10px */
}
.date-inputs {
gap: 8px; /* Reduced from 10px */
}
.date-inputs input {
font-size: 13px; /* Smaller font */
padding: 8px; /* Smaller padding */
}
/* Event count text */
#eventCount {
margin: 10px 0; /* Reduced from 15px */
font-size: 13px; /* Reduced from 14px */
}
/* Mobile search trigger button */
.mobile-search-trigger {
margin-bottom: 15px; /* Reduced from 20px */
padding: 10px; /* Reduced from 12px */
font-size: 13px; /* Consistent with other elements */
}
/* Support footer more compact */
.support-footer {
margin: 15px auto 8px auto; /* Reduced from 20px auto 10px */
padding: 8px 12px; /* Reduced from 10px 15px */
font-size: 12px; /* Reduced from 13px */
}
/* Single line CTA footer */
.sidebar-section > div:last-child {
margin: 10px 8px 8px 8px; /* Reduced margins */
padding: 8px; /* Reduced from 10px */
}
.sidebar-section > div:last-child span {
font-size: 11px; /* Reduced from 12px */
}
.sidebar-section > div:last-child .btn {
padding: 5px 10px; /* Reduced from 6px 12px */
font-size: 10px; /* Reduced from 11px */
}
}
/* ============================================ */
/* END MOBILE FILTER OPTIMIZATIONS */
/* ============================================ */
.filter-btn {
flex: 1;
min-width: 80px;
padding: 10px;
background: var(--bg-secondary);
border: 2px solid rgba(0, 245, 255, 0.3);
border-radius: 10px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
font-size: 13px;
font-weight: 600;
text-align: center;
font-family: 'Rajdhani', sans-serif;
}
.filter-btn:hover {
border-color: var(--accent-cyan);
background: rgba(0, 245, 255, 0.1);
}
.filter-btn.active {
background: var(--gradient-primary);
color: var(--bg-primary);
border-color: var(--accent-cyan);
}
.custom-date-range {
display: none;
margin-top: 15px;
padding: 15px;
background: var(--bg-secondary);
border-radius: 10px;
border: 1px solid rgba(0, 245, 255, 0.2);
}
.custom-date-range.show {
display: block;
}
.date-inputs {
display: flex;
gap: 10px;
align-items: center;
}
.date-inputs input {
flex: 1;
}
/* Navigation */
.nav-links {
display: flex;
gap: 30px;
align-items: center;
}
.nav-link {
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
border: 2px solid transparent;
background: transparent;
color: var(--text-secondary);
}
.nav-link.active,
.nav-link:hover {
color: var(--bg-primary);
background: var(--gradient-primary);
border-color: var(--accent-cyan);
transform: translateY(-2px);
}
.user-info {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
background: var(--gradient-primary);
color: var(--bg-primary);
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
animation: pulse 3s infinite;
}
/* Sidebar */
.sidebar {
background: var(--bg-card);
border-radius: 20px;
padding: 25px;
overflow-y: auto;
border: 1px solid rgba(0, 245, 255, 0.3);
}
.sidebar h3 {
color: var(--accent-cyan);
margin-bottom: 20px;
font-size: 1.3em;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Orbitron', monospace;
}
#sidebarCityTitle {
font-size: 0.9em;
font-weight: 600;
}
/* Mobile sidebar title optimization */
@media (max-width: 1024px) {
.sidebar h3 {
margin-bottom: 15px; /* Reduced from 20px */
font-size: 1.1em; /* Reduced from 1.3em */
gap: 8px; /* Reduced from 10px */
}
#sidebarCityTitle {
font-size: 0.85em; /* Slightly smaller city name */
}
}
/* Make the entire h3 more flexible */
.sidebar-section h3 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
line-height: 1.4;
}
.sidebar-section {
margin-bottom: 25px;
padding: 0;
background: var(--bg-secondary);
border-radius: 15px;
border: 1px solid rgba(0, 245, 255, 0.2);
overflow: hidden;
}
/* Map Container */
.main-view-container {
background: var(--bg-card);
border-radius: 0;
overflow: hidden;
border: none;
position: relative;
margin: -20px -20px -20px 0;
height: calc(100vh - 70px);
}
#map {
width: 100%;
height: 100%;
border-radius: 0px;
}
/* Location Search Box */
.location-search-container {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
z-index: 1000;
display: none; /* Hidden by default, shown for business/admin */
}
.location-search-box {
background: var(--bg-card);
border: 2px solid rgba(0, 245, 255, 0.3);
border-radius: 25px;
padding: 15px;
display: flex;
gap: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
max-width: 500px;
}
.location-search-box input {
flex: 1;
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.2);
border-radius: 20px;
padding: 10px 15px;
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
font-size: 14px;
transition: all 0.3s ease;
}
.location-search-box input:focus {
outline: none;
border-color: var(--accent-cyan);
box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
}
.location-search-box button {
background: var(--gradient-primary);
border: none;
border-radius: 20px;
padding: 10px 20px;
color: var(--bg-primary);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Rajdhani', sans-serif;
}
.location-search-box button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 245, 255, 0.4);
}
.location-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 10px;
background: var(--bg-card);
border: 1px solid rgba(0, 245, 255, 0.3);
border-radius: 15px;
max-height: 300px;
overflow-y: auto;
display: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.location-search-results.show {
display: block;
}
.location-result-item {
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(0, 245, 255, 0.1);
display: flex;
align-items: center;
gap: 10px;
}
.location-result-item:last-child {
border-bottom: none;
}
.location-result-item:hover {
background: rgba(0, 245, 255, 0.1);
padding-left: 20px;
}
.location-result-item i {
color: var(--accent-cyan);
font-size: 16px;
}
.location-result-item .result-name {
color: var(--accent-cyan);
font-weight: 600;
font-size: 14px;
}
.location-result-item .result-address {
color: var(--text-secondary);
font-size: 12px;
margin-top: 2px;
}
.location-search-hint {
position: absolute;
bottom: -25px;
left: 15px;
font-size: 11px;
color: var(--text-secondary);
opacity: 0.8;
}
/* Event Items - Fixed overflow */
/* Event Items — new card design */
.event-item {
margin: 10px 0;
background: #0e0e10;
border-radius: 14px;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
border: none;
padding: 0;
}
.event-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.event-item-hero {
width: 100%;
height: 160px;
position: relative;
overflow: hidden;
border-radius: 14px 14px 0 0;
flex-shrink: 0;
}
.event-item-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.event-item-category-pill {
position: absolute;
top: 10px;
left: 10px;
background: #E8FF47;
color: #080809;
font-family: 'DM Sans', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
z-index: 2;
}
.event-item-bookmark {
position: absolute;
top: 10px;
right: 10px;
background: rgba(8,8,9,0.6);
border: none;
border-radius: 8px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
color: #fff;
backdrop-filter: blur(4px);
}
.event-item-body {
padding: 12px 14px 14px;
}
.event-item-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 18px;
color: #fff;
margin: 0 0 4px 0;
line-height: 1.15;
letter-spacing: 0.01em;
}
.event-item-venue {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.45);
margin: 0 0 10px 0;
}
.event-item-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
.event-item-meta .going-avatars {
display: flex;
gap: -4px;
}
.event-item-meta .going-count {
color: rgba(255,255,255,0.7);
}
.event-item-meta .dot {
opacity: 0.35;
}
/* Description container for proper overflow handling */
.event-description-container {
margin: 4px 0;
color: var(--text-secondary);
font-size: 12px;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Form overrides for sidebar */
.sidebar .form-group input,
.sidebar .form-group select,
.sidebar .form-group textarea {
background: var(--bg-card);
border: 1px solid rgba(0, 245, 255, 0.3);
padding: 10px;
font-size: 13px;
}
.sidebar .btn {
padding: 12px 20px;
font-size: 13px;
}
/* Business Badge - Updated colors */
.business-badge {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent-green);
font-weight: 700;
font-size: 12px;
}
.rb-indicator {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 0.8;
font-size: 10px;
background: var(--accent-green);
color: var(--bg-primary);
padding: 3px 4px;
border-radius: 4px;
font-family: 'Orbitron', monospace;
}
.rb-indicator span:first-child {
border-bottom: 1px solid var(--bg-primary);
padding-bottom: 1px;
}
/* Admin form overrides */
#addCategoryForm .form-group input {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.3);
color: var(--text-primary);
padding: 10px;
border-radius: 8px;
}
/* Admin Panel Styles */
.admin-panel {
padding: 30px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
/* ============================================ */
/* ADMIN PANEL TABS STYLING */
/* ============================================ */
/* Tab navigation container */
.admin-tabs {
display: flex;
background: var(--bg-secondary);
border-radius: 15px;
padding: 5px;
margin-bottom: 30px;
border: 1px solid rgba(0, 245, 255, 0.3);
overflow-x: auto;
gap: 5px;
}
/* Individual tab button */
.admin-tab {
flex: 1;
min-width: 120px;
padding: 15px 20px;
background: transparent;
border: none;
border-radius: 10px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
text-align: center;
white-space: nowrap;
}
.admin-tab:hover {
background: rgba(0, 245, 255, 0.1);
color: var(--accent-cyan);
transform: translateY(-2px);
}
.admin-tab.active {
background: var(--gradient-primary);
color: var(--bg-primary);
box-shadow: 0 5px 20px rgba(0, 245, 255, 0.4);
}
.admin-tab i {
font-size: 16px;
}
/* Tab notification badges */
.tab-badge {
position: absolute;
top: 5px;
right: 5px;
background: var(--accent-pink);
color: var(--bg-primary);
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
/* Tab content containers */
.admin-tab-content {
display: none;
animation: fadeIn 0.3s ease;
}
.admin-tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile responsive tabs */
@media (max-width: 1024px) {
.admin-tabs {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.admin-tabs::-webkit-scrollbar {
display: none;
}
.admin-tab {
min-width: 100px;
padding: 12px 15px;
font-size: 13px;
flex-shrink: 0;
}
.admin-tab i {
font-size: 14px;
}
/* Hide text on very small screens, show only icons */
@media (max-width: 480px) {
.admin-tab {
min-width: 60px;
padding: 12px 10px;
}
.admin-tab span:not(.tab-badge) {
display: none;
}
}
}
/* Enhanced tab content spacing */
.admin-tab-content .data-table:first-child {
margin-top: 0;
}
.admin-tab-content .data-table:last-child {
margin-bottom: 0;
}
.admin-header {
text-align: center;
margin-bottom: 40px;
}
.admin-header h1 {
font-size: 2.5em;
font-family: 'Orbitron', monospace;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.stat-card {
background: var(--bg-secondary);
padding: 30px;
border-radius: 20px;
text-align: center;
border: 1px solid rgba(0, 245, 255, 0.3);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
border-color: var(--accent-cyan);
box-shadow: 0 20px 40px rgba(0, 245, 255, 0.3);
}
.stat-card i {
font-size: 2.5em;
margin-bottom: 15px;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-card h3 {
font-size: 2em;
color: var(--accent-cyan);
margin-bottom: 5px;
font-family: 'Orbitron', monospace;
}
.data-table {
background: var(--bg-secondary);
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
border: 1px solid rgba(0, 245, 255, 0.3);
}
.data-table h3 {
background: var(--gradient-primary);
color: var(--bg-primary);
padding: 20px;
margin: 0;
font-size: 1.3em;
font-family: 'Orbitron', monospace;
}
.table-container {
overflow-x: auto;
max-height: 400px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}
th {
background: var(--bg-card);
font-weight: 600;
color: var(--accent-cyan);
font-family: 'Orbitron', monospace;
}
tbody tr:hover {
background: rgba(0, 245, 255, 0.05);
}
.btn-sm {
padding: 8px 16px;
font-size: 12px;
margin: 0 4px;
}
.btn-success {
background: var(--gradient-secondary);
}
.btn-danger {
background: linear-gradient(135deg, var(--accent-pink), #ff1744);
}
.btn-danger:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(255, 0, 255, 0.4);
}
/* Color picker styling */
input[type="color"] {
-webkit-appearance: none;
border: none;
border-radius: 50%;
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: 2px solid var(--bg-primary);
border-radius: 50%;
}
/* Business Registration Modal */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
overflow-y: auto;
}
.modal-content {
background: var(--bg-card);
margin: 50px auto;
padding: 40px;
border: 1px solid var(--accent-cyan);
border-radius: 25px;
width: 90%;
max-width: 600px;
box-shadow: 0 25px 50px rgba(0, 245, 255, 0.3);
position: relative;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.modal-header h2 {
font-family: 'Orbitron', monospace;
color: var(--accent-cyan);
font-size: 1.8em;
}
.close-modal {
color: var(--text-secondary);
font-size: 28px;
cursor: pointer;
transition: color 0.3s ease;
}
.close-modal:hover {
color: var(--accent-pink);
}
.business-portal {
display: none;
padding: 30px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.business-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.business-stat-card {
background: var(--bg-secondary);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(0, 245, 255, 0.3);
text-align: center;
}
.business-stat-card h4 {
color: var(--accent-cyan);
font-size: 1.8em;
margin-bottom: 5px;
font-family: 'Orbitron', monospace;
}
.business-stat-card p {
color: var(--text-secondary);
font-size: 0.9em;
}
/* Ticketing Badge Styles */
.ticketing-badge-free {
background: rgba(0, 255, 65, 0.2);
color: var(--accent-green);
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(0, 255, 65, 0.3);
}
.ticketing-badge-paid {
background: rgba(255, 102, 0, 0.2);
color: var(--accent-orange);
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255, 102, 0, 0.3);
}
.entry-type-selector {
display: flex;
gap: 15px;
margin-top: 10px;
}
.entry-type-option {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 16px;
border-radius: 20px;
border: 2px solid rgba(0, 245, 255, 0.2);
transition: all 0.3s ease;
background: var(--bg-secondary);
}
.entry-type-option:hover {
border-color: rgba(0, 245, 255, 0.4);
background: rgba(0, 245, 255, 0.05);
}
.entry-type-option input[type="radio"] {
margin-right: 8px;
cursor: pointer;
}
.entry-type-option.selected {
border-color: var(--accent-cyan);
background: rgba(0, 245, 255, 0.1);
}
/* Guest Prompt Overlay */
.guest-prompt {
background: var(--bg-card);
border: 2px solid var(--accent-cyan);
border-radius: 15px;
padding: 20px;
text-align: center;
margin: 15px 0;
animation: pulse 2s infinite;
}
/* Entry type filter */
.entry-type-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s ease;
padding: 5px;
border-radius: 8px;
}
.entry-type-checkbox:hover {
background: rgba(0, 245, 255, 0.1);
}
.entry-type-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent-cyan);
cursor: pointer;
}
.entry-type-checkbox label {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-primary);
}
/* Support Email Footer - Now inline in sidebar */
.support-footer {
background: var(--bg-secondary);
padding: 10px 15px;
border-radius: 25px;
border: 1px solid rgba(0, 245, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
transition: all 0.3s ease;
margin: 20px auto 10px auto;
max-width: 300px;
/* Removed: position: fixed, bottom, left, z-index, box-shadow */
}
.support-footer:hover {
border-color: var(--accent-cyan);
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(0, 245, 255, 0.4);
}
.support-footer a {
color: var(--accent-cyan);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.support-footer i {
font-size: 14px;
}
/* Hide on mobile for better UX */
@media (max-width: 1024px) {
.support-footer {
bottom: 10px;
left: 10px;
font-size: 12px;
padding: 8px 12px;
}
/* Mobile location search adjustments */
.location-search-container {
top: 10px;
left: 10px;
right: 10px;
}
.location-search-box {
padding: 10px;
flex-direction: column;
gap: 8px;
}
.location-search-box input {
width: 100%;
font-size: 14px;
}
.location-search-box button {
width: 100%;
padding: 8px 20px;
}
.location-search-hint {
display: none;
}
.location-search-results {
max-height: 200px;
}
}
/* Fix map marker clickability */
.event-marker {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 500 !important;
}
.event-marker div {
cursor: pointer !important;
pointer-events: auto !important;
}
/* Prevent marker scaling on zoom */
.leaflet-zoom-animated .event-marker {
transform-origin: center !important;
}
.mapboxgl-marker.event-marker {
/* Let Mapbox keep markers on their own GPU layer so they stay locked to the
map during rotation/pan/zoom. Forcing will-change:auto de-optimized the layer
and made pins lag/drift on mobile; the transform-origin override was vestigial
(Leaflet era) and could disturb Mapbox's own transform. */
will-change: auto;
}
/* Fix popup width on mobile */
@media (max-width: 1024px) {
.mapboxgl-popup-content {
max-width: 280px !important;
max-height: 80vh !important;
overflow-y: auto !important;
}
.mapboxgl-popup-content {
margin: 15px !important;
line-height: 1.3 !important;
}
}
.mapboxgl-marker {
cursor: pointer !important;
pointer-events: auto !important;
}
.mapboxgl-popup {
z-index: 1001 !important;
}
/* Make sure the map container doesn't block clicks */
#map {
cursor: default;
}
#map .mapboxgl-canvas-container {
z-index: 600 !important;
}
#map .mapboxgl-canvas-container {
z-index: 700 !important;
}
/* ============================================ */
/* MOBILE RESPONSIVE STYLES - OPTION A IMPLEMENTATION */
/* ============================================ */
/* Mobile styles */
@media (max-width: 1024px) {
/* Hide desktop navigation */
.navbar {
padding: 10px 0;
position: relative;
}
.nav-container {
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
padding: 0 10px;
align-items: center;
}
/* Logo centered on mobile */
.logo {
order: 1;
flex: 1;
justify-content: center;
}
/* Hide city selector on mobile - using mobile version instead */
.city-switcher {
display: none !important;
}
/* Dashboard button stays on third row */
.nav-links {
order: 4;
width: 100%;
margin-top: 0;
justify-content: center;
}
/* Hide logout on mobile (logout is in profile tab) */
.user-info {
display: none !important;
}
/* Hide welcome text on mobile */
#userDisplay {
display: none;
}
/* Logout text hidden (button hidden on mobile) */
.logout-text {
display: none;
}
/* Full screen map */
.dashboard {
grid-template-columns: 1fr;
height: calc(100vh - 120px);
position: relative;
gap: 0;
}
.sidebar.expanded .sidebar-section {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 60px 15px 100px 15px; /* Added top padding */
margin-top: 0; /* Reset any negative margins */
}
/* Fix header positioning */
.sidebar.expanded .sidebar-header {
padding: 15px 0 10px 0; /* Increased from 5px to 15px */
height: auto; /* Let it size naturally */
margin-bottom: 0;
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 10;
border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}
/* Ensure all filter sections are visible */
.filter-section {
margin-bottom: 15px;
}
/* Make sure search and filters are accessible */
.mobile-search-trigger {
margin: 15px 0;
}
/* Ensure date filter is fully visible */
.date-filter {
margin: 15px 0;
padding: 10px 0;
}
/* Fix custom date range visibility */
.custom-date-range {
margin-top: 15px;
padding: 15px;
background: var(--bg-secondary);
border-radius: 10px;
border: 1px solid rgba(0, 245, 255, 0.2);
}
/* Ensure proper spacing for all content */
.sidebar.expanded .events-list {
padding-top: 10px;
}
.events-list {
padding-bottom: 140px !important; /* clear fixed bottom nav (62px) + safe area in any sheet state */
}
/* Enhanced button transitions for split buttons */
.btn.btn-sm {
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn.btn-sm:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* Share button specific styling */
.btn.btn-sm[style*="rgba(255, 100, 0"]:hover {
background: rgba(255, 100, 0, 0.3) !important;
border-color: #ff6400 !important;
}
/* Mobile responsiveness for split buttons */
@media (max-width: 1024px) {
.btn.btn-sm {
min-height: 36px;
font-size: 16px !important;
}
/* Ensure mobile buttons are touch-friendly */
.btn.btn-sm[style*="flex: 1"] {
min-width: 44px; /* iOS touch target minimum */
}
}
/* Popup responsiveness handled by .custom-event-popup .mapboxgl-popup-content block above */
/* ========================================== */
/* OPTION A: COMPLETELY HIDDEN SIDEBAR */
/* ========================================== */
/* Hide sidebar completely by default - NO MORE PERSISTENT BOTTOM SHEET */
.sidebar {
transform: translateY(100%) !important; /* COMPLETELY HIDDEN */
height: 100vh;
position: fixed;
bottom: 0;
top: auto !important;
left: 0;
right: 0;
z-index: 999;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
background: var(--bg-card);
border-radius: 20px 20px 0 0;
border: 1px solid rgba(0, 245, 255, 0.3);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-top: 0px;
}
/* Expanded state - full height modal-style */
.sidebar.expanded {
transform: translateY(0) !important;
padding-top: 0;
display: flex;
flex-direction: column;
}
/* Add peek indicator when events are available */
.sidebar.has-events:not(.expanded)::before {
content: attr(data-event-count);
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-primary);
color: var(--bg-primary);
padding: 8px 16px;
border-radius: 20px 20px 0 0;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
z-index: 1000;
opacity: 0;
animation: peekUp 0.5s ease forwards;
box-shadow: 0 -5px 15px rgba(0, 245, 255, 0.3);
}
@keyframes peekUp {
to { opacity: 1; }
}
/* Backdrop when sidebar is open */
.sidebar.expanded::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
opacity: 1;
}
#adminAddEventSection > h3,
#adminAddEventSection > button:not(.mobile-search-trigger),
#adminAddEventSection > #aiImportModal,
#adminAddEventSection > #eventForm {
display: none !important;
}
#adminAddEventSection {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.sidebar-section:not(#adminAddEventSection) {
margin-bottom: 0 !important;
}
/* Sidebar header styles */
.sidebar-header {
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 10;
padding: 10px 0 6px 0;
margin-bottom: -10px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Move the handle to the header */
.sidebar-header::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background: var(--accent-cyan);
border-radius: 2px;
opacity: 0.8;
}
/* Move event count to the header */
.sidebar-header::after {
content: attr(data-event-count);
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
color: var(--accent-cyan);
font-weight: 700;
font-size: 14px;
text-align: center;
width: 100%;
}
/* Reduce header padding when expanded - keeps swipe handle visible */
.sidebar.expanded .sidebar-header {
padding: 5px 0 0 0;
height: 20px;
margin-bottom: 0;
}
/* Hide only the event count text when expanded */
.sidebar.expanded .sidebar-header::after {
display: none;
}
/* Optional: Make the swipe handle more subtle when expanded */
.sidebar.expanded .sidebar-header::before {
opacity: 0.5;
}
/* Ensure sidebar content is scrollable */
.sidebar.expanded .sidebar-section {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 100px 0;
}
.sidebar.expanded .events-list {
padding-bottom: 100px; /* Space for footer elements */
}
/* Ensure footer elements stay at bottom */
.sidebar.expanded .sidebar-section:last-of-type {
margin-top: auto;
}
/* Keep add events CTA at bottom */
.sidebar.expanded > div:last-child {
position: sticky;
bottom: 0;
background: var(--bg-card);
padding-top: 10px;
border-top: 1px solid rgba(0, 245, 255, 0.1);
}
/* Events tab header drag handle spacing */
.sidebar.expanded .sidebar-section:last-child > div:first-child {
padding-top: 28px;
}
/* Map takes full space */
.main-view-container {
height: calc(100dvh - 70px);
position: relative;
border-radius: 0;
margin-top: 20px;
}
#map {
border-radius: 0;
}
/* Hide certain desktop elements */
.location-search-container {
display: none !important;
}
/* Mobile-friendly event items with click indication */
.event-item {
margin: 8px 0;
padding: 0;
min-height: unset;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.event-item:active {
transform: scale(0.98);
opacity: 0.9;
}
.event-item::after {
display: none;
}
.event-item button {
min-height: 44px;
min-width: 44px;
}
.btn {
min-height: 48px;
font-size: 16px;
}
/* Business/Admin mobile notice */
.business-portal,
.admin-panel {
padding: 20px;
}
.business-portal::before,
.admin-panel::before {
content: '💻 Best viewed on desktop';
display: block;
background: var(--gradient-primary);
color: var(--bg-primary);
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
font-weight: 600;
}
/* Hide complex tables on mobile */
.data-table {
overflow-x: auto;
}
/* Auth screens mobile */
.auth-container {
margin: 20px;
padding: 30px 20px;
}
.modal-content {
margin: 20px;
padding: 20px;
width: calc(100% - 40px);
}
/* Prevent body scroll when sidebar is expanded */
body.sidebar-open {
overflow: hidden;
position: fixed;
width: 100%;
}
@media (min-width: 768px) and (min-height: 1000px) and (max-width: 1024px) {
.dashboard {
display: grid !important;
grid-template-columns: 340px 1fr !important;
gap: 25px !important;
}
.sidebar {
position: static !important;
transform: none !important;
height: auto !important;
}
.mobile-city-button,
.sidebar-header { /* ← ADD THIS LINE */
display: none !important;
}
.city-switcher,
.search-bar,
#userDisplay {
display: block !important;
}
.city-switcher {
display: flex !important;
}
}
/* City selector in the middle - FIXED CENTERING VERSION */
/* REPLACE THIS ENTIRE BLOCK (lines 2129–2176) WITH: */
.mobile-city-button {
order: 3;
width: calc(100% - 20px) !important;
max-width: 340px !important;
margin: 10px auto 0 auto !important;
padding: 10px 18px !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
background: rgba(0, 245, 255, 0.05);
border: 1.5px solid rgba(0, 245, 255, 0.4);
border-radius: 30px;
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: 15px;
box-shadow: none;
cursor: pointer;
transition: all 0.2s ease;
align-items: center;
justify-content: space-between;
text-align: left;
gap: 8px;
align-self: center;
position: relative !important;
box-sizing: border-box !important;
z-index: 100 !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
}
.mobile-city-button:active {
transform: scale(0.97);
background: rgba(0, 245, 255, 0.1);
}
.mobile-city-button .city-name {
color: var(--text-primary);
flex: 1;
}
/* City Selector Modal */
.city-selector-modal {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-card);
border-radius: 20px 20px 0 0;
padding: 20px;
z-index: 2000;
transform: translateY(100%);
transition: transform 0.3s ease;
box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
max-height: 70vh;
overflow-y: auto;
}
.city-selector-modal.show {
display: block;
transform: translateY(0);
}
.city-sheet-handle {
width: 38px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.16);
margin: 0 auto 14px;
}
.city-selector-header {
text-align: left;
margin-bottom: 16px;
position: relative;
}
.city-selector-header h3 {
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.3px;
margin: 0;
}
.close-city-selector {
position: absolute;
right: 0;
top: -5px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 24px;
cursor: pointer;
padding: 5px;
}
.current-location-btn {
width: 100%;
background: transparent;
border: 1px solid rgba(232,255,71,0.35);
border-radius: 13px;
padding: 13px;
color: var(--accent-cyan);
font-weight: 600;
font-family: 'DM Sans', sans-serif;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.current-location-btn:active {
transform: scale(0.95);
}
.city-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.city-option {
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 13px;
padding: 13px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.city-option:active {
transform: scale(0.98);
}
.city-option.active {
border-color: rgba(232,255,71,0.32);
background: rgba(232,255,71,0.08);
}
.city-option .city-info {
flex: 1;
}
.city-option .city-name {
color: #fff;
font-size: 15px;
font-weight: 500;
display: block;
font-family: 'DM Sans', sans-serif;
}
.city-option .city-timezone {
color: rgba(255,255,255,0.45);
font-size: 11px;
margin-top: 3px;
font-family: 'Space Mono', monospace;
}
.city-option .city-status {
color: var(--accent-cyan);
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* Modal backdrop */
.modal-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1999;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-backdrop.show {
display: block;
opacity: 1;
}
/* Mobile Search Overlay */
.mobile-search-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-primary);
z-index: 2100;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-search-overlay.show {
display: block;
opacity: 1;
}
.mobile-search-container {
height: 100%;
display: flex;
flex-direction: column;
}
.mobile-search-header {
background: var(--bg-secondary);
padding: 20px;
border-bottom: 2px solid var(--accent-cyan);
display: flex;
align-items: center;
gap: 15px;
}
.mobile-search-back {
background: none;
border: none;
color: var(--accent-cyan);
font-size: 24px;
padding: 10px;
cursor: pointer;
}
.mobile-search-input-wrapper {
flex: 1;
position: relative;
}
.mobile-search-input {
width: 100%;
padding: 15px 45px 15px 20px;
background: var(--bg-card);
border: 2px solid var(--accent-cyan);
border-radius: 25px;
color: var(--text-primary);
font-size: 16px;
font-family: 'Rajdhani', sans-serif;
}
.mobile-search-input:focus {
outline: none;
box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
}
.mobile-search-clear {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-secondary);
font-size: 20px;
padding: 5px;
cursor: pointer;
display: none;
}
.mobile-search-clear.show {
display: block;
}
.mobile-search-content {
flex: 1;
overflow-y: auto;
padding: 20px;
-webkit-overflow-scrolling: touch;
}
.recent-searches {
margin-bottom: 30px;
}
.recent-searches h3 {
color: var(--accent-cyan);
font-size: 14px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.clear-recent {
background: none;
border: none;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
text-decoration: underline;
}
.recent-search-item {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.2);
border-radius: 20px;
padding: 12px 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
}
.recent-search-item:active {
transform: scale(0.95);
background: rgba(0, 245, 255, 0.1);
}
.recent-search-text {
color: var(--text-primary);
font-size: 14px;
}
.recent-search-time {
color: var(--text-secondary);
font-size: 11px;
}
.search-suggestions {
margin-top: 20px;
}
.search-suggestions h3 {
color: var(--accent-cyan);
font-size: 14px;
margin-bottom: 15px;
}
.suggestion-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.suggestion-chip {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.3);
border-radius: 20px;
padding: 8px 16px;
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
}
.suggestion-chip:active {
background: var(--gradient-primary);
color: var(--bg-primary);
transform: scale(0.95);
}
/* Hide desktop search on mobile */
.sidebar .search-bar {
display: none;
}
/* Add mobile search trigger in sidebar */
.mobile-search-trigger {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 12px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.mobile-search-trigger:active {
border-color: var(--accent-cyan);
background: rgba(0, 245, 255, 0.1);
}
/* Mobile Search Result Cards */
.search-result-card {
background: rgba(255,255,255,0.025);
border: .5px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 10px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.search-result-card:active {
transform: scale(0.985);
background: rgba(232,255,71,0.06);
border-color: rgba(232,255,71,0.25);
}
.search-result-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.search-result-emoji {
font-size: 20px;
}
.search-result-name {
color: var(--accent-cyan);
font-weight: 600;
font-size: 14px;
flex: 1;
}
.search-result-details {
display: flex;
gap: 15px;
font-size: 12px;
color: var(--text-secondary);
}
.search-result-details i {
margin-right: 4px;
opacity: 0.7;
}
}
/* End of mobile media query */
/* End of mobile media query */
/* Organized Emoji Picker Styling */
.emoji-tab, .custom-emoji-tab {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.3);
color: var(--text-secondary);
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 12px;
font-weight: 600;
}
.emoji-tab:hover, .custom-emoji-tab:hover {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
}
.emoji-tab.active, .custom-emoji-tab.active {
background: var(--gradient-primary);
color: var(--bg-primary);
border-color: var(--accent-cyan);
}
.main-emoji-option, .custom-emoji-option {
font-size: 28px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s ease;
text-align: center;
border: 2px solid transparent;
}
.main-emoji-option:hover, .custom-emoji-option:hover {
background: var(--accent-cyan);
transform: scale(1.1);
}
.custom-emoji-option.selected {
background: var(--gradient-secondary);
border-color: var(--accent-green);
transform: scale(1.1);
}
.custom-emoji-tag {
display: inline-block;
background: var(--gradient-primary);
color: var(--bg-primary);
padding: 6px 12px;
border-radius: 15px;
margin: 4px;
font-size: 16px;
font-weight: 600;
}
.custom-emoji-tag button {
cursor: pointer;
transition: color 0.2s ease;
}
.custom-emoji-tag button:hover {
color: var(--accent-pink) !important;
transform: scale(1.2);
}
/* Smart Emoji Picker Styling */
.smart-emoji-option {
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s ease;
display: inline-block;
}
.smart-emoji-option:hover {
background: var(--accent-cyan);
transform: scale(1.2);
}
/* Mini tablets */
@media (max-width: 1024px) and (min-width: 769px) {
.dashboard {
grid-template-columns: 340px 1fr;
}
.sidebar {
padding: 20px;
}
}
/* ============================================
PINNR BOTTOM NAV
============================================ */
#pinnrBottomNav {
display: none;
}
@media (max-width: 1024px) {
#pinnrBottomNav {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
height: 62px;
background: #080809;
border-top: 1px solid rgba(232,255,71,0.15);
z-index: 1100;
align-items: center;
justify-content: space-around;
padding: 0 4px;
padding-bottom: env(safe-area-inset-bottom);
}
.pbn-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1;
height: 100%;
background: none;
border: none;
color: rgba(255,255,255,0.25);
font-family: 'Barlow Condensed', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s ease;
padding: 0;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.pbn-tab.active {
color: #E8FF47;
}
.pbn-tab.active::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 20px; height: 2px;
background: #E8FF47;
border-radius: 0;
}
.pbn-tab:active { opacity: 0.7; }
.pbn-center {
flex: 0 0 42px;
height: 42px;
background: #E8FF47;
border-radius: 11px;
color: #080809 !important;
box-shadow: none;
margin-bottom: 0;
}
.pbn-center:active {
transform: scale(0.92);
opacity: 1 !important;
}
/* ── Notification bell badge ── */
.pbn-notif-badge {
position: absolute;
top: 2px;
right: 10px;
min-width: 16px;
height: 16px;
background: var(--accent-pink, #ff2d55);
border-radius: 8px;
font-size: 9px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
pointer-events: none;
line-height: 1;
}
/* ── Notification inbox panel ── */
#pinnrNotifPanel {
position: fixed;
bottom: 64px;
left: 0;
right: 0;
height: 0;
overflow: hidden;
background: var(--bg-card);
border-top: 1px solid rgba(0, 245, 255, 0.2);
border-radius: 20px 20px 0 0;
z-index: 1050;
transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#pinnrNotifPanel.open { height: 75vh; }
#pinnrNotifContent {
padding: 20px 20px 32px;
overflow-y: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.notif-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread .notif-dot {
background: var(--accent-cyan);
}
.notif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
border: 1.5px solid rgba(255,255,255,0.2);
flex-shrink: 0;
margin-top: 4px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
margin-bottom: 2px;
}
.notif-msg {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-time {
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
font-family: 'Rajdhani', sans-serif;
}
.notif-empty {
text-align: center;
color: var(--text-muted);
font-size: 12px;
padding: 48px 0;
font-family: 'Rajdhani', sans-serif;
}
.pinnr-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(2px);
}
.pinnr-modal-sheet {
position: relative;
width: 100%;
background: var(--bg-card);
border-radius: 20px 20px 0 0;
border-top: 1px solid rgba(0,245,255,0.2);
padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
transform: translateY(100%);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.32,0.72,0,1), opacity 0.2s ease;
}
.pinnr-modal-handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
margin: 0 auto 18px;
}
/* Push map and sidebar up so content isn't hidden behind nav */
#map {
bottom: 62px !important;
top: 88px !important;
height: calc(100dvh - 150px) !important;
}
.sidebar {
bottom: 64px !important;
height: calc(100dvh - 64px) !important;
}
/* Profile panel */
#pinnrProfilePanel {
position: fixed;
bottom: 58px;
left: 0;
right: 0;
height: 0;
overflow: hidden;
background: var(--bg-card);
border-top: 1px solid rgba(0, 245, 255, 0.2);
border-radius: 20px 20px 0 0;
z-index: 1050;
transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#pinnrProfilePanel.open {
height: 88vh;
}
#pinnrProfileContent {
padding: 20px 20px 32px;
overflow-y: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
}
/* ── Profile panel internals ── */
.pp-drag-handle {
width: 36px; height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
margin: 0 auto 16px;
}
/* ── View mode ── */
.pp-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 20px;
position: relative;
}
.pp-edit-icon-btn {
position: absolute;
top: 0; right: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.pp-edit-icon-btn:hover { background: rgba(191,0,255,0.15); border-color: rgba(191,0,255,0.4); }
.pp-avatar-ring {
position: relative;
width: 88px; height: 88px;
cursor: default;
}
.pp-avatar-ring svg { display: block; }
.pp-avatar-edit-btn {
position: absolute;
bottom: 0; right: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent-purple);
border: 2px solid var(--bg-primary);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.pp-avatar-edit-btn svg { display: block; }
.pp-display-name {
font-family: 'Orbitron', monospace;
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
text-align: center;
}
.pp-handle {
font-family: 'Rajdhani', sans-serif;
font-size: 13px;
color: var(--accent-cyan);
letter-spacing: 0.5px;
text-align: center;
}
.pp-badge {
display: inline-block;
padding: 2px 10px;
background: rgba(138,43,226,0.15);
border: 1px solid rgba(138,43,226,0.4);
border-radius: 20px;
font-size: 10px;
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
color: var(--accent-purple);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pp-stats-row {
display: flex;
gap: 24px;
margin: 4px 0 0;
}
.pp-stat {
display: flex; flex-direction: column; align-items: center; gap: 1px;
cursor: pointer;
}
.pp-stat-num {
font-family: 'Orbitron', monospace;
font-size: 15px; font-weight: 700;
color: var(--text-primary);
}
.pp-stat-lbl {
font-family: 'Rajdhani', sans-serif;
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.5px; text-transform: uppercase;
}
.pp-bio-view {
font-size: 13px;
color: rgba(255,255,255,0.55);
line-height: 1.6;
text-align: center;
margin: 2px 0 18px;
font-family: 'Rajdhani', sans-serif;
min-height: 0;
}
.pp-bio-empty {
font-size: 12px;
color: rgba(255,255,255,0.2);
text-align: center;
margin: 2px 0 18px;
font-family: 'Rajdhani', sans-serif;
font-style: italic;
cursor: pointer;
}
/* ── Action rows (notif, search) ── */
.pp-action-row {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.pp-action-row:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.pp-action-row-left { display: flex; align-items: center; gap: 10px; }
.pp-action-row-label {
font-family: 'Rajdhani', sans-serif;
font-size: 13px; font-weight: 700;
color: var(--text-primary); letter-spacing: 0.3px;
}
/* ── Divider ── */
.pp-divider {
height: 0.5px;
background: rgba(255,255,255,0.07);
margin: 18px 0;
}
/* ── Bottom action buttons ── */
.pp-logout-btn {
width: 100%; padding: 12px; margin-top: 10px;
background: rgba(255,60,100,0.08);
border: 1px solid rgba(255,60,100,0.25);
border-radius: 12px; color: #ff3c64;
font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: background .2s;
}
.pp-logout-btn:hover { background: rgba(255,60,100,0.18); }
.pp-pw-btn {
width: 100%; padding: 12px; margin-top: 10px;
background: rgba(0,245,255,0.05);
border: 1px solid rgba(0,245,255,0.2);
border-radius: 12px; color: var(--accent-cyan);
font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: background .2s;
}
.pp-pw-btn:hover { background: rgba(0,245,255,0.12); }
/* ── Edit modal ── */
/* ── Avatar picker overlay ── */
#ppAvatarPicker {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
align-items: flex-end;
justify-content: center;
background: rgba(0,0,0,0.7);
}
#ppAvatarPicker.open { display: flex; }
.pp-picker-sheet {
background: var(--bg-secondary);
border: 1px solid rgba(0,245,255,0.15);
border-radius: 20px 20px 0 0;
padding: 20px 20px 36px;
width: 100%;
max-width: 520px;
}
.pp-picker-title {
font-family: 'Orbitron', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: rgba(0,245,255,0.5);
text-transform: uppercase;
text-align: center;
margin-bottom: 16px;
}
.pp-archetype-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.pp-archetype-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 10px 6px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.06);
transition: border-color .2s, background .2s;
}
.pp-archetype-item:hover,
.pp-archetype-item.selected {
border-color: rgba(138,43,226,0.6);
background: rgba(138,43,226,0.1);
}
.pp-archetype-label {
font-family: 'Rajdhani', monospace;
font-size: 11px;
color: var(--text-secondary);
letter-spacing: .05em;
}
.pp-color-row {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.pp-color-swatch {
width: 26px; height: 26px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: border-color .15s, transform .15s;
}
.pp-color-swatch.selected { border-color: white; transform: scale(1.15); }
.pp-picker-apply {
width: 100%;
padding: 12px;
background: rgba(138,43,226,0.2);
border: 1px solid rgba(138,43,226,0.5);
border-radius: 10px;
color: var(--accent-purple);
font-family: 'Orbitron', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
cursor: pointer;
}
.pp-picker-cancel {
width: 100%;
padding: 10px;
margin-top: 8px;
background: transparent;
border: none;
color: var(--text-muted);
font-family: 'Rajdhani', sans-serif;
font-size: 13px;
cursor: pointer;
}
}
.pp-edit-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(4px);
z-index: 1000002;
display: flex; align-items: flex-end; justify-content: center;
}
.pp-edit-sheet {
width: 100%; max-width: 480px;
background: #0d0d0d;
border-radius: 20px 20px 0 0;
border-top: .5px solid rgba(232,255,71,0.15);
padding: 24px 20px 40px;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 -8px 60px rgba(0,0,0,0.4);
}
.pp-edit-drag { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 0 auto 20px; }
.pp-edit-title {
font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
letter-spacing: .15em; color: rgba(255,255,255,0.25); text-align: center;
margin-bottom: 20px; text-transform: uppercase;
}
.pp-section-label {
font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(0,245,255,0.5); margin-bottom: 8px; margin-top: 18px;
}
.pp-field { position: relative; margin-bottom: 10px; }
.pp-prefix {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
font-family: 'Rajdhani', monospace; font-size: 15px;
color: var(--accent-cyan); pointer-events: none; line-height: 1;
}
.pp-input {
width: 100%; padding: 11px 12px 11px 26px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(0,245,255,0.2);
border-radius: 10px; color: var(--text-primary);
font-family: 'Rajdhani', monospace; font-size: 15px;
letter-spacing: 0.3px; outline: none;
transition: border-color .2s; box-sizing: border-box;
}
.pp-input:focus { border-color: rgba(0,245,255,0.6); }
.pp-input.no-prefix { padding-left: 12px; }
.pp-input.bio-area {
resize: none; height: 76px;
font-family: 'Rajdhani', sans-serif; font-size: 14px;
line-height: 1.5; padding: 10px 12px;
}
.pp-char-count {
position: absolute; bottom: 8px; right: 10px;
font-size: 11px; color: var(--text-muted);
font-family: 'Rajdhani', sans-serif;
pointer-events: none; transition: color .2s;
}
.pp-char-count.near { color: var(--accent-purple); }
.pp-username-status {
font-size: 11px; font-family: 'Rajdhani', sans-serif;
margin-top: 4px; min-height: 16px; padding-left: 4px; transition: color .2s;
}
.pp-save-btn {
width: 100%; padding: 13px; margin-top: 20px;
background: rgba(138,43,226,0.15);
border: 1px solid rgba(138,43,226,0.5);
border-radius: 12px; color: var(--accent-purple);
font-family: 'Orbitron', monospace; font-size: 12px;
font-weight: 700; letter-spacing: .08em; cursor: pointer;
transition: background .2s, border-color .2s;
}
.pp-save-btn:hover { background: rgba(138,43,226,0.3); border-color: rgba(138,43,226,0.8); }
.pp-save-btn:active { transform: scale(0.98); }
.pp-save-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 1024px) {
.sidebar.expanded .sidebar-section,
.sidebar.expanded .events-list,
.sidebar .sidebar-section {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
}
/* Scroll container itself: no bottom padding (the list - below provides it,
so we don't stack two big paddings into dead scroll space). */
.sidebar.expanded .sidebar-section,
.sidebar .sidebar-section {
padding-bottom: 0 !important;
}
/* The list needs enough room for the LAST event (price pill included) to
clear the fixed bottom nav (62px) + safe area when scrolled to the end. */
.sidebar.expanded .events-list,
.sidebar .events-list {
padding-bottom: 190px !important;
}
}
.sidebar.expanded .sidebar-section:first-child {
padding-top: 0 !important;
}
.sidebar.expanded .events-list,
.events-list {
padding-top: 0px !important;
margin-top: 0px !important;
}
/* Mobile Search Overlay */
.mobile-search-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-primary);
z-index: 2100;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-search-overlay.show {
display: block;
opacity: 1;
}
.mobile-search-container {
height: 100%;
display: flex;
flex-direction: column;
}
.mobile-search-header {
background: var(--bg-secondary);
padding: 20px;
border-bottom: 2px solid var(--accent-cyan);
display: flex;
align-items: center;
gap: 15px;
}
.mobile-search-back {
background: none;
border: none;
color: var(--accent-cyan);
font-size: 24px;
padding: 10px;
cursor: pointer;
}
.mobile-search-input-wrapper {
flex: 1;
position: relative;
}
.mobile-search-input {
width: 100%;
padding: 15px 45px 15px 20px;
background: var(--bg-card);
border: 2px solid var(--accent-cyan);
border-radius: 25px;
color: var(--text-primary);
font-size: 16px; /* Prevents zoom on iOS */
font-family: 'Rajdhani', sans-serif;
}
.mobile-search-input:focus {
outline: none;
box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
}
.mobile-search-clear {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-secondary);
font-size: 20px;
padding: 5px;
cursor: pointer;
display: none;
}
.mobile-search-clear.show {
display: block;
}
.mobile-search-content {
flex: 1;
overflow-y: auto;
padding: 20px;
-webkit-overflow-scrolling: touch;
}
.recent-searches {
margin-bottom: 30px;
}
.recent-searches h3 {
color: var(--accent-cyan);
font-size: 14px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.clear-recent {
background: none;
border: none;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
text-decoration: underline;
}
.recent-search-item {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.2);
border-radius: 20px;
padding: 12px 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
}
.recent-search-item:active {
transform: scale(0.95);
background: rgba(0, 245, 255, 0.1);
}
.recent-search-text {
color: var(--text-primary);
font-size: 14px;
}
.recent-search-time {
color: var(--text-secondary);
font-size: 11px;
}
.search-suggestions {
margin-top: 20px;
}
.search-suggestions h3 {
color: var(--accent-cyan);
font-size: 14px;
margin-bottom: 15px;
}
.suggestion-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.suggestion-chip {
background: var(--bg-secondary);
border: 1px solid rgba(0, 245, 255, 0.3);
border-radius: 20px;
padding: 8px 16px;
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
}
.suggestion-chip:active {
background: var(--gradient-primary);
color: var(--bg-primary);
transform: scale(0.95);
}
/* Hide desktop search on mobile */
@media (max-width: 1024px) {
.sidebar .search-bar {
display: none;
}
/* Add mobile search trigger in sidebar */
.mobile-search-trigger {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 12px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.mobile-search-trigger:active {
border-color: var(--accent-cyan);
background: rgba(0, 245, 255, 0.1);
}
}
/* Enhanced Recurring Event Styles */
.day-checkbox {
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
background: var(--bg-secondary);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 12px;
border: 1px solid transparent;
}
.day-checkbox:hover {
background: rgba(0, 245, 255, 0.1);
border-color: var(--accent-cyan);
}
.day-checkbox input[type="checkbox"] {
margin: 0;
accent-color: var(--accent-cyan);
}
.day-checkbox input[type="checkbox"]:checked + * {
color: var(--accent-cyan);
font-weight: 600;
}
.day-time-input {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: var(--bg-secondary);
border-radius: 8px;
margin-bottom: 8px;
}
.day-time-input label {
min-width: 80px;
font-weight: 600;
color: var(--accent-cyan);
}
.day-time-input input {
background: var(--bg-card);
border: 1px solid rgba(0, 245, 255, 0.3);
border-radius: 6px;
padding: 6px 8px;
color: var(--text-primary);
font-size: 12px;
}
@media (max-width: 1024px) {
#recurringOptions {
padding: 10px !important;
margin-top: 10px !important;
}
.day-checkbox {
font-size: 12px !important;
padding: 6px !important;
min-width: 0 !important;
}
.day-checkbox input[type="checkbox"] {
margin-right: 4px !important;
}
.day-time-input {
grid-template-columns: 1fr !important;
gap: 5px !important;
}
.day-time-input label {
min-width: auto !important;
font-size: 12px !important;
}
.day-time-input input {
font-size: 12px !important;
padding: 4px 6px !important;
}
/* Quick select buttons responsive */
#recurringOptions .btn-sm {
font-size: 10px !important;
padding: 6px 8px !important;
min-width: 0 !important;
}
}
@media (max-width: 1024px) {
.sidebar.expanded .mobile-search-trigger {
margin-top: 0 !important;
}
.sidebar.expanded {
padding-bottom: 0px !important;
}
}
/* Enhanced event marker styles to prevent color overflow */
.event-marker {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 500 !important;
}
/* DISABLED – legacy old-pin styling, replaced by inline lollipop styles
.event-marker div {
cursor: pointer !important;
pointer-events: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
user-select: none !important;
font-family: 'Rajdhani', sans-serif !important;
font-weight: 600 !important;
line-height: 1 !important;
text-align: center !important;
}
*/
/* Enhanced popup positioning and sizing */
.custom-event-popup {
z-index: 1002 !important;
}
/* GL popup shell — strip its white box so our card HTML renders as-is */
.custom-event-popup .mapboxgl-popup-content {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* GL popup tip (the little arrow) — hide it, our card doesn't need it */
.custom-event-popup .mapboxgl-popup-tip {
display: none !important;
}
/* The inner card div already has border-radius/shadow — no extra wrapper needed */
.custom-event-popup {
max-width: none !important;
}
/* Prevent popup from jumping during zoom */
.mapboxgl-canvas-container {
z-index: 500 !important;
}
.mapboxgl-popup {
transform-origin: center bottom !important;
}
/* Make flyer images more responsive in popups */
.custom-event-popup img {
max-width: 100% !important;
max-height: 150px !important;
object-fit: cover !important;
border-radius: 8px !important;
}
/* Hover effects for better UX */
.event-marker .pinnr-pin-circle:hover {
transform: scale(1.1);
z-index: 1001;
}
/* Ensure pending markers have consistent styling */
.event-marker div[style*="pulse"] {
animation: markerPulse 2s infinite !important;
}
@keyframes markerPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
/* Prevent marker clustering visual issues */
.mapboxgl-canvas-container {
z-index: 600 !important;
}
.mapboxgl-canvas-container {
z-index: 700 !important;
}
/* Prevent marker drift during zoom */
.leaflet-zoom-animated .mapboxgl-marker {
transition: none !important;
}
.mapboxgl-canvas-container {
transform-origin: 0 0 !important;
}
/* Ensure markers stay crisp during zoom */
.event-marker {
backface-visibility: hidden !important;
transform-style: preserve-3d !important;
}
/* Hide Mapbox logo and "Improve this map" link */
.mapboxgl-ctrl-logo { display: none !important; }
.mapboxgl-ctrl-attrib-inner a[href*="improve"] { display: none !important; }
.mapboxgl-ctrl-attrib.mapboxgl-compact { min-height: 0 !important; }
/* Ensure custom marker elements are always clickable */
.mapboxgl-marker { pointer-events: auto !important; cursor: pointer !important; }
.mapboxgl-marker > div { pointer-events: auto !important; }
/* Style GL default markers to match cyberpunk aesthetic */
.mapboxgl-marker svg { filter: drop-shadow(0 0 6px currentColor); }
/* =============================================
RESPONSIVE LAYOUT — SINGLE SOURCE OF TRUTH
Breakpoints: mobile <768, tablet 768–1024, desktop >1024
============================================= */
/* --- MOBILE (phones, portrait) --- */
@media (max-width: 767px) {
.container { padding: 0; }
.dashboard {
display: block; /* stack sidebar below map */
height: 100dvh; /* dynamic viewport height — fixes iOS bar */
}
/* REPLACE WITH */
.main-view-container {
height: calc(100dvh - 62px); /* 62 = bottom nav only, top header handled by top offset */
margin: 0;
border-radius: 0;
border: none;
}
#map { border-radius: 0; }
.navbar { border-radius: 0; }
}
/* --- TABLET (landscape tablets, small laptops) --- */
@media (min-width: 768px) and (max-width: 1024px) {
.container { padding: 10px; }
.dashboard {
grid-template-columns: 300px 1fr;
gap: 0 15px;
height: calc(100dvh - 110px);
}
.main-view-container {
margin: -10px -10px -10px 0;
border-radius: 0;
border: none;
}
#map { border-radius: 0; }
}
/* --- DESKTOP --- */
@media (min-width: 1025px) {
.main-view-container {
margin: -20px -20px -20px 0;
border-radius: 0;
border: none;
}
#map { border-radius: 0; }
}
/* ============================================================
PINNR TARGETED ADDITIONS — colours & wordmark only
Everything else is original logic untouched.
============================================================ */
/* Mobile navbar logo — hide emoji icon, show P!NNR wordmark */
@media (max-width: 1024px) {
.logo .logo-icon { display: none !important; }
.logo > div > div:last-child { display: none !important; }
.logo > div > div:first-child {
font-family: 'Barlow Condensed', sans-serif !important;
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
color: transparent !important;
position: relative !important;
display: block !important;
min-width: 100px !important;
}
.logo > div > div:first-child::after {
content: 'P!NNR';
position: absolute;
left: 0; top: 0;
background: linear-gradient(to right,
#fff 0%, #fff 19%,
#E8FF47 20%, #E8FF47 38%,
#fff 39%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
font-size: inherit; font-weight: inherit;
letter-spacing: inherit; font-family: inherit;
}
}
/* Bottom nav tab order: Explore | Events | Profile | [+]
Saved tab hidden — functionality lives inside Events tab */
@media (max-width: 1024px) {
#pbnSaved { display: none !important; }
#pbnExplore { order: 1; }
#pbnEvents { order: 2; }
#pbnProfile { order: 3; }
#pbnAdd { order: 4; }
#pinnrBottomNav { display: flex; }
}
/* ── PINNR Map Header (mobile only) ── */
@media (max-width: 1024px) {
.navbar { display: none !important; }
#pinnrMapHeader {
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1090;
pointer-events: all;
background: #080809;
border-bottom: 1px solid rgba(232,255,71,0.15);
}
#pmhTopRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px 8px;
}
#pmhWordmark {
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px;
font-weight: 800;
letter-spacing: 0.14em;
color: #fff;
line-height: 1;
cursor: pointer;
}
#pmhWordmark .pmh-bang { color: #E8FF47; }
#pmhTopRight {
display: flex;
align-items: center;
gap: 8px;
}
.pmh-icon-btn {
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.pmh-icon-btn svg { width: 15px; height: 15px; color: rgba(255,255,255,0.55); }
#pmhNotifPip {
position: absolute;
top: 4px; right: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: #E8FF47;
display: none;
}
#pmhAvatar {
width: 30px; height: 30px;
border-radius: 50%;
border: 1.5px solid #E8FF47;
background: rgba(232,255,71,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
color: #E8FF47;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#pmhLocRow {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px 9px;
}
#pmhLocPill {
display: flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,0.05);
border: 0.5px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 5px 10px 5px 9px;
flex: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pmh-loc-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #E8FF47;
flex-shrink: 0;
}
#pmhLocText {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: rgba(255,255,255,0.7);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pmh-caret {
color: rgba(255,255,255,0.25);
font-size: 10px;
line-height: 1;
}
#pmhFilterBtn {
width: 30px; height: 30px;
background: rgba(255,255,255,0.05);
border: 0.5px solid rgba(255,255,255,0.08);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1095;
}
#pmhFilterBtn svg { width: 14px; height: 14px; color: rgba(255,255,255,0.4); }
#pmhFilterBtn.active {
background: rgba(232,255,71,0.12);
border-color: rgba(232,255,71,0.3);
}
#pmhFilterBtn.active svg { color: #E8FF47; }
/* Shift map container down to clear the new header */
.map-container, #map {
top: 88px !important;
}
}
@media (min-width: 1025px) {
#pinnrMapHeader { display: none !important; }
}
/* ── Events tab chips ── */
.ev-chip {
flex-shrink: 0;
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
border: none;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
}
.ev-chip-sel {
background: #E8FF47;
color: #080809;
}
.ev-chip-unsel {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.45);
border: .5px solid rgba(255,255,255,0.1);
}
.ev-chip-filter {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.45);
border: .5px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
gap: 5px;
}
#dateFilter::-webkit-scrollbar { display: none; }
/* Category tile grid for filter drawer */
.ev-cat-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 4px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
cursor: pointer;
transition: all .15s;
text-align: center;
min-height: 64px;
color: rgba(255,255,255,0.5);
}
.ev-cat-tile-sel {
background: rgba(232,255,71,0.1);
border-color: rgba(232,255,71,0.45);
color: #E8FF47;
}
.ev-cat-tile-unsel {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.3);
}
/* Entry type tiles (wider, pill-shaped) */
.ev-filter-tile {
padding: 11px 16px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
font-size: 13px;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: all .15s;
color: rgba(255,255,255,0.45);
}
.ev-filter-tile-sel {
background: rgba(232,255,71,0.1);
border-color: rgba(232,255,71,0.45);
color: #E8FF47;
}
.ev-filter-tile-unsel {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.3);
}
/* Hide admin-only sidebar section on mobile */
@media (max-width: 768px) {
#adminAddEventSection > h3,
#adminAddEventSection > button:not(.mobile-search-trigger),
#adminAddEventSection > #aiImportModal,
#adminAddEventSection > #eventForm {
display: none !important;
}
#adminAddEventSection {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.sidebar-section:not(#adminAddEventSection) {
margin-bottom: 0 !important;
}
}
@media (max-width: 768px) {
.sidebar {
padding: 0;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
top: 137px !important;
height: calc(100vh - 137px) !important;
display: flex;
flex-direction: column;
}
.support-footer {
margin-top: auto !important;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.05) inset !important;
-webkit-text-fill-color: #ffffff !important;
border-color: rgba(255,255,255,0.08) !important;
transition: background-color 5000s ease-in-out 0s;
}
#pinnrMapHeader.hidden { display: none !important; }
@media (max-width: 1024px) {
#adminAddEventSection {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: auto !important;
padding: 8px 12px !important;
margin: 0 !important;
border: none !important;
z-index: 10 !important;
background: var(--bg-card) !important;
}
#adminAddEventSection * {
display: none !important;
}
#adminAddEventSection .mobile-search-trigger {
display: flex !important;
margin: 0 !important;
}
#adminAddEventSection .mobile-search-trigger * {
display: inline !important;
}
.sidebar:has(#adminAddEventSection) .sidebar-section:not(#adminAddEventSection) {
margin-top: 60px !important;
}
}
/* ============================================================
DESKTOP OVERRIDES — min-width: 1025px ONLY
All mobile/tablet CSS above is untouched.
============================================================ */
@media (min-width: 1025px) {
/* Navbar */
.navbar {
background: #080809;
padding: 0;
height: 56px;
box-shadow: none;
border-bottom: 1px solid rgba(232,255,71,0.15);
display: flex;
align-items: center;
}
/* Push content below navbar */
.container {
padding-top: 76px;
}
/* Dashboard grid height */
.dashboard {
height: calc(100vh - 56px);
min-height: 0;
}
/* Map container fills grid column */
.main-view-container {
display: flex;
flex-direction: column;
min-height: 0;
height: calc(100vh - 56px);
}
/* Map fills the container */
#map {
flex: 1;
min-height: 0;
}
/* Sidebar on-brand */
.sidebar {
border: 1px solid rgba(232,255,71,0.1);
border-radius: 16px;
}
.sidebar h3 {
color: #E8FF47;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 1.1em;
}
/* Avatar picker must stay hidden on desktop */
#ppAvatarPicker { display: none !important; }
/* Event sheet — centered modal on desktop */
#eventSheet {
bottom: 0 !important;
align-items: center !important;
justify-content: center !important;
}
#eventSheet .es-sheet {
width: 560px;
max-width: 92vw;
max-height: 85vh;
border-radius: 20px !important;
margin-bottom: 0;
}
#eventSheet.es-open .es-sheet {
transform: translateY(0);
}
/* People search — centered on desktop, not bottom sheet */
#ppPeopleSearchModal.pp-edit-backdrop {
align-items: center;
justify-content: center;
z-index: 2100;
}
#ppPeopleSearchModal .pp-edit-sheet {
border-radius: 20px;
max-width: 480px;
width: 100%;
max-height: 70vh;
}
}
/* ============================================================
ACTIVE-DIRECTORY ADMIN SHELL (Phase 1)
Left rail + main pane. Uses existing brand vars.
============================================================ */
.ad-shell {
display: flex;
align-items: stretch;
gap: 0;
min-height: 560px;
border: 1px solid rgba(232,255,71,0.14);
border-radius: 16px;
overflow: hidden;
background: var(--bg-card);
}
.ad-rail {
flex: 0 0 232px;
width: 232px;
background: linear-gradient(180deg, #0c0d14 0%, #090a10 100%);
border-right: 1px solid rgba(232,255,71,0.12);
padding: 16px 12px 24px;
overflow-y: auto;
}
.ad-rail-brand {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px 18px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800; letter-spacing: 2px; font-size: 15px;
color: var(--text-primary);
border-bottom: 1px solid rgba(255,255,255,0.06);
margin-bottom: 14px;
}
.ad-rail-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.ad-group { margin-bottom: 16px; }
.ad-group-label {
font-family: 'Space Mono', monospace;
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: var(--text-muted); padding: 0 10px 7px;
}
.ad-nav-item {
display: flex; align-items: center; gap: 11px;
width: 100%; padding: 9px 11px; margin-bottom: 2px;
background: transparent; border: none; border-radius: 9px;
cursor: pointer; text-align: left;
font-family: 'Barlow Condensed', sans-serif;
font-size: 15px; font-weight: 600; letter-spacing: 0.4px;
color: var(--text-secondary);
transition: background 0.15s ease, color 0.15s ease;
}
.ad-nav-item i { width: 17px; text-align: center; font-size: 14px; flex-shrink: 0; }
.ad-nav-item span { flex: 1; }
.ad-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.ad-nav-item.active {
background: rgba(232,255,71,0.12); color: #E8FF47;
box-shadow: inset 2px 0 0 #E8FF47;
}
.ad-nav-item.active i { color: #E8FF47; }
.ad-nav-item.soon { opacity: 0.5; }
.ad-nav-item.soon em {
font-style: normal; font-family: 'Space Mono', monospace;
font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
color: var(--bg-primary); background: var(--text-muted);
padding: 2px 5px; border-radius: 5px;
}
.ad-nav-badge {
background: var(--accent-orange); color: var(--bg-primary);
font-size: 10px; font-weight: 800;
min-width: 17px; height: 17px; line-height: 17px;
text-align: center; border-radius: 9px; padding: 0 5px;
}
.ad-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ad-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 22px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.18);
}
.ad-crumb {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
font-size: 16px; color: var(--text-primary);
}
.ad-crumb i { color: #E8FF47; margin-right: 6px; }
.ad-search {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 8px 12px;
min-width: 260px;
position: relative;
}
.ad-search i { color: var(--text-muted); font-size: 13px; }
.ad-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 13px; }
.ad-search input::placeholder { color: var(--text-muted); }
.ad-content { padding: 22px; flex: 1; }
.ad-placeholder { text-align: center; padding: 70px 24px; color: var(--text-secondary); }
.ad-placeholder i { font-size: 2.6em; color: #E8FF47; opacity: 0.35; margin-bottom: 16px; display: block; }
.ad-placeholder h3 {
font-family: 'Barlow Condensed', sans-serif;
letter-spacing: 1px; text-transform: uppercase;
margin-bottom: 8px; color: var(--text-primary);
}
.ad-placeholder p { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.55; }
@media (max-width: 1024px) {
.ad-shell { flex-direction: column; }
.ad-rail {
flex: none; width: 100%;
display: flex; gap: 6px; overflow-x: auto;
border-right: none; border-bottom: 1px solid rgba(232,255,71,0.12);
padding: 10px;
}
.ad-rail-brand { display: none; }
.ad-group { margin-bottom: 0; display: flex; align-items: center; gap: 4px; }
.ad-group-label { display: none; }
.ad-nav-item { width: auto; white-space: nowrap; padding: 8px 12px; }
.ad-nav-item span { flex: none; }
.ad-nav-item.active { box-shadow: inset 0 -2px 0 #E8FF47; }
.ad-topbar { flex-wrap: wrap; }
.ad-search { min-width: 100%; }
}
/* ============================================================
PRO PANEL SYSTEM · shared by Business + Admin dashboards
Neutral professional surface. Yellow used sparingly as accent.
Namespaced under .bp so it never leaks into the rest of the app.
============================================================ */
/* .bp-scope: bp design tokens + font WITHOUT the panel layout, so individual
bp components (rows, pills, pagination) can be reused inside other shells
like the admin analytics tab. */
.bp-scope{
--bp-surface:#0f111a; --bp-surface-2:#13151f;
--bp-line:rgba(255,255,255,.07); --bp-line-2:rgba(255,255,255,.13);
--bp-accent:#E8FF47; --bp-pos:#44e08a; --bp-neg:#ff6b6b; --bp-warn:#ff8c42;
--bp-tx:rgba(255,255,255,.92); --bp-tx-dim:rgba(255,255,255,.55); --bp-tx-mute:rgba(255,255,255,.32);
font-family:'DM Sans',sans-serif;
}
.bp{
--bp-surface:#0f111a;
--bp-surface-2:#13151f;
--bp-line:rgba(255,255,255,.07);
--bp-line-2:rgba(255,255,255,.13);
--bp-accent:#E8FF47;
--bp-pos:#44e08a;
--bp-neg:#ff6b6b;
--bp-warn:#ff8c42;
--bp-tx:rgba(255,255,255,.92);
--bp-tx-dim:rgba(255,255,255,.55);
--bp-tx-mute:rgba(255,255,255,.32);
padding:26px 30px 60px;
max-height:calc(100vh - 100px);
overflow-y:auto;
font-family:'DM Sans',sans-serif;
color:var(--bp-tx);
}
.bp *{box-sizing:border-box;}
/* ---- header bar ---- */
.bp-head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:18px; flex-wrap:wrap;
padding-bottom:20px; margin-bottom:24px;
border-bottom:1px solid var(--bp-line);
}
.bp-head h1{
font-family:'Barlow Condensed',sans-serif;
font-weight:700; letter-spacing:.5px; font-size:30px; line-height:1;
margin:0 0 6px; color:var(--bp-tx);
background:none; -webkit-text-fill-color:initial;
}
.bp-sub{ margin:0; font-size:13px; color:var(--bp-tx-dim); }
.bp-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.bp-btn{
display:inline-flex; align-items:center; gap:8px;
padding:9px 16px; border-radius:10px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
border:1px solid var(--bp-line-2); background:transparent; color:var(--bp-tx);
transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.bp-btn i{ font-size:12px; }
.bp-btn:hover{ background:rgba(255,255,255,.05); }
.bp-btn-primary{ background:var(--bp-accent); border-color:var(--bp-accent); color:#0b0c12; }
.bp-btn-primary:hover{ filter:brightness(1.05); background:var(--bp-accent); }
/* ---- KPI strip ---- */
.bp-kpis{
display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr));
gap:10px; margin-bottom:24px;
}
.bp-kpi{
background:var(--bp-surface); border:1px solid var(--bp-line);
border-radius:11px; padding:11px 13px;
}
.bp-kpi-label{
font-size:10px; letter-spacing:.5px; text-transform:uppercase;
color:var(--bp-tx-mute); font-weight:600; margin-bottom:7px;
display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.bp-kpi-label i{ color:var(--bp-tx-dim); font-size:11px; }
.bp-kpi-val{
font-family:'Space Mono',monospace; font-size:20px; font-weight:700;
line-height:1; color:var(--bp-tx);
}
.bp-kpi-delta{
margin-top:8px; font-size:11px; font-family:'Space Mono',monospace;
color:var(--bp-tx-mute); display:flex; align-items:center; gap:5px;
}
.bp-kpi-delta.up{ color:var(--bp-pos); }
.bp-kpi-delta.down{ color:var(--bp-neg); }
/* ---- panel card ---- */
.bp-panel{
background:var(--bp-surface); border:1px solid var(--bp-line);
border-radius:14px; margin-bottom:22px; overflow:hidden;
}
.bp-panel-head{
display:flex; align-items:center; justify-content:space-between;
gap:14px; flex-wrap:wrap;
padding:16px 20px; border-bottom:1px solid var(--bp-line);
}
.bp-panel-title{
font-family:'Barlow Condensed',sans-serif; font-weight:700;
letter-spacing:.8px; text-transform:uppercase; font-size:16px;
color:var(--bp-tx); margin:0; display:flex; align-items:center; gap:9px;
background:none; -webkit-text-fill-color:initial;
}
.bp-panel-title i{ color:var(--bp-accent); font-size:14px; }
.bp-panel-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bp-panel-body{ padding:18px 20px; }
.bp-panel-body.flush{ padding:0; }
.bp-count{ font-size:11px; font-family:'Space Mono',monospace; color:var(--bp-tx-mute); }
/* ---- segmented control (time filters) ---- */
.bp-seg{ display:inline-flex; background:var(--bp-surface-2); border:1px solid var(--bp-line); border-radius:10px; padding:3px; }
.bp-seg-btn{
border:none; background:transparent; cursor:pointer;
padding:6px 14px; border-radius:7px; font-size:12px; font-weight:600;
font-family:'DM Sans',sans-serif; color:var(--bp-tx-dim); transition:all .15s ease;
}
.bp-seg-btn:hover{ color:var(--bp-tx); }
.bp-seg-btn.active{ background:var(--bp-accent); color:#0b0c12; }
/* ---- fields ---- */
.bp-field{
background:var(--bp-surface-2); border:1px solid var(--bp-line);
border-radius:9px; padding:8px 12px; font-size:12px;
color:var(--bp-tx); font-family:'DM Sans',sans-serif; outline:none;
}
.bp-field::placeholder{ color:var(--bp-tx-mute); }
.bp-field:focus{ border-color:var(--bp-line-2); }
select.bp-field{ cursor:pointer; }
/* ---- performance rows ---- */
.bp-rows{ display:flex; flex-direction:column; gap:8px; max-height:430px; overflow-y:auto; }
.bp-row{
display:flex; align-items:center; gap:14px;
background:var(--bp-surface-2); border:1px solid var(--bp-line);
border-radius:11px; padding:13px 15px;
}
.bp-row.past .bp-row-rank, .bp-row.past .bp-thumb, .bp-row.past .bp-row-name,
.bp-row.past .bp-row-meta, .bp-row.past .bp-row-total{ opacity:.62; }
.bp-row-rank{
flex:0 0 auto; width:30px; height:30px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.05); color:var(--bp-tx-dim);
font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
}
.bp-row-main{ flex:1 1 auto; min-width:0; }
.bp-row-name{
font-size:14px; font-weight:600; color:var(--bp-tx);
margin:0 0 5px; display:flex; align-items:center; gap:8px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bp-row-meta{
font-size:11px; color:var(--bp-tx-dim); font-family:'Space Mono',monospace;
display:flex; gap:14px; flex-wrap:wrap;
}
.bp-row-meta b{ color:var(--bp-tx); font-weight:700; }
.bp-row-total{ flex:0 0 auto; text-align:right; }
.bp-row-total .n{ font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--bp-tx); line-height:1; }
.bp-row-total .l{ font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--bp-tx-mute); }
/* ---- status pills ---- */
.bp-pill{
display:inline-flex; align-items:center; gap:5px;
padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700;
letter-spacing:.4px; text-transform:uppercase;
}
.bp-pill.up{ background:rgba(68,224,138,.14); color:var(--bp-pos); }
.bp-pill.past{ background:rgba(255,255,255,.06); color:var(--bp-tx-mute); }
.bp-pill.warn{ background:rgba(255,140,66,.14); color:var(--bp-warn); }
/* ---- table (scoped, flat headers) ---- */
.bp .bp-table-wrap{ overflow-x:auto; }
.bp table.bp-table{ width:100%; border-collapse:collapse; }
.bp table.bp-table th{
background:transparent; text-align:left; padding:12px 18px;
font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
letter-spacing:1px; text-transform:uppercase; color:var(--bp-tx-mute);
border-bottom:1px solid var(--bp-line);
}
.bp table.bp-table td{
padding:14px 18px; font-size:13px; color:var(--bp-tx);
border-bottom:1px solid var(--bp-line);
}
.bp table.bp-table tbody tr:last-child td{ border-bottom:none; }
.bp table.bp-table tbody tr:hover{ background:rgba(255,255,255,.025); }
.bp-td-name{ font-weight:600; }
.bp-td-name i{ color:var(--bp-pos); font-size:11px; margin-left:7px; }
/* ---- table action buttons ---- */
.bp-act{
display:inline-flex; align-items:center; gap:6px;
padding:6px 11px; margin:2px 4px 2px 0; border-radius:8px; cursor:pointer;
font-size:12px; font-weight:600; font-family:'DM Sans',sans-serif;
border:1px solid var(--bp-line-2); background:transparent; color:var(--bp-tx);
transition:background .15s ease;
}
.bp-act i{ font-size:11px; }
.bp-act:hover{ background:rgba(255,255,255,.06); }
.bp-act.primary{ border-color:var(--bp-accent); color:var(--bp-accent); }
.bp-act.danger{ border-color:rgba(255,107,107,.4); color:var(--bp-neg); }
.bp-act.danger:hover{ background:rgba(255,107,107,.1); }
/* ---- empty state + pagination ---- */
.bp-empty{ text-align:center; padding:46px 20px; color:var(--bp-tx-dim); }
.bp-empty i{ font-size:2.4em; opacity:.3; margin-bottom:14px; display:block; }
.bp-empty h4{ font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; color:var(--bp-tx); margin:0 0 8px; }
.bp-empty p{ font-size:13px; margin:0 0 16px; }
.bp-pager{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
/* ---- pagination ---- */
.bp-pg{
min-width:32px; height:32px; padding:0 10px; border-radius:9px; cursor:pointer;
background:var(--bp-surface-2); border:1px solid var(--bp-line);
color:var(--bp-tx-dim); font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.bp-pg:hover{ color:var(--bp-tx); border-color:var(--bp-line-2); }
.bp-pg.active{ background:var(--bp-accent); border-color:var(--bp-accent); color:#0b0c12; }
/* ---- flyer thumbnails ---- */
.bp-thumb{
flex:0 0 auto; width:46px; height:46px; border-radius:9px;
background-size:cover; background-position:center;
background-color:var(--bp-surface-2); border:1px solid var(--bp-line);
}
.bp-thumb-sm{ width:34px; height:34px; border-radius:7px; }
.bp-thumb-empty{ display:flex; align-items:center; justify-content:center; color:var(--bp-tx-mute); }
.bp-thumb-empty i{ font-size:14px; }
.bp-thumb-sm.bp-thumb-empty i{ font-size:12px; }
/* ---- traction bar (perf rows) ---- */
.bp-traction{ margin-top:9px; height:4px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.bp-traction span{ display:block; height:100%; border-radius:3px; background:var(--bp-accent); }
/* ---- per-event stats modal ---- */
.bp-modal-overlay{
position:fixed; inset:0; z-index:1000000;
background:rgba(4,5,9,.72); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; padding:20px;
max-height:none; overflow:auto;
}
.bp-modal{
width:100%; max-width:440px; background:var(--bp-surface);
border:1px solid var(--bp-line-2); border-radius:16px; overflow:hidden;
}
.bp-modal-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
padding:18px 20px; border-bottom:1px solid var(--bp-line);
}
.bp-modal-title{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:20px; letter-spacing:.4px; color:var(--bp-tx); }
.bp-modal-sub{ font-size:12px; color:var(--bp-tx-dim); margin-top:3px; font-family:'Space Mono',monospace; }
.bp-modal-x{ background:transparent; border:none; color:var(--bp-tx-dim); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
.bp-modal-x:hover{ color:var(--bp-tx); }
.bp-modal-body{ padding:20px; }
.bp-modal-total{ text-align:center; padding:8px 0 20px; }
.bp-modal-total .n{ font-family:'Space Mono',monospace; font-size:42px; font-weight:700; color:var(--bp-accent); line-height:1; }
.bp-modal-total .l{ font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--bp-tx-mute); margin-top:6px; }
.bp-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bp-stat{ background:var(--bp-surface-2); border:1px solid var(--bp-line); border-radius:11px; padding:13px 14px; }
.bp-stat-label{ font-size:11px; color:var(--bp-tx-dim); display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.bp-stat-label i{ color:var(--bp-tx-mute); }
.bp-stat-val{ font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:var(--bp-tx); line-height:1; }
.bp-stat-bar{ margin-top:9px; height:3px; border-radius:2px; background:rgba(255,255,255,.06); overflow:hidden; }
.bp-stat-bar span{ display:block; height:100%; background:var(--bp-accent); }
/* ---- stats modal: RSVP/saved/share intent row ---- */
.bp-stat-intent{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.bp-intent{ background:var(--bp-surface-2); border:1px solid var(--bp-line); border-radius:11px; padding:13px 14px; text-align:center; }
.bp-intent-n{ font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:var(--bp-tx); line-height:1; }
.bp-intent-l{ font-size:11px; color:var(--bp-tx-dim); margin-top:7px; display:flex; align-items:center; justify-content:center; gap:6px; }
.bp-intent-l i{ color:var(--bp-tx-mute); }
/* ---- re-publish modal fields ---- */
.bp-rp-label{ display:block; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--bp-tx-dim); font-weight:600; margin-bottom:6px; }
.bp-rp-input{ width:100%; margin-bottom:14px; color-scheme:dark; }
.bp-modal input.bp-field{ color-scheme:dark; }
/* ============================================================
Admin analytics tab — quiet the loud section chrome + bp cards
============================================================ */
#analyticsContent .data-table h3{
background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial;
color:var(--bp-tx); font-family:'Barlow Condensed',sans-serif; font-weight:700;
letter-spacing:.8px; text-transform:uppercase; font-size:16px;
}
#analyticsContent .data-table h3 i{ color:var(--bp-accent); }
/* city cards */
.bp-citycard{ background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:14px; padding:16px 18px; }
.bp-citycard-head{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:15px; color:var(--bp-tx); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.bp-citycard-head i{ color:var(--bp-accent); font-size:13px; }
.bp-citycard-total{ font-family:'Space Mono',monospace; font-size:30px; font-weight:700; line-height:1; color:var(--bp-tx); }
.bp-citycard-cap{ font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--bp-tx-mute); margin-top:5px; }
.bp-citycard-split{ display:flex; align-items:center; gap:14px; margin-top:14px; font-size:12px; font-family:'Space Mono',monospace; color:var(--bp-tx-dim); }
.bp-citycard-split i{ color:var(--bp-tx-mute); margin-right:4px; }
.bp-citycard-split .bp-pill{ margin-left:auto; }
/* category rows */
.bp-catrow{ display:flex; align-items:center; gap:14px; background:var(--bp-surface-2); border:1px solid var(--bp-line); border-radius:11px; padding:12px 15px; margin-bottom:8px; }
.bp-catrow-ico{ font-size:22px; flex:0 0 auto; width:30px; text-align:center; }
.bp-catrow-main{ flex:1 1 auto; min-width:0; }
.bp-catrow-name{ font-size:14px; font-weight:600; color:var(--bp-tx); margin-bottom:8px; }
.bp-catrow-n{ flex:0 0 auto; text-align:right; font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--bp-tx); line-height:1; }
.bp-catrow-n span{ display:block; font-family:'DM Sans',sans-serif; font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--bp-tx-mute); font-weight:600; margin-top:3px; }
/* ---- traction chart (line/area) ---- */
.bp-chart-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.bp-chart-total{ font-family:'Space Mono',monospace; font-size:26px; font-weight:700; color:var(--bp-tx); line-height:1; }
.bp-chart-cap{ font-size:11px; color:var(--bp-tx-mute); letter-spacing:.5px; text-transform:uppercase; margin-top:5px; }
.bp-chart-peak{ font-size:11px; color:var(--bp-tx-dim); font-family:'Space Mono',monospace; white-space:nowrap; }
.bp-chart-svg{ width:100%; height:140px; display:block; overflow:visible; }
/* ---- traction chart hover (crosshair + tooltip) ---- */
.bp-chart-wrap{ position:relative; }
.bp-chart-cross, .bp-chart-dot, .bp-chart-tip{ position:absolute; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.bp-chart-wrap.show-cross .bp-chart-cross,
.bp-chart-wrap.show-cross .bp-chart-dot,
.bp-chart-wrap.show-cross .bp-chart-tip{ opacity:1; }
.bp-chart-cross{ top:0; bottom:0; width:1px; background:rgba(232,255,71,.35); transform:translateX(-0.5px); }
.bp-chart-dot{ width:9px; height:9px; border-radius:50%; background:var(--bp-accent); box-shadow:0 0 0 3px rgba(232,255,71,.18); transform:translate(-50%,-50%); }
.bp-chart-tip{
top:-6px; transform:translate(-50%,-100%);
background:#15171f; border:1px solid var(--bp-line-2); border-radius:8px;
padding:7px 10px; white-space:nowrap; text-align:center; z-index:3;
font-family:'Space Mono',monospace; font-size:12px; color:var(--bp-tx);
}
.bp-chart-tip b{ color:var(--bp-accent); font-weight:700; }
.bp-chart-tip span{ display:block; margin-top:3px; font-size:10px; color:var(--bp-tx-dim); }
@media (max-width:768px){
.bp{ padding:18px 16px 50px; }
.bp-head h1{ font-size:25px; }
.bp-row{ flex-wrap:wrap; }
.bp-row-total{ width:100%; text-align:left; display:flex; align-items:baseline; gap:8px; }
}
/* ============================================================
PHASE 2: pills + detail drawer
============================================================ */
.ad-pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.3px; }
.ad-pill-green { background:rgba(68,224,138,0.16); color:#44e08a; }
.ad-pill-red { background:rgba(255,100,180,0.16); color:#ff64b4; }
.ad-drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 10040;
}
.ad-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.ad-drawer {
position: fixed; top: 0; right: 0; height: 100%;
width: 420px; max-width: 92vw;
background: var(--bg-card);
border-left: 1px solid rgba(232,255,71,0.18);
box-shadow: -20px 0 60px rgba(0,0,0,0.6);
transform: translateX(100%); transition: transform .24s ease;
z-index: 10041; display: flex; flex-direction: column;
}
.ad-drawer.open { transform: translateX(0); }
.ad-drawer-head {
display:flex; align-items:center; justify-content:space-between;
padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ad-drawer-title {
font-family:'Barlow Condensed',sans-serif; font-weight:700;
letter-spacing:1px; text-transform:uppercase; font-size:16px; color:var(--text-primary);
}
.ad-drawer-close { background:none; border:none; color:var(--text-secondary); font-size:26px; line-height:1; cursor:pointer; }
.ad-drawer-close:hover { color:var(--text-primary); }
.ad-drawer-body { padding: 20px 22px; overflow-y:auto; flex:1; }
.ad-d-id { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ad-d-avatar {
width:52px; height:52px; border-radius:14px; flex-shrink:0;
background:linear-gradient(135deg,#E8FF47,#7c6bff); color:#080809;
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:22px; font-family:'Barlow Condensed',sans-serif;
}
.ad-d-name { font-size:19px; font-weight:700; color:var(--text-primary); font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; }
.ad-d-sub { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; margin-top:3px; }
.ad-d-stats { display:flex; gap:10px; margin-bottom:4px; }
.ad-d-stats > div { flex:1; background:var(--bg-secondary); border-radius:12px; padding:12px; text-align:center; }
.ad-d-stats b { display:block; font-size:22px; color:#E8FF47; font-family:'Barlow Condensed',sans-serif; }
.ad-d-stats span { font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; }
.ad-d-section { padding:14px 0; border-top:1px solid rgba(255,255,255,0.06); margin-top:14px; }
.ad-d-label { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); margin-bottom:8px; font-family:'Space Mono',monospace; }
.ad-d-row { display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:13px; }
.ad-d-row span { color:var(--text-secondary); }
.ad-d-row b { color:var(--text-primary); font-weight:600; text-align:right; word-break:break-word; }
.ad-d-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); }
.ad-d-actions .btn { flex:1; min-width:120px; }
@media (max-width:1024px){ .ad-drawer { width: 100%; } }
/* Phase 2b: business event rows in drawer */
.ad-ev-row {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.ad-ev-row:last-child { border-bottom:none; }
.ad-ev-row .btn { flex-shrink:0; }
/* Phase 3: report rows in drawer */
.ad-rep-row {
display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.ad-rep-row:last-child { border-bottom:none; }
/* ===== Quick-win: global search dropdown ===== */
.ad-search-results {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: #0f1018;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
max-height: 380px;
overflow-y: auto;
z-index: 3000;
padding: 6px;
}
.ad-sr-group {
font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
color: var(--text-muted); padding: 8px 10px 4px;
font-family: 'Space Mono', monospace;
}
.ad-sr-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.ad-sr-item:hover { background: rgba(232,255,71,0.1); }
.ad-sr-item i { color: var(--accent-cyan); width: 16px; text-align: center; }
.ad-sr-item b { display: block; font-size: 13px; color: var(--text-primary); }
.ad-sr-item span { display: block; font-size: 11px; color: var(--text-muted); }
.ad-sr-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* ===== Overview dashboard ===== */
.ad-attn {
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px 18px;
cursor: pointer;
transition: border-color .15s, transform .15s;
}
.ad-attn:hover { transform: translateY(-2px); border-color: rgba(232,255,71,0.4); }
.ad-attn-num { font-size: 30px; font-weight: 800; color: var(--text-primary); font-family: 'Barlow Condensed', sans-serif; line-height: 1; }
.ad-attn-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.ad-attn-label i { margin-right: 5px; }
.ad-attn.has { border-color: rgba(255,90,90,0.5); background: rgba(255,90,90,0.06); }
.ad-attn.has .ad-attn-num { color: #ff6b6b; }
.ad-act-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,0.05); }
.ad-act-row i { color: var(--accent-cyan); width:16px; text-align:center; }
.ad-act-row .ad-act-main { flex:1; min-width:0; font-size:13px; }
.ad-act-row .ad-act-time { font-size:11px; color: var(--text-muted); white-space:nowrap; font-family:'Space Mono',monospace; }
@media (max-width: 900px) { .ad-dash-cols { grid-template-columns: 1fr !important; } }
/* ============================================================
SUPER ADMIN — sleek pass (scoped to #admin-section ONLY).
Maps the legacy .data-table / .stat-card / .btn onto the bp
dark system. Public + business UI keep their own classes.
============================================================ */
/* slim the legacy gradient page title — the rail already brands it */
#admin-section .admin-header { text-align:left; margin-bottom:18px; }
#admin-section .admin-header h1{
font-family:'Barlow Condensed',sans-serif; font-size:1.45em; font-weight:700;
letter-spacing:.5px; margin-bottom:4px;
background:none; -webkit-text-fill-color:initial; color:var(--bp-tx);
}
#admin-section .admin-header h1 i{ color:var(--bp-accent); }
#admin-section .admin-header p{ color:var(--bp-tx-dim); font-size:13px; }
/* panels: flat surface, thin border, no gradient header bar */
#admin-section .data-table{
background:var(--bp-surface); border:1px solid var(--bp-line);
border-radius:14px; margin-bottom:20px; overflow:hidden;
}
#admin-section .data-table h3{
background:none; margin:0; color:var(--bp-tx);
font-family:'Barlow Condensed',sans-serif; font-weight:700;
letter-spacing:.8px; text-transform:uppercase; font-size:15px;
padding:15px 18px; border-bottom:1px solid var(--bp-line);
display:flex; align-items:center; gap:9px;
}
#admin-section .data-table h3 i{ color:var(--bp-accent); font-size:13px; -webkit-text-fill-color:initial; }
/* tables: subtle lines, mono header, denser rows */
#admin-section table{ font-family:'DM Sans',sans-serif; }
#admin-section th{
background:var(--bp-surface-2); color:var(--bp-tx-mute);
font-family:'Space Mono',monospace; font-weight:700;
font-size:10px; letter-spacing:.08em; text-transform:uppercase;
padding:11px 16px; border-bottom:1px solid var(--bp-line);
}
#admin-section td{
padding:12px 16px; border-bottom:1px solid var(--bp-line);
color:var(--bp-tx); font-size:13px; font-family:'DM Sans',sans-serif;
}
#admin-section tbody tr:hover{ background:rgba(255,255,255,.03); }
#admin-section .table-container{ max-height:none; }
/* KPI tiles: compact, left-aligned, no orbitron/glow */
#admin-section .stats-grid{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;
}
#admin-section .stat-card{
background:var(--bp-surface); border:1px solid var(--bp-line);
border-radius:12px; padding:16px 18px; text-align:left;
}
#admin-section .stat-card:hover{ transform:none; box-shadow:none; border-color:var(--bp-line-2); }
#admin-section .stat-card i{ display:none; }
#admin-section .stat-card h3{
font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:700;
color:var(--bp-tx); margin:0 0 2px; background:none; -webkit-text-fill-color:initial;
}
#admin-section .stat-card p{
font-size:10px; letter-spacing:.08em; text-transform:uppercase;
font-family:'Space Mono',monospace; color:var(--bp-tx-mute); margin:0;
}
/* buttons: compact, auto-width, no uppercase-900 (inline-bg buttons get
rewritten in the render-function pass that follows) */
#admin-section .btn{
width:auto; display:inline-flex; align-items:center; gap:7px;
padding:8px 14px; border-radius:9px;
font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
letter-spacing:0; text-transform:none;
background:var(--bp-surface-2); color:var(--bp-tx); border:1px solid var(--bp-line-2);
}
#admin-section .btn:hover{ transform:none; background:rgba(255,255,255,.06); box-shadow:none; }
#admin-section .btn.btn-sm{ padding:6px 11px; font-size:12px; margin:0; }
#admin-section .btn-success{ background:rgba(68,224,138,.14); color:var(--bp-pos); border-color:rgba(68,224,138,.3); }
#admin-section .btn-success:hover{ background:rgba(68,224,138,.22); }
#admin-section .btn-danger{ background:rgba(255,107,107,.12); color:var(--bp-neg); border-color:rgba(255,107,107,.3); }
#admin-section .btn-danger:hover{ background:rgba(255,107,107,.2); box-shadow:none; transform:none; }
/* ===== Announcement banner ===== */
.pinnr-announce {
position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
background: #E8FF47; color: #080809;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px 44px 10px 16px; font-size: 14px; font-weight: 600;
text-align: center; line-height: 1.3;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.pinnr-announce button {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: transparent; border: none; color: #080809;
font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
/* ===== Maintenance overlay ===== */
.pinnr-maintenance {
position: fixed; inset: 0; z-index: 99999;
background: #080809; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pinnr-maintenance .pm-card { text-align: center; max-width: 440px; }
.pinnr-maintenance .pm-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 40px; color: #E8FF47; letter-spacing: 1px; margin-bottom: 18px; }
.pinnr-maintenance h2 { color: #fff; font-size: 26px; margin: 0 0 10px; }
.pinnr-maintenance p { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.pinnr-maintenance .pm-admin { background: rgba(255,255,255,0.08); color: #E8FF47; border: 1px solid rgba(232,255,71,0.3); padding: 9px 18px; border-radius: 10px; font-size: 13px; cursor: pointer; }
/* ── Search trigger: on-brand, slimmer (authoritative override) ── */
@media (max-width: 1024px) {
.mobile-search-trigger {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 9px 14px !important;
margin-bottom: 12px !important;
}
.mobile-search-trigger i { color: rgba(255, 255, 255, 0.4) !important; }
.mobile-search-trigger span { font-size: 13px !important; }
.mobile-search-trigger:active {
border-color: rgba(232, 255, 71, 0.4) !important;
background: rgba(232, 255, 71, 0.08) !important;
}
}
/* ── Consolidated filter row ── */
#dateFilter { display:flex; gap:6px; overflow-x:auto; flex:1; min-width:0; padding-bottom:2px; scrollbar-width:none; }
#dateFilter::-webkit-scrollbar { display:none; }
.ev-icon-btn {
flex-shrink:0; width:38px; height:34px; border-radius:10px;
background:rgba(255,255,255,0.04); border:.5px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .15s; padding:0;
}
.ev-icon-btn:active { transform:scale(0.94); }
.ev-icon-btn.on { background:rgba(232,255,71,0.12); border-color:rgba(232,255,71,0.4); color:#E8FF47; }
/* ── Category chips (sleeker filter drawer) ── */
.ev-cat-chip {
display:inline-flex; align-items:center; gap:5px;
padding:7px 11px; border-radius:18px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600;
line-height:1; white-space:nowrap; transition:all .15s;
}
.ev-cat-chip-unsel { background:rgba(255,255,255,0.04); border:.5px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.55); }
.ev-cat-chip-sel { background:rgba(232,255,71,0.12); border:.5px solid rgba(232,255,71,0.45); color:#E8FF47; }
.ev-cat-chip:active { transform:scale(0.95); }
/* ── Card meta: date/going left, price pill right ── */
.event-item-meta { justify-content: space-between; }
.event-item-meta .em-left { display:inline-flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.event-item-meta .em-left > span { white-space:nowrap; }
.event-item-meta .em-price {
flex-shrink:0; color:#E8FF47; background:rgba(232,255,71,0.12);
border:.5px solid rgba(232,255,71,0.3); font-weight:700; font-size:11px;
padding:3px 10px; border-radius:11px; line-height:1;
}
/* ── Friends going (card social proof) ── */
.event-item-meta .fg-avs { display:inline-flex; align-items:center; flex-shrink:0; }
.event-item-meta .fg-av { width:18px; height:18px; border-radius:50%; overflow:hidden; border:1.5px solid #080809; background:#1a1a1c; flex-shrink:0; }
.event-item-meta .fg-av img { width:100%; height:100%; object-fit:cover; display:block; }
.event-item-meta .fg-label { color:#E8FF47; white-space:nowrap; }
/* ── Cancelled events ── */
.event-item.cancelled { position: relative; }
.ev-cancel-ribbon {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
background: #ff2d4b; color: #fff;
font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em;
padding: 5px 13px; border-radius: 7px; box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.event-item.cancelled .event-item-hero { filter: grayscale(1) brightness(0.5); }
.event-item.cancelled .em-left span:first-child { text-decoration: line-through; opacity: 0.6; }
/* ============================================================
SUPER ADMIN — kill the green/purple/orange gradient buttons.
Targets only .btn elements inside #admin-section that carry an
inline gradient background, and flattens them to a clean
professional button. !important beats the inline style.
============================================================ */
#admin-section .btn[style*="gradient-primary"],
#admin-section .btn[style*="gradient-secondary"]{
background: var(--bp-surface-2) !important;
border: 1px solid var(--bp-line-2) !important;
color: var(--bp-tx) !important;
box-shadow: none !important;
}
#admin-section .btn[style*="gradient-primary"]:hover,
#admin-section .btn[style*="gradient-secondary"]:hover{
background: rgba(255,255,255,.07) !important;
border-color: var(--bp-line-2) !important;
}
/* ============================================================
SUPER ADMIN — Events tab: flyer thumbnails + compact icon
action buttons (replaces the emoji names + button wall).
============================================================ */
#admin-section .ad-evthumb{
width:42px; height:42px; border-radius:9px; object-fit:cover; flex:0 0 auto;
background:var(--bp-surface-2); border:1px solid var(--bp-line);
}
#admin-section .ad-evph{
width:42px; height:42px; border-radius:9px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
background:var(--bp-surface-2); border:1px solid var(--bp-line);
color:var(--bp-tx-mute); font-size:14px;
}
#admin-section .ad-evbtn{
width:30px; height:30px; padding:0; margin:0; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
border-radius:8px; border:1px solid var(--bp-line-2);
background:var(--bp-surface-2); color:var(--bp-tx-dim);
font-size:12px; transition:.15s ease;
}
#admin-section .ad-evbtn:hover{ background:rgba(255,255,255,.08); color:var(--bp-tx); }
#admin-section .ad-evbtn.is-pos{ color:var(--bp-pos); border-color:rgba(68,224,138,.32); }
#admin-section .ad-evbtn.is-pos:hover{ background:rgba(68,224,138,.14); }
#admin-section .ad-evbtn.is-neg{ color:var(--bp-neg); border-color:rgba(255,107,107,.32); }
#admin-section .ad-evbtn.is-neg:hover{ background:rgba(255,107,107,.16); }
#admin-section .ad-evbtn.is-on{ color:var(--bp-accent); border-color:var(--bp-accent); background:rgba(0,0,0,.25); }
/* ============================================================
SUPER ADMIN — Events tab Part 2: bulk-select + pagination.
============================================================ */
#admin-section .ad-evcheck{
width:16px; height:16px; cursor:pointer; accent-color:var(--bp-accent);
vertical-align:middle;
}
#admin-section .ad-loadmore{
padding:9px 20px; cursor:pointer; border-radius:9px;
background:var(--bp-surface-2); border:1px solid var(--bp-line-2);
color:var(--bp-tx); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
transition:.15s ease;
}
#admin-section .ad-loadmore:hover{ background:rgba(255,255,255,.07); }
#admin-section .ad-evbulk-del{
padding:7px 14px; cursor:pointer; border-radius:8px;
background:var(--bp-neg); border:1px solid var(--bp-neg); color:#180606;
font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700;
display:inline-flex; align-items:center; gap:7px;
}
#admin-section .ad-evbulk-del:hover{ filter:brightness(1.07); }
#admin-section .ad-evbulk-clear{
padding:7px 12px; cursor:pointer; border-radius:8px;
background:transparent; border:1px solid var(--bp-line-2); color:var(--bp-tx-dim);
font-family:'DM Sans',sans-serif; font-size:13px;
}
#admin-section .ad-evbulk-clear:hover{ color:var(--bp-tx); background:rgba(255,255,255,.05); }
/* ============================================================
SUPER ADMIN — pending-business review buttons (labelled pills).
============================================================ */
#admin-section .ad-pbtn{
display:inline-flex; align-items:center; gap:6px; cursor:pointer;
padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600;
font-family:'DM Sans',sans-serif;
border:1px solid var(--bp-line-2); background:var(--bp-surface-2); color:var(--bp-tx-dim);
transition:.15s ease;
}
#admin-section .ad-pbtn:hover{ background:rgba(255,255,255,.07); color:var(--bp-tx); }
#admin-section .ad-pbtn.is-pos{ color:var(--bp-pos); border-color:rgba(68,224,138,.32); }
#admin-section .ad-pbtn.is-pos:hover{ background:rgba(68,224,138,.14); }
#admin-section .ad-pbtn.is-neg{ color:var(--bp-neg); border-color:rgba(255,107,107,.32); }
#admin-section .ad-pbtn.is-neg:hover{ background:rgba(255,107,107,.16); }
/* Remove the venue/address finder that floated over the map grid —
the sidebar search covers discovery; this was the event-placement
geocoder. Hidden with !important so it beats the inline display:block
the JS sets; elements stay in the DOM so nothing referencing them breaks. */
#locationSearchContainer { display: none !important; }
/* Native GPU pin layer renders event pins now. Hide the legacy HTML lollipop
markers (they stay in the DOM so focusEvent / shared links / invite ceremony
/ city switch keep working) — this is what ends the pan/rotate/zoom drift. */
.mapboxgl-marker.event-marker { display: none !important; }