@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
/* FounderLink - Inspiring Theme for Founders */
/* This file provides comprehensive color scheme updates to make the platform more appealing to founders */

/* Enhanced Color Variables - Hope, Growth, and Success */
:root {
  /* Primary Brand Colors - Confident and Inspiring */
  --fp-primary: #3b82f6;                    /* Bright Blue - Trust & Innovation */
  --fp-primary-hover: #2563eb;              /* Darker Blue - Action */
  --fp-primary-light: #dbeafe;              /* Light Blue - Backgrounds */
  --fp-primary-50: #eff6ff;                 /* Ultra Light Blue */
  
  /* Success & Growth Colors */
  --fp-success: #10b981;                    /* Emerald Green - Achievement */
  --fp-success-hover: #059669;              /* Darker Green */
  --fp-success-light: #d1fae5;              /* Light Green */
  
  /* Energy & Innovation Colors */
  --fp-accent: #f59e0b;                     /* Amber - Energy & Innovation */
  --fp-accent-hover: #d97706;               /* Darker Amber */
  --fp-accent-light: #fef3c7;               /* Light Amber */
  
  /* Secondary Colors - Supporting Elements */
  --fp-purple: #8b5cf6;                     /* Purple - Creativity */
  --fp-purple-light: #f3e8ff;               /* Light Purple */
  --fp-pink: #ec4899;                       /* Pink - Engagement */
  --fp-pink-light: #fce7f3;                 /* Light Pink */
  
  /* Neutral Colors - Modern and Clean */
  --fp-gray-50: #f9fafb;
  --fp-gray-100: #f3f4f6;
  --fp-gray-200: #e5e7eb;
  --fp-gray-300: #d1d5db;
  --fp-gray-400: #9ca3af;
  --fp-gray-500: #6b7280;
  --fp-gray-600: #4b5563;
  --fp-gray-700: #374151;
  --fp-gray-800: #1f2937;
  --fp-gray-900: #111827;
  
  /* Background Colors */
  --fp-bg-primary: #ffffff;                 /* Pure white */
  --fp-bg-secondary: #f8fafc;               /* Light gray */
  --fp-bg-tertiary: #f1f5f9;                /* Slightly darker gray */
  
  /* Text Colors */
  --fp-text-primary: #111827;               /* Dark text */
  --fp-text-secondary: #4b5563;             /* Medium text */
  --fp-text-muted: #6b7280;                 /* Light text */
  --fp-text-white: #ffffff;                 /* White text */
  
  /* Border Colors */
  --fp-border: #e5e7eb;                     /* Standard border */
  --fp-border-light: #f3f4f6;               /* Light border */
  --fp-border-strong: #d1d5db;              /* Strong border */
  
  /* Shadow Colors */
  --fp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --fp-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --fp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --fp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --fp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Gradient Colors */
  --fp-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --fp-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --fp-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --fp-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --fp-gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  
  /* Interactive States */
  --fp-hover-bg: rgba(59, 130, 246, 0.05);
  --fp-focus-ring: rgba(59, 130, 246, 0.5);
  --fp-active-bg: rgba(59, 130, 246, 0.1);
}

/* Global Application Overrides */
body {
  background: #ffffff !important;
  background: var(--fp-bg-primary) !important;
  color: #111827 !important;
  color: var(--fp-text-primary) !important;
}

/* Update all primary colors */
.text-primary, 
.btn-primary,
.badge-primary,
.alert-primary {
  --bs-primary: var(--fp-primary) !important;
}

/* Update all success colors */
.text-success,
.btn-success,
.badge-success,
.alert-success {
  --bs-success: var(--fp-success) !important;
}

/* Navigation Improvements */
.top-navbar {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--fp-shadow-lg) !important;
}

.side-navbar {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  background: linear-gradient(180deg, var(--fp-bg-secondary) 0%, var(--fp-bg-tertiary) 100%) !important;
  border-right: 1px solid #e5e7eb !important;
  border-right: 1px solid var(--fp-border) !important;
}

/* Card Improvements */
.card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  background: var(--fp-gradient-card) !important;
  border: 1px solid #e5e7eb !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--fp-shadow) !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--fp-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Button Improvements */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
  border: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--fp-shadow) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--fp-shadow-lg) !important;
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  background: var(--fp-gradient-success) !important;
  border: none !important;
}

/* Form Improvements */
.form-control:focus {
  /* border-color: var(--fp-primary) !important;
  box-shadow: 0 0 0 3px var(--fp-focus-ring) !important; */
}

/* Badge Improvements */
.badge-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
}

.badge-success {
  background: #10b981 !important;
  background: var(--fp-success) !important;
}

/* Alert Improvements */
.alert-success {
  background-color: #d1fae5 !important;
  background-color: var(--fp-success-light) !important;
  border-color: #10b981 !important;
  border-color: var(--fp-success) !important;
  color: #059669 !important;
  color: var(--fp-success-hover) !important;
}

.alert-info {
  background-color: #dbeafe !important;
  background-color: var(--fp-primary-light) !important;
  border-color: #3b82f6 !important;
  border-color: var(--fp-primary) !important;
  color: #2563eb !important;
  color: var(--fp-primary-hover) !important;
}

.alert-warning {
  background-color: #fef3c7 !important;
  background-color: var(--fp-accent-light) !important;
  border-color: #f59e0b !important;
  border-color: var(--fp-accent) !important;
  color: #d97706 !important;
  color: var(--fp-accent-hover) !important;
}

/* Table Improvements */
.table th {
  background: #f8fafc !important;
  background: var(--fp-bg-secondary) !important;
  color: #111827 !important;
  color: var(--fp-text-primary) !important;
}

.table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
  background-color: var(--fp-hover-bg) !important;
}

/* Link Improvements */
a {
  color: #3b82f6 !important;
  color: var(--fp-primary) !important;
}

a:hover {
  color: #2563eb !important;
  color: var(--fp-primary-hover) !important;
}

/* Page Header Improvements */
.page-header h1 {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--fp-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Section Improvements */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background: var(--fp-gradient-hero) !important;
}

/* Stat Card Improvements */
.stat-card,
.metrics-card,
.info-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  background: var(--fp-gradient-card) !important;
  border: 1px solid #e5e7eb !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--fp-shadow) !important;
}

/* Points and Progress Improvements */
.points-value,
.progress-value {
  color: #10b981 !important;
  color: var(--fp-success) !important;
}

.progress-bar {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
}

/* Task Card Improvements */
.task-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  background: var(--fp-gradient-card) !important;
  border: 1px solid #e5e7eb !important;
  border: 1px solid var(--fp-border) !important;
  transition: all 0.3s ease !important;
}

.task-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--fp-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Sidebar Navigation Improvements */
.nav-item.active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
  color: #ffffff !important;
  color: var(--fp-text-white) !important;
}

.nav-item:hover {
  background: rgba(59, 130, 246, 0.05) !important;
  background: var(--fp-hover-bg) !important;
  color: #3b82f6 !important;
  color: var(--fp-primary) !important;
}

/* Modal Improvements */
.modal-content {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  background: var(--fp-gradient-card) !important;
  border: 1px solid #e5e7eb !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  box-shadow: var(--fp-shadow-xl) !important;
}

/* Loading State Improvements */
.spinner-border {
  color: #3b82f6 !important;
  color: var(--fp-primary) !important;
}

/* Status Indicators */
.status-online {
  color: #10b981 !important;
  color: var(--fp-success) !important;
}

.status-pending {
  color: #f59e0b !important;
  color: var(--fp-accent) !important;
}

.status-error {
  color: #ef4444 !important;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Animation Enhancements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Specific Component Overrides */
.dashboard-stats .stat-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  background: var(--fp-gradient-card) !important;
  border-left: 4px solid #3b82f6 !important;
  border-left: 4px solid var(--fp-primary) !important;
}

.welcome-section {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
  color: #ffffff !important;
  color: var(--fp-text-white) !important;
}

.feature-highlight {
  background: #dbeafe !important;
  background: var(--fp-primary-light) !important;
  border: 1px solid #3b82f6 !important;
  border: 1px solid var(--fp-primary) !important;
}

/* Text Emphasis */
.text-emphasis {
  color: #3b82f6 !important;
  color: var(--fp-primary) !important;
  font-weight: 600 !important;
}

.text-success-emphasis {
  color: #10b981 !important;
  color: var(--fp-success) !important;
  font-weight: 600 !important;
}

.text-accent {
  color: #f59e0b !important;
  color: var(--fp-accent) !important;
  font-weight: 600 !important;
}

/* Call-to-Action Enhancements */
.cta-section {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  background: var(--fp-gradient-primary) !important;
  color: #ffffff !important;
  color: var(--fp-text-white) !important;
}

.cta-button {
  background: #ffffff !important;
  background: var(--fp-text-white) !important;
  color: #3b82f6 !important;
  color: var(--fp-primary) !important;
  border: 2px solid #ffffff !important;
  border: 2px solid var(--fp-text-white) !important;
}

.cta-button:hover {
  background: transparent !important;
  color: #ffffff !important;
  color: var(--fp-text-white) !important;
}

/* Global Font Size Adjustments - Professional Commercial Style */
/* Inspired by LinkedIn and other professional websites */

:root {
  /* Ultra-compact professional typography variables - Maximum information density */
  --font-size-xs: 0.5rem;             /* 8px - Metadata, fine print */
  --font-size-sm: 0.5625rem;          /* 9px - Secondary text, labels */
  --font-size-base: 0.625rem;         /* 10px - Primary content text */
  --font-size-md: 0.6875rem;          /* 11px - Standard content */
  --font-size-lg: 0.75rem;            /* 12px - Emphasis text */
  --font-size-xl: 0.8125rem;          /* 13px - Section headers */
  --font-size-2xl: 0.875rem;          /* 14px - Page titles */
  --font-size-3xl: 1rem;              /* 16px - Major headings */
  --font-size-4xl: 1.125rem;          /* 18px - Hero text */
}

/* Ultra-compact Typography - Maximum readability and density */
body {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  line-height: 1.3; /* Extremely tight line height for maximum density */
  font-weight: 400;
}

/* Compact Heading Hierarchy */
h1, .h1 {
  font-size: 1rem;
  font-size: var(--font-size-3xl);
  line-height: 1.2;
  font-weight: 600;
}

h2, .h2 {
  font-size: 0.875rem;
  font-size: var(--font-size-2xl);
  line-height: 1.25;
  font-weight: 600;
}

h3, .h3 {
  font-size: 0.8125rem;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  font-weight: 600;
}

h4, .h4 {
  font-size: 0.75rem;
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: 600;
}

h5, .h5 {
  font-size: 0.6875rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Content Elements - Ultra-compact and Professional */
p {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  line-height: 1.3;
  margin-bottom: 0.375rem; /* Ultra-reduced spacing */
}

/* Lists - Ultra-compact spacing */
ul, ol {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  line-height: 1.3;
}

li {
  margin-bottom: 0.0625rem; /* Ultra-tight list spacing */
}

/* Small text and metadata */
small, .small {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

/* Form elements - Ultra-compact professional sizing */
input, select, textarea {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  line-height: 1.3;
  padding: 0.1875rem 0.375rem; /* Ultra-compact padding */
}

button, .btn {
  font-size: 0.5625rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  padding: 0.1875rem 0.5rem; /* Ultra-compact buttons */
}

.btn-sm {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
  padding: 0.1875rem 0.375rem;
}

.btn-lg {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  padding: 0.375rem 0.875rem;
}

/* Table elements - Ultra-compact data display */
th {
  font-size: 0.5625rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.25rem 0.375rem;
}

td {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  padding: 0.25rem 0.375rem;
}

/* Navigation - Professional compact */
.nav-link {
  font-size: 0.5625rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.navbar-brand {
  font-size: 0.75rem;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* Cards - Ultra-information dense */
.card-title {
  font-size: 0.75rem;
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: 0.1875rem;
}

.card-text, .card-content {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  line-height: 1.3;
}

.card-subtitle {
  font-size: 0.5625rem;
  font-size: var(--font-size-sm);
  color: rgba(0, 0, 0, 0.6);
}

/* UI Components - Ultra-compact and professional */
.badge, .label {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.0625rem 0.25rem;
}

.alert {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
  padding: 0.375rem 0.5rem;
}

.modal-title {
  font-size: 0.8125rem;
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.modal-body {
  font-size: 0.625rem;
  font-size: var(--font-size-base);
}

.tooltip, .popover {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
}

.breadcrumb {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
}

.pagination {
  font-size: 0.5625rem;
  font-size: var(--font-size-sm);
}

/* Ultra-compact spacing utilities */
.text-compact {
  line-height: 1.1;
}

.text-dense {
  line-height: 1.0;
}

.text-ultra-dense {
  line-height: 0.9;
}

/* Additional ultra-compact utilities */
.ultra-compact {
  font-size: 0.5rem;
  font-size: var(--font-size-xs);
  line-height: 1.1;
  padding: 0.125rem;
  margin: 0.0625rem;
}

.minimal-spacing * {
  margin-bottom: 0.125rem;
  padding: 0.125rem;
}

.dense-layout {
  letter-spacing: -0.01em;
  word-spacing: -0.02em;
}

/* Import Google Fonts for better typography */

/* Import the inspiring founder theme */

/* Import font size adjustments - professional commercial styling */

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.6;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.button-loading-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.button-loading-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border: 2px solid var(--button-spinner-track, rgba(148, 163, 184, 0.35));
  border-top-color: #3b82f6;
  border-top-color: var(--button-spinner-color, #3b82f6);
  animation: button-spinner-rotate 0.75s linear infinite;
  flex-shrink: 0;
}

.button-loading-spinner--inverse {
  --button-spinner-track: rgba(255, 255, 255, 0.5);
  --button-spinner-color: #ffffff;
}

@keyframes button-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@charset "UTF-8";/*!
 * Bootstrap  v5.3.6 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-body-font-family);font-size:1rem;font-size:var(--bs-body-font-size);font-weight:400;font-weight:var(--bs-body-font-weight);line-height:1.5;line-height:var(--bs-body-line-height);color:#212529;color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:#fff;background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:inherit;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;color:#212529;color:var(--bs-highlight-color);background-color:#fff3cd;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(13,110,253,1);color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:#fff;color:var(--bs-body-bg);background-color:#212529;background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-weight:300;line-height:1.2;font-size:calc(1.625rem + 4.5vw)}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-weight:300;line-height:1.2;font-size:calc(1.575rem + 3.9vw)}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-weight:300;line-height:1.2;font-size:calc(1.525rem + 3.3vw)}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-weight:300;line-height:1.2;font-size:calc(1.475rem + 2.7vw)}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-weight:300;line-height:1.2;font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-weight:300;line-height:1.2;font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;background-color:var(--bs-body-bg);border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color)}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color);color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:1px;border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(1px * 2) solid currentcolor;border-top:calc(var(--bs-border-width) * 2) solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0;border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 1px;border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + 1px);padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + 1px);padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + 1px);padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);-webkit-appearance:none;appearance:none;background-color:#fff;background-color:var(--bs-body-bg);background-clip:padding-box;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;color:var(--bs-body-color);background-color:#fff;background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:#e9ecef;background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;color:var(--bs-body-color);background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;color:var(--bs-body-color);background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;color:var(--bs-body-color);background-color:transparent;border:solid transparent;border-width:1px 0;border-width:var(--bs-border-width) 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + calc(1px * 2));min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));padding:.25rem .5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + calc(1px * 2));min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding:.5rem 1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + calc(1px * 2));min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}textarea.form-control-sm{min-height:calc(1.5em + .5rem + calc(1px * 2));min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(1px * 2));min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-control-color{width:3rem;height:calc(1.5em + .75rem + calc(1px * 2));height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-control-color::-webkit-color-swatch{border:0!important;border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + calc(1px * 2));height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + calc(1px * 2));height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);-webkit-appearance:none;appearance:none;background-color:#fff;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),none;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529;text-shadow:0 0 0 var(--bs-body-color)}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-range{width:100%;height:1.5rem;padding:0;-webkit-appearance:none;appearance:none;background-color:transparent}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;-webkit-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#e9ecef;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#e9ecef;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:rgba(33, 37, 41, 0.75);background-color:var(--bs-secondary-color)}.form-range:disabled::-moz-range-thumb{background-color:rgba(33, 37, 41, 0.75);background-color:var(--bs-secondary-color)}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + calc(1px * 2));height:calc(3.5rem + calc(var(--bs-border-width) * 2));min-height:calc(3.5rem + calc(1px * 2));min-height:calc(3.5rem + calc(var(--bs-border-width) * 2));line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;z-index:2;max-width:100%;height:100%;padding:1rem .75rem;overflow:hidden;color:rgba(33,37,41,.65);color:rgba(var(--bs-body-color-rgb),.65);text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:1px solid transparent;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem;padding-left:.75rem}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>textarea:focus~label::after,.form-floating>textarea:not(:placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:#fff;background-color:var(--bs-body-bg);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-floating>textarea:disabled~label::after{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-floating>.form-control-plaintext~label{border-width:1px 0;border-width:var(--bs-border-width) 0}.form-floating>.form-control:disabled~label,.form-floating>:disabled~label{color:#6c757d}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width));border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:#198754;background-color:var(--bs-success);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754;background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754;color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:#dc3545;background-color:var(--bs-danger);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545;background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545;color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:0.375rem;border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width))}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--bs-border-width))}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:nth-child(n+3),.btn-group-vertical>:not(.btn-check)+.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:var(--bs-border-color);--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}.nav-underline .nav-link{padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}.nav-underline .nav-link:focus,.nav-underline .nav-link:hover{border-bottom-color:currentcolor}.nav-underline .nav-link.active,.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-grow:1;flex-basis:0;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-grow:1;flex-basis:100%;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:1px solid var(--bs-navbar-toggler-border-color);border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:75vh;max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:#212529;color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child)>.card-header,.card-group>.card:not(:last-child)>.card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child)>.card-footer,.card-group>.card:not(:last-child)>.card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child)>.card-header,.card-group>.card:not(:first-child)>.card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child)>.card-footer,.card-group>.card:not(:first-child)>.card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush>.accordion-item:first-child{border-top:0}.accordion-flush>.accordion-item:last-child{border-bottom:0}.accordion-flush>.accordion-item>.accordion-collapse,.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:"/";content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width))}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:var(--bs-border-radius-sm)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:var(--bs-primary-text-emphasis);--bs-alert-bg:var(--bs-primary-bg-subtle);--bs-alert-border-color:var(--bs-primary-border-subtle);--bs-alert-link-color:var(--bs-primary-text-emphasis)}.alert-secondary{--bs-alert-color:var(--bs-secondary-text-emphasis);--bs-alert-bg:var(--bs-secondary-bg-subtle);--bs-alert-border-color:var(--bs-secondary-border-subtle);--bs-alert-link-color:var(--bs-secondary-text-emphasis)}.alert-success{--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}.alert-info{--bs-alert-color:var(--bs-info-text-emphasis);--bs-alert-bg:var(--bs-info-bg-subtle);--bs-alert-border-color:var(--bs-info-border-subtle);--bs-alert-link-color:var(--bs-info-text-emphasis)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle);--bs-alert-link-color:var(--bs-warning-text-emphasis)}.alert-danger{--bs-alert-color:var(--bs-danger-text-emphasis);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text-emphasis)}.alert-light{--bs-alert-color:var(--bs-light-text-emphasis);--bs-alert-bg:var(--bs-light-bg-subtle);--bs-alert-border-color:var(--bs-light-border-subtle);--bs-alert-link-color:var(--bs-light-text-emphasis)}.alert-dark{--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}@keyframes progress-bar-stripes{0%{background-position-x:var(--bs-progress-height)}}.progress,.progress-stacked{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-stacked>.progress{overflow:visible}.progress-stacked>.progress>.progress-bar{width:100%}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:not(.active):focus,.list-group-item-action:not(.active):hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:not(.active):active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;filter: ;filter:var(--bs-btn-close-filter);border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}.btn-close-white{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}:root,[data-bs-theme=light]{--bs-btn-close-filter: }[data-bs-theme=dark]{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-border-width:var(--bs-border-width);--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:var(--bs-border-radius);--bs-toast-box-shadow:var(--bs-box-shadow);--bs-toast-header-color:var(--bs-secondary-color);--bs-toast-header-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-header-border-color:var(--bs-border-color-translucent);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color:var(--bs-body-color);--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transform:translate(0,-50px);transition:transform .3s ease-out}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin-top:calc(-.5 * var(--bs-modal-header-padding-y));margin-right:calc(-.5 * var(--bs-modal-header-padding-x));margin-bottom:calc(-.5 * var(--bs-modal-header-padding-y));margin-left:auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--bs-box-shadow);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;filter: ;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;color:var(--bs-carousel-caption-color);text-align:center}.carousel-dark{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}:root,[data-bs-theme=light]{--bs-carousel-indicator-active-bg:#fff;--bs-carousel-caption-color:#fff;--bs-carousel-control-icon-filter: }[data-bs-theme=dark]{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}.spinner-border,.spinner-grow{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-border-width:var(--bs-border-width);--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);--bs-offcanvas-transition:transform 0.3s ease-in-out;--bs-offcanvas-title-line-height:1.5}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin-top:calc(-.5 * var(--bs-offcanvas-padding-y));margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y));margin-left:auto}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(13,110,253,1)!important;background-color:RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(108,117,125,1)!important;background-color:RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(25,135,84,1)!important;background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(13,202,240,1)!important;background-color:RGBA(var(--bs-info-rgb),var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(255,193,7,1)!important;background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(220,53,69,1)!important;background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(248,249,250,1)!important;background-color:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(33,37,41,1)!important;background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important}.link-primary{color:RGBA(13,110,253,1)!important;color:RGBA(var(--bs-primary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(13,110,253,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(13,110,253,1)!important;text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important}.link-primary:focus,.link-primary:hover{color:RGBA(10,88,202,1)!important;color:RGBA(10,88,202,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(10,88,202,1)!important;-webkit-text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(10,88,202,1)!important;text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important}.link-secondary{color:RGBA(108,117,125,1)!important;color:RGBA(var(--bs-secondary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(108,117,125,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(108,117,125,1)!important;text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important}.link-secondary:focus,.link-secondary:hover{color:RGBA(86,94,100,1)!important;color:RGBA(86,94,100,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(86,94,100,1)!important;-webkit-text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(86,94,100,1)!important;text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important}.link-success{color:RGBA(25,135,84,1)!important;color:RGBA(var(--bs-success-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(25,135,84,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(25,135,84,1)!important;text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important}.link-success:focus,.link-success:hover{color:RGBA(20,108,67,1)!important;color:RGBA(20,108,67,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(20,108,67,1)!important;-webkit-text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(20,108,67,1)!important;text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important}.link-info{color:RGBA(13,202,240,1)!important;color:RGBA(var(--bs-info-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(13,202,240,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(13,202,240,1)!important;text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important}.link-info:focus,.link-info:hover{color:RGBA(61,213,243,1)!important;color:RGBA(61,213,243,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(61,213,243,1)!important;-webkit-text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(61,213,243,1)!important;text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important}.link-warning{color:RGBA(255,193,7,1)!important;color:RGBA(var(--bs-warning-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,193,7,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,193,7,1)!important;text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important}.link-warning:focus,.link-warning:hover{color:RGBA(255,205,57,1)!important;color:RGBA(255,205,57,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,205,57,1)!important;-webkit-text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,205,57,1)!important;text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important}.link-danger{color:RGBA(220,53,69,1)!important;color:RGBA(var(--bs-danger-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(220,53,69,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(220,53,69,1)!important;text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important}.link-danger:focus,.link-danger:hover{color:RGBA(176,42,55,1)!important;color:RGBA(176,42,55,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(176,42,55,1)!important;-webkit-text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(176,42,55,1)!important;text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important}.link-light{color:RGBA(248,249,250,1)!important;color:RGBA(var(--bs-light-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(248,249,250,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(248,249,250,1)!important;text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important}.link-light:focus,.link-light:hover{color:RGBA(249,250,251,1)!important;color:RGBA(249,250,251,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(249,250,251,1)!important;-webkit-text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(249,250,251,1)!important;text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important}.link-dark{color:RGBA(33,37,41,1)!important;color:RGBA(var(--bs-dark-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(33,37,41,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(33,37,41,1)!important;text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important}.link-dark:focus,.link-dark:hover{color:RGBA(26,30,33,1)!important;color:RGBA(26,30,33,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(26,30,33,1)!important;-webkit-text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(26,30,33,1)!important;text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important}.link-body-emphasis{color:RGBA(0,0,0,1)!important;color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(0,0,0,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(0,0,0,1)!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-body-emphasis:focus,.link-body-emphasis:hover{color:RGBA(0,0,0,.75)!important;color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,.75))!important;-webkit-text-decoration-color:RGBA(0,0,0,0.75)!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important;text-decoration-color:RGBA(0,0,0,0.75)!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important}.focus-ring:focus{outline:0;box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);box-shadow:var(--bs-focus-ring-x,0) var(--bs-focus-ring-y,0) var(--bs-focus-ring-blur,0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:.375rem;align-items:center;-webkit-text-decoration-color:rgba(13,110,253,0.5);-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-decoration-color:rgba(13,110,253,0.5);text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-underline-offset:0.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:.2s ease-in-out transform}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:translate3d(.25em,0,0);transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.visually-hidden *,.visually-hidden-focusable:not(:focus):not(:focus-within) *{overflow:hidden!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:1px;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.object-fit-contain{object-fit:contain!important}.object-fit-cover{object-fit:cover!important}.object-fit-fill{object-fit:fill!important}.object-fit-scale{object-fit:scale-down!important}.object-fit-none{object-fit:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.overflow-x-auto{overflow-x:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.overflow-x-visible{overflow-x:visible!important}.overflow-x-scroll{overflow-x:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-y-visible{overflow-y:visible!important}.overflow-y-scroll{overflow-y:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;box-shadow:var(--bs-box-shadow)!important}.shadow-sm{box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)!important;box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0, 0, 0, 0.175)!important;box-shadow:var(--bs-box-shadow-lg)!important}.shadow-none{box-shadow:none!important}.focus-ring-primary{--bs-focus-ring-color:rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-secondary{--bs-focus-ring-color:rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-success{--bs-focus-ring-color:rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))}.focus-ring-info{--bs-focus-ring-color:rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))}.focus-ring-warning{--bs-focus-ring-color:rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))}.focus-ring-danger{--bs-focus-ring-color:rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))}.focus-ring-light{--bs-focus-ring-color:rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))}.focus-ring-dark{--bs-focus-ring-color:rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:1px solid #dee2e6!important;border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:1px solid #dee2e6!important;border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:1px solid #dee2e6!important;border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:1px solid #dee2e6!important;border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:1px solid #dee2e6!important;border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(13,110,253,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(108,117,125,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(25,135,84,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(13,202,240,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(255,193,7,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(220,53,69,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(248,249,250,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(33,37,41,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-black{--bs-border-opacity:1;border-color:rgba(0,0,0,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-black-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(255,255,255,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-primary-subtle{border-color:#9ec5fe!important;border-color:var(--bs-primary-border-subtle)!important}.border-secondary-subtle{border-color:#c4c8cb!important;border-color:var(--bs-secondary-border-subtle)!important}.border-success-subtle{border-color:#a3cfbb!important;border-color:var(--bs-success-border-subtle)!important}.border-info-subtle{border-color:#9eeaf9!important;border-color:var(--bs-info-border-subtle)!important}.border-warning-subtle{border-color:#ffe69c!important;border-color:var(--bs-warning-border-subtle)!important}.border-danger-subtle{border-color:#f1aeb5!important;border-color:var(--bs-danger-border-subtle)!important}.border-light-subtle{border-color:#e9ecef!important;border-color:var(--bs-light-border-subtle)!important}.border-dark-subtle{border-color:#adb5bd!important;border-color:var(--bs-dark-border-subtle)!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.column-gap-0{column-gap:0!important}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}.font-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-lighter{font-weight:lighter!important}.fw-light{font-weight:300!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(13,110,253,var(--bs-text-opacity))!important;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(108,117,125,var(--bs-text-opacity))!important;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(25,135,84,var(--bs-text-opacity))!important;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(13,202,240,var(--bs-text-opacity))!important;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(255,193,7,var(--bs-text-opacity))!important;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(220,53,69,var(--bs-text-opacity))!important;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(248,249,250,var(--bs-text-opacity))!important;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(33,37,41,var(--bs-text-opacity))!important;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(0,0,0,var(--bs-text-opacity))!important;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(255,255,255,var(--bs-text-opacity))!important;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(33,37,41,var(--bs-text-opacity))!important;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.75)!important;color:var(--bs-secondary-color)!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-body-secondary{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.75)!important;color:var(--bs-secondary-color)!important}.text-body-tertiary{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.5)!important;color:var(--bs-tertiary-color)!important}.text-body-emphasis{--bs-text-opacity:1;color:#000!important;color:var(--bs-emphasis-color)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.text-primary-emphasis{color:#052c65!important;color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:#2b2f32!important;color:var(--bs-secondary-text-emphasis)!important}.text-success-emphasis{color:#0a3622!important;color:var(--bs-success-text-emphasis)!important}.text-info-emphasis{color:#055160!important;color:var(--bs-info-text-emphasis)!important}.text-warning-emphasis{color:#664d03!important;color:var(--bs-warning-text-emphasis)!important}.text-danger-emphasis{color:#58151c!important;color:var(--bs-danger-text-emphasis)!important}.text-light-emphasis{color:#495057!important;color:var(--bs-light-text-emphasis)!important}.text-dark-emphasis{color:#495057!important;color:var(--bs-dark-text-emphasis)!important}.link-opacity-10{--bs-link-opacity:0.1}.link-opacity-10-hover:hover{--bs-link-opacity:0.1}.link-opacity-25{--bs-link-opacity:0.25}.link-opacity-25-hover:hover{--bs-link-opacity:0.25}.link-opacity-50{--bs-link-opacity:0.5}.link-opacity-50-hover:hover{--bs-link-opacity:0.5}.link-opacity-75{--bs-link-opacity:0.75}.link-opacity-75-hover:hover{--bs-link-opacity:0.75}.link-opacity-100{--bs-link-opacity:1}.link-opacity-100-hover:hover{--bs-link-opacity:1}.link-offset-1{text-underline-offset:0.125em!important}.link-offset-1-hover:hover{text-underline-offset:0.125em!important}.link-offset-2{text-underline-offset:0.25em!important}.link-offset-2-hover:hover{text-underline-offset:0.25em!important}.link-offset-3{text-underline-offset:0.375em!important}.link-offset-3-hover:hover{text-underline-offset:0.375em!important}.link-underline-primary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,110,253,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(13,110,253,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-secondary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(108,117,125,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(108,117,125,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-success{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(25,135,84,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(25,135,84,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important}.link-underline-info{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,202,240,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(13,202,240,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important}.link-underline-warning{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(255,193,7,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(255,193,7,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important}.link-underline-danger{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(220,53,69,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(220,53,69,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important}.link-underline-light{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(248,249,250,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(248,249,250,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important}.link-underline-dark{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(33,37,41,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(33,37,41,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important}.link-underline{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,110,253,1)!important;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:rgba(13,110,253,1)!important;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-underline-opacity-0{--bs-link-underline-opacity:0}.link-underline-opacity-0-hover:hover{--bs-link-underline-opacity:0}.link-underline-opacity-10{--bs-link-underline-opacity:0.1}.link-underline-opacity-10-hover:hover{--bs-link-underline-opacity:0.1}.link-underline-opacity-25{--bs-link-underline-opacity:0.25}.link-underline-opacity-25-hover:hover{--bs-link-underline-opacity:0.25}.link-underline-opacity-50{--bs-link-underline-opacity:0.5}.link-underline-opacity-50-hover:hover{--bs-link-underline-opacity:0.5}.link-underline-opacity-75{--bs-link-underline-opacity:0.75}.link-underline-opacity-75-hover:hover{--bs-link-underline-opacity:0.75}.link-underline-opacity-100{--bs-link-underline-opacity:1}.link-underline-opacity-100-hover:hover{--bs-link-underline-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(13,110,253,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(108,117,125,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(25,135,84,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(13,202,240,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(255,193,7,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(220,53,69,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(248,249,250,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(33,37,41,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(0,0,0,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(255,255,255,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(255,255,255,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-body-secondary{--bs-bg-opacity:1;background-color:rgba(233,236,239,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-secondary-bg-rgb),var(--bs-bg-opacity))!important}.bg-body-tertiary{--bs-bg-opacity:1;background-color:rgba(248,249,250,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-primary-subtle{background-color:#cfe2ff!important;background-color:var(--bs-primary-bg-subtle)!important}.bg-secondary-subtle{background-color:#e2e3e5!important;background-color:var(--bs-secondary-bg-subtle)!important}.bg-success-subtle{background-color:#d1e7dd!important;background-color:var(--bs-success-bg-subtle)!important}.bg-info-subtle{background-color:#cff4fc!important;background-color:var(--bs-info-bg-subtle)!important}.bg-warning-subtle{background-color:#fff3cd!important;background-color:var(--bs-warning-bg-subtle)!important}.bg-danger-subtle{background-color:#f8d7da!important;background-color:var(--bs-danger-bg-subtle)!important}.bg-light-subtle{background-color:#fcfcfd!important;background-color:var(--bs-light-bg-subtle)!important}.bg-dark-subtle{background-color:#ced4da!important;background-color:var(--bs-dark-bg-subtle)!important}.bg-gradient{background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))!important;background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:0.375rem!important;border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:0.25rem!important;border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:0.375rem!important;border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:0.5rem!important;border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:1rem!important;border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:2rem!important;border-radius:var(--bs-border-radius-xxl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important;border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important}.rounded-top-1{border-top-left-radius:0.25rem!important;border-top-left-radius:var(--bs-border-radius-sm)!important;border-top-right-radius:0.25rem!important;border-top-right-radius:var(--bs-border-radius-sm)!important}.rounded-top-2{border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-3{border-top-left-radius:0.5rem!important;border-top-left-radius:var(--bs-border-radius-lg)!important;border-top-right-radius:0.5rem!important;border-top-right-radius:var(--bs-border-radius-lg)!important}.rounded-top-4{border-top-left-radius:1rem!important;border-top-left-radius:var(--bs-border-radius-xl)!important;border-top-right-radius:1rem!important;border-top-right-radius:var(--bs-border-radius-xl)!important}.rounded-top-5{border-top-left-radius:2rem!important;border-top-left-radius:var(--bs-border-radius-xxl)!important;border-top-right-radius:2rem!important;border-top-right-radius:var(--bs-border-radius-xxl)!important}.rounded-top-circle{border-top-left-radius:50%!important;border-top-right-radius:50%!important}.rounded-top-pill{border-top-left-radius:50rem!important;border-top-left-radius:var(--bs-border-radius-pill)!important;border-top-right-radius:50rem!important;border-top-right-radius:var(--bs-border-radius-pill)!important}.rounded-end{border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-end-1{border-top-right-radius:0.25rem!important;border-top-right-radius:var(--bs-border-radius-sm)!important;border-bottom-right-radius:0.25rem!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important}.rounded-end-2{border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-3{border-top-right-radius:0.5rem!important;border-top-right-radius:var(--bs-border-radius-lg)!important;border-bottom-right-radius:0.5rem!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important}.rounded-end-4{border-top-right-radius:1rem!important;border-top-right-radius:var(--bs-border-radius-xl)!important;border-bottom-right-radius:1rem!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important}.rounded-end-5{border-top-right-radius:2rem!important;border-top-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-right-radius:2rem!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important}.rounded-end-circle{border-top-right-radius:50%!important;border-bottom-right-radius:50%!important}.rounded-end-pill{border-top-right-radius:50rem!important;border-top-right-radius:var(--bs-border-radius-pill)!important;border-bottom-right-radius:50rem!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important}.rounded-bottom{border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-0{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.rounded-bottom-1{border-bottom-right-radius:0.25rem!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important;border-bottom-left-radius:0.25rem!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important}.rounded-bottom-2{border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-3{border-bottom-right-radius:0.5rem!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important;border-bottom-left-radius:0.5rem!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important}.rounded-bottom-4{border-bottom-right-radius:1rem!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important;border-bottom-left-radius:1rem!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important}.rounded-bottom-5{border-bottom-right-radius:2rem!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-left-radius:2rem!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important}.rounded-bottom-circle{border-bottom-right-radius:50%!important;border-bottom-left-radius:50%!important}.rounded-bottom-pill{border-bottom-right-radius:50rem!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important;border-bottom-left-radius:50rem!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important}.rounded-start{border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-0{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-start-1{border-bottom-left-radius:0.25rem!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important;border-top-left-radius:0.25rem!important;border-top-left-radius:var(--bs-border-radius-sm)!important}.rounded-start-2{border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-3{border-bottom-left-radius:0.5rem!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important;border-top-left-radius:0.5rem!important;border-top-left-radius:var(--bs-border-radius-lg)!important}.rounded-start-4{border-bottom-left-radius:1rem!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important;border-top-left-radius:1rem!important;border-top-left-radius:var(--bs-border-radius-xl)!important}.rounded-start-5{border-bottom-left-radius:2rem!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important;border-top-left-radius:2rem!important;border-top-left-radius:var(--bs-border-radius-xxl)!important}.rounded-start-circle{border-bottom-left-radius:50%!important;border-top-left-radius:50%!important}.rounded-start-pill{border-bottom-left-radius:50rem!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important;border-top-left-radius:50rem!important;border-top-left-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}.z-2{z-index:2!important}.z-3{z-index:3!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.object-fit-sm-contain{object-fit:contain!important}.object-fit-sm-cover{object-fit:cover!important}.object-fit-sm-fill{object-fit:fill!important}.object-fit-sm-scale{object-fit:scale-down!important}.object-fit-sm-none{object-fit:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}.column-gap-sm-0{column-gap:0!important}.column-gap-sm-1{column-gap:.25rem!important}.column-gap-sm-2{column-gap:.5rem!important}.column-gap-sm-3{column-gap:1rem!important}.column-gap-sm-4{column-gap:1.5rem!important}.column-gap-sm-5{column-gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.object-fit-md-contain{object-fit:contain!important}.object-fit-md-cover{object-fit:cover!important}.object-fit-md-fill{object-fit:fill!important}.object-fit-md-scale{object-fit:scale-down!important}.object-fit-md-none{object-fit:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}.column-gap-md-0{column-gap:0!important}.column-gap-md-1{column-gap:.25rem!important}.column-gap-md-2{column-gap:.5rem!important}.column-gap-md-3{column-gap:1rem!important}.column-gap-md-4{column-gap:1.5rem!important}.column-gap-md-5{column-gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.object-fit-lg-contain{object-fit:contain!important}.object-fit-lg-cover{object-fit:cover!important}.object-fit-lg-fill{object-fit:fill!important}.object-fit-lg-scale{object-fit:scale-down!important}.object-fit-lg-none{object-fit:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}.column-gap-lg-0{column-gap:0!important}.column-gap-lg-1{column-gap:.25rem!important}.column-gap-lg-2{column-gap:.5rem!important}.column-gap-lg-3{column-gap:1rem!important}.column-gap-lg-4{column-gap:1.5rem!important}.column-gap-lg-5{column-gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.object-fit-xl-contain{object-fit:contain!important}.object-fit-xl-cover{object-fit:cover!important}.object-fit-xl-fill{object-fit:fill!important}.object-fit-xl-scale{object-fit:scale-down!important}.object-fit-xl-none{object-fit:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}.column-gap-xl-0{column-gap:0!important}.column-gap-xl-1{column-gap:.25rem!important}.column-gap-xl-2{column-gap:.5rem!important}.column-gap-xl-3{column-gap:1rem!important}.column-gap-xl-4{column-gap:1.5rem!important}.column-gap-xl-5{column-gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.object-fit-xxl-contain{object-fit:contain!important}.object-fit-xxl-cover{object-fit:cover!important}.object-fit-xxl-fill{object-fit:fill!important}.object-fit-xxl-scale{object-fit:scale-down!important}.object-fit-xxl-none{object-fit:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}.column-gap-xxl-0{column-gap:0!important}.column-gap-xxl-1{column-gap:.25rem!important}.column-gap-xxl-2{column-gap:.5rem!important}.column-gap-xxl-3{column-gap:1rem!important}.column-gap-xxl-4{column-gap:1.5rem!important}.column-gap-xxl-5{column-gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}

/* Global styles for FounderLink application - Hopeful & Inspiring Design for Founders */

/* Import Bootstrap icons */

:root {
  /* Inspiring Founder-Focused Color Palette */
  /* Primary colors - Energetic and confident */
  --primary-color: #2563eb;           /* Bright confident blue */
  --primary-hover: #1d4ed8;           /* Deeper blue for hover */
  --primary-light: #dbeafe;           /* Light blue for backgrounds */
  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  
  /* Secondary colors - Growth and success */
  --secondary-color: #10b981;         /* Success green */
  --secondary-hover: #059669;         /* Deeper green */
  --secondary-light: #d1fae5;         /* Light green */
  
  /* Accent colors - Energy and innovation */
  --accent-color: #f59e0b;            /* Warm amber for energy */
  --accent-hover: #d97706;            /* Deeper amber */
  --accent-light: #fef3c7;            /* Light amber */
  
  /* Semantic colors - Optimistic and clear */
  --success-color: #10b981;           /* Bright green for achievements */
  --info-color: #0ea5e9;              /* Sky blue for information */
  --warning-color: #f59e0b;           /* Warm amber for attention */
  --danger-color: #ef4444;            /* Clear red for errors */
  
  /* Neutral colors - Clean and modern */
  --light-color: #f8fafc;             /* Very light gray */
  --gray-50: #f9fafb;                 /* Ultra light */
  --gray-100: #f3f4f6;                /* Very light */
  --gray-200: #e5e7eb;                /* Light */
  --gray-300: #d1d5db;                /* Medium light */
  --gray-400: #9ca3af;                /* Medium */
  --gray-500: #6b7280;                /* Medium dark */
  --gray-600: #4b5563;                /* Dark */
  --gray-700: #374151;                /* Very dark */
  --gray-800: #1f2937;                /* Ultra dark */
  --gray-900: #111827;                /* Almost black */
  
  /* Background colors - Fresh and inviting */
  --body-bg: #fefefe;                 /* Pure white with hint of warmth */
  --body-bg-secondary: #f8fafc;       /* Light alternative background */
  --card-bg: #ffffff;                 /* Pure white cards */
  --card-bg-hover: #f9fafb;           /* Subtle hover effect */
  
  /* Text colors - Clear and readable */
  --text-primary: #111827;            /* Dark for main text */
  --text-secondary: #4b5563;          /* Medium for secondary text */
  --text-muted: #6b7280;              /* Light for muted text */
  --text-light: #9ca3af;              /* Very light for subtle text */
  --text-on-primary: #ffffff;         /* White text on primary colors */
  
  /* Border colors - Subtle and clean */
  --border-color: #e5e7eb;            /* Standard border */
  --border-light: #f3f4f6;            /* Light border */
  --border-strong: #d1d5db;           /* Stronger border */
  
  /* Shadow colors - Depth and elevation */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Interactive colors - Engaging and responsive */
  --hover-bg: rgba(37, 99, 235, 0.1); /* Light blue hover background */
  --focus-ring: rgba(37, 99, 235, 0.5); /* Blue focus ring */
  --selection-bg: rgba(139, 92, 246, 0.2); /* Purple selection background */
  
  /* Status colors - Clear and encouraging */
  --status-online: #10b981;           /* Green for online active */
  --status-offline: #6b7280;          /* Gray for offline */
  --status-pending: #f59e0b;          /* Amber for pending */
  --status-error: #ef4444;            /* Red for errors */
  
  /* Gradient backgrounds - Modern and inspiring */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-cool: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* Typography variables */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  
  /* Spacing variables */
  --spacing-xs: 0.25rem;               /* 4px */
  --spacing-sm: 0.5rem;                /* 8px */
  --spacing-md: 1rem;                  /* 16px */
  --spacing-lg: 1.5rem;                /* 24px */
  --spacing-xl: 2rem;                  /* 32px */
  --spacing-2xl: 3rem;                 /* 48px */
  
  /* Transition variables */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

html {
  overflow-y: scroll; /* Always show vertical scrollbar to prevent layout shifts */
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fefefe;
  background: var(--body-bg);
  color: #111827;
  color: var(--text-primary);
  padding-right: 0 !important; /* Prevent content shift when modal opens */
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1.6;
  font-weight: 400;
}

/* Import Google Fonts for better typography */

code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
  background-color: #f3f4f6;
  background-color: var(--gray-100);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* Enhanced utility classes with new color system */
.text-primary { color: #2563eb !important; color: var(--primary-color) !important; }
.text-secondary { color: #10b981 !important; color: var(--secondary-color) !important; }
.text-success { color: #10b981 !important; color: var(--success-color) !important; }
.text-info { color: #0ea5e9 !important; color: var(--info-color) !important; }
.text-warning { color: #f59e0b !important; color: var(--warning-color) !important; }
.text-danger { color: #ef4444 !important; color: var(--danger-color) !important; }
.text-muted { color: #6b7280 !important; color: var(--text-muted) !important; }
.text-light { color: #9ca3af !important; color: var(--text-light) !important; }

.bg-primary { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important; background: var(--primary-gradient) !important; }
.bg-secondary { background-color: #10b981 !important; background-color: var(--secondary-color) !important; }
.bg-success { background-color: #10b981 !important; background-color: var(--success-color) !important; }
.bg-info { background-color: #0ea5e9 !important; background-color: var(--info-color) !important; }
.bg-warning { background-color: #f59e0b !important; background-color: var(--warning-color) !important; }
.bg-danger { background-color: #ef4444 !important; background-color: var(--danger-color) !important; }
.bg-light { background-color: #f9fafb !important; background-color: var(--gray-50) !important; }
.bg-white { background-color: #ffffff !important; background-color: var(--card-bg) !important; }

/* Modern gradient backgrounds */
.bg-gradient-primary { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important; background: var(--gradient-primary) !important; }
.bg-gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; background: var(--gradient-success) !important; }
.bg-gradient-warm { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%) !important; background: var(--gradient-warm) !important; }
.bg-gradient-cool { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important; background: var(--gradient-cool) !important; }
.bg-gradient-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; background: var(--gradient-hero) !important; }
.text-secondary { color: #10b981 !important; color: var(--secondary-color) !important; }
.text-success { color: #10b981 !important; color: var(--success-color) !important; }
.text-info { color: #0ea5e9 !important; color: var(--info-color) !important; }
.text-warning { color: #f59e0b !important; color: var(--warning-color) !important; }
.text-danger { color: #ef4444 !important; color: var(--danger-color) !important; }
.text-light { color: #f8fafc !important; color: var(--light-color) !important; }
.text-dark { color: var(--dark-color) !important; }

.bg-primary { background-color: #2563eb !important; background-color: var(--primary-color) !important; }
.bg-secondary { background-color: #10b981 !important; background-color: var(--secondary-color) !important; }
.bg-success { background-color: #10b981 !important; background-color: var(--success-color) !important; }
.bg-info { background-color: #0ea5e9 !important; background-color: var(--info-color) !important; }
.bg-warning { background-color: #f59e0b !important; background-color: var(--warning-color) !important; }
.bg-danger { background-color: #ef4444 !important; background-color: var(--danger-color) !important; }
.bg-light { background-color: #f8fafc !important; background-color: var(--light-color) !important; }
.bg-dark { background-color: var(--dark-color) !important; }

/* Modern Button Styles - Inspiring and Engaging */
.btn {
  font-family: inherit;
  font-weight: 500;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  border: 2px solid transparent;
  transition: 0.3s ease;
  transition: var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--gradient-primary);
  color: #ffffff;
  color: var(--text-on-primary);
  border: 2px solid transparent;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  color: #ffffff;
  color: var(--text-on-primary);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid #2563eb;
  border: 2px solid var(--primary-color);
  color: #2563eb;
  color: var(--primary-color);
}

.btn-secondary:hover {
  background-color: #2563eb;
  background-color: var(--primary-color);
  color: #ffffff;
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background: var(--gradient-success);
  color: #ffffff;
  color: var(--text-on-primary);
  border: 2px solid transparent;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  color: #ffffff;
  color: var(--text-on-primary);
}

.btn-outline-primary {
  background-color: transparent;
  border: 2px solid #2563eb;
  border: 2px solid var(--primary-color);
  color: #2563eb;
  color: var(--primary-color);
}

.btn-outline-primary:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--gradient-primary);
  color: #ffffff;
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  border-radius: 1rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  border-radius: 0.5rem;
}

/* Badge Styles - Modern and Clean */
.badge {
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.badge-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--gradient-primary);
  color: #ffffff;
  color: var(--text-on-primary);
}

.badge-success {
  background-color: #10b981;
  background-color: var(--success-color);
  color: #ffffff;
  color: var(--text-on-primary);
}

.badge-warning {
  background-color: #f59e0b;
  background-color: var(--warning-color);
  color: #ffffff;
  color: var(--text-on-primary);
}

.badge-info {
  background-color: #0ea5e9;
  background-color: var(--info-color);
  color: #ffffff;
  color: var(--text-on-primary);
}

/* Enhanced Link Styles */
a {
  color: #2563eb;
  color: var(--primary-color);
  text-decoration: none;
  transition: 0.15s ease;
  transition: var(--transition-fast);
}

a:hover {
  color: #1d4ed8;
  color: var(--primary-hover);
  text-decoration: underline;
  -webkit-text-decoration-color: #2563eb;
          text-decoration-color: #2563eb;
  -webkit-text-decoration-color: var(--primary-color);
          text-decoration-color: var(--primary-color);
  text-underline-offset: 0.2em;
}

a:focus {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Enhanced Form Controls - Modern and Accessible */
.form-control {
  background-color: #ffffff;
  background-color: var(--card-bg);
  border: 2px solid #e5e7eb;
  border: 2px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-size: var(--font-size-base);
  transition: 0.3s ease;
  transition: var(--transition-normal);
  color: #111827;
  color: var(--text-primary);
}

.form-control:focus {
  outline: none;
  border-color: #2563eb !important;
  border-color: var(--primary-color) !important;
  box-shadow: none !important;
  background-color: #ffffff;
  background-color: var(--card-bg);
  border-radius: 6px !important;
}

.form-control::placeholder {
  color: #9ca3af;
  color: var(--text-light);
}

.form-label {
  font-weight: 500;
  color: #111827;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
}

.form-select {
  background-image: url('/icons/chevron-down.svg');
}

/* Modern Card Styles - Clean and Elevated */
.card {
  border-radius: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  background-color: var(--card-bg);
  transition: 0.3s ease;
  transition: var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--card-bg) 100%);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem;
  font-weight: 600;
  color: #111827;
  color: var(--text-primary);
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  background-color: #f9fafb;
  background-color: var(--gray-50);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

.card-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-hero);
  color: #ffffff;
  color: var(--text-on-primary);
  border: none;
}

.card-hero .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  color: var(--text-on-primary);
}

/* Enhanced Typography - Clear and Engaging */
h1, h2, h3, h4, h5, h6 {
  color: #111827;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

h1 {
  font-size: 2.25rem;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
}

h2 {
  font-size: 1.875rem;
  font-size: var(--font-size-3xl);
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
}

h5 {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
}

h6 {
  font-size: 1rem;
  font-size: var(--font-size-base);
  font-weight: 500;
}

p {
  color: #4b5563;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-size: var(--font-size-base);
}

.lead {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: #4b5563;
  color: var(--text-secondary);
  line-height: 1.6;
}

.text-hero {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Modern Table Styles - Clean and Professional */
.table {
  background-color: #ffffff;
  background-color: var(--card-bg);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color);
}

.table th {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--card-bg) 100%);
  color: #111827;
  color: var(--text-primary);
  font-weight: 600;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table td {
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  border-bottom: 1px solid var(--border-light);
  color: #4b5563;
  color: var(--text-secondary);
  vertical-align: middle;
}

.table tbody tr {
  transition: 0.15s ease;
  transition: var(--transition-fast);
}

.table tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.1);
  background-color: var(--hover-bg);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Alert Styles - Clear and Informative */
.alert {
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  margin-bottom: 1rem;
}

.alert-success {
  background-color: #d1fae5;
  background-color: var(--secondary-light);
  border-color: #10b981;
  border-color: var(--secondary-color);
  color: #059669;
  color: var(--secondary-hover);
}

.alert-info {
  background-color: rgba(14, 165, 233, 0.1);
  border-color: #0ea5e9;
  border-color: var(--info-color);
  color: #0369a1;
}

.alert-warning {
  background-color: #fef3c7;
  background-color: var(--accent-light);
  border-color: #f59e0b;
  border-color: var(--accent-color);
  color: #d97706;
  color: var(--accent-hover);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  border-color: var(--danger-color);
  color: #dc2626;
}

/* Loading and Animation Styles */
.spinner-border {
  width: 2rem;
  height: 2rem;
  border: 0.25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility Classes for New Design System */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-sm); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: var(--shadow); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-xl); }

.rounded-sm { border-radius: 0.25rem; }
.rounded { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.75rem; }
.rounded-lg { border-radius: 1rem; }
.rounded-xl { border-radius: 1.5rem; }

.border-light { border-color: #f3f4f6 !important; border-color: var(--border-light) !important; }
.border-primary { border-color: #2563eb !important; border-color: var(--primary-color) !important; }
.border-success { border-color: #10b981 !important; border-color: var(--success-color) !important; }

/* Responsive font sizes */
@media (max-width: 767px) {
  h1 {
    font-size: 1.875rem;
    font-size: var(--font-size-3xl);
  }
  
  h2 {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
  }
  
  h3 {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
  }
  
  .btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-size: var(--font-size-base);
  }
}

/* Dark mode support (future enhancement) */
/* @media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #0f172a;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --border-light: #475569;
  }
} */

/* Responsive Grid System for Wide Screen Optimization */

/* Base grid container */
.responsive-grid-container {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  margin: 0;
}

/* Main content grid */
.responsive-grid {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  width: 100%;
  
  /* Mobile first - single column */
  grid-template-columns: 1fr;
}

/* Tablet - 2 columns */
@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .responsive-grid-container {
    padding: 1.5rem;
  }
}

/* Desktop - 3 columns */
@media (min-width: 1200px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  
  .responsive-grid-container {
    padding: 2rem;
  }
}

/* Ultra-wide - 4 columns */
@media (min-width: 1600px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
  
  .responsive-grid-container {
    padding: 2.5rem;
  }
}

/* Card grid items */
.grid-item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: -webkit-fit-content;
  height: fit-content;
  min-height: 280px;
}

.grid-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Force white background even in dark mode */
:root[data-theme="dark"] .grid-item {
  background: #ffffff;
  color: #1a1a1a;
}

/* Featured priority items that span multiple columns */
.grid-item-featured {
  grid-column: span 2;
  min-height: 320px;
}

@media (min-width: 1200px) {
  .grid-item-featured {
    grid-column: span 2;
  }
}

/* Full width items for headers important content */
.grid-item-full-width {
  grid-column: 1 / -1;
}

/* Compact grid for smaller cards */
.responsive-grid-compact {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 768px) {
  .responsive-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .responsive-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
  }
}

/* List grid for team members, tasks, etc. */
.responsive-list-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .responsive-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .responsive-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .responsive-list-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
  }
}

/* Content sections for better organization */
.content-section {
  margin-bottom: 2rem;
}

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

.content-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  color: var(--text-primary, #1f2937);
  margin: 0;
}

.content-section-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Sidebar content for wide screens */
.wide-screen-sidebar {
  display: none;
}

@media (min-width: 1400px) {
  .main-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 2rem;
    gap: 2rem;
  }
  
  .wide-screen-sidebar {
    display: block;
    background: #ffffff;
    background: var(--card-background, #ffffff);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.5rem;
    height: -webkit-fit-content;
    height: fit-content;
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
  }
}

/* Loading states */
.grid-item-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 8px;
  height: 20px;
  margin: 0.5rem 0;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading animation for spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty state styling */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
  color: var(--text-secondary, #6b7280);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Responsive utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

/* Additional responsive utilities and enhancements */

/* Auto-responsive grid that adapts based on content */
.auto-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .auto-responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 1200px) {
  .auto-responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
  }
}

/* Responsive text sizing */
.responsive-text-sm {
  font-size: 0.875rem;
}

.responsive-text-base {
  font-size: 1rem;
}

.responsive-text-lg {
  font-size: 1.125rem;
}

@media (min-width: 768px) {
  .responsive-text-sm { font-size: 0.9375rem; }
  .responsive-text-base { font-size: 1.125rem; }
  .responsive-text-lg { font-size: 1.25rem; }
}

@media (min-width: 1200px) {
  .responsive-text-sm { font-size: 1rem; }
  .responsive-text-base { font-size: 1.25rem; }
  .responsive-text-lg { font-size: 1.375rem; }
}

/* Responsive spacing utilities */
.responsive-padding {
  padding: 1rem;
}

.responsive-margin {
  margin: 1rem;
}

@media (min-width: 768px) {
  .responsive-padding { padding: 1.5rem; }
  .responsive-margin { margin: 1.5rem; }
}

@media (min-width: 1200px) {
  .responsive-padding { padding: 2rem; }
  .responsive-margin { margin: 2rem; }
}

/* Grid density variations */
.grid-dense {
  grid-auto-flow: row dense;
}

.grid-masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

/* Enhanced card variations */
.grid-item-compact {
  min-height: 200px;
  padding: 1rem;
}

.grid-item-expanded {
  min-height: 400px;
  padding: 2rem;
}

/* Responsive image containers */
.responsive-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.responsive-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.responsive-image-container:hover img {
  transform: scale(1.05);
}

@media (min-width: 1200px) {
  .responsive-image-container {
    height: 250px;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .grid-item,
  .responsive-image-container img,
  .grid-item-skeleton {
    animation: none;
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .grid-item {
    border: 2px solid currentColor;
  }
  
  .grid-item:hover {
    box-shadow: 0 0 0 3px currentColor;
  }
}

/* Dark mode responsive adjustments */
@media (prefers-color-scheme: dark) {
  .grid-item {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
  }
  
  .wide-screen-sidebar {
    background: #1f2937;
    border-color: #374151;
  }
  
  .content-section-header {
    border-color: #374151;
  }
}

/* Print styles for better documentation */
@media print {
  .responsive-grid-container {
    display: block;
  }
  
  .responsive-grid,
  .responsive-grid-compact,
  .stats-grid {
    display: block;
  }
  
  .grid-item {
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }
  
  .wide-screen-sidebar {
    display: none;
  }
}
/* Import responsive grid styles */

/* Import the new inspiring founder theme */

/* App Layout with Sidebar */
.app-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: calc(100vh - 70px);
  width: auto;
  max-width: 100%;
  position: relative;
}

.app-container.sidebar-collapsed {
  margin-left: 56px;
}

.app-container.sidebar-expanded {
  margin-left: 256px;
}

/* Main content area optimization for wide screens */
.main-content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Page containers now use full width */
.page-container {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  margin: 0;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .app-container.sidebar-collapsed {
    margin-left: 56px;
  }

  .app-container.sidebar-expanded {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .app-container {
    margin-top: 52px;
    min-height: calc(100dvh - 52px);
  }

  .app-container.sidebar-collapsed,
  .app-container.sidebar-expanded {
    margin-left: 0;
  }

  .page-container {
    padding: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .page-container {
    padding: 0rem 0rem;
  }
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
/* LinkedIn-inspired Professional Base Layout */
.base-page-layout {
  min-height: calc(100vh - 70px);
  padding-top: 0;
}

/* Sticky Top Navbar */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #d0d0d0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Alternative selector for TopNavbar component */
.top-navbar-container,
.navbar-container,
.top-navigation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #d0d0d0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

/* Adjust page content to account for fixed navbar */
.base-page-layout.has-sticky-navbar {
  padding-top: 70px; /* Adjust this value based on your navbar height */
}

/* Ensure main content doesn't go behind navbar */
.main-content,
.page-content,
.content-wrapper {
  margin-top: 70px; /* Adjust this value based on your navbar height */
}

/* Background Variants */
.bg-white {
  background: #ffffff;
}

.bg-gray {
  background: white
}

.bg-gradient {
  background: linear-gradient(135deg, #f3f2ef 0%, #e6e4e0 100%);
}

/* Container Sizes */
.page-container {
  margin: 0 auto;
  width: 100%;
}

.max-w-sm {
  max-width: 640px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1280px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

/* Padding Variants */
.p-none {
  padding: 0;
}

.p-sm {
  padding: 0.5rem;
}

.p-md {
  padding: 0.75rem;
}

.p-lg {
  padding: 1rem;
}

/* Professional Card Component */
.professional-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.15s ease-in-out;
  margin-bottom: 1rem;
}

.professional-card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.professional-card .card-header {
  padding: 1.5rem 1.5rem 0 1.5rem;
  border-bottom: none;
  background: transparent;
}

.professional-card .card-body {
  padding: 1.5rem;
}

.professional-card .card-footer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid #e9e5df;
  background: transparent;
}

/* Professional Header */
.professional-header {
  background: #ffffff;
  border-bottom: 1px solid #d0d0d0;
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
}

.professional-header .header-content {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.professional-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000000;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

.professional-header .subtitle {
  color: #666666;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

/* Professional Button Styles */
.btn-professional {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}

.btn-professional-primary {
  background: #0a66c2;
  color: #ffffff;
  border-color: #0a66c2;
}

.btn-professional-primary:hover {
  background: #004182;
  border-color: #004182;
  color: #ffffff;
  text-decoration: none;
}

.btn-professional-secondary {
  background: transparent;
  color: #0a66c2;
  border-color: #0a66c2;
}

.btn-professional-secondary:hover {
  background: rgba(10, 102, 194, 0.1);
  color: #004182;
  border-color: #004182;
  text-decoration: none;
}

.btn-professional-ghost {
  background: transparent;
  color: #666666;
  border-color: #666666;
}

.btn-professional-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000000;
  border-color: #000000;
  text-decoration: none;
}

/* Professional Typography */
.professional-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000000;
  margin: 0 0 1rem 0;
  line-height: 1.33;
}

.professional-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: #000000;
  margin: 0 0 0.75rem 0;
  line-height: 1.33;
}

.professional-text {
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.43;
  margin: 0;
}

.professional-text-small {
  font-size: 0.75rem;
  color: #666666;
  line-height: 1.33;
  margin: 0;
}

/* Professional Navigation Tabs */
.professional-tabs {
  border-bottom: 1px solid #d0d0d0;
  margin-bottom: 1.5rem;
}

.professional-tabs .tab-list {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.professional-tabs .tab-item {
  margin: 0;
}

.professional-tabs .tab-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  color: #666666;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease-in-out;
}

.professional-tabs .tab-link:hover {
  color: #000000;
  text-decoration: none;
}

.professional-tabs .tab-link.active {
  color: #0a66c2;
  border-bottom-color: #0a66c2;
}

/* Professional Form Controls */
.professional-form-group {
  margin-bottom: 1.5rem;
}

.professional-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #000000;
  margin-bottom: 0.5rem;
}

.professional-form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #666666;
  border-radius: 4px;
  font-size: 1rem;
  background: #ffffff;
  transition: border-color 0.15s ease-in-out;
}

.professional-form-control:focus {
  outline: none;
  border-color: #0a66c2;
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.2);
}

.professional-form-control::placeholder {
  color: #999999;
}

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

.professional-stat-card {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.professional-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #000000;
  margin: 0 0 0.5rem 0;
}

.professional-stat-label {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
  font-weight: 500;
}

/* Professional Empty State */
.professional-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
}

.professional-empty-state .icon {
  font-size: 2rem;
  color: #999999;
  margin-bottom: 1rem;
}

.professional-empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
  margin: 0 0 0.5rem 0;
}

.professional-empty-state p {
  font-size: 0.875rem;
  color: #666666;
  margin: 0 0 1.5rem 0;
  line-height: 1.43;
}

/* Remove page container margin on small screens when sidebar is expanded */
@media (max-width: 1920px) {
  .app-container.sidebar-expanded .page-container {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .app-container.sidebar-expanded .page-container{
    margin: 0;
  }
}

/* Additional spacing optimization for very small screens */
@media (max-width: 480px) {
  .app-container.sidebar-expanded .page-container {
    margin: 0;
    width: 100%;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .p-md {
    padding: 1rem;
  }
  
  .p-lg {
    padding: 1.5rem;
  }
  
  .professional-card .card-header,
  .professional-card .card-body,
  .professional-card .card-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .professional-header .header-content {
    padding: 0 1rem;
  }
  
  .professional-header h1 {
    font-size: 1.75rem;
  }
  
  .professional-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .professional-tabs .tab-link {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .professional-stats {
    grid-template-columns: 1fr;
  }
  
  .professional-tabs .tab-list {
    flex-direction: column;
  }
}

/* Journey Home Section - Light & Integrated Theme */
.journey-home-section {
  border-radius: 16px;
  padding: 32px;
  margin-top: 48px;
  margin-bottom: 32px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0; /* Soft border */
}

.journey-home-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(148, 163, 184, 0.2);
}

/* --- Active Journey Theme --- */
/* A clean, professional, and motivating theme */
.journey-home-section.active-journey {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.15);
}

.section-content.horizontal {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  grid-gap: 32px;
  gap: 32px;
  align-items: center;
  color: #475569; /* Dark gray for primary text */
}

/* Left Section - Journey Info */
.journey-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.journey-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.journey-header i {
  font-size: 28px;
  color: #4f46e5; /* Indigo accent */
}

.journey-header h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #1e293b; /* Darker heading color */
  text-shadow: none;
}

.journey-market {
  font-size: 14px;
  color: #64748b;
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

.journey-progress-compact {
  background: #f8fafc; /* Very light gray background */
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.progress-percentage {
  font-size: 28px;
  font-weight: 900;
  color: #1e293b; /* High-contrast dark color */
  text-shadow: none;
}

.progress-bar-compact {
  height: 12px;
  background: #e2e8f0; /* Light gray bar background */
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-fill-compact {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%); /* Indigo to purple gradient */
  border-radius: 8px;
  transition: width 0.5s ease;
}

.progress-stats {
  font-size: 14px;
  color: #334155;
  font-weight: 700;
}

/* Middle Section - Current Step */
.current-step-section {
  background: #f8fafc;
  padding: 22px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  height: 100%;
}

.step-badge-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.step-badge {
  background: #e0e7ff; /* Light indigo */
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #4338ca; /* Dark indigo */
  border: 1px solid #c7d2fe;
}

.step-number {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
  background: #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
}

.step-title-compact {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 14px 0;
  line-height: 1.4;
  color: #1e293b; /* High-contrast dark color */
  text-shadow: none;
}

.next-action-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #475569;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  font-weight: 600;
}

.next-action-compact i {
  font-size: 16px;
  color: #4f46e5;
}

/* Right Section - Actions */
.journey-actions-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.journey-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.journey-btn.primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.journey-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
}

.journey-btn.secondary {
  background: #f1f5f9; /* Light gray, clearly secondary */
  color: #475569; /* Dark text for readability */
  border-color: #e2e8f0;
}

.journey-btn.secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.15);
}

.journey-btn i {
  font-size: 18px;
}


/* --- No Journey Theme --- */
/* A welcoming and encouraging theme */
.journey-home-section.no-journey {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Light, airy blue */
  border: 1px solid #bae6fd;
  box-shadow: 0 8px 24px rgba(186, 230, 253, 0.3);
}

.journey-home-section.no-journey .section-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.journey-home-section.no-journey .section-icon {
  width: 64px;
  height: 64px;
  background: #0ea5e9; /* Bright sky blue */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.journey-home-section.no-journey .section-icon i {
  font-size: 32px;
  color: white;
}

.journey-home-section.no-journey .section-info {
  flex: 1 1;
  color: #0c4a6e; /* Dark, readable navy */
}

.journey-home-section.no-journey .section-info h3 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px 0;
  color: #0c4a6e;
  text-shadow: none;
}

.journey-home-section.no-journey .section-info p {
  font-size: 15px;
  margin: 0;
  color: #075985;
  line-height: 1.5;
  text-shadow: none;
}

.journey-home-section.no-journey .section-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  color: #3b82f6;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  border: 2px solid #3b82f6;
}

.journey-home-section.no-journey .section-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
  background: #f8fafc;
  border-color: #1d4ed8;
}

.journey-home-section.no-journey .section-cta i {
  font-size: 20px;
}


/* --- Loading State --- */
.journey-home-section.loading {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.15);
}

.journey-home-section.loading .section-content.horizontal {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  grid-gap: 32px;
  gap: 32px;
  align-items: center;
}

/* Skeleton elements */
.skeleton-header,
.skeleton-progress,
.skeleton-step,
.skeleton-button {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

.skeleton-header {
  height: 80px;
  width: 100%;
  margin-bottom: 16px;
}

.skeleton-progress {
  height: 100px;
  width: 100%;
}

.skeleton-step {
  height: 140px;
  width: 100%;
}

.skeleton-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.skeleton-button {
  height: 48px;
  width: 100%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Responsive skeleton */
@media (max-width: 992px) {
  .journey-home-section.loading .section-content.horizontal {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .skeleton-actions {
    flex-direction: row;
    width: 100%;
  }
}


/* --- Responsive Design --- */
@media (max-width: 1200px) {
  .section-content.horizontal {
    grid-template-columns: 1fr 1fr auto;
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .section-content.horizontal {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .journey-actions-section {
    flex-direction: row;
    width: 100%;
  }

  .journey-btn {
    flex: 1 1;
  }
}

@media (max-width: 768px) {
  .journey-home-section {
    padding: 24px;
  }

  .journey-home-section.no-journey .section-content {
    flex-direction: column;
    text-align: center;
  }

  .journey-home-section.no-journey .section-info h3 {
    font-size: 20px;
  }

  .journey-home-section.no-journey .section-info p {
    font-size: 14px;
  }

  .journey-home-section.no-journey .section-cta {
    width: 100%;
    justify-content: center;
  }

  .journey-actions-section {
    flex-direction: column;
  }

  .journey-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .journey-home-section {
    padding: 20px;
  }

  .section-content.horizontal {
    gap: 20px;
  }

  .journey-header h3 {
    font-size: 18px;
  }

  .step-title-compact {
    font-size: 16px;
  }
}

/* Engaging HomePage Layout - User Attraction Focused */

/* CSS Variables for Vibrant Color Palette */
:root {
  --color-primary: #3b82f6;
  /* Confident Blue */
  --color-success: #10b981;
  /* Growth Green */
  --color-warning: #f59e0b;
  /* Sunny Amber */
  --color-purple: #8b5cf6;
  /* Creative Purple */
  --color-pink: #ec4899;
  /* Energetic Pink */
  --color-orange: #f97316;
  /* Vibrant Orange */

  /* Engaging Gradients */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

  /* Neutral Colors - Modern & Clean */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;

  /* Background Colors - Bright & Welcoming */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-accent: #fef7ff;
  --bg-light-blue: #eff6ff;
  --bg-light-green: #ecfdf5;
  --bg-light-amber: #fffbeb;

  /* Text Colors - Enhanced Contrast */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;

  /* Shadows - Dynamic & Modern */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* Main Container */
.homepage-container-engaging {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow-x: hidden;
}

/* Hero Section (Updated) */
.hero-section-engaging {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6366f1 100%);
  padding: 3rem 2rem 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section-engaging::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 20px 20px;
  opacity: 0.1;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

.hero-content {
  max-width: 1400px;
  /* margin: 0 auto; */
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: pulseGlow 2s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.6),
    0 0 40px rgba(251, 191, 36, 0.4),
    0 0 60px rgba(251, 191, 36, 0.2);
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 20px rgba(251, 191, 36, 0.6),
      0 0 40px rgba(251, 191, 36, 0.4),
      0 0 60px rgba(251, 191, 36, 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 30px rgba(251, 191, 36, 0.8),
      0 0 60px rgba(251, 191, 36, 0.6),
      0 0 90px rgba(251, 191, 36, 0.4);
  }
}

.hero-title-engaging {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-title-highlight {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.hero-subtitle-engaging {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.95);
  margin: 0 auto 2rem auto;
  max-width: 700px;
  line-height: 1.6;
  font-weight: 500;
}

.hero-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.cta-primary,
.cta-secondary {
  padding: 1rem 2rem;
  border-radius: 20px;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  min-width: 240px;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-lg);
}

.cta-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: 2px solid transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cta-primary:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #3b82f6;
  color: var(--color-primary);
  border: 2px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cta-secondary:hover {
  background: white;
  color: #3b82f6;
  color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

/* Live Stats (Updated for new design) */
.stats-live,
.platform-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.stat-live-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 8px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hero Stats - Specific styling for hero section stat cards */
.hero-stat-number {
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff !important;
  text-shadow:
    0 4px 8px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  line-height: 0.9;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: 0.875rem;
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.3;
  max-width: 160px;
  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.9),
    0 2px 4px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.8);
  opacity: 1;
}

/* Hero Platform Stats - Override styles specifically for hero section */
.platform-stats .stat-number {
  font-size: larger !important;
  font-weight: 900 !important;
  color: #7af50b !important;
  text-shadow:
    0 6px 12px rgba(0, 0, 0, 0.9),
    0 4px 8px rgba(0, 0, 0, 1),
    0 2px 4px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
  line-height: 0.9;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.platform-stats .stat-label {
  font-size: 0.875rem;
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.3;
  max-width: 160px;
  opacity: 1;
}

/* Platform Stats - Keep original styling for platform activity section */
.stat-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 0.9;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.3;
  max-width: 160px;
  opacity: 1;
}

/* Features Section */
.features-section {
  padding: 6rem 2rem;
  background: white;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.features-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.features-subtitle {
  font-size: 1.25rem;
  color: #4b5563;
  color: var(--text-secondary);
  margin: 0 0 4rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 3rem;
}

.feature-card {
  background: white;
  border-radius: 16px;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transition: all 0.3s ease;
}

.feature-card.tasks::before {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
}

.feature-card.teams::before {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background: var(--gradient-success);
}

.feature-card.questionnaires::before {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  background: var(--gradient-purple);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
  border-color: rgba(102, 126, 234, 0.2);
}

.feature-card:hover::before {
  height: 8px;
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.feature-card p {
  color: #4b5563;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 2rem 0;
}

.feature-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.benefit {
  color: #10b981;
  color: var(--color-success);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
}

.feature-cta {
  color: #3b82f6;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  padding: 1rem;
  background: #eff6ff;
  background: var(--bg-light-blue);
  border-radius: 8px;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.feature-card:hover .feature-cta {
  background: #3b82f6;
  background: var(--color-primary);
  color: white;
}

/* Benefits Section */
.benefits-section {
  padding: 6rem 2rem;
  background: #f8fafc;
  background: var(--bg-secondary);
}

.benefits-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.benefits-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 4rem 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.benefit-item {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-lg);
}

.benefit-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.benefit-item h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.benefit-item p {
  color: #4b5563;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Final CTA Section */
.final-cta-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  text-align: center;
  color: white;
}

.final-cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.final-cta-container h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.final-cta-container p {
  font-size: 1.25rem;
  margin: 0 0 3rem 0;
  opacity: 0.9;
  line-height: 1.6;
  color: white
}

.final-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.cta-large-primary,
.cta-large-secondary {
  padding: 1.25rem 2.5rem;
  border-radius: 20px;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  min-width: 260px;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-lg);
}

.cta-large-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  border: 2px solid transparent;
}

.cta-large-primary:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

.cta-large-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #3b82f6;
  color: var(--color-primary);
  border: 2px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cta-large-secondary:hover {
  background: white;
  color: #3b82f6;
  color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

/* ================================ */
/*    NEW HOMEPAGE SECTIONS        */
/* ================================ */

/* Value Points */
.value-points {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.value-point {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  color: white;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.value-point i {
  color: #fbbf24;
  font-size: 1.1rem;
}

/* Platform Stats (updated) */
.platform-stats {
  display: flex;
  justify-content: center;
  /* gap: 2rem; */
  flex-wrap: wrap;
  /* margin-top: 3rem; */
}

/* Quick Navigation Section */
.quick-nav-section {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.quick-nav-container {
  max-width: 1400px;
  /* margin: 0 auto; */
  text-align: center;
}

.quick-nav-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.quick-nav-subtitle {
  font-size: 1.1rem;
  color: #4b5563;
  color: var(--text-secondary);
  margin: 0 0 3rem 0;
}

.navigation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 2rem;
}

.nav-category {
  background: white;
  border-radius: 16px;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 2px solid transparent;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

/* Make the first category (Build & Launch) span full width */
.nav-category.build {
  grid-column: 1 / -1;
}

.nav-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-xl);
}

.nav-category.need-help {
  border-top: 4px solid #3b82f6;
}

.nav-category.contribute {
  border-top: 4px solid #10b981;
}

.nav-category.learn {
  border-top: 4px solid #8b5cf6;
}

.nav-category.build {
  border-top: 4px solid #f59e0b;
}

.nav-category.support {
  border-top: 4px solid #6b7280;
}

.category-header {
  text-align: center;
  margin-bottom: 0.5rem;
}

.category-header i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.nav-category.need-help .category-header i {
  color: #3b82f6;
}

.nav-category.contribute .category-header i {
  color: #10b981;
}

.nav-category.learn .category-header i {
  color: #8b5cf6;
}

.nav-category.build .category-header i {
  color: #f59e0b;
}

.nav-category.support .category-header i {
  color: #6b7280;
}

.category-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.category-header p {
  font-size: 0.9rem;
  color: #4b5563;
  color: var(--text-secondary);
  margin: 0;
}

.nav-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.nav-option:hover {
  background: #f1f5f9;
  transform: translateX(5px);
  text-decoration: none;
  color: inherit;
}

.nav-option.primary {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: white;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-option.primary:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.nav-option i {
  font-size: 1.5rem;
  width: 24px;
  text-align: center;
  color: #4b5563;
  color: var(--text-secondary);
}

/* Ensure icons are visible in primary nav options */
.nav-option.primary i {
  color: rgba(255, 255, 255, 0.95);
}

.nav-option div {
  flex: 1 1;
  text-align: left;
}

.option-title {
  font-weight: 600;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.25rem;
  color: #111827;
  color: var(--text-primary);
}

.option-desc {
  font-size: 0.85rem;
  opacity: 0.8;
  display: block;
  color: #4b5563;
  color: var(--text-secondary);
}

/* Enhanced contrast for primary nav options */
.nav-option.primary .option-title {
  color: white;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-option.primary .option-desc {
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Platform Summary Section */
.platform-summary {
  padding: 4rem 2rem;
  background: white;
}

.summary-container {
  max-width: 1400px;
  /* margin: 0 auto; */
  text-align: center;
}

.summary-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #111827;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.summary-subtitle {
  font-size: 1.1rem;
  color: #4b5563;
  color: var(--text-secondary);
  margin: 0 0 3rem 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: stretch;
}

.summary-card {
  background: white;
  border-radius: 16px;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
}

.summary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-lg);
}

.summary-card.tasks {
  border-top: 4px solid #3b82f6;
}

.summary-card.questionnaires {
  border-top: 4px solid #10b981;
}

.summary-card.teams {
  border-top: 4px solid #f59e0b;
}

.summary-card.prerelease {
  border-top: 4px solid #8b5cf6;
}

.summary-card.ai-generated {
  border-top: 4px solid #ec4899;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.summary-header i {
  font-size: 1.5rem;
}

.summary-card.tasks .summary-header i {
  color: #3b82f6;
}

.summary-card.questionnaires .summary-header i {
  color: #10b981;
}

.summary-card.teams .summary-header i {
  color: #f59e0b;
}

.summary-card.prerelease .summary-header i {
  color: #8b5cf6;
}

.summary-card.ai-generated .summary-header i {
  color: #ec4899;
}

.summary-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
  color: var(--text-primary);
}

.summary-stats {
  margin-bottom: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f1f5f9;
  min-height: 2.5rem;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 0.9rem;
  color: #4b5563;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
  max-width: 65%;
  line-height: 1.3;
}

.stat-value {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111827;
  color: var(--text-primary);
  text-align: right;
  flex-shrink: 0;
  min-width: 35%;
}

.stat-value.success {
  color: #10b981;
}

.stat-value.warning {
  color: #f59e0b;
}

.stat-value.danger {
  color: #ef4444;
}

.summary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 8px;
  border-radius: var(--radius);
  text-decoration: none;
  color: #111827;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
}

.summary-action:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-1px);
  text-decoration: none;
  color: #111827;
  color: var(--text-primary);
}

/* Responsive improvements for summary cards */
@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .summary-card {
    padding: 1.25rem;
    min-height: 260px;
  }

  .stat-row {
    padding: 0.5rem 0;
    min-height: 2.25rem;
  }

  .stat-label {
    font-size: 0.85rem;
    max-width: 60%;
  }

  .stat-value {
    font-size: 1rem;
    min-width: 40%;
  }

  .summary-action {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .summary-card {
    padding: 1rem;
    min-height: 240px;
  }

  .summary-header h3 {
    font-size: 1rem;
  }

  .summary-header i {
    font-size: 1.25rem;
  }
}

/* How It Works Section */
.how-it-works-section {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.how-it-works-container {
  max-width: 1400px;
  /* margin: 0 auto; */
  text-align: center;
}

.how-it-works-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 3rem 0;
  color: white;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 3rem;
}

.step-card {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.5rem;
}

.step-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: white;
}

.step-content p {
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
  opacity: 0.9;
  line-height: 1.6;
}

.step-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-content li {
  font-size: 0.9rem;
  padding: 0.25rem 0;
  opacity: 0.85;
}


.cta-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: white;
}

.cta-content p {
  font-size: 1rem;
  margin: 0 0 2rem 0;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.region-selector {
  text-align: center;
  margin-top: 1rem;
}

.region-selector label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
  color: white;
}

/* ================================ */
/*    USER MODE TOGGLE             */
/* ================================ */

/* User Mode Toggle */
.user-mode-toggle {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 2rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mode-toggle-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.mode-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4b5563;
  color: var(--text-secondary);
}

.toggle-buttons {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.25rem;
  gap: 0.25rem;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.toggle-btn:hover {
  color: #111827;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.toggle-btn.active {
  background: white;
  color: #3b82f6;
  color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-btn i {
  font-size: 0.9rem;
}

/* Toggle Sections Button */
.toggle-sections {
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  text-align: center;
}

.toggle-sections-container {
  max-width: 800px;
  margin: 0 auto;
}

.show-beginner-sections-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.show-beginner-sections-btn:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.show-beginner-sections-btn i {
  font-size: 1.1rem;
}

/* Section Header for Experienced Users */
.section-header-experienced {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.hide-sections-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hide-sections-btn:hover {
  background: white;
  color: #111827;
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.hide-sections-btn i {
  font-size: 0.9rem;
}

/* Responsive Design for Toggle */
@media (max-width: 768px) {
  .mode-toggle-container {
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .toggle-buttons {
    width: 100%;
    max-width: 300px;
  }

  .toggle-btn {
    flex: 1 1;
    justify-content: center;
  }

  .user-mode-toggle {
    padding: 1rem;
  }

  .show-beginner-sections-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }

  .section-header-experienced {
    justify-content: center;
  }

  /* Enhanced navigation responsive design */
  .navigation-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .nav-category {
    padding: 1.5rem;
  }

  .nav-options {
    gap: 0.5rem;
  }

  .nav-option {
    padding: 0.875rem;
  }

  .option-title {
    font-size: 0.9rem;
  }

  .option-desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .quick-nav-container {
    padding: 0 1rem;
  }

  .quick-nav-title {
    font-size: 1.75rem;
  }

  .quick-nav-subtitle {
    font-size: 1rem;
  }

  .nav-category {
    padding: 1.25rem;
  }

  .category-header h3 {
    font-size: 1.1rem;
  }

  .category-header p {
    font-size: 0.85rem;
  }

  .nav-option {
    padding: 0.75rem;
  }

  .nav-option i {
    font-size: 1.25rem;
  }
}

/* Smooth transitions for conditional sections */
.quick-nav-section,
.how-it-works-section {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step number inline with title */
.step-number-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-size: 1.2rem;
  font-weight: 800;
  margin-right: 0.75rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.step-category:nth-child(2) .step-number-inline {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.step-category:nth-child(3) .step-number-inline {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.step-option:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Step description styling */
.step-description {
  margin-bottom: 1.5rem;
}

.step-description p {
  font-size: 0.95rem;
  color: #4b5563;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0.5rem 0 0 0;
  text-align: left;
}

/* Journey Widget Container */
.journey-widget-container {
  margin-bottom: 24px;
}

.nav-category .journey-widget-container {
  margin-top: 20px;
}

/* Journey Section for Experienced Mode */
.journey-section-experienced {
  padding: 4rem 2rem 0 2rem;
  background: transparent;
  margin-top: 2rem;
}

.journey-section-experienced .quick-nav-container {
  max-width: 1400px;
  /* margin: 0 auto; */
}

/* Use Cases Section */
.use-cases-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Navigation Buttons for Use Case Carousel */
.use-case-nav-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
  position: relative;
  overflow: hidden;
}

.use-case-nav-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 0;
}

.use-case-nav-button:hover::before {
  width: 120%;
  height: 120%;
}

.use-case-nav-button:hover {
  color: white;
  border-color: #764ba2;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

.use-case-nav-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.use-case-nav-button i {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.use-case-nav-button:hover i {
  transform: scale(1.1);
}

.use-case-nav-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 6px 20px rgba(102, 126, 234, 0.35);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 3rem;
}

.use-case-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.use-case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.use-case-card:hover::before {
  transform: scaleX(1);
}

.use-case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.use-case-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.use-case-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.use-case-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  line-height: 1.3;
}

.use-case-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.use-case-scenario {
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.95rem;
}

.use-case-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #0f172a !important;
  opacity: 1 !important;
  line-height: 1.5;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.use-case-outcome {
  color: #059669;
  background: #ecfdf5;
  padding: 0.75rem;
  border-radius: 8px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 3px solid #059669;
}

.use-case-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.use-case-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: #ffffff !important;
  text-decoration: none;
}

.use-case-cta i {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .use-case-card {
    padding: 1.5rem;
  }

  .use-case-header h3 {
    font-size: 1.1rem;
  }

  .use-case-icon {
    font-size: 2rem;
  }

  /* Make carousel single column on mobile */
  .use-cases-carousel {
    grid-template-columns: 1fr !important;
  }

  /* Slightly smaller nav buttons on mobile */
  .use-case-nav-button {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }

  .use-case-carousel-nav {
    gap: 1.5rem !important;
  }
}
/* TaskVerification Component Styles - Modern UX UI Refactor */

/* Main container with enhanced card design */
.task-verification-section {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.task-verification-section:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Section title with modern typography */
.task-verification-section h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-verification-section h4::before {
  content: '✓';
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Enhanced instructions styling */
.verification-instructions {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #3b82f6;
  position: relative;
  overflow: hidden;
}

.verification-instructions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
  background-size: 200% 100%;
  /* animation: shimmer 2s ease-in-out infinite; */
}

@keyframes shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

.verification-instructions strong {
  color: #1e40af;
  font-weight: 600;
}

/* Verification method container */
.verification-method {
  margin-bottom: 1.5rem;
}

/* Enhanced form group styling */
.verification-form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.verification-form-group label {
  display: block;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

/* Modern form input styling */
.verification-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.875rem;
  background: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.verification-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.verification-input:hover:not(:focus) {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.verification-input:disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Textarea specific styling */
textarea.verification-input {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

/* Modern file upload area */
.upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  cursor: pointer;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-area:hover {
  border-color: #3b82f6;
  background: linear-gradient(145deg, #eff6ff, #f0f9ff);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.upload-area:hover::before {
  left: 100%;
}

.upload-area-content {
  position: relative;
  z-index: 1;
}

.upload-label {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.upload-label::before {
  content: '📤';
  font-size: 1.5rem;
}

/* Modern upload button */
.upload-button {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.upload-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.upload-button:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.upload-button::before {
  content: '📁';
  font-size: 1rem;
}

/* Hidden file input */
.upload-input {
  display: none;
}

/* Enhanced preview container */
.verification-preview {
  max-width: 100%;
  max-height: 250px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
}

.verification-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* Modern submit button */
.verification-submit-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
}

.verification-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.verification-submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.verification-submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.verification-submit-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Loading state for submit button */
.verification-submit-btn:disabled:contains('Submitting'),
.verification-submit-btn:disabled:contains('Uploading') {
  position: relative;
}

.verification-submit-btn:disabled:contains('Submitting')::after,
.verification-submit-btn:disabled:contains('Uploading')::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  /* animation: spin 1s linear infinite; */
  margin-left: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modern Alert Styling */
.task-verification-section .alert {
  border: none;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* animation: slideInDown 0.3s ease; */
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-verification-section .alert-danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.task-verification-section .alert-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #16a34a;
  border-left: 4px solid #22c55e;
}

.task-verification-section .alert-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border-left: 4px solid #f59e0b;
}

.task-verification-section .alert-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border-left: 4px solid #3b82f6;
}

.task-verification-section .alert i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Disabled states */
.upload-area.disabled {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}

.upload-area.disabled:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}

.upload-area.disabled::before {
  display: none;
}

.upload-area.disabled .upload-label::before {
  content: '🚫';
}

/* Enhanced focus states for accessibility */
.verification-input:focus,
.upload-button:focus,
.verification-submit-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Loading animation for buttons */
.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* File info display */
.file-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.file-info-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1;
  min-width: 0;
}

.file-info-name {
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-info-size {
  font-size: 0.75rem;
  color: #6b7280;
}

.file-remove-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.file-remove-btn:hover {
  background: #fee2e2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .task-verification-section {
    padding: 1.5rem;
    border-radius: 12px;
  }

  .upload-area {
    padding: 1.5rem;
  }

  .verification-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 2rem;
  }

  .upload-button {
    width: 100%;
    justify-content: center;
  }
}

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

  .task-verification-section h4 {
    font-size: 1.125rem;
  }

  .upload-area {
    padding: 1rem;
  }

  .verification-input {
    padding: 0.75rem;
    font-size: 1rem; /* Prevent zoom on iOS */
  }

  .verification-submit-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: darktolight) {
  .task-verification-section {
    background: linear-gradient(145deg, #1e293b, #334155);
    border-color: #475569;
    color: #f1f5f9;
  }

  .task-verification-section h4 {
    color: #f1f5f9;
  }

  .verification-instructions {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
    color: #dbeafe;
  }

  .verification-input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
  }

  .verification-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  }

  .upload-area {
    background: linear-gradient(145deg, #334155, #475569);
    border-color: #64748b;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .task-verification-section {
    border-width: 2px;
    border-color: #000;
  }

  .verification-input {
    border-width: 2px;
    border-color: #000;
  }

  .upload-area {
    border-width: 3px;
    border-color: #000;
  }

  .verification-submit-btn {
    border: 2px solid #000;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .task-verification-section:hover {
    transform: none;
  }

  .upload-area:hover {
    transform: none;
  }

  .verification-submit-btn:hover {
    transform: none;
  }
}

/* Focus trap for modal usage */
.verification-modal-focus-trap {
  position: relative;
}

.verification-modal-focus-trap:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Custom Dropdown Component - Matches TopNavbar Points Dropdown Style */
.custom-dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown.small {
  min-width: 120px;
}

.custom-dropdown.medium {
  min-width: 140px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  color: #475569;
  font-family: inherit;
  gap: 0.5rem;
}

.custom-dropdown-trigger:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.custom-dropdown-trigger:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background: white;
}

.custom-dropdown-trigger.open {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.custom-dropdown-value {
  flex: 1 1;
  text-align: left;
  font-weight: 500;
}

.custom-dropdown-chevron {
  font-size: 0.8rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.custom-dropdown-chevron.open {
  transform: rotate(180deg);
}

/* Dropdown Menu - Matches TopNavbar modern-dropdown style */
.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
  padding: 0.5rem;
  z-index: 1100; /* Higher than sticky header */
  animation: dropdownFadeIn 0.3s ease;
  max-height: 300px;
  overflow-y: auto;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-dropdown-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: #374151;
  transition: all 0.3s ease;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
}

.custom-dropdown-option:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.custom-dropdown-option.selected {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  font-weight: 600;
}

.custom-dropdown-option.selected:hover {
  background: rgba(102, 126, 234, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .custom-dropdown.medium {
    min-width: 120px;
  }
  
  .custom-dropdown.small {
    min-width: 100px;
  }
  
  .custom-dropdown-trigger {
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
  }
  
  .custom-dropdown-option {
    padding: 0.5rem 0.625rem;
    font-size: 0.8rem;
  }
}

/* Shared Dashboard Layout Styles */
.homepage-container-single-screen {
  min-height: 100vh;
  background: var(--body-bg);
}

.header-with-stats {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.header-content {
  max-width: 1400px;
  margin:  0 0;
  padding: 0 2rem;
}

.hero-compact {
  text-align: center;
}

.hero-title-compact {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle-compact {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

.stats-inline {
  display: grid;
  justify-content: center;
  grid-gap: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.stat-item-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-item-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon-compact {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.stat-icon-compact.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.stat-icon-compact.green {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
}

.stat-icon-compact.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
}

.stat-icon-compact.amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-number-compact {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827 !important; /* Dark text for visibility */
  line-height: 1;
}

.stat-label-compact {
  font-size: 0.875rem;
  color: #6b7280 !important; /* Medium gray for good contrast */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-grid-six-panel {
  max-width: 1400px;
  margin: 0;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  align-items: start;
}

.action-tiles-container {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.location-panel {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.welcome-card-compact {
  text-align: center;
}

.welcome-icon-compact {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.welcome-card-compact h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.welcome-card-compact p {
  color: var(--text-secondary);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.region-selector-compact {
  text-align: left;
}

.region-selector-compact label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.right-side-panels {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.inspiration-quotes-combined {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  min-height: 400px;
}

.inspiration-section {
  width: 100%;
  height: 100%;
}

.quick-nav-compact {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.nav-links-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Task Tab Tiles - Modern Action Tiles */
.task-tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  width: 100%;
}

.task-tab-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.task-tab-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.task-tab-tile:hover::before {
  transform: scaleX(1);
}

.task-tab-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
  text-decoration: none;
  color: inherit;
}

.task-tab-tile.featured {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.task-tab-tile.featured::before {
  transform: scaleX(1);
}

.task-tab-tile.create-task {
  border-color: #ffd89b;
  background: linear-gradient(135deg, rgba(255, 216, 155, 0.1) 0%, rgba(25, 84, 123, 0.1) 100%);
}

.task-tab-tile.create-task:hover {
  border-color: #19547b;
  box-shadow: 0 8px 25px rgba(255, 216, 155, 0.2);
}

.task-tab-tile .tile-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.task-tab-tile:hover .tile-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scale(1.1);
}

.task-tab-tile.create-task .tile-icon {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}

.task-tab-tile.create-task:hover .tile-icon {
  background: linear-gradient(135deg, #19547b 0%, #ffd89b 100%);
}

.task-tab-tile .tile-content {
  flex: 1 1;
  text-align: left;
}

.task-tab-tile .tile-content h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.task-tab-tile .tile-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.task-tab-tile:hover .tile-content h3 {
  color: #667eea;
}

.task-tab-tile:hover .tile-content p {
  color: #764ba2;
}

.task-tab-tile.create-task:hover .tile-content h3 {
  color: #19547b;
}

.task-tab-tile.create-task:hover .tile-content p {
  color: #ffd89b;
}

/* Enhanced Filter Styles */
.filter-input-styled {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.filter-input-styled:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: #fafbfc;
}

.filter-select-styled {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.filter-select-styled:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: #fafbfc;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.location-card-compact {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Task Grid and Cards */
.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.task-card-modern {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
}

.task-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

/* Loading and Error States */
.loading-state, .error-state, .empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-secondary);
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile responsiveness for dashboard */
@media (max-width: 1024px) {
  .dashboard-grid-six-panel {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .stats-inline {
    gap: 1rem;
  }
  
  .stat-item-compact {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 768px) {
  .hero-title-compact {
    font-size: 2rem;
  }
  
  .stats-inline {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .header-content {
    padding: 0 1rem;
  }
  
  .dashboard-grid-six-panel {
    padding: 1rem;
  }
  
  .task-tabs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .task-tab-tile {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .task-tab-tile .tile-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .task-tab-tile .tile-content h3 {
    font-size: 1rem;
  }
  
  .task-tab-tile .tile-content p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .hero-title-compact {
    font-size: 1.75rem;
  }
  
  .stats-inline {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .stat-item-compact {
    width: 100%;
    max-width: 300px;
  }
  
  .task-tabs-grid {
    grid-template-columns: 1fr;
  }
  
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .tasks-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .filter-input-styled,
  .filter-select-styled {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }
}

/* TasksPage Specific Styles */

/* Sticky Header for Tasks Hub - Fixed positioning and z-index */
.tasks-page .header-with-stats {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 70px;
  /* Position below the top navbar (70px height) */
  z-index: 50;
  /* Lower z-index to not block top navbar dropdowns */
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #e2e8f0;
  width: 100%;
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
}

/* Ensure smooth transition when scrolling */
.tasks-page .header-with-stats {
  transition: box-shadow 0.2s ease-in-out;
}

/* Enhanced shadow when scrolled */
.tasks-page .header-with-stats.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ensure content doesn't get hidden behind sticky header */
.tasks-page .dashboard-grid-six-panel {
  position: relative;
  z-index: 1;
  padding-top: 0;
}

/* Ensure the main content area doesn't scroll behind header */
.tasks-page .homepage-container-single-screen {
  position: relative;
}

/* Add some visual separation when header is sticky */
.tasks-page .header-with-stats.scrolled {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

/* Force the sticky header to stay on top */
.tasks-page .header-with-stats {
  will-change: transform;
  transform: translateZ(0);
}

/* Ensure the header content is properly contained */
.tasks-page .header-content {
  position: relative;
  z-index: 51;
  /* Slightly higher than header but still below top navbar */
}

/* Cross-browser sticky support */
.tasks-page .header-with-stats {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
}

/* Ensure the header doesn't get covered by other elements */
.tasks-page .header-with-stats {
  isolation: isolate;
}

/* Ensure parent containers allow proper scrolling control */
.tasks-page {
  overflow: hidden !important;
  /* Prevent main page scrolling */
  height: 100vh;
  /* Full viewport height */
}

.tasks-page .homepage-container-single-screen {
  overflow: hidden !important;
  /* Control overflow at container level */
  height: 100vh;
  /* Full viewport height */
  display: flex;
  flex-direction: column;
}

/* Force sticky behavior on all browsers - Fixed z-index */
.tasks-page .header-with-stats {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 70px !important;
  /* Stick below top navbar */
  z-index: 50 !important;
  /* Allow top navbar dropdowns to appear above */
}

/* Ensure proper scrolling control for tasks page */
.tasks-page {
  position: relative;
  /* Change from fixed to relative */
  width: 100%;
  height: auto;
  /* Allow natural height */
  min-height: 100vh;
  overflow: visible;
  /* Allow natural scrolling */
}

/* Ensure proper stacking */
.tasks-page .tasks-hub-container {
  position: relative;
  z-index: 1;
}

/* Task Status Badges */
.task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-status-badge.active {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.task-status-badge.completed {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.task-status-badge.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

/* Questionnaire-specific status styles */
.task-status-badge.draft {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
}

.task-status-badge.published {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.task-status-badge.open {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.task-status-badge.closed {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.task-status-badge.filled {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.task-status-badge.available {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

/* Enhanced Submission Stats for Publisher Cards */
.submission-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.submission-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.submission-count.pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.submission-count.completed {
  background: #d1fae5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.submission-count.rejected {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.submission-count i {
  font-size: 0.75rem;
}

/* Task Card Enhancements */
.task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.task-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.task-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  overflow: hidden;
  overflow-wrap: break-word;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.task-points {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 8px !important;
}

.task-points i {
  font-size: 0.75rem !important;
  color: #059669 !important;
}

.task-deadline {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Professional Task Card Styles */
.professional-task-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.professional-task-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.professional-task-card:hover::before {
  transform: scaleX(1);
}

.professional-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.task-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-status.available {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.task-status.in-progress {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

.task-status.completed {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

/* Enhanced Task Status Badges */
.task-status-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.task-status-badge.open {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.task-status-badge.completed {
  background: #d1fae5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.task-status-badge.cancelled {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.task-status-badge.pending_verification {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.task-status-badge.pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.task-status-badge.approved {
  background: #d1fae5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.task-status-badge.rejected {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Professional Form Controls */
.professional-form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: all 0.2s ease;
  font-family: inherit;
}

.professional-form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

/* Professional Empty State */
.professional-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  text-align: center;
  color: var(--text-secondary);
}

.professional-empty-state .icon {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  opacity: 0.6;
}

.professional-empty-state h3 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.professional-empty-state p {
  margin-bottom: 2rem;
  max-width: 400px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cta-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.cta-button:hover {
  background: #084c8a;
  color: white;
  text-decoration: none;
}

/* Two-Row Stats Layout for Header - Left Aligned */
.stats-two-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: flex-start;
}

.stats-row-first,
.stats-row-second {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}

/* Small Stats for Header - Left Aligned */
.stats-inline-left {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.stat-item-small {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-width: 110px;
  /* Ensure consistent width for all stat buttons */
}

.stat-item-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-color: #cbd5e1;
}

.stat-item-small.active {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.stat-item-small.create-task-stat:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}

.stat-icon-small {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
}

.stat-icon-small.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.stat-icon-small.green {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
}

.stat-icon-small.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
}

.stat-icon-small.amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-text-small {
  display: flex;
  flex-direction: column;
}

.stat-number-small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label-small {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1;
}

/* Responsive Design for Two-Row Stats and Legacy Stats */
@media (max-width: 768px) {
  .stats-two-rows {
    gap: 0.5rem;
  }

  .stats-row-first,
  .stats-row-second {
    gap: 0.75rem;
  }

  .stats-inline-left {
    gap: 0.75rem;
  }

  .stat-item-small {
    padding: 0.375rem 0.5rem;
    min-width: 90px;
    /* Smaller but consistent width on mobile */
  }

  .stat-icon-small {
    width: 20px;
    height: 20px;
    font-size: 0.625rem;
  }

  .stat-number-small {
    font-size: 0.75rem;
  }

  .stat-label-small {
    font-size: 0.625rem;
  }
}

/* Extra small screens - Stack stats vertically if needed */
@media (max-width: 480px) {
  .stats-two-rows {
    gap: 0.5rem;
  }

  .stats-row-first,
  .stats-row-second {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .stat-item-small {
    min-width: 80px;
    /* Minimum width even on very small screens */
    flex: 1 1;
    max-width: calc(50% - 0.25rem);
    /* Allow flexibility but maintain minimum */
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

  .task-card-header,
  .task-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .task-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Task Details Panel */
.task-details-panel {
  background: white;
  border-radius: 16px;
  padding: 0;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  /* border: 1px solid #e5e7eb; */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Task details panel animations */
.task-details-panel {
  animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Smooth scrolling for task details */
.task-details-panel {
  scroll-behavior: smooth;
}

.task-details-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 16px 16px 0 0;
}

.back-button {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: #1e40af;
}

/* Compact back and close button */
.task-details-header .back-button {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  /* Changed from 6px to 12px for rounder corners */
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.task-details-header .back-button:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.task-details-content {
  padding: 1.5rem;
}

.task-category-badge {
  display: inline-block;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.task-details-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
}

.task-meta-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.task-meta-item i {
  color: #3b82f6;
  width: 16px;
}

.task-description-section,
.task-instructions-section,
.task-tags-section {
  margin-bottom: 2rem;
}

.task-description-section h3,
.task-instructions-section h3,
.task-tags-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
}

.task-description-section p,
.task-instructions-section p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.task-tag {
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
}

.task-actions {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

/* Task List and Details Column Layout - Details panel uses all remaining width */
.dashboard-content-area {
  display: grid;
  grid-template-columns: minmax(400px, 580px) 1fr;
  grid-gap: 0rem;
  gap: 0rem;
  align-items: start;
  min-height: 70vh;
  max-width: none;
  overflow: hidden;
}

.task-list-column {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  min-height: 600px;
  height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.task-details-column {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  /* Align with TasksHubModern.css */
  max-height: calc(100vh - 140px);
  /* Full viewport minus header offset */
  height: calc(100vh - 140px);
  /* Use full available height */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.task-details-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.task-details-header {
  padding: 0.75rem 1rem 0.5rem 1rem;
  /* Reduced padding */
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  overflow: hidden;
}

.task-details-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem 1rem;
  /* Reduced horizontal padding */
  min-height: 0;
  min-width: 0;
  /* Compact scrolling behavior */
  scroll-behavior: smooth;
  /* Use more efficient scrolling */
  scroll-snap-type: y proximity;
  scroll-padding-top: 1rem;
}

.task-details-content::-webkit-scrollbar {
  width: 6px;
}

.task-details-content::-webkit-scrollbar-track {
  background: transparent;
}

.task-details-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.task-details-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Task Details Placeholder */
.task-details-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  border: 2px dashed #e2e8f0;
  height: 100%;
  min-height: 400px;
}

.placeholder-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite;
}

.placeholder-icon i {
  font-size: 2rem;
  color: #6b7280;
}

.task-details-placeholder h3 {
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.task-details-placeholder p {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
  max-width: 280px;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Enhanced Loading Container */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.loading-ring {
  width: 64px;
  height: 64px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: tasks-loading-spin 1s linear infinite;
  margin-bottom: 1rem;
  /* Performance optimizations for smooth rotation */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.loading-container p {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

@keyframes tasks-loading-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Enhanced Error Container */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.error-container h3 {
  color: #dc2626;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.error-container p {
  color: #7f1d1d;
  font-size: 1rem;
  margin: 0;
  max-width: 400px;
}

/* Enhanced No Tasks Message */
.no-tasks-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  margin: 2rem 0;
  min-height: 300px;
}

.no-tasks-message i {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.no-tasks-message h3 {
  color: #374151;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.no-tasks-message p {
  color: #6b7280;
  font-size: 1rem;
  margin: 0 0 1rem 0;
  max-width: 400px;
  line-height: 1.5;
}

.no-tasks-message .text-secondary {
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
}

.no-tasks-message .btn {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.no-tasks-message .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  color: white;
}

/* Task Verification Section Optimization */
.task-details-column #verificationSection {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1.5rem 0rem 1.5rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* Make all sections in task details more compact */
.task-details-content>div {
  margin-bottom: 0.75rem !important;
  /* Override any larger margins */
}

.task-details-content .user-submission-section,
.task-details-content .submissions-section {
  margin-top: 0.75rem;
}

/* Improved Button Styling for Task Details */
.task-details-column .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.task-details-column .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Enhanced Scrollbar for Better UX - Simplified */
.task-details-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.task-details-content::-webkit-scrollbar {
  width: 8px;
}

.task-details-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.task-details-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 4px;
}

.task-details-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* Focus States for Better Accessibility */
.task-details-column .task-detail-actions .btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.back-button:focus {
  outline: none;
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
}

/* Micro-interactions and Enhanced UX */
.task-details-column .task-detail-card {
  transition: box-shadow 0.2s ease;
}

.task-details-column .task-detail-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.task-details-column .submission-card {
  transition: all 0.2s ease;
}

.task-details-column .submission-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Loading states for task cards */
.task-card-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Enhanced focus states for accessibility - moved to TaskCardWrapper.css */
/* Publisher task card specific enhancements - moved to TaskCardWrapper.css */
/* Task verification icon animations - moved to TaskCardWrapper.css */
/* Staggered animation for task lists - moved to TaskCardWrapper.css */

/* Responsive animation adjustments - moved to TaskCardWrapper.css */
/* Reduce motion for users who prefer it - moved to TaskCardWrapper.css */

/* Manual refresh button for task list */
.tasks-hub-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 0.75rem;
  font-size: 0.875rem;
}

.tasks-hub-refresh-button:hover:not(:disabled) {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.tasks-hub-refresh-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tasks-hub-refresh-button .spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Modern Task Card Styling - Match Questionnaire Card Design */
.task-card-wrapper {
  margin-bottom: 0.75rem;
}

/* Primary task card styling with high specificity */
.tasks-hub-container .task-card-wrapper .task-card,
.tasks-hub-container .task-card-wrapper .task-card-modern {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background: white;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Hover state - light blue highlight */
.tasks-hub-container .task-card-wrapper:hover .task-card,
.tasks-hub-container .task-card-wrapper:hover .task-card-modern {
  background: #f8fafc;
  border: 2px solid #93c5fd;
  /* Lighter blue border for hover (blue-300) */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  /* Enhanced shadow for better visibility */
  transform: translateY(-2px);
  /* More pronounced lift effect */
}

/* Selected state - darker blue highlight */
.tasks-hub-container .task-card-wrapper.selected .task-card,
.tasks-hub-container .task-card-wrapper.selected .task-card-modern {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  /* Darker blue border for selection (blue-500) */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  /* Blue ring highlight for selection */
  transform: translateY(-1px);
}

/* Task header row styling */
.task-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.task-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  flex: 1 1;
  margin-right: 1rem;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.task-status-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

/* Task description styling */
.task-description {
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

/* Task meta section */
.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.task-meta-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1;
}

.task-meta-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Task category and verification info styling */
.task-category,
.task-verification-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
}

.task-category i,
.task-verification-info i {
  font-size: 0.7rem;
}

/* Task participants styling - matches screenshot design */
.task-participants {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: none;
}

.task-participants i {
  font-size: 0.7rem;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .tasks-hub-container .task-card-wrapper .task-card,
  .tasks-hub-container .task-card-wrapper .task-card-modern {
    padding: 1rem;
  }

  .task-header-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .task-status-badges {
    align-items: flex-start;
    flex-direction: row;
    gap: 0.5rem;
  }

  .task-meta {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .task-meta-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ========================================
   YOUR SUBMISSION SECTION STYLES
   ======================================== */

/* Main submission card container */
.task-details-submission-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.task-details-submission-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Submission meta header */
.submission-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
  padding-bottom: 1.5rem;
}

/* Status pill styling */
.submission-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-radius: 50px;
  text-transform: capitalize;
  letter-spacing: 0.025em;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.submission-status-pill i {
  font-size: 1rem;
  margin-right: 0.125rem;
}

/* Status pill color variants */
.submission-status-pill.status-approved {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.submission-status-pill.status-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.submission-status-pill.status-rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Submission date styling */
.submission-date {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.submission-date::before {
  content: "📅";
  font-size: 1rem;
}

/* Submission proof content area */
.submission-proof {
  padding: 1.5rem;
  background: #ffffff;
}

/* Screenshot proof styling */
.proof-screenshot {
  margin-bottom: 0;
}

.submission-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  border: 3px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.submission-image:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  transform: scale(1.02);
}

/* Text response proof styling */
.proof-text,
.proof-email {
  margin-bottom: 0;
}

.proof-text label,
.proof-email label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.response-content,
.email-content {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2937;
  word-wrap: break-word;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.response-content::before,
.email-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px 0 0 2px;
}

/* Feedback section for rejected submissions */
.submission-feedback {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 2px solid #f87171;
  border-radius: 12px;
  position: relative;
}

.submission-feedback::before {
  content: "⚠️";
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: #ffffff;
  padding: 0 0.5rem;
  font-size: 1.25rem;
}

.submission-feedback label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feedback-content {
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #7f1d1d;
  box-shadow: inset 0 2px 4px rgba(220, 38, 38, 0.1);
}

/* Submission actions */
.submission-actions {
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.submission-actions .task-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.925rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.submission-actions .task-details-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.submission-actions .task-details-btn.primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.submission-actions .task-details-btn i {
  font-size: 1rem;
}

/* Responsive design for submission section */
@media (max-width: 768px) {
  .task-details-submission-card {
    border-radius: 12px;
  }

  .submission-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }

  .submission-status-pill {
    align-self: flex-start;
  }

  .submission-proof {
    padding: 1.25rem;
  }

  .submission-image {
    max-width: 100%;
  }

  .response-content,
  .email-content {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .submission-feedback {
    padding: 1.25rem;
    margin-top: 1.25rem;
  }

  .submission-actions {
    padding: 1.25rem;
  }

  .submission-actions .task-details-btn {
    width: 100%;
    justify-content: center;
  }
}

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

  .submission-proof {
    padding: 1rem;
  }

  .submission-feedback {
    padding: 1rem;
  }

  .submission-actions {
    padding: 1rem;
  }

  .submission-status-pill {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
  }
}

/* Animation for submission status changes */
@keyframes statusUpdate {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.submission-status-pill.status-update {
  animation: statusUpdate 0.5s ease-in-out;
}

/* Loading state for submission images */
.submission-image[src=""] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  min-height: 200px;
  border: 2px dashed #cbd5e1;
}

/* Enhanced focus states for accessibility */
.submission-image:focus,
.task-details-btn:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles for submission details */
@media print {
  .task-details-submission-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }

  .submission-actions {
    display: none;
  }
}

/* ========================================
   TASK DETAILS SUBMISSION REVIEW SECTION - PUBLISHER SIDE
   ======================================== */

/* Submissions review container */
.submissions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Submission review card - matches enhanced design */
.submission-review-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.submission-review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 50%, #3b82f6 100%);
}

.submission-review-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}

/* Status-specific border colors */
.submission-review-card.status-pending::before {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
}

.submission-review-card.status-approved::before {
  background: linear-gradient(90deg, #10b981 0%, #059669 50%, #10b981 100%);
}

.submission-review-card.status-rejected::before {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 50%, #ef4444 100%);
}

/* Submission review header */
.submission-review-header {
  padding: 1.75rem 2rem 1.25rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Submission user info */
.submission-user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.user-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.user-avatar:hover::after {
  left: 100%;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-id {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.025em;
}

.submission-time {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.submission-time::before {
  content: "📅";
  font-size: 1rem;
}

/* Enhanced status indicator - PENDING, APPROVED, REJECTED */
.submission-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.submission-status-indicator i {
  font-size: 1rem;
}

/* Status-specific colors - enhanced to match design */
.submission-status-indicator.status-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  animation: pulse-pending 2s infinite;
}

@keyframes pulse-pending {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
  }
}

.submission-status-indicator.status-approved {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.submission-status-indicator.status-rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

/* Submission review content */
.submission-review-content {
  padding: 2rem;
  background: #ffffff;
}

.submission-review-content .proof-section {
  margin-bottom: 1.5rem;
}

/* Proof section styling - enhanced */
.proof-section {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.proof-section:last-child {
  margin-bottom: 0;
}

.proof-section label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
  position: relative;
}

.proof-section label::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 1px;
}

/* Screenshot proof with enhanced error handling */
.submission-image {
  max-width: 100%;
  max-height: 400px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  border: 3px solid #f1f5f9;
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
}

.submission-image:hover {
  border-color: #3b82f6;
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
  transform: scale(1.02);
}

/* Loading and error states for screenshots */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #6b7280;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.loading-placeholder::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-placeholder::after {
  content: 'Loading screenshot...';
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

/* Error state for failed screenshot loading */
.screenshot-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 2px dashed #f87171;
  border-radius: 12px;
  color: #dc2626;
  text-align: center;
}

.screenshot-error::before {
  content: '⚠️';
  font-size: 2rem;
  margin-bottom: 1rem;
}

.screenshot-error::after {
  content: 'Failed to load screenshot. The image may be corrupted or no longer available.';
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 280px;
  line-height: 1.4;
}

/* Text and email content styling */
.response-content,
.email-content {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2937;
  word-wrap: break-word;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.response-content::before,
.email-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px 0 0 2px;
}

/* Review section for pending submissions */
.review-section {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  position: relative;
}

.review-section::before {
  content: '✍️';
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 50%;
  font-size: 1.125rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Review form styling */
.review-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Enhanced feedback input styling */
.feedback-input {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feedback-input label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  border: none;
  padding: 0;
}

.feedback-input label::before {
  display: none;
}

.feedback-input textarea {
  width: 100%;
  min-height: 100px;
  padding: 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2937;
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.feedback-input textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
  background: #fafbfc;
}

.feedback-input textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Enhanced review actions - Approve and Reject buttons */
.review-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.task-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  justify-content: center;
}

.task-details-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.task-details-btn:hover::before {
  left: 100%;
}

.task-details-btn i {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.task-details-btn:hover i {
  transform: scale(1.1);
}

/* Success and Approve button styling */
.task-details-btn.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.task-details-btn.success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.task-details-btn.success:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Danger Reject button styling */
.task-details-btn.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.task-details-btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

.task-details-btn.danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Secondary button styling */
.task-details-btn.secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  padding: 0.875rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2);
}

.task-details-btn.secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(75, 85, 99, 0.3);
}

.task-details-btn.secondary:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced scroll styles for reviewed submissions */
.reviewed-submissions-content::-webkit-scrollbar {
  width: 8px;
}

.reviewed-submissions-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.reviewed-submissions-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 4px;
}

.reviewed-submissions-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .pending-submissions-section {
    padding: 1.25rem;
    border-radius: 16px;
  }

  .submission-review-card.current::before {
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
    font-size: 0.7rem;
    padding: 0.25rem 0.625rem;
  }

  .reviewed-submissions-header {
    padding: 1rem;
  }

  .reviewed-submissions-content {
    padding: 1rem;
    max-height: 50vh;
  }

  .task-details-btn.secondary {
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
  }
}

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

  .pending-submissions-section h4 {
    font-size: 1.125rem;
  }

  .reviewed-submissions-content {
    max-height: 40vh;
  }

  .task-details-btn.secondary {
    padding: 0.625rem 1rem;
    font-size: 0.8rem;
  }
}

/* Enhanced submission review styles for TaskDetails Component */
.reviewed-submissions-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reviewed-submissions-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e2e8f0;
}

.reviewed-submissions-header:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-1px);
}

.reviewed-submissions-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #4b5563;
}

.reviewed-submissions-header i {
  margin-right: 0.75rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.reviewed-submissions-content {
  padding: 1.25rem;
  background: white;
  max-height: 60vh;
  overflow-y: auto;
}

/* Enhanced submissions summary with clickable status counts */
.submissions-summary {
  margin-bottom: 1.5rem;
}

.summary-stats {
  display: flex;
  gap: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 120px;
}

.stat-item:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.stat-item.expanded {
  border-color: #3b82f6;
  background: #f8fafc;
}

.stat-item .stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-item .stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.stat-item i {
  font-size: 0.875rem;
  color: #64748b;
}

.stat-item.approved .stat-number {
  color: #10b981;
}

.stat-item.rejected .stat-number {
  color: #ef4444;
}

.stat-item.pending .stat-number {
  color: #f59e0b;
}

/* Status-specific sections */
.status-submissions-section {
  margin: 1rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.approved-section {
  border-left: 4px solid #10b981;
}

.rejected-section {
  border-left: 4px solid #ef4444;
}

.pending-section {
  border-left: 4px solid #f59e0b;
}

.status-submissions-content {
  padding: 1rem;
  background: white;
}

/* Compact submission cards */
.submission-card.compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.submission-card.compact:last-child {
  margin-bottom: 0;
}

.submission-card.compact .submission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.submission-card.compact .submission-user {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.submission-card.compact .user-id {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.submission-card.compact .submission-time {
  font-size: 0.75rem;
  color: #6b7280;
}

.submission-card.compact .submission-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.submission-card.compact .submission-status.approved {
  color: #10b981;
  background: #ecfdf5;
}

.submission-card.compact .submission-status.rejected {
  color: #ef4444;
  background: #fef2f2;
}

.submission-feedback.compact {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: white;
  border-radius: 6px;
  font-size: 0.875rem;
}

.feedback-label {
  font-weight: 600;
  color: #374151;
  flex-shrink: 0;
}

.feedback-text {
  color: #6b7280;
}

/* Pending review cards - Clean and simple */
.submission-card.pending-review {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.submission-card.pending-review:last-child {
  margin-bottom: 0;
}

.submission-card.pending-review .submission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.submission-card.pending-review .submission-user {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.submission-card.pending-review .user-id {
  font-weight: 600;
  color: #374151;
}

.submission-card.pending-review .submission-time {
  font-size: 0.875rem;
  color: #6b7280;
}

.submission-card.pending-review .submission-status.pending {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Proof display - Simplified */
.proof-display {
  margin-bottom: 1rem;
}

.proof-label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.proof-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.proof-text {
  background: #f8fafc;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #374151;
}

.proof-loading {
  background: #f1f5f9;
  padding: 1rem;
  text-align: center;
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Compact review section */
.review-section-compact {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.feedback-input-compact {
  margin-bottom: 0.75rem;
}

.feedback-input-compact textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 60px;
}

.feedback-input-compact textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.review-actions-compact {
  display: flex;
  gap: 0.75rem;
}

.review-btn {
  flex: 1 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.review-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.review-btn.approve {
  background: #10b981;
  color: white;
}

.review-btn.approve:hover:not(:disabled) {
  background: #059669;
}

.review-btn.reject {
  background: #ef4444;
  color: white;
}

.review-btn.reject:hover:not(:disabled) {
  background: #dc2626;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .summary-stats {
    flex-direction: column;
    gap: 0.75rem;
  }

  .stat-item {
    padding: 0.75rem 1rem;
    min-width: auto;
  }

  .stat-item .stat-number {
    font-size: 1.25rem;
  }

  .review-actions-compact {
    flex-direction: column;
  }

  .review-btn {
    flex: none;
  }
}

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

  .pending-submissions-section h4 {
    font-size: 1.125rem;
  }

  .reviewed-submissions-content {
    max-height: 40vh;
  }

  .task-details-btn.secondary {
    padding: 0.625rem 1rem;
    font-size: 0.8rem;
  }
}

/* Enhanced submission review styles for TaskDetails Component */
.reviewed-submissions-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reviewed-submissions-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e2e8f0;
}

.reviewed-submissions-header:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-1px);
}

.reviewed-submissions-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #4b5563;
}

.reviewed-submissions-header i {
  margin-right: 0.75rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.reviewed-submissions-content {
  padding: 1.25rem;
  background: white;
  max-height: 60vh;
  overflow-y: auto;
}

/* Disabled stat-item styles */
.stat-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5 !important;
  border-color: #d1d5db !important;
}

.stat-item.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #d1d5db !important;
  background: #f5f5f5 !important;
}

.stat-item.disabled .stat-number {
  color: #6b7280 !important;
}

.stat-item.disabled .stat-label {
  color: #6b7280 !important;
}
/* Modern Tasks Hub Layout - Job Search Interface Style */

/* 
 * CSS Custom Properties for easy width control
 * 
 * To adjust column widths, modify these variables:
 * --tasks-hub-list-width: Controls task list column width (default: 1fr)
 * --tasks-hub-details-width: Controls task details column width (default: 440px)
 * 
 * Examples:
 * Equal widths: --tasks-hub-list-width: 1fr; --tasks-hub-details-width: 1fr;
 * List flexible, Details fixed: --tasks-hub-list-width: 1fr; --tasks-hub-details-width: 440px; (current)
 * List 2-3, Details 1-3: --tasks-hub-list-width: 2fr; --tasks-hub-details-width: 1fr;
 * Both flexible 1-to-2 ratio: --tasks-hub-list-width: 1fr; --tasks-hub-details-width: 2fr;
 */
:root {
  --tasks-hub-list-width: 1fr;
  /* Task list column width */
  --tasks-hub-details-width: 3fr;
  /* 440px - Task details column width (fixed 440px) */
  --tasks-hub-column-gap: 2rem;
  /* Gap between columns */
  --tasks-hub-container-padding: 2rem;
  /* Left and right padding */
}

.tasks-hub-container {
  min-height: 100vh;
  max-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Container must scroll for sticky to work */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Ensure tasks-hub-container works with compact header */
.tasks-hub-container .compact-tasks-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

/* Custom scrollbar for main container */
.tasks-hub-container::-webkit-scrollbar {
  width: 8px;
}

.tasks-hub-container::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.tasks-hub-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tasks-hub-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Firefox scrollbar */
.tasks-hub-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Header Section */
.tasks-hub-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* Header collapsed state */
.tasks-hub-header.collapsed {
  transform: translateY(-100%);
}

/* Header scrolled state */
.tasks-hub-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom-color: #cbd5e1;
}

.tasks-hub-header-content {
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0.5rem 2rem;
  padding: 0.5rem var(--tasks-hub-container-padding);
}

.tasks-hub-search-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  /* margin-bottom: 1.5rem; */
}

.tasks-hub-search-bar {
  flex: 1 1;
  position: relative;
  max-width: 600px;
}

.tasks-hub-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 1.1rem;
}

.tasks-hub-search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  transition: all 0.2s ease;
}

.tasks-hub-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #fefefe;
}

.tasks-hub-location-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #475569;
  cursor: pointer;
}

.tasks-hub-location-filter:hover {
  background: #e2e8f0;
}

.tasks-hub-search-button {
  background: #e91e63;
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tasks-hub-search-button:hover {
  background: #c2185b;
  transform: translateY(-1px);
}

/* Tab Navigation with Filter Controls */
.tasks-hub-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0;
  /* margin-bottom: 1rem; */
}

.tasks-hub-tabs-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-filter-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tasks-hub-filter-select-compact {
  position: relative;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-filter-select-compact:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-filter-select-compact:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Ensure consistent dropdown direction for all select elements */
.tasks-hub-filter-select-compact option {
  padding: 0.5rem;
  color: #374151;
}

/* Sort Select Styling */
.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Main Content Area - Two Column Layout */
.tasks-hub-main-two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-columns: var(--tasks-hub-list-width) var(--tasks-hub-details-width);
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--tasks-hub-column-gap);
  gap: var(--tasks-hub-column-gap);
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem 2rem 2rem;
  padding: 0 var(--tasks-hub-container-padding) var(--tasks-hub-container-padding) var(--tasks-hub-container-padding);
  min-height: calc(100vh - 200px);
}

/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}

.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 1rem;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Main Content Area - Two Column Layout */
.tasks-hub-main-two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-columns: var(--tasks-hub-list-width) var(--tasks-hub-details-width);
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--tasks-hub-column-gap);
  gap: var(--tasks-hub-column-gap);
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem 2rem 2rem;
  padding: 0 var(--tasks-hub-container-padding) var(--tasks-hub-container-padding) var(--tasks-hub-container-padding);
  min-height: calc(100vh - 200px);
}

/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}

.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 0;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Main Content Area - Two Column Layout */
.tasks-hub-main-two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-columns: var(--tasks-hub-list-width) var(--tasks-hub-details-width);
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--tasks-hub-column-gap);
  gap: var(--tasks-hub-column-gap);
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem 2rem 2rem;
  padding: 0 var(--tasks-hub-container-padding) var(--tasks-hub-container-padding) var(--tasks-hub-container-padding);
  min-height: calc(100vh - 200px);
}

/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}

.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 0;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Main Content Area - Two Column Layout */
.tasks-hub-main-two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-columns: var(--tasks-hub-list-width) var(--tasks-hub-details-width);
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--tasks-hub-column-gap);
  gap: var(--tasks-hub-column-gap);
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem 2rem 2rem;
  padding: 0 var(--tasks-hub-container-padding) var(--tasks-hub-container-padding) var(--tasks-hub-container-padding);
  min-height: calc(100vh - 200px);
}

/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}

.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 0;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}


/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}


.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 0;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}


/* Tab Navigation */
.tasks-hub-tabs {
  /* border-top: 1px solid #e2e8f0; */
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}


.tasks-hub-task-list-column {
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  height: calc(100vh - 140px);
  /* Match task details height */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  overflow: hidden;
  /* Control overflow within this column */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Allow flex shrinking */
}

/* Style for when no task is selected - add class via React */
.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
  /* Light grey background */
}

/* Style for when a task is selected - hide border for seamless look */
.tasks-hub-task-details-column.task-selected {
  border: none;
  /* Remove border when task is selected */
  box-shadow: none;
  /* Remove box shadow for cleaner look */
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 0;
  /* Zero left padding to align with header tabs */
  /* border-bottom: 1px solid #f1f5f9; */
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.tasks-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-sort-controls label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.tasks-hub-sort-select {
  position: relative;
  padding: 0.375rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  min-width: 120px;
}

.tasks-hub-sort-select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.tasks-hub-sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}


/* Task Cards with Enhanced Hover and Selection */
.tasks-hub-task-cards {
  /* padding: 1.5rem 1.5rem 1.5rem 1.5rem; */
  padding: 5px;
  padding-right: 6px;
  /* Zero left padding to align with header tabs */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Add gap between task cards */
  flex: 1 1;
  /* Take remaining space */
  overflow: visible;
  /* Remove internal scrolling - let main container handle it */
  min-height: 0;
  /* Allow flex shrinking */
}

/* Custom scrollbar for task cards */
.tasks-hub-task-cards::-webkit-scrollbar {
  width: 6px;
}

.tasks-hub-task-cards::-webkit-scrollbar-track {
  background: transparent;
}

.tasks-hub-task-cards::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.tasks-hub-task-cards::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.tasks-hub-task-card {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  /* Default border on all sides */
  border-radius: 12px;
  /* Round corners */
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  position: relative;
}

.tasks-hub-task-card:hover {
  background: #f8fafc;
  border: 2px solid #93c5fd;
  /* Lighter blue border for hover (blue-300) */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  /* Enhanced shadow for better visibility */
  transform: translateY(-2px);
  /* More pronounced lift effect */
}

.tasks-hub-task-card.selected {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  /* Darker blue border for selection (blue-500) */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  /* Blue ring highlight for selection */
  transform: translateY(-1px);
}

.tasks-hub-task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.tasks-hub-task-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  flex: 1 1;
  margin-right: 1rem;
}

.tasks-hub-task-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.tasks-hub-task-category {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tasks-hub-task-points {
  font-size: 1rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.tasks-hub-task-description {
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.tasks-hub-task-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.tasks-hub-task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1;
}

.tasks-hub-task-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.tasks-hub-task-tag i {
  font-size: 0.7rem;
}

.tasks-hub-task-tag.status-approved {
  background: #dcfce7;
  color: #166534;
}

.tasks-hub-task-tag.status-rejected {
  background: #fef2f2;
  color: #dc2626;
}

.tasks-hub-task-tag.status-pending {
  background: #fef3c7;
  color: #d97706;
}

.tasks-hub-task-tag.status-open {
  background: #dbeafe;
  color: #1d4ed8;
}

.tasks-hub-task-tag.status-completed {
  background: #f0fdf4;
  color: #15803d;
}

.tasks-hub-task-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
}

.tasks-hub-task-participants {
  font-weight: 500;
}

.tasks-hub-task-date {
  opacity: 0.8;
}

/* Additional badges for questionnaires */
.task-details-questions-badge {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.task-details-status-badge {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Questionnaire-specific status badges in details panel */
.task-details-status-badge.status-draft {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.task-details-status-badge.status-published {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.task-details-status-badge.status-open {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.task-details-status-badge.status-closed {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.task-details-status-badge.status-filled {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.task-details-status-badge.status-available {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.task-details-status-badge.status-completed {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* Override participant badge for better visibility */
.task-details-participants-badge {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fed7aa;
}

/* Empty State */
.tasks-hub-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.tasks-hub-empty-icon {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.tasks-hub-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.5rem;
}

.tasks-hub-empty-state p {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 400px;
}

.tasks-hub-empty-state a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.tasks-hub-empty-state a:hover {
  text-decoration: underline;
}

/* Pagination */
.tasks-hub-pagination {
  padding: 1.5rem 1.5rem 1.5rem 0;
  /* Zero left padding to align with header tabs */
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.tasks-hub-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tasks-hub-pagination-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f8fafc;
}

.tasks-hub-pagination-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.tasks-hub-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tasks-hub-pagination-btn:disabled:hover {
  border-color: #e2e8f0;
  color: #64748b;
  background: white;
}

/* Task Details Panel with Tabbed Interface */
.tasks-hub-task-details-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tasks-hub-task-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 1rem 1.5rem; */
  /* border-bottom: 1px solid #e2e8f0; */
  /* background: #f8fafc; */
}

.tasks-hub-task-details-tabs {
  display: flex;
  gap: 0.5rem;
}

.tasks-hub-details-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
}

.task-details-empty-content {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 320px;
}

.task-details-empty-icon {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
}

.task-details-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.75rem 0;
}

.task-details-empty-description {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Main Container */
.task-details-container {
  height: 100%;
  display: block;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: auto;
  padding-top: 50px;
}

/* Header Section */
.task-details-header {
  background: white;
  /* border-bottom: 1px solid #e2e8f0; */
  border: none;
  padding: 1rem 2rem 0.75rem 2rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.task-details-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.task-details-title-area {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.task-details-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.025em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.task-details-metadata {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.task-details-category-badge,
.task-details-points-badge,
.task-details-participants-badge,
.task-details-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.task-details-category-badge {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  border: 1px solid #cbd5e1;
}

.task-details-points-badge {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.task-details-participants-badge {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.task-details-date-badge {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.task-details-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.task-details-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 12px;
  font-size: 0.813rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-details-status-indicator.status-pending {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #f59e0b;
}

.task-details-status-indicator.status-approved {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid #10b981;
}

.task-details-status-indicator.status-rejected {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #991b1b;
  border: 1px solid #ef4444;
}

.task-details-action-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.125rem;
}

.task-details-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.task-details-action-btn.mobile-back {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #3b82f6;
  color: #ffffff;
}

.task-details-action-btn.new-tab {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
}

.task-details-action-btn.new-tab:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.task-details-action-btn.close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Mobile optimizations for close buttons */
@media (max-width: 640px) {

  /* Make task detail close buttons larger and more accessible on mobile */
  .task-details-action-btn {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
    border-radius: 8px;
  }

  .task-details-action-btn.close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
    transform: translateY(-1px);
  }

  /* Add visual feedback for better mobile UX */
  .task-details-action-btn:active {
    transform: scale(0.95);
  }
}

/* Content Section */
.task-details-content {
  flex: 1 1;
  overflow-y: auto;
  /* padding: 0.5rem 2.5rem 2.5rem 2.5rem; */
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.task-details-content::-webkit-scrollbar {
  width: 6px;
}

.task-details-content::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 3px;
}

.task-details-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.task-details-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Section Styling - Minimal with subtle separation */
.task-details-section {
  /* padding-top: 1rem; */
  margin-bottom: 2.5rem;
  /* padding-bottom: 1.5rem; */
  border-bottom: 1px solid #f1f5f9;
}

.task-details-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.task-details-section-header {
  margin-bottom: 1.25rem;
}

.task-details-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  letter-spacing: -0.025em;
}

.task-details-section-title i {
  color: #3b82f6;
  font-size: 1.125rem;
}

.task-details-section-content {
  padding: 0;
  background: transparent;
  /* border: 1px solid #e2e8f0; */
  border-radius: 0;
  box-shadow: none;
}

/* Description - With card styling like instructions */
.task-details-description {
  color: #475569;
  font-size: 1rem;
  line-height: 1.75;
  margin: 1rem 0 0 0;
  padding: 0.75rem;
  /* Reduced padding */
  background: #f8fafc;
  /* border: 1px solid #e2e8f0; */
  border-radius: 6px;
}

/* Instructions Card - Standard form styling with reduced padding */
.task-details-instructions-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.75rem;
  /* Reduced from 1rem */
  margin-top: 1rem;
}

.task-details-instructions {
  color: #475569;
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
  font-weight: 400;
}

/* Verification Requirements - Simplified */
.task-details-verification-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.verification-requirement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  /* Reduced from 0.75rem */
  background: #f8fafc;
  /* border: 1px solid #e2e8f0; */
  border-radius: 6px;
  color: #475569;
  font-weight: 400;
}

.verification-requirement i {
  font-size: 1rem;
  color: #64748b;
}

.verification-question {
  padding: 0.5rem;
  /* Reduced from 0.75rem */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  font-weight: 400;
}

/* Creator Notice - Standard form styling with reduced padding */
.task-details-creator-notice {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.75rem;
  /* Reduced from 1rem */
  margin-top: 1rem;
}

.creator-notice-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.creator-notice-content i {
  font-size: 1.25rem;
  color: #64748b;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.creator-notice-content strong {
  color: #374151;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.5rem;
}

.creator-notice-content p {
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

/* Task Details Info Grid - For questionnaire and task details display */
.task-details-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.task-details-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.task-details-info-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.task-details-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.task-details-info-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0;
  word-break: break-word;
}

/* Responsive adjustments for info grid */
@media (max-width: 768px) {
  .task-details-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  .task-details-info-item {
    padding: 0.75rem;
  }

  .task-details-info-label {
    font-size: 0.7rem;
  }

  .task-details-info-value {
    font-size: 0.8rem;
  }

  .task-details-metadata {
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .task-details-category-badge,
  .task-details-points-badge,
  .task-details-participants-badge,
  .task-details-date-badge {
    padding: 0.15rem 0.375rem;
    font-size: 0.65rem;
    border-radius: 4px;
  }
}

/* Enhanced Sort Dropdown Styles */
.tasks-hub-sort-controls select {
  position: relative;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  min-width: 140px;
  font-weight: 500;
}

.tasks-hub-sort-controls select:hover {
  border-color: #3b82f6;
  background-color: #f8fafc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tasks-hub-sort-controls select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* Enhanced Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0 1rem 0;
  margin-top: auto;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.pagination-btn:hover {
  border-color: #3b82f6;
  background-color: #f0f9ff;
  color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.pagination-btn.active {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.pagination-btn.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn:disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
}

/* Prevent task disappearing on click - Updated to match modern card styling */
.task-card-wrapper {
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.75rem;
}

/* Selected state styling for task cards */
.task-card-wrapper.selected .task-card,
.task-card-wrapper.selected .task-card-modern {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .pagination-container {
    padding: 1.5rem 0 1rem 0;
    gap: 0.25rem;
  }

  .pagination-btn {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }

  .tasks-hub-sort-controls select {
    min-width: 120px;
    font-size: 0.8rem;
  }
}

/* =================================================================
 * CRITICAL OVERRIDES FOR STICKY BEHAVIOR
 * These override any conflicting styles to ensure sticky elements work
 * ================================================================= */

/* Ensure BasePageLayout doesn't interfere with sticky positioning */
.base-page-layout {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
}

.page-container {
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  padding-top: 2rem;
}

/* CRITICAL: Ensure tasks hub container allows sticky positioning */
.tasks-hub-container {
  position: relative !important;
  overflow-y: auto !important;
  /* Must have scrolling for sticky to work */
  overflow-x: hidden !important;
  height: 100vh !important;
  min-height: 95vh !important;
  max-height: 95vh !important;
}

/* CRITICAL: Header must be sticky with highest z-index */
.tasks-hub-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  width: 100% !important;
}

/* CRITICAL: Task details column must be sticky */
.tasks-hub-task-details-column {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 150px !important;
  /* Below header */
  z-index: 90 !important;
  height: calc(100vh - 170px) !important;
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  background: white !important;
  /* border: 1px solid #e2e8f0 !important; */
  border-radius: 12px !important;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; */
}

/* CRITICAL: Task details placeholder must also be sticky */
.tasks-hub-task-details-placeholder {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

.tasks-hub-task-details-placeholder-content {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 320px;
}

.tasks-hub-task-details-placeholder-content i {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
  display: block;
}

.tasks-hub-task-details-placeholder-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.75rem 0;
}

.tasks-hub-task-details-placeholder-content p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Ensure task list column doesn't interfere with sticky details */
.tasks-hub-task-list-column {
  position: relative !important;
  overflow: hidden !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Custom scrollbar for task details */
.tasks-hub-task-details-column::-webkit-scrollbar {
  width: 8px;
}

.tasks-hub-task-details-column::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}

.tasks-hub-task-details-column::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
  border: 2px solid #f8fafc;
}

.tasks-hub-task-details-column::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Ensure no parent container blocks sticky positioning */
body,
html,
#root,
.App {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* =================================================================
 * COMPACT HEADER OPTIMIZATION
 * ================================================================= */

/* Make tabs more compact */
.tasks-hub-tab {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 4px;
}

.tasks-hub-tab-count {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 10px;
}

/* Compact search input */
.tasks-hub-search-input {
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  font-size: 0.875rem;
}

.tasks-hub-search-icon {
  font-size: 1rem;
  left: 0.875rem;
}

/* Compact location filter */
.tasks-hub-location-filter {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

/* Compact filter controls */
.tasks-hub-filter-controls {
  flex-shrink: 0;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

/* Ensure proper alignment on all screen sizes */
@media (min-width: 768px) {
  .tasks-hub-tabs {
    align-items: center;
  }

  .tasks-hub-tabs-container {
    flex-wrap: nowrap;
    overflow-x: visible;
  }
}

/* Optimize for tablet landscape */
@media (min-width: 768px) and (max-width: 1199px) {
  .tasks-hub-header-content {
    padding: 0.5srem 2rem;
    padding: 0.5srem var(--tasks-hub-container-padding);
  }

  .tasks-hub-search-section {
    margin-bottom: 1rem;
    gap: 0.875rem;
  }

  .tasks-hub-tabs {
    gap: 0.75rem;
  }

  .tasks-hub-tab {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .tasks-hub-filter-select-compact,
  .tasks-hub-sort-select {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.625rem;
    padding-right: 2rem;
  }
}

/* Horizontal Task Details Layout for screens < 917px */
@media (max-width: 916px) {

  /* Task item with horizontal layout */
  .tasks-hub-task-item.compact-layout {
    margin-bottom: 1.5rem;
  }

  /* Task row - horizontal layout container */
  .tasks-hub-task-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
  }

  /* Task card in horizontal layout */
  .tasks-hub-task-row .tasks-hub-task-card {
    flex: 0 0 320px;
    /* Fixed width for task card */
    min-width: 320px;
    margin-bottom: 0;
  }

  /* Horizontal task details */
  .tasks-hub-task-details-horizontal {
    flex: 1 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: -webkit-fit-content;
    min-height: fit-content;
  }

  /* Task details header in horizontal layout */
  .tasks-hub-task-details-horizontal .tasks-hub-task-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Task details title in horizontal layout */
  .tasks-hub-task-details-horizontal .tasks-hub-task-details-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex: 1 1;
    padding-right: 1rem;
  }

  /* Task details controls in horizontal layout */
  .tasks-hub-task-details-horizontal .tasks-hub-task-details-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Task details content in horizontal layout */
  .tasks-hub-task-details-horizontal .tasks-hub-task-details-content {
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .tasks-hub-task-details-horizontal .tasks-hub-task-details-content.expanded {
    max-height: none;
    opacity: 1;
    padding: 1rem;
  }

  .tasks-hub-task-details-horizontal .tasks-hub-task-details-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
  }
}

/* Mobile adjustments for horizontal layout */
@media (max-width: 768px) {
  .tasks-hub-task-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .tasks-hub-task-row .tasks-hub-task-card {
    flex: none;
    min-width: auto;
    width: 100%;
  }

  .tasks-hub-task-details-horizontal {
    width: 100%;
  }
}

/* Very small screens - stack vertically */
@media (max-width: 480px) {
  .tasks-hub-task-details-horizontal .tasks-hub-task-details-header {
    padding: 0.5rem 0.75rem;
  }

  .tasks-hub-task-details-horizontal .tasks-hub-task-details-title {
    font-size: 0.95rem;
  }

  .tasks-hub-task-details-horizontal .tasks-hub-task-details-content.expanded {
    padding: 0.75rem;
  }
}

/* Ensure proper layout switching */
@media (min-width: 917px) {

  /* Reset horizontal layout styles for larger screens */
  .tasks-hub-task-row {
    display: block;
  }

  .tasks-hub-task-details-horizontal {
    display: none;
  }
}

/* Task details toggle and close buttons */
.tasks-hub-task-details-toggle,
.tasks-hub-task-details-close {
  background: none;
  border: 1px solid #d1d5db;
  color: #6b7280;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.tasks-hub-task-details-toggle:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}

.tasks-hub-task-details-close:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Override two-column layout for small screens */
@media (max-width: 916px) {
  .tasks-hub-main-two-column {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 1rem 1rem 1rem;
    /* Reduce horizontal padding on mobile */
  }

  .tasks-hub-task-list-column {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
  }

  .tasks-hub-task-details-column {
    display: none !important;
  }

  /* Ensure task cards use full width on mobile */
  .tasks-hub-task-row .tasks-hub-task-card {
    flex: 1 1 !important;
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* Adjust horizontal task details to use remaining space properly */
  .tasks-hub-task-details-horizontal {
    flex: 1 1 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 480px) {
  .tasks-hub-main-two-column {
    padding: 0 0.5rem 0.5rem 0.5rem;
    /* Even less padding on very small screens */
  }

  .tasks-hub-header-content {
    padding: 0.5rem 0.5rem;
  }

  /* Make task cards even more compact on very small screens */
  .tasks-hub-task-row .tasks-hub-task-card {
    flex: 0 0 240px;
    /* Smaller fixed width for very small screens */
    min-width: 240px;
    max-width: 280px;
  }

  /* Keep search section in one row for mobile to save space - override larger breakpoint */
  .tasks-hub-search-section {
    flex-direction: row !important;
    gap: 0.5rem;
    align-items: center;
  }

  .tasks-hub-search-bar {
    flex: 1 1;
    min-width: 0;
    /* Allow shrinking */
    max-width: none;
  }

  .tasks-hub-search-input {
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    font-size: 0.9rem;
  }

  .tasks-hub-location-filter {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .create-task-stat {
    flex-shrink: 0;
    min-width: auto;
  }

  .stat-icon-small {
    width: 2rem;
    height: 2rem;
  }

  .stat-text-small {
    display: none;
    /* Hide "New" text on very small screens */
  }

  /* Stack filter controls on very small screens */
  .tasks-hub-filter-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tasks-hub-filter-select-compact {
    min-width: 100px;
  }
}

/* Ensure horizontal scrolling doesn't occur */
@media (max-width: 916px) {
  body {
    overflow-x: hidden;
  }

  .tasks-hub-container {
    overflow-x: hidden;
  }

  /* Ensure task rows don't overflow */
  .tasks-hub-task-row {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .tasks-hub-task-row::-webkit-scrollbar {
    height: 4px;
  }

  .tasks-hub-task-row::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  .tasks-hub-task-row::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 2px;
  }
}

/* Additional mobile responsive improvements */
@media (max-width: 916px) and (min-width: 481px) {

  /* Reduce header padding on mobile */
  .tasks-hub-header-content {
    padding: 0.5rem 1rem;
  }

  /* Make search section more mobile-friendly - only for screens larger than 480px */
  .tasks-hub-search-section {
    /* flex-direction: column; */
    gap: 0.75rem;
    padding-top: 0.75rem;
  }

  .tasks-hub-search-bar {
    max-width: 100%;
  }

  /* Stack filter controls on mobile */
  .tasks-hub-filter-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Make tabs more mobile-friendly */
  .tasks-hub-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .tasks-hub-tabs-container {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Adjust task list header padding */
  .tasks-hub-task-list-header {
    padding: 1rem 0 0.75rem 0;
  }


}

/*
 Mobile optimization for search section - Force horizontal layout on small screens */
@media (max-width: 480px) {

  /* Override any previous rules and force horizontal layout */
  .tasks-hub-search-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.75rem !important;
  }

  /* Make search bar flexible */
  .tasks-hub-search-bar {
    flex: 1 1 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Compact search input */
  .tasks-hub-search-input {
    padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
    font-size: 0.9rem !important;
  }

  /* Compact location filter */
  .tasks-hub-location-filter {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Compact create task button */
  .create-task-stat {
    flex-shrink: 0 !important;
    min-width: auto !important;
  }

  .stat-icon-small {
    width: 2rem !important;
    height: 2rem !important;
  }

  .stat-text-small {
    display: none !important;
    /* Hide "New" text on very small screens */
  }

  /* Reduce header padding */
  .tasks-hub-header-content {
    padding: 0.5rem 0.5rem !important;
  }

  /* Make results info stack on very small screens */
  .tasks-hub-results-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .tasks-hub-sort-controls {
    align-self: flex-end !important;
  }
}

/* Task List Content - Scrollable wrapper */
.tasks-hub-task-list-content {
  flex: 1 1 !important;
  /* overflow-y: auto !important; */
  overflow-x: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
  /* Allow flex shrinking */
  height: 0 !important;
  /* Force flex item to respect parent height */
  position: relative !important;
}

/* Ensure tasks grid doesn't interfere with scrolling */
.tasks-hub-task-list-content .tasks-grid {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Custom scrollbar for task list content */
.tasks-hub-task-list-content::-webkit-scrollbar {
  width: 8px;
}

.tasks-hub-task-list-content::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.tasks-hub-task-list-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tasks-hub-task-list-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Firefox scrollbar */
.tasks-hub-task-list-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}
/* Compact Tasks Header - More space for task list and details */

.compact-tasks-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  z-index: 50;
  transition: all 0.2s ease;
  padding: 2rem 0 1rem 0; /* Increased top padding for more gap */
}

.compact-tasks-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

.compact-header-content {
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Compact title section */
.compact-title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.compact-title-section > div:first-child {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1;
}

.compact-title-section .compact-stats-mini {
  margin-left: auto;
  margin-right: 1rem;
}

.compact-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.compact-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #6b7280;
  gap: 0.5rem;
}

.compact-breadcrumb-separator {
  color: #d1d5db;
}

/* Compact action button */
.compact-action-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white!important;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.compact-action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  color: white;
}

/* Compact controls section */
.compact-controls-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Compact type buttons */
.compact-type-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1;
}

.compact-type-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

.compact-type-button:hover {
  border-color: #d1d5db;
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.compact-type-button.active {
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.compact-type-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}

.compact-type-button.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #e5e7eb;
  background: #f9fafb;
}

.compact-type-button-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.compact-type-button-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}

.compact-type-button-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  line-height: 1;
  min-width: 1.25rem;
  text-align: center;
}

.compact-type-button:not(.active) .compact-type-button-count {
  background: #f3f4f6;
  color: #6b7280;
}

/* Compact search and filters */
.compact-search-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  justify-content: flex-end;
}

.compact-search-bar {
  position: relative;
  width: 350px; /* Made hint text box wider */
}

.compact-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.875rem;
}

.compact-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: all 0.2s ease;
}

.compact-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.compact-filter-dropdown {
  min-width: 120px;
}

/* Tooltip for hover hints with improved positioning */
.compact-tooltip {
  position: relative;
}

.compact-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  pointer-events: none;
  max-width: 400px; /* Wider hint text box */
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile-specific tooltip adjustments */
@media (max-width: 768px) {
  .compact-tooltip::after {
    position: fixed;
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  
  .compact-tooltip::before {
    position: fixed;
    bottom: auto;
    top: calc(100% + 2px);
    border-bottom-color: rgba(31, 41, 55, 0.95);
    border-top-color: transparent;
  }
}

.compact-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(31, 41, 55, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.compact-tooltip:hover::after,
.compact-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Enhanced button hover effects */
.compact-type-button:hover:not(.disabled) {
  border-color: #d1d5db;
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.compact-type-button.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Compact Stats Mini - For header quick stats */
.compact-stats-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-item-mini {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 80px;
}

.stat-item-mini.earnings {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.stat-item-mini.earnings .stat-number-mini {
  color: #059669;
}

.stat-item-mini.earnings .stat-label-mini {
  color: #065f46;
}

.stat-number-mini {
        font-size: 0.65rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.stat-label-mini {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Responsive adjustments for compact stats */
@media (max-width: 768px) {
  .compact-stats-mini {
    gap: 0.5rem;
  }
  
  .stat-item-mini {
    min-width: 70px;
    padding: 0.375rem 0.5rem;
  }
  
  .stat-number-mini {
    font-size: 0.875rem;
  }
  
  .stat-label-mini {
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .compact-title-section {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  .compact-stats-mini {
    align-self: stretch;
    justify-content: space-between;
  }
}

/* Responsive design */
@media (max-width: 1200px) {
  .compact-header-content {
    padding: 0 1.5rem;
  }
  
  .compact-search-bar {
    width: 300px; /* Wider for better usability */
  }
}

@media (max-width: 968px) {
  .compact-controls-section {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .compact-type-buttons {
    justify-content: center;
  }
  
  .compact-search-filters {
    justify-content: center;
  }
  
  .compact-search-bar {
    width: 100%;
    max-width: 400px; /* Wider hint text box for tablets */
  }
}

@media (max-width: 640px) {
  .compact-tasks-header {
    padding: 0.25rem 0 0.25rem 0; /* Much more compact padding for mobile */
  }
  
  .compact-header-content {
    padding: 0 1rem; /* Reduced horizontal padding */
    gap: 0.25rem; /* Much smaller gap between sections */
  }
  
  .compact-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem; /* Much smaller gap */
  }
  
  /* Hide breadcrumb on mobile to save space */
  .compact-breadcrumb {
    display: none;
  }
  
  .compact-page-title {
    font-size: 1.125rem; /* Smaller title */
    margin-bottom: 0;
  }
  
  /* More compact stats - make them horizontal single line */
  .compact-stats-mini {
    gap: 0.25rem;
    width: 100%;
    justify-content: space-between;
  }
  
  .stat-item-mini {
    min-width: auto;
    padding: 0.25rem 0.5rem; /* Adjust padding for horizontal layout */
    border-radius: 4px;
    flex-direction: row; /* Make horizontal */
    gap: 0.375rem; /* Gap between number and label */
  }
  
  .stat-number-mini {
    font-size: 0.875rem; /* Slightly larger for readability */
  }
  
  .stat-label-mini {
    font-size: 0.65rem; /* Smaller labels */
    text-transform: uppercase;
    white-space: nowrap; /* Prevent line breaks */
  }
  
  /* Fit 4 buttons in one row with smaller size */
  .compact-type-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns instead of 2 */
    grid-gap: 0.25rem;
    gap: 0.25rem; /* Smaller gap */
    width: 100%;
  }
  
  .compact-type-button {
    justify-content: center;
    padding: 0.375rem 0.125rem; /* Much smaller padding */
    position: relative;
    font-size: 0.7rem; /* Smaller font */
    border-radius: 6px; /* Smaller border radius */
  }
  
  .compact-type-button-label {
    font-size: 0.65rem; /* Smaller label */
  }
  
  .compact-type-button-count {
    font-size: 0.6rem; /* Smaller count */
    padding: 0.05rem 0.25rem;
    min-width: 0.8rem;
  }
  
  /* Put filters on same row with smaller elements */
  .compact-search-filters {
    flex-direction: row; /* Change back to row */
    gap: 0.375rem;
    width: 100%;
  }
  
  .compact-search-bar {
    flex: 1 1; /* Take remaining space */
    min-width: 0;
  }
  
  .compact-search-input {
    font-size: 0.75rem; /* Smaller font */
    padding: 0.375rem 0.5rem 0.375rem 1.75rem; /* Smaller padding */
    border-radius: 4px; /* Smaller border radius */
  }
  
  .compact-search-icon {
    font-size: 0.75rem; /* Smaller icon */
    left: 0.5rem;
  }
  
  .compact-filter-dropdown {
    flex-shrink: 0;
    min-width: 80px; /* Smaller minimum width for dropdowns */
  }
  
  .compact-filter-dropdown select,
  .compact-filter-dropdown button {
    font-size: 0.75rem; /* Smaller dropdown text */
    padding: 0.375rem 0.5rem; /* Smaller dropdown padding */
    border-radius: 4px;
  }
  
  /* Remove hint icons to save space */
  .compact-type-button::before {
    display: none;
  }
}

@media (max-width: 1200px) {
  .compact-title-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .compact-title-section > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
  
  .compact-title-section .compact-stats-mini {
    margin: 0;
    align-self: stretch;
    justify-content: flex-start;
  }
  
  .compact-action-button {
    align-self: stretch;
    justify-content: center;
  }
}

/* Task Card Wrapper Styles - Used across all task-related pages */

/* Task Card Wrapper - Base styling for task card containers */
.task-card-wrapper {
  transition: all 0.3s ease;
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

.task-card-wrapper:hover:not(.selected) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  background: #f8fafc;
  border: 2px solid #93c5fd;
}

.task-card-wrapper.selected {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8faff, #ffffff);
}

/* Enhanced focus states for accessibility */
.task-card-wrapper:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Publisher task card specific enhancements */
.publisher-task-card .submission-stats {
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.task-card-wrapper:hover .publisher-task-card .submission-stats {
  transform: scale(1);
}

/* Task verification icon animations */
.task-verification-icon {
  transition: all 0.2s ease;
}

.task-card-wrapper:hover .task-verification-icon {
  transform: scale(1.1);
  color: #1d4ed8 !important;
}

/* Remove any conflicting hover transforms from individual cards */
.tasks-hub-container .task-card-wrapper:hover .task-card,
.tasks-hub-container .task-card-wrapper:hover .task-card-modern {
  transform: none !important;
}

.tasks-hub-container .task-card-wrapper.selected .task-card,
.tasks-hub-container .task-card-wrapper.selected .task-card-modern {
  transform: none !important;
}

/* Ensure task cards have consistent styling */
.tasks-hub-container .task-card-wrapper .task-card,
.tasks-hub-container .task-card-wrapper .task-card-modern {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tasks-hub-container .task-card-wrapper:hover .task-card,
.tasks-hub-container .task-card-wrapper:hover .task-card-modern {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.tasks-hub-container .task-card-wrapper.selected .task-card,
.tasks-hub-container .task-card-wrapper.selected .task-card-modern {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Staggered animation for task lists */
.tasks-grid .task-card-wrapper {
  animation: slideInUp 0.3s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.tasks-grid .task-card-wrapper:nth-child(1) {
  animation-delay: 0.1s;
}

.tasks-grid .task-card-wrapper:nth-child(2) {
  animation-delay: 0.2s;
}

.tasks-grid .task-card-wrapper:nth-child(3) {
  animation-delay: 0.3s;
}

.tasks-grid .task-card-wrapper:nth-child(4) {
  animation-delay: 0.4s;
}

.tasks-grid .task-card-wrapper:nth-child(5) {
  animation-delay: 0.5s;
}

.tasks-grid .task-card-wrapper:nth-child(n+6) {
  animation-delay: 0.6s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth card selection animation */
.task-card-wrapper.selected {
  animation: cardSelected 0.3s ease-out;
}

@keyframes cardSelected {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    background: white;
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
    border: 2px solid #3b82f6;
  }

  100% {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border: 2px solid #3b82f6;
    background: linear-gradient(145deg, #f8faff, #ffffff);
  }
}

/* Task Hub specific layout styles */
.tasks-hub-task-details-column {
  position: relative;
}

/* Professional empty state enhancements */
.tasks-hub-empty-state {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  margin: 2rem 0;
}

.tasks-hub-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
  animation: floatUp 3s ease-in-out infinite;
}

.tasks-hub-empty-state h4 {
  color: #334155;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.25rem;
}

.tasks-hub-empty-state p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
}

@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Professional card grid spacing */
.tasks-hub-task-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Enhanced responsive behavior */
@media (max-width: 768px) {
  .task-card-wrapper {
    margin-bottom: 0.5rem;
  }
  
  .task-card-wrapper:hover:not(.selected) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  .task-card-wrapper.selected {
    transform: translateY(-1px) scale(1.01);
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .task-card-wrapper,
  .task-card-wrapper.selected,
  .tasks-hub-empty-icon,
  .tasks-grid .task-card-wrapper {
    animation: none;
    transition: none;
  }
  
  .task-card-wrapper:hover:not(.selected) {
    transform: none;
  }
  
  .task-card-wrapper.selected {
    transform: none;
  }
}

/* TaskTakerPage.css */

.tasks-hub-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.compact-tasks-header {
  flex-shrink: 0;
  /* The existing styles for the header will be preserved */
}

.tasks-hub-main-container {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.tasks-hub-task-list-column {
  flex: 1 1;
  overflow-y: auto;
  padding-right: 1rem; /* Add some spacing */
}

/* SEEK-style overlay for task details */
.task-detail-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 16px rgba(0,0,0,0.08);
  overflow-y: auto;
  z-index: 10;
  transition: transform 0.3s ease;
  transform: translateX(100%);
  /* Hidden by default */
}

.details-active .task-detail-panel {
  transform: translateX(0);
}

.details-active .tasks-hub-task-list-column {
  pointer-events: none;
  filter: blur(2px);
}

@media (max-width: 900px) {
  .task-detail-panel {
    width: 100vw;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    border-radius: 0;
  }
}

/* PublisherPage.css - Slide-out Detail Panel (matching TaskTakerPage design) */

.tasks-hub-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.compact-tasks-header {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* The existing styles for the header will be preserved */
}

.tasks-hub-main-container {
  display: flex;
  flex-grow: 1;
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
  padding: 1rem;
  min-height: auto;
}

.tasks-hub-task-list-column {
  width: 50%;
  max-width: 600px;
  /* margin: 0 auto; */
  overflow: visible;
  transition: all 0.3s ease;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  height: auto;
}

/* When detail panel is open, grey out and blur the task list */
.tasks-hub-main-container.detail-panel-open .tasks-hub-task-list-column {
  filter: blur(0px) brightness(0.85);
  pointer-events: none;
  opacity: 0.8;
}

/* Overlay that covers the task list when detail panel is open */
.task-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  cursor: pointer;
}

/* Task Detail Panel - slides from right */
.task-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  min-width: 600px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.task-detail-panel.panel-open {
  transform: translateX(0);
}

.task-detail-header {
  flex-shrink: 0;
  margin-top: 50px;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  width: 100%;
  box-sizing: border-box;
}

.task-detail-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  position: relative;
}

.task-detail-title-area {
  flex: 1 1;
  min-width: 0;
}

.task-detail-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  word-wrap: break-word;
}

.task-detail-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.task-detail-category-badge,
.task-detail-points-badge,
.task-detail-participants-badge,
.task-detail-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #4b5563;
}

.task-detail-category-badge {
  background: #dbeafe;
  color: #1e40af;
}

.task-detail-points-badge {
  background: #fef3c7;
  color: #d97706;
}

.task-detail-participants-badge {
  background: #d1fae5;
  color: #047857;
}

.task-detail-date-badge {
  background: #f3e8ff;
  color: #7c3aed;
}

.task-detail-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
}

/* Desktop: Keep original layout */
@media (min-width: 901px) {
  .task-detail-header-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .task-detail-title-area {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .task-detail-header-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
}

.task-detail-action-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.task-detail-action-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.task-detail-action-btn.new-tab:hover {
  background: #dbeafe;
  color: #2563eb;
}

.close-detail-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.close-detail-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.close-detail-btn i {
  font-size: 1.1rem;
}

.task-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Make the TaskDetails component fill the remaining space and scroll */
.task-detail-content > div:last-child {
  flex: 1 1;
  overflow-y: auto;
}

/* Override task list content scrolling - let main container handle all scrolling */
.tasks-hub-task-list-content {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  flex: none !important;
  position: static !important;
}

/* Override task list column to prevent internal scrolling */
.tasks-hub-task-list-column {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Override team list column styles that might be inherited */
.team-list-column {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Ensure task cards container allows natural flow */
.tasks-hub-task-cards {
  overflow: visible !important;
  height: auto !important;
}

/* Remove any scrollbar styling that might interfere */
.tasks-hub-task-list-content::-webkit-scrollbar {
  display: none !important;
}

.tasks-hub-task-list-column::-webkit-scrollbar {
  display: none !important;
}

.team-list-column::-webkit-scrollbar {
  display: none !important;
}

/* Mobile responsiveness */
@media (max-width: 1200px) {
  .task-detail-panel {
    width: 60vw;
    min-width: 500px;
  }
  
  .tasks-hub-task-list-column {
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .task-detail-panel {
    width: 100vw;
    min-width: 0;
    min-width: initial;
    left: 0;
  }
  
  .task-detail-header {
    padding: 1rem 1.5rem;
  }
  
  .task-detail-header-main {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .task-detail-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }
  
  .task-detail-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    flex: 1 1;
    min-width: 0;
  }
  
  .task-detail-metadata {
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
  }
  
  .task-detail-category-badge,
  .task-detail-points-badge,
  .task-detail-participants-badge,
  .task-detail-date-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
  
  .task-detail-header-actions {
    align-self: flex-start;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: 0;
  }
  
  .tasks-hub-task-list-column {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
  }
  
  .tasks-hub-main-container {
    padding: 0.5rem;
    overflow: visible;
  }
}

/* ResponsiveContainer Component Styles */
.responsive-container {
  width: 100%;
  margin: 0 auto;
  padding: 70px 15px 15px; /* Added top padding to account for fixed navbar */
  box-sizing: border-box;
}

/* Mobile (default) */
.responsive-container {
  max-width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .responsive-container {
    max-width: 720px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .responsive-container {
    max-width: 960px;
  }
}

/* Large Desktop */
@media (min-width: 1200px) {
  .responsive-container {
    max-width: 1140px;
  }
}

/* TaskDetailPage Styles */
.task-detail-page {
  padding: 30px 0;
}

.task-detail-card {
  background-color: #ffffff;
  border-radius: 12px;
  /* padding: 24px; */
  margin-bottom: 24px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.task-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.task-detail-title {
  margin-bottom: 8px;
  color: #333;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.task-detail-status {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
}

.task-detail-status-pending {
  background-color: #ffc107;
}

.task-detail-status-in-progress {
  background-color: #2196f3;
}

.task-detail-status-pending-verification {
  background-color: #9c27b0;
}

.task-detail-status-completed {
  background-color: #4caf50;
}

.task-detail-status-rejected {
  background-color: #f44336;
}

.task-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.task-detail-info-item {
  display: flex;
  flex-direction: column;
}

.task-detail-info-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.task-detail-info-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.task-detail-points {
  color: #4caf50;
  font-weight: bold;
}

.task-detail-description {
  margin-bottom: 24px;
  line-height: 1.6;
}

.task-detail-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
  gap: 8px;
}

.task-detail-tag {
  background-color: #e0e0e0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
}

.task-detail-instructions {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  /* border-left: 4px solid #2196F3; */
}

.task-detail-instructions-title {
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.task-detail-instructions-title i {
  margin-right: 8px;
  color: #2196f3;
}

.task-detail-verification {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.task-detail-verification i {
  margin-right: 8px;
  font-size: 18px;
}

.task-detail-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.task-detail-back-link {
  display: block;
  margin-bottom: 16px;
  color: #666;
  text-decoration: none;
}

.task-detail-back-link:hover {
  color: #4361ee;
}

.task-detail-back-link i {
  margin-right: 6px;
}

/* Task Management Section Alignment */
.task-management-section {
  margin-bottom: 24px;
  padding: 0; /* Remove any default padding to align with other fields */
}

.task-management-section .alert {
  margin-bottom: 16px;
  margin-left: 0; /* Ensure left alignment */
  margin-right: 0; /* Ensure right alignment */
}

.task-management-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: 0; /* Ensure left alignment */
}

/* Task Creator Notice Alignment */
.task-detail-creator-notice {
  margin-bottom: 24px;
  padding: 0; /* Remove any default padding to align with other fields */
  /* margin-left: 15px; Match ResponsiveContainer padding for alignment */
  margin-right: 15px; /* Match ResponsiveContainer padding for alignment */
}

.task-detail-creator-notice .alert {
  margin-bottom: 0;
  margin-left: 0; /* Ensure left alignment */
  margin-right: 0; /* Ensure right alignment */
}

/* Submission and Review Styles */
.user-submission-section,
.submissions-section {
  margin-top: 30px;
}

.submission-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* border-left: 4px solid #4361ee; */
}

.submission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.submission-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.submission-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.submission-username {
  font-weight: 500;
  font-size: 16px;
  color: #333;
}

.submission-status {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
}

.submission-status-pending {
  background-color: #ffc107;
}

.submission-status-approved {
  background-color: #4caf50;
}

.submission-status-rejected {
  background-color: #f44336;
}

.submission-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.submission-proof {
  margin-bottom: 20px;
}

.proof-item {
  margin-bottom: 16px;
}

.screenshot-container {
  margin-top: 10px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.proof-screenshot {
  max-width: 100%;
  height: auto;
  display: block;
}

.api-response {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 14px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.submission-feedback {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-top: 16px;
}

.review-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.review-form {
  margin-top: 16px;
}

.review-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.submission-actions {
  margin-top: 20px;
}

/* Enhanced submission review styles for TaskDetailPage */
.reviewed-submissions-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.reviewed-submissions-header {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid #e2e8f0;
}

.reviewed-submissions-header:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.reviewed-submissions-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #4b5563;
}

.reviewed-submissions-header i {
  margin-right: 0.5rem;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.reviewed-submissions-content {
  padding: 1rem;
  background: white;
}

.submission-card.reviewed {
  opacity: 0.9;
  border-left: 4px solid #6b7280;
  background: #f9fafb;
}

.submission-card.current {
  border: 2px solid #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
}

.submission-card.current::before {
  content: '📝 Current Review';
  position: absolute;
  top: -10px;
  left: 1rem;
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pending-submissions-section {
  background: white;
  border: 2px solid #3b82f6;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.pending-submissions-section h4 {
  color: #1e40af;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.pending-submissions-section h4::before {
  content: '⏳';
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

.no-submissions {
  text-align: center;
  padding: 3rem 2rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
}

.no-submissions i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #9ca3af;
}

.no-submissions p {
  font-size: 1.125rem;
  margin: 0;
}

/* Enhanced navigation styles */
.submission-navigation {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-info {
  font-weight: 600;
  color: #1e40af;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

.submission-navigation .btn {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.submission-navigation .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.submission-navigation .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Modal backdrop adjustments */
.modal.show {
  display: block !important;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Alert styling in modals */
.modal-body .alert {
  margin-bottom: 1rem;
}

.modal-body ul {
  padding-left: 1.25rem;
}

.modal-body ul li {
  margin-bottom: 0.25rem;
}

/* Special styling for submissions rejected due to task being full */
.submission-rejected-full {
  border-left-color: #f44336 !important;
  background-color: #ffeaea !important;
}

.submission-rejected-full .submission-status-rejected {
  background-color: #f44336;
}

.update-disabled-message {
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.update-disabled-message p {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

.update-disabled-message .bi {
  color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .task-detail-header {
    flex-direction: column;
  }
  
  .task-detail-actions {
    flex-direction: column;
  }
  
  .task-detail-info {
    grid-template-columns: 1fr;
  }
  
  .review-actions {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .task-management-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .task-management-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .submission-navigation {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .pending-submissions-section {
    padding: 1rem;
  }
  
  .submission-card.current::before {
    left: 50%;
    transform: translateX(-50%);
    top: -8px;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  
  .reviewed-submissions-header {
    padding: 0.75rem 1rem;
  }
  
  .reviewed-submissions-content {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .submission-navigation .btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  
  .nav-info {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
  }
  
  .no-submissions {
    padding: 2rem 1rem;
  }
  
  .no-submissions i {
    font-size: 2rem;
  }
  
  .no-submissions p {
    font-size: 1rem;
  }
}
/* Clean Submission Review Styles */
.submissions-summary-new {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.status-count-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  min-width: 120px;
}

.status-count-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-count-item.approved {
  background: #f0f9ff;
  border-color: #22c55e;
  color: #16a34a;
}

.status-count-item.approved:hover {
  background: #dcfce7;
}

.status-count-item.rejected {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

.status-count-item.rejected:hover {
  background: #fee2e2;
}

.status-count-item.pending {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #d97706;
}

.status-count-item.pending:hover {
  background: #fef3c7;
}

.status-count-item .count {
  font-size: 1.25rem;
  font-weight: 600;
}

.status-count-item .label {
  font-size: 0.875rem;
  font-weight: 500;
}

.status-count-item i {
  font-size: 0.75rem;
  margin-left: auto;
}

.submissions-list-clean {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.submission-card-clean {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
}

.submission-header-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.submission-user-clean {
  font-weight: 500;
  color: #374151;
}

.submission-date-clean {
  font-size: 0.875rem;
  color: #6b7280;
}

.submission-proof-clean {
  margin-bottom: 0.75rem;
}

.proof-content {
  margin-bottom: 0.5rem;
}

.proof-content strong {
  color: #374151;
  margin-right: 0.5rem;
}

.proof-screenshot-clean {
  max-width: 200px;
  height: auto;
  border-radius: 4px;
  margin-top: 0.5rem;
  border: 1px solid #e5e7eb;
}

.submission-feedback-clean {
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.submission-feedback-clean strong {
  color: #374151;
}

.review-section-clean {
  border-top: 1px solid #e5e7eb;
  padding-top: 0.75rem;
}

.review-feedback-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  resize: vertical;
}

.review-feedback-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.review-actions-clean {
  display: flex;
  gap: 0.5rem;
}

.btn-approve,
.btn-reject {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-approve {
  background: #22c55e;
  color: white;
}

.btn-approve:hover {
  background: #16a34a;
}

.btn-reject {
  background: #ef4444;
  color: white;
}

.btn-reject:hover {
  background: #dc2626;
}

.status-count-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5 !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}

.status-count-item.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #f5f5f5 !important;
}
/* CreateTaskPage Styles - Matching CreateQuestionnairePage Layout */
.create-task-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  /* background: #f8fafc; */
  transition: all 0.3s ease;
  background: var(--body-bg);
}

/* Form Container - Matching CreateQuestionnairePage structure */
.form-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  align-items: start;
}

/* Header Section - Updated for new layout */
.header-with-stats {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.header-navigation {
  margin-bottom: 0.5rem;
}

.back-button {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  color: #374151;
}

.hero-compact {
  text-align: center;
}

.hero-title-compact {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.25rem 0;
}

.hero-subtitle-compact {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  margin: 0 auto;
}

/* Main Form Container - Redesigned for Better Space Usage */
.form-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Card-based Layout */
.create-task-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  min-height: calc(100vh - 8rem);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* Header Section - Combined Title and Progress */
.create-task-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
}

.create-task-title-section {
  align-self: flex-start;
}

.create-task-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.create-task-title i {
  color: #3b82f6;
  font-size: 1.25rem;
}

/* Step Progress Indicator */
.step-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  width: 100%;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
}

.step-item:hover {
  opacity: 0.8;
  background: rgba(59, 130, 246, 0.05);
}

.step-item.active {
  opacity: 1;
}

.step-number {
  width: 1.75rem;
  height: 1.75rem;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  transition: all 0.3s ease;
}

.step-item.active .step-number {
  background: #3b82f6;
  color: white;
}

.step-item.completed .step-number {
  background: #10b981;
  color: white;
}

.step-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.75rem;
}

.step-connector {
  width: 1.5rem;
  height: 2px;
  background: #e2e8f0;
  margin: 0 0.25rem;
}

/* Form Content Area - Enhanced for proper display */
.form-content {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0; /* Allow proper flex shrinking */
  overflow: hidden; /* Control overflow at this level */
  position: relative;
  margin: 1rem;
}

/* Tabbed Interface for Better Organization - DEPRECATED */
.form-tabs {
  display: none;
}

.form-tab {
  display: none;
}

/* Tab Content - Enhanced scrolling and layout */
.tab-content {
  padding: 1.5rem 2rem;
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Custom scrollbar for webkit browsers */
.tab-content::-webkit-scrollbar {
  width: 8px;
}

.tab-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form Sections - Better Spacing */
.form-section {
  margin-bottom: 1.5rem;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-icon {
  font-size: 1.25rem;
  color: #3b82f6;
}

/* Improved Form Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

.form-grid-2col {
  grid-template-columns: 1fr 1fr;
}

.form-grid-3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Form Groups - Better Spacing */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-label .required {
  color: #ef4444;
}

.form-label .help-icon {
  color: #6b7280;
  cursor: help;
  font-size: 0.75rem;
}

/* Enhanced Form Controls */
.form-control,
.form-select {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: #ffffff;
  transition: all 0.2s ease;
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  border-color: #3b82f6 !important; /* Change border to blue on focus */
  outline: 0 !important;
  box-shadow: none !important; /* Completely remove any box-shadow */
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: #cbd5e1;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* Form Helpers and Info */
.form-help {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 0.25rem;
}

.form-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: #0369a1;
}

.form-warning {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #92400e;
}

/* Points Display - Enhanced */
.points-display {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.875rem;
}

.points-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.points-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.points-cost-row {
  font-weight: 600;
  color: #1f2937;
}

.points-label {
  color: #6b7280;
  font-weight: 500;
}

.points-value {
  font-weight: 700;
  color: #1f2937;
  font-size: 1rem;
}

.points-cost {
  color: #3b82f6;
}

/* Insufficient points styling */
.points-display.insufficient-points {
  border-color: #fbbf24;
  background: #fffbeb;
}

.points-display.insufficient-points .points-cost {
  color: #dc2626;
}

.points-display.insufficient-points .points-cost-row {
  color: #dc2626;
}

/* Verification Method Cards */
.verification-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.verification-card {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
}

.verification-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.verification-card.selected {
  border-color: #3b82f6;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.verification-card.selected::after {
  content: '✓';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.verification-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.verification-icon {
  font-size: 1.25rem;
  color: #3b82f6;
}

.verification-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.verification-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.verification-details {
  background: #f8fafc;
  border-radius: 6px;
  padding: 1rem;
  border-left: 4px solid #3b82f6;
}

/* Tags Input - Enhanced */
.tags-container {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
  min-height: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: white;
  transition: border-color 0.2s ease;
}

.tags-container:focus-within {
  border-color: #3b82f6;
}

.tag-item {
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.tag-remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.tag-input {
  border: none;
  outline: none;
  padding: 0.25rem;
  font-size: 0.875rem;
  flex: 1 1;
  min-width: 120px;
  background: transparent;
}

.tag-input::placeholder {
  color: #9ca3af;
}

/* Action Buttons - Enhanced with sticky positioning */
.form-actions {
  background: white;
  /* border-top: 1px solid #e2e8f0; */
  /* padding: 1.5rem 2rem; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); */
  flex-shrink: 0; /* Prevent shrinking */
}

.btn-secondary {
  background: white;
  border: 2px solid #e2e8f0;
  color: #64748b;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  border-color: #cbd5e1;
  color: #374151;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Alert Messages */
.alert {
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* Liability Warning Component */
.liability-warning {
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}

.liability-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.liability-header i {
  font-size: 1.1rem;
}

.liability-details {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.liability-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.liability-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.liability-row.total {
  font-weight: 600;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.liability-row.remaining {
  font-size: 0.95rem;
}

.liability-row .highlight {
  color: #3b82f6;
  font-weight: 600;
}

.liability-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #991b1b;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.liability-error i {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.liability-error a {
  color: #dc2626;
  text-decoration: underline;
  font-weight: 600;
}

.liability-error a:hover {
  color: #991b1b;
}

.liability-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 6px;
  padding: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.liability-info i {
  margin-top: 0.125rem;
  flex-shrink: 0;
  color: #3b82f6;
}

.text-danger {
  color: #dc2626 !important;
  font-weight: 600;
}

.text-warning {
  color: #f59e0b !important;
  font-weight: 600;
}

.text-success {
  color: #059669 !important;
  font-weight: 600;
}

/* Form Sections - Better Organization */
.form-section {
  margin-bottom: 2rem;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-icon {
  font-size: 1.125rem;
  color: #3b82f6;
}

.points-info-row {
  margin-bottom: 0.5rem;
}

.points-info-row:last-child {
  margin-bottom: 0;
}

/* Visual continuity for 2-panel layout */
@media (min-width: 1200px) {
  .layout-section h3 {
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  
  /* Add subtle visual connection between panels */
  .form-main,
  .form-secondary {
    border: 1px solid #e5e7eb;
    position: relative;
  }
  
  .form-main::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 2px;
    background: linear-gradient(to right, #e5e7eb, transparent);
    z-index: 1;
  }
}

/* Verification method selector - flexible height */
.verification-method-selector {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Smooth scrollbar styling */
.form-main::-webkit-scrollbar,
.form-secondary::-webkit-scrollbar {
  width: 6px;
}

.form-main::-webkit-scrollbar-track,
.form-secondary::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.form-main::-webkit-scrollbar-thumb,
.form-secondary::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.form-main::-webkit-scrollbar-thumb:hover,
.form-secondary::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Focus states for better accessibility */
.form-control:focus,
.form-select:focus,
.verification-method-option:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Loading states */
.form-main.loading,
.form-secondary.loading {
  pointer-events: none;
  opacity: 0.6;
}

/* Form panel height balancing */
.form-main .create-task-form {
  min-height: 100%;
}

.form-main .layout-section:last-of-type {
  flex-grow: 1;
}

/* Responsive Design - Optimized for Efficiency */
@media (min-width: 1600px) {
  .form-container {
    max-width: 1600px;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

/* Remove old responsive styles that conflict with new layout */

.create-task-card {
  background-color: #ffffff;
  border-radius: 12px;
  /* padding: 24px; */
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.create-task-title {
  margin-bottom: 24px;
  color: #333;
}

.create-task-form-group {
  margin-bottom: 1rem;
}

.create-task-form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: #374151;
  font-size: 0.875rem;
  display: block;
}

.verification-method-selector {
  margin-bottom: 24px;
}

.verification-method-option {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fafafa;
}

.verification-method-option:hover {
  border-color: #3b82f6;
  background-color: #f0f9ff;
}

.verification-method-option.selected {
  border-color: #3b82f6;
  background-color: #eff6ff;
  box-shadow: 0 0 0 1px #3b82f6;
}

.verification-method-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

.verification-method-icon {
  font-size: 20px;
  margin-right: 10px;
  color: #4361ee;
}

.verification-method-description {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.4;
}

.verification-info {
  background-color: #f0f9ff;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  border-left: 3px solid #3b82f6;
  font-size: 0.8125rem;
}

.tags-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem;
  background-color: #fff;
  min-height: 36px;
}

.tags-input-container:focus-within {
  border-color: #4361ee;
  box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
}

.tag-item {
  display: flex;
  align-items: center;
  background-color: #e5e7eb;
  border-radius: 14px;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
}

.tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
  padding: 0 4px;
  color: #666;
}

.tag-input {
  flex: 1 1;
  border: none;
  outline: none;
  padding: 0.25rem;
  font-size: 0.8125rem;
  min-width: 80px;
}

.create-task-submit {
  margin-top: auto;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  background: #3b82f6;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.create-task-submit:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.create-task-submit:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.create-task-preview {
  margin-top: 40px;
}

.create-task-preview-title {
  margin-bottom: 16px;
  color: #333;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .create-task-card {
    padding: 16px;
  }

  .create-task-header {
    padding: 1rem;
    gap: 0.75rem;
  }

  .create-task-title {
    font-size: 1.25rem;
  }

  .step-progress {
    justify-content: space-between;
  }

  .step-item {
    gap: 0.25rem;
  }

  .step-label {
    display: none;
  }

  .step-connector {
    width: 1rem;
    margin: 0 0.125rem;
  }
}

/* Responsive Design - Mobile First Approach */

/* Large Desktop (1200px+) - Updated for High DPI */
@media (min-width: 1200px) {
  .form-container {
    padding: clamp(2rem, 4vw, 3rem);
    max-width: 100%;
    width: 100%;
  }
  
  .create-task-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  
  .tab-content {
    padding: clamp(1.5rem, 4vw, 4rem);
    height: auto;
    min-height: 0;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  
  .verification-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* Desktop (900px - 1199px) - Updated for High DPI Compatibility */
@media (min-width: 900px) and (max-width: 1199px) {
  .form-container {
    padding: clamp(1rem, 3vw, 2rem);
    max-width: 100%;
    width: 100%;
  }
  
  .create-task-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  
  .tab-content {
    padding: clamp(1.5rem, 3vw, 3rem);
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 3vw, 2rem);
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 3vw, 2rem);
  }
  
  .verification-grid {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  
  .step-progress {
    padding: 4rem 2rem;
    gap: 1.5rem;
  }
  
  .hero-title-compact {
    font-size: 1.5rem;
  }
  
  .hero-subtitle-compact {
    font-size: 0.875rem;
  }
}

/* Tablet (768px - 899px) */
@media (min-width: 768px) and (max-width: 899px) {
  .form-container {
    padding: 1.5rem;
    max-width: 100%;
  }
  
  .header-content {
    padding: 0 1.5rem;
  }
  
  .create-task-card {
    max-width: 100%;
    min-width: auto;
  }
  
  .tab-content {
    padding: 2rem;
    height: auto;
    min-height: 0;
  }
  
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .verification-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .step-progress {
    padding: 4rem;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .step-connector {
    display: none;
  }
  
  .form-actions {
    padding: 1.5rem;
    flex-direction: row;
    gap: 1rem;
  }
  
  .hero-title-compact {
    font-size: 1.25rem;
  }
  
  .hero-subtitle-compact {
    font-size: 0.8125rem;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .create-task-page {
    background: #f8fafc;
  }
  
  .form-container {
    padding: 1rem;
    max-width: 100%;
  }
  
  .header-content {
    padding: 0 1rem;
  }
  
  .hero-title-compact {
    font-size: 1.125rem;
  }
  
  .hero-subtitle-compact {
    font-size: 0.75rem;
  }
  
  .create-task-card {
    border-radius: 8px;
    max-width: 100%;
    min-width: auto;
  }
  
  .step-progress {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .step-item {
    justify-content: center;
  }
  
  .step-number {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }
  
  .step-label {
    font-size: 0.75rem;
  }
  
  .step-connector {
    display: none;
  }
  
  .form-tabs {
    padding: 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .form-tab {
    padding: 0.75rem 1rem;
    white-space: nowrap;
    font-size: 0.8125rem;
  }
  
  .tab-content {
    padding: 1rem;
    height: auto;
    min-height: 0;
  }
  
  .section-title {
    font-size: 1rem;
  }
  
  .form-grid,
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .verification-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .verification-card {
    padding: 1rem;
  }
  
  .form-control,
  .form-select {
    padding: 0.75rem;
    font-size: 1rem; /* Prevent zoom on iOS */
  }
  
  .form-actions {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    justify-content: center;
  }
  
  .points-display {
    padding: 1rem;
  }
  
  .points-balance {
    font-size: 1.125rem;
  }
}

/* Extra Small Mobile (up to 480px) */
@media (max-width: 480px) {
  .form-container {
    padding: 0.5rem;
  }
  
  .header-content {
    padding: 0 0.5rem;
  }
  
  .create-task-card {
    border-radius: 4px;
  }
  
  .tab-content {
    padding: 0.75rem;
  }
  
  .form-actions {
    padding: 0.75rem;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .step-progress {
    padding: 0.5rem 1rem;
  }
  
  .tab-content {
    height: auto;
    min-height: 0;
  }
}

/* Scrollbar styling for webkit browsers */
.tab-content::-webkit-scrollbar {
  width: 4px;
}

.tab-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

.tab-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Focus trap for accessibility - Removed to prevent double highlighting when form elements are focused */
/* .create-task-card:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
} */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =================================================================
 * RESPONSIVE DESIGN ENHANCEMENTS
 * ================================================================= */

/* Large screens - optimal layout */
@media (min-width: 1400px) {
  .form-container {
    padding: 3rem;
  }
  
  .create-task-card {
    max-width: 1200px;
  }
  
  .form-actions {
    padding: 2rem 3rem;
  }
}

/* Medium-large screens */
@media (max-width: 1399px) and (min-width: 1024px) {
  .form-container {
    padding: 2rem 1.5rem;
  }
  
  .create-task-card {
    max-width: 1000px;
  }
}

/* Medium screens - tablet landscape */
@media (max-width: 1023px) and (min-width: 768px) {
  .form-container {
    padding: 1.5rem 1rem;
  }
  
  .create-task-card {
    max-width: 800px;
  }
  
  .tab-content {
    padding: 1.5rem;
  }
  
  .form-actions {
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .form-actions > div {
    flex: 1 1;
    min-width: 0;
  }
  
  .form-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Small screens - mobile */
@media (max-width: 767px) {
  .create-task-page {
    padding: 1rem 0;
  }
  
  .form-container {
    padding: 0 1rem;
    min-height: calc(100vh - 2rem);
  }
  
  .create-task-card {
    border-radius: 8px;
    margin: 0;
    min-height: calc(100vh - 4rem);
  }
  
  .step-progress {
    padding: 2rem 1rem;
    gap: 0.5rem;
  }
  
  .step-item {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .step-number {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  
  .step-label {
    font-size: 0.75rem;
    text-align: center;
  }
  
  .tab-content {
    padding: 1rem;
    height: auto;
    min-height: 0;
  }
  
  .form-actions {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .form-actions > div {
    width: 100%;
  }
  
  .form-actions button {
    width: 100%;
    justify-content: center;
  }
  
  /* Ensure form grid is single column on mobile */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .create-task-page {
    padding: 0.5rem 0;
  }
  
  .form-container {
    padding: 0 0.5rem;
  }
  
  .create-task-card {
    border-radius: 4px;
    min-height: calc(100vh - 2rem);
  }
  
  .step-progress {
    padding: 1.5rem 0.75rem;
  }
  
  .tab-content {
    padding: 0.75rem;
  }
  
  .form-actions {
    padding: 0.75rem;
  }
}

/* Ensure content is always accessible */
@media (max-height: 600px) {
  .step-progress {
    padding: 1rem 2rem;
  }
  
  .form-actions {
    padding: 1rem 2rem;
  }
}

/* Very short screens */
@media (max-height: 500px) {
  .step-progress {
    padding: 0.75rem 2rem;
  }
  
  .form-actions {
    padding: 0.75rem 2rem;
  }
}

/* =================================================================
 * SIDEBAR STATE PROTECTION
 * ================================================================= */

/* Override any global sidebar styles that might affect this page */
body.sidebar-expanded .create-task-page,
body.sidebar-collapsed .create-task-page,
.sidebar-expanded .create-task-page,
.sidebar-collapsed .create-task-page {
  margin-left: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}

/* Ensure form container is not affected by sidebar */
body.sidebar-expanded .form-container,
body.sidebar-collapsed .form-container,
.sidebar-expanded .form-container,
.sidebar-collapsed .form-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 1600px !important;
}

/* Ensure create task card maintains its layout */
body.sidebar-expanded .create-task-card,
body.sidebar-collapsed .create-task-card,
.sidebar-expanded .create-task-card,
.sidebar-collapsed .create-task-card {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Force fixed positioning for critical elements */
.form-actions {
  position: -webkit-sticky !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
}

/* Ensure buttons are always accessible */
.btn-primary,
.btn-secondary {
  position: relative !important;
  z-index: 101 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* =================================================================
 * FORM DISPLAY OPTIMIZATION
 * ================================================================= */

/* Ensure all form elements are properly displayed */
.create-task-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Optimize form field spacing */
.form-group {
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Compact form labels */
.form-label {
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Compact form controls */
.form-control,
.form-select {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Compact textareas */
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

/* Compact form help text */
.form-help {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.25rem;
  color: #6b7280;
}

/* Compact verification cards */
.verification-card {
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.verification-card:last-child {
  margin-bottom: 0;
}

/* Compact verification grid */
.verification-grid {
  gap: 1rem;
}

/* Compact points display */
.points-display {
  padding: 0.875rem;
  font-size: 0.8125rem;
}

.points-row {
  padding: 0.375rem 0;
}

/* Compact tags container */
.tags-container {
  padding: 0.625rem;
  min-height: 2.25rem;
}

.tag-item {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

/* Ensure form actions are always visible */
.form-actions {
  margin-top: auto;
  flex-shrink: 0;
}

/* Compact section titles */
.section-title {
  font-size: 1rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.375rem;
}

/* Optimize form grid spacing */
.form-grid {
  gap: 1rem;
}

.form-grid-2col {
  gap: 1.25rem;
}

.form-grid-3col {
  gap: 1rem;
}

/* Ensure proper form flow */
.tab-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-pane.active {
  display: flex;
}

/* =================================================================
 * RESPONSIVE FORM OPTIMIZATION
 * ================================================================= */

/* Large screens - ensure optimal field display */
@media (min-width: 1200px) {
  .form-grid-2col {
    gap: 2rem;
  }
  
  .form-grid-3col {
    gap: 1.5rem;
  }
  
  .form-group {
    margin-bottom: 1.25rem;
  }
  
  .verification-card {
    padding: 1.5rem;
  }
}

/* Medium screens - optimize for visibility */
@media (min-width: 768px) and (max-width: 1199px) {
  .form-grid-2col {
    gap: 1.5rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

/* Small screens - single column, compact */
@media (max-width: 767px) {
  .form-grid,
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-group {
    margin-bottom: 0.875rem;
  }
  
  .verification-card {
    padding: 1rem;
  }
  
  .section-title {
    font-size: 0.9375rem;
  }
}

/* Responsive Design for new layout */
@media (max-width: 1024px) {
  .form-container {
    margin: 1rem auto;
    padding: 1rem;
  }
  
  .header-content {
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .form-container {
    margin: 0.5rem auto;
    padding: 0.5rem;
  }
  
  .header-content {
    padding: 0 0.5rem;
  }
  
  .create-task-page {
    background: white;
  }
}

@media (max-width: 480px) {
  .form-container {
    margin: 0;
    padding: 0.5rem;
  }
  
  .header-content {
    padding: 0 0.5rem;
  }
}

/* High DPI Responsive Fixes for Create Task Page (150% Scaling) */

/* Override base containers for better space utilization */
.create-task-page .page-container,
.create-task-page .main-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Core responsive breakpoints accounting for sidebar */
:root {
  /* Available width calculations for Create Task page */
  --create-task-available-width-expanded: calc(100vw - 256px - 2rem);
  --create-task-available-width-collapsed: calc(100vw - 56px - 2rem);
  --create-task-min-content-width: 800px;
}

/* High DPI specific fixes (125%, 150%, 175%, 200%) */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .create-task-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .form-container {
    width: 100%;
    max-width: 100%;
    padding: clamp(0.5rem, 2vw, 2rem);
    box-sizing: border-box;
  }
  
  .create-task-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  
  .tab-content {
    padding: clamp(1rem, 3vw, 2rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .form-grid,
  .form-grid-2col,
  .form-grid-3col {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .form-group {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .form-control,
  input,
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Critical fix for 150% DPI scaling on 1920x1080 screens */
@media (min-width: 1024px) and (max-width: 1400px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 1024px) and (max-width: 1400px) and (min-resolution: 120dpi) {
  .create-task-page {
    margin: 0;
    padding: 0;
  }
  
  .form-container {
    max-width: none;
    width: 100%;
    padding: 1rem;
    margin: 0;
    justify-content: flex-start;
  }
  
  .create-task-card {
    max-width: none;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  
  .header-content {
    max-width: none;
    width: 100%;
    padding: 0 1rem;
  }
  
  .tab-content {
    padding: 1rem;
    width: 100%;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .form-actions {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .form-actions button {
    min-width: 120px;
    flex: 1 1;
  }
}

/* Specific fixes for when sidebar is expanded at high DPI */
.app-container.sidebar-expanded .create-task-page {
  width: 100%;
  max-width: 100%;
}

.app-container.sidebar-expanded .form-container {
  max-width: calc(100vw - 256px - 2rem);
  width: 100%;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  grid-template-columns: 1fr!important;
}

.app-container.sidebar-expanded .create-task-card {
  max-width: 100%;
  width: 100%;
}

/* Responsive grid adjustments for high DPI */
@media (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1400px), (min-resolution: 120dpi) and (max-width: 1400px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr;
  }
  
  .layout-section {
    margin-bottom: 1rem;
  }
  
  .step-progress {
    padding: 0.5rem 1rem;
    gap: 1rem;
  }
  
  .step-item {
    padding: 0.25rem 0.5rem;
  }
  
  .step-label {
    display: none;
  }
  
  .step-connector {
    width: 1rem;
  }
}

/* Fix for collapsed sidebar at high DPI */
.app-container.sidebar-collapsed .create-task-page {
  width: 100%;
  max-width: 100%;
}

.app-container.sidebar-collapsed .form-container {
  max-width: calc(100vw - 56px - 1rem);
  width: 100%;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}

/* Form elements responsive behavior */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .form-control,
  .form-textarea,
  .form-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: clamp(0.5rem, 2vw, 0.75rem);
  }
  
  .form-label {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
  }
  
  .section-title {
    font-size: clamp(1rem, 3vw, 1.125rem);
  }
  
  .hero-title-compact {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
  }
}

/* Button responsive behavior for high DPI */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .form-actions {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 1rem);
  }
  
  .form-actions button {
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    min-width: 100px;
    white-space: nowrap;
  }
  
  .back-button {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    padding: clamp(0.25rem, 1vw, 0.5rem) 0;
  }
}

/* Tag input and dynamic content fixes */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .tag-container,
  .tags-display {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: wrap;
  }
  
  .tag-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  
  .verification-preview,
  .task-preview {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
  }
}

/* Ensure no horizontal scrolling */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .create-task-page,
  .create-task-page * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .create-task-page *:before,
  .create-task-page *:after {
    box-sizing: border-box;
  }
}

/* Ultra-specific fix for the problematic range */
@media (min-width: 1200px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 1200px) and (max-width: 1366px) and (min-resolution: 120dpi) {
  .form-container {
    max-width: 100%;
    padding: 1rem 0.5rem;
  }
  
  .create-task-card {
    max-width: 100%;
  }
  
  .tab-content {
    padding: 1rem 0.75rem;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Emergency override for any remaining layout issues */
@media (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1400px), (min-resolution: 120dpi) and (max-width: 1400px) {
  .create-task-page .container,
  .create-task-page .container-fluid,
  .create-task-page .row,
  .create-task-page .col {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(0.25rem, 1vw, 0.75rem) !important;
    padding-right: clamp(0.25rem, 1vw, 0.75rem) !important;
  }
}

/* Project Creation Eligibility Card Styles */
.project-creation-eligibility-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.project-creation-eligibility-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Header */
.eligibility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f3f4;
}

.eligibility-header .section-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eligibility-header .section-title i {
  color: #3498db;
  font-size: 1.1rem;
}

.eligibility-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.eligibility-badge.eligible {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.eligibility-badge.blocked {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Loading State */
.eligibility-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: #6c757d;
}

.loading-text {
  font-size: 0.95rem;
}

/* Error State */
.eligibility-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  color: #6c757d;
}

.retry-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.retry-btn:hover {
  background: #f8f9fa;
}

/* Status Display */
.eligibility-status {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 24px;
}

.eligibility-status.eligible {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 1px solid #b8dacc;
}

.eligibility-status.blocked {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border: 1px solid #f1b0b7;
}

.status-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.eligibility-status.eligible .status-icon {
  background: #28a745;
  color: white;
}

.eligibility-status.blocked .status-icon {
  background: #dc3545;
  color: white;
}

.status-content {
  flex: 1 1;
}

.status-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.eligibility-status.eligible .status-title {
  color: #155724;
}

.eligibility-status.blocked .status-title {
  color: #721c24;
}

.status-description {
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Requirements List */
.requirements-list {
  margin-bottom: 24px;
}

.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.requirement-item:last-child {
  margin-bottom: 0;
}

.requirement-item.met {
  background: #f8fff9;
  border-color: #c3e6cb;
}

.requirement-item.not-met {
  background: #fff8f8;
  border-color: #f5c6cb;
}

.requirement-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.requirement-item.met .requirement-icon {
  background: #28a745;
  color: white;
}

.requirement-item.not-met .requirement-icon {
  background: #dc3545;
  color: white;
}

.requirement-content {
  flex: 1 1;
}

.requirement-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #2c3e50;
}

.requirement-description {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 12px;
}

/* Progress Bar */
.progress-bar {
  position: relative;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 500;
}

/* Action Buttons */
.eligibility-actions {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-primary {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.btn-primary:hover {
  background: #2980b9;
  border-color: #2980b9;
  color: white;
  text-decoration: none;
}

.btn-outline-primary {
  background: transparent;
  color: #3498db;
  border-color: #3498db;
}

.btn-outline-primary:hover {
  background: #3498db;
  color: white;
  text-decoration: none;
}

/* Stats */
.eligibility-stats {
  display: flex;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #f1f3f4;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 0.9rem;
}

.stat-content {
  flex: 1 1;
}

.stat-label {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-creation-eligibility-card {
    padding: 20px;
  }
  
  .eligibility-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .eligibility-status {
    padding: 16px;
  }
  
  .requirement-item {
    padding: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .btn {
    justify-content: center;
  }
  
  .eligibility-stats {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .project-creation-eligibility-card {
    padding: 16px;
  }
  
  .eligibility-header .section-title {
    font-size: 1.1rem;
  }
  
  .status-title {
    font-size: 1rem;
  }
  
  .requirement-title {
    font-size: 0.95rem;
  }
}
/* Enhanced ProfilePage Styles - Comprehensive UI UX Redesign */

/* Profile Container */
.profile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* Enhanced Profile Header with Profile Theme */
.profile-header-section {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  color: white;
  padding: 1rem 0 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3);
  display: block;
  width: 100%;
}

.profile-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.profile-header-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/dots-pattern.svg') repeat;
  pointer-events: none;
}

.profile-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.profile-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
}

/* Profile Icon with User Theme */
.profile-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.profile-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* .profile-icon-large::before {
  content: '👤';
  font-size: 1.75rem;
  animation: profileIconSpin 3s ease-in-out infinite;
} */

.profile-icon-large:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation: profilePulse 3s ease-in-out infinite;
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: treasurePulse 2s infinite;
}

@keyframes treasurePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.profile-icon-placeholder {
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: profilePulse 3s ease-in-out infinite;
}

@keyframes profilePulse {

  0%,
  100% {
    transform: scale(2) rotateY(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.105) rotateY(180deg);
    opacity: 0.9;
  }
}

@keyframes profileIconSpin {

  0%,
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.05) rotateY(180deg);
    opacity: 0.9;
  }
}

/* Profile Info */
.profile-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
  padding: 1rem;
}

.profile-info-box {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid white;
  border-radius: 16px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.profile-info-box:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.profile-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.profile-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.profile-description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem 0;
}

.profile-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.meta-item i {
  font-size: 0.75rem;
}

/* Enhanced Responsive Design with Visual Hierarchy */
@media (max-width: 1024px) {
  .profile-hero-centered {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .profile-info {
    text-align: center;
  }

  .profile-info-box {
    text-align: center;
  }

  .profile-title-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .profile-meta {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .profile-header-content {
    padding: 0 1rem;
  }

  .profile-avatar-large {
    width: 120px;
    height: 120px;
    font-size: 3.5rem;
  }

  .profile-title-main {
    color: white;
    font-size: 2rem;
  }

  .profile-title-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .profile-handle-badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .profile-meta {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .profile-hero-centered {
    gap: 1rem;
  }

  .profile-avatar-large {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }

  .profile-title-main {
    color: white;
    font-size: 1.75rem;
  }

  .profile-handle-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }

  .profile-meta {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .meta-item {
    font-size: 0.85rem;
  }
}

/* Floating Edit Button */
.floating-edit-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.floating-edit-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
}

.floating-edit-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Wide Screen Container - Sidebar-aware */
.profile-wide-container {
  max-width: 1600px;
  padding: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0;
}

/* Main content area with Points History Page-style background */
.profile-main-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

/* Wide Screen Optimized Layout - Adjusted for Sidebar */
.profile-wide-grid {
  display: grid;
  grid-gap: 1.25rem;
  gap: 1.25rem; /* Reduced from 2rem */
  align-items: start;
  transition: all 0.3s ease;
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .profile-wide-container {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .profile-wide-container {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Adaptive Grid Layout - Responsive to Screen Width with Sidebar Consideration */
@media (min-width: 1600px) {
  .profile-wide-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem; /* Reduced from 2.5rem */
  }

  body.sidebar-expanded .profile-wide-container {
    max-width: calc(100vw - 316px);
  }

  body.sidebar-expanded .profile-wide-grid {
    grid-template-columns: 320px 1fr 300px;
    gap: 1.25rem; /* Reduced from 2rem */
  }

  body.sidebar-collapsed .profile-wide-container {
    max-width: calc(100vw - 116px);
  }

  body.sidebar-collapsed .profile-wide-grid {
    grid-template-columns: 380px 1fr 350px;
    gap: 1.5rem; /* Reduced from 2.5rem */
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .profile-wide-grid {
    grid-template-columns: 350px 1fr 320px;
    gap: 1.25rem; /* Reduced from 1.5rem */
  }

  body.sidebar-expanded .profile-wide-container {
    max-width: calc(100vw - 336px);
  }

  body.sidebar-expanded .profile-wide-grid {
    grid-template-columns: 280px 1fr 260px;
    gap: 1.25rem;
  }

  body.sidebar-collapsed .profile-wide-container {
    max-width: calc(100vw - 136px);
  }

  body.sidebar-collapsed .profile-wide-grid {
    grid-template-columns: 320px 1fr 300px;
    gap: 1.5rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .profile-wide-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .profile-panel-right {
    grid-column: 1 / -1;
  }

  body.sidebar-expanded .profile-wide-container {
    max-width: calc(100vw - 316px);
  }

  body.sidebar-expanded .profile-wide-grid {
    gap: 1.25rem;
  }

  body.sidebar-collapsed .profile-wide-container {
    max-width: calc(100vw - 116px);
  }

  body.sidebar-collapsed .profile-wide-grid {
    gap: 1.5rem;
  }
}

@media (max-width: 899px) {
  .profile-wide-container {
    padding: 1rem;
  }

  .profile-wide-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  body.sidebar-expanded .profile-wide-container,
  body.sidebar-collapsed .profile-wide-container {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
}

/* Shared Column Styles */
.profile-sidebar-left,
.profile-main-content,
.profile-sidebar-right {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 0;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Expandable Sections */
.expandable-section {
  border-bottom: 1px solid #e5e7eb;
}

.expandable-section:last-child {
  border-bottom: none;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  width: 100%;
}

.section-header:hover {
  background: rgba(59, 130, 246, 0.05);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title i {
  font-size: 1.2rem;
  color: #3b82f6;
}

.section-content {
  padding: 0 1.5rem 1.5rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Profile Completion Card */
.completion-card {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1.5rem;
  margin-bottom: 0;
}

.completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.completion-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.completion-percentage {
  font-size: 1.5rem;
  font-weight: 800;
}

.completion-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.completion-fill {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.completion-text {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Profile Edit Form */
.profile-edit-form {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background: white;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.interests-input {
  display: flex;
  gap: 0.5rem;
}

.add-btn {
  padding: 0.75rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.add-btn:hover {
  background: #2563eb;
}

.interests-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.interest-item {
  background: #e5e7eb;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remove-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  font-size: 0.7rem;
}

.remove-btn:hover {
  color: #ef4444;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-save {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1 1;
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-cancel {
  padding: 0.75rem 1.5rem;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: #4b5563;
}

/* Profile Display */
.profile-display {
  padding: 1rem 0;
}

.profile-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-mini {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
  border-radius: 12px;
}

.stat-mini .stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.25rem;
}

.stat-mini .stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}

.tier-progress {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
}

.tier-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* Activity Panel */
.activity-panel {
  padding: 2rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

/* Activity Timeline */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-timeline-compact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
  flex-shrink: 0;
}

.activity-icon.login {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.activity-icon.achievement {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.activity-icon.task {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.activity-content {
  flex: 1 1;
}

.activity-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.activity-desc {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Referral Stats Grid */
.referral-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card-ref {
  background: #f8fafc;
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card-ref:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card-ref .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-size: 1.25rem;
}

.stat-card-ref .stat-icon.points {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-card-ref .stat-icon.streak {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-card-ref .stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.25rem;
}

.stat-card-ref .stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}

/* Milestone Card */
.milestone-card {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.milestone-card h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.milestone-progress .progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.milestone-progress .progress-fill {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.milestone-progress .progress-text {
  font-size: 0.85rem;
  opacity: 0.9;
  margin: 0;
}

/* Referral Share Section */
.referral-share-section {
  margin-bottom: 1.5rem;
}

.referral-share-section h4 {
  margin: 0 0 1rem 0;
  color: #111827;
  font-size: 1.1rem;
}

.referral-code-display {
  margin-bottom: 1rem;
}

.code-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.code-box code {
  flex: 1 1;
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  background: none;
  padding: 0;
}

.copy-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.share-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.share-btn.twitter {
  background: #1da1f2;
}

.share-btn.linkedin {
  background: #0077b5;
}

.share-btn.facebook {
  background: #1877f2;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Referral Input Section */
.referral-input-section {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.referral-input-section h4 {
  margin: 0 0 0.5rem 0;
  color: #111827;
}

.referral-input-section p {
  margin: 0 0 1rem 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.referral-input-group {
  display: flex;
  gap: 0.75rem;
}

.referral-input {
  flex: 1 1;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.referral-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.apply-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Messages */
.message {
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.message.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.message.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.referral-message {
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.referral-message.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.referral-message.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #6b7280;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h5 {
  margin: 0 0 0.5rem 0;
  color: #374151;
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* Points Summary */
.points-summary {
  margin-bottom: 1.5rem;
}

.points-display {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 12px;
}

.points-number {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}

.points-number.animate {
  transform: scale(1.1);
  color: #fbbf24;
}

.points-label {
  font-size: 0.9rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Points Tabs */
.points-tabs {
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.tab-headers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #e5e7eb;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #6b7280;
}

.tab-btn.active {
  background: #3b82f6;
  color: white;
}

.tab-btn:hover:not(.active) {
  background: #d1d5db;
}

.tab-content {
  padding: 1.5rem;
}

/* Recent Transactions */
.recent-transactions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.transaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.transaction-icon.points {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.transaction-icon.task {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.transaction-icon.referral {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.transaction-details {
  flex: 1 1;
}

.transaction-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.transaction-amount {
  font-weight: 700;
  color: #10b981;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.transaction-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Earned Summary */
.earned-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.earned-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.earned-points {
  font-weight: 700;
  color: #10b981;
}

/* Referral Analytics */
.referral-analytics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ref-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ref-stat i {
  font-size: 1.5rem;
  color: #3b82f6;
}

.ref-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.ref-label {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Analytics Summary */
.analytics-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.analytics-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-number {
  font-weight: 700;
  color: #3b82f6;
}

/* Quick Actions */
.quick-actions {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.quick-actions .section-title {
  margin: 0 0 1rem 0;
  color: #111827;
  font-size: 1.1rem;
  font-weight: 700;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
  color: white;
}

.action-btn-secondary {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-btn-secondary:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
  color: #1f2937;
}

.action-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.action-btn:hover i {
  transform: scale(1.1);
}

/* Responsive adjustments for quick actions */
@media (max-width: 768px) {
  .action-grid {
    gap: 0.5rem;
  }

  .action-btn {
    padding: 0.875rem 1rem;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .action-btn i {
    font-size: 0.9rem;
  }
}

/* Panel Base Styles */
.profile-panel-primary,
.profile-panel-center,
.profile-panel-referral,
.profile-panel-public,
.profile-panel-right {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Center Panel - Project Creation */
.profile-panel-center {
  padding: 0;
}

.profile-panel-center .project-creation-section {
  padding: 0;
}

/* Referral Panel - Separate Section */
.profile-panel-referral {
  padding: 2rem;
}

/* Public Profile Panel */
.profile-panel-public {
  padding: 2rem;
}

/* Right Panel - Points History */
.profile-panel-right {
  padding: 2rem;
}

.available-points-display {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.available-points-number {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.available-points-label {
  font-size: 0.9rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Primary Panel (Left) - Profile Info & Activity */
.profile-panel-primary {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profile-info-card {
  padding: 2rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-card-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.stat-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card-compact .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
  flex-shrink: 0;
}

.stat-card-compact .stat-icon.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-card-compact .stat-icon.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-card-compact .stat-icon.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stat-card-compact .stat-content {
  min-width: 0;
}

.stat-card-compact .stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}

.stat-card-compact .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Center Panel - Referral Program */
.profile-panel-center {
  padding: 2rem;
}

.referral-program-card {
  background: white;
}

.referral-stats-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin: 1.5rem 0;
}

.referral-stat {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.referral-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.referral-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.referral-share-section,
.referral-input-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.referral-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.referral-code-display {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.referral-code-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.referral-code {
  flex: 1 1;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: #3b82f6;
  background: none;
  border: none;
  outline: none;
}

.copy-btn {
  padding: 0.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background: #1d4ed8;
}

.referral-description {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.referral-input-group {
  display: flex;
  gap: 0.75rem;
}

.referral-input {
  flex: 1 1;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
}

.apply-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Public Profile Info */
.public-profile-info {
  padding: 2rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.public-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1.5rem;
}

.public-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.public-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
}

.public-stat-content {
  flex: 1 1;
}

.public-stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.public-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

/* Right Panel - Points & Analytics */
.profile-panel-right {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.available-points-display {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 16px;
  margin-bottom: 1rem;
}

.available-points-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.available-points-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.transaction-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.transaction-icon.points {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.transaction-icon.task {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.transaction-icon.referral {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.transaction-details {
  flex: 1 1;
  min-width: 0;
}

.transaction-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.transaction-desc {
  color: #6b7280;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.transaction-time {
  color: #9ca3af;
  font-size: 0.75rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-grid-3col {
    grid-template-columns: 280px 1fr 280px;
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .dashboard-grid-3col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .profile-hero-centered {
    flex-direction: column;
    text-align: center;
  }

  .profile-info-enhanced {
    text-align: center;
  }

  .profile-meta {
    justify-content: center;
  }

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

  .tab-headers {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab-btn {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {

  .profile-header-content,
  .profile-wide-container {
    padding: 1rem;
  }

  .profile-main-content {
    padding: 1rem;
  }

  .profile-icon-large {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }

  .profile-icon-large::before {
    font-size: 3rem;
  }

  .profile-title-main {
    font-size: 1.75rem;
  }

  .profile-title-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .profile-info-box {
    padding: 1rem;
  }

  .floating-edit-btn {
    bottom: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .share-buttons {
    flex-direction: column;
  }

  .referral-input-group {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  body.sidebar-expanded .profile-wide-container,
  body.sidebar-collapsed .profile-wide-container {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .profile-hero-centered {
    gap: 1rem;
  }

  .profile-icon-large {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
  }

  .profile-icon-large::before {
    font-size: 2.5rem;
  }

  .profile-title-main {
    font-size: 1.5rem;
  }

  .profile-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }

  .profile-info-box {
    padding: 0.75rem;
  }

  .profile-meta {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .meta-item {
    font-size: 0.75rem;
  }

  .section-title {
    font-size: 1.1rem;
  }
}
/* Wide Screen Layout System for FounderLink - Inspiring Design */

/* CSS Variables for new color scheme */
:root {
  /* Override colors for wide-screen layouts */
  --layout-primary: #3b82f6;
  --layout-primary-light: #dbeafe;
  --layout-secondary: #10b981;
  --layout-accent: #f59e0b;
  --layout-text-primary: #111827;
  --layout-text-secondary: #4b5563;
  --layout-text-muted: #6b7280;
  --layout-bg-primary: #ffffff;
  --layout-bg-secondary: #f8fafc;
  --layout-border: #e5e7eb;
  --layout-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --layout-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Base full-width layout */
.full-width-layout {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Form-Preview Layout (for Create Task Questionnaire pages) */
.form-preview-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 3rem;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.layout-main {
  background: #ffffff;
  background: var(--layout-bg-primary);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--layout-border);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--layout-shadow);
  transition: all 0.3s ease;
}

.layout-main:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--layout-shadow-lg);
  transform: translateY(-2px);
}

.layout-preview {
  background: #f8fafc;
  background: var(--layout-bg-secondary);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--layout-border);
  border-radius: 1rem;
  padding: 1.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--layout-shadow);
}

/* Three Column Layout (for Profile page) */
.three-column-layout {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}

.layout-column {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
}

.layout-sidebar {
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
}

/* News-Style Layout (for Help page) */
.news-style-layout {
  max-width: 1600px;
  margin: 0 15rem;
}

.layout-header {
  /* margin-bottom: 3rem; */
}

.news-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 2rem;
}

.news-column {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Form-Info Layout (for Contact page) */
.form-info-layout {
  max-width: 1400px;
  margin: 0 15rem;
}

.form-info-columns {
  display: grid;
  grid-template-columns: 1fr 400px;
  /* gap: 3rem; */
  margin-top: 2rem;
}

/* Section styling */
.layout-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.layout-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.layout-section h3 {
  color: #007bff;
  color: var(--primary-color, #007bff);
  margin-bottom: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid #dee2e6;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  padding-bottom: 0.5rem;
}

/* Help page specific styles */
.help-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.help-item {
  padding: 1.5rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.help-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.help-item h4 {
  color: #212529;
  color: var(--text-primary, #1f2937);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.help-item p {
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.help-steps ol {
  margin-left: 1rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
}

.help-steps li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.points-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.point-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border-radius: 6px;
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
}

.points {
  font-weight: bold;
  color: #28a745;
  color: var(--success-color, #28a745);
}

.action {
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
}

.tip-list {
  margin-left: 1rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
}

.tip-list li {
  margin-bottom: 0.5rem;
}

.feature-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #d1ecf1;
  background: var(--info-background, #e3f2fd);
  border: 1px solid #bbdefb;
  border: 1px solid var(--info-border, #bbdefb);
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
}

.feature-highlight i {
  color: #17a2b8;
  color: var(--info-color, #1976d2);
  margin-top: 0.25rem;
}

.best-practices h5 {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9rem;
  color: #212529;
  color: var(--text-primary, #1f2937);
}

.best-practices ul {
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.best-practices li {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
}

.code-example {
  background: #f8f9fa;
  background: var(--code-background, #f1f5f9);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
}

.code-example code {
  color: #495057;
  color: var(--code-color, #374151);
  font-size: 0.9rem;
}

.verification-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.method {
  padding: 0.75rem;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  font-size: 0.9rem;
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  padding: 1rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
}

.faq-item h5 {
  color: #212529;
  color: var(--text-primary, #1f2937);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.faq-item p {
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
}

.contact-option i {
  color: #007bff;
  color: var(--primary-color, #007bff);
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.contact-option strong {
  color: #212529;
  color: var(--text-primary, #1f2937);
  display: block;
  margin-bottom: 0.25rem;
}

.contact-option p {
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* Contact page specific styles */
.contact-form-card {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-info-card,
.quick-help-card,
.response-time-card {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-methods,
.quick-help-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.contact-method,
.quick-help-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #007bff;
  background: var(--primary-color, #007bff);
  color: white;
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-details h6,
.quick-help-item h6 {
  margin-bottom: 0.25rem;
  color: #212529;
  color: var(--text-primary, #1f2937);
  font-weight: 600;
}

.contact-details p,
.quick-help-item p {
  margin-bottom: 0.25rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
}

.response-times {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.response-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
}

.priority {
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.priority.high {
  background: #f8d7da;
  background: var(--danger-background, #fee);
  color: #dc3545;
  color: var(--danger-color, #dc3545);
}

.priority.medium {
  background: #fff3cd;
  background: var(--warning-background, #fff3cd);
  color: #ffc107;
  color: var(--warning-color, #856404);
}

.priority.low {
  background: #d4edda;
  background: var(--success-background, #d4edda);
  color: #28a745;
  color: var(--success-color, #155724);
}

.time {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #1f2937);
}

/* Question preview cards for Create Questionnaire page */
.question-preview-card {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.question-preview-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.questions-list {
  /* max-height: 400px; */
  overflow-y: auto;
  padding-right: 0.5rem;
}

.questions-list::-webkit-scrollbar {
  width: 6px;
}

.questions-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.questions-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.questions-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Tips styling */
.preview-tips {
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
}

.preview-tips h4,
.preview-tips h6 {
  color: #212529;
  color: var(--text-primary, #1f2937);
  margin-bottom: 0.75rem;
}

.preview-tips ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.preview-tips li {
  margin-bottom: 0.25rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
}

/* Profile page stat cards */
.stats-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #007bff;
  background: var(--primary-color, #007bff);
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #212529;
  color: var(--text-primary, #1f2937);
  line-height: 1;
}

.stat-text {
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  margin-top: 0.25rem;
}

/* Profile header enhancements */
.profile-header {
  text-align: center;
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  border: 3px solid #dee2e6;
  border: 3px solid var(--border-color, #e5e7eb);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  font-size: 3rem;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1rem 0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #007bff;
  color: var(--primary-color, #007bff);
}

.stat-label {
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--text-secondary, #6b7280);
  margin-top: 0.25rem;
}

/* Referral code styling */
.referral-code-box {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.referral-code {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  color: #007bff;
  color: var(--primary-color, #007bff);
  letter-spacing: 1px;
}

/* Responsive Design */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .form-preview-layout {
    grid-template-columns: 1fr 450px;
    gap: 4rem;
  }
  
  .three-column-layout {
    grid-template-columns: 320px 1fr 350px;
    gap: 2.5rem;
  }
  
  .news-columns {
    gap: 1rem;
  }
  
  .form-info-columns {
    grid-template-columns: 1fr 450px;
    /* gap: 4rem; */
  }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
  .form-preview-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .layout-preview {
    position: static;
    max-height: none;
  }
  
  .three-column-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .layout-column,
  .layout-sidebar {
    position: static;
  }
  
  .news-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .form-info-columns {
    grid-template-columns: 1fr;
    /* gap: 2rem; */
  }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
  .form-preview-layout,
  .three-column-layout,
  .form-info-layout {
    padding: 1rem;
  }
  
  .news-style-layout {
    padding: 1rem;
  }
  
  .news-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .layout-main,
  .layout-preview,
  .layout-column,
  .layout-sidebar,
  .news-column,
  .contact-form-card,
  .contact-info-card,
  .quick-help-card,
  .response-time-card {
    padding: 1rem;
  }
  
  .profile-stats {
    gap: 1rem;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
  
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .contact-method,
  .quick-help-item {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .response-time-item {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* CSS Variables for theming */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #6c757d;
  
  --card-background: #ffffff;
  --secondary-background: #f8f9fa;
  --border-color: #dee2e6;
  
  --success-background: #d4edda;
  --danger-background: #f8d7da;
  --warning-background: #fff3cd;
  --info-background: #d1ecf1;
  
  --code-background: #f8f9fa;
  --code-color: #495057;
}

/* Points History Wide Layout */
.points-history-wide-layout {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  max-width: 1600px;
  margin: 0 15rem;
}

.points-summary-sidebar,
.points-insights-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.points-main-content {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-card,
.insights-card {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-card h3,
.summary-card h4,
.insights-card h4 {
  margin: 0 0 1rem 0;
  color: #212529;
  color: var(--text-primary, #212529);
  font-size: 1.1rem;
  font-weight: 600;
}

.current-balance {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.balance-amount {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.balance-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  font-size: 0.9rem;
}

.stat-value {
  font-weight: 600;
}

.stat-value.earned {
  color: #28a745;
}

.stat-value.spent {
  color: #dc3545;
}

.source-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.source-stat:last-child {
  border-bottom: none;
}

.source-icon {
  font-size: 1.2rem;
}

.source-name {
  flex: 1 1;
  text-transform: capitalize;
  color: #212529;
  color: var(--text-primary, #212529);
}

.source-points {
  font-weight: 600;
  color: #28a745;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  color: #212529;
  color: var(--text-primary, #212529);
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #007bff;
  background: var(--primary-color, #007bff);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.action-icon {
  font-size: 1rem;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.recent-icon {
  font-size: 1.1rem;
}

.recent-details {
  flex: 1 1;
}

.recent-description {
  font-size: 0.9rem;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.25rem;
}

.recent-date {
  font-size: 0.8rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
}

.recent-points {
  font-weight: 600;
  font-size: 0.9rem;
}

.recent-points.earned {
  color: #28a745;
}

.recent-points.spent {
  color: #dc3545;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.tip-item:last-child {
  border-bottom: none;
}

.tip-icon {
  font-size: 1.2rem;
  margin-top: 0.1rem;
}

.tip-text {
  font-size: 0.9rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  line-height: 1.4;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  background: var(--secondary-background, #f8fafc);
  border-radius: 8px;
}

.achievement-icon {
  font-size: 1.5rem;
}

.achievement-details {
  flex: 1 1;
}

.achievement-name {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.5rem;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-bar {
  flex: 1 1;
  height: 6px;
  background: #dee2e6;
  background: var(--border-color, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  white-space: nowrap;
}

/* Claim Bonuses Wide Layout */
.bonuses-wide-layout {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  max-width: 1600px;
  margin: 0 15rem;
}

.bonuses-overview-sidebar,
.earning-tips-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.bonuses-main-content {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.overview-card,
.tips-card {
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.overview-card.urgent {
  border-color: #ffc107;
  background: #fff3cd;
}

.overview-card h3,
.overview-card h4,
.tips-card h4 {
  margin: 0 0 1rem 0;
  color: #212529;
  color: var(--text-primary, #212529);
  font-size: 1.1rem;
  font-weight: 600;
}

.bonus-count {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-radius: 8px;
  color: white;
}

.count-number {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.count-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.total-points {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  /* background: var(--secondary-background, #f8fafc); */
    background: #f8fafc;

  border-radius: 8px;
  justify-content: center;
}

.points-icon {
  font-size: 1.5rem;
}

.points-amount {
  font-size: 1.8rem;
  font-weight: bold;
  color: #28a745;
}

.points-label {
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  font-size: 0.9rem;
}

.type-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.type-stat:last-child {
  border-bottom: none;
}

.type-icon {
  font-size: 1.2rem;
}

.type-name {
  flex: 1 1;
  color: #212529;
  color: var(--text-primary, #212529);
}

.type-points {
  font-weight: 600;
  color: #28a745;
}

.expiring-bonus {
  padding: 1rem;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 8px;
  text-align: center;
}

.expiring-name {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.5rem;
}

.expiring-date {
  font-size: 0.9rem;
  color: #dc3545;
  margin-bottom: 0.5rem;
}

.expiring-points {
  font-weight: bold;
  color: #28a745;
}

.tip-content {
  flex: 1 1;
}

.tip-title {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.25rem;
}

.tip-description {
  font-size: 0.9rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  line-height: 1.4;
}

.achievement-content {
  flex: 1 1;
}

.achievement-title {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.25rem;
}

.achievement-description {
  font-size: 0.9rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  margin-bottom: 0.5rem;
}

.strategy-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.strategy-item:last-child {
  border-bottom: none;
}

.strategy-icon {
  font-size: 1.2rem;
  margin-top: 0.1rem;
}

.strategy-text {
  font-size: 0.9rem;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  line-height: 1.4;
}

/* Responsive Design for Points History and Claim Bonuses */
@media (max-width: 1200px) {
  .points-history-wide-layout,
  .bonuses-wide-layout {
    grid-template-columns: 280px 1fr 260px;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

@media (max-width: 992px) {
  .points-history-wide-layout,
  .bonuses-wide-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem;
  }
  
  .points-summary-sidebar,
  .points-insights-sidebar,
  .bonuses-overview-sidebar,
  .earning-tips-sidebar {
    position: static;
    max-height: none;
    order: 2;
  }
  
  .points-main-content,
  .bonuses-main-content {
    order: 1;
  }
  
  .points-insights-sidebar,
  .earning-tips-sidebar {
    order: 3;
  }
}

/* Page Loader - Modern Loading Spinner Component */

.page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    animation: fadeIn 0.2s ease-in;
    padding: 20px;
}

.page-loader-fullpage {
    min-height: 300px;
}

/* Full-page overlay */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    /* Much more transparent to show background */
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
    /* Reduced blur to keep content visible */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-in;
}

/* Spinner container */
.page-loader-spinner {
    position: relative;
    display: inline-block;
}

/* Size variants */
.page-loader-small {
    width: 24px;
    height: 24px;
}

.page-loader-medium {
    width: 48px;
    height: 48px;
}

.page-loader-large {
    width: 64px;
    height: 64px;
}

/* Spinner rings */
.spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.page-loader-small .spinner-ring {
    border-width: 2px;
}

.page-loader-large .spinner-ring {
    border-width: 4px;
}

/* Three rings with different colors and delays */
.spinner-ring:nth-child(1) {
    border-top-color: #6c5ce7;
    animation-delay: -0.45s;
}

.spinner-ring:nth-child(2) {
    border-top-color: #a29bfe;
    animation-delay: -0.3s;
}

.spinner-ring:nth-child(3) {
    border-top-color: #74b9ff;
    animation-delay: -0.15s;
}

/* Loading text */
.page-loader-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    text-align: center;
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Accessibility */
.page-loader[role="status"] {
    position: relative;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .spinner-ring {
        animation-duration: 2s;
    }

    .page-loader,
    .page-loader-overlay {
        animation: none;
    }
}

/* Dark mode support (if needed later) */
@media (prefers-color-scheme: dark) {
    .page-loader-overlay {
        background: rgba(30, 41, 59, 0.3);
        /* More transparent in dark mode too */
    }

    .page-loader-text {
        color: #cbd5e1;
    }
}
/* Shared styles for Login and Register pages */
.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f8f9fa;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 450px;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  box-sizing: border-box;
}





.auth-logo {
  text-align: center;
  margin-bottom: 20px;
}

.auth-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}

.auth-form {
  margin-bottom: 20px;
}

.auth-form-group {
  margin-bottom: 16px;
}

.auth-form-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #555;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-weight: 500;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #666;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #ddd;
}

.auth-divider span {
  padding: 0 10px;
}

.auth-links {
  text-align: center;
  margin-top: 16px;
}

.auth-error {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.role-selection {
  margin-bottom: 20px;
}

.role-option {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.role-option:hover {
  border-color: #4361ee;
  background-color: rgba(67, 97, 238, 0.05);
}

.role-option.selected {
  border-color: #4361ee;
  background-color: rgba(67, 97, 238, 0.1);
}

.role-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #4361ee;
}

/* Privacy Notice and Terms Acceptance */
.privacy-notice {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;
  font-size: 14px;
}

.privacy-notice p {
  margin: 0 0 8px 0;
  color: #92400e;
}

.privacy-notice strong {
  color: #78350f;
  font-weight: 600;
}

.privacy-notice ul {
  margin: 4px 0 0 20px;
  padding: 0;
  list-style-type: disc;
}

.privacy-notice li {
  margin: 4px 0;
  color: #92400e;
}

.terms-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.terms-acceptance input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.terms-acceptance label {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.terms-acceptance a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.terms-acceptance a:hover {
  text-decoration: underline;
}

.info-message {
  background-color: #dbeafe;
  border-left: 4px solid #3b82f6;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;
}

.info-message p {
  margin: 0;
  color: #1e40af;
  font-size: 14px;
}

/* SSO Buttons */
.sso-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #666;
}

.sso-divider::before,
.sso-divider::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #ddd;
}

.sso-divider span {
  padding: 0 10px;
}

.sso-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s;
  text-align: center;
  border: 1px solid #ddd;
}

.btn-sso img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  object-fit: contain;
}

.btn-google {
  background-color: #fff;
  color: #4285F4;
  border-color: #4285F4;
}

.btn-google:hover {
  background-color: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #4285F4;
}

.btn-github {
  background-color: #24292e;
  color: #fff;
  border-color: #24292e;
}

.btn-github:hover {
  background-color: #2f363d;
  border-color: #2f363d;
}

.btn-linkedin {
  background-color: white;
  color: #0A66C2;
  border-color: #0A66C2;
}

.btn-linkedin:hover {
  background-color: #f0f7ff;
  border-color: #0A66C2;
  color: #0A66C2;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .auth-card {
    padding: 20px;
  }

  .privacy-notice {
    font-size: 13px;
    padding: 10px 12px;
  }

  .terms-acceptance {
    font-size: 13px;
  }
}

/* Password reset specific styles */
.auth-subtitle {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.auth-success {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.auth-success .success-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #28a745;
}

.auth-success p {
  margin-bottom: 8px;
}

.text-muted {
  color: #6c757d !important;
  font-size: 13px;
}

.auth-form-help {
  text-align: right;
  margin-top: 8px;
}

.forgot-password-link {
  color: #4361ee;
  text-decoration: none;
  font-size: 14px;
}

.forgot-password-link:hover {
  text-decoration: underline;
}

.loading-state {
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4361ee;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* NotFoundPage Styles */
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
}

.not-found-content {
  max-width: 500px;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.not-found-content h1 {
  font-size: 72px;
  color: #4361ee;
  margin-bottom: 0;
}

.not-found-content h2 {
  margin-bottom: 20px;
  color: #333;
}

.not-found-content p {
  margin-bottom: 30px;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .not-found-content h1 {
    font-size: 60px;
  }
  
  .not-found-content {
    padding: 30px;
  }
}

/* Terms Acceptance Modal Styles */

.terms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.terms-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.terms-modal-header {
    padding: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
}

.terms-modal-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #1f2937;
}

.terms-modal-header .welcome-text {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.terms-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.terms-modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.terms-modal-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 1.5rem;
    scroll-behavior: smooth;
}

.terms-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.terms-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.terms-section h3 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
}

.terms-section h4 {
    margin: 1rem 0 0.5rem 0;
    color: #374151;
    font-size: 1.05rem;
    font-weight: 600;
}

.terms-section p {
    margin: 0 0 1rem 0;
    color: #4b5563;
    line-height: 1.6;
}

.terms-section ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.terms-section li {
    margin: 0.5rem 0;
    color: #4b5563;
    line-height: 1.6;
}

.privacy-highlight {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.privacy-highlight h4 {
    margin-top: 0;
    color: #92400e;
}

.privacy-highlight p {
    color: #78350f;
}

.privacy-highlight ul {
    margin-top: 0.5rem;
}

.privacy-highlight li {
    color: #78350f;
    margin: 0.75rem 0;
}

.privacy-highlight strong {
    color: #92400e;
    font-weight: 600;
}

.privacy-details {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.data-protection {
    background: #ecfdf5;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #a7f3d0;
}

.data-protection h3 {
    color: #065f46;
}

.data-protection p {
    color: #047857;
}

.terms-link-button {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    text-decoration: underline;
    transition: color 0.2s;
}

.terms-link-button:hover {
    color: #1d4ed8;
}

.terms-modal-footer {
    border-top: 2px solid #e5e7eb;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.terms-acceptance-checkbox {
    margin-bottom: 1rem;
    display: flex;
}

.terms-acceptance-checkbox input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.terms-acceptance-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.terms-acceptance-checkbox label {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    -webkit-user-select: none;
            user-select: none;
}

.scroll-hint {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}

.terms-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.terms-modal-actions .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.terms-modal-actions .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.terms-modal-actions .btn-secondary:hover {
    background: #d1d5db;
}

.terms-modal-actions .btn-primary {
    background: #2563eb;
    color: white;
}

.terms-modal-actions .btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.terms-modal-actions .btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Scrollbar styling */
.terms-modal-content::-webkit-scrollbar {
    width: 8px;
}

.terms-modal-content::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.terms-modal-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.terms-modal-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive design */
@media (max-width: 768px) {
    .terms-modal {
        max-width: 100%;
        margin: 0.5rem;
        max-height: 95vh;
    }

    .terms-modal-header h2 {
        font-size: 1.25rem;
    }

    .terms-section h3 {
        font-size: 1.1rem;
    }

    .terms-modal-actions {
        flex-direction: column-reverse;
    }

    .terms-modal-actions .btn {
        width: 100%;
    }
}
/* Error Display Component Styles */

.error-display {
  border-radius: 8px;
  border: 1px solid;
  background-color: var(--bs-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Severity-based styling */
.error-display.error-low {
  border-color: var(--bs-info);
  background-color: rgba(13, 202, 240, 0.05);
}

.error-display.error-medium {
  border-color: var(--bs-warning);
  background-color: rgba(255, 193, 7, 0.05);
}

.error-display.error-high {
  border-color: var(--bs-danger);
  background-color: rgba(220, 53, 69, 0.05);
}

.error-display.error-critical {
  border-color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  border-width: 2px;
}

/* Size variants */
.error-display.error-compact {
  padding: 0.75rem;
}

.error-display.error-full {
  padding: 1.25rem;
}

/* Header section */
.error-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.error-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.error-low .error-icon {
  color: var(--bs-info);
}

.error-medium .error-icon {
  color: var(--bs-warning);
}

.error-high .error-icon {
  color: var(--bs-danger);
}

.error-critical .error-icon {
  color: #dc3545;
  font-size: 1.5rem;
}

.error-content {
  flex-grow: 1;
  min-width: 0;
}

.error-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.error-critical .error-title {
  font-size: 1.125rem;
  color: #dc3545;
}

.error-message {
  color: var(--bs-gray-700);
  line-height: 1.4;
  word-wrap: break-word;
}

.error-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--bs-gray-500);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.error-dismiss:hover {
  color: var(--bs-gray-700);
  background-color: rgba(0, 0, 0, 0.05);
}

/* Actions section */
.error-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.error-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-radius: 6px;
  background-color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.error-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Action type styling */
.error-action-retry {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.error-action-retry:hover:not(:disabled) {
  background-color: var(--bs-primary);
  color: white;
}

.error-action-redirect,
.error-action-refresh {
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}

.error-action-redirect:hover:not(:disabled),
.error-action-refresh:hover:not(:disabled) {
  background-color: var(--bs-secondary);
  color: white;
}

.error-action-contact_support {
  border-color: var(--bs-info);
  color: var(--bs-info);
}

.error-action-contact_support:hover:not(:disabled) {
  background-color: var(--bs-info);
  color: white;
}

.error-action-manual_action {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}

.error-action-manual_action:hover:not(:disabled) {
  background-color: var(--bs-warning);
  color: white;
}

/* Details section */
.error-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.error-details-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--bs-gray-600);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.error-details-toggle:hover {
  color: var(--bs-gray-800);
}

.error-technical-details {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.detail-item {
  margin-bottom: 0.5rem;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item strong {
  display: inline-block;
  min-width: 120px;
  color: var(--bs-gray-700);
}

.error-stack {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  line-height: 1.3;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
}

/* Responsive design */
@media (max-width: 576px) {
  .error-actions {
    flex-direction: column;
  }
  
  .error-action {
    width: 100%;
    justify-content: center;
  }
  
  .error-header {
    gap: 0.5rem;
  }
  
  .error-display.error-full {
    padding: 1rem;
  }
}

/* Animation for showing hiding */
.error-display {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading state for retry button */
.error-action .spinner-border-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 0.1em;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .error-display {
    border-width: 2px;
  }
  
  .error-action {
    border-width: 2px;
  }
}

/* Project Creation Analytics Dashboard Styles */

.project-creation-analytics-dashboard {
  padding: 1rem;
}

.dashboard-header {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 1rem;
}

.dashboard-header h3 {
  color: var(--bs-dark);
  font-weight: 600;
}

.date-range-controls {
  min-width: 300px;
}

.custom-date-range {
  background: var(--bs-light);
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
}

/* Metrics Grid */
.metrics-grid .metric-card {
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.metrics-grid .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.metric-card .card-body {
  padding: 1.5rem;
}

.metric-card .card-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.metric-card .card-subtitle {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-icon {
  font-size: 2rem;
  opacity: 0.7;
}

/* Blocking Reasons Chart */
.blocking-reasons-chart {
  max-height: 400px;
  overflow-y: auto;
}

.reason-item {
  padding: 0.75rem;
  background: var(--bs-light);
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
}

.reason-label {
  font-weight: 500;
  color: var(--bs-dark);
}

.reason-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reason-item .progress {
  background-color: var(--bs-gray-200);
}

/* Conversion Funnel */
.conversion-funnel {
  max-height: 400px;
  overflow-y: auto;
}

.funnel-step {
  padding: 0.75rem;
  background: var(--bs-light);
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
  position: relative;
}

.step-label {
  font-weight: 500;
  color: var(--bs-dark);
}

.step-value {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bs-primary);
}

.funnel-step .progress {
  background-color: var(--bs-gray-200);
}

/* Detailed Breakdown */
.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--bs-light);
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: block;
}

.stat-value {
  font-weight: 700;
}

/* Loading and Error States */
.analytics-dashboard-loading,
.analytics-dashboard-error {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analytics-dashboard-error .alert {
  max-width: 500px;
  margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-creation-analytics-dashboard {
    padding: 0.5rem;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .dashboard-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .date-range-controls {
    min-width: auto;
    width: 100%;
  }
  
  .metric-card .card-body {
    padding: 1rem;
  }
  
  .metric-card .card-title {
    font-size: 1.5rem;
  }
  
  .metric-icon {
    font-size: 1.5rem;
  }
  
  .custom-date-range .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .custom-date-range .d-flex span {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .metrics-grid .col-md-3 {
    margin-bottom: 1rem;
  }
  
  .reason-stats {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }
  
  .stat-item {
    padding: 0.75rem;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .project-creation-analytics-dashboard {
    color: var(--bs-light);
  }
  
  .dashboard-header h3 {
    color: var(--bs-light);
  }
  
  .metric-card,
  .reason-item,
  .funnel-step,
  .stat-item {
    background: var(--bs-dark);
    border-color: var(--bs-gray-700);
  }
  
  .custom-date-range {
    background: var(--bs-dark);
    border-color: var(--bs-gray-700);
  }
  
  .reason-label,
  .step-label,
  .stat-label {
    color: var(--bs-light);
  }
}

/* Animation for metric cards */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metrics-grid .metric-card {
  animation: slideInUp 0.3s ease-out;
}

.metrics-grid .col-md-3:nth-child(1) .metric-card {
  animation-delay: 0.1s;
}

.metrics-grid .col-md-3:nth-child(2) .metric-card {
  animation-delay: 0.2s;
}

.metrics-grid .col-md-3:nth-child(3) .metric-card {
  animation-delay: 0.3s;
}

.metrics-grid .col-md-3:nth-child(4) .metric-card {
  animation-delay: 0.4s;
}

/* Progress bar animations */
.progress-bar {
  transition: width 0.6s ease;
}

/* Hover effects */
.reason-item:hover,
.funnel-step:hover,
.stat-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease-in-out;
}

/* Badge styling */
.reason-stats .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Form controls in date range */
.date-range-controls .form-select,
.date-range-controls .form-control {
  border-color: var(--bs-border-color);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.date-range-controls .form-select:focus,
.date-range-controls .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
/* Project Creation Settings Tab Styles */
.project-creation-settings-tab {
  position: relative;
}

.project-creation-settings-tab .tab-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

.project-creation-settings-tab .tab-header h3 {
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.project-creation-settings-tab .tab-header p {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Sub-tabs */
.sub-tabs {
  margin-top: 1rem;
}

.sub-tabs .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

.sub-tabs .nav-link {
  border: none;
  background: none;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  padding: 1rem 1.5rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  border-bottom: 3px solid transparent;
  position: relative;
  margin: 0 0.25rem;
  border-radius: 8px 8px 0 0;
}

.sub-tabs .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: #0d6efd;
  background: var(--primary-color, #0d6efd);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.sub-tabs .nav-link:hover {
  color: #0d6efd;
  color: var(--primary-color, #0d6efd);
  background: #f8f9fa;
  background: var(--hover-bg, #f8f9fa);
  transform: translateY(-2px);
}

.sub-tabs .nav-link:hover::before {
  width: 80%;
}

.sub-tabs .nav-link.active {
  color: #0d6efd;
  color: var(--primary-color, #0d6efd);
  background: #ffffff;
  background: var(--active-bg, #ffffff);
  border-bottom-color: #0d6efd;
  border-bottom-color: var(--primary-color, #0d6efd);
}

.sub-tabs .nav-link.active::before {
  width: 100%;
}

/* Settings Content */
.settings-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Analytics Content */
.analytics-content {
  margin-top: 1rem;
}

/* Setting Section */
.setting-section {
  background: #ffffff;
  background: var(--card-bg, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.setting-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d6efd, #6f42c1);
  background: linear-gradient(90deg, var(--primary-color, #0d6efd), var(--secondary-color, #6f42c1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.setting-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.setting-section:hover::before {
  opacity: 1;
}

/* Setting Header */
.setting-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.setting-title h4 {
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.setting-title p {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Enhanced Toggle Switches */
.setting-toggle {
  flex-shrink: 0;
}

.setting-toggle .form-check-input {
  width: 3.2rem;
  height: 1.7rem;
  border-radius: 1rem;
  background-color: #6c757d;
  background-color: var(--toggle-bg-off, #6c757d);
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}

.setting-toggle .form-check-input:checked {
  background-color: #0d6efd;
  background-color: var(--primary-color, #0d6efd);
  border-color: #0d6efd;
  border-color: var(--primary-color, #0d6efd);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.setting-toggle .form-check-input:focus {
  border-color: #0d6efd;
  border-color: var(--primary-color, #0d6efd);
  box-shadow: 0 0 0 0.3rem rgba(13, 110, 253, 0.15);
}

.setting-toggle .form-check-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.setting-toggle .form-check-label {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-left: 0.75rem;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.setting-toggle .form-check-input:checked + .form-check-label {
  color: #0d6efd;
  color: var(--primary-color, #0d6efd);
}

/* Setting Controls */
.setting-controls {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f8f9fa;
  border-top: 1px solid var(--border-light, #f8f9fa);
}

.setting-controls .form-group {
  margin-bottom: 1rem;
}

.setting-controls .form-label {
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.setting-controls .form-label::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(135deg, #0d6efd, #0056b3);
  background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--primary-color-dark, #0056b3));
  border-radius: 2px;
}

.setting-controls .form-control {
  border: 2px solid #dee2e6;
  border: 2px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
  background-color: var(--input-bg, #ffffff);
}

.setting-controls .form-control:focus {
  border-color: #0d6efd;
  border-color: var(--primary-color, #0d6efd);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
  transform: translateY(-1px);
}

.setting-controls .form-control:hover:not(:focus):not(:disabled) {
  border-color: #80bdff;
  border-color: var(--primary-color-light, #80bdff);
}

.setting-controls .form-control:disabled {
  background-color: #f8f9fa;
  background-color: var(--disabled-bg, #f8f9fa);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Enhanced Input Groups */
.setting-controls .input-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease-in-out;
}

.setting-controls .input-group:focus-within {
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.setting-controls .input-group-text {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  background: linear-gradient(135deg, var(--input-group-bg, #f8f9fa) 0%, var(--input-group-bg-dark, #e9ecef) 100%);
  border: 2px solid #dee2e6;
  border: 2px solid var(--border-color, #dee2e6);
  border-left: none;
  color: #495057;
  color: var(--text-primary, #495057);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
}

/* Setting Info */
.setting-info .info-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  background: linear-gradient(135deg, var(--info-bg, #f8f9fa) 0%, var(--info-bg-light, #ffffff) 100%);
  border: 2px solid #e9ecef;
  border: 2px solid var(--border-light, #e9ecef);
  border-radius: 10px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.setting-info .info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0dcaf0, #0891b2);
  background: linear-gradient(180deg, var(--info-color, #0dcaf0), var(--info-color-dark, #0891b2));
}

.setting-info .info-card h6 {
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.setting-info .info-card ul li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.setting-info .info-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #198754;
  color: var(--success-color, #198754);
  font-weight: bold;
}

/* Setting Preview */
.setting-preview h6 {
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.preview-card {
  background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
  background: linear-gradient(135deg, var(--warning-bg, #fff3cd) 0%, var(--warning-bg-light, #fff8e1) 100%);
  border: 2px solid #ffeaa7;
  border: 2px solid var(--warning-border, #ffeaa7);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.preview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.1) 50%, transparent 51%);
  pointer-events: none;
}

.preview-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.preview-card .preview-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Requirements Summary */
.requirements-summary .summary-card {
  background: linear-gradient(135deg, #d1e7dd 0%, #e7f5e9 100%);
  background: linear-gradient(135deg, var(--success-bg, #d1e7dd) 0%, var(--success-bg-light, #e7f5e9) 100%);
  border: 2px solid #badbcc;
  border: 2px solid var(--success-border, #badbcc);
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.requirements-summary .summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #198754, #20c997);
  background: linear-gradient(90deg, var(--success-color, #198754), var(--success-color-light, #20c997));
}

.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.requirements-list li {
  color: #495057;
  color: var(--text-secondary, #495057);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.requirements-list li:hover {
  background-color: rgba(255, 255, 255, 0.5);
  padding-left: 0.5rem;
}

.requirements-list li i {
  font-size: 1.1rem;
  margin-right: 0.75rem;
}

/* Saving Overlay */
.saving-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 10;
}

.saving-spinner {
  text-align: center;
  color: #212529;
  color: var(--text-primary, #212529);
  padding: 2rem;
  background: #ffffff;
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.saving-spinner .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
}

.saving-spinner p {
  font-size: 1rem;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-weight: 500;
  margin-top: 1rem;
}

/* Alert Customizations */
.project-creation-settings-tab .alert {
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border: 2px solid;
  padding: 1rem 1.25rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.project-creation-settings-tab .alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: currentColor;
  opacity: 0.8;
}

.project-creation-settings-tab .alert-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #e7f5e9 100%);
  background: linear-gradient(135deg, var(--success-bg, #d1e7dd) 0%, #e7f5e9 100%);
  border-color: #badbcc;
  border-color: var(--success-border, #badbcc);
  color: #0f5132;
  color: var(--success-text, #0f5132);
}

.project-creation-settings-tab .alert-info {
  background: linear-gradient(135deg, #cff4fc 0%, #e7f9fd 100%);
  background: linear-gradient(135deg, var(--info-bg, #cff4fc) 0%, #e7f9fd 100%);
  border-color: #9eeaf9;
  border-color: var(--info-border, #9eeaf9);
  color: #055160;
  color: var(--info-text, #055160);
}

.project-creation-settings-tab .alert-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
  background: linear-gradient(135deg, var(--warning-bg, #fff3cd) 0%, #fff8e1 100%);
  border-color: #ffeaa7;
  border-color: var(--warning-border, #ffeaa7);
  color: #664d03;
  color: var(--warning-text, #664d03);
}

/* Enhanced Form Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.setting-controls {
  animation: slideInUp 0.3s ease-out;
}

/* Enhanced Focus States */
.setting-controls .form-control:focus,
.setting-toggle .form-check-input:focus,
.sub-tabs .nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(13, 110, 253, 0.2);
}

/* Enhanced Disabled States */
.setting-controls .form-control:disabled,
.setting-toggle .form-check-input:disabled {
  background-color: #f8f9fa;
  background-color: var(--disabled-bg, #f8f9fa);
  border-color: #e9ecef;
  border-color: var(--disabled-border, #e9ecef);
  color: #6c757d;
  color: var(--disabled-text, #6c757d);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Micro-interactions */
.setting-section {
  will-change: transform, box-shadow;
}

.preview-card,
.summary-card,
.info-card {
  will-change: transform;
}
/* Professional SettingsPage.css */

/* Page Header */
.page-header {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0a66c2 0%, #1e40af 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.header-text h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.header-text p {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0;
}

/* Professional Tabs */
.settings-tabs-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.professional-tabs {
  min-height: 400px;
}

.tab-buttons {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.tab-button:hover {
  background: rgba(10, 102, 194, 0.05);
  color: #0a66c2;
}

.tab-button.active {
  background: #ffffff;
  color: #0a66c2;
  border-bottom-color: #0a66c2;
  font-weight: 600;
}

.tab-content-container {
  padding: 2rem;
}

/* Points Rules Tab */
.points-rules-tab .tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.points-rules-tab .tab-header h3 {
  color: #1f2937;
  font-weight: 600;
  margin: 0;
  font-size: 1.25rem;
}

.rule-form {
  background: #f8fafc;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e5e7eb;
}

.rule-form h4 {
  color: #1f2937;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-size: 1.125rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.rules-list .table {
  margin-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rules-list .table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  background: #f8fafc;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.rules-list .table td {
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.points-value {
  font-weight: 600;
  color: #0a66c2;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.action-buttons .btn {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

/* Professional Button Styles */
.btn-professional {
  background: #0a66c2;
  color: white;
  border: 1px solid #0a66c2;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-professional:hover {
  background: #0652a3;
  border-color: #0652a3;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

.btn-outline-professional {
  background: transparent;
  color: #0a66c2;
  border: 1px solid #0a66c2;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-outline-professional:hover {
  background: #0a66c2;
  color: white;
}

.btn-danger {
  background: #dc2626;
  color: white;
  border: 1px solid #dc2626;
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Countries Tab */
.countries-tab .tab-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.countries-tab .tab-header h3 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

/* Referrals Tab */
.referrals-tab .tab-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.referrals-tab .tab-header h3 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.referral-settings {
  max-width: 800px;
}

.referral-stats {
  margin-top: 2rem;
}

.referral-stats h4 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.stat-card {
  background: #ffffff;
  color: #1f2937;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #0a66c2;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.stat-label {
  font-size: 0.9rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Teams Tab */
.teams-tab .tab-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.teams-tab .tab-header h3 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.team-settings {
  max-width: 800px;
}

.settings-grid {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 2rem;
}

.setting-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.setting-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.setting-info h5 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.setting-info p {
  color: #64748b;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.setting-control {
  margin-top: 1rem;
}

.setting-control .input-group {
  max-width: 200px;
}

.setting-control .form-control {
  border-color: #d1d5db;
  font-weight: 600;
  border-radius: 6px;
}

.setting-control .form-control:focus {
  border-color: #0a66c2;
  box-shadow: 0 0 0 0.2rem rgba(10, 102, 194, 0.25);
}

.setting-control .input-group-text {
  background: #f8fafc;
  border-color: #d1d5db;
  color: #64748b;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    padding: 1.5rem;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .header-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .header-text h1 {
    font-size: 1.75rem;
  }

  .tab-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-button {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
  }

  .tab-content-container {
    padding: 1.5rem;
  }

  .points-rules-tab .tab-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .rule-form {
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .action-buttons {
    justify-content: center;
  }

  .stat-card {
    margin-bottom: 1rem;
  }

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

@media (max-width: 480px) {
  .settings-header h1 {
    font-size: 1.75rem;
  }

  .rule-form {
    padding: 1rem;
  }

  .tab-content {
    padding: 1rem;
  }

  .table-responsive {
    font-size: 0.875rem;
  }
}

/* Custom alert styles */
.alert {
  border-radius: 8px;
  border: none;
}

.alert-info {
  background: rgba(10, 102, 194, 0.1);
  border-left: 4px solid #0a66c2;
  color: #1f2937;
}

.alert-danger {
  background: rgba(220, 38, 38, 0.1);
  border-left: 4px solid #dc2626;
  color: #1f2937;
}

/* Form enhancements */
.form-label {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.form-control {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #0a66c2;
  box-shadow: 0 0 0 0.2rem rgba(10, 102, 194, 0.25);
}

.form-check-input:checked {
  background-color: #0a66c2;
  border-color: #0a66c2;
}

/* Button enhancements */
.btn-primary {
  background: #0a66c2;
  border: 1px solid #0a66c2;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #0652a3;
  border-color: #0652a3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

.btn-success {
  background: #059669;
  border: 1px solid #059669;
}

.btn-success:hover {
  background: #047857;
  border-color: #047857;
}

/* Badge enhancements */
.badge {
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
}

.badge.bg-success {
  background-color: #059669 !important;
}

.badge.bg-danger {
  background-color: #dc2626 !important;
}

/* Badge enhancements */
.badge {
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
}

.badge.bg-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}
/* Preferences Tab Styles */
.preferences-tab {
  padding: 2rem;
}

.preferences-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.preference-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.preference-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.preference-header {
  margin-bottom: 1.5rem;
}

.preference-header h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
}

.preference-header p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
}

.preference-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tour-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.info-item i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.preference-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.preference-actions .btn {
  min-width: 200px;
}

@media (min-width: 768px) {
  .preference-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .tour-info {
    flex: 1 1;
  }
  
  .preference-actions {
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .preferences-tab {
    padding: 1rem;
  }
  
  .preference-card {
    padding: 1.5rem;
  }
  
  .tour-info {
    gap: 1rem;
  }
  
  .info-item {
    font-size: 0.85rem;
  }
}
/* Enhanced ClaimBonusesPage Styles - ProfilePage-inspired Design */

/* Bonuses Container */
.claim-bonuses-page {
  min-height: 100vh;
  background: #ffffff;
  color: var(--text-primary);
}

/* Enhanced Bonuses Header */
.bonuses-header-section {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  color: white;
  padding: 1.5rem 0 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

.bonuses-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

.bonuses-header-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(2px 2px at 15% 90%, white, transparent);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  animation: starfield 20s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.6;
}

/* Additional star layers for depth */
.bonuses-header-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: 
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 40% 40%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 25% 75%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 55% 85%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 95% 95%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 250% 250%;
  animation: starfield-slow 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes starfield {
  0%, 100% {
    background-position: 0% 0%, 10% 20%, 20% 40%, 30% 60%, 40% 80%, 50% 100%, 60% 0%;
    opacity: 0.6;
  }
  25% {
    background-position: 10% 10%, 20% 30%, 30% 50%, 40% 70%, 50% 90%, 60% 10%, 70% 10%;
    opacity: 0.8;
  }
  50% {
    background-position: 20% 20%, 30% 40%, 40% 60%, 50% 80%, 60% 100%, 70% 20%, 80% 20%;
    opacity: 0.7;
  }
  75% {
    background-position: 30% 30%, 40% 50%, 50% 70%, 60% 90%, 70% 10%, 80% 30%, 90% 30%;
    opacity: 0.9;
  }
}

@keyframes starfield-slow {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.4;
  }
}

.bonuses-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.bonuses-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
}

/* Enhanced Icon with Bonus Theme */
.bonuses-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.bonuses-icon-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
}

.bonuses-icon-large:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.bonuses-icon-placeholder {
  font-size: 2rem;
  font-weight: 700;
  animation: treasurePulse 2s infinite;
}

@keyframes treasurePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Twinkling stars effect */
.bonuses-header-section {
  position: relative;
}

.bonuses-header-section .star-layer-1,
.bonuses-header-section .star-layer-2,
.bonuses-header-section .star-layer-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.bonuses-header-section .star-layer-1 {
  background-image: 
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 50px 50px, 80px 80px;
  background-position: 0 0, 40px 60px;
  animation: twinkle-1 3s ease-in-out infinite;
  z-index: 1;
}

.bonuses-header-section .star-layer-2 {
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 70px 70px, 100px 100px;
  background-position: 20px 20px, 60px 80px;
  animation: twinkle-2 4s ease-in-out infinite;
  z-index: 1;
}

.bonuses-header-section .star-layer-3 {
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size: 120px 120px, 90px 90px;
  background-position: 10px 30px, 70px 50px;
  animation: twinkle-3 5s ease-in-out infinite;
  z-index: 1;
}

@keyframes twinkle-1 {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes twinkle-2 {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes twinkle-3 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Enhanced Bonuses Info */
.bonuses-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
  border-radius: 8px;
  padding: 1rem;
  border: 1.5px solid #e5e7eb;
}

.bonuses-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.bonuses-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bonuses-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bonuses-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem 0;
}

.bonuses-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.meta-item.urgent {
  color: #fbbf24;
  font-weight: 600;
}

.meta-item i {
  font-size: 0.85rem;
}

/* Wide Screen Optimized Layout - Adjusted for Sidebar */
.bonuses-wide-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: start;
  margin-left: 0;
  transition: all 0.3s ease;
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .bonuses-wide-grid {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .bonuses-wide-grid {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Adaptive Grid Layout - Responsive to Screen Width with Sidebar Consideration */
@media (min-width: 1600px) {
  .bonuses-wide-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
  }
  
  body.sidebar-expanded .bonuses-wide-grid {
    max-width: calc(100vw - 316px);
    grid-template-columns: 320px 1fr 300px;
    gap: 2rem;
  }
  
  body.sidebar-collapsed .bonuses-wide-grid {
    max-width: calc(100vw - 116px);
    grid-template-columns: 380px 1fr 350px;
    gap: 2.5rem;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .bonuses-wide-grid {
    grid-template-columns: 350px 1fr 320px;
    max-width: 1300px;
    gap: 1.5rem;
  }
  
  body.sidebar-expanded .bonuses-wide-grid {
    max-width: calc(100vw - 336px);
    grid-template-columns: 280px 1fr 260px;
    gap: 1.25rem;
  }
  
  body.sidebar-collapsed .bonuses-wide-grid {
    max-width: calc(100vw - 136px);
    grid-template-columns: 320px 1fr 300px;
    gap: 1.5rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .bonuses-wide-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    gap: 1.5rem;
  }
  
  .bonuses-panel-right {
    grid-column: 1 / -1;
  }
  
  body.sidebar-expanded .bonuses-wide-grid {
    max-width: calc(100vw - 316px);
    gap: 1.25rem;
  }
  
  body.sidebar-collapsed .bonuses-wide-grid {
    max-width: calc(100vw - 116px);
    gap: 1.5rem;
  }
}

@media (max-width: 899px) {
  .bonuses-wide-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem;
  }
  
  body.sidebar-expanded .bonuses-wide-grid,
  body.sidebar-collapsed .bonuses-wide-grid {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
}

/* Shared Panel Styles */
.bonuses-panel-left,
.bonuses-panel-center,
.bonuses-panel-right {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 0;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  margin: 0;
}

/* Section Titles */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0;
}

.section-title i {
  font-size: 1rem;
  color: #059669;
}

/* Left Panel - Overview Stats */
.bonuses-panel-left {
  padding: 1.25rem;
}

.bonus-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin: 1rem 0;
}

.stat-card-compact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.stat-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card-compact .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}

.stat-card-compact .stat-icon.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-card-compact .stat-icon.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-card-compact .stat-content {
  min-width: 0;
}

.stat-card-compact .stat-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}

.stat-card-compact .stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.urgent-bonus-card {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  padding: 1.25rem;
  border-radius: 12px;
  margin: 1rem 0;
  border: 2px solid #fca5a5;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.urgent-bonus-card h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.expiring-bonus {
  background: rgba(255, 255, 255, 0.15);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.expiring-name {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.expiring-date {
  font-size: 0.9rem;
  color: #fef2f2;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.expiring-points {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fef2f2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
}

.bonus-types-breakdown {
  margin-top: 1rem;
}

.bonus-types-breakdown h4 {
  margin: 0 0 0.75rem 0;
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 600;
}

.type-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.type-stat:last-child {
  border-bottom: none;
}

.type-icon {
  font-size: 1.1rem;
  width: 28px;
  text-align: center;
}

.type-name {
  flex: 1 1;
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
}

.type-points {
  font-weight: 700;
  color: #059669;
  font-size: 0.9rem;
}

/* Center Panel - Main Content */
.bonuses-panel-center {
  padding: 1.25rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.loading-container p {
  margin-top: 0.75rem;
  color: #6b7280;
}

.no-bonuses {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  margin: 1rem;
}

.no-bonuses-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.no-bonuses h3 {
  margin-bottom: 0.375rem;
  color: #1f2937;
  font-size: 1.1rem;
}

.no-bonuses p {
  color: #6b7280;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bonus-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.bonus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.bonus-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.bonus-details {
  flex-grow: 1;
}

.bonus-details h3 {
  margin: 0 0 0.2rem;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
}

.bonus-type {
  color: #6b7280;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.bonus-description {
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.bonus-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.bonus-points {
  font-weight: 700;
  color: #059669;
  font-size: 0.9rem;
}

.bonus-expiry {
  color: #6b7280;
  font-size: 0.8rem;
}

.bonus-action {
  margin-left: 1rem;
}

.claim-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-size: 0.85rem;
}

.claim-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.claim-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Right Panel - Tips & Actions */
.bonuses-panel-right {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tips-card,
.achievements-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.tip-item:last-child {
  border-bottom: none;
}

.tip-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.tip-content {
  flex: 1 1;
}

.tip-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.tip-description {
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.4;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
}

.achievement-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.achievement-content {
  flex: 1 1;
}

.achievement-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.achievement-description {
  color: #6b7280;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar {
  flex: 1 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
}

/* Quick Actions */
.quick-actions {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.quick-actions .section-title {
  margin: 0 0 1rem 0;
  color: #111827;
  font-size: 1.1rem;
  font-weight: 700;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  white-space: nowrap;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.action-btn-primary:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
  color: white;
}

.action-btn-secondary {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-btn-secondary:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
  color: #1f2937;
}

.action-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.action-btn:hover i {
  transform: scale(1.1);
}

/* Responsive adjustments for quick actions */
@media (max-width: 768px) {
  .action-grid {
    gap: 0.5rem;
  }

  .action-btn {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }

  .action-btn i {
    font-size: 0.95rem;
  }
}

/* Alert styles for consistency */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid;
}

.alert-danger {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* Button styles for consistency */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  color: white;
  text-decoration: none;
}

/* Spinner styles */
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.125em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border-animation 0.75s linear infinite;
}

.spinner-border-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 0.125em;
}

.text-primary {
  color: #3b82f6;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ms-2 {
  margin-left: 0.5rem;
}

@keyframes spinner-border-animation {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .bonuses-hero-centered {
    flex-direction: column;
    text-align: center;
  }
  
  .bonuses-info {
    text-align: center;
  }
  
  .bonuses-meta {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .bonuses-header-content,
  .bonuses-wide-grid {
    padding: 1rem;
  }
  
  .bonuses-icon-large {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }
  
  .bonuses-title-main {
    font-size: 1.75rem;
  }
  
  .bonuses-title-group {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .bonus-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .bonus-icon {
    margin: 0;
  }
  
  .bonus-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .bonus-action {
    margin: 0;
    width: 100%;
  }
  
  .claim-btn {
    width: 100%;
  }
  
  .bonus-stats-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .bonuses-hero-centered {
    gap: 1rem;
  }
  
  .bonuses-title-main {
    font-size: 1.5rem;
  }
  
  .stat-card-compact {
    padding: 0.75rem;
  }
  
  .stat-card-compact .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .stat-card-compact .stat-number {
    font-size: 1.125rem;
  }
}

/* ================================================== */
/*                Points History Page                  */
/*                Enhanced & Compact Design            */
/* ================================================== */

/* Main Container - Remove Gap Issues */
.points-history-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* Enhanced Points Header with Star Points Theme */
.points-header-section {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6b21a8 100%);
  color: white;
  padding: 1rem 0 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3);
  display: block;
  width: 100%;
}

.points-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.points-header-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/dots-pattern.svg') repeat;
  pointer-events: none;
}

.points-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.points-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
}

/* Compact Points Icon with Coins Points Theme */
.points-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.points-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.points-icon-large::before {
  content: '🪙';
  font-size: 1.75rem;
  animation: coinSpin 3s ease-in-out infinite;
}

@keyframes coinSpin {

  0%,
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.05) rotateY(180deg);
    opacity: 0.9;
  }
}

.points-icon-large:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* Compact Points Info */
.points-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
}

.points-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.points-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.points-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.points-description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem 0;
}

.points-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.meta-item i {
  font-size: 0.75rem;
}

/* Wide Screen Container - Sidebar-aware */
.points-wide-container {
  max-width: 1600px;
  padding: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0;
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .points-wide-container {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .points-wide-container {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Main content area with ClaimBonusesPage-style background */
.points-main-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

/* Section Titles */
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title i {
  font-size: 1rem;
  color: #667eea;
}

/* Statistics Section */
.points-statistics-section {
  background: white;
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: white;
  flex-shrink: 0;
}

.stat-icon.positive {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon.negative {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-icon.neutral {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-content {
  flex: 1 1;
  min-width: 0;
}

.stat-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.125rem;
}

.stat-value.positive {
  color: #059669;
}

.stat-value.negative {
  color: #dc2626;
}

.stat-value.neutral {
  color: #1d4ed8;
}

.stat-label {
  font-size: 0.65rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Filters Section */
.points-filters-section {
  background: white;
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.filters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.search-bar {
  position: relative;
  flex: 1 1;
  min-width: 250px;
}

.search-bar i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.9rem;
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 110px;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Transactions Section */
.transactions-section {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.transactions-container {
  margin-top: 0.75rem;
}

.transactions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.transactions-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.transactions-header h3 i {
  font-size: 1rem;
  color: #667eea;
}

.transaction-count {
  font-size: 0.8rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #6b7280;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #d1d5db;
}

.empty-state h4 {
  margin-bottom: 0.5rem;
  color: #374151;
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* Transactions Table */
.transactions-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.transactions-table th {
  background: #f9fafb;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  position: relative;
}

.transactions-table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.transactions-table th.sortable:hover {
  background: #f3f4f6;
}

.transactions-table th.sortable.active {
  color: #667eea;
}

.transactions-table th.sortable i {
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.transactions-table td {
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
  vertical-align: middle;
}

.transaction-row:hover {
  background: #f9fafb;
}

.date-cell {
  color: #6b7280;
  font-family: monospace;
  font-size: 0.8rem;
}

.description-cell {
  color: #374151;
  font-weight: 500;
}

.status-cell {
  text-align: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.login {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.status-badge.task {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.manual {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge.bonus {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.status-badge.spent {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.points-cell {
  text-align: right;
  font-weight: 600;
}

.points-value.positive {
  color: #059669;
}

.points-value.negative {
  color: #dc2626;
}

/* Loading State */
.points-history-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .points-hero-centered {
    flex-direction: column;
    text-align: center;
  }

  .points-info {
    text-align: center;
  }

  .points-meta {
    justify-content: center;
  }
}

@media (max-width: 768px) {

  .points-header-content,
  .points-wide-container {
    padding: 1rem;
  }

  .points-main-content {
    padding: 1rem;
  }

  .points-icon-large {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }

  .points-title-main {
    font-size: 1.75rem;
  }

  .points-title-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .statistics-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .filters-container {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-controls {
    justify-content: stretch;
  }

  .filter-select {
    flex: 1 1;
  }

  .transactions-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  body.sidebar-expanded .points-wide-container,
  body.sidebar-collapsed .points-wide-container {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .points-hero-centered {
    gap: 1rem;
  }

  .points-title-main {
    font-size: 1.5rem;
  }

  .stat-card {
    padding: 0.75rem;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

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

  .transactions-table th,
  .transactions-table td {
    padding: 0.75rem 0.5rem;
  }

  .status-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }
}

/* Additional utility classes for consistency */
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.125em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border-animation 0.75s linear infinite;
}

.text-primary {
  color: #3b82f6;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ms-2 {
  margin-left: 0.5rem;
}

@keyframes spinner-border-animation {
  to {
    transform: rotate(360deg);
  }
}

/* Alert styles for consistency */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 2rem;
  border: 1px solid;
}

.alert-danger {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* Button styles for consistency */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-outline-danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}

.btn-outline-danger:hover {
  background: #dc2626;
  color: white;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}

.ms-3 {
  margin-left: 1rem;
}

.me-2 {
  margin-right: 0.5rem;
}

/* Pagination Controls */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}

.pagination-info {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}
.journey-back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  text-decoration: none;
}

.journey-back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
  color: white;
}

.journey-back-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.journey-back-button i {
  font-size: 1.1rem;
}

.journey-back-button__text {
  white-space: nowrap;
}

/* Compact variant - smaller, less prominent */
.journey-back-button--compact {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: #6c757d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.journey-back-button--compact:hover {
  background: #5a6268;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Floating variant - fixed position for long pages */
.journey-back-button--floating {
  position: fixed;
  top: 100px;
  left: 20px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.journey-back-button--floating:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .journey-back-button {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  
  .journey-back-button__text {
    display: none;
  }
  
  .journey-back-button i {
    font-size: 1.25rem;
  }
  
  .journey-back-button--floating {
    top: 80px;
    left: 10px;
    padding: 0.5rem;
  }
}

/* Animation for initial appearance */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.journey-back-button {
  animation: slideInFromLeft 0.3s ease-out;
}

/* CreateQuestionnairePage Styles */

.create-questionnaire-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  background: var(--body-bg);
}

/* Form Container - Matching CreateTaskPage */
.form-container {
  max-width: 1600px;
  margin: 2rem auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: minmax(800px, 1fr) minmax(500px, 600px); /* Both sections wider */
  grid-gap: 2rem;
  gap: 2rem;
  align-items: start;
}

/* Mobile-first approach - ensure container is flexible */
@media (max-width: 600px) {
  .form-container {
    margin: 0;
    padding: 0.5rem;
    gap: 1rem;
    grid-template-columns: 1fr; /* Single column on mobile */
    display: flex;
    flex-direction: column;
  }
}

/* Main form area */
.form-main {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  min-width: 800px;
  height: -webkit-fit-content;
  height: fit-content;
  min-height: 700px; /* Ensure minimum height matches preview container */
}

/* Override min-width for mobile */
@media (max-width: 1024px) {
  .form-main {
    min-width: auto;
    width: 100%;
  }
}

/* Preview container */
.preview-container {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  min-width: 500px;
  max-width: 600px;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  min-height: 700px; /* Same minimum height as main form */
  /* overflow-y: auto; Allow scrolling if content exceeds height */
  /* max-height: 85vh; Prevent it from being too tall, increased slightly */
}

/* Override constraints for mobile */
@media (max-width: 1024px) {
  .preview-container {
    min-width: auto;
    max-width: none;
    width: 100%;
    position: static;
    min-height: auto;
    max-height: none;
  }
}

.preview-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Removed eye icon
.preview-title::before {
  content: "👁️";
  font-size: 1.2rem;
} */

/* Form styling */
.create-questionnaire-form {
  width: 100%;
}

.form-section {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  /* background: #f8fafc; */
  background: white;
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; - Removed external border */
}

.form-section h3 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Options Builder Styles */
.options-builder {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  background: white;
}

.options-list {
  max-height: 300px;
  overflow-y: auto;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  background: white;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.option-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.option-number {
  background: #3b82f6;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.option-item .form-control {
  flex: 1 1;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9rem;
}

.option-item .form-control:focus {
  border-color: #3b82f6 !important;
  border-radius: 4px !important; /* Preserve curved corners */
  outline: 0 !important;
  box-shadow: none !important; /* Remove duplicate border effect */
}

.option-controls {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.option-controls .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.option-controls .btn:disabled {
  opacity: 0.4;
}

.add-option-form {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  border: 2px dashed #d1d5db;
  transition: all 0.2s ease;
}

.add-option-form:hover {
  border-color: #3b82f6;
  background: #f8faff;
}

.add-option-form .input-group {
  margin-bottom: 0.5rem;
}

.add-option-form .btn {
  white-space: nowrap;
}

/* Question Preview Cards - Enhanced for wider layout */
.question-preview-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  margin-bottom: 1rem;
}

.question-preview-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
  background: #f8faff;
  transform: translateY(-2px);
}

.question-preview-card.editing-active {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.question-preview-card.editing-active:hover {
  border-color: #d97706;
  background: #fef3c7;
}

.question-preview-card h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
  font-size: 1rem;
  margin-bottom: 1rem;
  white-space: nowrap; /* Keep question in one row */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ... if text is too long */
  max-width: 100%;
}

.question-preview-card .badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.75rem;
}

/* Question card header with controls */
.question-preview-header {
  display: flex;
  justify-content: between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.question-preview-title {
  flex: 1 1;
  min-width: 0; /* Allow text to shrink */
}

.question-preview-controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0; /* Prevent controls from shrinking */
}

.question-preview-card .btn-group {
  display: flex;
  gap: 0.25rem;
}

.question-preview-card .btn-group .btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

/* Delete button styling */
.question-preview-card .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: white;
}

.question-preview-card .btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Options list with collapse expand */
.question-preview-card ul {
  margin-top: 1rem;
  padding-left: 1rem;
  list-style: none;
}

.question-preview-card ul li {
  margin-bottom: 0.4rem;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  padding-left: 1.5rem;
}

.question-preview-card ul li:before {
  content: "•";
  color: #9ca3af;
  position: absolute;
  left: 0;
}

/* Collapsed options state */
.question-options-collapsed li:nth-child(n+3) {
  display: none;
}

.question-options-expanded li {
  display: list-item;
}

/* Show more less button */
.show-more-options {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 0.5rem;
}

.show-more-options:hover {
  color: #2563eb;
  text-decoration: none;
}

/* Improved Tips Section */
.preview-tips {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 1rem;
}

.preview-tips h6 {
  color: #0369a1;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.preview-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #0369a1;
  font-size: 0.875rem;
  line-height: 1.5;
}

.preview-tips li {
  margin-bottom: 0.25rem;
}

/* Layout improvements */
.layout-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.layout-section h3 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

/* Better utilization of wider space for form fields */
.create-task-form-group {
  margin-bottom: 1.5rem;
}

.create-task-form-group .row {
  gap: 1rem;
}

.create-task-form-group .col-md-6 {
  min-width: 300px;
}

/* Enhanced input styling */
.form-control {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.create-task-form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Enhanced empty state styling */
.preview-container .text-muted.text-center {
  background: #f8fafc;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 3rem 2rem;
  color: #6b7280;
}

.preview-container .text-muted.text-center i {
  color: #9ca3af;
  margin-bottom: 1rem;
}

.preview-container .text-muted.text-center p {
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

/* Modal Styles for Question Editing */
.question-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.question-edit-modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.question-edit-modal-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: between;
  align-items: center;
  gap: 1rem;
}

.question-edit-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1 1;
}

.question-edit-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.question-edit-modal-close:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.question-edit-modal-body {
  padding: 1.5rem;
}

.question-edit-modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Modal form fields - larger and more accessible */
.modal-form-group {
  margin-bottom: 1.5rem;
}

.modal-form-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.modal-form-control {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  min-height: 48px;
}

.modal-form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.modal-form-control.textarea {
  min-height: 80px;
  resize: vertical;
}

/* Modal options builder - enhanced for better editing */
.modal-options-builder {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  /* padding: 1rem; */
  background: #f9fafb;
}

.modal-options-list {
  /* max-height: 400px;
  overflow-y: auto; */
  margin-bottom: 1rem;
}

.modal-option-item {
  display: flex;
  align-items: center; /* Changed from flex-start to center for better alignment */
  gap: 0.75rem;
  margin-bottom: 1rem;
  background: white;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.modal-option-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.modal-option-number {
  background: #3b82f6;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.modal-option-input {
  flex: 1 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  min-height: 48px;
  resize: vertical;
}

.modal-option-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  outline: none;
}

.modal-option-controls {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  flex-shrink: 0;
}

.modal-option-controls .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  min-width: 36px; /* Ensure buttons don't get squished */
}

.modal-option-controls .btn:disabled {
  opacity: 0.4;
}

.modal-add-option-form {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  border: 2px dashed #d1d5db;
  transition: all 0.2s ease;
}

.modal-add-option-form:hover {
  border-color: #3b82f6;
  background: #f8faff;
}

.modal-add-option-form .input-group {
  display: flex;
  gap: 0.5rem;
}

.modal-add-option-form .form-control {
  flex: 1 1;
  min-height: 48px;
}

/* Mobile responsive modal */
@media (max-width: 768px) {
  .question-edit-modal {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  .question-edit-modal-content {
    max-width: none;
    width: 100%;
    max-height: calc(100vh - 4rem);
    margin: 0;
  }
  
  .question-edit-modal-header,
  .question-edit-modal-body,
  .question-edit-modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .question-edit-modal-header {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }
  
  .question-edit-modal-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .question-edit-modal-footer {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    flex-direction: column-reverse;
  }
  
  .question-edit-modal-footer .btn {
    width: 100%;
    margin: 0;
  }
  
  .question-edit-modal-title {
    font-size: 1.1rem;
  }
  
  /* Mobile option items - keep horizontal layout but adjust spacing */
  .modal-option-item {
    gap: 0.5rem;
    padding: 0.875rem;
  }
  
  .modal-option-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  
  .modal-option-controls .btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.8rem;
  }
  
  .modal-option-input {
    font-size: 0.9rem;
    padding: 0.625rem 0.75rem;
    min-height: 44px;
  }
  
  .modal-option-controls {
    gap: 0.375rem; /* Slightly more space on mobile */
  }
  
  .modal-add-option-form .input-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .modal-add-option-form .btn {
    width: 100%;
  }
  
  .modal-form-control {
    font-size: 16px; /* Prevent zoom on iOS */
    min-height: 48px;
  }
  
  .modal-form-control.textarea {
    min-height: 80px;
  }
}

@media (max-width: 480px) {
  .question-edit-modal {
    padding: 0.25rem;
    padding-top: 1rem;
  }
  
  .question-edit-modal-content {
    max-height: calc(100vh - 2rem);
    border-radius: 8px;
  }
  
  .question-edit-modal-header,
  .question-edit-modal-body,
  .question-edit-modal-footer {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
  
  .modal-option-item {
    padding: 0.75rem;
  }
  
  .modal-option-number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }
  
  .modal-option-controls .btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 0.75rem;
  }
  
  .modal-option-controls {
    gap: 0.25rem;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .form-container {
    grid-template-columns: minmax(600px, 1fr) minmax(400px, 450px);
    max-width: 1200px;
  }
}

@media (max-width: 1024px) {
  .form-container {
    grid-template-columns: 1fr;
    max-width: 900px;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .preview-container {
    position: static;
    min-height: auto;
    max-height: none;
    min-width: auto;
    max-width: none;
    width: 100%;
    order: 2; /* Show preview after form on mobile */
  }
  
  .form-main {
    min-height: auto;
    min-width: auto;
    width: 100%;
    order: 1; /* Show form first on mobile */
  }
}

@media (max-width: 768px) {
  .create-questionnaire-page {
    padding: 0;
  }
  
  .form-container {
    margin: 0.5rem;
    padding: 0.5rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
  }
  
  .form-main,
  .preview-container {
    padding: 1rem;
    border-radius: 12px;
    width: 100%;
    min-width: auto;
    max-width: none;
  }
  
  .form-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
  }
  
  .form-section h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  /* Make form fields stack vertically on mobile */
  .create-task-form-group .row {
    flex-direction: column;
    gap: 0;
  }
  
  .create-task-form-group .col-md-6 {
    min-width: auto;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  /* Option item mobile layout */
  .option-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem;
  }
  
  .option-number {
    align-self: flex-start;
    margin-bottom: 0.5rem;
  }
  
  .option-controls {
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  /* Add option form mobile */
  .add-option-form {
    padding: 1rem;
  }
  
  .add-option-form .input-group {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .add-option-form .btn {
    margin-top: 0.5rem;
    width: 100%;
  }
  
  /* Question preview cards mobile */
  .question-preview-card {
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .question-preview-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  
  .question-preview-controls {
    justify-content: center;
  }
  
  .question-preview-card h6 {
    white-space: normal; /* Allow wrapping on mobile */
    overflow: visible;
    text-overflow: initial;
    font-size: 0.95rem;
  }
  
  /* Preview title mobile */
  .preview-title {
    font-size: 1.2rem;
    text-align: center;
  }
  
  /* Improve touch targets for mobile */
  .btn {
    min-height: 44px; /* Minimum touch target size */
    min-width: 44px;
  }
  
  .form-control {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  textarea.form-control {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Better scrolling for mobile */
  .preview-container {
    -webkit-overflow-scrolling: touch;
  }
  
  .options-list {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Improve clickable areas on mobile */
  .question-preview-card {
    min-height: 44px;
    padding: 1rem;
  }
  
  .show-more-options {
    min-height: 44px;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .create-questionnaire-page {
    padding: 0;
  }
  
  .form-container {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  
  .form-main,
  .preview-container {
    padding: 1rem;
    border-radius: 8px;
  }
  
  .form-section {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .form-section h3 {
    font-size: 1rem;
  }
  
  .create-task-form-label {
    font-size: 0.9rem;
  }
  
  .form-control {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  
  /* Button adjustments for small screens */
  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  .question-preview-card .btn-group .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    min-width: 28px;
    height: 28px;
  }
  
  /* Options builder mobile */
  .options-builder {
    padding: 0.75rem;
  }
  
  .option-item {
    padding: 0.75rem;
  }
  
  .option-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }
  
  .option-controls .btn {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  
  /* Question preview adjustments */
  .question-preview-card {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .question-preview-card h6 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  
  .question-preview-card ul li {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
  }
  
  .show-more-options {
    font-size: 0.8rem;
  }
  
  /* Tips section mobile */
  .preview-tips {
    padding: 0.75rem;
  }
  
  .preview-tips h6 {
    font-size: 0.85rem;
  }
  
  .preview-tips ul {
    font-size: 0.8rem;
  }
  
  /* Ensure text is readable on small screens */
  body {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Improve select and input appearance on mobile */
  select.form-control {
    font-size: 16px;
    min-height: 44px;
  }
  
  /* Better spacing for small screens */
  .btn + .btn {
    margin-left: 0.25rem;
  }
  
  /* Improve modal form scrolling on very small screens */
  .create-questionnaire-page {
    overflow-x: hidden;
  }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
  .modal-option-item {
    gap: 0.375rem;
    padding: 0.75rem;
  }
  
  .modal-option-number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }
  
  .modal-option-controls .btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 0.75rem;
  }
  
  .modal-option-controls {
    gap: 0.25rem;
  }
}

/* Loading overlay */
.create-questionnaire-page .loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  gap: 1rem;
}

.create-questionnaire-page .loading-ring {
  width: 3rem;
  height: 3rem;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.create-questionnaire-page .loading-container p {
  color: #64748b;
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

/* QuestionnairePages Specific Styles */

/* Sticky Header for Questionnaire Hub - Fixed positioning and z-index */
.questionnaire-page .header-with-stats {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 70px;
  /* Position below the top navbar (70px height) */
  z-index: 50;
  /* Lower z-index to not block top navbar dropdowns */
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #e2e8f0;
  width: 100%;
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
}

/* Ensure smooth transition when scrolling */
.questionnaire-page .header-with-stats {
  transition: box-shadow 0.2s ease-in-out;
}

/* Enhanced shadow when scrolled */
.questionnaire-page .header-with-stats.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ensure content doesn't get hidden behind sticky header */
.questionnaire-page .dashboard-grid-six-panel {
  position: relative;
  z-index: 1;
  padding-top: 0;
}

/* Ensure the main content area doesn't scroll behind header */
.questionnaire-page .homepage-container-single-screen {
  position: relative;
}

/* Add some visual separation when header is sticky */
.questionnaire-page .header-with-stats.scrolled {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

/* Force the sticky header to stay on top */
.questionnaire-page .header-with-stats {
  will-change: transform;
  transform: translateZ(0);
}

/* Ensure the header content is properly contained */
.questionnaire-page .header-content {
  position: relative;
  z-index: 51;
  /* Slightly higher than header but still below top navbar */
}

/* Cross-browser sticky support */
.questionnaire-page .header-with-stats {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
}

/* Ensure the header doesn't get covered by other elements */
.questionnaire-page .header-with-stats {
  isolation: isolate;
}

/* Ensure parent containers allow proper scrolling control */
.questionnaire-page {
  overflow: hidden !important;
  /* Prevent main page scrolling */
  height: 100vh;
  /* Full viewport height */
}

.questionnaire-page .homepage-container-single-screen {
  overflow: hidden !important;
  /* Control overflow at container level */
  height: 100vh;
  /* Full viewport height */
  display: flex;
  flex-direction: column;
}

/* Force sticky behavior on all browsers - Fixed z-index */
.questionnaire-page .header-with-stats {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 70px !important;
  /* Stick below top navbar */
  z-index: 50 !important;
  /* Allow top navbar dropdowns to appear above */
}

/* Loading and error states */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  gap: 1rem;
}

.loading-ring {
  width: 3rem;
  height: 3rem;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: questionnaire-loading-spin 1s linear infinite;
  /* Performance optimizations for smooth rotation */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes questionnaire-loading-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-container p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}

.error-container h3 {
  color: #dc2626;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.error-container p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}
/* Modern Questionnaire Hub Layout - Job Search Interface Style */

/* 
 * CSS Custom Properties for easy width control
 * 
 * To adjust column widths, modify these variables:
 * --questionnaire-hub-list-width: Controls questionnaire list column width (default: 1fr)
 * --questionnaire-hub-details-width: Controls questionnaire details column width (default: 440px)
 * 
 * Examples:
 * Equal widths: --questionnaire-hub-list-width: 1fr; --questionnaire-hub-details-width: 1fr;
 * List flexible, Details fixed: --questionnaire-hub-list-width: 1fr; --questionnaire-hub-details-width: 440px; (current)
 * List 2-3, Details 1-3: --questionnaire-hub-list-width: 2fr; --questionnaire-hub-details-width: 1fr;
 * Both flexible 1-to-2 ratio: --questionnaire-hub-list-width: 1fr; --questionnaire-hub-details-width: 2fr;
 */
:root {
  --questionnaire-hub-list-width: 2fr;
  /* Questionnaire list column width */
  --questionnaire-hub-details-width: 4fr;
  /* 440px; Questionnaire details column width (fixed 440px) */
  --questionnaire-hub-column-gap: 2rem;
  /* Gap between columns */
  --questionnaire-hub-container-padding: 2rem;
  /* Left and right padding */
}

.questionnaire-hub-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  scroll-behavior: smooth;
}

/* Ensure questionnaire-hub-container works with compact header */
.questionnaire-hub-container .compact-questionnaire-header {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

/* Custom scrollbar for main container */
.questionnaire-hub-container::-webkit-scrollbar {
  width: 8px;
}

.questionnaire-hub-container::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.questionnaire-hub-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.questionnaire-hub-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Firefox scrollbar */
.questionnaire-hub-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Header Section */
.questionnaire-hub-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* Header collapsed state */
.questionnaire-hub-header.collapsed {
  transform: translateY(-100%);
}

/* Header scrolled state */
.questionnaire-hub-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom-color: #cbd5e1;
}

.questionnaire-hub-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  padding: 0.5rem var(--questionnaire-hub-container-padding);
}

.questionnaire-hub-search-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Main Content Layout */
.questionnaire-hub-main-two-column {
  display: flex;
  flex-grow: 1;
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
  padding: 2rem;
  padding: var(--questionnaire-hub-container-padding);
  max-width: 1400px;
  min-height: 100vh;
  flex: 1 1;
  align-items: start;
  /* Align both columns to the top */
  min-height: 0;
}

/* Questionnaire List Column */
.questionnaire-hub-questionnaire-list-column {
  width: 50%;
  max-width: 600px;
  overflow: visible;
  transition: all 0.3s ease;
  padding: 0;
  margin-right: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.questionnaire-hub-questionnaire-list-header {
  padding: 1.5rem 2rem 1rem 2rem;
  border-bottom: 1px solid #f1f5f9;
  background: white;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.questionnaire-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.questionnaire-hub-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.questionnaire-hub-refresh-button {
  width: 2rem;
  height: 2rem;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.questionnaire-hub-refresh-button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.questionnaire-hub-refresh-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.questionnaire-hub-refresh-button .spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.questionnaire-hub-questionnaire-list-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Custom scrollbar for questionnaire list */
.questionnaire-hub-questionnaire-list-content::-webkit-scrollbar {
  width: 8px;
}

.questionnaire-hub-questionnaire-list-content::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}

.questionnaire-hub-questionnaire-list-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
  border: 1px solid #f8fafc;
}

.questionnaire-hub-questionnaire-list-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Firefox scrollbar */
.questionnaire-hub-questionnaire-list-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

/* Questionnaire Details Column */
.questionnaire-hub-questionnaire-details-column {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Questionnaire Cards */
.questionnaire-hub-questionnaire-cards {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 0.5rem;
}

.questionnaire-card-wrapper {
  transition: all 0.2s ease;
  border-radius: 12px;
  overflow: hidden;
}

.questionnaire-card-wrapper:hover {
  transform: translateY(-2px);
}

.questionnaire-card-wrapper.selected {
  transform: translateY(-1px);
}

.questionnaire-card-wrapper.selected .questionnaire-card {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  /* Darker blue border for selection (blue-500) */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  /* Blue ring highlight for selection */
}

.questionnaire-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.questionnaire-card:hover {
  background: #f8fafc;
  border: 2px solid #93c5fd;
  /* Lighter blue border for hover (blue-300) */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  /* Enhanced shadow for better visibility */
  /* transform: translateY(-2px); */
  /* More pronounced lift effect */
}

.questionnaire-card-modern {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.questionnaire-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.questionnaire-title {
  font-size: 1.125rem;
  /* Match task title size */
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  flex: 1 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* New container for vertically stacked badges */
.questionnaire-badges-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.questionnaire-status-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.questionnaire-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.questionnaire-status-badge.completed {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid #22c55e;
}

.questionnaire-status-badge.available {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #3b82f6;
}

.questionnaire-status-badge.open {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #f59e0b;
}

.questionnaire-status-badge.draft {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #374151;
  border: 1px solid #9ca3af;
}

.questionnaire-points {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.questionnaire-description {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.questionnaire-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.questionnaire-meta-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1;
  min-width: 0;
}

.questionnaire-meta-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.questionnaire-category {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.questionnaire-verification-info {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.questionnaire-date {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
}

/* No questionnaires message */
.no-questionnaires-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: #64748b;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  margin: 1rem;
}

.no-questionnaires-message i {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.no-questionnaires-message h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.5rem 0;
}

.no-questionnaires-message p {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

.no-questionnaires-message .text-muted {
  color: #94a3b8;
  font-size: 0.813rem;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid #f1f5f9;
  background: white;
  border-radius: 0 0 16px 16px;
}

.pagination-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.pagination-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.pagination-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #3b82f6;
  color: rgb(240, 98, 9);
  font-weight: bolder;
}

/* Questionnaire Details Placeholder */
.questionnaire-details-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
}

.placeholder-icon {
  width: 4rem;
  height: 4rem;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid #93c5fd;
}

.placeholder-icon i {
  font-size: 1.5rem;
  color: #3b82f6;
}

.questionnaire-details-placeholder h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.5rem 0;
}

.questionnaire-details-placeholder p {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  max-width: 20rem;
}

/* Main Container */
.questionnaire-details-container {
  height: 100%;
  display: block;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: auto;
}

/* Header Section */
.questionnaire-details-header {
  background: white;
  border: none;
  padding: 1rem 2rem 0.75rem 2rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.questionnaire-details-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.questionnaire-detail-title-area {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.questionnaire-detail-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.2;
  flex-shrink: 0;
}

.questionnaire-details-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
}

.questionnaire-detail-category-badge,
.questionnaire-detail-points-badge,
.questionnaire-detail-participants-badge,
.questionnaire-detail-date-badge,
.questionnaire-detail-questions-badge,
.questionnaire-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}

.questionnaire-detail-category-badge {
  background: #f1f5f9;
  color: #64748b;
}

.questionnaire-detail-points-badge {
  background: #fef3c7;
  color: #92400e;
}

.questionnaire-detail-questions-badge {
  background: #e0e7ff;
  color: #3730a3;
}

.questionnaire-detail-participants-badge {
  background: #d1fae5;
  color: #065f46;
}

.questionnaire-detail-status-badge.status-available {
  background: #dbeafe;
  color: #1e40af;
}

.questionnaire-detail-status-badge.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.questionnaire-detail-date-badge {
  background: #f3f4f6;
  color: #6b7280;
}

.questionnaire-details-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.questionnaire-details-action-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.125rem;
}

.questionnaire-details-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.questionnaire-details-action-btn.close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Content Section */
.questionnaire-details-content {
  flex: 1 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 0 2.5rem 2.5rem 2.5rem;
  /* Add proper padding for content inside container */
}

/* Custom scrollbar */
.questionnaire-details-content::-webkit-scrollbar {
  width: 6px;
}

.questionnaire-details-content::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 3px;
}

.questionnaire-details-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.questionnaire-details-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Section Styling - Minimal with subtle separation */
.questionnaire-details-section {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.questionnaire-details-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.questionnaire-details-section-header {
  margin-bottom: 1.25rem;
}

.questionnaire-details-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  letter-spacing: -0.025em;
}

.questionnaire-details-section-title i {
  color: #3b82f6;
  font-size: 1.125rem;
}

.questionnaire-details-section-content {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Description */
.questionnaire-details-description {
  color: #475569;
  font-size: 1rem;
  line-height: 1.75;
  margin: 1rem 0 0 0;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 6px;
}

/* Action buttons */
.questionnaire-details-actions-grid {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.questionnaire-hub-action-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.questionnaire-hub-action-button.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.questionnaire-hub-action-button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  color: white !important;
}

.questionnaire-hub-action-button.secondary {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #374151 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.questionnaire-hub-action-button.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: #1f2937 !important;
}

/* ================================================================
 * List Pages (Take Surveys / My Surveys) - Stacked card meta layout
 * - Hide description on cards
 * - Show meta items row-by-row: General, Questions count, Date/Time, Responses
 * - Remove margin hacks and prevent hover border shift
 * ================================================================ */

/* Hide description on survey cards shown in lists */
.questionnaire-hub-questionnaire-cards .questionnaire-description {
  display: none !important;
}

/* Prevent layout shift on hover by keeping border width constant */
.questionnaire-hub-questionnaire-cards .questionnaire-card {
  border-width: 1px;
  /* ensure stable */
}

.questionnaire-hub-questionnaire-cards .questionnaire-card:hover {
  border-width: 1px;
  /* override earlier 2px rule */
}

/* Task-card style layout: 2 rows with bottom row spanning 2 columns */
.questionnaire-hub-questionnaire-cards .questionnaire-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  /* left column flexible, right column auto */
  grid-row-gap: 6px;
  row-gap: 6px;
  grid-column-gap: 12px;
  column-gap: 12px;
  align-items: start;
}

/* Flatten left and right wrappers so their children become individual grid items */
.questionnaire-hub-questionnaire-cards .questionnaire-meta-left,
.questionnaire-hub-questionnaire-cards .questionnaire-meta-right {
  display: contents;
}

/* Row 1: General (full width) */
.questionnaire-hub-questionnaire-cards .questionnaire-category {
  grid-column: 1 / -1;
  /* span all columns */
  display: flex;
  justify-content: flex-start;
  order: 1;
}

/* Row 2: Questions, Date and Time, Responses on same row */
.questionnaire-hub-questionnaire-cards .questionnaire-verification-info {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  order: 2;
}

.questionnaire-hub-questionnaire-cards .questionnaire-date {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  order: 2;
}

/* Remove old spacing hack */
.questionnaire-hub-questionnaire-cards .questionnaire-meta-right {
  margin-left: 0 !important;
}

/* Compact spacing under header */
.questionnaire-hub-questionnaire-cards .questionnaire-header-row {
  margin-bottom: 0.5rem;
}

/* Ensure date and time appears and aligns properly */
.questionnaire-hub-questionnaire-cards .questionnaire-date {
  display: flex !important;
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
  order: 2;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ================================================================
 * SLIDE-OUT DETAIL PANEL STYLES (matching TaskTakerPage design)
 * ================================================================ */

/* When detail panel is open, grey out and blur the questionnaire list */
.questionnaire-hub-main-two-column.detail-panel-open .questionnaire-hub-questionnaire-list-column {
  filter: blur(0px) brightness(0.85);
  pointer-events: none;
  opacity: 0.8;
}

/* Overlay that covers the questionnaire list when detail panel is open */
.questionnaire-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  cursor: pointer;
}

/* Questionnaire Detail Panel - slides from right */
.questionnaire-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  min-width: 600px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.questionnaire-detail-panel.panel-open {
  transform: translateX(0);
}

.questionnaire-detail-header {
  flex-shrink: 0;
  margin-top: 50px;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  width: 100%;
  box-sizing: border-box;
}

.questionnaire-detail-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  position: relative;
}

.questionnaire-detail-title-area {
  flex: 1 1;
  min-width: 0;
}

.questionnaire-detail-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  word-wrap: break-word;
}

.questionnaire-detail-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
}

.questionnaire-detail-category-badge,
.questionnaire-detail-points-badge,
.questionnaire-detail-participants-badge,
.questionnaire-detail-date-badge,
.questionnaire-detail-questions-badge,
.questionnaire-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}

.questionnaire-detail-category-badge {
  background: #f1f5f9;
  color: #64748b;
}

.questionnaire-detail-points-badge {
  background: #fef3c7;
  color: #92400e;
}

.questionnaire-detail-questions-badge {
  background: #e0e7ff;
  color: #3730a3;
}

.questionnaire-detail-participants-badge {
  background: #d1fae5;
  color: #065f46;
}

.questionnaire-detail-status-badge.status-available {
  background: #dbeafe;
  color: #1e40af;
}

.questionnaire-detail-status-badge.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.questionnaire-detail-date-badge {
  background: #f3f4f6;
  color: #6b7280;
}

.questionnaire-detail-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
}

.questionnaire-details-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
}

.questionnaire-detail-action-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.questionnaire-detail-action-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.questionnaire-detail-action-btn.new-tab:hover {
  background: #dbeafe;
  color: #2563eb;
}

.close-questionnaire-detail-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.close-questionnaire-detail-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.close-questionnaire-detail-btn i {
  font-size: 1.1rem;
}

.questionnaire-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Make the content fill the remaining space and scroll */
.questionnaire-detail-content>div:last-child {
  flex: 1 1;
  overflow-y: auto;
}

/* Override questionnaire list content scrolling - let main container handle all scrolling */
.questionnaire-hub-questionnaire-list-content {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  flex: none !important;
  position: static !important;
}

/* Override questionnaire list column to prevent internal scrolling */
.questionnaire-hub-questionnaire-list-column {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Ensure questionnaire cards container allows natural flow */
.questionnaire-hub-questionnaire-cards {
  overflow: visible !important;
  height: auto !important;
}

/* Remove any scrollbar styling that might interfere */
.questionnaire-hub-questionnaire-list-content::-webkit-scrollbar {
  display: none !important;
}

.questionnaire-hub-questionnaire-list-column::-webkit-scrollbar {
  display: none !important;
}

/* Mobile responsiveness for slide-out panel */
@media (max-width: 1200px) {
  .questionnaire-detail-panel {
    width: 60vw;
    min-width: 500px;
  }

  .questionnaire-hub-questionnaire-list-column {
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .questionnaire-detail-panel {
    width: 100vw;
    min-width: 0;
    min-width: initial;
    left: 0;
  }

  .questionnaire-detail-header {
    padding: 1rem 1.5rem;
  }

  .questionnaire-detail-header-main {
    flex-direction: column;
    gap: 0.75rem;
  }

  .questionnaire-detail-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }

  .questionnaire-detail-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    flex: 1 1;
    min-width: 0;
  }

  .questionnaire-detail-metadata {
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    flex-direction: row;
  }

  .questionnaire-detail-category-badge,
  .questionnaire-detail-points-badge,
  .questionnaire-detail-participants-badge,
  .questionnaire-detail-date-badge,
  .questionnaire-detail-questions-badge,
  .questionnaire-detail-status-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.375rem;
    border-radius: 4px;
  }

  .questionnaire-detail-header-actions {
    align-self: flex-start;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: 0;
  }

  .questionnaire-hub-questionnaire-list-column {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
  }

  .questionnaire-hub-main-two-column {
    padding: 0.25rem;
    /* Reduced from 0.5rem to make it wider */
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
  }

  /* Ensure the list column takes full width available */
  .questionnaire-hub-questionnaire-list-column {
    width: 100%;
    max-width: none;
  }

  .questionnaire-hub-questionnaire-cards {
    padding: 0.25rem !important;
  }
}
/* Compact Questionnaire Header - More space for questionnaire list and details */

.compact-questionnaire-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  padding: 2rem 0 1rem 0; /* Increased top padding for more gap */
}

.compact-questionnaire-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

.compact-header-content {
  max-width: 1400px;
  /* margin: 0 auto; */
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Compact title section */
.compact-title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.compact-title-section > div:first-child {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1;
}

.compact-title-section .compact-stats-mini {
  margin-left: auto;
  margin-right: 1rem;
}

.compact-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.compact-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #6b7280;
  gap: 0.5rem;
}

.compact-breadcrumb-separator {
  color: #d1d5db;
}

/* Compact action button */
.compact-action-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white !important;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.compact-action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  color: white !important;
}

/* Compact controls section */
.compact-controls-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Compact type buttons */
.compact-type-buttons {
  display: flex;
  gap: 0.5rem;
}

.compact-type-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.compact-type-button:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.compact-type-button.active {
  color: white;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.compact-type-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
  color: #94a3b8;
}

.compact-type-button.disabled:hover {
  transform: none;
  box-shadow: none;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.compact-type-button-icon {
  font-size: 1rem;
}

.compact-type-button-label {
  font-weight: 600;
}

.compact-type-button-count {
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.25rem;
}

.compact-type-button.active .compact-type-button-count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Tooltip */
.compact-tooltip {
  position: relative;
}

.compact-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.compact-tooltip:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
  z-index: 1000;
  margin-bottom: -5px;
}

/* Search and filters */
.compact-search-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.compact-search-bar {
  position: relative;
  min-width: 250px;
}

.compact-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.875rem;
  pointer-events: none;
}

.compact-search-input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.compact-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.compact-search-input::placeholder {
  color: #94a3b8;
}

.compact-filter-dropdown {
  min-width: 120px;
}

/* Stats mini */
.compact-stats-mini {
  display: flex;
  gap: 1.5rem;
}

.stat-item-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.stat-number-mini {
        font-size: 0.65rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.stat-label-mini {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.stat-item-mini.earnings .stat-number-mini {
  color: #059669;
}

/* Location filter */
.compact-location-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  color: #166534;
  font-size: 0.813rem;
  font-weight: 600;
}

.compact-location-filter i {
  color: #059669;
}

/* Responsive design */
@media (max-width: 1024px) {
  .compact-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .compact-title-section > div:first-child {
    width: 100%;
    justify-content: space-between;
  }
  
  .compact-controls-section {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }
  
  .compact-search-filters {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .compact-header-content {
    padding: 0 1rem;
  }
  
  .compact-type-buttons {
    flex-wrap: wrap;
  }
  
  .compact-type-button {
    font-size: 0.813rem;
    padding: 0.625rem 0.875rem;
  }
  
  .compact-search-bar {
    min-width: 200px;
    flex: 1 1;
  }
  
  .compact-stats-mini {
    gap: 1rem;
  }
  
  .stat-number-mini {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  .compact-questionnaire-header {
    padding: 0.25rem 0 0.25rem 0; /* Much more compact padding for mobile */
  }
  
  .compact-header-content {
    padding: 0 1rem; /* Reduced horizontal padding */
    gap: 0.25rem; /* Much smaller gap between sections */
  }
  
  .compact-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem; /* Much smaller gap */
  }
  
  /* Hide breadcrumb on mobile to save space */
  .compact-breadcrumb {
    display: none;
  }
  
  .compact-page-title {
    font-size: 1.125rem; /* Smaller title */
    margin-bottom: 0;
  }
  
  /* More compact stats - make them horizontal single line */
  .compact-stats-mini {
    gap: 0.25rem;
    width: 100%;
    justify-content: space-between;
  }
  
  .stat-item-mini {
    min-width: auto;
    padding: 0.25rem 0.5rem; /* Adjust padding for horizontal layout */
    border-radius: 4px;
    flex-direction: row; /* Make horizontal */
    gap: 0.375rem; /* Gap between number and label */
  }
  
  .stat-number-mini {
    font-size: 0.875rem; /* Slightly larger for readability */
  }
  
  .stat-label-mini {
    font-size: 0.65rem; /* Smaller labels */
    text-transform: uppercase;
    white-space: nowrap; /* Prevent line breaks */
  }
  
  .compact-title-section > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    width: 100%;
  }
  
  /* Fit questionnaire type buttons in one row with smaller size */
  .compact-type-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for questionnaires (Available, Completed) */
    grid-gap: 0.25rem;
    gap: 0.25rem;
    width: 100%;
  }
  
  .compact-type-button {
    justify-content: center;
    padding: 0.375rem 0.125rem; /* Much smaller padding */
    font-size: 0.7rem; /* Smaller font */
    border-radius: 6px;
  }
  
  .compact-type-button-label {
    font-size: 0.65rem; /* Smaller label */
  }
  
  .compact-type-button-count {
    font-size: 0.6rem; /* Smaller count */
    padding: 0.05rem 0.25rem;
    min-width: 0.8rem;
  }
  
  /* Put filters on same row with smaller elements */
  .compact-search-filters {
    flex-direction: row; /* Change back to row */
    gap: 0.375rem;
    width: 100%;
    align-items: center;
  }
  
  .compact-search-bar {
    flex: 1 1; /* Take remaining space */
    min-width: 0;
  }
  
  .compact-search-input {
    font-size: 0.75rem; /* Smaller font */
    padding: 0.375rem 0.5rem 0.375rem 1.75rem; /* Smaller padding */
    border-radius: 4px;
  }
  
  .compact-search-icon {
    font-size: 0.75rem; /* Smaller icon */
    left: 0.5rem;
  }
  
  .compact-filter-dropdown {
    flex-shrink: 0;
    min-width: 80px; /* Smaller minimum width for dropdowns */
  }
  
  .compact-filter-dropdown select,
  .compact-filter-dropdown button {
    font-size: 0.75rem; /* Smaller dropdown text */
    padding: 0.375rem 0.5rem; /* Smaller dropdown padding */
    border-radius: 4px;
  }
}

.content-language-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Language badge */
.content-language-indicator .language-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background-color: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  color: #555;
}

.content-language-indicator .language-icon {
  font-size: 16px;
}

.content-language-indicator .language-text {
  font-weight: 500;
}

/* Translate button */
.content-language-indicator .translate-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.content-language-indicator .translate-button:hover:not(:disabled) {
  background-color: #0056b3;
}

.content-language-indicator .translate-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.7;
}

.content-language-indicator .translate-icon {
  font-size: 16px;
}

/* Loading spinner */
.content-language-indicator .loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Translated badge */
.content-language-indicator .translated-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  font-size: 14px;
  color: #155724;
  font-weight: 500;
}

.content-language-indicator .success-icon {
  font-size: 16px;
  color: #28a745;
}

/* Translation error */
.content-language-indicator .translation-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  font-size: 14px;
  color: #721c24;
  flex: 1 1;
}

.content-language-indicator .error-icon {
  font-size: 16px;
  color: #dc3545;
}

.content-language-indicator .retry-button {
  padding: 4px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-left: auto;
}

.content-language-indicator .retry-button:hover {
  background-color: #c82333;
}

/* Responsive design */
@media (max-width: 768px) {
  .content-language-indicator {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .content-language-indicator .translate-button,
  .content-language-indicator .translation-error {
    width: 100%;
    justify-content: center;
  }

  .content-language-indicator .retry-button {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .content-language-indicator {
    background-color: #2d2d2d;
    border-color: #444;
  }

  .content-language-indicator .language-badge {
    background-color: #1a1a1a;
    border-color: #555;
    color: #ddd;
  }

  .content-language-indicator .translated-badge {
    background-color: #1e4620;
    border-color: #2d5f2f;
    color: #a8d5a8;
  }

  .content-language-indicator .translation-error {
    background-color: #4a1f1f;
    border-color: #6b2c2c;
    color: #f5c6cb;
  }
}

/* Take Questionnaire Page - Modern Survey UI */

/* Specific layout for take questionnaire page */
.take-questionnaire-page .questionnaire-hub-main-two-column {
  grid-template-columns: 350px 1fr;
  /* Fixed left column width, flexible right column */
  gap: 2rem;
  align-items: start;
  /* Top align both columns */
}

:root {
  --survey-primary-color: #3b82f6;
  --survey-secondary-color: #f1f5f9;
  --survey-success-color: #10b981;
  --survey-warning-color: #f59e0b;
  --survey-danger-color: #ef4444;
  --survey-border-radius: 12px;
  --survey-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --survey-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.take-questionnaire-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.questionnaire-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  text-align: center;
}

.questionnaire-loading .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

.questionnaire-loading p {
  color: #64748b;
  font-size: 1.1rem;
  margin-top: 1rem;
}

/* Loading Animation Enhancements */
.loading-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  background: var(--survey-primary-color);
  border-radius: 50%;
  animation: loadingDots 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0;
}

@keyframes loadingDots {

  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Main Content */
.questionnaire-main-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

/* Progress Column */
.questionnaire-progress-column {
  background: white;
  border-radius: 12px;
  border-radius: var(--survey-border-radius);
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--survey-shadow);
  border: 1px solid #e2e8f0;
  position: -webkit-sticky;
  position: sticky;
  top: 140px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  align-self: start;
  /* Top align the left column */
}

/* Progress Section */
.progress-section {
  margin-bottom: 2rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.progress-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.progress-percentage {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  color: var(--survey-primary-color);
}

.progress-bar-container {
  background: #f1f5f9;
  border-radius: 8px;
  height: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
  background: linear-gradient(90deg, var(--survey-primary-color) 0%, #1d4ed8 100%);
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-stats {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #64748b;
}

.answered-count {
  font-weight: 600;
  color: #3b82f6;
  color: var(--survey-primary-color);
}

/* Question Navigation */
.question-nav-section {
  margin-bottom: 2rem;
}

.nav-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1rem 0;
}

.question-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.question-nav-btn {
  width: 40px;
  height: 40px;
  border: 2px solid #e2e8f0;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.question-nav-btn:hover {
  border-color: #3b82f6;
  border-color: var(--survey-primary-color);
  color: #3b82f6;
  color: var(--survey-primary-color);
  transform: translateY(-1px);
}

.question-nav-btn.active {
  background: #3b82f6;
  background: var(--survey-primary-color);
  border-color: #3b82f6;
  border-color: var(--survey-primary-color);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.question-nav-btn.answered {
  background: #10b981;
  background: var(--survey-success-color);
  border-color: #10b981;
  border-color: var(--survey-success-color);
  color: white;
}

.question-nav-btn.answered:not(.active) {
  background: #dcfce7;
  border-color: #10b981;
  border-color: var(--survey-success-color);
  color: #10b981;
  color: var(--survey-success-color);
}

.question-nav-btn.answered::after {
  content: '✓';
  position: absolute;
  top: -2px;
  right: -2px;
  background: #10b981;
  background: var(--survey-success-color);
  color: white;
  font-size: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Info Panel */
.info-panel {
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border-radius: var(--survey-border-radius);
  border: 1px solid #e2e8f0;
}

.description-compact h6 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.description-compact p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.completion-status {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-incomplete {
  color: #f59e0b;
  color: var(--survey-warning-color);
  display: flex;
  align-items: center;
}

.status-complete {
  color: #10b981;
  color: var(--survey-success-color);
  display: flex;
  align-items: center;
}

/* Question Column */
.questionnaire-question-column {
  background: white;
  border-radius: 12px;
  border-radius: var(--survey-border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--survey-shadow);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  width: 100%;
  /* Fixed width to prevent dynamic changes */
  max-width: 800px;
  /* Set maximum width */
  min-width: 600px;
  /* Set minimum width */
}

.question-container-full {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  transition: all 0.2s ease;
}

.question-container-full.animating {
  opacity: 0.7;
  transform: translateX(10px);
}

/* Question Header - More Concise */
.question-header-main {
  padding: 1.25rem 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.question-number-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  background: linear-gradient(135deg, var(--survey-primary-color) 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--survey-shadow);
}

.question-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.6rem 0;
  line-height: 1.4;
  word-wrap: break-word;
  /* Allow text to wrap to multiple lines */
  overflow-wrap: break-word;
  /* Better text wrapping for long words */
}

/* Question Meta - Layout for question type badge and progress indicator */
.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0.6rem;
}

.question-type-indicator {
  display: flex;
  align-items: flex-end;
}

.question-type-indicator .badge {
  font-size: 0.65rem;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.question-progress-indicator {
  display: flex;
  align-items: flex-end;
  font-size: 0.75rem;
  color: #6b7280;
}

.badge.bg-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.badge.bg-info {
  background: #dbeafe !important;
  color: #1e40af !important;
}

/* Options Grid - More Concise */
.options-grid {
  padding: 1rem;
  flex: 1 1;
}

.option-card-large {
  background: white;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  text-align: left;
  /* Ensure left alignment */
  align-items: start !important;
}

.option-card-large:hover {
  border-color: #3b82f6;
  border-color: var(--survey-primary-color);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.option-card-large.selected {
  border-color: #1e40af;
  /* Even darker blue for higher contrast */
  background: #e0e7ff;
  /* A slightly different light blue */
  box-shadow: 0 1px 8px rgba(30, 64, 175, 0.2);
}

.option-card-large.selecting {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
}

.option-content {
  /*padding: 0.4rem 0.6rem; /* Even smaller padding */
  display: contents;
  gap: 0.4rem;
  /* Even smaller gap */
  position: relative;
}

.option-input {
  width: 12px;
  /* Smaller radio/checkbox */
  height: 12px;
  /* Smaller radio/checkbox */
  margin-top: 3px;
  /* Fine-tune alignment */
  cursor: pointer;
  accent-color: #3b82f6;
  accent-color: var(--survey-primary-color);
  flex-shrink: 0;
  min-width: 44px;
  min-height: 0 !important;
  /* Override default min-height */
}

.option-label {
  flex: 1 1;
  font-size: 0.75rem;
  /* Even smaller font */
  color: #1f2937;
  /* Darker text for better readability */
  cursor: pointer;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}

.option-check {
  color: #3b82f6;
  color: var(--survey-primary-color);
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Navigation Footer - More Concise */
.navigation-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 0.75rem 1.25rem;
  /* Smaller padding */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  /* Smaller gap */
}

.nav-btn {
  padding: 0.6rem 1.2rem;
  /* Smaller padding */
  border-radius: 6px;
  /* Smaller radius */
  font-weight: 500;
  font-size: 0.9rem;
  /* Smaller font */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
  min-width: 100px;
  /* Smaller min-width */
  justify-content: center;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--survey-shadow);
}

.nav-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
}

.submit-btn {
  padding: 0.8rem 1.6rem;
  /* Smaller padding */
  font-size: 1rem;
  /* Smaller font */
  font-weight: 600;
  border-radius: 10px;
  /* Smaller radius */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  box-shadow: var(--survey-shadow-lg);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background: linear-gradient(135deg, var(--survey-success-color) 0%, #059669 100%);
  border: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(16, 185, 129, 0.3);
}

.submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.submit-btn:hover::before {
  width: 300px;
  height: 300px;
}

.progress-indicator-mini {
  text-align: center;
  color: #64748b;
}

.current-q {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3b82f6;
  color: var(--survey-primary-color);
  display: block;
}

.total-q {
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .take-questionnaire-page .questionnaire-hub-main-two-column {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .questionnaire-progress-column {
    position: static;
    max-height: none;
    order: 2;
  }

  .questionnaire-question-column {
    order: 1;
    min-width: 0;
    /* Reset min-width for mobile */
    width: 100%;
    max-width: 100%;
  }

  .question-nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  }

  .question-nav-btn {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 768px) {
  .take-questionnaire-page .questionnaire-hub-main-two-column {
    padding: 0.5rem;
    /* Reduce padding for more content space */
  }

  /* Improve touch targets and readability */
  .option-card-large {
    margin-bottom: 0.75rem;
    /* Increase spacing between options */
    padding: 1rem;
    /* Larger touch target */
  }

  .option-label {
    font-size: 0.95rem;
    /* Increase for better readability */
    line-height: 1.5;
  }

  .option-input {
    width: 18px;
    /* Larger for easier tapping */
    height: 18px;
    min-width: 18px;
  }

  .questionnaire-progress-column {
    display: none;
    /* Hide on mobile for cleaner layout */
  }

  .question-header-main {
    padding: 1.25rem;
  }

  .options-grid {
    padding: 1.25rem;
  }

  .navigation-footer {
    padding: 0.75rem 0.5rem;
    /* Reduce footer padding, especially horizontal */
  }

  .submit-btn {
    padding: 0.6rem 1rem;
    /* Reduce submit button padding */
    font-size: 0.9rem;
    /* Smaller font */
  }

  /* Compact progress indicator */
  .progress-indicator-mini {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .current-q {
    font-size: 0.9rem;
    /* Smaller font */
    font-weight: 600;
  }

  .total-q {
    font-size: 0.75rem;
    /* Smaller font */
  }

  .question-content h3 {
    font-size: 1.25rem;
    /* Increase for better readability */
  }

  .question-number-large {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .nav-container {
    flex-direction: row;
    gap: 0.25rem;
  }

  .nav-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    min-width: auto;
    flex: 1 1;
    white-space: nowrap;
  }

  /* On very small screens, show icons only */
  @media (max-width: 360px) {
    .nav-btn {
      padding: 0.4rem;
      min-width: 40px;
      flex: 0 0 auto;
    }

    .nav-btn .bi {
      margin: 0 !important;
    }

    /* Hide text, show only icons */
    .nav-btn {
      font-size: 0;
    }

    .nav-btn .bi {
      font-size: 1rem;
    }
  }

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

  .compact-stats-mini {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .question-nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  }

  .question-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .option-content {
    padding: 0.875rem 1rem;
  }

  .question-header-main {
    padding: 1rem;
  }

  .options-grid {
    padding: 1rem;
  }

  .navigation-footer {
    padding: 0.875rem 1rem;
  }
}

/* Compact Stats Mini (from header) */
.compact-stats-mini {
  display: flex;
  gap: 2rem;

}

.stat-item-mini {
  text-align: center;
  flex-direction: row;
}

.stat-number-mini {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  color: var(--survey-primary-color);
  line-height: 1;
}

.stat-label-mini {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Alert Styles */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border-radius: var(--survey-border-radius);
  border: 1px solid;
  margin-bottom: 1rem;
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-warning {
  background: #fffbeb;
  border-color: #fed7aa;
  color: #92400e;
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* Animation for option selection */
@keyframes selectOption {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.option-card-large.selected {
  animation: selectOption 0.2s ease;
}

/* Staggered Animation for Options */
.options-grid .option-card-large {
  animation: slideInUp 0.3s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Progress Animation */
.progress-bar-fill {
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progressGlow 2s infinite;
}

@keyframes progressGlow {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Question Navigation Enhanced States */
.question-nav-btn {
  position: relative;
  overflow: hidden;
}

.question-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.3s ease;
}

.question-nav-btn:hover::before {
  left: 100%;
}

/* Pulse animation for unanswered questions */
.question-nav-btn:not(.answered):not(.active) {
  animation: pulseGently 3s infinite;
}

@keyframes pulseGently {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Success feedback animation */
@keyframes successPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.question-nav-btn.answered {
  animation: successPulse 0.3s ease;
}

/* Completion status animation */
.status-complete {
  animation: statusSuccess 0.5s ease;
}

@keyframes statusSuccess {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Micro-interactions */
.option-input:checked+.option-label {
  color: #3b82f6;
  color: var(--survey-primary-color);
  font-weight: 600;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

  .option-card-large,
  .question-nav-btn,
  .progress-bar-fill,
  .question-container-full {
    animation: none !important;
    transition: none !important;
  }

  .loading-dots span {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .option-card-large {
    border-width: 3px;
  }

  .option-card-large.selected {
    border-width: 4px;
  }

  .question-nav-btn {
    border-width: 3px;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  .option-card-large {
    min-height: 60px;
  }

  .question-nav-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-btn {
    min-height: 44px;
  }
}
.ai-idea-generator-page {
  min-height: 100vh;
  background: #f8fafc;
  width: 90%;
}

.ai-idea-generator-page .page-container {
  /* padding: 2rem; */
}

@media (min-width: 1024px) {
  .ai-idea-generator-page .page-container {
    /* padding: 2.5rem; */
  }
}

@media (min-width: 1440px) {
  .ai-idea-generator-page .page-container {
    /* padding: 3rem; */
  }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header-content {
  text-align: center;
  flex: 1 1;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1rem 0;
}

.page-subtitle {
  font-size: 1.25rem;
  color: #6b7280;
  margin: 0;
}

.progress-indicator {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  padding: 1.5rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.step-number {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.2s ease;
}

.progress-step.pending .step-number {
  background-color: #f3f4f6;
  color: #9ca3af;
  border: 2px solid #e5e7eb;
}

.progress-step.active .step-number {
  background-color: #3b82f6;
  color: white;
  border: 2px solid #3b82f6;
}

.progress-step.completed .step-number {
  background-color: #10b981;
  color: white;
  border: 2px solid #10b981;
}

.step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
}

.progress-step.active .step-label {
  color: #3b82f6;
}

.progress-step.completed .step-label {
  color: #10b981;
}

.progress-connector {
  width: 6rem;
  height: 2px;
  background-color: #e5e7eb;
  margin: 0 1rem;
  flex-shrink: 0;
}

.progress-step.completed + .progress-connector {
  background-color: #10b981;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  color: #dc2626;
}

.error-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.error-text {
  flex: 1 1;
  font-size: 0.875rem;
}

.error-dismiss {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.error-dismiss:hover {
  background-color: #fca5a5;
}

.main-content {
  margin-bottom: 3rem;
}

.generate-step,
.select-step {
  animation: fadeIn 0.3s ease-in-out;
}

.select-step {
  margin-top: 3rem;
}

.select-header {
  text-align: center;
  margin-bottom: 2rem;
}

.select-header h2 {
  font-size: 1.875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
}

.select-header p {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
}

.page-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid #e5e7eb;
}

.nav-back,
.nav-skip {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
}

.nav-back {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.nav-back:hover:not(:disabled) {
  background-color: #e5e7eb;
}

.nav-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-skip {
  background-color: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.nav-skip:hover {
  color: #374151;
  border-color: #9ca3af;
}

.debug-btn {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.debug-btn:hover {
  background: #d97706;
  transform: translateY(-1px);
}

.debug-btn:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .ai-idea-generator-container {
    padding: 1rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1.125rem;
  }

  .progress-indicator {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .progress-connector {
    width: 4rem;
  }

  .page-navigation {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-back,
  .nav-skip {
    width: 100%;
    text-align: center;
  }

  .page-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .header-actions {
    justify-content: center;
  }
}

/* Tabbed interface styles */
.idea-tabs-container {
  max-width: 100%;
  margin: 0 auto;
}

.idea-tabs-header {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 2rem;
}

.idea-tab {
  flex: 1 1;
  padding: 1rem 2rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #64748b;
  transition: all 0.2s ease;
  position: relative;
}

.idea-tab:hover {
  color: #3b82f6;
  background-color: #f8fafc;
}

.idea-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background-color: #f8fafc;
}

.idea-tab-content {
  min-height: 400px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-idea-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-idea-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: #3b82f6;
}

.tab-idea-card.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tab-idea-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.tab-idea-problem {
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.tab-idea-solution {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  flex-grow: 1;
}

.tab-idea-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.tab-idea-detail {
  text-align: center;
}

.tab-idea-detail-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.tab-idea-detail-value {
  font-size: 0.875rem;
  color: #1f2937;
  font-weight: 600;
}

.select-idea-button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.select-idea-button:hover {
  background-color: #2563eb;
}

.select-idea-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* Three-Panel Selector Layout */
.selector-layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  min-height: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .selector-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

/* Left Panel - Categories */
.categories-panel {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 1.5rem 0;
  overflow-y: auto;
}

.categories-panel h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
  padding: 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 3px solid transparent;
}

.category-item:hover {
  background: #e2e8f0;
  color: #475569;
}

.category-item.active {
  background: #dbeafe;
  color: #1e40af;
  border-right-color: #3b82f6;
}

.category-count {
  font-size: 0.75rem;
  background: #e5e7eb;
  color: #6b7280;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  font-weight: 600;
}

.category-item.active .category-count {
  background: #3b82f6;
  color: white;
}

/* Middle Panel - Items List */
.items-panel {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.search-and-actions {
  display: flex;
  gap: 0.75rem;
  flex: 1 1;
}

.global-search {
  flex: 1 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.global-search:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.select-all-btn {
  padding: 0.75rem 1rem;
  background: transparent;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.select-all-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.items-summary {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 1rem;
  font-weight: 500;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  flex: 1 1;
  overflow-y: auto;
  max-height: 400px;
  padding-right: 0.5rem;
}

.item-option {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.75rem;
}

.item-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.item-option.selected {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.item-checkbox {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: #3b82f6;
}

.item-name {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
  flex: 1 1;
  line-height: 1.3;
}

.item-option.selected .item-name {
  color: #1e40af;
  font-weight: 600;
}

/* Right Panel - Selected Items */
.selected-panel {
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.selected-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.selected-count {
  font-size: 0.75rem;
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
}

.clear-all-btn {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.clear-all-btn:hover {
  background: #fef2f2;
}

.selected-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1;
  overflow-y: auto;
  max-height: 350px;
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.selected-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.selected-item-name {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
  flex: 1 1;
}

.selected-item-category {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.remove-item-btn {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 1rem;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.remove-item-btn:hover {
  background: #fef2f2;
}

.empty-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  color: #9ca3af;
  text-align: center;
  font-size: 0.875rem;
}

.empty-selection-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Form Section Cards */
.form-section-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  margin-bottom: 2rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.form-section-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}

.form-section-header {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.form-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-section-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

.section-icon {
  font-size: 1.25rem;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-section-content {
  padding: 2rem;
}

/* Primary CTA */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  min-width: 180px;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: #64748b;
  border: 2px solid #e2e8f0;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

/* Floating Selected Indicator */
.floating-selection-indicator {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #3b82f6;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1000;
  font-size: 0.875rem;
  font-weight: 600;
}

.floating-selection-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
}

.selection-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
}

/* Problem Area Selection Improvements */
.problem-area-enhanced {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.problem-area-header {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.problem-area-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.problem-area-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

/* Multi-select chips container */
.selected-problems-chips {
  padding: 1rem 2rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.selected-problems-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-right: 0.5rem;
}

.problem-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  animation: slideInChip 0.3s ease;
}

.problem-chip-remove {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.problem-chip-remove:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

@keyframes slideInChip {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhanced search and controls */
.problem-area-controls {
  padding: 1.5rem 2rem;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

.enhanced-search-container {
  position: relative;
  margin-bottom: 1rem;
}

.enhanced-search-input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: #f8fafc;
}

.enhanced-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: white;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.875rem;
}

.clear-search-enhanced {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.clear-search-enhanced:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Enhanced category tabs */
.enhanced-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.enhanced-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-category-tab:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.enhanced-category-tab.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.enhanced-category-tab.recommended {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
  position: relative;
}

.enhanced-category-tab.recommended::before {
  content: "⭐";
  font-size: 0.75rem;
}

.enhanced-category-tab.recommended.active {
  background: #f59e0b;
  color: white;
}

.category-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  font-size: 0.625rem;
  font-weight: 600;
}

.enhanced-category-tab.active .category-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Enhanced problem grid */
.enhanced-problems-grid {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.enhanced-problem-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.enhanced-problem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}

.enhanced-problem-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.enhanced-problem-card.recommended {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  position: relative;
}

.enhanced-problem-card.recommended::before {
  content: "⭐ Recommended";
  position: absolute;
  top: 0;
  right: 0;
  background: #f59e0b;
  color: white;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-bottom-left-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.enhanced-problem-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.enhanced-problem-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.enhanced-problem-content {
  flex: 1 1;
}

.enhanced-problem-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.enhanced-problem-description {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.enhanced-problem-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.enhanced-example-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}

.enhanced-example-tag::before {
  content: "•";
  color: #cbd5e1;
}

.enhanced-problem-card.selected .enhanced-example-tag {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}

.enhanced-problem-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.enhanced-category-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.enhanced-problem-card.selected .enhanced-category-badge {
  background: #dbeafe;
  color: #1e40af;
}

.enhanced-selection-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.enhanced-problem-card.selected .enhanced-selection-checkbox {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}

.enhanced-selection-checkbox .checkmark {
  font-size: 0.75rem;
  font-weight: bold;
}

/* Tooltip system */
.problem-tooltip {
  position: absolute;
  background: #1f2937;
  color: white;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 250px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.problem-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.problem-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}

/* Sticky CTA with selection count */
.sticky-problem-cta {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 1.5rem 2rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cta-selection-summary {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.cta-selection-count {
  color: #3b82f6;
  font-weight: 600;
}

.enhanced-generate-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

.enhanced-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.enhanced-generate-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.enhanced-generate-btn .btn-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

/* Results summary */
.enhanced-results-summary {
  padding: 1rem 2rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  color: #64748b;
  text-align: center;
  font-weight: 500;
}

.summary-highlight {
  color: #3b82f6;
  font-weight: 600;
}

/* Quick actions */
.problem-quick-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.quick-action-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-action-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* Responsive improvements */
@media (max-width: 1024px) {
  .enhanced-problems-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .enhanced-category-tabs {
    justify-content: center;
  }
  
  .sticky-problem-cta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .enhanced-generate-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .selected-problems-chips {
    padding: 1rem;
  }
  
  .problem-area-controls {
    padding: 1rem;
  }
  
  .enhanced-problems-grid {
    grid-template-columns: 1fr;
    padding: 1rem 0.5rem;
  }
  
  .enhanced-problem-card {
    padding: 1rem;
  }
  
  .enhanced-problem-header {
    gap: 0.75rem;
  }
  
  .enhanced-problem-icon {
    font-size: 1.5rem;
  }
  
  .enhanced-category-tabs {
    gap: 0.375rem;
  }
  
  .enhanced-category-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
  }
}

/* No results state */
.no-problems-found {
  text-align: center;
  transition: all 0.2s ease;
}

.view-toggle:hover {
  background: #f8fafc;
  color: #475569;
}

.view-toggle.active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.toggle-icon {
  font-size: 1rem;
}

/* Keyboard Help */
.keyboard-help {
  padding: 1rem 2.5rem;
  background: #fefce8;
  border-bottom: 1px solid #fed7aa;
  text-align: center;
}

.help-text {
  font-size: 0.875rem;
  color: #92400e;
  font-weight: 500;
}

/* Enhanced Tabbed View */
.tabbed-view {
  display: flex;
  flex-direction: column;
}

.enhanced-tabs-header {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
}

.enhanced-tab {
  flex: 1 1;
  padding: 1.5rem 2rem;
  background: none;
  border: none;
  border-top: 4px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.enhanced-tab:hover {
  background: #f1f5f9;
}

.enhanced-tab.active {
  background: white;
  border-top-color: #3b82f6;
  border-top-color: var(--tab-color, #3b82f6);
}

.tab-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tab-icon {
  font-size: 1.5rem;
}

.tab-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.tab-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tab-summary {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
}

/* Enhanced Tab Content */
.enhanced-tab-content {
  padding: 0;
}

.enhanced-idea-card {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Idea Header */
.idea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  border-left: 4px solid var(--idea-color, #3b82f6);
}

.idea-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.idea-icon {
  font-size: 2rem;
}

.idea-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.quick-actions {
  display: flex;
  gap: 0.75rem;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
}

/* Problem & Solution Section */
.problem-solution-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.problem-block,
.solution-block {
  padding: 1.5rem;
  border-radius: 12px;
  position: relative;
}

.problem-block {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
}

.solution-block {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.section-icon {
  font-size: 1.25rem;
}

.section-header h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.problem-text,
.solution-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

/* Core Metadata */
.core-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.metadata-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metadata-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metadata-value {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
}

.feasibility-high { color: #059669; }
.feasibility-medium { color: #d97706; }
.feasibility-low { color: #dc2626; }

/* Technical Details Section */
.technical-details-section {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.tech-details-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tech-details-toggle:hover {
  background: #f1f5f9;
}

.tech-details-content {
  padding: 1.5rem;
  background: white;
  border-top: 1px solid #e2e8f0;
}

/* No results state */
.no-problems-found {
  text-align: center;
  padding: 3rem 2rem;
}

.no-problems-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-problems-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.no-problems-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1.5rem 0;
}

.reset-filters-btn {
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-filters-btn:hover {
  background: #2563eb;
}

/* =================================================================
 * MARKET VALIDATION BUTTONS STYLING
 * ================================================================= */

/* Validation Response Buttons Container */
.validation-response-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

/* Individual Validation Buttons */
.validation-btn {
  position: relative;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 140px;
  min-height: 56px;
  background-clip: padding-box;
  overflow: hidden;
}

/* Yes Button - Positive */
.validation-btn.btn-yes {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-color: #10b981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.validation-btn.btn-yes:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.validation-btn.btn-yes:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

/* Maybe Button - Neutral */
.validation-btn.btn-maybe {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.validation-btn.btn-maybe:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}

.validation-btn.btn-maybe:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* No Button - Negative */
.validation-btn.btn-no {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border-color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.validation-btn.btn-no:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

.validation-btn.btn-no:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

/* Button Icons */
.validation-btn i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Selected State */
.validation-btn.selected {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  outline: none;
}

.validation-btn.btn-yes.selected {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 4px 16px rgba(16, 185, 129, 0.25);
}

.validation-btn.btn-maybe.selected {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 4px 16px rgba(245, 158, 11, 0.25);
}

.validation-btn.btn-no.selected {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 4px 16px rgba(239, 68, 68, 0.25);
}

/* Disabled State */
.validation-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #e5e7eb;
  color: #9ca3af;
  border-color: #d1d5db;
}

.validation-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Loading State */
.validation-btn.loading {
  position: relative;
  color: transparent;
}

.validation-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* =================================================================
 * MVP PLAN BUTTON STYLING
 * ================================================================= */

/* Build Your MVP Plan Button */
.mvp-plan-btn,
.build-mvp-btn,
.select-idea-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.25),
    0 2px 8px rgba(102, 126, 234, 0.15);
  overflow: hidden;
  min-height: 64px;
  transform: perspective(1000px) rotateX(0deg);
}

/* Hover Effects */
.mvp-plan-btn:hover,
.build-mvp-btn:hover,
.select-idea-btn:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  transform: perspective(1000px) rotateX(-2deg) translateY(-4px);
  box-shadow: 
    0 16px 48px rgba(102, 126, 234, 0.35),
    0 8px 16px rgba(102, 126, 234, 0.25);
  color: white;
  text-decoration: none;
}

/* Active State */
.mvp-plan-btn:active,
.build-mvp-btn:active,
.select-idea-btn:active {
  transform: perspective(1000px) rotateX(-1deg) translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(102, 126, 234, 0.3),
    0 4px 8px rgba(102, 126, 234, 0.2);
}

/* Button Icon */
.mvp-plan-btn i,
.build-mvp-btn i,
.select-idea-btn i {
  font-size: 1.375rem;
  transition: transform 0.3s ease;
}

.mvp-plan-btn:hover i,
.build-mvp-btn:hover i,
.select-idea-btn:hover i {
  transform: scale(1.1) rotate(5deg);
}

/* Disabled State */
.mvp-plan-btn:disabled,
.build-mvp-btn:disabled,
.select-idea-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.mvp-plan-btn:disabled:hover,
.build-mvp-btn:disabled:hover,
.select-idea-btn:disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.mvp-plan-btn.loading,
.build-mvp-btn.loading,
.select-idea-btn.loading {
  color: transparent;
  position: relative;
}

.mvp-plan-btn.loading::after,
.build-mvp-btn.loading::after,
.select-idea-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Shine Effect on Hover */
.mvp-plan-btn::before,
.build-mvp-btn::before,
.select-idea-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.mvp-plan-btn:hover::before,
.build-mvp-btn:hover::before,
.select-idea-btn:hover::before {
  left: 100%;
}

/* Secondary MVP Button Variant */
.mvp-plan-btn.secondary {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border: 2px solid #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.mvp-plan-btn.secondary:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #334155;
  border-color: #94a3b8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* =================================================================
 * BUTTON ANIMATIONS
 * ================================================================= */

/* Spin Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse Animation for Attention */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
  }
}

.mvp-plan-btn.pulse {
  animation: pulse 2s infinite;
}

/* =================================================================
 * RESPONSIVE DESIGN FOR BUTTONS
 * ================================================================= */

@media (max-width: 768px) {
  .validation-response-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .validation-btn {
    width: 100%;
    max-width: 280px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    min-height: 52px;
  }
  
  .mvp-plan-btn,
  .build-mvp-btn,
  .select-idea-btn {
    width: 100%;
    max-width: 320px;
    padding: 1rem 2rem;
    font-size: 1rem;
    min-height: 56px;
  }
  
  .mvp-plan-btn i,
  .build-mvp-btn i,
  .select-idea-btn i {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .validation-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    min-height: 48px;
  }
  
  .validation-btn i {
    font-size: 1.125rem;
  }
  
  .mvp-plan-btn,
  .build-mvp-btn,
  .select-idea-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    min-height: 52px;
  }
}

/* =================================================================
 * ACCESSIBILITY ENHANCEMENTS
 * ================================================================= */

/* Focus States */
.validation-btn:focus,
.mvp-plan-btn:focus,
.build-mvp-btn:focus,
.select-idea-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .validation-btn,
  .mvp-plan-btn,
  .build-mvp-btn,
  .select-idea-btn {
    border-width: 3px;
  }
  
  .validation-btn:focus,
  .mvp-plan-btn:focus,
  .build-mvp-btn:focus,
  .select-idea-btn:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .validation-btn,
  .mvp-plan-btn,
  .build-mvp-btn,
  .select-idea-btn {
    transition: none;
    animation: none;
  }
  
  .validation-btn:hover,
  .mvp-plan-btn:hover,
  .build-mvp-btn:hover,
  .select-idea-btn:hover {
    transform: none;
  }
  
  .mvp-plan-btn::before,
  .build-mvp-btn::before,
  .select-idea-btn::before {
    display: none;
  }
  
  .mvp-plan-btn.pulse {
    animation: none;
  }
}

/* Ensure progress steps always display horizontally */
.progress-indicator .progress-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

/* Ensure connector always displays horizontally */
.progress-connector {
  width: 6rem;
  height: 2px;
  background-color: #e5e7eb;
  margin: 0 1rem;
  flex-shrink: 0;
}

.progress-step.completed + .progress-connector {
  background-color: #10b981;
}
/* QuestionnaireResultsPage.css */

.questionnaire-results-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 0;
}

.results-header {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.results-title {
  color: #2d3748;
  font-weight: 700;
  margin-bottom: 1rem;
}

.results-description {
  color: #718096;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-card {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.results-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.question-result-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.question-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
}

.question-result-title {
  color: #2d3748;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  flex: 1 1;
}

.question-result-meta {
  flex-shrink: 0;
}

.options-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-result {
  padding: 1rem;
  background: #f7fafc;
  border-radius: 8px;
  border-left: 4px solid #e2e8f0;
}

.option-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.option-text {
  font-weight: 500;
  color: #2d3748;
  flex: 1 1;
}

.option-stats {
  font-weight: 600;
  color: #4299e1;
  white-space: nowrap;
}

.option-progress {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.option-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Highlight top option */
.option-result:first-child {
  border-left-color: #48bb78;
  background: #f0fff4;
}

.option-result:first-child .option-progress-bar {
  background: linear-gradient(90deg, #48bb78 0%, #38a169 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
  .questionnaire-results-page {
    padding: 1rem 0;
  }

  .results-header {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

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

  .stat-card {
    padding: 1rem;
  }

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

  .question-result-header {
    flex-direction: column;
    gap: 1rem;
  }

  .question-result-card {
    padding: 1.5rem;
  }

  .option-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

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

  .question-result-card {
    padding: 1rem;
  }

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

  .results-title {
    font-size: 1.5rem;
  }
}

/* Teams Page Specific Styles - Modern Three Column Layout */

/* ============================================================================
   TEAMS HUB LAYOUT STYLES (Copied from TasksHubModern.css)
   ============================================================================ */

/* CSS Variables for consistent layout */
:root {
  --teams-hub-list-width: 2fr;
  --teams-hub-details-width: 3fr;
  --teams-hub-column-gap: 2rem;
  --teams-hub-container-padding: 2rem;
}

/* Main Container */
.tasks-hub-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  scroll-behavior: smooth;
}

/* Custom scrollbar for main container */
.tasks-hub-container::-webkit-scrollbar {
  width: 8px;
}

.tasks-hub-container::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.tasks-hub-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tasks-hub-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Firefox scrollbar */
.tasks-hub-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Header Section */
.tasks-hub-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.tasks-hub-header.collapsed {
  transform: translateY(-100%);
}

.tasks-hub-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom-color: #cbd5e1;
}

.tasks-hub-header-content {
  max-width: 1400px;
  padding: 0.5rem 2rem;
  padding: 0.5rem var(--teams-hub-container-padding);
}

/* Search Section */
.tasks-hub-search-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.tasks-hub-search-bar {
  flex: 1 1;
  position: relative;
  max-width: 600px;
}

.tasks-hub-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 1.1rem;
}

.tasks-hub-search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  transition: all 0.2s ease;
}

.tasks-hub-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #fefefe;
}

/* Tab Navigation */
.tasks-hub-tabs {
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.tasks-hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tasks-hub-tab:hover {
  background: #f1f5f9;
  color: #334155;
}

.tasks-hub-tab.active {
  color: #3b82f6;
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6;
}

.tasks-hub-tab-count {
  background: #64748b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasks-hub-tab.active .tasks-hub-tab-count {
  background: #3b82f6;
  color: white;
}

.tasks-hub-tab:hover:not(.active) .tasks-hub-tab-count {
  background: #475569;
}

/* Main Content Area - Two Column Layout */
.tasks-hub-main-two-column {
  display: flex;
  flex-grow: 1;
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
  max-width: 1400px;
  padding: 2rem;
  padding: var(--teams-hub-container-padding);
  min-height: 100vh;
  flex: 1 1;
  align-items: start;
}

/* Task List Column */
.tasks-hub-task-list-column {
  width: 50%;
  max-width: 600px;
  overflow: visible;
  transition: all 0.3s ease;
  padding: 0;
  margin-right: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Task Details Column */
.tasks-hub-task-details-column {
  border: none;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tasks-hub-task-details-column.no-task-selected {
  background: #f8fafc;
}

.tasks-hub-task-details-column.task-selected {
  border: none;
  box-shadow: none;
}

/* Task List Header */
.tasks-hub-task-list-header {
  padding: 1.5rem 1.5rem 1rem 1rem;
}

.tasks-hub-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasks-hub-results-count {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

/* Task List Content - Scrollable wrapper */
.tasks-hub-task-list-content {
  flex: 1 1 !important;
  /* overflow-y: auto !important; */
  overflow-x: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  position: relative !important;
}

/* Task Grid */
.tasks-hub-task-grid {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Custom scrollbar for task list content */
.tasks-hub-task-list-content::-webkit-scrollbar {
  width: 8px;
}

.tasks-hub-task-list-content::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.tasks-hub-task-list-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tasks-hub-task-list-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.tasks-hub-task-list-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Empty State */
.tasks-hub-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.tasks-hub-empty-icon {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.tasks-hub-empty-state h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.5rem;
}

.tasks-hub-empty-state p {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 400px;
}

.tasks-hub-empty-state a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.tasks-hub-empty-state a:hover {
  text-decoration: underline;
}

/* ============================================================================
   STAT ITEM SMALL STYLES (Copied from TasksPage.css)
   ============================================================================ */

.stat-item-small {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-width: 110px;
}

.stat-item-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-color: #cbd5e1;
}

.stat-item-small.active {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.stat-item-small.create-task-stat:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}

.stat-icon-small {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
}

.stat-icon-small.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.stat-icon-small.green {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
}

.stat-icon-small.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
}

.stat-icon-small.amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-text-small {
  display: flex;
  flex-direction: column;
}

.stat-number-small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label-small {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  line-height: 1;
}

/* ============================================================================
   RESPONSIVE STYLES FOR TEAMS HUB
   ============================================================================ */

/* Tablet and Mobile Responsive */
@media (max-width: 1023px) {
  .tasks-hub-main-two-column {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tasks-hub-task-details-column {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --teams-hub-container-padding: 1rem;
  }

  .tasks-hub-search-section {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .tasks-hub-search-bar {
    max-width: none;
  }

  .tasks-hub-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .stat-item-small {
    min-width: auto;
    justify-content: center;
  }
}

/* Mobile-specific optimizations for teams page */
@media (max-width: 640px) {
  .tasks-hub-header {
    padding: 1rem 0 0.75rem 0;
    /* Reduced padding */
  }

  .tasks-hub-header-content {
    padding: 0 1rem;
    /* Reduced horizontal padding */
  }

  .tasks-hub-search-section {
    gap: 0.5rem;
    /* Smaller gap */
  }

  .tasks-hub-search-bar {
    flex: 1 1;
    /* Take remaining space */
  }

  .tasks-hub-search-input {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
  }

  .tasks-hub-tabs {
    gap: 0.25rem;
    /* Smaller gap between tabs */
    margin-top: 0.5rem;
  }

  .tasks-hub-tab {
    padding: 0.5rem 0.75rem;
    /* Smaller tab padding */
    font-size: 0.8rem;
    /* Smaller font */
  }

  .tasks-hub-tab-count {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    min-width: 1rem;
  }

  .tasks-hub-main-two-column {
    padding: 0.5rem;
    /* Reduced padding for more content space */
  }
}

/* Header padding override to match TasksPage */
.header-content {
  padding: 0rem 2rem !important;
}

/* Override dashboard grid layout for TeamsPage to match TasksPage structure */
.dashboard-grid-six-panel {
  max-width: none !important;
  margin: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  padding: 2rem;
}

/* Team Status Badges */
.team-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-status-badge.active {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.team-status-badge.open {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.team-status-badge.recruiting {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.team-status-badge.closed {
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  color: white;
}

/* Team List and Details Column Layout - Details panel uses all remaining width */
.dashboard-content-area {
  display: grid;
  grid-template-columns: minmax(400px, 580px) 1fr;
  grid-gap: 0rem;
  gap: 0rem;
  align-items: start;
  min-height: 70vh;
  max-width: none;
  overflow: hidden;
}

.team-list-column {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  min-height: 600px;
  height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.team-details-column {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  min-height: 600px;
  height: 80vh;
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.team-details-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.team-details-header {
  padding: 0.75rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  overflow: hidden;
}

.team-details-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem 1rem;
  min-height: 0;
  min-width: 0;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 1rem;
}

.team-details-content::-webkit-scrollbar {
  width: 6px;
}

.team-details-content::-webkit-scrollbar-track {
  background: transparent;
}

.team-details-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.team-details-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Team Details Placeholder */
.team-details-placeholder {
  padding: 3rem 2rem;
  text-align: center;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.team-details-placeholder h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.team-details-placeholder p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.875rem;
}

/* Back Button Styling */
.back-button {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  color: #374151;
}

.back-button:focus {
  outline: none;
  color: #3b82f6;
}

/* Compact back close button */
.team-details-header .back-button {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-details-header .back-button:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* Override teams grid for compact layout with no gaps */
.teams-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 0 !important;
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;
}

.teams-grid::-webkit-scrollbar {
  width: 6px;
}

.teams-grid::-webkit-scrollbar-track {
  background: transparent;
}

.teams-grid::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.teams-grid::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.team-card-wrapper {
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
}

.team-card-wrapper:last-child {
  border-bottom: none;
}

.team-card-wrapper:first-child .team-card-modern {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.team-card-wrapper:last-child .team-card-modern {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Team Card - Modern compact style */
.team-card-modern {
  background: white;
  border: none;
  border-radius: 0;
  padding: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.team-card-modern:hover {
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}

.team-card-modern.selected {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
}

.team-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.team-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.team-card-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.team-card-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 0.75rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.team-card-members {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.team-card-location {
  font-weight: 500;
}

/* Team Details Functionality Styles */

/* Team Detail Card - Compact Layout */
.team-details-column .team-detail-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.team-details-column .team-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.team-details-column .team-detail-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #333;
  line-height: 1.2;
  word-break: break-word;
}

.team-details-column .team-detail-status {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  white-space: nowrap;
}

.team-details-column .team-detail-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.team-details-column .team-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.team-details-column .team-detail-info-label {
  font-size: 11px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-details-column .team-detail-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-details-column .team-detail-description {
  margin-bottom: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.team-details-column .team-detail-skills {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  gap: 0.375rem;
}

.team-details-column .team-detail-skill {
  background-color: #e0e7ff;
  color: #3730a3;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.team-details-column .team-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Enhanced Application Form Styling */
.enhanced-application-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.enhanced-application-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.enhanced-application-form .form-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

.enhanced-application-form .form-label .required {
  color: #dc2626;
  margin-left: 0.25rem;
}

.enhanced-application-form .form-input,
.enhanced-application-form .form-select {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.enhanced-application-form .form-input:focus,
.enhanced-application-form .form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.enhanced-application-form .form-help {
  color: #6b7280;
  font-size: 0.8rem;
}

/* Application Status Badges */
.application-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.application-status-badge.status-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.application-status-badge.status-accepted {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.application-status-badge.status-rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.application-status-badge.status-withdrawn {
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  color: white;
}

/* Enhanced Application Detail Panel Styles */

/* Application Detail View Specific Styles */
.application-detail-view .team-detail-header {
  border-bottom: 2px solid #e2e8f0;
}

.team-detail-status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.team-detail-status-badge.accepted {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.team-detail-status-badge.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.team-detail-status-badge.rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.team-detail-category-badge.available-team {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.team-detail-review-badge {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Application Status Overview */
.application-status-overview .task-details-section-content {
  padding: 0;
}

.application-status-card {
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid;
  background: white;
}

.application-status-card.accepted {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.application-status-card.pending {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.application-status-card.rejected {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.status-message {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.status-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.status-text h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.status-text p {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
}

/* Team Request Summary */
.team-request-summary h4 {
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.team-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
}

.meta-item i {
  color: #3b82f6;
}

/* Application Details Grid */
.application-details-grid {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.application-detail-item h5 {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.application-detail-item h5 i {
  color: #3b82f6;
}

.application-detail-item .task-details-description {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
  margin: 0;
}

/* Publisher Feedback Section */
.publisher-feedback-section .task-details-section-content {
  padding: 0;
}

.publisher-feedback-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.feedback-header {
  background: #3b82f6;
  color: white;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.feedback-date {
  margin-left: auto;
  font-size: 0.875rem;
  opacity: 0.9;
}

.feedback-content {
  padding: 1.5rem;
}

.feedback-content p {
  margin: 0;
  line-height: 1.6;
  color: #1e293b;
}

/* Application Actions */
.application-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-help-text {
  color: #64748b;
  font-style: italic;
}

.application-actions .btn {
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.application-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Application Timeline */
.application-timeline {
  position: relative;
  padding-left: 2rem;
}

.application-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  z-index: 1;
}

.timeline-item.completed .timeline-marker {
  background: #10b981;
  color: white;
}

.timeline-item.pending .timeline-marker {
  background: #f59e0b;
  color: white;
}

.timeline-content h6 {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.timeline-content p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
}

.timeline-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-status.accepted {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.timeline-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.timeline-status.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Responsive Design for Application Details */
@media (max-width: 768px) {
  .application-details-grid {
    gap: 1rem;
  }

  .team-request-meta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .application-actions {
    gap: 0.75rem;
  }

  .status-message {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .status-icon {
    align-self: center;
  }

  .timeline-marker {
    left: -1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }

  .application-timeline {
    padding-left: 1.5rem;
  }

  .application-timeline::before {
    left: 0.75rem;
  }
}

/* Mobile Responsive Design for Teams Page - Similar to Tasks Hub */

/* Add responsive state management */
@media (max-width: 916px) {

  /* Override two-column layout for small screens */
  .tasks-hub-main-two-column {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 1rem 1rem 1rem;
  }

  /* Team list column uses full width */
  .tasks-hub-task-list-column {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* Hide team details column on mobile */
  .team-details-column,
  .tasks-hub-task-details-column {
    display: none !important;
  }

  /* Team item with vertical layout for mobile */
  .team-item-compact {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Team row - vertical layout container */
  .team-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  /* Team card in mobile view */
  .team-item-compact.compact-layout .team-card-modern,
  .team-item-compact.compact-layout .application-card-enhanced,
  .team-item-compact.compact-layout .team-request-summary-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .team-item-compact.compact-layout .team-card-modern:hover,
  .team-item-compact.compact-layout .application-card-enhanced:hover,
  .team-item-compact.compact-layout .team-request-summary-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }

  /* Horizontal team details panel */
  .team-details-horizontal {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .team-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
  }

  .team-details-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    flex: 1 1;
    padding-right: 1rem;
  }

  .team-details-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .team-details-toggle,
  .team-details-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .team-details-toggle:hover,
  .team-details-close:hover {
    background: #e5e7eb;
    color: #374151;
  }

  .team-details-content {
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .team-details-content.expanded {
    max-height: 1000px;
    opacity: 1;
  }

  .team-details-content.collapsed {
    max-height: 0;
    opacity: 0;
  }

  /* Mobile team details content */
  .mobile-team-details {
    padding: 1rem;
    background: white;
  }

  .team-request-info,
  .application-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .team-request_info h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
  }

  .team-request-info p,
  .application-details p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
  }

  .team-request_info strong,
  .application-details strong {
    color: #1f2937;
    font-weight: 600;
  }

  /* Mobile team actions */
  .mobile-team-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
  }

  .team-management-button {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .team-management-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .team-management-button:active {
    transform: translateY(0);
  }

  .team-management-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Application review buttons in mobile */
  .application-review-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .application-review-buttons .btn-success,
  .application-review-buttons .btn-danger {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .application-review-buttons .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
    color: white;
  }

  .application-review-buttons .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .application-review-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
  }

  .application-review-buttons .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }

  /* Applications summary in mobile */
  .applications-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.75rem 0;
  }

  .applications-summary h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
  }

  .application-mini-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .application-mini-card:last-child {
    margin-bottom: 0;
  }

  .applicant-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
  }

  .status-mini {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .status-mini.status-pending {
    background: #fef3c7;
    color: #92400e;
  }

  .status-mini.status-accepted {
    background: #d1fae5;
    color: #065f46;
  }

  .status-mini.status-rejected {
    background: #fee2e2;
    color: #991b1b;
  }

  .more-applications {
    text-align: center;
    color: #6b7280;
    font-size: 0.8rem;
    margin: 0.5rem 0 0 0;
    font-style: italic;
  }

  /* Expanded state styling */
  .team-item-compact.expanded {
    margin-bottom: 2rem;
  }

  .team-item-compact.expanded .team-card-modern,
  .team-item-compact.expanded .application-card-enhanced,
  .team-item-compact.expanded .team-request-summary-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }

  .team-item-compact.expanded .team-details-horizontal {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
}

/* Team card in mobile view */
.team-item-compact.compact-layout .team-card-modern,
.team-item-compact.compact-layout .application-card-enhanced,
.team-item-compact.compact-layout .team-request-summary-card {
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.team-item-compact.compact-layout .team-card-modern:hover,
.team-item-compact.compact-layout .application-card-enhanced:hover,
.team-item-compact.compact-layout .team-request-summary-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Horizontal team details panel */
.team-details-horizontal {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.team-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

.team-details-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  flex: 1 1;
  padding-right: 1rem;
}

.team-details-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.team-details-toggle,
.team-details-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-details-toggle:hover,
.team-details-close:hover {
  background: #e5e7eb;
  color: #374151;
}

.team-details-content {
  transition: all 0.3s ease;
  overflow: hidden;
}

.team-details-content.expanded {
  max-height: 1000px;
  opacity: 1;
}

.team-details-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Mobile team details content */
.mobile-team-details {
  padding: 1rem;
  background: white;
}

.team-request-info,
.application-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ================================================================
 * SLIDE-OUT DETAIL PANEL STYLES (matching TaskTakerPage design)
 * ================================================================ */

/* When detail panel is open, grey out and blur the team list */
.tasks-hub-main-two-column.detail-panel-open .tasks-hub-task-list-column {
  filter: blur(0px) brightness(0.85);
  pointer-events: none;
  opacity: 0.8;
}

/* Overlay that covers the team list when detail panel is open */
.team-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  cursor: pointer;
}

/* Team Detail Panel - slides from right */
.team-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  min-width: 600px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-detail-panel.panel-open {
  transform: translateX(0);
}

.team-detail-header {
  flex-shrink: 0;
  margin-top: 50px;
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  width: 100%;
  box-sizing: border-box;
}

.team-detail-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  position: relative;
}

.team-detail-title-area {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.team-detail-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
  word-wrap: break-word;
  flex-shrink: 0;
}

.team-detail-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
}

.team-detail-category-badge,
.team-detail-points-badge,
.team-detail-participants-badge,
.team-detail-date-badge,
.team-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}

.team-detail-category-badge {
  background: #dbeafe;
  color: #1e40af;
}

.team-detail-points-badge {
  background: #fef3c7;
  color: #d97706;
}

.team-detail-participants-badge {
  background: #d1fae5;
  color: #047857;
}

.team-detail-date-badge {
  background: #f3e8ff;
  color: #7c3aed;
}

.team-detail-status-badge {
  background: #dcfce7;
  color: #166534;
}

.team-detail-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
}

.team-detail-action-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.team-detail-action-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.team-detail-action-btn.new-tab:hover {
  background: #dbeafe;
  color: #2563eb;
}

.close-team-detail-btn {
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.close-team-detail-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.close-team-detail-btn i {
  font-size: 1.1rem;
}

.team-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Make the content fill the remaining space and scroll */
.team-detail-content>div:last-child {
  flex: 1 1;
  overflow-y: auto;
}

/* Override team list content scrolling - let main container handle all scrolling */
.team-list-content {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  flex: none !important;
  position: static !important;
}

/* Override team list column to prevent internal scrolling */
.team-list-column {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Remove any scrollbar styling that might interfere */
.team-list-content::-webkit-scrollbar {
  display: none !important;
}

.team-list-column::-webkit-scrollbar {
  display: none !important;
}

/* Mobile responsiveness for slide-out panel */
@media (max-width: 1200px) {
  .team-detail-panel {
    width: 60vw;
    min-width: 500px;
  }

  .tasks-hub-task-list-column {
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .team-detail-panel {
    width: 100vw;
    min-width: 0;
    min-width: initial;
    left: 0;
  }

  .team-detail-header {
    padding: 1rem 1.5rem;
  }

  .team-detail-header-main {
    flex-direction: column;
    gap: 0.75rem;
  }

  .team-detail-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }

  .team-detail-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    flex: 1 1;
    min-width: 0;
  }

  .team-detail-metadata {
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
  }

  .team-detail-category-badge,
  .team-detail-points-badge,
  .team-detail-participants-badge,
  .team-detail-date-badge,
  .team-detail-status-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }

  .team-detail-header-actions {
    align-self: flex-start;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: 0;
  }

  .tasks-hub-task-list-column {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
  }

  .tasks-hub-main-two-column {
    padding: 0.5rem;
    overflow: visible;
  }

  /* Enhanced Mobile Search Styles */
  .tasks-hub-search-section {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .tasks-hub-search-bar input {
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
  }

  .tasks-hub-filter-row .custom-dropdown .dropdown-button {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    min-height: 2.25rem;
  }
}

/* Ultra-compact styles for very small screens */
@media (max-width: 480px) {
  .tasks-hub-search-section {
    padding: 0.5rem;
    gap: 0.375rem;
  }

  .tasks-hub-search-bar input {
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
  }
}

/* Mobile-specific optimizations for teams page */
@media (max-width: 640px) {
  .tasks-hub-header {
    padding: 1rem 0 0.75rem 0;
    /* Reduced padding */
  }

  .tasks-hub-header-content {
    padding: 0 1rem;
    /* Reduced horizontal padding */
  }

  .tasks-hub-search-section {
    gap: 0.5rem;
    /* Smaller gap */
  }

  .tasks-hub-search-bar {
    flex: 1 1;
    /* Take remaining space */
  }

  .tasks-hub-search-input {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
  }

  .tasks-hub-tabs {
    gap: 0.25rem;
    /* Smaller gap between tabs */
    margin-top: 0.5rem;
  }

  .tasks-hub-tab {
    padding: 0.5rem 0.75rem;
    /* Smaller tab padding */
    font-size: 0.8rem;
    /* Smaller font */
  }

  .tasks-hub-tab-count {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    min-width: 1rem;
  }

  .tasks-hub-main-two-column {
    padding: 0.5rem;
    /* Reduced padding for more content space */
  }
}
/* ============================================================================
   ENHANCED APPLICATION DETAIL PANEL STYLES
   ============================================================================ */

/* Application Detail View Specific Styles */
.application-detail-view .team-detail-header {
  border-bottom: 2px solid #e2e8f0;
}

.team-detail-status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.team-detail-status-badge.accepted {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.team-detail-status-badge.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.team-detail-status-badge.rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.team-detail-category-badge.available-team {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.team-detail-review-badge {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Application Status Overview */
.application-status-overview .task-details-section-content {
  padding: 0;
}

.application-status-card {
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid;
  background: white;
}

.application-status-card.accepted {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.application-status-card.pending {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.application-status-card.rejected {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.status-message {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.status-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.status-text h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.status-text p {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
}

/* Team Request Summary */
.team-request-summary h4 {
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.team-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
}

.meta-item i {
  color: #3b82f6;
}

/* Application Details Grid */
.application-details-grid {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.application-detail-item h5 {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.application-detail-item h5 i {
  color: #3b82f6;
}

.application-detail-item .task-details-description {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
  margin: 0;
}

/* Publisher Feedback Section */
.publisher-feedback-section .task-details-section-content {
  padding: 0;
}

.publisher-feedback-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.feedback-header {
  background: #3b82f6;
  color: white;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.feedback-date {
  margin-left: auto;
  font-size: 0.875rem;
  opacity: 0.9;
}

.feedback-content {
  padding: 1.5rem;
}

.feedback-content p {
  margin: 0;
  line-height: 1.6;
  color: #1e293b;
}

/* Application Actions */
.application-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-help-text {
  color: #64748b;
  font-style: italic;
}

.application-actions .btn {
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.application-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Application Timeline */
.application-timeline {
  position: relative;
  padding-left: 2rem;
}

.application-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  z-index: 1;
}

.timeline-item.completed .timeline-marker {
  background: #10b981;
  color: white;
}

.timeline-item.pending .timeline-marker {
  background: #f59e0b;
  color: white;
}

.timeline-content h6 {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.timeline-content p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
}

.timeline-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-status.accepted {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.timeline-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.timeline-status.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Responsive Design for Application Details */
@media (max-width: 768px) {
  .application-details-grid {
    gap: 1rem;
  }
  
  .team-request-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .application-actions {
    gap: 0.75rem;
  }
  
  .status-message {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .status-icon {
    align-self: center;
  }
  
  .timeline-marker {
    left: -1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }
  
  .application-timeline {
    padding-left: 1.5rem;
  }
  
  .application-timeline::before {
    left: 0.75rem;
  }
}

/* Application Form Styles */
.application-form-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 1rem;
}

.application-form-section .task-details-section-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.5rem;
  margin: 0;
}

.application-form-section .task-details-section-title {
  color: white;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.application-form {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-label i {
  color: #3b82f6;
  font-size: 1rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: all 0.2s ease;
  background: white;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
  color: #9ca3af;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Skills Input Group */
.skills-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.skills-input-group .form-control {
  flex: 1 1;
}

.skills-input-group .btn {
  white-space: nowrap;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 2px solid #3b82f6;
  background: white;
  color: #3b82f6;
  transition: all 0.2s ease;
}

.skills-input-group .btn:hover:not(:disabled) {
  background: #3b82f6;
  color: white;
}

.skills-input-group .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Skills Display */
.skills-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.skill-remove {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.skill-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Form Actions */
.form-actions {
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1.5rem;
}

.form-actions .btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-actions .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Application Status Message */
.application-status-message {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
}

.application-status-message i {
  font-size: 3rem;
  color: #10b981;
  margin-bottom: 1rem;
  display: block;
}

.application-status-message p {
  color: #6b7280;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.application-status-message .btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Requirement Items */
.requirement-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.requirement-item i {
  color: #3b82f6;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.requirement-item span {
  color: #374151;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .application-form {
    padding: 1rem;
  }
  
  .skills-input-group {
    flex-direction: column;
  }
  
  .skills-input-group .btn {
    width: 100%;
  }
  
  .requirement-items {
    gap: 0.5rem;
  }
  
  .requirement-item {
    padding: 0.5rem;
  }
}

/* Custom styles for modern Setup Team page */
.tab-navigation {
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-card {
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 120px;
}

.tab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stats-overview {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0;
}

.stat-item-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  min-width: 80px;
}

.stat-number-mini {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  line-height: 1;
}

.stat-label-mini {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  margin-top: 0.25rem;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard-stat-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-stat-card.pending {
  border-color: #f59e0b;
  background: linear-gradient(to bottom, #fef3c7, white);
}

.dashboard-stat-card.success {
  border-color: #10b981;
  background: linear-gradient(to bottom, #d1fae5, white);
}

.dashboard-stat-card.teams {
  border-color: #8b5cf6;
  background: linear-gradient(to bottom, #ede9fe, white);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stat-header i {
  font-size: 1.25rem;
  color: #6b7280;
}

.stat-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.dashboard-actions {
  text-align: center;
  margin-top: 2rem;
}

.questionnaire-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.questionnaire-item-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.questionnaire-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.questionnaire-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.questionnaire-header h4 {
  flex: 1 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.questionnaire-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-secondary {
  background: #f3f4f6;
  color: #374151;
}

.questionnaire-description {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.questionnaire-skills {
  margin-bottom: 1rem;
}

.questionnaire-skills strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.skill-tag-more {
  padding: 0.25rem 0.5rem;
  background: #e5e7eb;
  color: #6b7280;
  border-radius: 6px;
  font-size: 0.75rem;
  font-style: italic;
}

.questionnaire-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.meta-item i {
  font-size: 0.875rem;
}

.questionnaire-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.questionnaire-actions.application-review {
  justify-content: space-between;
}

.application-card .application-content {
  margin-bottom: 1rem;
}

.application-section {
  margin-bottom: 1rem;
}

.application-section:last-child {
  margin-bottom: 0;
}

.application-section strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: #374151;
}

.application-section p {
  margin: 0;
  color: #6b7280;
  line-height: 1.4;
}

.team-content {
  margin-bottom: 1rem;
}

.team-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

.team-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state h4 {
  margin-bottom: 0.5rem;
  color: #374151;
}

.empty-state p {
  margin-bottom: 1.5rem;
}

.details-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  background: white;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  z-index: 1000;
}

.application-details-panel {
  padding: 1.5rem;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.panel-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.panel-content {
  margin-bottom: 1.5rem;
}

.detail-section {
  margin-bottom: 1.5rem;
}

.detail-section h4 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.detail-section p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

.review-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.review-actions {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-color-light);
  padding-top: 1.5rem;
}

.review-message-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-medium);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  resize: vertical;
  min-height: 80px;
}

.review-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.review-buttons .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: var(--border-radius-medium);
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.review-buttons .btn-success {
  background-color: var(--color-success);
  color: white;
  border: none;
}

.review-buttons .btn-success:hover {
  background-color: #15803d; /* Darker green */
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
  transform: translateY(-2px);
}

.review-buttons .btn-danger {
  background-color: var(--color-danger);
  color: white;
  border: none;
}

.review-buttons .btn-danger:hover {
  background-color: #b91c1c; /* Darker red */
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
  transform: translateY(-2px);
}

.team-management-modal .modal-content {
  max-width: 600px;
}

/* Withdraw button styling for join team page */
.withdraw-button {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  font-weight: 500 !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.withdraw-button:hover {
  background: #fecaca !important;
  border-color: #f87171 !important;
  color: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.withdraw-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .stats-overview {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .stat-item-mini {
    flex-direction: row;
    min-width: 70px;
    padding: 0.375rem 0.5rem;
    gap: 0.5rem;
  }
  
  .stat-number-mini {
        font-size: 0.65rem;  }
  
  .stat-label-mini {
    font-size: 0.65rem;
  }
  
  .questionnaire-items-grid {
    grid-template-columns: 1fr;
  }
  
  .questionnaire-actions {
    flex-direction: column;
  }
  
  .questionnaire-actions.application-review {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .details-panel {
    position: relative;
    width: 100%;
  }
}
/* Application quick actions in task cards */
.application-quick-actions {
  display: flex;
  gap: 0.5rem;
}

.application-quick-actions .btn {
  padding: 0rem 1.5rem;
  font-size: 1.0rem;
  min-width: auto;
}

/* Task card modifications for team setup */
.task-card-modern .task-header-row .task-status-badges .task-points {
  background: #f3f4f6;
  color: #374151;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.task-card-modern .task-meta .task-meta-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Status badges for applications and teams */
.task-status-badge.pending {
  background: #fef3c7;
  color: #92400e;
}

.task-status-badge.approved {
  background: #d1fae5;
  color: #065f46;
}

/* Compact header adjustments for team setup */
.compact-page-title {
  color: #1f2937;
}

.compact-breadcrumb {
  color: #6b7280;
}

/* Empty state improvements */
.no-tasks-message {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.no-tasks-message i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #d1d5db;
}

.no-tasks-message h3 {
  margin-bottom: 0.5rem;
  color: #374151;
}

.no-tasks-message p {
  margin-bottom: 1.5rem;
}

/* Task details placeholder adjustments */
.task-details-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #6b7280;
  padding: 2rem;
}

.task-details-placeholder .placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #d1d5db;
}

.task-details-placeholder h3 {
  margin-bottom: 0.5rem;
  color: #374151;
}

/* Application details in task details panel */
.task-details-content .skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.task-details-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.task-details-actions .btn {
  flex: 1 1;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .application-quick-actions {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .task-card-modern .task-meta .task-meta-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  
  .task-details-actions {
    flex-direction: column;
  }
}
/* Team Details Panel Styles */

.team-details-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.team-details-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.team-details-header {
  background: transparent;
  color: #1f2937;
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  margin-top: 50px;
}

.team-details-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.team-details-title-area {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.team-details-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  word-wrap: break-word;
  flex-shrink: 0;
}

.team-details-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
}

.team-status-badge,
.team-details-date-badge,
.team-details-members-badge,
.team-details-cost-badge,
.team-details-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.team-status-badge i,
.team-details-date-badge i,
.team-details-members-badge i,
.team-details-cost-badge i,
.team-details-category-badge i {
  font-size: 0.625rem;
}

.application-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.application-status-badge.status-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.application-status-badge.status-accepted {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.application-status-badge.status-rejected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.application-status-badge.status-withdrawn {
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  color: white;
}

.team-details-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Modern Close Button */
.btn-close-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  color: #6b7280;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-close-modern:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #374151;
  transform: translateY(-1px);
}

.btn-close-modern:active {
  transform: translateY(0);
}

.team-details-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: white;
}

.team-details-section {
  margin-bottom: 2rem;
}

.team-details-section:last-child {
  margin-bottom: 0;
}

.team-details-section h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.team-details-section p {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Team Members Grid */
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.team-member-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.team-member-card:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.member-avatar,
.owner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-avatar img,
.owner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
}

.member-info {
  flex: 1 1;
  min-width: 0;
}

.member-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
  word-wrap: break-word;
}

.member-role {
  margin-bottom: 0.25rem;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.role-badge.role-owner {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.role-badge.role-member {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.member-joined {
  font-size: 0.75rem;
  color: #6b7280;
}

.no-members {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

.no-members i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Team Owner Info */
.team-owner-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
}

.owner-details {
  flex: 1 1;
}

.owner-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.owner-role {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Requirements and Skills */
.requirement-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.requirement-item i {
  color: #6b7280;
  width: 16px;
  flex-shrink: 0;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #3730a3;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #c7d2fe;
}

.skill-tag.highlighted {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #fde68a;
}

/* Applications Summary */
.applications-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.applications-count {
  font-weight: 600;
  color: #1f2937;
}

/* Team Action Section */
.team-action-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.btn-form-team,
.btn-manage-team {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.btn-form-team {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.btn-form-team:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-form-team:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-manage-team {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.btn-manage-team:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-help-text {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.4;
}

/* Publisher Message */
.publisher-message {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 1rem;
}

.publisher-message p {
  color: #0c4a6e;
  margin: 0;
}

/* Empty State */
.team-details-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 16px;
}

.team-details-empty-content {
  text-align: center;
  max-width: 300px;
  padding: 2rem;
}

.team-details-empty-icon {
  font-size: 3rem;
  color: #d1d5db;
  margin-bottom: 1rem;
}

.team-details-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.team-details-empty-description {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .team-details-header {
    padding: 1rem;
  }
  
  .team-details-title {
    font-size: 1.25rem;
  }
  
  .team-details-metadata {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .team-details-body {
    padding: 1rem;
  }
  
  .team-members-grid {
    grid-template-columns: 1fr;
  }
  
  .team-member-card {
    flex-direction: column;
    text-align: center;
  }
}

/* Mobile-specific improvements for close buttons */
@media (max-width: 640px) {
  .team-details-header {
    padding: 0.75rem;
  }
  
  .team-details-title {
    font-size: 1.125rem;
  }
  
  .team-details-metadata {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  
  .team-status-badge,
  .team-details-date-badge,
  .team-details-members-badge,
  .team-details-cost-badge,
  .team-details-category-badge {
    padding: 0.15rem 0.375rem;
    font-size: 0.65rem;
    border-radius: 4px;
  }
  
  .team-details-body {
    padding: 0.75rem;
  }
  
  /* Make close buttons larger and more accessible on mobile */
  .team-details-header-actions .task-details-action-btn,
  .btn-close-modern {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
    border-radius: 8px;
  }
  
  .team-details-header-actions .task-details-action-btn.close:hover,
  .btn-close-modern:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
    transform: translateY(-1px);
  }
  
  /* Add visual feedback for better mobile UX */
  .team-details-header-actions .task-details-action-btn:active,
  .btn-close-modern:active {
    transform: scale(0.95);
  }
}

/* Team Management Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.team-management-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.close-btn i {
  font-size: 20px;
}

/* Modal Tabs */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: #374151;
  background: #f3f4f6;
}

.tab-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: white;
}

.tab-btn i {
  font-size: 16px;
}

/* Modal Body */
.modal-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.tab-content {
  height: 100%;
}

/* Team Overview */
.team-overview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.team-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.team-status {
  flex-shrink: 0;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}

.status-badge.completed {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.disbanded {
  background: #fee2e2;
  color: #dc2626;
}

.status-badge.recruiting {
  background: #fef3c7;
  color: #d97706;
}

.team-description h4,
.project-details h4 {
  margin: 0 0 0.5rem 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.team-description p,
.project-details p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* Members Section */
.members-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.members-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.members-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.member-item:hover {
  border-color: #d1d5db;
  background: #f3f4f6;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.member-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
}

.member-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #6b7280;
  text-transform: capitalize;
}

.owner-badge {
  padding: 2px 6px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-joined {
  font-size: 11px;
  color: #9ca3af;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-active {
  color: #059669;
  font-size: 12px;
  font-weight: 500;
}

.status-inactive {
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
}

/* Settings Section */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-section h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-group h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-group.danger-zone {
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.settings-group.danger-zone h5 {
  color: #dc2626;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1;
}

.setting-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
}

.setting-description {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

/* Buttons */
.btn-secondary,
.btn-warning,
.btn-danger,
.btn-primary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  text-decoration: none;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-secondary {
  background: white;
  color: #374151;
  border-color: #d1d5db;
}

.btn-secondary:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.btn-warning {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
}

.btn-danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Confirm Dialog */
.confirm-dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.confirm-dialog {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dialog-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.dialog-content {
  padding: 1.5rem;
}

.dialog-content p {
  margin: 0 0 1rem 0;
  color: #374151;
  line-height: 1.5;
}

.warning-text {
  color: #dc2626 !important;
  font-weight: 500;
}

.reason-input {
  margin-top: 1rem;
}

.reason-input label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.reason-input textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}

.reason-input textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: none !important; /* Completely remove any box-shadow */
}

.dialog-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .team-management-modal {
    max-width: 95vw;
    margin: 1rem;
  }
  
  .modal-tabs {
    overflow-x: auto;
  }
  
  .tab-btn {
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
  
  .team-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .team-stats {
    grid-template-columns: 1fr;
  }
  
  .member-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .member-actions {
    align-self: stretch;
    justify-content: space-between;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dialog-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0.5rem;
  }
  
  .modal-header,
  .modal-body,
  .dialog-header,
  .dialog-content,
  .dialog-actions {
    padding: 1rem;
  }
  
  .tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
  }
  
  .team-header h3 {
    font-size: 20px;
  }
}
/* CreateTeamRequestPage Styles */

.create-team-request-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  background: var(--body-bg);
}

/* Form Container - Matching CreateQuestionnairePage */
.form-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
}

/* Form Row Layout */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Form Row Layout */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Cost Display */
.cost-display {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #22c55e;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.cost-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cost-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #166534;
}

.cost-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #15803d;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #22c55e;
}

.user-points {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #22c55e;
}

/* Form Groups */
.form-group {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.form-group label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: #f9fafb;
  color: #374151;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: none !important;
  /* Completely remove any box-shadow */
  background: white;
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
  border-color: #ef4444;
  background: #fef2f2;
}

.form-group small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Form Row for Side-by-Side Fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Skills Section */
.skills-section {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.skills-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.common-skills {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: -webkit-min-content;
  min-height: min-content;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  height: auto;
  min-height: -webkit-min-content;
  min-height: min-content;
  width: 100%;
}

.skill-button {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.skill-button:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}

.skill-button.selected {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-color: #1e40af;
  color: white;
}

/* Custom Skill Input */
.custom-skill {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  height: auto;
  clear: both;
}

.custom-skill-input {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.custom-skill-input input {
  flex: 1 1;
  padding: 0.5rem 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  background: white;
}

.custom-skill-input button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.custom-skill-input button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Selected Skills */
.selected-skills {
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.selected-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.selected-skill {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selected-skill button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.selected-skill button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Error Messages */
.error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #ef4444;
  font-weight: 500;
}

.points-error {
  background: #fef2f2;
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  border-top: 2px solid #e5e7eb;
  margin-top: 2rem;
  padding-top: 1.5rem;
  position: relative;
  z-index: 10;
  clear: both;
}

.cancel-btn,
.create-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  min-width: 120px;
}

.cancel-btn {
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #d1d5db;
}

.cancel-btn:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.create-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.create-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Team Request Form */
.team-request-form {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-container {
    margin: 1rem;
    padding: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .skills-section {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: -webkit-min-content;
    min-height: min-content;
    overflow: visible !important;
    padding-bottom: 2rem;
    /* Extra padding to ensure separation */
  }

  .skills-grid {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
  }

  .form-group {
    margin-bottom: 2rem;
    /* Increase spacing between groups on mobile */
  }
}

@media (max-width: 480px) {
  .form-container {
    margin: 0.5rem;
    padding: 1rem;
  }

  .skill-button {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
}
/* Enhanced HelpPage Styles - Based on ProfilePage Structure */

/* Help Container */
.help-container {
  min-height: 100vh;
  background: #ffffff;
  color: var(--text-primary);
}

/* Enhanced Help Header - Matching Points History Page Structure */
.help-header-section {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
  color: white;
  padding: 1rem 0 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
  display: block;
  width: 100%;
}

.help-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

.help-header-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/dots-pattern.svg') repeat;
  pointer-events: none;
}

.help-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.help-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
  padding-top: 1rem;
}

/* Compact Help Icon with Question Mark Theme */
.help-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.help-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.help-icon-large::before {
  content: '❓';
  font-size: 1.75rem;
  animation: questionPulse 2s ease-in-out infinite;
}

@keyframes questionPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.help-icon-large:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* Compact Help Info */
.help-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
  border-radius: 8px;
  padding: 1rem;
  border: 1.5px solid #e5e7eb;  
}

.help-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.help-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.help-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.help-description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem 0;
}

.help-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.help-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.help-meta .meta-item i {
  font-size: 0.75rem;
}

/* Wide Screen Optimized Layout - Matching ProfilePage */
.help-wide-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  align-items: start;
  margin-left: 0;
  transition: all 0.3s ease;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .help-wide-grid {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .help-wide-grid {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Help Panel Styles */
.help-panel-primary,
.help-panel-secondary,
.help-panel-tertiary,
.help-panel-faq,
.help-panel-contact {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  height: auto;
  min-height: -webkit-fit-content;
  min-height: fit-content;
}

.help-panel-primary:hover,
.help-panel-secondary:hover,
.help-panel-tertiary:hover,
.help-panel-faq:hover,
.help-panel-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.help-info-card {
  padding: 2rem;
  overflow: visible; /* Allow content to display fully */
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title i {
  color: #3b82f6;
  font-size: 1.3rem;
}

/* Help Items */
.help-items {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Card Grid Layout for Getting Started */
.help-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
}

.help-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.help-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #3b82f6;
}

.help-card .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

.help-card .alert {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.help-item {
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  transition: all 0.2s ease;
}

.help-item:hover {
  background: #f1f5f9;
  transform: translateX(4px);
}

.help-item h4 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.help-item p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.help-item ul,
.help-item ol {
  color: #6b7280;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.help-item li {
  margin-bottom: 0.5rem;
}

/* Help Steps */
.help-steps ol {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  border: 1px solid #e5e7eb;
}

.help-steps li {
  font-weight: 500;
  color: #374151;
}

/* Points Info */
.points-info {
  /* background: #ffffff; */
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.point-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.point-item:last-child {
  border-bottom: none;
}

.point-action {
  color: #374151;
  font-weight: 500;
}

.point-value {
  color: #059669;
  font-weight: 600;
  background: #dcfce7;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
}

/* Feature Highlight */
.feature-highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.feature-highlight i {
  color: #d97706;
  font-size: 1.25rem;
}

.feature-highlight span {
  color: #92400e;
  font-weight: 500;
}

/* FAQ List */
.faq-list {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.faq-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.faq-item strong {
  color: #1f2937;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.faq-item p {
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Contact Options */
.contact-options {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.contact-option:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.contact-icon i {
  color: white;
  font-size: 1.25rem;
}

.contact-content strong {
  color: #1f2937;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  display: block;
}

.contact-content p {
  color: #6b7280;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.contact-content .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .help-wide-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .help-wide-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    margin-left: 0;
  }
  
  body.sidebar-expanded .help-wide-grid,
  body.sidebar-collapsed .help-wide-grid {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
  
  .help-header-content {
    padding: 0 1rem;
  }
  
  .help-hero-centered {
    padding: 1.5rem 0;
  }
  
  .help-title-group h1 {
    font-size: 2rem;
  }
  
  .help-icon-large {
    width: 80px;
    height: 80px;
  }
  
  .help-icon-large i {
    font-size: 2.5rem;
  }
  
  .help-meta {
    gap: 1rem;
  }
  
  .help-info-card {
    padding: 1.5rem;
  }
  
  .contact-option {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .help-wide-grid {
    padding: 0.5rem;
  }
  
  .help-info-card {
    padding: 1rem;
  }
  
  .help-item {
    padding: 1rem;
  }
  
  .help-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
}
/* Tour Restart Section Styles */
.tour-restart-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tour-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.5rem;
  background: white;
  border-radius: 6px;
}

.benefit-item i {
  font-size: 1.1rem;
  width: 20px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.benefit-item span {
  flex: 1 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Keep vertical layout on all screen sizes for consistency */
@media (min-width: 768px) {
  .tour-benefits {
    gap: 1rem;
  }
}
/* Enhanced ContactPage Styles - Based on ProfilePage Structure */

/* Contact Container */
.contact-container {
  min-height: 100vh;
  background: #ffffff;
  color: var(--text-primary);
}

/* Enhanced Contact Header - Matching Help Page Structure */
.contact-header-section {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
  color: white;
  padding: 1rem 0 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
  display: block;
  width: 100%;
}

.contact-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.contact-header-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/dots-pattern.svg') repeat;
  pointer-events: none;
}

.contact-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.contact-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
  padding-top: 1rem;
}

/* Compact Contact Icon */
.contact-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.contact-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.contact-icon-large::before {
  content: '✉️';
  font-size: 1.75rem;
  animation: envelopeBounce 2.5s ease-in-out infinite;
}

@keyframes envelopeBounce {

  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.05);
  }
}

.contact-icon-large:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* Compact Contact Info - Matching Help Page */
/* More specific selector to avoid conflicts with Legal page */
.contact-header-section .contact-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
  border-radius: 8px;
  padding: 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Header section specific styles to avoid conflicts */
.contact-header-section .contact-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.contact-header-section .contact-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.5px;
}

.contact-header-section .contact-badge {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-header-section .contact-description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem 0;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.contact-header-section .contact-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.contact-header-section .contact-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.8rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.contact-header-section .contact-meta .meta-item i {
  font-size: 0.75rem;
}


/* Wide Screen Optimized Layout - Matching ProfilePage */
.contact-wide-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  align-items: start;
  margin-left: 0;
  transition: all 0.3s ease;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* Form panel takes more space */
.contact-panel-form {
  grid-column: span 2;
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .contact-wide-grid {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .contact-wide-grid {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Contact Panel Styles */
.contact-panel-form,
.contact-panel-info,
.contact-panel-help,
.contact-panel-response,
.contact-panel-social {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.contact-panel-form:hover,
.contact-panel-info:hover,
.contact-panel-help:hover,
.contact-panel-response:hover,
.contact-panel-social:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.contact-info-card {
  padding: 2rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title i {
  color: #3b82f6;
  font-size: 1.3rem;
}

/* Form Description */
.form-description {
  color: #6b7280;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Contact Form */
.contact-form {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: #f9fafb;
  color: #374151;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: white;
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-help {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Submit Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* Contact Methods */
.contact-methods {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.contact-method:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.method-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.method-icon i {
  color: white;
  font-size: 1.25rem;
}

.method-details h4 {
  color: #1f2937;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.method-details p {
  color: #374151;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.method-details small {
  color: #6b7280;
  font-size: 0.875rem;
}

/* Quick Help Items */
.quick-help-items {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.quick-help-item {
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  transition: all 0.2s ease;
}

.quick-help-item:hover {
  background: #f1f5f9;
  transform: translateX(4px);
}

.quick-help-item h4 {
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.quick-help-item p {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Response Times */
.response-times {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.response-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.priority {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.priority.high {
  background: #fecaca;
  color: #dc2626;
}

.priority.medium {
  background: #fed7aa;
  color: #ea580c;
}

.priority.low {
  background: #d1fae5;
  color: #059669;
}

.time {
  font-weight: 600;
  color: #374151;
}

.response-note {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #1e40af;
}

.response-note i {
  color: #3b82f6;
}

/* Social Links */
.social-links {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  color: #374151;
  transition: all 0.2s ease;
}

.social-link:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  color: #1e40af;
}

.social-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.social-link:hover .social-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.social-icon i {
  color: white;
  font-size: 1.1rem;
}

.social-link span {
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .contact-wide-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: 1.5rem;
  }

  .contact-panel-form {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .contact-wide-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    margin-left: 0;
  }

  body.sidebar-expanded .contact-wide-grid,
  body.sidebar-collapsed .contact-wide-grid {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }

  .contact-header-content {
    padding: 0 1rem;
  }

  .contact-hero-centered {
    padding: 1.5rem 0;
    flex-direction: column;
  }

  .contact-title-group h1 {
    font-size: 2rem;
  }

  .contact-icon-large {
    width: 80px;
    height: 80px;
  }

  .contact-icon-large i {
    font-size: 2.5rem;
  }

  .contact-meta {
    gap: 1rem;
  }

  .contact-info-card {
    padding: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-method {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .contact-wide-grid {
    padding: 0.5rem;
  }

  .contact-info-card {
    padding: 1rem;
  }

  .quick-help-item {
    padding: 1rem;
  }

  .contact-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
}
/* FunderDots Forums - Enhanced Modern Redesign */

.forums-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 15px;
  line-height: 1.6;
}

.forum-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-bottom: 1px solid #e1e8ed;
  padding: 4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: white;
  position: relative;
  overflow: hidden;
}

.forum-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/background-pattern.svg') repeat;
  pointer-events: none;
}

.header-content {
  flex: 1 1;
  position: relative;
  z-index: 1;
}

.forum-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: white !important;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.025em;
}

.forum-title i {
  font-size: 2.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.forum-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.header-actions {
  margin-left: 1.5rem;
  position: relative;
  z-index: 1;
}

.btn-primary,
.btn-create-topic {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  border: 2px solid transparent;
  text-transform: none;
  letter-spacing: -0.01em;
}

.btn-primary:hover,
.btn-create-topic:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.btn-primary:focus,
.btn-create-topic:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}


.forum-layout {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  padding: 2rem;
  max-width: 1400px;
  /* margin: 0 auto; */
  width: 100%;
}

.forum-main {
  flex: 1 1;
  min-width: 0;
}

.forum-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid #e2e8f0;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  letter-spacing: -0.025em;
}

.section-title i {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.875rem;
}

.forum-sidebar {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.forum-sidebar.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  align-self: flex-start;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.sidebar-section {
  background: #f8fafc;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sidebar-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
  border-radius: 20px 20px 0 0;
}

.sidebar-section:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.sidebar-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f1f3f5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-section h3 i {
  color: #6c5ce7;
  font-size: 20px;
}

.section-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f3f5;
}

.view-all-link {
  color: #6c5ce7;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.view-all-link:hover {
  color: #5847c8;
  transform: translateX(2px);
}

.recent-discussions,
.top-users {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Enhanced Discussion Cards */
.discussion-card,
.discussion-item {
  background: white;
  border: 1px solid #f1f3f5;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.discussion-card:hover,
.discussion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #e1e8ed;
}

.discussion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.discussion-icon {
  background: linear-gradient(135deg, #f1f0ff 0%, #e8f4ff 100%);
  color: #6c5ce7;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.user-avatar-small {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-medium {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-avatar-container {
  position: relative;
  margin-right: 12px;
}

.user-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-rank-badge-overlay {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}

.user-rank-badge-overlay .gold {
  color: #ffd700;
}

.user-rank-badge-overlay .silver {
  color: #c0c0c0;
}

.user-rank-badge-overlay .bronze {
  color: #cd7f32;
}

.user-rank-badge-overlay .rank-number-small {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.discussion-icon i {
  color: #6c5ce7;
  font-size: 18px;
}

.discussion-status {
  display: flex;
  align-items: center;
}

.status-hot {
  color: #ff6b6b;
  font-size: 14px;
  animation: pulse 2s infinite;
}

.status-new {
  color: #51cf66;
  font-size: 10px;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.discussion-content {
  flex: 1 1;
  min-width: 0;
}

.discussion-title {
  font-weight: 700;
  color: #2c3e50;
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.discussion-title:hover {
  color: #6c5ce7;
}

.discussion-category {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.category-name {
  color: #6c5ce7;
  font-weight: 600;
}

.discussion-meta {
  font-size: 12px;
  color: #95a5a6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-row .author strong {
  color: #6c5ce7;
}

.meta-row .stats {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7f8c8d;
  font-weight: 600;
}

.meta-row .time {
  color: #bdc3c7;
  font-size: 11px;
}

.user-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.rank-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem;
  border-radius: 8px;
  min-width: 50px;
}

.rank-badge.gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
  color: #8b6914;
}

.rank-badge.silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
  color: #6b7280;
}

.rank-badge.bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #d4915a 100%);
  color: #7c2d12;
}

.rank-badge i {
  font-size: 20px;
}

.rank-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rank-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f0ff 0%, #e8f4ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c5ce7;
  font-size: 14px;
  font-weight: 700;
}

.user-info {
  flex: 1 1;
  min-width: 0;
}

.username {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 0.4rem;
}

.user-stats {
  font-size: 12px;
  color: #7f8c8d;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.user-stats span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.user-stats i {
  font-size: 12px;
}

.user-level {
  margin-top: 0.3rem;
}

.level-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.level-badge.expert {
  background: #e8f5e8;
  color: #2d5016;
}

.level-badge.advanced {
  background: #fff3cd;
  color: #856404;
}

.level-badge.beginner {
  background: #e2e3ff;
  color: #4c63d2;
}

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

.stat-item {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafb 0%, #f1f3f5 100%);
  border-radius: 12px;
  border: 1px solid #e8eef3;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #6c5ce7;
  margin-bottom: 0.2rem;
}

.stat-label {
  font-size: 11px;
  color: #7f8c8d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #95a5a6;
}

.empty-state i {
  font-size: 32px;
  margin-bottom: 0.5rem;
  display: block;
  color: #bdc3c7;
}

.empty-state p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.category-card {
  background: #ffffff;
  border: 2px solid #e8eef3;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: 280px;
  /* Changed to min-height and increased to accommodate all content */
  height: auto;
  /* Allow cards to expand as needed */
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.category-card.inactive {
  background: #fafbfc;
  border-color: #f1f3f5;
}

.category-card.active {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
  border-color: #e1e8ed;
}

.category-card.high-activity {
  background: linear-gradient(135deg, #ffffff 0%, #f1f0ff 100%);
  border-color: #d1c4e9;
  min-height: 300px;
  /* Extra height for high-activity cards that have more content */
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #6c5ce7;
}

.category-card:hover::before {
  transform: scaleX(1);
}

.category-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.activity-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  z-index: 2;
}

.activity-indicator i {
  font-size: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.category-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.category-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  opacity: 0.1;
  transition: opacity 0.3s ease;
}

.category-card:hover .category-icon {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.category-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.category-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.category-activity-badge {
  margin-top: 0.3rem;
}

.activity-level {
  font-size: 11px;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.activity-level:not(.inactive) {
  background: #e8f5e8;
  color: #2d5016;
}

.activity-level.inactive {
  background: #f3f4f6;
  color: #6b7280;
}

.category-description {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  margin: 0.2rem 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-stats {
  display: flex;
  gap: 1rem;
  margin: 0.75rem 0 0.5rem 0;
  /* Fixed margin to not use auto */
}

.category-stats .stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.category-stats .stat:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* Latest Topic Section */
.category-latest-topic {
  margin: 0.5rem 0;
  padding: 0.75rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* Prevent shrinking */
}

.category-latest-topic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

.latest-topic-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-left: 0.4rem;
}

.latest-topic-row i {
  color: #3b82f6;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.latest-topic-title {
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

.latest-topic-title:hover {
  color: #3b82f6;
  text-decoration: none;
}

.latest-topic-time {
  color: #64748b;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

.latest-topic-author {
  color: #3b82f6;
  font-weight: 600;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* User Items for Top Users */
.user-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 16px;
  background: white;
  border: 1px solid #f1f3f5;
  border-radius: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.user-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #e1e8ed;
}

/* Category Actions */
.category-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  /* Fixed margin, don't use auto */
  padding-top: 0.75rem;
  border-top: 2px solid #f1f5f9;
  flex-shrink: 0;
  /* Prevent shrinking */
}

.category-action-btn {
  flex: 1 1;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  border: 2px solid transparent;
  letter-spacing: -0.01em;
}

.category-action-btn.browse {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  border-color: #e2e8f0;
}

.category-action-btn.browse:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.category-action-btn.create {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.2);
}

.category-action-btn.create:hover {
  background: linear-gradient(135deg, #5847c8 0%, #8b7ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
}

.category-action-btn i {
  font-size: 12px;
}

/* Skeleton Loading Animations */
@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-title,
.skeleton-meta,
.skeleton-username,
.skeleton-stats,
.skeleton-stat,
.skeleton-icon {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Skeleton specific styles */
.discussion-item.skeleton .skeleton-title {
  height: 16px;
  width: 80%;
  margin-bottom: 8px;
}

.discussion-item.skeleton .skeleton-meta {
  height: 12px;
  width: 60%;
}

.user-item.skeleton .skeleton-username {
  height: 14px;
  width: 70%;
  margin-bottom: 6px;
}

.user-item.skeleton .skeleton-stats {
  height: 11px;
  width: 90%;
}

.category-card.skeleton {
  pointer-events: none;
}

.category-card.skeleton .skeleton-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.category-card.skeleton .skeleton-title {
  height: 20px;
  width: 80%;
  margin-top: 4px;
}

.category-card.skeleton .skeleton-stat {
  height: 14px;
  width: 45%;
}

/* Dark mode skeleton */
@media (prefers-color-scheme: dark) {

  .skeleton-title,
  .skeleton-meta,
  .skeleton-username,
  .skeleton-stats,
  .skeleton-stat,
  .skeleton-icon {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
  }
}

/* Responsive Design - Enhanced */
@media (max-width: 1200px) {
  .forum-layout {
    flex-direction: column;
    gap: 2rem;
  }

  .forum-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static !important;
    /* Override sticky */
  }

  .forum-sidebar.sticky {
    position: static !important;
  }

  .sidebar-section {
    flex: 1 1 300px;
    min-width: 280px;
  }

  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .forum-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .forum-title {
    font-size: 26px;
  }

  .forum-subtitle {
    font-size: 15px;
  }

  .forum-layout {
    padding-top: 1rem;
  }

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

  .btn-create-topic {
    width: 100%;
    justify-content: center;
  }

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

  .category-card {
    height: auto;
    padding: 20px;
  }

  .forum-sidebar {
    flex-direction: column;
  }

  .sidebar-section {
    flex: 1 1 auto;
    min-width: auto;
  }

  .community-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .activity-indicator {
    position: static;
    margin-bottom: 1rem;
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .forum-layout {
    padding-top: 0.5rem;
  }

  .forum-header {
    padding: 1rem;
  }

  .forum-title {
    font-size: 22px;
  }

  .btn-primary,
  .btn-create-topic {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  .category-card {
    padding: 16px;
    height: auto;
    min-height: auto;
  }

  .category-card.high-activity {
    min-height: auto;
  }

  .category-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .category-title {
    font-size: 14px;
  }

  .sidebar-section {
    padding: 20px;
  }

  .section-title {
    font-size: 20px;
  }
}

/* Loading Spinner */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: 1rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f1f3f5;
  border-top: 4px solid #6c5ce7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-container p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

/* Accessibility Improvements */
.category-card:focus-visible,
.discussion-title:focus-visible,
.view-all-link:focus-visible,
.btn-primary:focus-visible,
.btn-create-topic:focus-visible {
  outline: 3px solid #6c5ce7;
  outline-offset: 2px;
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .category-card {
    border-width: 2px;
  }

  .activity-indicator {
    border: 2px solid currentColor;
  }

  .discussion-icon {
    border: 2px solid #6c5ce7;
  }
}


/* Compact Categories Grid - Similar to Chinese Forum Layout */
.categories-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.category-compact-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  min-height: 100px;
  height: 100%;
  flex-direction: row;
  justify-content: flex-start;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .categories-compact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.category-compact-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #6c5ce7;
  background: #fefefe;
  text-decoration: none;
}

.category-compact-item:hover .category-compact-title {
  text-decoration: none;
}

.category-compact-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* color: white; */
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

.category-compact-icon i {
  font-size: 18px;
  font-weight: 600;
}

.category-compact-icon .category-icon {
  font-size: 20px;
  line-height: 1;
}

.category-compact-item:hover .category-compact-icon {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.category-compact-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.category-compact-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
}

.category-compact-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1;
}

.compact-stat {
  font-weight: 500;
}

.compact-separator {
  color: #cbd5e1;
  font-weight: 400;
}

/* Skeleton for compact items */
.category-compact-item.skeleton {
  background: #f8fafc;
  border-color: #f1f5f9;
  pointer-events: none;
}

.category-compact-item.skeleton .skeleton-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.category-compact-item.skeleton .skeleton-title {
  height: 16px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  width: 60%;
  margin-bottom: 4px;
}

.category-compact-item.skeleton .skeleton-stats {
  height: 12px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 3px;
  width: 80%;
}

/* Responsive adjustments for compact grid */
@media (max-width: 768px) {
  .categories-compact-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .category-compact-item {
    padding: 10px 14px;
    min-height: 56px;
  }

  .category-compact-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .category-compact-title {
    font-size: 13px;
  }

  .category-compact-stats {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .categories-compact-grid {
    gap: 0.25rem;
  }

  .category-compact-item {
    padding: 8px 12px;
    min-height: 52px;
  }

  .category-compact-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* Introduced scrollbar for Recent Discussions and Community Leaders sections */
.discussion-list {
  max-height: 800px;
  /* Increased height since community leaders section is removed */
  overflow-y: auto;
  padding-right: 1rem;
  /* For scrollbar spacing */
}

.community-leaders-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 1rem;
}

/* Custom scrollbar for webkit browsers */
.discussion-list::-webkit-scrollbar,
.community-leaders-list::-webkit-scrollbar {
  width: 8px;
}

.discussion-list::-webkit-scrollbar-track,
.community-leaders-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.discussion-list::-webkit-scrollbar-thumb,
.community-leaders-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.discussion-list::-webkit-scrollbar-thumb:hover,
.community-leaders-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Rich Text Editor Styles */
.rich-text-editor {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  transition: border-color 0.2s ease;
}

.rich-text-editor:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Toolbar Styles */
.rich-text-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid #dee2e6;
}

.toolbar-group:last-child {
  border-right: none;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
}

.toolbar-btn:hover {
  background: #e9ecef;
  color: #212529;
}

.toolbar-btn.active {
  background: #007bff;
  color: white;
}

.toolbar-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Content Wrapper */
.rich-text-content-wrapper {
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

/* Editor Content Styles */
.rich-text-content {
  padding: 16px;
  min-height: 180px;
  line-height: 1.6;
  color: #212529;
  font-size: 16px;
}

.rich-text-content:focus {
  outline: none;
}

/* Rich Text Typography */
.rich-text-content h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 16px 0 8px 0;
  color: #212529;
}

.rich-text-content h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 14px 0 7px 0;
  color: #212529;
}

.rich-text-content h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: #212529;
}

.rich-text-content p {
  margin: 0 0 12px 0;
}

.rich-text-content p:last-child {
  margin-bottom: 0;
}

.rich-text-content strong {
  font-weight: 700;
}

.rich-text-content em {
  font-style: italic;
}

.rich-text-content u {
  text-decoration: underline;
}

.rich-text-content a {
  color: #007bff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.rich-text-content a:hover {
  border-bottom-color: #007bff;
}

/* Lists */
.rich-text-bullet-list,
.rich-text-ordered-list {
  margin: 12px 0;
  padding-left: 24px;
}

.rich-text-bullet-list li,
.rich-text-ordered-list li {
  margin: 4px 0;
  line-height: 1.5;
}

.rich-text-bullet-list {
  list-style-type: disc;
}

.rich-text-ordered-list {
  list-style-type: decimal;
}

/* Images */
.rich-text-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Blockquotes */
.rich-text-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #007bff;
  background: #f8f9fa;
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: #495057;
}

/* Code */
.rich-text-content code {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  color: #e83e8c;
}

.rich-text-content pre {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}

.rich-text-content pre code {
  background: none;
  padding: 0;
  color: #212529;
}

/* Placeholder */
.rich-text-content[data-placeholder]:before {
  content: attr(data-placeholder);
  color: #6c757d;
  pointer-events: none;
  position: absolute;
  font-style: italic;
}

.rich-text-content:not(:empty)[data-placeholder]:before {
  display: none;
}

/* Read-only mode */
.rich-text-editor.read-only {
  border: none;
  background: transparent;
}

.rich-text-editor.read-only .rich-text-content-wrapper {
  padding: 0;
  max-height: none;
}

.rich-text-editor.read-only .rich-text-content {
  padding: 0;
  min-height: auto;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .rich-text-toolbar {
    padding: 8px;
    gap: 4px;
  }
  
  .toolbar-group {
    padding: 0 4px;
  }
  
  .toolbar-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .rich-text-content {
    padding: 12px;
    font-size: 14px;
  }
  
  .rich-text-content-wrapper {
    min-height: 150px;
  }
}

/* Focus and Selection States */
.ProseMirror-focused {
  outline: none;
}

.ProseMirror {
  outline: none;
}

/* Selection styling */
.ProseMirror ::selection {
  background: rgba(0, 123, 255, 0.2);
}

/* Empty line handling */
.rich-text-content p.is-empty::before {
  content: '';
  float: left;
  height: 0;
  pointer-events: none;
}

/* Announcement Content HTML Styling */
.announcement-text {
  line-height: 1.6;
  font-size: 0.875rem;
}

/* Make sure HTML elements are displayed properly */
.announcement-text * {
  max-width: 100%;
}

.announcement-text h1,
.announcement-text h2,
.announcement-text h3,
.announcement-text h4,
.announcement-text h5,
.announcement-text h6 {
  margin: 8px 0 4px 0;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

.announcement-text h1 { font-size: 1.2em; }
.announcement-text h2 { font-size: 1.1em; }
.announcement-text h3 { font-size: 1.05em; }
.announcement-text h4,
.announcement-text h5,
.announcement-text h6 { font-size: 1em; }

.announcement-text p {
  margin: 0 0 8px 0;
  display: block;
}

.announcement-text p:last-child {
  margin-bottom: 0;
}

.announcement-text strong,
.announcement-text b {
  font-weight: 600;
}

.announcement-text em,
.announcement-text i {
  font-style: italic;
}

.announcement-text u {
  text-decoration: underline;
}

.announcement-text a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.announcement-text a:hover {
  opacity: 0.8;
}

.announcement-text ul,
.announcement-text ol {
  margin: 6px 0;
  padding-left: 20px;
  display: block;
}

.announcement-text li {
  margin: 2px 0;
  line-height: 1.4;
  display: list-item;
}

.announcement-text ul li {
  list-style-type: disc;
}

.announcement-text ol li {
  list-style-type: decimal;
}

.announcement-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  border: 1px solid currentColor;
  opacity: 0.8;
}

.announcement-text table th,
.announcement-text table td {
  border: 1px solid currentColor;
  padding: 4px 8px;
  text-align: left;
}

.announcement-text table th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
}

.announcement-text blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid currentColor;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  opacity: 0.9;
}

.announcement-text code {
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.85em;
}

.announcement-text pre {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 0.8em;
}

.announcement-text pre code {
  background: none;
  padding: 0;
}

.announcement-text img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 4px 0;
}

/* Announcement Editor Specific Styles */
.announcement-editor {
  margin-bottom: 1rem;
}

.announcement-editor .rich-text-content-wrapper {
  min-height: 120px;
  max-height: 300px;
}

.announcement-editor .rich-text-content {
  min-height: 100px;
  font-size: 14px;
  padding: 12px;
}

/* Form styling for announcements */
.announcement-form .form-group {
  margin-bottom: 1rem;
}

.announcement-form .form-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: #374151;
}

.announcement-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto; /* Push to the right */
}

.announcement-edit,
.announcement-delete {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

.announcement-edit:hover,
.announcement-delete:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading Animation */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ForumCategoryPage.css - Modern Layout Matching ForumsPage Structure */

/* Container matching tasks-hub structure */
.forum-category-container {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Header Section matching ForumsPage structure */
.category-header-modern {
  text-align: left;
  padding-top: 1rem;
}

.category-breadcrumb {
  margin-bottom: 1rem;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: #3b82f6;
}

.category-title-main {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

/* Compact Category Header Styles */
.category-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.category-title-compact {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Inline stats within title */
.category-stats-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  margin-left: 0;
  /* Remove left margin since hint icon now provides spacing */
}

.stat-today {
  color: #059669;
  font-weight: 600;
}

.stat-separator {
  color: #94a3b8;
  margin: 0 0.125rem;
}

.stat-total {
  color: #374151;
  font-weight: 600;
}

.stats-label-sub {
  color: #94a3b8;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.category-info-hint {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-size: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.category-info-hint:hover {
  color: #3b82f6;
  background: #f1f5f9;
}

/* Category Stats and Latest Topic Section */
.category-stats-container {
  margin: 1rem 0;
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.category-stats-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.category-stats-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-stats-item i {
  color: #3b82f6;
  font-size: 1.1rem;
}

.stats-label {
  font-weight: 500;
  color: #64748b;
}

.stats-value {
  font-weight: 600;
  color: #1e293b;
}

.category-latest-topic {
  border-top: 1px solid #e2e8f0;
  padding-top: 1rem;
}

.latest-topic-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
}

.latest-topic-header i {
  color: #3b82f6;
}

.latest-topic-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.latest-topic-title {
  font-weight: 500;
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 1rem;
}

.latest-topic-title:hover {
  color: #3b82f6;
  text-decoration: none;
}

.latest-topic-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #64748b;
}

.latest-topic-time {
  color: #64748b;
}

.latest-topic-author {
  color: #3b82f6;
  font-weight: 500;
}

.category-description {
  max-width: 800px;
}

.description-text {
  color: #64748b;
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

.read-more-btn {
  background: none;
  border: none;
  color: #3b82f6;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
  transition: color 0.2s ease;
}

.read-more-btn:hover {
  color: #1d4ed8;
}

/* Main content area matching ForumsPage structure */
.forum-category-main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 2rem 2rem;
  width: 100%;
}

/* Featured Topics Section - Updated styling */
.featured-topics {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.featured-topics h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.topic-tag {
  background: #f1f5f9;
  color: #475569;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.topic-tag:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.topic-tag.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.topic-tag.clear-filter {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.topic-tag.clear-filter:hover {
  background: #fee2e2;
}

/* Topics Header */
.topics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.topics-header-left h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.topics-count {
  font-size: 1rem;
  font-weight: 400;
  color: #64748b;
}

.topics-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sort-dropdown {
  position: relative;
}

.sort-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url('/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  min-width: 140px;
}

.sort-select:hover {
  border-color: #9ca3af;
}

.sort-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Topics Grid Layout */
.topics-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Topics Header with Controls - Enhanced visual hierarchy */
.topics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  /* Subtle gradient */
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
  gap: 16px;
  border-left: 4px solid #3b82f6;
  /* Blue accent to distinguish from featured topics */
}

.topics-header-left {
  flex: 1 1;
}

.topics-header h2 {
  font-size: 24px;
  /* Larger than featured topics for hierarchy */
  font-weight: 700;
  /* Bolder than featured topics */
  color: #1e293b;
  /* Darker than featured topics */
  margin: 0;
}

.topics-count {
  color: #64748b;
  /* Lighter but still readable */
  font-size: 16px;
  font-weight: 500;
  /* Medium weight for balance */
  margin-left: 8px;
}

.topics-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sort-select {
  -webkit-appearance: none;
          appearance: none;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}

.sort-select:hover {
  border-color: #007bff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.sort-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.sort-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.new-topic-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.new-topic-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  color: white;
  text-decoration: none;
}

/* Floating New Topic Button - Enhanced CTA */
.floating-new-topic-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.floating-new-topic-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
  color: white;
  text-decoration: none;
}

.floating-new-topic-btn:active {
  transform: translateY(0) scale(0.95);
}

/* Topics Grid - Enhanced Card Layout */
.topics-grid {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.topic-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: #e0e0e0;
}

.topic-card-content {
  display: flex;
  padding: 24px;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

/* Media Preview with Visual Cue */
.topic-media-preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  border: 2px solid #e9ecef;
}

.topic-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 123, 255, 0.9);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.topic-main {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Topic Title - Bold and Prominent */
.topic-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topic-title a:hover {
  color: #007bff;
}

/* Description Preview - Lighter Font */
.topic-description {
  margin: 0;
}

.topic-preview-content {
  color: #6c757d;
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-placeholder {
  color: #adb5bd;
  font-style: italic;
  font-size: 14px;
}

/* Topic Metadata - Enhanced readability with minimum 14px font */
.topic-metadata {
  font-size: 14px;
  /* Increased from 13px for better readability */
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.author-name {
  color: #007bff;
  font-weight: 600;
}

.topic-separator {
  color: #adb5bd;
  margin: 0 4px;
  /* Added spacing around separators */
}

.last-activity {
  color: #28a745;
  font-weight: 500;
  font-size: 14px;
  /* Ensure minimum readable size */
}

/* Topic Stats - Enhanced with better contrast - REMOVED ABSOLUTE POSITIONING */

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  /* Increased from 13px for accessibility */
  color: #6c757d;
}

.stat-item i {
  font-size: 16px;
  /* Slightly larger icons for better visibility */
  color: #007bff;
  /* Blue for replies */
}

.stat-item:last-child i {
  color: #28a745;
  /* Green for views */
}

.stat-value {
  font-weight: 600;
  color: #495057;
}

/* Enhanced CTA Elements */
.create-topic-cta {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.create-topic-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
  color: white !important;
  text-decoration: none;
}

.encourage-activity {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-top: 20px;
}

.encourage-content h4 {
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.encourage-content p {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.encourage-cta {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.encourage-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  color: white;
  text-decoration: none;
}

/* Admin Announcements Styles */
.admin-announcements {
  margin: 1rem 0;
}

/* Announcements in main content area */
.category-announcements-main {
  margin-bottom: 1.5rem;
}

.category-announcements-main .admin-announcements {
  margin: 0;
  /* Reset default margin since parent has margin-bottom */
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.announcement-item {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.announcement-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.announcement-info {
  background: #f0f9ff;
  border-left-color: #3b82f6;
  color: #1e40af;
}

.announcement-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #92400e;
}

.announcement-success {
  background: #f0fdf4;
  border-left-color: #10b981;
  color: #065f46;
}

.announcement-primary {
  background: #faf5ff;
  border-left-color: #8b5cf6;
  color: #5b21b6;
}

.announcement-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  justify-content: space-between;
}

.announcement-header .announcement-title {
  font-weight: 600;
  font-size: 0.875rem;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announcement-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

.announcement-edit,
.announcement-delete {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

.announcement-edit:hover,
.announcement-delete:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.announcement-edit:hover,
.announcement-delete:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.announcement-text {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.announcement-expires {
  font-size: 0.75rem;
  opacity: 0.8;
  font-style: italic;
}

/* Admin Controls */
.admin-announcement-controls {
  margin-top: 1rem;
}

.add-announcement-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.add-announcement-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Announcement Form */
.announcement-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.form-input {
  flex: 1 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  outline: none;
  resize: vertical;
  min-height: 4rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.btn-save {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-save:hover {
  background: #2563eb;
}

.btn-cancel {
  background: #6b7280;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: #4b5563;
}

.announcements-loading {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions {
    margin-left: 0;
    justify-content: stretch;
  }

  .btn-save,
  .btn-cancel {
    flex: 1 1;
  }
}

/* Responsive Design matching ForumsPage structure */
@media (max-width: 1024px) {
  .forum-category-main-content {
    padding: 0 1rem 2rem 1rem;
  }

  .category-title-main {
    font-size: 1.75rem;
  }

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

  .topics-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .forum-category-main-content {
    padding: 0 1rem 1rem 1rem;
  }

  .category-title-main {
    font-size: 1.5rem;
  }

  .topic-tags {
    gap: 0.375rem;
  }

  .topic-tag {
    font-size: 0.8rem;
    padding: 0.375rem 0.625rem;
  }

  .sort-select {
    width: 100%;
    min-width: auto;
  }

  .forum-controls-compact-row {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .pagination-compact {
    justify-content: center;
  }

  .category-title-compact {
    font-size: 1.125rem;
  }

  .category-stats-inline {
    flex-wrap: wrap;
  }

  /* Mobile tooltip adjustments */
  .category-info-hint {
    padding: 0.5rem;
    /* Larger touch target on mobile */
    margin-left: 0.5rem;
    margin-right: 0.25rem;
  }

  .tooltip-content {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: none;
    min-width: auto;
    margin-bottom: 0;
    /* Reset margin on mobile */
    pointer-events: auto;
    /* Allow interactions on mobile */
    z-index: 9999;
    /* Ensure high z-index on mobile too */
  }
}

@media (max-width: 480px) {
  .category-title-main {
    font-size: 1.25rem;
  }

  .featured-topics {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .topics-header {
    padding-bottom: 0.75rem;
  }

  .topics-header-left h2 {
    font-size: 1.25rem;
  }

  .topics-count {
    font-size: 0.875rem;
  }

  .category-stats-inline {
    font-size: 0.8125rem;
  }

  .new-topic-btn-compact {
    justify-content: center;
    width: 100%;
  }
}

/* Empty State */
.empty-topics-message {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-topics-message h3 {
  margin: 0 0 12px 0;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 20px;
}

.empty-topics-message p {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: #666666;
}

.create-topic-cta {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white!important;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.create-topic-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  color: white !important;
  text-decoration: none;
}

/* Loading State */
.loading-topics {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-topics span {
  color: #666666;
  font-size: 14px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  gap: 8px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.page-btn {
  padding: 10px 16px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666666;
  transition: all 0.2s ease;
  min-width: 44px;
  text-align: center;
}

.page-btn:hover:not(.disabled) {
  background: #f8f9fa;
  border-color: #007bff;
  color: #007bff;
  transform: translateY(-1px);
}

.page-btn.active {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.page-btn.disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background-color: #f8f9fa;
  border-color: #f0f0f0;
}

/* Login Prompt */
.forum-login-prompt {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 40px;
  margin-top: 32px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.login-prompt-content h4 {
  margin: 0 0 12px 0;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 20px;
}

.login-prompt-content p {
  color: #666666;
  margin: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.6;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.btn-light {
  background: white;
  color: #1a1a1a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-light:hover {
  background: #f8f9fa;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .forum-container {
    padding: 16px;
    background-color: #fafafa;
  }

  .category-header {
    margin-bottom: 24px;
    padding: 24px 20px;
  }

  .category-header h1 {
    font-size: 26px;
  }

  .category-description {
    font-size: 16px;
  }

  .topics-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 16px 20px;
  }

  .topics-header h2 {
    text-align: center;
  }

  .new-topic-btn {
    align-self: center;
  }

  .topic-card-content {
    padding: 20px;
    flex-direction: column;
    gap: 12px;
  }

  .topic-image {
    align-self: center;
    width: 50px;
    height: 50px;
  }

  .topic-title {
    font-size: 16px;
  }

  .topic-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .topic-stats {
    align-self: left
  }

  .pagination {
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px;
  }

  .page-btn {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 40px;
  }

  .empty-topics-message {
    padding: 40px 20px;
  }

  .empty-icon {
    font-size: 40px;
  }

  .login-prompt-content {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .forum-container {
    padding: 12px;
  }

  .category-header,
  .topics-header,
  .topic-card,
  .pagination,
  .forum-login-prompt {
    border-radius: 8px;
  }

  .topic-card-content {
    padding: 16px;
  }

  .topic-title {
    font-size: 15px;
  }

  .topic-excerpt {
    font-size: 13px;
  }

  .stat-item,
  .topic-author-info,
  .last-activity {
    font-size: 11px;
  }
}

/* Forum Top Controls */
.forum-top-controls {
  margin-bottom: 1.5rem;
}

.forum-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
}

.forum-controls-left {
  display: flex;
  align-items: center;
}

.forum-controls-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* New Topic Button - Compact Style */
.new-topic-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white !important;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.new-topic-btn-compact:hover {
  background: #2563eb;
  color: white !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.new-topic-btn-compact i {
  font-size: 0.875rem;
}

/* Sort Controls - Compact */
.sort-controls-compact {
  display: flex;
  align-items: center;
}

.sort-select-compact {
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.sort-select-compact:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Compact Pagination - Matching attachment style */
.pagination-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.page-btn-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.page-btn-compact:hover:not(.disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.page-btn-compact.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.new-post-btn {
  background: white !important;
  color: #2563eb !important;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  border: 2px solid #2563eb !important;
  cursor: pointer;
}

.new-post-btn:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  color: #1d4ed8 !important;
  text-decoration: none;
  border-color: #1d4ed8 !important;
}

.pagination-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-btn {
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

.page-btn:hover:not(.disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.page-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.page-btn.disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: #f9fafb;
}

.page-ellipsis {
  padding: 0.5rem;
  color: #6b7280;
}

/* Tag Filters */
.forum-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.filter-tag {
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s ease;
}

.filter-tag:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.filter-tag.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Topics Table */
.topics-table-container {
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.topics-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.header-cell {
  padding: 0.75rem 1rem;
  border-right: 1px solid #e2e8f0;
}

.header-cell:last-child {
  border-right: none;
}

.topics-table-body {
  display: flex;
  flex-direction: column;
}

.topic-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
  min-height: 40px;
}

.topic-row:hover {
  background-color: #e2e8f0;
}

.topic-row:last-child {
  border-bottom: none;
}

.topic-cell {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Topic Info Cell */
.topic-info {
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.topic-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.topic-icon {
  font-size: 1rem;
}

.topic-icon.pinned {
  color: #f59e0b;
}

.topic-icon.announcement {
  color: #3b82f6;
}

.topic-icon.locked {
  color: #dc2626;
}

.topic-icon.normal {
  color: #6b7280;
}

.topic-content {
  flex: 1 1;
  min-width: 0;
}

.topic-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.topic-category-tag {
  background: #3b82f6;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
}

.topic-title-link {
  font-weight: 500;
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  flex: 1 1;
  min-width: 0;
}

.topic-title-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.topic-new-badge {
  background: #ef4444;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.topic-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.topic-page-link {
  background: #f3f4f6;
  color: #6b7280;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.75rem;
  text-decoration: none;
  border: 1px solid #d1d5db;
}

.topic-page-link:hover {
  background: #e5e7eb;
  color: #374151;
  text-decoration: none;
}

.topic-page-ellipsis {
  color: #9ca3af;
  font-size: 0.75rem;
}

.topic-preview {
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-top: 0.25rem;
}

/* Author Info Cell */
.author-info {
  text-align: left;
}

.author-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.author-date {
  color: #6b7280;
  font-size: 0.75rem;
}

/* Topic Stats Cell */
.topic-stats {
  text-align: left;
}

.stats-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.stat-number {
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  line-height: 1.1;
  background: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
}

.replies-count {
  color: #374151 !important;
}

.views-count {
  color: #949cad !important;
}

/* Last Post Info Cell */
.last-post-info {
  text-align: left;
}

.last-post-author {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.last-post-time {
  color: #6b7280;
  font-size: 0.75rem;
}

/* Responsive adjustments for new table layout */
@media (max-width: 768px) {
  .forum-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .forum-controls-left,
  .forum-controls-right {
    justify-content: center;
  }

  .forum-controls-right {
    flex-direction: column;
    gap: 0.75rem;
  }

  .pagination-compact {
    justify-content: center;
  }

  .sort-controls-compact {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .forum-tag-filters {
    padding: 0.75rem;
  }

  .filter-tag {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }

  .page-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
    min-width: 2rem;
  }
}

/* Admin Pin Control Styles */
.topic-icon.pinned {
  color: #f59e0b;
}

.topic-icon.announcement {
  color: #3b82f6;
}

.topic-icon.locked {
  color: #dc2626;
}

.topic-icon.normal {
  color: #6b7280;
}

/* Pin Control Cell - Admin only */
.pin-control {
  align-items: center;
  justify-content: center;
  min-width: 60px;
  max-width: 60px;
}

.pin-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #6b7280;
}

.pin-btn:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.pin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.pin-btn.pinned {
  background-color: #fef3c7;
  border-color: #f59e0b;
  color: #f59e0b;
}

.pin-btn.pinned:hover {
  background-color: #fde68a;
  border-color: #d97706;
  color: #d97706;
}

.pin-btn i {
  font-size: 0.9rem;
}

.pin-btn .spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Category Header Alignment */
.category-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.category-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.category-info h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}
/* Rich Content Display Styles */
.rich-content-display {
  line-height: 1.6;
  color: #212529;
}

.rich-content-display.empty {
  color: #6c757d;
  font-style: italic;
  padding: 16px 0;
}

.rich-content-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Typography */
.rich-content-body h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 16px 0 8px 0;
  color: #212529;
  line-height: 1.3;
}

.rich-content-body h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 14px 0 7px 0;
  color: #212529;
  line-height: 1.3;
}

.rich-content-body h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: #212529;
  line-height: 1.3;
}

.rich-content-body p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.rich-content-body p:last-child {
  margin-bottom: 0;
}

.rich-content-body p:empty {
  margin: 0;
}

/* Text Formatting */
.rich-content-body strong,
.rich-content-body b {
  font-weight: 700;
}

.rich-content-body em,
.rich-content-body i {
  font-style: italic;
}

.rich-content-body u {
  text-decoration: underline;
}

/* Links */
.rich-content-body a {
  color: #007bff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.rich-content-body a:hover {
  border-bottom-color: #007bff;
  color: #0056b3;
}

.rich-content-body a:focus {
  outline: 2px solid rgba(0, 123, 255, 0.25);
  outline-offset: 2px;
}

/* Lists */
.rich-content-body ul,
.rich-content-body ol {
  margin: 12px 0;
  padding-left: 24px;
}

.rich-content-body ul {
  list-style-type: disc;
}

.rich-content-body ol {
  list-style-type: decimal;
}

.rich-content-body li {
  margin: 4px 0;
  line-height: 1.5;
}

.rich-content-body li p {
  margin: 0;
}

/* Nested lists */
.rich-content-body ul ul,
.rich-content-body ol ol,
.rich-content-body ul ol,
.rich-content-body ol ul {
  margin: 4px 0;
}

.rich-content-body ul ul {
  list-style-type: circle;
}

.rich-content-body ul ul ul {
  list-style-type: square;
}

/* Images */
.rich-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Blockquotes */
.rich-content-body blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #007bff;
  background: #f8f9fa;
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: #495057;
}

.rich-content-body blockquote p {
  margin: 0;
}

.rich-content-body blockquote p:not(:last-child) {
  margin-bottom: 8px;
}

/* Code */
.rich-content-body code {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  color: #e83e8c;
  word-break: break-all;
}

.rich-content-body pre {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid #e9ecef;
}

.rich-content-body pre code {
  background: none;
  padding: 0;
  color: #212529;
  word-break: normal;
}

/* Read More Button */
.read-more-btn {
  margin-top: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #007bff;
  color: #007bff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.read-more-btn:hover {
  background: #007bff;
  color: white;
}

.read-more-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .rich-content-body h1 {
    font-size: 1.3em;
  }
  
  .rich-content-body h2 {
    font-size: 1.2em;
  }
  
  .rich-content-body h3 {
    font-size: 1.1em;
  }
  
  .rich-content-body ul,
  .rich-content-body ol {
    padding-left: 20px;
  }
  
  .rich-content-body pre {
    padding: 12px;
    font-size: 14px;
  }
  
  .rich-content-body blockquote {
    padding: 8px 12px;
    margin: 12px 0;
  }
}

/* Compact mode for previews */
.rich-content-display.compact .rich-content-body h1,
.rich-content-display.compact .rich-content-body h2,
.rich-content-display.compact .rich-content-body h3 {
  margin: 8px 0 4px 0;
}

.rich-content-display.compact .rich-content-body p {
  margin: 0 0 8px 0;
}

.rich-content-display.compact .rich-content-body img {
  margin: 8px 0;
}

.rich-content-display.compact .rich-content-body blockquote,
.rich-content-display.compact .rich-content-body pre {
  margin: 8px 0;
  padding: 8px 12px;
}

.rich-content-display.compact .rich-content-body ul,
.rich-content-display.compact .rich-content-body ol {
  margin: 8px 0;
}

/* Truncated mode for excerpts */
.rich-content-display.truncated {
  position: relative;
}

.rich-content-display.truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

/* Forum Topic Page - Classic BBS Style Refactor */

/* Override BasePageLayout's .page-container margin for forum topic page */
.base-page-layout:has(.forum-topic-container) .page-container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  /* Match website gradient background */
}

.forum-topic-container {
  max-width: 1200px;
  /* Standard fixed width for forums */
  /* margin: 0 auto; */
  padding: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  /* Match website font */
  color: #333;
  font-size: 14px;
  margin-top: 50px;
}

/* Thread Header - Breadcrumb */
.thread-header {
  padding: 15px 0;
  margin-bottom: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.thread-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 0 15px;
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: #6c5ce7;
  /* Purple theme color */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.breadcrumb-link:hover {
  color: #5847c8;
  text-decoration: none;
  transform: translateX(-2px);
}

.breadcrumb-separator {
  color: #cbd5e1;
  font-size: 12px;
}

.breadcrumb-current {
  color: #64748b;
  font-weight: 500;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top Controls */
.topic-top-controls {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.new-post-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 15px;
  background: #0066cc;
  /* Classic blue button */
  color: white;
  border: 1px solid #005cbf;
  border-radius: 2px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.new-post-btn:hover {
  background: #005cbf;
  text-decoration: none;
  color: white;
}

/* Pagination */
.topic-pagination-top,
.topic-pagination-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.pagination-numbers {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.pagination-ellipsis {
  color: #94a3b8;
  padding: 0 4px;
  -webkit-user-select: none;
          user-select: none;
}

.pagination-btn,
.pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border: 2px solid #e2e8f0;
  background: white;
  color: #475569;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn:not(:disabled):hover,
.pagination-number:hover {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: white;
  border-color: #6c5ce7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
}

.pagination-number.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Main Posts Table Structure */
.posts-table-container {
  margin-bottom: 20px;
  border: 1px solid #cdcdcd;
  /* Classic border color */
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.posts-table {
  width: 100%;
  border-collapse: collapse;
}

/* Topic Header Row */
.topic-header-row {
  display: flex;
  background: #f2f2f2;
  /* Header background */
  border-bottom: 1px solid #cdcdcd;
  min-height: 40px;
}

.topic-stats-cell {
  width: 160px;
  /* Fixed width sidebar */
  flex-shrink: 0;
  background: #e5edf2;
  /* Slightly different sidebar header bg */
  border-right: 1px solid #cdcdcd;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  color: #666;
}

.topic-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.topic-name-cell {
  flex: 1 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topic-title-in-table {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topic-meta-in-table {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 15px;
}

/* Post Row */
.post-table-row {
  display: flex;
  border-bottom: 6px solid #e5edf2;
  /* Thick separator between posts */
}

.post-table-row:last-child {
  border-bottom: none;
}

/* Left Column - Author Info */
.post-author-column {
  width: 160px;
  /* Fixed width sidebar */
  flex-shrink: 0;
  background: #e5edf2;
  /* Classic sidebar background */
  border-right: 1px solid #cdcdcd;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.author-name {
  font-weight: bold;
  color: #333;
  font-size: 14px;
  margin-bottom: 10px;
  word-break: break-word;
}

.author-avatar-img {
  width: 120px;
  height: 120px;
  border: 4px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  object-fit: cover;
}

.author-meta {
  width: 100%;
  font-size: 12px;
  color: #666;
  text-align: left;
  margin-top: 5px;
}

.author-post-count,
.author-join-date {
  margin-bottom: 4px;
  padding: 0;
  background: none;
  border: none;
  color: #666;
}

/* Right Column - Content */
.post-content-column {
  flex: 1 1;
  background: white;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Prevent flex overflow */
}

.post-header-row {
  padding: 10px 15px;
  border-bottom: 1px dashed #e6e6e6;
  /* Dashed line separator */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.post-time-and-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-author-name {
  display: none;
  /* Hide author name in header as it's in sidebar */
}

.post-time {
  color: #999;
  background: none;
  border: none;
  padding: 0;
  font-weight: normal;
}

.post-position {
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  padding: 0;
}

/* Post Body */
.post-content-body {
  padding: 20px 15px;
  min-height: 200px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.post-text-content p {
  margin-bottom: 1em;
}

.post-text-content blockquote {
  background: #f9f9f9;
  border: 1px solid #e6e6e6;
  border-left: 3px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  font-size: 13px;
  color: #666;
  font-style: normal;
}

/* Poll Styling - Modern Card Style */
.forum-poll-container {
  margin: 0 0 25px 0;
  border: 1px solid #e2e8f0;
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.poll-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}

.poll-question {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: #1e293b;
  line-height: 1.4;
}

.poll-meta {
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.poll-total-votes {
  font-weight: 600;
  color: #475569;
}

.poll-status-badge {
  background: #f1f5f9;
  color: #475569;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.poll-status-badge.voted {
  background: #dcfce7;
  color: #166534;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Result Mode - Enhanced Progress Bars */
.poll-option.result-mode {
  padding: 0;
  border: none;
  background: none;
}

.poll-result-bar-container {
  position: relative;
  width: 100%;
  min-height: 64px;
  background: #f8fafc;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
}

.poll-result-bar-container:hover {
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.poll-result-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 8px 8px 0;
}

/* Voted option - Teal highlight */
.poll-option.voted .poll-result-bar-container {
  border-color: #5eead4;
  background: #f0fdfa;
}

.poll-option.voted .poll-result-bar {
  background: linear-gradient(90deg, #99f6e4 0%, #5eead4 100%);
}

/* Top voted - Purple/Gold highlight */
.poll-option.top-voted .poll-result-bar-container {
  border-color: #a78bfa;
  background: #faf5ff;
}

.poll-option.top-voted .poll-result-bar {
  background: linear-gradient(90deg, #ddd6fe 0%, #c4b5fd 100%);
}

/* Both voted AND top */
.poll-option.voted.top-voted .poll-result-bar-container {
  border-color: #6366f1;
  background: linear-gradient(135deg, #f0fdfa 0%, #faf5ff 100%);
}

.poll-option.voted.top-voted .poll-result-bar {
  background: linear-gradient(90deg, #5eead4 0%, #a78bfa 100%);
}

.poll-result-content {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  z-index: 2;
  gap: 16px;
}

.poll-result-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.poll-option-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  word-break: break-word;
}

.poll-vote-count {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.poll-result-percentage {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  min-width: 80px;
  text-align: right;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.poll-option.voted .poll-result-percentage {
  color: #0f766e;
  background: rgba(240, 253, 250, 0.95);
  border-color: rgba(94, 234, 212, 0.3);
}

.poll-option.top-voted .poll-result-percentage {
  color: #7c3aed;
  background: rgba(250, 245, 255, 0.95);
  border-color: rgba(167, 139, 250, 0.3);
}

.poll-option.voted.top-voted .poll-result-percentage {
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95) 0%, rgba(250, 245, 255, 0.95) 100%);
  color: #6366f1;
}

.voted-icon {
  color: #0f766e;
  font-size: 18px;
  flex-shrink: 0;
}

.top-badge {
  color: #f59e0b;
  font-size: 16px;
  flex-shrink: 0;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

.poll-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}

.poll-submit-btn {
  padding: 10px 28px;
  background: linear-gradient(135deg, #6c5ce7 0%, #5b4bc4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(108, 92, 231, 0.2);
}

.poll-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(108, 92, 231, 0.3);
}

.poll-submit-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.poll-login-prompt {
  margin-top: 20px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}

/* Poll Voting Section */
.poll-vote-section {
  margin-top: 20px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.poll-vote-prompt {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 15px 0;
}

.poll-vote-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.poll-vote-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.poll-vote-option:hover {
  border-color: #6c5ce7;
  background: #faf9ff;
}

.poll-vote-option.selected {
  border-color: #6c5ce7;
  background: #f0f0ff;
  box-shadow: 0 0 0 1px #6c5ce7;
}

/* Post Actions Footer */
.post-actions-row {
  margin-top: auto;
  /* Push to bottom */
  padding: 10px 15px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  justify-content: flex-end;
  /* Align right like classic forums */
  gap: 10px;
  background: #fcfcfc;
}

.post-reply-btn,
.post-like-btn,
.post-share-btn {
  background: none;
  border: none;
  padding: 5px 10px;
  color: #666;
  font-size: 12px;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: none;
}

.post-reply-btn:hover,
.post-like-btn:hover,
.post-share-btn:hover {
  color: #0066cc;
  background: none;
  transform: none;
  box-shadow: none;
  text-decoration: underline;
}

.post-like-btn.liked {
  color: #ff4d4f;
  background: none;
  border: none;
  box-shadow: none;
}

/* Reply Form */
.reply-form {
  margin-top: 20px;
  background: white;
  border: 1px solid #cdcdcd;
  padding: 15px;
}

/* Remove double border from rich text editor in reply form */
.reply-form .rich-text-editor {
  border: none;
  border-radius: 0;
}

.reply-form .rich-text-editor:focus-within {
  box-shadow: none;
}

.reply-form-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.reply-user-header {
  display: none;
  /* Hide for classic look, just show editor */
}

.reply-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.submit-reply-btn {
  padding: 8px 20px;
  background: #0066cc;
  color: white;
  border: 1px solid #005cbf;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
}

.submit-reply-btn:hover {
  background: #005cbf;
}

.cancel-reply-btn {
  padding: 8px 15px;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #666;
  border-radius: 2px;
  cursor: pointer;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .topic-header-row {
    display: none;
    /* Hide header row on mobile */
  }

  .post-table-row {
    flex-direction: column;
    border-bottom: 10px solid #f0f2f5;
  }

  .post-author-column {
    width: 100%;
    flex-direction: row;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    align-items: center;
    gap: 10px;
  }

  .author-avatar-img {
    width: 40px;
    height: 40px;
    margin: 0;
    border: none;
  }

  .author-name {
    margin: 0;
    font-size: 14px;
  }

  .author-meta {
    display: none;
    /* Hide extra meta on mobile */
  }

  .post-content-column {
    border-left: none;
  }

  .post-content-body {
    padding: 15px;
    min-height: auto;
  }
}
/* Create Post Page Styles */

.create-post-page {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: calc(100vh - 60px);
}

.create-post-container {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.create-post-form {
  padding: 0;
}

.form-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 30px;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  color: #3498db;
}

.form-actions {
  display: flex;
  gap: 15px;
}

.alert {
  margin: 20px 30px 0;
  padding: 15px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.alert-error {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.alert i {
  font-size: 1.1rem;
}

.form-group {
  /* padding: 25px 30px; */
  border-bottom: 1px solid #f1f3f4;
}

.form-group:last-child {
  border-bottom: none;
}

.form-label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 1rem;
}

.required {
  color: #e74c3c;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #2c3e50;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #2c3e50;
  resize: vertical;
  min-height: 300px;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.char-count {
  text-align: right;
  color: #7f8c8d;
  font-size: 0.875rem;
  margin-top: 5px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.formatting-toggle {
  background: none;
  border: 1px solid #e1e8ed;
  color: #495057;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}

.formatting-toggle:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

.formatting-toolbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.format-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #495057;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.format-btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #2c3e50;
}

.format-btn:active {
  background-color: #dee2e6;
  transform: translateY(1px);
}

.format-btn i {
  font-size: 0.875rem;
  width: 14px;
  text-align: center;
}

.format-btn span {
  font-size: 0.8rem;
  font-weight: 500;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  min-height: 20px;
}

.tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.tag-remove:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.tag-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tag-input {
  flex: 1 1;
  padding: 10px 14px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 0.9rem;
}

.help-text {
  color: #7f8c8d;
  font-size: 0.875rem;
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #2c3e50;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #e1e8ed;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: "✓";
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.poll-options {
  margin-top: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.poll-options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
  color: #2c3e50;
}

.poll-option-input {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.poll-option-input .form-input {
  flex: 1 1;
}



.file-input-hidden {
  display: none;
}

/* File Upload Styles */
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.attachments-list {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.attachments-list h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.attachment-item:last-child {
  margin-bottom: 0;
}

.attachment-item.uploaded {
  border-color: #28a745;
  background-color: #f8fff9;
}

.attachment-item.pending {
  border-color: #ffc107;
  background-color: #fffbf0;
}

.attachment-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
}

.attachment-info i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.attachment-info .fa-image {
  color: #28a745;
}

.attachment-info .fa-file-pdf {
  color: #dc3545;
}

.attachment-info .fa-file-text {
  color: #6c757d;
}

.attachment-name {
  font-weight: 500;
  color: #2c3e50;
  flex: 1 1;
}

.attachment-size {
  color: #6c757d;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.upload-status {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
  margin-left: 0.5rem;
}

.attachment-item.uploaded .upload-status {
  background-color: #d4edda;
  color: #155724;
}

.attachment-item.pending .upload-status {
  background-color: #fff3cd;
  color: #856404;
}

.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  min-width: auto;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
  border: none;
}

.btn-danger:hover {
  background-color: #c82333;
}

/* Responsive Design */
@media (max-width: 768px) {
  .create-post-page {
    padding: 15px;
  }

  .create-post-container {
    margin: 0;
    border-radius: 10px;
  }

  .form-header {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn {
    flex: 1 1;
  }

  .form-group {
    padding: 20px;
  }

  .content-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .formatting-toolbar {
    justify-content: center;
  }

  .tag-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .poll-options-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .poll-option-input {
    flex-direction: column;
    align-items: stretch;
  }

  .attachment-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .attachment-info {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.3rem;
  }

  .form-textarea {
    min-height: 250px;
  }

  .formatting-toolbar {
    gap: 3px;
  }

  .formatting-toolbar button {
    min-width: 32px;
    height: 32px;
    padding: 6px 8px;
  }
}

/* Create Topic Page - Classic Forum BBS Style */

/* Match ForumTopicRefactored.css styling patterns */

/* Override BasePageLayout for forum create topic page */
.base-page-layout:has(.create-topic-page) .page-container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.create-topic-page {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: #333;
  font-size: 14px;
  margin-top: 50px;
}

/* Thread Header - Breadcrumb matching topic page */
.thread-header {
  padding: 15px 0;
  margin-bottom: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.thread-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 0 15px;
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: #6c5ce7;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: all 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.breadcrumb-link:hover {
  color: #5847c8;
  text-decoration: none;
  transform: translateX(-2px);
}

/* Breadcrumb separator */
.breadcrumb-separator {
  color: #cbd5e1;
  font-size: 12px;
}

.breadcrumb-current {
  color: #64748b;
  font-weight: 500;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page Header */
.page-header {
  background: white;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-header h1 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 5px 0;
}

.page-header p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* Form Container - Classic forum style */
.create-topic-form {
  background: white;
  border: 1px solid #cdcdcd;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group:last-of-type {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

.required {
  color: #cc0000;
}

/* Form Inputs - Classic style */
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 3px rgba(0, 102, 204, 0.2);
}

.form-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 150px;
  background: white;
  transition: border-color 0.2s;
}

.form-textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 3px rgba(0, 102, 204, 0.2);
}

.char-count {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
  text-align: right;
}

.form-help {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

/* Tags Input - Classic style */
.tags-input-container {
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  padding: 10px;
  background: #f9f9f9;
  transition: border-color 0.2s;
}

.tags-input-container:focus-within {
  border-color: #0066cc;
  background: white;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 20px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e5edf2;
  color: #333;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: normal;
  border: 1px solid #cdcdcd;
}

.tag-remove {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.2s;
}

.tag-remove:hover {
  background: #cdcdcd;
  color: #cc0000;
}

.tag-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tag-input {
  flex: 1 1;
  padding: 6px 8px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  font-size: 13px;
  background: white;
  transition: border-color 0.2s;
}

.tag-input:focus {
  outline: none;
  border-color: #0066cc;
}

.tag-input:disabled {
  background: #f3f3f3;
  color: #999;
  cursor: not-allowed;
}

.tag-add-btn {
  padding: 6px 15px;
  background: #0066cc;
  color: white;
  border: 1px solid #005cbf;
  border-radius: 2px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tag-add-btn:hover:not(:disabled) {
  background: #005cbf;
}

.tag-add-btn:disabled {
  background: #999;
  border-color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

/* Poll Creation Section */
.poll-toggle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 22px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked+.toggle-slider {
  background-color: #0066cc;
}

.toggle-switch input:checked+.toggle-slider:before {
  transform: translateX(22px);
}

.toggle-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.poll-creation-section {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #cdcdcd;
  background: #fcfcfc;
  border-radius: 2px;
}

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.poll-option-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.poll-option-row .form-input {
  flex: 1 1;
  margin-bottom: 0;
}

.btn-icon-danger {
  padding: 6px 10px;
  background: #fff;
  color: #cc0000;
  border: 1px solid #cc0000;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.btn-icon-danger:hover {
  background: #cc0000;
  color: white;
}

.btn-text-primary {
  padding: 6px 12px;
  background: none;
  color: #0066cc;
  border: 1px dashed #0066cc;
  border-radius: 2px;
  font-size: 13px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-text-primary:hover {
  background: #f0f8ff;
  border-style: solid;
}

.btn-text-primary i {
  font-size: 14px;
}

/* Error Message - Classic style */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff0f0;
  color: #cc0000;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid #ffcccc;
  margin-bottom: 15px;
  font-size: 13px;
}

.error-message i {
  font-size: 14px;
}

/* Form Actions - Classic forum buttons */
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #e6e6e6;
  margin-top: 10px;
}

.btn-secondary {
  padding: 6px 15px;
  background: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover:not(:disabled) {
  background: #e9e9e9;
  border-color: #bbb;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  padding: 6px 15px;
  background: #0066cc;
  color: white;
  border: 1px solid #005cbf;
  border-radius: 2px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover:not(:disabled) {
  background: #005cbf;
}

.btn-primary:disabled {
  background: #999;
  border-color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .create-topic-page {
    padding: 5px;
    margin-top: 20px;
  }

  .page-header {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 18px;
  }

  .create-topic-form {
    padding: 15px;
  }

  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .btn-secondary,
  .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .tag-input-row {
    flex-wrap: wrap;
  }

  .tag-add-btn {
    flex: 1 1;
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 16px;
  }

  .thread-breadcrumb {
    font-size: 13px;
  }
}
/* Pre-Release Projects Page - Two Column Layout */

/* Professional Project Card for List View - Based on TasksPage.css */
.pre-release-card-compact {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0;
  margin-left: 0 !important;
}

.pre-release-card-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.pre-release-card-compact:hover::before {
  transform: scaleX(1);
}

.pre-release-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

/* Prevent hover styles when card is selected */
.pre-release-project-card-wrapper.selected .pre-release-card-compact:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Remove individual card selected styles - wrapper handles it */

.pre-release-card-compact.selected::before {
  /* Keep the top gradient bar for selected state */
  transform: scaleX(1);
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.project-owner-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.edit-project-btn-small {
  background: #ffc107;
  color: #212529;
  border: none;
  padding: 0.375rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.edit-project-btn-small:hover {
  background: #e0a800;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.edit-project-btn-small i {
  font-size: 0.875rem;
}

.project-card-content {
  flex: 1 1;
}

.project-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.project-card-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.8rem;
}

.project-card-price {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.9rem;
}

.project-card-category {
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 0.8rem;
}

/* Project Details Panel */
.project-details-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.project-details-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}

.project-details-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
  min-height: 0;
  min-width: 0;
}

.project-details-placeholder {
  padding: 3rem 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.project-details-placeholder h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.project-details-placeholder p {
  color: #6b7280;
  margin: 0;
  font-size: 0.875rem;
}

/* Ensure the details column can contain the modal */
.project-details-panel-container {
  position: relative;
}

/* Project Details View */
.project-details-view {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project-detail-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
}

/* Project Header Styles */
.project-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 40px;
  flex-wrap: wrap;
}

.project-header-row-1 {
  display: contents;
}

.project-header-row-2 {
  display: contents;
}

/* First row with main project info */
.project-meta-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 1rem;
  min-height: 40px;
}

/* Second row with additional metadata */
.project-meta-row-2 {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.project-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  height: 32px;
  flex-shrink: 0;
  order: 1;
}

.type-icon {
  font-size: 1rem;
}

.type-text {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #667eea;
}

.publisher-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  height: 32px;
  flex-shrink: 0;
  order: 3;
}

.publisher-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.publisher-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

.project-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #333;
  line-height: 1.2;
  flex: 1 1;
  text-align: left;
  display: flex;
  align-items: center;
  min-height: 32px;
  order: 2;
}

.project-category {
  display: inline-flex;
  align-items: center;
  background: #667eea;
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  height: 32px;
  flex-shrink: 0;
  order: 4;
}

.project-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.project-image.clickable:hover {
  opacity: 0.9;
}

.project-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #9ca3af;
  gap: 0.5rem;
}

.project-image-placeholder i {
  font-size: 3rem;
  opacity: 0.5;
}

.project-image-placeholder span {
  font-size: 0.875rem;
  font-weight: 500;
}

.project-description h3,
.key-features h3,
.demo-section h3,
.interest-stats-section h3,
.pricing-section h3,
.timeline-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
}

.project-description p {
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.key-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.key-features li {
  padding: 4px 0;
  color: #666;
  position: relative;
  padding-left: 16px;
  line-height: 1.4;
}

.key-features li:before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  background: #667eea;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.demo-link:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.interest-stats {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #f0f4ff;
  border-radius: 8px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #667eea;
}

.stat-label {
  font-size: 0.75rem;
  color: #666;
  font-weight: 500;
}

.price-details {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.price-row.discount {
  color: #28a745;
  font-weight: 600;
}

.label {
  font-size: 0.9rem;
  color: #666;
}

.price,
.discounted-price {
  font-weight: 600;
  color: #333;
}

.discounted-price {
  color: #28a745;
}

.savings-info {
  background: #d4edda;
  color: #155724;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
}

.timeline-info {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

.timeline-estimate {
  margin-bottom: 0.75rem;
}

.timeline-text {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.timeline-tbd {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  margin-bottom: 0.75rem;
}

.project-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 0.9rem;
  color: #666;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.concept {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.status-badge.development {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
}

.status-badge.released {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: white;
}

.status-badge.cancelled {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.project-actions {
  padding-top: 1rem;
  /* border-top: 1px solid #e5e7eb; */
}

.view-full-details-btn {
  display: block;
  text-align: center;
  background: #667eea;
  color: white !important;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-full-details-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}



/* Styled Dropdown Filters */
.tasks-hub-filters .filter-group select {
  -webkit-appearance: none;
          appearance: none;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url('/icons/star.svg');
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  min-width: 140px;
}

.tasks-hub-filters .filter-group select:hover {
  border-color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tasks-hub-filters .filter-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tasks-hub-filters .filter-group select option {
  padding: 0.5rem;
  font-weight: 500;
}

/* Project Details Header Actions - merged with existing definition above */

.project-details-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-details-action-btn {
  background: none;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-size: 0.875rem;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.project-details-action-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}

.project-details-action-btn.close-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.project-details-action-btn:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Enhanced Key Features with Screenshots */
.key-features-enhanced {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.feature-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.feature-content {
  flex: 1 1;
}

.feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-title::before {
  content: "✓";
  color: #10b981;
  font-weight: bold;
  font-size: 1.1rem;
}

.feature-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.feature-screenshot {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.feature-screenshot:hover img {
  transform: scale(1.05);
}

.feature-screenshot-image.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.feature-screenshot-image.clickable:hover {
  opacity: 0.9;
}

.feature-screenshot-placeholder {
  color: #9ca3af;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.feature-screenshot-placeholder i {
  font-size: 1.5rem;
  opacity: 0.5;
}

.feature-screenshot-placeholder span {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Feature Screenshots Gallery */
.feature-screenshots-gallery {
  margin-top: 1rem;
}

.feature-screenshots-gallery h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.screenshot-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}

.screenshot-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.screenshot-item.clickable {
  cursor: pointer;
}

.screenshot-item.clickable:hover {
  opacity: 0.9;
}

.screenshot-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.screenshot-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem 0.75rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.screenshot-placeholder {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #9ca3af;
  gap: 0.5rem;
}

.screenshot-placeholder i {
  font-size: 2rem;
  opacity: 0.5;
}

.screenshot-placeholder span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Concept Details with Visual Elements */
.concept-details-enhanced {
  background: #f8fafc;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.concept-details-enhanced h3 {
  color: #1f2937;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.concept-details-enhanced h3::before {
  content: "💡";
  font-size: 1.2rem;
}

.concept-text-enhanced {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.concept-text-enhanced p {
  margin-bottom: 1rem;
}

.concept-text-enhanced p:last-child {
  margin-bottom: 0;
}


/* Purchase-related styles for released projects */
.purchase-section {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.prior-commitment {
  margin-bottom: 1rem;
}

.commitment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #d4edda;
  color: #155724;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.early-bird-note {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}

.purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.purchase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #28a745;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.purchase-btn:hover {
  background: #218838;
  transform: translateY(-1px);
}

.visit-project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.visit-project-btn:hover {
  background: #5a6268;
  color: white;
  text-decoration: none;
}

/* Interest Modal Purchase Content */
.purchase-content {
  padding: 1rem 0;
}

.project-released-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #d4edda;
  color: #155724;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.project-released-notice i {
  font-size: 1.25rem;
}

.prior-commitment-notice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff3cd;
  color: #856404;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.prior-commitment-notice i {
  font-size: 1.25rem;
  color: #e83e8c;
  align-self: flex-start;
}

.purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.purchase-actions .purchase-btn,
.purchase-actions .visit-project-btn {
  width: 100%;
}

.pricing-info {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.pricing-info h4 {
  margin: 0 0 0.75rem 0;
  color: #495057;
}

.price-display {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.original-price {
  font-size: 1.125rem;
  font-weight: 600;
  color: #495057;
}

.early-bird-price {
  font-size: 1rem;
  color: #28a745;
  font-weight: 500;
}

.savings-text {
  font-size: 0.875rem;
  color: #6c757d;
  font-style: italic;
}

/* Release indicator for project cards */
.release-indicator {
  margin: 0.5rem 0;
}

.release-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #28a745;
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.release-badge i {
  font-size: 0.875rem;
}

/* Quick Filter Buttons */
.quick-filters {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.quick-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 2px solid #e2e8f0;
  background: white;
  color: #64748b;
  border-radius: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  min-height: 48px;
  min-width: 160px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-filter-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.quick-filter-btn.active {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.quick-filter-btn.active:hover {
  border-color: #2563eb;
  background: #2563eb;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.quick-filter-btn i {
  font-size: 1.125rem;
}

/* Available Now button special styling */
.quick-filter-btn.available-now {
  border-color: #10b981;
  color: #10b981;
}

.quick-filter-btn.available-now:hover {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}

.quick-filter-btn.available-now.active {
  border-color: #10b981;
  background: #10b981;
  color: white;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.quick-filter-btn.available-now.active:hover {
  border-color: #059669;
  background: #059669;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}

/* Update tasks-hub-filters layout */
.tasks-hub-filters {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* margin-bottom: 2rem; */
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

/* Quick Filter Buttons - Top Row */
.quick-filters {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Filter Dropdowns - Bottom Row */
.filter-dropdowns {
  display: flex;
  gap: 1.5rem;
  /* justify-content: center; */
  align-items: end;
}

/* Reset Button */
.reset-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  color: #64748b;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
  /* Push to the right */
  height: -webkit-fit-content;
  height: fit-content;
  align-self: end;
  /* Align with filter selects */
}

.reset-filters-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f8fafc;
}

.reset-filters-btn:active {
  transform: translateY(1px);
  background: #e2e8f0;
}

.reset-filters-btn i {
  font-size: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
}

.filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  color: #475569;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.filter-select:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.filter-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Update form-select to match filter-select */
.form-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  color: #475569;
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 140px;
  transition: all 0.2s ease;
}

.form-select:hover {
  border-color: #cbd5e1;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile responsive for filters */
@media (max-width: 768px) {
  .tasks-hub-filters {
    padding: 1rem;
    gap: 1rem;
  }

  .quick-filters {
    flex-direction: column;
    gap: 0.75rem;
  }

  .quick-filter-btn {
    min-width: auto;
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    min-height: 44px;
  }

  .quick-filter-btn i {
    font-size: 1rem;
  }

  .filter-dropdowns {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .reset-filters-btn {
    margin-left: 0;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .filter-group {
    min-width: auto;
    width: 100%;
  }

  .filter-select {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .filter-dropdowns {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .filter-group {
    flex: 1 1;
    min-width: 120px;
  }
}

/* Responsive Design - Project Details */
@media (max-width: 1024px) {
  .project-details-panel {
    overflow: visible;
  }

  .project-details-content {
    overflow: visible;
    max-height: none;
  }

  .feature-item {
    flex-direction: column;
    gap: 0.75rem;
  }

  .feature-screenshot {
    width: 100%;
    height: 120px;
  }

  .feature-screenshots-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .project-meta-row-1 {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
  }

  .project-meta-row-2 {
    justify-content: center;
    gap: 1rem;
  }

  .project-title {
    text-align: center;
    font-size: 1.25rem;
    order: 2;
  }

  .project-type {
    order: 1;
  }

  .publisher-info {
    order: 3;
  }

  .project-price,
  .project-status-info {
    font-size: 0.85rem;
  }
}

.interest-stats {
  flex-direction: column;
  gap: 0.75rem;
}

.stat {
  flex-direction: row;
  justify-content: space-between;
}

.project-card-meta {
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.tasks-hub-filters {
  flex-direction: column;
  gap: 0.5rem;
}

.tasks-hub-filters .filter-group select {
  min-width: 100%;
}

.feature-screenshots-gallery {
  grid-template-columns: 1fr;
}

.screenshot-item img {
  height: 120px;
}


/* Professional Animations and Enhancements */

/* Enhanced hover effects for project elements */
.project-card-header .project-type:hover {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.project-card-header .publisher-info:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.project-card-price:hover {
  color: #d97706;
  transform: scale(1.05);
}

/* Professional loading states */
.pre-release-card-compact.loading {
  opacity: 0.7;
  pointer-events: none;
}

.pre-release-card-compact.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced focus states for accessibility */
.pre-release-card-compact:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

/* Professional empty state enhancements */
.pre-release-empty-state {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  margin: 2rem 0;
}

.pre-release-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
  animation: floatUp 3s ease-in-out infinite;
}

.pre-release-empty-state h4 {
  color: #334155;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.25rem;
}

.pre-release-empty-state p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
}

@keyframes floatUp {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Professional card grid spacing */
.pre-release-projects-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Enhanced responsive behavior */
@media (max-width: 768px) {
  .pre-release-card-compact {
    padding: 1rem;
    border-radius: 12px;
  }

  .project-card-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .project-type,
  .publisher-info {
    padding: 0.375rem 0.625rem;
  }

  .type-text,
  .publisher-name {
    font-size: 0.7rem;
  }

  .project-card-title {
    font-size: 1rem;
  }

  .project-card-description {
    font-size: 0.85rem;
  }
}

/* Professional micro-interactions */
.project-card-meta>* {
  transition: all 0.2s ease;
}

.project-card-category:hover {
  color: #374151;
  font-weight: 600;
}

/* Enhanced visual hierarchy - removed left edge styling */
/* Project
 price info in header */
.project-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-label {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.price-value {
  font-size: 0.9rem;
  color: #059669;
  font-weight: 600;
}

/* Project status info in header */
.project-status-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Project Status Indicators */
.project-card-status-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.project-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.project-status-indicator.released {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.project-status-indicator.development {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.project-status-indicator i {
  font-size: 0.875rem;
}

/* Mobile responsiveness for status indicators */
@media (max-width: 768px) {
  .project-card-status-area {
    align-items: flex-start;
  }

  .project-status-indicator {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
}

/* Search input styling */
.search-container {
  position: relative;
  flex: 1 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  color: #475569;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-input:hover {
  border-color: #cbd5e1;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
}

/* Page header styles */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Publish button styling */
.publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f59e0b;
  color: white;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.publish-btn:hover {
  background: #d97706;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

.publish-btn i {
  font-size: 1rem;
}

/*================================================================* SLIDE-OUT DETAIL PANEL STYLES (matching Teams/Join page) *================================================================*/
/* Overlay that covers everything when detail panel is open */
.project-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  cursor: pointer;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Keep list column at normal width */

/* Dim the header when detail panel is open */
.tasks-hub-container.detail-panel-open .tasks-hub-header {
  filter: brightness(0.85);
  pointer-events: none;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Dim the list when detail panel is open */
.tasks-hub-main-two-column.detail-panel-open .tasks-hub-task-list-column {
  filter: brightness(0.85);
  pointer-events: none;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Project Detail Panel - slides from right */
.project-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 55vw;
  min-width: 650px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-detail-panel.panel-open {
  transform: translateX(0);
}

.project-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin-top: 50px;
}

.project-detail-header {
  flex-shrink: 0;
  padding: 1.5rem 2rem;
  border-bottom: 2px solid #e2e8f0;
  background: #f9fafb;
}

.project-detail-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.project-detail-title-area {
  flex: 1 1;
}

.project-detail-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.project-detail-header-actions {
  display: flex;
  gap: 0.5rem;
}

.project-detail-action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.project-detail-action-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.project-detail-action-btn.new-tab:hover {
  background: #dbeafe;
  color: #3b82f6;
}

.project-detail-action-btn.close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.project-detail-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
  min-height: 0;
}

/* Ensure scrolling works properly */
.project-detail-body::-webkit-scrollbar {
  width: 8px;
}

.project-detail-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.project-detail-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.project-detail-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Responsive */
@media (max-width: 1200px) {
  .project-detail-panel {
    width: 60vw;
    min-width: 500px;
  }
}

@media (max-width: 900px) {
  .project-detail-panel {
    width: 100vw;
    min-width: 0;
    min-width: initial;
  }
}

/* Loading Ring with GPU Acceleration */
.loading-ring {
  width: 64px;
  height: 64px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: pre-release-loading-spin 1s linear infinite;
  margin-bottom: 1rem;
  /* Performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes pre-release-loading-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  width: 100%;
}
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Interest Modal */
.interest-modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}



/* Modal Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e1e5e9;
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #e9ecef;
  color: #333;
}

/* Form Styles */
.interest-form {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Interest Level Selector */
.interest-level-selector {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e1e5e9;
}

.interest-slider {
  width: 100%;
  margin-bottom: 8px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  outline: none;
}

.interest-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
}

.interest-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.interest-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 8px;
}

.interest-description {
  text-align: center;
  font-weight: 600;
  color: #667eea;
  font-size: 0.9rem;
}

/* Checkbox Labels */
.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  cursor: pointer;
  margin-bottom: 8px;
}

.checkbox-label input[type="checkbox"] {
  width: auto !important;
  margin: 0;
}

/* Commitment specific styles */
.commitment-note,
.early-bird-note {
  display: block;
  font-size: 0.8rem;
  color: #666;
  font-weight: 400;
  margin-top: 4px;
  margin-left: 24px;
  line-height: 1.3;
}

.early-bird-note {
  color: #28a745;
  font-weight: 500;
}

/* Price Input */
.price-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.currency-symbol {
  background: #f8f9fa;
  padding: 10px 12px;
  border-right: 1px solid #ddd;
  font-weight: 600;
  color: #666;
}

.price-input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1 1;
}

.price-context {
  margin-top: 8px;
  padding: 8px;
  background: #f0f4ff;
  border-radius: 4px;
  font-size: 0.85rem;
}

.proposed-price {
  color: #666;
  margin-bottom: 4px;
}

.early-bird-price {
  color: #28a745;
  font-weight: 600;
}

.savings {
  font-weight: 500;
}

/* Notification Options */
.notification-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.email-input-section {
  margin-top: 8px;
  padding: 12px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
}

.email-input-section label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 0.85rem !important;
  color: #666 !important;
}

.email-input-section input {
  width: 100% !important;
  margin-bottom: 8px !important;
}

.use-account-email-btn {
  background: #f0f4ff;
  color: #667eea;
  border: 1px solid #c7d2fe;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.use-account-email-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}



/* Error Message */
.error-message {
  display: contents;
  background: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Disclaimer */
.disclaimer {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
}

.disclaimer p {
  margin: 0;
  font-size: 0.85rem;
  color: #856404;
  line-height: 1.4;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid #e1e5e9;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

.cancel-btn {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #f8f9fa;
  border-color: #bbb;
}

.submit-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background: #5a67d8;
  transform: translateY(-1px);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .interest-modal {
    max-height: 95vh;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .modal-header {
    padding: 16px 20px;
  }
  
  .interest-form {
    padding: 20px;
  }
  
  .modal-actions {
    padding: 16px 20px;
    flex-direction: column;
  }
  
  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}

/* Project Update Confirmation Dialog */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}

.confirm-dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.confirm-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e1e5e9;
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
}

.confirm-dialog .dialog-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-dialog .dialog-header h4 i {
  font-size: 1.2rem;
  color: #f59e0b;
}

.confirm-dialog .dialog-content {
  padding: 24px;
}

.confirm-dialog .dialog-content p {
  margin: 0 0 16px 0;
  color: #374151;
  line-height: 1.6;
  font-size: 0.95rem;
}

.confirm-dialog .dialog-content p:last-child {
  margin-bottom: 0;
}

.details-text {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.5;
}

.details-text.warning-text {
  background: #fee2e2;
  border-color: #dc2626;
  color: #dc2626;
}

.confirm-dialog .dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid #e1e5e9;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

.confirm-dialog .btn-secondary {
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-dialog .btn-secondary:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

.confirm-dialog .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.confirm-dialog .btn-primary {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.confirm-dialog .btn-primary:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
}

.confirm-dialog .btn-warning {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.confirm-dialog .btn-warning:hover:not(:disabled) {
  background: #d97706;
  transform: translateY(-1px);
}

.confirm-dialog .btn-danger {
  background: #dc2626;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.confirm-dialog .btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
}

.confirm-dialog .btn-primary:disabled,
.confirm-dialog .btn-warning:disabled,
.confirm-dialog .btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.confirm-dialog .spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive Design for Confirmation Dialog */
@media (max-width: 768px) {
  .confirm-dialog-overlay {
    padding: 16px;
  }
  
  .confirm-dialog {
    max-height: 90vh;
  }
  
  .confirm-dialog .dialog-header {
    padding: 16px 20px;
  }
  
  .confirm-dialog .dialog-content {
    padding: 20px;
  }
  
  .confirm-dialog .dialog-actions {
    padding: 16px 20px;
    flex-direction: column;
  }
  
  .confirm-dialog .btn-secondary,
  .confirm-dialog .btn-primary,
  .confirm-dialog .btn-warning,
  .confirm-dialog .btn-danger {
    width: 100%;
    justify-content: center;
  }
}
.pre-release-setup-status {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}

.setup-status-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
  text-align: center;
}

.setup-icon {
  margin-bottom: 24px;
}

.setup-status-card h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.setup-description {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 32px;
}

.setup-steps {
  text-align: left;
  margin-bottom: 32px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.setup-steps h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.setup-steps ol {
  padding-left: 20px;
}

.setup-steps li {
  margin-bottom: 20px;
  line-height: 1.6;
}

.setup-steps strong {
  color: #333;
  font-weight: 600;
}

.setup-steps p {
  margin: 8px 0;
  color: #666;
}

.code-block {
  background: #2d3748;
  color: #e2e8f0;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9rem;
  margin: 8px 0;
  overflow-x: auto;
}

.code-block code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.setup-features {
  text-align: left;
  margin-bottom: 32px;
  padding: 24px;
  background: #f0f4ff;
  border-radius: 12px;
  border-left: 4px solid #28a745;
}

.setup-features h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.setup-features ul {
  list-style: none;
  padding: 0;
}

.setup-features li {
  padding: 8px 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
}

.retry-setup-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.retry-setup-btn:hover {
  background: #5a67d8;
  transform: translateY(-2px);
}

.retry-setup-btn i {
  font-size: 1.1rem;
}

.setup-note {
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  color: #856404;
}

.setup-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.setup-note strong {
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pre-release-setup-status {
    padding: 10px;
    min-height: 50vh;
  }
  
  .setup-status-card {
    padding: 24px;
  }
  
  .setup-status-card h2 {
    font-size: 1.6rem;
  }
  
  .setup-description {
    font-size: 1rem;
  }
  
  .setup-steps,
  .setup-features {
    padding: 16px;
  }
  
  .code-block {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}
/* Pre-Release Project Card Wrapper Styles - Used in pre-release project pages */

/* Pre-Release Project Card Wrapper - Base styling for pre-release project card containers */
.pre-release-project-card-wrapper {
  transition: all 0.3s ease;
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

.pre-release-project-card-wrapper:hover:not(.selected) {
  /* transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  background: #f8fafc;
  border: 2px solid #93c5fd; */
}

.pre-release-project-card-wrapper.selected {
  /* transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8faff, #ffffff); */
}

/* Special handling for pre-release project cards within pre-release-project-card-wrapper */
.pre-release-project-card-wrapper.selected .pre-release-card-compact {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Enhanced focus states for accessibility */
.pre-release-project-card-wrapper:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Remove any conflicting hover transforms from individual cards */
.pre-release-project-card-wrapper:hover .pre-release-card-compact {
  transform: none !important;
}

.pre-release-project-card-wrapper.selected .pre-release-card-compact {
  transform: none !important;
}

/* Ensure pre-release project cards have consistent styling */
.pre-release-project-card-wrapper .pre-release-card-compact {
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}

.pre-release-project-card-wrapper:hover .pre-release-card-compact {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.pre-release-project-card-wrapper.selected .pre-release-card-compact {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Staggered animation for pre-release project lists */
.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper {
  animation: slideInUp 0.3s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(1) {
  animation-delay: 0.1s;
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(2) {
  animation-delay: 0.2s;
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(3) {
  animation-delay: 0.3s;
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(4) {
  animation-delay: 0.4s;
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(5) {
  animation-delay: 0.5s;
}

.pre-release-projects-hub-project-cards .pre-release-project-card-wrapper:nth-child(n+6) {
  animation-delay: 0.6s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth card selection animation */
.pre-release-project-card-wrapper.selected {
  animation: cardSelected 0.3s ease-out;
}

@keyframes cardSelected {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    background: white;
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
    border: 2px solid #3b82f6;
  }

  100% {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border: 2px solid #3b82f6;
    background: linear-gradient(145deg, #f8faff, #ffffff);
  }
}

/* Pre-Release Projects Hub specific layout styles */
.pre-release-projects-hub-project-details-column {
  position: relative;
}

/* Professional empty state enhancements */
.pre-release-projects-hub-empty-state {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  margin: 2rem 0;
}

.pre-release-projects-hub-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
  animation: floatUp 3s ease-in-out infinite;
}

.pre-release-projects-hub-empty-state h4 {
  color: #334155;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.25rem;
}

.pre-release-projects-hub-empty-state p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
}

@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Professional card grid spacing */
.pre-release-projects-hub-project-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Add vertical scrolling for many projects */
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Custom scrollbar styling */
.pre-release-projects-hub-project-cards::-webkit-scrollbar {
  width: 8px;
}

.pre-release-projects-hub-project-cards::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.pre-release-projects-hub-project-cards::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.pre-release-projects-hub-project-cards::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Enhanced responsive behavior */
@media (max-width: 768px) {
  .pre-release-project-card-wrapper {
    margin-bottom: 0.5rem;
  }
  
  .pre-release-project-card-wrapper:hover:not(.selected) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  /* .pre-release-project-card-wrapper.selected {
    transform: translateY(-1px) scale(1.01);
  } */
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pre-release-project-card-wrapper,
  .pre-release-project-card-wrapper.selected,
  .pre-release-projects-hub-empty-icon,
  .pre-release-projects-hub-project-cards .pre-release-project-card-wrapper {
    animation: none;
    transition: none;
  }
  
  .pre-release-project-card-wrapper:hover:not(.selected) {
    transform: none;
  }
  
  .pre-release-project-card-wrapper.selected {
    transform: none;
  }
}

/* Pre-release project verification icon animations */
.pre-release-project-verification-icon {
  transition: all 0.2s ease;
}

/* Release Notification Modal Styles */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.release-notification-modal {
  max-width: 800px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  /* Enhanced focus management */
}

.release-notification-modal:focus-within {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

.release-notification-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.release-notification-modal .modal-header h2 {
  margin: 0;
  color: #2e7d32;
  font-size: 1.5rem;
  font-weight: 600;
}

.release-notification-modal .close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  /* Accessibility improvements */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.release-notification-modal .close-button:hover:not(:disabled) {
  background: #f0f0f0;
  color: #333;
}

.release-notification-modal .close-button:focus {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

.release-notification-modal .close-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.release-notification-modal .modal-body {
  padding: 24px;
}

/* Loading and Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 40px 20px;
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #2e7d32;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state .error-message {
  color: #d32f2f;
  margin-bottom: 16px;
  font-size: 1rem;
}

.retry-button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  /* Accessibility improvements */
  min-width: 44px;
  min-height: 44px;
}

.retry-button:hover {
  background: #1b5e20;
}

.retry-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2e7d32;
}

/* User Statistics Section */
.user-statistics {
  margin-bottom: 32px;
}

.user-statistics h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e9ecef;
  /* Enhanced design */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

.no-users-message {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.no-users-message p {
  margin: 0 0 8px 0;
  color: #856404;
}

.no-users-message p:last-child {
  margin-bottom: 0;
}

/* Notification Methods Section */
.notification-methods h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
}

.notification-methods > p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 1rem;
}

.method-options {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.method-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  /* Accessibility improvements */
  min-height: 44px;
}

.method-option:hover {
  border-color: #2e7d32;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.1);
  transform: translateY(-1px);
}

.method-option:focus {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

.method-option.selected {
  border-color: #2e7d32;
  background: #f1f8e9;
  box-shadow: 0 2px 12px rgba(46, 125, 50, 0.15);
}

.method-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 4px;
}

.method-details {
  flex: 1 1;
}

.method-details h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.125rem;
  font-weight: 600;
}

.method-details p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

.method-details ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 0.875rem;
}

.method-details li {
  margin-bottom: 4px;
}

.method-details li:last-child {
  margin-bottom: 0;
}

/* Modal Footer */
.release-notification-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.cancel-button {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  /* Accessibility */
  min-width: 44px;
  min-height: 44px;
}

.cancel-button:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

.cancel-button:focus {
  outline: 2px solid #666;
  outline-offset: 2px;
}

.cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.proceed-button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Accessibility */
  min-width: 44px;
  min-height: 44px;
}

.proceed-button:hover:not(:disabled) {
  background: #1b5e20;
  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
}

.proceed-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2e7d32;
}

.proceed-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Enhanced animations for better UX */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.method-option, .stat-item {
  animation: fadeIn 0.3s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .release-notification-modal {
    width: 95vw;
    max-height: 95vh;
  }
  
  .release-notification-modal .modal-header,
  .release-notification-modal .modal-body,
  .release-notification-modal .modal-footer {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }
  
  .stat-item {
    padding: 12px;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .method-option {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .method-icon {
    align-self: center;
  }
  
  .release-notification-modal .modal-footer {
    flex-direction: column;
  }
  
  .cancel-button,
  .proceed-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .release-notification-modal .modal-header h2 {
    font-size: 1.25rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .method-details h4 {
    font-size: 1rem;
  }
  
  .method-details p {
    font-size: 0.9rem;
  }
}
.project-detail-page {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 80px 20px 20px 20px;
  /* Add top padding to avoid fixed navbar overlap */
}

.loading-spinner {
  text-align: center;
  padding: 60px 20px;
  font-size: 1.1rem;
  color: #666;
}

.error-message {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.error-message h2 {
  margin-bottom: 20px;
  color: #dc3545;
}

.project-header {
  margin-bottom: 40px;
}

.project-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  /* border-top: 1px solid #e1e5e9; */
  flex-wrap: wrap;
  gap: 8px;
}

.edit-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.edit-project-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.edit-project-btn i {
  font-size: 1rem;
}

/* Release Project Button */
.release-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #28a745;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-left: 12px;
}

.release-project-btn:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.release-project-btn:active {
  transform: translateY(0);
}

.release-project-btn i {
  font-size: 1rem;
}

/* Analytics Button */
.analytics-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #6f42c1;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-left: 12px;
}

.analytics-btn:hover {
  background: #5a359a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.analytics-btn:active {
  transform: translateY(0);
}

.analytics-btn i {
  font-size: 1rem;
}

/* notify-users-btn Button */
.notify-users-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #28a745;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  /* margin-left: 12px; */
}

.notify-users-btn:hover {
  background: #138496;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.notify-users-btn:active {
  transform: translateY(0);
}

.notify-users-btn i {
  font-size: 1rem;
}

.project-header-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e1e5e9;
  gap: 1rem;
}

.project-header-row-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.project-type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.type-icon {
  font-size: 1.5rem;
}

.type-text {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #667eea;
}

.publisher-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  margin-bottom: 0px;
}

.publisher-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.publisher-name {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

.project-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: #333;
  line-height: 1.2;
  text-align: center;
  flex: 1 1;
}

.project-category {
  display: inline-block;
  background: #667eea;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.project-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-gap: 40px;
  gap: 40px;
}

.main-content {
  min-width: 0;
  margin-top: 0 !important;
}

.project-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.project-image.clickable:hover {
  opacity: 0.9;
}

.project-description,
.concept-details,
.key-features,
.demo-section {
  margin-bottom: 30px;
}

.project-description h2,
.concept-details h2,
.key-features h2,
.demo-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #333;
}

.project-description p,
.concept-text p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
}

.key-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.key-features li {
  padding: 8px 0;
  color: #666;
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}

.key-features li:before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Enhanced Key Features with Screenshots */
.key-features-enhanced {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.feature-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.feature-content {
  flex: 1 1;
}

.feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-title::before {
  content: "✓";
  color: #10b981;
  font-weight: bold;
  font-size: 1.1rem;
}

.feature-screenshot {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.feature-screenshot:hover img {
  transform: scale(1.05);
}

.feature-screenshot.clickable {
  cursor: pointer;
}

.feature-screenshot.clickable:hover {
  opacity: 0.9;
}

/* Feature Screenshots Gallery */
.feature-screenshots-gallery {
  margin-top: 1rem;
}

.feature-screenshots-gallery h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.screenshot-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}

.screenshot-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.screenshot-item.clickable {
  cursor: pointer;
}

.screenshot-item.clickable:hover {
  opacity: 0.9;
}

.screenshot-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.screenshot-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem 0.75rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  background: #667eea;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.demo-link:hover {
  background: #5a67d8;
  transform: translateY(-2px);
}

/* Sidebar Styles */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.interest-card,
.pricing-card,
.timeline-card,
.disclaimer-card {
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.interest-card h3,
.pricing-card h3,
.timeline-card h3 {
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
}

.disclaimer-card h4 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

.disclaimer-card p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

.interest-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 16px;
  background: #f0f4ff;
  border-radius: 8px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}

.user-interest-section {
  text-align: center;
}

.publisher-notice {
  padding: 16px;
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  text-align: center;
}

.publisher-notice p {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: #4338ca;
}

.publisher-notice p:last-child {
  margin-bottom: 0;
  font-size: 0.8rem;
  color: #6366f1;
}

.current-interest {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
}

.interest-level {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}

.willing-to-pay {
  font-size: 0.9rem;
  color: #28a745;
  font-weight: 600;
  margin-bottom: 12px;
}

.update-interest-btn,
.express-interest-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.update-interest-btn:hover,
.express-interest-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.login-prompt {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.login-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.login-link:hover {
  text-decoration: underline;
}

.price-details {
  margin-bottom: 16px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.price-row.discount {
  color: #28a745;
  font-weight: 600;
}

.label {
  font-size: 0.9rem;
  color: #666;
}

.price,
.discounted-price {
  font-weight: 600;
  color: #333;
}

.discounted-price {
  color: #28a745;
}

.savings-info {
  background: #d4edda;
  color: #155724;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: 8px;
}

.community-pricing {
  padding-top: 12px;
  border-top: 1px solid #e1e5e9;
}

.timeline-info {
  text-align: center;
}

.timeline-estimate {
  margin-bottom: 16px;
}

.timeline-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.timeline-tbd {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  margin-bottom: 16px;
}

.project-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 0.9rem;
  color: #666;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.concept {
  background: #fff3cd;
  color: #856404;
}

.status-badge.development {
  background: #cce5ff;
  color: #004085;
}

.status-badge.released {
  background: #d4edda;
  color: #155724;
}

.status-badge.cancelled {
  background: #f8d7da;
  color: #721c24;
}

/* Feedback Section Styles */
.feedback-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e1e5e9;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.feedback-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.add-feedback-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-feedback-btn:hover {
  background: #218838;
  transform: translateY(-1px);
}

.feedback-form-container {
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.feedback-form .form-group {
  margin-bottom: 16px;
}

.feedback-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.feedback-form input,
.feedback-form textarea,
.feedback-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.feedback-form textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.form-actions .cancel-btn,
.form-actions .submit-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-actions .cancel-btn {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
}

.form-actions .cancel-btn:hover {
  background: #f8f9fa;
}

.form-actions .submit-btn {
  background: #28a745;
  color: white;
  border: none;
}

.form-actions .submit-btn:hover:not(:disabled) {
  background: #218838;
}

.form-actions .submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.no-feedback {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-style: italic;
}

.feedback-item {
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.feedback-header-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.feedback-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 1.2rem;
}

.type-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feedback-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}

.feedback-date {
  font-size: 0.8rem;
  color: #999;
}

.feedback-title {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.feedback-description {
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.feedback-description p {
  margin: 0 0 8px 0;
}

.priority-votes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vote-count {
  font-size: 0.8rem;
  color: #28a745;
  font-weight: 600;
}

.login-prompt-feedback {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 20px;
}

.login-prompt-feedback p {
  margin: 0;
  color: #666;
}

.login-prompt-feedback a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.login-prompt-feedback a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .project-header-row-1 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .project-title {
    font-size: 1.75rem;
    order: 2;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }

  .project-type {
    order: 1;
  }

  .publisher-info {
    order: 3;
  }
}

@media (max-width: 768px) {
  .project-detail-page {
    padding: 10px;
  }

  .project-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .project-header-row-1 {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
  }

  .project-title {
    font-size: 1.5rem;
    order: 2;
    width: 100%;
  }

  .project-type {
    order: 1;
  }

  .publisher-info {
    order: 3;
  }

  .interest-stats {
    flex-direction: column;
    gap: 12px;
  }

  .stat {
    flex-direction: row;
    justify-content: space-between;
  }

  .feedback-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .feedback-header-item {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .cancel-btn,
  .form-actions .submit-btn {
    width: 100%;
  }

  .feature-item {
    flex-direction: column;
    gap: 0.75rem;
  }

  .feature-screenshot {
    width: 100%;
    height: 120px;
  }

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

/* Interest stats with commitment tracking */
.interest-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.stat {
  text-align: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e1e5e9;
}

.stat.committed {
  background: #e8f5e8;
  border-color: #28a745;
}

.stat.early-bird {
  background: #fff3cd;
  border-color: #ffc107;
}

.stat-percentage {
  background: #e3f2fd;
  border-color: #2196f3;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* User interest display */
.current-interest {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 16px;
}

.interest-level {
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.willing-to-pay,
.committed-to-buy,
.early-bird-commitment {
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: #28a745;
  font-weight: 500;
}

.committed-to-buy {
  color: #007bff;
  font-weight: 600;
}

.early-bird-commitment {
  color: #ffc107;
  font-weight: 600;
}

.update-interest-btn,
.express-interest-btn {
  width: 100%;
  background: #667eea;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 12px;
}

.update-interest-btn:hover,
.express-interest-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .interest-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat {
    padding: 10px;
  }

  .stat-number {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .interest-stats {
    grid-template-columns: 1fr;
  }
}

/* Success Message */
.success-message {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden;
}

.success-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: #155724;
}

.success-content i {
  font-size: 1.2rem;
  color: #28a745;
  flex-shrink: 0;
}

.success-content span {
  flex: 1 1;
  font-weight: 500;
}

.dismiss-success {
  background: none;
  border: none;
  color: #155724;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.dismiss-success:hover {
  background: rgba(21, 87, 36, 0.1);
}

/* Project Actions Layout */
.project-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  /* border-top: 1px solid #e1e5e9; */
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .project-actions {
    flex-direction: column;
    gap: 12px;
  }

  .release-project-btn,
  .analytics-btn,
  .contact-history-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .edit-project-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ================================================== */
/*             Enhanced Publisher Dashboard            */
/*                Modern UI UX Design                 */
/* ================================================== */

.publisher-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}

/* ================================================== */
/*                Authentication States                */
/* ================================================== */

.auth-required,
.error-message {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 2rem auto;
  max-width: 600px;
}

.auth-required h2,
.error-message h2 {
  margin-bottom: 1rem;
  color: #212529;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-required p,
.error-message p {
  color: #6c757d;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.auth-required a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.auth-required a:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.retry-btn {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  font-size: 1rem;
}

.retry-btn:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}



.loading-ring {
  width: 64px;
  height: 64px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: dashboard-loading-spin 1s linear infinite;
  margin-bottom: 1rem;
  /* Performance optimizations for smooth rotation */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes dashboard-loading-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ================================================== */
/*                 Dashboard Header                    */
/* ================================================== */

.dashboard-header {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
  color: white;
  padding: 4rem 0 0.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
  display: block;
  width: 100%;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.dashboard-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/dots-pattern.svg') repeat;
  pointer-events: none;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.dashboard-hero-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  /* margin: 0 auto; */
}

.dashboard-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.dashboard-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dashboard-icon-large::before {
  content: '🚀';
  font-size: 1.75rem;
  animation: rocketLaunch 3s ease-in-out infinite;
}

@keyframes rocketLaunch {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.05) rotate(5deg);
    opacity: 0.9;
  }
}

.dashboard-icon-large:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.dashboard-info {
  flex: 1 1;
  max-width: 500px;
  text-align: left;
}

.dashboard-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.dashboard-title-main {
  font-size: 1.75rem;
  font-weight: 800;
  color: white !important;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dashboard-description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem 0;
}

.dashboard-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.meta-item i {
  font-size: 0.75rem;
}

.dashboard-actions {
  margin-top: 0.5rem;
}

/* ================================================== */
/*              Dashboard Wide Container              */
/* ================================================== */

.dashboard-wide-container {
  max-width: 1600px;
  padding: 1rem;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0;
}

/* Sidebar-aware layout adjustments */
body.sidebar-expanded .dashboard-wide-container {
  margin-left: 256px;
  max-width: calc(100vw - 296px);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.sidebar-collapsed .dashboard-wide-container {
  margin-left: 56px;
  max-width: calc(100vw - 96px);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Main content area with white background box */
.dashboard-main-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

/* ================================================== */
/*                Dashboard Statistics                 */
/* ================================================== */

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
  border-radius: 16px 16px 0 0;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 10px 25px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.stat-number {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* ================================================== */
/*                 Projects Section                   */
/* ================================================== */

.projects-section {
  margin-bottom: 1.5rem;
}

.projects-section h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #212529;
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 1rem;
}

.projects-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 2px;
}

.no-projects {
  text-align: center;
  padding: 2rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 2px dashed rgba(245, 158, 11, 0.3);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.no-projects::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.02) 100%);
  pointer-events: none;
}

.no-projects-content {
  position: relative;
  z-index: 1;
}

.no-projects-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #212529;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.no-projects-content p {
  color: #6c757d;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.create-first-project-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.create-first-project-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.4);
}

.create-first-project-btn:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
}

/* ================================================== */
/*                  Projects Grid                     */
/* ================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.project-card {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1rem;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  /* Ensure consistent card height */
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.02) 0%, rgba(217, 119, 6, 0.01) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

.project-card:hover::before {
  opacity: 1;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.project-title {
  flex: 1 1;
}

.project-title a {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  text-decoration: none;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #212529 0%, #495057 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  display: block;
}

.project-title a:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateY(-1px);
}

.project-status {
  padding: 0.375rem 0.75rem;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.project-description {
  color: #6c757d;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
}

.project-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.02) 100%);
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.1);
}

.project-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1;
}

.project-stats .stat-number {
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.15rem;
  line-height: 1;
}

.project-stats .stat-label {
  font-size: 0.65rem;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 158, 11, 0.1);
}

.created-date {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 500;
}

.price {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.project-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.primary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.secondary-actions {
  display: flex;
  width: 100%;
}

.view-btn {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.view-btn:hover {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.15);
  text-decoration: none;
  color: #667eea;
}

.edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  flex-shrink: 0;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #e0a800 0%, #e8650e 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
}

.edit-btn i {
  font-size: 0.875rem;
}

.release-btn {
  width: 100%;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.release-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1a9b84 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.release-btn i {
  font-size: 0.875rem;
}

/* ================================================== */
/*              Projects Section Enhancements          */
/* ================================================== */

.projects-section-header {
  margin-bottom: 2rem;
}

.projects-section-header h2 {
  margin-bottom: 1.5rem;
  color: #212529;
  font-size: 1.75rem;
  font-weight: 700;
}

/* Search and Sort Controls */
.projects-controls {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.search-bar {
  position: relative;
  flex: 1 1;
  min-width: 300px;
  max-width: 500px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 0.875rem;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  font-family: inherit;
}

.search-input:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  background: rgba(255, 255, 255, 1);
}

.search-input::placeholder {
  color: #adb5bd;
}

.clear-search {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clear-search:hover {
  background: #f8f9fa;
  color: #495057;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sort-controls label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  white-space: nowrap;
}

.sort-select {
  padding: 0.5rem 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  min-width: 150px;
}

.sort-select:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  background: rgba(255, 255, 255, 1);
}

/* Search Results Info */
.search-results-info {
  padding: 0.5rem 0;
  color: #6c757d;
  font-size: 0.875rem;
  font-style: italic;
}

/* No Results State */
.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 2rem;
}

.no-results-content {
  text-align: center;
  max-width: 400px;
}

.no-results-icon {
  font-size: 3rem;
  color: #adb5bd;
  margin-bottom: 1rem;
}

.no-results h3 {
  color: #495057;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.no-results p {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.clear-search-btn {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  font-size: 0.875rem;
}

.clear-search-btn:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}

/* Responsive adjustments for controls */
@media (max-width: 768px) {
  .projects-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .search-bar {
    min-width: auto;
    max-width: none;
  }

  .sort-controls {
    justify-content: space-between;
  }

  .sort-select {
    min-width: auto;
    flex: 1 1;
  }
}

/* ================================================== */
/*               Responsive Design                    */
/* ================================================== */

@media (max-width: 768px) {
  .dashboard-wide-container {
    padding: 1rem;
  }

  .dashboard-header {
    padding: 1rem 1rem;
  }

  .dashboard-hero-centered {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .dashboard-info {
    text-align: center;
    max-width: 100%;
  }

  .dashboard-meta {
    justify-content: center;
    gap: 0.75rem;
  }

  .meta-item {
    font-size: 0.75rem;
  }

  .dashboard-title-group {
    justify-content: center;
  }

  .dashboard-actions {
    align-items: center;
  }

  .dashboard-actions .create-project-btn {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .dashboard-hero-centered {
    gap: 0.75rem;
  }

  .dashboard-title-main {
    font-size: 1.5rem;
  }

  .dashboard-meta {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .meta-item {
    justify-content: center;
  }

  /* Mobile responsive adjustments for project actions */
  .primary-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .view-btn,
  .edit-btn {
    width: 100%;
    justify-content: center;
  }

  .project-actions {
    gap: 0.5rem;
  }
}

/* Points requirement styles */
.points-requirement {
  font-size: 0.85rem;
  color: #dc3545;
  margin-top: 8px;
  font-weight: 500;
}

/* Insufficient points modal */
.insufficient-points-modal {
  background: white;
  border-radius: 12px;
  padding: 0;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.insufficient-points-modal .modal-header {
  padding: 20px 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e1e5e9;
  margin-bottom: 20px;
}

.insufficient-points-modal .modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
}

.insufficient-points-modal .close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.insufficient-points-modal .close-btn:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.insufficient-points-modal .modal-content {
  padding: 0 2rem 2rem 2rem;
}

.insufficient-points-modal .modal-content p {
  margin: 0 0 1rem 0;
  color: #6c757d;
  line-height: 1.6;
  font-size: 1rem;
}

.insufficient-points-modal .modal-actions {
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.insufficient-points-modal .modal-header,
.insufficient-points-modal .modal-content,
.insufficient-points-modal .modal-actions {
  padding-left: 1rem;
  padding-right: 1rem;
}

.close-modal-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.close-modal-btn:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* ================================================== */
/*               Final Responsive Rules               */
/* ================================================== */

@media (max-width: 480px) {
  .dashboard-hero-centered {
    gap: 0.75rem;
  }

  .dashboard-title-main {
    font-size: 1.5rem;
  }

  .dashboard-meta {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .meta-item {
    justify-content: center;
  }
}

/* ================================================== */
/*                Dashboard Actions                   */
/* ================================================== */

.dashboard-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.dashboard-actions .create-project-btn {
  align-self: flex-start;
}
/* ================================================== */
/*               Project Creation Requirements        */
/*                  Professional Styles              */
/* ================================================== */

.project-creation-requirements {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.project-creation-requirements::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffc107, #fd7e14, #dc3545, #6f42c1, #0d6efd, #198754, #ffc107);
  background-size: 300% 100%;
  animation: rainbow-slide 3s ease-in-out infinite;
}

@keyframes rainbow-slide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.project-creation-requirements .card {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  border-radius: 20px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-creation-requirements .card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.project-creation-requirements .card-header {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border: none;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .card-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/icons/single-circle.svg') repeat;
  pointer-events: none;
}

.project-creation-requirements .card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.project-creation-requirements .card-header i {
  color: white;
  font-size: 1.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.project-creation-requirements .card-body {
  padding: 2rem;
  background: white;
}

.project-creation-requirements .card-text {
  font-size: 1.1rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-weight: 500;
}

/* ================================================== */
/*                 Requirement Items                  */
/* ================================================== */

.project-creation-requirements .requirement-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.05);
}

.project-creation-requirements .requirement-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(253, 126, 20, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 14px;
}

.project-creation-requirements .requirement-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 193, 7, 0.3);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.12),
    0 6px 15px rgba(0, 0, 0, 0.08);
}

.project-creation-requirements .requirement-item:hover::before {
  opacity: 1;
}

.project-creation-requirements .requirement-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 
    0 8px 16px rgba(255, 193, 7, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .requirement-icon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

.project-creation-requirements .requirement-item:hover .requirement-icon::after {
  transform: rotate(45deg) translate(100%, 100%);
}

.project-creation-requirements .requirement-icon.linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
  box-shadow: 
    0 8px 16px rgba(0, 119, 181, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.project-creation-requirements .requirement-icon i {
  color: white;
  font-size: 1.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.project-creation-requirements .requirement-content h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.project-creation-requirements .requirement-content p {
  color: #6c757d;
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
}

.project-creation-requirements .requirement-status i {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(220, 53, 69, 0.3));
}

/* ================================================== */
/*               Points Status Section                */
/* ================================================== */

.project-creation-requirements .points-status {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(233, 236, 239, 0.6);
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .points-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc107, #fd7e14);
  border-radius: 12px 12px 0 0;
}

.project-creation-requirements .progress {
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.project-creation-requirements .progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.3) 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.3) 100%);
  animation: progress-shine 2s ease-in-out infinite;
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.project-creation-requirements .progress-bar {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 2px 8px rgba(255, 193, 7, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.project-creation-requirements .progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  animation: progress-glow 1.5s ease-in-out infinite;
}

@keyframes progress-glow {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.project-creation-requirements .badge {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
  color: white !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  box-shadow: 
    0 4px 8px rgba(255, 193, 7, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ================================================== */
/*              LinkedIn Status Section               */
/* ================================================== */

.project-creation-requirements .linkedin-status {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(233, 236, 239, 0.6);
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .linkedin-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0077b5, #00a0dc);
  border-radius: 12px 12px 0 0;
}

.project-creation-requirements .linkedin-status .alert {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 10px;
  color: #0c63e4;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem !important;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .linkedin-status .alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0077b5, #00a0dc);
}

.project-creation-requirements .linkedin-benefits {
  background: rgba(13, 110, 253, 0.03);
  border-radius: 10px;
  padding: 1.25rem;
  border: 1px solid rgba(13, 110, 253, 0.1);
}

.project-creation-requirements .linkedin-benefits h6 {
  color: #0c63e4;
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.project-creation-requirements .linkedin-benefits li {
  padding: 0.5rem 0;
  font-weight: 500;
  color: #495057;
  transition: all 0.2s ease;
}

.project-creation-requirements .linkedin-benefits li:hover {
  transform: translateX(5px);
  color: #0c63e4;
}

.project-creation-requirements .linkedin-benefits .bi-check-circle {
  color: #198754;
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 2px rgba(25, 135, 84, 0.3));
}

/* ================================================== */
/*                Action Buttons                      */
/* ================================================== */

.project-creation-requirements .requirement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.project-creation-requirements .requirement-actions .btn {
  font-weight: 600;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-creation-requirements .requirement-actions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.project-creation-requirements .requirement-actions .btn:hover::before {
  left: 100%;
}

.project-creation-requirements .requirement-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.project-creation-requirements .requirement-actions .btn:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

/* Primary button (LinkedIn Connect) */
.project-creation-requirements .requirement-actions .btn-primary {
  background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
  border-color: #0077b5;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.project-creation-requirements .requirement-actions .btn-primary:hover {
  background: linear-gradient(135deg, #005885 0%, #0077b5 100%);
  border-color: #005885;
  color: white;
}

/* Warning button (Earn Points) */
.project-creation-requirements .requirement-actions .btn-warning {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border-color: #ffc107;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.project-creation-requirements .requirement-actions .btn-warning:hover {
  background: linear-gradient(135deg, #e0a800 0%, #e8650e 100%);
  border-color: #e0a800;
  color: white;
}

/* Outline buttons */
.project-creation-requirements .requirement-actions .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.9);
  border-color: #6c757d;
  color: #6c757d;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.project-creation-requirements .requirement-actions .btn-outline-secondary:hover {
  background: #6c757d;
  border-color: #6c757d;
  color: white;
}

.project-creation-requirements .requirement-actions .btn-outline-warning {
  background: rgba(255, 255, 255, 0.9);
  border-color: #ffc107;
  color: #ffc107;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.project-creation-requirements .requirement-actions .btn-outline-warning:hover {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border-color: #ffc107;
  color: white;
}

.project-creation-requirements .requirement-actions .btn-outline-info {
  background: rgba(255, 255, 255, 0.9);
  border-color: #0dcaf0;
  color: #0dcaf0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.project-creation-requirements .requirement-actions .btn-outline-info:hover {
  background: #0dcaf0;
  border-color: #0dcaf0;
  color: white;
}

/* Button icons */
.project-creation-requirements .requirement-actions .btn i {
  font-size: 1.1rem;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

.project-creation-requirements .requirement-actions .btn:hover i {
  transform: scale(1.1);
}

/* Loading state for buttons */
.project-creation-requirements .requirement-actions .btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.project-creation-requirements .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* ================================================== */
/*                Footer Section                      */
/* ================================================== */

.project-creation-requirements .requirements-footer {
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(233, 236, 239, 0.4) 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
  border: 1px solid rgba(233, 236, 239, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .requirements-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #198754, #20c997, #0dcaf0, #6f42c1, #e91e63);
  border-radius: 16px 16px 0 0;
}

.project-creation-requirements .requirements-footer small {
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
  color: #6c757d;
}

.project-creation-requirements .requirements-footer .btn-sm {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.project-creation-requirements .requirements-footer .btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
  background: rgba(255, 255, 255, 0.8);
}

.project-creation-requirements .requirements-footer .btn-outline-secondary:hover {
  background: #6c757d;
  border-color: #6c757d;
  color: white;
  transform: translateY(-1px);
}

.project-creation-requirements .requirements-footer .btn-outline-primary {
  border-color: #0d6efd;
  color: #0d6efd;
  background: rgba(255, 255, 255, 0.8);
}

.project-creation-requirements .requirements-footer .btn-outline-primary:hover {
  background: #0d6efd;
  border-color: #0d6efd;
  color: white;
  transform: translateY(-1px);
}

.project-creation-requirements .requirements-footer .btn-outline-info {
  border-color: #0dcaf0;
  color: #0dcaf0;
  background: rgba(255, 255, 255, 0.8);
}

.project-creation-requirements .requirements-footer .btn-outline-info:hover {
  background: #0dcaf0;
  border-color: #0dcaf0;
  color: white;
  transform: translateY(-1px);
}

/* Info badges in footer */
.project-creation-requirements .requirements-footer .d-flex.align-items-center {
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(233, 236, 239, 0.6);
  transition: all 0.3s ease;
}

.project-creation-requirements .requirements-footer .d-flex.align-items-center:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.project-creation-requirements .requirements-footer .d-flex.align-items-center i {
  color: #0d6efd;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

/* ================================================== */
/*              Responsive Design                     */
/* ================================================== */

@media (max-width: 768px) {
  .project-creation-requirements {
    padding: 1rem 0.5rem;
    margin: 0;
    border-radius: 0;
    min-height: auto;
  }
  
  .project-creation-requirements .card {
    border-radius: 16px;
    margin: 0 0.5rem;
  }
  
  .project-creation-requirements .card-header {
    padding: 1.5rem;
  }
  
  .project-creation-requirements .card-title {
    font-size: 1.25rem;
  }
  
  .project-creation-requirements .card-body {
    padding: 1.5rem;
  }
  
  .project-creation-requirements .requirement-item {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .project-creation-requirements .requirement-icon {
    width: 56px;
    height: 56px;
  }
  
  .project-creation-requirements .requirement-icon i {
    font-size: 1.5rem;
  }
  
  .project-creation-requirements .requirement-content h4 {
    font-size: 1.1rem;
  }
  
  .project-creation-requirements .requirement-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .project-creation-requirements .requirement-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1rem;
  }
  
  .project-creation-requirements .requirements-footer {
    padding: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .project-creation-requirements .requirements-footer .row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .project-creation-requirements .requirements-footer .col-auto {
    width: 100%;
  }
  
  .project-creation-requirements .requirements-footer .btn-sm {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .project-creation-requirements .requirements-footer .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .project-creation-requirements .requirements-footer .d-flex.gap-2 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ================================================== */
/*              Animations & Effects                  */
/* ================================================== */

/* Enhanced progress bar animation */
@keyframes progressFill {
  from {
    width: 0%;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.project-creation-requirements .progress-bar {
  animation: progressFill 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading skeleton animation */
.project-creation-requirements .loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 12px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Floating effect for cards */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.project-creation-requirements .card:hover {
  animation: float 3s ease-in-out infinite;
}

/* Pulse effect for requirement icons */
@keyframes pulse {
  0% {
    box-shadow: 0 8px 16px rgba(255, 193, 7, 0.3);
  }
  50% {
    box-shadow: 0 8px 16px rgba(255, 193, 7, 0.5);
  }
  100% {
    box-shadow: 0 8px 16px rgba(255, 193, 7, 0.3);
  }
}

.project-creation-requirements .requirement-icon {
  animation: pulse 2s ease-in-out infinite;
}

.project-creation-requirements .requirement-icon.linkedin {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse-linkedin {
  0% {
    box-shadow: 0 8px 16px rgba(0, 119, 181, 0.3);
  }
  50% {
    box-shadow: 0 8px 16px rgba(0, 119, 181, 0.5);
  }
  100% {
    box-shadow: 0 8px 16px rgba(0, 119, 181, 0.3);
  }
}

.project-creation-requirements .requirement-icon.linkedin {
  animation: pulse-linkedin 2s ease-in-out infinite;
}

/* ================================================== */
/*               Accessibility & Focus               */
/* ================================================== */

/* Enhanced focus states for accessibility */
.project-creation-requirements .btn:focus {
  outline: 3px solid rgba(13, 110, 253, 0.4);
  outline-offset: 2px;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(13, 110, 253, 0.2);
}

.project-creation-requirements .btn-warning:focus {
  outline-color: rgba(255, 193, 7, 0.4);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(255, 193, 7, 0.2);
}

.project-creation-requirements .btn-primary:focus {
  outline-color: rgba(0, 119, 181, 0.4);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(0, 119, 181, 0.2);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .project-creation-requirements .card {
    border: 2px solid #000;
  }
  
  .project-creation-requirements .requirement-item {
    border: 2px solid #666;
  }
  
  .project-creation-requirements .btn {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .project-creation-requirements .card,
  .project-creation-requirements .requirement-item,
  .project-creation-requirements .btn,
  .project-creation-requirements .progress-bar,
  .project-creation-requirements .requirement-icon {
    animation: none;
    transition: none;
  }
  
  .project-creation-requirements .card:hover,
  .project-creation-requirements .requirement-item:hover,
  .project-creation-requirements .btn:hover {
    transform: none;
  }
}

/* ================================================== */
/*                 Error States                       */
/* ================================================== */

.project-creation-requirements .alert-danger {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 12px;
  color: #721c24;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.project-creation-requirements .alert-danger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #dc3545, #b02a37);
}

.project-creation-requirements .alert-danger .btn-outline-danger:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Success states */
.project-creation-requirements .alert-success {
  background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%);
  border: 1px solid rgba(25, 135, 84, 0.3);
  border-radius: 12px;
  color: #0f5132;
}

.project-creation-requirements .alert-success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #198754, #146c43);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .project-creation-requirements {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }
  
  .project-creation-requirements .card {
    background: rgba(33, 37, 41, 0.95);
    color: #f8f9fa;
  }
  
  .project-creation-requirements .card-body {
    background: #212529;
  }
  
  .project-creation-requirements .requirement-item {
    background: linear-gradient(135deg, #2d3338 0%, #343a40 100%);
    border-color: #495057;
  }
  
  .project-creation-requirements .card-text {
    color: #adb5bd;
  }
  
  .project-creation-requirements .requirement-content h4 {
    color: #f8f9fa;
  }
  
  .project-creation-requirements .requirement-content p {
    color: #adb5bd;
  }
}
/* Create Pre-Release Project Page Styles - Following CreateTaskPage Pattern */
.create-prerelease-project-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  background: var(--body-bg);
  transition: all 0.3s ease;
}

/* Form Container - Matching CreateTaskPage structure */
.form-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  display: flex; 
  justify-content: center; 
  min-height: calc(100vh - 4rem);
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Card-based Layout - Following CreateTaskPage pattern */
.create-project-card {
  background: white;
  border-radius: 12px;
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  min-height: calc(100vh - 8rem);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e!important;
    border-radius: 12px;
    -webkit-text-fill-color: black;
    /* padding: 1.5rem;   */
}
.page-header h1 {
  font-weight: 600;
}

.page-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* padding: 2rem; */
  padding-left: 2rem;
}

.page-title {
  font-size: 1.30rem!important;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.page-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  border-radius: 50%;
  cursor: help;
  transition: all 0.2s ease;
}

.page-hint:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: scale(1.1);
}

.page-hint i {
  font-size: 0.75rem;
  color: #22c55e;
}

.page-hint::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  pointer-events: none;
  max-width: 400px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-hint::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(31, 41, 55, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.page-hint:hover::after,
.page-hint:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Mobile-specific tooltip adjustments */
@media (max-width: 768px) {
  .page-hint::after {
    position: fixed;
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  
  .page-hint::before {
    position: fixed;
    bottom: auto;
    top: calc(100% + 2px);
    border-bottom-color: rgba(31, 41, 55, 0.95);
    border-top-color: transparent;
  }
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-fill-color: gray;
}

/* Step Progress Indicator - Following CreateTaskPage Pattern */
.step-progress {
  background: white;
  /* border-bottom: 1px solid #e2e8f0; */
  /* padding: 2rem 2rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
}

.step-item:hover {
  opacity: 0.8;
  background: rgba(59, 130, 246, 0.05);
}

.step-item.active {
  opacity: 1;
}

.step-number {
  width: 2rem;
  height: 2rem;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.step-item.active .step-number {
  background: #3b82f6;
  color: white;
}

.step-item.completed .step-number {
  background: #10b981;
  color: white;
}

.step-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.8125rem;
}

.step-connector {
  width: 2rem;
  height: 2px;
  background: #22c55e;
  margin: 0 0.5rem;
}

/* Form Content Area - Enhanced for proper display */
.form-content {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0; /* Allow proper flex shrinking */
  overflow: hidden; /* Control overflow at this level */
  position: relative;
}

/* Tab Content - Enhanced scrolling and layout */
.tab-content {
  /* padding: 1.5rem 2rem; */
  padding: 0rem !important;
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Custom scrollbar for webkit browsers */
.tab-content::-webkit-scrollbar {
  width: 8px;
}

.tab-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form Sections - Better Spacing */
.form-section {
  margin-bottom: 1.5rem;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #22c55e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-icon {
  font-size: 1.25rem;
  color: #22c55e;
}

/* Improved Form Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

.form-grid-2col {
  grid-template-columns: 1fr 1fr;
}

.form-grid-3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Form Groups - Better Spacing */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-label .required {
  color: #ef4444;
}

.form-label .help-icon {
  color: #6b7280;
  cursor: help;
  font-size: 0.75rem;
}

/* Enhanced Form Controls */
.form-control,
.form-select {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: #ffffff;
  transition: all 0.2s ease;
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  border-color: #22c55e;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: #cbd5e1;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* Form Helpers and Info */
.form-help {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 0.25rem;
}

.text-success {
  color: #10b981 !important;
}

.text-error {
  color: #dc3545 !important;
}

/* Enhanced Form Control States */
.form-control-success,
.form-select-success {
  border-color: #10b981 !important;
}

.form-control-error,
.form-select-error {
  border-color: #dc3545 !important;
}

/* Step Validation Info - Clean, Standard Design */
.step-validation-info {
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.validation-errors {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.validation-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #dc3545;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.validation-error i {
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Step Completion Indicator */
.step-completion-indicator {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #166534;
}

.step-completion-indicator i {
  font-size: 1.25rem;
  color: #10b981;
  flex-shrink: 0;
}

/* Enhanced Alert Messages */
.alert {
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alert-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.alert-header i {
  font-size: 1.125rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.alert-message {
  flex: 1 1;
  line-height: 1.4;
}

.alert-recovery {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.alert-recovery strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.recovery-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recovery-actions li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.9;
}

.recovery-actions li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.btn-retry {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
}

.btn-retry:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-danger .alert-recovery {
  border-top-color: rgba(153, 27, 27, 0.2);
}

.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.alert-warning .alert-recovery {
  border-top-color: rgba(146, 64, 14, 0.2);
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.alert-info .alert-recovery {
  border-top-color: rgba(30, 64, 175, 0.2);
}

.alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.alert-success .alert-recovery {
  border-top-color: rgba(22, 101, 52, 0.2);
}

/* Error type specific styling */
.alert-network {
  border-left: 4px solid #f59e0b;
}

.alert-validation {
  border-left: 4px solid #ef4444;
}

.alert-permission {
  border-left: 4px solid #8b5cf6;
}

.alert-storage {
  border-left: 4px solid #06b6d4;
}

/* Loading Indicator */
.loading-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  color: #64748b;
}

/* Loading Container - Consistent with other pages - DISABLED */
.loading-container {
  display: none; /* Temporarily disabled */
  /* display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 2rem 0; */
}

.loading-container .loading-ring {
  width: 2rem;
  height: 2rem;
  border: 0.25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: project-loading-spin 0.75s linear infinite;
  margin-right: 1rem;
  color: #3b82f6;
}

.loading-container p {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

/* Spinner animation */
@keyframes project-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Enhanced form control loading states */
.form-control:disabled,
.form-select:disabled {
  background-color: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

.form-control:disabled::placeholder {
  color: #cbd5e1;
}

/* Button loading states */
.btn-primary:disabled .bi-hourglass-split,
.btn-secondary:disabled .bi-hourglass-split {
  animation: spin 1s linear infinite;
}

/* File upload loading states */
.screenshot-upload-label:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
}

/* Progress indicator for file uploads */
.upload-progress {
  margin-top: 0.5rem;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  height: 4px;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width 0.3s ease;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Action Buttons - Enhanced with sticky positioning */
.form-actions {
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0; /* Prevent shrinking */
}

.btn-secondary {
  background: white;
  border: 2px solid #e2e8f0;
  color: #64748b;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  border-color: #cbd5e1;
  color: #374151;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled,
.btn-primary.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary.btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Responsive Design - Mobile First Approach */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .form-container {
    padding: 2.5rem;
    max-width: 100%;
    width: 100%;
  }
  
  .create-project-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  
  .tab-content {
    padding: 3rem;
    height: auto;
    min-height: 0;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* Desktop (900px - 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
  .form-container {
    padding: 1.5rem;
    max-width: 100%;
    width: 100%;
  }
  
  .create-project-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  
  .tab-content {
    padding: 2rem;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .step-progress {
    /* padding: 2rem 2rem; */
    gap: 1.5rem;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .page-subtitle {
    font-size: 0.875rem;
  }
}

/* Tablet (768px - 899px) */
@media (min-width: 768px) and (max-width: 899px) {
  .form-container {
    padding: 1.5rem;
    max-width: 100%;
  }
  
  .create-project-card {
    max-width: 100%;
    min-width: auto;
  }
  
  .tab-content {
    padding: 2rem;
    height: auto;
    min-height: 0;
  }
  
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .step-progress {
    /* padding: 2rem; */
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .step-connector {
    display: none;
  }
  
  .form-actions {
    padding: 1.5rem;
    flex-direction: row;
    gap: 1rem;
  }
  
  .page-title {
    font-size: 1.25rem;
  }
  
  .page-subtitle {
    font-size: 0.8125rem;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .create-prerelease-project-page {
    background: #f8fafc;
  }
  
  .form-container {
    padding: 1rem;
    max-width: 100%;
  }
  
  .page-title {
    font-size: 1.25rem;
  }
  
  .page-subtitle {
    font-size: 0.75rem;
        -webkit-text-fill-color: darkslategray;
  }
  
  .create-project-card {
    border-radius: 8px;
    max-width: 100%;
    min-width: auto;
  }
  
  .step-progress {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .step-item {
    justify-content: center;
  }
  
  .step-number {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }
  
  .step-label {
    font-size: 0.75rem;
  }
  
  .step-connector {
    display: none;
  }
  
  .tab-content {
    padding: 1rem;
    height: auto;
    min-height: 0;
  }
  
  .section-title {
    font-size: 1rem;
  }
  
  .form-grid,
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-control,
  .form-select {
    padding: 0.75rem;
    font-size: 1rem; /* Prevent zoom on iOS */
  }
  
  .form-actions {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    justify-content: center;
  }
}

/* Extra Small Mobile (up to 480px) */
@media (max-width: 480px) {
  .form-container {
    padding: 0.5rem;
  }
  
  .create-project-card {
    border-radius: 4px;
  }
  
  .tab-content {
    padding: 0.75rem;
  }
  
  .form-actions {
    padding: 0.75rem;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .step-progress {
    padding: 0.5rem 1rem;
  }
  
  .tab-content {
    height: auto;
    min-height: 0;
  }
}

/* Step 2: Project Details Specific Styles */

/* Key Features List */
.key-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.key-feature-item {
  border: 2px solid #f1f5f9;
  border-radius: 12px;
  padding: 1.5rem;
  background: #fafbfc;
  transition: all 0.2s ease;
}

.key-feature-item:hover {
  border-color: #e2e8f0;
  background: #ffffff;
}

.feature-input-group {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.feature-text-input {
  flex: 1 1;
}

.feature-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.btn-remove-feature {
  background: #fef2f2;
  border: 2px solid #fecaca;
  color: #dc2626;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.btn-remove-feature:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.btn-remove-feature:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Screenshot Upload */
.feature-screenshot-upload {
  margin-top: 0.5rem;
}

.screenshot-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  color: #64748b;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.screenshot-upload-label:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #475569;
}

.screenshot-upload-label i {
  font-size: 1rem;
}

/* Screenshot Preview */
.screenshot-preview {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
}

.screenshot-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.screenshot-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.screenshot-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  word-break: break-all;
}

.screenshot-size {
  color: #6b7280;
  font-size: 0.75rem;
}

.btn-remove-screenshot {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.btn-remove-screenshot:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Add Feature Button */
.btn-add-feature {
  background: #f0f9ff;
  border: 2px dashed #3b82f6;
  color: #1d4ed8;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.btn-add-feature:hover:not(:disabled) {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
}

.btn-add-feature:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.max-features-note {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
}

/* Pricing Input Groups */
.price-input-group,
.discount-input-group {
  display: flex;
  align-items: center;
  position: relative;
}

.price-currency {
  position: absolute;
  left: 1rem;
  color: #6b7280;
  font-weight: 500;
  z-index: 1;
  pointer-events: none;
}

.price-input {
  padding-left: 2rem !important;
}

.discount-input {
  padding-right: 2rem !important;
}

.discount-percent {
  position: absolute;
  right: 1rem;
  color: #6b7280;
  font-weight: 500;
  z-index: 1;
  pointer-events: none;
}

/* Mobile Responsive Adjustments for Step 2 */
@media (max-width: 767px) {
  .key-feature-item {
    padding: 1rem;
  }
  
  .feature-input-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .feature-actions {
    align-self: flex-end;
  }
  
  .screenshot-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .screenshot-thumbnail {
    width: 80px;
    height: 80px;
    align-self: center;
  }
  
  .screenshot-info {
    width: 100%;
    text-align: center;
  }
  
  .btn-remove-screenshot {
    align-self: center;
  }
}

/* Tablet Responsive Adjustments for Step 2 */
@media (min-width: 768px) and (max-width: 899px) {
  .key-features-list {
    gap: 1.25rem;
  }
  
  .key-feature-item {
    padding: 1.25rem;
  }
}

/* Step 3: Media & Links Specific Styles */

/* Section Description */
.section-description {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.section-description p {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* URL Preview Components */
.url-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* Image Preview */
.image-preview-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.image-preview {
  max-width: 200px;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  object-fit: cover;
  transition: all 0.2s ease;
}

.image-preview:hover {
  border-color: #3b82f6;
  transform: scale(1.02);
}

.image-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.875rem;
}

.image-error i {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Link Preview */
.link-preview {
  display: flex;
  align-items: center;
}

.demo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  transition: all 0.2s ease;
  word-break: break-all;
}

.demo-link:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
  text-decoration: none;
}

.demo-link i {
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Form Tips Section */
.form-tips {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
}

.tips-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0c4a6e;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tips-title i {
  font-size: 1.125rem;
  color: #0284c7;
}

.tips-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tips-list li {
  position: relative;
  color: #0c4a6e;
  font-size: 0.875rem;
  line-height: 1.5;
  padding-left: 0.5rem;
}

.tips-list li::before {
  content: '💡';
  position: absolute;
  left: -1.25rem;
  top: 0;
  font-size: 0.875rem;
}

.tips-list li strong {
  color: #075985;
  font-weight: 600;
}

/* Enhanced URL Input Styling */
.form-control[type="url"] {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.025em;
}

.form-control[type="url"]:focus {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* Mobile Responsive Adjustments for Step 3 */
@media (max-width: 767px) {
  .form-tips {
    padding: 1rem;
    margin-top: 1.5rem;
  }
  
  .tips-title {
    font-size: 0.875rem;
  }
  
  .tips-list {
    gap: 0.5rem;
  }
  
  .tips-list li {
    font-size: 0.8125rem;
  }
  
  .image-preview {
    max-width: 150px;
    max-height: 100px;
  }
  
  .url-preview {
    padding: 0.75rem;
  }
  
  .demo-link {
    font-size: 0.8125rem;
    padding: 0.5rem;
    word-break: break-all;
  }
  
  .section-description {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .section-description p {
    font-size: 0.8125rem;
  }
}

/* Tablet Responsive Adjustments for Step 3 */
@media (min-width: 768px) and (max-width: 899px) {
  .form-tips {
    padding: 1.25rem;
  }
  
  .image-preview {
    max-width: 180px;
    max-height: 120px;
  }
}

/* Large Screen Enhancements for Step 3 */
@media (min-width: 1200px) {
  .form-tips {
    padding: 2rem;
  }
  
  .tips-list {
    gap: 1rem;
  }
  
  .image-preview {
    max-width: 250px;
    max-height: 180px;
  }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .image-preview {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark Mode Support (if implemented) */
@media (prefers-color-scheme: dark) {
  .form-tips {
    background: #0f172a;
    border-color: #1e293b;
  }
  
  .tips-title {
    color: #e2e8f0;
  }
  
  .tips-title i {
    color: #60a5fa;
  }
  
  .tips-list li {
    color: #cbd5e1;
  }
  
  .tips-list li strong {
    color: #f1f5f9;
  }
  
  .demo-link {
    background: #1e293b;
    border-color: #334155;
    color: #60a5fa;
  }
  
  .demo-link:hover {
    background: #334155;
    border-color: #475569;
    color: #93c5fd;
  }
  
  .url-preview {
    background: #1e293b;
    border-color: #334155;
  }
  
  .section-description {
    background: #1e293b;
    border-left-color: #60a5fa;
  }
  
  .section-description p {
    color: #94a3b8;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .image-preview:hover {
    transform: none;
  }
  
  .btn-primary:hover:not(:disabled) {
    transform: none;
  }
  
  .step-item {
    transition: none;
  }
}

/* =================================================================
 * ENHANCED STEP-SPECIFIC ANIMATIONS
 * ================================================================= */

/* Step transition animations */
.tab-pane {
  display: none;
  animation: slideInFromRight 0.4s ease-out;
}

.tab-pane.active {
  display: block;
  animation: slideInFromRight 0.4s ease-out;
}

@keyframes slideInFromRight {
  from { 
    opacity: 0; 
    transform: translateX(20px);
  }
  to { 
    opacity: 1; 
    transform: translateX(0);
  }
}

/* Step progress indicator animations */
.step-number {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-item.active .step-number {
  animation: stepActivate 0.5s ease-out;
}

.step-item.completed .step-number {
  animation: stepComplete 0.6s ease-out;
}

@keyframes stepActivate {
  0% { 
    transform: scale(1);
    background: #e2e8f0;
  }
  50% { 
    transform: scale(1.1);
    background: #60a5fa;
  }
  100% { 
    transform: scale(1);
    background: #3b82f6;
  }
}

@keyframes stepComplete {
  0% { 
    transform: scale(1);
    background: #3b82f6;
  }
  30% { 
    transform: scale(1.15);
    background: #059669;
  }
  60% { 
    transform: scale(0.95);
    background: #10b981;
  }
  100% { 
    transform: scale(1);
    background: #10b981;
  }
}

/* Form field focus animations */
.form-control:focus,
.form-select:focus {
  animation: fieldFocus 0.3s ease-out;
}

@keyframes fieldFocus {
  0% { 
    border-color: #e2e8f0;
    box-shadow: none;
  }
  100% { 
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
}

/* Button hover animations */
.btn-primary {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(-1px);
  transition: all 0.1s ease;
}

/* Enhanced key feature animations */
.key-feature-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.key-feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Add feature button animation */
.btn-add-feature {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add-feature:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Screenshot upload animations */
.screenshot-upload-label {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.screenshot-upload-label:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Alert animations */
.alert {
  animation: alertSlideIn 0.4s ease-out;
}

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Validation error animations */
.validation-error {
  animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Success indicator animations */
.step-completion-indicator {
  animation: successSlideIn 0.5s ease-out;
}

@keyframes successSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Loading state animations */
.form-control:disabled,
.form-select:disabled {
  animation: loadingPulse 2s ease-in-out infinite;
}

/* Loading pulse animation - DISABLED */
@keyframes loadingPulse {
  /* 0%, 100% { opacity: 0.7; }
  50% { opacity: 0.4; } */
}

/* =================================================================
 * ENHANCED MOBILE-FIRST RESPONSIVE DESIGN
 * ================================================================= */

/* Base mobile styles (320px+) */
@media (max-width: 479px) {
  .create-prerelease-project-page {
    padding: 0;
  }
  
  .form-container {
    margin: 0;
    padding: 0.25rem;
    min-height: 100vh;
  }
  
  .create-project-card {
    border-radius: 0;
    min-height: 100vh;
    box-shadow: none;
  }
  
  .page-header {
    padding: 1rem;
  }
  
  .page-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .page-subtitle {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  
  .step-progress {
    padding: 0.5rem;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .step-item {
    flex-shrink: 0;
    min-width: 60px;
  }
  
  .step-number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
  }
  
  .step-label {
    font-size: 0.65rem;
    text-align: center;
    white-space: nowrap;
  }
  
  .tab-content {
    padding: 0.75rem;
  }
  
  .section-title {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }
  
  .form-control,
  .form-select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 0.875rem 0.75rem;
  }
  
  .form-actions {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
}

/* Enhanced tablet portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .form-container {
    padding: 1rem;
  }
  
  .create-project-card {
    max-width: 100%;
  }
  
  .step-progress {
    padding: 1.5rem 2rem;
    gap: 1rem;
  }
  
  .tab-content {
    padding: 1.5rem;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  /* Optimize key features for tablet */
  .key-feature-item {
    padding: 1.25rem;
  }
  
  .feature-input-group {
    gap: 0.75rem;
  }
  
  /* Optimize screenshot previews for tablet */
  .screenshot-preview {
    padding: 0.875rem;
  }
  
  .screenshot-thumbnail {
    width: 50px;
    height: 50px;
  }
}

/* Enhanced desktop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .form-container {
    padding: 2rem 1.5rem;
  }
  
  .create-project-card {
    max-width: 1000px;
  }
  
  .tab-content {
    padding: 2rem;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  .form-container {
    padding: 3rem 2rem;
  }
  
  .create-project-card {
    max-width: 1200px;
  }
  
  .tab-content {
    padding: 3rem;
  }
  
  .form-grid-2col {
    gap: 3rem;
  }
  
  .form-grid-3col {
    gap: 2rem;
  }
  
  /* Enhanced spacing for large screens */
  .key-features-list {
    gap: 2rem;
  }
  
  .key-feature-item {
    padding: 2rem;
  }
  
  .form-tips {
    padding: 2rem;
  }
}

/* =================================================================
 * ACCESSIBILITY AND PERFORMANCE ENHANCEMENTS
 * ================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .step-number {
    border: 2px solid currentColor;
  }
  
  .form-control,
  .form-select {
    border-width: 2px;
  }
  
  .btn-primary,
  .btn-secondary {
    border: 2px solid currentColor;
  }
  
  .key-feature-item {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation */
.step-item:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Touch target optimization for mobile */
@media (max-width: 767px) {
  .step-item,
  .btn-primary,
  .btn-secondary,
  .btn-add-feature,
  .btn-remove-feature,
  .screenshot-upload-label {
    min-height: 44px; /* iOS recommended touch target */
    min-width: 44px;
  }
  
  .form-control,
  .form-select {
    min-height: 44px;
  }
}

/* Print styles */
@media print {
  .create-prerelease-project-page {
    background: white;
  }
  
  .step-progress,
  .form-actions {
    display: none;
  }
  
  .create-project-card {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .tab-content {
    padding: 1rem;
  }
}

/* =================================================================
 * PERFORMANCE OPTIMIZATIONS
 * ================================================================= */

/* GPU acceleration for animations */
.step-item,
.btn-primary,
.key-feature-item,
.image-preview {
  will-change: transform;
}

/* Optimize repaints */
.form-control:focus,
.form-select:focus {
  will-change: border-color, box-shadow;
}

/* Contain layout shifts */
.screenshot-preview {
  contain: layout style;
}

.key-features-list {
  contain: layout;
}

/* Optimize scrolling */
.tab-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Validation Styles - Bootstrap Alert Style */
.validation-summary {
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: #842029;
}

.validation-summary-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #842029;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.btn-close-summary {
  background: none;
  border: none;
  color: #842029;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin-left: auto;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out;
  opacity: 0.5;
}

.btn-close-summary:hover {
  background: rgba(132, 32, 41, 0.1);
  opacity: 0.75;
}

.validation-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-summary-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem 0;
  color: #842029;
  font-size: 0.875rem;
  line-height: 1.5;
}

.validation-summary-item .field-name {
  font-weight: 600;
  text-transform: capitalize;
}

.validation-summary-item .error-message {
  color: #58151c;
}





.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.375rem;
  padding: 0;
  line-height: 1.5;
}

.field-error i {
  font-size: 0.875rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Form Control Validation States - Bootstrap-like */
.form-control-error {
  border-color: #dc3545 !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control-success {
  border-color: #198754 !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control-error:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.form-control-success:focus {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

/* Text color utilities for validation feedback */
.text-success {
  color: #198754 !important;
}

.text-error {
  color: #dc3545 !important;
}

/* Loading states */
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}



/* Step completion indicators */
.step-completion-indicator {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #16a34a;
  font-weight: 500;
}

.step-completion-indicator i {
  font-size: 1.25rem;
}



.alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

.alert-warning {
  background: #fffbeb;
  border: 1px solid #fed7aa;
  color: #d97706;
}

.alert i {
  font-size: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Responsive validation styles */
@media (max-width: 768px) {
  .validation-summary {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .validation-summary-header {
    font-size: 0.875rem;
  }
  
  .step-validation-info {
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .validation-error {
    font-size: 0.7rem;
  }
  
  .field-error {
    font-size: 0.8125rem;
  }
}

/* =================================================================
 * ADDITIONAL RESPONSIVE BREAKPOINTS
 * ================================================================= */

/* Ultra-wide screens (1920px+) */
@media (min-width: 1920px) {
  .form-container {
    max-width: 1400px;
    padding: 4rem 3rem;
  }
  
  .create-project-card {
    max-width: 1400px;
  }
  
  .tab-content {
    padding: 4rem;
  }
  
  .form-grid-2col {
    gap: 4rem;
  }
  
  .form-grid-3col {
    gap: 3rem;
  }
}

/* Landscape phone (568px - 667px) */
@media (min-width: 568px) and (max-width: 667px) and (orientation: landscape) {
  .step-progress {
    padding: 0.75rem 1rem;
  }
  
  .tab-content {
    padding: 1rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  
  .form-actions {
    padding: 0.75rem 1rem;
  }
}

/* Small tablet portrait (768px - 834px) */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
  .step-progress {
    padding: 1.5rem;
    gap: 1rem;
  }
  
  .step-connector {
    width: 1.5rem;
  }
  
  .tab-content {
    padding: 1.5rem;
  }
  
  .key-feature-item {
    padding: 1.25rem;
  }
}

/* Large tablet landscape (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .form-container {
    padding: 2rem;
  }
  
  .tab-content {
    padding: 2.5rem;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  
  .form-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* =================================================================
 * ENHANCED MOBILE OPTIMIZATIONS
 * ================================================================= */

/* iPhone SE and similar small screens */
@media (max-width: 375px) {
  .page-header {
    padding: 0.75rem;
  }
  
  .page-title {
    font-size: 0.9375rem;
    line-height: 1.2;
  }
  
  .step-progress {
    padding: 0.5rem 0.25rem;
    justify-content: flex-start;
    overflow-x: auto;
  }
  
  .step-item {
    min-width: 50px;
    padding: 0.25rem;
  }
  
  .step-number {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
  }
  
  .step-label {
    font-size: 0.625rem;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tab-content {
    padding: 0.5rem;
  }
  
  .form-group {
    margin-bottom: 0.75rem;
  }
  
  .key-feature-item {
    padding: 0.75rem;
  }
  
  .feature-input-group {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn-remove-feature {
    align-self: flex-end;
    width: 2rem;
    height: 2rem;
  }
}

/* iPhone 12 13 14 and similar */
@media (min-width: 390px) and (max-width: 428px) {
  .step-progress {
    padding: 0.75rem 0.5rem;
    gap: 0.5rem;
  }
  
  .step-item {
    min-width: 55px;
  }
  
  .step-number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
  }
  
  .step-label {
    font-size: 0.7rem;
    max-width: 55px;
  }
  
  .tab-content {
    padding: 0.75rem;
  }
}

/* =================================================================
 * FORM-SPECIFIC RESPONSIVE ENHANCEMENTS
 * ================================================================= */

/* Key Features responsive behavior */
@media (max-width: 640px) {
  .key-features-list {
    gap: 1rem;
  }
  
  .feature-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .feature-actions {
    align-self: flex-end;
    margin-top: 0.5rem;
  }
  
  .screenshot-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  
  .screenshot-info {
    width: 100%;
  }
}

/* Media & Links responsive behavior */
@media (max-width: 640px) {
  .url-preview {
    padding: 0.75rem;
  }
  
  .image-preview {
    max-width: 120px;
    max-height: 90px;
  }
  
  .demo-link {
    padding: 0.5rem;
    font-size: 0.75rem;
    word-break: break-all;
  }
  
  .form-tips {
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .tips-list li {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

/* Form grid responsive behavior */
@media (max-width: 640px) {
  .form-grid,
  .form-grid-2col,
  .form-grid-3col {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .form-grid-3col {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* =================================================================
 * SIDEBAR COMPATIBILITY ENHANCEMENTS
 * ================================================================= */

/* Ensure compatibility with sidebar states */
body.sidebar-expanded .create-prerelease-project-page,
body.sidebar-collapsed .create-prerelease-project-page,
.sidebar-expanded .create-prerelease-project-page,
.sidebar-collapsed .create-prerelease-project-page {
  margin-left: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}

body.sidebar-expanded .form-container,
body.sidebar-collapsed .form-container,
.sidebar-expanded .form-container,
.sidebar-collapsed .form-container {
  /* margin-left: 0 !important; */
  margin-right: 0 !important;
  transform: none !important;
  width: 100% !important;
  /* max-width: 1200px !important; */
}

body.sidebar-expanded .create-project-card,
body.sidebar-collapsed .create-project-card,
.sidebar-expanded .create-project-card,
.sidebar-collapsed .create-project-card {
  /* margin-left: auto !important; */
  margin-right: auto !important;
  transform: none !important;
}

/* =================================================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================================================= */

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .form-control-error,
  .form-control-success,
  .step-item,
  .btn-close-summary,
  .key-feature-item,
  .btn-primary,
  .btn-add-feature,
  .screenshot-upload-label,
  .image-preview {
    transition: none;
    animation: none;
  }
  
  .tab-pane {
    animation: none;
  }
  
  .step-item.active .step-number,
  .step-item.completed .step-number {
    animation: none;
  }
}

/* =================================================================
 * STEP-SPECIFIC STYLING ENHANCEMENTS
 * ================================================================= */

/* Step 1: Basic Information specific enhancements */
.tab-pane[data-step="basic"] {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.tab-pane[data-step="basic"] .section-title {
  color: #1e40af;
  border-bottom-color: #3b82f6;
}

.tab-pane[data-step="basic"] .form-control:focus,
.tab-pane[data-step="basic"] .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Step 2: Project Details specific enhancements */
.tab-pane[data-step="details"] {
  background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
}

.tab-pane[data-step="details"] .section-title {
  color: #a16207;
  border-bottom-color: #eab308;
}

.tab-pane[data-step="details"] .form-control:focus,
.tab-pane[data-step="details"] .form-select:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.tab-pane[data-step="details"] .btn-add-feature {
  border-color: #eab308;
  color: #a16207;
  background: #fefce8;
}

.tab-pane[data-step="details"] .btn-add-feature:hover:not(:disabled) {
  background: #fef3c7;
  border-color: #d97706;
}

/* Step 3: Media & Links specific enhancements */
.tab-pane[data-step="media"] {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.tab-pane[data-step="media"] .section-title {
  color: #166534;
  border-bottom-color: #22c55e;
}

.tab-pane[data-step="media"] .form-control:focus,
.tab-pane[data-step="media"] .form-select:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.tab-pane[data-step="media"] .demo-link {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.tab-pane[data-step="media"] .demo-link:hover {
  background: #bbf7d0;
  border-color: #86efac;
}

/* =================================================================
 * ENHANCED FORM VALIDATION STYLING
 * ================================================================= */

/* Progressive validation indicators */
.form-group.validating .form-control,
.form-group.validating .form-select {
  border-color: #f59e0b;
  background-image: linear-gradient(45deg, transparent 25%, rgba(245, 158, 11, 0.1) 25%, rgba(245, 158, 11, 0.1) 50%, transparent 50%, transparent 75%, rgba(245, 158, 11, 0.1) 75%);
  background-size: 20px 20px;
  animation: validatingStripes 1s linear infinite;
}

@keyframes validatingStripes {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

/* Enhanced error states */
.form-control-error {
  animation: errorPulse 0.5s ease-in-out;
}

@keyframes errorPulse {
  0%, 100% { 
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  }
  50% { 
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  }
}

/* Enhanced success states */
.form-control-success {
  animation: successGlow 0.5s ease-in-out;
}

@keyframes successGlow {
  0% { 
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }
  50% { 
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  }
  100% { 
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }
}

/* =================================================================
 * ENHANCED BUTTON ANIMATIONS
 * ================================================================= */

/* Primary button enhancements */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover:not(:disabled)::before {
  left: 100%;
}

/* Secondary button enhancements */
.btn-secondary {
  position: relative;
  overflow: hidden;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.btn-secondary:hover:not(:disabled)::after {
  width: 300px;
  height: 300px;
}

/* =================================================================
 * LOADING STATE ENHANCEMENTS
 * ================================================================= */

/* Enhanced loading states */
.form-content.loading {
  position: relative;
}

.form-content.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.8);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-content.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 11;
}

/* File upload progress enhancements */
.upload-progress {
  position: relative;
  overflow: hidden;
}

.upload-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: uploadShimmer 1.5s ease-in-out infinite;
}

@keyframes uploadShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .form-control-error {
    border-color: #000 !important;
    border-width: 3px !important;
  }
  
  .form-control-success {
    border-color: #000 !important;
    border-width: 3px !important;
  }
  
  .validation-error,
  .field-error {
    color: #000 !important;
    font-weight: 700;
  }
  
  .text-success,
  .text-error {
    color: #000 !important;
    font-weight: 700;
  }
  
  .step-number {
    border: 2px solid currentColor;
    font-weight: 900;
  }
  
  .btn-primary,
  .btn-secondary {
    border: 2px solid currentColor;
    font-weight: 700;
  }
}

/* =================================================================
 * PROJECT CREATION ELIGIBILITY STYLES
 * ================================================================= */

/* Eligibility loading state - DISABLED */
.eligibility-loading {
  display: none !important;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.eligibility-loading .spinner-border {
  width: 2rem;
  height: 2rem;
  border-width: 0.25em;
}

.eligibility-loading h5 {
  color: #374151;
  font-weight: 600;
  margin: 0;
}

.eligibility-loading p {
  color: #6b7280;
  margin: 0;
  font-size: 0.875rem;
}

/* Responsive eligibility loading */
@media (max-width: 640px) {
  .eligibility-loading {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .eligibility-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .eligibility-loading h5 {
    font-size: 1rem;
  }
  
  .eligibility-loading p {
    font-size: 0.8125rem;
  }
}
/* Pricing Calculator Display Styles */
.pricing-calculator-display {
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pricing-calculator-section {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.pricing-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
}

.pricing-preview-header i {
  color: #28a745;
}

/* Single Price Display */
.single-price {
  text-align: center;
}

.single-price .price-label {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.single-price .price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #28a745;
}

/* Comparison Pricing Display */
.comparison-pricing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
}

.original-price,
.discounted-price {
  text-align: center;
}

.price-label {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.price-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.price-value.original {
  color: #6c757d;
  text-decoration: line-through;
  position: relative;
}

.price-value.discounted {
  color: #28a745;
}

.discount-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: #007bff;
}

.discount-arrow i {
  font-size: 1.2rem;
}

.discount-percent {
  font-size: 0.75rem;
  font-weight: 600;
  background: #007bff;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  white-space: nowrap;
}

.savings-highlight {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.2);
  border-radius: 6px;
  color: #155724;
  font-weight: 600;
  font-size: 0.9rem;
}

.savings-highlight i {
  color: #28a745;
}

/* Responsive Design */
@media (max-width: 768px) {
  .comparison-pricing {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: center;
  }
  
  .discount-arrow {
    transform: rotate(90deg);
  }
  
  .discount-arrow i {
    transform: rotate(-90deg);
  }
  
  .savings-highlight {
    grid-column: 1;
  }
}

/* Animation for when pricing updates */
.pricing-calculator-display {
  transition: all 0.3s ease;
}

.pricing-calculator-display.updating {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Error state */
.pricing-calculator-display.error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border-color: #f5c6cb;
}

.pricing-calculator-display.error .pricing-preview-header {
  color: #721c24;
}

.pricing-calculator-display.error .pricing-preview-header i {
  color: #dc3545;
}

/* Warning state */
.pricing-calculator-display.warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border-color: #ffeaa7;
}

.pricing-calculator-display.warning .pricing-preview-header {
  color: #856404;
}

.pricing-calculator-display.warning .pricing-preview-header i {
  color: #ffc107;
}
/* Unsubscribe Page Styles */

.unsubscribe-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.unsubscribe-container {
  max-width: 600px;
  width: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Loading Section */
.loading-section {
  text-align: center;
  padding: 3rem 2rem;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.loading-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.loading-section p {
  color: #6b7280;
  margin: 0;
  font-size: 1rem;
}

/* Result Section */
.result-section {
  padding: 3rem 2rem;
  text-align: center;
}

.result-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.result-icon.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.result-icon.error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.result-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  color: #111827;
}

/* Result Message */
.result-message {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: left;
}

.result-message.success {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
}

.result-message.error {
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.result-message p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.result-message.success p {
  color: #065f46;
}

.result-message.error p {
  color: #991b1b;
}

.error-details {
  margin-top: 0.5rem !important;
  font-size: 0.875rem !important;
  opacity: 0.8;
}

/* Action Sections */
.success-actions,
.error-actions {
  margin-bottom: 2rem;
}

.success-info,
.error-info {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: left;
}

.success-info h3,
.error-info h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1rem 0;
}

.success-info ul,
.error-info ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.success-info li,
.error-info li {
  color: #4b5563;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  border: 1px solid;
  font-size: 0.875rem;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-color: transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  color: white;
}

.btn-secondary {
  background: white;
  color: #374151;
  border-color: #d1d5db;
}

.btn-secondary:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #374151;
}

/* Additional Info Section */
.additional-info {
  border-top: 1px solid #e5e7eb;
  padding-top: 2rem;
  margin-top: 2rem;
  text-align: left;
}

.additional-info h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.info-card {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  text-align: center;
}

.info-card i {
  font-size: 2rem;
  color: #3b82f6;
  margin-bottom: 1rem;
  display: block;
}

.info-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.info-card p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Animations */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .unsubscribe-page {
    padding: 1rem;
  }
  
  .result-section {
    padding: 2rem 1.5rem;
  }
  
  .loading-section {
    padding: 2rem 1.5rem;
  }
  
  .result-section h2 {
    font-size: 1.5rem;
  }
  
  .loading-section h2 {
    font-size: 1.25rem;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .btn {
    justify-content: center;
    width: 100%;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .result-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .loading-spinner {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .unsubscribe-container {
    margin: 0.5rem;
  }
  
  .result-message,
  .success-info,
  .error-info,
  .info-card {
    padding: 1rem;
  }
  
  .additional-info {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.notification-analytics {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 20px 0;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.analytics-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.time-range-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-range-select {
  padding: 8px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.time-range-select:focus {
  outline: none;
  border-color: #3498db;
}

/* Loading and Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h3 {
  color: #e74c3c;
  margin-bottom: 12px;
}

.retry-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 16px;
}

/* Overview Metrics */
.overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.metric-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-card.primary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.metric-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Campaign Breakdown */
.campaign-breakdown {
  margin-bottom: 32px;
}

.campaign-breakdown h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #3498db;
  transition: all 0.2s ease;
}

.breakdown-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.breakdown-icon {
  font-size: 32px;
  margin-right: 16px;
}

.breakdown-content {
  flex: 1 1;
}

.breakdown-value {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
}

.breakdown-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* Performance Comparison */
.performance-comparison {
  margin-bottom: 32px;
}

.performance-comparison h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 20px;
}

.comparison-section {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.comparison-section h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.performance-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performance-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.performance-metric:last-child {
  border-bottom: none;
}

.metric-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.metric-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.comparison-insight {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
}

.insight-icon {
  font-size: 24px;
  margin-right: 12px;
}

.insight-text {
  font-size: 14px;
  color: #8b4513;
  font-weight: 500;
  line-height: 1.4;
}

/* Chart Section */
.chart-section {
  margin-bottom: 32px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  color: #2c3e50;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.chart-controls {
  display: flex;
  gap: 12px;
}

.metric-select {
  padding: 8px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.metric-select:focus {
  outline: none;
  border-color: #3498db;
}

/* Simple Chart Implementation */
.simple-chart {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.chart-bars {
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 200px;
  gap: 8px;
  overflow-x: auto;
  padding: 0 10px;
}

.chart-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.chart-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  text-align: center;
  transform: rotate(-45deg);
  white-space: nowrap;
}

.chart-bar {
  width: 12px;
  margin: 0 1px;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.chart-bar:hover {
  opacity: 0.8;
}

.chart-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

/* Top Performing Campaigns */
.top-campaigns {
  margin-bottom: 32px;
}

.top-campaigns h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campaign-item {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.campaign-item:hover {
  background: #e9ecef;
  border-color: #3498db;
}

.campaign-rank {
  font-size: 20px;
  font-weight: 700;
  color: #f39c12;
  margin-right: 16px;
  min-width: 40px;
}

.campaign-details {
  flex: 1 1;
  margin-right: 20px;
}

.campaign-type {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.campaign-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
}

.campaign-recipients {
  font-size: 12px;
  color: #999;
}

.campaign-metrics {
  display: flex;
  gap: 20px;
}

.campaign-metric {
  text-align: center;
}

.campaign-metric .metric-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.campaign-metric .metric-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .analytics-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .notification-analytics {
    padding: 16px;
    margin: 10px 0;
  }
  
  .overview-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .breakdown-grid {
    grid-template-columns: 1fr;
  }
  
  .breakdown-item {
    padding: 16px;
  }
  
  .campaign-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .campaign-metrics {
    justify-content: space-around;
  }
  
  .chart-bars {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .overview-metrics {
    grid-template-columns: 1fr;
  }
  
  .metric-card {
    padding: 16px;
  }
  
  .metric-value {
    font-size: 28px;
  }
  
  .comparison-insight {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .chart-legend {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
/* Notification Analytics Page Styles */
.notification-analytics-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px 0;
}

.notification-analytics-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding: 24px 0;
  border-bottom: 2px solid #e0e0e0;
}

.page-title-section h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.project-title {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.project-title strong {
  color: #2c3e50;
}

.back-link {
  background: none;
  border: none;
  color: #3498db;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #2980b9;
  text-decoration: underline;
}

.page-actions {
  display: flex;
  gap: 12px;
}

.dashboard-link {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-link:hover {
  background: #2980b9;
}

/* Content Area */
.analytics-content {
  margin-bottom: 32px;
}

/* Page Footer */
.page-footer {
  padding: 24px 0;
  border-top: 1px solid #e0e0e0;
  margin-top: 48px;
}

.footer-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.primary-button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-button:hover {
  background: #1b5e20;
  transform: translateY(-1px);
}

.secondary-button {
  background: white;
  color: #2c3e50;
  border: 2px solid #e0e0e0;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secondary-button:hover {
  border-color: #3498db;
  color: #3498db;
}

/* Loading and Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 80px 20px;
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f0f0;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h2 {
  color: #e74c3c;
  margin-bottom: 16px;
}

.error-state p {
  color: #666;
  margin-bottom: 24px;
  font-size: 16px;
}

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.retry-button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.retry-button:hover {
  background: #c0392b;
}

.back-button {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.back-button:hover {
  background: #7f8c8d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .notification-analytics-page {
    padding: 10px 0;
  }

  .notification-analytics-page .container {
    padding: 0 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .page-title-section h1 {
    font-size: 24px;
  }

  .page-actions {
    justify-content: flex-start;
  }

  .footer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .page-title-section h1 {
    font-size: 20px;
  }

  .project-title {
    font-size: 14px;
  }

  .error-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .retry-button,
  .back-button {
    width: 100%;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-history-tracker {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 20px 0;
}

.tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.tracker-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.export-button {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.export-button:hover {
  background: #219a52;
  transform: translateY(-1px);
}

/* Loading and Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h3 {
  color: #e74c3c;
  margin-bottom: 12px;
}

.retry-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 16px;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 500;
}

/* Contact Breakdown */
.contact-breakdown {
  display: flex;
  justify-content: space-around;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.breakdown-item {
  text-align: center;
}

.breakdown-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.breakdown-value {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

/* Filters Section */
.filters-section {
  margin-bottom: 24px;
}

.search-box {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
}

.filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 10px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #3498db;
}

/* Contact History List */
.contact-history-list {
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-state p {
  margin: 8px 0;
}

/* Table Styles */
.history-table {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 2fr;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
}

.header-cell {
  /* padding: 16px 12px; */
  font-weight: 600;
  color: #2c3e50;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 2fr;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.table-row:hover {
  background: #f8f9fa;
}

.table-cell {
  padding: 16px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

/* User Cell */
.user-cell {
  flex-direction: column;
  align-items: flex-start;
}

.user-info {
  width: 100%;
}

.username {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.email {
  color: #666;
  font-size: 12px;
}

/* Contact Type Cell */
.contact-type-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-type-badge.email_template {
  background: #e3f2fd;
  color: #1976d2;
}

.contact-type-badge.website_message {
  background: #e8f5e8;
  color: #2e7d32;
}

.contact-type-badge.discount_offer {
  background: #fff3e0;
  color: #f57c00;
}

/* Date Cell */
.date-cell {
  flex-direction: column;
  align-items: flex-start;
}

.time {
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

/* Engagement Cell */
.engagement-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engagement-icon {
  font-size: 18px;
}

.engagement-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.converted {
  background: #d4edda;
  color: #155724;
}

.status-badge.clicked {
  background: #cce5ff;
  color: #004085;
}

.status-badge.engaged {
  background: #fff3cd;
  color: #856404;
}

.status-badge.no-engagement {
  background: #f8d7da;
  color: #721c24;
}

/* Message Cell */
.message-preview {
  color: #666;
  line-height: 1.4;
}

/* Results Summary */
.results-summary {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .header-cell,
  .table-cell {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .header-cell {
    background: #e9ecef;
    font-weight: 600;
  }
  
  .table-row {
    margin-bottom: 16px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
  }
  
  .table-row:hover {
    background: white;
  }
}

@media (max-width: 768px) {
  .contact-history-tracker {
    padding: 16px;
    margin: 10px 0;
  }
  
  .tracker-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .contact-breakdown {
    flex-direction: column;
    gap: 12px;
  }
  
  .filters-row {
    flex-direction: column;
  }
  
  .filter-select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .metric-card {
    padding: 16px;
  }
  
  .metric-value {
    font-size: 24px;
  }
}
/* Contact History Page Styles */
.contact-history-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px 0;
}

.contact-history-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding: 24px 0;
  border-bottom: 2px solid #e0e0e0;
}

.page-title-section h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.project-title {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.project-title strong {
  color: #2c3e50;
}

.back-link {
  background: none;
  border: none;
  color: #3498db;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #2980b9;
  text-decoration: underline;
}

.page-actions {
  display: flex;
  gap: 12px;
}

.analytics-link,
.dashboard-link {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.analytics-link {
  background: #27ae60;
}

.analytics-link:hover {
  background: #219a52;
}

.dashboard-link:hover {
  background: #2980b9;
}

/* Content Area */
.history-content {
  margin-bottom: 32px;
}

/* Page Footer */
.page-footer {
  padding: 24px 0;
  border-top: 1px solid #e0e0e0;
  margin-top: 48px;
}

.footer-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.primary-button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-button:hover {
  background: #1b5e20;
  transform: translateY(-1px);
}

.secondary-button {
  background: white;
  color: #2c3e50;
  border: 2px solid #e0e0e0;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secondary-button:hover {
  border-color: #3498db;
  color: #3498db;
}

/* Loading and Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 80px 20px;
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f0f0;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h2 {
  color: #e74c3c;
  margin-bottom: 16px;
}

.error-state p {
  color: #666;
  margin-bottom: 24px;
  font-size: 16px;
}

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.retry-button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.retry-button:hover {
  background: #c0392b;
}

.back-button {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.back-button:hover {
  background: #7f8c8d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-history-page {
    padding: 10px 0;
  }

  .contact-history-page .container {
    padding: 0 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .page-title-section h1 {
    font-size: 24px;
  }

  .page-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .footer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .page-title-section h1 {
    font-size: 20px;
  }

  .project-title {
    font-size: 14px;
  }

  .error-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .retry-button,
  .back-button {
    width: 100%;
  }

  .page-actions {
    flex-direction: column;
  }

  .analytics-link,
  .dashboard-link {
    width: 100%;
    justify-content: center;
  }
}

/* MessageSearch Component Styles */
.message-search {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

.search-input-container {
  position: relative;
  width: 100%;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.search-input-wrapper:focus-within {
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-size: 16px;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #212529;
  color: var(--text-primary, #212529);
  outline: none;
  border-radius: 12px;
}

.search-input::placeholder {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
}

.search-loading {
  position: absolute;
  right: 40px;
  color: #007bff;
  color: var(--primary-color, #007bff);
  font-size: 14px;
}

.search-loading .spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.clear-search-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.clear-search-btn:hover {
  color: #212529;
  color: var(--text-primary, #212529);
  background: #e9ecef;
  background: var(--bg-hover, #e9ecef);
}

/* Search Suggestions */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  background: var(--bg-primary, #ffffff);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #dee2e6);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f1f3f4;
  border-bottom: 1px solid var(--border-light, #f1f3f4);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.selected {
  background: #f8f9fa;
  background: var(--bg-hover, #f8f9fa);
}

.suggestion-icon {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
}

.suggestion-text {
  color: #212529;
  color: var(--text-primary, #212529);
  font-size: 14px;
  flex: 1 1;
}

.suggestion-actions {
  border-top: 1px solid #dee2e6;
  border-top: 1px solid var(--border-color, #dee2e6);
  padding: 8px;
}

.clear-history-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.clear-history-btn:hover {
  background: #f8f9fa;
  background: var(--bg-hover, #f8f9fa);
  color: #212529;
  color: var(--text-primary, #212529);
}

.clear-history-btn i {
  margin-right: 8px;
  font-size: 12px;
}

/* Search Results Info */
.search-results-info {
  margin-top: 8px;
  padding: 8px 12px;
  background: #e7f3ff;
  background: var(--bg-info, #e7f3ff);
  border: 1px solid #b3d9ff;
  border: 1px solid var(--border-info, #b3d9ff);
  border-radius: 8px;
  font-size: 13px;
  color: #0066cc;
  color: var(--text-info, #0066cc);
}

.search-query {
  font-weight: normal;
}

.search-query strong {
  font-weight: 600;
}

/* Responsive Design */
/* Large screens */
@media (min-width: 1200px) {
  .search-input {
    padding: 14px 18px 14px 44px;
    font-size: 15px;
  }

  .search-icon {
    left: 14px;
    font-size: 18px;
  }

  .clear-search-btn {
    right: 14px;
    font-size: 18px;
  }
}

/* Medium screens - tablet */
@media (max-width: 1199px) and (min-width: 769px) {
  .search-input {
    padding: 12px 16px 12px 40px;
    font-size: 14px;
  }

  .search-suggestions {
    max-height: 280px;
  }
}

/* Small screens - mobile */
@media (max-width: 768px) {
  .search-input {
    padding: 12px 16px 12px 40px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  .search-icon {
    left: 12px;
    font-size: 16px;
  }

  .clear-search-btn {
    right: 12px;
    font-size: 16px;
    padding: 6px;
  }

  .suggestion-item {
    padding: 12px 16px;
    font-size: 15px;
  }

  .search-suggestions {
    max-height: 250px;
  }

  .search-results-info {
    font-size: 14px;
    padding: 10px 12px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .message-search {
    margin-bottom: var(--spacing-sm);
  }

  .search-input {
    padding: 10px 14px 10px 36px;
    font-size: 16px;
  }

  .search-icon {
    left: 10px;
    font-size: 14px;
  }

  .clear-search-btn {
    right: 10px;
    font-size: 14px;
    padding: 4px;
  }

  .suggestion-item {
    padding: 10px 14px;
    font-size: 14px;
  }

  .search-suggestions {
    max-height: 200px;
  }

  .search-results-info {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .search-input {
    min-height: 44px;
  }

  .clear-search-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .suggestion-item {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .search-input-wrapper {
    border-width: 2px;
  }

  .search-input-wrapper:focus-within {
    border-width: 3px;
  }

  .suggestion-item:hover,
  .suggestion-item.selected {
    background: #000000;
    background: var(--bg-contrast, #000000);
    color: #ffffff;
    color: var(--text-contrast, #ffffff);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  .search-input-wrapper,
  .suggestion-item,
  .clear-search-btn,
  .clear-history-btn {
    transition: none;
  }

  .search-loading .spin {
    animation: none;
  }
}

/* Focus Indicators */
.search-input:focus {
  outline: 2px solid #007bff;
  outline: 2px solid var(--focus-color, #007bff);
  outline-offset: -2px;
}

.clear-search-btn:focus,
.clear-history-btn:focus {
  outline: 2px solid #007bff;
  outline: 2px solid var(--focus-color, #007bff);
  outline-offset: 2px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* .search-input-wrapper {
    background: var(--bg-secondary-dark, #2d3748);
    border-color: var(--border-color-dark, #4a5568);
  }
  
  .search-input {
    color: var(--text-primary-dark, #f7fafc);
  }
  
  .search-input::placeholder {
    color: var(--text-muted-dark, #a0aec0);
  }
  
  .search-suggestions {
    background: var(--bg-primary-dark, #1a202c);
    border-color: var(--border-color-dark, #4a5568);
  }
  
  .suggestion-item:hover,
  .suggestion-item.selected {
    background: var(--bg-hover-dark, #2d3748);
  }
  
  .search-results-info {
    background: var(--bg-info-dark, #1e3a5f);
    border-color: var(--border-info-dark, #3182ce);
    color: var(--text-info-dark, #90cdf4);
  } */
}
/* MessageAccessibility.css */
/* Requirements: 7.4 - Accessibility compliance with ARIA labels and keyboard navigation */

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Screen reader only content that becomes visible on focus */
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #007bff;
  background: var(--primary-color, #007bff);
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  font-weight: 600;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 6px;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Focus indicators */
.focus-visible,
*:focus-visible {
  outline: 2px solid #007bff !important;
  outline: 2px solid var(--focus-color, #007bff) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Remove default focus outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #007bff;
  outline: 2px solid var(--focus-color, #007bff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .message-item,
  .message-list__header,
  .message-list__bulk-actions,
  .bulk-action-dialog,
  .search-input-wrapper,
  .message-filters {
    border-width: 2px !important;
    border-color: currentColor !important;
  }
  
  .message-type-indicator,
  .message-source,
  .message-status,
  .bulk-action-btn,
  .action-btn {
    border: 2px solid currentColor !important;
    font-weight: 700 !important;
  }
  
  .search-highlight {
    outline: 2px solid currentColor !important;
    outline-offset: 1px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .loading-spinner,
  .loading-more-spinner {
    animation: none !important;
  }
  
  .message-item:hover {
    transform: none !important;
  }
}

/* Keyboard navigation enhancements */
.keyboard-navigation .message-item:focus-within {
  border-color: #007bff;
  border-color: var(--focus-color, #007bff);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.keyboard-navigation .bulk-action-btn:focus,
.keyboard-navigation .action-btn:focus {
  z-index: 1;
  position: relative;
}

/* Ensure minimum touch target sizes */
@media (pointer: coarse) {
  button,
  input[type="checkbox"],
  input[type="radio"],
  select,
  [role="button"],
  [role="checkbox"],
  [role="radio"] {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Exception for text inputs which should be wider */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  textarea {
    min-height: 44px;
  }
}

/* Color contrast enhancements */
.message-item--unread {
  border-left-width: 4px;
  border-left-color: #007bff;
  border-left-color: var(--primary-color, #007bff);
}

.message-item--dismissed {
  opacity: 0.8;
}

.message-item--selected {
  background: #e7f3ff;
  background: var(--primary-light, #e7f3ff);
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
}

/* Status indicators with better contrast */
.unread-indicator {
  color: #007bff;
  color: var(--primary-color, #007bff);
  font-weight: bold;
  font-size: 1rem;
}

.bookmark-indicator {
  color: #ffc107;
  color: var(--warning-color, #ffc107);
  font-size: 1rem;
}

/* Loading state accessibility */
.message-list--loading [aria-hidden="true"] {
  display: none;
}

.loading-spinner[role="status"] {
  position: relative;
}

.loading-spinner[role="status"]::after {
  content: "Loading messages...";
  position: absolute;
  left: -9999px;
  top: 0;
}

/* Error state accessibility */
.alert[role="alert"] {
  border-left: 4px solid currentColor;
  padding-left: 1rem;
}

/* Live region for dynamic updates */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Tooltip accessibility */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

/* Form validation accessibility */
.form-field--error input,
.form-field--error select {
  border-color: #dc3545;
  border-color: var(--danger-color, #dc3545);
  background-color: #f8d7da;
  background-color: var(--danger-light, #f8d7da);
}

.form-field--error .error-message {
  color: #dc3545;
  color: var(--danger-color, #dc3545);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Progress indicator accessibility */
.progress-bar[role="progressbar"] {
  background: #f8f9fa;
  background: var(--background-secondary, #f8f9fa);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  background: #007bff;
  background: var(--primary-color, #007bff);
  height: 100%;
  transition: width 0.3s ease;
}

/* Dialog accessibility */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.dialog[role="dialog"] {
  background: #fff;
  background: var(--background-primary, #fff);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* Ensure dialogs are properly labeled */
.dialog[role="dialog"]:not([aria-labelledby]):not([aria-label]) {
  /* This should not happen - all dialogs should have labels */
  outline: 3px solid red;
}

/* Table accessibility for message lists */
.message-list[role="table"] .message-item[role="row"] {
  display: table-row;
}

.message-list[role="table"] .message-item[role="row"] > * {
  display: table-cell;
  vertical-align: top;
}

/* Landmark roles */
.messages-page-header[role="banner"] {
  /* Header landmark */
}

.messages-content[role="main"] {
  /* Main content landmark */
}

.message-list[role="region"] {
  /* Content region */
}

/* Status announcements */
.status-announcement[aria-live="polite"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Print accessibility */
@media print {
  .skip-link,
  .sr-only,
  .action-btn,
  .bulk-action-btn,
  .search-input-wrapper,
  .message-filters {
    display: none !important;
  }
  
  .message-item {
    border: 1px solid #000 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .message-content {
    color: #000 !important;
  }
}
/* MessageFilters.css */

.message-filters {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease;
}

.message-filters.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Enhanced Horizontal MessageFilters Styling */

.message-filters-horizontal {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  transition: opacity var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.message-filters-horizontal.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Filter Header */
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.active-filter-count {
  background: #007bff;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
  min-width: 18px;
  text-align: center;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear-filters-btn {
  background: none;
  border: 1px solid #dc3545;
  color: #dc3545;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-filters-btn:hover {
  background: #dc3545;
  color: white;
}

.clear-filters-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.expand-toggle {
  background: none;
  border: 1px solid #6c757d;
  color: #6c757d;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 28px;
}

.expand-toggle:hover {
  background: #6c757d;
  color: white;
}

.expand-toggle.expanded {
  background: #6c757d;
  color: white;
}

/* Primary Filters - Horizontal Layout */
.primary-filters {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.filter-group-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 150px;
}

.filter-label-compact {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: help;
}

.filter-label-compact i {
  font-size: 0.875rem;
  color: var(--primary-color);
}

.filter-select-compact {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background: var(--background-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 120px;
}

.filter-select-compact:hover {
  border-color: var(--border-hover);
}

.filter-select-compact:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.filter-select-compact:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bookmark Toggle */
.bookmark-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--background-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
  font-weight: 500;
}

.bookmark-toggle:hover {
  background: var(--background-hover);
  border-color: var(--border-hover);
}

.bookmark-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary-color);
}

.bookmark-toggle i {
  color: var(--warning-color);
  font-size: 0.875rem;
}

.bookmark-toggle .toggle-label {
  color: var(--text-primary);
}

/* More Filters Button */
.more-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--background-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
  font-weight: 500;
  position: relative;
}

.more-filters-btn:hover {
  background: var(--background-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.more-filters-btn.expanded {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-dark);
}

.more-filters-btn.has-active {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.more-filters-btn .active-indicator {
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 12px;
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

.more-filters-btn .chevron {
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}

.more-filters-btn.expanded .chevron {
  transform: rotate(180deg);
}

/* Clear All Button */
.clear-all-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--danger-color);
  border-radius: 8px;
  background: var(--background-primary);
  color: var(--danger-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
  font-weight: 500;
}

.clear-all-btn:hover {
  background: var(--danger-color);
  color: white;
}

.clear-all-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Expanded Filters */
.expanded-filters {
  border-top: 1px solid #f0f2f5;
  padding-top: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Secondary Filters - Expandable */
.secondary-filters {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.secondary-filters-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Filter Groups */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group.date-filter {
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 4px;
}

.filter-select {
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  color: #495057;
  cursor: pointer;
  transition: border-color 0.2s ease;
  min-width: 160px;
}

.filter-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.filter-select:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Checkbox Filter */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #495057;
}

.filter-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.filter-checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.checkbox-label {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/* Date Filter */
.date-mode-toggle {
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.mode-btn {
  flex: 1 1;
  padding: 6px 12px;
  background: white;
  border: none;
  font-size: 14px;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn:first-child {
  border-right: 1px solid #ced4da;
}

.mode-btn:hover {
  background: #f8f9fa;
}

.mode-btn.active {
  background: #007bff;
  color: white;
}

.mode-btn:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-date-inputs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-width: 120px;
}

.date-input-group label {
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
}

.date-input {
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  color: #495057;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.date-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.date-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Filter Statistics */
.filter-stats {
  border-top: 1px solid #f0f2f5;
  padding-top: 12px;
  margin-top: 16px;
}

.stats-summary {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
}

.filtered-indicator {
  font-style: italic;
  color: #007bff;
}

.detailed-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.stat-label {
  color: #6c757d;
  font-weight: 500;
}

.stat-value {
  color: #495057;
  font-weight: 600;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Responsive Design */
/* Large screens */
@media (min-width: 1200px) {
  .message-filters {
    padding: 20px;
  }

  .quick-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    gap: 20px;
  }

  .expanded-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
  }
}

/* Medium screens - tablet */
@media (max-width: 1199px) and (min-width: 769px) {
  .message-filters {
    padding: 16px;
  }

  .quick-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 16px;
    gap: 16px;
  }

  .expanded-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
    gap: 16px;
  }

  .custom-date-inputs {
    gap: 16px;
  }
}

/* Small screens - mobile */
@media (max-width: 768px) {
  .message-filters {
    padding: 12px;
  }

  .filter-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .filter-actions {
    align-self: stretch;
    justify-content: space-between;
  }

  .quick-filters {
    flex-direction: column;
    gap: 12px;
  }

  .filter-select {
    width: 100%;
    min-width: 100%;
  }

  .expanded-filters {
    gap: 16px;
  }

  .custom-date-inputs {
    flex-direction: column;
    gap: 12px;
  }

  .date-input-group {
    min-width: 100%;
  }

  .detailed-stats {
    flex-direction: column;
    gap: 8px;
  }

  .date-mode-toggle {
    margin-bottom: 12px;
  }

  .mode-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .message-filters {
    padding: 8px;
  }

  .filter-title h3 {
    font-size: 14px;
  }

  .clear-filters-btn,
  .expand-toggle {
    font-size: 11px;
    padding: 4px 8px;
  }

  .filter-select,
  .date-input {
    font-size: 14px;
    padding: 8px 10px;
  }

  .mode-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .filter-label {
    font-size: 13px;
  }

  .filter-checkbox {
    font-size: 13px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

  .filter-select,
  .date-input,
  .clear-filters-btn,
  .expand-toggle,
  .mode-btn {
    min-height: 44px;
    padding: 12px 16px;
  }

  .filter-checkbox {
    min-height: 44px;
    padding: 12px 0;
  }

  .filter-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .message-filters {
    padding: 8px;
  }

  .filter-title h3 {
    font-size: 14px;
  }

  .clear-filters-btn,
  .expand-toggle,
  .mode-btn {
    font-size: 11px;
    padding: 3px 6px;
  }

  .filter-select,
  .date-input {
    font-size: 13px;
    padding: 5px 6px;
  }
}

/* Accessibility Enhancements */
.filter-select-compact:focus-visible,
.bookmark-toggle:focus-visible,
.more-filters-btn:focus-visible,
.clear-all-btn:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {

  .filter-select-compact,
  .bookmark-toggle,
  .more-filters-btn,
  .clear-all-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .secondary-filters {
    animation: none;
  }

  .more-filters-btn .chevron {
    transition: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* .message-filters {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }
  
  .filter-title h3 {
    color: #f7fafc;
  }
  
  .filter-label,
  .checkbox-label {
    color: #cbd5e0;
  }
  
  .filter-select,
  .date-input {
    background: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
  }
  
  .filter-select:disabled,
  .date-input:disabled {
    background: #2d3748;
  }
  
  .mode-btn {
    background: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
  }
  
  .mode-btn:hover {
    background: #718096;
  }
  
  .mode-btn.active {
    background: #3182ce;
  }
  
  .stat-value {
    background: #4a5568;
    color: #e2e8f0;
  }
  
  .stats-summary {
    color: #a0aec0;
  }
  
  .stat-label {
    color: #a0aec0;
  } */
}
/* MessageListItem.css - Email-style compact list item */

.message-list-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #f1f3f4;
  border: 1px solid var(--border-light, #f1f3f4);
  border-radius: 12px;
  margin-bottom: 8px;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.message-list-item:hover {
  background-color: #f5f6f7;
  background-color: var(--background-hover, #f5f6f7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: #dee2e6;
  border-color: var(--border-color, #dee2e6);
  transform: translateY(-1px);
}

.message-list-item.active {
  background: linear-gradient(to right, #e7f3ff 0%, #f0f8ff 100%);
  border: 2px solid #007bff;
  border: 2px solid var(--primary-color, #007bff);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
  z-index: 1;
}

.message-list-item.selected {
  background-color: #d1ecf1;
  background-color: var(--info-light, #d1ecf1);
  border-left: 3px solid #17a2b8;
  border-left: 3px solid var(--info-color, #17a2b8);
  padding-left: 13px;
}

.message-list-item.unread {
  font-weight: 600;
  background-color: #fafbfc;
}

.message-list-item.unread:hover {
  background-color: #f0f3f5;
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
}

.message-list-item.unread .message-list-item-subject {
  font-weight: 700;
  color: #1a1a1a;
  color: var(--text-primary, #1a1a1a);
}

/* Checkbox - Modern rounded style */
.message-list-item-checkbox {
  flex-shrink: 0;
  margin-right: 12px;
  position: relative;
  display: flex;
  align-items: center;
}

.message-list-item-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #d0d7de;
  border: 2px solid var(--border-color, #d0d7de);
  border-radius: 6px;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  transition: all 0.2s ease;
  position: relative;
  margin: 0;
}

.message-list-item-checkbox input[type="checkbox"]:hover {
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
  background-color: rgba(0, 123, 255, 0.05);
}

.message-list-item-checkbox input[type="checkbox"]:checked {
  background-color: #007bff;
  background-color: var(--primary-color, #007bff);
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
}

.message-list-item-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.message-list-item-checkbox input[type="checkbox"]:focus {
  outline: 2px solid rgba(0, 123, 255, 0.3);
  outline-offset: 2px;
}

/* Unread indicator */
.message-list-item-unread-indicator {
  flex-shrink: 0;
  margin-right: 10px;
  width: 10px;
  display: flex;
  align-items: center;
}

.unread-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  background: linear-gradient(135deg, var(--primary-color, #007bff) 0%, #0056b3 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
  }
}

/* Bookmark indicator */
.message-list-item-bookmark {
  flex-shrink: 0;
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
  color: #ffc107;
  filter: drop-shadow(0 1px 2px rgba(255, 193, 7, 0.3));
}

/* Main content area - two-line layout */
.message-list-item-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  /* Allow text truncation */
  gap: 6px;
}

/* Sender/Source - HIDDEN on all screens */
.message-list-item-sender {
  display: none;
}

.source-badge {
  display: none;
}

/* First line: Subject/Title with time on the right */
.message-list-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.message-list-item-subject {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #212529;
  color: var(--text-primary, #212529);
  line-height: 1.4;
}

/* Subject content (icon + text) */
.message-list-item-subject-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.type-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.type-icon i {
  font-size: 18px;
  line-height: 1;
}

.message-list-item:hover .type-icon {
  transform: scale(1.1);
}

/* Type-specific icon colors */
.type-icon.type-announcement {
  filter: grayscale(0%) brightness(1.1);
}

.type-icon.type-bonus {
  filter: grayscale(0%) brightness(1.2);
}

.type-icon.type-update {
  filter: grayscale(0%) brightness(1.1);
}

.type-icon.type-alert {
  filter: grayscale(0%) brightness(1.1);
  animation: alertPulse 2s ease-in-out infinite;
}

@keyframes alertPulse {

  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.subject-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Second line: Preview text */
.message-list-item-preview {
  font-size: 13px;
  color: #868e96;
  color: var(--text-muted, #868e96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  font-weight: 400;
  padding-left: 28px;
  /* Align with subject text (icon width + gap) */
}

.message-list-item.unread .message-list-item-preview {
  color: #495057;
  color: var(--text-secondary, #495057);
  font-weight: 500;
}

/* Timestamp - positioned on the same line as subject */
.message-list-item-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #adb5bd;
  color: var(--text-muted, #adb5bd);
  white-space: nowrap;
  font-weight: 500;
  margin-left: auto;
}

.message-list-item.unread .message-list-item-time {
  font-weight: 700;
  color: #007bff;
  color: var(--primary-color, #007bff);
}

.message-list-item.active .message-list-item-time {
  color: #007bff;
  color: var(--primary-color, #007bff);
}

/* Focus styles for accessibility */
.message-list-item:focus {
  outline: 3px solid #007bff;
  outline: 3px solid var(--focus-color, #007bff);
  outline-offset: -3px;
  z-index: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .message-list-item {
    padding: 14px 16px;
  }

  .message-list-item-content {
    gap: 6px;
  }

  .message-list-item-subject {
    font-size: 14px;
    gap: 12px;
  }

  /* Smaller type icons for mobile - compact and clean */
  .type-icon {
    font-size: 16px;
    /* Reduced for mobile */
    width: 24px;
    /* Reduced from 32px */
    height: 24px;
    opacity: 1;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.12) 0%, rgba(0, 123, 255, 0.06) 100%);
    border-radius: 8px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .type-icon i {
    font-size: 14px;
    /* Reduced from 20px */
  }

  .message-list-item.unread .type-icon {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.1) 100%);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    border: 1px solid rgba(0, 123, 255, 0.15);
  }

  /* Hide source badge on mobile to save space */
  .message-list-item-sender {
    display: none;
  }

  .message-list-item-preview {
    font-size: 13px;
  }

  .message-list-item-time {
    font-size: 12px;
  }

  /* Larger checkbox for better touch target */
  .message-list-item-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .message-list-item-checkbox input[type="checkbox"]:checked::after {
    font-size: 13px;
  }

  /* Larger unread dot */
  .unread-dot {
    width: 12px;
    height: 12px;
  }

  /* Larger bookmark icon */
  .message-list-item-bookmark {
    font-size: 20px;
    margin-right: 10px;
  }
}

/* Compact mode for smaller screens */
@media (max-width: 480px) {
  .message-list-item {
    padding: 12px 14px;
  }

  .message-list-item-checkbox {
    margin-right: 10px;
  }

  .message-list-item-content {
    gap: 5px;
  }

  .message-list-item-subject {
    font-size: 14px;
    gap: 10px;
  }

  /* Smaller type icons on small screens - compact */
  .type-icon {
    font-size: 16px;
    /* Reduced for small mobile */
    width: 24px;
    /* Reduced from 36px */
    height: 24px;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.15) 0%, rgba(0, 123, 255, 0.08) 100%);
    border-radius: 8px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .type-icon i {
    font-size: 14px;
    /* Reduced from 22px */
  }

  .message-list-item.unread .type-icon {
    font-size: 16px;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.22) 0%, rgba(0, 123, 255, 0.12) 100%);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.25);
    border: 1px solid rgba(0, 123, 255, 0.3);
  }

  .message-list-item.unread .type-icon i {
    font-size: 14px;
  }

  .message-list-item.active .type-icon {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.28) 0%, rgba(0, 123, 255, 0.18) 100%);
    border: 1px solid rgba(0, 123, 255, 0.4);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
  }

  /* Hide source badge on small mobile screens to save space */
  .message-list-item-sender {
    display: none;
  }

  .message-list-item-time {
    margin-left: 10px;
    font-size: 11px;
  }

  .message-list-item-preview {
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }

  /* Extra large checkbox for small screens */
  .message-list-item-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .message-list-item-checkbox input[type="checkbox"]:checked::after {
    font-size: 13px;
  }

  /* Extra large unread dot */
  .unread-dot {
    width: 14px;
    height: 14px;
  }

  /* Extra large bookmark icon */
  .message-list-item-bookmark {
    font-size: 22px;
    margin-right: 12px;
  }
}
/* ContactMessageReply.css */
.contact-message-reply-trigger {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.btn-reply {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-message-reply-form {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.reply-form-header {
    margin-bottom: 1rem;
}

.reply-form-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    color: #374151;
}

.reply-form-header h4 i {
    color: #3b82f6;
}

.contact-message-reply-form .form-group {
    margin-bottom: 1rem;
}

.contact-message-reply-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.contact-message-reply-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: border-color 0.2s;
}

.contact-message-reply-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.contact-message-reply-form textarea:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

.contact-message-reply-form .form-help {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.reply-form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.reply-form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
}

.reply-form-actions .btn-secondary {
    background-color: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.reply-form-actions .btn-secondary:hover:not(:disabled) {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.reply-form-actions .btn-primary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.reply-form-actions .btn-primary:hover:not(:disabled) {
    background-color: #2563eb;
}

.reply-form-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* MessageDetailPanel.css - Email-style message detail view */

.message-detail-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  overflow-y: auto;
  overflow-x: hidden;
  /* Prevent horizontal overflow */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.message-detail-panel.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
}

/* Header */
.message-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f1f3f4;
  border-bottom: 1px solid var(--border-light, #f1f3f4);
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.message-detail-header-left {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}

.message-detail-type {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.message-detail-type .type-icon {
  font-size: 24px;
  line-height: 1;
}

.message-detail-type h2 {
  font-size: 20px;
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin: 0;
}

.message-detail-source {
  margin-top: 8px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.source-badge.source-global {
  background-color: #e3f2fd;
  color: #1976d2;
}

.source-badge.source-project_release {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.source-badge.source-task_related {
  background-color: #e8f5e9;
  color: #388e3c;
}

.source-badge.source-survey_related {
  background-color: #fff3e0;
  color: #f57c00;
}

/* Action buttons in header */
.message-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #dee2e6);
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  transition: all var(--transition-fast, 0.15s ease);
}

.action-btn:hover {
  background-color: #e9ecef;
  background-color: var(--background-hover, #e9ecef);
  border-color: #adb5bd;
  border-color: var(--border-hover, #adb5bd);
}

.action-btn.active {
  background-color: #e7f3ff;
  background-color: var(--primary-light, #e7f3ff);
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
  color: #007bff;
  color: var(--primary-color, #007bff);
}

.action-btn.close-btn {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
}

.action-btn.close-btn:hover {
  background-color: #f8d7da;
  background-color: var(--danger-light, #f8d7da);
  border-color: #dc3545;
  border-color: var(--danger-color, #dc3545);
  color: #dc3545;
  color: var(--danger-color, #dc3545);
}

/* Metadata */
.message-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 24px;
  background-color: #f8f9fa;
  background-color: var(--background-muted, #f8f9fa);
  border-bottom: 1px solid #f1f3f4;
  border-bottom: 1px solid var(--border-light, #f1f3f4);
  font-size: 13px;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
}

.message-detail-time,
.message-detail-read-time {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-icon {
  font-size: 14px;
}

.time-ago {
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-style: italic;
}

/* Content */
.message-detail-content {
  flex-grow: 1;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.message-content-text {
  font-size: 15px;
  line-height: 1.6;
  color: #212529;
  color: var(--text-primary, #212529);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
}

/* If HTML is not rendering, show as preformatted text with better styling */
.message-content-text:not(:has(div)):not(:has(p)):not(:has(span)) {
  white-space: pre-wrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.message-content-text h1,
.message-content-text h2,
.message-content-text h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  color: #212529;
  color: var(--text-primary, #212529);
}

.message-content-text h1 {
  font-size: 24px;
}

.message-content-text h2 {
  font-size: 20px;
}

.message-content-text h3 {
  font-size: 18px;
}

.message-content-text p {
  margin-bottom: 12px;
}

.message-content-text a {
  color: #007bff;
  color: var(--primary-color, #007bff);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
  transition: border-color var(--transition-fast, 0.15s ease);
}

.message-content-text a:hover {
  border-bottom-color: #007bff;
  border-bottom-color: var(--primary-color, #007bff);
}

.message-content-text ul,
.message-content-text ol {
  margin-bottom: 12px;
  padding-left: 24px;
}

.message-content-text li {
  margin-bottom: 6px;
}

.message-content-text code {
  background-color: #f8f9fa;
  background-color: var(--background-muted, #f8f9fa);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.message-content-text pre {
  background-color: #f8f9fa;
  background-color: var(--background-muted, #f8f9fa);
  padding: 12px;
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.message-content-text blockquote {
  border-left: 4px solid #dee2e6;
  border-left: 4px solid var(--border-color, #dee2e6);
  padding-left: 16px;
  margin-left: 0;
  margin-bottom: 12px;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  font-style: italic;
}

/* Action buttons */
.message-detail-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #f1f3f4;
  border-top: 1px solid var(--border-light, #f1f3f4);
  background-color: #f8f9fa;
  background-color: var(--background-muted, #f8f9fa);
}

.message-action-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  transition: all var(--transition-fast, 0.15s ease);
}

.message-action-button.primary {
  background-color: #007bff;
  background-color: var(--primary-color, #007bff);
  color: #ffffff;
}

.message-action-button.primary:hover {
  background-color: #0056b3;
  background-color: var(--primary-dark, #0056b3);
}

.message-action-button.secondary {
  background-color: #f8f9fa;
  background-color: var(--background-secondary, #f8f9fa);
  color: #212529;
  color: var(--text-primary, #212529);
  border: 1px solid #dee2e6;
  border: 1px solid var(--border-color, #dee2e6);
}

.message-action-button.secondary:hover {
  background-color: #e9ecef;
  background-color: var(--background-hover, #e9ecef);
}

.message-action-button.danger {
  background-color: #dc3545;
  background-color: var(--danger-color, #dc3545);
  color: #ffffff;
}

.message-action-button.danger:hover {
  background-color: #721c24;
  background-color: var(--danger-dark, #721c24);
}

.message-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .message-detail-header {
    padding: 16px;
    flex-direction: column;
  }

  .message-detail-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .message-detail-type h2 {
    font-size: 18px;
  }

  .message-detail-content {
    padding: 16px;
  }

  .message-content-text {
    font-size: 14px;
  }

  .message-detail-buttons {
    padding: 16px;
  }
}

/* Scrollbar styling */
.message-detail-panel::-webkit-scrollbar {
  width: 8px;
}

.message-detail-panel::-webkit-scrollbar-track {
  background: #f8f9fa;
  background: var(--background-secondary, #f8f9fa);
}

.message-detail-panel::-webkit-scrollbar-thumb {
  background: #dee2e6;
  background: var(--border-color, #dee2e6);
  border-radius: 10px;
}

.message-detail-panel::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
  background: var(--border-hover, #adb5bd);
}

/* Contact Message Styling */
.message-content-text .contact-message-container,
.message-content-text .contact-reply-container {
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 100%;
  line-height: 1.6;
}

.message-content-text .contact-message-header,
.message-content-text .contact-reply-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.message-content-text .contact-reply-header {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border: 1px solid #93C5FD;
}

.message-content-text .contact-message-header {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #FCD34D;
}

.message-content-text .contact-message-header:hover,
.message-content-text .contact-reply-header:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.message-content-text .contact-reply-header h3,
.message-content-text .contact-message-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-content-text .contact-reply-header h3 {
  color: #1E40AF;
}

.message-content-text .contact-message-header h3 {
  color: #92400E;
}

.message-content-text .contact-reply-header p,
.message-content-text .contact-message-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.message-content-text .contact-reply-header p {
  color: #1E3A8A;
}

.message-content-text .contact-message-header p {
  color: #92400E;
}

.message-content-text .contact-reply-subject,
.message-content-text .contact-message-subject {
  background: #FFFFFF;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 20px;
}

.message-content-text .contact-message-body,
.message-content-text .contact-reply-message {
  transition: all 0.3s ease;
  background: #FFFFFF;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message-content-text .contact-message-body:hover,
.message-content-text .contact-reply-message:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.message-content-text .contact-reply-footer,
.message-content-text .contact-message-footer {
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid;
}

.message-content-text .contact-reply-footer {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border-color: #BAE6FD;
}

.message-content-text .contact-message-footer {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #FCD34D;
}

/* Email link styling */
.message-content-text a[href^="mailto:"] {
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 2px 6px;
  border-radius: 4px;
}

.message-content-text a[href^="mailto:"]:hover {
  background: #EFF6FF;
  text-decoration: underline;
}

/* Responsive adjustments for contact messages */
@media (max-width: 768px) {
  .message-content-text .contact-message-header,
  .message-content-text .contact-reply-header {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .message-content-text .contact-message-header h3,
  .message-content-text .contact-reply-header h3 {
    font-size: 18px !important;
  }

  .message-content-text .contact-message-body,
  .message-content-text .contact-reply-message {
    padding: 16px;
    border-radius: 8px;
  }

  .message-content-text .contact-message-footer,
  .message-content-text .contact-reply-footer {
    padding: 12px;
    border-radius: 6px;
  }
}

/* Print styles for contact messages */
@media print {
  .message-content-text .contact-message-container,
  .message-content-text .contact-reply-container {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .message-content-text .contact-message-header,
  .message-content-text .contact-reply-header {
    background: #FEF3C7 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* MessagesPageEmail.css - Email-style two-column layout */

.messages-page-email {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  /* Account for header */
  background-color: #f8f9fa;
  background-color: var(--background-page, #f8f9fa);
  width: 85%;
  box-sizing: border-box;
  padding-top: 8px
}

/* Header section */
.messages-header {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  border-bottom: 1px solid #dee2e6;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  flex-wrap: wrap;
}

/* Toolbar */
.messages-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border-bottom: 1px solid #e8eaed;
  border-bottom: 1px solid var(--border-light, #e8eaed);
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-left input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #d0d7de;
  border: 2px solid var(--border-color, #d0d7de);
  border-radius: 6px;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  transition: all 0.2s ease;
  position: relative;
  margin: 0;
}

.toolbar-left input[type="checkbox"]:hover {
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
  background-color: rgba(0, 123, 255, 0.05);
}

.toolbar-left input[type="checkbox"]:checked {
  background-color: #007bff;
  background-color: var(--primary-color, #007bff);
  border-color: #007bff;
  border-color: var(--primary-color, #007bff);
}

.toolbar-left input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.toolbar-left input[type="checkbox"]:focus {
  outline: 2px solid rgba(0, 123, 255, 0.3);
  outline-offset: 2px;
}

.message-count {
  font-size: 14px;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
  font-weight: 500;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar-actions button {
  padding: 7px 14px;
  border: 1px solid #d0d7de;
  border: 1px solid var(--border-color, #d0d7de);
  background: linear-gradient(to bottom, #ffffff 0%, #f6f8fa 100%);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.toolbar-actions button:hover {
  background: linear-gradient(to bottom, #f6f8fa 0%, #eaeef2 100%);
  border-color: #8c959f;
  border-color: var(--border-hover, #8c959f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.toolbar-actions button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Two-column layout - wider list */
.messages-content {
  display: grid;
  grid-template-columns: 500px 1fr;
  /* Increased from 400px */
  flex-grow: 1;
  overflow: hidden;
  background-color: #f8f9fa;
  background-color: var(--background-page, #f8f9fa);
  position: relative;
}

/* Left column - Message list */
.messages-list-column {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  background-color: var(--background-primary, #ffffff);
  border-right: 2px solid #e0e0e0;
  border-right: 2px solid var(--border-color, #e0e0e0);
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.03);
  position: relative;
  height: 100%;
  /* Extend to full height */
}

/* Resizable divider */
.messages-list-column::after {
  content: '';
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.messages-list-column:hover::after {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Right column - Message detail */
.messages-detail-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #fafbfc;
  padding-right: 24px;
  /* Add right padding to prevent content from touching edge */
  box-sizing: border-box;
}

.mobile-back-btn {
  display: none;
}

/* Empty/Loading/Error states */
.loading-state,
.error-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
}

.loading-state {
  font-size: 16px;
  font-weight: 500;
}

.error-state {
  color: #dc3545;
  color: var(--danger-color, #dc3545);
  font-size: 14px;
}

.empty-state {
  padding: 80px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  color: var(--text-primary, #212529);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: #6c757d;
  color: var(--text-secondary, #6c757d);
}

/* Tablet responsive - Adjust list column width */
@media (max-width: 1200px) {
  .messages-content {
    grid-template-columns: 450px 1fr;
    /* Slightly narrower but still wide */
  }

  .messages-page-email {
    max-width: 90%;
    /* Slightly wider on medium screens */
  }
}

@media (max-width: 992px) {
  .messages-content {
    grid-template-columns: 400px 1fr;
    /* Maintain wider list on tablets */
  }

  .messages-page-email {
    max-width: 95%;
    /* Even wider on tablets */
  }
}

/* Mobile responsive - Stack vertically */
@media (max-width: 768px) {
  .messages-page-email {
    height: auto;
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    overflow: hidden;
    max-width: 100%;
    /* Full width on mobile */
    margin: 0;
    /* Remove centering on mobile */
  }

  .page-title {
    font-size: 24px;
    padding: 0 16px;
    margin-bottom: 16px;
  }

  .messages-header {
    padding: 14px 18px;
    flex-direction: column;
    flex-shrink: 0;
  }

  .messages-toolbar {
    padding: 12px 18px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  .toolbar-left {
    flex-grow: 1;
  }

  /* Larger checkbox for mobile */
  .toolbar-left input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .toolbar-left input[type="checkbox"]:checked::after {
    font-size: 13px;
  }

  .message-count {
    font-size: 15px;
  }

  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .toolbar-actions button {
    flex: 1 1;
    min-width: 0;
    font-size: 13px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Larger icons in toolbar buttons */
  .toolbar-actions button i {
    font-size: 16px;
  }

  /* Mobile: Show list by default, detail when message selected */
  .messages-content {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    position: relative;
    flex: 1 1;
    min-height: 0;
    overflow: hidden;
  }

  .messages-list-column {
    display: flex;
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .messages-detail-column {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    background-color: var(--background-primary, #ffffff);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
    /* Remove right padding on mobile */
  }

  .messages-content.show-detail .messages-list-column {
    display: none;
  }

  .messages-content.show-detail .messages-detail-column {
    display: flex;
  }

  .mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 18px;
    background-color: #ffffff;
    background-color: var(--background-primary, #ffffff);
    border: none;
    border-bottom: 1px solid #f1f3f4;
    border-bottom: 1px solid var(--border-light, #f1f3f4);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    color: #007bff;
    color: var(--primary-color, #007bff);
    z-index: 20;
    flex-shrink: 0;
  }

  .mobile-back-btn i {
    font-size: 20px;
  }

  .mobile-back-btn:hover {
    background-color: #e9ecef;
    background-color: var(--background-hover, #e9ecef);
  }

  /* Ensure empty/loading states are visible on mobile */
  .loading-state,
  .error-state,
  .empty-state {
    padding: 40px 20px;
    min-height: 200px;
  }

  .empty-icon {
    font-size: 72px;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .page-title {
    font-size: 20px;
  }

  .messages-toolbar {
    padding: 10px 14px;
  }

  /* Larger checkbox for extra small screens */
  .toolbar-left input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  .toolbar-left input[type="checkbox"]:checked::after {
    font-size: 14px;
  }

  .message-count {
    font-size: 14px;
  }

  .toolbar-actions button {
    font-size: 12px;
    padding: 10px 10px;
    gap: 5px;
  }

  /* Larger icons in toolbar buttons for small screens */
  .toolbar-actions button i {
    font-size: 18px;
  }

  .mobile-back-btn {
    padding: 18px 16px;
    font-size: 18px;
  }

  .mobile-back-btn i {
    font-size: 22px;
  }
}

/* Scrollbar styling for list column */
.messages-list-column::-webkit-scrollbar {
  width: 10px;
}

.messages-list-column::-webkit-scrollbar-track {
  background: #f8f9fa;
  background: var(--background-secondary, #f8f9fa);
  border-left: 1px solid #e8eaed;
  border-left: 1px solid var(--border-light, #e8eaed);
}

.messages-list-column::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #cbd5e0 0%, #a0aec0 100%);
  border-radius: 5px;
  border: 2px solid #f8f9fa;
  border: 2px solid var(--background-secondary, #f8f9fa);
}

.messages-list-column::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #a0aec0 0%, #718096 100%);
}

/* Print styles */
@media print {

  .messages-header,
  .messages-toolbar,
  .messages-list-column,
  .mobile-back-btn {
    display: none;
  }

  .messages-content {
    grid-template-columns: 1fr;
    height: auto;
  }

  .messages-detail-column {
    display: block;
    overflow: visible;
  }
}
/
* Delete button styling */
.toolbar-actions button.delete-btn {
  background: linear-gradient(to bottom, #fff5f5 0%, #ffe5e5 100%);
  border-color: #fca5a5;
  color: #dc2626;
}

.toolbar-actions button.delete-btn:hover {
  background: linear-gradient(to bottom, #fee2e2 0%, #fecaca 100%);
  border-color: #f87171;
  color: #b91c1c;
}

.toolbar-actions button.delete-btn:active {
  background: linear-gradient(to bottom, #fecaca 0%, #fca5a5 100%);
}

/* Startup Journey Setup Styles */
.startup-journey-setup {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.setup-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1400px; /* Much wider - similar to TaskTakerPage */
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

.setup-header {
  padding: 30px 30px 20px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

.setup-header h2 {
  margin: 0 0 20px;
  color: #1f2937;
  font-size: 28px;
  font-weight: 600;
}

.step-indicator {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #f3f4f6;
  color: #9ca3af;
}

.step.active {
  background: #667eea;
  color: white;
}

.step.completed {
  background: #10b981;
  color: white;
}

.setup-content {
  flex: 1 1;
  padding: 40px 30px;
}

.step-title {
  margin: 0 0 30px;
  color: #1f2937;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.setup-actions {
  padding: 20px 30px 30px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.action-buttons-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.action-buttons-right {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-left: auto;
}

/* Ensure proper spacing when Back button is not present */
.action-buttons-left:empty {
  display: none;
}

/* Button Styles */
.btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled::before {
  display: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn-secondary:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background: #667eea;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline:active {
  transform: translateY(0);
}

.btn-text {
  background: transparent;
  color: #6b7280;
  min-width: auto;
  padding: 8px 16px;
}

.btn-text:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.btn-text:active {
  background: rgba(0, 0, 0, 0.1);
}

/* Stage Selection Styles */
.stage-selection,
.market-selection {
  max-width: 600px;
  margin: 0 auto;
}

.selection-description {
  text-align: center;
  color: #6b7280;
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.stage-options,
.market-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stage-option,
.market-option {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
}

.stage-option:hover,
.market-option:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.stage-option.selected,
.market-option.selected {
  border-color: #667eea;
  background: #f8faff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.stage-icon,
.market-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.stage-content,
.market-content {
  flex: 1 1;
}

.stage-title,
.market-title {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.stage-description,
.market-description {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.stage-radio,
.market-radio {
  flex-shrink: 0;
}

.stage-radio input,
.market-radio input {
  width: 20px;
  height: 20px;
  accent-color: #667eea;
}

/* Detailed Evaluation Styles */
.evaluation-prompt {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.prompt-content h4 {
  margin: 0 0 16px;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

.prompt-content p {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.prompt-note {
  font-size: 14px;
  font-style: italic;
}

.prompt-actions {
  margin-top: 30px;
}

.detailed-evaluation {
  max-width: 700px;
  margin: 0 auto;
}

.evaluation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 20px;
}

.evaluation-header h3 {
  text-align: center;
  color: #1f2937;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.evaluation-description {
  text-align: center;
  color: #6b7280;
  font-size: 16px;
  margin: 0 0 20px 0;
}

.evaluation-errors {
  margin-top: 20px;
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.evaluation-factors {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.evaluation-factor {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: #fafafa;
}

.factor-header {
  margin-bottom: 20px;
}

.factor-title {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.factor-description {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.factor-rating {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.rating-option {
  cursor: pointer;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  transition: all 0.2s ease;
  background: white;
  display: block;
}

.rating-option:hover {
  border-color: #667eea;
}

.rating-option.selected {
  border-color: #667eea;
  background: #f8faff;
}

.rating-option input {
  display: none;
}

.rating-number {
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 8px;
}

.rating-label {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}

/* Compact evaluation factors grid design */
.evaluation-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  padding: 0;
  margin-top: 20px;
  max-width: none; /* Allow full width usage */
}

.evaluation-factor-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.evaluation-factor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.evaluation-factor-card.has-selection {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f8faff 0%, #f1f5ff 100%);
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 0 30px rgba(59, 130, 246, 0.25),
    0 8px 32px rgba(59, 130, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  animation: completed-glow 3s ease-in-out infinite alternate;
  position: relative;
  overflow: visible;
}

@keyframes completed-glow {
  0% {
    box-shadow: 
      0 0 0 3px rgba(59, 130, 246, 0.1),
      0 0 25px rgba(59, 130, 246, 0.2),
      0 8px 32px rgba(59, 130, 246, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  100% {
    box-shadow: 
      0 0 0 3px rgba(59, 130, 246, 0.2),
      0 0 40px rgba(59, 130, 246, 0.35),
      0 12px 48px rgba(59, 130, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

/* Glowing effect for completed icon */
.factor-icon.completed-icon {
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(245, 158, 11, 0.7),
    0 0 40px rgba(245, 158, 11, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.3);
  animation: icon-glow 2.5s ease-in-out infinite alternate,
             icon-pulse 3s ease-in-out infinite;
  transform: scale(1.05);
  position: relative;
  z-index: 2;
}

.factor-icon.completed-icon::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: halo-pulse 2s ease-in-out infinite;
}

@keyframes icon-glow {
  0% {
    box-shadow: 
      0 0 15px rgba(255, 255, 255, 0.7),
      0 0 25px rgba(245, 158, 11, 0.5),
      0 0 35px rgba(245, 158, 11, 0.3),
      inset 0 0 15px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 
      0 0 25px rgba(255, 255, 255, 1),
      0 0 35px rgba(245, 158, 11, 0.8),
      0 0 50px rgba(245, 158, 11, 0.6),
      inset 0 0 25px rgba(255, 255, 255, 0.4);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes halo-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Completion checkmark indicator */
.completion-checkmark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.4),
    0 0 20px rgba(59, 130, 246, 0.3);
  animation: checkmark-bounce 0.8s ease-out,
             checkmark-glow 2s ease-in-out infinite alternate;
}

.completion-checkmark i {
  color: white;
  font-size: 14px;
  font-weight: bold;
}

@keyframes checkmark-bounce {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.9) rotate(-5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes checkmark-glow {
  0% {
    box-shadow: 
      0 4px 12px rgba(59, 130, 246, 0.3),
      0 0 15px rgba(59, 130, 246, 0.2);
  }
  100% {
    box-shadow: 
      0 6px 20px rgba(59, 130, 246, 0.5),
      0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.factor-icon-container {
  margin-bottom: 12px;
  position: relative;
}

.factor-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.factor-emoji {
  font-size: 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.factor-title {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.factor-rating-compact {
  position: relative;
}

.factor-select {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url('/icons/small-chevron.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.factor-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.factor-select.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f8faff 0%, #f1f5ff 100%);
  color: #1e40af;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Enhanced styling for select in completed cards */
.evaluation-factor-card.has-selection .factor-select {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f8faff 0%, #f1f5ff 100%);
  color: #1e40af;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.evaluation-factor-card.has-selection .factor-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.factor-glow-effect {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #10b981, #f59e0b, #ef4444);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  animation: glowPulse 2s ease-in-out infinite;
}

/* Show glow effect when card has selected state */
.evaluation-factor-card.has-selection .factor-glow-effect {
  opacity: 1;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Review Styles */
.setup-review {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.setup-review h3 {
  margin: 0 0 30px;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

.review-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: left;
}

.review-item strong {
  color: #1f2937;
  display: inline-block;
  min-width: 80px;
}

/* Error Message Styles */
.error-message {
  color: #dc2626;
  font-size: 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.error-message::before {
  content: "⚠️";
  font-size: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .startup-journey-setup {
    padding: 10px;
  }

  .setup-container {
    border-radius: 8px;
    min-height: auto;
    max-width: 100%;
  }

  .evaluation-factors-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .setup-header {
    padding: 20px 20px 15px;
  }

  .setup-header h2 {
    font-size: 24px;
  }

  .step {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .setup-content {
    padding: 30px 20px;
  }

  .step-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .setup-actions {
    padding: 15px 20px 20px;
    flex-direction: column;
    gap: 10px;
  }

  .action-buttons {
    width: 100%;
    justify-content: center;
  }

  .btn {
    padding: 10px 20px;
    font-size: 14px;
    min-width: 100px;
  }

  .stage-option,
  .market-option {
    padding: 16px;
    gap: 12px;
  }

  .stage-icon,
  .market-icon {
    font-size: 24px;
  }

  .stage-title,
  .market-title {
    font-size: 16px;
  }

  .factor-rating {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .rating-option {
    padding: 12px 8px;
  }

  .rating-number {
    font-size: 16px;
  }

  .rating-label {
    font-size: 11px;
  }

  .evaluation-header {
    flex-direction: column;
    gap: 15px;
  }

  .evaluation-factor {
    padding: 20px 16px;
  }

  .evaluation-factors-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .evaluation-factor-card {
    padding: 14px;
  }

  .factor-icon {
    width: 50px;
    height: 50px;
  }

  .factor-emoji {
    font-size: 20px;
  }

  .factor-title {
    font-size: 13px;
  }

  .factor-select {
    font-size: 12px;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .evaluation-factors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .evaluation-factor-card {
    padding: 12px;
  }

  .factor-icon {
    width: 45px;
    height: 45px;
  }

  .factor-emoji {
    font-size: 18px;
  }

  .factor-title {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .factor-select {
    font-size: 11px;
    padding: 6px 8px;
  }
  
  /* Mobile responsive button layout */
  .setup-actions {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 24px;
  }
  
  .action-buttons-left,
  .action-buttons-right {
    width: 100%;
    justify-content: center;
  }
  
  .action-buttons-left {
    flex-direction: column-reverse;
    gap: 8px;
  }
  
  .action-buttons-right {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }
}

/* Responsive design for wider journey page */
@media (min-width: 1200px) {
  .evaluation-factors-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  .setup-container {
    max-width: 1400px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .evaluation-factors-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .setup-container {
    max-width: 1200px;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .evaluation-factors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  
  .setup-container {
    max-width: 900px;
  }
}
.journey-list {
  max-width: 85%;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  min-height: 100vh;
  background: #f8fafc;
}

.journey-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.journey-list-title h1 {
  margin: 0 0 8px 0;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.journey-list-title p {
  margin: 0;
  color: #6b7280;
  font-size: 1.125rem;
  font-weight: 400;
}

.journey-list-create-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.journey-list-create-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.create-icon {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Loading, Error, and Auth States */
.journey-list-loading,
.journey-list-error,
.journey-list-auth-required {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.journey-list-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.journey-list-retry-button {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 16px;
}

.journey-list-retry-button:hover {
  background: #2563eb;
}

/* Empty State */
.journey-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  text-align: center;
  background: white;
  border-radius: 20px;
  border: 2px dashed #d1d5db;
  padding: 60px 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.journey-list-empty-icon {
  font-size: 5rem;
  margin-bottom: 24px;
  opacity: 0.8;
}

.journey-list-empty h3 {
  margin: 0 0 16px 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
}

.journey-list-empty p {
  margin: 0 0 32px 0;
  color: #6b7280;
  font-size: 1.125rem;
  max-width: 500px;
  line-height: 1.6;
}

.journey-list-empty-create-button {
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.journey-list-empty-create-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

/* Journey Grid */
.journey-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 28px;
  gap: 28px;
  margin-bottom: 40px;
}

/* Journey Cards */
.journey-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  height: -webkit-fit-content;
  height: fit-content;
}

.journey-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #667eea;
}

.journey-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 16px 24px;
  gap: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.journey-card-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1;
}

.journey-card-stage,
.journey-card-market {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.stage-icon,
.market-icon {
  font-size: 1.25rem;
}

.stage-text,
.market-text {
  font-weight: 600;
  color: #374151;
}

/* Journey Badges */
.journey-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid transparent;
}

.journey-badge.active {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #065f46;
  border-color: #a7f3d0;
}

.journey-badge.completed {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border-color: #93c5fd;
}

.journey-badge.inactive {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #4b5563;
  border-color: #d1d5db;
}

/* Journey Card Content */
.journey-card-content {
  padding: 24px;
}

.journey-card-persona {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%);
  border-radius: 12px;
  border: 1px solid #e9d5ff;
}

.persona-label {
  color: #7c3aed;
  font-weight: 600;
  font-size: 0.875rem;
}

.persona-value {
  color: #5b21b6;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Progress Bar */
.journey-card-progress {
  margin-bottom: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-label {
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
}

.progress-stats {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.875rem;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  transition: width 0.5s ease;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.progress-percentage {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 600;
  text-align: right;
  display: block;
}

/* Journey Card Meta */
.journey-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 16px;
}

.journey-card-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-label {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-value {
  color: #374151;
  font-weight: 600;
  font-size: 0.875rem;
}

.journey-card-resets {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.8rem;
}

.resets-icon {
  font-size: 1rem;
}

/* Journey Card Footer */
.journey-card-footer {
  padding: 0 20px 20px 20px;
}

/* Journey Card Footer */
.journey-card-footer {
  padding: 0 24px 24px 24px;
}

.journey-card-view-button {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #374151;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.journey-card-view-button:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Loading and Error States */
.journey-list-loading,
.journey-list-error,
.journey-list-auth-required {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  text-align: center;
  background: white;
  border-radius: 20px;
  padding: 60px 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.journey-list-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.journey-list-loading p {
  margin: 0;
  font-size: 1.125rem;
  color: #6b7280;
  font-weight: 500;
}

.journey-list-error h2 {
  margin: 0 0 16px 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #dc2626;
}

.journey-list-error p {
  margin: 0 0 32px 0;
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1.6;
}

.journey-list-retry-button {
  padding: 14px 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.journey-list-retry-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.journey-list-auth-required h2 {
  margin: 0 0 16px 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
}

.journey-list-auth-required p {
  margin: 0;
  font-size: 1.125rem;
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .journey-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .journey-list {
    padding: 15px;
  }
  
  .journey-list-header {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
  }
  
  .journey-list-title h1 {
    font-size: 2rem;
  }
  
  .journey-list-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .journey-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 12px 20px;
  }
  
  .journey-card-content {
    padding: 20px;
  }
  
  .journey-card-footer {
    padding: 0 20px 20px 20px;
  }
  
  .journey-card-meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .journey-list {
    padding: 10px;
  }
  
  .journey-list-header {
    padding: 20px;
  }
  
  .journey-list-title h1 {
    font-size: 1.75rem;
  }
  
  .journey-list-title p {
    font-size: 1rem;
  }
  
  .journey-card-header,
  .journey-card-content,
  .journey-card-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .journey-card-header {
    padding-top: 16px;
    padding-bottom: 8px;
  }
  
  .journey-card-content {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .journey-card-footer {
    padding-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .journey-list {
    padding: 10px;
  }
  
  .journey-list-title h1 {
    font-size: 1.25rem;
  }
  
  .journey-card-content {
    padding: 12px 16px;
  }
  
  .journey-card-header {
    padding: 16px 16px 0 16px;
  }
  
  .journey-card-footer {
    padding: 0 16px 16px 16px;
  }
}

/* Compact Step Timeline Styles */
.step-timeline-compact {
  /* margin-bottom: 30px; */
}

.step-timeline-compact h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* One-line timeline layout */
.timeline-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 20px 0;
  position: relative;
}

/* Timeline step wrapper to contain point and info */
.timeline-step-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1;
}

/* Timeline points */
.timeline-point {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  margin-bottom: 8px;
}

/* Timeline point info (title and time) */
.timeline-point-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 120px;
}

.timeline-point-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 2px;
  line-height: 1.2;
  word-wrap: break-word;
}

.timeline-point-time {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 500;
}

/* Point states */
.timeline-point.completed {
  background: #10b981;
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.timeline-point.current {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  border-color: #1d4ed8;
}

.timeline-point.current.highlight {
  background: #1d4ed8;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.timeline-point.skipped {
  background: #f59e0b;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.timeline-point.locked {
  background: #e5e7eb;
  color: #6b7280;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Clickable states */
.timeline-point.clickable {
  cursor: pointer;
}

.timeline-point.clickable:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Point numbers */
.point-number {
  font-size: 14px;
  font-weight: 700;
}

/* Timeline connectors */
.timeline-connector {
  position: absolute;
  top: 22px;
  left: 50%;
  right: -50%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.timeline-connector.completed {
  background: #10b981;
}

/* Responsive design */
@media (max-width: 768px) {
  .timeline-line {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .timeline-step-wrapper {
    min-width: 100px;
  }
  
  .timeline-point {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  
  .timeline-point-info {
    max-width: 100px;
  }
  
  .timeline-point-title {
    font-size: 0.7rem;
  }
  
  .timeline-point-time {
    font-size: 0.65rem;
  }
  
  .timeline-connector {
    display: none;
  }
}

@media (max-width: 480px) {
  .timeline-step-wrapper {
    min-width: 80px;
  }
  
  .timeline-point {
    width: 35px;
    height: 35px;
    font-size: 11px;
    margin-bottom: 6px;
  }
  
  .timeline-point-info {
    max-width: 80px;
  }
  
  .timeline-point-title {
    font-size: 0.65rem;
  }
  
  .timeline-point-time {
    font-size: 0.6rem;
  }
}

.step-timeline-compact h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* One-line timeline layout */
.timeline-line {
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start to accommodate text below */
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 20px 0;
  position: relative;
}

/* Timeline step wrapper to contain point and info */
.timeline-step-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1;
}

/* Timeline points */
.timeline-point {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  margin-bottom: 8px; /* Space between point and text */
}

/* Timeline point info (title and time) */
.timeline-point-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 120px; /* Limit width to prevent overlap */
}

.timeline-point-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 2px;
  line-height: 1.2;
  word-wrap: break-word;
}

.timeline-point-time {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 500;
}

/* Point states */
.timeline-point.completed {
  background: #10b981;
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.timeline-point.current {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  border-color: #1d4ed8;
}

.timeline-point.current.highlight {
  background: #1d4ed8;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.timeline-point.skipped {
  background: #f59e0b;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.timeline-point.locked {
  background: #e5e7eb;
  color: #6b7280;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Clickable states */
.timeline-point.clickable {
  cursor: pointer;
}

.timeline-point.clickable:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Point numbers */
.point-number {
  font-size: 14px;
  font-weight: 700;
}

/* Timeline connectors - positioned between step wrappers */
.timeline-connector {
  position: absolute;
  top: 22px; /* Center with the points */
  left: 50%;
  right: -50%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.timeline-connector.completed {
  background: #10b981;
}

/* Responsive design */
@media (max-width: 768px) {
  .timeline-line {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .timeline-step-wrapper {
    min-width: 100px;
  }
  
  .timeline-point {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  
  .timeline-point-info {
    max-width: 100px;
  }
  
  .timeline-point-title {
    font-size: 0.7rem;
  }
  
  .timeline-point-time {
    font-size: 0.65rem;
  }
  
  .timeline-connector {
    display: none;
  }
}

@media (max-width: 480px) {
  .timeline-step-wrapper {
    min-width: 80px;
  }
  
  .timeline-point {
    width: 35px;
    height: 35px;
    font-size: 11px;
    margin-bottom: 6px;
  }
  
  .timeline-point-info {
    max-width: 80px;
  }
  
  .timeline-point-title {
    font-size: 0.65rem;
  }
  
  .timeline-point-time {
    font-size: 0.6rem;
  }
}

.step-icon.completed {
  background-color: #10b981;
  color: white;
  border: 2px solid #10b981;
}

.step-icon.current {
  background-color: #3b82f6;
  color: white;
  border: 2px solid #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.step-icon.skipped {
  background-color: #f59e0b;
  color: white;
  border: 2px solid #f59e0b;
}

.step-icon.locked {
  background-color: #e5e7eb;
  color: #9ca3af;
  border: 2px solid #e5e7eb;
}

.step-connector {
  width: 2px;
  height: 40px;
  background-color: #e5e7eb;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.step-connector.completed {
  background-color: #10b981;
}

.step-content {
  flex: 1 1;
  padding-top: 4px;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.step-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.timeline-step.locked .step-title {
  color: #9ca3af;
}

.step-time-estimate {
  font-size: 0.875rem;
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 2px 8px;
  border-radius: 12px;
}

.step-description {
  margin: 0 0 12px 0;
  color: #4b5563;
  line-height: 1.5;
}

.timeline-step.locked .step-description {
  color: #9ca3af;
}

.step-completed-info,
.step-current-info,
.step-locked-info {
  font-size: 0.875rem;
}

.completed-date {
  color: #10b981;
  font-weight: 500;
}

.current-indicator {
  color: #3b82f6;
  font-weight: 500;
}

.locked-indicator {
  color: #9ca3af;
  font-style: italic;
}

/* Responsive design */
@media (max-width: 768px) {
  .step-indicator {
    margin-right: 15px;
  }
  
  .step-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .step-connector {
    height: 30px;
    margin-top: 6px;
  }
  
  .step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .step-title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .timeline-step {
    margin-bottom: 15px;
  }
  
  .step-indicator {
    margin-right: 12px;
  }
  
  .step-icon {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  .step-connector {
    height: 25px;
    margin-top: 4px;
  }
}
/* Definition of Done Component Styles */

.definition-of-done {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

.dod-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.dod-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1e293b;
}

.dod-title h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1e293b;
}

.dod-title h3 i {
  font-size: 1.75rem;
}

.dod-subtitle {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.dod-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 200px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.progress-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.progress-badge.in-progress {
  background: #dbeafe;
  color: #1e40af;
  border: 2px solid #93c5fd;
}

.progress-badge.complete {
  background: #d1fae5;
  color: #065f46;
  border: 2px solid #10b981;
  animation: pulse-success 2s ease infinite;
}

@keyframes pulse-success {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

.dod-criteria {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.criterion {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.criterion:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.criterion.completed {
  background: #f0fdf4;
  border-color: #86efac;
}

.criterion.verification-survey {
  background: #fefce8;
  border: 2px dashed #fbbf24;
  margin-top: 0.5rem;
}

.criterion.verification-survey:hover {
  border-color: #f59e0b;
  background: #fef9c3;
}

.criterion-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.criterion-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}

.criterion-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #16a34a;
  margin: 0;
}

.criterion-checkbox input[type="checkbox"]:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.checkmark {
  display: none;
}

.criterion-info {
  flex: 1 1;
}

.criterion-title {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.required-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.dod-check-icon {
  color: #10b981;
  font-size: 1.5rem;
  animation: checkmark-appear 0.3s ease;
}

@keyframes checkmark-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.criterion-description {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
}

.criterion.completed .criterion-description {
  color: #166534;
}

.criterion-evidence {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

.criterion-evidence label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.5rem;
}

.criterion-evidence textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}

.criterion-evidence textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dod-criterion-help {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 6px;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.dod-criterion.completed .dod-criterion-help {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
}

.dod-criterion-help i {
  color: #667eea;
  margin-top: 2px;
}

.dod-criterion.completed .dod-criterion-help i {
  color: #10b981;
}

.dod-completion-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #d1fae5;
  border: 1px solid #86efac;
  border-radius: 8px;
  margin-top: 1rem;
  font-weight: 500;
  color: #065f46;
  font-size: 0.9rem;
  animation: slide-in 0.3s ease;
}

.dod-success-message i {
  font-size: 1.5rem;
  color: #fbbf24;
  animation: trophy-bounce 1s ease infinite;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trophy-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .definition-of-done {
    padding: 1rem;
  }

  .dod-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .dod-title h3 {
    font-size: 1.25rem;
  }

  .progress-badge {
    align-self: flex-start;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }

  .dod-criterion {
    padding: 1rem;
  }

  .dod-criterion-label-text {
    font-size: 1rem;
  }

  .dod-criterion-description {
    font-size: 0.9rem;
  }

  .dod-success-message {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/* Survey Styles */
.criterion-survey {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #fbbf24;
}

.survey-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #92400e;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}

.survey-toggle:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

.survey-questions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.survey-question {
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 6px;
}

.survey-question-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.required-indicator {
  color: #dc2626;
  margin-left: 0.25rem;
}

.survey-options {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.survey-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #475569;
}

.survey-option input[type="radio"] {
  cursor: pointer;
  accent-color: #f59e0b;
}

.survey-scale {
  margin-top: 0.5rem;
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.scale-input {
  width: 100%;
  cursor: pointer;
  accent-color: #f59e0b;
}

.scale-value {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f59e0b;
}

.survey-text-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  margin-top: 0.5rem;
  transition: border-color 0.2s;
}

.survey-text-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.verification-survey .criterion-title::before {
  content: '✨';
  margin-right: 0.25rem;
}

/* Disabled State */
.criterion.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.criterion.disabled .criterion-checkbox input[type="checkbox"] {
  cursor: not-allowed;
}

.criterion.disabled .criterion-title,
.criterion.disabled .criterion-description {
  color: #94a3b8;
}

.disabled-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.criterion-disabled-reason {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f1f5f9;
  border-left: 3px solid #94a3b8;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #64748b;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.criterion-disabled-reason i {
  margin-top: 2px;
}

/* Definition of Done Modal Styles */

.dod-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.dod-modal-content {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.dod-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.dod-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.dod-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.dod-modal-close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.dod-modal-body {
  padding: 24px;
  flex: 1 1;
  overflow-y: auto;
}

.dod-modal-step-info {
  margin-bottom: 24px;
}

.dod-modal-step-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.dod-modal-description {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.dod-modal-progress {
  margin-bottom: 24px;
}

.dod-modal-progress-bar {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.dod-modal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: width 0.3s ease;
}

.dod-modal-progress-text {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.dod-modal-criteria-list {
  margin-top: 24px;
}

.dod-modal-criteria-list h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.dod-modal-criterion {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: background-color 0.2s, border-color 0.2s;
}

.dod-modal-criterion:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.dod-modal-criterion-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 12px;
}

.dod-modal-checkbox {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.dod-modal-criterion-text {
  flex: 1 1;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.dod-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.dod-modal-button {
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dod-modal-button:hover {
  background-color: #2563eb;
}

.dod-modal-button:active {
  background-color: #1d4ed8;
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .dod-modal-overlay {
    padding: 0;
  }

  .dod-modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .dod-modal-header {
    padding: 20px 16px 12px;
  }

  .dod-modal-header h2 {
    font-size: 20px;
  }

  .dod-modal-body {
    padding: 16px;
  }

  .dod-modal-step-info h3 {
    font-size: 18px;
  }

  .dod-modal-footer {
    padding: 12px 16px;
  }
}

.long-running-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.long-running-loading-container {
  background: white;
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.long-running-loading-icon {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Ensure no background bleeds through */
  isolation: isolate;
}

.loading-icon-emoji {
  font-size: 56px;
  z-index: 2;
  position: relative;
  animation: pulse 2s ease-in-out infinite;
  background: transparent;
  /* Make emoji render cleanly without background artifacts */
  line-height: 1;
  display: block;
  text-align: center;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.loading-spinner-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 4px solid #f0f0f0;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.long-running-loading-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.long-running-loading-message {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 32px;
  min-height: 24px;
  animation: fadeInMessage 0.5s ease-in-out;
}

@keyframes fadeInMessage {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.long-running-loading-progress {
  margin-bottom: 24px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f3f4f6;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid #e5e7eb;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 8px;
  transition: width 0.5s ease-out;
  animation: shimmer 2s infinite;
  background-size: 200% 100%;
  box-shadow:
    0 0 20px rgba(37, 99, 235, 0.8),
    0 0 40px rgba(124, 58, 237, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.progress-text {
  font-size: 15px;
  color: #6b7280;
  font-weight: 600;
}

.long-running-loading-tips {
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #4f46e5;
}

.loading-tip {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .long-running-loading-container {
    background: #1f2937;
  }

  .long-running-loading-title {
    color: #f9fafb;
  }

  .long-running-loading-message {
    color: #d1d5db;
  }

  .progress-bar {
    background: #1f2937;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    border: 2px solid #374151;
  }

  .progress-fill {
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow:
      0 0 25px rgba(59, 130, 246, 0.9),
      0 0 50px rgba(139, 92, 246, 0.7),
      inset 0 2px 4px rgba(255, 255, 255, 0.2);
  }

  .progress-text {
    color: #9ca3af;
  }

  .progress-text {
    color: #9ca3af;
  }

  .long-running-loading-tips {
    background: #111827;
    border-left-color: #6366f1;
  }

  .loading-tip {
    color: #d1d5db;
  }
}

/* Mobile responsive */
@media (max-width: 640px) {
  .long-running-loading-container {
    padding: 32px 24px;
    width: 95%;
  }

  .long-running-loading-title {
    font-size: 20px;
  }

  .long-running-loading-message {
    font-size: 14px;
  }

  .loading-icon-emoji {
    font-size: 40px;
  }

  .loading-spinner-ring {
    width: 70px;
    height: 70px;
  }
}
.step-detail-view {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.step-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.step-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
}

.step-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.step-points-summary {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-points {
  font-size: 0.875rem;
  color: #3b82f6;
  background-color: #eff6ff;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
}

.step-net-points {
  font-size: 0.875rem;
  color: #10b981;
  background-color: #f0fdf4;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
}

.step-index,
.step-time {
  font-size: 0.875rem;
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 4px 12px;
  border-radius: 16px;
}

.step-description {
  margin-bottom: 24px;
}

.step-description p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
  font-size: 1rem;
}

/* Selected Idea Display */
.selected-idea-display {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #0ea5e9;
  border-radius: 12px;
  position: relative;
}

.selected-idea-header {
  margin-bottom: 16px;
}

.selected-idea-header h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0c4a6e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-idea-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selected-idea-content > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.selected-idea-content .label {
  font-weight: 600;
  color: #0c4a6e;
  min-width: 120px;
  flex-shrink: 0;
}

.idea-title strong {
  font-size: 1.1rem;
  color: #0c4a6e;
}

.idea-actions {
  margin-top: 8px;
  display: flex;
}

.idea-skills {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-chip {
  background-color: #e0f2fe;
  color: #0369a1;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.idea-survey {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.survey-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.875rem;
  color: #0f172a;
}

.survey-id {
  font-weight: 600;
  background: rgba(14, 116, 144, 0.15);
  color: #0f172a;
  padding: 3px 10px;
  border-radius: 9999px;
}

.survey-idea {
  color: #0369a1;
  font-weight: 500;
  font-style: italic;
}

.survey-created {
  color: #334155;
}

.survey-actions {
  display: flex;
  align-items: center;
}

.survey-link-button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: #0ea5e9;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.survey-link-button:hover {
  background: #0284c7;
}

.survey-link-button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.validation-survey-button {
  padding: 10px 16px;
  background-color: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.validation-survey-button:hover {
  background-color: #0369a1;
}

.validation-survey-button:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

.feasibility-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.feasibility-badge.high {
  background-color: #dcfce7;
  color: #166534;
}

.feasibility-badge.medium {
  background-color: #fef3c7;
  color: #92400e;
}

.feasibility-badge.low {
  background-color: #fecaca;
  color: #991b1b;
}

.step-actions {
  margin-bottom: 24px;
}

.step-actions h3 {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
}

.actions-grid {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.action-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
  transition: all 0.2s ease;
}

.action-card:hover {
  border-color: #3b82f6;
  background: #f8faff;
}

.action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.action-icon {
  font-size: 1.25rem;
}

.action-text {
  font-weight: 500;
  color: #1a1a1a;
}

.action-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.875rem;
  flex-wrap: wrap;
  gap: 8px;
}

.insufficient-points {
  color: #ef4444;
  font-weight: 500;
  font-size: 0.75rem;
  background-color: #fef2f2;
  padding: 2px 8px;
  border-radius: 12px;
}

.points-breakdown {
  color: #6b7280;
}

.net-points {
  font-weight: 600;
}

.net-points.positive {
  color: #10b981;
}

.net-points.negative {
  color: #ef4444;
}

.action-button {
  width: 100%;
  padding: 10px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.action-button:hover {
  background-color: #2563eb;
}

.action-card.completed {
  border-color: #10b981;
  background: #f0fdf4;
}

.action-card.completed:hover {
  border-color: #10b981;
  background: #f0fdf4;
}

.action-card.instruction-card {
  border-color: #e0e7ff;
  background: #f8faff;
  cursor: default;
}

.action-card.instruction-card:hover {
  border-color: #c7d2fe;
  background: #f1f5f9;
}

.action-card.instruction-card .action-text {
  color: #1e40af;
  font-weight: 500;
}

.completion-badge {
  background-color: #10b981;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
}

/* MVP instruction styling */
.action-card.mvp-instructions {
  border: 1px solid #c7e0ff;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  padding: 18px 20px;
}

.action-card.mvp-instructions .action-text {
  font-weight: 700;
  color: #034f84;
}

.mvp-steps ol {
  margin: 12px 0 0 0;
  padding-left: 0;
  margin-left: 0;
  list-style: none; /* hide default 1.,2.,3. markers since we show "Step X:" in content */
}

.mvp-steps li {
  margin-bottom: 12px;
  line-height: 1.5;
}

.mvp-steps li strong {
  display: inline-block;
  min-width: 90px;
  color: #0f172a;
}

.mvp-step-detail {
  margin-top: 6px;
  margin-left: 0px;
  color: #334155;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #eef2ff;
}

.mvp-step-detail code {
  display: inline-block;
  background: #fff0f6;
  color: #b91c1c;
  padding: 2px 8px;
  border-radius: 6px;
  margin: 0 6px;
  font-weight: 600;
}

.mvp-steps em {
  color: #0f172a;
  font-style: italic;
}

.action-card.mvp-instructions .completion-badge {
  background: #06b6d4;
}

.action-button.completed {
  background-color: #10b981;
  cursor: not-allowed;
  opacity: 0.8;
}

.action-button.completed:hover {
  background-color: #10b981;
}

.action-button.insufficient-points {
  background-color: #ef4444;
  cursor: pointer;
}

.action-button.insufficient-points:hover {
  background-color: #dc2626;
}

.action-button.review-mode {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.action-button.review-mode:hover {
  background-color: #9ca3af;
}

.action-card.instruction-card {
  border-color: #e0e7ff;
  background: #f8faff;
  cursor: default;
}

.action-card.instruction-card:hover {
  border-color: #c7d2fe;
  background: #f1f5f9;
}

.action-card.instruction-card .action-text {
  color: #1e40af;
  font-weight: 500;
}

.definition-of-done {
  margin-bottom: 24px;
}

.dod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.definition-of-done h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
}

.completion-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.complete {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.auto-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #dbeafe;
  color: #1e40af;
}

.dod-criteria {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dod-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.dod-item.completed {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.dod-item.pending {
  background: #fefce8;
  border: 1px solid #fde047;
}

.dod-checkbox {
  color: #6b7280;
  font-size: 1.125rem;
  margin-top: 2px;
}

.dod-text {
  color: #4b5563;
  line-height: 1.5;
}

.auto-completion-notice {
  margin-top: 16px;
  padding: 12px;
  background-color: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 8px;
}

.auto-completion-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: #047857;
}

.step-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.complete-button,
.skip-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.complete-button.primary {
  background-color: #10b981;
  color: white;
}

.complete-button.primary:hover {
  background-color: #059669;
}

.skip-button.secondary {
  background-color: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.skip-button.secondary:hover {
  background-color: #e5e7eb;
  color: #4b5563;
}

.reflection-dialog,
.skip-dialog {
  margin-top: 20px;
  padding: 20px;
  background: #f8faff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
}

.reflection-dialog h4,
.skip-dialog h4 {
  margin: 0 0 8px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.reflection-dialog p,
.skip-dialog p {
  margin: 0 0 12px 0;
  color: #4b5563;
}

.reflection-dialog textarea,
.skip-dialog textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
  margin-bottom: 16px;
}

.reflection-dialog textarea:focus,
.skip-dialog textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cancel-button,
.submit-button,
.skip-confirm-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.cancel-button {
  background-color: #f3f4f6;
  color: #6b7280;
}

.cancel-button:hover {
  background-color: #e5e7eb;
}

.submit-button {
  background-color: #10b981;
  color: white;
}

.submit-button:hover {
  background-color: #059669;
}

.skip-confirm-button {
  background-color: #f59e0b;
  color: white;
}

.skip-confirm-button:hover {
  background-color: #d97706;
}

/* Responsive design */
@media (max-width: 768px) {
  .step-detail-view {
    padding: 20px;
  }
  
  .step-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .step-detail-header h2 {
    font-size: 1.25rem;
  }
  
  .step-controls {
    flex-direction: column;
  }
  
  .complete-button,
  .skip-button {
    width: 100%;
  }
  
  .dialog-actions {
    flex-direction: column;
  }
  
  .cancel-button,
  .submit-button,
  .skip-confirm-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .step-detail-view {
    padding: 16px;
  }
  
  .action-card {
    padding: 12px;
  }
  
  .action-points {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* Ear
ning Suggestions Modal */
.earning-suggestions-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.modal-body {
  padding: 20px 24px;
}

.modal-body p {
  margin: 0 0 20px 0;
  color: #4b5563;
  line-height: 1.6;
}

.earning-suggestions h4 {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.earning-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.suggestion-item {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fafafa;
  transition: all 0.2s ease;
}

.suggestion-item:hover {
  border-color: #3b82f6;
  background: #f8faff;
}

.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.activity {
  font-weight: 500;
  color: #1a1a1a;
}

.points {
  font-weight: 600;
  color: #10b981;
  font-size: 0.875rem;
}

.suggestion-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #6b7280;
}

.description {
  flex: 1 1;
}

.time {
  font-style: italic;
  margin-left: 8px;
}

.quickest-path {
  padding: 12px;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #1e40af;
}

.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.close-modal-button {
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.close-modal-button:hover {
  background-color: #2563eb;
}

/* Mobile responsiveness for modal */
@media (max-width: 768px) {
  .earning-suggestions-modal {
    padding: 10px;
  }
  
  .modal-content {
    max-height: 90vh;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .suggestion-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .time {
    margin-left: 0;
  }
}

/* Instruction Card Styles */
.instruction-card {
  background: #f8f9fa;
  border-left: 3px solid #6c757d;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.instruction-card:hover {
  background: #f1f3f5;
}

.instruction-card.completed {
  background: #e8f5e9;
  border-left-color: #4caf50;
  opacity: 0.85;
}

.instruction-card.completed .action-text {
  text-decoration: line-through;
  color: #6c757d;
}

/* Context Header Styles */
.instruction-card.context-header {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: default !important;
}

.instruction-card.context-header:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
}

.instruction-card.context-header .action-text {
  font-weight: 600;
  color: #0c4a6e;
  font-size: 1.05rem;
  text-align: center;
  width: 100%;
}

.instruction-card.context-header .action-header {
  justify-content: center;
}

.instruction-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #4caf50;
}

.instruction-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.instruction-points {
  margin-left: auto;
  color: #28a745;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  padding: 2px 8px;
  background: #d4edda;
  border-radius: 12px;
}

.instruction-card .action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.instruction-card .action-text {
  flex: 1 1;
  line-height: 1.5;
}

.instruction-card .action-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}

/* Actions Header with Controls */
.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.actions-header h3 {
  margin: 0;
}

.instruction-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.instruction-control-button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.instruction-control-button:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.instruction-control-button.complete-all {
  color: #059669;
  border-color: #059669;
}

.instruction-control-button.complete-all:hover {
  background: #ecfdf5;
  border-color: #047857;
}

.instruction-control-button.clear-all {
  color: #dc2626;
  border-color: #dc2626;
}

.instruction-control-button.clear-all:hover {
  background: #fef2f2;
  border-color: #b91c1c;
}

.instruction-progress {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 6px;
}

/* Phase Tabs for Build MVP */
.phase-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.phase-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phase-tab:hover {
  color: #3b82f6;
  background: #f8faff;
}

.phase-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  font-weight: 600;
}

.phase-tab.completed {
  color: #10b981;
}

.phase-tab.completed.active {
  color: #10b981;
  border-bottom-color: #10b981;
}

.phase-tab.in-progress {
  color: #f59e0b;
}

.phase-tab.in-progress.active {
  color: #f59e0b;
  border-bottom-color: #f59e0b;
}

.phase-label {
  font-weight: inherit;
}

.phase-progress {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  font-weight: 600;
}

.phase-tab.completed .phase-progress {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.phase-tab.in-progress .phase-progress {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.phase-check {
  font-size: 0.875rem;
  color: #10b981;
}

/* Phase Overview */
.phase-overview {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.phase-overview h4 {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.phase-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.phase-overview-card {
  padding: 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.phase-overview-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.phase-overview-card.completed {
  border-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.phase-overview-card.completed:hover {
  border-color: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.phase-overview-card.in-progress {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.phase-overview-card.in-progress:hover {
  border-color: #d97706;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.phase-overview-card.not-started {
  border-color: #e5e7eb;
  background: white;
}

.phase-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.phase-overview-label {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 0.95rem;
}

.phase-overview-status {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.phase-overview-status.completed {
  background: #dcfce7;
  color: #166534;
}

.phase-overview-status.in-progress {
  background: #fef3c7;
  color: #92400e;
}

.phase-overview-status.not-started {
  background: #f3f4f6;
  color: #6b7280;
}

.phase-overview-progress {
  margin-bottom: 8px;
}

.phase-overview-progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.phase-overview-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: width 0.3s ease;
}

.phase-overview-card.completed .phase-overview-progress-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.phase-overview-card.in-progress .phase-overview-progress-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.phase-overview-progress-text {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.phase-overview-time {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-style: italic;
}

/* Mobile responsive for phase overview */
@media (max-width: 768px) {
  .phase-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Improved Actions Grid for Long Lists */
.actions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Custom scrollbar for actions grid */
.actions-grid::-webkit-scrollbar {
  width: 8px;
}

.actions-grid::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}

.actions-grid::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.actions-grid::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Compact instruction cards for better space usage */
.instruction-card {
  padding: 10px 14px;
}

.instruction-card .action-header {
  gap: 10px;
}

.instruction-card .action-text {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .actions-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .instruction-controls {
    width: 100%;
    justify-content: space-between;
  }

  .actions-grid {
    max-height: 400px;
  }
}

/* Button Loading State */
.button-loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: button-spinner-rotate 0.6s linear infinite;
}

.button-loading-spinner--inverse {
  border-color: rgba(59, 130, 246, 0.3);
  border-top-color: #3b82f6;
}

@keyframes button-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Disabled state for loading buttons */
.action-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.action-button:disabled .button-loading-content {
  opacity: 1;
}


/* AI Language Selector Container */
.ai-language-selector-container {
  margin: 24px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.ai-language-selector-container .language-selector {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Definition of Done Action Card */
.definition-of-done-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #10b981;
  cursor: pointer;
  transition: all 0.2s ease;
}

.definition-of-done-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  border-color: #059669;
}

.definition-of-done-card .action-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.definition-of-done-card .action-icon {
  font-size: 24px;
}

.definition-of-done-card .action-text {
  font-weight: 600;
  color: #065f46;
}

.definition-of-done-card .action-description {
  margin-top: 8px;
  padding-left: 36px;
}

.definition-of-done-card .action-description p {
  margin: 0;
  font-size: 14px;
  color: #047857;
  font-style: italic;
}

/* Priority Badge Styles */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-left: auto;
  white-space: nowrap;
}

/* Context Priority - Blue */
.priority-badge.priority-context {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

/* Critical Priority - Red */
.priority-badge.priority-critical {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Important Priority - Orange */
.priority-badge.priority-important {
  background-color: #fed7aa;
  color: #9a3412;
  border: 1px solid #fdba74;
}

/* Optional Priority - Gray */
.priority-badge.priority-optional {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

/* Action Card Priority Styling */
.action-card.priority-context {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.action-card.priority-critical {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
}

.action-card.priority-important {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}

.action-card.priority-optional {
  border-left: 4px solid #9ca3af;
  background: #f9fafb;
}

/* Hover states for priority cards */
.action-card.priority-context:hover {
  border-left-color: #2563eb;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.action-card.priority-critical:hover {
  border-left-color: #b91c1c;
  background: #fee2e2;
}

.action-card.priority-important:hover {
  border-left-color: #d97706;
  background: #fef3c7;
}

.action-card.priority-optional:hover {
  border-left-color: #6b7280;
  background: #f3f4f6;
}

/* Ensure completed state overrides priority styling */
.action-card.completed {
  border-left: 4px solid #10b981 !important;
  background: #f0fdf4 !important;
}

.action-card.completed:hover {
  border-left-color: #10b981 !important;
  background: #f0fdf4 !important;
}

.persona-badge {
  display: inline-block;
}

.persona-badge-content {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-weight: 500;
  transition: all 0.2s ease;
}

.persona-badge.small .persona-badge-content {
  padding: 4px 8px;
  font-size: 0.75rem;
  gap: 4px;
}

.persona-badge.small .persona-icon {
  font-size: 0.875rem;
}

.persona-badge.medium .persona-badge-content {
  padding: 6px 12px;
  font-size: 0.875rem;
  gap: 6px;
}

.persona-badge.medium .persona-icon {
  font-size: 1rem;
}

.persona-badge.large .persona-badge-content {
  padding: 8px 16px;
  font-size: 1rem;
  gap: 8px;
}

.persona-badge.large .persona-icon {
  font-size: 1.25rem;
}

.persona-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-name {
  white-space: nowrap;
}

.persona-description {
  margin-top: 8px;
  padding: 0 4px;
}

.persona-description p {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.4;
}

/* Hover effects */
.persona-badge-content:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
  .persona-badge.large .persona-badge-content {
    padding: 6px 12px;
    font-size: 0.875rem;
  }
  
  .persona-badge.large .persona-icon {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .persona-badge.medium .persona-badge-content,
  .persona-badge.large .persona-badge-content {
    padding: 4px 8px;
    font-size: 0.75rem;
    gap: 4px;
  }
  
  .persona-badge.medium .persona-icon,
  .persona-badge.large .persona-icon {
    font-size: 0.875rem;
  }
  
  .persona-name {
    display: none;
  }
}
.journey-summary {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.summary-header {
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.summary-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.summary-content {
  padding: 20px;
}

.summary-section {
  margin-bottom: 20px;
}

.summary-section:last-child {
  margin-bottom: 0;
}

.summary-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.summary-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #1a1a1a;
  font-weight: 500;
}

.summary-icon {
  font-size: 1rem;
}

.progress-summary {
  background: #f8faff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  padding: 16px;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.progress-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

.progress-stats {
  font-size: 0.875rem;
  color: #3b82f6;
  font-weight: 600;
}

.progress-visual {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-track {
  flex: 1 1;
  height: 6px;
  background-color: #e0e7ff;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-percentage {
  font-size: 0.75rem;
  color: #3b82f6;
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}

.evaluation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.eval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eval-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.eval-rating {
  display: flex;
  gap: 2px;
}

.eval-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #e5e7eb;
  transition: background-color 0.2s ease;
}

.eval-dot.filled {
  background-color: #3b82f6;
}

.summary-actions {
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.reset-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-button:hover {
  background-color: #e5e7eb;
  color: #4b5563;
  border-color: #9ca3af;
}

.reset-icon {
  font-size: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .journey-summary {
    margin-bottom: 20px;
  }
  
  .summary-content {
    padding: 16px;
  }
  
  .summary-header {
    padding: 12px 16px;
  }
  
  .evaluation-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .progress-summary {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .summary-value {
    align-self: flex-end;
  }
  
  .progress-visual {
    flex-direction: column;
    gap: 4px;
  }
  
  .progress-percentage {
    align-self: flex-end;
    min-width: auto;
  }
}/
* Milestone Badge */
.milestone-badge {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 4px 8px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
}

/* Points Summary */
.points-summary {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 16px;
}

.points-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.points-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

.current-points {
  font-size: 0.875rem;
  color: #10b981;
  font-weight: 600;
  background-color: white;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
}

.points-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.points-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.points-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}

.points-value.positive {
  color: #10b981;
}

/* Mobile responsiveness for points */
@media (max-width: 768px) {
  .points-summary {
    padding: 12px;
  }
  
  .points-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .current-points {
    align-self: flex-end;
  }
}
.journey-reset-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.journey-reset-dialog {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.journey-reset-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 28px 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0;
}

.journey-reset-dialog-header h2 {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;
}

.journey-reset-dialog-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-reset-dialog-close:hover:not(:disabled) {
  background: #f3f4f6;
  color: #6b7280;
  transform: scale(1.05);
}

.journey-reset-dialog-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.journey-reset-dialog-content {
  padding: 24px 28px;
}

.journey-reset-warning {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.journey-reset-warning-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.journey-reset-warning p {
  margin: 0 0 10px;
  color: #78350f;
  line-height: 1.5;
}

.journey-reset-warning p strong {
  font-weight: 600;
  color: #78350f;
}

.journey-reset-warning p:last-child {
  margin-bottom: 0;
}

.journey-reset-section {
  margin-bottom: 28px;
}

.journey-reset-section h3 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.015em;
}

.journey-reset-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.journey-reset-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: white;
}

.journey-reset-option:hover:not(:has(input:disabled)) {
  border-color: #3b82f6;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.journey-reset-option.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.journey-reset-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.journey-reset-option-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1;
}

.journey-reset-option-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.journey-reset-option-text {
  flex: 1 1;
}

.journey-reset-option-text strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111827;
  font-size: 1rem;
}

.journey-reset-option-text p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}

.journey-reset-option.selected .journey-reset-option-text strong {
  color: #1e40af;
}

.journey-reset-option.selected .journey-reset-option-text p {
  color: #4b5563;
}

.journey-reset-new-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  padding: 18px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.journey-reset-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-reset-field label {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.journey-reset-field select {
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: all 0.2s;
  background: white;
  color: #111827;
  font-weight: 500;
}

.journey-reset-field select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.journey-reset-field select:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.journey-reset-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  transition: all 0.2s;
}

.journey-reset-checkbox:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.journey-reset-checkbox input[type="checkbox"] {
  accent-color: #3b82f6;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.journey-reset-checkbox span {
  font-weight: 500;
  color: #374151;
  font-size: 0.9375rem;
}

.journey-reset-section label:not(.journey-reset-option):not(.journey-reset-checkbox) {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.journey-reset-section textarea {
  width: 100%;
  padding: 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
  transition: all 0.2s;
  background: white;
  color: #111827;
  line-height: 1.6;
}

.journey-reset-section textarea::placeholder {
  color: #9ca3af;
}

.journey-reset-section textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.journey-reset-section textarea:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.journey-reset-stats {
  padding: 18px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
}

.journey-reset-stats p {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.6;
}

.journey-reset-stats p strong {
  font-weight: 600;
  color: #1f2937;
}

.journey-reset-stats p:last-child {
  margin-bottom: 0;
}

.journey-reset-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px 28px;
  border-top: 1px solid #e5e7eb;
  margin-top: 0;
  background: #fafbfc;
}

.journey-reset-dialog-cancel,
.journey-reset-dialog-confirm {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  letter-spacing: 0.01em;
}

.journey-reset-dialog-cancel {
  background: white;
  color: #374151;
  border: 1.5px solid #d1d5db;
}

.journey-reset-dialog-cancel:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.journey-reset-dialog-confirm {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.journey-reset-dialog-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
  transform: translateY(-2px);
}

.journey-reset-dialog-confirm:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.journey-reset-dialog-cancel:disabled,
.journey-reset-dialog-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.journey-reset-dialog-confirm .button-loading-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.journey-reset-dialog-confirm .button-loading-spinner {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .journey-reset-dialog {
    margin: 20px;
    max-height: calc(100vh - 40px);
  }
  
  .journey-reset-new-setup {
    grid-template-columns: 1fr;
  }
  
  .journey-reset-dialog-actions {
    flex-direction: column-reverse;
  }
  
  .journey-reset-dialog-cancel,
  .journey-reset-dialog-confirm {
    width: 100%;
  }
}
.step-skip-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.step-skip-dialog {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.step-skip-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.step-skip-dialog-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}

.step-skip-dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.step-skip-dialog-close:hover:not(:disabled) {
  background: #f3f4f6;
  color: #374151;
}

.step-skip-dialog-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.step-skip-dialog-content {
  padding: 0 24px;
}

.step-skip-step-info {
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.step-skip-step-info h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.step-skip-step-info p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

.step-skip-warning {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #dbeafe;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  margin-bottom: 24px;
}

.step-skip-warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.step-skip-warning p {
  margin: 0 0 8px;
  color: #1e40af;
}

.step-skip-warning p:last-child {
  margin-bottom: 0;
}

.step-skip-section {
  margin-bottom: 24px;
}

.step-skip-section h4 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.step-skip-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-skip-type {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.step-skip-type:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.step-skip-type input[type="radio"]:checked + div {
  color: #1f2937;
}

.step-skip-type input[type="radio"]:checked {
  accent-color: #3b82f6;
}

.step-skip-type input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.step-skip-type div strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.step-skip-type div p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.step-skip-section label:not(.step-skip-type) {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.step-skip-required {
  color: #dc2626;
}

.step-skip-section textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s;
}

.step-skip-section textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.step-skip-section textarea:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.step-skip-char-count {
  text-align: right;
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 4px;
}

.step-skip-criteria {
  margin: 0;
  padding-left: 20px;
}

.step-skip-criteria li {
  margin-bottom: 8px;
  color: #6b7280;
  line-height: 1.5;
}

.step-skip-criteria li:last-child {
  margin-bottom: 0;
}

.step-skip-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #e5e7eb;
  margin-top: 24px;
}

.step-skip-dialog-cancel,
.step-skip-dialog-confirm {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.step-skip-dialog-cancel {
  background: #f3f4f6;
  color: #374151;
}

.step-skip-dialog-cancel:hover:not(:disabled) {
  background: #e5e7eb;
}

.step-skip-dialog-confirm {
  background: #f59e0b;
  color: white;
}

.step-skip-dialog-confirm:hover:not(:disabled) {
  background: #d97706;
}

.step-skip-dialog-cancel:disabled,
.step-skip-dialog-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .step-skip-dialog {
    margin: 20px;
    max-height: calc(100vh - 40px);
  }
  
  .step-skip-dialog-actions {
    flex-direction: column-reverse;
  }
  
  .step-skip-dialog-cancel,
  .step-skip-dialog-confirm {
    width: 100%;
  }
}
.workflow-display {
  max-width: none;
  /* Remove max-width constraint to use full available width */
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.workflow-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 5px;
}

.workflow-tab {
  flex: 1 1;
  max-width: 200px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.workflow-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.workflow-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: white;
}

.workflow-full-width {
  width: 100%;
}

.workflow-header {
  /* margin-bottom: 30px; */
}

.workflow-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.workflow-title h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #1a1a1a;
}

.workflow-content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  /* 3:2 ratio as requested */
  grid-gap: 40px;
  gap: 40px;
  align-items: start;
}

.workflow-main {
  min-height: 600px;
  width: 100%;
}

.workflow-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  min-width: 0;
  /* Allow shrinking */
  overflow-x: auto;
  /* Handle overflow gracefully */
  max-width: 60%;
  /* Prevent horizontal overflow */
}

/* Responsive design */
@media (max-width: 1200px) {
  .workflow-content {
    grid-template-columns: 3fr 2fr;
    /* Maintain 3:2 ratio */
    gap: 30px;
  }
}

@media (max-width: 1024px) {
  .workflow-content {
    grid-template-columns: 3fr 2fr;
    /* Maintain 3:2 ratio */
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .workflow-display {
    padding: 15px;
  }

  .workflow-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .workflow-sidebar {
    position: static;
    order: -1;
    max-width: 100%;
    /* Reset max-width for mobile */
  }

  .workflow-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .workflow-title h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .workflow-display {
    padding: 10px;
  }

  .workflow-title h1 {
    font-size: 1.25rem;
  }
}
.skill-selector {
  position: relative;
  width: 100%;
}

.skill-selector-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.label-text {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}

.label-hint {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-left: 4px;
}

.error-text {
  font-size: 14px;
  color: #dc3545;
  font-weight: 400;
}

.selected-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.skill-remove {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.skill-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

.skill-search {
  position: relative;
  margin-bottom: 8px;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search:hover {
  background: #f8f9fa;
  color: #333;
}

.skill-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.skill-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 500px;
  /* Increased max-height for better visibility */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

.close-dropdown {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-dropdown:hover {
  background: #e9ecef;
  color: #333;
}

.skill-categories {
  padding: 8px;
  background: #f8f9fa;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  overflow-x: auto;
  /* Allow horizontal scrolling for tabs if needed */
}

.category-tabs {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent tabs from wrapping */
  gap: 4px;
}

.skills-list {
  flex-grow: 1;
  /* Allow this to take up remaining space */
  overflow-y: auto;
  padding: 0;
  /* min-height: 200px; */
  max-height: 350px;
}

.skill-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  position: relative;
  margin-bottom: 4px;
}

.skill-option:hover {
  border-color: #3b82f6;
  background-color: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-checkbox {
  margin: 0;
  margin-right: 8px;
}

.skill-name {
  flex: 1 1;
  font-size: 15px;
  color: #334155;
  font-weight: 500;
  line-height: 1.4;
}

.skill-checkmark {
  color: #10b981;
  font-weight: bold;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.skill-option:has(.skill-checkbox:checked) .skill-checkmark {
  opacity: 1;
}

.skill-option:has(.skill-checkbox:checked) {
  background-color: #f0f9ff;
  border-color: #3b82f6;
}

.skill-option:has(.skill-checkbox:checked) .skill-name {
  color: #1e40af;
  font-weight: 600;
}

.no-skills-found {
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
  font-style: italic;
}

.browse-skills-btn {
  width: 100%;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.browse-skills-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #495057;
}

/* Category tabs */
.skill-categories {
  margin-bottom: 16px;
}

.category-tabs {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent tabs from wrapping */
  gap: 4px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.category-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-tab:hover {
  background-color: #e2e8f0;
  color: #334155;
}

.category-tab.active {
  background-color: #3b82f6;
  color: white;
}

/* Skills grid layout */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 12px;
}

@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr;
    max-height: 250px;
  }

  .category-tabs {
    flex-direction: row;
    /* Keep tabs in a row on mobile */
  }

  .category-tab {
    text-align: left;
    padding: 12px 16px;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .skill-dropdown {
    max-height: 350px;
  }

  .selected-skills {
    padding: 8px;
  }

  .skill-tag {
    font-size: 13px;
    padding: 4px 8px;
  }
}

/* Accessibility improvements */
.skill-option:focus-within {
  background: #e3f2fd;
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .skill-dropdown {
    border: 3px solid #000;
  }

  .skill-tag {
    border: 2px solid #000;
  }

  .selected-skills {
    border: 2px solid #000;
  }
}

/* Summary section */
.skills-summary {
  padding: 10px 16px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 8px;
  font-size: 14px;
  color: #475569;
  font-weight: 600;
  margin: 8px 12px 12px 12px;
  text-align: center;
  border: 1px solid #cbd5e1;
}

/* Next Question Button - inline within selected items */
.next-question-btn-inline {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.next-question-btn-inline:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}

.next-question-btn-inline:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.next-question-btn-inline i {
  font-size: 16px;
}
.industry-selector {
  position: relative;
  width: 100%;
}

.industry-selector-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.label-text {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}

.label-hint {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-left: 4px;
}

.error-text {
  font-size: 14px;
  color: #dc3545;
  font-weight: 400;
}

.selected-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #28a745;
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.industry-remove {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.industry-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

.industry-search {
  position: relative;
  margin-bottom: 8px;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: #28a745;
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search:hover {
  background: #f8f9fa;
  color: #333;
}

.industry-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.industry-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 500px; /* Increased max-height for better visibility */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

.close-dropdown {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-dropdown:hover {
  background: #e9ecef;
  color: #333;
}

.industry-categories {
  padding: 8px;
  background: #f8f9fa;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  overflow-x: auto;
}

.category-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.industries-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 200px;
  max-height: 350px;
}

.industry-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  position: relative;
  margin-bottom: 4px;
}

.industry-option:hover {
  border-color: #28a745;
  background-color: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.industry-checkbox {
  margin: 0;
  margin-right: 8px;
}

.industry-name {
  flex: 1 1;
  font-size: 15px;
  color: #334155;
  font-weight: 500;
  line-height: 1.4;
}

.industry-checkmark {
  color: #10b981;
  font-weight: bold;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.industry-option:has(.industry-checkbox:checked) .industry-checkmark {
  opacity: 1;
}

.industry-option:has(.industry-checkbox:checked) {
  background-color: #f0fdf4;
  border-color: #28a745;
}

.industry-option:has(.industry-checkbox:checked) .industry-name {
  color: #166534;
  font-weight: 600;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.category-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-tab:hover {
  background-color: #e2e8f0;
  color: #334155;
}

.category-tab.active {
  background-color: #28a745;
  color: white;
}

/* Industries grid layout */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 12px;
}

@media (max-width: 768px) {
  .industries-grid {
    grid-template-columns: 1fr;
    max-height: 250px;
  }
  
  .category-tabs {
    flex-direction: row;
  }
  
  .category-tab {
    text-align: left;
    padding: 12px 16px;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .industry-dropdown {
    max-height: 350px;
  }
  
  .selected-industries {
    padding: 8px;
  }
  
  .industry-tag {
    font-size: 13px;
    padding: 4px 8px;
  }
}

/* Accessibility improvements */
.industry-option:focus-within {
  background: #d4edda;
  outline: 2px solid #28a745;
  outline-offset: -2px;
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .industry-dropdown {
    border: 3px solid #000;
  }
  
  .industry-tag {
    border: 2px solid #000;
  }
  
  .selected-industries {
    border: 2px solid #000;
  }
}

/* Summary section */
.industries-summary {
  padding: 10px 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 8px;
  font-size: 14px;
  color: #16a34a;
  font-weight: 600;
  margin: 8px 12px 12px 12px;
  text-align: center;
  border: 1px solid #bbf7d0;
}

/* Next Question Button - inline within selected items */
.next-question-btn-inline {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.next-question-btn-inline:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}

.next-question-btn-inline:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.next-question-btn-inline i {
  font-size: 16px;
}
.problem-type-selector {
  width: 100%;
}

.problem-type-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.label-text {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}

.label-hint {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-left: 4px;
}

.error-text {
  font-size: 14px;
  color: #dc3545;
  font-weight: 400;
}

.problem-types-container {
  max-width: 100%;
}

.problem-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 1200px) {
  .problem-types-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .problem-types-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .problem-types-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.problem-type-card {
  padding: 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.problem-type-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
  transform: translateY(-2px);
}

.problem-type-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-3px);
}

.problem-type-card:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.problem-type-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.card-content {
  flex: 1 1;
}

.problem-type-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.selection-indicator {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: white;
}

.radio-indicator.selected {
  border-color: #3b82f6;
  background: #3b82f6;
}

.checkmark {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.problem-type-description {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.problem-type-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.example-tag {
  display: inline-block;
  padding: 3px 8px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}

.problem-type-card.selected .example-tag {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}

.selected-problem-summary {
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  animation: slideIn 0.3s ease-out;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-icon {
  font-size: 24px;
}

.summary-text {
  font-size: 16px;
  color: #1e40af;
}

.selected-problem-type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  font-size: 14px;
}

.selected-label {
  font-weight: 500;
  color: #155724;
}

.selected-value {
  color: #155724;
  font-weight: 600;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Radio indicator */
.radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 0.2s ease;
}

.radio-indicator.selected {
  border-color: #3b82f6;
  background: #3b82f6;
}

.radio-indicator .checkmark {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Selected problem summary */
.selected-problem-summary {
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  margin-top: 16px;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-icon {
  font-size: 24px;
}

.summary-text {
  font-size: 15px;
  color: #0c4a6e;
}

.summary-text strong {
  color: #0c4a6e;
  font-weight: 600;
}

/* Search and Filter Controls */
.problem-type-controls {
  margin-bottom: 24px;
}

.search-container {
  position: relative;
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.clear-search:hover {
  background-color: #f1f5f9;
  color: #374151;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-filter {
  padding: 8px 16px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-filter:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.category-filter.active {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}

.results-summary {
  text-align: center;
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
  font-weight: 500;
}

.problem-type-category {
  margin-top: 12px;
  text-align: center;
}

.category-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.problem-type-card.selected .category-badge {
  background: #dbeafe;
  color: #1e40af;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .category-filters {
    justify-content: center;
  }
  
  .category-filter {
    flex: 1 1;
    min-width: 120px;
  }
}
.market-selector {
  margin: 16px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.market-selector-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.market-selector-dropdown {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.market-selector-dropdown:hover:not(:disabled) {
  border-color: #007bff;
}

.market-selector-dropdown:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.market-selector-dropdown:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

.market-selector-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.detail-level-selector {
  margin: 16px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.detail-level-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.detail-level-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.detail-level-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.detail-level-option:hover:not(:disabled) {
  border-color: #007bff;
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);
}

.detail-level-option.selected {
  border-color: #007bff;
  background: #e3f2fd;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.detail-level-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.detail-level-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

.detail-level-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  display: block;
}

.detail-level-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  display: block;
}

.detail-level-option.selected .detail-level-name {
  color: #007bff;
}

@media (max-width: 768px) {
  .detail-level-options {
    grid-template-columns: 1fr;
  }
}

.quickfire-idea-generator {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

/* Progress Indicator Styles - moved inside generator */
.quickfire-idea-generator .progress-indicator {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.quickfire-idea-generator .progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.quickfire-idea-generator .step-number {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.2s ease;
}

.quickfire-idea-generator .progress-step.pending .step-number {
  background-color: #f3f4f6;
  color: #9ca3af;
  border: 2px solid #e5e7eb;
}

.quickfire-idea-generator .progress-step.active .step-number {
  background-color: #3b82f6;
  color: white;
  border: 2px solid #3b82f6;
}

.quickfire-idea-generator .progress-step.completed .step-number {
  background-color: #10b981;
  color: white;
  border: 2px solid #10b981;
}

.quickfire-idea-generator .step-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

.quickfire-idea-generator .progress-connector {
  width: 4rem;
  height: 2px;
  background: #e5e7eb;
  margin: 0 1rem;
}

@media (min-width: 768px) {
  .quickfire-idea-generator {
    padding: 32px 40px;
  }
}

@media (min-width: 1200px) {
  .quickfire-idea-generator {
    padding: 40px 48px;
  }
}

.generator-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.generator-header h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.generator-header p {
  font-size: 18px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

.generator-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 32px;
  gap: 32px;
  margin-bottom: 40px;
}

@media (min-width: 1200px) {
  .generator-form {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .generator-form {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .generator-form {
    gap: 24px;
  }
}

/* Updated Form Section Styles (now used within tabs) */
.form-section {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  transition: none;
}

.form-section:hover {
  border: none;
  box-shadow: none;
}

.form-section-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
  text-align: center;
}

.form-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-section-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 8px 0 0 0;
  font-weight: 400;
}

/* Navigation Actions - for Next Question button */
.navigation-actions {
  display: flex;
  justify-content: center;
  margin: 24px 0 16px 0;
}

.next-question-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.next-question-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Generator Actions - for Generate Ideas button */
.generator-actions {
  display: flex;
  justify-content: center;
  margin: 40px 0 32px 0;
  padding: 20px 0;
  border-top: 1px solid #e2e8f0;
}

/* Add top margin when on final step (problems tab) */
.generator-actions.final-step {
  margin-top: 48px;
  border-top: 2px solid #e2e8f0;
}

.btn {
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  min-height: 56px;
  position: relative;
  text-transform: none;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: 1px solid #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
  font-weight: 600;
  letter-spacing: 0.25px;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  border-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.35);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

.btn:disabled {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #6c757d !important;
  border: 2px solid #dee2e6 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
  opacity: 0.7;
}

/* Add a pulsing effect for form completion encouragement */
.btn:disabled::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #60a5fa, #34d399, #fbbf24, #f87171);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  animation: none;
}

.btn.almost-ready:disabled::after {
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

.btn.loading {
  position: relative;
  color: #ffffff !important;
  cursor: not-allowed;
  pointer-events: none;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  border: 1px solid #007bff !important;
  opacity: 0.95 !important;
}

.btn.loading .button-loading-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn.loading .button-loading-spinner {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .btn.loading .button-loading-spinner {
    animation: button-spinner-rotate 1.2s linear infinite;
  }
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #f5c6cb;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.error-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.generator-info {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.info-text {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* Tabbed Form Interface */
.form-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  padding: 0 20px;
}

.form-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 180px;
  margin: 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-tab:hover:not(.disabled):not(.active):not(.completed) {
  border-color: #60a5fa;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.form-tab.active {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  transform: translateY(-4px);
}

.form-tab.active .tab-title {
  color: white;
  font-weight: 700;
}

.form-tab.active .tab-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

.form-tab.active .tab-icon {
  color: white;
}

.form-tab.completed {
  border-color: #10b981;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

.form-tab.completed .tab-title {
  color: white;
  font-weight: 600;
}

.form-tab.completed .tab-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

.form-tab.completed .tab-icon {
  color: white;
}

.form-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: #f8f9fa;
  border-color: #e9ecef;
}

.form-tab.disabled .tab-title {
  color: #adb5bd;
}

.form-tab.disabled .tab-subtitle {
  color: #ced4da;
}

.tab-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tab-icon {
  font-size: 20px;
}

.tab-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.tab-checkmark {
  color: #10b981;
  font-size: 16px;
  font-weight: bold;
}

.tab-subtitle {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  line-height: 1.3;
}

.tab-connector {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 16px;
  height: 2px;
  background: #e2e8f0;
  transform: translateY(-50%);
}

.form-tab.completed + .tab-connector {
  background: #10b981;
}

.form-tab.active + .tab-connector {
  background: #3b82f6;
}

.tab-content {
  min-height: 450px;
  padding: 20px 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive design */
@media (max-width: 768px) {
  .quickfire-idea-generator {
    margin: 16px;
    padding: 20px;
  }
  
  .generator-header h3 {
    font-size: 20px;
  }
  
  .generator-header p {
    font-size: 14px;
  }
  
  .generator-form {
    gap: 20px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 14px;
    min-width: 140px;
  }
  
  .form-tabs {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-tab {
    margin: 4px 0;
    min-width: auto;
  }
  
  .tab-connector {
    display: none;
  }
}

/* Focus states for accessibility */
.btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .quickfire-idea-generator {
    border: 2px solid #000;
  }
  
  .btn-primary {
    border: 2px solid #000;
  }
  
  .error-message {
    border: 2px solid #721c24;
  }
}


/* Generation Options Container */
.quickfire-idea-generator .generation-options {
  margin: 24px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  animation: fadeIn 0.3s ease-in;
}

.quickfire-idea-generator .generation-options > * {
  margin: 0 0 16px 0;
  padding: 0;
  background: transparent;
  border: none;
}

.quickfire-idea-generator .generation-options > *:last-child {
  margin-bottom: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.business-kit-enhancements {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.enhancements-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.enhancements-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.5rem;
}

.enhancements-header p {
  font-size: 0.95rem;
  color: #6c757d;
  margin: 0;
}

/* Enhancement Section */
.enhancement-section {
  margin-bottom: 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  overflow: hidden;
  transition: all 0.3s ease;
}

.enhancement-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.section-header:hover {
  background: #f8f9fa;
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-icon {
  font-size: 1.5rem;
}

.section-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.section-content {
  padding: 1.25rem;
  border-top: 1px solid #e9ecef;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Revenue Model Styles */
.revenue-estimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.estimate-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2e7d32;
}

.estimate-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1b5e20;
}

.monetization-strategies {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.strategy-card {
  padding: 1.25rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007bff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.strategy-card:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.strategy-header {
  margin-bottom: 0.75rem;
}

.strategy-type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #007bff;
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

.strategy-type.subscription {
  background: #28a745;
}

.strategy-type.freemium {
  background: #17a2b8;
}

.strategy-type.usage-based {
  background: #ffc107;
  color: #212529;
}

.strategy-type.one-time {
  background: #6f42c1;
}

.strategy-description {
  font-size: 0.95rem;
  color: #495057;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.strategy-details {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 4px;
}

.detail-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
}

.detail-value {
  font-size: 0.9rem;
  color: #212529;
  font-weight: 500;
}

/* Market Analysis Styles */
.market-size-card {
  padding: 1.25rem;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.market-size-card h5 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1565c0;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.market-size-value {
  font-size: 1.1rem;
  color: #0d47a1;
  font-weight: 600;
  margin: 0;
}

.competitors-section,
.opportunities-section {
  margin-top: 1.5rem;
}

.competitors-section h5,
.opportunities-section h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 1rem;
}

.competitors-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.competitor-card {
  padding: 1.25rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

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

.competitor-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 1rem;
}

.competitor-analysis {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.strengths,
.weaknesses {
  padding: 0.75rem;
  border-radius: 6px;
}

.strengths {
  background: #f1f8f4;
  border-left: 3px solid #28a745;
}

.weaknesses {
  background: #fff3f3;
  border-left: 3px solid #dc3545;
}

.analysis-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.strengths .analysis-label {
  color: #28a745;
}

.weaknesses .analysis-label {
  color: #dc3545;
}

.competitor-analysis ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.competitor-analysis li {
  font-size: 0.9rem;
  color: #495057;
  padding: 0.25rem 0;
  padding-left: 1.25rem;
  position: relative;
}

.competitor-analysis li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.opportunities-list {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.opportunity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border-radius: 6px;
  border-left: 3px solid #ffc107;
}

.opportunity-item i {
  color: #ff9800;
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.opportunity-item span {
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.5;
}

/* Resource Requirements Styles */
.skills-section,
.tools-section,
.cost-estimate-section {
  margin-bottom: 1.5rem;
}

.skills-section h5,
.tools-section h5,
.cost-estimate-section h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 1rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.skill-card {
  padding: 1rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.skill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.skill-card.level-beginner {
  border-left: 3px solid #28a745;
}

.skill-card.level-intermediate {
  border-left: 3px solid #ffc107;
}

.skill-card.level-advanced {
  border-left: 3px solid #dc3545;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.skill-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #212529;
}

.skill-level {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.skill-level.beginner {
  background: #d4edda;
  color: #155724;
}

.skill-level.intermediate {
  background: #fff3cd;
  color: #856404;
}

.skill-level.advanced {
  background: #f8d7da;
  color: #721c24;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #007bff;
  margin-top: 0.25rem;
}

.tools-list {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.tool-card {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.tool-name {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}

.tool-cost {
  font-size: 0.9rem;
  font-weight: 600;
  color: #28a745;
  padding: 0.25rem 0.75rem;
  background: #d4edda;
  border-radius: 12px;
}

.tool-purpose {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.tool-alternatives {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.alternatives-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  display: block;
  margin-bottom: 0.5rem;
}

.alternatives-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alternative-tag {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  color: #495057;
}

.cost-estimate-section {
  padding: 1.25rem;
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border-radius: 8px;
}

.cost-summary {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.cost-range {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.cost-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: white;
  border-radius: 6px;
}

.cost-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cost-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.cost-value.minimum {
  color: #28a745;
}

.cost-value.recommended {
  color: #6f42c1;
}

.cost-breakdown {
  padding: 1rem;
  background: white;
  border-radius: 6px;
}

.breakdown-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  display: block;
  margin-bottom: 0.75rem;
}

.breakdown-items {
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
}

.breakdown-category {
  font-size: 0.9rem;
  color: #495057;
}

.breakdown-amount {
  font-size: 0.9rem;
  font-weight: 600;
  color: #212529;
}

/* Launch Guide Styles */
.timeline-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #3f51b5;
}

.timeline-summary i {
  font-size: 1.25rem;
}

.launch-phases {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.phase-card {
  padding: 1.25rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  position: relative;
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.phase-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.phase-info {
  flex: 1 1;
}

.phase-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  margin: 0 0 0.25rem 0;
}

.phase-duration {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
}

.phase-milestones,
.phase-actions {
  margin-top: 1rem;
}

.milestones-label,
.actions-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phase-milestones ul,
.phase-actions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.phase-milestones li,
.phase-actions li {
  font-size: 0.9rem;
  color: #495057;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}

.phase-milestones li::before {
  content: "🎯";
  position: absolute;
  left: 0;
}

.phase-actions li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

.phase-connector {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
  color: #6c757d;
  font-size: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .business-kit-enhancements {
    padding: 1rem;
  }

  .enhancements-header h3 {
    font-size: 1.25rem;
  }

  .section-header {
    padding: 0.875rem 1rem;
  }

  .section-content {
    padding: 1rem;
  }

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

  .cost-range {
    grid-template-columns: 1fr;
  }

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

/* Enhanced TabbedIdeaSelector Styles */

.idea-tabs-container {
  width: 100%;
  max-width: calc(100vw - 280px);
  /* Account for sidebar space */
  margin: 0;
  padding: 1.5rem;
  background: #fafbfc;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Adjust for collapsed sidebar */
@media (max-width: 1024px) {
  .idea-tabs-container {
    max-width: calc(100vw - 80px);
    /* Collapsed sidebar space */
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .idea-tabs-container {
    max-width: 100vw;
    padding: 1rem;
  }
}

/* Progress Header */
.progress-header {
  margin-bottom: 2rem;
}

.progress-indicator {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.progress-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* View Controls */
.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.view-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.25rem;
  gap: 0.25rem;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.toggle-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

.toggle-btn.active {
  background: white;
  color: #3b82f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.keyboard-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f9fafb;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Enhanced Tab Headers */
.idea-tabs-header {
  display: flex;
  margin-bottom: 2rem;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.idea-tab {
  flex: 1 1;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 110px;
  margin: 0 4px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.idea-tab:hover:not(.active) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-3px);
  border-color: #cbd5e1;
  border-bottom-color: #60a5fa;
  border-bottom-color: var(--idea-color, #60a5fa);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.idea-tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-color: #3b82f6;
  border-bottom-color: #3b82f6;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  z-index: 10;
}

.tab-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.tab-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  background: #f3f4f6;
  color: #6b7280;
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
}

.idea-tab.active .tab-icon {
  background: #ffffff;
  color: #1e40af;
  transform: scale(1.15);
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tab-info {
  text-align: center;
}

.tab-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}

.tab-preview {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.3;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.idea-tab.active .tab-title,
.idea-tab.active .tab-preview {
  color: #ffffff;
  font-weight: 700;
}

.idea-tab.active .tab-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enhanced Idea Card */
.idea-tab-content {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.enhanced-idea-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Idea Header */
.idea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.idea-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.idea-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feasibility-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.feasibility-badge.high {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.feasibility-badge.medium {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.feasibility-badge.low {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Quick actions and action buttons removed - were non-functional */

/* Enhanced Title */
.enhanced-idea-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.enhanced-idea-title .feasibility-badge {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

/* Problem & Solution Section */
.problem-solution-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.problem-card,
.solution-card {
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.problem-card {
  background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
  border: 1px solid #fecaca;
}

.solution-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #f7fef7 100%);
  border: 1px solid #bbf7d0;
}

.section-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.section-content {
  flex: 1 1;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.section-text {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Metadata Grid */
.metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.metadata-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.metadata-icon {
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.metadata-content {
  flex: 1 1;
}

.metadata-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.metadata-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.metadata-value.feasibility-high {
  color: #059669;
}

.metadata-value.feasibility-medium {
  color: #d97706;
}

.metadata-value.feasibility-low {
  color: #dc2626;
}

/* Technical Details */
.technical-details {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.technical-toggle {
  width: 100%;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s ease;
}

.technical-toggle:hover {
  background: #f3f4f6;
}

.technical-toggle span {
  flex: 1 1;
  text-align: left;
}

.technical-content {
  padding: 1.5rem;
  background: white;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tech-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.tech-row:last-child {
  border-bottom: none;
}

.tech-label {
  min-width: 140px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-tag {
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #bfdbfe;
}

.tech-tag.unknown {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.tech-value {
  font-size: 0.875rem;
  color: #374151;
  flex: 1 1;
}

/* Validation Section */
.validation-section {
  background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
}

.validation-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 1rem 0;
}

.validation-question {
  font-size: 0.875rem;
  color: #451a03;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
  font-style: italic;
}

.validation-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

.validation-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid transparent;
  background: #ffffff;
  color: #374151;
  min-width: 140px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}

.validation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.validation-btn.btn-yes {
  border-color: #10b981;
  color: #047857;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.validation-btn.btn-yes:hover {
  border-color: #059669;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.validation-btn.btn-yes.selected {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.validation-btn.btn-maybe {
  border-color: #f59e0b;
  color: #b45309;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

.validation-btn.btn-maybe:hover {
  border-color: #d97706;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.validation-btn.btn-maybe.selected {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

.validation-btn.btn-no {
  border-color: #ef4444;
  color: #b91c1c;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.validation-btn.btn-no:hover {
  border-color: #dc2626;
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}

.validation-btn.btn-no.selected {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

/* CTA Section */
.cta-section {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 2px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
}

.select-idea-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: white;
  border: 3px solid #3b82f6;
  border-radius: 16px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
  min-width: 320px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.select-idea-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.45);
}

.select-idea-btn:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
}

.select-idea-btn:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  border-color: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.next-steps-preview {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: white;
  font-style: italic;
}

/* Comparison View */
.comparison-view {
  animation: slideInUp 0.4s ease-out;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.comparison-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.comparison-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.idea-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.comparison-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.comparison-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  flex: 1 1;
}

.comparison-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.comparison-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comparison-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.5;
  word-wrap: break-word;
  width: 100%;
}

.comparison-value.full-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

.select-comparison-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-comparison-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.select-comparison-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state p {
  font-size: 1.125rem;
  color: #6b7280;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .problem-solution-section {
    grid-template-columns: 1fr;
  }

  .metadata-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .comparison-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .idea-tabs-container {
    padding: 1rem;
  }

  .view-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .keyboard-hint {
    display: none;
  }

  .idea-tabs-header {
    flex-direction: column;
  }

  .idea-tab {
    padding: 1rem;
  }

  .tab-header-content {
    flex-direction: row;
    justify-content: flex-start;
  }

  .enhanced-idea-card {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .idea-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

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

  .validation-buttons {
    flex-direction: column;
  }

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

  .enhanced-idea-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .select-idea-btn {
    min-width: auto;
    width: 100%;
  }

  .tab-preview {
    display: none;
  }

  .comparison-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .comparison-value {
    text-align: left;
    max-width: none;
  }
}

/* Focus states for accessibility */
.idea-tab:focus,
.toggle-btn:focus,
.validation-btn:focus,
.select-idea-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {

  .idea-tab,
  .validation-btn,
  .select-idea-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .idea-tab:hover,
  .select-idea-btn:hover,
  .validation-btn:hover {
    transform: none;
  }
}
/* Launch Assets Generator Page Styles */

.launch-assets-page {
  padding: 2rem 0;
}

/* Header */
.page-header {
  margin-bottom: 2rem;
}

.header-content h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-content h1 i {
  color: #f59e0b;
}

.subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin-bottom: 1rem;
}

.project-info {
  padding: 0.75rem 1rem;
  background: #f1f5f9;
  border-radius: 0.5rem;
  color: #475569;
  display: inline-block;
}

/* Tabs */
.tabs-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e2e8f0;
}

.tab {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  color: #64748b;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab:hover {
  color: #3b82f6;
  background: #f1f5f9;
}

.tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toolbar */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 0.5rem;
}

.toolbar-actions {
  display: flex;
  gap: 0.5rem;
}

.selected-count {
  font-weight: 500;
  color: #475569;
}

/* Asset Categories */
.asset-category {
  margin-bottom: 2.5rem;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.category-title i {
  font-size: 1.25rem;
}

.category-title h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.category-title .badge {
  background: #e2e8f0;
  color: #475569;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.875rem;
}

/* Asset Grid */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

/* Asset Card */
.asset-card {
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.asset-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.asset-card.selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.asset-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 0.5rem;
  color: #3b82f6;
  font-size: 1.5rem;
}

.asset-card.selected .asset-icon {
  background: #dbeafe;
  color: #2563eb;
}

.asset-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.asset-card-body h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.asset-card-body p {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.asset-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge-ai {
  background: #fef3c7;
  color: #92400e;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-time {
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Generate Section */
.generate-section {
  margin-top: 2rem;
  padding: 2rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  text-align: center;
}

.generate-section .btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.help-text {
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.875rem;
}

/* Generated Assets */
.generated-container {
  padding: 1rem 0;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state i {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.empty-state h3 {
  color: #475569;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: #64748b;
  margin-bottom: 1.5rem;
}

/* Assets List */
.assets-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.generated-asset {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: white;
  overflow: hidden;
}

.asset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  cursor: pointer;
  transition: background 0.2s;
}

.asset-header:hover {
  background: #f8fafc;
}

.asset-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.asset-title i {
  font-size: 1.25rem;
}

.asset-title h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.asset-actions {
  display: flex;
  gap: 0.5rem;
}

.asset-content {
  padding: 1.25rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.asset-content pre {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.asset-metadata {
  padding: 0.75rem 1.25rem;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: #64748b;
}

.asset-metadata span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Loading */
.loading-container {
  text-align: center;
  padding: 4rem 2rem;
}

.loading-container p {
  margin-top: 1rem;
  color: #64748b;
}

/* Auth Required */
.auth-required {
  text-align: center;
  padding: 4rem 2rem;
}

.auth-required h2 {
  color: #1e293b;
  margin-bottom: 1rem;
}

.auth-required p {
  color: #64748b;
  margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .asset-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .toolbar-actions {
    justify-content: center;
  }

  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

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

  .asset-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .asset-metadata {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Storage Notice */
.storage-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  color: #065f46;
}

.storage-notice i {
  font-size: 1.25rem;
}

/* Info Banner */
.info-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.info-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-content i {
  font-size: 1.5rem;
  color: #3b82f6;
  margin-top: 0.125rem;
}

.info-content strong {
  display: block;
  color: #1e40af;
  margin-bottom: 0.25rem;
}

.info-content p {
  margin: 0;
  color: #1e40af;
  font-size: 0.875rem;
}

/* Bulk Actions Toolbar */
.bulk-actions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.toolbar-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  color: #475569;
}

.toolbar-info i {
  font-size: 1.25rem;
}

.toolbar-actions {
  display: flex;
  gap: 0.75rem;
}

.toolbar-actions .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.toolbar-actions .btn i {
  font-size: 1rem;
}

.download-button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.download-button-group .btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .info-banner {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .storage-notice {
    flex-direction: column;
    text-align: center;
  }

  .bulk-actions-toolbar {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .toolbar-info {
    justify-content: center;
  }

  .toolbar-actions {
    flex-direction: column;
  }

  .toolbar-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .download-button-group {
    flex-direction: column;
    width: 100%;
  }

  .download-button-group .btn {
    width: 100%;
  }
}

/* Review Mode Banner */
.viewing-completed-step-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.viewing-completed-step-banner .banner-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.viewing-completed-step-banner .banner-content i {
  font-size: 1.5rem;
  color: #f59e0b;
  margin-top: 0.125rem;
}

.viewing-completed-step-banner .banner-content strong {
  display: block;
  color: #92400e;
  margin-bottom: 0.25rem;
}

.viewing-completed-step-banner .banner-content p {
  margin: 0;
  color: #92400e;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .viewing-completed-step-banner {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}

/* Button Styles */
.btn-outline {
  border: 1px solid #e2e8f0;
  background: white;
  color: #475569;
  transition: all 0.2s;
}

.btn-outline:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

.btn-link {
  background: none;
  border: none;
  color: #3b82f6;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-link:hover {
  color: #2563eb;
}

/* Legal Pages Styles */

.legal-page-container {
    min-height: 100vh;
    background-color: #f9fafb;
    padding: 2rem 1rem;
}

.legal-page-content {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-button {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.back-button:hover {
    background-color: #eff6ff;
}

.legal-page-content h1 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
    font-size: 2.5rem;
    font-weight: 700;
}

.last-updated {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 2rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.legal-page-content section {
    margin: 2.5rem 0;
}

.legal-page-content h2 {
    color: #1f2937;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
}

.legal-page-content h3 {
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}

.legal-page-content p {
    color: #4b5563;
    line-height: 1.8;
    margin: 1rem 0;
}

.legal-page-content ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.legal-page-content li {
    color: #4b5563;
    line-height: 1.8;
    margin: 0.75rem 0;
}

.legal-page-content strong {
    color: #1f2937;
    font-weight: 600;
}

/* Highlight sections */
.highlight-section {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.highlight-section h2 {
    color: #92400e;
    margin-top: 0;
}

.highlight-section p {
    color: #78350f;
}

.info-box {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border: 1px solid #fbbf24;
}

.info-box h3 {
    color: #92400e;
    margin-top: 0;
}

.info-box p {
    color: #78350f;
    margin-bottom: 0;
}

.disclaimer {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 6px;
    font-size: 0.95rem;
}

.contact-info {
    background: #f3f4f6;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    margin: 1rem 0;
    font-family: monospace;
}

.acknowledgment {
    background: #ecfdf5;
    border: 2px solid #10b981;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.acknowledgment p {
    color: #065f46;
    margin: 0;
    font-size: 1.05rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .legal-page-content {
        padding: 2rem 1.5rem;
    }

    .legal-page-content h1 {
        font-size: 2rem;
    }

    .legal-page-content h2 {
        font-size: 1.5rem;
    }

    .legal-page-content h3 {
        font-size: 1.15rem;
    }

    .highlight-section {
        padding: 1.5rem;
    }

    .info-box {
        padding: 1rem;
    }
}
/* CountrySelector styles - Modern dropdown matching TopNavbar */
.country-selector {
  position: relative;
  z-index: 1000;
}

.country-selector-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #475569;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: space-between;
}

.country-selector-button:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.country-selector-button:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.country-selector-text {
  flex: 1 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-chevron {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.dropdown-chevron.rotated {
  transform: rotate(180deg);
}

.country-selector-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
  padding: 0.5rem;
  z-index: 1100;
  max-height: 200px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.country-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
  text-align: left;
  transition: all 0.2s ease;
}

.country-option:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.country-option.selected {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  font-weight: 500;
}

/* Dark theme support */
.dark-theme .country-selector-button {
  background-color: rgba(30, 30, 30, 0.9);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .country-selector-dropdown {
  background-color: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .country-option {
  color: #e5e7eb;
}

.dark-theme .country-option:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Website Messages Container */
.website-messages-container {
  width: 100%;
  position: relative;
  z-index: 10;
}

/* Single Message View (Carousel) */
.website-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-radius: 9999px !important;
  background: rgba(37, 99, 235, 0.95) !important;
  color: white !important;
  width: 100%;
  
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  /* padding: 12px 20px !important; */
    opacity: 0.9;
  contain: layout style !important;
}

.website-message.expanded {
  padding: 1rem 1.25rem;
}

.website-message:hover {
  background: rgba(37, 99, 235, 1) !important;
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 1;
  min-width: 0; /* Allow text to shrink */
  position: relative;
}

.message-icon {
  font-size: 20px !important;
  flex-shrink: 0;
  color: white !important;
  opacity: 1 !important;
}

.message-text {
  flex: 1 1;
  overflow: hidden;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  color: white;
  text-align: center !important;
  font-size: 16px !important;
}

.message-text:not(.expanded) {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  max-height: 1.4em;
}

.message-text.expanded {
  white-space: normal;
  max-height: 300px;
  overflow-y: auto;
}

.expand-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  border-radius: 3px;
  transition: all 0.2s ease;
  opacity: 0.9;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white !important;
}

.expand-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.message-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.5rem;
  border-radius: 3px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.9;
  font-size: 20px !important;
  line-height: 1;
  color: white !important;
}

.message-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Responsive behavior */
@media (max-width: 1024px) {
  .website-message {
    width: 100%;
    margin: 0;
    font-size: 14px !important;
    background: rgba(37, 99, 235, 0.95) !important;
    color: white !important;
  }
}

@media (max-width: 768px) {
  .website-message {
    display: flex !important; /* Override the hiding on mobile */
    background: rgba(37, 99, 235, 0.95) !important;
    color: white !important;
    font-size: 14px !important;
  }
}

/* Animation for new messages */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.website-message {
  animation: slideInFromTop 0.4s ease-out;
}

/* Message type specific styles - Override with blue background */
.website-message[data-type="welcome"] {
  background: rgba(37, 99, 235, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.95) !important;
  color: white !important;
}

.website-message[data-type="announcement"] {
  background: rgba(37, 99, 235, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.95) !important;
  color: white !important;
}

.website-message[data-type="maintenance"] {
  background: rgba(37, 99, 235, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.95) !important;
  color: white !important;
}

.website-message[data-type="info"] {
  background: rgba(37, 99, 235, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.95) !important;
  color: white !important;
}
/* Message Actions (Navigation and Dismiss) */
.message-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

/* Navigation buttons for carousel */
.nav-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.9;
  font-size: 0.9rem;
  color: white !important;
  position: relative !important;
  z-index: 11 !important;
  pointer-events: auto !important;
  will-change: transform !important;
}

.nav-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* Message counter (1 of 3, 2 of 3, etc.) */
.message-counter {
  font-size: 0.75rem;
  opacity: 0.9;
  min-width: 2.5rem;
  text-align: center;
  color: white !important;
}

/* Show all messages button */
.show-all-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.9;
  font-size: 0.9rem;
  color: white !important;
  position: relative !important;
  z-index: 11 !important;
  pointer-events: auto !important;
  will-change: transform !important;
}

.show-all-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* All Messages View */
.all-messages-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header for all messages view */
.all-messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e0e0e0;
  background: #f5f5f5;
}

.all-messages-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.close-all-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.7;
  font-size: 1rem;
}

.close-all-button:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* List of all messages */
.all-messages-list {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Individual message item in the all messages view */
.message-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 4px solid;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.message-item:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.message-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 0;
}

/* Footer for all messages view */
.all-messages-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e0e0e0;
  background: #f5f5f5;
}

/* Dismiss all button */
.dismiss-all-button {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dismiss-all-button:hover {
  background: #d32f2f;
}

/* Responsive styles for all messages view */
@media (max-width: 768px) {
  .all-messages-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    z-index: 1100;
  }
  
  .all-messages-list {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  .message-item-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .website-messages-container {
    display: block; /* Override the hiding of messages on mobile */
  }
  
  .website-message {
    display: flex; /* Override the hiding of messages on mobile */
  }
}

/* Browser-specific fixes for Chrome compatibility */
/* Ensure navigation buttons are visible in Chrome */
@supports (-webkit-appearance: none) {
  .nav-button,
  .show-all-button,
  .message-dismiss {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 0.9 !important;
  }
}

/* Chrome-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .message-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: 1rem !important;
    min-height: 32px !important;
  }
  
  .nav-button,
  .show-all-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    color: white !important;
    opacity: 0.9 !important;
    font-size: 0.9rem !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .message-counter {
    display: block !important;
    color: white !important;
    font-size: 0.75rem !important;
    opacity: 0.9 !important;
    min-width: 2.5rem !important;
    text-align: center !important;
  }
}

/* Additional Chrome Webkit specific fixes */
.website-message {
  isolation: isolate !important;
}

.message-actions {
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

/* Ensure buttons are clickable and visible */
.nav-button,
.show-all-button,
.message-dismiss {
  position: relative !important;
  z-index: 11 !important;
  pointer-events: auto !important;
  will-change: transform !important;
}

/* Force display for Chrome's strict rendering */
.website-message .nav-button i,
.website-message .show-all-button i,
.website-message .message-dismiss i {
  display: block !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Ensure proper stacking context */
.website-message {
  isolation: isolate !important;
}
.simple-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-family: inherit;
}

.simple-language-switcher:hover {
  background: #f8f9fa;
  border-color: #007bff;
}

.simple-language-switcher:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.simple-language-switcher:active {
  transform: scale(0.98);
}

.language-option {
  color: #666;
  transition: color 0.2s ease, font-weight 0.2s ease;
  font-weight: 400;
}

.language-option.active {
  color: #007bff;
  font-weight: 600;
}

.language-divider {
  color: #ccc;
  font-weight: 300;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .simple-language-switcher {
    padding: 5px 10px;
    font-size: 13px;
    gap: 6px;
  }
}

/* Dark mode support (if applicable) */
@media (prefers-color-scheme: dark) {
  .simple-language-switcher {
    border-color: #444;
    color: #e0e0e0;
  }

  .simple-language-switcher:hover {
    background: #2a2a2a;
    border-color: #0066cc;
  }

  .language-option {
    color: #aaa;
  }

  .language-option.active {
    color: #4da3ff;
  }

  .language-divider {
    color: #555;
  }
}

/* Modern TopNavbar Styles - Professional LinkedIn-inspired */
.top-navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

/* Navbar Container */
.navbar-container {
  width: 100%; 
  margin: 0;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px; /* LinkedIn-like navbar height */
}

/* Brand Section */
.navbar-brand-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  justify-content: flex-start;
}

/* Center Section for Website Message */
.navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  min-width: 0;
  font-size: 10px;
}

@media (max-width: 768px) {
  .navbar-center {
    display: none;
  }
}

.sidebar-toggle-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.sidebar-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sidebar-toggle-btn:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #ffffff;
  font-weight: 800; /* Increased font weight for prominence */
  font-size: 1.75rem; /* Increased size for better visibility */
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transform: translateY(-1px);
}

.brand-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  vertical-align: middle;
}

/* Clickable logo icon */
.clickable-rocket {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.clickable-rocket:hover {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4));
}

.clickable-rocket:active {
  transform: translateY(0) scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}

/* Add a subtle pulse animation to indicate it's clickable */
@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.clickable-rocket:hover {
  animation: logoPulse 2s ease-in-out infinite;
}

.brand-text {
  color: darkblue;
  font-weight: 900; /* Even bolder for better prominence */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Desktop Navigation */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1;
  justify-content: center;
}

.desktop-nav {
  display: -webkit-inline-box;
}

@media (min-width: 1024px) {
  .desktop-nav {
    display: content;
    align-items: center;
    gap: 0.5rem;
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);  width: 20px;
  height: 2px;
  background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
  border-radius: 1px;
}

.nav-icon {
  font-size: 1.1rem;
}

/* Nav Groups (Dropdowns) */
.nav-group {
  position: relative;
}

.nav-group-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  transition: all 0.3s ease;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.nav-group:hover .nav-group-trigger {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-group:hover .nav-group-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chevron {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.nav-group:hover .chevron {
  transform: rotate(180deg);
}

.nav-group-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1100; /* Higher than sticky header */
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: #374151;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-dropdown-item:hover {
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.1);
  text-decoration: none;
}

.nav-dropdown-item.active {
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.15);
}

.dropdown-icon {
  font-size: 1rem;
  color: #9ca3af;
}

.nav-dropdown-item:hover .dropdown-icon,
.nav-dropdown-item.active .dropdown-icon {
  color: #0a66c2;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Remove order and margin-left as container handles positioning */
}

.mobile-menu-toggle:hover {
  background: rgba(10, 102, 194, 0.1);
}

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
  height: 16px;
  position: relative;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #64748b;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Right Section - Enhanced spacing and interactivity */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Increased spacing for less cramped feel */
  height: 100%;
  flex-shrink: 0;
  /* Remove margin-left: auto and order as space-between handles positioning */
}

/* Country Selector Wrapper - Enhanced interactivity */
.country-selector-wrapper {
  display: flex;
  align-items: center;
  height: 42px;
  transition: transform 0.2s ease;
}

.country-selector-wrapper:hover {
  transform: translateY(-1px);
}

/* Language Switcher Wrapper - Enhanced interactivity */
.language-switcher-wrapper {
  display: flex;
  align-items: center;
  height: 42px;
  transition: transform 0.2s ease;
}

.language-switcher-wrapper:hover {
  transform: translateY(-1px);
}

/* Points Display */
.points-dropdown {
  position: relative;
  height: 42px;
}

.points-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.1); /* More visible background */
  color: #1e40af; /* Better contrast for interactivity */
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.points-display:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

/* Add underline effect for clarity */
.points-display:hover .points-label {
  text-decoration: underline;
}

.points-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.points-icon {
  font-size: 1.1rem;
}

.points-value {
  font-size: 1rem;
  font-weight: 700;
}

.points-label {
  font-size: 0.8rem;
  opacity: 0.9;
  display: none;
}

@media (min-width: 768px) {
  .points-label {
    display: block;
  }
}

.bonus-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.dropdown-chevron {
  font-size: 0.8rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.points-dropdown .points-display.open .dropdown-chevron,
.user-dropdown .user-profile-button.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* User Profile */
.user-dropdown {
  position: relative;
  height: 42px;
}

.user-profile-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  background: rgba(34, 197, 94, 0.1); /* Green tint for profile */
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #15803d;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
}

.user-profile-button:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* Tooltip for user profile */
.user-profile-button::after {
  content: "My Profile";
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.user-profile-button:hover::after {
  opacity: 1;
  visibility: visible;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  flex: 1 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: darkblue;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 0.75rem;
  color: darkblue;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .user-info {
    display: none;
  }
}

/* Modern Dropdown */
.modern-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
  padding: 0.75rem;
  z-index: 1100; /* Higher than sticky header */
  animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: #374151;
  transition: all 0.3s ease;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

.dropdown-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  text-decoration: none;
}

.dropdown-item-icon {
  font-size: 1.1rem;
  color: #9ca3af;
  min-width: 20px;
}

.dropdown-item:hover .dropdown-item-icon {
  color: #667eea;
}

.dropdown-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  flex: 1 1;
}

.dropdown-item-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.dropdown-item-desc {
  font-size: 0.75rem;
  color: #9ca3af;
}

.dropdown-item:hover .dropdown-item-desc {
  color: #667eea;
}

.dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.5rem 0;
}

.logout-item {
  border-top: 1px solid #f3f4f6;
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.logout-item:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.logout-item:hover .dropdown-item-icon {
  color: #ef4444;
}

.logout-item:hover .dropdown-item-desc {
  color: #ef4444;
}

/* Auth Buttons */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-secondary {
  background: white;
  color: #64748b;
  border: 1px solid #e5e7eb;
}

.btn-secondary:hover {
  background: #f8fafc;
  color: #0a66c2;
  border-color: #0a66c2;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
  color: white!important;
  border: 1px solid transparent;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
  color: white;
  text-decoration: none;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 999;
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.close-mobile-menu {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-mobile-menu:hover {
  background: #e5e7eb;
  color: #374151;
}

.mobile-nav-content {
  padding: 1rem 2rem 2rem 2rem;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  color: #374151;
  font-weight: 500;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}

.mobile-nav-item:hover {
  color: #667eea;
  text-decoration: none;
}

.mobile-nav-item.active {
  color: #667eea;
  font-weight: 600;
}

.mobile-nav-item.sub-item {
  padding-left: 2rem;
  border-bottom: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.mobile-nav-group {
  margin-bottom: 1rem;
}

.mobile-nav-group-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 0.5rem 0;
  font-weight: 700;
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 0.5rem;
}

.mobile-menu-overlay {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* Loading State */
.navbar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-container {
    padding: 0 1rem;
    height: 60px;
  }
  
  .mobile-menu {
    top: 60px;
    height: calc(100vh - 60px);
  }
  
  .mobile-menu-overlay {
    top: 60px;
    height: calc(100vh - 60px);
  }
  
  .brand-text {
    display: none;
  }
  
  .navbar-right {
    gap: 0.5rem;
  }
  
  .modern-dropdown {
    min-width: 260px;
    right: -1rem;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    padding: 0 0.75rem;
  }
  
  .points-content {
    gap: 0.25rem;
  }
  
  .points-value {
    font-size: 0.9rem;
  }
  
  .modern-dropdown {
    min-width: 240px;
    right: -1.5rem;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  .top-navbar {
    background: rgba(17, 24, 39, 0.95);
    border-bottom-color: rgba(75, 85, 99, 0.5);
  }
  
  .navbar-brand {
    color: #f9fafb;
  }
  
  .nav-item {
    color: #d1d5db;
  }
  
  .nav-item:hover,
  .nav-item.active {
    color: #818cf8;
  }
  
  .nav-group-dropdown,
  .modern-dropdown {
    background: #1f2937;
    border-color: rgba(75, 85, 99, 0.5);
  }
  
  .dropdown-item {
    color: #d1d5db;
  }
  
  .dropdown-item:hover {
    background: rgba(129, 140, 248, 0.1);
    color: #818cf8;
  }
}

/* Modern Inspiring Side Navigation */
.side-navbar {
  position: fixed;
  top: 52px;
  left: 0;
  height: calc(100dvh - 52px);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #374151;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(17, 24, 39, 0.06), 4px 0 15px rgba(0, 0, 0, 0.05);

  /* Enable hardware acceleration for smooth animations */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.side-navbar.collapsed {
  width: 56px;
}

.side-navbar.expanded {
  width: 256px;
}

/* Section Title with Toggle Button */
.section-title-with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 0.5rem 1rem;
}

.section-title-with-toggle .section-title {
  padding: 0;
  margin: 0;
}

.sidebar-toggle-beside-main {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sidebar-toggle-beside-main:hover {
  background: #f3f4f6;
  color: #374151;
  transform: scale(1.1);
}

.sidebar-toggle-beside-main:active {
  transform: scale(0.95);
}

.collapsed-toggle-section {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem 0;
}

.sidebar-toggle-collapsed {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sidebar-toggle-collapsed:hover {
  background: #f3f4f6;
  color: #374151;
  transform: scale(1.1);
}

.sidebar-toggle-collapsed:active {
  transform: scale(0.95);
}

/* Navigation Sections */

/* Navigation */
.sidebar-nav {
  padding: 0 0 1rem 0;
  /* remove top gap under top bar */
  flex: 1 1;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.section-title {
  padding: 0 1rem 0.5rem 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: solid 2px #e5e7eb;
}

.nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #4b5563;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  gap: 0.75rem;
  font-weight: 500;
  border-radius: 0.75rem;
  margin: 0 0.5rem 0.25rem 0.5rem;
}

.nav-item:not(.no-hover-effect):hover {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  text-decoration: none;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.nav-item.no-hover-effect:hover {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  /* color: #ffffff; */
  /* This is removed to prevent text from turning white */
  text-decoration: none;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.nav-item.no-hover-effect:hover .nav-label,
.nav-item.no-hover-effect:hover .nav-icon,
.nav-item.no-hover-effect:hover .expand-icon {
  color: #3b82f6 !important;
}

.nav-item.active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-item.active:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  transform: translateX(4px);
}

.nav-icon {
  font-size: 0.9rem;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Collapsed state adjustments */
.side-navbar.collapsed .nav-item {
  justify-content: center;
  padding: 0.75rem;
}

.side-navbar.collapsed .active-indicator {
  right: -1px;
  width: 2px;
}

/* Expandable Menu Styles */
.nav-item-wrapper {
  width: 100%;
}

.nav-item.expandable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  justify-content: space-between;
  /* Base color for expandable items */
  color: rgb(94, 94, 212);
  font-weight: bold;
}

.nav-item.expandable .nav-label {
  color: inherit;
}

.nav-item.expandable .nav-icon {
  color: inherit;
}

.nav-item.expandable .expand-icon {
  color: inherit;
}

.nav-item.expandable:hover {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: blue !important;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.nav-item.expandable:hover .nav-label,
.nav-item.expandable:hover .nav-icon {
  color: #ffffff !important;
}

.nav-item.expandable.active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-item.expandable.active .nav-label,
.nav-item.expandable.active .nav-icon {
  color: #ffffff !important;
}

.nav-item.expandable.active:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  transform: translateX(4px);
}

.expand-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  margin-left: auto;
  opacity: 0.7;
}

.nav-item.expandable .expand-icon {
  opacity: 0.7;
}

.nav-item.expandable:hover .expand-icon,
.nav-item.expandable.active .expand-icon {
  opacity: 1;
  color: inherit;
}

/* Sub-items */
.nav-subitems {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 1rem;
  border-left: 1px solid #e5e7eb;
}

.nav-subitem {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  gap: 0.75rem;
  font-weight: 400;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  margin: 0 0.5rem 0.25rem 0.5rem;
}

.nav-subitem:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  text-decoration: none;
  transform: translateX(2px);
}

.nav-subitem.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  color: #3b82f6;
  font-weight: 500;
}

.nav-subitem .nav-icon {
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav-subitem .active-indicator {
  position: absolute;
  right: -2px;
  top: 20%;
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Animation for expandable menus */
.nav-subitems {
  animation: expandMenu 0.2s ease-out;
}

@keyframes expandMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid #343536;
  margin-top: auto;
}

.footer-text {
  text-align: center;
  color: #818384;
}

/* Overlay for mobile */
.sidebar-overlay {
  position: fixed;
  top: 52px;
  left: 0;
  width: 100vw;
  height: calc(100dvh - 52px);
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Use touch-action to prevent touch event issues on mobile */
  touch-action: manipulation;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .side-navbar.expanded {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .sidebar-overlay {
    display: block;
  }

  /* Auto-collapse behavior for laptop screens */
  .side-navbar {
    transform: translateX(0);
  }

  .side-navbar.collapsed {
    width: 56px;
  }
}

@media (max-width: 768px) {
  .side-navbar {
    top: 52px;
    height: calc(100dvh - 52px);
    width: 280px;
    /* Full width on mobile */
  }

  .sidebar-overlay {
    top: 52px;
    height: calc(100dvh - 52px);
  }

  /* On mobile, completely hide when collapsed */
  .side-navbar.collapsed {
    transform: translateX(-100%);
  }

  .side-navbar.expanded {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }
}

/* Scrollbar styling for dark theme */
.side-navbar::-webkit-scrollbar {
  width: 3px;
}

.side-navbar::-webkit-scrollbar-track {
  background: transparent;
  /* match light sidebar */
}

.side-navbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  /* light gray */
  border-radius: 3px;
}

.side-navbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
  /* slightly darker on hover */

}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Animation removed - was causing flickering on mobile due to re-triggering on each render.
   The transition property on .side-navbar handles smooth state changes instead. */

/* Eligibility indicators */
.nav-item-locked {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.nav-item-locked:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.nav-item-loading {
  opacity: 0.8;
}

.nav-lock-icon {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  color: #ef4444;
}

.nav-loading-icon {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.eligibility-tooltip {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ef4444;
  font-size: 0.8rem;
  cursor: help;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.eligibility-tooltip:hover {
  opacity: 1;
}

/* Enhanced tooltips for locked items */
.nav-item-locked .eligibility-tooltip {
  color: #ffffff;
}

/* Tooltips for collapsed state */
.side-navbar.collapsed .nav-item {
  position: relative;
}

.side-navbar.collapsed .nav-item:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #000000;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.625rem;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 200px;
  word-wrap: break-word;
}

.side-navbar.collapsed .nav-item:hover::before {
  content: '';
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid transparent;
  border-right-color: #000000;
  z-index: 1000;
}

/* Special styling for locked items in collapsed state */
.side-navbar.collapsed .nav-item-locked:hover::after {
  background: #ef4444;
  border-right-color: #ef4444;
}

.side-navbar.collapsed .nav-item-locked:hover::before {
  border-right-color: #ef4444;
}

/* Notification Badge */
.notification-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  z-index: 10;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Adjust badge position for collapsed sidebar */
.side-navbar.collapsed .notification-badge {
  top: 0.125rem;
  right: 0.125rem;
  font-size: 0.5rem;
  padding: 0.125rem 0.25rem;
  min-width: 1rem;
  height: 1rem;
}

/* Blue text color for Tasks, Questionnaires, and Teams menu items */
.nav-item.nav-item-blue,
.nav-item.expandable.nav-item-blue {
  color: #3b82f6 !important;
}

.nav-item.nav-item-blue .nav-label,
.nav-item.nav-item-blue .nav-icon,
.nav-item.nav-item-blue .expand-icon,
.nav-item.expandable.nav-item-blue .nav-label,
.nav-item.expandable.nav-item-blue .nav-icon,
.nav-item.expandable.nav-item-blue .expand-icon {
  color: #3b82f6 !important;
}

/* Hover state - preserve blue text for readability (do NOT switch to white).
   Scoped only to nav-item-blue to avoid impacting other shared nav-item hover styles. */
.nav-item.nav-item-blue:hover:not(.active),
.nav-item.expandable.nav-item-blue:hover:not(.active) {
  /* Use a subtle light blue background so the existing blue text (#3b82f6) remains legible */
  background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
  color: #3b82f6 !important;
  /* Keep original blue text color */
}

.nav-item.nav-item-blue:hover:not(.active) .nav-label,
.nav-item.nav-item-blue:hover:not(.active) .nav-icon,
.nav-item.nav-item-blue:hover:not(.active) .expand-icon,
.nav-item.expandable.nav-item-blue:hover:not(.active) .nav-label,
.nav-item.expandable.nav-item-blue:hover:not(.active) .nav-icon,
.nav-item.expandable.nav-item-blue:hover:not(.active) .expand-icon {
  color: #3b82f6 !important;
  /* Maintain blue for child elements */
}

/* When active, keep the normal active styles (white text on blue background) */
.nav-item.nav-item-blue.active,
.nav-item.expandable.nav-item-blue.active {
  color: #ffffff !important;
}

.nav-item.nav-item-blue.active .nav-label,
.nav-item.nav-item-blue.active .nav-icon,
.nav-item.nav-item-blue.active .expand-icon,
.nav-item.expandable.nav-item-blue.active .nav-label,
.nav-item.expandable.nav-item-blue.active .nav-icon,
.nav-item.expandable.nav-item-blue.active .expand-icon {
  color: #ffffff !important;
}

.nav-item a:hover .nav-text,
.nav-item a:hover .nav-icon {
  color: var(--primary-color);
}

.nav-item.active>a .nav-text,
.nav-item.active>a .nav-icon {
  color: var(--primary-color);
  font-weight: 600;
}

.nav-item.no-hover-effect a:hover .nav-text,
.nav-item.no-hover-effect a:hover .nav-icon {
  color: inherit;
  /* Prevents color change on hover */
}

/* Sub-navigation */
.sub-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 1rem;
  border-left: 1px solid #e5e7eb;
}

.sub-nav-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  gap: 0.75rem;
  font-weight: 400;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  margin: 0 0.5rem 0.25rem 0.5rem;
}

.sub-nav-item:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  text-decoration: none;
  transform: translateX(2px);
}

.sub-nav-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  color: #3b82f6;
  font-weight: 500;
}

.sub-nav-item .nav-icon {
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.sub-nav-item .active-indicator {
  position: absolute;
  right: -2px;
  top: 20%;
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Animation for expandable menus */
.sub-nav {
  animation: expandMenu 0.2s ease-out;
}

@keyframes expandMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bonus-notification-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 350px;
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.bonus-notification {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border-left: 4px solid #4caf50;
}

.notification-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.notification-icon {
  font-size: 24px;
  margin-right: 12px;
}

.notification-header h4 {
  flex-grow: 1;
  margin: 0;
  font-size: 16px;
  color: #212529;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.notification-content {
  padding: 16px;
}

.notification-content p {
  margin: 0 0 8px;
  color: #495057;
}

.points-available {
  font-weight: bold;
  color: #28a745;
  font-size: 18px;
}

.notification-footer {
  padding: 12px 16px;
  text-align: right;
  border-top: 1px solid #e9ecef;
}

.claim-button {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.claim-button:hover {
  background-color: #43a047;
}


/*# sourceMappingURL=main.76381dff.css.map*/