/* ========================================
   Modern ATA Points Tracker - Design System
   ======================================== */

/* CSS Custom Properties for Design System */
:root {
   /* Colors - Light Theme */
   --primary: #2563eb;
   --primary-hover: #1d4ed8;
   --primary-light: #dbeafe;
   --secondary: #64748b;
   --success: #10b981;
   --success-hover: #059669;
   --danger: #ef4444;
   --danger-hover: #dc2626;
   --warning: #f59e0b;
   --info: #06b6d4;

   /* Neutrals */
   --white: #ffffff;
   --gray-50: #f8fafc;
   --gray-100: #f1f5f9;
   --gray-200: #e2e8f0;
   --gray-300: #cbd5e1;
   --gray-400: #94a3b8;
   --gray-500: #64748b;
   --gray-600: #475569;
   --gray-700: #334155;
   --gray-800: #1e293b;
   --gray-900: #0f172a;

   /* Surface Colors */
   --bg-primary: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;

   /* Text Colors */
   --text-primary: #0f172a;
   --text-secondary: #64748b;
   --text-tertiary: #94a3b8;

   /* Border Colors */
   --border-light: #e2e8f0;
   --border-medium: #cbd5e1;
   --border-dark: #94a3b8;

   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

   /* Border Radius */
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;
   --radius-xl: 1rem;

   /* Spacing */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;
   --spacing-2xl: 3rem;

   /* Typography */
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
   --font-size-3xl: 1.875rem;
   --font-size-4xl: 2.25rem;

   /* Animation */
   --transition-fast: 0.15s ease-out;
   --transition-normal: 0.25s ease-out;
   --transition-slow: 0.4s ease-out;
}

/* Dark Theme Variables */
[data-theme="dark"] {
   --bg-primary: #0f172a;
   --bg-secondary: #1e293b;
   --bg-tertiary: #334155;

   --text-primary: #f8fafc;
   --text-secondary: #cbd5e1;
   --text-tertiary: #94a3b8;

   --border-light: #334155;
   --border-medium: #475569;
   --border-dark: #64748b;

   --gray-50: #1e293b;
   --gray-100: #334155;
   --gray-200: #475569;
}

/* ========================================
   Base Styles
   ======================================== */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-secondary) 100%);
   color: var(--text-primary);
   line-height: 1.6;
   font-size: var(--font-size-base);
   min-height: 100vh;
   transition: all var(--transition-normal);
   padding: var(--spacing-lg);
}

/* ========================================
   Layout Components
   ======================================== */

.container {
   max-width: 800px;
   margin: 0 auto;
   position: relative;
}

/* Theme Toggle */
.theme-toggle {
   position: fixed;
   top: var(--spacing-lg);
   right: var(--spacing-lg);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--bg-primary);
   border: 2px solid var(--border-light);
   color: var(--text-secondary);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-lg);
   transition: all var(--transition-normal);
   box-shadow: var(--shadow-md);
   z-index: 1000;
}

.theme-toggle:hover {
   background: var(--primary);
   color: var(--white);
   transform: scale(1.05);
}

/* Data Controls */
.data-controls {
   position: fixed;
   top: var(--spacing-lg);
   left: var(--spacing-lg);
   z-index: 1000;
}

.data-btn {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--bg-primary);
   border: 2px solid var(--border-light);
   border-radius: var(--radius-md);
   color: var(--text-secondary);
   cursor: pointer;
   transition: all var(--transition-normal);
   font-size: var(--font-size-sm);
   font-weight: 500;
   box-shadow: var(--shadow-sm);
}

.data-btn:hover {
   background: var(--danger);
   color: var(--white);
   border-color: var(--danger);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

.data-btn span {
   display: none;
}

.data-btn:hover span {
   display: inline;
}

/* Save Indicator */
.save-indicator {
   position: fixed;
   bottom: var(--spacing-xl);
   left: var(--spacing-xl);
   background: var(--success);
   color: var(--white);
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: 500;
   z-index: 1000;
   animation: slideInUp 0.3s ease-out;
}

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

/* Header */
.header {
   text-align: center;
   margin-bottom: var(--spacing-2xl);
}

.header-content {
   margin-bottom: var(--spacing-lg);
}

.logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
}

.logo i {
   font-size: var(--font-size-3xl);
   color: var(--primary);
}

h1 {
   font-size: var(--font-size-4xl);
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
}

.subtitle {
   font-size: var(--font-size-lg);
   color: var(--text-secondary);
   max-width: 500px;
   margin: 0 auto;
   line-height: 1.5;
}

/* Progress Bar */
.progress-bar {
   width: 100%;
   height: 4px;
   background: var(--gray-200);
   border-radius: var(--radius-sm);
   overflow: hidden;
}

.progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--primary), var(--info));
   width: 0%;
   transition: width var(--transition-slow);
}

/* ========================================
   Card Components
   ======================================== */

.card {
   background: var(--bg-primary);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--border-light);
   margin-bottom: var(--spacing-xl);
   overflow: hidden;
   transition: all var(--transition-normal);
}

.card:hover {
   box-shadow: var(--shadow-xl);
   transform: translateY(-2px);
}

.card-header {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-lg) var(--spacing-xl);
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-light);
   position: relative;
}

.card-header i {
   font-size: var(--font-size-xl);
   color: var(--primary);
}

.card-header h2 {
   font-size: var(--font-size-2xl);
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
   flex: 1;
}

.step-badge {
   background: var(--primary);
   color: var(--white);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: 500;
}

.event-counter {
   background: var(--success);
   color: var(--white);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: 600;
}

.card-body {
   padding: var(--spacing-xl);
}

/* ========================================
   Form Components
   ======================================== */

.form-group {
   margin-bottom: var(--spacing-lg);
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-lg);
}

.form-row .form-group {
   margin-bottom: 0;
}

label {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   font-weight: 500;
   color: var(--text-primary);
   margin-bottom: var(--spacing-sm);
   font-size: var(--font-size-sm);
}

label i {
   color: var(--primary);
   font-size: var(--font-size-base);
}

.label-desc {
   color: var(--text-tertiary);
   font-weight: 400;
   font-size: var(--font-size-xs);
   margin-left: auto;
}

/* Input Styles */
input[type="text"],
input[type="number"] {
   width: 100%;
   padding: var(--spacing-md);
   border: 2px solid var(--border-light);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
   background: var(--bg-primary);
   color: var(--text-primary);
   transition: all var(--transition-fast);
}

input[type="text"]:focus,
input[type="number"]:focus {
   outline: none;
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
   color: var(--text-tertiary);
}

/* Select Wrapper */
.select-wrapper {
   position: relative;
}

select {
   width: 100%;
   padding: var(--spacing-md);
   border: 2px solid var(--border-light);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
   background: var(--bg-primary);
   color: var(--text-primary);
   appearance: none;
   cursor: pointer;
   transition: all var(--transition-fast);
}

select:focus {
   outline: none;
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.select-arrow {
   position: absolute;
   right: var(--spacing-md);
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-tertiary);
   pointer-events: none;
   transition: transform var(--transition-fast);
}

.select-wrapper:hover .select-arrow {
   color: var(--primary);
}

/* Placement Buttons */
.placement-buttons {
   display: flex;
   gap: var(--spacing-sm);
   margin-top: var(--spacing-sm);
}

.placement-btn {
   flex: 1;
   padding: var(--spacing-md);
   border: 2px solid var(--border-medium);
   background: var(--bg-primary);
   color: var(--text-primary);
   border-radius: var(--radius-md);
   font-weight: 500;
   cursor: pointer;
   transition: all var(--transition-fast);
}

.placement-btn:hover {
   border-color: var(--primary);
   background: var(--primary-light);
}

.placement-btn.active {
   background: var(--primary);
   color: var(--white);
   border-color: var(--primary);
}

/* Checkbox Styles */
.checkbox-wrapper {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
}

.checkbox-label {
   cursor: pointer;
   flex-direction: row;
   margin-bottom: 0;
}

input[type="checkbox"] {
   width: 20px;
   height: 20px;
   accent-color: var(--primary);
}

/* Entry Fields Styling */
.entry-fields {
   background: var(--bg-secondary);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   margin-bottom: var(--spacing-lg);
}

.entry-fields h3 {
   font-size: var(--font-size-lg);
   color: var(--text-primary);
   margin-bottom: var(--spacing-lg);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
}

.entry-fields h3::before {
   content: "📊";
   font-size: var(--font-size-xl);
}

.total-display {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

.total-display label {
   margin-bottom: var(--spacing-sm);
   font-weight: 600;
   color: var(--text-secondary);
}

.total-value {
   background: linear-gradient(135deg, var(--primary), var(--info));
   color: var(--white);
   padding: var(--spacing-md) var(--spacing-lg);
   border-radius: var(--radius-md);
   font-size: var(--font-size-xl);
   font-weight: 700;
   text-align: center;
   min-height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-normal);
}

.total-value.updated {
   transform: scale(1.05);
   box-shadow: var(--shadow-md);
}

/* Tournament Info Display */
.tournament-info {
   background: linear-gradient(135deg, var(--primary-light), rgba(37, 99, 235, 0.05));
   border-bottom: 1px solid var(--border-light);
   padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--spacing-md);
}

.tournament-details {
   display: flex;
   align-items: center;
   gap: var(--spacing-lg);
   flex-wrap: wrap;
}

.tournament-badge {
   background: var(--primary);
   color: var(--white);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
}

.tournament-entries {
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
}

.available-events {
   color: var(--text-tertiary);
   font-size: var(--font-size-xs);
   font-style: italic;
}

/* ========================================
   Button Components
   ======================================== */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-md) var(--spacing-lg);
   border: none;
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
   font-weight: 500;
   cursor: pointer;
   transition: all var(--transition-fast);
   text-decoration: none;
   position: relative;
   overflow: hidden;
}

.btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.btn-lg {
   padding: var(--spacing-lg) var(--spacing-xl);
   font-size: var(--font-size-lg);
   width: 100%;
}

.btn-primary {
   background: var(--primary);
   color: var(--white);
}

.btn-primary:hover:not(:disabled) {
   background: var(--primary-hover);
   transform: translateY(-1px);
}

.btn-success {
   background: var(--success);
   color: var(--white);
}

.btn-success:hover:not(:disabled) {
   background: var(--success-hover);
   transform: translateY(-1px);
}

.btn-danger {
   background: var(--danger);
   color: var(--white);
}

.btn-danger:hover:not(:disabled) {
   background: var(--danger-hover);
   transform: translateY(-1px);
}

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

.btn-outline:hover:not(:disabled) {
   background: var(--primary);
   color: var(--white);
}

/* ========================================
   Events Display
   ======================================== */

.events-grid {
   display: grid;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-xl);
}

.event-item {
   background: var(--bg-secondary);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   transition: all var(--transition-fast);
   position: relative;
}

.event-item:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-1px);
}

.event-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: var(--spacing-md);
}

.event-title {
   font-weight: 600;
   color: var(--text-primary);
   font-size: var(--font-size-lg);
}

.event-points {
   background: var(--success);
   color: var(--white);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-md);
   font-weight: 600;
   font-size: var(--font-size-sm);
}

.event-details {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   margin-bottom: var(--spacing-md);
}

.event-badge {
   background: var(--primary-light);
   color: var(--primary);
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-xs);
   font-weight: 500;
}

.delete-btn {
   position: absolute;
   top: var(--spacing-md);
   right: var(--spacing-md);
   background: var(--danger);
   color: var(--white);
   border: none;
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-fast);
   opacity: 0;
}

.event-item:hover .delete-btn {
   opacity: 1;
}

.delete-btn:hover {
   background: var(--danger-hover);
   transform: scale(1.1);
}

/* Tournament Summary */
.tournament-summary {
   margin-bottom: var(--spacing-xl);
}

.summary-card {
   display: flex;
   align-items: center;
   gap: var(--spacing-lg);
   background: linear-gradient(135deg, var(--primary), var(--info));
   color: var(--white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-lg);
   margin-bottom: var(--spacing-lg);
}

.summary-icon {
   font-size: var(--font-size-4xl);
   opacity: 0.8;
}

.summary-content h3 {
   font-size: var(--font-size-lg);
   margin-bottom: var(--spacing-sm);
   opacity: 0.9;
}

.points-display {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-sm);
}

.points-display span:first-child {
   font-size: var(--font-size-4xl);
   font-weight: 700;
}

.points-label {
   font-size: var(--font-size-lg);
   opacity: 0.8;
}

.summary-details {
   text-align: center;
}

.factor-info {
   font-size: var(--font-size-lg);
   color: var(--primary);
   font-weight: 600;
   margin-bottom: var(--spacing-md);
}

.info-text {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
}

/* Action Buttons */
.action-buttons {
   display: flex;
   gap: var(--spacing-md);
}

.action-buttons .btn {
   flex: 1;
}

/* ========================================
   Toast Notifications
   ======================================== */

.toast {
   position: fixed;
   bottom: var(--spacing-xl);
   right: var(--spacing-xl);
   background: var(--bg-primary);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-xl);
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   z-index: 1000;
   transform: translateX(400px);
   transition: transform var(--transition-normal);
}

.toast.show {
   transform: translateX(0);
}

.toast-icon {
   font-size: var(--font-size-xl);
}

.toast.success .toast-icon {
   color: var(--success);
}

.toast.error .toast-icon {
   color: var(--danger);
}

.toast.info .toast-icon {
   color: var(--info);
}

/* ========================================
   Loading Indicator
   ======================================== */

.loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
}

.spinner {
   width: 40px;
   height: 40px;
   border: 4px solid var(--border-light);
   border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

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

/* ========================================
   Utility Classes
   ======================================== */

.hidden {
   display: none !important;
}

.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;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
   body {
      padding: var(--spacing-md);
   }

   .container {
      margin: 0;
   }

   .theme-toggle {
      top: var(--spacing-md);
      right: var(--spacing-md);
   }

   .data-controls {
      top: var(--spacing-md);
      left: var(--spacing-md);
   }

   .data-btn span {
      display: none !important;
   }

   .save-indicator {
      bottom: var(--spacing-md);
      left: var(--spacing-md);
      right: var(--spacing-md);
   }

   h1 {
      font-size: var(--font-size-3xl);
   }

   .logo {
      flex-direction: column;
      gap: var(--spacing-sm);
   }

   .form-row {
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);
   }

   .form-row .form-group {
      margin-bottom: var(--spacing-lg);
   }

   .form-row .form-group:last-child {
      margin-bottom: 0;
   }

   .card-header {
      padding: var(--spacing-lg);
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-sm);
   }

   .card-body {
      padding: var(--spacing-lg);
   }

   .action-buttons {
      flex-direction: column;
   }

   .summary-card {
      flex-direction: column;
      text-align: center;
      gap: var(--spacing-md);
   }

   .toast {
      bottom: var(--spacing-md);
      right: var(--spacing-md);
      left: var(--spacing-md);
   }
}

@media (max-width: 480px) {
   .placement-buttons {
      flex-direction: column;
   }

   .event-header {
      flex-direction: column;
      gap: var(--spacing-sm);
   }

   .event-details {
      flex-direction: column;
      gap: var(--spacing-sm);
   }

   .tournament-info {
      flex-direction: column;
      align-items: flex-start;
   }

   .tournament-details {
      width: 100%;
      justify-content: space-between;
   }
}