@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Neutral Charcoal Background */
  --bg-gradient:
    radial-gradient(at 10% 10%, rgba(255, 255, 255, 0.03) 0px, transparent 40%),
    radial-gradient(at 90% 90%, rgba(255, 255, 255, 0.02) 0px, transparent 40%),
    linear-gradient(135deg, #0b0c10 0%, #0f1116 50%, #08090d 100%);

  /* Brand & Accents (unchanged) */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-glow: rgba(99, 102, 241, 0.4);
  --primary-subtle: rgba(99, 102, 241, 0.2);
  --primary-subtle-border: rgba(99, 102, 241, 0.35);
  --primary-text: #818cf8;
  --primary-text-light: #a5b4fc;

  --accent: #38bdf8;
  --accent-cyan: #06b6d4;
  --error: #f43f5e;
  --error-hover: #dc2626;
  --error-subtle: rgba(244, 63, 94, 0.18);
  --error-subtle-border: rgba(244, 63, 94, 0.3);
  --error-text: #fda4af;
  --autofill: #10b981;

  --warning: #f59e0b;
  --warning-subtle: rgba(245, 158, 11, 0.18);
  --warning-subtle-border: rgba(245, 158, 11, 0.3);
  --warning-text: #fde047;

  /* Text Hierarchy */
  --text-main: #ffffff;
  --text-body: #f8fafc;
  --text-sub: #f1f5f9;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --text-dark: #64748b;

  /* Elevation, Shapes & Animations */
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Neutral Card Surfaces (updated to match bg) */
  --surface-card: #111315;        /* Slightly warmer, less blue */
  --surface-card-alt: #1a1c1f;    /* Neutral charcoal */
  --surface-card-border: rgba(255, 255, 255, 0.08);

  /* High-Contrast Charcoal Glass Surfaces (updated) */
  --surface-glass: rgba(255, 255, 255, 0.04);
  --glass-bg-main: var(--surface-glass);

  --glass-bg-card: rgba(20, 22, 26, 0.65);       /* Neutral glass */
  --glass-bg-card-alt: rgba(28, 30, 34, 0.65);   /* Slightly elevated */

  --glass-bg-input: rgba(255, 255, 255, 0.05);

  /* Navbar / Modal Shell (updated to match background) */
  --glass-modal-shell: linear-gradient(
      135deg,
      rgba(28, 28, 32, 0.75),
      rgba(20, 20, 24, 0.75)
  );

  /* Modal Panel (slightly lighter than shell) */
  --glass-modal-panel: rgba(22, 24, 28, 0.55);

  /* Elevated Cards */
  --glass-card-elevated: rgba(30, 32, 36, 0.75);

  /* Glass Hovers */
  --surface-glass-hover: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);

  /* Glass Borders */
  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(255, 255, 255, 0.14);

  --glass-blur: blur(20px) saturate(140%);
  --glass-blur-heavy: blur(28px) saturate(160%);
  --glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);

  --glow-primary: 0 0 18px var(--primary-glow);

  --accent-pop: var(--error);

  /* Success State */
  --success-bg: rgba(16, 185, 129, 0.15);
  --success-text: #34d399;

  /* Status Badges */
  --status-past-bg: rgba(148, 163, 184, 0.12);
  --status-past-text: var(--text-muted);
  --status-past-border: rgba(148, 163, 184, 0.2);

  --status-future-bg: var(--success-bg);
  --status-future-text: var(--success-text);
  --status-future-border: rgba(52, 211, 153, 0.3);

  --status-today-bg: rgba(245, 158, 11, 0.15);
  --status-today-text: #fbbf24;
  --status-today-border: rgba(251, 191, 36, 0.3);

  /* Stat Card Variants */
  --stat-blue-bg: rgba(59, 130, 246, 0.2);
  --stat-blue-text: #93c5fd;
  --stat-blue-border: rgba(59, 130, 246, 0.35);

  --stat-teal-bg: rgba(20, 184, 166, 0.2);
  --stat-teal-text: #5eead4;
  --stat-teal-border: rgba(20, 184, 166, 0.35);

  --stat-green-bg: rgba(16, 185, 129, 0.2);
  --stat-green-text: #6ee7b7;
  --stat-green-border: rgba(16, 185, 129, 0.35);

  --stat-darkblue-bg: rgba(30, 58, 138, 0.25);
  --stat-darkblue-text: #bfdbfe;
  --stat-darkblue-border: rgba(30, 58, 138, 0.45);

  /* Tag Colors */
  --tag-cyan-bg: rgba(14, 165, 233, 0.18);
  --tag-cyan-text: #7dd3fc;
  --tag-cyan-border: rgba(14, 165, 233, 0.3);

  --tag-green-bg: rgba(34, 197, 94, 0.18);
  --tag-green-text: #86efac;
  --tag-green-border: rgba(34, 197, 94, 0.3);

  --tag-purple-bg: rgba(168, 85, 247, 0.18);
  --tag-purple-text: #d8b4fe;
  --tag-purple-border: rgba(168, 85, 247, 0.3);

  /* Gender Category Colors */
  --gender-female-bg: rgba(255, 99, 132, 0.15);
  --gender-female-text: #ff6384;
  --gender-female-border: rgba(255, 99, 132, 0.3);

  --gender-male-bg: rgba(53, 162, 235, 0.15);
  --gender-male-text: #35a2eb;
  --gender-male-border: rgba(53, 162, 235, 0.3);

  --gender-mixed-bg: rgba(168, 85, 247, 0.15);
  --gender-mixed-text: #a855f7;
  --gender-mixed-border: rgba(168, 85, 247, 0.3);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-glass); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb { background: var(--glass-border-light); border-radius: var(--radius-sm); transition: var(--transition-smooth);}
::-webkit-scrollbar-thumb:hover {background: var(--primary); box-shadow: 0 0 10px var(--primary-glow);}

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-gradient);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

.main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  position: relative;
}

main#workspace {
  position: relative;
  min-height: calc(100vh - 50px);
}

/* Inline SVG icon alignment (replaces text glyphs for carets / arrows) */
.dropdown-caret {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.dropdown-caret svg {
  width: 12px;
  height: 12px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arrow-link svg {
  width: 16px;
  height: 16px;
}

.view-all-activity-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}