/* ==========================================================================
   VizGolf Base Styles
   Core CSS extracted from base.html + shared component styles
   ========================================================================== */

/* ==========================================================================
   CSS Variables - Light Mode (Default)
   ========================================================================== */
:root {
  --primary-bg: #FFFFFF;
  --secondary-bg: #F8F9FA;
  --card-bg: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --accent-green: #059669;
  --accent-green-dark: #047857;
  --accent-green-light: #10B981;
  --accent-gold: #F59E0B;
  --border-color: #E2E8F0;
  --border-light: #F1F5F9;
  --border-subtle: #E2E8F0;
  --success-bg: #ECFDF5;
  --success-text: #059669;
  --hero-gradient-start: #FFFFFF;
  --hero-gradient-end: #F8FAFB;
  --input-bg: #FFFFFF;
  --shadow-color: rgba(0, 0, 0, 0.04);
  --shadow-hover: rgba(5, 150, 105, 0.12);
  --green-bg-light: #ECFDF5;
  --green-bg-lighter: #F0FDF4;
}

/* ==========================================================================
   CSS Variables - Dark Mode
   ========================================================================== */
[data-theme="dark"] {
  --primary-bg: #0F172A;
  --secondary-bg: #1E293B;
  --card-bg: #1E293B;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent-green: #10B981;
  --accent-green-dark: #059669;
  --accent-green-light: #34D399;
  --accent-gold: #FBBF24;
  --border-color: #334155;
  --border-light: #1E293B;
  --border-subtle: #334155;
  --success-bg: rgba(16, 185, 129, 0.1);
  --success-text: #10B981;
  --hero-gradient-start: #1E293B;
  --hero-gradient-end: #0F172A;
  --input-bg: #0F172A;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-hover: rgba(16, 185, 129, 0.2);
  --green-bg-light: rgba(16, 185, 129, 0.1);
  --green-bg-lighter: rgba(16, 185, 129, 0.05);
}

[data-theme="dark"] body {
  background: var(--primary-bg);
}

[data-theme="dark"] .glass-card {
  background: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .bg-white {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .text-gray-900 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode - Sections and Cards
   ========================================================================== */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"] {
  background: var(--card-bg) !important;
}

/* Dark mode - hero sections with gradients */
[data-theme="dark"] .scorecards-hero,
[data-theme="dark"] .courses-hero,
[data-theme="dark"] .buddies-hero,
[data-theme="dark"] .achievements-hero,
[data-theme="dark"] .page-header,
[data-theme="dark"] [class*="-hero"] {
  background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%) !important;
}

/* Dark mode - text colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .section-title,
[data-theme="dark"] .course-name,
[data-theme="dark"] .buddy-name,
[data-theme="dark"] .club-name {
  color: var(--text-primary) !important;
}

/* Dark mode - secondary text */
[data-theme="dark"] p,
[data-theme="dark"] .location,
[data-theme="dark"] .round-meta,
[data-theme="dark"] .stat-item .label {
  color: var(--text-secondary) !important;
}

/* Dark mode - cards and list items */
[data-theme="dark"] .score-row,
[data-theme="dark"] .course-card,
[data-theme="dark"] .buddy-card,
[data-theme="dark"] .equipment-card,
[data-theme="dark"] .achievement-card,
[data-theme="dark"] .round-cell {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - hover states */
[data-theme="dark"] .score-row:hover,
[data-theme="dark"] .course-card:hover {
  background: var(--secondary-bg) !important;
}

/* Dark mode - filter bars and inputs */
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .filters,
[data-theme="dark"] .filters-section {
  background: var(--secondary-bg) !important;
}

/* Dark mode - navbar */
[data-theme="dark"] nav {
  background: var(--primary-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover {
  background: var(--secondary-bg) !important;
}

/* Dark mode - stat cards and badges */
[data-theme="dark"] .hero-stat,
[data-theme="dark"] .progress-card,
[data-theme="dark"] .bag-overview {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - dashboard stat tiles */
[data-theme="dark"] .stat-tile,
[data-theme="dark"] .quick-stat,
[data-theme="dark"] [class*="stat-"],
[data-theme="dark"] .handicap-card,
[data-theme="dark"] .index-card {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - all buttons with light backgrounds */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] a[style*="background: white"],
[data-theme="dark"] a[style*="background:#fff"],
[data-theme="dark"] button[style*="background: white"],
[data-theme="dark"] button[style*="background:#fff"] {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - links styled as buttons */
[data-theme="dark"] a.px-6,
[data-theme="dark"] a.px-4 {
  color: var(--text-primary);
}

/* Dark mode - specific dashboard elements */
[data-theme="dark"] .grid > div,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .info-card {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - recent rounds grid */
[data-theme="dark"] .recent-rounds-grid .round-cell,
[data-theme="dark"] .rounds-grid > div {
  background: var(--card-bg) !important;
}

/* Dark mode - dropdown menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] [class*="dropdown"],
[data-theme="dark"] .menu-dropdown {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - mobile menu */
[data-theme="dark"] #mobile-menu-overlay {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--primary-bg) 100%) !important;
}

/* Dark mode - table rows and alternating backgrounds */
[data-theme="dark"] tr,
[data-theme="dark"] tbody tr:nth-child(even) {
  background: var(--card-bg) !important;
}

[data-theme="dark"] tbody tr:nth-child(odd) {
  background: var(--secondary-bg) !important;
}

/* Dark mode - catch-all for inline white backgrounds */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] a[style*="background: white"],
[data-theme="dark"] a[style*="background:white"],
[data-theme="dark"] span[style*="background: white"],
[data-theme="dark"] section[style*="background: white"] {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Dark mode - dashboard specific */
[data-theme="dark"] .handicap-card-link .stat-card {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - action buttons with white bg */
[data-theme="dark"] a[style*="border: 1px solid"],
[data-theme="dark"] a[style*="border:1px solid"] {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Dark mode - chart containers and activity items */
[data-theme="dark"] .activity-item {
  background: var(--card-bg) !important;
}

/* Dark mode - all divs inside main content with rounded corners (likely cards) */
[data-theme="dark"] main div[style*="border-radius"][style*="background"] {
  background: var(--card-bg) !important;
}

/* Dark mode - achievements section orange gradient */
[data-theme="dark"] .section[style*="FFF7ED"],
[data-theme="dark"] .section[style*="FFEDD5"],
[data-theme="dark"] div[style*="FFF7ED"],
[data-theme="dark"] div[style*="FFEDD5"],
[data-theme="dark"] div[style*="fef3c7"],
[data-theme="dark"] div[style*="fefce8"] {
  background: var(--card-bg) !important;
}

/* Dark mode - handicap section gold styling */
[data-theme="dark"] .section[style*="FDFBF7"],
[data-theme="dark"] div[style*="FDFBF7"] {
  background: var(--card-bg) !important;
}

/* Dark mode - chart header text */
[data-theme="dark"] h3[style*="color: #333"] {
  color: var(--text-primary) !important;
}

/* Dark mode - dashed border empty states */
[data-theme="dark"] div[style*="border: 2px dashed"] {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - equipment insights yellow/amber gradients */
[data-theme="dark"] div[style*="fde68a"] {
  background: var(--secondary-bg) !important;
}

/* ==========================================================================
   Dark Mode - Profile Page
   ========================================================================== */
[data-theme="dark"] .profile-hero {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%) !important;
}

[data-theme="dark"] .profile-hero .action-btn {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .info-item,
[data-theme="dark"] .course-item,
[data-theme="dark"] .round-card {
  background: var(--secondary-bg) !important;
  border-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode - About Page
   ========================================================================== */
[data-theme="dark"] .about-hero {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%) !important;
}

[data-theme="dark"] .feature-card {
  background: var(--secondary-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .developer-card {
  background: var(--secondary-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .cta-btn-secondary {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode - Equipment Page
   ========================================================================== */
[data-theme="dark"] .equipment-card.in-bag {
  background: var(--secondary-bg) !important;
}

[data-theme="dark"] .performance-badge {
  background: var(--secondary-bg) !important;
}

[data-theme="dark"] .btn-details {
  background: var(--card-bg) !important;
  color: #8b5cf6 !important;
}

[data-theme="dark"] .btn-delete {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .filter-select {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-btn {
  background: var(--card-bg) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-btn.active {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%) !important;
  color: white !important;
}

/* ==========================================================================
   Dark Mode - Courses Page
   ========================================================================== */
[data-theme="dark"] .search-input {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .submit-course-btn {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-chip {
  background: var(--card-bg) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-chip.active {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%) !important;
  color: white !important;
}

[data-theme="dark"] .course-badge {
  background: var(--secondary-bg) !important;
  border-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode - Buddies Page
   ========================================================================== */
[data-theme="dark"] .nav-link {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .round-item {
  background: var(--secondary-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - colored gradient backgrounds (convert to solid dark) */
[data-theme="dark"] div[style*="ECFDF5"],
[data-theme="dark"] div[style*="D1FAE5"],
[data-theme="dark"] div[style*="E0F2FE"],
[data-theme="dark"] div[style*="F0F9FF"],
[data-theme="dark"] div[style*="F3E8FF"],
[data-theme="dark"] div[style*="E9D5FF"],
[data-theme="dark"] div[style*="EFF6FF"],
[data-theme="dark"] div[style*="DBEAFE"],
[data-theme="dark"] div[style*="FCE7F3"],
[data-theme="dark"] div[style*="FBCFE8"],
[data-theme="dark"] div[style*="FFEDD5"],
[data-theme="dark"] div[style*="FEF9C3"],
[data-theme="dark"] div[style*="f0f9ff"],
[data-theme="dark"] div[style*="e0f2fe"] {
  background: var(--secondary-bg) !important;
}

/* Dark mode - stats charts */
[data-theme="dark"] .chart-card,
[data-theme="dark"] .stats-hero,
[data-theme="dark"] .stat-box {
  background: var(--card-bg) !important;
}

/* Dark mode - map tiles (Leaflet) - invert map brightness */
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9);
}

/* ==========================================================================
   Dark Mode - Onboarding Pages
   ========================================================================== */
[data-theme="dark"] .hero-gradient {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%) !important;
}

[data-theme="dark"] .feature-icon {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%) !important;
  color: var(--accent-green) !important;
}

[data-theme="dark"] .step-number {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   Dark Mode - Tailwind Overrides
   ========================================================================== */
/* Tailwind bg-gray-* overrides */
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--secondary-bg) !important;
}

[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300 {
  background-color: var(--border-color) !important;
}

/* Tailwind colored bg overrides */
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-emerald-50 {
  background-color: var(--secondary-bg) !important;
}

[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 {
  background-color: var(--secondary-bg) !important;
}

[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100 {
  background-color: var(--secondary-bg) !important;
}

[data-theme="dark"] .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] .bg-yellow-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Tailwind gradient overrides */
[data-theme="dark"] .bg-gradient-to-r.from-green-50,
[data-theme="dark"] .bg-gradient-to-r.from-blue-50,
[data-theme="dark"] .bg-gradient-to-r.from-purple-50 {
  background: var(--secondary-bg) !important;
}

/* Tailwind text color overrides */
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: var(--text-muted) !important;
}

/* Dark mode - info/success/warning alert boxes */
[data-theme="dark"] .bg-blue-50.border-l-4.border-blue-500 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .bg-green-50.border-l-4.border-green-500 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

/* Dark mode - search inputs and dropdowns on onboarding/add equipment */
[data-theme="dark"] .focus\:border-green-600:focus {
  border-color: var(--accent-green) !important;
}

[data-theme="dark"] .focus\:ring-green-100:focus {
  --tw-ring-color: rgba(34, 197, 94, 0.2) !important;
}

/* Dark mode - hover states */
[data-theme="dark"] .hover\:bg-gray-300:hover {
  background-color: var(--border-color) !important;
}

/* ==========================================================================
   Dark Mode - Find Golf Buddies Page
   ========================================================================== */
[data-theme="dark"] .buddies-hero h1 {
  color: #38bdf8 !important;
}

[data-theme="dark"] .buddies-hero p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .search-box {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .user-card {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .user-info h3 {
  color: #38bdf8 !important;
}

[data-theme="dark"] .user-stats {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .empty-state h3 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .empty-state p {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .btn-disabled {
  background: var(--border-color) !important;
  color: var(--text-muted) !important;
}

/* ==========================================================================
   Dark Mode - Profile Page (Extended)
   ========================================================================== */
[data-theme="dark"] .profile-info h1 {
  color: var(--accent-green) !important;
}

[data-theme="dark"] .profile-meta {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-value {
  color: var(--accent-green) !important;
}

[data-theme="dark"] .section-header {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .info-label {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .info-value {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .course-item:hover {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .course-location {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .round-card:hover {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .round-date {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .round-course {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .round-location {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .round-score {
  color: var(--accent-green) !important;
}

/* ==========================================================================
   Theme Toggle Button
   ========================================================================== */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.theme-toggle:hover {
  background: var(--border-light);
  color: var(--accent-green);
}

/* ==========================================================================
   Base Body Styles
   ========================================================================== */
body {
  background: var(--secondary-bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav-link-active {
  background: var(--success-bg);
  color: var(--accent-green-dark);
  border-bottom: 2px solid var(--accent-green);
}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */
#mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
  backdrop-filter: blur(20px);
  z-index: 9999;
  transition: right 0.3s ease-in-out;
  overflow-y: auto;
  box-shadow: -4px 0 30px rgba(46, 125, 50, 0.15);
  border-left: 2px solid var(--accent-green);
}

#mobile-menu-overlay.active {
  right: 0;
}

/* Mobile menu backdrop */
#mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  backdrop-filter: blur(4px);
}

#mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  font-size: 1.75rem;
  color: var(--accent-green);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Shared Component Styles
   ========================================================================== */

/* ==========================================================================
   Section Component
   ========================================================================== */
.section {
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
}

.section-title {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Section variants */
.section--accent-green {
    border-left: 3px solid var(--accent-green);
}

.section--accent-gold {
    border-left: 3px solid var(--accent-gold);
    background: #FDFBF7;
}

.section--accent-orange {
    border-left: 3px solid #F59E0B;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}

[data-theme="dark"] .section--accent-gold,
[data-theme="dark"] .section--accent-orange {
    background: var(--card-bg);
}

/* ==========================================================================
   Stat Card Component
   ========================================================================== */
.stat-card {
    background: var(--card-bg, white);
    padding: 1.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-green);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
    border-color: var(--accent-green);
    transform: translateY(-2px);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--accent-green);
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.stat-value {
    font-size: 2.75rem;
    color: var(--accent-green);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-value--small {
    font-size: 1rem;
    line-height: 1.3;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Action Button Component
   ========================================================================== */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--card-bg, white);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.action-btn:hover {
    background: var(--secondary-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.1);
}

.action-btn--primary {
    background: linear-gradient(135deg, var(--accent-green) 0%, #10B981 100%);
    color: white;
    border: 2px solid var(--accent-green);
}

.action-btn--primary:hover {
    background: linear-gradient(135deg, #047857 0%, var(--accent-green) 100%);
    border-color: #047857;
    color: white;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
}

/* Quick Actions Grid */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 0;
}

/* ==========================================================================
   View All Link
   ========================================================================== */
.view-all {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.view-all:hover {
    color: var(--accent-green-dark);
    transform: translateX(2px);
}

/* ==========================================================================
   Empty State Component
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state__icon {
    font-size: 3rem;
    color: rgba(0, 103, 71, 0.2);
    margin-bottom: 1.5rem;
}

.empty-state__title {
    font-size: 1.5rem;
    color: var(--accent-green-dark);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.empty-state__description {
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

/* Dashed border variant */
.empty-state--dashed {
    background: white;
    border-radius: 10px;
    border: 2px dashed var(--border-color);
}

[data-theme="dark"] .empty-state--dashed {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* ==========================================================================
   Chart Container Component
   ========================================================================== */
.chart-container {
    position: relative;
    height: 300px;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg, linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%));
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.chart-container canvas {
    max-width: 100% !important;
    width: 100% !important;
}

.chart-container--small {
    height: 220px;
}

/* ==========================================================================
   Card Component (generic)
   ========================================================================== */
.card {
    background: var(--card-bg, white);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card--clickable:hover {
    border-color: var(--accent-green);
    transform: translateY(-2px);
}

/* ==========================================================================
   Badge Components
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge--achievement {
    background: rgba(245, 158, 11, 0.15);
    color: #EA580C;
}

.badge--personal-best {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge--memorable {
    background: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}

.badge--shared {
    background: rgba(168, 85, 247, 0.15);
    color: #7c3aed;
}

/* Notification badge (red circle) */
.notification-badge {
    background: #dc2626;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
    font-family: -apple-system, sans-serif;
}

.notification-badge--small {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Progress Bar Component
   ========================================================================== */
.progress-bar {
    background: var(--border-light);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    transition: width 0.5s ease;
}

.progress-bar__fill--green {
    background: linear-gradient(90deg, var(--accent-green) 0%, #10B981 100%);
}

.progress-bar__fill--orange {
    background: linear-gradient(90deg, #F59E0B 0%, #EA580C 100%);
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (min-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .action-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .section {
        padding: 1.5rem;
    }

    .section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card {
        padding: 1.25rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    .chart-container {
        height: 200px;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 1rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Dark Mode Overrides for Components
   ========================================================================== */
[data-theme="dark"] .section {
    background: var(--card-bg);
}

[data-theme="dark"] .stat-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .card {
    background: var(--card-bg);
}

[data-theme="dark"] .chart-container {
    background: var(--card-bg);
}

[data-theme="dark"] .action-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .action-btn--primary {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%);
    color: white;
}

[data-theme="dark"] .empty-state {
    background: var(--card-bg);
}