/*
FONTS: For local hosting, download these two families from Google Fonts:
https://fonts.google.com/specimen/Outfit (weights 300,400,500,600,700)
https://fonts.google.com/specimen/DM+Serif+Display (regular + italic)
Then replace this @import with local @font-face declarations pointing to
your served font files (e.g. /fonts/Outfit-VariableFont.woff2).
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
/* ═══════════════════════════════════════════════════════════
DESIGN TOKENS — dark mode (default)
═══════════════════════════════════════════════════════════ */
:root {
--bg: #0B0F1E;
--bg-gradient: radial-gradient(ellipse at 20% 0%, #111830 0%, #0B0F1E 60%);
--surface: rgba(255, 255, 255, 0.06);
--surface-hover: rgba(255, 255, 255, 0.10);
--surface-border: rgba(255, 255, 255, 0.10);
--surface-strong: rgba(255, 255, 255, 0.12);
--text-primary: #E8ECF4;
--text-secondary: rgba(232, 236, 244, 0.50);
--text-muted: rgba(232, 236, 244, 0.30);
--sidebar-bg: rgba(11, 15, 30, 0.70);
--sidebar-border: rgba(255, 255, 255, 0.07);
--sidebar-active: rgba(255, 255, 255, 0.10);
--sidebar-active-border: rgba(96, 239, 188, 0.50);
--topbar-bg: rgba(11, 15, 30, 0.60);
--topbar-border: rgba(255, 255, 255, 0.07);
--blob-a: rgba(96, 239, 188, 0.22);
--blob-b: rgba(96, 150, 239, 0.18);
--blob-c: rgba(239, 96, 198, 0.15);
--blob-d: rgba(239, 192, 96, 0.12);
--accent-green: #60EFBC;
--accent-blue: #60C6EF;
--accent-pink: #EF60C6;
--accent-amber: #EFC060;
--accent-purple: #A060EF;
/* Per-event palette — cycle through these by index */
--event-a: #60EFBC;
--event-b: #60C6EF;
--event-c: #EF60C6;
--event-d: #EFC060;
--event-e: #A060EF;
/* Text-safe accent colors — same as accent in dark mode,
overridden to darker WCAG-AA compliant shades in light mode */
--text-accent-green: #60EFBC;
--text-accent-blue: #60C6EF;
--text-accent-pink: #EF60C6;
--text-accent-amber: #EFC060;
--text-accent-purple: #A060EF;
--btn-primary-bg: linear-gradient(135deg, #60EFBC, #60C6EF);
--btn-primary-color: #0B0F1E;
--btn-ghost-border: rgba(255, 255, 255, 0.20);
--btn-ghost-color: var(--text-secondary);
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
--scrollbar-track: transparent;
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
--shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.50);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 28px;
--font-body: 'Outfit', sans-serif;
--font-display: 'DM Serif Display', serif;
}
/* ═══════════════════════════════════════════════════════════
LIGHT MODE OVERRIDES
Applied when OS preference is light AND data-theme="auto",
or when data-theme="light" is set explicitly on .
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
html[data-theme="auto"] {
--bg: #EBF0FF;
--bg-gradient: radial-gradient(ellipse at 20% 0%, #DDE8FF 0%, #EBF0FF 60%);
--surface: rgba(255, 255, 255, 0.65);
--surface-hover: rgba(255, 255, 255, 0.85);
--surface-border: rgba(80, 110, 200, 0.14);
--surface-strong: rgba(255, 255, 255, 0.80);
--text-primary: #1A2050;
--text-secondary: rgba(26, 32, 80, 0.55);
--text-muted: rgba(26, 32, 80, 0.35);
--sidebar-bg: rgba(235, 240, 255, 0.80);
--sidebar-border: rgba(80, 110, 200, 0.12);
--sidebar-active: rgba(96, 239, 188, 0.18);
--sidebar-active-border: rgba(60, 200, 140, 0.70);
--topbar-bg: rgba(235, 240, 255, 0.70);
--topbar-border: rgba(80, 110, 200, 0.10);
--blob-a: rgba(96, 239, 188, 0.30);
--blob-b: rgba(96, 150, 239, 0.22);
--blob-c: rgba(239, 96, 198, 0.18);
--blob-d: rgba(239, 192, 96, 0.18);
--btn-primary-bg: linear-gradient(135deg, #2EC99A, #3AAED6);
--btn-primary-color: #ffffff;
--btn-ghost-border: rgba(26, 32, 80, 0.20);
--btn-ghost-color: var(--text-secondary);
--text-accent-green: #0C7A4E;
--text-accent-blue: #0F62A0;
--text-accent-pink: #A8126A;
--text-accent-amber: #8A5200;
--text-accent-purple: #5C12B8;
/* Event palette in light mode — darker for text legibility on light surfaces */
--event-a: #0C7A4E;
--event-b: #0F62A0;
--event-c: #A8126A;
--event-d: #8A5200;
--event-e: #5C12B8;
--scrollbar-thumb: rgba(26, 32, 80, 0.12);
--shadow-card: 0 4px 24px rgba(26, 32, 80, 0.08);
--shadow-elevated: 0 12px 40px rgba(26, 32, 80, 0.14);
}
}
html[data-theme="light"] {
--bg: #EBF0FF;
--bg-gradient: radial-gradient(ellipse at 20% 0%, #DDE8FF 0%, #EBF0FF 60%);
--surface: rgba(255, 255, 255, 0.65);
--surface-hover: rgba(255, 255, 255, 0.85);
--surface-border: rgba(80, 110, 200, 0.14);
--surface-strong: rgba(255, 255, 255, 0.80);
--text-primary: #1A2050;
--text-secondary: rgba(26, 32, 80, 0.55);
--text-muted: rgba(26, 32, 80, 0.35);
--sidebar-bg: rgba(235, 240, 255, 0.80);
--sidebar-border: rgba(80, 110, 200, 0.12);
--sidebar-active: rgba(96, 239, 188, 0.18);
--sidebar-active-border: rgba(60, 200, 140, 0.70);
--topbar-bg: rgba(235, 240, 255, 0.70);
--topbar-border: rgba(80, 110, 200, 0.10);
--blob-a: rgba(96, 239, 188, 0.30);
--blob-b: rgba(96, 150, 239, 0.22);
--blob-c: rgba(239, 96, 198, 0.18);
--blob-d: rgba(239, 192, 96, 0.18);
--btn-primary-bg: linear-gradient(135deg, #2EC99A, #3AAED6);
--btn-primary-color: #ffffff;
--btn-ghost-border: rgba(26, 32, 80, 0.20);
--btn-ghost-color: var(--text-secondary);
--text-accent-green: #0C7A4E;
--text-accent-blue: #0F62A0;
--text-accent-pink: #A8126A;
--text-accent-amber: #8A5200;
--text-accent-purple: #5C12B8;
/* Event palette in light mode — darker for text legibility on light surfaces */
--event-a: #0C7A4E;
--event-b: #0F62A0;
--event-c: #A8126A;
--event-d: #8A5200;
--event-e: #5C12B8;
--scrollbar-thumb: rgba(26, 32, 80, 0.12);
--shadow-card: 0 4px 24px rgba(26, 32, 80, 0.08);
--shadow-elevated: 0 12px 40px rgba(26, 32, 80, 0.14);
}
/* html[data-theme="dark"] needs no block — :root is the dark default. */
/* ═══════════════════════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { height: 100%; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
/* ═══════════════════════════════════════════════════════════
AURORA BACKGROUND
═══════════════════════════════════════════════════════════ */
#aurora {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: var(--bg-gradient);
overflow: hidden;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.blob-a {
width: 600px; height: 600px;
top: -150px; left: -100px;
background: radial-gradient(circle, var(--blob-a) 0%, transparent 70%);
animation: floatA 10s ease-in-out infinite;
}
.blob-b {
width: 700px; height: 700px;
top: 30%; right: -200px;
background: radial-gradient(circle, var(--blob-b) 0%, transparent 70%);
animation: floatB 13s ease-in-out infinite;
}
.blob-c {
width: 500px; height: 500px;
bottom: -100px; left: 25%;
background: radial-gradient(circle, var(--blob-c) 0%, transparent 70%);
animation: floatC 11s ease-in-out infinite;
}
.blob-d {
width: 400px; height: 400px;
top: 60%; left: 40%;
background: radial-gradient(circle, var(--blob-d) 0%, transparent 70%);
animation: floatD 9s ease-in-out infinite;
}
@keyframes floatA {
0%, 100% { transform: translateY(0px) scale(1.00); }
50% { transform: translateY(-30px) scale(1.06); }
}
@keyframes floatB {
0%, 100% { transform: translateY(0px) scale(1.00); }
50% { transform: translateY(25px) scale(0.94); }
}
@keyframes floatC {
0%, 100% { transform: translateY(-10px) scale(1.00); }
50% { transform: translateY(20px) scale(1.04); }
}
@keyframes floatD {
0%, 100% { transform: translate(0px, 0px); }
33% { transform: translate(20px, -15px); }
66% { transform: translate(-15px, 10px); }
}
/* ═══════════════════════════════════════════════════════════
APP SHELL
═══════════════════════════════════════════════════════════ */
#app {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
/* Applied on pages that have no sidebar (e.g. login, register, welcome).
Collapses the grid to a single full-width column. */
#app.no-sidebar {
grid-template-columns: 1fr;
}
/* ── SIDEBAR ──────────────────────────────────────────── */
#sidebar {
grid-row: 1 / 3;
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--sidebar-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-right: 1px solid var(--sidebar-border);
padding: 24px 16px;
overflow-y: auto;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 12px 24px;
border-bottom: 1px solid var(--sidebar-border);
margin-bottom: 20px;
}
.logo-mark {
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-name {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text-primary);
}
.logo-sub {
font-size: 10px;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 3px;
}
.nav-section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 12px;
margin-bottom: 6px;
margin-top: 16px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: background 0.18s, color 0.18s;
border: 1px solid transparent;
white-space: nowrap;
}
.nav-item:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.nav-item.active {
background: var(--sidebar-active);
color: var(--text-primary);
border-color: var(--sidebar-active-border);
font-weight: 600;
}
.nav-item.active .nav-icon { color: var(--text-accent-green); opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }
.nav-icon {
width: 18px; height: 18px;
flex-shrink: 0;
opacity: 0.7;
}
.nav-badge {
margin-left: auto;
background: rgba(239, 192, 96, 0.20);
color: var(--text-accent-amber);
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
border: 1px solid rgba(239, 192, 96, 0.30);
}
.sidebar-footer {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--sidebar-border);
}
.user-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--surface-border);
}
.avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--btn-primary-bg);
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--btn-primary-color);
flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
/* ── TOPBAR ───────────────────────────────────────────── */
#topbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 64px;
background: var(--topbar-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--topbar-border);
gap: 16px;
}
.topbar-left {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.page-title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
}
.page-subtitle {
font-size: 12px;
color: var(--text-muted);
font-weight: 300;
}
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
#theme-toggle {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--surface-border);
background: var(--surface);
color: var(--text-secondary);
display: flex; align-items: center; justify-content: center;
transition: background 0.18s, color 0.18s;
flex-shrink: 0;
}
#theme-toggle:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
#theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
/* Hidden on desktop; shown on mobile */
#menu-toggle {
display: none;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--surface-border);
background: var(--surface);
color: var(--text-secondary);
align-items: center; justify-content: center;
flex-shrink: 0;
}
#menu-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
/* ── BUTTONS ──────────────────────────────────────────── */
.btn-primary {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: 22px;
border: none;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2px;
white-space: nowrap;
transition: opacity 0.18s, transform 0.18s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary svg {
width: 14px; height: 14px;
stroke: currentColor; fill: none; stroke-width: 2.5;
}
.btn-ghost {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 22px;
border: 1px solid var(--btn-ghost-border);
background: transparent;
color: var(--btn-ghost-color);
font-size: 13px;
font-weight: 500;
transition: background 0.18s, color 0.18s;
font-family: var(--font-body);
cursor: pointer;
}
/* has no children, so flex/inline-flex as a container
value is inconsistently handled across browsers. inline-block is correct. */
input.btn-ghost {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.btn-ghost:hover {
background: var(--surface);
color: var(--text-primary);
}
/* ── MAIN CONTENT AREA ────────────────────────────────── */
#main {
padding: 28px 32px 48px;
min-width: 0;
overflow-x: hidden;
}
/* ── GLASS CARD ───────────────────────────────────────── */
.glass {
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.glass-strong {
background: var(--surface-strong);
}
/* ── SECTION HEADER ───────────────────────────────────── */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.section-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.2px;
}
.section-link {
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s;
display: flex;
align-items: center;
gap: 4px;
}
.section-link:hover { color: var(--text-primary); }
/* ── CONTENT WRAPPER ──────────────────────────────────── */
/*
Wraps #topbar + #main as a single grid column-2 child.
When the mobile sidebar opens, blur and dim are applied
here via filter + ::after. The sidebar lives outside this
wrapper so it is never affected.
*/
#content-wrapper {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
position: relative;
/* Needed so the ::after pseudo covers exactly this area */
overflow: hidden;
transition: filter 0.28s cubic-bezier(.32,.72,0,1);
}
/* Dim layer — zero opacity by default, fades in when sidebar opens */
#content-wrapper::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(.32,.72,0,1);
z-index: 50;
}
/* Both effects activate together via a class on #app */
#app.sidebar-open #content-wrapper {
filter: blur(3px);
}
#app.sidebar-open #content-wrapper::after {
opacity: 1;
pointer-events: auto; /* intercept taps to close the drawer */
}
/* ═══════════════════════════════════════════════════════════
STAT CARDS
═══════════════════════════════════════════════════════════ */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.stat-card {
padding: 22px 20px;
position: relative;
overflow: hidden;
}
/* Colored top-edge rule — set --text-accent-color per card */
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--text-accent-color, var(--text-accent-green));
opacity: 0.7;
}
.stat-value {
font-family: var(--font-display);
font-size: 36px;
line-height: 1;
letter-spacing: -0.5px;
color: var(--text-accent-color, var(--text-accent-green));
margin-bottom: 4px;
}
.stat-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
.stat-delta {
margin-top: 10px;
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 4px;
}
.delta-up { color: var(--text-accent-green); }
.delta-down { color: var(--text-accent-pink); }
/* ═══════════════════════════════════════════════════════════
DASHBOARD BODY GRID
═══════════════════════════════════════════════════════════ */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
align-items: start;
}
.sidebar-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ═══════════════════════════════════════════════════════════
EVENT LIST ROWS
═══════════════════════════════════════════════════════════ */
.event-list {
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Set --ev-color on the row element to theme the whole row */
.event-row {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 12px;
border-radius: var(--radius-sm);
transition: background 0.18s;
cursor: default;
}
.event-row:hover { background: var(--surface-hover); }
a.event-row { cursor: pointer; }
a.event-row { cursor: pointer; }
.event-dot-wrap {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: color-mix(in srgb, var(--ev-color) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
}
.event-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--ev-color);
}
.event-info { flex: 1; min-width: 0; }
.event-name {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 3px;
}
.event-date {
font-size: 12px;
color: var(--text-muted);
}
.event-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ev-color);
opacity: 0.8;
}
.event-progress-wrap {
margin-top: 7px;
height: 3px;
background: var(--surface-border);
border-radius: 2px;
overflow: hidden;
}
.event-progress-bar {
height: 100%;
background: var(--ev-color);
border-radius: 2px;
transition: width 0.6s cubic-bezier(.22,.61,.36,1);
}
.event-fill {
text-align: right;
min-width: 44px;
}
.event-fill-num {
font-size: 14px;
font-weight: 700;
color: var(--ev-color);
}
.event-fill-denom {
font-size: 11px;
color: var(--text-muted);
}
.event-status-pill {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 20px;
border: 1px solid;
}
/* ═══════════════════════════════════════════════════════════
ALERT CARD
═══════════════════════════════════════════════════════════ */
.alert-card {
padding: 18px;
border-color: rgba(239, 192, 96, 0.25) !important;
background: color-mix(in srgb, rgba(239,192,96,0.08) 100%, var(--surface)) !important;
}
.alert-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-accent-amber);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
/* Pulsing dot indicator */
.alert-label::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-amber);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1.00); }
50% { opacity: 0.4; transform: scale(0.75); }
}
.alert-event-name {
font-size: 15px;
font-weight: 600;
}
.alert-detail {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}
.alert-progress {
margin: 12px 0;
height: 4px;
background: rgba(239, 192, 96, 0.15);
border-radius: 2px;
overflow: hidden;
}
.alert-progress-bar {
height: 100%;
background: var(--accent-amber);
border-radius: 2px;
}
.btn-alert {
width: 100%;
padding: 9px 0;
border-radius: var(--radius-sm);
border: 1px solid rgba(239, 192, 96, 0.35);
background: rgba(239, 192, 96, 0.10);
color: var(--text-accent-amber);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
transition: background 0.18s;
}
.btn-alert:hover { background: rgba(239, 192, 96, 0.20); }
/* ═══════════════════════════════════════════════════════════
LEADERBOARD
═══════════════════════════════════════════════════════════ */
.leaderboard-card { padding: 18px; }
.leader-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--surface-border);
}
.leader-row:last-child { border-bottom: none; }
.leader-rank {
font-family: var(--font-display);
font-size: 22px;
min-width: 28px;
line-height: 1;
}
.leader-info { flex: 1; min-width: 0; }
.leader-name {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leader-bar-wrap {
height: 3px;
background: var(--surface-border);
border-radius: 2px;
margin-top: 5px;
overflow: hidden;
}
.leader-bar { height: 100%; border-radius: 2px; }
.leader-hours {
font-size: 13px;
color: var(--text-muted);
min-width: 32px;
text-align: right;
}
/* ═══════════════════════════════════════════════════════════
SCHEDULE CARD
═══════════════════════════════════════════════════════════ */
.schedule-card {
padding: 0;
overflow: hidden;
}
.schedule-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
border-bottom: 1px solid var(--surface-border);
transition: background 0.15s;
}
.schedule-item:last-child { border-bottom: none; }
.schedule-item:hover { background: var(--surface-hover); }
.schedule-date-badge {
width: 40px;
text-align: center;
flex-shrink: 0;
}
.schedule-day {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-muted);
}
.schedule-num {
font-family: var(--font-display);
font-size: 22px;
line-height: 1;
color: var(--text-primary);
}
.schedule-info { flex: 1; min-width: 0; }
.schedule-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.schedule-slots {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.schedule-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.quick-stat-card { padding: 18px; }
/* ═══════════════════════════════════════════════════════════
PAGE ENTER ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.stats-grid { animation: fadeUp 0.4s ease both; }
.dashboard-grid { animation: fadeUp 0.4s 0.1s ease both; }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — TABLET ≤ 1024px
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.sidebar-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — MOBILE ≤ 680px
═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
#app {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
/* Sidebar becomes a slide-in drawer */
#sidebar {
grid-row: unset;
position: fixed;
top: 0; left: 0;
height: 100vh;
width: 260px;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(.32,.72,0,1);
z-index: 100;
}
#sidebar.open { transform: translateX(0); }
#topbar {
padding: 0 16px;
}
#main {
padding: 20px 16px 48px;
}
#menu-toggle { display: flex; }
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat-value { font-size: 28px; }
.dashboard-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Collapse button label on narrow topbar */
.topbar-right .btn-primary span { display: none; }
.topbar-right .btn-primary { padding: 9px 12px; }
}
/* ═══════════════════════════════════════════════════════════
PAGE TOOLBAR
Sits at the top of on list/detail pages.
Holds: search + filter tabs + optional view toggle.
═══════════════════════════════════════════════════════════ */
.page-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
/* ── SEARCH INPUT ─────────────────────────────────────── */
.search-wrap {
position: relative;
flex: 1;
min-width: 180px;
max-width: 340px;
}
.search-wrap svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px; height: 15px;
stroke: var(--text-muted);
fill: none;
pointer-events: none;
}
.search-input {
width: 100%;
padding: 9px 12px 9px 36px;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: 22px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 13px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color 0.18s, background 0.18s;
outline: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
border-color: rgba(96, 239, 188, 0.40);
background: var(--surface-hover);
}
/* ── FILTER TABS ──────────────────────────────────────── */
.filter-tabs {
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: 22px;
padding: 4px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.filter-tab {
padding: 6px 16px;
border-radius: 18px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.18s, color 0.18s;
white-space: nowrap;
}
.filter-tab:hover { color: var(--text-primary); }
.filter-tab.active {
background: var(--surface-strong);
color: var(--text-primary);
}
/* ── VIEW TOGGLE ──────────────────────────────────────── */
.view-toggle {
display: flex;
align-items: center;
gap: 2px;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: 10px;
padding: 3px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
margin-left: auto;
}
.view-toggle-btn {
width: 32px; height: 32px;
border-radius: 7px;
border: none;
background: transparent;
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.view-toggle-btn svg {
width: 15px; height: 15px;
stroke: currentColor; fill: none; stroke-width: 1.8;
}
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.active {
background: var(--surface-strong);
color: var(--text-primary);
}
/* ── STATUS PILLS ─────────────────────────────────────── */
/*
Usage: Open
Event statuses:
status-open — recruiting ongoing, future event (green)
status-full — fully staffed, future event (amber)
status-live — event is happening right now (pink, pulsing dot)
status-planning — not yet open for sign-ups (blue)
status-finished — event has ended (muted)
Task / generic statuses:
status-active — in progress (used in project-detail) (green)
status-overdue — past due date, action required (amber)
Modifier classes can be combined with .status-pill or .event-status-pill.
*/
.status-pill {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
border: 1px solid;
white-space: nowrap;
}
/* Recruiting — future event, slots still available */
.status-open {
color: var(--text-accent-green);
border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
}
/* Kept for project-detail task usage */
.status-active {
color: var(--text-accent-green);
border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
}
.status-planning {
color: var(--text-accent-blue);
border-color: color-mix(in srgb, var(--accent-blue) 35%, transparent);
background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}
.status-finished {
color: var(--text-muted);
border-color: var(--surface-border);
background: var(--surface);
}
/* Fully staffed, event is still upcoming */
.status-full {
color: var(--text-accent-amber);
border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
}
/* Past due date — action required */
.status-overdue {
color: var(--text-accent-amber);
border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
}
/* Happening right now — pulsing dot prefix */
.status-live {
color: var(--text-accent-pink);
border-color: color-mix(in srgb, var(--accent-pink) 35%, transparent);
background: color-mix(in srgb, var(--accent-pink) 10%, transparent);
padding-left: 20px;
position: relative;
}
.status-live::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-accent-pink);
animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { opacity: 0.4; transform: translateY(-50%) scale(0.65); }
}
/* ── EMPTY STATE ──────────────────────────────────────── */
.empty-state {
grid-column: 1 / -1; /* span all columns in a grid context */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
color: var(--text-muted);
text-align: center;
gap: 10px;
}
.empty-state svg {
width: 40px; height: 40px;
stroke: var(--text-muted); fill: none; stroke-width: 1.5;
opacity: 0.5;
}
.empty-state-title {
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
}
.empty-state-sub {
font-size: 13px;
}
/* ── RESPONSIVE: TOOLBAR ──────────────────────────────── */
@media (max-width: 680px) {
.page-toolbar { gap: 8px; }
.search-wrap { max-width: none; flex: 1 1 100%; order: -1; }
.view-toggle { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════
EVENTS PAGE — event card & list/tile layout
═══════════════════════════════════════════════════════════ */
/* ── EVENT CARD: shared base ──────────────────────────────
One markup structure; layout is driven by the class
on #events-container (.view-list or .view-tiles).
──────────────────────────────────────────────────────────── */
.event-card {
--ev-color: var(--accent-green);
display: block;
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
text-decoration: none;
color: var(--text-primary);
cursor: pointer;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
overflow: hidden;
position: relative;
}
.event-card:hover {
background: var(--surface-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-elevated);
}
.ec-accent { background: var(--ev-color); flex-shrink: 0; }
.ec-body { flex: 1; min-width: 0; }
.ec-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ec-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ec-category {
font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--ev-color); opacity: 0.9;
}
.ec-location {
font-size: 11px; color: var(--text-muted);
display: flex; align-items: center; gap: 3px;
}
.ec-location svg {
width: 10px; height: 10px; stroke: currentColor;
fill: none; stroke-width: 2; flex-shrink: 0;
}
.ec-date-text { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ec-progress-wrap {
margin-top: 8px;
height: 3px;
background: var(--surface-border);
border-radius: 2px;
overflow: hidden;
}
.ec-progress-bar { height: 100%; background: var(--ev-color); border-radius: 2px; }
.ec-slots {
font-size: 11px; color: var(--text-secondary); margin-top: 4px;
display: flex; align-items: center; gap: 4px;
}
.ec-slots-num { font-weight: 700; color: var(--ev-color); }
.ec-status-wrap { flex-shrink: 0; }
.ec-arrow {
flex-shrink: 0;
font-size: 16px;
color: var(--text-muted);
opacity: 0.5;
transition: opacity 0.15s, transform 0.15s;
display: flex; align-items: center;
}
.event-card:hover .ec-arrow { opacity: 1; transform: translateX(2px); }
/* ── LIST VIEW ────────────────────────────────────────────── */
#events-container {
display: flex;
flex-direction: column;
gap: 0;
}
#events-container.view-list {
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--surface-border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
#events-container.view-list .event-card {
background: transparent;
border: none;
border-bottom: 1px solid var(--surface-border);
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
padding: 0;
transform: none;
}
#events-container.view-list .event-card:last-of-type { border-bottom: none; }
#events-container.view-list .event-card:hover { transform: none; box-shadow: none; }
#events-container.view-list .ec-accent { width: 3px; align-self: stretch; flex-shrink: 0; }
#events-container.view-list .ec-body { padding: 14px 16px; flex: 1; min-width: 0; }
#events-container.view-list .ec-name {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#events-container.view-list .ec-progress-wrap { display: none; }
#events-container.view-list .ec-meta { display: none; }
#events-container.view-list .ec-slots { display: none; }
#events-container.view-list .ec-status-wrap { width: 100px; flex-shrink: 0; padding: 0 12px; }
#events-container.view-list .ec-arrow { width: 40px; flex-shrink: 0; padding: 0; justify-content: center; }
#events-container.view-list .ec-footer { display: none; }
#events-container.view-tiles .ec-status-wrap { display: none; }
#events-container.view-tiles .ec-arrow { display: none; }
#events-container.view-list .ec-date-col,
#events-container.view-list .ec-slots-col { display: block; }
/* List-mode columns (hidden by default, shown in list view) */
.ec-date-col { display: none; width: 110px; flex-shrink: 0; padding: 0 12px; }
.ec-slots-col { display: none; width: 90px; flex-shrink: 0; padding: 0 12px; }
.ec-date-col-day {
font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--text-muted);
}
.ec-date-col-full {
font-family: var(--font-display);
font-size: 20px; line-height: 1; color: var(--text-primary);
}
.ec-slots-col-bar {
height: 3px; background: var(--surface-border);
border-radius: 2px; overflow: hidden; margin-bottom: 5px;
}
.ec-slots-col-fill { height: 100%; background: var(--ev-color); border-radius: 2px; }
.ec-slots-col-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
/* ── TILES VIEW ───────────────────────────────────────────── */
#events-container.view-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
#events-container.view-tiles .event-card { display: flex; flex-direction: column; padding: 0; }
#events-container.view-tiles .ec-accent { height: 3px; width: 100%; }
#events-container.view-tiles .ec-body { padding: 16px 16px 12px; flex: 1; }
#events-container.view-tiles .ec-name { font-size: 15px; margin-bottom: 2px; }
#events-container.view-tiles .ec-progress-wrap { display: block; }
#events-container.view-tiles .ec-date-text { display: block; }
#events-container.view-tiles .ec-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px 14px;
border-top: 1px solid var(--surface-border);
margin-top: auto;
}
#events-container.view-tiles .ec-date-col,
#events-container.view-tiles .ec-slots-col { display: none; }
/* ── LIST HEADER ROW ─────────────────────────────────────── */
#list-header {
display: none;
align-items: center;
gap: 0;
padding: 8px 0;
margin-bottom: -1px;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lh-accent { width: 3px; flex-shrink: 0; }
.lh-name { flex: 1; padding: 0 16px; }
.lh-date { width: 110px; padding: 0 12px; }
.lh-slots { width: 90px; padding: 0 12px; }
.lh-status { width: 100px; padding: 0 12px; flex-shrink: 0; }
.lh-arrow { width: 40px; }
.lh-label {
font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--text-muted);
}
/* Page-enter animation */
#list-header,
#events-container { animation: fadeUp 0.35s ease both; }
/* ── RESPONSIVE: EVENTS PAGE ─────────────────────────────── */
@media (max-width: 1024px) {
#events-container.view-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
#events-container.view-tiles { grid-template-columns: 1fr; }
#events-container.view-list .ec-date-col,
#events-container.view-list .ec-slots-col { display: none; }
#events-container.view-list .ec-meta { display: flex; }
#events-container.view-list .ec-slots { display: flex; }
#list-header { display: none !important; }
#events-container.view-list { border-radius: var(--radius-lg); }
}
/* ═══════════════════════════════════════════════════════════
AUTH & FORMS
Used by: index.html (welcome), login.html, register.html
═══════════════════════════════════════════════════════════ */
/* ── AUTH LAYOUT ──────────────────────────────────────────
Full-viewport centering for pre-auth pages.
Works inside a bare with no sidebar present.
──────────────────────────────────────────────────────────── */
.auth-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
gap: 0;
}
/* Branding block above the card */
.auth-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 28px;
}
.auth-brand-logo {
width: 52px;
height: 52px;
border-radius: 16px;
overflow: hidden;
}
.auth-brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.auth-brand-name {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text-primary);
}
.auth-brand-sub {
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: -4px;
}
/* Glass card container */
.auth-card {
width: 100%;
max-width: 420px;
background: var(--surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--surface-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-elevated);
padding: 36px 32px;
}
.auth-card-title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: -0.3px;
color: var(--text-primary);
margin-bottom: 6px;
}
.auth-card-sub {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 28px;
line-height: 1.5;
}
/* Footer link beneath the card */
.auth-footer {
margin-top: 18px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
.auth-footer a {
color: var(--text-accent-green);
font-weight: 600;
transition: opacity 0.15s;
}
.auth-footer a:hover { opacity: 0.75; }
/* ── FORM COMPONENTS ──────────────────────────────────────── */
.form-fields {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Row: two fields side-by-side (e.g. first + last name) */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-secondary);
}
.form-label .optional {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--text-muted);
font-size: 11px;
}
.form-input {
width: 100%;
padding: 10px 14px;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 14px;
transition: border-color 0.18s, background 0.18s;
outline: none;
-webkit-appearance: none;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
border-color: rgba(96, 239, 188, 0.50);
background: var(--surface-hover);
}
/* Password reveal wrapper */
.form-input-wrap {
position: relative;
}
.form-input-wrap .form-input {
padding-right: 42px;
}
.form-input-reveal {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
transition: color 0.15s;
}
.form-input-reveal:hover { color: var(--text-primary); }
.form-input-reveal svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Hint text below an input */
.form-hint {
font-size: 11px;
color: var(--text-muted);
margin-top: -2px;
line-height: 1.4;
}
/* Field divider (optional section separator) */
.form-divider {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 4px 0;
}
.form-divider::before,
.form-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--surface-border);
}
/* Submit button — full-width variant of .btn-primary */
.btn-submit {
width: 100%;
padding: 12px;
margin-top: 8px;
border-radius: var(--radius-sm);
border: none;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: opacity 0.18s, transform 0.18s;
}
.btn-submit:hover { opacity: 0.88; transform: translateY(-1px); }
/* ── WELCOME / HERO PAGE ──────────────────────────────────── */
.welcome-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.welcome-logo {
width: 72px;
height: 72px;
border-radius: 22px;
overflow: hidden;
margin-bottom: 20px;
}
.welcome-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.welcome-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--text-accent-green);
margin-bottom: 14px;
}
.welcome-headline {
font-family: var(--font-display);
font-size: clamp(36px, 6vw, 60px);
line-height: 1.1;
letter-spacing: -1px;
color: var(--text-primary);
max-width: 640px;
margin-bottom: 18px;
}
.welcome-headline em {
font-style: italic;
color: var(--text-accent-green);
}
.welcome-body {
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
max-width: 480px;
margin-bottom: 36px;
font-weight: 300;
}
.welcome-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 56px;
}
/* Larger CTA for the welcome page */
.btn-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 28px;
border: none;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: opacity 0.18s, transform 0.18s;
letter-spacing: 0.2px;
}
.btn-cta:hover { opacity: 0.88; transform: translateY(-2px); }
.btn-cta-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: 28px;
border: 1px solid var(--surface-border);
background: var(--surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 0.18s, color 0.18s, transform 0.18s;
}
.btn-cta-ghost:hover {
background: var(--surface-hover);
color: var(--text-primary);
transform: translateY(-2px);
}
/* Feature highlights beneath the CTAs */
.welcome-features {
display: flex;
gap: 32px;
flex-wrap: wrap;
justify-content: center;
}
.welcome-feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 120px;
}
.welcome-feature-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--surface-border);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.welcome-feature-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-align: center;
}
/* ── RESPONSIVE: AUTH PAGES ───────────────────────────────── */
@media (max-width: 480px) {
.auth-card { padding: 28px 20px; }
.form-row { grid-template-columns: 1fr; }
.welcome-actions { flex-direction: column; align-items: stretch; }
.btn-cta,
.btn-cta-ghost { justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════
EVENTS PAGE — category filters & category badges
═══════════════════════════════════════════════════════════ */
/* ── CATEGORY FILTER BAR ─────────────────────────────────
Sits beneath the main toolbar row on the Events page.
──────────────────────────────────────────────────────────── */
.category-filter-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.category-filter-bar-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-right: 2px;
white-space: nowrap;
}
.cat-filter-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--surface-border);
background: var(--surface);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.cat-filter-btn:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.cat-filter-btn.active {
background: color-mix(in srgb, var(--text-accent-green) 12%, transparent);
border-color: color-mix(in srgb, var(--text-accent-green) 40%, transparent);
color: var(--text-accent-green);
}
/* Dot indicator inside category button */
.cat-filter-btn .cat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
flex-shrink: 0;
}
/* ── CATEGORY BADGES ON CARDS ────────────────────────────── */
.ec-categories {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.ec-cat-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: 20px;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
color: var(--text-secondary);
white-space: nowrap;
}
/* ── CATEGORY COLUMN (list view, desktop only) ───────────── */
.ec-cat-col {
display: none; /* shown by view-list context below */
width: 210px;
flex-shrink: 0;
padding: 0 12px;
}
/* Compact inline badges inside the list column */
.ec-cat-col .ec-categories {
margin-top: 0;
flex-wrap: nowrap;
overflow: hidden;
}
.ec-cat-col .ec-cat-badge {
font-size: 10px;
padding: 2px 7px;
}
/* Header cell */
.lh-categories {
width: 210px;
padding: 0 12px;
flex-shrink: 0;
}
/* ── SHOW/HIDE RULES BY VIEW MODE ────────────────────────── */
/* List view — desktop: show column, hide body badges */
#events-container.view-list .ec-cat-col { display: block; }
#events-container.view-list .ec-categories { display: none; }
/* Re-show the .ec-categories that live *inside* the list column.
Needs higher specificity than the hide rule above (0,4,0 > 0,3,0). */
#events-container.view-list .ec-cat-col .ec-categories { display: flex; }
/* Fade the right edge of the column when badges overflow.
The column is position:relative so the ::after can be absolute. */
.ec-cat-col {
position: relative;
}
.ec-cat-col::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28px;
height: 100%;
background: linear-gradient(to right, transparent, var(--surface));
pointer-events: none;
/* Only visible when there is actually overflow — approximated by
always rendering it; the gradient is imperceptible on short lists
because the column background matches the row background. */
}
/* In list view the row background is the container background, so
the gradient target colour needs to match the card surface. */
#events-container.view-list .ec-cat-col::after {
background: linear-gradient(to right, transparent, var(--surface));
}
#events-container.view-list .event-card:hover .ec-cat-col::after {
background: linear-gradient(to right, transparent, var(--surface-hover));
}
/* Tile view — show body badges, never show column */
#events-container.view-tiles .ec-cat-col { display: none; }
#events-container.view-tiles .ec-categories { display: flex; }
/* Mobile: always hide the column regardless of view mode */
@media (max-width: 680px) {
#events-container.view-list .ec-cat-col { display: none; }
#events-container.view-list .ec-categories { display: none; }
.lh-categories { display: none; }
}
/* ═══════════════════════════════════════════════════════════
PROJECT DETAIL PAGE
═══════════════════════════════════════════════════════════ */
/* ── PAGE GRID ──────────────────────────────────────────── */
.project-detail-grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
align-items: start;
}
/* ── PROJECT HEADER ─────────────────────────────────────── */
.project-header {
padding: 28px 32px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
/* Subtle accent glow in top-left corner */
.project-header::before {
content: '';
position: absolute;
top: -40px; left: -40px;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent-green) 18%, transparent), transparent 70%);
pointer-events: none;
}
.project-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.project-title {
font-family: var(--font-display);
font-size: 30px;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--text-primary);
}
.project-header-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
}
.project-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
max-width: 720px;
margin-bottom: 20px;
}
.project-meta-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.project-meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-secondary);
}
.project-meta-item svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none; stroke-width: 2;
opacity: 0.6; flex-shrink: 0;
}
.project-meta-item strong {
color: var(--text-primary);
font-weight: 600;
}
.project-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
/* Overall project progress bar */
.project-progress {
display: flex;
align-items: center;
gap: 12px;
}
.project-progress-bar-wrap {
flex: 1;
height: 6px;
background: var(--surface-border);
border-radius: 3px;
overflow: hidden;
max-width: 320px;
}
.project-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
border-radius: 3px;
transition: width 0.4s ease;
}
.project-progress-label {
font-size: 12px;
font-weight: 700;
color: var(--text-accent-green);
white-space: nowrap;
}
.project-progress-sub {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
/* ── TASK TREE ──────────────────────────────────────────── */
.task-tree {
list-style: none;
margin: 0; padding: 0;
}
/* Nested list — indented, connected by a vertical line */
.task-children {
list-style: none;
margin: 0; padding: 0 0 0 20px;
border-left: 1px solid var(--surface-border);
margin-left: 18px;
}
.task-item {
position: relative;
}
/* Horizontal connector from the vertical rail to the row */
.task-children > .task-item::before {
content: '';
position: absolute;
left: -20px;
top: 20px;
width: 12px;
height: 1px;
background: var(--surface-border);
}
.task-row {
display: flex;
align-items: center;
gap: 0;
padding: 10px 12px;
border-radius: var(--radius-sm);
transition: background 0.15s;
cursor: pointer;
text-decoration: none;
color: var(--text-primary);
min-height: 44px;
}
.task-row:hover {
background: var(--surface-hover);
}
/* Toggle button (expand/collapse) */
.task-toggle {
width: 22px; height: 22px;
flex-shrink: 0;
border: none;
background: none;
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border-radius: 5px;
padding: 0;
margin-right: 4px;
transition: background 0.15s, color 0.15s, transform 0.2s;
}
.task-toggle:hover {
background: var(--surface-border);
color: var(--text-primary);
}
.task-toggle svg {
width: 12px; height: 12px;
stroke: currentColor; fill: none; stroke-width: 2.5;
stroke-linecap: round;
transition: transform 0.2s;
}
/* Collapsed state — chevron points right */
.task-item.collapsed > .task-row .task-toggle svg { transform: rotate(-90deg); }
/* Leaf node — show a dot instead of toggle */
.task-toggle.leaf {
cursor: default;
pointer-events: none;
}
.task-toggle.leaf svg { display: none; }
.task-toggle.leaf::after {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--surface-border);
display: block;
}
/* Task name */
.task-name {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 8px;
}
.task-name.done {
text-decoration: line-through;
color: var(--text-muted);
}
/* Task status */
.task-status-wrap {
flex-shrink: 0;
margin-right: 12px;
}
/* Task volunteer fill */
.task-fill-wrap {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
min-width: 70px;
}
.task-fill-bar-wrap {
width: 60px; height: 3px;
background: var(--surface-border);
border-radius: 2px; overflow: hidden;
}
.task-fill-bar {
height: 100%;
background: var(--ev-color, var(--accent-green));
border-radius: 2px;
}
.task-fill-label {
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
}
/* Collapsed children are hidden */
.task-item.collapsed > .task-children { display: none; }
/* Separator between top-level tasks */
.task-tree > .task-item + .task-item {
border-top: 1px solid var(--surface-border);
margin-top: 2px;
padding-top: 2px;
}
/* ── TIMELINE ───────────────────────────────────────────── */
.timeline {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 0;
}
.timeline-item {
display: flex;
gap: 12px;
position: relative;
padding-bottom: 20px;
}
.timeline-item:last-child { padding-bottom: 0; }
/* Vertical rail */
.timeline-item::before {
content: '';
position: absolute;
left: 5px;
top: 14px;
bottom: 0;
width: 1px;
background: var(--surface-border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3px;
}
.timeline-dot {
width: 11px; height: 11px;
border-radius: 50%;
border: 2px solid var(--surface-border);
background: var(--bg);
flex-shrink: 0;
z-index: 1;
}
.timeline-dot.done { background: var(--accent-green); border-color: var(--accent-green); }
.timeline-dot.active { background: var(--accent-blue); border-color: var(--accent-blue); }
.timeline-dot.warning { background: var(--accent-amber); border-color: var(--accent-amber); }
.timeline-body { flex: 1; min-width: 0; padding-bottom: 2px; }
.timeline-date {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 2px;
}
.timeline-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.timeline-detail {
font-size: 11px;
color: var(--text-secondary);
margin-top: 2px;
line-height: 1.4;
}
/* ── TEAM ROSTER ────────────────────────────────────────── */
.team-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.team-member {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--surface-border);
}
.team-member:last-child { border-bottom: none; }
.team-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
color: var(--text-secondary);
flex-shrink: 0;
}
.team-member-info { flex: 1; min-width: 0; }
.team-member-name {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-member-role {
font-size: 11px;
color: var(--text-muted);
}
.team-member-hours {
font-size: 11px; font-weight: 700;
color: var(--text-accent-green);
white-space: nowrap;
flex-shrink: 0;
}
/* ── ACTIVITY FEED ──────────────────────────────────────── */
.activity-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.activity-item {
display: flex;
gap: 10px;
align-items: flex-start;
}
.activity-icon {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.activity-icon svg {
width: 13px; height: 13px;
stroke: var(--text-muted); fill: none; stroke-width: 2;
}
.activity-body { flex: 1; min-width: 0; }
.activity-text {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.45;
}
.activity-text strong { color: var(--text-primary); font-weight: 600; }
.activity-text a { font-weight: 700; }
.activity-time {
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.project-detail-grid {
grid-template-columns: 1fr 260px;
gap: 16px;
}
}
@media (max-width: 680px) {
.project-detail-grid {
grid-template-columns: 1fr;
}
.project-header { padding: 20px; }
.project-title { font-size: 22px; }
.project-header-top { flex-direction: column; align-items: flex-start; }
.project-header-actions { width: 100%; }
.project-header-actions .btn-primary,
.project-header-actions .btn-ghost { flex: 1; justify-content: center; }
/* Hide fill bar on mobile task rows — too cramped */
.task-fill-bar-wrap { display: none; }
.task-fill-label { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════
SETTINGS PAGES
═══════════════════════════════════════════════════════════ */
/* ── SETTINGS SUB-NAVIGATION ────────────────────────────── */
.settings-subnav {
display: flex;
gap: 2px;
margin-bottom: 24px;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 4px;
flex-wrap: wrap;
}
.settings-subnav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: calc(var(--radius-md) - 4px);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.settings-subnav-link:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.settings-subnav-link.active {
background: var(--surface-strong);
color: var(--text-primary);
font-weight: 600;
}
.settings-subnav-link svg {
width: 14px; height: 14px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* ── SETTINGS INDEX CARDS ───────────────────────────────── */
.settings-index-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.settings-index-card {
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.15s;
cursor: pointer;
}
.settings-index-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-elevated);
}
.settings-index-icon {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent-green) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-green) 25%, transparent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.settings-index-icon svg {
width: 18px; height: 18px;
stroke: var(--text-accent-green); fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.settings-index-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.settings-index-card-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
flex: 1;
}
.settings-index-card-arrow {
font-size: 12px;
font-weight: 600;
color: var(--text-accent-green);
}
/* ── SETTINGS FORM LAYOUT ───────────────────────────────── */
/* Stack of glass panels, one per logical section */
.settings-form {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 720px;
}
.settings-section {
padding: 24px 28px;
}
.settings-section-header {
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--surface-border);
}
.settings-section-title {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.settings-section-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
/* Save / cancel action row at bottom of a form */
.settings-save-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding-top: 4px;
}
/* ── TOGGLE SWITCH (boolean settings) ───────────────────── */
.settings-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--surface-border);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
}
.settings-toggle-desc {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* Pill-shaped toggle built on a hidden checkbox */
.toggle-switch {
position: relative;
width: 36px; height: 20px;
flex-shrink: 0;
}
.toggle-switch input {
position: absolute;
opacity: 0; width: 0; height: 0;
}
.toggle-track {
position: absolute;
inset: 0;
border-radius: 20px;
background: var(--surface-border);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
border: 1px solid transparent;
}
.toggle-track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--text-muted);
transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-track {
background: color-mix(in srgb, var(--accent-green) 25%, transparent);
border-color: color-mix(in srgb, var(--accent-green) 45%, transparent);
}
.toggle-switch input:checked + .toggle-track::after {
transform: translateX(16px);
background: var(--text-accent-green);
}
/* ── ROLE BADGES ────────────────────────────────────────── */
.role-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
border: 1px solid;
white-space: nowrap;
}
.role-badge.admin {
color: var(--text-accent-purple);
border-color: color-mix(in srgb, var(--text-accent-purple) 35%, transparent);
background: color-mix(in srgb, var(--text-accent-purple) 10%, transparent);
}
.role-badge.coordinator {
color: var(--text-accent-blue);
border-color: color-mix(in srgb, var(--text-accent-blue) 35%, transparent);
background: color-mix(in srgb, var(--text-accent-blue) 10%, transparent);
}
.role-badge.moderator {
color: var(--text-accent-amber);
border-color: color-mix(in srgb, var(--text-accent-amber) 35%, transparent);
background: color-mix(in srgb, var(--text-accent-amber) 10%, transparent);
}
.role-badge.volunteer {
color: var(--text-accent-green);
border-color: color-mix(in srgb, var(--text-accent-green) 35%, transparent);
background: color-mix(in srgb, var(--text-accent-green) 10%, transparent);
}
.role-badge.suspended {
color: var(--text-muted);
border-color: var(--surface-border);
background: var(--surface);
text-decoration: line-through;
}
/* ── USER TABLE ─────────────────────────────────────────── */
.user-table-header {
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--surface-border);
}
.user-row {
display: flex;
align-items: center;
padding: 11px 16px;
border-bottom: 1px solid var(--surface-border);
transition: background 0.15s;
gap: 0;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--surface-hover); }
/* Shared width tokens for header + rows to stay in sync */
.lhu-identity,
.user-row-identity { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lhu-role,
.user-row-role { width: 130px; flex-shrink: 0; }
.lhu-activity,
.user-row-activity { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.lhu-actions,
.user-row-actions { width: 110px; flex-shrink: 0; display: flex; gap: 6px; justify-content: flex-end; }
.user-row-name {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-email {
font-size: 11px; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Compact icon-only action buttons */
.btn-row-action {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--surface-border);
background: transparent;
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.btn-row-action:hover {
background: var(--surface-hover);
color: var(--text-primary);
border-color: var(--surface-border);
}
.btn-row-action.warn:hover {
background: color-mix(in srgb, var(--accent-amber) 12%, transparent);
color: var(--text-accent-amber);
border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
}
.btn-row-action.danger:hover {
background: color-mix(in srgb, var(--accent-pink) 12%, transparent);
color: var(--text-accent-pink);
border-color: color-mix(in srgb, var(--accent-pink) 35%, transparent);
}
.btn-row-action svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Pending-approval callout banner */
.pending-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent);
border-radius: var(--radius-sm);
margin-bottom: 16px;
flex-wrap: wrap;
}
.pending-banner-text {
font-size: 13px;
font-weight: 500;
color: var(--text-accent-amber);
display: flex; align-items: center; gap: 8px;
}
.pending-banner-text svg {
width: 15px; height: 15px;
stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; flex-shrink: 0;
}
.pending-banner-actions { display: flex; gap: 6px; }
.pending-banner.error {
background: color-mix(in srgb, var(--accent-pink) 10%, transparent);
border-color: color-mix(in srgb, var(--accent-pink) 30%, transparent);
}
.pending-banner.error .pending-banner-text {
color: var(--text-accent-pink);
}
/* ── CATEGORY MANAGEMENT ────────────────────────────────── */
.category-manage-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 20px;
align-items: start;
}
.category-manage-list {
display: flex;
flex-direction: column;
}
.category-manage-row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-bottom: 1px solid var(--surface-border);
transition: background 0.15s;
}
.category-manage-row:last-child { border-bottom: none; }
.category-manage-row:hover { background: var(--surface-hover); }
.drag-handle {
color: var(--text-muted);
opacity: 0.4;
cursor: grab;
flex-shrink: 0;
display: flex; align-items: center;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg {
width: 14px; height: 14px;
stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round;
}
.category-color-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.10);
}
.category-manage-name {
flex: 1;
font-size: 13px; font-weight: 600;
color: var(--text-primary);
}
.category-manage-slug {
font-size: 11px;
font-family: monospace;
color: var(--text-muted);
background: var(--surface-strong);
border: 1px solid var(--surface-border);
border-radius: 4px;
padding: 1px 7px;
flex-shrink: 0;
}
.category-manage-count {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
min-width: 56px;
text-align: right;
}
/* Color swatch radio picker */
.color-swatch-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 0;
}
.color-swatch-option {
position: relative;
width: 24px; height: 24px;
}
.color-swatch-option input[type="radio"] {
position: absolute;
opacity: 0; width: 0; height: 0;
}
.color-swatch-option label {
display: block;
width: 24px; height: 24px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
box-sizing: border-box;
transition: transform 0.15s, border-color 0.15s;
}
.color-swatch-option label:hover { transform: scale(1.2); }
.color-swatch-option input:checked + label {
border-color: var(--text-primary);
transform: scale(1.1);
box-shadow: 0 0 0 2px var(--bg);
}
/* ── TEAMS MANAGEMENT CARDS ─────────────────────────────── */
.teams-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.team-manage-card {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.team-manage-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.team-manage-name {
font-size: 15px; font-weight: 700;
color: var(--text-primary);
}
.team-manage-desc {
font-size: 12px; color: var(--text-secondary);
line-height: 1.5;
}
.team-manage-leads {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.team-lead-label {
font-size: 10px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--text-muted);
margin-right: 2px;
}
.team-lead-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 3px;
border-radius: 20px;
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-green) 25%, transparent);
font-size: 11px; font-weight: 600;
color: var(--text-accent-green);
}
.team-lead-chip .team-avatar {
width: 18px; height: 18px;
font-size: 7px;
background: color-mix(in srgb, var(--accent-green) 20%, transparent);
border-color: transparent;
}
.team-manage-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--surface-border);
margin-top: auto;
gap: 8px;
}
.team-member-avatars {
display: flex;
flex-direction: row-reverse;
}
.team-member-avatars .team-avatar {
width: 26px; height: 26px;
font-size: 9px;
margin-left: -8px;
border: 2px solid var(--surface);
}
.team-member-avatars .team-avatar:last-child { margin-left: 0; }
.team-member-count {
font-size: 12px; color: var(--text-muted);
display: flex; align-items: center; gap: 5px;
}
.team-member-count svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none; stroke-width: 2;
}
/* New-team / edit-team inline form panel */
.team-form-panel {
padding: 24px 28px;
}
.team-form-panel.hidden { display: none; }
/* ── SYSTEM STATUS INDICATORS ───────────────────────────── */
.status-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--surface-border);
}
.status-indicator:last-child { border-bottom: none; }
.status-indicator-label {
font-size: 13px; color: var(--text-secondary);
}
.status-indicator-value {
font-size: 12px; font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.status-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot.ok { background: var(--accent-green); }
.status-dot.warn { background: var(--accent-amber); }
.status-dot.error { background: var(--accent-pink); }
/* ── SETTINGS RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
.settings-index-grid { grid-template-columns: repeat(2, 1fr); }
.category-manage-layout { grid-template-columns: 1fr 260px; }
}
@media (max-width: 680px) {
/* Sub-nav: hide text labels, show icons only */
.settings-subnav-link .subnav-label { display: none; }
.settings-subnav-link { padding: 8px 12px; }
.settings-index-grid { grid-template-columns: 1fr; }
.settings-form { max-width: 100%; }
.settings-section { padding: 16px; }
.category-manage-layout { grid-template-columns: 1fr; }
.category-manage-slug { display: none; }
.teams-grid { grid-template-columns: 1fr; }
/* User table: hide last-active column, stack actions */
.user-table-header { display: none; }
.user-row-activity { display: none; }
.user-row { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
.user-row-identity { flex: 1; }
.user-row-role { width: auto; }
.user-row-actions { width: auto; margin-left: auto; }
}
/* ── SELECT / COMBOBOX ────────────────────────────────────── */
.form-select-wrap {
position: relative;
}
.form-select {
width: 100%;
padding: 10px 36px 10px 14px;
background: var(--surface-strong);
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.18s, background 0.18s;
outline: none;
}
.form-select:focus {
border-color: rgba(96, 239, 188, 0.50);
background: var(--surface-hover);
}
.form-select option[value=""][disabled] {
color: var(--text-muted);
}
.form-select-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
pointer-events: none;
color: var(--text-muted);
}
/* ── BADGE MULTI-SELECT ───────────────────────────────────── */
.badge-select {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 0;
}
.badge-option {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 13px;
border-radius: 20px;
border: 1px solid var(--surface-border);
background: var(--surface-strong);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.badge-option:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.badge-option input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.badge-option:has(input:checked) {
background: color-mix(in srgb, var(--text-accent-green) 12%, transparent);
border-color: color-mix(in srgb, var(--text-accent-green) 40%, transparent);
color: var(--text-accent-green);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════
USER PROFILE HERO
Used on edit-role page to identify the subject user.
═══════════════════════════════════════════════════════════ */
.user-profile-hero {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
margin-bottom: 20px;
}
.user-profile-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--surface-strong);
border: 2px solid var(--surface-border);
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700;
color: var(--text-secondary);
flex-shrink: 0;
}
.user-profile-info { flex: 1; min-width: 0; }
.user-profile-name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.3px;
color: var(--text-primary);
margin-bottom: 2px;
}
.user-profile-email {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 8px;
}
.user-profile-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.user-profile-meta-item {
font-size: 11px;
color: var(--text-muted);
display: flex; align-items: center; gap: 4px;
}
.user-profile-meta-item svg {
width: 11px; height: 11px;
stroke: currentColor; fill: none; stroke-width: 2;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════
ROLE SELECTOR CARDS
Radio-card pattern — one card per role, highlighted on check.
═══════════════════════════════════════════════════════════ */
.role-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* Each option is a