/* ========================================
   GOLF HANDICAP TRACKER - COMPLETE WORKING CSS
   ========================================
   
   This file completely replaces styles.css and fixes all layout issues
   Includes original styles + tees support + compact table + modern improvements
   
   ======================================== */

/* ========================================
   1. BASE STYLES
   ======================================== */

body {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}

.container {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* ========================================
   2. TYPOGRAPHY
   ======================================== */

h1 {
  color: #2c5530;
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  color: #2c5530;
  border-bottom: 2px solid #4a7c59;
  padding-bottom: 10px;
  margin-top: 30px;
}

h3 {
  color: #2c5530;
  border-bottom: 1px solid #4a7c59;
  padding-bottom: 5px;
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 1.2em;
}

/* ========================================
   3. FORM ELEMENTS - FIXED GRID LAYOUT
   ======================================== */

.input-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #2c5530;
}

input,
select {
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

input:focus,
select:focus {
  outline: none;
  border-color: #4a7c59;
}

button {
  background-color: #4a7c59;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button:hover {
  background-color: #2c5530;
}

/* ========================================
   4. HANDICAP DISPLAYS - FIXED STYLING
   ======================================== */

.handicap-display {
  background: linear-gradient(135deg, #4a7c59, #2c5530);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin: 20px 0;
}

.handicap-number {
  font-size: 3em;
  font-weight: bold;
  margin: 10px 0;
}

.regulation-only {
  background: linear-gradient(135deg, #1e3a3a, #2c5530);
  border: 2px solid #4a7c59;
  margin-top: 10px;
}

/* ========================================
   5. STATISTICS CARDS - FIXED GRID
   ======================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.stat-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.stat-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #2c5530;
}

.stat-label {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}

/* ========================================
   6. TABLE STYLES - COMPACT FOR LAPTOPS
   ======================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

/* Optimized column widths for laptop screens */
#roundsTable th:nth-child(1) {
  width: 9%;
} /* Date */
#roundsTable th:nth-child(2) {
  width: 18%;
} /* Course */
#roundsTable th:nth-child(3) {
  width: 7%;
} /* Tees */
#roundsTable th:nth-child(4) {
  width: 8%;
} /* Type */
#roundsTable th:nth-child(5) {
  width: 6%;
} /* Holes */
#roundsTable th:nth-child(6) {
  width: 6%;
} /* Score */
#roundsTable th:nth-child(7) {
  width: 6%;
} /* Par */
#roundsTable th:nth-child(8) {
  width: 8%;
} /* 18-Hole */
#roundsTable th:nth-child(9) {
  width: 7%;
} /* Diff */
#roundsTable th:nth-child(10) {
  width: 9%;
} /* Handicap */
#roundsTable th:nth-child(11) {
  width: 8%;
} /* Action */

th,
td {
  border: 1px solid #ddd;
  padding: 8px 4px;
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  background-color: #4a7c59;
  color: white;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e8f5e8;
}

/* Course names can wrap if needed */
#roundsTable td:nth-child(2) {
  white-space: normal;
  word-wrap: break-word;
}

/* ========================================
   7. BUTTONS IN TABLE
   ======================================== */

.delete-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.delete-btn:hover {
  background-color: #c82333;
}

.toggle-handicap-btn {
  border: none;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  min-width: 35px;
}

.toggle-handicap-btn.included {
  background-color: #28a745;
  color: white;
}

.toggle-handicap-btn.excluded {
  background-color: #6c757d;
  color: white;
}

.toggle-handicap-btn:hover {
  opacity: 0.8;
}

/* ========================================
   8. COURSE TYPE INDICATORS
   ======================================== */

.course-type-regulation {
  color: #28a745;
  font-weight: bold;
}

.course-type-executive {
  color: #ffc107;
  font-weight: bold;
}

.course-type-par3 {
  color: #17a2b8;
  font-weight: bold;
}

.course-type-practice {
  color: #6c757d;
  font-weight: bold;
}

/* ========================================
   9. TABLE SORTING
   ======================================== */

.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.sortable:hover {
  background-color: #3a6b42 !important;
}

.sorted-asc,
.sorted-desc {
  background-color: #2c5530 !important;
}

/* ========================================
   10. RESPONSIVE DESIGN
   ======================================== */

/* Large screens - table fits without scrolling */
@media (min-width: 1200px) {
  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 10px 6px;
    font-size: 14px;
  }

  .table-wrapper {
    overflow-x: visible;
  }
}

/* Standard laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  .table-wrapper {
    overflow-x: visible;
    margin: 10px 0;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .input-section {
    grid-template-columns: 1fr;
  }

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

  .handicap-number {
    font-size: 2em;
  }

  /* Table gets horizontal scrolling on mobile */
  .table-wrapper {
    margin: 10px -15px;
    border-radius: 0;
    overflow-x: auto;
  }

  #roundsTable {
    min-width: 800px;
  }

  th,
  td {
    padding: 8px 6px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 15px;
  }

  table {
    font-size: 12px;
  }

  #roundsTable {
    min-width: 850px;
  }

  th,
  td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .toggle-handicap-btn,
  .delete-btn {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* ========================================
   11. MOBILE TABLE SCROLL HINT
   ======================================== */

.table-wrapper::after {
  content: '← Scroll to see more →';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: rgba(74, 124, 89, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

@media (max-width: 768px) {
  .table-wrapper::after {
    opacity: 1;
    animation: fadeInOut 4s ease-in-out;
  }
}

@keyframes fadeInOut {
  0%,
  20% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

/* ========================================
   COMPREHENSIVE SCROLL HINT REMOVAL
   ========================================
   
   Add this to the very end of your CSS file to completely
   remove all scroll hints from everywhere
   
   ======================================== */

/* Remove all possible scroll hint pseudo-elements */
.table-wrapper::after,
.table-wrapper::before,
#roundsTable::after,
#roundsTable::before,
table::after,
table::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Remove any elements that contain scroll hint text */
*:contains('Scroll to see more'),
*:contains('← Scroll to see more →') {
  display: none !important;
}

/* Target by content - this catches pseudo-elements with that specific text */
*::after,
*::before {
  content: none !important;
}

/* More specific targeting */
.table-wrapper *::after,
.table-wrapper *::before {
  display: none !important;
}

/* Remove any positioned elements that might be the hint */
.table-wrapper > *[style*='position: absolute'],
.table-wrapper *[style*='← Scroll'] {
  display: none !important;
}

/* Nuclear option - remove all pseudo-elements from table area */
section:last-child *::after,
section:last-child *::before {
  display: none !important;
}

/* ========================================
   ALTERNATIVE APPROACH - FIND AND REPLACE
   ========================================
   
   If the above doesn't work, the hint might be in
   the JavaScript. Look for this text in script.js:
   
   "← Scroll to see more →"
   
   And either:
   1. Delete those lines
   2. Comment them out with //
   3. Change the content to an empty string: content: '';
   
   ======================================== */

/* ========================================
   END OF CSS FILE
   
   This file includes:
   ✅ All original Golf Handicap Tracker styles
   ✅ Fixed grid layouts for forms and stats
   ✅ Proper handicap display styling
   ✅ Compact table that fits laptop screens
   ✅ Tees column support
   ✅ Responsive design for all screen sizes
   ✅ All button and interaction styles
   
   Should completely fix the layout issues!
   ======================================== */