@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body { background-color: #B2EBF2; display: flex; justify-content: center; align-items: center; height: 100vh; padding: 20px; }

.app-container { display: flex; width: 100%; max-width: 1200px; height: 90vh; background-color: #F8FAFC; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; }

/* Sidebar */
.sidebar { width: 250px; background-color: #0D2B5A; color: white; padding: 30px 20px; display: flex; flex-direction: column; }
.profile-section { text-align: center; margin-bottom: 40px; }
.avatar { font-size: 40px; background: white; border-radius: 50%; width: 70px; height: 70px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.profile-section h3 { font-size: 16px; font-weight: 600; }
.profile-section p { font-size: 12px; color: #94A3B8; }

.nav-menu a { display: flex; align-items: center; color: #CBD5E1; text-decoration: none; padding: 12px 15px; margin-bottom: 5px; border-radius: 8px; font-size: 14px; }
.nav-menu a.active, .nav-menu a:hover { background-color: rgba(255,255,255,0.1); color: white; }

/* Main Content */
.main-content { flex: 1; padding: 40px; background-color: #F8FAFC; overflow-y: auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.header h2 { color: #0D2B5A; }

.categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.card { padding: 20px; border-radius: 16px; color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.card h4 { font-size: 14px; margin-bottom: 8px; }
.card p { font-size: 12px; opacity: 0.9; }
.purple { background: linear-gradient(135deg, #7E57C2, #5E35B1); }
.teal { background: linear-gradient(135deg, #26A69A, #00897B); }
.pink { background: linear-gradient(135deg, #EC407A, #D81B60); }
.blue { background: linear-gradient(135deg, #42A5F5, #1E88E5); }

/* Workouts List */
.workout-row { display: flex; align-items: center; background: white; padding: 15px 20px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.2s; }
.workout-row:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.w-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 15px; font-size: 20px; }
.purple-bg { background: rgba(126, 87, 194, 0.2); }
.blue-bg { background: rgba(66, 165, 245, 0.2); }
.gold-bg { background: rgba(255, 193, 7, 0.2); }
.w-details { flex: 2; font-weight: 600; color: #334155; }
.w-pace { flex: 1; color: #64748B; font-size: 14px; }
.w-status { flex: 1; color: #64748B; font-size: 14px; text-align: right; }

/* Right Panel */
.right-panel { width: 300px; background: white; padding: 40px 20px; border-left: 1px solid #E2E8F0; }
.check-in-box { background: #F8FAFC; border: 1px dashed #CBD5E1; padding: 20px; border-radius: 16px; margin-bottom: 30px; text-align: center; }
.check-in-box h3 { color: #0D2B5A; margin-bottom: 10px; font-size: 16px;}
.check-in-box label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-top: 15px; text-align: left;}
.input-desc { font-size: 10px !important; color: #94A3B8 !important; text-align: left; margin-bottom: 5px; }
.check-in-box input { width: 100%; padding: 8px; border: 1px solid #CBD5E1; border-radius: 6px;}
.check-in-box button { background: #0D2B5A; color: white; border: none; padding: 10px 20px; border-radius: 8px; margin-top: 15px; cursor: pointer; width: 100%; font-weight: 600; }
.feedback-box { margin-top: 15px; font-size: 12px; color: #D81B60; font-weight: 600; text-align: left; }

/* Calendar Styling */
.calendar-header { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.cal-btn { background: #E2E8F0; border: none; padding: 5px 15px; border-radius: 6px; cursor: pointer; color: #0D2B5A;}
.calendar-days-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; font-size: 12px; color: #64748B; margin-bottom: 10px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.calendar-day { background: white; border-radius: 8px; min-height: 100px; padding: 10px; border: 1px solid #E2E8F0; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s;}
.calendar-day:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.day-number { font-size: 12px; font-weight: 600; color: #94A3B8; margin-bottom: 5px; align-self: flex-end;}
.cal-workout-title { font-size: 11px; font-weight: 600; color: #0D2B5A; margin-bottom: 3px; }
.cal-workout-details { font-size: 10px; color: #64748B; }
.cal-completed { background: #F0FDF4; border-color: #26A69A; }
.cal-race { background: #FFFBEB; border-color: #F59E0B; }

/* Modal Styling */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(13, 43, 90, 0.6); align-items: center; justify-content: center; }
.modal-content { background: white; padding: 30px; border-radius: 16px; width: 350px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.modal-content label { display: block; font-size: 12px; font-weight: 600; margin-top: 15px; margin-bottom: 5px; color:#334155;}
.modal-content input { width: 100%; padding: 10px; border: 1px solid #CBD5E1; border-radius: 6px; }

/* Pace Calc */
.calculator-box { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.calculator-box .inputs { margin: 15px 0; display: flex; align-items: center; gap: 10px; }
.calculator-box input { width: 70px; padding: 10px; border: 1px solid #CBD5E1; border-radius: 6px; text-align: center; }
.calculator-box button { background: #26A69A; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.pace-results { margin-top: 20px; background: #F8FAFC; padding: 15px; border-radius: 8px; border: 1px dashed #CBD5E1; }
.result-row { margin-bottom: 10px; font-size: 14px; color: #334155; }
.result-row span { font-weight: 700; color: #D81B60; }
.modal-content textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  resize: vertical;
  margin-top: 5px;
}
.w-notes { font-size: 11px; color: #94A3B8; margin-top: 5px; font-style: italic; display: block; }

/* New Buttons & Inputs */
.strava-btn { background: #fc4C02; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.action-btn { background: #0D2B5A; color: white; border: none; padding: 10px 20px; border-radius: 8px; margin-top: 15px; cursor: pointer; width: 100%; font-weight: 600; }
.calc-btn { background: #26A69A; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.save-btn { background: #26A69A; color: white; padding: 10px; border: none; border-radius: 6px; cursor: pointer; flex: 1; font-weight: bold; }
.cancel-btn { background: #E2E8F0; color: #334155; padding: 10px; border: none; border-radius: 6px; cursor: pointer; flex: 1; font-weight: bold; }
.form-input { padding: 10px; border: 1px solid #CBD5E1; border-radius: 6px; width: 100%; font-family: 'Inter', sans-serif;}

/* Widget Boxes */
.widget-box { background: white; border: 1px solid #E2E8F0; padding: 20px; border-radius: 16px; margin-bottom: 20px; }
.widget-box h3 { color: #0D2B5A; margin-bottom: 10px; font-size: 14px;}
.widget-box label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-top: 10px;}
.race-row { font-size: 13px; color: #334155; margin-bottom: 5px; display: flex; justify-content: space-between;}

/* 80/20 Split Bar */
.split-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #E2E8F0; margin-top: 10px; }
.split-easy { background: #26A69A; width: 80%; transition: width 0.5s; }
.split-hard { background: #D81B60; width: 20%; transition: width 0.5s; }

/* Dynamic Data styling in rows */
.w-weather { font-size: 12px; color: #0D2B5A; background: #E0F2FE; padding: 3px 8px; border-radius: 12px; margin-left: 10px; font-weight: bold; }
.w-metrics { display: flex; gap: 15px; font-size: 12px; margin-top: 3px;}
.w-gap { color: #D81B60; font-weight: 600;}
/* --- REVISED MOBILE RESPONSIVENESS UPGRADE --- */
@media (max-width: 900px) {
  /* Fix the vertical centering issue that hid the top of the app */
  body { 
    align-items: flex-start; /* Forces app to start at the top of the screen */
    padding: 0; 
    height: auto; 
    min-height: 100vh;
  }
  
  .app-container { 
    flex-direction: column; 
    height: auto; 
    min-height: 100vh; 
    border-radius: 0; 
    overflow: visible; /* Prevents cutting off content */
  }
  
  /* Make the Sidebar stack nicely */
  .sidebar { 
    width: 100%; 
    padding: 20px; 
    flex-direction: column; 
    align-items: center;
    gap: 15px;
  }
  
  .profile-section { 
    margin-bottom: 0; 
    text-align: center; 
  }
  
  /* Make tabs look like chunky mobile buttons */
  .nav-menu { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    gap: 10px; 
    width: 100%;
  }
  
  .nav-menu a { 
    padding: 10px 15px; 
    font-size: 13px; 
    margin-bottom: 0; 
    flex: 1; 
    text-align: center;
    justify-content: center;
  }
  
  .nav-menu .icon { display: none; } /* Hide icons to save horizontal space */

  /* Main Content Adjustments */
  .main-content { padding: 20px; overflow-y: visible; }
  
  .header { 
    flex-direction: column; 
    gap: 15px; 
    align-items: stretch; /* Makes the Strava button full width */
    text-align: center;
  }
  
  .strava-btn { justify-content: center; } 

  .categories { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 25px;}
  .card { padding: 15px; }
  
  .right-panel { width: 100%; border-left: none; border-top: 1px solid #E2E8F0; padding: 20px; }
  
  /* Calendar tweaks */
  .calendar-day { min-height: 80px; padding: 5px; }
  .cal-workout-title { font-size: 10px; line-height: 1.2; margin-bottom: 2px;}
  .cal-workout-details { font-size: 9px; }
  
  /* Modal Adjustments */
  .modal-content { width: 92%; padding: 20px; }
  .modal-content > div[style*="grid-template-columns"] { 
    grid-template-columns: 1fr; /* Stack the modal inputs vertically */
    gap: 8px;
  }
}