/* Base resets & layout */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f8fafc;
  min-height: 100vh;
  padding: 20px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.header {
  background: #1a202c;
  color:#fff;
  padding:30px;
  text-align:center;
  border-bottom: 1px solid #e2e8f0;
}
.header h1{ font-size:2.5rem; font-weight:700; margin-bottom:10px; }
.header p{ font-size:1.1rem; opacity:.9; }

.content{ padding:40px; }

/* Project info grid */
.project-info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-bottom:40px; padding:20px; background:#f8fafc; border-left:4px solid #3b82f6; }
.info-item{ display:flex; flex-direction:column; }
.info-label{ font-weight:600; color:#4a5568; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.info-value{ font-size:1.1rem; color:#2d3748; font-weight:500; }
.owners{ display:flex; flex-wrap:wrap; gap:8px; }
.owner-tag{ background:#3b82f6; color:#fff; padding:4px 12px; font-size:.9rem; font-weight:500; }

/* Gantt */
.gantt-section{ margin-bottom:40px; }
.section-title{ font-size:1.5rem; font-weight:700; color:#2d3748; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #e2e8f0; }
.gantt-container{ background:#fff; border:1px solid #e2e8f0; overflow-x:auto; overflow-y:hidden; }
.gantt-header{ display:grid; grid-template-columns:200px 1fr; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.gantt-header-cell{ padding:15px; font-weight:600; color:#4a5568; border-right:1px solid #e2e8f0; }
.timeline-header{ display:flex; flex-wrap:nowrap; gap:1px; }
.timeline-date{ padding:10px 5px; text-align:center; font-size:.8rem; color:#4a5568; border-right:1px solid #e2e8f0; white-space:nowrap; flex:0 0 auto; min-width:140px; }
.gantt-row{ display:grid; grid-template-columns:200px 1fr; border-bottom:1px solid #e2e8f0; min-height:60px; cursor:pointer; transition:background-color 0.2s ease; }
.gantt-row:hover{ background-color:#f7fafc; }
.gantt-row.selected{ background-color:#ebf8ff; border-left:4px solid #3182ce; }
.task-name{ padding:15px; font-weight:500; color:#2d3748; border-right:1px solid #e2e8f0; display:flex; align-items:center; background:#fafafa; }
.task-timeline{ position:relative; padding:10px; display:flex; align-items:center; }
/* Bars */
.task-bar{ height:24px; display:flex; align-items:center; padding:0 12px; color:#fff; font-size:.8rem; font-weight:500; transition:all .3s ease; position:absolute; }
.task-bar:hover{ transform:translateY(-2px); }
.completed{ background:#3b82f6; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.in-progress{ background:#f59e0b; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.planned{ background:#10b981; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }

/* Legend */
.legend{ display:flex; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:#4a5568; }
.legend-color{ width:16px; height:16px; border-radius:4px; }
.legend-color.completed{ background:#3b82f6;} 
.legend-color.in-progress{ background:#f59e0b;} 
.legend-color.planned{ background:#10b981;} 

/* Timeline controls */
.timeline-controls{ display:flex; gap:12px; align-items:center; margin:10px 15px 15px; flex-wrap:wrap; }
.timeline-controls strong{ color:#2d3748; }
.timeline-controls #rangeLabel{ color:#4a5568; font-size:.9rem; min-width:220px; display:inline-block; }

/* Custom dual-handle range slider */
.range-slider{ position:relative; width:380px; height:24px; }
.range-track{ position:absolute; top:50%; left:0; right:0; height:6px; transform:translateY(-50%); background:#e5e7eb; border-radius:999px; }
.range-fill{ position:absolute; top:50%; height:6px; transform:translateY(-50%); background:#3b82f6; border-radius:999px; }
.range-handle{ position:absolute; top:50%; width:18px; height:18px; transform:translate(-50%, -50%); background:#fff; border:2px solid #3b82f6; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.1); cursor:grab; touch-action:none; }
.range-handle:active{ cursor:grabbing; }

/* Project details */
.project-info.hidden { display: none; }
.section-title.hidden { display: none; }

/* Combined details & updates section */
.details-updates-section{ background:#f8fafc; padding:30px; border-left:4px solid #10b981; }

/* Updates */
.updates-section{ margin-top:20px; }
.update-item{ background:#fff; padding:20px; margin-bottom:15px; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); border-left:3px solid #3b82f6; }
.update-date{ font-size:.9rem; color:#3b82f6; font-weight:600; margin-bottom:8px; }
.update-text{ color:#4a5568; line-height:1.6; }

/* Loading indicator */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

.loading-indicator p {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

.hidden {
  display: none !important;
}

/* Footer */
.footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  color: #6b7280;
  font-size: 0.875rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Responsive */
@media(max-width:768px){
  .header h1{ font-size:2rem; }
  .project-info{ grid-template-columns:1fr; }
  .gantt-header,.gantt-row{ grid-template-columns:150px 1fr; }
  .task-name{ padding:10px; font-size:.9rem; }
  .legend{ justify-content:center; }
}