element so the
Font Awesome JS kit can swap it for an SVG. CSS `content:`
with the FA webfont doesn't work under the kit's SVG mode. */
.BjmXb60c {
position: absolute;
top: 0.85rem;
right: 0.85rem;
font-size: 10px;
color: rgba(255, 255, 255, 0.25);
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
pointer-events: none;
z-index: 2;
}
.FC68CDuL:hover .BjmXb60c,
.FC68CDuL:focus-visible .BjmXb60c {
opacity: 1;
color: rgba(255, 255, 255, 0.55);
}
/* When a clickable card is hovered/focused, fade the right-side
header metadata out so the expand affordance has a clean slot
to fade in. Without this, the absolutely-positioned ::after
icon lands on top of the subtitle text ("355 sales", pixel
pill, etc.) and looks clipped. The header content is shown
again as soon as the user moves away. */
.FC68CDuL .EtkyfAjv,
.FC68CDuL .GIw3b8Y8 {
transition: opacity 0.15s ease;
}
.FC68CDuL:hover .EtkyfAjv,
.FC68CDuL:hover .GIw3b8Y8,
.FC68CDuL:focus-visible .EtkyfAjv,
.FC68CDuL:focus-visible .GIw3b8Y8 {
opacity: 0;
}
/* On hover, lift the card off the page: nudge it up 1px and
deepen the shadow stack. We keep the inset top highlight and
tight contact shadow from the resting state, then swap the
ambient bloom for a stronger one - reads as "the card has
moved closer to you" rather than "the border changed". */
.FC68CDuL:hover {
border-color: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 2px 4px rgba(0, 0, 0, 0.4),
0 12px 32px rgba(0, 0, 0, 0.28);
}
.FC68CDuL:focus-visible {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}
.FC68CDuL:active {
transform: translateY(0);
}
/* ── Shared header pattern ──────────────────────────────────── */
.AxNmgdbN,
.yGVBKnBf,
.Nge3c1OU,
.nl51HfU4,
.BUXYHLkV,
.Y9lxwb5s {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.6);
flex-shrink: 0;
}
/* Legacy-named title/subtitle pair - funnel_* prefix is historical;
these are the shared header text styles used by every dashboard
card (Revenue, Recent Activity, Alerts, Quick Actions, Top
Promoters, Ticket Mix). Renaming would touch a lot of call-sites
for no functional gain, so they live on under their original keys. */
.W8aRPjhL {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.W8aRPjhL > i {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.EtkyfAjv {
font-size: 11px;
color: #555;
font-weight: 500;
}
/* ── Funnel ─────────────────────────────────────────────────────
No outer card wrapper or header bar - each metric is its own
standalone tile. The grid is purely a layout container that lays
out four sibling cards with a gap between them. */
._6Oz0cs0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.75rem;
gap: 0.75rem;
}
.WKu5fdIi {
position: relative;
display: flex;
flex-direction: column;
padding: 1rem 1.25rem 0.85rem;
background-color: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 1px 2px rgba(0, 0, 0, 0.35),
0 8px 24px rgba(0, 0, 0, 0.18);
color: inherit;
font-family: var(--font-family);
text-align: left;
cursor: default;
overflow: hidden;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.WKu5fdIi:disabled {
cursor: default;
}
/* Skeleton variant rendered while the dashboard is loading. Keeps the
tile shape so the layout doesn't reflow when real data lands. */
.jseSzrDi {
min-height: 112px;
}
.zT7NUaua {
cursor: pointer;
/* Hint the GPU that this element will be transformed so the lift
animation runs on a stable composited layer. Without this, the
card promotes/demotes its layer at hover/unhover, which creates
a one-frame subpixel jitter on the sparkline at the bottom of
the tile - looks like the line briefly "cuts off" on the right
edge as the clip boundary repaints. */
will-change: transform;
}
/* Match the shadow language of the resting state - same three-layer
stack (inset highlight, contact shadow, ambient bloom), just deeper.
Was a single 0 6px 16px shadow that replaced the resting stack
wholesale, so the card visibly "snapped" between two different
shadow shapes on hover instead of smoothly lifting. */
.zT7NUaua:hover {
border-color: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 2px 4px rgba(0, 0, 0, 0.4),
0 12px 32px rgba(0, 0, 0, 0.28);
}
.zT7NUaua:focus-visible {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 0 0 2px rgba(13, 122, 199, 0.18),
0 8px 24px rgba(0, 0, 0, 0.18);
}
.iYbTLkkZ {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.25rem;
}
.SEOUnlkH {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.ckbUi4gQ {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
animation: SmZROyRH 1.6s ease-in-out infinite;
}
.iGNkRCoe {
margin-left: auto;
font-size: 10px;
font-weight: 700;
color: #22c55e;
letter-spacing: 0.3px;
}
.VIXnatYw {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.bT7emQBi {
font-size: 28px;
font-weight: 700;
color: var(--white);
line-height: 1;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Demoted: percentage is context, not a headline. Was 13px / 600 weight
in the metric's accent color; now 11px / 500 / muted so it reads as
secondary metadata next to the bold number. */
._w5HJSot {
font-size: 11px;
font-weight: 500;
line-height: 1;
color: rgba(255, 255, 255, 0.45);
}
.Lu1ccPq9 {
/* Bleeds to the tile edges so the line reaches corner-to-corner.
margin-top: auto inside the flex column pins the sparkline to the
bottom edge so all four tiles have a consistent "number on top,
line at the bottom" silhouette regardless of optional content. */
margin: auto -1.25rem -0.85rem;
height: 38px;
pointer-events: none;
}
/* Pacing meta line - sits under the Admitted sparkline. Answers
"are we on track?" with a smoothed admit rate and sellout projection. */
.TgJSrrjo {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.35rem 0 -0.15rem;
font-size: 10px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.DWb5T7OW {
color: rgba(255, 255, 255, 0.75);
font-weight: 600;
}
.SaK33yc3 {
color: rgba(255, 255, 255, 0.2);
}
.K_mgwcoc {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.KCRrvvJd {
height: 3px;
background: rgba(255, 255, 255, 0.07);
border-radius: 2px;
overflow: hidden;
}
.z_LpiTZd {
height: 100%;
border-radius: 2px;
transition: width 0.6s ease;
}
.JHehlD6a {
display: block;
width: 100%;
}
/* ── Ticket Mix Card ────────────────────────────────────────── */
.YB5pfgB7 {
min-height: 130px;
}
.Yj26q_3K {
display: flex;
height: 5px;
width: 100%;
overflow: hidden;
}
.x3Mt3gnA {
height: 100%;
transition: width 0.5s ease;
}
.n5zstMKC {
padding: 0.6rem 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.jHQaUDwu {
display: flex;
align-items: center;
gap: 0.5rem;
}
.uFyv5ZAd {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.HUFWmjGA {
flex: 1 1;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.LxQndSk_ {
font-size: 12px;
color: #555;
min-width: 32px;
text-align: right;
}
.ShzSbGQs {
font-size: 13px;
font-weight: 600;
color: var(--white);
min-width: 30px;
text-align: right;
}
/* ── Recent Activity Card ───────────────────────────────────── */
.Uc2uN8B0 {
display: flex;
flex-direction: column;
min-height: 0;
}
.yGVBKnBf {
gap: 0.65rem;
flex-wrap: wrap;
}
.b0D13YaK {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #22c55e;
flex-shrink: 0;
box-shadow: 0 0 6px #22c55e;
animation: SmZROyRH 2s ease-in-out infinite;
}
@keyframes SmZROyRH {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
._pYMhWNk {
font-size: 10px;
font-weight: 700;
color: #22c55e;
letter-spacing: 0.5px;
}
.cYVsC5fr {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.XP1DB85a {
padding: 0.25rem 0.65rem;
border-radius: 6px;
border: 1px solid #2d2f39;
background: none;
color: #666;
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-family);
transition: all 0.15s ease;
}
.XP1DB85a:hover {
border-color: #3d4052;
color: #888;
}
.heIVBY17 {
border-color: var(--accent-1);
color: var(--accent-1);
background: rgba(13, 122, 199, 0.06);
}
/* ── Recent Activity dropdown filter ───────────────────────────
Replaces the flat chip row. The trigger borders/text in the
active category's color so the user can see at a glance which
filter the body is scoped to; clicking opens an absolute-
positioned menu of all categories. */
.nKvXbcmv {
position: relative;
margin-right: 0.5rem;
}
.rbVdZUan {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.7rem;
border-radius: 6px;
border: 1px solid #2d2f39;
background: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-family);
transition: border-color 0.15s ease, background 0.15s ease;
}
.rbVdZUan:hover {
background: rgba(255, 255, 255, 0.03);
}
.rbVdZUan i {
font-size: 10px;
transition: transform 0.15s ease;
opacity: 0.7;
}
.gwFe5KCM i {
transform: rotate(180deg);
}
.rIoVxzkY {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 180px;
background: var(--sub-bg-dark);
border: 1px solid #2d2f39;
border-radius: 8px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.025) inset;
padding: 4px;
z-index: 30;
display: flex;
flex-direction: column;
}
.nC_Kb7x8 {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
border: none;
background: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
font-family: var(--font-family);
cursor: pointer;
text-align: left;
transition: background 0.12s ease;
}
.nC_Kb7x8:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--white);
}
.qn4Ag568 {
background: rgba(13, 122, 199, 0.08);
color: var(--white);
}
.lvYsEuri {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* Wrap exists to position the thin loading bar relative to the body without
affecting flex sizing. The body itself is still the scroll container. */
.D5AwpLMN {
position: relative;
flex: 1 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.jXwaBH_A {
flex: 1 1;
overflow-y: auto;
padding: 0.5rem 0;
min-height: 0;
}
.jXwaBH_A::-webkit-scrollbar { width: 4px; }
.jXwaBH_A::-webkit-scrollbar-track { background: transparent; }
.jXwaBH_A::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* Refetch state - body keeps its content but visually steps back so the eye
knows the data is stale and a refresh is in flight. Pointer-events still
work (e.g. you can re-click another filter mid-load). */
.w1EhcUSc {
opacity: 0.55;
transition: opacity 0.18s ease-out;
}
/* Cross-fade applied via React's `key={activeTab}` remount - when the active
filter changes, the body is a fresh element and animates in. Tiny upward
slide reads as "new data settled into place" rather than "thing flashed". */
.GScECDUe {
animation: dPY9z7wo 0.22s ease-out;
}
@keyframes dPY9z7wo {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Indeterminate progress bar - sits at the very top of the body during a
refetch when stale rows are still on screen. Slides left-to-right
continuously so it doesn't pretend to know progress. */
.I76ptQ1n {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(13, 122, 199, 0.0) 10%,
var(--accent-1) 50%,
rgba(13, 122, 199, 0.0) 90%,
transparent 100%
);
background-size: 50% 100%;
background-repeat: no-repeat;
animation: ALvxGpuQ 1.1s ease-in-out infinite;
z-index: 2;
pointer-events: none;
}
@keyframes ALvxGpuQ {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
/* Skeleton rows - matched to the real row geometry so the body doesn't pop
when real data arrives. Used only on a true cold load (no prior data). */
.Yv0ja7Ea {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}
.rEqd9xKq,
.GutT8XUd,
.TFwB7xoX,
.xWLvO4HT {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.09) 50%,
rgba(255, 255, 255, 0.04) 100%
);
background-size: 200% 100%;
animation: G2p3lEVr 1.4s ease-in-out infinite;
}
.rEqd9xKq {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
}
.JuTo0dw1 {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1;
min-width: 0;
}
.GutT8XUd {
height: 11px;
width: 65%;
border-radius: 3px;
}
.TFwB7xoX {
height: 9px;
width: 35%;
border-radius: 3px;
}
.xWLvO4HT {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
@keyframes G2p3lEVr {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
._I9500Hj {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.3);
transition: background 0.1s ease;
}
._I9500Hj:last-child {
border-bottom: none;
}
._I9500Hj:hover {
background: rgba(255, 255, 255, 0.015);
}
.yulUZjeA {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--white);
flex-shrink: 0;
}
.v84ei3zA {
flex: 1 1;
min-width: 0;
}
.byGKjvgs {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.byGKjvgs strong {
color: var(--white);
font-weight: 600;
}
.ElbRodDZ {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.2rem;
flex-wrap: wrap;
}
.p7t4GdQ2 {
font-size: 11px;
color: #555;
}
.OkcHE45a {
padding: 0.1rem 0.4rem;
border-radius: 4px;
border: 1px solid;
font-size: 10px;
font-weight: 600;
}
.EZHXqo99 {
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: rgba(13, 122, 199, 0.15);
color: var(--accent-1);
font-size: 10px;
font-weight: 600;
border: 1px solid rgba(13, 122, 199, 0.3);
}
.JAhi2yo7 {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* New-row landing animation - applied via .activity_row_new on entries
that came in from the live stream. One-shot fade + slide so the eye
notices an event landing without the whole list re-animating. */
.q1Nzjq0o {
animation: Htxe95jD 0.32s ease-out;
}
@keyframes Htxe95jD {
from {
opacity: 0;
transform: translateY(-4px);
background: rgba(34, 197, 94, 0.06);
}
to {
opacity: 1;
transform: translateY(0);
background: transparent;
}
}
/* ── Recent Activity Drawer ─────────────────────────────────── */
/* Filter strip - sits between the drawer header and the scrolling
body as a real flex item (NOT a sticky child of .drawer_body).
This guarantees no content can ever scroll behind it. Solid
background, subtle bottom border to separate from the list. */
.YbPsriOO {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0.85rem 1.5rem;
background: var(--bg-dark);
border-bottom: 1px solid rgba(45, 47, 57, 0.6);
flex-shrink: 0;
}
.jP_kPiNw {
display: flex;
flex-direction: column;
}
/* ── Live Alerts Card ──────────────────────────────────────── */
.VN7t1ij_ {
display: flex;
flex-direction: column;
min-height: 0;
}
.ukxLxSRz {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
margin-left: 0.4rem;
}
.IFyM_oee {
display: flex;
align-items: center;
gap: 0.3rem;
}
.EwVWU9tj {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Severity tinted pills - used for the small count chip in the alerts card header.
Scoped to .alerts_sev_dot specifically so the bare .sev_danger / .sev_warn /
.sev_info modifiers can be reused as plain labels on .alert_row_compact
without inheriting a tinted background. */
.EwVWU9tj.pgV1uV5V {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.EwVWU9tj.l5HH6MMz {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.EwVWU9tj.kF5_csEu {
background: rgba(13, 122, 199, 0.15);
color: var(--accent-1);
}
.schqPNQc {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
font-size: 12px;
color: rgba(34, 197, 94, 0.85);
}
.schqPNQc i {
font-size: 14px;
color: #22c55e;
}
.schqPNQc p {
margin: 0;
color: inherit;
}
.FjG_jMjH {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
}
.FjG_jMjH::-webkit-scrollbar { width: 4px; }
.FjG_jMjH::-webkit-scrollbar-track { background: transparent; }
.FjG_jMjH::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* Compact row - single line: icon | title | time | dismiss.
Quieter chrome: no left-edge stripe, no icon background tint. Severity
reads from the icon glyph color alone, which is enough at a glance and
avoids stacking 3 layers of color signaling per row.
Full title/detail/action live in the AlertDrawer that opens on click. */
.nHztBgI3 {
display: grid;
grid-template-columns: 18px 1fr auto auto;
align-items: center;
grid-gap: 0.55rem;
gap: 0.55rem;
padding: 0.5rem 0.85rem 0.5rem 1.1rem;
border-top: 1px solid rgba(45, 47, 57, 0.6);
transition: background 0.15s ease;
position: relative;
font-family: var(--font-family);
color: inherit;
text-align: left;
width: 100%;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.nHztBgI3:hover {
background: rgba(255, 255, 255, 0.03);
}
.nHztBgI3:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.04);
}
.nHztBgI3:focus-visible::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 6px;
border: 1px solid rgba(13, 122, 199, 0.55);
pointer-events: none;
}
.nHztBgI3:active {
background: rgba(255, 255, 255, 0.05);
}
.xWkPvOPa {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nHztBgI3.pgV1uV5V .xWkPvOPa { color: #ef4444; }
.nHztBgI3.l5HH6MMz .xWkPvOPa { color: #f97316; }
.nHztBgI3.kF5_csEu .xWkPvOPa { color: var(--accent-1); }
.xWkPvOPa i {
font-size: 12px;
}
.VWDthcl7 {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.zXklmZi4 {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.DcJTBPEI::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: currentColor;
opacity: 0.5;
}
.DcJTBPEI.pgV1uV5V::before { background: #ef4444; opacity: 0.8; }
.DcJTBPEI.l5HH6MMz::before { background: #f97316; opacity: 0.7; }
.DcJTBPEI.kF5_csEu::before { background: var(--accent-1); opacity: 0.5; }
.LsCXQj3Z {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.DcJTBPEI.pgV1uV5V .LsCXQj3Z { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.DcJTBPEI.l5HH6MMz .LsCXQj3Z { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.DcJTBPEI.kF5_csEu .LsCXQj3Z { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }
.LsCXQj3Z i {
font-size: 12px;
}
.pdJY0tBu {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.omAkqsz8 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
}
.nCdHVR7x {
font-size: 12px;
font-weight: 600;
color: var(--white);
line-height: 1.3;
}
.iSCZ1DzS {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.GGNBmhff {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.35;
}
/* Hover-revealed action affordance - tells the manager what clicking will do.
Hidden by default to keep the row visually compact; on hover/focus it slides in.
Tinted to match the alert severity so the affordance feels native to the row. */
.Ey5J42Nj {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
margin-top: 0.35rem;
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(-2px);
transition: opacity 0.18s ease, max-height 0.18s ease, transform 0.18s ease;
pointer-events: none;
color: rgba(255, 255, 255, 0.55);
}
.g2B12ITc:hover .Ey5J42Nj,
.g2B12ITc:focus-visible .Ey5J42Nj {
opacity: 1;
max-height: 24px;
transform: translateY(0);
}
.DcJTBPEI.pgV1uV5V .Ey5J42Nj { color: #ef4444; }
.DcJTBPEI.l5HH6MMz .Ey5J42Nj { color: #f97316; }
.DcJTBPEI.kF5_csEu .Ey5J42Nj { color: var(--accent-1); }
.Ey5J42Nj i {
font-size: 9px;
transition: transform 0.18s ease;
}
.g2B12ITc:hover .Ey5J42Nj i,
.g2B12ITc:focus-visible .Ey5J42Nj i {
transform: translateX(2px);
}
.gZpOiCK7 {
background: none;
border: none;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
font-family: var(--font-family);
margin-top: 1px;
}
.gZpOiCK7:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
}
.gZpOiCK7 i {
font-size: 11px;
}
/* ── Tonight's Revenue Card ────────────────────────────────── */
.jEWLLWVn {
display: flex;
flex-direction: column;
}
.wZ0uWdfN {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.25rem 0.5rem;
flex-wrap: wrap;
}
.qquXgOV9 {
font-size: 26px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.4px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.wFlHPiJu {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
font-size: 11px;
font-weight: 600;
}
.wFlHPiJu i {
font-size: 10px;
}
/* Pre-sale vs tonight split - sits between the headline total and the
per-ticket-type breakdown. Two label/value rows + a compact ratio bar
answer "of what you've earned, how much is banked already vs landing
right now". For a future event this section is essentially
"100% pre-sale, $0 tonight"; mid-event the green segment grows. */
.UlitcB8g {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.25rem 1.25rem 0.85rem;
}
/* Calm summary block - two read-only info rows (Pre-sale, Tonight)
above a share bar. The whole Revenue card is the click target for
the full drawer; the only inline action is the small "Allocations"
link on the Pre-sale row (its drilldown is a different drawer). */
.tjubgTD0 {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.1rem 1.25rem 0.95rem;
}
.cbSqLK0Z {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.QuxWijj_ {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.NKdIQwmd {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.EX1Fr0RS {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.k9WKcdbO {
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.1px;
}
/* Sale-count chip next to the label. Reads quieter than the dollar
value on the right so the eye lands on the dollar amount first. */
.d8yB1q7y {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05);
padding: 1px 7px;
border-radius: 999px;
}
.e776EpQT {
font-size: 15px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.1px;
}
/* Small inline secondary action - opens the Pre-sale allocations
drawer without triggering the parent card click (stopPropagation
is set in the handler). Sits at the end of the Pre-sale row so
"this leads somewhere else than the card click" reads instantly. */
.WAyRS0hd {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
color: rgba(13, 122, 199, 0.85);
background: rgba(13, 122, 199, 0.08);
border: 1px solid rgba(13, 122, 199, 0.18);
border-radius: 999px;
padding: 3px 9px 3px 10px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.WAyRS0hd i {
font-size: 9px;
transition: transform 0.15s ease;
}
.WAyRS0hd:hover {
background: rgba(13, 122, 199, 0.16);
border-color: rgba(13, 122, 199, 0.4);
color: #4ea3df;
}
.WAyRS0hd:hover i {
transform: translateX(2px);
}
.WAyRS0hd:focus-visible {
outline: none;
border-color: rgba(13, 122, 199, 0.6);
box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.2);
}
.WAyRS0hd:active {
transform: scale(0.97);
}
.t3aA8BZe {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
font-size: 12px;
}
.zSUJyw86 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
letter-spacing: 0.2px;
}
.N3nIMvAy {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/* Tiny LIVE pill on the Tonight row when door sales are accumulating.
Reads as "this number is still moving" without being as loud as the
activity feed's full LIVE label. */
.pcYQpXbn {
font-size: 9px;
font-weight: 700;
color: #22c55e;
letter-spacing: 0.4px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.3);
margin-left: 0.2rem;
}
.YEDN6aaM {
display: inline-flex;
align-items: baseline;
gap: 0.7rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.B_iXHbf8 {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
.c1pJZ6sS {
font-size: 14px;
font-weight: 700;
color: var(--white);
}
/* Button variant of the split row - used for the clickable Pre-sale
surface that opens the dedicated allocations drawer. Inherits the
row layout, then resets button chrome and adds a subtle hover lift
so the affordance reads without screaming. The chevron only appears
on this clickable row to disambiguate it from the static Tonight row. */
.Je7zaERT {
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
padding: 0.35rem 0.45rem;
margin: -0.35rem -0.45rem;
cursor: pointer;
color: inherit;
font-family: var(--font-family);
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
width: calc(100% + 0.9rem);
}
.Je7zaERT:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.Je7zaERT:focus-visible {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}
.Je7zaERT:active {
transform: scale(0.99);
}
.EqBqqvlF {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
margin-left: 0.15rem;
transition: color 0.15s ease, transform 0.15s ease;
}
.Je7zaERT:hover .EqBqqvlF {
color: rgba(255, 255, 255, 0.7);
transform: translateX(2px);
}
/* Revenue drawer KPI ribbon - four equal tiles at the top of the
drawer. Each tile is a labelled metric: pre-sale, tonight, this-hour
delta, cash in till. Plain dark cards, no shimmer, no extra chrome. */
.Rf7eH3n2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
gap: 10px;
}
.Ca8Kos9B {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 14px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.pVloBVoo {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.kAP02AC1 {
font-size: 20px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.01em;
}
.iTxnJab7 {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 720px) {
.Rf7eH3n2 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Stitched cumulative trend - SparkLine wrapper + axis legend underneath
("Pre-sale lead-up" / "Tonight"). The wrapper just spaces the line
away from the title; the SparkLine itself is responsible for the
line drawing. */
.vPs1qQ9v {
padding: 4px 0 6px;
}
.ko6UUrkC {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
.xoFLArKN {
display: flex;
width: 100%;
height: 6px;
border-radius: 3px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
margin-top: 0.25rem;
}
.I3r9tkr4 {
height: 100%;
transition: width 0.4s ease;
}
/* ── Revenue trend chart ───────────────────────────────────────
Stitched sparkline (pre-sale ramp → tonight's hourly takings)
anchored at the bottom of the Revenue card. Two jobs:
1. Premium analytical signal - answers "is the curve still
climbing or has it gone flat?" at a glance.
2. Flex-grow sink - `flex: 1 1 auto` makes this section absorb
whatever vertical space is left after the fixed-size header,
total, split rows and ratio bar. Without this, on tall rows
(e.g. 1920×1080 desktops with lots of activity), the card
stretches to match Recent Activity but the content above
stays compact, leaving a 100px empty band. With flex-grow,
the trend chart itself expands to fill, and the band
disappears.
No top label or dot legend - colours are already established
by the rows + ratio bar above, so the chart can stand alone. */
.N6D2a0mC {
display: flex;
flex-direction: column;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
flex: 1 1 auto;
min-height: 0;
}
/* Chart wrapper sits the SparkLine inside the trend strip.
position: relative so the "tonight starts here" divider can be
absolutely positioned relative to the line.
`flex: 1` + `min-height` makes the chart grow with the card on
tall rows (using up the dead space) but never shrink below a
readable size on shorter cards. The SparkLine inside fills
100% of this wrapper. */
.S_0sA9n7 {
position: relative;
flex: 1 1 auto;
min-height: 56px;
margin: 0;
}
.S_0sA9n7 > svg {
width: 100%;
height: 100%;
}
/* Soft vertical divider showing where pre-sale stops and tonight
begins on the stitched line. Faded so it reads as a guide line
rather than fighting the data. */
.qKcI0L_l {
position: absolute;
top: 6px;
bottom: 0;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 255, 255, 0.18) 30%,
rgba(255, 255, 255, 0.18) 80%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
/* Drawer-only legend under the wider ratio bar. Inline-laid-out chips
that label which color is which segment, with their share % and a
helpful sale count. */
.x0ugbAo2 {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.5rem;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
._7GkxwYZ {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.jR3OBnWQ {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem 1.25rem 1rem;
}
.sHfQVC6c {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.XWoo4T0t {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 12px;
}
.zid9urFd {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
}
.Cw8jBwpZ {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.dsYWp82y {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.JylwbhLY {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.W2ZVXQC5 {
font-size: 12px;
font-weight: 600;
color: var(--white);
}
.jGHoCsoR {
height: 4px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
}
.u1IphNpf {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease;
opacity: 0.85;
}
/* ── Sales Channels Card ────────────────────────────────────────
Sister card to Revenue. Same outer chrome (inherits .channels_card
from the shared card-chrome rule above), same header/breakdown
rhythm so the two read as a pair. The pixel-status pill in the
header is the trust signal - a manager sees "1/3 pixels" and
knows attribution is partial before they trust the numbers. */
.PvntMTXs {
display: flex;
flex-direction: column;
}
.YlBBuskC {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.6);
flex-shrink: 0;
gap: 0.6rem;
}
/* Pixel-status pill - quiet by default. The dot carries the colour
signal (green = all live, amber = partial, red = none); the count
text stays neutral so the pill reads as a metadata chip, not a
warning badge. */
.GIw3b8Y8 {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.65);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
flex-shrink: 0;
}
.I2Tt7_uk {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* Hero block - sales count is the headline (it's what the manager
most cares about), conversion rate sits below as a quality signal. */
.CZgTHXmH {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.85rem 1.25rem 0.6rem;
}
.ffegXGHe {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.rOEAk5np {
font-size: 26px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.4px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.WNdQ4Lax {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.Ml2dTOCH {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
}
/* Demoted: was accent-blue 700 weight, which made the conversion number
compete with the headline sales count above it. Now plain white at a
modest weight - readable, but visibly secondary. */
.aTFj0huY {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Channel rows - same skeleton as revenue_breakdown so the two
side-by-side cards rhyme visually. Each row is dot + name (with
optional Ad pill) on the left, sales count + revenue on the right,
thin progress bar below. */
.lzGkPK0l {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem 1.25rem 1rem;
flex: 1 1 auto;
min-height: 0;
}
/* Single-line row. Was previously a column (name-line + bar-line) - the
bars duplicated the rank-order signal and stacked into a noisy
"barcode" alongside Revenue's bars and the funnel sparkline. Each
row is now: dot + name + (Ad) - sales - revenue. */
.yMpZf3Oz {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 12px;
}
/* "+3 more · view all" footer sits below the visible top-N. Muted so it
reads as an affordance hint, not a list item. */
.q4WvJv1F {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
text-align: right;
padding-top: 0.15rem;
letter-spacing: 0.2px;
margin-top: auto;
}
.gft6_GJS {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
min-width: 0;
}
.zAxmHq82 {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* Tiny "Ad" pill on paid channels so the eye can separate paid spend
vs. organic traffic in the list. Categorical chip - slate (not amber)
so it reads as a tag, not a warning. */
.Axrku3t4 {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 4px;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.25);
color: #cbd5e1;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.3px;
margin-left: 0.15rem;
}
.f0xGTIo0 {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.GrIISTLr {
font-size: 12px;
font-weight: 700;
color: var(--white);
}
.tOhbbMSm {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.B_UUhrin {
height: 4px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
}
._o4uXHJ6 {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease;
opacity: 0.85;
}
/* ── Top Promoters Card ─────────────────────────────────────── */
.TKXGsaV7 {
display: flex;
flex-direction: column;
min-height: 0;
}
/* Inline list shows top 3 - full sortable leaderboard lives in the drawer.
No scroll inside the card; the row is fixed height and the overflow we
show is just the "expand" affordance from .card_clickable. */
.ox9JlN2t {
padding: 0.4rem 0 0.5rem;
display: flex;
flex-direction: column;
min-height: 0;
}
.EohBqLva {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 1.25rem;
transition: background 0.1s ease;
}
.EohBqLva:hover {
background: rgba(255, 255, 255, 0.015);
}
.bIXqsWpW {
font-size: 12px;
font-weight: 700;
color: #555;
min-width: 14px;
text-align: center;
}
.qXYRrZeo {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--white);
flex-shrink: 0;
}
.pRBEAiE5 {
flex: 1 1;
min-width: 0;
}
._vNLi8PI {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.vvsJpd2M {
font-size: 13px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fJXwHnwK {
font-size: 11px;
color: #555;
flex-shrink: 0;
}
.pskXSEg2 {
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
overflow: hidden;
}
.uRbMujjV {
height: 100%;
border-radius: 2px;
transition: width 0.5s ease;
}
/* ── Quick Actions Card ─────────────────────────────────────── */
.AcaHaWlO {
flex-shrink: 0;
}
.S1PI8_om {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 12px;
font-weight: 600;
color: #22c55e;
}
.NtH0I4Fq {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5rem;
gap: 0.5rem;
padding: 0.85rem 1.25rem 1rem;
}
.rdjPLovB {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.75rem 0.5rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
font-family: var(--font-family);
transition: all 0.15s ease;
text-align: center;
}
.rdjPLovB:hover {
background: rgba(255, 255, 255, 0.05);
border-color: #3d4052;
color: var(--white);
}
.rdjPLovB i {
font-size: 15px;
}
/* ── Empty state ────────────────────────────────────────────── */
.At7pmoPV {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 2rem 1rem;
color: #3d4052;
}
.At7pmoPV i { font-size: 22px; }
.At7pmoPV p { margin: 0; font-size: 13px; font-weight: 500; }
/* ── Drawer ─────────────────────────────────────────────────── */
.W61prTUg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
animation: aORh7cGW 0.2s ease;
}
.b8rp8s3l {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 680px;
max-width: 92vw;
/* Drawer is intentionally translucent so the header/footer chrome
zones (which sit at the drawer's edges) can pick up the dimmed
page behind via backdrop-filter and read as real frosted glass.
The body has its own opaque fill below so form content isn't
accidentally see-through. */
background: rgba(20, 22, 30, 0.78);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border-left: 1px solid rgba(255, 255, 255, 0.08);
z-index: 1001;
display: flex;
flex-direction: column;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
animation: PFx_URKg 0.28s ease;
}
@keyframes aORh7cGW {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes VG2F7scw {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes PFx_URKg {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes HyWKiaos {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.HJV4mBi_ {
animation: HyWKiaos 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.b02WpAUp {
animation: VG2F7scw 0.22s ease forwards;
}
/* Frosted-glass top chrome. Light gradient fill + subtle inner-edge
highlight + backdrop-blur read as a glass plate floating over the
body, instead of a flat grey bar. The 1px white-alpha line at the
inner edge is what really sells the bevel; the gradient gives the
surface a tonal shift so it doesn't feel painted on. */
.QjFdrbB0 {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.4rem 1.5rem;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.h2okpVjI {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
font-family: var(--font-family);
transition: all 0.15s ease;
}
.h2okpVjI:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
border-color: #3d4052;
}
.RiTEK_e9 {
flex: 1 1;
min-width: 0;
}
.b0hF2oae {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--white);
}
.Tbm0cxVF {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
font-size: 12px;
color: #888;
flex-wrap: wrap;
}
.WyreItBT {
color: #22c55e;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 10px;
}
.rNv6nPzv {
color: #444;
}
.POlRUJvR {
flex: 1 1;
overflow-y: auto;
padding: 1.5rem;
/* Solid body fill so form content stays fully readable while the
surrounding chrome zones (header/footer) keep their translucent
frosted look. */
background: var(--bg-dark);
}
.POlRUJvR::-webkit-scrollbar { width: 4px; }
.POlRUJvR::-webkit-scrollbar-track { background: transparent; }
.POlRUJvR::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* ── Alert Drawer (variant of .drawer) ─────────────────────── */
.B67rw0Ck .b0hF2oae {
margin-top: 0.5rem;
font-size: 20px;
letter-spacing: -0.2px;
line-height: 1.25;
}
.doQYiFp8 {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.TKTWB9mN {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.TKTWB9mN.pgV1uV5V { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); }
.TKTWB9mN.l5HH6MMz { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.4); }
.TKTWB9mN.kF5_csEu { background: rgba(13, 122, 199, 0.15); color: var(--accent-1); border: 1px solid rgba(13, 122, 199, 0.4); }
.TKTWB9mN i {
font-size: 6px;
}
.LyjXOp6l {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.LYNXGTpN {
display: grid;
grid-template-columns: 56px 1fr;
grid-gap: 1rem;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.ROeUTIX2 {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ROeUTIX2.pgV1uV5V { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.ROeUTIX2.l5HH6MMz { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.ROeUTIX2.kF5_csEu { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }
.ROeUTIX2 i {
font-size: 22px;
}
.FVcB6Opa {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
}
.lh7Kv3HN {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1rem 1.1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
margin-bottom: 1.5rem;
}
.NyI3tLnq {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
font-size: 12px;
}
.SS0nVcAd {
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.2px;
}
.y86wCVBH {
color: var(--white);
font-weight: 500;
text-align: right;
}
/* ── Compose box (free-text message to a team member) ─────── */
.mLDM8oW4 {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.dXzAYRfB {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.3px;
}
.DQQGRE29 {
font-size: 13px;
font-weight: 600;
color: var(--white);
letter-spacing: 0;
}
.hYskLyPs {
width: 100%;
min-height: 110px;
resize: vertical;
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
line-height: 1.5;
box-sizing: border-box;
transition: border-color 0.15s ease, background 0.15s ease;
}
.hYskLyPs:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.05);
}
.hYskLyPs::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.pfzU0A_N {
display: flex;
justify-content: space-between;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.qUYjQTYK {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.m1Uai7AE {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
border-radius: 10px;
border: 1px solid transparent;
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
cursor: pointer;
color: var(--white);
transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease;
}
.m1Uai7AE i {
font-size: 12px;
opacity: 0.85;
}
.m1Uai7AE.pgV1uV5V { background: #ef4444; border-color: rgba(255, 255, 255, 0.08); }
.m1Uai7AE.l5HH6MMz { background: #f97316; border-color: rgba(255, 255, 255, 0.08); }
.m1Uai7AE.kF5_csEu { background: var(--accent-1); border-color: rgba(255, 255, 255, 0.08); }
.m1Uai7AE:hover:not(:disabled) {
filter: brightness(1.08);
}
.m1Uai7AE:active:not(:disabled) {
transform: scale(0.99);
}
.m1Uai7AE:disabled {
cursor: not-allowed;
filter: grayscale(0.4) brightness(0.7);
opacity: 0.6;
}
.h6BcPhYk {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.1rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.h6BcPhYk i {
font-size: 11px;
}
.h6BcPhYk:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
/* ── Shared drawer section primitives ──────────────────────── */
.Fp9Z2pYI {
margin-bottom: 1.75rem;
}
.Fp9Z2pYI:last-child {
margin-bottom: 0;
}
.I0Hl_jSP {
margin: 0 0 0.85rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
/* ── Revenue drawer · Payment method ────────────────────────
Card-vs-cash breakdown for end-of-night reconciliation.
The segmented bar shows share of paid revenue (comps excluded so
they don't dwarf the visual). The reconcile block does the math
the manager would otherwise do on paper. */
.inM4pjcz {
display: flex;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 1rem;
}
.rd5NcLH1 {
height: 100%;
transition: width 0.4s ease;
}
.GIi6R7dm {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ET6FXwI6 {
display: grid;
grid-template-columns: 32px 1fr;
grid-gap: 0.85rem;
gap: 0.85rem;
align-items: center;
}
.IsgPgksd {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.UU8yCO8o {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.gQJYyCYW {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.DuSASw4I {
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.WYqOkCNB {
font-size: 16px;
font-weight: 700;
color: var(--white);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.VIwOoY26 {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.TIhrpMjw {
margin-top: 1.1rem;
padding: 0.85rem 1rem;
background: rgba(34, 197, 94, 0.04);
border: 1px solid rgba(34, 197, 94, 0.18);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.LbbbuncV {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.TPZrREJZ {
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.I4b5ScRx {
margin-top: 0.3rem;
padding-top: 0.55rem;
border-top: 1px dashed rgba(34, 197, 94, 0.25);
}
.I4b5ScRx .X12zAFJi {
font-weight: 600;
color: var(--white);
font-size: 13px;
}
.I4b5ScRx .TPZrREJZ {
font-weight: 700;
color: #22c55e;
font-size: 15px;
}
/* ── Revenue drawer ────────────────────────────────────────── */
._bv_1XRE {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: end;
grid-gap: 0.75rem;
gap: 0.75rem;
height: 160px;
padding: 0 0.25rem;
}
.tW6yJ4qX {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.KSPtTF4h {
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.n19h2HTu {
width: 100%;
flex: 1 1;
display: flex;
align-items: flex-end;
min-height: 0;
}
.yaUb5sxQ {
width: 100%;
background: linear-gradient(180deg, var(--accent-1), rgba(13, 122, 199, 0.5));
border-radius: 6px 6px 0 0;
min-height: 4px;
transition: height 0.4s ease;
}
.LRBrf8HX {
background: linear-gradient(180deg, #06b6d4, #0D7AC7);
box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}
.uhihjVkt {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.DgygI6ei {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fZD9xFsp {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.IavViReW {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.ZcKXv34C {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.ehPnuGPA {
font-size: 16px;
font-weight: 700;
color: var(--white);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.nvFBse4P {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.jfcPagbZ {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.aF4MrNUN {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
gap: 1rem;
}
.XO0_EPak {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.susFAlJ7 {
font-size: 13px;
font-weight: 500;
color: var(--white);
}
.EpvweuGE {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gUgwZYIY {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
flex-shrink: 0;
}
.KmX4LBR7 {
font-size: 13px;
font-weight: 700;
color: var(--white);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.daEN2tcZ {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.J3wbHQVw {
padding: 1rem;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* ── Ticket Mix drawer ─────────────────────────────────────── */
.Wze0jklq {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-gap: 1.5rem;
gap: 1.5rem;
}
.Y4gPlmBz {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.cuWAVkNt {
display: grid;
grid-template-columns: 8px 1fr auto;
align-items: center;
grid-gap: 0.65rem;
gap: 0.65rem;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
.dWQIfMFl {
width: 8px;
height: 8px;
border-radius: 50%;
}
.hRCDJsFR {
font-weight: 500;
}
.R39mi6ZT {
color: rgba(255, 255, 255, 0.55);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.a6wemb3G {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.eHs95rse {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bEVEQBzO {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.Gl419LqZ {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.cEr9Q8qF {
width: 8px;
height: 8px;
border-radius: 50%;
}
.yOub2ulF {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.yOub2ulF strong {
font-size: 16px;
font-weight: 700;
color: var(--white);
}
.wBjDAhy2 {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
.MltQTJfC {
height: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.ZN1l46JO {
height: 100%;
border-radius: 6px;
transition: width 0.4s ease;
}
.eKjTI5Y0 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.eKjTI5Y0 strong {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
}
/* ── Top Promoters drawer ──────────────────────────────────── */
.Vmrm9haD {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lL6IgVlG {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.3px;
}
.yQmqfwZB {
display: flex;
gap: 0.35rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 3px;
}
.ltyZxLzK {
background: none;
border: none;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-family);
font-size: 12px;
padding: 0.35rem 0.7rem;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ltyZxLzK:hover {
color: var(--white);
}
.ieWOCRZC {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
}
.mUurpTag {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Table-style row: rank · avatar · name+bar · admitted · invited · revenue.
Fixed numeric column widths so the digits line up vertically and the
eye can scan a column without re-anchoring. */
.j7jIXtkQ {
display: grid;
grid-template-columns: 24px 36px 1fr 82px 60px 60px 64px 84px;
grid-gap: 0.6rem;
gap: 0.6rem;
align-items: center;
padding: 0 0.25rem 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
.lJPBxBwR {
grid-column: 3 / 4;
}
.oFratgt4 {
text-align: right;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.tbllyNVR {
display: grid;
grid-template-columns: 24px 36px 1fr 82px 60px 60px 64px 84px;
grid-gap: 0.6rem;
gap: 0.6rem;
align-items: center;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tbllyNVR:last-child {
border-bottom: none;
}
.AU3Jpp8e {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
text-align: center;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.PyXMNeyi {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.1rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.bEI_lPVK {
font-size: 15px;
font-weight: 700;
color: var(--white);
line-height: 1.1;
}
.jNHpcpIm {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.DthahS3H {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.zxDVPS1u {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.mV0k1yG5 {
font-size: 14px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aCpWcCcJ {
display: flex;
height: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.r_hhGihi {
height: 100%;
transition: width 0.4s ease;
}
/* keep the legacy single-fill rule for any other consumer */
.WwQhJLAT {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease;
opacity: 0.85;
}
.KHhk6eQL {
color: rgba(255, 255, 255, 0.35);
font-weight: 500;
font-size: 11px;
}
/* ── Trend chart ────────────────────────────────────────────── */
.vTjDSpzd {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.wFaKAMbu {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.U1loEaQQ {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.Akmr3UCj {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #555;
}
.xoDevyZT {
display: flex;
gap: 0.35rem;
}
.sCbiNxdn {
padding: 0.4rem 0.8rem;
border-radius: 6px;
border: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
font-family: var(--font-family);
cursor: pointer;
transition: all 0.15s ease;
}
.sCbiNxdn:hover {
border-color: #3d4052;
color: var(--white);
}
.mrM38Zt2 {
border-color: var(--accent-1);
color: var(--accent-1);
background: rgba(13, 122, 199, 0.1);
}
.RoijVsTR {
position: relative;
background: rgba(255, 255, 255, 0.015);
border: 1px solid #2d2f39;
border-radius: 10px;
padding: 0.5rem;
}
.vn_KEvSD {
display: block;
width: 100%;
height: auto;
}
.hWP3BYA0 {
position: absolute;
transform: translate(-50%, calc(-100% - 12px));
background: var(--bg-dark);
border: 1px solid #2d2f39;
border-radius: 6px;
padding: 0.4rem 0.65rem;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.YM2QjnqV {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.aCrR4_xx {
margin-top: 2px;
font-size: 10px;
color: #888;
}
/* ── Channel breakdown ──────────────────────────────────────── */
.gMVBJe1B {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(45, 47, 57, 0.5);
}
.NCUKMlwT {
margin: 0 0 0.85rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #555;
}
.X04d1WxQ {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}
.X04d1WxQ:last-child {
border-bottom: none;
}
.kGPLrgxH {
display: flex;
align-items: center;
gap: 0.55rem;
}
.k2P8t7Rv {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.bR6jIdcK {
flex: 1 1;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
.UqPRd4np {
font-size: 12px;
color: #555;
min-width: 32px;
text-align: right;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.j7WQYZKL {
font-size: 14px;
font-weight: 700;
color: var(--white);
min-width: 44px;
text-align: right;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.WKxkx558 {
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
overflow: hidden;
}
.qyo1HsW2 {
height: 100%;
border-radius: 2px;
transition: width 0.5s ease;
}
/* ── Pre-sale drawer ─────────────────────────────────────────────
Per-release breakdown showing how much of each online ticket
release has actually sold against its allocation. Visual model:
one card per release with a name + status pill, a sold/cap
counter, a progress bar, the sales window, and an optional
secret-release lock badge. */
.MbkAkLv0 {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.UQD6P_r8 {
font-size: 28px;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.KzmpM44L {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
}
.PFna392v {
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.jzYgfqeH {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #0D7AC7 0%, #06b6d4 100%);
box-shadow: 0 0 10px rgba(13, 122, 199, 0.35);
transition: width 0.6s ease;
}
.Wi6NgeMk {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.KrP8RxcI {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.HNOJs4x6 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.FfY_fRlc {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.JJZtlNpK {
font-size: 14px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.1px;
}
.M1eRLCCS {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 10px;
font-weight: 600;
color: #f59e0b;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.3px;
}
.M1eRLCCS i {
font-size: 9px;
}
.FfnEVEsC {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 10px;
font-weight: 700;
border: 1px solid;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.FfnEVEsC i {
font-size: 7px;
}
.qYRDVHA9 {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.1rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.qYRDVHA9 strong {
font-size: 16px;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.IKgKAdVR {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.lQYUq0sS {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.QDFdvq57 {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
.QDFdvq57 strong {
font-size: 16px;
color: var(--white);
font-weight: 700;
}
.bqwZ7Wwv {
color: rgba(255, 255, 255, 0.35);
font-weight: 500;
}
._ievxg8C {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
.mMZLzxOm {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
position: relative;
}
.kSrn12PN {
height: 100%;
border-radius: 3px;
transition: width 0.6s ease;
}
/* Uncapped variant - striped, taller, with a label so it doesn't
read as "0% sold" or "100% sold". The diagonal stripes signal
"no fixed denominator here". */
.cMrZNEK7 {
height: 28px;
background:
repeating-linear-gradient(
135deg,
rgba(13, 122, 199, 0.18) 0px,
rgba(13, 122, 199, 0.18) 6px,
rgba(13, 122, 199, 0.06) 6px,
rgba(13, 122, 199, 0.06) 12px
);
border: 1px dashed rgba(13, 122, 199, 0.35);
display: flex;
align-items: center;
padding: 0 0.7rem;
}
.AcMYSUNm {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.2px;
}
.TyL8ET_K {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.TyL8ET_K i {
margin-right: 0.4rem;
color: rgba(255, 255, 255, 0.4);
}
.YPzaTYgG {
color: rgba(255, 255, 255, 0.45);
font-style: italic;
line-height: 1.4;
}
.TvGT1gon {
text-align: center;
padding: 2rem 1rem;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
/* ── Sales Channels Drawer ─────────────────────────────────────
Three sections: pixel integrations, channel performance table,
UTM tracking link generator. Density is higher than the other
drawers because the channel rows are inherently tabular. */
/* Shared inline-meta header on each section ("3 of 3 live", sort
chips, etc.) - sits to the right of the section title. */
.vG4S8TVm {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
flex-wrap: wrap;
}
.vG4S8TVm .I0Hl_jSP {
margin-bottom: 0;
}
.fyw3Fby1 {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.4px;
text-transform: uppercase;
font-weight: 600;
}
/* ── Pixel cards ─────────────────────────────────────────────── */
.PanhlFBN {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.BLQSH1JA {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
grid-gap: 1rem;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
background: rgba(255, 255, 255, 0.015);
}
.n4dbsoKL {
background: rgba(34, 197, 94, 0.03);
border-color: rgba(34, 197, 94, 0.18);
}
.nt1FAYjb {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
font-size: 16px;
flex-shrink: 0;
}
.Xy220wdT {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.sWIA7rjN {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.BCiIkQy1 {
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.LGPFqh_4 {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
.dHUyROtC {
color: #22c55e;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.VI7lqSvI {
color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.YlC_hpJz {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.JPCu_c_x {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.Sen31flA {
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
color: rgba(255, 255, 255, 0.65);
overflow: hidden;
text-overflow: ellipsis;
max-width: 16ch;
white-space: nowrap;
}
.sl1MIjv2,
.y9uOwMBg {
flex-shrink: 0;
padding: 0.4rem 0.85rem;
border-radius: 7px;
font-family: var(--font-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sl1MIjv2 {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
.sl1MIjv2:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
color: var(--white);
}
.y9uOwMBg {
background: rgba(13, 122, 199, 0.18);
border: 1px solid rgba(13, 122, 199, 0.4);
color: var(--white);
}
.y9uOwMBg:hover {
background: rgba(13, 122, 199, 0.3);
border-color: rgba(13, 122, 199, 0.55);
}
/* Inline editor that drops below a pixel card body when the user
clicks Connect/Configure. Same look as the UTM picker so the
drawer reads as one consistent surface. */
.IcHzZQTw {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.jxVIIr2k {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* ── Sort chips ──────────────────────────────────────────────── */
._9qdGidvk {
display: inline-flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.SvvoPlU7 {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.55);
padding: 0.3rem 0.65rem;
border-radius: 6px;
font-family: var(--font-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.SvvoPlU7:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--white);
}
.N4140v9d {
background: rgba(13, 122, 199, 0.18);
border-color: rgba(13, 122, 199, 0.4);
color: var(--white);
}
/* ── Channel performance table ─────────────────────────────────
True table layout: ONE shared grid across the header + every row,
so columns line up exactly. Hairline dividers between rows (no
per-row borders / cards), a single rounded container around the
whole table.
Color hierarchy (one accent per row, not three):
- Sales: bold-white (the primary outcome metric)
- Revenue: green (the headline you scan to first)
- Conv.: plain white (no accent - was competing with revenue)
- Clicks / RSVPs: muted (funnel volume, not the destination) */
.GsWNqUJr {
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.012);
}
/* The shared row grid. `--ch-cols` is the contract: header + every
body row use the exact same template, so columns can never drift.
Channel column is flexible; the five numeric columns are equal,
the trailing chevron column is fixed-width. */
.rV4sorll {
display: grid;
grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(0, 1fr)) 24px;
align-items: center;
grid-gap: 0.75rem;
gap: 0.75rem;
padding: 0.7rem 1rem;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Header row - single instance, sticky-feeling under the section
title. Slightly tinted so the data rows below visually nest under
it. The right-aligned numeric headers match the cell alignment. */
.GMLnYHoX {
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 0.55rem;
padding-bottom: 0.55rem;
}
.X3r3qZuu,
.IGsg9MbC {
font-size: 9px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}
.IGsg9MbC {
text-align: right;
}
.kj_ckoGB {
display: block;
}
/* Body rows - separated by hairlines, no card chrome. Hover only
exists on expandable (paid) rows. */
.VuPah8Qr + .VuPah8Qr,
.CvtLhQrF + .CvtLhQrF .VuPah8Qr {
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.CvtLhQrF {
display: flex;
flex-direction: column;
}
.rFFxicy5 {
cursor: pointer;
transition: background-color 0.12s ease;
}
.rFFxicy5:hover {
background: rgba(255, 255, 255, 0.025);
}
.J_mmA_q3 {
background: rgba(255, 255, 255, 0.02);
}
/* Channel cell - icon chip + name + optional Ad pill, all on a
single baseline (no second utm_source line; that's metadata for
the campaign breakdown, not the at-a-glance row). */
.NlkJp6uu {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.gx_0M41B {
width: 26px;
height: 26px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
font-size: 12px;
flex-shrink: 0;
}
.AGzkNny5 {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 13px;
font-weight: 600;
color: var(--white);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Numeric cell variants - three weights of emphasis from "headline"
(revenue, green) → "primary outcome" (sales, bold white) → "funnel
metadata" (clicks/rsvps, muted). The eye lands on revenue first. */
.qurLe0s9,
.hNQJT0OI,
.E9S906h1,
.hfgr9v15 {
text-align: right;
font-size: 13px;
}
.qurLe0s9 {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.hNQJT0OI {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.E9S906h1 {
color: var(--white);
font-weight: 700;
}
.hfgr9v15 {
color: #22c55e;
font-weight: 700;
}
.KhF30VXS {
display: flex;
justify-content: flex-end;
align-items: center;
}
.gv1EWRYf {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
transition: transform 0.2s ease, color 0.15s ease;
}
.rFFxicy5:hover .gv1EWRYf {
color: rgba(255, 255, 255, 0.75);
}
.t4rKt9xp {
transform: rotate(180deg);
}
/* Per-campaign breakdown inside an expanded paid-channel row.
5-column grid: campaign name | clicks | sales | spend | ROAS. */
.tFaOOKMc {
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.18);
padding: 0.5rem 0.9rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.Y7UT66jw,
.Dda4jzPY {
display: grid;
grid-template-columns: minmax(150px, 1.6fr) repeat(4, minmax(0, 1fr));
grid-gap: 0.6rem;
gap: 0.6rem;
align-items: center;
font-size: 11px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.Y7UT66jw {
color: rgba(255, 255, 255, 0.4);
font-size: 9px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 700;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.Y7UT66jw > :not(:first-child),
.Dda4jzPY > :not(:first-child) {
text-align: right;
}
.Dda4jzPY {
color: rgba(255, 255, 255, 0.7);
padding: 0.25rem 0;
}
.ZPIjQCVy {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.85);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aYaPZtDx {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.Ef_bxcyv {
background: #22c55e;
box-shadow: 0 0 5px #22c55e;
}
.h7An4zwe {
background: rgba(255, 255, 255, 0.3);
}
.ak7yA3vO {
background: #f59e0b;
}
.NVklioDi {
color: #22c55e;
font-weight: 700;
}
.XN0fSkWJ {
color: #f59e0b;
font-weight: 600;
}
/* ── UTM link generator ────────────────────────────────────────
Three labelled inputs (source/medium/campaign) feed a synthesized
tracking URL below, with a copy-to-clipboard button. */
.A1YUDEhb {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 0.6rem;
gap: 0.6rem;
margin-bottom: 0.75rem;
}
.wds6KvDx {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.oswGEjwD {
font-size: 10px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
font-weight: 700;
}
.QDfEAYDp {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--white);
padding: 0.55rem 0.7rem;
border-radius: 7px;
font-family: var(--font-family);
font-size: 12px;
transition: border-color 0.15s ease;
}
.QDfEAYDp:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}
.GRCt17Dr {
display: flex;
gap: 0.4rem;
margin-bottom: 0.6rem;
}
.C9RSgHeV {
flex: 1 1;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
padding: 0.55rem 0.7rem;
border-radius: 7px;
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 12px;
min-width: 0;
}
.C9RSgHeV:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
}
.czopKzda {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(13, 122, 199, 0.18);
border: 1px solid rgba(13, 122, 199, 0.4);
color: var(--white);
padding: 0.55rem 0.85rem;
border-radius: 7px;
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.czopKzda:hover {
background: rgba(13, 122, 199, 0.28);
}
.JXrVEpKf {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.4);
}
.APY5TDOO {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
margin: 0;
}
.APY5TDOO code {
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
background: rgba(255, 255, 255, 0.06);
padding: 1px 5px;
border-radius: 4px;
color: var(--accent-1);
font-size: 10.5px;
}
/* ── Drawer mobile overrides (≤600px) ──────────────────────────
Dashboard carries its own copy of the side-drawer chrome
(Revenue / Sales Channels / Top Promoters / Funnel / etc.) and
needs the same full-screen-on-phone treatment that the shared
drawers/Drawer.module.css applies. Without this, the dashboard
drawers stay at 92vw which leaves a thin strip of dimmed page
bleeding through on the left and crowds the form content. */
@media (max-width: 600px) {
.b8rp8s3l {
width: 100vw;
max-width: 100vw;
}
.QjFdrbB0 {
padding: 1.1rem 1.1rem;
}
.POlRUJvR {
padding: 1.1rem;
}
.meANlB_c {
padding: 0.85rem 1.1rem;
}
}
/* ── Mobile (≤768px) overrides ─────────────────────────────────
Placed at the end of the file so they win over the equally-specific
base rules above (CSS source order tie-breaker - same specificity,
later wins). */
@media (max-width: 768px) {
/* Funnel: 4-up strip → 2×2 grid of standalone tiles. The live
"Admitted" tile has a sparkline + pacing line; squeezing it into
a quarter of a phone width crushes the type, so 2×2 keeps each
tile readable. Gap is tightened for the smaller surface. */
._6Oz0cs0 {
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
}
.WKu5fdIi {
padding: 0.85rem 1rem 0.75rem;
}
/* Scroll model swap.
On desktop the page is "no-scroll": the wrapper grid pins its
middle row, and inner card bodies (RecentActivity, AlertsList)
handle their own scrolling via `overflow-y: auto`.
On phones that's the wrong model. Touch scrolling inside an
inner overflow-auto element can swallow the gesture - the
user swipes inside Recent Activity, the body's scroll position
is already at top/bottom, and on iOS Safari (and some Android
browsers) the gesture is consumed instead of bubbling up to
scroll the page. The dashboard then feels "stuck".
Fix: at ≤768px the page itself becomes the single scroll
surface. Inner card bodies expand to their full content height
and pass touches straight through to . */
.jXwaBH_A,
.FjG_jMjH {
overflow-y: visible;
overflow-x: visible;
flex: 0 0 auto;
max-height: none;
}
/* Inner cards no longer need to clip - they're sized by content
on phones, not constrained by a parent grid row. */
.Uc2uN8B0,
.VN7t1ij_,
.jEWLLWVn {
min-height: 0;
max-height: none;
}
}
/* ╭──────────────────────────────────────────────────────────╮
│ Edit Event drawer - form layout that lives inside the │
│ shared .drawer shell (Dashboard.module.css). │
│ │
│ Owns: │
│ - The sticky chip nav between header and body │
│ - All form section / field / control styles │
│ - The custom inputs (banner dropzone, RTE, genre │
│ pills, date cards, search-select, ticket rows) │
│ - The form footer (Cancel + Save Changes) │
╰──────────────────────────────────────────────────────────╯ */
/* ── Glass drawer layout overrides ─────────────────────────────
Restructures the EditEvent drawer so its top + bottom bars
actually behave as frosted glass: form content scrolls behind
sticky chrome, giving backdrop-filter something translucent to
refract. Without this, the chrome zones sit edge-to-edge with
the body in a flex column and there's nothing to "see through"
them - they just read as solid dark grey.
We hardcode the chrome heights via CSS variables so the sticky
nav knows where the sticky header ends. The values match the
rendered heights of the .drawer_header and .footer styles for
this drawer's content (title + subtitle, and Cancel + Save). */
.CBhVXJes {
--glass-header-h: 90px;
--glass-nav-h: 56px;
--glass-footer-h: 76px;
}
/* The body now hosts every part of the drawer (header / nav /
sections / footer) so they share a scroll container. Padding
comes off the body and lives on .form_sections_wrap below so
the chrome zones can stretch edge-to-edge. The solid body fill
stays in place - form content sits on top of it and remains
fully readable. backdrop-filter on the chrome samples the
rendered pixels above the body (form sections, fields, text)
as they scroll past, which is exactly what creates the glass
refraction effect.
scroll-padding-top: chip-nav clicks call scrollIntoView({ block:
"start" }) which would otherwise tuck the section's title under
the sticky chrome. Reserving header + nav height as a scroll
padding lifts the scroll target down so titles land just below
the chrome bars instead of behind them. */
.kFLXmTO1 {
padding: 0 !important;
scroll-padding-top: calc(var(--glass-header-h) + var(--glass-nav-h) + 0.5rem);
}
/* Sticky header - pinned to the very top while form content
scrolls underneath. z-index 3 so it covers both nav and body.
Slightly stronger gradient + inner highlight than the shared
.drawer_header rule so the bevel reads as a glass plate even
at scroll-top when there's no body content behind it yet. */
.doIkQv8R {
position: -webkit-sticky;
position: sticky;
top: 0;
/* Higher than any in-form popover (Spotify search dropdown, ticket
type picker, etc.) so they tuck under the sticky header instead
of bleeding over it when the user scrolls.
!important because `.drawer_header` from Dashboard.module.css
(loaded later by Webpack ordering) sets `z-index: 2` at the same
specificity and was winning the cascade - the dropdown at z 30
then rendered on top of the header. */
z-index: 50 !important;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.07) 0%,
rgba(255, 255, 255, 0.02) 60%,
rgba(255, 255, 255, 0.005) 100%),
rgba(20, 22, 30, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 8px 22px rgba(0, 0, 0, 0.28);
}
/* Sticky chip nav - pinned just below the header. Stacks at the
top of the scroll viewport so both bars stay visible while the
user scans long forms. Slightly cooler tint than the header so
the two glass plates read as separate layers rather than one
big gray bar. */
.IJajiZWy {
position: -webkit-sticky;
position: sticky;
top: var(--glass-header-h);
/* Below the header, above in-form popovers (so the chip nav also
stays on top of the Spotify dropdown when scrolling). */
z-index: 49 !important;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(18, 20, 28, 0.42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 6px 18px rgba(0, 0, 0, 0.22);
}
/* Sticky footer - pinned to the bottom edge so Save / Cancel
never disappear off-screen mid-scroll. With sticky bottom, the
footer lifts off the trailing form section and content scrolls
behind it; backdrop-filter refracts that content as it goes.
Mirror of the header treatment but the inset highlight sits at
the top edge so the bevel reads correctly from below. */
._xy_sIUz {
position: -webkit-sticky;
position: sticky;
bottom: 0;
z-index: 2;
background:
linear-gradient(0deg,
rgba(255, 255, 255, 0.07) 0%,
rgba(255, 255, 255, 0.02) 60%,
rgba(255, 255, 255, 0.005) 100%),
rgba(20, 22, 30, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 -8px 22px rgba(0, 0, 0, 0.28);
}
/* Form-section wrapper. Holds the inner padding that used to live
on .drawer_body so the chrome bars can stretch edge-to-edge.
The bottom padding is bumped to match the sticky footer height
plus a little breathing room - without it the last form
section's submit row would tuck under the sticky footer. */
.ziz_1zLe {
padding: 1.5rem 1.5rem calc(var(--glass-footer-h) + 1.5rem);
}
/* ── Sticky chip nav between header and body ──────────────── */
/* Section chip nav - sits below the header and continues the glass
top chrome treatment. Slight gradient + backdrop blur so the chip
row reads as another floating plate, not a flat tab bar. */
.vQQYEVfq {
display: flex;
gap: 0.4rem;
padding: 0.75rem 1rem;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.008) 100%),
rgba(18, 20, 28, 0.55);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
flex-shrink: 0;
overflow-x: auto;
z-index: 2;
}
.vQQYEVfq::-webkit-scrollbar { height: 0; display: none; }
.Rh0wk9xG {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 999px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.Rh0wk9xG:hover {
background: rgba(255, 255, 255, 0.05);
border-color: #3d4052;
color: var(--white);
}
.hppfKLq0 {
background: rgba(13, 122, 199, 0.15);
border-color: var(--accent-1);
color: var(--white);
}
.o91HiGII:not(.hppfKLq0) {
border-color: rgba(239, 68, 68, 0.45);
color: #fca5a5;
}
.WorXhiPy {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ef4444;
display: inline-block;
}
/* ── Section primitives ───────────────────────────────────── */
/* Each section is its own soft card so the eye groups related fields
together at a glance. The tinted bg + subtle border give clear
physical separation; the margin-bottom does the breathing-room
between cards. The header has its own bottom-border sub-divider
so the title row reads as a banner rather than just bold text on
top of the first field. */
.sNiy8IR4 {
padding: 1.4rem 1.5rem 1.5rem;
margin-bottom: 1.25rem;
background: rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 1rem;
scroll-margin-top: 0.75rem;
}
.sNiy8IR4:last-child {
margin-bottom: 0;
}
.XSbDcSvJ {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 -0.4rem 0.4rem; /* negative inline margin pulls the underline flush with the card edge */
padding: 0 0.4rem 0.95rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.95);
}
/* Icon gets its own little chip - accent-coloured square with the
FontAwesome glyph centred. Reads as a section badge instead of a
tiny inline icon. */
.XSbDcSvJ i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(13, 122, 199, 0.14);
color: var(--accent-1);
font-size: 13px;
flex-shrink: 0;
}
/* ── Field stack primitives ───────────────────────────────── */
.Axq43kzK {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.mR6kwb_R {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.85px;
}
.Ce7Bto6h {
color: var(--accent-1);
font-weight: 700;
}
.aBBvArQM {
margin: 0.1rem 0 0;
font-size: 11px;
color: #ef4444;
font-weight: 500;
}
/* Input wrap - leading icon + input. Mirrors the production "iconed pill"
look used across the entire form (Event name, Dress code, etc.). */
.G6y0eoXL {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0 0.85rem;
height: 42px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.G6y0eoXL:hover { border-color: #3d4052; }
.G6y0eoXL:focus-within {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.04);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.G6y0eoXL > i {
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
flex-shrink: 0;
}
.mjL9icD0 {
border-color: rgba(239, 68, 68, 0.6);
background: rgba(239, 68, 68, 0.04);
}
.mjL9icD0:focus-within {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.jDyRrq3j {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
height: 100%;
padding: 0;
}
.jDyRrq3j::placeholder { color: rgba(255, 255, 255, 0.3); }
/* Standalone borderless input (used as fallback under the venue picker) */
/* Read-only venue display, shown when the event is already created.
Mirrors the SearchSelect chrome (icon + label + trailing affordance)
but is unfocusable and unhoverable - signals "this exists, you
can't change it" without re-creating an entirely new layout. */
.u3EwnOqF {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.7rem 0.85rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #2d2f39;
border-radius: 10px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 13px;
}
.u3EwnOqF > i:first-child {
color: var(--accent-1);
font-size: 13px;
flex-shrink: 0;
}
.v_qiEMax {
flex: 1 1;
min-width: 0;
color: var(--white);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Tl3DWTOF {
color: rgba(255, 255, 255, 0.35);
font-size: 11px;
flex-shrink: 0;
}
.yn1VvK18 {
width: 100%;
margin-top: 0.5rem;
padding: 0.65rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px dashed #2d2f39;
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
box-sizing: border-box;
}
.yn1VvK18:focus { border-color: #3d4052; }
.yn1VvK18::placeholder { color: rgba(255, 255, 255, 0.3); }
/* ── Banner dropzone ──────────────────────────────────────── */
.liwCsmwa {
position: relative;
width: 100%;
min-height: 150px;
border: 2px dashed #2d2f39;
border-radius: 14px;
background: rgba(255, 255, 255, 0.015);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition: border-color 0.18s ease, background 0.18s ease;
}
.liwCsmwa:hover {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.05);
}
.pc_whT1O {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.1);
}
.yIKrwFvm {
border-style: solid;
border-color: rgba(255, 255, 255, 0.06);
min-height: 220px;
}
.mYOoa3q2 {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.KLrHZ3ZR {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
color: rgba(255, 255, 255, 0.55);
}
.KLrHZ3ZR i {
font-size: 28px;
color: var(--accent-1);
margin-bottom: 0.25rem;
}
.i4QDw5Sd {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.tBGQrOdm {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* Caption that sits OUTSIDE the dropzone (between the field label and
the drop target) explaining what the upload is used for. Stays
visible even after a preview is shown - the in-box "Upload …" copy
disappears once the file is loaded, but this line persists so users
can always tell banner vs promo video apart. */
.YEMcTnmi {
margin: 0.15rem 0 0.6rem;
display: flex;
align-items: flex-start;
gap: 0.45rem;
font-size: 12px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.55);
}
.YEMcTnmi i {
color: var(--accent-1);
font-size: 12px;
margin-top: 2px;
flex-shrink: 0;
}
.NBUrBPu9 {
width: 100%;
height: 220px;
object-fit: cover;
}
.S0FC9qFN {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: #fff;
font-size: 12px;
font-weight: 600;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.18s ease;
}
.liwCsmwa:hover .S0FC9qFN { opacity: 1; }
/* ── Rich text editor ─────────────────────────────────────── */
.lMdIPC_7 {
border: 1px solid #2d2f39;
border-radius: 10px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lMdIPC_7:focus-within {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.QtdDnIPP {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.35rem 0.55rem;
border-bottom: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.015);
}
.QtdDnIPP button {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: background 0.12s ease, color 0.12s ease;
}
.QtdDnIPP button:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
}
.rTunAz9x {
display: inline-block;
width: 1px;
height: 16px;
background: #2d2f39;
margin: 0 0.25rem;
}
/* Description rich-text body - auto-grows with content (no max-height
ceiling), and the user can drag the bottom-right corner to size it
to taste. min-height keeps it tappable when empty. */
.unHUH032 {
min-height: 120px;
padding: 0.7rem 0.85rem;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
line-height: 1.5;
outline: none;
resize: vertical;
overflow-y: auto;
}
.unHUH032:empty::before {
content: attr(data-placeholder);
color: rgba(255, 255, 255, 0.3);
pointer-events: none;
}
/* ── Genres pill picker ───────────────────────────────────── */
.KqrO3U2V {
position: relative;
}
.Ld2pBkph {
min-height: 42px;
padding: 0.35rem 0.55rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
cursor: text;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.t0JakP_G,
.Ld2pBkph:focus-within {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.04);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.wEASRzp_ {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.45rem 0.2rem 0.65rem;
background: rgba(13, 122, 199, 0.18);
border: 1px solid rgba(13, 122, 199, 0.4);
border-radius: 999px;
color: var(--accent-1);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1px;
}
.wEASRzp_ button {
width: 16px;
height: 16px;
border: none;
background: transparent;
color: var(--accent-1);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
border-radius: 50%;
transition: background 0.12s ease;
}
.wEASRzp_ button:hover {
background: rgba(13, 122, 199, 0.4);
color: #fff;
}
.kytikFw7 {
flex: 1 1;
min-width: 80px;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
padding: 0.15rem 0.35rem;
}
.kytikFw7::placeholder { color: rgba(255, 255, 255, 0.3); }
.FC6wB2f6 {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 10;
background: var(--bg-dark);
border: 1px solid #2d2f39;
border-radius: 10px;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
padding: 0.3rem;
}
.w8GtGHPT {
display: block;
width: 100%;
padding: 0.5rem 0.65rem;
text-align: left;
background: transparent;
border: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-family);
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease;
}
.w8GtGHPT:hover {
background: rgba(13, 122, 199, 0.12);
color: var(--white);
}
/* ── Date picker cards ────────────────────────────────────── */
.HjOX4Mau {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
/* Side-by-side Starts / Ends inputs - same two-column grid the Sales
window uses. Collapses to a single column on narrow screens so the
pickers don't get squeezed below their minimum trigger width. */
.LNJvbE6e {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.75rem;
gap: 0.75rem;
}
@media (max-width: 480px) {
.LNJvbE6e {
grid-template-columns: 1fr;
}
}
.qbVNmi_J {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #2d2f39;
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
cursor: pointer;
width: 100%;
text-align: left;
transition: border-color 0.15s ease, background 0.15s ease;
}
.qbVNmi_J:hover { border-color: #3d4052; }
.qbVNmi_J:focus-within {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.qbVNmi_J > i {
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
}
.oqyZbUtV { flex: 1 1; }
.HQChhIv4 {
color: rgba(255, 255, 255, 0.4);
font-weight: 500;
}
.Okun9nuM {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: none;
background: transparent;
}
.Okun9nuM::-webkit-calendar-picker-indicator {
opacity: 0;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
/* ── "Regenerate days" inline row ─────────────────────────── */
.J2h07Q3i {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.cce5w8Ug {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.85rem;
height: 42px;
width: 92px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cce5w8Ug:focus-within {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.cce5w8Ug > i {
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
}
.hIwNfmvh {
width: 100%;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
outline: none;
padding: 0;
}
.WnqhbnQs {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
}
/* Number inputs - kill spinners across the drawer. */
.hIwNfmvh::-webkit-outer-spin-button,
.hIwNfmvh::-webkit-inner-spin-button,
.jDyRrq3j::-webkit-outer-spin-button,
.jDyRrq3j::-webkit-inner-spin-button,
.lcjGC9UI::-webkit-outer-spin-button,
.lcjGC9UI::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hIwNfmvh[type="number"],
.jDyRrq3j[type="number"],
.lcjGC9UI[type="number"] {
-moz-appearance: textfield;
}
/* ── Search-select (Recurring + Venue) ────────────────────── */
.VMyVW39q { position: relative; }
.qgHc2zJj {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0 0.85rem;
height: 44px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: border-color 0.15s ease, background 0.15s ease;
}
.qgHc2zJj:hover { border-color: #3d4052; }
.E1ejYjrP {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.04);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.qgHc2zJj > i:first-child {
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
}
.EqnqKIL3 {
flex: 1 1;
font-weight: 600;
}
.mvZJ7GQw {
flex: 1 1;
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
}
.eEKHBgbe {
width: 22px;
height: 22px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
transition: background 0.12s ease, color 0.12s ease;
}
.eEKHBgbe:hover {
background: rgba(239, 68, 68, 0.25);
color: #ef4444;
}
.JVLRmQIE {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
.h9nQPKWk {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 10;
background: var(--bg-dark);
border: 1px solid #2d2f39;
border-radius: 10px;
max-height: 240px;
overflow-y: auto;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
padding: 0.3rem;
}
.AzfUXYxP {
display: block;
width: 100%;
padding: 0.5rem 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2d2f39;
border-radius: 6px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
margin-bottom: 0.3rem;
box-sizing: border-box;
}
.AzfUXYxP:focus { border-color: var(--accent-1); }
.NqHANuS_ {
display: block;
width: 100%;
padding: 0.55rem 0.7rem;
text-align: left;
background: transparent;
border: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-family);
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease;
}
.NqHANuS_:hover {
background: rgba(13, 122, 199, 0.12);
color: var(--white);
}
.Nmst7RfP {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
font-weight: 600;
}
.lMLXiIe4 {
padding: 0.6rem 0.7rem;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* ── Tickets list ─────────────────────────────────────────── */
.nEBoWMN0 {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.s15awyi2 {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.s15awyi2:hover { border-color: #3d4052; }
/* Only glow the row when an editable input inside it has focus -
don't fire on button focus (Quick Action pill, remove ×, etc.). */
.s15awyi2:has(input:focus),
.s15awyi2:has(textarea:focus) {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.04);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.s15awyi2 > i {
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
flex-shrink: 0;
}
.MUeZ2KIU {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
outline: none;
padding: 0;
}
/* Read-only door ticket display - name takes up flexible space, price
sits right-aligned. No $ symbol - pre-made tickets carry their own
pricing convention from the venue catalog (numbers map cleanly to
whatever currency the venue runs in). "Free" comps render as text. */
.nF9VDVOt {
flex: 1 1;
min-width: 0;
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.letNuYFw {
color: var(--white);
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
min-width: 40px;
text-align: right;
}
/* Inline price chip - sits immediately next to the ticket name so the
name + price read as one identity, leaving the right-hand side of
the row for the Quick Action pill + remove button. */
.MJ0bPhrI {
display: inline-block;
margin-left: 0.55rem;
padding: 0.05rem 0.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.75);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.2px;
vertical-align: middle;
}
/* Per-row "Quick Action" toggle pill. The on/off contrast is the whole
point - we need the manager to read state instantly without parsing
a tiny switch position. ON: filled accent-1 background, white text,
bolt + "ON" badge. OFF: muted hollow pill with a strike-through
bolt + "OFF" badge so it reads as deliberately disabled. */
.jQYcmKED {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.32rem 0.55rem 0.32rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.025);
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
flex-shrink: 0;
outline: none;
}
.jQYcmKED i {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
transition: color 0.15s ease;
}
.jQYcmKED:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.85);
}
.jQYcmKED:hover i { color: rgba(255, 255, 255, 0.7); }
/* The status badge at the end of the pill - reads "ON" or "OFF" so the
state is literally spelled out. */
.ZWBabaKn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
padding: 0.08rem 0.4rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.55);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.6px;
transition: background 0.15s ease, color 0.15s ease;
}
/* ON state - subtle accent tint (matches the original pill look),
accent-tinted icon + status badge so the colour cue lives in the
detail bits rather than flooding the whole control. */
.FTI6P98K {
background: rgba(13, 122, 199, 0.14);
border-color: rgba(13, 122, 199, 0.45);
color: var(--white);
}
.FTI6P98K:hover {
background: rgba(13, 122, 199, 0.2);
border-color: rgba(13, 122, 199, 0.6);
color: var(--white);
}
.FTI6P98K i { color: var(--accent-1); }
.FTI6P98K .ZWBabaKn {
background: rgba(13, 122, 199, 0.28);
color: var(--accent-1);
}
/* Explainer banner above the door ticket list. One bolt icon + one
line of copy. Soft accent tint matches the per-row Quick Action
pill so the visual link is obvious without restating the control. */
.UUppRiFd {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
margin: 0.4rem 0 0.6rem;
background: rgba(13, 122, 199, 0.07);
border: 1px solid rgba(13, 122, 199, 0.22);
border-radius: 8px;
}
.uV5bxjJA {
color: var(--accent-1);
font-size: 11px;
flex-shrink: 0;
}
.CPpdOtzl {
margin: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 11.5px;
line-height: 1.4;
}
.CPpdOtzl strong {
color: var(--white);
font-weight: 700;
}
.diqWEWum {
width: 24px;
height: 24px;
border-radius: 6px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: background 0.12s ease, color 0.12s ease;
}
.diqWEWum:hover {
background: rgba(239, 68, 68, 0.18);
color: #ef4444;
}
.hGB_lmfL {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.85rem;
background: transparent;
border: 1px dashed #2d2f39;
border-radius: 10px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
align-self: flex-start;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.hGB_lmfL:hover {
border-color: var(--accent-1);
color: var(--accent-1);
background: rgba(13, 122, 199, 0.06);
}
/* ── Ticket type picker dropdown ─────────────────────────── */
/* Wraps the .ticket_add button so the menu can be absolutely positioned
directly underneath it without escaping the form section. */
.HUxhtbsA {
position: relative;
align-self: flex-start;
}
.qLz3Q8Qm {
font-size: 10px;
margin-left: 0.15rem;
opacity: 0.7;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.WRVkfrzH {
transform: rotate(180deg);
}
@keyframes JU8fPp71 {
from {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes MNHWMT8T {
from {
opacity: 0;
transform: translateY(4px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.edQwzd4z {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 280px;
z-index: 10;
background: var(--bg-dark);
border: 1px solid #2d2f39;
border-radius: 10px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
padding: 0.3rem;
display: flex;
flex-direction: column;
animation: JU8fPp71 0.18s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top left;
gap: 1px;
}
/* Drop-up variant - the picker sits at the bottom of the form so the
menu always opens upward. Anchor it to the bottom of the trigger and
reverse the slide-in direction so it feels natural. */
.K3gwLabS {
top: auto;
bottom: calc(100% + 4px);
transform-origin: bottom left;
animation: MNHWMT8T 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.eZQW4MXN {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.6rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 7px;
margin: 0.1rem 0.1rem 0.35rem;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.eZQW4MXN:focus-within {
border-color: rgba(13, 122, 199, 0.5);
background: rgba(13, 122, 199, 0.04);
}
.LMB3b8xp {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
padding: 0;
}
.LMB3b8xp::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.Gop9c2cv {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
}
.Gop9c2cv:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
}
.Iekd0Gvk {
display: flex;
flex-direction: column;
gap: 1px;
max-height: 240px;
overflow-y: auto;
}
.vsAh3r5p {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.5rem 0.65rem;
background: transparent;
border: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-family);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, color 0.12s ease;
}
.vsAh3r5p:hover {
background: rgba(13, 122, 199, 0.12);
color: var(--white);
}
.i0I6KHnq {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
flex-shrink: 0;
}
.vsAh3r5p:hover .i0I6KHnq {
background: rgba(13, 122, 199, 0.18);
color: var(--accent-1);
}
.cKU4E0Qy {
flex: 1 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.aKJmY40J {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.vsAh3r5p:hover .aKJmY40J {
color: var(--white);
}
.IaNyKXoN {
height: 1px;
background: #2d2f39;
margin: 4px 2px;
}
.co5aSPZ9 {
color: var(--accent-1);
}
.co5aSPZ9 .i0I6KHnq {
color: var(--accent-1);
}
.oX9LznYq {
padding: 0.65rem 0.65rem 0.4rem;
color: rgba(255, 255, 255, 0.45);
font-family: var(--font-family);
font-size: 12px;
font-style: italic;
}
/* ── Footer ──────────────────────────────────────────────── */
/* Frosted-glass bottom chrome - mirror of the header treatment. The
gradient is reversed (lighter at the bottom edge) to balance the
header visually, and the inner highlight sits at the top edge so
the bevel reads correctly. */
.jQxsqROZ {
flex: 1 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.32);
color: #fca5a5;
font-size: 12.5px;
line-height: 1.4;
}
.jQxsqROZ i {
flex-shrink: 0;
color: #ef4444;
}
.NiBmJO5x {
display: flex;
justify-content: flex-end;
gap: 0.65rem;
padding: 1rem 1.5rem;
background:
linear-gradient(0deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 -4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.oX7SFSYL,
.II7QBPWp {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
}
.oX7SFSYL {
background: rgba(255, 255, 255, 0.03);
border-color: #2d2f39;
color: rgba(255, 255, 255, 0.85);
}
.oX7SFSYL:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.06);
border-color: #3d4052;
color: var(--white);
}
.II7QBPWp {
background: var(--accent-1);
color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.II7QBPWp:hover:not(:disabled) {
background: #0a6cb0;
}
.II7QBPWp:disabled,
.oX7SFSYL:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ── Field help text ──────────────────────────────────────── */
/* Small one-liner explaining what a field does - sits between the
label and the field control. */
.pRJHgaE2 {
margin: -0.15rem 0 0.25rem;
font-size: 12px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
}
/* ── Tickets sub-tab toggle (Door / Online) ───────────────── */
/* A pill-style segmented control sitting at the top of the Tickets
section. Persists which sub-view the user is editing while still
keeping the section as one logical unit in the chip nav. */
.sTS4QzSC {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0;
gap: 0;
padding: 0.25rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2d2f39;
border-radius: 10px;
margin-bottom: 1rem;
}
.kkaTesMk {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
background: transparent;
border: none;
border-radius: 7px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.kkaTesMk:hover {
color: rgba(255, 255, 255, 0.85);
}
.NZ8ZlcKb {
background: rgba(13, 122, 199, 0.15);
color: var(--white);
box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.4);
}
._3uYiGvA {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: rgba(255, 255, 255, 0.06);
border-radius: 9px;
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
}
.NZ8ZlcKb ._3uYiGvA {
background: rgba(13, 122, 199, 0.35);
color: #fff;
}
/* ── Online release list ──────────────────────────────────── */
.SnU2B8XK {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.K8GgIAjD {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 2.25rem 1rem;
border: 1px dashed #2d2f39;
border-radius: 10px;
color: rgba(255, 255, 255, 0.45);
text-align: center;
}
.K8GgIAjD i {
font-size: 22px;
color: rgba(255, 255, 255, 0.25);
margin-bottom: 0.35rem;
}
.K8GgIAjD p {
margin: 0;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.K8GgIAjD span {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* ── Release card ─────────────────────────────────────────── */
/* Collapsed: compact summary row + sub-meta line.
Expanded: same header + full edit form below. */
.xBoesXqX {
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
/* Clip while collapsed / animating so the grid-row height tween
reads as a clean expand/collapse. Flips to `visible` on the
open state below (with a delay) so the calendar popover inside
the body can render outside the card boundary. */
overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease;
}
.t9ZvOB2I {
border-color: rgba(13, 122, 199, 0.4);
background: rgba(13, 122, 199, 0.04);
overflow: visible;
/* Delay the `overflow` switch by the same 280ms the body height
takes to grow. While that animation runs we want clipping so the
body looks like it's sliding open; once it lands, overflow goes
visible and the date-picker popover can spill outside the card.
On close (this class removed) `transition` resets and overflow
snaps back to hidden immediately - so the closing animation
clips correctly too. */
transition:
border-color 0.15s ease,
background 0.15s ease,
overflow 0s 0.28s;
}
/* Header - clickable button row, name + price + status + chevron */
.KlZz4hwy {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 0.9rem;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
cursor: pointer;
text-align: left;
}
.KlZz4hwy:hover {
background: rgba(255, 255, 255, 0.025);
}
.jHYT9ZIc {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
flex: 1 1;
}
.jHYT9ZIc > i {
color: var(--accent-1);
font-size: 13px;
}
.O1g5rtoQ {
font-size: 14px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mb85mudH {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
padding: 0.15rem 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 5px;
}
.YCrM7Kzg {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.CRH3KYzC {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.05);
border-radius: 5px;
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
}
.YnhkQgh6 {
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
.ikn30wbu { background: rgba(60, 162, 89, 0.15); color: var(--success-green); }
.zeZ4FOcl { background: rgba(13, 122, 199, 0.15); color: var(--accent-1); }
.F54NMDCW { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.45); }
._8j4R8WU { background: rgba(220, 80, 80, 0.12); color: #ef6a6a; }
.EZOsx3V6 { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); }
.u6enqQlW {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
margin-left: 0.15rem;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.QJQ5p5F9 {
transform: rotate(180deg);
}
/* Sub-meta row - capacity progress + sale window. Always visible
(collapsed and expanded) so the manager can scan inventory at a
glance without expanding every card. */
.Nkqe_t00 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 0.9rem 0.7rem;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.ILJagCjG {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.t9jCWdKt {
color: rgba(255, 255, 255, 0.25);
}
.Dfsx1L2b {
flex: 1 0 100%;
height: 3px;
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
overflow: hidden;
margin-top: 0.35rem;
}
.p_VyABKz {
height: 100%;
background: linear-gradient(90deg, var(--accent-1), #06b6d4);
transition: width 0.3s ease;
}
/* Smooth collapse wrapper. Uses the grid-template-rows trick: the
parent grid animates between 0fr (closed) and 1fr (open), and the
inner row hides overflow so the body content slides cleanly. This
beats max-height transitions because it adapts to whatever height
the body content actually needs (no magic constant), and it works
on every modern browser without JS measurement. */
.SzdI03UX {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nSY67taw {
grid-template-rows: 1fr;
}
.SzdI03UX > .LYmfQE8S {
overflow: hidden;
min-height: 0;
/* Border + padding only matter once open. Fade them in along with
the height so the closed state is a clean tight card. */
border-top: 1px solid rgba(255, 255, 255, 0);
padding-top: 0;
padding-bottom: 0;
transition:
border-top-color 0.28s ease,
padding-top 0.28s ease,
padding-bottom 0.28s ease;
}
.nSY67taw > .LYmfQE8S {
border-top-color: rgba(255, 255, 255, 0.05);
padding-top: 1rem;
padding-bottom: 1rem;
/* Same `overflow: visible` trick as `.release_card_open` - delayed
until the height grow finishes so the calendar popover can
render outside the body bounds without leaking during the
open animation. Closing snaps overflow back to hidden so the
height shrink reads cleanly. */
overflow: visible;
transition:
border-top-color 0.28s ease,
padding-top 0.28s ease,
padding-bottom 0.28s ease,
overflow 0s 0.28s;
}
/* Expanded form body */
.LYmfQE8S {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 0.9rem;
}
/* Inputs / selects / textareas inside a release card render with their
own border + padding (the global `.input` rule is borderless and
relies on a wrapper, but here we want each control to stand on its
own). */
.LYmfQE8S .jDyRrq3j,
.LYmfQE8S select.jDyRrq3j,
.LYmfQE8S .OrThVFDi {
width: 100%;
padding: 0.6rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 8px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
transition: border-color 0.15s ease;
}
.LYmfQE8S .jDyRrq3j:focus,
.LYmfQE8S select.jDyRrq3j:focus,
.LYmfQE8S .OrThVFDi:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.04);
}
.LYmfQE8S .jDyRrq3j:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.OrThVFDi {
resize: vertical;
min-height: 70px;
line-height: 1.5;
font-family: var(--font-family);
}
/* Browser-level styling helpers for native pickers */
.LYmfQE8S select.jDyRrq3j {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 14px;
padding-right: 2.25rem;
}
.LYmfQE8S input[type="datetime-local"] {
color-scheme: dark;
}
/* Layout rows inside the form body */
.JNVWPsNm {
display: flex;
gap: 0.5rem;
}
.Ax_gMW21 {
display: flex;
align-items: center;
gap: 0.75rem;
}
.Ax_gMW21 .jDyRrq3j {
flex: 1 1;
min-width: 0;
}
.dmY_p51R {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.75rem;
gap: 0.75rem;
}
@media (max-width: 480px) {
.dmY_p51R {
grid-template-columns: 1fr;
}
}
.fhaFE02r {
margin-top: 0.5rem;
}
/* ── Unlimited check (sits next to the quantity input) ──────── */
/* Wraps our Checkbox + a label as a single click target. Visually a
subtle pill that looks at-home next to the number input. */
.pqx9OBQ1 {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 8px;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
transition: border-color 0.15s ease;
}
.pqx9OBQ1:hover {
border-color: #3d4052;
}
/* ── Toggle row (pill-switch settings card) ─────────────────── */
/* Title + helper copy on the left, Toggle on the right. Mirrors the
production "Auto Approve Requests" card. Used for secret release,
waitlist, and any other settings-style boolean. */
.EeTuS1l4 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0.85rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #2d2f39;
border-radius: 8px;
transition: border-color 0.15s ease;
}
.EeTuS1l4:hover {
border-color: #3d4052;
}
.oXKjw79c {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1 1;
}
.V4fgOZLs {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.QoGH_rWw {
font-size: 11px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.5);
}
/* ── Release card actions (delete) ────────────────────────── */
.xvvPuzfi {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.65rem;
margin-top: 0.25rem;
}
/* Inline lock reason shown next to a disabled "Delete release" button.
Soft amber pill makes the gate obvious without screaming. */
.V0wTRJga {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.25);
border-radius: 7px;
color: rgba(245, 158, 11, 0.95);
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
}
.V0wTRJga i { font-size: 10px; opacity: 0.85; }
.oVrW4WBo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.85rem;
background: rgba(220, 80, 80, 0.06);
border: 1px solid rgba(220, 80, 80, 0.2);
border-radius: 7px;
color: #ef6a6a;
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.oVrW4WBo:hover {
background: rgba(220, 80, 80, 0.12);
}
/* ── "Create online release" button ───────────────────────── */
.zbeZXjmb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
background: rgba(13, 122, 199, 0.05);
border: 1px dashed rgba(13, 122, 199, 0.4);
border-radius: 10px;
color: var(--accent-1);
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.zbeZXjmb:hover {
background: rgba(13, 122, 199, 0.1);
border-color: rgba(13, 122, 199, 0.7);
}
/* ── Performers - Spotify-style search + lineup cards ─────── */
/* Search bar wrapper. Same dark-input look as the rest of the
editor; the Spotify icon gives it identity without a heavy
green-on-green production palette. */
.J3QJw3VZ {
position: relative;
margin-top: 0.25rem;
}
.t0T5t6Yz {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.t0T5t6Yz:focus-within,
.Vv3it0DE {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}
.t0T5t6Yz > i:first-child {
color: #1ed760; /* Spotify-ish green for the brand cue */
font-size: 16px;
flex-shrink: 0;
}
.drj_3peA {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
}
.drj_3peA::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.i007YUWQ {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
animation: Ohet64Tq 0.85s linear infinite;
}
@keyframes Ohet64Tq {
to { transform: rotate(360deg); }
}
/* Dropdown menu - fades in below the search field. Constrained
height so a runaway search doesn't push the form around. */
.OWl923Eo {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
/* Sit above both the sticky header (z-50) and chip nav (z-49) so
the dropdown opens over the topbar like a true popover, matching
how it already overlays the bottom footer. */
z-index: 60;
background: var(--bg-dark);
border: 1px solid #2d2f39;
border-radius: 10px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
padding: 0.3rem;
display: flex;
flex-direction: column;
max-height: 360px;
overflow-y: auto;
animation: cqMkO93x 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cqMkO93x {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.aW3g8bKl,
.PkrzDkwx {
padding: 0.85rem 0.85rem;
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.aW3g8bKl i {
animation: Ohet64Tq 0.85s linear infinite;
}
.Qt35cRPn {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.6rem;
background: transparent;
border: none;
border-radius: 7px;
color: var(--white);
font-family: var(--font-family);
cursor: pointer;
text-align: left;
transition: background 0.12s ease;
}
.Qt35cRPn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.04);
}
.P93Cmm0q {
opacity: 0.55;
cursor: not-allowed;
}
.ufVSTlFs {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
}
.CCW7ku4v {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
font-size: 13px;
flex-shrink: 0;
}
.KUp5NOcE {
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.p3a840on {
color: var(--white);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lluRCK8g {
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._nZuKlMH {
color: #1ed760;
font-size: 14px;
flex-shrink: 0;
}
.L2Uf4j35 {
color: #4ade80;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
}
.HbNxPOoM {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 0.3rem 0.4rem;
}
.P12n99Mc .p3a840on {
color: var(--accent-1);
}
.wKeiH4xl {
display: flex;
gap: 0.4rem;
padding: 0.4rem 0.5rem 0.5rem;
}
.Iu1JaM0s {
flex: 1 1;
min-width: 0;
padding: 0.5rem 0.7rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 7px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
outline: none;
transition: border-color 0.15s ease;
}
.Iu1JaM0s:focus {
border-color: var(--accent-1);
}
.quy1AXen {
padding: 0.5rem 0.95rem;
background: var(--accent-1);
border: 1px solid var(--accent-1);
border-radius: 7px;
color: #fff;
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.quy1AXen:hover:not(:disabled) {
background: #0a6cb0;
}
.quy1AXen:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Lineup list */
.UqmtqxH6 {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: 0.85rem;
}
.D_QVJIZI {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 1.5rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed #2d2f39;
border-radius: 10px;
text-align: center;
}
.D_QVJIZI > i {
color: rgba(255, 255, 255, 0.3);
font-size: 22px;
margin-bottom: 0.2rem;
}
.D_QVJIZI p {
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
font-weight: 600;
margin: 0;
}
.D_QVJIZI span {
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
}
.GcbPpigd {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.75rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.15s ease;
}
.GcbPpigd:hover {
border-color: #3d4052;
}
.bCDShDRe {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bCDShDRe > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gqfVydhL {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Spotify badge in the bottom-right corner of the photo - small
green dot marks the artist as imported (vs. custom-added). */
.MqNt6Uci {
position: absolute;
bottom: -2px;
right: -2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #1ed760;
color: #000;
font-size: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #1a1c24;
overflow: visible;
}
.F1yG81wo {
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.U9MvD0xJ {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.GRRcijsW {
color: var(--white);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.ktaZrAiL {
width: 28px;
height: 28px;
border-radius: 6px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
margin-top: 0.45rem;
transition: all 0.12s ease;
}
.ktaZrAiL:hover {
background: rgba(239, 68, 68, 0.18);
color: #ef6a6a;
}
/* ── Mobile fallback ──────────────────────────────────────── */
@media (max-width: 600px) {
.vQQYEVfq { padding: 0.5rem 0.75rem; }
.NiBmJO5x { padding: 0.85rem 1rem; }
}
/* Pill switch - 38×22 with a 18px white thumb that translates 16px on. */
.KgWBkU7D {
position: relative;
width: 38px;
height: 22px;
padding: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
flex-shrink: 0;
}
.KgWBkU7D:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.14);
}
.sRMRft87 {
background: var(--accent-1);
border-color: var(--accent-1);
}
.sRMRft87:hover:not(:disabled) {
background: #0a6cb0;
}
.KgWBkU7D:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.Kf0JV3R8 {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: transform 0.18s ease;
}
.sRMRft87 .Kf0JV3R8 {
transform: translateX(16px);
}
.KgWBkU7D:focus-visible {
outline: 2px solid rgba(13, 122, 199, 0.55);
outline-offset: 2px;
}
.VGCgHt14 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
background: rgba(255, 255, 255, 0.02);
border: 1.5px solid rgba(255, 255, 255, 0.25);
border-radius: 4px;
color: transparent;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.VGCgHt14:hover:not(:disabled) {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.05);
}
.Q7_cwe1g {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
}
.Q7_cwe1g:hover:not(:disabled) {
background: #0a6cb0;
border-color: #0a6cb0;
}
.Q7_cwe1g i {
font-size: 10px;
}
.VGCgHt14:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.VGCgHt14:focus-visible {
outline: 2px solid rgba(13, 122, 199, 0.55);
outline-offset: 2px;
}
/* Wrapper holds the trigger + the absolutely-positioned popover. */
.OleV9izF {
position: relative;
width: 100%;
}
/* Trigger button - styled to look like the editor's other text inputs
so it sits naturally in the form. */
.nkW8BhDm {
display: inline-flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.6rem 0.85rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #2d2f39;
border-radius: 8px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s ease;
text-align: left;
}
.nkW8BhDm:hover {
border-color: #3d4052;
}
.nkW8BhDm > i:first-child {
color: var(--accent-1);
font-size: 13px;
}
.nkW8BhDm > span {
flex: 1 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wqvz7Zb5 {
color: rgba(255, 255, 255, 0.35) !important;
}
.bkEXgykA {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
}
.nkW8BhDm:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Popover - floats below the trigger. Wide enough for calendar +
time columns side-by-side; collapses to stacked on narrow widths. */
.ggir_HFj {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 200;
width: 360px;
background: #1a1c24;
border: 1px solid #2d2f39;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
overflow: hidden;
font-family: var(--font-family);
animation: NKcsBLy6 0.12s ease-out;
}
._B6mZ74x {
left: auto;
right: 0;
}
@keyframes NKcsBLy6 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Quick-pick chips above the calendar */
.GFLytlU6 {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0.7rem 0.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.015);
}
.BzDJnDiZ {
padding: 0.3rem 0.65rem;
background: rgba(13, 122, 199, 0.1);
border: 1px solid rgba(13, 122, 199, 0.3);
border-radius: 999px;
color: var(--accent-1);
font-family: var(--font-family);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.BzDJnDiZ:hover {
background: rgba(13, 122, 199, 0.2);
}
/* Body - calendar (left) + time columns (right) */
.HZrl_ywf {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 0;
gap: 0;
}
/* Calendar */
.net2spMy {
padding: 0.7rem 0.8rem 0.85rem;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.w67B5fxZ {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
margin-bottom: 0.5rem;
}
.wcyeHm2s {
flex: 1 1;
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.2px;
}
.NV29CSz8 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: transparent;
border: none;
border-radius: 5px;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
cursor: pointer;
transition: all 0.15s ease;
}
.NV29CSz8:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
}
/* Day-of-week header row */
.K6TMrXmt {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
gap: 2px;
margin-bottom: 4px;
}
.hXOKzuOh {
text-align: center;
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 0;
}
/* Day grid */
.fKN1VJJa {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
gap: 2px;
}
.RzKpxhsL {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 auto;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--white);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
}
.RzKpxhsL:hover:not(:disabled):not(.panpjynb) {
background: rgba(255, 255, 255, 0.06);
}
/* "Today" indicator - outline ring, distinct from selected.
Production conflates these; we split them so the user can tell
"this is today" from "this is what I picked" at a glance. */
.YqGBIqkr {
border-color: rgba(13, 122, 199, 0.55);
color: var(--accent-1);
font-weight: 700;
}
/* Selected day - filled blue. Wins over today's border styling. */
.panpjynb {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
font-weight: 700;
}
.panpjynb:hover {
background: #0a6cb0;
}
.JolsUIjV {
color: rgba(255, 255, 255, 0.2);
}
.vZJapFfs {
color: rgba(255, 255, 255, 0.12);
cursor: not-allowed;
}
/* Time columns */
.UZXRJOxV {
display: grid;
grid-template-columns: repeat(3, 44px);
max-height: 240px;
padding: 0.4rem 0.4rem;
overflow: hidden;
}
.vtwqPDDp {
display: flex;
flex-direction: column;
gap: 1px;
overflow-y: auto;
padding: 0 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.vtwqPDDp::-webkit-scrollbar {
width: 4px;
}
.vtwqPDDp::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
}
.DuFdzzbF {
flex-shrink: 0;
padding: 0.4rem 0;
background: transparent;
border: none;
border-radius: 5px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
text-align: center;
}
.DuFdzzbF:hover:not(.F1RAi7O9) {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
}
.F1RAi7O9 {
background: var(--accent-1);
color: #fff;
font-weight: 700;
}
/* Footer - Now (left), Cancel + OK (right) */
.WFiB8AsR {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.7rem 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.015);
}
.r1harDvw {
background: transparent;
border: none;
color: var(--accent-1);
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0.3rem 0.5rem;
border-radius: 5px;
transition: background 0.15s ease;
}
.r1harDvw:hover {
background: rgba(13, 122, 199, 0.08);
}
.fOQnpS3_ {
display: inline-flex;
gap: 0.4rem;
}
.QLwY17bt,
.jcQJu1az {
padding: 0.45rem 0.95rem;
border-radius: 7px;
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.QLwY17bt {
background: transparent;
border: 1px solid #2d2f39;
color: rgba(255, 255, 255, 0.75);
}
.QLwY17bt:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
}
.jcQJu1az {
background: var(--accent-1);
border: 1px solid var(--accent-1);
color: #fff;
}
.jcQJu1az:hover {
background: #0a6cb0;
border-color: #0a6cb0;
}
/* Narrow drawer fallback - popover slightly narrower so it fits
without overflowing into the document scroll surface. */
@media (max-width: 480px) {
.ggir_HFj {
width: min(340px, calc(100vw - 24px));
}
}
/* ╭──────────────────────────────────────────────────────────╮
│ CustomDateTimePicker styles │
│ │
│ Compact dark popover. Calendar left, stepper time right. │
│ No scroll wheels, no glow on selection - reads as a │
│ definitive control surface. │
╰──────────────────────────────────────────────────────────╯ */
.MMFXRiGa {
position: relative;
width: 100%;
font-family: var(--font-family);
}
/* ── Trigger button ─────────────────────────────────────────── */
.QUriS2Ko {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.8rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2d2f39;
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
text-align: left;
}
.QUriS2Ko:hover:not(:disabled) {
border-color: #3a3c48;
background: rgba(255, 255, 255, 0.05);
}
.PuBsYwu_ {
border-color: var(--accent-1) !important;
background: rgba(13, 122, 199, 0.08) !important;
box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}
.V_UBOduH { opacity: 0.5; cursor: not-allowed; }
.NFySD_5X {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(13, 122, 199, 0.16);
color: var(--accent-1);
border-radius: 6px;
font-size: 11px;
flex-shrink: 0;
}
.aJkJUqow, .f3qON1Tn {
flex: 1 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.f3qON1Tn {
color: rgba(255, 255, 255, 0.35);
font-weight: 400;
}
._2Bp4Ay_ {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
transition: transform 0.18s ease;
}
/* ── Popover ────────────────────────────────────────────────── */
/* Popover is a normal absolute child of the trigger wrapper. It
scrolls with the page like any other element and always opens
immediately below the trigger (top: 100% + a small gap). If it
overflows the surrounding scroll container, the user just scrolls
to reveal it - no portal, no fixed positioning, no flips. */
.fFqnTJhU {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
width: 460px;
max-width: calc(100vw - 1rem);
background: rgba(20, 22, 30, 0.96);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* Below the EditEventDrawer's sticky topbar (z:3) and chip nav
(z:2) so the popover slips behind them when the user scrolls
the form up. Above sibling form fields so adjacent inputs
don't punch through it. */
z-index: 1;
overflow: hidden;
transform-origin: top left;
animation: eCRf0lzA 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.beuWlsqO {
left: auto;
right: 0;
transform-origin: top right;
}
@keyframes eCRf0lzA {
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Header (single-line live readout) ──────────────────────
Same background as the footer so the popover reads as one
coherent surface with body in the middle. Single-line text
mirrors the trigger button label exactly. */
.V5E0VWu0 {
padding: 0.7rem 1rem;
background: rgba(0, 0, 0, 0.22);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.eLDvdNe7 {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Body: calendar + time side by side ─────────────────────── */
.UGrnMhK_ {
display: flex;
align-items: stretch;
}
.IL_hU5xf {
flex: 1 1;
min-width: 0;
padding: 0.7rem 0.85rem 0.85rem;
}
.pSaM2hFR {
width: 168px;
flex-shrink: 0;
padding: 0.7rem 0.85rem 0.85rem;
border-left: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
align-items: stretch;
}
@media (max-width: 520px) {
.fFqnTJhU { width: calc(100vw - 1rem); }
.UGrnMhK_ { flex-direction: column; }
.pSaM2hFR {
width: auto;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
}
/* ── Calendar header (month + year buttons, side arrows) ────── */
.PXrPMdYU {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
margin-bottom: 0.55rem;
}
.s84Pt2gj {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
}
.s84Pt2gj:hover {
background: rgba(255, 255, 255, 0.09);
color: var(--white);
}
.s84Pt2gj:active { transform: scale(0.92); }
.eZeZ9t7m {
display: flex;
align-items: center;
gap: 0.3rem;
flex: 1 1;
justify-content: center;
}
.Yz5fPGMP {
background: rgba(255, 255, 255, 0.03);
border: 1px solid transparent;
border-radius: 7px;
padding: 0.3rem 0.55rem;
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.15px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.Yz5fPGMP:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.08);
}
.M7mjh0kj {
background: rgba(13, 122, 199, 0.18);
border-color: rgba(13, 122, 199, 0.4);
color: var(--white);
}
/* ── Day grid ──────────────────────────────────────────────── */
.T5H7lLAH {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0.15rem;
gap: 0.15rem;
margin-bottom: 0.3rem;
}
.TThTzVsb {
text-align: center;
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.32);
letter-spacing: 0.6px;
text-transform: uppercase;
}
.XdKGPtyL {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0.2rem;
gap: 0.2rem;
}
.q6cc45X0 {
width: 100%;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 8px;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.q6cc45X0:hover:not(:disabled):not(.erbz4c8y) {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
.uQfBfD1h { color: rgba(255, 255, 255, 0.22); }
.SP_ps7AG {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
color: var(--white);
}
/* Flat fill on selection - no glow, no scale. */
.erbz4c8y {
background: var(--accent-1);
color: var(--white);
font-weight: 700;
}
.H5GncFmN { opacity: 0.25; cursor: not-allowed; }
/* ── Month + year grids (replace day grid when clicked) ───── */
.v7CEDt8Y {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.4rem;
gap: 0.4rem;
padding: 0.3rem 0 0;
}
.j45QpoQ1 {
padding: 0.85rem 0.5rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.j45QpoQ1:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.1);
color: var(--white);
}
.nOwpadz1 {
background: var(--accent-1);
border-color: var(--accent-1);
color: var(--white);
}
.nOwpadz1:hover {
background: var(--accent-1);
border-color: var(--accent-1);
}
/* ── Time pane: stepper inputs + AM/PM toggle ───────────────── */
.npcPrH73 {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
margin-bottom: 0.55rem;
}
.LXRzes_j {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin-bottom: 0.7rem;
}
.rb8rx08D {
display: flex;
flex-direction: column;
align-items: stretch;
width: 56px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease;
}
.rb8rx08D:hover {
border-color: rgba(13, 122, 199, 0.35);
background: rgba(255, 255, 255, 0.05);
}
.K0cfFmN2 {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
font-size: 10px;
transition: background 0.12s ease, color 0.12s ease;
}
.K0cfFmN2:hover {
background: rgba(13, 122, 199, 0.16);
color: var(--white);
}
.K0cfFmN2:active { background: rgba(13, 122, 199, 0.28); }
.cpfIKjTo {
width: 100%;
padding: 0.5rem 0;
text-align: center;
background: transparent;
border: none;
outline: none;
font-family: var(--font-family);
font-size: 20px;
font-weight: 700;
color: var(--white);
letter-spacing: 1px;
line-height: 1;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
caret-color: var(--accent-1);
cursor: text;
-moz-appearance: textfield;
}
.cpfIKjTo::-webkit-outer-spin-button,
.cpfIKjTo::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cpfIKjTo:focus {
background: rgba(13, 122, 199, 0.12);
}
.tN9uUu8C {
font-size: 22px;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
line-height: 1;
padding-bottom: 2px;
}
.gqydgDQ4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0;
gap: 0;
padding: 3px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 9px;
}
.trUOWs0p {
padding: 0.4rem 0.5rem;
background: transparent;
border: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.trUOWs0p:hover:not(.ocuAuo2l) {
color: var(--white);
}
.ocuAuo2l {
background: var(--accent-1);
color: var(--white);
}
/* ── Footer ────────────────────────────────────────────────── */
.EK74UatA {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
padding: 0.65rem 0.85rem;
background: rgba(0, 0, 0, 0.22);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.F1qdf2Tf { flex: 1 1; }
.vnsUaXob {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 7px;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vnsUaXob:hover {
background: rgba(13, 122, 199, 0.1);
color: var(--white);
border-color: rgba(13, 122, 199, 0.32);
}
.vnsUaXob i {
font-size: 11px;
color: var(--accent-1);
}
._CzcHwrN {
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 7px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
._CzcHwrN:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.14);
}
.bymIBYDu {
padding: 0.45rem 1rem;
background: var(--accent-1);
border: 1px solid var(--accent-1);
border-radius: 7px;
color: var(--white);
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease, transform 0.08s ease;
}
.bymIBYDu:hover { filter: brightness(1.15); }
.bymIBYDu:active { transform: scale(0.97); }
/* Shared side-drawer chrome.
──────────────────────────────────────────────────────────────
Canonical drawer shell used by surfaces outside Dashboard
(Team and, in a follow-up pass, Guestiis + DeleteEvent). The
dashboard drawers currently carry a mirrored copy of these
rules in Dashboard.module.css - when more popups migrate we
can collapse those into `composes` references against this
module. Class names match Dashboard.module.css so a future
dedup is mechanical.
────────────────────────────────────────────────────────────── */
.G2P6kI_x {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
animation: KGxWfngY 0.2s ease;
}
.vqQrAEUZ {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 680px;
max-width: 92vw;
background: rgba(20, 22, 30, 0.78);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border-left: 1px solid rgba(255, 255, 255, 0.08);
z-index: 1001;
display: flex;
flex-direction: column;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
animation: WJGfFhcS 0.28s ease;
}
/* InviteTeam picker reads better narrower - single column of role
sections doesn't need a full 680px. Stacked drawers (PromoterLimits
over InviteTeam) sit above with a slight inset so the layered
stack reads as intended. */
.gd6tTdeO {
width: 540px;
}
.aNpymBRl {
z-index: 1003;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}
.gLhcbxAc {
z-index: 1002;
background: rgba(0, 0, 0, 0.4);
}
@keyframes KGxWfngY {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Nc3Ho7zo {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes WJGfFhcS {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes vZpAp3aD {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.d361ukZl {
animation: vZpAp3aD 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.BH7f_WG5 {
animation: Nc3Ho7zo 0.22s ease forwards;
}
/* Frosted-glass top chrome - same recipe as the dashboard drawers:
light gradient fill + subtle inner highlight + backdrop-blur read
as a glass plate floating over the body. */
.jyjubPEZ {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.4rem 1.5rem;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.fMua92U1 {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
font-family: var(--font-family);
transition: all 0.15s ease;
}
.fMua92U1:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
border-color: #3d4052;
}
.yi4dZMSs {
flex: 1 1;
min-width: 0;
}
.q7sAs81_ {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--white);
}
.YgIFMQ8i {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
font-size: 12px;
color: #888;
flex-wrap: wrap;
}
.O76t6FSo {
color: #444;
}
.FbNi4ikk {
flex: 1 1;
overflow-y: auto;
padding: 1.5rem;
background: var(--bg-dark);
}
.FbNi4ikk::-webkit-scrollbar { width: 4px; }
.FbNi4ikk::-webkit-scrollbar-track { background: transparent; }
.FbNi4ikk::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* Sticky bottom chrome - mirrors the header treatment so the drawer
reads as a piece of glass with frosted edges and a solid body in
between. Footer is optional; only renders when an action row is
needed (Invite, Save). */
.LXBtbVv8 {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background:
linear-gradient(0deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 -4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.ytTV9i93 {
flex: 1 1;
}
.cyU5nNUe {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.1rem;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.cyU5nNUe:hover:not(:disabled) {
background: #1389d8;
}
.cyU5nNUe:active:not(:disabled) {
transform: scale(0.98);
}
.cyU5nNUe:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cyU5nNUe i {
font-size: 11px;
}
.zP_pynK6 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1rem;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: var(--font-family);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zP_pynK6:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.14);
}
.zP_pynK6:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.zP_pynK6 i {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.mKupTOsQ {
margin-bottom: 1.75rem;
}
.mKupTOsQ:last-child {
margin-bottom: 0;
}
.ZWTv1TCq {
margin: 0 0 0.85rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 600px) {
.vqQrAEUZ,
.gd6tTdeO {
width: 100vw;
max-width: 100vw;
}
.aNpymBRl {
width: 100vw;
}
.jyjubPEZ {
padding: 1.1rem 1.1rem;
}
.FbNi4ikk {
padding: 1.1rem;
}
.LXBtbVv8 {
padding: 0.85rem 1.1rem;
}
}
/* Header layout - avatar + text side by side */
.Cq_pCgi0 {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
/* Clickable avatar wrapper */
.QIf52rho {
background: none;
border: none;
padding: 0;
cursor: pointer;
border-radius: 50%;
flex-shrink: 0;
transition: opacity 0.15s, transform 0.15s;
}
.QIf52rho:hover { opacity: 0.8; transform: scale(1.05); }
/* Clickable guest name */
.M7SOCHhH {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 18px;
font-weight: 800;
color: var(--white);
text-align: left;
transition: color 0.15s;
line-height: 1.2;
}
.M7SOCHhH:hover { color: var(--accent-1); }
.yhWu2RIn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: rgba(255,255,255,0.65);
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
.eW7qFds9 {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.KnDa8xZ2 {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
}
/* Body overrides */
.ntBQhngO {
background: var(--bg-dark);
}
/* Detail rows */
.l8kIRGdz {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.l8kIRGdz:last-child { border-bottom: none; }
.rGDVo9Rx {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
flex-shrink: 0;
min-width: 130px;
}
.rGDVo9Rx i { width: 14px; text-align: center; opacity: 0.55; }
.mr0XwE4a {
font-size: 13px;
font-weight: 600;
color: var(--white);
text-align: right;
}
/* Guests list */
.aLMs4Bfr {
display: flex;
flex-direction: column;
gap: 6px;
}
.AndiMpi9 {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.NmAvh212 {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.6);
flex-shrink: 0;
}
.MQOLsCJO {
flex: 1 1;
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.rPwWc8ya {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #f59e0b;
}
/* Note */
.rNhcFR00 {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
/* ── Return guest header badge ─────────────────────────────────────────── */
.p8V79d7M {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.45);
flex-shrink: 0;
}
/* ── Guest history panel ────────────────────────────────────────────────── */
.KEqeEA_O {
display: flex;
align-items: center;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.kp4URWo_ {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 12px 8px;
}
.pszv2QbK {
font-size: 16px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.3px;
line-height: 1;
}
.BJ9CiY5d {
font-size: 9.5px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.tBdQ1kNw {
width: 1px;
height: 32px;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
/* Guest tags */
.EeeL5zQ6 {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.JJshABQS {
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: rgba(23,113,230,0.08);
border: 1px solid rgba(23,113,230,0.18);
border-radius: 20px;
font-size: 11px;
font-weight: 600;
color: var(--accent-1);
}
/* Recent events list */
.jceqZx4e {
margin: 0 0 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255,255,255,0.3);
}
.CaKiMNTq {
display: flex;
flex-direction: column;
gap: 4px;
}
.uO86zy_s {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.Dg3d6Egh {
width: 28px;
height: 28px;
border-radius: 8px;
background: color-mix(in srgb, var(--ec) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ec) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--ec);
flex-shrink: 0;
}
.a_eR7b8x {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.IFVmrVSu {
font-size: 12px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Q7BQYS7O {
font-size: 10.5px;
color: var(--text-muted);
}
.EMMIYB46 {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
flex-shrink: 0;
}
/* ── Instagram panel ───────────────────────────────────────────────────── */
.rjBWmH4V {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.NRGB1N6L {
position: relative;
flex-shrink: 0;
}
.UKp5iz2V {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
/* Instagram story-ring gradient */
.rHKfKF3L {
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(
#f9ce34 0%,
#ee2a7b 40%,
#6228d7 70%,
#f9ce34 100%
);
z-index: 0;
mask: radial-gradient(circle, transparent 56%, black 57%);
-webkit-mask: radial-gradient(circle, transparent 56%, black 57%);
}
.DLzrBjf0 {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.vJpfkcRV {
font-size: 13px;
font-weight: 700;
color: var(--white);
}
.bT_3vXZL {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.QXQPiQXb {
display: flex;
align-items: center;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.kEqYOW7r {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 10px 6px;
}
.FYmwigti {
font-size: 15px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.3px;
}
.Yy9RXXMC {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.FUwlRfwH {
width: 1px;
height: 32px;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
/* 3-image feed grid */
.mRCsIqkv {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 4px;
gap: 4px;
border-radius: 8px;
overflow: hidden;
}
._CN3mdQn {
aspect-ratio: 1;
overflow: hidden;
background: rgba(255,255,255,0.05);
}
.oMA25fXt {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
._CN3mdQn:hover .oMA25fXt {
transform: scale(1.06);
}
.K_PdBlE0 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.15);
font-size: 20px;
}
/* ── Booth section ─────────────────────────────────────────────────────── */
.palj8g0c {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.MGowczuR {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: rgba(129,140,248,0.1);
border: 1px solid rgba(129,140,248,0.25);
border-radius: 8px;
font-size: 14px;
font-weight: 800;
color: #818cf8;
}
.eyV0DXA9 {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.ozbYdx6n {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.pWZRWaJa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
font-weight: 700;
color: var(--white);
margin-bottom: 2px;
}
/* Price tag inline with the package name. Muted so the name is the
dominant element; price sits as a quiet bullet-prefixed value. */
.FBqYSaqy {
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.OoeoZR6D {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-secondary);
}
.OoeoZR6D i { color: #22c55e; font-size: 10px; }
.ZF6GwKUv {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
}
.JdzPAk5B {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
font-size: 13px;
color: var(--text-secondary);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.JdzPAk5B:last-child { border-bottom: none; }
.RE6cq79J { color: #22c55e; font-size: 12.5px; }
.n4EbMcJA {
font-weight: 700;
color: var(--white) !important;
background: rgba(255,255,255,0.02);
font-size: 13.5px !important;
}
.sAKry4je {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
/* Status badges in footer */
.NuWBVdxC {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(16,185,129,0.1);
color: #10b981;
border: 1px solid rgba(16,185,129,0.25);
border-radius: 8px;
font-size: 13px;
font-weight: 700;
}
.ib6IvxkD {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(239,68,68,0.1);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.25);
border-radius: 8px;
font-size: 13px;
font-weight: 700;
}
/* Future-date banner - sits at the top of the body when the request
targets a different instance of a recurring series than the event
the operator is currently viewing. Amber palette + bold label so
the operator can't approve it without noticing the date shift. */
.c7eTSqiT {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
margin-bottom: 14px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 10px;
color: #f59e0b;
}
.fef6t8cc {
font-size: 16px;
line-height: 1.2;
margin-top: 1px;
}
.efp_m4vU {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12.5px;
color: var(--text-secondary);
}
.YryF23XK {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f59e0b;
}
.fdoEppUe {
color: var(--text-primary);
font-weight: 600;
}
/* Guest row */
.gw_TsrCq {
display: flex;
align-items: center;
gap: 12px;
}
.czvg5P1E {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.65);
flex-shrink: 0;
}
.nXXysOp5 {
font-size: 14px;
font-weight: 700;
color: var(--white);
}
/* Event row */
.Iq17P5L5 {
display: flex;
align-items: center;
gap: 12px;
}
.rHsTajAa {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(23,113,230, 0.12);
background: rgba(var(--accent-1-rgb, 23,113,230), 0.12);
border: 1px solid rgba(23,113,230, 0.2);
border: 1px solid rgba(var(--accent-1-rgb, 23,113,230), 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-1);
font-size: 14px;
flex-shrink: 0;
}
.oXbjcHti {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.XL7VO7W_ {
font-size: 13px;
font-weight: 700;
color: var(--white);
}
.ezPVFErL {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text-muted);
}
.WAvAnJcO {
display: inline-flex;
align-items: center;
gap: 4px;
color: #f59e0b;
font-size: 10px;
font-weight: 700;
}
/* Ticket list */
.dUezFErw {
display: flex;
flex-direction: column;
gap: 6px;
}
.hSbAQPMY {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
background: rgba(255,255,255,0.02);
cursor: pointer;
transition: all 0.12s;
}
.hSbAQPMY:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.12);
}
.RRJIDQrj {
background: rgba(23,113,230, 0.08) !important;
background: rgba(var(--accent-1-rgb, 23,113,230), 0.08) !important;
border-color: rgba(23,113,230, 0.3) !important;
border-color: rgba(var(--accent-1-rgb, 23,113,230), 0.3) !important;
}
.E6HByzoF {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 10px;
color: #fff;
transition: all 0.12s;
}
.sNs3D6bw {
background: var(--accent-1);
border-color: var(--accent-1);
}
.jY_ydjfS {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.ZwappOrf {
font-size: 13px;
font-weight: 700;
color: var(--white);
}
.faLQOrR5 {
font-size: 11px;
color: var(--text-muted);
}
/* Guests in booking */
.MzPuR_IG {
display: flex;
flex-direction: column;
gap: 4px;
}
.i5bXLwMw {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.Es2updlw {
flex: 1 1;
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.YQkHk_rn {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.4px;
color: #f59e0b;
}
/* Tags */
/* Predefined event tag pills. Mirrors the Guestiis EditTags picker
visual language: subtle chip, optional colour dot from the tag
record, accent-tint when toggled on. */
.oUdOxI2b {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.QUo4i7pC {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
border-radius: 999px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.QUo4i7pC:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
border-color: rgba(255, 255, 255, 0.14);
}
.WmZ2wbrj {
background: rgba(13, 122, 199, 0.18);
border-color: rgba(13, 122, 199, 0.45);
color: var(--white);
}
.WmZ2wbrj i {
font-size: 9px;
color: var(--accent-1);
}
.gSEYDrl4 {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.Xv1IAkPF {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
min-height: 42px;
}
.UfkAnU8q {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(255,255,255,0.08);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--white);
}
.jyjc0jJI {
background: none;
border: none;
padding: 0;
color: var(--text-muted);
cursor: pointer;
font-size: 10px;
line-height: 1;
display: flex;
align-items: center;
}
.jyjc0jJI:hover { color: var(--white); }
.FWFJRJi_ {
flex: 1 1;
min-width: 80px;
background: none;
border: none;
outline: none;
font-family: inherit;
font-size: 13px;
color: var(--white);
}
.FWFJRJi_::placeholder { color: var(--text-muted); }
.CBeD_db5 {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 2200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: dw5tG5HH 0.15s ease;
}
@keyframes dw5tG5HH { from { opacity: 0; } to { opacity: 1; } }
.kIOLyjsB {
width: 100%;
max-width: 400px;
background: #13151f;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0,0,0,0.6);
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
animation: aOEqv_VX 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aOEqv_VX {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.i_DQn_D0 {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #ef4444;
}
.IwrN7SC5 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--white);
}
.XNs1NH9Z {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.XNs1NH9Z strong {
color: var(--white);
font-weight: 700;
}
.H9ji8Kww {
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.H9ji8Kww li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
background: rgba(239,68,68,0.06);
border: 1px solid rgba(239,68,68,0.15);
border-radius: 8px;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.H9ji8Kww li i {
color: #ef4444;
font-size: 13px;
margin-top: 1px;
flex-shrink: 0;
}
.H9ji8Kww li strong {
color: var(--white);
font-weight: 700;
}
.lIT3pCC2 {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 6px;
}
.zNmgWGz9 {
flex: 1 1;
padding: 10px;
background: rgba(255,255,255,0.04);
color: var(--text-secondary);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.zNmgWGz9:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.XZ73HyJ2 {
flex: 1 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px;
background: #ef4444;
color: #fff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.XZ73HyJ2:hover { background: #dc2626; }
/* Header pill */
.jYR1QAZR {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
background: rgba(129,140,248,0.12);
color: #818cf8;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
/* Two-column body */
.HAC6l36y {
flex: 1 1;
display: grid;
grid-template-columns: 340px 1fr;
min-height: 0;
overflow: hidden;
}
/* Left config panel */
.mRxJXWKw {
border-right: 1px solid rgba(255,255,255,0.07);
display: flex;
flex-direction: column;
overflow: hidden;
}
.TJbRMhSV {
flex: 1 1;
overflow-y: auto;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.TJbRMhSV::-webkit-scrollbar { width: 3px; }
.TJbRMhSV::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
/* Right email preview panel */
.jHil0xFM {
background: #080a14;
display: flex;
flex-direction: column;
padding: 20px;
gap: 12px;
overflow: hidden;
}
.ZpSv4N09 {
display: flex;
align-items: center;
gap: 7px;
margin: 0 !important;
}
/* Field groups */
.U6s6cWFO {
display: flex;
flex-direction: column;
gap: 8px;
}
.k_KxngeY {
display: inline-block;
margin-left: 8px;
font-size: 10px;
font-weight: 500;
text-transform: lowercase;
letter-spacing: 0;
background: rgba(255,255,255,0.05);
color: var(--text-muted);
padding: 1px 6px;
border-radius: 10px;
}
/* Payment toggle */
.Wr13U9WX {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px;
gap: 8px;
}
.F3kV8FZs {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
}
.F3kV8FZs:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.jQ5wr9XS {
background: rgba(129,140,248,0.12) !important;
border-color: rgba(129,140,248,0.3) !important;
color: #818cf8 !important;
}
.GwWIjXi2 {
margin: 0;
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.5;
}
.GwWIjXi2 strong { color: var(--white); font-weight: 700; }
/* Message textarea */
.tK7gVz7J {
width: 100%;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
color: var(--white);
resize: vertical;
min-height: 100px;
box-sizing: border-box;
transition: border-color 0.15s;
}
.tK7gVz7J::placeholder { color: var(--text-muted); }
.tK7gVz7J:focus { outline: none; border-color: rgba(129,140,248,0.4); }
/* Summary strip */
.tvli1snk {
display: flex;
align-items: center;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
}
.uQ1dtYtr {
flex: 1 1;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
.S06Y1LvA { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.EZlPpJZR { font-size: 14px; font-weight: 700; color: var(--white); }
.o6b_idsN {
width: 1px;
height: 36px;
background: rgba(255,255,255,0.07);
flex-shrink: 0;
}
/* ── Email chrome (light-themed) ─────────────────────────────────────────── */
.b_12dbhA {
flex: 1 1;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: #f5f5f5;
display: flex;
flex-direction: column;
}
.fJmRlX8I {
background: #e8e8e8;
border-bottom: 1px solid #d0d0d0;
padding: 8px 14px;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.sUHhZNRj { width: 10px; height: 10px; border-radius: 50%; background: #c8c8c8; }
.sUHhZNRj:nth-child(1) { background: #ff5f57; }
.sUHhZNRj:nth-child(2) { background: #febc2e; }
.sUHhZNRj:nth-child(3) { background: #28c840; }
.DBJX4jhb {
margin-left: 8px;
font-size: 11px;
font-weight: 500;
color: #888;
font-family: -apple-system, sans-serif;
}
.FFqbEzUP {
flex: 1 1;
overflow-y: auto;
padding: 20px;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
color: #1a1a1a;
line-height: 1.6;
}
.DsUZ0vR4 { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.iiHoVq9w {
width: 36px; height: 36px; border-radius: 10px;
background: #0d0f1a; color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.rLibiJit { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.j6ehPJ3a { font-weight: 700; color: #111; font-size: 13px; }
.j6ehPJ3a span { font-weight: 400; color: #888; }
.qbrFNVYO { color: #666; }
.GZpCIa99 { font-weight: 600; color: #333; }
.RhLzaXZF { border: none; border-top: 1px solid #e8e8e8; margin: 14px 0; }
.XpupLdMR {
background: #f8f9ff;
border-left: 3px solid #818cf8;
border-radius: 0 6px 6px 0;
padding: 10px 14px;
margin-bottom: 2px;
}
.XpupLdMR p { margin: 0; white-space: pre-wrap; font-style: italic; color: #444; }
.Spi6p_DL {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: #f9fafb; border: 1px dashed #d0d0d0; border-radius: 6px;
color: #aaa; font-size: 12px;
}
.j1B8HuQk { margin-bottom: 2px; }
.OT9ZqfxT {
display: flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 800; color: #111; margin-bottom: 6px;
}
.OT9ZqfxT i { color: #22c55e; }
.stzo_59t { margin: 0; color: #444; font-size: 13px; }
.stzo_59t strong { color: #111; }
.STbpH0Pn {
background: #f9fafb; border: 1px solid #e8e8e8; border-radius: 8px;
padding: 12px 14px; margin: 10px 0;
display: flex; flex-direction: column; gap: 6px;
}
.WvO8Ge4s { display: flex; justify-content: space-between; font-size: 12.5px; color: #333; }
.yqtqh2R5 { color: #888; }
.nNxhqke3 { border-top: 1px solid #e0e0e0; padding-top: 6px; font-weight: 700; font-size: 13px; color: #111 !important; }
.tBc9QWgr { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #555; padding-left: 4px; }
.tBc9QWgr i { color: #22c55e; font-size: 10px; }
.SvJbl7Cu { text-align: center; margin: 14px 0; }
.dpCiQkCE {
display: inline-block; padding: 12px 28px;
background: #0d0f1a; color: #fff; border: none; border-radius: 8px;
font-size: 13px; font-weight: 700; cursor: default; font-family: inherit;
}
.GSGyoLje { font-size: 11px; color: #aaa; margin: 6px 0 0; }
.q1h45FS7 {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 14px; background: #f0fdf4;
border: 1px solid #bbf7d0; border-radius: 6px;
font-size: 12px; color: #15803d; margin: 10px 0;
}
.q1h45FS7 i { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.q1h45FS7 strong { font-weight: 700; }
.__lz30i3 { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #aaa; text-align: center; }
.hk4LCrYp { font-weight: 600; color: #888; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.HAC6l36y { grid-template-columns: 1fr; }
.jHil0xFM { display: none; }
}
/* Team drawer content styles. The drawer chrome (header/footer/body)
lives in IndEvent/drawers/Drawer.module.css; this module just owns
the team-specific bits: search input, picker rows, limit cards. */
/* ── Search bar (sits between header and body) ──────────────── */
.P13UpxXA {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.5rem;
background: rgba(0, 0, 0, 0.18);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
flex-shrink: 0;
}
.Xe38uPoE {
flex: 1 1;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.Xe38uPoE:focus-within {
border-color: rgba(13, 122, 199, 0.5);
background: rgba(255, 255, 255, 0.04);
}
.Xe38uPoE i {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
.Xe38uPoE input {
flex: 1 1;
min-width: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
}
.Xe38uPoE input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.k7XnQcvQ {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: rgba(255, 255, 255, 0.06);
border: none;
border-radius: 50%;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-size: 9px;
}
.k7XnQcvQ:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
}
/* ── Role-grouped picker (InviteTeamDrawer body) ─────────────── */
.pSeTRs7L {
margin-bottom: 1.5rem;
}
.pSeTRs7L:last-child {
margin-bottom: 0;
}
.Bt4m_eQx {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 0.6rem;
}
.KFECPMgn {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.DASmndYZ {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Per-section "Select all / Deselect all" toggle. Lives next to the
count so each role group has its own bulk shortcut - most common
ask is "invite all promoters" but the same affordance makes
"select all scanners" trivial too without bloating the UI. */
.sw4Kyrwl {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.55rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-family);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sw4Kyrwl:hover {
background: rgba(13, 122, 199, 0.12);
border-color: rgba(13, 122, 199, 0.45);
color: var(--white);
}
.sw4Kyrwl i {
font-size: 9px;
color: rgba(255, 255, 255, 0.55);
transition: color 0.15s ease;
}
.sw4Kyrwl:hover i {
color: var(--accent-1);
}
.E2SVDt_t {
background: rgba(13, 122, 199, 0.14);
border-color: rgba(13, 122, 199, 0.5);
color: var(--white);
}
.E2SVDt_t i {
color: var(--accent-1);
}
.r2KNmTsS {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
font-weight: 500;
}
.kMcRnyb5 {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.QYZuA6Ww {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0.85rem;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
cursor: pointer;
font-family: var(--font-family);
text-align: left;
width: 100%;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.QYZuA6Ww:hover {
background: rgba(255, 255, 255, 0.025);
border-color: rgba(255, 255, 255, 0.08);
}
.QYZuA6Ww:active {
transform: scale(0.997);
}
.n2X4socY {
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.08);
}
.n2X4socY:hover {
background: rgba(13, 122, 199, 0.12);
}
._Lh9K5hN {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 13px;
flex-shrink: 0;
}
.goMcGQhT {
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.AnzibU83 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.yUVw0AHY {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.x1bYWdBA {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.18);
background: transparent;
color: transparent;
flex-shrink: 0;
font-size: 10px;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.n2X4socY .x1bYWdBA {
background: var(--accent-1);
border-color: var(--accent-1);
color: var(--white);
}
/* Empty state inside the body when no members match search/filters */
.BjCtgjh1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 3rem 1rem;
color: rgba(255, 255, 255, 0.45);
}
.D7QHVGM7 {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
font-size: 18px;
}
.BjCtgjh1 p {
margin: 0;
font-size: 13px;
font-weight: 500;
}
.iYvb1Ekg {
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
}
/* Loading shimmer (mirrors guest list skeletons for consistency) */
.wqS5INnp {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0.85rem;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
}
.Ut8AISKq {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
animation: pujA8Wtv 1.4s ease-in-out infinite;
}
.Q0aeReVr {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
._0x_V5NT_ {
height: 10px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
animation: pujA8Wtv 1.4s ease-in-out infinite;
}
.a0ngBZA_ { width: 70%; }
.pHyhSimS { width: 45%; }
@keyframes pujA8Wtv {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ── Discard banner (sticky alert above footer when user has selections) ─ */
.XgFow9zy {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.6rem;
background: rgba(13, 122, 199, 0.18);
border: 1px solid rgba(13, 122, 199, 0.4);
border-radius: 999px;
color: var(--white);
font-size: 11px;
font-weight: 600;
font-family: var(--font-family);
}
.XgFow9zy i {
font-size: 9px;
}
/* ── Validation banner inside the body ───────────────────────── */
.F2ET7SJ2 {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.75rem 0.9rem;
background: rgba(249, 115, 22, 0.08);
border: 1px solid rgba(249, 115, 22, 0.3);
border-radius: 8px;
color: #f97316;
font-size: 12px;
font-family: var(--font-family);
margin-bottom: 1rem;
}
.F2ET7SJ2 i {
font-size: 11px;
margin-top: 1px;
}
/* ──────────────────────────────────────────────────────────────
Promoter Limits Drawer · shared-config layout.
The drawer presents ONE form whose values apply to every promoter
in the batch (1 promoter for single edit, N for bulk / pre-invite).
The previous per-promoter card design was retired - sales feedback
was that 95% of the time every promoter gets the same policy and
only a handful of exceptions need bespoke configs (which the
single-edit context still supports).
Visual hierarchy:
1. Optional intro / mixed-values banner
2. Quick action row (Allow all / Allow none / cap-all)
3. Section title strip ("Ticket types · N / M enabled")
4. Stack of ticket type rows (checkbox zone + cap stepper)
────────────────────────────────────────────────────────────── */
.Pa67tIUx {
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
line-height: 1.55;
margin-bottom: 1rem;
}
/* Quick-action row - Allow all / Allow none + cap-all input. */
.t4kAUCCK {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.k9Fy8xsh {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-right: 0.25rem;
}
.uxqsJbXX {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.7rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.uxqsJbXX:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
.uxqsJbXX:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.uxqsJbXX i {
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
}
.E1NeuAl_ {
display: flex;
align-items: center;
gap: 0.45rem;
margin-left: auto;
}
.yvMF2YhB {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
/* ── Ticket type list ─────────────────────────────────────── */
.ynCLwH6P {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 0.6rem;
}
.S7oCgynR {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.tYaYPpP2 {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
}
.TdMWt6lf {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* Ticket type row - static config row. Left zone is the label
(icon + name + price), right zone is the cap stepper. Every row
is always "on" so there's no toggle, hover state, or cursor hint. */
.mNlloFiO {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.75rem;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.j631eUll {
flex: 1 1;
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
padding: 0.15rem 0;
background: none;
border: none;
color: inherit;
font-family: var(--font-family);
text-align: left;
}
.hC6atUKe {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
flex-shrink: 0;
}
.vt2rWDCY .hC6atUKe {
background: rgba(13, 122, 199, 0.16);
color: #5fb8ff;
}
.IQVd7WYz {
flex: 1 1;
min-width: 0;
}
.cNLIBO_x {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.q12mtpAl {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.kX_TrkJG {
flex-shrink: 0;
min-width: 92px;
display: flex;
justify-content: flex-end;
}
.aQUVNsAA {
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
font-style: italic;
}
/* Number stepper */
.HHsFx5bs {
display: flex;
align-items: center;
gap: 0;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.j7jpqBYu {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.j7jpqBYu:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
}
.j7jpqBYu i {
font-size: 10px;
}
.SrJ2Nbwy {
width: 48px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--white);
font-family: var(--font-family);
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.12s ease;
}
.SrJ2Nbwy:focus-within {
background: rgba(13, 122, 199, 0.12);
}
/* Keep input editable - pointer-events removed so the user can click
to focus and type. The infinity overlay (when value is -1) sits
above the input but ignores pointer events so a click still lands
on the input. */
.SrJ2Nbwy input {
width: 100%;
background: transparent;
border: none;
color: inherit;
text-align: center;
font-family: var(--font-family);
font-size: 12px;
font-weight: 600;
outline: none;
cursor: text;
padding: 0.45rem 0;
-moz-appearance: textfield;
}
.SrJ2Nbwy input::-webkit-outer-spin-button,
.SrJ2Nbwy input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.Vp2S6Mbe {
position: absolute;
pointer-events: none;
color: rgba(255, 255, 255, 0.85);
}
/* ── Footer button states (mandatory-limits gate) ──────────────
When at least one selected promoter is missing per-ticket caps,
the secondary button gets an amber treatment + the count pill
shifts to amber so the user reads "this is the required next
step" instead of the usual passive secondary tone. */
.ZKDyU2DF {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: 0.25rem;
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
color: var(--white);
}
.SArLzD3C {
background: rgba(249, 115, 22, 0.85);
color: #1a1d23;
}
.ob4B718l {
background: rgba(249, 115, 22, 0.12) !important;
color: var(--white) !important;
border-color: rgba(249, 115, 22, 0.45) !important;
}
.ob4B718l:hover:not(:disabled) {
background: rgba(249, 115, 22, 0.18) !important;
border-color: rgba(249, 115, 22, 0.6) !important;
}
.ob4B718l i {
color: #f97316 !important;
}
/* ── Loading state for the drawer body ─────────────────────── */
.zJJZlRnO {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
}
.zJJZlRnO img {
width: 80px;
height: 80px;
}
/* Outer wrapper - single scroll surface for the whole Announcements
tab. The parent .content_widget_container has overflow:hidden + a
fixed height, so the composer + intro hint + timeline all share
ONE vertical scroll instead of fighting nested scroll containers.
This avoids the bug where opening the Guestii Compose Filters
pushed the composer below the fold with no way to scroll to it.
Mobile (<= 768px) inherits this naturally - the parent flips to
overflow:visible at that width, so the page-level scroll takes
over and this rule effectively no-ops. */
.rrD534Lf {
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 1.5rem;
/* Always-visible scrollbar - modern browsers hide it by default
on track-pad devices, which made the bottom of the timeline
look "cut off" rather than "more below". A thin tinted thumb
reads as page chrome, not an OS-loud scrollbar. */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.rrD534Lf::-webkit-scrollbar {
width: 8px;
}
.rrD534Lf::-webkit-scrollbar-track {
background: transparent;
}
.rrD534Lf::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
-webkit-transition: background 120ms ease;
transition: background 120ms ease;
}
.rrD534Lf::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
}
/* On mobile the parent flips to overflow:visible + min-height (see
.content_widget_container @ 768px in IndEvent.module.css). Hand
scroll back to the page so users aren't trapped inside a tiny
nested viewport. */
@media (max-width: 768px) {
.rrD534Lf {
height: auto;
max-height: none;
overflow: visible;
}
}
/* Announcements - composer + audience picker + list-row enrichment.
The announcement timeline shell (`outer_announcements`,
`annoucement_msg_container`, etc.) still lives in IndEvent.module.css
for now; this module owns the new bits that came with the rebuild:
• Channel segmented control (Team vs Guestii) - replaces the
former left-rail "Channels" picker so the timeline gets the
full pane width.
• Composer card (audience picker + body textarea + send action)
• Audience picker - segmented mode switch + role/individual chips
• Audience pill rendered on each list row
• Delivery stats strip rendered on email rows
Sized for the existing IndEvent right-pane layout (no max-width
constraints; takes whatever the parent grid gives it).
*/
/* ── Channel segmented control ─────────────────────────────────
Top-of-tab control that replaces the sidebar Channels picker.
Two options only (Team / Guestiis) so a horizontal pill is the
right pattern: it makes the choice scannable without consuming
a column of screen real estate. Each option carries an icon,
label, and tiny subtitle so the delivery medium (in-app+push vs
email) reads at a glance. */
.kCgWgsUf {
display: inline-flex;
gap: 0;
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
width: -webkit-fit-content;
width: fit-content;
max-width: 100%;
}
.EV8rkXlh {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem;
background: transparent;
border: none;
border-radius: 9px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-family);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
text-align: left;
min-width: 0;
}
.EV8rkXlh:hover:not(.nyJVIpdv) {
color: rgba(255, 255, 255, 0.85);
}
.nyJVIpdv {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.4);
}
.r1T0O1Md {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
flex-shrink: 0;
}
.nyJVIpdv .r1T0O1Md {
background: rgba(13, 122, 199, 0.32);
color: var(--white);
}
.AoAE9CPH {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.U2d6tglX {
font-size: 13px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.fClMmNwI {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
}
.nyJVIpdv .fClMmNwI {
color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 600px) {
.kCgWgsUf {
width: 100%;
}
.EV8rkXlh {
flex: 1 1;
justify-content: center;
padding: 0.5rem 0.75rem;
}
.fClMmNwI {
display: none;
}
}
/* ── AnnounceDrawer body ──────────────────────────────────────
When the composer renders inside the right-sliding drawer (vs the
full-tab layout) the body needs vertical stacking with breathing
room between the channel switcher, composer card, and footer hint.
The drawer body already provides 1.5rem padding; this just adds a
consistent gap between children so the channel segmented control
isn't glued to the composer card. */
.tiB6VdSL {
display: flex;
flex-direction: column;
gap: 1rem;
}
.kWHNTbJY {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
background: rgba(13, 122, 199, 0.06);
border: 1px solid rgba(13, 122, 199, 0.16);
border-radius: 10px;
font-size: 11.5px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.6);
}
.kWHNTbJY i {
font-size: 11px;
color: var(--accent-1);
margin-top: 2px;
flex-shrink: 0;
}
/* ── Composer card ─────────────────────────────────────────── */
.k2M4Eji8 {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem;
background: var(--sub-bg-dark);
border: 1px solid #2d2f39;
border-radius: 12px;
font-family: var(--font-family);
}
.osRicjwV {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.Gz6ZPm66 {
width: 100%;
min-height: 96px;
padding: 0.75rem 0.85rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
line-height: 1.5;
resize: vertical;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
box-sizing: border-box;
}
.Gz6ZPm66:focus {
border-color: rgba(13, 122, 199, 0.5);
background: rgba(0, 0, 0, 0.28);
}
.Gz6ZPm66::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.q6Fk6BN2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.WpRmvl5X {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.WpRmvl5X i {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
.WpRmvl5X strong {
color: var(--white);
font-weight: 600;
}
._tvs_weU {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem;
background: var(--accent-1);
border: none;
border-radius: 8px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease, transform 0.08s ease;
}
._tvs_weU:hover:not(:disabled) {
filter: brightness(1.1);
}
._tvs_weU:active:not(:disabled) {
transform: scale(0.98);
}
._tvs_weU:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Audience picker ──────────────────────────────────────── */
.dHPixZfp {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* Segmented control for mode switching (Everyone / By role / Individuals).
Mirrors the dashboard's tab strips so the visual language is
consistent across Edit Event, Lineup, and now Announcements. */
.MSYgcolh {
display: inline-flex;
gap: 0;
padding: 3px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 999px;
width: -webkit-fit-content;
width: fit-content;
}
.xz1v21Zw {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: transparent;
border: none;
border-radius: 999px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.xz1v21Zw:hover:not(.am5TqRXc) {
color: rgba(255, 255, 255, 0.85);
}
.am5TqRXc {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
font-weight: 600;
}
.xz1v21Zw i {
font-size: 10px;
}
/* Role chips inside the "By role" mode panel */
.OFMQCnJx {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.GxchzkFE {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 999px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-family);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.GxchzkFE:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
}
.lr2UWhI2 {
background: rgba(13, 122, 199, 0.18);
border-color: rgba(13, 122, 199, 0.55);
color: var(--white);
font-weight: 600;
}
.GxchzkFE i {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
}
.lr2UWhI2 i {
color: var(--accent-1);
}
.uyA20TdI {
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}
.lr2UWhI2 .uyA20TdI {
color: rgba(255, 255, 255, 0.7);
}
/* Individual people picker - a compact searchable grid */
.u07EPbt7 {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
}
.u07EPbt7:focus-within {
border-color: rgba(13, 122, 199, 0.5);
}
.u07EPbt7 i {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
}
.u07EPbt7 input {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
}
.u07EPbt7 input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.gbozYYf5 {
display: flex;
flex-direction: column;
gap: 0.3rem;
max-height: 220px;
overflow-y: auto;
padding: 0.25rem;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
}
.IYE7DzZ4 {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.6rem;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
cursor: pointer;
font-family: var(--font-family);
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease;
}
.IYE7DzZ4:hover {
background: rgba(255, 255, 255, 0.025);
}
.XycIbYHn {
background: rgba(13, 122, 199, 0.1);
border-color: rgba(13, 122, 199, 0.4);
}
.lCoSzZGS {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 11px;
flex-shrink: 0;
}
.W2dSpS78 {
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.jPhKp7PH {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Ot9dXHAA {
margin: 0;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.U1uOOwGh {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: transparent;
flex-shrink: 0;
font-size: 8px;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.XycIbYHn .U1uOOwGh {
background: var(--accent-1);
border-color: var(--accent-1);
color: var(--white);
}
.XBL9kOu1 {
padding: 1rem;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* ── Audience pill (rendered on each list row) ─────────────── */
.dvCnaf4B {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.5rem;
background: rgba(13, 122, 199, 0.14);
border: 1px solid rgba(13, 122, 199, 0.32);
border-radius: 999px;
color: var(--white);
font-family: var(--font-family);
font-size: 10px;
font-weight: 600;
}
.EB9pQIwM {
background: rgba(60, 162, 89, 0.14);
border-color: rgba(60, 162, 89, 0.32);
}
.GTtfXpxQ {
background: rgba(167, 139, 250, 0.14);
border-color: rgba(167, 139, 250, 0.32);
}
.dvCnaf4B i {
font-size: 9px;
opacity: 0.85;
}
/* ── Email subject + delivery strip on list rows ──────────── */
.wYwDY32i {
margin: 0 0 0.3rem;
font-size: 13px;
font-weight: 700;
color: var(--white);
}
.GkFWPW5J {
margin: 0;
font-size: 12px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.75);
white-space: pre-wrap;
}
.poIZhw3p {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.4rem;
}
.yU7cBMcu {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.yU7cBMcu strong {
color: rgba(255, 255, 255, 0.75);
font-weight: 600;
}
.u_nrtsTf {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 0.55rem;
padding-top: 0.55rem;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
font-size: 11px;
}
.WvoPfkTe {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: rgba(255, 255, 255, 0.55);
}
.WvoPfkTe i {
font-size: 9px;
}
.XIylTZ8y i { color: #22c55e; }
.oHcUpwRi i { color: #f97316; }
.RT9I0gS0 i { color: #94a3b8; }
.WvoPfkTe strong {
color: var(--white);
font-weight: 600;
}
/* ── Subject line input (Guestii email composer) ──────────── */
.QW3oDGPN {
width: 100%;
padding: 0.7rem 0.85rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: var(--white);
font-family: var(--font-family);
font-size: 13px;
font-weight: 500;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
box-sizing: border-box;
}
.QW3oDGPN:focus {
border-color: rgba(13, 122, 199, 0.5);
background: rgba(0, 0, 0, 0.28);
}
.QW3oDGPN::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.muj7q5LJ {
margin: 0.3rem 0 0;
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
text-align: right;
}
/* ── Compose filter groups (Guestii audience picker) ──────── */
.ud_zopgp {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 0.85rem;
background: rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
}
.gYe1FRJe {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.f1Cx3YFG {
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
}
.XcIO77_E {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.PLjLsp1p {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
.Cy97RiZE {
margin: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
font-style: italic;
}
/* ── Recipient resolution card ────────────────────────────── */
.ueLdWTn9 {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.85rem 1rem;
background: linear-gradient(135deg, rgba(13, 122, 199, 0.1), rgba(167, 139, 250, 0.06));
border: 1px solid rgba(13, 122, 199, 0.25);
border-radius: 10px;
}
.AfuHtGiB {
display: flex;
align-items: center;
gap: 0.75rem;
}
.AfuHtGiB > i {
font-size: 18px;
color: var(--accent-1);
}
.qcQKPqej {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
.qcQKPqej strong {
color: var(--white);
font-weight: 700;
font-size: 15px;
}
.Z680aqYX {
margin: 0.15rem 0 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.bhR06foY {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.7rem;
background: rgba(249, 115, 22, 0.12);
border: 1px solid rgba(249, 115, 22, 0.3);
border-radius: 8px;
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
}
.bhR06foY i {
color: #f97316;
font-size: 11px;
}
.bhR06foY strong {
color: var(--white);
font-weight: 600;
}
/* ── Email preview drawer ─────────────────────────────────── */
/* Backdrop + frame reuse the IndEvent/drawers/Drawer.module.css
conventions (opacity fade-in, slide from right) but the preview
drawer sits a layer up since it's stacked over the composer. */
.Riswpo30 {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
background: rgba(13, 122, 199, 0.1);
border: 1px solid rgba(13, 122, 199, 0.25);
border-radius: 10px;
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
margin-bottom: 1rem;
}
.Riswpo30 i {
color: var(--accent-1);
font-size: 14px;
}
.Riswpo30 strong {
color: var(--white);
font-weight: 700;
}
/* The fake email card. Mimics what the recipient will see -
subject + sender + body + event footer - so the manager can
sanity-check formatting before hitting Send. The actual HTML
wrapping happens in the Resend template on the backend; this
is a faithful preview, not the production render. */
.Y3kK_nav {
background: #fafafa;
color: #18181b;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.WC4M0R_a {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.85rem 1rem;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-family: var(--font-family);
}
.vM0vEEhT {
display: flex;
align-items: baseline;
gap: 0.4rem;
font-size: 11px;
color: rgba(0, 0, 0, 0.55);
}
.LbQAxPx_ {
font-weight: 600;
min-width: 48px;
color: rgba(0, 0, 0, 0.4);
}
.k7ZHpaoT {
color: rgba(0, 0, 0, 0.8);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spcuS78a {
margin: 0.3rem 0 0;
font-size: 16px;
font-weight: 700;
color: #18181b;
font-family: var(--font-family);
}
.BVMb3RL1 {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #0D7AC7, #1e90d8);
color: #ffffff;
font-family: var(--font-family);
}
.KVwpk2U5 {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.18);
font-size: 14px;
flex-shrink: 0;
}
.cd5oNFTV {
display: flex;
flex-direction: column;
}
.Rw0gqjFf {
margin: 0;
font-size: 13px;
font-weight: 700;
}
.SVXEyzS_ {
margin: 0;
font-size: 11px;
opacity: 0.85;
}
.dKYnoiRg {
padding: 1rem;
font-family: var(--font-family);
font-size: 13px;
line-height: 1.6;
color: #27272a;
white-space: pre-wrap;
}
.j6IepKLZ {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-family: var(--font-family);
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
}
.uREOr36s {
padding: 0.6rem 1rem;
background: #f4f4f5;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-family: var(--font-family);
font-size: 10px;
color: rgba(0, 0, 0, 0.45);
text-align: center;
}
.F9VfgzzD {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
margin-top: 1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.F9VfgzzD i {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
}
.AfwMr3Bx {
flex: 1 1;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
.AfwMr3Bx strong {
color: var(--white);
font-weight: 600;
}
/* ── Slim hint above the timeline (intro / empty state) ───── */
.P0ck0NlG {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.75rem 0.9rem;
margin-top: 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
line-height: 1.55;
}
.P0ck0NlG i {
font-size: 11px;
margin-top: 2px;
color: rgba(255, 255, 255, 0.35);
}
/* DeleteEvent modal - matches the DeclineConfirmModal chrome so the
destructive-confirm pattern is consistent across the page. Pop-in
animation, centered card, red iconography, bottom action row. */
.scMK0UiZ {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 2200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: PGnWXFcE 0.15s ease;
}
@keyframes PGnWXFcE { from { opacity: 0; } to { opacity: 1; } }
.ONojxfnf {
width: 100%;
max-width: 440px;
background: #13151f;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
animation: JgIU9Je2 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes JgIU9Je2 {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.MDtv47b9 {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #ef4444;
}
.AGYB7nle {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--white);
}
.zBLf3ggN {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.zBLf3ggN strong {
color: var(--white);
font-weight: 700;
}
.QcdKHb_Y {
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.QcdKHb_Y li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.15);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
.QcdKHb_Y li i {
color: #ef4444;
font-size: 13px;
margin-top: 1px;
flex-shrink: 0;
}
/* Confirmation input - operator must type the event name verbatim
before the Delete button enables. Sits between the consequences
list and the action row. */
._2PH2bqVI {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
margin-top: 4px;
}
.wU6G9w0_ {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.wU6G9w0_ strong {
color: #ffffff;
font-weight: 700;
}
.pXuW6DUn {
width: 100%;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 14px;
font-weight: 500;
transition: border-color 0.15s, box-shadow 0.15s;
}
.pXuW6DUn:focus {
outline: none;
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.pXuW6DUn::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.tLTeBjbO {
margin: 4px 0 0;
font-size: 12px;
color: #f87171;
line-height: 1.5;
}
.bcQv20P2 {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 6px;
}
.ned9PVpd {
flex: 1 1;
padding: 11px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ned9PVpd:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
.MMpR4_ZS {
flex: 1 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px;
background: #ef4444;
color: #ffffff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.MMpR4_ZS:hover:not(:disabled) {
background: #dc2626;
}
.MMpR4_ZS:disabled {
background: rgba(239, 68, 68, 0.3);
color: rgba(255, 255, 255, 0.55);
cursor: not-allowed;
}
/* CancelEvent modal - identical chrome to DeleteEvent so destructive
actions read the same across the page. The only differences are
the icon (ban vs triangle), the copy, and the side-effects
(refunds + notifications instead of permanent delete). */
.lJN02SaI {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 2200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: HugssgkT 0.15s ease;
}
@keyframes HugssgkT { from { opacity: 0; } to { opacity: 1; } }
.Tl9et22H {
width: 100%;
max-width: 460px;
background: #13151f;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
animation: h7ZCpprg 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes h7ZCpprg {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.te3PTsNd {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #ef4444;
}
.ziBmJGnZ {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--white);
}
.Fkn04sVr {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.Fkn04sVr strong {
color: var(--white);
font-weight: 700;
}
.fuDkYFnd {
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.fuDkYFnd li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.15);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
.fuDkYFnd li i {
color: #ef4444;
font-size: 13px;
margin-top: 1px;
flex-shrink: 0;
}
.fuDkYFnd li strong {
color: var(--white);
font-weight: 700;
}
.mXmtXWnL {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
margin-top: 2px;
}
.fNi4xt_K {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.ggzj9V6n {
width: 100%;
min-height: 60px;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 13px;
line-height: 1.5;
resize: vertical;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ggzj9V6n:focus {
outline: none;
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.ggzj9V6n::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.nNNaJ1oH {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
margin-top: 4px;
}
.nyoEo4kI {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.nyoEo4kI strong {
color: #ffffff;
font-weight: 700;
}
.I3WvkxvI {
width: 100%;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 14px;
font-weight: 500;
transition: border-color 0.15s, box-shadow 0.15s;
}
.I3WvkxvI:focus {
outline: none;
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.I3WvkxvI::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.HAS6PwVJ {
margin: 4px 0 0;
font-size: 12px;
color: #f87171;
line-height: 1.5;
}
.B4weBNR7 {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 6px;
}
.P9xi5gcH {
flex: 1 1;
padding: 11px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.P9xi5gcH:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
.zvawXjaf {
flex: 1 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px;
background: #ef4444;
color: #ffffff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.zvawXjaf:hover:not(:disabled) {
background: #dc2626;
}
.zvawXjaf:disabled {
background: rgba(239, 68, 68, 0.3);
color: rgba(255, 255, 255, 0.55);
cursor: not-allowed;
}
.Opte_Rgd {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 2000;
animation: Zw6eRt0e 200ms ease-out;
}
.jnoVpD0V {
animation: Cqhtjdbc 200ms ease-in forwards;
}
.hdhzfCjK {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2001;
width: min(440px, calc(100vw - 32px));
background: #15171f;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 32px 28px 24px;
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
animation: WvBrLijy 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.Ycc6Sez3 {
animation: I2LI3LKd 180ms ease-in forwards;
}
.Qloz4HsX {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
display: grid;
place-items: center;
font-size: 22px;
margin-bottom: 18px;
}
.U_WXjo1E {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.01em;
}
.m6Phiax1 {
margin: 8px 0 24px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
max-width: 340px;
}
.hXpiNWmV {
display: flex;
gap: 10px;
width: 100%;
}
.qh71nORn,
.qjpHjPjs {
flex: 1 1;
height: 42px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.qh71nORn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
}
.qh71nORn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
.qjpHjPjs {
background: #ef4444;
border: 1px solid #ef4444;
color: #ffffff;
}
.qjpHjPjs:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
}
.qh71nORn:disabled,
.qjpHjPjs:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@keyframes Zw6eRt0e {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Cqhtjdbc {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes WvBrLijy {
from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes I2LI3LKd {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
}
:root {
--white: #ffffff;
--black: #000000;
--bg-dark: #01000D;
--sub-bg-dark: #161824;
--sub-bg-light: #f0f1f2;
--accent-1: #0D7AC7;
--success-green: #3CA259;
--cancelled-red: #ff2626;
--text-primary: #ffffff;
--text-secondary: rgb(151, 163, 180);
--text-muted: rgb(120, 132, 150);
--border-soft: #2d2f39;
--border-softer: rgba(255, 255, 255, 0.08);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
}
.t-xs1 { font-size: 8px; }
.t-xs2 { font-size: 10px; }
.t-xs3 { font-size: 12px; }
.t-s1 { font-size: 14px; }
.t-s2 { font-size: 15px; }
.t-s3 { font-size: 16px; }
.t-m1 { font-size: 17px; }
.t-m2 { font-size: 22px; }
.t-m3 { font-size: 25px; }
.t-l1 { font-size: 28px; }
.t-l2 { font-size: 31px; }
.t-l3 { font-size: 34px; }
.t-xl1 { font-size: 37px; }
.t-xl2 { font-size: 40px; }
.t-xl3 { font-size: 43px; }
.t-bold { font-weight: 600; }
.t-bolder { font-weight: 700; }
.t-muted { color: var(--text-muted); }
.t-subtle { color: var(--text-secondary); }
.t-primary { color: var(--text-primary); }
.ozZB4ftV {
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.ozZB4ftV:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.gk1WLcfJ { padding: 10px 20px; font-size: 14px; }
.lTRP65eR { padding: 6px 14px; font-size: 12px; }
.uPJpYx2c {
background-color: var(--accent-1);
color: var(--white);
}
.uPJpYx2c:hover:not(:disabled) { background-color: #0e88dd; }
.ClqBmIwv {
background-color: var(--sub-bg-dark);
border-color: var(--border-soft);
color: var(--white);
}
.ClqBmIwv:hover:not(:disabled) { border-color: var(--border-softer); }
.FBkHIL59 {
background-color: transparent;
border-color: var(--border-soft);
color: var(--white);
}
.FBkHIL59:hover:not(:disabled) { background-color: var(--sub-bg-dark); }
.WlJGbsQ5 {
background-color: var(--cancelled-red);
color: var(--white);
}
.WlJGbsQ5:hover:not(:disabled) { background-color: #e01d1d; }
.S6KPDv1w {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
flex-shrink: 0;
}
.FOIyfBDI {
width: 100%;
min-height: 160px;
border-radius: var(--radius-lg);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
padding: 22px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
row-gap: 0.75rem;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease;
}
.FOIyfBDI:hover {
border-color: var(--border-softer);
}
.LrTzPXJP {
min-height: 120px;
border-radius: var(--radius-md);
padding: 14px 16px;
row-gap: 0.55rem;
}
._scNZIIJ {
display: flex;
align-items: center;
column-gap: 0.75rem;
}
.aUF4m3gz {
column-gap: 0.55rem;
}
.z21e2FH5 {
height: 36px;
width: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rqKDpWa6 {
height: 28px;
width: 28px;
border-radius: 8px;
}
.z21e2FH5 i {
font-size: 14px;
}
.rqKDpWa6 i {
font-size: 12px;
}
.zPtHXpo6 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zSwgdbyV {
font-size: 10px;
}
.ccnEuc9r {
font-size: 32px;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
column-gap: 0.25rem;
}
.wunXES6Z {
font-size: 22px;
}
.LiFMkvO9 {
font-size: 20px;
font-weight: 600;
color: var(--text-secondary);
}
.EJhIM42N {
font-size: 14px;
}
.Tf7BRz4g {
font-size: 11px;
font-weight: 500;
line-height: 1.35;
color: var(--text-muted);
margin: 0;
letter-spacing: 0.01em;
}
.dfAkHyGx {
width: 100%;
min-height: 420px;
border-radius: var(--radius-lg);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
padding: 24px 26px 22px 26px;
box-sizing: border-box;
display: flex;
flex-direction: column;
row-gap: 1rem;
position: relative;
overflow: hidden;
}
.h47Z0qX1 {
display: flex;
flex-direction: column;
row-gap: 0.2rem;
flex-shrink: 0;
}
.xzuLbFZ9 {
display: flex;
align-items: flex-start;
justify-content: space-between;
column-gap: 1rem;
}
.gz9z9fvV {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.bqERndFu {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.a_M7SR4n {
width: 100%;
flex: 1 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.gg7kje1u {
height: 320px;
flex-shrink: 0;
}
.jXrNNxUj {
display: flex;
align-items: center;
column-gap: 8px;
border-bottom: 1px solid var(--border-soft);
padding-bottom: 0;
}
.pjvPFzvU {
flex: 1 1;
}
.Tit1RFWx {
background: transparent;
border: none;
padding: 10px 18px;
margin-bottom: -1px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
column-gap: 6px;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.Tit1RFWx:hover {
color: var(--text-primary);
}
.VB6PyCDL {
color: var(--text-primary);
border-bottom-color: var(--accent-1);
}
.jhifm7it {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 0 6px;
height: 18px;
border-radius: var(--radius-pill);
background-color: var(--border-soft);
color: var(--text-primary);
font-size: 10px;
font-weight: 700;
}
.VB6PyCDL .jhifm7it {
background-color: var(--accent-1);
}
.t0bqCWRS {
display: flex;
align-items: flex-start;
justify-content: space-between;
column-gap: 1rem;
padding-bottom: 12px;
}
.Ujtl2I_r {
display: flex;
flex-direction: column;
row-gap: 2px;
min-width: 0;
}
.b1P9B2pe {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.A1aH6U5L {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.ZHGgD1Gu {
display: flex;
align-items: center;
column-gap: 8px;
flex-shrink: 0;
}
.yVRXMoqB {
display: inline-flex;
align-items: center;
column-gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-pill);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
width: 350px;
box-sizing: border-box;
transition: border-color 0.15s ease;
}
.yVRXMoqB:focus-within {
border-color: var(--accent-1);
}
.BnrgMPvH {
width: 100%;
}
.mX6A0dgN {
color: var(--text-muted);
font-size: 13px;
flex-shrink: 0;
}
.r28XegzL {
flex: 1 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 14px;
min-width: 0;
}
.r28XegzL::placeholder {
color: var(--text-muted);
}
.vEzMTQRH {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
}
.vEzMTQRH:hover {
color: var(--text-primary);
}
.EP2HOFjw {
position: fixed;
inset: 0;
background-color: rgba(1, 0, 13, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
box-sizing: border-box;
animation: R4vPGEmg 0.15s ease;
}
.vlpzgogT {
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
max-height: 88vh;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
animation: WmCXONpA 0.18s ease;
overflow: hidden;
}
.W9o6uPj4 { width: 100%; max-width: 420px; }
.IO5exB16 { width: 100%; max-width: 600px; }
.WjN91zwz { width: 100%; max-width: 880px; }
.vEw37_pL {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.GOchbHu8 {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.AkLf6fIJ {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.AkLf6fIJ:hover {
background-color: var(--border-soft);
color: var(--text-primary);
}
.rfFRJgD2 {
padding: 20px 22px;
overflow-y: auto;
flex: 1 1;
}
.eLL7c7G1 {
display: flex;
align-items: center;
justify-content: flex-end;
column-gap: 10px;
padding: 16px 22px;
border-top: 1px solid var(--border-soft);
flex-shrink: 0;
}
@keyframes R4vPGEmg {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes WmCXONpA {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ZJAFDBuK {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 12px;
padding: 48px 24px;
text-align: center;
color: var(--text-muted);
}
.ZhvomDnX {
width: 56px;
height: 56px;
border-radius: var(--radius-pill);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 20px;
}
.iIvNSf2M {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.WOlLTdfH {
font-size: 12px;
color: var(--text-muted);
max-width: 360px;
line-height: 1.5;
}
.ZOXLwOpf {
margin-top: 4px;
}
.Q0PYvxGV {
display: block;
border-radius: var(--radius-md);
}
.tmVqZwdO {
display: flex;
align-items: center;
column-gap: 12px;
padding: 14px;
border-radius: var(--radius-md);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
}
.xASPx6YO {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.oxdcgvqZ {
display: flex;
flex-direction: column;
row-gap: 6px;
flex: 1 1;
min-width: 0;
}
.a8ShkSw0 { width: 60%; height: 12px; border-radius: 4px; }
.jfPEphhy { width: 40%; height: 10px; border-radius: 4px; }
.UmObHmsH {
display: inline-flex;
align-items: center;
column-gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
border: 1px solid transparent;
}
.rNvXBGwC {
background-color: rgba(151, 163, 180, 0.12);
border-color: rgba(151, 163, 180, 0.28);
color: var(--text-secondary);
}
.RHsAqTZ4 {
background-color: rgba(13, 122, 199, 0.15);
border-color: rgba(13, 122, 199, 0.35);
color: #3aa0e0;
}
.xaLejtnr {
background-color: rgba(60, 162, 89, 0.12);
border-color: rgba(60, 162, 89, 0.35);
color: var(--success-green);
}
.fQvUiQl7 {
background-color: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: #f59e0b;
}
.LnpuT5ct {
background-color: rgba(255, 38, 38, 0.12);
border-color: rgba(255, 38, 38, 0.35);
color: var(--cancelled-red);
}
.BsnQtY_N {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background-color: currentColor;
}
.OiVWll1d {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--text-primary);
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
-webkit-user-select: none;
user-select: none;
}
.nHe2qHwH { width: 28px; height: 28px; font-size: 10px; }
.H5POGlIL { width: 36px; height: 36px; font-size: 12px; }
._03XwXtF { width: 52px; height: 52px; font-size: 16px; }
.Eu8pdRK7 { width: 72px; height: 72px; font-size: 22px; }
.aVCJ1aeJ {
height: 56px;
background: #0a0b11;
border-bottom: 1px solid #2d2f39;
display: flex;
align-items: center;
padding: 0 24px;
flex-shrink: 0;
gap: 0;
}
.mxXVNSBv {
color: var(--white);
font-size: 14px;
font-weight: 600;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cbrRItWa {
margin-left: 10px;
font-size: 11px;
font-weight: 500;
color: rgb(120, 132, 150);
}
/* ── Venues tab ──────────────────────────────────────────────
Two-column layout: scrollable list on the left, sticky detail
panel on the right (mirrors the production screenshots).
The device-preview lives inside the edit drawer, not here. */
/* Page shell - mirrors IndEventNew (.container / .content_container) */
.aB9oKXTb {
height: 100vh;
width: 100%;
display: flex;
overflow: hidden;
background-color: var(--bg-dark);
box-sizing: border-box;
color: var(--white);
}
.QNnDAu8c {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 40px 60px 0;
row-gap: 2.5rem;
box-sizing: border-box;
}
.ckGs1v93 {
flex: 1 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.LU9ZDfzK {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
/* KPI strip */
.b0UVBuuX {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 14px;
gap: 14px;
margin-bottom: 20px;
flex-shrink: 0;
}
.ceWJTDCv {
height: 88px;
border-radius: 14px;
}
/* Toolbar: segment toggle + search + add button */
.TmUQUnSw {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-shrink: 0;
}
.VCRfWNAl {
display: inline-flex;
border-radius: 10px;
border: 1px solid var(--border-soft);
background: rgba(255,255,255,0.02);
overflow: hidden;
flex-shrink: 0;
}
.aosb_MUT {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
background: transparent;
border: none;
color: var(--text-secondary);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
._5sFMqIt8 {
background: rgba(13,122,199,0.18);
color: var(--white);
}
.hctCIBPO {
font-size: 11px;
background: rgba(255,255,255,0.08);
color: var(--text-muted);
border-radius: 999px;
padding: 1px 7px;
font-weight: 700;
}
._5sFMqIt8 .hctCIBPO {
background: rgba(13,122,199,0.3);
color: var(--white);
}
.Ro3FhPzX {
flex: 1 1;
position: relative;
max-width: 340px;
}
.Ro3FhPzX i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 13px;
pointer-events: none;
}
.Ro3FhPzX input {
width: 100%;
padding: 8px 12px 8px 34px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.15s ease;
box-sizing: border-box;
}
.Ro3FhPzX input:focus { border-color: rgba(13,122,199,0.5); }
.Ro3FhPzX input::placeholder { color: var(--text-muted); }
.LK6C1Xss {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
flex-shrink: 0;
}
.LK6C1Xss:hover { background: #1389d8; }
/* Body: list + detail panel side by side */
.DceBlC7G {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
grid-gap: 16px;
gap: 16px;
flex: 1 1;
min-height: 0;
overflow: hidden;
}
.U8neFwPm {
display: flex;
flex-direction: column;
gap: 1px;
overflow-y: auto;
padding-right: 2px;
padding-bottom: 40px;
}
.U8neFwPm::-webkit-scrollbar { width: 4px; }
.U8neFwPm::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* Venue / residency row */
.gt98v639 {
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto auto;
align-items: center;
grid-gap: 14px;
gap: 14px;
padding: 14px 16px;
background: var(--sub-bg-dark);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
margin-bottom: 6px;
}
.gt98v639:hover { border-color: rgba(255,255,255,0.1); background: rgba(22,24,36,0.9); }
.nrnomqr9 {
border-color: rgba(13,122,199,0.55) !important;
background: rgba(13,122,199,0.06) !important;
}
.PtPstTY8 {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: var(--white);
flex-shrink: 0;
overflow: hidden;
}
.PtPstTY8 img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.QZ7kmqAt { min-width: 0; }
.uR9BzpOV {
font-size: 14px;
font-weight: 700;
color: var(--white);
margin: 0 0 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 6px;
}
.M4cJmWpj {
color: #06b6d4;
font-size: 12px;
}
.ooPEUFXf {
font-size: 12px;
color: var(--text-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.a6Y_5SIc {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.CNx_CesU {
background: rgba(13,122,199,0.15);
color: #6db8ed;
border: 1px solid rgba(13,122,199,0.2);
}
.HUvjGWTr {
background: rgba(34,197,94,0.12);
color: #4ade80;
border: 1px solid rgba(34,197,94,0.2);
}
.eRW0Dytx {
background: rgba(245,158,11,0.12);
color: #fbbf24;
border: 1px solid rgba(245,158,11,0.2);
}
.VZc9duC8 {
color: var(--text-muted);
font-size: 11px;
}
/* Right-hand detail panel */
.ygrKieRZ {
background: var(--sub-bg-dark);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 40px;
}
.wkeeRMbL {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-muted);
padding: 2rem;
text-align: center;
}
.wkeeRMbL i { font-size: 32px; opacity: 0.3; }
.wkeeRMbL p { margin: 0; font-size: 13px; }
.Pc0Wu4Sw {
padding: 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: flex-start;
gap: 12px;
flex-shrink: 0;
}
.DoeJyzJd {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: var(--white);
flex-shrink: 0;
overflow: hidden;
}
.DoeJyzJd img {
width: 100%;
height: 100%;
object-fit: cover;
}
.xzxsXBNN { flex: 1 1; min-width: 0; }
.bMr7L83x {
font-size: 15px;
font-weight: 700;
color: var(--white);
margin: 0 0 3px;
display: flex;
align-items: center;
gap: 6px;
}
.g6W94tuR {
font-size: 12px;
color: var(--text-muted);
margin: 0 0 8px;
}
.kmVDNGY5 {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.xLRCOK9f {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(255,255,255,0.05);
color: var(--text-secondary);
border: 1px solid rgba(255,255,255,0.07);
}
.kytY55nC {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.15s ease;
flex-shrink: 0;
}
.kytY55nC:hover {
color: var(--white);
border-color: rgba(13,122,199,0.5);
background: rgba(13,122,199,0.12);
}
.p3DkKjUc {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.15s ease;
flex-shrink: 0;
}
.p3DkKjUc:hover {
color: #f87171;
border-color: rgba(239,68,68,0.4);
background: rgba(239,68,68,0.08);
}
.lIxPsV_B {
flex: 1 1;
overflow-y: auto;
padding: 16px;
}
.lIxPsV_B::-webkit-scrollbar { width: 4px; }
.lIxPsV_B::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.paf39XMM { margin-bottom: 20px; }
.paf39XMM:last-child { margin-bottom: 0; }
.neDOWw7U {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin: 0 0 10px;
}
.OB_KqfQ8 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
gap: 10px;
}
.OB_KqfQ8:last-child { border-bottom: none; }
.bdU4Emku {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0 0 2px;
}
.FIY7LFKS {
font-size: 11px;
color: var(--text-muted);
margin: 0;
}
.wngPJue6 {
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.GHjrW2mZ {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
gap: 10px;
margin-bottom: 16px;
}
.XbDDG3iG {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.PlOtUjT2 {
font-size: 18px;
font-weight: 800;
color: var(--white);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.EBPNE_F5 {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}
/* Mobile back button - only visible when detail panel is full-screen overlay */
.vY_ZS6Bi {
display: none;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-soft);
color: var(--accent-1);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
width: 100%;
text-align: left;
}
@media (max-width: 900px) {
.vY_ZS6Bi { display: flex; }
}
/* Empty list state */
.aa_KqAId {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 60px 20px;
color: var(--text-muted);
}
.aa_KqAId i { font-size: 32px; opacity: 0.4; }
.aa_KqAId p { margin: 0; font-size: 13px; }
@media (max-width: 900px) {
.DceBlC7G {
grid-template-columns: 1fr;
position: relative;
}
/* Detail panel becomes a full-width overlay that slides up when active */
.ygrKieRZ {
display: none;
position: fixed;
inset: 0;
z-index: 300;
border-radius: 0;
border: none;
overflow-y: auto;
}
.bboQ2rif {
display: flex;
}
.b0UVBuuX { grid-template-columns: repeat(2, 1fr); }
/* Toolbar wraps on small screens */
.TmUQUnSw { flex-wrap: wrap; }
.Ro3FhPzX { max-width: 100%; }
}
@media (max-width: 480px) {
/* Venue row: hide address, just show name + guest count */
.ooPEUFXf { display: none; }
.gt98v639 { gap: 10px; padding: 12px; }
.TmUQUnSw { gap: 8px; }
.VCRfWNAl { font-size: 12px; }
.aosb_MUT { padding: 6px 10px; font-size: 12px; }
}
/* CRM shared drawer chrome.
──────────────────────────────────────────────────────────────
Same recipe as indevent-project/src/components/IndEvent/drawers/
Drawer.module.css - kept local to the CRM module so future
tweaks (wider rail, different stack rules) don't ripple into
the in-event experience. */
.QbWUbjm9 {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
animation: YGbKF7zA 0.2s ease;
}
.traZkaoZ {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 720px;
max-width: 92vw;
background: rgba(20, 22, 30, 0.78);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border-left: 1px solid rgba(255, 255, 255, 0.08);
z-index: 1001;
display: flex;
flex-direction: column;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
animation: T_AaNwW4 0.28s ease;
}
.HhamVmcv { width: 540px; }
.BrJKpKqt { width: 920px; }
@keyframes YGbKF7zA { from { opacity: 0; } to { opacity: 1; } }
@keyframes wEkZSf1J { from { opacity: 1; } to { opacity: 0; } }
@keyframes T_AaNwW4 { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes s4Se9Zbe{ from { transform: translateX(0); } to { transform: translateX(100%); } }
.BukluKBK { animation: s4Se9Zbe 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; }
.Xia6X59a { animation: wEkZSf1J 0.22s ease forwards; }
.iKYNSN2O {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.4rem 1.5rem;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.XlXmNNFB {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: inherit;
transition: all 0.15s ease;
}
.XlXmNNFB:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
border-color: #3d4052;
}
.T3iLCVVH { flex: 1 1; min-width: 0; }
.Al5SrP1g {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--white);
}
.U3oZqP43 {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
font-size: 12px;
color: var(--text-muted);
flex-wrap: wrap;
}
.MvgxeS8p { color: rgba(255, 255, 255, 0.18); }
.UMR8PzXc { color: var(--white); font-weight: 600; }
.M1rJ7RwN {
flex: 1 1;
overflow-y: auto;
padding: 1.5rem;
background: var(--bg-dark);
}
.M1rJ7RwN::-webkit-scrollbar { width: 4px; }
.M1rJ7RwN::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.bMgAVh4K {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background:
linear-gradient(0deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 -4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.bfKKzjGK { flex: 1 1; }
.T3uVSsUp {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.1rem;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.T3uVSsUp:hover:not(:disabled) { background: #1389d8; }
.T3uVSsUp:active:not(:disabled) { transform: scale(0.98); }
.T3uVSsUp:disabled { opacity: 0.4; cursor: not-allowed; }
.lVmc0B73 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1rem;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.lVmc0B73:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.14);
}
.PaT9xX65 { margin-bottom: 1.75rem; }
.PaT9xX65:last-child { margin-bottom: 0; }
.Blkn686R {
margin: 0 0 0.85rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 600px) {
.traZkaoZ, .HhamVmcv, .BrJKpKqt {
width: 100vw;
max-width: 100vw;
}
.iKYNSN2O { padding: 1.1rem 1.1rem; }
.M1rJ7RwN { padding: 1.1rem; }
.bMgAVh4K { padding: 0.85rem 1.1rem; }
}
/* ── VenueEditDrawer ─────────────────────────────────────────
Extra-wide drawer (1100px) split into:
Left : vertical tab rail (icons + labels)
Centre: form body for whichever tab is active
Right : pinned device preview (Guest Line public profile)
Overrides the shared drawer chrome width via .drawer_xl. */
.HOgKyZN5 {
width: 1100px;
max-width: 96vw;
}
/* Three-column inner layout */
._IIcoivB {
display: grid;
grid-template-columns: 180px minmax(0,1fr) 440px;
flex: 1 1;
min-height: 0;
overflow: hidden;
}
/* Left vertical tab rail */
.YA6ZD1Mi {
border-right: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
padding: 12px 8px;
gap: 2px;
background: rgba(255,255,255,0.01);
overflow-y: auto;
}
.LtMcvdd5 {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
width: 100%;
}
.LtMcvdd5 i {
width: 16px;
text-align: center;
font-size: 13px;
flex-shrink: 0;
}
.LtMcvdd5:hover { background: rgba(255,255,255,0.04); color: var(--white); }
.JlzMzvNT {
background: rgba(13,122,199,0.15);
color: var(--white);
}
.JlzMzvNT i { color: var(--accent-1); }
.eK0_HNWY {
height: 1px;
background: rgba(255,255,255,0.05);
margin: 8px 4px;
}
/* Form body */
.See7VEgO {
overflow-y: auto;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 24px;
}
.See7VEgO::-webkit-scrollbar { width: 4px; }
.See7VEgO::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.oDT4mPIG {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin: 0;
}
/* Each section title sits in its own wrapper as a direct child
of .form_body, which has a 24px gap between children. Pull the
wrapper up so the title hugs its content (24px gap - 16px margin =
8px visible gap between "VIDEO HEADER" and the upload button). */
.See7VEgO > div:has(> .oDT4mPIG) {
margin-bottom: -16px;
}
/* Google-Places address autocomplete - matches the prod NewVenue input */
.rGhafUNY {
position: relative;
background-color: var(--sub-bg-dark);
border: 1px solid #2d2f39;
border-radius: 10px;
transition: border-color 0.2s ease;
}
.rGhafUNY:focus-within {
border-color: var(--accent-1);
}
.SJTaoYng {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 14px;
pointer-events: none;
z-index: 1;
}
.NlTTA8TI {
width: 100%;
box-sizing: border-box;
background: none !important;
border: none !important;
color: var(--white);
font-size: 14px;
padding: 0.75rem 1rem 0.75rem 2.75rem;
outline: none;
font-family: inherit;
border-radius: 10px;
}
.NlTTA8TI::placeholder {
color: #555;
}
.oDT4mPIG i { color: var(--accent-1); }
.ZlQKLALn { display: flex; flex-direction: column; gap: 14px; }
.zUplT51r {
font-size: 12px;
color: var(--text-muted);
line-height: 1.55;
margin: -6px 0 4px;
opacity: 0.7;
}
.THFKt5KF {
width: 100%;
min-height: 180px;
background: #12141f;
background: var(--input-bg, #12141f);
border: 1px solid rgba(255,255,255,0.08);
border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
border-radius: 8px;
color: #ccd6f6;
color: var(--text-primary, #ccd6f6);
font-size: 13px;
font-family: inherit;
line-height: 1.6;
padding: 12px 14px;
resize: vertical;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.THFKt5KF:focus { border-color: #0D7AC7; border-color: var(--accent-1, #0D7AC7); }
.THFKt5KF::placeholder { color: rgba(255,255,255,0.2); }
.E2wr3rWd {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--text-muted);
opacity: 0.5;
margin: 4px 0;
}
.E2wr3rWd::before,
.E2wr3rWd::after {
content: '';
flex: 1 1;
height: 1px;
background: rgba(255,255,255,0.07);
}
.IKzhiv6_ {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 12px;
gap: 12px;
}
.rREde2sk { grid-template-columns: 1fr; }
.mF1GeafB { display: flex; flex-direction: column; gap: 6px; }
.nFU8wjv5 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.hxMicDZd::after {
content: ' *';
color: #f87171;
}
.a1pc3v11 {
padding: 9px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
border-radius: 9px;
color: var(--white);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.15s ease;
}
.a1pc3v11:focus { border-color: rgba(13,122,199,0.5); }
.a1pc3v11::placeholder { color: var(--text-muted); }
.G3tkL3SX {
display: flex;
align-items: center;
border: 1px solid var(--border-soft);
border-radius: 9px;
background: rgba(255,255,255,0.04);
overflow: hidden;
}
.YIhd6pkx {
padding: 9px 10px;
font-size: 12px;
color: var(--text-muted);
background: rgba(255,255,255,0.03);
border-right: 1px solid var(--border-soft);
white-space: nowrap;
flex-shrink: 0;
}
.G3tkL3SX input {
flex: 1 1;
padding: 9px 12px;
background: transparent;
border: none;
color: var(--white);
font-family: inherit;
font-size: 13px;
outline: none;
min-width: 0;
}
.bhWGe_Ot {
padding: 9px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
border-radius: 9px;
color: var(--white);
font-family: inherit;
font-size: 13px;
outline: none;
resize: vertical;
min-height: 88px;
transition: border-color 0.15s ease;
}
.bhWGe_Ot:focus { border-color: rgba(13,122,199,0.5); }
.bhWGe_Ot::placeholder { color: var(--text-muted); }
/* Avatar / logo uploader */
.PRtoW4o2 {
display: flex;
align-items: center;
gap: 14px;
}
/* Wrapper hosts both the round avatar and the corner edit badge so
the badge isn't clipped by the avatar's overflow: hidden. */
.Vn5SmSuV {
position: relative;
width: 68px;
height: 68px;
flex-shrink: 0;
}
.lbc7dMMf {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
color: var(--white);
cursor: pointer;
position: relative;
overflow: hidden;
border: 2px solid rgba(255,255,255,0.08);
transition: opacity 0.15s ease;
}
.lbc7dMMf:hover { opacity: 0.85; }
.lbc7dMMf img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Shown only when no logo is set - full overlay with centred camera. */
.exOWJ3Nh {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: background 0.15s ease;
}
.lbc7dMMf:hover .exOWJ3Nh { background: rgba(0,0,0,0.55); }
.exOWJ3Nh i { font-size: 18px; color: var(--white); }
/* Shown only when a logo IS set - small pencil pill in the bottom-right
corner, anchored to the wrapper so it sits outside the round clip. */
.Fnvc2cyJ {
position: absolute;
right: -4px;
bottom: -4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-1);
border: 2px solid var(--sub-bg-dark);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: filter 0.15s ease;
}
.Fnvc2cyJ:hover { filter: brightness(1.15); }
.Fnvc2cyJ i { font-size: 10px; }
.mAftvgPe { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
/* Video header upload */
.UrkRI7Su {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.PcqTXgNA {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-pill);
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
font-family: inherit;
}
.PcqTXgNA:hover {
border-color: var(--accent-1);
color: var(--accent-1);
}
.asUos_oC {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #3ca259;
color: var(--success-green, #3ca259);
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.MKwLvQre {
width: 100%;
max-height: 140px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--border-soft);
background: #000;
}
/* Brand colour picker */
.H2XQaYus {
display: flex;
align-items: center;
gap: 10px;
}
.hRZpqm8L {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.hRZpqm8L:hover {
transform: scale(1.06);
box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.WwHbWndi {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1;
padding: 9px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
border-radius: 9px;
font-size: 13px;
color: var(--white);
}
.WwHbWndi span { color: var(--text-muted); }
.WwHbWndi input {
flex: 1 1;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: inherit;
font-size: 13px;
font-weight: 600;
min-width: 0;
}
/* Toggle / switch */
.OepJgV3x {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
}
.S7v6TwkB {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(13,122,199,0.12);
color: var(--accent-1);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.vONvnu1Q { flex: 1 1; }
.WZuW7Hrz { font-size: 13px; font-weight: 600; color: var(--white); }
.o4tQbAan { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.w9ZuUzvr {
width: 40px;
height: 22px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
border: none;
cursor: pointer;
position: relative;
transition: background 0.2s ease;
flex-shrink: 0;
}
.IGu2ndCv { background: var(--accent-1); }
.w9ZuUzvr::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
top: 3px;
left: 3px;
transition: transform 0.2s ease;
}
.IGu2ndCv::after { transform: translateX(18px); }
/* Info banner */
.Yt17vOan {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: rgba(13,122,199,0.08);
border: 1px solid rgba(13,122,199,0.2);
border-radius: 10px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.Yt17vOan i { color: var(--accent-1); margin-top: 1px; flex-shrink: 0; }
/* "Find Venue" search */
.rIcynA8c {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
max-height: 200px;
overflow-y: auto;
}
.o9Xm1_vJ {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
cursor: pointer;
transition: all 0.15s ease;
}
.o9Xm1_vJ:hover {
border-color: rgba(13,122,199,0.4);
background: rgba(13,122,199,0.07);
}
.u8EJh2cf {
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.wxahyOJ_ {
font-size: 11px;
color: var(--text-muted);
}
/* Right device preview panel */
.XyJSLUC4 {
border-left: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
background: #0a0a14;
overflow: hidden;
}
.W9VD2yGr {
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.W9VD2yGr i { color: var(--accent-1); }
.EY28XT6P {
flex: 1 1;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 12px 24px;
}
.aJXyk7au {
/* Fill the available height, derive width from phone aspect ratio */
height: 100%;
width: auto;
aspect-ratio: 9 / 19.5;
flex-shrink: 0;
border: none;
border-radius: 44px;
background: #000;
box-shadow: 0 0 0 12px #1a1a2e, 0 24px 80px rgba(0,0,0,0.7);
}
/* Wraps the phone iframe so the load-state logo can be absolutely
positioned on top of it. The wrapper inherits the iframe's phone
silhouette so the overlay matches the bezel exactly. */
.QcxvzLWd {
position: relative;
height: 100%;
aspect-ratio: 9 / 19.5;
flex-shrink: 0;
display: flex;
}
.QcxvzLWd .aJXyk7au {
height: 100%;
width: 100%;
}
.YP4kye_2 {
position: absolute;
inset: 0;
border-radius: 44px;
background: #000;
box-shadow: 0 0 0 12px #1a1a2e, 0 24px 80px rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.K5HxgsA1 {
width: 56%;
max-width: 180px;
height: auto;
}
.nQZyk24h {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 100%;
aspect-ratio: 9 / 19.5;
border-radius: 40px;
border: 2px dashed var(--border-soft);
color: var(--text-muted);
text-align: center;
padding: 40px;
}
.nQZyk24h i {
font-size: 48px;
opacity: 0.3;
}
.nQZyk24h p {
font-size: 13px;
line-height: 1.6;
opacity: 0.5;
}
.EY28XT6P::-webkit-scrollbar { width: 4px; }
.EY28XT6P::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* ── Floor Plan launch panel ─────────────────────────────── */
.Ysw5QqgX {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 60px 40px;
text-align: center;
height: 100%;
}
.YMn_aAD5 {
width: 80px;
height: 80px;
border-radius: 50%;
background: #0d1428;
border: 1px solid #1a2a4a;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #2a5a9a;
margin-bottom: 4px;
}
.zWeDAL2W {
font-size: 20px;
font-weight: 700;
color: #ccd6f6;
color: var(--text-primary, #ccd6f6);
margin: 0;
}
.KHooTLYD {
font-size: 14px;
color: #6a7a9a;
color: var(--text-muted, #6a7a9a);
line-height: 1.6;
margin: 0;
}
.Qtaqx_NS {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
background: linear-gradient(135deg, #0d3a6a 0%, #0a2a50 100%);
border: 1px solid #1a5aaa;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 12px 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.Qtaqx_NS:hover {
background: linear-gradient(135deg, #1a4a8a 0%, #0d3a6a 100%);
box-shadow: 0 0 24px rgba(74, 158, 237, 0.25);
transform: translateY(-1px);
}
@media (max-width: 900px) {
.HOgKyZN5 { width: 100vw; max-width: 100vw; }
._IIcoivB { grid-template-columns: 1fr; }
.YA6ZD1Mi {
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 8px;
}
.YA6ZD1Mi::-webkit-scrollbar { display: none; }
.LtMcvdd5 { white-space: nowrap; flex-shrink: 0; }
.XyJSLUC4 { display: none; }
}
@media (max-width: 480px) {
/* On phones: tighten form padding */
.See7VEgO { padding: 12px; }
.ZlQKLALn { padding: 12px; }
.IKzhiv6_ { grid-template-columns: 1fr; }
/* Tab rail: icon only to save space */
.LtMcvdd5 span { display: none; }
.LtMcvdd5 { padding: 10px; justify-content: center; gap: 0; }
}
/* ─────────────────────────────────────────────────────────────
Floor Plan Editor - full-screen overlay
───────────────────────────────────────────────────────────── */
.nRdnxENC {
position: fixed;
inset: 0;
z-index: 1200;
background: #080910;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* ── Top bar ──────────────────────────────────────────────── */
.upGjblVL {
height: 58px;
flex-shrink: 0;
background: #0d0e18;
border-bottom: 1px solid #1e2035;
display: flex;
align-items: center;
gap: 0;
padding: 0 16px;
position: relative;
z-index: 10;
}
.pkIYDdpJ {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1;
}
.Ct7WHv4u {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid #2a2d42;
border-radius: 8px;
color: #8892b0;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.Ct7WHv4u:hover { background: #1a1d2e; color: #ccd6f6; border-color: #3a3d55; }
.ukPeHTCr {
width: 1px;
height: 20px;
background: #1e2035;
flex-shrink: 0;
}
.QZK3JQXq {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #ccd6f6;
white-space: nowrap;
}
.QZK3JQXq i { color: #4a9eed; font-size: 15px; }
.xk_QxgYP { color: #6a7a9a; font-weight: 400; }
/* ── Level tabs ─────────────────────────────────────────── */
.t6CbsZeu {
display: flex;
align-items: center;
gap: 4px;
flex: 1 1;
justify-content: center;
padding: 0 16px;
}
.aW0NPQ2y {
display: flex;
align-items: center;
position: relative;
}
.pHV4Aa61 {
background: transparent;
border: 1px solid #1e2035;
border-radius: 8px;
color: #6a7a9a;
font-size: 13px;
font-weight: 500;
padding: 5px 14px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.pHV4Aa61:hover { background: #141624; color: #ccd6f6; border-color: #2a2d42; }
.L2QbBqOQ {
background: #141e35;
color: #4a9eed;
border-color: #1a4a7a;
font-weight: 600;
}
.oKNatscT {
display: none;
background: transparent;
border: none;
color: #4a5070;
cursor: pointer;
padding: 2px 4px;
font-size: 10px;
border-radius: 4px;
margin-left: 2px;
transition: color 0.15s;
}
.oKNatscT:hover { color: #e74c3c; }
.aW0NPQ2y:hover .oKNatscT { display: flex; }
.DNWFmtaW {
background: #141e35;
border: 1px solid #1a4a7a;
border-radius: 8px;
color: #ccd6f6;
font-size: 13px;
font-weight: 600;
padding: 5px 12px;
outline: none;
width: 120px;
}
.gRq3U9c0 {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px dashed #2a2d42;
border-radius: 8px;
color: #4a5070;
font-size: 13px;
font-weight: 500;
padding: 5px 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.gRq3U9c0:hover { border-color: #4a9eed; color: #4a9eed; background: #0d1a2a; }
/* ── Header right ─────────────────────────────────────────── */
.l8C8G2rz {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1;
justify-content: flex-end;
}
.N2BIp04R {
display: flex;
align-items: center;
gap: 7px;
background: #0d3a6a;
border: 1px solid #1a5aaa;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 6px 16px;
cursor: pointer;
transition: all 0.15s ease;
}
.N2BIp04R:hover { background: #1a4a8a; box-shadow: 0 0 16px rgba(74, 158, 237, 0.2); }
.kt3alYCu {
background: transparent;
border: 1px solid #2a2d42;
border-radius: 8px;
color: #6a7a9a;
font-size: 15px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.kt3alYCu:hover { background: #1a1d2e; color: #e74c3c; border-color: #e74c3c; }
/* ── Body ──────────────────────────────────────────────────── */
.oXs8Lpnw {
flex: 1 1;
display: flex;
min-height: 0;
overflow: hidden;
}
/* ── Library sidebar ───────────────────────────────────────── */
.chmL_1OJ {
width: 296px;
flex-shrink: 0;
background: #0b0c18;
border-right: 1px solid #1a1d2e;
display: flex;
flex-direction: column;
overflow: hidden;
}
.GNdTMx1P {
padding: 16px 16px 0;
flex-shrink: 0;
border-bottom: 1px solid #1a1d2e;
padding-bottom: 12px;
}
.EaHa6EiS {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 700;
color: #8892b0;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.EaHa6EiS i { color: #4a9eed; font-size: 13px; }
.zrDkZ3oV {
margin-left: auto;
background: #1a1d2e;
border: 1px solid #2a2d42;
color: #6a7a9a;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 10px;
}
/* search */
.ssad2KCh {
position: relative;
display: flex;
align-items: center;
}
.ssad2KCh > i {
position: absolute;
left: 10px;
color: #4a5070;
font-size: 12px;
pointer-events: none;
}
.WMyBc1Rz {
width: 100%;
background: #111320;
border: 1px solid #1e2035;
border-radius: 8px;
color: #ccd6f6;
font-size: 13px;
padding: 8px 32px 8px 30px;
outline: none;
transition: border-color 0.15s;
}
.WMyBc1Rz:focus { border-color: #2a5a8a; }
.WMyBc1Rz::placeholder { color: #3a4060; }
.nKPpNx5u {
position: absolute;
right: 8px;
background: transparent;
border: none;
color: #4a5070;
cursor: pointer;
font-size: 11px;
padding: 2px;
border-radius: 3px;
transition: color 0.15s;
}
.nKPpNx5u:hover { color: #ccd6f6; }
/* library scroll body */
.UM96mC6K {
flex: 1 1;
overflow-y: auto;
padding: 8px 0;
}
.UM96mC6K::-webkit-scrollbar { width: 4px; }
.UM96mC6K::-webkit-scrollbar-track { background: transparent; }
.UM96mC6K::-webkit-scrollbar-thumb { background: #2a2d42; border-radius: 2px; }
.UM96mC6K::-webkit-scrollbar-thumb:hover { background: #3a3d55; }
/* category */
.S9G4I4Lw { border-bottom: 1px solid #14162a; }
.rqcg_1IH {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 10px 16px;
cursor: pointer;
color: #8892b0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
transition: background 0.12s;
text-align: left;
}
.rqcg_1IH:hover { background: #111320; color: #ccd6f6; }
.NTTonuG4 { font-size: 13px; flex-shrink: 0; }
.JJhhUTWY { flex: 1 1; }
.Wlji_m4z {
background: #1a1d2e;
color: #4a5070;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
}
.zlLksm3X { font-size: 10px; color: #4a5070; margin-left: 2px; }
/* element grid - 2 columns (more space for architectural detail) */
.oTiTxfTm {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
gap: 8px;
padding: 6px 12px 14px;
}
.hl4uCCrZ {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
gap: 8px;
padding: 12px;
}
/* element card */
.oHowPDQg {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px 12px;
background: #0e101e;
border: 1px solid #181b2e;
border-radius: 12px;
cursor: grab;
transition: all 0.15s ease;
-webkit-user-select: none;
user-select: none;
position: relative;
overflow: hidden;
}
.oHowPDQg::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--el-color) 6%, transparent), transparent 70%);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.oHowPDQg:hover {
background: #111425;
border-color: color-mix(in srgb, var(--el-color) 30%, transparent);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.oHowPDQg:hover::before { opacity: 1; }
.oHowPDQg:active { cursor: grabbing; transform: translateY(0); }
.XntEcjx5 {
width: 52px;
height: 52px;
border-radius: 12px;
background: color-mix(in srgb, var(--el-color) 8%, #0a0b14);
border: 1px solid color-mix(in srgb, var(--el-color) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.XntEcjx5 i {
font-size: 22px;
opacity: 0.85;
transition: opacity 0.15s, transform 0.15s;
}
.oHowPDQg:hover .XntEcjx5 {
background: color-mix(in srgb, var(--el-color) 14%, #0a0b14);
border-color: color-mix(in srgb, var(--el-color) 40%, transparent);
}
.oHowPDQg:hover .XntEcjx5 i { opacity: 1; transform: scale(1.08); }
.vbFpgOxT {
font-size: 10px;
font-weight: 500;
color: #3a4460;
text-align: center;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
padding: 0 2px;
letter-spacing: 0.2px;
transition: color 0.15s;
}
.oHowPDQg:hover .vbFpgOxT { color: #7a8aaa; }
/* no results */
.e05y6j2R {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 40px 24px;
color: #4a5070;
text-align: center;
}
.e05y6j2R i { font-size: 28px; opacity: 0.4; }
.e05y6j2R p { font-size: 13px; line-height: 1.5; color: #5a6080; }
.e05y6j2R strong { color: #7a8aaa; }
/* library footer hint */
.Z3pay3C7 {
padding: 10px 16px;
font-size: 11px;
color: #3a4060;
border-top: 1px solid #14162a;
display: flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
}
.Z3pay3C7 i { color: #4a5070; }
/* ── Canvas area ───────────────────────────────────────────── */
.fd1qu3tc {
flex: 1 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
.EiuL8q75 {
height: 44px;
flex-shrink: 0;
background: #0d0e18;
border-bottom: 1px solid #1a1d2e;
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
position: relative;
}
.BhMQMCU0 { display: flex; align-items: center; gap: 10px; flex: 1 1; }
.rHARPZ7Y {
display: flex;
align-items: center;
gap: 6px;
background: #111320;
border: 1px solid #1e2035;
border-radius: 7px;
color: #6a7a9a;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
}
.rHARPZ7Y i { color: #4a9eed; font-size: 11px; }
.CGundkWQ { display: flex; align-items: center; gap: 6px; }
.edY1IYsz {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid #1e2035;
border-radius: 7px;
color: #4a5070;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s;
}
.edY1IYsz:hover:not(:disabled) { background: #141624; color: #8892b0; border-color: #2a2d42; }
.edY1IYsz:disabled { opacity: 0.4; cursor: not-allowed; }
/* canvas dot-grid */
.Ssli6OQR {
flex: 1 1;
overflow: hidden;
position: relative;
background-color: #0a0b16;
background-image: radial-gradient(circle, #232640 1px, transparent 1px);
background-size: 28px 28px;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
/* ── Placed elements ──────────────────────────────────────── */
.AAFeMy3Q {
position: absolute;
cursor: grab;
border-radius: 6px;
border: 1.5px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.AAFeMy3Q:hover { filter: brightness(1.15); }
.MaCzPZDe {
box-shadow: 0 0 0 2px rgba(74, 158, 237, 0.6), 0 4px 20px rgba(0,0,0,0.5);
}
.DRPB_LdE {
cursor: grabbing;
opacity: 0.8;
z-index: 100;
}
.GBVtod4S {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.Bd885qzQ {
border-radius: 10px;
border: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 24px;
min-height: 24px;
}
.Bd885qzQ i { opacity: 0.85; }
.OGx7mX2V {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
color: #ccd6f6;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8);
pointer-events: none;
letter-spacing: 0.3px;
background: rgba(10,11,22,0.7);
padding: 2px 6px;
border-radius: 4px;
}
/* ── Selection toolbar (in canvas toolbar row) ────────────── */
.mF2TNMbC {
display: flex;
align-items: center;
gap: 4px;
background: #0f1122;
border: 1px solid #2a3050;
border-radius: 10px;
padding: 4px 8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.ric6yjcA {
font-size: 12px;
font-weight: 600;
color: #8892b0;
display: flex;
align-items: center;
gap: 6px;
padding: 0 6px 0 4px;
}
.ric6yjcA i { color: #4a9eed; font-size: 11px; }
.IrrWF2MN {
width: 1px;
height: 18px;
background: #1e2240;
margin: 0 2px;
}
.VcWTD0J2 {
background: transparent;
border: none;
color: #6a7a9a;
width: 30px;
height: 30px;
border-radius: 7px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.12s;
}
.VcWTD0J2:hover { background: #1a1d2e; color: #ccd6f6; }
.kC4rMbtt:hover { background: #2a1010; color: #e74c3c; }
/* ── Draw tools ───────────────────────────────────────────── */
.PBjsfuNK {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.NC0ekjP1 {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid #1e2035;
border-radius: 7px;
color: #4a5070;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.NC0ekjP1:hover { background: #141624; color: #8892b0; border-color: #2a2d42; }
.r2xa5cd7 {
background: #0f1e38;
color: #4a9eed;
border-color: #1a4a7a;
font-weight: 600;
}
.r2xa5cd7:hover { background: #0f1e38; color: #4a9eed; }
.dYqaxb8V {
width: 1px;
height: 22px;
background: #1a1d2e;
margin: 0 6px;
flex-shrink: 0;
}
/* ── Resize handles ───────────────────────────────────────── */
.qZnuBtUE {
position: absolute;
inset: 0;
pointer-events: none;
}
.LsF12E3R {
position: absolute;
width: 8px;
height: 8px;
background: #fff;
border: 1.5px solid #4a9eed;
border-radius: 2px;
transform: translate(-50%, -50%);
pointer-events: all;
z-index: 10;
transition: background 0.1s;
}
.LsF12E3R:hover { background: #4a9eed; }
/* handle positions */
.zaPqyKlK { left: 0%; top: 0%; }
.TQZExAx4 { left: 50%; top: 0%; }
.VoWnXMuX { left: 100%; top: 0%; }
.Pn7KRBpR { left: 100%; top: 50%; }
.oNWLabWo { left: 100%; top: 100%; }
.FL3tJCNh { left: 50%; top: 100%; }
.AZiUpDXV { left: 0%; top: 100%; }
.gg1AJCsu { left: 0%; top: 50%; }
/* ── Draw preview ─────────────────────────────────────────── */
.RB2yXP4C {
position: absolute;
border: 1.5px dashed #64748b;
background: rgba(100, 116, 139, 0.06);
pointer-events: none;
border-radius: 2px;
}
/* ── Shape color dots in selection toolbar ────────────────── */
.KYkKCqey {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.15);
cursor: pointer;
transition: transform 0.12s, border-color 0.12s;
padding: 0;
flex-shrink: 0;
}
.KYkKCqey:hover { transform: scale(1.2); }
.EK5iLTdT {
border-color: #fff;
transform: scale(1.25);
box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
/* ── Canvas toolbar additions ─────────────────────────────── */
.jx2WX3hZ {
font-size: 11px;
color: #4a5070;
background: #111320;
border: 1px solid #1e2035;
border-radius: 6px;
padding: 3px 8px;
}
/* ── Status bar ───────────────────────────────────────────── */
.YWpdjfkc {
height: 28px;
flex-shrink: 0;
background: #0d0e18;
border-top: 1px solid #14162a;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
font-size: 11px;
color: #2a3050;
}
.YWpdjfkc kbd {
background: #1a1d2e;
border: 1px solid #2a2d42;
border-radius: 3px;
padding: 1px 5px;
font-size: 10px;
color: #4a5070;
font-family: inherit;
}
.ReN2CRSD { color: #3a4060; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* ── Level element count badge ────────────────────────────── */
.vYZGgNjX {
background: rgba(74, 158, 237, 0.2);
color: #4a9eed;
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 8px;
margin-left: 5px;
}
/* ── Label edit popup ─────────────────────────────────────── */
._aaHFnoy {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5);
}
.vcbUOGJs {
background: #0f1122;
border: 1px solid #2a2d42;
border-radius: 14px;
padding: 24px;
width: 340px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
gap: 14px;
}
.mxBWc4fq {
font-size: 13px;
color: #6a7a9a;
margin: 0;
}
.mxBWc4fq strong { color: #ccd6f6; }
.LZg3JEij {
background: #141624;
border: 1px solid #2a2d42;
border-radius: 8px;
color: #ccd6f6;
font-size: 14px;
padding: 10px 14px;
outline: none;
transition: border-color 0.15s;
}
.LZg3JEij:focus { border-color: #2a5a8a; }
.LZg3JEij::placeholder { color: #3a4060; }
.PmwmtytY {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.yapNf7gC {
background: transparent;
border: 1px solid #2a2d42;
border-radius: 8px;
color: #6a7a9a;
font-size: 13px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.12s;
}
.yapNf7gC:hover { background: #1a1d2e; color: #ccd6f6; }
.nsY1qmlQ {
background: #0d3a6a;
border: 1px solid #1a5aaa;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 8px 16px;
cursor: pointer;
transition: all 0.12s;
}
.nsY1qmlQ:hover { background: #1a4a8a; }
/* empty state */
.L8F0Ldjf {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
pointer-events: none;
padding: 40px;
}
.spkBKaI9 {
width: 80px;
height: 80px;
border-radius: 50%;
background: #0d1020;
border: 1px solid #1e2545;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #1a3a6a;
margin-bottom: 4px;
}
.bpg8ZjlG {
font-size: 20px;
font-weight: 700;
color: #3a4565;
margin: 0;
}
.gEXP5bt4 {
font-size: 14px;
color: #2a3050;
text-align: center;
line-height: 1.6;
margin: 0;
}
.JjtwKxQA {
display: flex;
gap: 24px;
margin-top: 8px;
}
.X_B5XaJY {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: #2a3050;
background: #0d0f1e;
border: 1px solid #1a1d35;
border-radius: 8px;
padding: 8px 14px;
}
/* Guest Line public-profile device mock.
Renders as a phone-shaped container. All colours come in as
props (brandColor) so the preview updates live as the user edits. */
.mp1qouYJ {
width: 320px;
/* Cap the phone to the preview column so it never overflows. The
inner .scroll clips with overflow: hidden, so when the content
doesn't fit, the bottom of the events list is what gets cut off. */
height: 100%;
max-height: 100%;
background: #080810;
border-radius: 36px;
border: 6px solid #1a1a2e;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 24px 60px rgba(0,0,0,0.6);
overflow: hidden;
display: flex;
flex-direction: column;
}
.kz524cmH {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px 6px;
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.7);
}
.mfE3CGwk {
display: flex;
gap: 5px;
font-size: 9px;
}
.JiiPPPl_ {
flex: 1 1;
min-height: 0;
overflow: hidden;
padding: 0 0 24px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Avatar */
.o6qeR0xY {
position: relative;
margin: 16px 0 10px;
}
.hhBwSEHY,
.JPmUsUfq {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
}
.JPmUsUfq {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 800;
color: #fff;
}
.aeCErdX6 {
position: absolute;
bottom: 0;
right: -2px;
font-size: 18px;
color: #06b6d4;
background: #080810;
border-radius: 50%;
line-height: 1;
}
.cmTGS3Yv {
font-size: 17px;
font-weight: 800;
color: #fff;
margin: 0 0 4px;
text-align: center;
padding: 0 16px;
}
.IiUemUOR {
font-size: 12px;
color: rgba(255,255,255,0.45);
margin: 0 0 8px;
}
.O7tVnVZl {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.frBCMucr {
font-size: 10px;
color: rgba(255,255,255,0.5);
text-decoration: underline;
-webkit-text-decoration-color: rgba(255,255,255,0.2);
text-decoration-color: rgba(255,255,255,0.2);
}
.dtJLhQK8 {
background: none;
border: none;
color: rgba(255,255,255,0.35);
cursor: pointer;
font-size: 10px;
padding: 0;
}
.z1Yr8sHZ {
font-size: 11px;
color: rgba(255,255,255,0.6);
text-align: center;
line-height: 1.55;
margin: 0 0 12px;
padding: 0 16px;
white-space: pre-line;
}
/* Socials */
.RKqLM27E {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.oc8yJ_ak {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.07);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.6);
font-size: 12px;
text-decoration: none;
}
/* Address card */
.LDg2lG7r {
width: calc(100% - 20px);
margin: 0 10px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.pUvNCXkw {
display: flex;
gap: 8px;
align-items: flex-start;
}
.pUvNCXkw i {
color: rgba(255,255,255,0.4);
font-size: 12px;
margin-top: 2px;
}
.lYVHSqBC {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.85);
margin: 0 0 3px;
}
.xdi_SwXl {
font-size: 10px;
color: rgba(255,255,255,0.4);
margin: 0;
}
._8Cu9p3q {
font-size: 10px;
color: rgba(255,255,255,0.45);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
padding: 0;
}
/* Featured card */
.a1Ifp9vT {
width: calc(100% - 20px);
margin: 0 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.tF5ZcpRc {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1;
}
.WBkF9bAX {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.SRUxqCLt {
font-size: 12px;
font-weight: 700;
color: #fff;
margin: 0 0 2px;
}
.yt8x12kH {
font-size: 10px;
color: rgba(255,255,255,0.45);
margin: 0;
}
/* Events */
.KCEQCTLM {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.FjsHiy1g {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.KAiaua0s {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.1);
background: transparent;
color: rgba(255,255,255,0.5);
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.bOpWbJXi {
color: #fff;
border-color: transparent;
}
.BZbmSCtz {
font-size: 12px;
color: rgba(255,255,255,0.25);
text-align: center;
margin: 20px 0;
}
.DvDYLLg0 {
display: flex;
flex-direction: column;
gap: 10px;
}
.P2Fe_3F2 {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
overflow: hidden;
}
.lRLlq18q {
height: 64px;
position: relative;
display: flex;
align-items: flex-end;
padding: 8px 10px;
}
.IKHlAVey {
position: absolute;
inset: 0;
}
.KwzCjmBz {
position: relative;
font-size: 13px;
font-weight: 800;
color: rgba(255,255,255,0.9);
letter-spacing: 0.02em;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.raKbF4Hy {
padding: 10px 10px 12px;
}
.pJSI12nG {
font-size: 12px;
font-weight: 700;
color: #fff;
margin: 0 0 3px;
}
.wvBTGOLo {
font-size: 10px;
color: rgba(255,255,255,0.4);
margin: 0 0 3px;
}
.FqTyp1JX {
font-size: 10px;
color: rgba(255,255,255,0.35);
margin: 0 0 8px;
}
.Hj3Znfo0 {
width: 100%;
padding: 8px;
background: transparent;
border: 1px solid;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
}
/* CRM page shell.
──────────────────────────────────────────────────────────────
No-scroll page methodology: shell fills viewport, the active
tab body is the only region that scrolls. Mirrors the IndEvent
shell so the user can move between event-mode and CRM-mode
without a context switch in feel. */
.Pw2gsW5n {
display: flex;
height: 100vh;
width: 100%;
overflow: hidden;
background: var(--bg-dark);
color: var(--text-primary);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.wMPBKIEN {
flex: 1 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.m7e6yFRm {
flex: 1 1;
display: flex;
flex-direction: column;
padding: 28px 32px 0 32px;
min-height: 0;
min-width: 0;
}
/* Greeting + global search row. Search is the only header
chrome - actions specific to a tab live inside the tab. */
.ch3gGheV {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.KWiRj5AZ {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--white);
margin: 0;
}
.CqpQz4Z2 {
display: flex;
align-items: center;
gap: 0.6rem;
}
.lsvIwVG_ {
position: relative;
width: 280px;
}
.lsvIwVG_ input {
width: 100%;
height: 38px;
box-sizing: border-box;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-pill);
color: var(--white);
padding: 0 14px 0 38px;
font-family: inherit;
font-size: 13px;
transition: border-color 0.15s ease;
}
.lsvIwVG_ input:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
}
.lsvIwVG_ i {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
.Sn57mpZe {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-pill);
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
color: var(--text-secondary);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.Sn57mpZe:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.18);
}
/* Tab body wrapper - flex grow + min-height:0 lets the inner
tab module own its scroll container instead of the page. */
.VYHwcRyM {
flex: 1 1;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
@media (max-width: 768px) {
.m7e6yFRm { padding: 18px 18px 0 18px; }
.KWiRj5AZ { font-size: 22px; }
.lsvIwVG_ { width: 180px; }
}
/* CRM Dashboard - layout + cards.
──────────────────────────────────────────────────────────────
Grid:
Row 1 - 4 KPI tiles (Total / Avg Age / Avg Spend / Attendance)
Row 2 - Gender Pie + Free-vs-Pay + Guest Stream (3-col)
Row 3 - Leaderboard (left, 2fr) + right rail
├─ Upcoming Events
├─ Action Items
└─ Suggested Groups */
/* No-scroll page methodology (mirrors the IndEvent dashboard):
the wrapper fills the available body height EXACTLY and the
bottom row is sized to absorb whatever's left after the KPI tiles
and chart row. Without height: 100% + overflow: hidden the third
row's `1fr` falls back to max-content, the leaderboard expands
the row to fit all 20 entries, and the right rail gets a tall
gap below it. */
.xZX7tGlV {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr);
grid-gap: 1rem;
gap: 1rem;
height: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
}
/* ── Row 1: KPI tiles ─────────────────────────────────────── */
.tpkcfbSQ {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 1rem;
gap: 1rem;
}
@media (max-width: 1100px) {
.tpkcfbSQ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Override the shared StatCard spacing for the dashboard KPI tiles.
The default StatCard is 160px tall with justify-content: space-between
which leaves a big visual gap between the heading row and the number.
For the dashboard we want a tighter, more "stat panel" feel. */
.dZHSsqdZ {
min-height: 0 !important;
padding: 18px 22px !important;
justify-content: flex-start !important;
row-gap: 0.65rem !important;
}
/* ── Row 2: charts ────────────────────────────────────────── */
.TD4gzlFp {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
grid-gap: 1rem;
gap: 1rem;
}
@media (max-width: 1280px) {
.TD4gzlFp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.TD4gzlFp > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.TD4gzlFp { grid-template-columns: minmax(0, 1fr); }
.TD4gzlFp > :first-child { grid-column: auto; }
}
/* ── Row 3: leaderboard + right rail ───────────────────────── */
.OCRb9Zho {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
grid-gap: 1rem;
gap: 1rem;
min-height: 0;
}
@media (max-width: 1100px) {
.OCRb9Zho { grid-template-columns: minmax(0, 1fr); }
}
/* The leaderboard (left, 2fr) sets the row height. To stop the
right rail from leaving dead space at the bottom, the rail is a
flex column where Upcoming Events + Action Items keep their
natural height and Suggested Groups (last child) flex-grows to
absorb whatever space is left. The card's inner list scrolls
internally if too long; otherwise the card just gets a bit of
extra breathing room. Either way - no visible gap below. */
.unW6e3vB {
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 0;
}
.unW6e3vB > * {
flex-shrink: 0;
}
.unW6e3vB > *:last-child {
flex: 1 1;
min-height: 0;
}
/* ── Card chrome (shared) ─────────────────────────────────── */
.dIlsHsmS {
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 16px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 1px 2px rgba(0, 0, 0, 0.35),
0 8px 24px rgba(0, 0, 0, 0.18);
/* overflow stays visible so Nivo chart tooltips can extend past
the card / row / viewport edges. Children that need clipping
handle it themselves. */
overflow: visible;
display: flex;
flex-direction: column;
}
.VmF6LlTn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.55);
flex-shrink: 0;
}
.APItOaLp {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--white);
font-size: 14px;
font-weight: 700;
}
.APItOaLp i {
color: var(--accent-1);
font-size: 12px;
}
.E8a9qHJC {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.B_JFbUwa {
background: none;
border: none;
color: var(--text-secondary);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0;
transition: color 0.15s ease;
}
.B_JFbUwa:hover { color: var(--accent-1); }
.CfqJUx33 {
padding: 1.1rem 1.25rem;
flex: 1 1;
min-height: 0;
}
.TLwyBVVk {
padding: 0;
flex: 1 1;
min-height: 0;
}
/* Used by the three middle chart cards (Gender / FreeVsPay / GuestStream)
so their legends all sit on the same baseline at the bottom of the
card regardless of the chart shape inside. The chart wrapper grows to
fill remaining space and the legend gets margin-top: auto. */
.LHBH9tr6 {
padding: 1.1rem 1.25rem;
flex: 1 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: visible;
}
.Iqi8IndV {
flex: 1 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sqUkW4AN { align-items: stretch; }
/* Wrapper for a Nivo Responsive chart. ResponsivePie / ResponsiveBar
need a definite size on the parent (not just min-height) or they
render at 0 and snap up on first resize - producing the "skewed and
tiny" look. Fixed height + full width gives them a real bounding box. */
.Ni4BoOGL {
width: 100%;
height: 240px;
position: relative;
/* Tooltip is positioned absolutely by Nivo - parents up the chain
need overflow: visible too (see .card / .card_body_chart). */
overflow: visible;
}
.OVV3gOx6 { margin-top: auto; }
/* Expandable-card affordance.
Mirrors the IndEvent dashboard pattern (Revenue / Sales Channels /
Top Promoters cards) so the visual language is identical across
the in-event and CRM modes:
- subtle ::after icon (fa-up-right-and-down-left-from-center)
in the top-right corner, hidden at rest
- on hover/focus the card lifts 1px, the subtitle text fades
OUT (so the icon has a clean slot and doesn't sit on top of
e.g. "62% paid · last 12 months"), and the icon fades IN
- on focus-visible the card gets a blue ring + the icon shows */
._keOQ8v0 {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
position: relative;
}
._keOQ8v0:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 2px 4px rgba(0, 0, 0, 0.4),
0 12px 32px rgba(0, 0, 0, 0.28);
}
._keOQ8v0:active { transform: translateY(0); }
._keOQ8v0:focus-visible {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}
._keOQ8v0::after {
content: '\f424';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 0.85rem;
right: 0.85rem;
font-size: 10px;
color: rgba(255, 255, 255, 0.25);
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
pointer-events: none;
z-index: 2;
}
._keOQ8v0:hover::after,
._keOQ8v0:focus-visible::after {
opacity: 1;
color: rgba(255, 255, 255, 0.55);
}
/* Some cards (e.g. Guest Stream) have tabs in their header where
the corner expand glyph would normally sit. Suppress the ::after
icon for those - they render an inline expand button instead so
it never overlaps the tab strip. */
.wZg50lqe::after { content: none !important; }
/* Inline expand button - visible at rest at low opacity, brightens
on card hover. Use for cards that can't fit the corner icon. */
.tGVMLusl {
width: 26px;
height: 26px;
border-radius: 7px;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 10px;
transition: all 0.15s ease;
flex-shrink: 0;
}
._keOQ8v0:hover .tGVMLusl,
._keOQ8v0:focus-visible .tGVMLusl {
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
}
.tGVMLusl:hover {
background: rgba(13, 122, 199, 0.15);
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
}
/* Fade the header subtitle / link out on hover so the expand icon
has a clean target and doesn't overlap "62% paid · last 12 months"
or "271 sold · $5,420". The text returns the moment focus leaves. */
._keOQ8v0 .E8a9qHJC,
._keOQ8v0 .B_JFbUwa {
transition: opacity 0.15s ease;
}
._keOQ8v0:hover .E8a9qHJC,
._keOQ8v0:hover .B_JFbUwa,
._keOQ8v0:focus-visible .E8a9qHJC,
._keOQ8v0:focus-visible .B_JFbUwa {
opacity: 0;
}
/* ── Free vs Pay (stacked bars per month) ──────────────────
Layout:
.fvp_chart - fixed 220px row, columns stretch to its full
height so children can size with percentages
.fvp_col - one column per month: chart area on top, label
pinned at the bottom
.fvp_bars - flex:1 area within the column, align flex-end so
the stack hugs the baseline
.fvp_stack - explicit height % of .fvp_bars (column height
relative to the tallest column = max)
.fvp_seg - free segment on top + pay segment below, each
with height % of the parent stack */
.JKu4wuys {
flex: 1 1;
min-height: 180px;
width: 100%;
display: flex;
align-items: stretch;
gap: 8px;
padding: 0 4px;
position: relative;
}
/* Each column is a 2-row grid so the bars area + label are pinned
to their rows. This guarantees every label sits on the same baseline
regardless of how tall the bar above it is. */
.eAZrUSmM {
flex: 1 1;
min-width: 0;
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
}
.S1_NGHYE {
display: flex;
align-items: flex-end;
justify-content: stretch;
min-height: 0;
min-width: 0;
}
.JtN0jk00 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
min-height: 2px;
}
.QhZiywTp {
width: 100%;
transition: filter 0.15s ease;
}
/* Two-tone blue: solid brand blue on the bottom (Pay = the
foundation), lighter sky blue stacked on top (Free). */
.GnSSrYek { background: var(--accent-1); }
.XVb1_Qbj { background: #6db8ed; }
.eAZrUSmM:hover .QhZiywTp { filter: brightness(1.15); }
.I79coKYx {
margin-top: 8px;
font-size: 10px;
color: var(--text-muted);
text-align: center;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.FoadBISP {
display: flex;
gap: 1rem;
margin-top: 0.6rem;
font-size: 11px;
color: var(--text-secondary);
}
.ykcF9946 {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.ADMebgiQ {
width: 8px;
height: 8px;
border-radius: 50%;
}
/* ── Gender Pie ──────────────────────────────────────────── */
.MjCAZeWS {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.CrB9uvEi {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.45rem 1.2rem;
gap: 0.45rem 1.2rem;
margin-top: 0.4rem;
width: 100%;
font-size: 12px;
color: var(--text-secondary);
}
.pjwoaYD4 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.l1bOgdpm {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.GlI1zxvT {
flex: 1 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.re6jWN3k {
color: var(--white);
font-weight: 700;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* ── Guest Stream (line chart) ─────────────────────────────── */
/* Flex:1 so it fills remaining height of card_body_chart between
the range row at top and the legend pinned at the bottom. */
.P8NUoNzw {
position: relative;
width: 100%;
flex: 1 1;
min-height: 180px;
}
.XtQ3wZXP { width: 100%; height: 100%; display: block; }
.zohg1nst {
position: absolute;
transform: translate(-50%, -130%);
min-width: 200px;
background: #14161c;
border: 1px solid #2d2f39;
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #ffffff;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
font-family: inherit;
}
.Y1WwAAXe {
font-size: 15px;
font-weight: 700;
color: #ffffff;
}
.jflkDkFP {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(120, 132, 150);
margin-top: 4px;
}
._NIMNGg0 {
display: flex;
gap: 0.35rem;
margin-bottom: 0.6rem;
}
.rQMeQVaz {
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-secondary);
border-radius: var(--radius-pill);
padding: 4px 10px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.rQMeQVaz:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.18);
}
.iFfAboXa {
color: var(--white);
background: rgba(13, 122, 199, 0.18);
border-color: rgba(13, 122, 199, 0.55);
}
/* ── Leaderboard ──────────────────────────────────────────── */
/* The leaderboard card is the left-hand neighbour of the right rail
(3 stacked cards) so the row stretches to match. We let the list
fill the available card height and scroll if needed - that means
we can show 12+ entries instead of 8 with no dead space below. */
.FZpWWGl2 {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.FZpWWGl2::-webkit-scrollbar { width: 4px; }
.FZpWWGl2::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.XAG_U1EU {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.55rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
transition: background 0.15s ease;
}
.XAG_U1EU:hover { background: rgba(255, 255, 255, 0.025); }
.XAG_U1EU:last-child { border-bottom: none; }
.G0FhQX_E {
width: 22px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-align: center;
flex-shrink: 0;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.coibXsix {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.pyvUhsU8 {
flex: 1 1;
min-width: 0;
}
.Cm6ROwBz {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.UuypThk4 {
font-size: 11px;
color: var(--text-muted);
margin: 2px 0 0 0;
}
.jXvrdKht {
font-size: 12px;
font-weight: 700;
color: var(--white);
background: rgba(13, 122, 199, 0.15);
border: 1px solid rgba(13, 122, 199, 0.35);
border-radius: var(--radius-pill);
padding: 3px 10px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* ── Upcoming Events ──────────────────────────────────────── */
.UoSucuGK {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.UoSucuGK::-webkit-scrollbar { width: 4px; }
.UoSucuGK::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.D7FVGwvE {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}
.D7FVGwvE:last-child { border-bottom: none; }
.kxqeDOhZ {
width: 36px;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
color: var(--text-secondary);
}
.N5oOpyF5 {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
}
.Xv9ipN6E {
font-size: 18px;
font-weight: 800;
color: var(--white);
line-height: 1;
}
.iGjBGsa5 {
flex: 1 1;
min-width: 0;
}
.Gn5GWeWB {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0;
}
.QZFLIRBK {
font-size: 11px;
color: var(--text-muted);
margin: 2px 0 0 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.hlFSpxM8 {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(13, 122, 199, 0.35);
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
}
.hlFSpxM8:hover {
background: var(--accent-1);
color: var(--white);
}
/* ── Insights card tab strip ──────────────────────────────── */
/* Sits in the card header where the subtitle would normally go.
Active tab gets the accent underline pattern used by the inner
tabs inside the guest detail drawer, so the visual language is
consistent across the whole CRM. */
.SV6SZHWQ {
display: inline-flex;
gap: 2px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-soft);
border-radius: var(--radius-pill);
padding: 2px;
}
.jpu0parJ {
background: transparent;
border: none;
padding: 4px 10px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-pill);
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.jpu0parJ:hover { color: var(--white); }
.eJYVJHYs {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.55);
}
.CiPFGcHb {
font-size: 9px;
font-weight: 700;
background: rgba(255, 255, 255, 0.08);
color: var(--white);
padding: 1px 6px;
border-radius: var(--radius-pill);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.eJYVJHYs .CiPFGcHb {
background: rgba(13, 122, 199, 0.4);
}
/* ── Action Items / Suggested Groups (right rail) ──────────── */
.voxyxe9n,
.lfiEzatz {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.voxyxe9n::-webkit-scrollbar,
.lfiEzatz::-webkit-scrollbar { width: 4px; }
.voxyxe9n::-webkit-scrollbar-thumb,
.lfiEzatz::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.P3rqzhPR,
.uDUmXH2D {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
background: none;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
text-align: left;
color: inherit;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease;
}
.P3rqzhPR:last-child,
.uDUmXH2D:last-child { border-bottom: none; }
.P3rqzhPR:hover,
.uDUmXH2D:hover { background: rgba(255, 255, 255, 0.025); }
.yoPrv6oJ,
.pO8zA58Z {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.RIHRKDYK,
.XH_gFVw_ {
flex: 1 1;
min-width: 0;
}
.MqT9mP6U,
.eDkJ54lK {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0;
}
.bYRlyN2C,
.Ub5iTX6j {
font-size: 11px;
color: var(--text-muted);
margin: 2px 0 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wqcg_YWk {
font-size: 14px;
font-weight: 800;
color: var(--white);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.35rem;
}
.wqcg_YWk i {
font-size: 9px;
color: var(--text-muted);
}
.I0k1_A4k {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.04);
border-radius: var(--radius-pill);
padding: 3px 10px;
flex-shrink: 0;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* ── Skeleton states ──────────────────────────────────────── */
.AzOPDVUx {
min-height: 130px;
border-radius: 16px;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.CEJdchR5 {
min-height: 280px;
border-radius: 16px;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.Rx6hJHvN {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 0.5rem;
color: var(--text-muted);
font-size: 12px;
}
.Rx6hJHvN i { font-size: 24px; opacity: 0.4; }
:root {
--white: #ffffff;
--black: #000000;
--bg-dark: #01000D;
--sub-bg-dark: #161824;
--sub-bg-light: #f0f1f2;
--accent-1: #0D7AC7;
--success-green: #3CA259;
--cancelled-red: #ff2626;
--text-primary: #ffffff;
--text-secondary: rgb(151, 163, 180);
--text-muted: rgb(120, 132, 150);
--border-soft: #2d2f39;
--border-softer: rgba(255, 255, 255, 0.08);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
}
.t-xs1 { font-size: 8px; }
.t-xs2 { font-size: 10px; }
.t-xs3 { font-size: 12px; }
.t-s1 { font-size: 14px; }
.t-s2 { font-size: 15px; }
.t-s3 { font-size: 16px; }
.t-m1 { font-size: 17px; }
.t-m2 { font-size: 22px; }
.t-m3 { font-size: 25px; }
.t-l1 { font-size: 28px; }
.t-l2 { font-size: 31px; }
.t-l3 { font-size: 34px; }
.t-xl1 { font-size: 37px; }
.t-xl2 { font-size: 40px; }
.t-xl3 { font-size: 43px; }
.t-bold { font-weight: 600; }
.t-bolder { font-weight: 700; }
.t-muted { color: var(--text-muted); }
.t-subtle { color: var(--text-secondary); }
.t-primary { color: var(--text-primary); }
.Tc6Tsb3X {
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.Tc6Tsb3X:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.v59nS_yJ { padding: 10px 20px; font-size: 14px; }
.dNDFnre2 { padding: 6px 14px; font-size: 12px; }
.Z6ABCLf_ {
background-color: var(--accent-1);
color: var(--white);
}
.Z6ABCLf_:hover:not(:disabled) { background-color: #0e88dd; }
.HSuEJHPI {
background-color: var(--sub-bg-dark);
border-color: var(--border-soft);
color: var(--white);
}
.HSuEJHPI:hover:not(:disabled) { border-color: var(--border-softer); }
.tdBKmGZl {
background-color: transparent;
border-color: var(--border-soft);
color: var(--white);
}
.tdBKmGZl:hover:not(:disabled) { background-color: var(--sub-bg-dark); }
.OScfzJjz {
background-color: var(--cancelled-red);
color: var(--white);
}
.OScfzJjz:hover:not(:disabled) { background-color: #e01d1d; }
.kW9y3wOS {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
flex-shrink: 0;
}
.x7oOyPDk {
width: 100%;
min-height: 160px;
border-radius: var(--radius-lg);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
padding: 22px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
row-gap: 0.75rem;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease;
}
.x7oOyPDk:hover {
border-color: var(--border-softer);
}
.qdoVMmir {
min-height: 120px;
border-radius: var(--radius-md);
padding: 14px 16px;
row-gap: 0.55rem;
}
.vhnKFcHK {
display: flex;
align-items: center;
column-gap: 0.75rem;
}
.hAOmFMDy {
column-gap: 0.55rem;
}
.QrfBpEzg {
height: 36px;
width: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nReOOi3N {
height: 28px;
width: 28px;
border-radius: 8px;
}
.QrfBpEzg i {
font-size: 14px;
}
.nReOOi3N i {
font-size: 12px;
}
.ku4aGgIF {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.j5yGic1p {
font-size: 10px;
}
.yVJNVGIY {
font-size: 32px;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
column-gap: 0.25rem;
}
.TeEvy2_B {
font-size: 22px;
}
.mxmsdBz8 {
font-size: 20px;
font-weight: 600;
color: var(--text-secondary);
}
.XE8WBqN7 {
font-size: 14px;
}
.PJZznnKM {
font-size: 11px;
font-weight: 500;
line-height: 1.35;
color: var(--text-muted);
margin: 0;
letter-spacing: 0.01em;
}
.j_OtM4wM {
width: 100%;
min-height: 420px;
border-radius: var(--radius-lg);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
padding: 24px 26px 22px 26px;
box-sizing: border-box;
display: flex;
flex-direction: column;
row-gap: 1rem;
position: relative;
overflow: hidden;
}
.de0W0ZqC {
display: flex;
flex-direction: column;
row-gap: 0.2rem;
flex-shrink: 0;
}
.t7U8u20o {
display: flex;
align-items: flex-start;
justify-content: space-between;
column-gap: 1rem;
}
.mQxt3i9X {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.ZzTTUNmd {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.yKxAX4Wo {
width: 100%;
flex: 1 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.q4hiU7fr {
height: 320px;
flex-shrink: 0;
}
.Oc9VjNz1 {
display: flex;
align-items: center;
column-gap: 8px;
border-bottom: 1px solid var(--border-soft);
padding-bottom: 0;
}
.taD0OeH6 {
flex: 1 1;
}
.UtsxHdUi {
background: transparent;
border: none;
padding: 10px 18px;
margin-bottom: -1px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
column-gap: 6px;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.UtsxHdUi:hover {
color: var(--text-primary);
}
.r7Zi6UGK {
color: var(--text-primary);
border-bottom-color: var(--accent-1);
}
.r_3sdP6C {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 0 6px;
height: 18px;
border-radius: var(--radius-pill);
background-color: var(--border-soft);
color: var(--text-primary);
font-size: 10px;
font-weight: 700;
}
.r7Zi6UGK .r_3sdP6C {
background-color: var(--accent-1);
}
.xoeVOz7a {
display: flex;
align-items: flex-start;
justify-content: space-between;
column-gap: 1rem;
padding-bottom: 12px;
}
.tg3g9tAk {
display: flex;
flex-direction: column;
row-gap: 2px;
min-width: 0;
}
.x4NtSL07 {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.PwZU7q0m {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.pQqZ3bRV {
display: flex;
align-items: center;
column-gap: 8px;
flex-shrink: 0;
}
.WCPa6TVx {
display: inline-flex;
align-items: center;
column-gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-pill);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
width: 350px;
box-sizing: border-box;
transition: border-color 0.15s ease;
}
.WCPa6TVx:focus-within {
border-color: var(--accent-1);
}
.BjDCt6S3 {
width: 100%;
}
.WRuYRp5e {
color: var(--text-muted);
font-size: 13px;
flex-shrink: 0;
}
.odWGhpDd {
flex: 1 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 14px;
min-width: 0;
}
.odWGhpDd::placeholder {
color: var(--text-muted);
}
.UxaM74KW {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
}
.UxaM74KW:hover {
color: var(--text-primary);
}
.A2j5RKV3 {
position: fixed;
inset: 0;
background-color: rgba(1, 0, 13, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
box-sizing: border-box;
animation: mauqGtBe 0.15s ease;
}
.b8jXpJll {
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
max-height: 88vh;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
animation: Qg_5fdwN 0.18s ease;
overflow: hidden;
}
.VflsZqyE { width: 100%; max-width: 420px; }
.qb4H7RPv { width: 100%; max-width: 600px; }
.wkdZ3HSt { width: 100%; max-width: 880px; }
.HThKuBhC {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.gbqUcnEe {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.zu2_Y2Lg {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.zu2_Y2Lg:hover {
background-color: var(--border-soft);
color: var(--text-primary);
}
.yyPcPHNR {
padding: 20px 22px;
overflow-y: auto;
flex: 1 1;
}
.HYGUfU2D {
display: flex;
align-items: center;
justify-content: flex-end;
column-gap: 10px;
padding: 16px 22px;
border-top: 1px solid var(--border-soft);
flex-shrink: 0;
}
@keyframes mauqGtBe {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Qg_5fdwN {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.CHMYdxJe {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 12px;
padding: 48px 24px;
text-align: center;
color: var(--text-muted);
}
.FnVjNrDH {
width: 56px;
height: 56px;
border-radius: var(--radius-pill);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 20px;
}
._l_3xbIm {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.pSyEM1M2 {
font-size: 12px;
color: var(--text-muted);
max-width: 360px;
line-height: 1.5;
}
.fLBmj3lq {
margin-top: 4px;
}
.V2dan9P7 {
display: block;
border-radius: var(--radius-md);
}
.zIths0hN {
display: flex;
align-items: center;
column-gap: 12px;
padding: 14px;
border-radius: var(--radius-md);
background-color: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
}
.N1LVyoFj {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.c2_VFTKG {
display: flex;
flex-direction: column;
row-gap: 6px;
flex: 1 1;
min-width: 0;
}
.wxp6_JJJ { width: 60%; height: 12px; border-radius: 4px; }
.N9iFck9B { width: 40%; height: 10px; border-radius: 4px; }
.WZOwZvtm {
display: inline-flex;
align-items: center;
column-gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
border: 1px solid transparent;
}
.UYvaQ07x {
background-color: rgba(151, 163, 180, 0.12);
border-color: rgba(151, 163, 180, 0.28);
color: var(--text-secondary);
}
.ovFzkrZ_ {
background-color: rgba(13, 122, 199, 0.15);
border-color: rgba(13, 122, 199, 0.35);
color: #3aa0e0;
}
.xs_aNTiR {
background-color: rgba(60, 162, 89, 0.12);
border-color: rgba(60, 162, 89, 0.35);
color: var(--success-green);
}
.wqUDXrjb {
background-color: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: #f59e0b;
}
.liCSFINB {
background-color: rgba(255, 38, 38, 0.12);
border-color: rgba(255, 38, 38, 0.35);
color: var(--cancelled-red);
}
.E6M_UlyM {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background-color: currentColor;
}
.MKWqoxDH {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--text-primary);
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
-webkit-user-select: none;
user-select: none;
}
.BG4NHrij { width: 28px; height: 28px; font-size: 10px; }
.Tswr8bYS { width: 36px; height: 36px; font-size: 12px; }
.eLeu5JKZ { width: 52px; height: 52px; font-size: 16px; }
.ndZ12cdT { width: 72px; height: 72px; font-size: 22px; }
.XkLn4rNx {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
display: block;
}
.KTJDrfLj {
height: 56px;
background: #0a0b11;
border-bottom: 1px solid #2d2f39;
display: flex;
align-items: center;
padding: 0 24px;
flex-shrink: 0;
gap: 0;
}
.drXLkGcD {
color: var(--white);
font-size: 14px;
font-weight: 600;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.oXvSbDI7 {
margin-left: 10px;
font-size: 11px;
font-weight: 500;
color: rgb(120, 132, 150);
}
/* CRM shared drawer chrome.
──────────────────────────────────────────────────────────────
Same recipe as indevent-project/src/components/IndEvent/drawers/
Drawer.module.css - kept local to the CRM module so future
tweaks (wider rail, different stack rules) don't ripple into
the in-event experience. */
.T7cegaR3 {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
animation: HWgcfuCC 0.2s ease;
}
.K7tjWi8I {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 720px;
max-width: 92vw;
background: rgba(20, 22, 30, 0.78);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border-left: 1px solid rgba(255, 255, 255, 0.08);
z-index: 1001;
display: flex;
flex-direction: column;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
animation: nCae0WkN 0.28s ease;
}
.PFGXhNR5 { width: 540px; }
.lA_R5wpF { width: 920px; }
@keyframes HWgcfuCC { from { opacity: 0; } to { opacity: 1; } }
@keyframes k2owkB1m { from { opacity: 1; } to { opacity: 0; } }
@keyframes nCae0WkN { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes TW_GtSvU{ from { transform: translateX(0); } to { transform: translateX(100%); } }
.UPNG7FYL { animation: TW_GtSvU 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; }
.lqaulh2A { animation: k2owkB1m 0.22s ease forwards; }
.EXdzWbW4 {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.4rem 1.5rem;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.PsV42B01 {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #2d2f39;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: inherit;
transition: all 0.15s ease;
}
.PsV42B01:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
border-color: #3d4052;
}
.mDXptRpI { flex: 1 1; min-width: 0; }
.hk_rPzEQ {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--white);
}
.pkHVvupw {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
font-size: 12px;
color: var(--text-muted);
flex-wrap: wrap;
}
.JUtRU4P1 { color: rgba(255, 255, 255, 0.18); }
.DaLzu4Pp { color: var(--white); font-weight: 600; }
.b2B6jKrb {
flex: 1 1;
overflow-y: auto;
padding: 1.5rem;
background: var(--bg-dark);
}
.b2B6jKrb::-webkit-scrollbar { width: 4px; }
.b2B6jKrb::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.uto3Ha65 {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background:
linear-gradient(0deg,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0.012) 100%),
rgba(20, 22, 30, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 -4px 14px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
z-index: 2;
}
.qrBeVXMr { flex: 1 1; }
.gZKhc1N1 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.1rem;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.gZKhc1N1:hover:not(:disabled) { background: #1389d8; }
.gZKhc1N1:active:not(:disabled) { transform: scale(0.98); }
.gZKhc1N1:disabled { opacity: 0.4; cursor: not-allowed; }
.aVVhc8BU {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1rem;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.aVVhc8BU:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.14);
}
.LCFPtpMp { margin-bottom: 1.75rem; }
.LCFPtpMp:last-child { margin-bottom: 0; }
.HYOX_1LJ {
margin: 0 0 0.85rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 600px) {
.K7tjWi8I, .PFGXhNR5, .lA_R5wpF {
width: 100vw;
max-width: 100vw;
}
.EXdzWbW4 { padding: 1.1rem 1.1rem; }
.b2B6jKrb { padding: 1.1rem; }
.uto3Ha65 { padding: 0.85rem 1.1rem; }
}
/* GuestDetailDrawer-specific bits.
Drawer chrome reuses the shared Drawer.module.css. */
.CFaH3vnu {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 1.5rem;
}
.jAIVCEtR {
flex: 1 1;
min-width: 0;
}
.byhnNqfn {
font-size: 18px;
font-weight: 700;
color: var(--white);
margin: 0;
}
.NmKrKpMi {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.PYITNFU2 {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.kSX8NpKg {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.kSX8NpKg:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.18);
}
.H_z00Mdn {
background: var(--accent-1);
color: var(--white);
border-color: rgba(255, 255, 255, 0.08);
}
.H_z00Mdn:hover { background: #1389d8; color: var(--white); }
/* ── Stat row: Events / Attendance / Spend ────────────── */
.lBNcUKCB {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
gap: 10px;
margin-bottom: 1.5rem;
}
.k3NxiRhp {
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.hQH36coC {
font-size: 22px;
font-weight: 800;
color: var(--white);
line-height: 1;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.GXaUBpaD {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ── Inner tab strip ────────────────────────────────────── */
._dc1Lpil {
display: flex;
gap: 6px;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-soft);
}
.Quk8f1HG {
background: transparent;
border: none;
padding: 8px 14px;
margin-bottom: -1px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s ease;
}
.Quk8f1HG:hover { color: var(--white); }
.LGk_rELB { color: var(--white); border-bottom-color: var(--accent-1); }
.Pkw74iZg {
margin-left: 6px;
background: var(--border-soft);
color: var(--white);
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 999px;
letter-spacing: 0;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* ── Details tab ────────────────────────────────────────── */
.vu6T2o3I {
display: grid;
grid-template-columns: 100px 1fr;
grid-row-gap: 10px;
row-gap: 10px;
grid-column-gap: 16px;
column-gap: 16px;
font-size: 13px;
}
.C6ncjfG4 {
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.BNQvjTjH {
color: var(--white);
font-weight: 500;
}
.IhUC2ULX { display: flex; flex-wrap: wrap; gap: 6px; }
.wPneojV1 {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid var(--border-soft);
display: inline-flex;
align-items: center;
gap: 4px;
}
.a0mnWTCr {
background: transparent;
border: none;
padding: 0 0 0 2px;
margin-left: 2px;
color: var(--text-muted);
font-family: inherit;
font-size: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
width: 14px;
height: 14px;
transition: all 0.15s ease;
}
.a0mnWTCr:hover {
color: var(--white);
background: rgba(239, 68, 68, 0.25);
}
/* ── Events tab ────────────────────────────────────────── */
.icMDIaKi {
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 12px;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
align-items: center;
}
.gEYAtLuq {
font-size: 9px;
font-weight: 700;
padding: 3px 7px;
border-radius: 5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.RzgORTyL { background: rgba(13, 122, 199, 0.18); color: var(--accent-1); border: 1px solid rgba(13, 122, 199, 0.4); }
.KB0vgT40 { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.35); }
.Ly3JWa08 { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); border: 1px solid rgba(148, 163, 184, 0.35); }
.x0Zc7TR1 { color: var(--white); font-weight: 600; font-size: 13px; margin: 0; }
.ddCX7FMR { color: var(--text-muted); font-size: 11px; margin: 2px 0 0; }
.j_99rdRX { color: var(--white); font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* ── Expandable event card ─────────────────────────────── */
.V3pUSuqv {
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}
.EufzbQHk {
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 12px;
gap: 12px;
width: 100%;
padding: 12px 0;
background: transparent;
border: none;
color: inherit;
font-family: inherit;
text-align: left;
cursor: pointer;
align-items: start;
}
.EufzbQHk:hover .x0Zc7TR1 { color: var(--accent-1); }
.p2NCEpF1 { min-width: 0; }
.P7tgXS83 {
color: var(--text-muted);
font-size: 11px;
margin-top: 6px;
transition: color 0.15s ease;
}
.EufzbQHk:hover .P7tgXS83 { color: var(--white); }
.aeG0bn70 {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.TvI4JRdk {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid var(--border-soft);
letter-spacing: 0.02em;
}
.Tro8ABsj {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
border-color: rgba(34, 197, 94, 0.35);
}
.UaREVH0C {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
}
.paea6Tkn {
background: rgba(234, 179, 8, 0.1);
color: #eab308;
border-color: rgba(234, 179, 8, 0.35);
}
/* ── Expanded detail panel ─────────────────────────────── */
.ZeGmj7qY {
padding: 6px 0 16px 0;
}
.pwNcpp0V {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-1);
margin: 14px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-soft);
}
.pwNcpp0V:first-child { margin-top: 4px; }
.DBClROSU {
display: grid;
grid-template-columns: 140px 1fr;
grid-row-gap: 8px;
row-gap: 8px;
grid-column-gap: 14px;
column-gap: 14px;
font-size: 12px;
align-items: start;
}
.KZaa_aWv {
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
}
.NKW4LGxP {
color: var(--white);
font-weight: 500;
word-break: break-word;
}
.E6ZxRgN5 {
margin: 0;
padding: 8px 10px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 6px;
font-size: 11px;
color: var(--text-secondary);
white-space: pre-wrap;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.uWImF4K4 {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.uWImF4K4 li {
font-size: 12px;
color: var(--white);
}
.LLuGwoph {
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
}
.A1dkr4B3 {
max-width: 100%;
max-height: 120px;
border-radius: 8px;
border: 1px solid var(--border-soft);
}
/* ── Spending tab ──────────────────────────────────────── */
.qQrWDShn {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
gap: 10px;
margin-bottom: 1rem;
}
.FGewEaud {
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px;
}
.g5EMFP9k { color: var(--white); font-weight: 800; font-size: 18px; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.Ot8wdG63 { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.UuTNAwH6 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.hKXLIAIx { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.CF7QQJwX { color: var(--text-muted); font-weight: 700; font-size: 12px; flex-shrink: 0; }
/* ── Activity chart placeholder ────────────────────────── */
.d5otX_bB {
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px;
margin-bottom: 1rem;
height: 140px;
}
/* ── Action button: active state ───────────────────────── */
.FjKdWztO {
background: rgba(13, 122, 199, 0.18);
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
}
/* ── "Add" chip variants ───────────────────────────────── */
/* Used in the Details tab next to the Tags / Groups chip rows
so the user has an inline "+ Add" affordance without leaving
the tab. Same shape as a regular chip but with a dashed border
to read as "this is empty / awaiting input". */
.M6bPSICU {
border-style: dashed;
cursor: pointer;
color: var(--text-secondary);
background: transparent;
font-family: inherit;
transition: all 0.15s ease;
}
.M6bPSICU:hover {
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.08);
}
.icR7RmxS {
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
}
.icR7RmxS:hover {
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.1);
}
/* ── "Message sent" inline banner ──────────────────────── */
.aPRLMpjY {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 14px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.35);
border-radius: 8px;
color: #22c55e;
font-size: 12px;
font-weight: 600;
}
/* ── Inline action sheet (Add tag / Add to group / Send) ─
Slides up from the bottom of the drawer. Same backdrop +
slide animation pattern as the main drawer chrome so it
feels like a natural sub-surface. */
.mBB4yHnG {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
animation: YiMxLy32 0.18s ease;
}
.qhBzmL9_ {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 70%;
background: rgba(20, 22, 30, 0.98);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px 16px 0 0;
z-index: 6;
display: flex;
flex-direction: column;
animation: lPJHmDMA 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.4);
}
@keyframes YiMxLy32 { from { opacity: 0; } to { opacity: 1; } }
@keyframes lPJHmDMA { from { transform: translateY(20%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.Le5qc2aW {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.GRqm63A4 {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--white);
}
.IqLCgDjM {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--border-soft);
background: rgba(255, 255, 255, 0.02);
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
}
.IqLCgDjM:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.18);
}
.m70uqHis {
padding: 16px 20px 20px;
overflow-y: auto;
}
.B_nTVR2b {
font-size: 11px;
color: var(--text-muted);
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.r9SH_m3z {
width: 100%;
box-sizing: border-box;
height: 36px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 8px;
color: var(--white);
padding: 0 12px;
font-family: inherit;
font-size: 13px;
transition: border-color 0.15s ease;
}
.r9SH_m3z:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
}
.AJkdllvm {
width: 100%;
box-sizing: border-box;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 8px;
color: var(--white);
padding: 10px 12px;
font-family: inherit;
font-size: 13px;
line-height: 1.45;
resize: vertical;
min-height: 100px;
transition: border-color 0.15s ease;
}
.AJkdllvm:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
}
.fPBCuotq {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
height: 36px;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
flex-shrink: 0;
}
.fPBCuotq:hover:not(:disabled) { background: #1389d8; }
.fPBCuotq:disabled { opacity: 0.4; cursor: not-allowed; }
.T2WsDJ2i {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 12px;
}
.x1UEUUdJ {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
/* ── Group picker rows ─────────────────────────────────── */
.OPszP8Kd {
display: flex;
flex-direction: column;
gap: 6px;
}
.uqO4tdUg {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
color: var(--white);
font-size: 13px;
transition: all 0.15s ease;
}
.uqO4tdUg:hover {
border-color: rgba(255, 255, 255, 0.18);
}
.fNlejpo0 {
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.08);
}
.dXNWZGKO { flex: 1 1; text-align: left; font-weight: 600; }
.yQbXPSAF {
font-size: 11px;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
}
.fNlejpo0 .yQbXPSAF {
color: var(--accent-1);
}
/* ── Invite to event sheet ─────────────────────────────── */
.cufSwMkU {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
}
.R8MckEV3 {
position: absolute;
left: 12px;
color: var(--text-muted);
font-size: 12px;
pointer-events: none;
}
.gSjYb2Fc {
width: 100%;
box-sizing: border-box;
height: 38px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 8px;
color: var(--white);
padding: 0 36px 0 32px;
font-family: inherit;
font-size: 13px;
transition: border-color 0.15s ease;
}
.gSjYb2Fc:focus {
outline: none;
border-color: rgba(13, 122, 199, 0.55);
}
.gkY1HYj6 {
position: absolute;
right: 8px;
width: 22px;
height: 22px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gkY1HYj6:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.06);
}
.X88cH797 {
margin: 0 0 12px;
padding: 10px 12px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.35);
border-radius: 8px;
color: #ef4444;
font-size: 12px;
display: inline-flex;
gap: 8px;
align-items: center;
}
.NHDiQKg8 {
display: flex;
flex-direction: column;
gap: 8px;
}
.hYf895mH {
display: grid;
grid-template-columns: 52px 1fr auto;
align-items: center;
grid-gap: 12px;
gap: 12px;
padding: 10px 12px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
}
.EJd8ydNt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(13, 122, 199, 0.12);
border: 1px solid rgba(13, 122, 199, 0.35);
border-radius: 8px;
padding: 6px 0;
min-width: 52px;
}
.jlVFhFBS {
font-size: 18px;
font-weight: 800;
color: var(--white);
line-height: 1;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.ceMsTp0O {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--accent-1);
margin-top: 2px;
}
.PZ0Hqe1Z {
min-width: 0;
}
.MGwbkI3X {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uvScm1u3 {
margin: 2px 0 0;
font-size: 11px;
color: var(--text-muted);
}
.rwy6FFaR {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.T3oeIXNs {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid var(--border-soft);
display: inline-flex;
align-items: center;
gap: 4px;
}
.mnuEJIGv {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
height: 32px;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.mnuEJIGv:hover:not(:disabled) {
background: #1389d8;
}
.mnuEJIGv:disabled {
cursor: not-allowed;
}
.f4ppxT8u {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border-color: rgba(34, 197, 94, 0.4);
}
.f4ppxT8u:hover:not(:disabled) {
background: rgba(34, 197, 94, 0.15);
}
.wAuvj9zL {
margin-top: 12px;
width: 100%;
height: 36px;
background: transparent;
border: 1px dashed var(--border-soft);
border-radius: 8px;
color: var(--text-secondary);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.wAuvj9zL:hover:not(:disabled) {
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.08);
}
.wAuvj9zL:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* CRM Groups list. */
.i3ki26x_ {
display: flex;
flex-direction: column;
min-height: 0;
}
.km4ilHMn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.fRIxCBgp { display: flex; flex-direction: column; gap: 4px; }
.ioRTpAlS { font-size: 18px; font-weight: 700; color: var(--white); margin: 0; }
.L18poFQi { font-size: 12px; color: var(--text-muted); margin: 0; }
.mmcn8Jpn {
display: flex;
flex-direction: column;
gap: 12px;
}
/* 6-column grid:
icon | name + desc | type pill | member count | date | actions
The dedicated type-pill column makes the badges line up vertically
down the list, instead of being inline next to each group name. */
.ytzTmM3a {
display: grid;
grid-template-columns: 56px minmax(0, 2fr) 110px auto auto auto;
grid-gap: 16px;
gap: 16px;
align-items: center;
padding: 16px 20px;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 14px;
cursor: pointer;
transition: border-color 0.15s ease;
}
.ytzTmM3a:hover { border-color: rgba(255, 255, 255, 0.1); }
.i371o8ik {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.nrPDYKkh { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.odUyNqZR {
font-size: 14px;
font-weight: 700;
color: var(--white);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Type pill column - centers the Smart / Manual badge so the whole
column reads as a tidy vertical strip of pills down the list. */
.L2eniDGZ {
display: flex;
align-items: center;
justify-content: center;
}
.UOLKPDzl {
font-size: 12px;
color: var(--text-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cl2pP0a_ {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
}
.PNXGDIQ0 {
font-size: 22px;
font-weight: 800;
color: var(--white);
line-height: 1;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.d4hzC875 {
margin-top: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.hZWSJfmC {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 110px;
}
.UR4DPWgT {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.LaIFJI7h {
margin-top: 4px;
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
}
.Bzb44b5O {
display: flex;
gap: 6px;
align-items: center;
}
.WWh8eG1p {
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.WWh8eG1p:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.18);
}
.XWc0WzpG:hover { color: var(--accent-1); border-color: rgba(13,122,199,0.55); }
.GbPLYlwQ:hover { color: var(--cancelled-red); border-color: rgba(255,38,38,0.45); }
.y4X1pEAC {
margin-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: var(--text-muted);
}
.y4X1pEAC i { font-size: 32px; opacity: 0.5; }
.y4X1pEAC p { margin: 0; font-size: 13px; }
@media (max-width: 768px) {
.ytzTmM3a {
grid-template-columns: 44px minmax(0, 1fr) auto auto;
}
.hZWSJfmC, .L2eniDGZ, .Bzb44b5O:not(:last-child) { display: none; }
}
/* CreateGroupDrawer-specific bits.
Drawer chrome reuses the shared Drawer.module.css. */
.jEs0whAi {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 12px;
gap: 12px;
margin-bottom: 1.25rem;
}
.js5HK4G6 {
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 14px;
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
font-family: inherit;
color: var(--text-primary);
}
.js5HK4G6:hover { border-color: rgba(255, 255, 255, 0.12); }
.cSQuiCcO {
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.08);
}
.UtzSMW4E {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.iXltbqLa { display: flex; flex-direction: column; gap: 4px; }
.veJG4Opw { font-size: 13px; font-weight: 700; color: var(--white); }
.r6aIivNF { font-size: 11px; color: var(--text-muted); }
/* ── Form fields ──────────────────────────────────────────── */
.LWOjUvOJ {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 6px;
}
.CPrdanjv {
color: rgba(255, 255, 255, 0.3);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
margin-left: 6px;
font-size: 11px;
}
.GkjoIXuq,
.OVsJxVLy {
width: 100%;
box-sizing: border-box;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 13px;
padding: 10px 14px;
transition: border-color 0.15s ease;
}
.GkjoIXuq:focus,
.OVsJxVLy:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }
.OVsJxVLy {
resize: vertical;
min-height: 70px;
font-family: inherit;
}
.s5JCKAPX { margin-bottom: 1.25rem; }
/* ── Manual member picker ─────────────────────────────────── */
.ZI0gtIOX {
position: relative;
margin-bottom: 10px;
}
.ZI0gtIOX input {
width: 100%;
box-sizing: border-box;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 13px;
padding: 10px 14px 10px 38px;
}
.ZI0gtIOX input:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }
.ZI0gtIOX i {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
.zpVurPk3 {
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: var(--sub-bg-dark);
}
.zpVurPk3::-webkit-scrollbar { width: 4px; }
.zpVurPk3::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.U8NA0ZfX {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
transition: background 0.15s ease;
}
.U8NA0ZfX:hover { background: rgba(255, 255, 255, 0.025); }
.U8NA0ZfX:last-child { border-bottom: none; }
.QcQuy_GU {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1px solid var(--border-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--white);
font-size: 9px;
}
.bPXiXNrZ {
background: var(--accent-1);
border-color: var(--accent-1);
}
.PKOzksjP { flex: 1 1; min-width: 0; }
.mkpRebtD {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nIUoUzz7 { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
.gqfrChl6 {
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: rgba(13, 122, 199, 0.18);
color: var(--white);
border: 1px solid rgba(13, 122, 199, 0.55);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.oINsD71K {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
transition: all 0.15s ease;
}
.oINsD71K:hover {
background: rgba(214, 69, 69, 0.15);
border-color: rgba(214, 69, 69, 0.4);
color: #f0a0a0;
}
.LZ4tvn5j {
width: 100%;
padding: 0.55rem;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.LZ4tvn5j:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.07);
color: var(--white);
}
.LZ4tvn5j:disabled { opacity: 0.5; cursor: not-allowed; }
/* Smart-rule builder layout. Lives inside the CreateGroupDrawer. */
.YtgevjHf {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ── Quick templates ─────────────────────────────────────── */
.w6LdZtvm {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.Wmo8DrJE {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 8px;
gap: 8px;
}
.IUuAWkfu {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
color: var(--text-secondary);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
}
.IUuAWkfu:hover {
color: var(--white);
border-color: rgba(13, 122, 199, 0.55);
background: rgba(13, 122, 199, 0.08);
}
.IUuAWkfu i { color: var(--accent-1); }
/* ── Match-mode toggle ────────────────────────────────────── */
.qJWoSEGP {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 999px;
width: -webkit-fit-content;
width: fit-content;
}
.QVL3e24a {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 8px 0 10px;
}
.hz3bGk7n {
background: transparent;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
}
.hz3bGk7n:hover { color: var(--white); }
.UYiraK0I {
background: var(--accent-1);
color: var(--white);
}
/* ── Rule rows ────────────────────────────────────────────── */
.YNMoY6Dz {
display: flex;
flex-direction: column;
gap: 10px;
}
.cobmcYaA {
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.GLRYRO6Y {
display: flex;
align-items: center;
gap: 10px;
}
.XZRRLVX_ {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.ClKcLux7 {
color: var(--white);
font-size: 13px;
font-weight: 700;
flex: 1 1;
}
.Jm9UT7jq {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s ease;
}
.Jm9UT7jq:hover { color: var(--cancelled-red); border-color: rgba(255,38,38,0.45); }
.Hy7jpVxL {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.uJSo7KWZ {
background: var(--bg-dark);
border: 1px solid var(--border-soft);
border-radius: 8px;
color: var(--white);
font-family: inherit;
font-size: 12px;
padding: 8px 12px;
min-width: 90px;
}
.uJSo7KWZ:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }
.ILb67FCO { width: 90px; }
.LJEspyCZ {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
}
/* ── Spending histogram ───────────────────────────────────── */
.XLoEiWNM {
margin-top: 4px;
background: var(--bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 10px 12px;
}
.E84QIeQj {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
font-size: 11px;
color: var(--text-muted);
}
.N7nOD_pS { color: var(--white); font-weight: 700; }
.RgHya3XP {
display: flex;
align-items: flex-end;
gap: 3px;
height: 56px;
}
.DK8K9M1O {
flex: 1 1;
height: 100%;
display: flex;
align-items: flex-end;
cursor: pointer;
}
.ue3pSNoW {
width: 100%;
background: rgba(45, 47, 57, 0.8);
border-radius: 3px 3px 0 0;
transition: background 0.15s ease;
}
.LA0TneFo { background: var(--accent-1); }
.DK8K9M1O:hover .ue3pSNoW { background: #1389d8; opacity: 0.85; }
/* ── Add rule button ──────────────────────────────────────── */
.cghjfomd {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px dashed var(--border-soft);
border-radius: 10px;
color: var(--text-secondary);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
align-self: flex-start;
}
.cghjfomd:hover {
color: var(--white);
border-color: var(--accent-1);
background: rgba(13, 122, 199, 0.06);
}
/* ── Rule picker popover ──────────────────────────────────── */
.H7Gxj0qw {
position: relative;
align-self: flex-start;
}
.QfN86Wku {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
min-width: 280px;
background: rgba(20, 22, 30, 0.98);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
padding: 6px;
z-index: 10;
}
.vSkOTkuP {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 10px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-primary);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.vSkOTkuP:hover { background: rgba(255, 255, 255, 0.04); }
.sK_SEKE1 {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(13, 122, 199, 0.12);
color: var(--accent-1);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.kFIINWhv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m1OsoiWO { color: var(--white); font-weight: 600; font-size: 13px; }
.Zswu3180 { color: var(--text-muted); font-size: 11px; }
/* ── Logic summary ────────────────────────────────────────── */
.Eg6JsZM8 {
background: rgba(13, 122, 199, 0.06);
border: 1px solid rgba(13, 122, 199, 0.25);
border-radius: 12px;
padding: 14px 16px;
}
.d8gHZ5DB {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.CIk4IHEl {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--white);
}
.CIk4IHEl i { color: var(--accent-1); }
.WK0q5e87 {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: rgba(13, 122, 199, 0.18);
color: var(--white);
border: 1px solid rgba(13, 122, 199, 0.55);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.VFDXhlYt {
color: var(--text-secondary);
font-size: 12px;
margin: 0 0 8px;
}
.rYpUqs5c {
margin: 0;
padding-left: 18px;
color: var(--text-secondary);
font-size: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.rYpUqs5c li::marker { color: var(--accent-1); }
.JQu0qrli {
margin-top: 10px;
font-size: 11px;
color: var(--text-muted);
}
.JQu0qrli strong { color: var(--text-secondary); font-weight: 600; }
.KM5xWMbL {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.9rem;
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
.KM5xWMbL i {
color: var(--text-muted);
font-size: 13px;
}
.KM5xWMbL input {
flex: 1 1;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: inherit;
font-size: 13px;
}
.KM5xWMbL input::placeholder { color: var(--text-muted); }
.X7ViP1wK {
padding: 0.7rem 0.9rem;
margin-bottom: 0.85rem;
border-radius: 8px;
background: rgba(214, 69, 69, 0.12);
border: 1px solid rgba(214, 69, 69, 0.3);
color: #f0a0a0;
font-size: 12px;
}
.LbMrC30X {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.vUkiFw66 {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.8rem 0.9rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.vUkiFw66:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.12);
}
.BR4cul6G {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.wGUIyM7D {
font-size: 17px;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.rRlKJKlh {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--text-muted);
margin-top: 2px;
}
.OmAD7Xmx { flex: 1 1; min-width: 0; }
.nA9QEBa6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ZoYjitHs {
margin: 0.2rem 0 0;
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dW7PxSbo {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.45rem;
}
.Hueghkmn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.45rem;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
font-weight: 500;
}
.cczHoVMG {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
flex-shrink: 0;
width: 130px;
}
.TxUWE1r7 {
width: 100%;
padding: 0.4rem 0.5rem;
background: rgba(255, 255, 255, 0.04);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
font-family: inherit;
font-size: 11px;
cursor: pointer;
}
.TxUWE1r7:disabled { opacity: 0.6; cursor: not-allowed; }
.vhCStKix {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
flex-shrink: 0;
background: var(--accent-1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.vhCStKix:hover:not(:disabled) { background: #1389d8; }
.vhCStKix:active:not(:disabled) { transform: scale(0.97); }
.vhCStKix:disabled { opacity: 0.6; cursor: not-allowed; }
.OWZ5AZnL {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
color: #46c46a;
color: var(--admitted-green, #46c46a);
font-size: 12px;
font-weight: 600;
}
.EdkbsoZj {
width: 100%;
margin-top: 0.85rem;
padding: 0.65rem;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.EdkbsoZj:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
.EdkbsoZj:disabled { opacity: 0.5; cursor: not-allowed; }
.HiSSNyOM {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding: 2.5rem 1rem;
color: var(--text-muted);
text-align: center;
}
.HiSSNyOM i { font-size: 26px; opacity: 0.5; }
.HiSSNyOM p { margin: 0; font-size: 13px; }
.FtiWgR1a {
position: relative;
margin-bottom: 10px;
}
.FtiWgR1a input {
width: 100%;
box-sizing: border-box;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
color: var(--white);
font-family: inherit;
font-size: 13px;
padding: 10px 14px 10px 38px;
}
.FtiWgR1a input:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }
.FtiWgR1a i {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
.Jx05ETHV {
max-height: 50vh;
overflow-y: auto;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: var(--sub-bg-dark);
}
.Jx05ETHV::-webkit-scrollbar { width: 4px; }
.Jx05ETHV::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.yYhaeR3U {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}
.yYhaeR3U:last-child { border-bottom: none; }
.sP4ZKRlR { flex: 1 1; min-width: 0; }
.F4WmA3Ea {
font-size: 13px;
font-weight: 600;
color: var(--white);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.etIaj9qp { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
.OG3wJRJD {
padding: 20px 14px;
color: var(--text-muted);
font-size: 12px;
text-align: center;
}
.zhtS45JQ {
height: 4px;
}
/* Guestii's tab - filter sidebar + main pane (table | tile view).
──────────────────────────────────────────────────────────────
Layout: 240px filter rail + flex main. The main pane owns its
own scroll container so the filter rail stays sticky beside it. */
.h1uxnHh0 {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
grid-gap: 1rem;
gap: 1rem;
min-height: 0;
flex: 1 1;
}
@media (max-width: 980px) {
.h1uxnHh0 { grid-template-columns: minmax(0, 1fr); }
.fw0ya09J { display: none; }
}
/* ── Filter sidebar ──────────────────────────────────────── */
/* align-self: start makes the sidebar size to its content
instead of stretching to fill the full grid row height (which
was creating a tall empty card extending past the last filter
chip). max-height: 100% still kicks in for tiny viewports so
the sidebar scrolls internally rather than overflowing. */
.fw0ya09J {
align-self: stretch;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
overflow-y: auto;
min-width: 0;
}
.fw0ya09J::-webkit-scrollbar { width: 4px; }
.fw0ya09J::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
.IN_sqscp {
display: flex;
align-items: center;
gap: 8px;
color: var(--white);
font-size: 13px;
font-weight: 700;
}
.IN_sqscp i { color: var(--accent-1); font-size: 11px; }
.yfLllCdo {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 8px;
}
.lXW8F9Xe { display: flex; flex-direction: column; gap: 4px; }
.bDETUy4b {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-secondary);
font-family: inherit;
font-size: 12px;
cursor: pointer;
width: 100%;
text-align: left;
transition: all 0.15s ease;
}
.bDETUy4b:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.025);
}
.rQD7zXrk {
color: var(--white);
background: rgba(13, 122, 199, 0.12);
border-color: rgba(13, 122, 199, 0.4);
}
.VnyDhca1 {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.rQD7zXrk .VnyDhca1 { color: var(--white); }
.PL4xsQXB {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin: 0 0 8px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: border-color 0.15s ease;
}
.PL4xsQXB:focus-within { border-bottom-color: rgba(13, 122, 199, 0.55); }
.PL4xsQXB > i {
color: var(--text-muted);
font-size: 11px;
}
.PL4xsQXB input {
flex: 1 1;
min-width: 0;
background: transparent;
border: none;
color: var(--white);
font-family: inherit;
font-size: 12px;
padding: 0;
}
.PL4xsQXB input::placeholder { color: var(--text-muted); }
.PL4xsQXB input:focus { outline: none; }
.LhRTt3mD {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 2px;
font-size: 11px;
}
.LhRTt3mD:hover { color: var(--white); }
.LXH_QTGe {
margin: 6px 10px 0;
font-size: 11px;
color: var(--text-muted);
}
._JcwiTCb {
background: rgba(13, 122, 199, 0.05);
border: 1px solid rgba(13, 122, 199, 0.18);
border-radius: 10px;
padding: 12px;
}
/* ── Main pane ──────────────────────────────────────────── */
.UKQnfDax {
display: flex;
flex-direction: column;
min-height: 0;
}
.x_UAprzf {
display: flex;
align-items: center;
gap: 10px;
padding: 0 0 12px 0;
}
.ySyrLjFI {
flex: 1 1;
display: flex;
align-items: center;
gap: 8px;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 8px 14px;
}
.ySyrLjFI:focus-within { border-color: rgba(13, 122, 199, 0.55); }
.ySyrLjFI i { color: var(--text-muted); font-size: 12px; }
.ySyrLjFI input {
background: transparent;
border: none;
flex: 1 1;
color: var(--white);
font-family: inherit;
font-size: 13px;
}
.ySyrLjFI input:focus { outline: none; }
.qH1mowNK {
display: inline-flex;
background: var(--sub-bg-dark);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 3px;
}
.ApqmhvGX {
background: transparent;
border: none;
color: var(--text-muted);
width: 32px;
height: 30px;
border-radius: 7px;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.ApqmhvGX:hover { color: var(--white); }
.TauYX7Fo {
background: var(--accent-1);
color: var(--white);
}
.LUoJWCcz {
flex: 1 1;
min-height: 0;
overflow-y: auto;
background: var(--sub-bg-dark);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 14px;
}
/* Tile view drops the card chrome - the grid of avatars+names
reads better as a free-floating gallery than as boxed rows
inside a boxed body. */
.GnXOGtC5 {
background: transparent;
border: none;
border-radius: 0;
}
.LUoJWCcz::-webkit-scrollbar { width: 4px; }
.LUoJWCcz::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }
/* ── Table view ──────────────────────────────────────────── */
.l_XFUc50 {
width: 100%;
border-collapse: collapse;
}
.l_XFUc50 thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
background: var(--sub-bg-dark);
z-index: 1;
text-align: left;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.l_XFUc50 thead th:hover { color: var(--white); }
.l_XFUc50 thead th.z0JHJ5__ { color: var(--white); }
.l_XFUc50 tbody td {
padding: 12px 16px;
border-bottom: 1px solid rgba(45, 47, 57, 0.4);
font-size: 13px;
color: var(--text-primary);
}
.l_XFUc50 tbody tr {
cursor: pointer;
transition: background 0.15s ease;
}
.l_XFUc50 tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.pjDvFJRP {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.uQ7zFysz { display: flex; flex-direction: column; min-width: 0; }
.NhOHZRZt { color: var(--white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zXvIKmZq { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e2BCtszB { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }
.HbMM2N0y { display: flex; flex-wrap: wrap; gap: 4px; }
.WJ70X_bc {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid var(--border-soft);
}
/* ── Tile view ──────────────────────────────────────────── */
.NkJVuy86 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 8px;
gap: 8px;
padding: 0;
}
/* Backgroundless tiles - the avatar circle + text sit on the
page directly. A subtle hover state still hints "this is
clickable" without putting card chrome around every guest. */
.DpnO14c4 {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
padding: 10px 12px;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
font-family: inherit;
color: var(--text-primary);
}
.DpnO14c4:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(13, 122, 199, 0.35);
}
.lQp_Jo3K { display: flex; flex-direction: column; min-width: 0; flex: 1 1; }
.RH_vfS5Z { color: var(--white); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Qf0aED5Z { color: var(--text-muted); font-size: 10px; }
.lr3lhdWr {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 80px 20px;
color: var(--text-muted);
}
.lr3lhdWr i { font-size: 32px; opacity: 0.5; }
.lr3lhdWr p { margin: 0; font-size: 13px; }
.uJMMcekV {
font-size: 11px;
color: var(--text-muted);
padding-left: 4px;
}
/*# sourceMappingURL=main.c13904bc.css.map*/